@charset "utf-8";
/* 헤더 · 푸터 · 서브 비주얼 · 메인 */

#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: var(--font-size-14);font-weight:bold;text-align:center;text-decoration:none;line-height:50px;outline-color:#f37736}

/* 화면 구분 */
.only-desktop {display:block}
.only-desktop-tablet {display:block}
.only-tablet-mobile {display:none}
.only-tablet {display:none}
.only-mobile {display:none}

/* 작업 가이드 */
#ws-wrapper {min-height:100vh}

#ws-header {position:fixed; top:0; left:0; z-index:100; overflow:auto; width:200px; height:100%; background:#fafafa; box-shadow:0 0 5px rgba(0,0,0,.2)}

.ws-menu .ui {display:block; padding: var(--space-13) 0; background:#5e31a1; color:#fff; font-size: var(--font-size-18); font-weight:700; line-height:1.5em; letter-spacing:-.03em; text-align:center; border-bottom:1px solid #3c2065}
.ws-menu .title {display:flex; align-items:center; justify-content:space-between; font-size: var(--font-size-15); font-weight:700; color:#fff; line-height:1.3em; padding: var(--space-10) var(--space-15); background:#7952b3; border-top:1px solid #3c2065}
.ws-menu .title:after {content:""; width:15px; height:15px; background:url("/images/arrow_down.svg") 50% 50% no-repeat}
.ws-menu .submenu {display:none}
.ws-menu .submenu .tt {padding: var(--space-5) var(--space-11); background:#837c8e; color:#fff; font-size: var(--font-size-14); font-weight:500; line-height:1.4em; letter-spacing:-.04em}
.ws-menu .submenu ul {display:flex; flex-wrap:wrap; padding: 0; list-style:none}
.ws-menu .submenu ul li {width:100%; border-bottom:1px solid #e5e5e5}
.ws-menu .submenu ul li.w50 {width:50%; border-right:1px solid #e5e5e5}
.ws-menu .submenu ul li.w50:nth-child(2n) {border-right:0}
.ws-menu .submenu ul li a {display:block; color:#333; text-decoration:none; font-size: var(--font-size-13); line-height:1.4em; letter-spacing:-.04em; padding: var(--space-5) var(--space-5) var(--space-5) var(--space-11)}
.ws-menu .submenu ul li a:hover,
.ws-menu .submenu ul li.active a {background:#eee; color:#653ba4; font-weight:500; padding-left: var(--space-14)}
.ws-menu.active .title {background:#6c42ab}
.ws-menu.active .title:after {transform:rotate(180deg)}
.ws-menu.active .submenu {display:block}

#ws-content {margin-left: 200px; padding: var(--space-30)}

.ws-title {display:flex; align-items:center; padding-bottom: var(--space-15); margin-bottom: var(--space-50); border-bottom:1px solid #ddd}
.ws-title h2 {flex:1 1 auto; min-width:0; width:1%; font-size: var(--font-size-30); line-height:1.3em; letter-spacing:-.04em}

.btn-psd-download {display:inline-block; padding: var(--space-8) var(--space-20); font-family:"Roboto",sans-serif; color:#fff; font-size: var(--font-size-16); font-weight:500; line-height:1.3em; background:#7952b3; border-radius:4px}

.ws-real-cont {max-width:1200px; margin: 0 auto}

.syntaxhighlighter {position:relative; font-family: Consolas, Monaco, monospace; font-size: var(--font-size-14); line-height:1.33em; margin-top: var(--space-60)}
.syntaxhighlighter pre {padding: var(--space-20); background:#282b2e; color: #a9b7c6; overflow:auto; max-height:300px; margin: 0}
.syntaxhighlighter code {}

.code-tit {font-family:"Roboto",sans-serif; font-size: var(--font-size-18); font-weight:700; line-height:1.33em; margin-bottom: var(--space-10)}  
.copy-code {position:absolute; top:0; right:0; font-size: var(--font-size-13); font-family:"맑은고딕"; letter-spacing:-.04em; color:red; background:transparent; border:0}


/* 서브 컨텐츠 */
.content-tab {margin-bottom: var(--space-30)}
.content-tab ul {display:flex; flex-wrap:wrap; gap: var(--space-5); padding: 0; list-style:none}
.content-tab ul li a {display:block; background:#555; color:#fff; padding: var(--space-5) var(--space-16); border-radius:6px}
.content-tab ul li.active a {background:#5e31a1}

.content-list {margin-bottom: var(--space-30)}
.content-list h3 {font-size: var(--font-size-26); line-height:1.3em; letter-spacing:-.04em; margin-bottom: var(--space-20)}
.content-list ul {display:flex; flex-wrap:wrap; margin: 0 calc(var(--space-18) * -1);  padding: 0; list-style:none}
.content-list ul li {width:20%; padding: 0 var(--space-18); margin-bottom: var(--space-35); text-align:center}
.content-list ul li a {display:block}
.content-list ul li .thumb {position:relative; padding-bottom: 64.8%; border:1px solid #222; border-bottom:0; border-radius:10px 10px 0 0; overflow:hidden}
.content-list ul li .thumb img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover}
.content-list ul li .tit {border-radius:0 0 10px 10px; color:#fff; line-height:1.33em; padding: var(--space-8); background:#222}
.content-list ul li .etc {margin-top: var(--space-8); font-size: var(--font-size-14); line-height:1.5em; color:red}
.content-list ul li .link {position:absolute; bottom:0; right:0; width:44px; height:44px; background:rgba(0,0,0,.5); border-radius:10px 0 0 0}
.content-list ul li .link svg {position:absolute; top:50%; left:50%; width:20px; height:20px; transform:translate(-50%,-50%); overflow:visible}
.content-list ul li .link svg path {transition:.2s}
.content-list ul li a:hover .link svg path:nth-child(1) {transform:translate(2px,-2px)}
.content-list ul li a:hover .link svg path:nth-child(2) {transform:translate(-2px,2px)}

/* 템플릿 */
.temp-tab {margin-bottom: var(--space-30)}
.temp-tab ul {display:flex; flex-wrap:wrap;  padding: 0; list-style:none}
.temp-tab ul li {display:flex; align-items:center; padding: var(--space-5) 0}
.temp-tab ul li:before {content:''; width:1px; height:14px; margin: 0 var(--space-15); background:#ccc}
.temp-tab ul li:first-child::before {display:none}
.temp-tab ul li a {display:block; color:#242424}
.temp-tab ul li.active a {color:#5e31a1; font-weight:600; text-decoration:underline; text-underline-offset:0.25em}

.temp-list ul {display:flex; flex-wrap:wrap; margin: 0 calc(var(--space-15) * -1);  padding: 0; list-style:none}
.temp-list ul li {width:16.66666666%; padding: 0 var(--space-15); margin-bottom: var(--space-40)}
.temp-list ul li a {display:block}
.temp-list ul li .thumb {position:relative; margin-bottom: var(--space-10); border-radius:10px; background:#fff; overflow:hidden}
.temp-list ul li .thumb img {width:100%}
.temp-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.3); border-radius:10px}
.temp-list ul li .tit-wrap {display:flex; align-items:center; justify-content:space-between; padding: 0 var(--space-5)}
.temp-list ul li .tit {font-size: var(--font-size-16); font-weight:500; line-height:1.4em; letter-spacing:-.02em}
.temp-list ul li .links {display:flex}
.temp-list ul li .links a {display:flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left: var(--space-4); background:#fff; border:1px solid #ccc}
.temp-list ul li .links i {width:14px; height:14px; background-position:50% 50%; background-repeat:no-repeat; background-size:contain}
.temp-list ul li .links .icon-down {background-image:url('../images/sub/icon_down.svg')}
.temp-list ul li .links .icon-link {background-image:url('../images/sub/icon_link.svg')}

.temp-view-wrap {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; overflow:auto; z-index:100}
.temp-view-wrap::-webkit-scrollbar {display:none}
.temp-view-inner {display:flex; width:100%; min-height:100%}
.temp-view-img {flex:1 1 auto; min-width:0; width:1%; padding: var(--space-50); background:#eff1f6; text-align:center}
.temp-view-cnt {position:sticky; top:0; left:0; align-self:self-start; width:25%; max-width:460px; padding: var(--space-50)}
.temp-view-cnt h2 {margin-bottom: var(--space-20); font-size: var(--font-size-24); line-height:1.33em; letter-spacing:-.02em}
.temp-view-cnt table {width:100%; border-collapse:collapse; border-spacing:0px; font-size: var(--font-size-15); line-height:1.5em; word-break:break-all}
.temp-view-cnt table th {width:120px; padding: var(--space-7) 0; vertical-align:top; text-align:left; font-size: var(--font-size-17); font-weight:600; background:none; border:0}
.temp-view-cnt table td {padding: var(--space-7) 0; vertical-align:top; border:0}
.temp-view-cnt table td a:hover {text-decoration:underline}
.temp-view-cnt .btns {display:flex; gap: var(--space-10); margin-top: var(--space-50)}
.temp-view-cnt .btns a {display:flex; align-items:center; justify-content:center; width:100%; height:48px; border:1px solid #ccc; font-weight:600; line-height:1.33em; letter-spacing:-.03em}
.temp-view-cnt .btns svg {width:24px; height:24px; margin-right: var(--space-6)}
.temp-view-cnt .btns a:hover {border-color:#000; color:#000}

.temp-view-close {position:fixed; top:0; right:0; width:100px; height:100px; z-index:10}
.temp-view-close svg {position:absolute; top:50%; left:50%; width:36px; height:36px; transform:translate(-50%,-50%)}

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

/* 헤더 */
body#main, body#sub {background:var(--ivory); color:var(--text)}
body#sub {background: #fff;}
#header.header {position:fixed; inset:0 0 auto; z-index:200; width:100%; height:var(--header-h); overflow:visible; background:transparent; border-bottom:0; transition:background .35s ease, box-shadow .35s ease, border-color .35s ease}
.header__inner {position:relative; z-index:2; display:grid; grid-template-columns:190px minmax(0, 1fr) 228px; align-items:center; column-gap: var(--space-40); max-width:1920px; height:100%; margin: 0 auto; padding: 0 var(--space-40)}
.header__logo {grid-column:1; flex-shrink:0; width:190px; height:68px; max-height:calc(var(--header-h) - 12px)}
.header__logo a {display:block; height:100%}
.header__logo img {width:100%; height:100%; object-fit:contain; object-position:left center}
#gnb.gnb {grid-column:2; justify-self:center; width:min(840px, 100%); max-width:100%; height:var(--header-h); position:relative; z-index:3; text-align:center}
#gnb.gnb > ul {display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); height:100%; margin:0; padding:0; list-style:none}
#gnb.gnb > ul > li {position:relative; min-width:0; height:100%}
#gnb.gnb > ul > li > a {position:relative; z-index:2; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; height:var(--header-h); padding:0 var(--space-12); color:#fff; font-size:var(--font-size-20); font-weight:600; line-height:1.4em; letter-spacing:-0.4px; white-space:nowrap; transition:color .25s, background .25s}
#gnb .submenu {display:none; position:absolute; top:100%; left:0; z-index:3; width:100%; margin:0; padding:0; background:#fff; overflow:hidden}
#gnb .submenu > ul {display:flex; flex-direction:column; gap:var(--space-24); margin:0; padding:var(--space-30) 0; list-style:none}
#gnb .submenu a {display:block; padding:0 var(--space-12); color:var(--text); font-size:var(--font-size-18); font-weight:400; line-height:1.56em; letter-spacing:-0.36px; text-align:center; white-space:nowrap; transition:color .2s, font-weight .2s}
#gnb .submenu a:hover, #gnb .submenu li.active a {font-weight:600; text-decoration:underline; text-underline-offset:4px}
.submenu-bg {position:absolute; top:100%; left:0; right:0; z-index:1; display:none; height:0; background:#fff; overflow:hidden}
#header.header.is-menu-open, #header.header.is-solid {background:#fff; border-bottom:1px solid transparent}
#header.header.is-solid {border-bottom-color:var(--line); box-shadow:none}
#header.header.is-menu-open {border-bottom:none; box-shadow:none}
#header.header.is-menu-open.is-solid {border-bottom:none}
#header.header.is-solid #gnb > ul > li > a, #header.header.is-menu-open #gnb > ul > li > a {color:var(--text)}
#header.header #gnb > ul > li.active > a {color:var(--green)}
#header.header #gnb > ul > li.active:hover > a, #header.header #gnb > ul > li.active:focus-within > a {background:var(--main); color:#fff}
#header.header #gnb > ul > li.active:hover > a::after, #header.header #gnb > ul > li.active:focus-within > a::after {content:""; position:absolute; bottom:0; left:50%; z-index:3; width:60px; height:1px; background:#fff; transform:translateX(-50%)}
#header.header #gnb > ul > li.active:hover .submenu, #header.header #gnb > ul > li.active:focus-within .submenu {background:var(--main)}
#header.header #gnb > ul > li.active:hover .submenu a, #header.header #gnb > ul > li.active:focus-within .submenu a {color:#fff}
#header.header.is-solid .header__tel-bg, #header.header.is-menu-open .header__tel-bg {border-color:var(--line); background:#fff; color:var(--text)}
#header.header.is-solid .header__tel-icon, #header.header.is-menu-open .header__tel-icon {background:var(--main)}
#header.header.is-solid .header__tel-icon-default, #header.header.is-menu-open .header__tel-icon-default {opacity:0}
#header.header.is-solid .header__tel-icon-on, #header.header.is-menu-open .header__tel-icon-on {opacity:1}
#header.header.is-solid .menu-toggle, #header.header.is-menu-open .menu-toggle {border-color:var(--line)}
#header.header.is-solid .menu-toggle span, #header.header.is-menu-open .menu-toggle span {background:var(--text)}
.header__tel {position:relative; display:flex; align-items:center; grid-column:3; justify-self:end; flex-shrink:0; width:228px; height:48px}
.header__tel-bg {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding: var(--space-12) var(--space-24) var(--space-12) var(--space-62); border:1px solid rgba(255,255,255,.4); border-radius:500px; background:rgba(255,255,255,.12); color:#fff; font-size: var(--font-size-16); font-weight:600; line-height:1.5em; letter-spacing:-0.28px; white-space:nowrap; backdrop-filter:blur(20px)}
.header__tel-icon {position:relative; z-index:1; display:grid; place-items:center; flex-shrink:0; width:48px; height:48px; border-radius:60px; background:#fff}
.header__tel-icon img {position:absolute; top:50%; left:50%; width:20px; height:20px; object-fit:contain; transform:translate(-50%, -50%); transition:opacity .2s ease}
.header__tel-icon-on {opacity:0}
.menu-toggle {display:none; grid-column:3; justify-self:end; align-items:center; justify-content:center; background:transparent; width:44px; height:44px; border:1px solid rgba(255,255,255,.35); border-radius:8px}
.menu-toggle > div {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-5)}
.menu-toggle span {display:block; width:20px; height:2px; background:#fff; transition:background .25s}

/* 메인 비주얼 */
.main-visual {position:relative; overflow:hidden}
.main-visual .slick-slide {position:relative; height:100vh; overflow:hidden}
.main-visual .item {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden}
.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%)}
.main-visual .item img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover}
.main-visual .caption {position:absolute; top: 50%; left:50%; width: 100%; max-width: 1500px; padding: 0 var(--container-space); transform: translate(-50%, -50%); color:#fff; z-index:40}
.main-visual .caption p {transition:1.2s; transform:translate(50px,0); opacity:0}
.main-visual .caption .txt1 {font-size: var(--font-size-60); font-weight:700; line-height:1.17em; letter-spacing:-.03em}
.main-visual .caption .txt2 {font-size: var(--font-size-30); font-weight:600; line-height:1.17em; letter-spacing:-.03em; margin-top: var(--space-30)}
.main-visual .controls {position:absolute; top: 50%; left:50%; width: 100%; max-width: 1600px; padding: 0 var(--space-100); transform: translate(-50%, -50%); display:flex; align-items:center; padding: 0 var(--space-50); margin-left: -750px; color:#fff; z-index:40}
.main-visual .pager .current {display:inline-block; width:.6em}
.main-visual .progress {position:relative; margin: 0 var(--space-10); width:150px; height:2px; background:#fff}
.main-visual .progress-bar {position:absolute; top:0; left:0; height:100%; background:var(--primary-color)}
.main-visual .slide-btn {width:24px; height:24px; margin-right: var(--space-6); background-color:#000; background-position:50% 50%; background-repeat:no-repeat; border-radius:100%; border:0; overflow:hidden}
.main-visual .slide-prev {background-image:url("/images/main/mv-prev.png")}
.main-visual .slide-next {background-image:url("/images/main/mv-next.png")}
.main-visual .slide-stop {background-image:url("/images/main/mv-stop.png")}
.main-visual .slide-play {display:none; background-image:url("/images/main/mv-play.png")}
.main-visual .active .image {transform:scale(1)}
.main-visual .active .caption p {transform:translate(0,0); opacity:1}
.main-visual .active .caption .txt1 {transition-delay:.2s}
.main-visual .active .caption .txt2 {transition-delay:.5s}
.main-visual .scroll {position:absolute; bottom:80px; left:50%; width:20px; margin-left: calc(var(--space-10) * -1); animation:scrollDown .9s linear infinite alternate; z-index:40}

.progress-bar.animated {animation:progressBar 1 linear}
.progress-bar.paused {animation-play-state:paused !important}
.progress-bar.play {animation-play-state:running !important}

@keyframes progressBar {
	0%{width:0}
	100%{width:100%}
}
@keyframes scrollDown{
	0%{transform:translateY(0)}
	100%{transform:translateY(15px)}
}

.btn-arrow {display: flex; align-items: center; gap: var(--space-8); width: fit-content; padding: var(--space-20) var(--space-34); border-radius: 100px; background: #CA484A; border: 1px solid #CA484A; color: #fff; font-size: var(--font-size-20); font-weight: 700; line-height: 1.7em; transition: .2s}
.btn-arrow:after {content: ''; display: block; width: 24px; height: 24px; background: url('/images/main/btn-arrow.svg') no-repeat center center / contain}
.btn-chk {display: flex; align-items: center; gap: var(--space-8); width: fit-content; padding: var(--space-20) var(--space-30); border-radius: 100px; background: #fff; border: 1px solid var(--dark-color); color: var(--dark-color); font-size: var(--font-size-18); font-weight: 700; line-height: 1.5556em; transition: .2s}
.btn-chk:before {content: ''; display: block; width: 24px; height: 24px; background: url('/images/main/btn-chk.svg') no-repeat center center / contain}

/* 서브 공통 */
.sub-visual {position:relative; overflow:hidden; height:576px; background:#333; color:#fff; text-align:center}
.sub-visual .bg {position:absolute; top:0; left:0; overflow:hidden; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 0; background-size:cover; transition:2s; opacity:0; transform:scale(1.1)}
.sub-visual .inner {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%)}
.sub-visual h2 {font-size: var(--font-size-52); font-weight:700; line-height:1.3em; letter-spacing:-.03em}
.sub-visual .bg1 {background-image:url("/images/common/sv1.jpg")}
.sub-visual .bg2 {background-image:url("/images/common/sv2.jpg")}
.sub-visual .bg3 {background-image:url("/images/common/sv3.jpg")}
.sub-visual .bg4 {background-image:url("/images/common/sv4.jpg")}
.sub-visual .bg5 {background-image:url("/images/common/sv5.jpg")}
.sub-visual.none-lnb .inner {padding: 0}
.loaded .sub-visual .bg {transform:scale(1); opacity: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:var(--lnb-height); padding: 0 var(--space-15); color:#242424; font-size: var(--font-size-18); font-weight:500; line-height:1.2em; letter-spacing:-.03em}
.lnb ul li.active {background:var(--primary-color); border:0}
.lnb ul li.active a {color:#fff}

.sub-title {padding-bottom: var(--space-80); max-width:1260px; margin: 0 auto}
#contArea.wide .sub-title {padding-left: var(--container-space); padding-right: var(--container-space)}
.sub-title h2 {font-size: var(--font-size-42); line-height:1.3em; color:#2c2c2c}

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

.real-cont {padding-bottom: var(--space-120)}

/* 서브 비주얼 */
.sub-hero {position:relative; display:flex; align-items:center; justify-content:center; height:400px; margin-top: var(--header-h); overflow:hidden}
.sub-hero__bg {position:absolute; inset:0}
.sub-hero__bg img {width:100%; height:100%; object-fit:cover; aspect-ratio:1920 / 630}
.sub-hero__overlay {position:absolute; inset:0; background:rgba(0, 0, 0, 0.3)}
.sub-hero__title {position:relative; z-index:1; color:#fff; font-size: var(--font-size-56); font-weight:700; line-height:1.3em; letter-spacing:-1.68px; text-align:center}
.page-company .sub-hero__bg img {object-position:center center}
.page-company .sub-hero__overlay {background:rgba(0, 0, 0, 0.22)}
.page-difference .sub-hero__bg img {object-position:center 58%}
.page-vehicle .sub-hero__bg img {object-position:center center}
.page-difference .sub-hero__overlay {background:rgba(0, 0, 0, 0.22)}
.page-vehicle .sub-hero__overlay {background:rgba(0, 0, 0, 0.3)}
.page-service .sub-hero__bg img {object-position:center center}
.page-service .sub-hero__overlay {background:rgba(0, 0, 0, 0.3)}
.sub-tabs-wrap {position:relative; z-index:2; margin-top: calc(var(--sub-tabs-h) * -0.5); padding: 0 var(--space-24)}
.sub-tabs {display:flex; align-items:stretch; max-width:var(--page-w); height:var(--sub-tabs-h); margin: 0 auto; overflow:hidden; background:#fff; box-shadow:0 4px 8px rgba(0, 0, 0, 0.08)}
.sub-tabs .swiper {width:100%; height:100%; overflow:hidden}
.sub-tabs .swiper-wrapper {display:flex; align-items:stretch; height:100%}
.sub-tabs .swiper-slide {display:flex; flex:1 1 0; min-width:0; height:auto}
.sub-tabs .swiper-slide > .sub-tabs__item {width:100%}
.sub-tabs__item {display:flex; align-items:center; justify-content:center; flex:1; min-width:0; padding: 0 var(--space-16); background:#fff; color:#999; font-size: var(--font-size-18); font-weight:600; line-height:1.78em; letter-spacing:-0.54px; text-align:center; cursor:pointer; transition:background .25s, color .25s}
a.sub-tabs__item {text-decoration:none}
.sub-tabs__item.is-active, .sub-tabs__item.active {background:var(--green); color:#fff}
.sub-tabs__item:not(.is-active):hover,
.sub-tabs__item:not(.active):hover {background:#fff; color:#666}

/* 푸터 */
#footer.footer {min-height:auto; padding: var(--space-60) var(--space-40); background:#111; color:#fff; font-size: var(--font-size-16)}
.footer__box {display:flex; flex-direction:column; gap: var(--space-40); max-width:var(--content-w); width: 100%; margin: 0 auto}
.footer__row {display:flex; align-items:center; justify-content:space-between; gap: var(--space-24)}
.footer__row--bottom {align-items:flex-end}
.footer__logo {display:block; width:96px; height:35px}
.footer__logo img {width:100%; height:100%; object-fit:contain; object-position:left center}
.footer__links {display:flex; gap: var(--space-18); color:#b7b7b7; font-size: var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-0.3px}
.footer__links a:hover {color:#fff}
.footer__left {display:flex; flex-direction:column; gap: var(--space-40); max-width:760px}
.footer__info {display:flex; flex-direction:column; gap: var(--space-12); color:#fff; font-size: var(--font-size-16); line-height:1.63em; letter-spacing:-0.32px}
.footer__contacts {display:flex; flex-wrap:wrap; gap: var(--space-12) var(--space-50); white-space:nowrap}
.footer__copy {color:#b7b7b7; font-size: var(--font-size-16); line-height:1.44em; letter-spacing:-0.3px; opacity:.9}
.footer__copy span {color:rgba(255,255,255,.12)}
.family-site {position:relative; flex-shrink:0; width:226px}
.family-site__btn {display:flex; align-items:center; justify-content:space-between; gap: var(--space-12); width:100%; height:52px; padding: var(--space-14) var(--space-30); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#fff; font-size: var(--font-size-16); font-weight:700; line-height:1.5em; letter-spacing:-0.28px; cursor:pointer}
.family-site__btn img {width:12px; height:5px; transition:transform .25s}
.family-site.is-open .family-site__btn img {transform:rotate(180deg)}
.family-site__list {display:none; position:absolute; right:0; bottom:100%; left:0; z-index:5; background:#fff}
.family-site.is-open .family-site__list {display:block}
.family-site__list a {display:block; padding: var(--space-14) var(--space-30); border-bottom:1px solid #ddd; background:#fff; color:#505050; font-size: var(--font-size-16); line-height:1.5em; letter-spacing:-0.28px}
.family-site__list a:hover {background:#fafafa; color:var(--green)}
/* 견적 바로가기 */
.quote-shortcut {position:fixed; right:24px; bottom:32px; z-index:250; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:148px; height:148px; padding:18px; border-radius:50%; background:var(--main); color:#fff; font-size:22px; font-weight:800; line-height:1.35; letter-spacing:-0.5px; text-align:center; word-break:keep-all; box-shadow:0 8px 28px rgba(0,0,0,.18); border:3px solid rgba(255,255,255,.75); transition:transform .2s ease, opacity .25s ease, visibility .25s ease, background .2s ease}
.quote-shortcut::after {content:"→"; font-size:28px; line-height:1}
.quote-shortcut:hover {background:#e89700; transform:translateY(-4px)}
.quote-shortcut:focus-visible {outline:3px solid var(--green-deep); outline-offset:4px}

/* 메인 */
body#main .side-dots{position: fixed; right: 40px; top: 50%; transform: translateY(-50%); z-index: 300; display: flex; flex-direction: column; gap: var(--space-16); pointer-events: auto}
body#main .side-dots button{width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: transparent; position: relative; transition: border-color .25s, background .25s, transform .2s; cursor: pointer; pointer-events: auto; padding: 0}
body#main .side-dots button:hover{transform: scale(1.15); border-color: #fff}
body#main .side-dots button::after{content: ""; position: absolute; inset: 4px; border-radius: 50%; background: transparent; transition: background .25s}
body#main .side-dots button.is-active{border-color: #fff}
body#main .side-dots button.is-active::after{background: #fff}
body#main .side-dots.is-dark button{border-color: rgba(44,44,44,.35)}
body#main .side-dots.is-dark button.is-active{border-color: var(--green)}
body#main .side-dots.is-dark button.is-active::after{background: var(--green)}
body#main .section{position: relative; height: 100vh; min-height: 100vh; max-height: 100vh; box-sizing: border-box; overflow: hidden}
body#main .section__inner{width: min(100% - 80px, var(--content-w)); margin: 0 auto}
body#main .eyebrow{font-size: var(--font-size-20); font-weight: 700; color: var(--main); margin-bottom: var(--space-16)}
body#main .section-title{font-size: var(--font-size-52); font-weight: 700; line-height:1.27em; color: var(--text); margin-bottom: var(--space-24)}
body#main .section-desc{font-size: var(--font-size-18); font-weight: 400; line-height:1.56em; letter-spacing: -0.36px; color: var(--text-sub)}
body#main .hero{position: relative; width: 100%; height: 100vh; min-height: 100vh; max-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--green); padding: 0; box-sizing: border-box}
body#main .hero::before, body#main .hero__seam, body#main .hero::after{display: none}
body#main .hero__bg{position: absolute; inset: 0; z-index: 0}
body#main .hero__bg img{opacity:0; visibility:hidden; width:100%; height:100%; object-fit:cover}
body#main .hero__bg::after{content:""; position:absolute; inset:0; background:var(--green)}
body#main .hero__scroll{position: absolute; left: 50%; bottom: 24px; z-index: 4; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-10); color: rgba(255, 255, 255, 0.62); pointer-events: none}
body#main .hero__scroll span{font-size: var(--font-size-11); font-weight: 500; letter-spacing: 0.18em}
body#main .hero__scroll-line{width: 1px; height: 28px; background: rgba(255, 255, 255, 0.32); overflow: hidden; position: relative}
body#main .hero__scroll-line::before{content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #fff; animation: hero-scroll-line 2.2s ease infinite}
@keyframes hero-scroll-line{0%{top: -100%}
60%{top: 100%}
100%{top: 100%}
}
body#main .hero__strip{position: absolute; left: 0; top: 0; bottom: 4px; width: 10px; z-index: 4; background: var(--green); pointer-events: none}
body#main .hero__content{position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: calc(var(--header-h) + var(--space-24)) var(--space-40) var(--space-72); box-sizing: border-box; overflow-y: auto}
body#main .hero__content > .section__inner{width: min(100%, var(--content-w)); margin: 0 auto}
body#main .hero__inner{width: 100%; pointer-events: auto}
body#main .hero__guide.survey__box{min-height: 0; background: #fff; border: 1px solid rgba(var(--green-rgb), 0.1); border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1); overflow: hidden}
body#main .hero__guide-head{text-align: center; padding: var(--space-32) var(--space-48) 0}
body#main .hero .survey__eyebrow{display: block; margin-bottom: var(--space-12); color: var(--green); font-size: var(--font-size-16); font-weight: 700; letter-spacing: 0.12em}
body#main .hero .survey__desc{font-size: var(--font-size-24); font-weight: 600; line-height:1.5em; letter-spacing: -0.48px; color: var(--text-sub)}
body#main .hero .survey__stepbar{margin-top: var(--space-24); padding-bottom: var(--space-22); border-bottom: 1px solid rgba(var(--green-rgb), 0.1)}
body#main .hero .survey__step-track{width: min(100%, 360px); margin: 0 auto; justify-content: space-between; align-items: flex-start}
body#main .hero .survey__step-item{min-width: 0; flex: 1 1 33.333%; gap: var(--space-6)}
body#main .hero .survey__step-num{width: 44px; height: 44px; font-size: var(--font-size-17); display: grid; place-items: center; line-height:1em}
body#main .hero .survey__step-item.is-done .survey__step-num{font-size: 0; color: transparent}
body#main .hero .survey__step-item.is-done .survey__step-num::after{content: "✓"; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--font-size-19); font-weight: 700; line-height:1em; color: #fff; transform: translateY(-20%)}
body#main .hero .survey__step-stage{font-size: var(--font-size-13); font-weight: 600; letter-spacing: -0.2px; line-height:1.2em; color: var(--text-sub)}
body#main .hero .survey__step-label{font-size: var(--font-size-15); font-weight: 600; letter-spacing: -0.28px; color: var(--text-sub); padding: 0}
body#main .hero .survey__step-item.is-active .survey__step-stage{color: var(--green); font-weight: 700}
body#main .hero .survey__step-item.is-active .survey__step-label{color: var(--green); font-weight: 700}
body#main .hero .survey__step-item.is-done .survey__step-stage, body#main .hero .survey__step-item.is-done .survey__step-label{color: var(--text-sub); font-weight: 600}
body#main .hero .survey__step-line{width: auto; flex: 1 1 auto; min-width: 20px; max-width: 72px; margin-top: var(--space-21); align-self: auto}
body#main .hero .survey__box-body{margin: 0 var(--space-24) var(--space-24); padding: var(--space-38) var(--space-32) var(--space-44); background: var(--ivory); border-radius: 14px; min-height: 0; align-items: center; justify-content: center}
body#main .hero .survey__stage{align-items: center}
body#main .hero .survey__content{gap: var(--space-32)}
body#main .hero .survey__panel[data-step="1"] .survey__content{gap: var(--space-34); padding-top: var(--space-6)}
body#main .hero .survey__question{font-size: var(--font-size-40); line-height:1.32em; letter-spacing: -0.8px; text-align: center}
body#main .hero .survey__question--compact{font-size: var(--font-size-32); line-height:1.4em; letter-spacing: -0.52px; max-width: 620px; margin: 0 auto}
body#main .hero .survey__question-line{display: block; white-space: nowrap}
body#main .hero .survey__panel[data-step="2"] .survey__content{gap: var(--space-18); align-items: stretch; width: 100%}
body#main .hero .survey__panel[data-step="2"] .survey__choices{gap: var(--space-40)}
body#main .hero .survey__panel[data-step="2"] .survey__choice-col{width: 140px; gap: var(--space-8)}
body#main .hero .survey__panel[data-step="2"] .survey__bus-icon-wrap{width: 140px; height: auto; display: flex; align-items: center; justify-content: center; overflow: visible}
body#main .hero .survey__panel[data-step="2"] .survey__bus-icon{width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center center}
body#main .hero .survey__panel[data-step="2"] .survey__bus-label{font-size: var(--font-size-26); margin-top: 0}
body#main .hero .survey__panel[data-step="2"] .survey__choice-badge{padding: var(--space-8) var(--space-16); font-size: var(--font-size-15); letter-spacing: -0.3px}
body#main .hero .survey__panel[data-step="2"] .survey__legal{width: 100%; max-width: none; margin: 0; padding: var(--space-12) var(--space-14); border-radius: 8px; box-sizing: border-box}
body#main .hero .survey__panel[data-step="2"] .survey__legal p{font-size: var(--font-size-14); line-height:1.42em; letter-spacing: -0.24px; margin: 0}
body#main .hero .survey__panel[data-step="2"] .survey__legal p + p{margin-top: var(--space-4)}
body#main .hero .survey__panel[data-step="2"] .survey__legal-desc{white-space: nowrap}
body#main .hero .survey__choices{gap: var(--space-48)}
body#main .hero .survey__panel[data-step="1"] .survey__choices{gap: var(--space-56)}
body#main .hero .survey__choice-col{width: 156px; gap: var(--space-8)}
body#main .hero .survey__panel[data-step="1"] .survey__choice-col{width: 200px; gap: var(--space-8)}
body#main .hero .survey__bus{gap: var(--space-10)}
body#main .hero .survey__bus-icon-wrap{width: 156px; height: auto; display: flex; align-items: center; justify-content: center; overflow: visible}
body#main .hero .survey__panel[data-step="1"] .survey__bus-icon-wrap{width: 200px; height: 148px}
body#main .hero .survey__panel[data-step="1"] .survey__bus-icon{width: 92%}
body#main .hero .survey__bus-icon{display: block; width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center center}
body#main .hero .survey__bus-label{font-size: var(--font-size-30); margin-top: 0}
body#main .hero .survey__panel[data-step="1"] .survey__bus-label{font-size: var(--font-size-30); margin-top: 0}
body#main .hero .survey__panel[data-step="2"] .survey__choice-col:first-child .survey__bus-icon{width: 92%}
body#main .hero .survey__panel[data-step="1"] .survey__choice-col:first-child .survey__bus-label, body#main .hero .survey__panel[data-step="2"] .survey__choice-col:first-child .survey__bus-label{position: relative; display: inline-block; color: var(--green); text-decoration: underline; text-decoration-color: var(--main); text-decoration-thickness: 9px; text-underline-offset: 6px; text-decoration-skip-ink: none}
body#main .hero button {border: 0; background: transparent;}
body#main .hero .survey__bus[data-survey-next] .survey__bus-icon-wrap{overflow: visible}
body#main .hero .survey__bus[data-survey-next] .survey__bus-icon{filter:drop-shadow(7px 0 0 var(--main)) drop-shadow(-7px 0 0 var(--main)) drop-shadow(0 7px 0 var(--main)) drop-shadow(0 -7px 0 var(--main)); transform-origin:50% 58%; animation:survey-yes-pulse 1.8s ease-in-out infinite}
@keyframes survey-yes-pulse{0%, 45%, 100%{transform:scale(1)} 12%{transform:scale(1.48)} 24%{transform:scale(1)} 34%{transform:scale(1.26)}}
@media (prefers-reduced-motion:reduce){body#main .hero .survey__bus[data-survey-next] .survey__bus-icon{animation:none}}
body#main .hero .survey__choice-badge{padding: var(--space-12) var(--space-24); font-size: var(--font-size-18); letter-spacing: -0.36px}
body#main .hero .survey__legal{text-align: center}
body#main .hero .survey__legal p{font-size: var(--font-size-18); line-height:1.5em}
body#main .hero .survey__purpose-grid{grid-template-columns: repeat(4, 1fr); gap: var(--space-18)}
body#main .hero .survey__purpose{padding: var(--space-28) var(--space-14) var(--space-22); gap: var(--space-18)}
body#main .hero .survey__purpose-icon{width: 120px; height: 120px}
body#main .hero .survey__purpose-icon img{width: 80px; height: 80px}
body#main .hero .survey__purpose-label{font-size: var(--font-size-20); letter-spacing: -0.4px}
body#main .hero__progress{position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 4px; background: rgba(255, 255, 255, 0.16); overflow: hidden}
body#main .hero__progress-fill{display: block; height: 100%; width: 33.333%; background: var(--main); transition: width .45s ease}
@keyframes hero-content-in{from{opacity: 0; transform: translateY(24px)}
to{opacity: 1; transform: translateY(0)}
}
body#main .hero__inner > .hero__guide-head, body#main .hero__inner > .hero__guide-body{opacity: 0; transform: translateY(24px)}
body#main .hero.is-motion-ready .hero__inner > .hero__guide-head, body#main .hero.is-motion-replay .hero__inner > .hero__guide-head{animation: hero-content-in 0.9s ease forwards; animation-delay: 0.08s}
body#main .hero.is-motion-ready .hero__inner > .hero__guide-body, body#main .hero.is-motion-replay .hero__inner > .hero__guide-body{animation: hero-content-in 0.9s ease forwards; animation-delay: 0.2s}
body#main .btn{display: inline-flex; align-items: center; justify-content: center; gap: var(--space-10); min-width: 196px; padding: var(--space-15) var(--space-50); border-radius: 60px; font-size: var(--font-size-17); font-weight: 700; letter-spacing: -0.68px; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .2s ease, box-shadow .3s ease, backdrop-filter .3s ease; position: relative; overflow: hidden}
body#main .btn:hover{transform: translateY(-2px)}
body#main .btn__dots{display: inline-flex; align-items: center; width: 28px; height: 14px; position: relative; flex-shrink: 0}
body#main .btn__dots i{position: absolute; top: 50%; display: block; width: 14px; height: 14px; border-radius: 50%; transform: translateY(-50%); transition: background .3s ease}
body#main .btn__dots i:nth-child(1){left: 0; z-index: 1}
body#main .btn__dots i:nth-child(2){left: 7px; z-index: 2}
body#main .btn__dots i:nth-child(3){left: 14px; z-index: 3}
body#main .btn--light{background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; box-shadow: none; backdrop-filter: blur(10px)}
body#main .btn--light .btn__dots i:nth-child(1){background: rgba(255,255,255,.28)}
body#main .btn--light .btn__dots i:nth-child(2){background: rgba(255,255,255,.55)}
body#main .btn--light .btn__dots i:nth-child(3){background: #fff}
body#main .btn--light:hover{background: #fff; border-color: #fff; color: var(--green); box-shadow: none}
body#main .btn--light:hover .btn__dots i:nth-child(1){background: rgba(32,90,75,.28)}
body#main .btn--light:hover .btn__dots i:nth-child(2){background: rgba(32,90,75,.55)}
body#main .btn--light:hover .btn__dots i:nth-child(3){background: var(--green)}
body#main .btn--accent{background: var(--main); border: 1px solid var(--main); color: #fff; box-shadow: none}
body#main .btn--accent .btn__dots i:nth-child(1){background: rgba(255,255,255,.35)}
body#main .btn--accent .btn__dots i:nth-child(2){background: rgba(255,255,255,.65)}
body#main .btn--accent .btn__dots i:nth-child(3){background: #fff}
body#main .btn--accent:hover{background: #e89700; border-color: #e89700; color: #fff}
body#main .btn--outline-ivory{background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; box-shadow: none}
body#main .btn--outline-ivory .btn__dots i:nth-child(1){background: rgba(255,255,255,.28)}
body#main .btn--outline-ivory .btn__dots i:nth-child(2){background: rgba(255,255,255,.55)}
body#main .btn--outline-ivory .btn__dots i:nth-child(3){background: #fff}
body#main .btn--outline-ivory:hover{background: var(--ivory); border-color: var(--ivory); color: var(--green)}
body#main .btn--outline-ivory:hover .btn__dots i:nth-child(1){background: rgba(32,90,75,.28)}
body#main .btn--outline-ivory:hover .btn__dots i:nth-child(2){background: rgba(32,90,75,.55)}
body#main .btn--outline-ivory:hover .btn__dots i:nth-child(3){background: var(--green)}
body#main .service{background: #fff; height: 100vh; min-height: 100vh; max-height: 100vh; padding: var(--header-h) 0 var(--space-40); display: flex; align-items: center; overflow: hidden}
body#main .service .section__inner{max-height: calc(100vh - var(--header-h) - 40px)}
body#main .service .eyebrow, body#main .service .section-title{text-align: center}
body#main .service .section-title{margin-bottom: 0}
body#main .service__grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20); margin-top: var(--space-32); align-items: start}
body#main .service-card{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-16); min-height: 220px; padding: var(--space-28) var(--space-24) var(--space-24); border-radius: 16px; overflow: hidden; background: var(--ivory); color: var(--green); border: 0; box-shadow: none; transform: translateY(0); transition: transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease; cursor: pointer; text-align: center}
body#main .service-card__badge{position: absolute; top: 20px; left: 24px; z-index: 2; padding: 0; background: transparent; color: rgba(var(--green-rgb), 0.32); font-size: var(--font-size-16); font-weight: 600; letter-spacing: 0.08em; transition: color .35s ease}
body#main .service-card__visual{position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center}
body#main .service-card__icon-wrap{width: 152px; height: 152px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: none; transition: transform .35s ease, background .35s ease, box-shadow .35s ease}
body#main .service-card__icon-wrap img{width: 108px; height: 108px; max-width: 100%; max-height: 100%; object-fit: contain; display: block; pointer-events: none}
body#main .service-card:nth-child(3) .service-card__icon-wrap img, body#main .service-card:nth-child(4) .service-card__icon-wrap img{width: 116px; height: 116px}
body#main .service-card__body{position: relative; z-index: 1; flex: 0; min-width: 0; padding-top: 0}
body#main .service-card__title{font-size: var(--font-size-28); font-weight: 700; line-height:1.35em; letter-spacing: -0.56px; color: #2c2c2c; transition: color .35s ease}
body#main .service-card.is-active, body#main .service-card:hover{transform: translateY(-8px); background: var(--green); box-shadow: none}
body#main .service-card.is-active .service-card__badge, body#main .service-card:hover .service-card__badge{color: rgba(255, 255, 255, 0.55)}
body#main .service-card.is-active .service-card__icon-wrap, body#main .service-card:hover .service-card__icon-wrap{transform: scale(1.05); background: #fff; box-shadow: none}
body#main .service-card.is-active .service-card__title, body#main .service-card:hover .service-card__title{color: #fff}
body#main .vehicle{background: #fffdf8; border-bottom: 1px solid rgba(228, 224, 214, 0.75); height: 100vh; min-height: 100vh; max-height: 100vh; padding: var(--header-h) 0 var(--space-40); display: flex; align-items: center; overflow: hidden}
body#main .vehicle .section__inner{width: min(100% - 60px, 1320px); max-height: calc(100vh - var(--header-h) - 32px); display: flex; flex-direction: column; justify-content: center}
body#main .vehicle__head{text-align: center; max-width: 820px; margin: 0 auto; flex-shrink: 0}
body#main .vehicle .eyebrow, body#main .vehicle .section-title, body#main .vehicle .section-desc{text-align: center}
body#main .vehicle .section-title{margin-bottom: var(--space-8); font-size: var(--font-size-48); line-height:1.25em}
body#main .vehicle .section-desc{font-size: var(--font-size-18); line-height:1.5em}
body#main .vehicle .eyebrow{margin-bottom: var(--space-12)}
body#main .vehicle__slider{position: relative; margin-top: var(--space-18); display: flex; align-items: center; gap: var(--space-24); flex-shrink: 1; min-height: 0}
body#main .vehicle__nav{width: 60px; height: 60px; border-radius: 50%; background: rgba(var(--green-rgb), 0.08); border: 1px solid rgba(var(--green-rgb), 0.08); color: var(--green); font-size: var(--font-size-26); font-weight: 600; flex-shrink: 0; display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s, transform .25s, box-shadow .3s}
body#main .vehicle__nav::after{content: "→"; font-size: 1em; line-height:1em}
body#main .vehicle__nav--prev::after{display: inline-block; transform: scaleX(-1)}
body#main .vehicle__nav:hover{background: var(--main); border-color: var(--main); color: #fff; transform: scale(1.04); box-shadow: none}
body#main .vehicle__nav:disabled{opacity: 1; cursor: default; pointer-events: none; transform: none; box-shadow: none; background: rgba(var(--green-rgb), 0.08); border-color: rgba(var(--green-rgb), 0.08); color: var(--green)}
body#main .vehicle__stage{flex: 1; min-width: 0}
body#main .vehicle__track-wrap{overflow: hidden; padding: var(--space-10) var(--space-6) var(--space-4)}
body#main .vehicle__track{display: flex; gap: var(--space-24); transition: transform .45s ease}
body#main .vehicle-card{flex: 0 0 calc((100% - 24px) / 2); min-width: 0; background: #fff; border-radius: 20px; padding: var(--space-28) var(--space-28) var(--space-32); border: 1px solid transparent; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-18); box-shadow: 0 4px 18px rgba(24, 69, 57, 0.07); transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; position: relative; overflow: hidden}
body#main .vehicle-card:hover, body#main .vehicle-card.is-active{border-color: var(--main); box-shadow: 0 6px 22px rgba(24, 69, 57, 0.1); transform: none; background: #fff}
body#main .vehicle-card h3{font-size: var(--font-size-28); font-weight: 700; line-height:1.3em; letter-spacing: -0.56px; text-align: left; color: var(--text); margin: 0; word-break: keep-all}
body#main .vehicle-card__body{display: flex; flex-direction: column; gap: var(--space-14); flex: 1; min-width: 0}
body#main .vehicle-card__img{width: 100%; aspect-ratio: 500/268; border-radius: 14px; overflow: hidden; background: #eef2ef; position: relative}
body#main .vehicle-card__img img{width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform .45s ease}
body#main .vehicle-card:hover .vehicle-card__img img, body#main .vehicle-card.is-active .vehicle-card__img img{transform: scale(1.03)}
body#main .vehicle-card__desc{font-size: var(--font-size-18); line-height:1.5em; color: var(--text-sub); letter-spacing: -0.32px; margin: 0; min-height: 24px}
body#main .vehicle-card__foot{display: flex; flex-direction: column; gap: var(--space-12); margin-top: auto; min-height: 78px}
body#main .vehicle-card__tags{display: flex; flex-wrap: wrap; gap: var(--space-8); align-content: flex-start; min-height: 36px}
body#main .vehicle-card__tags span{display: inline-flex; align-items: center; padding: var(--space-6) var(--space-16); border-radius: 8px; background: var(--ivory); color: var(--green); font-size: var(--font-size-16); font-weight: 600; letter-spacing: -0.26px; border: 1px solid rgba(var(--green-rgb), 0.08); white-space: nowrap; transition: background .25s, color .25s, border-color .25s}
body#main .vehicle-card:hover .vehicle-card__tags span, body#main .vehicle-card.is-active .vehicle-card__tags span{background: var(--green); color: #fff; border-color: var(--green)}
body#main .vehicle-card__banner{display: none}
body#main .vehicle__pager{display: flex; justify-content: center; gap: var(--space-10); margin-top: var(--space-16); flex-shrink: 0}
body#main .vehicle__pager button{width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--green-rgb), 0.2); border: 0; transition: width .25s, background .25s, border-radius .25s}
body#main .vehicle__pager button.is-active{width: 28px; border-radius: 999px; background: var(--main)}
body#main .section.survey{height: auto; min-height: 100vh; max-height: none; overflow: visible}
body#main .survey{position: relative; background: #fff; width: 100%; min-height: calc(100vh - var(--header-h)); padding: var(--header-h) 0 var(--space-48); display: flex; align-items: center; justify-content: center; box-sizing: border-box}
body#main .survey__strip{position: absolute; left: 0; top: var(--header-h); bottom: 48px; width: 10px; background: var(--green); pointer-events: none}
body#main .survey__inner{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: calc(100vh - var(--header-h) - 96px)}
body#main .survey__box{width: 100%; min-height: 580px; background: var(--ivory); border-radius: 16px; box-shadow: none; overflow: hidden; display: flex; flex-direction: column}
body#main .survey__box-head{padding: var(--space-36) var(--space-40) 0; text-align: center}
body#main .survey__eyebrow{font-size: var(--font-size-20); font-weight: 700; color: var(--main); margin-bottom: var(--space-8)}
body#main .survey__desc{font-size: var(--font-size-18); font-weight: 400; line-height:1.56em; letter-spacing: -0.36px; color: var(--text-sub); margin-bottom: 0}
body#main .survey__stepbar{display: flex; justify-content: center; margin-top: var(--space-28); padding-bottom: var(--space-28); border-bottom: 1px solid rgba(var(--green-rgb), 0.08)}
body#main .survey__step-track{display: flex; align-items: flex-start; justify-content: center}
body#main .survey__step-item{display: flex; flex-direction: column; align-items: center; gap: var(--space-10); min-width: 72px; padding: 0; position: relative; z-index: 1; background: transparent; transition: opacity .25s ease}
body#main .survey__step-item:not(.is-active):not(.is-done){opacity: 0.55}
body#main .survey__step-num{width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: var(--font-size-16); font-weight: 800; letter-spacing: 0; background: #fff; color: rgba(var(--green-rgb), 0.4); border: 2px solid rgba(var(--green-rgb), 0.14); flex-shrink: 0; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease}
body#main .survey__step-item.is-active .survey__step-num{background: var(--green); color: #fff; border-color: var(--green); box-shadow: none}
body#main .survey__step-item.is-done .survey__step-num{background: var(--green); color: transparent; border-color: var(--green); font-size: 0}
body#main .survey__step-item.is-done .survey__step-num::after{content: "✓"; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--font-size-17); font-weight: 700; line-height:1em; color: #fff; transform: translateY(-20%)}
body#main .survey__step-label{font-size: var(--font-size-16); font-weight: 600; letter-spacing: -0.28px; color: var(--text-sub); transition: color .25s ease, font-weight .25s ease}
body#main .survey__step-item.is-active .survey__step-label{color: var(--green); font-weight: 700}
body#main .survey__step-item.is-done .survey__step-label{color: rgba(var(--green-rgb), 0.7)}
body#main .survey__step-line{width: 72px; height: 2px; margin-top: var(--space-19); flex-shrink: 0; background: rgba(var(--green-rgb), 0.12); border-radius: 999px; transition: background .25s ease}
body#main .survey__step-line.is-done{background: var(--green)}
body#main .survey__box-body{flex: 1; display: flex; align-items: center; justify-content: center; margin: var(--space-24); padding: var(--space-40) var(--space-36); background: #fff; border-radius: 12px; min-height: 380px}
body#main .survey__stage{position: relative; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center}
body#main .survey__panel{display: none; flex-direction: column; align-items: center; width: 100%; padding: var(--space-8) 0}
body#main .survey__panel.is-active{display: flex; animation: survey-panel-in .4s ease}
body#main .survey__content{width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-32)}
@keyframes survey-panel-in{from{opacity: 0; transform: translateY(12px)}
to{opacity: 1; transform: translateY(0)}
}
body#main .survey__question{font-size: var(--font-size-32); font-weight: 700; line-height:1.45em; letter-spacing: -0.64px; color: var(--text); max-width: 100%; width: 100%}
body#main .survey__foot{margin: var(--space-18) 0 0; text-align: center; font-size: var(--font-size-18); font-weight: 600; line-height:1.4em; color: var(--text-sub)}
body#main .survey__question--oneline{white-space: nowrap}
body#main .survey__question em{font-style: normal; color: var(--green)}
body#main .survey__choices{display: flex; justify-content: center; align-items: flex-start; gap: var(--space-72); flex-wrap: wrap; width: 100%; margin: 0 auto; padding: 0; background: transparent; border-radius: 0; box-shadow: none}
body#main .survey__choice-col{display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 200px; flex-shrink: 0}
body#main .survey__bus{display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; padding: 0; transition: transform .25s ease}
body#main .survey__bus:hover{transform: translateY(-4px)}
body#main .survey__bus:active{transform: translateY(-1px)}
body#main .survey__bus--static{cursor: default; pointer-events: none}
body#main .survey__bus--static .survey__bus-icon{opacity: 0.62}
body#main .survey__bus--static .survey__bus-label{color: var(--text-sub)}
body#main .survey__bus--static:hover, body#main .survey__bus--static:active{transform: none}
body#main .survey__bus-icon-wrap{width: 192px; height: 110px; display: flex; align-items: center; justify-content: center; flex-shrink: 0}
body#main .survey__bus-icon{display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain}
body#main .survey__bus-label{font-size: var(--font-size-24); font-weight: 800; line-height:1em; letter-spacing: 0.06em; color: var(--text)}
body#main .survey__choice-note, body#main .survey__choice-badge{display: inline-block; margin: 0; padding: var(--space-10) var(--space-22); font-size: var(--font-size-16); font-weight: 700; line-height:1.4em; letter-spacing: -0.32px; color: var(--main); text-align: center; white-space: nowrap; background: rgba(255, 168, 0, 0.1); border: 1px solid rgba(255, 168, 0, 0.35); border-radius: 8px}
body#main .survey__legal{width: 100%; margin: 0 auto; padding: var(--space-18) var(--space-28); border-radius: 12px; background: var(--green); text-align: center}
body#main .survey__legal p{font-size: var(--font-size-18); font-weight: 400; line-height:1.45em; letter-spacing: -0.32px; color: rgba(250, 246, 235, 0.88)}
body#main .survey__legal p + p{margin-top: var(--space-6)}
body#main .survey__legal-desc{white-space: nowrap}
body#main .survey__purpose-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20); width: 100%}
body#main .survey__purpose{display: flex; flex-direction: column; align-items: center; gap: var(--space-16); padding: var(--space-28) var(--space-16) var(--space-24); border-radius: 16px; background: var(--ivory); box-shadow: none; border: 1px solid rgba(var(--green-rgb), 0.08); transition: transform .25s ease, background .25s ease, box-shadow .25s ease}
body#main .survey__purpose:hover{transform: translateY(-6px); background: var(--green); box-shadow: none}
body#main .survey__purpose:hover .survey__purpose-label{color: #fff}
body#main .survey__purpose-icon{width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: none}
body#main .survey__purpose:hover .survey__purpose-icon{background: #fff}
body#main .survey__purpose-icon img{width: 72px; height: 72px; object-fit: contain}
body#main .survey__purpose-label{font-size: var(--font-size-18); font-weight: 700; letter-spacing: -0.36px; color: #2c2c2c; transition: color .25s ease}
body#main .cta{position: relative; height: 100vh; min-height: 100vh; max-height: 100vh; display: flex; flex-direction: column; text-align: left; color: var(--text); overflow: hidden; background: var(--ivory); border-top: 1px solid rgba(44, 44, 44, 0.08)}
body#main .cta__top{position: relative; flex: 1 1 auto; display: flex; align-items: center; padding-top: var(--header-h); background: var(--ivory); overflow: hidden}
body#main .cta__top-bg{position: absolute; inset: 0; pointer-events: none; overflow: hidden}
body#main .cta__top-bg img{width: 100%; height: 100%; object-fit: cover; object-position: center}
body#main .cta__top-inner{position: relative; z-index: 1; width: min(100% - 80px, var(--content-w)); margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-44)}
body#main .cta__content{display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-18); max-width: 560px}
body#main .cta__eyebrow{display: inline-flex; align-items: center; gap: var(--space-10); margin: 0; padding: 0; border: 0; background: none; font-size: var(--font-size-15); font-weight: 700; letter-spacing: 0.16em; color: var(--green-deep)}
body#main .cta__eyebrow::before{content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--main); flex-shrink: 0}
body#main .cta__eyebrow::after{content: ""; width: 32px; height: 1px; background: var(--green-deep); opacity: .35}
body#main .cta__title{display: flex; flex-direction: column; gap: 0.12em; margin: 0; line-height:1.22em; letter-spacing: -1.4px; color: var(--text)}
body#main .cta__title-line{display: block; line-height: 1.2em;}
body#main .cta__title-line--lead{font-size: var(--font-size-50); font-weight: 500; color: var(--text)}
body#main .cta__title-line--main{font-size: var(--font-size-58); font-weight: 800; white-space: nowrap; color: var(--text)}
body#main .cta__desc{margin: 0; font-size: var(--font-size-18); line-height:1.6em; color: var(--text-sub); max-width: 480px}
body#main .cta__illust{flex-shrink: 0; width: min(26vw, 288px); display: flex; align-items: center; justify-content: center}
body#main .cta__illust img{width: 100%; max-width: 288px; height: auto; aspect-ratio: 4 / 3; object-fit: contain}
body#main .cta__bottom{flex: 0 0 auto; background: var(--main); padding: var(--space-32) 0 var(--space-36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28)}
body#main .cta__bottom-inner{width: min(100% - 80px, var(--content-w)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-40)}
body#main .cta__bottom-copy{display: flex; flex-direction: column; gap: 0; max-width: 640px}
body#main .cta__bottom-title{margin: 0; font-size: var(--font-size-26); font-weight: 700; line-height:1.2em; letter-spacing: -0.4px; color: var(--text)}
body#main .cta__bottom-desc{margin: var(--space-10) 0 0; font-size: var(--font-size-17); line-height:1.5em; color: var(--text-sub)}
body#main .cta__note{display: inline-flex; align-items: center; gap: 0; margin: var(--space-14) 0 0; align-self: flex-start; padding: var(--space-7) var(--space-14); border-radius: 999px; background: rgba(255, 255, 255, 0.58); font-size: var(--font-size-14); font-weight: 600; letter-spacing: -0.2px; color: var(--green-deep); white-space: nowrap}
body#main .cta__action{display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex-shrink: 0}
body#main .cta__bar{display: inline-flex; align-items: center; gap: var(--space-16); min-height: 60px; padding: var(--space-10) var(--space-10) var(--space-10) var(--space-32); border-radius: 999px; border: 0; background: #fff; color: var(--green-deep); font-size: var(--font-size-17); font-weight: 700; letter-spacing: -0.3px; text-decoration: none; transition: background .3s ease, color .3s ease, transform .25s ease}
body#main .cta__bar-label{display: flex; align-items: center; padding: 0}
body#main .cta__bar-go{display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--green-deep); color: var(--ivory); font-size: var(--font-size-17); line-height:1em; transition: background .3s ease, color .3s ease, transform .25s ease}
body#main .cta__bar:hover{background: var(--ivory); transform: translateY(-2px)}
body#main .cta__bar:hover .cta__bar-go{background: var(--green-deep); color: #fff; transform: translateX(2px)}
body#main .btn--ghost{min-width: 220px; padding: var(--space-16) var(--space-40); border-radius: 60px; border: 1px solid rgba(255,255,255,.6); color: #fff; background: transparent; font-size: var(--font-size-18); font-weight: 700; letter-spacing: -0.34px; transition: background .25s, border-color .25s, color .25s}
body#main .btn--ghost:hover{background: #fff; border-color: #fff; color: var(--green)}
body#main .btn--cta-main{background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7)}
body#main .btn--cta-main:hover{background: #fff; border-color: #fff; color: var(--green)}
body#main .partners{background: #fff; padding: var(--space-72) 0 var(--space-150); overflow: hidden; border-top: 1px solid var(--line)}
body#main .partners__marquee{overflow: hidden}
body#main .partners__track{display: flex; align-items: center; gap: var(--space-72); width: max-content; animation: partners-roll 55s linear infinite}
body#main .partners__track:hover{animation-play-state: paused}
body#main .partners__item{flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 240px; height: 96px; padding: var(--space-10) var(--space-16); box-sizing: border-box}
body#main .partners__item img{display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: .9; transition: opacity .25s}
body#main .partners__item:hover img{opacity: 1}
@keyframes partners-roll{from{transform: translateX(0)}
to{transform: translateX(-50%)}
}
body#main{overflow-x:hidden}
body#main .quote-shortcut.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}