@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

#wrapper {position:relative;}

.contain {max-width:1460px; width: 100%; margin:0 auto; padding-right:var(--space-container); padding-left:var(--space-container);}

/* header */
#header {position:sticky; top:0; left:0; width:100%; height:var(--header-height); background:url("../images/common/header-bg.png") center / cover no-repeat; box-shadow:0 4px 16px rgba(0,16,29,.14); z-index:100;}
#header .contain {display:flex; align-items:center; gap:var(--space-100); position:relative; height:100%; z-index:10;}
.sitelogo a {display:block; width: 144px;}
.sitelogo img {filter:brightness(0) invert(1);}
.header-content {flex:1; display:flex; align-items:center; justify-content:space-between; min-width:0;}
#gnb {display:flex;}
#gnb > ul {display:flex; align-items:center; gap:var(--space-40);}
#gnb > ul > li {position:relative;}
#gnb > ul > li > a {display:flex; align-items:center; height:var(--header-height); color:#fff; font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.02em; white-space:nowrap;}
#gnb > ul > li > a:hover {opacity:.85;}
.header-contact {display:flex; align-items:center; gap:var(--space-20);}
.contact-pill {display:flex; align-items:center; gap:var(--space-6); padding:6px var(--space-16); border-radius:500px; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.16);}
.contact-pill .icon {position:relative; flex-shrink:0; border-radius:50%; background:var(--color-sub);}
.contact-pill .icon.icon24 {width:24px; height:24px;}
.contact-pill .icon img {position:absolute; left:4px; top:4px; width:16px; height:16px;}
.contact-pill span {font-size:var(--font-size-14); font-weight:500; letter-spacing:-.02em; color:#fff; white-space:nowrap;}

/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; right:var(--space-container); width:24px; height:24px; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; gap:7px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#fff;}
#sub:not(:has(.sub-visual)) .btn-m-menu span {background:#242424}
#header.active .btn-m-menu span {background:#242424;}

.mobile-navigation {display:block;position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .home {max-height:60px; padding: 19px 20px;}
.mobile-navigation .home a {display: block;  color: #2c2c2c; font-size:20px; font-weight: 700; line-height: 1.3em;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; display:block; padding:13px 20px; color:#242424; font-size:18px; font-weight:700; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li>a div {display:flex; align-items:flex-end; gap:5px;}
.mobile-navigation .nav-menu>ul>li>a .en {order:2;  font-size:.8em; font-weight:500; line-height:1.3em; opacity:.4;}
.mobile-navigation .nav-menu>ul>li>a:after {display:none;}
.mobile-navigation .nav-menu .submenu {display:none; background:var(--color-primary); padding: 10px 0;}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:flex; align-items:flex-end; gap:5px; padding:8px 20px; color:#fff; font-size:16px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu > ul > li > a .bar {display:none;}
.mobile-navigation .nav-menu .submenu > ul > li > a .en {order:2; font-size:.8em; line-height:1.3em; font-weight:400; opacity:.4;}
.mobile-navigation .close {position:absolute; top:15px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}

.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

#menu .header-contact {display: none;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main-visual */
.main-visual {position:relative; width:100%; height:calc(100vh - var(--header-height));}
.main-visual .contain {max-width:1660px;}
.main-visual .items {position:relative; background:#000; overflow:hidden;}
.main-visual .item {position:relative; height:calc(100vh - var(--header-height)); overflow:hidden;}
.main-visual .img {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:5s linear; transform:scale(1.15);}
.main-visual .img:after {content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 55% at 8% 88%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 42%, transparent 72%), radial-gradient(ellipse 90% 70% at 0% 100%, rgba(0,0,0,.2) 0%, transparent 58%); pointer-events:none;}
.main-visual .img img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; object-position:center 40%;}
.main-visual .caption {position:absolute; bottom:var(--space-100); left:0; width:100%; color:#fff; z-index:40;}
.main-visual .caption .txt {display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-60); text-align:left;}
.main-visual .caption h2 {font-size:var(--font-size-68); font-weight:600; line-height:1.235em; letter-spacing:-.02em; text-shadow:0 2px 20px rgba(0,0,0,.35); transition:1.2s; transform:translate(-50px,0); opacity:0;}
.main-visual .caption p {max-width:582px; margin-top:calc(var(--space-24) * -1); font-size:var(--font-size-20); font-weight:500; line-height:1.7em; color:rgba(255,255,255,.9); text-shadow:0 1px 14px rgba(0,0,0,.3); transition:1.2s .15s; transform:translate(-50px,0); opacity:0;}
.main-visual .caption .btn-primary {display:inline-flex; align-items:center; justify-content:center; width:200px; height:58px; border-radius:500px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); font-size:var(--font-size-18); font-weight:600; line-height:1.3em; color:#fff; transition:1.2s .2s; transform:translate(-50px,0); opacity:0;}
.main-visual .caption .btn-primary:hover {background:rgba(255,255,255,.18);}
.main-visual .active .img {transform:scale(1);}
.main-visual .active .caption h2,
.main-visual .active .caption p,
.main-visual .active .caption .btn-primary {transform:translate(0,0); opacity:1;}
.main-visual .active .caption h2 {transition-delay:.3s;}
.main-visual .active .caption p {transition-delay:.5s;}
.main-visual .active .caption .btn-primary {transition-delay:.7s;}

.main-visual .slick-dots {position:absolute; bottom:var(--space-120); left:50%; transform:translateX(-50%); width:100%; max-width:1780px; height: 8px; padding:0 var(--space-container); margin:0 auto; text-align:left; line-height:0; z-index:5;}
.main-visual .slick-dots li {display:inline-block; margin: 0 4px;}
.main-visual .slick-dots li button {position:relative; display:block; width:60px; height:4px; background:rgba(255, 255, 255, 0.24); backdrop-filter: blur(20px); border:none; overflow:hidden; text-indent:-9999em; transition:.2s;}
.main-visual .slick-dots li button:before {display:none;}
.main-visual .slick-dots .slick-active button {background: #fff;}

.main-visual .item .video-js,
.main-visual .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .item iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.vjs-has-started .vjs-control-bar {display:none !important; visibility:hidden !important;}

/* 메인 컨텐츠 영역 */
/* 공통 */
.main-section .section-head {display:flex; flex-direction:column; gap:var(--space-24);}
.main-section .section-label {font-size:var(--font-size-16); font-weight:600; line-height:1.625em; letter-spacing:-.02em; color:var(--color-primary);}
.main-section .section-title {font-size:var(--font-size-50); font-weight:600; line-height:1.28em; letter-spacing:-.02em; color:var(--color-title);}
.main-section .section-desc {font-size:var(--font-size-20); font-weight:400; line-height:1.7em; letter-spacing:-.02em; color:var(--color-body);}
.main-section .section-head .section-label + .section-title {margin-top:calc(var(--space-12) * -1);}

/* 폐차·수출 비교 */
.main-section.sec-compare {position:relative; background:#14181c;}
.compare-grid {display:flex; align-items:stretch;}
.compare-col {position:relative; flex:1; min-width:0; display:flex; align-items:center; padding:var(--space-130) 0;}
.compare-col--bad {background:url("/images/main/scrap.jpg") center / cover no-repeat;}
.compare-col--bad:before {content:""; position:absolute; inset:0; z-index:0; background:inherit; filter:grayscale(.5) brightness(.72);}
.compare-col--bad:after {content:""; position:absolute; inset:0; z-index:0; background:rgba(10,14,20,.55);}
.compare-col--good {border-left:1px solid rgba(255,255,255,.12); background:url("/images/main/export.jpg") center / cover no-repeat;}
.compare-col--good:after {content:""; position:absolute; inset:0; z-index:0; background:rgba(0,46,96,.55);}
.compare-col-txt {position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; width:100%;}
.compare-col--bad .compare-col-txt {padding-left:max(var(--space-container), calc((100vw - 1460px) / 2)); padding-right:var(--space-60);}
.compare-col--good .compare-col-txt {padding-left:var(--space-60); padding-right:max(var(--space-container), calc((100vw - 1460px) / 2));}
.compare-title {font-size:var(--font-size-48); font-weight:600; line-height:1.292em; letter-spacing:-.02em; color:#fff;}
.compare-lead {margin-top:var(--space-20); font-size:var(--font-size-24); font-weight:500; line-height:1.417em; letter-spacing:-.02em; color:rgba(255,255,255,.88);}
.compare-tags {display:flex; flex-direction:column; gap:var(--space-6); margin-top:var(--space-16);}
.compare-tags li {position:relative; padding-left:var(--space-14); font-size:var(--font-size-18); font-weight:500; line-height:1.556em; letter-spacing:-.02em; color:rgba(255,255,255,.68);}
.compare-tags li:before {content:"•"; position:absolute; left:0; color:rgba(255,255,255,.45);}
.compare-foot {display:inline-flex; align-items:center; justify-content:center; margin-top:var(--space-28); height:48px; padding:0 var(--space-22); border-radius:500px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); font-size:var(--font-size-15); font-weight:600; line-height:1em; letter-spacing:-.02em; color:rgba(255,255,255,.85);}
.compare-guarantee span {display:block;}
.compare-guarantee .g-lead {margin-top:var(--space-20); font-size:var(--font-size-24); font-weight:500; line-height:1.417em; letter-spacing:-.02em; color:rgba(255,255,255,.9);}
.compare-guarantee .g-lead .brand {display:inline; font-weight:700; color:#ffd45e;}
.compare-guarantee .g-num {display:flex; align-items:baseline; gap:var(--space-8); margin-top:var(--space-12); font-size:var(--font-size-56); font-weight:700; line-height:1.1em; letter-spacing:-.02em; color:#ffd45e;}
.compare-guarantee .g-num-lead {display:inline; font-size:var(--font-size-24); font-weight:500; letter-spacing:-.02em; color:rgba(255,255,255,.85);}
.compare-guarantee .g-tail {margin-top:var(--space-8); font-size:var(--font-size-28); font-weight:600; line-height:1.357em; letter-spacing:-.02em; color:#fff;}
.compare-guarantee .g-count {display:inline-block; min-width:2.4ch; font-variant-numeric:tabular-nums; color:#ffd45e;}
.main-section.sec-compare .btn-solid {display:inline-flex; align-items:center; justify-content:center; gap:var(--space-8); min-width:200px; height:58px; margin-top:var(--space-36); padding:0 var(--space-32); border-radius:500px; background:#fff; font-size:var(--font-size-18); font-weight:600; line-height:1.3em; letter-spacing:-.02em; color:var(--color-primary);}
.main-section.sec-compare .btn-solid svg {width:14px; height:14px; flex-shrink:0;}
.main-section.sec-compare .btn-solid:hover {background:#ffd45e; color:var(--color-sub); box-shadow:0 10px 28px rgba(0,0,0,.25);}

/* 예상 매입가 비교 */
.main-section.sec-price {position:relative; padding:var(--space-130) 0;  border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, var(--color-sub) 0%, var(--color-primary-dark) 100%);}
.price-grid {position:relative; z-index:1; display:flex; align-items:center; gap:var(--space-80);}
.price-head {flex:0 1 29%; min-width:0; max-width:400px;}
.price-kicker {display:inline-block; font-size:var(--font-size-16); font-weight:600; line-height:1.625em; letter-spacing:-.02em; color:#ffd45e;}
.price-title {margin-top:var(--space-14); font-size:var(--font-size-50); font-weight:700; line-height:1.28em; letter-spacing:-.02em; color:#fff;}
.price-title .accent {color:#ffd45e;}
.price-desc {margin-top:var(--space-26); font-size:var(--font-size-20); font-weight:400; line-height:1.7em; letter-spacing:-.02em; color:rgba(255,255,255,.75);}
.price-car {display:flex; flex-direction:column; align-items:center; gap:var(--space-12); margin-top:var(--space-32); padding:var(--space-16) var(--space-16) var(--space-14); width:100%; max-width:340px; border-radius:var(--radius-12); background:rgba(255,255,255,.9); backdrop-filter:blur(6px); box-shadow:0 8px 24px rgba(0,0,0,.12);}
.price-car-media {display:flex; align-items:center; justify-content:center; width:100%; padding:var(--space-8); border-radius:var(--radius-8); background:#f5f5f5;}
.price-car-img {width:100%; max-width:100%; max-height:200px; height:auto; object-fit:contain;}
.price-car-info {display:flex; flex-direction:column; align-items:center; width:100%;}
.price-car .name {font-size:var(--font-size-18); font-weight:700; line-height:1.333em; letter-spacing:-.02em; color:var(--color-title);}
.price-car .year {font-size:var(--font-size-14); font-weight:400; line-height:1.429em; letter-spacing:-.02em; color:var(--color-body);}
.price-visual {flex:1; min-width:0; display:flex; align-items:center; gap:var(--space-50);}
.price-chart {flex:1; min-width:0; position:relative; padding:195px 0 0 clamp(43px, calc(86 / var(--inner) * 100vw), 86px);}
.price-chart-badge {position:absolute; right:0; top:-20px; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; width:132px; height:132px; border-radius:50%; border:1px solid rgba(74,158,255,.5); background:rgba(0,26,49,.7); box-shadow:0 0 18px rgba(74,158,255,.28), 0 0 36px rgba(74,158,255,.12); font-size:var(--font-size-16); font-weight:700; line-height:1.5em; letter-spacing:-.02em; color:#fff; text-align:center;}
.price-chart-badge span {color:var(--color-accent);}
.price-axis {position:absolute; left:0; bottom:78px; font-size:var(--font-size-16); font-weight:500; line-height:1.625em; letter-spacing:-.02em; color:rgba(255,255,255,.55);}
.price-bars {position:relative; display:flex; align-items:flex-end; gap:var(--space-40); height:380px; border-bottom:1px solid rgba(255,255,255,.18);}
.price-trend {position:absolute; left:0; right:0; bottom:0; height:calc(100% + 75px); z-index:0; pointer-events:none;}
.price-trend svg {display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 6px rgba(74,158,255,.55));}
.price-trend svg.price-trend-arrowhead {position:absolute; left:90%; top:8%; width:42px; height:42px; overflow:visible; transform:translate(-50%,-55%) rotate(48deg); filter:drop-shadow(0 2px 4px rgba(0,10,20,.35));}
.price-bar-item {position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.price-bar-label {margin-bottom:var(--space-14); padding:7px var(--space-18); border-radius:var(--radius-8); font-size:var(--font-size-16); font-weight:600; line-height:1.625em; letter-spacing:-.02em; white-space:nowrap;}
.price-bar {width:100%; max-width:140px; height:0; border-radius:8px 8px 0 0; transition:height .6s cubic-bezier(.22,1,.36,1);}
.price-bar-item--scrap .price-bar-label {background:#4b5561; color:rgba(255,255,255,.9);}
.price-bar-item--scrap .price-bar {background:#4b5561;}
.price-bar-item--local .price-bar-label {background:var(--color-primary); color:#fff;}
.price-bar-item--local .price-bar {background:var(--color-primary);}
.price-bar-item--river .price-bar-label {background:#ffd45e; color:var(--color-sub);}
.price-bar-item--river .price-bar {background:#ffd45e;}
.price-values {display:flex; gap:var(--space-40); padding-top:var(--space-22);}
.price-values > div {flex:1; text-align:center; font-size:var(--font-size-16); font-weight:500; letter-spacing:-.02em; color:rgba(255,255,255,.5);}
.price-values .num {margin-right:3px; font-size:var(--font-size-34); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#fff;}
.price-values .is-river {color:rgba(255,255,255,.7);}
.price-values .is-river .num {color:#ffd45e;}
.price-callouts {flex:0 0 23%; max-width:210px; display:flex; flex-direction:column;}
.price-callout {padding:var(--space-22) 0; border-top:1px solid rgba(255,255,255,.14);}
.price-callout:last-child {border-bottom:1px solid rgba(255,255,255,.14);}
.price-callout .label {font-size:var(--font-size-15); font-weight:500; line-height:1.6em; letter-spacing:-.02em; color:rgba(255,255,255,.55);}
.price-callout .multi {margin-top:var(--space-2); font-size:var(--font-size-36); font-weight:700; line-height:1.278em; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#ffd45e;}
.price-note {margin-top:var(--space-60); font-size:var(--font-size-15); line-height:1.6em; letter-spacing:-.02em; color:rgba(255,255,255,.45);}
.price-bar-label,
.price-values > div,
.price-callout {opacity:0; transform:translateY(12px); transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);}
.main-section.sec-price.is-visible .price-bar-label,
.main-section.sec-price.is-visible .price-values > div,
.main-section.sec-price.is-visible .price-callout {opacity:1; transform:translateY(0);}
.main-section.sec-price.is-visible .price-bar {height:var(--bar-h);}
.main-section.sec-price.is-visible .price-bar-item--local .price-bar {transition-delay:.08s;}
.main-section.sec-price.is-visible .price-bar-item--river .price-bar {transition-delay:.16s;}
.main-section.sec-price.is-visible .price-bar-item--local .price-bar-label,
.main-section.sec-price.is-visible .price-values > *:nth-child(2) {transition-delay:.3s;}
.main-section.sec-price.is-visible .price-bar-item--river .price-bar-label,
.main-section.sec-price.is-visible .price-values > *:nth-child(3) {transition-delay:.38s;}
.main-section.sec-price.is-visible .price-callout:first-child {transition-delay:.5s;}
.main-section.sec-price.is-visible .price-callout:last-child {transition-delay:.58s;}

/* 원스톱 서비스 진행 절차 */
.main-section.sec-flow {position:relative; padding:var(--space-130) 0; border-top:1px solid #ddd; background:#fff;}
.main-section.sec-flow .contain {display:flex; flex-direction:column; gap:var(--space-60);}
.flow-track {display:flex; align-items:stretch; gap:var(--space-24); list-style:none;}
.flow-step {position:relative; flex:1; min-width:0;}
.flow-step:not(:last-child):after {content:""; position:absolute; top:50%; right:calc(var(--space-24) * -1); width:var(--space-24); height:14px; margin-top:calc(-7px + var(--space-18) * -1); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6h8M7 3l3 3-3 3' stroke='%23005cbc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; opacity:.55; pointer-events:none;}
.flow-step > div {display:flex; flex-direction:column; align-items:center; height:100%; gap:var(--space-22); padding:var(--space-32) var(--space-10) var(--space-28); border-radius:var(--radius-16); background:#fff; border:1px solid #ddd; text-align:center; transition:background .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);}
.flow-step > div:hover {background:#f8fbff; border-color:rgba(0,92,188,.3); box-shadow:0 8px 24px rgba(0,92,188,.08); transform:translateY(-4px);}
.flow-num {width:44px; height:44px; border-radius:50%; background:var(--color-primary); color:#fff; font-size:var(--font-size-16); font-weight:700; letter-spacing:-.02em; display:grid; place-items:center; flex-shrink:0;}
.flow-icon {display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; background:rgba(0,92,188,.06); border:1px solid rgba(0,92,188,.12);}
.flow-icon .icon.icon32 {width:32px; height:32px;}
.flow-icon .icon img {width:100%; height:100%;}
.flow-title {font-size:var(--font-size-18); font-weight:700; letter-spacing:-.02em; line-height:1.444em; color:var(--color-title); word-break:keep-all;}

/* 전국 어디서든 비대면 팔기 OK! */
.main-section.sec-remote {position:relative; background:#fff;}
.remote-hero {position:relative; padding:var(--space-100) 0 var(--space-200); background:linear-gradient(135deg, var(--color-sub) 0%, #001528 55%, #002a52 100%);}
.remote-hero:before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 40%, rgba(74,158,255,.08) 0%, transparent 42%), linear-gradient(115deg, transparent 55%, rgba(74,158,255,.03) 55%, transparent 100%); pointer-events:none;}
.remote-hero-inner {position:relative; z-index:1; display:flex; align-items:center; gap:var(--space-48);}
.remote-copy {flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-24);}
.remote-label {font-size:var(--font-size-16); font-weight:600; letter-spacing:-.02em; line-height:1.625em; color:rgba(255,255,255,.72);}
.remote-title {margin-top:calc(var(--space-12) * -1); font-size:var(--font-size-50); font-weight:600; letter-spacing:-.02em; line-height:1.28em; color:#fff;}
.remote-title .accent {color:var(--color-accent);}
.remote-desc {font-size:var(--font-size-20); font-weight:400; letter-spacing:-.02em; line-height:1.6em; color:rgba(255,255,255,.82);}
.remote-features {display:grid; grid-template-columns:repeat(2, minmax(0, max-content)); gap:var(--space-16) var(--space-32); margin-top:var(--space-28); list-style:none;}
.remote-feature {display:flex; align-items:center; gap:var(--space-12); font-size:var(--font-size-16); font-weight:600; letter-spacing:-.02em; line-height:1.5em; color:rgba(255,255,255,.92); word-break:keep-all;}
.remote-feature-icon {display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.22);}
.remote-feature-icon .icon.icon22 {width:22px; height:22px;}
.remote-feature-icon .icon img {width:100%; height:100%;}
.remote-visual {flex:0 1 38%; min-width:0; max-width:520px; display:flex; align-items:center; justify-content:flex-end;}
.remote-visual-img {display:block; width:100%; max-width:520px; height:auto; aspect-ratio:520 / 320; object-fit:contain; border-radius:var(--radius-16);}
.remote-cards-wrap {position:relative; z-index:2; margin-top:calc(var(--space-140) * -1);}
.remote-cards {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
.remote-card {min-width:0;}
.remote-card > div {position:relative; display:flex; flex-direction:column; gap:var(--space-12); min-height:280px; padding:var(--space-36) var(--space-32) var(--space-32); border-radius:var(--radius-16); background:#fff; border:1px solid #ddd; box-shadow:0 8px 24px rgba(0,0,0,.06); transition:border-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);}
.remote-card > div:after {content:""; position:absolute; right:var(--space-16); bottom:var(--space-16); width:88px; height:88px; opacity:.3; pointer-events:none; background:no-repeat center / contain;}
.remote-card--navy > div:after {background-image:url("/images/main/icon-chatbot.svg");}
.remote-card--teal > div:after {background-image:url("/images/main/icon-instagram.svg");}
.remote-card--kakao > div:after {background-image:url("/images/main/icon-kakao.svg");}
.remote-card > div:hover {border-color:rgba(0,92,188,.3); box-shadow:0 8px 24px rgba(0,92,188,.08); transform:translateY(-4px);}
.remote-card-title {font-size:var(--font-size-24); font-weight:700; letter-spacing:-.02em; line-height:1.417em; color:var(--color-title);}
.remote-card-desc {font-size:var(--font-size-16); font-weight:400; letter-spacing:-.02em; line-height:1.375em; color:var(--color-body);}
.remote-card-btn {display:inline-flex; align-items:center; gap:var(--space-6); align-self:flex-start; margin-top:auto; padding:var(--space-14) var(--space-24); border-radius:500px; background:var(--color-primary); font-size:var(--font-size-16); font-weight:600; letter-spacing:-.02em; color:#fff; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), background .25s cubic-bezier(.22,1,.36,1); border: none;}
.remote-card-btn:hover {transform:translateY(-2px); background:#004a9a; box-shadow:0 8px 20px rgba(0,92,188,.2);}
.remote-card-btn svg {width:14px; height:14px; flex-shrink:0;}
.remote-card--kakao .remote-card-btn {background:#fee500; color:#191919;}
.remote-card--kakao .remote-card-btn:hover {background:#f5d900; box-shadow:0 8px 20px rgba(0,0,0,.12);}
.remote-privacy {display:flex; align-items:center; gap:var(--space-20); margin-top:var(--space-32); padding:var(--space-24) var(--space-32); border-radius:var(--radius-16); border:1px solid #ddd; background:#f5f5f5;}
.remote-privacy-icon {display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; border-radius:50%; background:var(--color-primary);}
.remote-privacy-icon .icon.icon22 {width:22px; height:22px;}
.remote-privacy-icon .icon img {width:100%; height:100%;}
.remote-privacy-title {flex-shrink:0; font-size:var(--font-size-18); font-weight:700; letter-spacing:-.02em; line-height:1.444em; color:var(--color-title); white-space:nowrap;}
.remote-privacy-divider {flex-shrink:0; width:1px; height:28px; background:#ddd;}
.remote-privacy-desc {font-size:var(--font-size-16); font-weight:400; letter-spacing:-.02em; line-height:1.625em; color:var(--color-body);}

/* 검증된 전문가 */
.main-section.sec-diesel {padding:var(--space-130) 0; background:#fff;}
.main-section.sec-diesel .contain {display:flex; flex-direction:column; gap:var(--space-60);}
.main-section.sec-diesel .diesel-block + .diesel-block {margin-top:var(--space-56);}
.diesel-body .diesel-note {margin-top:var(--space-48);}
.diesel-group-title {display:inline-flex; align-items:center; gap:var(--space-10); margin-bottom:var(--space-24); padding:var(--space-10) var(--space-20); border-radius:var(--radius-8); background:var(--color-primary); font-size:var(--font-size-18); font-weight:700; letter-spacing:-.02em; line-height:1.444em; color:#fff;}
.diesel-group-title .icon.icon28 {width:28px; height:28px; flex-shrink:0;}
.diesel-group-title .icon img {width:100%; height:100%; object-fit:contain;}
.diesel-grid {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--space-12); list-style:none;}
.diesel-item {min-width:0; padding:var(--space-16) var(--space-12) var(--space-20); border:1px solid #ddd; border-radius:var(--radius-16); background:#fff; text-align:center; word-break:keep-all; transition:border-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);}
.diesel-item:hover {border-color:rgba(0,92,188,.3); box-shadow:0 8px 24px rgba(0,92,188,.08);}
.diesel-thumb {display:flex; align-items:center; justify-content:center; aspect-ratio:4 / 3; margin-bottom:var(--space-12); overflow:hidden;}
.diesel-thumb img {width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;}
.diesel-name {font-size:var(--font-size-18); font-weight:700; letter-spacing:-.02em; line-height:1.444em; color:var(--color-title);}
.diesel-year {margin-top:var(--space-4); font-size:var(--font-size-14); font-weight:600; letter-spacing:-.02em; line-height:1.571em; color:var(--color-primary);}
.diesel-thumb--import {flex-direction:column; justify-content:flex-start; padding:var(--space-8) 0 0;}
.diesel-brand-logo-box {display:flex; align-items:center; justify-content:center; width:80px; height:40px; margin:0 auto var(--space-10);}
.diesel-brand-logo-box img {max-width:90%; max-height:90%; object-fit:contain;}
.diesel-import-car {flex:1; display:flex; align-items:center; justify-content:center; width:100%; min-height:0;}
.diesel-import-car img {width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;}
.diesel-note {display:flex; align-items:center; gap:var(--space-12); padding:var(--space-20) var(--space-24); border:1px solid #ddd; border-radius:var(--radius-16); background:#f5f5f5;}
.diesel-note-icon {display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border-radius:50%; background:var(--color-primary); font-size:var(--font-size-15); font-weight:700; font-style:normal; line-height:1em; color:#fff;}
.diesel-note p {font-size:var(--font-size-16); font-weight:500; letter-spacing:-.02em; line-height:1.625em; color:var(--color-body);}
.diesel-disclaimer {margin-top:var(--space-12); font-size:var(--font-size-14); font-weight:400; letter-spacing:-.02em; line-height:1.571em; color:rgba(1,33,60,.45);}

.main-section.sec-consultants {padding:var(--space-130) 0; background:#f5f5f5;}
.main-section.sec-consultants .contain {display:flex; flex-direction:column; gap:var(--space-60);}
.consultant-swiper {width:100%; overflow:hidden;}
.consultant-swiper .swiper-slide {height:auto;}
.consultant-card {height:100%; display:flex; flex-direction:column; border:1px solid #ddd; border-radius:var(--radius-16); overflow:hidden; background:#fff; transition:border-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1);}
.consultant-card:hover {border-color:rgba(0,92,188,.3); box-shadow:0 8px 24px rgba(0,92,188,.08);}
.consultant-card .photo {position:relative; width:100%; aspect-ratio:4 / 5; background:#ececec; overflow:hidden;}
.consultant-card .photo--placeholder {background:#d9d9d9;}
.consultant-card .photo img {position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center top;}
.consultant-card .info {flex:1; display:flex; flex-direction:column; gap:var(--space-16); padding:var(--space-28) var(--space-24) var(--space-32); background:#fff;}
.consultant-card .name {font-size:var(--font-size-24); font-weight:700; letter-spacing:-.02em; line-height:1.417em; color:var(--color-title);}
.consultant-card .desc {font-size:var(--font-size-16); letter-spacing:-.02em; line-height:1.625em; color:var(--color-body);}
.consultant-controls {display:flex; align-items:center; justify-content:space-between; gap:var(--space-24);}
.main-section.sec-consultants .arrow-btns {display:flex; gap:var(--space-10);}
.main-section.sec-consultants .arrow-btn {position:relative; display:inline-grid; place-items:center; width:56px; height:56px; flex-shrink:0; border:1px solid #ddd; border-radius:50%; background:#fff; transition:border-color .25s cubic-bezier(.22,1,.36,1), background .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1), opacity .25s cubic-bezier(.22,1,.36,1);}
.main-section.sec-consultants .arrow-btn:after {content:""; width:8px; height:8px; border-right:2px solid var(--color-body); border-bottom:2px solid var(--color-body); transform:rotate(-45deg); transition:border-color .25s cubic-bezier(.22,1,.36,1);}
.main-section.sec-consultants .arrow-btn.prev:after {transform:rotate(135deg);}
.main-section.sec-consultants .arrow-btn:hover {border-color:var(--color-primary); background:var(--color-primary); box-shadow:0 4px 16px rgba(0,92,188,.2); transform:scale(1.04);}
.main-section.sec-consultants .arrow-btn:hover:after {border-color:#fff;}
.main-section.sec-consultants .arrow-btn:active:not(.is-disabled) {transform:scale(.98);}
.main-section.sec-consultants .arrow-btn.is-disabled {cursor:default;}
.main-section.sec-consultants .carousel-progress {flex:1; position:relative; height:2px; background:#ddd;}
.main-section.sec-consultants .carousel-progress-bar {position:absolute; left:0; top:0; height:100%; width:25%; background:var(--color-primary); transition:width .45s cubic-bezier(.22,1,.36,1);}

.main-section.sec-why {position:relative; padding:var(--space-150) 0; background:linear-gradient(180deg, var(--color-sub) 0%, var(--color-primary-dark) 100%);}
.main-section.sec-why:before {content:""; position:absolute; inset:0; z-index:0; background:url("/images/main/why-bg.png") center / cover no-repeat; opacity:.28;}
.why-river {position:relative; z-index:1; display:flex; align-items:center; gap:var(--space-100);}
.why-left {width: 36%; max-width: 499px; display:flex; flex-direction:column; gap:var(--space-70);}
.why-label {font-size:var(--font-size-16); font-weight:600; letter-spacing:-.02em; line-height:1.625em; color:#fff;}
.why-title {margin-top:var(--space-12); font-size:var(--font-size-50); font-weight:600; letter-spacing:-.02em; line-height:1.28em; color:#fff;}
.why-tabs {display:flex; flex-direction:column; width:100%;}
.why-tab {display:flex; align-items:center; justify-content:space-between; gap:var(--space-16); width:100%; padding:var(--space-20) var(--space-30); border-radius:500px; font-size:var(--font-size-20); font-weight:400; letter-spacing:-.02em; line-height:1.5em; color:#fff; background: transparent; border: none; text-align:left; opacity:.6; transition:opacity .25s, background .25s;}
.why-tab:hover {opacity:1;}
.why-tab.is-active {opacity:1; background:var(--color-primary);}
.why-tab .dot {width:8px; height:8px; flex-shrink:0; border-radius:50%; background:#fff;}
.why-right-wrap {flex:1; max-width:800px; min-width:0;}
.why-right {position:relative; aspect-ratio:8 / 6; border-radius:var(--radius-32); overflow:hidden;}
.why-panel {position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;}
.why-panel[hidden] {display:none;}
.why-panel .panel-bg {position:absolute; inset:0;}
.why-panel .panel-bg img {display:block; width:100%; height:100%; object-fit:cover;}
.why-panel .panel-bg:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 57.167%, rgba(0,0,0,.8) 100%);}
.why-panel-content {position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--space-16); padding:0 var(--space-40) var(--space-40);}
.why-panel-content .sub {font-size:var(--font-size-16); letter-spacing:-.02em; line-height:1.625em; color:rgba(255,255,255,.88);}
.why-panel-content h3 {font-size:var(--font-size-32); font-weight:600; letter-spacing:-.02em; line-height:1.438em; color:#fff;}
.why-panel-content p {font-size:var(--font-size-18); letter-spacing:-.02em; line-height:1.444em; color:rgba(255,255,255,.88);}

/* 서브 공통 (비주얼, 타이틀 등 전체적인 서브공통레이아웃) */ 
.sub-visual {position:relative; width:100%; height:clamp(260px, calc(640 / var(--inner) * 100vw), 640px); overflow:hidden; color:#fff; background-color:#eee; }
.sub-visual .bg {position:absolute; inset:0; width:100%; height:100%; background-position:50% 50%; background-size:cover; animation:sv-zoomIn 5s forwards linear;}
.sub-visual .cell {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:100%; text-align:center;}
.sub-visual h2 {font-size:var(--font-size-68); line-height:1.294em; letter-spacing: -.02em; font-weight: 600;}

.sub-visual .bg1 {background-image:url("../images/all/sub-visual1.jpg");}
.sub-visual .bg2 {background-image:url("../images/all/sub-visual2.jpg");}
.sub-visual .bg3 {background-image:url("../images/all/sub-visual3.jpg");} 
.sub-visual .bg4 {background-image:url("../images/all/sub-visual4.jpg");} 
.sub-visual .bg5 {background-image:url("../images/all/sub-visual4.jpg");} 

@keyframes sv-zoomIn {
    0% {transform:scale(1.1);}
    100% {transform:scale(1);}
}

.lnb-wrap {position:relative; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.lnb {margin:0 auto; max-width:1200px;}
.lnb ul {display:flex;}
.lnb ul li {flex:1; text-align:center; border-right:1px solid #ddd;}
.lnb ul li:first-child {border-left:1px solid #ddd;}
.lnb ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:60px; padding:0 15px; color:#242424; font-size:18px; font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
.lnb ul li.active {background:#42ade2; border:0;}
.lnb ul li.active a {color:#fff;}

#contArea {max-width:1460px; padding:0 var(--space-container); margin:0 auto;}
#contArea.wide {max-width:100%; padding:0;}

.sub-title h2 {position: relative; padding-top: var(--space-120); padding-bottom: var(--space-80); font-size:var(--font-size-48); font-weight:600; color:#2c2c2c; line-height:1.375em; text-align: center;}

.real-cont {min-height:300px; padding-bottom: var(--space-160);}
.real-cont.pb0 {padding-bottom: 0;}

/* footer */
#footer {position:relative; width:100%; padding:var(--space-60) 0; background:#000; color:#fff; z-index:1;}
#footer .contain {display:flex; flex-direction:column; gap:var(--space-40);}
.ft-links {display:flex; gap:18px; font-size:var(--font-size-15); letter-spacing:-.02em; color:rgba(255,255,255,.8);}
.ft-divider {height:1px; background:rgba(255,255,255,.2);}
.ft-mid {display:flex; align-items:center; justify-content:space-between; gap:var(--space-24);}
.ft-info {display:flex; flex-direction:column; gap:var(--space-8);}
.ft-info .address {font-size:var(--font-size-16); font-weight:600; line-height:1.5em; letter-spacing:-.02em; color:#fff;}
.ft-info .contacts {display:flex; flex-wrap:wrap; gap:0 var(--space-40); font-size:var(--font-size-16); letter-spacing:-.02em; color:rgba(255,255,255,.8);}
.ft-logo {width: 144px;}
.ft-logo img { width:auto; filter:brightness(0) invert(1);}
.ft-bottom {display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-40); flex-wrap:wrap;}
.ft-contact-block {display:flex; gap:var(--space-100);}
.ft-phone h4,
.ft-hours h4 {margin-bottom:var(--space-16); font-size:var(--font-size-24); font-weight:700; line-height:1.416em; letter-spacing:-.02em; color:#fff;}
.ft-phone p {font-size:var(--font-size-40); font-weight:700; line-height:1.25em; letter-spacing:-.02em; color:#fff;}
.ft-hours-row {display:flex; gap:29px;}
.ft-hours-row strong {display:block; font-size:var(--font-size-20); font-weight:600; line-height:1.5em;}
.ft-hours-row span {font-size:var(--font-size-16); line-height:1.625em;}
.ft-copy {text-align:right; font-size:var(--font-size-15); letter-spacing:-.02em; color:rgba(255,255,255,.4);}
.ft-copy .design {margin-top:var(--space-8); color:rgba(255,255,255,.2);}

/* inquiry float + modal */
.inquiry-float {position:fixed; right:var(--space-24); top:50%; z-index:900; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-10); width:76px; padding:var(--space-16) var(--space-12) var(--space-18); border-radius:500px; border:1px solid rgba(255,255,255,.3); background:linear-gradient(180deg, var(--color-primary) 0%, #004a9a 100%); box-shadow:0 10px 26px rgba(0,26,49,.32); color:#fff; transform:translateY(-50%);}
.inquiry-float:hover {transform:translateY(calc(-50% - 2px)); box-shadow:0 12px 30px rgba(0,26,49,.36);}
.inquiry-float-icon {display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#fff; color:var(--color-primary);}
.inquiry-float-icon svg {width:22px; height:22px;}
.inquiry-float-text {font-size:var(--font-size-16); font-weight:700; line-height:1.25em; letter-spacing:-.02em; text-align:center; word-break:keep-all;}