@charset "utf-8";
/* layout — 공통 · 헤더 · 서브비주얼 · 메인 · 푸터 */
/* 공통 */
#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; }
.contain { width: 100%; max-width: 1260px; padding-left: var(--container-space); padding-right: var(--container-space); margin: 0 auto; }
#contArea { max-width: 1260px; margin: 0 auto; padding-left: var(--container-space); padding-right: var(--container-space); }
#contArea.wide { max-width: 100%; width: 100%; padding: 0; }
#contArea.wide .sub-title { padding-left: var(--container-space); padding-right: var(--container-space); }
.sub-title { padding: var(--space-80) 0; text-align: center; }
.sub-title h2 { font-size: var(--font-size-32); line-height: 1.3em; }
.real-cont { min-height: 300px; padding-bottom: var(--space-120); }
/* 헤더 */
#header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; background: #fff; border-bottom: 1px solid #ddd; z-index: 100; }
#header .contain { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); z-index: 10; }
.sitelogo { color: #242424; font-size: var(--font-size-32); font-weight: 700; line-height: 1.3em; }
#gnb { text-align: center; flex: 1 1 auto; min-width: 0; width: 1%; }
#gnb>ul { display: flex; justify-content: flex-end; }
#gnb>ul>li { position: relative; padding: 0 var(--space-45); }
#gnb>ul>li>a { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; height: var(--header-height); color: #242424; font-size: var(--font-size-18); font-weight: 600; line-height: 1.3em; }
#gnb>ul>li.active>a { color: var(--color-primary); }
#gnb .submenu { position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; text-align: center; }
#gnb .submenu>ul { padding: var(--space-20) var(--space-10); }
#gnb .submenu>ul>li>a { display: block; padding: var(--space-10) 0; color: #454545; font-size: var(--font-size-16); line-height: 1.33em; }
#gnb .submenu>ul>li>a:hover { text-decoration: underline; }
#gnb .submenu>ul>li.active>a { color: #42ade2; }
.submenu-bg { display: none; position: absolute; width: 100%; left: 0; background: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #eee; }
.btn-m-menu { display: none; position: relative; width: 24px; height: 24px; }
.btn-m-menu div { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: var(--space-7); width: 100%; height: 100%; }
.btn-m-menu span { display: block; width: 100%; height: 2px; background: #121212; }
.mobile-navigation { display: none; 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 { display: flex; align-items: center; height: 80px; padding: 0 20px; color: #242424; font-size: 19px; font-weight: 700; line-height: 1.5em; }
.mobile-navigation .nav-menu>ul { border-top: 1px solid #ddd; }
.mobile-navigation .nav-menu>ul>li { border-bottom: 1px solid #ddd; }
.mobile-navigation .nav-menu>ul>li>a { position: relative; padding: 10px 48px 10px 20px; display: block; color: #242424; font-size: 19px; font-weight: 700; line-height: 1.5em; }
.mobile-navigation .nav-menu>ul>li>a:after { content: ""; position: absolute; top: 50%; right: 20px; transform: translateY(-75%) rotate(45deg); width: 11px; height: 11px; border-right: 2px solid #505050; border-bottom: 2px solid #505050; }
.mobile-navigation .nav-menu>ul>li.active>a { color: #fff; background: #42ade2; }
.mobile-navigation .nav-menu>ul>li.active>a:after { transform: translateY(-35%) rotate(-135deg); border-color: #fff; }
.mobile-navigation .nav-menu .submenu { display: none; background: #f8f8f8; color: #454545; font-size: 16px; font-weight: 400; line-height: 1.5em; }
.mobile-navigation .nav-menu .submenu ul li { border-top: 1px solid #e5e5e5; }
.mobile-navigation .nav-menu .submenu ul li a { display: block; padding: 12px 20px; }
.mobile-navigation .nav-menu .submenu ul li a:hover { color: #42ade2; }
.mobile-navigation .close { position: absolute; top: 25px; 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; }
html.menu-opened { overflow: hidden; }
html.menu-opened .mobile-navigation { -ms-transform: translateX(0); transform: translateX(0); }
html.menu-opened .mobile-overlay { display: block; }
#gnb a.is-unlinked, .lnb a.is-unlinked, .mobile-navigation a.is-unlinked { cursor: default; }
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; width: 100%; background: #fff; border-bottom: none !important; box-shadow: none; height: var(--header-height); overflow: visible; }
#header .contain { display: flex; align-items: center; justify-content: space-between; overflow: visible; max-width: min(var(--hero-artboard-width), 100%); width: 100%; height: var(--header-height); min-height: var(--header-height); margin-left: auto; margin-right: auto; padding-left: var(--header-inset-x); padding-right: var(--header-inset-x); box-sizing: border-box; }
#header .submenu-bg { display: none !important; }
.sitelogo { flex-shrink: 0; }
.sitelogo a { display: block; line-height: 0; }
.sitelogo img { display: block; width: auto; height: var(--header-logo-height); max-height: calc(var(--header-height) - 24px); aspect-ratio: 193 / 127; object-fit: contain; }
#header #gnb { flex: 1 1 auto; min-width: 0; max-width: 100%; text-align: right; }
.gnb--flat > ul, .gnb--dropdown > ul { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: var(--header-gnb-gap); margin: 0; max-width: 100%; }
#header #gnb.gnb--flat > ul > li, #header #gnb.gnb--dropdown > ul > li { position: relative; padding: 0; }
#header #gnb > ul > li > a { display: flex; flex-direction: row; align-items: center; justify-content: center; height: var(--header-height); padding: 0; color: var(--header-gnb-color); font-size: var(--header-gnb-font-size); font-weight: var(--header-gnb-weight); line-height: var(--header-gnb-line-height); }
#header #gnb.gnb--flat > ul > li.active > a, #header #gnb.gnb--flat > ul > li > a.is-unlinked, #header #gnb.gnb--dropdown > ul > li > a.is-unlinked { color: var(--header-gnb-color); }
.gnb--flat .submenu { display: none !important; }
#header #gnb.gnb--dropdown > ul > li > a { position: relative; }
#header #gnb.gnb--dropdown > ul > li > a::before { content: ""; position: absolute; left: 50%; top: calc(50% - var(--header-gnb-line-height, 34px) / 2 - 4px - 4px); width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary); opacity: 0; transform: translateX(-50%) scale(0.5); transition: opacity 0.2s var(--hero-ease, ease-in-out), transform 0.2s var(--hero-ease, ease-in-out); pointer-events: none; }
#header #gnb.gnb--dropdown > ul > li:hover > a::before, #header #gnb.gnb--dropdown > ul > li:focus-within > a::before { opacity: 1; transform: translateX(-50%) scale(1); }
#header #gnb.gnb--dropdown > ul > li > .submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: max-content; min-width: 0; height: auto !important; overflow: visible !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; padding-top: 0; z-index: 30; text-align: center; }
#header #gnb.gnb--dropdown > ul > li:hover > .submenu, #header #gnb.gnb--dropdown > ul > li:focus-within > .submenu { opacity: 1; visibility: visible; pointer-events: auto; }
#header #gnb.gnb--dropdown .submenu > ul { margin: 0; padding: var(--space-28) var(--space-28) var(--space-32); list-style: none; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 0 0 8px 8px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12); }
#header #gnb.gnb--dropdown .submenu > ul > li + li { margin-top: var(--space-12); }
#header #gnb.gnb--dropdown .submenu > ul > li > a { display: block; padding: 0; margin: 0; color: var(--lnb-color); font-size: var(--lnb-font-size); font-weight: 400; line-height: var(--lnb-line-height); text-decoration: none; white-space: nowrap; transition: color 0.2s ease, font-weight 0.2s ease; }
#header #gnb.gnb--dropdown .submenu > ul > li > a:hover, #header #gnb.gnb--dropdown .submenu > ul > li > a:focus-visible { color: var(--lnb-color-hover); font-weight: 500; font-size: var(--lnb-font-size); line-height: var(--lnb-line-height); text-decoration: none; }
#header #gnb.gnb--dropdown .submenu > ul > li > a.is-unlinked:hover { color: var(--lnb-color); font-weight: 400; }
.btn-m-menu { display: none; }
body:has(.main-hero) #header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; pointer-events: auto; isolation: isolate; }
body:has(.main-hero) #header .contain, body:has(.main-hero) #header .sitelogo, body:has(.main-hero) #header .sitelogo a, body:has(.main-hero) #header .sitelogo img, body:has(.main-hero) #header #gnb, body:has(.main-hero) #header #gnb ul, body:has(.main-hero) #header #gnb li, body:has(.main-hero) #header #gnb a, body:has(.main-hero) #header .btn-m-menu { pointer-events: auto; }
body:has(.main-hero) #header #gnb a { user-select: text; -webkit-user-select: text; }
body.is-header-scrolled:has(.main-hero) #header { box-shadow: var(--main-header-scroll-shadow, 0 4px 24px rgba(0, 0, 0, 0.08)); transition: box-shadow 0.35s ease; }
body:has(.main-hero) #header { transition: box-shadow 0.35s ease; }
/* 서브비주얼 */
.sub-visual { display: flex; align-items: center; justify-content: center; margin-top: var(--space-100); width: 100%; height: 300px; background: #eee; text-align: center; }
.sub-visual h2 { font-size: var(--font-size-48); line-height: 1.3em; }
.lnb-wrap { border-bottom: 1px solid #ddd; }
.lnb { max-width: 1200px; margin: 0 auto; }
.lnb ul { display: flex; }
.lnb ul li { flex: 1; border-right: 1px solid #ddd; }
.lnb ul li:first-child { border-left: 1px solid #ddd; }
.lnb ul li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: #fff; text-align: center; }
.lnb ul li.active a { background: #333; color: #fff; }
.lnb ul li a { color: var(--lnb-color); font-size: var(--lnb-font-size); font-weight: 400; line-height: var(--lnb-line-height); transition: color 0.2s ease, font-weight 0.2s ease; }
.lnb ul li a:hover, .lnb ul li a:focus-visible { color: var(--lnb-color-hover); font-weight: 500; }
.lnb ul li.active a { color: #fff; font-weight: 500; }
.lnb ul li a.is-unlinked:hover { color: var(--lnb-color); font-weight: 400; }
.sub-visual { margin-top: var(--header-height); background: var(--sub-visual-bg, #0070c9); color: var(--sub-visual-color, #fff); }
.sub-visual h2 { color: inherit; font-size: var(--sub-visual-title-size, 40px); font-weight: var(--sub-visual-title-weight, 600); }
.sub-visual.sub-visual--band { position: relative; display: block; width: 100%; max-width: 100%; height: var(--sub-visual-height-fluid, var(--sub-visual-height, 480px)); min-height: var(--sub-visual-height-fluid, var(--sub-visual-height, 480px)); padding: 0; margin-top: var(--header-height); background: #111; overflow: hidden; color: #fff; }
.sub-visual.sub-visual--band .sub-visual__media { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; margin: 0; }
.sub-visual.sub-visual--band .sub-visual__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sub-visual.sub-visual--band .sub-visual__inner { position: relative; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: inherit; padding: var(--space-40) var(--container-space) calc(var(--sub-visual-tabs-offset-bottom, 48px) + 56px); text-align: center; }
.sub-visual.sub-visual--band .sub-visual__titles { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); }
.sub-visual.sub-visual--band .sub-visual__eyebrow { margin: 0; font-size: var(--sub-visual-eyebrow-size, 18px); line-height: var(--sub-visual-eyebrow-line-height, 28px); font-weight: var(--sub-visual-eyebrow-weight, 500); color: #fff; opacity: var(--sub-visual-eyebrow-opacity, 0.8); text-transform: uppercase; }
.sub-visual.sub-visual--band .sub-visual__title { margin: 0; font-size: var(--sub-visual-band-title-size, 64px); line-height: var(--sub-visual-band-title-line-height, 78px); font-weight: var(--sub-visual-band-title-weight, 600); color: #fff; }
.sub-visual.sub-visual--band .sub-visual__tabs { position: absolute; left: 50%; bottom: var(--sub-visual-tabs-offset-bottom, 48px); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); }
.sub-visual.sub-visual--band .sub-visual__tabs ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sub-visual-tab-gap, 8px); margin: 0; padding: 0; list-style: none; }
.sub-visual.sub-visual--band .sub-visual__tab { display: inline-flex; align-items: center; justify-content: center; padding: var(--sub-visual-tab-padding-y, 10px) var(--sub-visual-tab-padding-x, 22px); font-size: var(--sub-visual-tab-font-size, 18px); line-height: var(--sub-visual-tab-line-height, 28px); font-weight: 600; color: #fff; text-decoration: none; border-radius: 999px; border: 0; background: transparent; transition: background 0.2s ease, color 0.2s ease; }
.sub-visual.sub-visual--band .sub-visual__tab:not(.is-active):hover { color: #fff; text-decoration: none; }
.sub-visual.sub-visual--band .sub-visual__tab.is-active { background: var(--sub-visual-tab-active-bg, #0070c9); color: #fff; text-decoration: none; cursor: default; pointer-events: none; }
.sub-visual.sub-visual--band .sub-visual__tab.is-unlinked { cursor: default; pointer-events: none; opacity: 0.55; }
.sub-visual.sub-visual--band .sub-visual__inner { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.sub-visual.sub-visual--band.is-sub-visual-enter .sub-visual__inner { opacity: 1; transform: none; }
/* 메인 */
.main-section { padding: var(--space-100) 0; }
.main-section h2 { font-size: var(--font-size-40); font-weight: 700; line-height: 1.3em; text-align: center; }
.main-visual { height: 50vh; background: #333; color: #fff; }
.main-about { background: #eee; }
.main-business { background: #fff; }
.main-contact { background: #cfd8eb; }
html:has(.main-hero), body:has(.main-hero), body:has(.main-hero) #wrapper { overflow-x: clip; max-width: 100%; }
body:has(.main-hero) #container { min-height: 0 !important; position: relative; z-index: 1; overflow-x: clip; max-width: 100%; }
.main-hero { position: relative; width: 100%; max-width: 100%; margin-top: var(--header-height); margin-left: 0; margin-right: 0; padding: 0; overflow: hidden; height: var(--hero-height); min-height: 0; box-sizing: border-box; background: transparent; }
.main-hero__slider:not(.slick-initialized) .main-hero__slide:first-child { display: block; }
.main-hero__slider:not(.slick-initialized) .main-hero__slide ~ .main-hero__slide { display: none; }
.main-hero__slider, .main-hero__slider.slick-slider { width: 100%; height: var(--hero-height); min-height: inherit; }
.main-hero__slider .slick-list, .main-hero__slider .slick-track, .main-hero__slider .slick-slide { height: var(--hero-height) !important; min-height: inherit !important; }
.main-hero__slider.slick-slider .slick-slide { float: none !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
.main-hero__slider.slick-initialized .slick-slide { left: 0 !important; width: 100% !important; }
.main-hero__slider.slick-slider .slick-slide { float: none; opacity: 1; visibility: hidden; z-index: 1; pointer-events: none; transition: none; }
.main-hero__slider.slick-slider .slick-slide.slick-active { visibility: visible; z-index: 2; pointer-events: auto; }
.main-hero__slider, .main-hero__slider .slick-list, .main-hero__slider .slick-track, .main-hero__slider .slick-slide { pointer-events: auto; }
.main-hero__media, .main-hero__media img { pointer-events: auto; }
.main-hero__slider .slick-list { position: relative; width: 100%; max-width: 100%; overflow: hidden; background: transparent; }
.main-hero__slider.slick-initialized .slick-list.draggable { cursor: default; }
.main-hero__slider .slick-track { display: block; width: 100% !important; height: 100% !important; transform: translate3d(0, 0, 0) !important; left: 0 !important; margin-left: 0 !important; }
.main-hero__slider .slick-slide > div { height: 100%; }
.main-hero__slide { position: relative; width: 100%; height: var(--hero-height); min-height: inherit; }
.main-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: transparent; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 1; transition: opacity var(--hero-fade-ms) var(--hero-ease); }
.main-hero__slider .slick-slide, .main-hero__slider .slick-slide > div, .main-hero__slide, .main-hero__media img { opacity: 1; }
.main-hero__media img { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; transform: scale(1); }
.main-hero__slide .main-hero__caption { position: absolute; left: 50%; top: 50%; z-index: 10; width: 100%; text-align: center; padding: 0 var(--space-30); box-sizing: border-box; pointer-events: none; user-select: none; opacity: 0; transform: translate(-50%, calc(-50% + var(--hero-caption-shift))); transition: opacity var(--hero-caption-in-ms) var(--hero-ease), transform var(--hero-caption-in-ms) var(--hero-ease); }
.main-hero__slider:not(.slick-initialized) .main-hero__slide:first-child .main-hero__caption { opacity: 1; transform: translate(-50%, -50%); transition: none; }
.main-hero.is-hero-transition .main-hero__caption { opacity: 0; transform: translate(-50%, calc(-50% + var(--hero-caption-shift))); transition: opacity var(--hero-caption-out-ms) var(--hero-ease), transform var(--hero-caption-out-ms) var(--hero-ease); pointer-events: none; user-select: none; }
.main-hero.is-hero-ready:not(.is-hero-transition) .main-hero__slider.slick-initialized .slick-slide.slick-active .main-hero__caption { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; user-select: text; }
.main-hero__title { margin: 0; color: var(--hero-title-color); font-size: var(--hero-title-size); font-weight: var(--hero-title-weight); font-style: normal; line-height: calc(var(--hero-title-size) * var(--hero-title-leading)); text-align: center; text-shadow: none; word-break: keep-all; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.main-hero__title-line { display: block; }
@keyframes hero-title-line-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-ken-burns { from { transform: scale(1); } to { transform: scale(var(--hero-ken-burns-scale, 1.05)); } }
.main-hero.is-hero-ready:not(.is-hero-transition) .main-hero__slider.slick-initialized .slick-slide.slick-active .main-hero__caption.is-caption-animate .main-hero__title-line { animation: hero-title-line-in var(--hero-caption-in-ms) var(--hero-ease) both; }
.main-hero.is-hero-ready:not(.is-hero-transition) .main-hero__slider.slick-initialized .slick-slide.slick-active .main-hero__caption.is-caption-animate .main-hero__title-line:nth-child(2) { animation-delay: var(--hero-title-line-stagger-ms, 90ms); }
.main-hero.is-hero-ready .slick-slide.slick-active .main-hero__media img { transform-origin: center center; will-change: transform; }
.main-hero.is-hero-ready .slick-slide.slick-active .main-hero__media img { animation: hero-ken-burns var(--hero-ken-burns-duration, 16s) ease-out forwards; }
.main-product__layout > .main-product__photo { width: 100%; aspect-ratio: var(--main-product-visual-ratio); height: auto; display: block; object-fit: cover; object-position: center; vertical-align: top; box-shadow: none; image-rendering: auto; border-radius: var(--main-product-photo-radius); transition: opacity var(--main-product-photo-fade-ms, 360ms) ease, transform var(--main-product-photo-fade-ms, 360ms) ease; }
.main-product__photo.is-photo-leaving { opacity: 0; transform: scale(1.02); }
.main-product__photo.is-photo-entering { opacity: 0; transform: scale(0.985); }
.main-product__tabs > li.active > a { transform: translateY(-1px); }
.main-product__tabs > li > a { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease; }
.main-product__content { animation: main-product-content-in 0.4s ease both; }
@keyframes main-product-content-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.main-hero__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; padding: 0 0 var(--hero-bar-padding-bottom); display: flex; justify-content: center; pointer-events: none; }
.main-hero__dots { display: flex; align-items: center; justify-content: center; gap: var(--hero-dot-gap); pointer-events: auto; }
.main-hero__dot { width: var(--hero-dot-size); height: var(--hero-dot-size); padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: width var(--hero-dot-transition-ms) var(--hero-ease), background var(--hero-dot-transition-ms) var(--hero-ease); }
.main-hero__dot.is-active { width: var(--hero-dot-active-width); background: #fff; }
.main-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.main-hero .slick-arrow { display: none !important; }
.main-hero .slick-dots { display: none !important; }
.main-product { padding: var(--space-120) var(--space-100) var(--space-140); background: #fff; box-sizing: border-box; }
.main-product > .contain { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.main-product__head { margin: 0 0 var(--main-product-head-gap); text-align: left; }
.main-product__head .main-product__title { text-align: left; font-size: var(--main-product-title-size); line-height: var(--main-product-title-line-height); font-weight: var(--main-product-title-weight); color: var(--main-product-title-color); }
.main-product__eyebrow { margin: 0 0 var(--space-12); font-size: var(--main-product-eyebrow-size); line-height: var(--main-product-eyebrow-line-height); font-weight: var(--main-product-eyebrow-weight); color: var(--main-product-eyebrow-color); }
.main-product__title { margin: 0; }
.main-product__layout { display: grid; grid-template-columns: var(--main-product-layout-columns, repeat(2, minmax(0, 1fr))); gap: var(--main-product-layout-gap); align-items: stretch; max-width: var(--main-product-layout-max); }
.main-product__layout > .main-product__photo { align-self: start; max-width: none; }
.main-product__panel { display: flex; flex-direction: column; width: 100%; max-width: var(--main-product-panel-max, none); min-height: 0; box-sizing: border-box; align-self: stretch; }
.main-product__body { flex: 1 1 auto; min-height: 0; }
.main-product__tabs { display: flex; flex-wrap: wrap; gap: var(--main-product-tab-gap); margin: 0 0 var(--main-product-tab-to-name); padding: 0; list-style: none; }
.main-product__tabs > li { margin: 0; }
.main-product__tabs > li > a { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--main-product-tab-height); padding: var(--main-product-tab-padding-y) var(--main-product-tab-padding-x); border-radius: var(--radius-pill); background: var(--main-product-tab-inactive-bg); color: var(--main-product-tab-inactive-color); font-size: var(--main-product-tab-font-size); line-height: var(--main-product-tab-line-height); font-weight: var(--main-product-tab-inactive-weight); text-decoration: none; border: 0; white-space: nowrap; }
.main-product__tabs > li.active > a { background: var(--color-brand); color: #fff; font-weight: var(--main-product-tab-active-weight); }
.main-product__name { margin: 0 0 var(--main-product-name-to-desc); font-size: var(--main-product-name-size); line-height: 1.125em; font-weight: var(--main-product-name-weight); color: var(--color-title); }
.main-product__desc-group { display: flex; flex-direction: column; gap: var(--main-product-desc-block-gap); max-width: 100%; }
.main-product__desc, .main-product__desc .main-product__desc-line { font-size: var(--main-product-desc-size); line-height: 1.7em; font-weight: 400; }
.main-product__desc { margin: 0; color: var(--color-body-muted); word-break: keep-all; overflow-wrap: break-word; }
.main-product__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); margin-top: auto; padding-top: var(--main-product-foot-gap); flex-shrink: 0; }
.main-product__cta { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--main-product-cta-height); gap: var(--main-product-cta-gap); padding: var(--main-product-cta-padding-top) var(--main-product-cta-padding-right) var(--main-product-cta-padding-bottom) var(--main-product-cta-padding-left); background: var(--main-product-cta-bg); color: var(--main-product-cta-color); font-size: var(--main-product-cta-font-size); line-height: var(--main-product-cta-line-height); font-weight: var(--main-product-cta-font-weight); text-decoration: none; border-radius: var(--main-product-cta-radius); border: 0; flex-shrink: 0; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.main-product__cta:hover { background: var(--color-brand); color: #ffffff; --main-product-cta-icon-color: #ffffff; }
.main-product__cta:not(.is-unlinked):hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.main-product__cta.is-unlinked { cursor: default; }
.main-product__cta-label { display: inline-block; }
.main-product__cta-icon { display: block; flex-shrink: 0; box-sizing: border-box; width: var(--main-product-cta-icon-size); height: var(--main-product-cta-icon-size); margin-top: calc(var(--space-1) * -1); border-top: var(--main-product-cta-icon-weight) solid var(--main-product-cta-icon-color); border-right: var(--main-product-cta-icon-weight) solid var(--main-product-cta-icon-color); transform: rotate(45deg); }
.main-product__pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--main-product-pager-gap); flex-shrink: 0; }
.main-product__pager-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--main-product-pager-btn-size); height: var(--main-product-pager-btn-size); padding: 0; border-radius: 50%; border: 1px solid var(--main-product-pager-btn-border); background: var(--main-product-pager-btn-bg); cursor: pointer; color: var(--main-product-pager-icon-color); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.main-product__pager-btn:hover { background: var(--color-brand); border-color: transparent; color: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.main-product__pager-btn:hover .main-product__pager-icon img { filter: brightness(0) invert(1); }
.main-product__pager-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--main-product-pager-icon-width); height: var(--main-product-pager-icon-height); flex-shrink: 0; line-height: 0; }
.main-product__pager-icon img, .main-product__pager-icon svg { display: block; width: var(--main-product-pager-icon-width); height: var(--main-product-pager-icon-height); }
/* 푸터 */
#footer { padding: 0; background: transparent; color: inherit; text-align: inherit; }
#footer p.copyright { display: flex; flex-wrap: wrap; align-items: center; gap: var(--footer-copyright-credit-gap, 8px); margin: 0; font-size: var(--footer-copyright-font-size, 16px); line-height: var(--footer-copyright-line-height, 26px); font-weight: var(--footer-copyright-font-weight, 400); text-align: left; color: var(--footer-copyright-color, rgba(255, 255, 255, 0.64)); }
#footer p.copyright .copyright-text { color: var(--footer-copyright-color, rgba(255, 255, 255, 0.64)); }
#footer p.copyright .design-credit { color: var(--footer-design-credit-color, #222222); font-size: inherit; line-height: inherit; font-weight: inherit; text-decoration: none; }
#footer p.copyright .design-credit:hover { text-decoration: underline; }
.footer-brand img { display: block; width: auto; height: var(--footer-logo-height, 60px); max-width: none; }
#footer { background: var(--footer-bg, #121212); color: var(--footer-info-text-color, rgba(255, 255, 255, 0.8)); font-size: var(--footer-info-font-size, 20px); line-height: var(--footer-info-line-height, 34px); min-height: var(--footer-min-height, 266px); padding: var(--footer-padding-y, 40px) 0 var(--footer-padding-bottom, 32px); box-sizing: border-box; text-align: left; }
#footer .contain.footer-inner { max-width: min(var(--hero-artboard-width), 100%); width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--header-inset-x); padding-right: var(--header-inset-x); box-sizing: border-box; text-align: left; }
.footer-inner { display: flex; flex-direction: column; gap: 0; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); min-height: var(--footer-logo-height, 60px); margin-bottom: var(--footer-top-gap, 50px); }
.footer-brand { flex-shrink: 0; line-height: 0; }
.footer-brand img { display: block; width: auto; height: var(--footer-logo-height, 60px); }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--footer-nav-gap, 32px); margin: 0; padding: 0; list-style: none; }
.footer-nav a { color: var(--footer-nav-color, #ffffff); font-size: var(--footer-nav-font-size, 18px); line-height: var(--footer-nav-line-height, 28px); font-weight: var(--footer-nav-weight, 500); text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-nav a.is-unlinked { cursor: default; }
.footer-nav a.is-unlinked:hover { text-decoration: none; }
.footer-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--footer-meta-btn-gap, 12px); margin-bottom: var(--footer-meta-gap, 40px); }
.footer-info { flex: 1 1 0; min-width: 0; min-height: var(--footer-info-block-min-height, 78px); margin: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--footer-info-row-gap, 10px); }
.footer-info__line { margin: 0; padding: 0; font-size: var(--footer-info-font-size, 20px); line-height: var(--footer-info-line-height, 34px); font-weight: 400; color: var(--footer-info-text-color, rgba(255, 255, 255, 0.8)); }
.footer-info__line--cols { display: block; white-space: nowrap; }
.footer-info__label { font-size: inherit; line-height: inherit; font-weight: var(--footer-info-label-weight, 500); color: var(--footer-info-label-color, rgba(255, 255, 255, 0.4)); margin-right: var(--footer-info-label-gap, 10px); }
.footer-info__value { font-size: inherit; line-height: inherit; font-weight: 400; color: var(--footer-info-text-color, rgba(255, 255, 255, 0.8)); }
.footer-info__gap { display: inline-block; width: var(--footer-info-item-gap, 48px); flex-shrink: 0; vertical-align: baseline; }
.footer-top-btn { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--footer-top-btn-size, 64px); height: var(--footer-top-btn-size, 64px); padding: 0; border: 0; border-radius: var(--footer-top-btn-radius, 8px); overflow: hidden; background: var(--footer-top-btn-bg, linear-gradient(135deg, #01e9dd 0%, #0070c9 100%)); box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter 0.2s ease; }
.footer-top-btn:hover, .footer-top-btn:focus-visible { background: var(--footer-top-btn-bg-hover, linear-gradient(135deg, #01e9dd 0%, #0070c9 100%)); filter: brightness(1.05); }
.footer-top-btn__icon { display: block; flex-shrink: 0; width: var(--footer-top-icon-width, 24px); height: var(--footer-top-icon-height, 24px); max-width: none; object-fit: contain; pointer-events: none; }
#footer p.copyright { padding-top: var(--footer-copyright-padding-top, 20px); border-top: 1px solid var(--footer-divider, rgba(255, 255, 255, 0.14)); }
#footer { font-size: var(--footer-info-font-size); line-height: var(--footer-info-line-height); }
.footer-nav a { font-size: var(--footer-nav-font-size); line-height: var(--footer-nav-line-height); font-weight: var(--footer-nav-weight); }
.footer-info__line, .footer-info__label, .footer-info__value { font-size: var(--footer-info-font-size); line-height: var(--footer-info-line-height); }
.footer-info__label { font-weight: var(--footer-info-label-weight); }
.footer-info__value { font-weight: 400; }
#footer p.copyright { font-size: var(--footer-copyright-font-size); line-height: var(--footer-copyright-line-height); font-weight: var(--footer-copyright-font-weight); }
#footer p.copyright .copyright-text { color: var(--footer-copyright-color); }
#footer p.copyright .design-credit { color: var(--footer-design-credit-color); }
.sub-visual ~ .sub-page-head {border-bottom: 0;}