@charset "utf-8";
/* layout.css — 전체 레이아웃 (헤더, 푸터, 컨테이너, LNB 등) */

#skipToContent a {z-index:100000; position:absolute; overflow:hidden; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0;}
#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:3.57em; outline-color:var(--color-primary);}
a:focus {outline:var(--color-primary);}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}
.fr-box .swiper-wrapper {display:block;}

/* container (1600px 컨텐츠 너비 + 좌우 30px 패딩 = 1660px) */
.contain {max-width:1660px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:var(--header-height); background:#fff; border-bottom:1px solid var(--color-border); z-index:1000; transition:background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;}
body#sub #wrapper {padding-top:var(--header-height);}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; max-width:1660px; height:var(--header-height); z-index:10;}
#header .sitelogo a, #header .gnb-brand a {display:flex; align-items:center;}
#header .sitelogo img, #header .gnb-brand img {height:clamp(32px, calc(42 / var(--inner) * 100vw), 42px); width:auto; transition:filter 0.2s ease;}

/* gnb */
.gnb-right {display:flex; align-items:center; gap:20px; margin-left:auto; height:100%;}
.gnb-menu {display:flex; align-items:center; height:100%; gap:8px;}
.gnb-item {position:relative; height:100%; display:flex; align-items:center;}
.gnb-link {position:relative; z-index:2; display:flex; align-items:center; height:100%; padding:0 clamp(14px, calc(20 / var(--inner) * 100vw), 20px); font-size:var(--font-size-18); font-weight:600; color:var(--color-ink); white-space:nowrap; transition:color var(--transition);}
.gnb-link::after {content:""; position:absolute; left:clamp(14px, calc(20 / var(--inner) * 100vw), 20px); right:clamp(14px, calc(20 / var(--inner) * 100vw), 20px); bottom:0; height:3px; background:var(--color-primary); transform:scaleX(0); transform-origin:center; transition:transform 0.18s ease, background 0.18s ease;}
.gnb-link:hover::after, .gnb-item.has-dropdown:hover > .gnb-link::after, .gnb-item.is-active-section > .gnb-link::after {transform:scaleX(1);}
.gnb-link:hover, .gnb-item.is-active-section > .gnb-link {color:var(--color-primary);}

/* dropdown */
.gnb-item.has-dropdown::before {content:""; position:absolute; left:0; right:0; top:100%; height:14px; z-index:1099;}
.gnb-dropdown {position:absolute; top:calc(100% - 4px); left:50%; transform:translateX(-50%); width:max-content; min-width:160px; max-width:240px; background:#fff; border:1px solid var(--color-border); border-top:none; border-radius:0 0 12px 12px; box-shadow:0 8px 20px rgba(17,24,39,0.08); padding:8px 10px 10px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.18s ease, visibility 0.18s ease; z-index:1100; text-align:center;}
.gnb-dropdown::before {content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:48px; height:4px; background:var(--color-primary);}
.gnb-item.has-dropdown:hover .gnb-dropdown, .gnb-item.has-dropdown:focus-within .gnb-dropdown {opacity:1; visibility:visible; pointer-events:auto;}
.gnb-dropdown a {display:block; padding:8px 14px; font-size:var(--font-size-14); font-weight:500; color:var(--color-ink-muted); text-align:center; white-space:nowrap; transition:background 0.15s ease, color 0.15s ease; border-radius:6px;}
.gnb-dropdown a:hover {background:var(--color-bg-soft); color:var(--color-primary); font-weight:600;}

/* Main Hero - Transparent GNB */
#header.gnb-over-hero {background:transparent; border-bottom:1px solid rgba(255,255,255,0.15); box-shadow:none;}
#header.gnb-over-hero .gnb-link {color:#fff;}
#header.gnb-over-hero .gnb-link::after {background:#fff;}
#header.gnb-over-hero .sitelogo img, #header.gnb-over-hero .gnb-brand img {filter:brightness(0) invert(1);}
#header.gnb-over-hero .gnb-hamburger-icon > span {background:#fff;}

/* Main Hero - Scrolled or Hovered GNB */
#header.gnb-over-hero:is(:hover, :focus-within, .is-scrolled, .active) {background:#fff; border-bottom-color:var(--color-border); box-shadow:0 2px 12px rgba(17,24,39,0.06);}
#header.gnb-over-hero:is(:hover, :focus-within, .is-scrolled, .active) .gnb-link {color:var(--color-ink);}
#header.gnb-over-hero:is(:hover, :focus-within, .is-scrolled, .active) .gnb-link:hover, #header.gnb-over-hero:is(:hover, :focus-within, .is-scrolled, .active) .gnb-item.is-active-section > .gnb-link {color:var(--color-primary);}
#header.gnb-over-hero:is(:hover, :focus-within, .is-scrolled, .active) .gnb-link::after {background:var(--color-primary);}
#header.gnb-over-hero:is(:hover, :focus-within, .is-scrolled, .active) .sitelogo img, #header.gnb-over-hero:is(:hover, :focus-within, .is-scrolled, .active) .gnb-brand img {filter:none;}
#header.gnb-over-hero:is(:hover, :focus-within, .is-scrolled, .active) .gnb-hamburger-icon > span {background:#242424;}

/* Hamburger Button */
.gnb-hamburger {display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; flex-shrink:0; border:none; border-radius:999px; color:#242424; background:transparent; cursor:pointer; transition:background var(--transition), color var(--transition);}
.gnb-hamburger-icon {display:flex; flex-direction:column; justify-content:center; gap:4px; width:18px; height:14px;}
.gnb-hamburger-icon > span {display:block; width:100%; height:2px; background:currentColor; border-radius:2px; transition:transform var(--transition), opacity var(--transition), background var(--transition);}
.gnb-hamburger:hover {background:var(--color-primary); color:#fff;}
.gnb-hamburger:hover .gnb-hamburger-icon > span {background:#fff !important;}
.gnb-hamburger.is-active {background:var(--color-primary); color:#fff;}
.gnb-hamburger.is-active .gnb-hamburger-icon > span:nth-child(1) {transform:translateY(6px) rotate(45deg); background:#fff !important;}
.gnb-hamburger.is-active .gnb-hamburger-icon > span:nth-child(2) {opacity:0;}
.gnb-hamburger.is-active .gnb-hamburger-icon > span:nth-child(3) {transform:translateY(-6px) rotate(-45deg); background:#fff !important;}

/* Mobile Drawer Navigation */
.mobile-nav {display:block; position:fixed; inset:0; z-index:1200; pointer-events:none; visibility:hidden;}
.mobile-nav.is-open {pointer-events:auto; visibility:visible;}
.mobile-nav-backdrop {position:absolute; inset:0; border:none; background:rgba(17,24,39,0.48); opacity:0; cursor:pointer; transition:opacity 0.28s ease;}
.mobile-nav.is-open .mobile-nav-backdrop {opacity:1;}
.mobile-nav-panel {position:absolute; top:0; right:0; bottom:0; display:flex; flex-direction:column; width:min(400px, 100%); height:100%; background:#fff; box-shadow:-12px 0 40px rgba(17,24,39,0.12); transform:translateX(100%); transition:transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); z-index:2;}
.mobile-nav.is-open .mobile-nav-panel {transform:translateX(0);}
.mobile-nav-head {display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px 18px; border-bottom:1px solid var(--color-border); flex-shrink:0;}
.mobile-nav-brand {display:inline-flex; align-items:center; flex-shrink:0;}
.mobile-nav-brand img {height:34px; width:auto;}
.mobile-nav-close {position:relative; flex-shrink:0; width:38px; height:38px; border:1px solid #242424; border-radius:999px; background:transparent; cursor:pointer; transition:background var(--transition), border-color var(--transition);}
.mobile-nav-close span {position:absolute; top:50%; left:50%; width:16px; height:2px; background:#242424; border-radius:2px; transition:background var(--transition);}
.mobile-nav-close span:first-child {transform:translate(-50%, -50%) rotate(45deg);}
.mobile-nav-close span:last-child {transform:translate(-50%, -50%) rotate(-45deg);}
.mobile-nav-close:hover {background:#242424;}
.mobile-nav-close:hover span {background:#fff;}
.mobile-nav-body {flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.mobile-nav-inner {padding:16px 20px 24px;}
.mobile-nav-foot {flex-shrink:0; padding:16px 20px 24px; border-top:1px solid var(--color-border); background:linear-gradient(180deg, #fff 0%, rgba(2,7,233,0.04) 100%);}
.mobile-nav-cta {display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:12px 24px; border-radius:999px; background:var(--color-primary); color:#fff; font-size:var(--font-size-16); font-weight:700; letter-spacing:-0.02em; transition:background var(--transition);}
.mobile-nav-cta:hover {background:#0004b3; color:#fff;}
.m-gnb-item {margin-bottom:10px; border:1px solid var(--color-border); border-radius:12px; overflow:hidden; background:#fff;}
.m-gnb-item:last-child {margin-bottom:0;}
.m-gnb-link {display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 20px; font-size:var(--font-size-16); font-weight:700; color:#242424; letter-spacing:-0.02em; text-align:left; cursor:pointer; background:#fff; border:none; outline:none; transition:color var(--transition), background var(--transition);}
.m-gnb-link:hover {color:var(--color-primary);}
.m-gnb-item.is-open > .m-gnb-link {border-bottom:1px solid var(--color-border); color:var(--color-primary);}
.m-gnb-link[data-toggle]::after {content:""; flex-shrink:0; width:8px; height:8px; margin-left:16px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform var(--transition); opacity:0.6;}
.m-gnb-item.is-open > .m-gnb-link[data-toggle]::after {transform:rotate(-135deg); opacity:1;}
.m-lnb {display:none; padding:4px 12px 12px; background:#fafbfd;}
.m-gnb-item.is-open .m-lnb {display:block;}
.m-lnb a {display:block; padding:10px 14px; font-size:var(--font-size-15); font-weight:500; color:#686868; border-radius:8px; transition:color var(--transition), background var(--transition);}
.m-lnb a:hover {color:#242424; background:rgba(2,7,233,0.04);}
body.is-mobile-nav-open {overflow:hidden;}

/* sub-hero & sub-visual */
.sub-hero-wrap, .sub-visual {position:relative; width:100%; overflow:hidden;}
.sub-hero-visual {position:relative; height:min(52vh, 480px); overflow:hidden;}
.sub-hero-visual > img {width:100%; height:100%; object-fit:cover; display:block;}
.sub-hero-overlay {position:absolute; inset:0; background:rgba(0,0,0,0.3); pointer-events:none;}
.sub-hero-content {position:absolute; inset:0; left:0; right:0; margin:0 auto; width:100%; max-width:1444px; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; padding:0 var(--container-space) 48px;}
.sub-path {display:flex; align-items:center; flex-wrap:wrap; gap:0; font-size:var(--font-size-16); font-weight:600; color:#fff; margin-bottom:12px;}
.sub-path-home {display:inline-flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition:opacity var(--transition);}
.sub-path-home .ph, .sub-path-home .ph-fill {font-size:var(--font-size-16); line-height:1em; color:#fff;}
.sub-path-home:hover {opacity:0.85;}
.sub-path-list {display:inline-flex; align-items:center; flex-wrap:wrap;}
.sub-path-divider {display:inline-block; width:1px; height:12px; margin:0 12px; background:rgba(255,255,255,0.3); flex-shrink:0;}
.sub-path-item {font-size:var(--font-size-16); font-weight:600; line-height:1.4em; color:#fff;}
.sub-hero-content .sub-title {font-size:clamp(32px, 6vw, 64pt); font-weight:700; color:#fff; letter-spacing:-0.02em; line-height:1.15em; text-align:left; padding:0; margin:0;}

/* lnb */
.lnb-wrap {position:sticky; top:var(--header-height); z-index:100; background:rgba(255,255,255,0.96); border-bottom:1px solid var(--color-border); backdrop-filter:blur(10px);}
.lnb {width:100%;}
.lnb-inner {display:flex; overflow-x:auto; scrollbar-width:none; max-width:1444px; margin:0 auto; padding:10px var(--container-space); gap:4px;}
.lnb-inner::-webkit-scrollbar {display:none;}
.lnb-tab {display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; font-size:var(--font-size-16); font-weight:500; color:var(--color-ink-muted); white-space:nowrap; border:none; border-radius:999px; background:transparent; transition:color var(--transition), background var(--transition); text-decoration:none;}
.lnb-tab:hover {color:var(--color-primary); background:rgba(2,7,233,0.05);}
.lnb-tab.is-active, .lnb-tab.active {color:#fff; background:var(--color-primary); font-weight:600;}

/* #contArea & sub-title */
#contArea {max-width:1444px; padding-left:var(--container-space); padding-right:var(--container-space); padding-top:var(--space-60); margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0; padding-top:0;}

.sub-title {padding-bottom:var(--space-40); max-width:1660px; margin:0 auto; text-align:center;}
#contArea.wide .sub-title {padding-left:var(--container-space); padding-right:var(--container-space); padding-top:var(--space-60);}
.sub-title h2 {font-size:var(--font-size-40); font-weight:700; line-height:1.3em; color:var(--color-ink); letter-spacing:-.03em;}

.real-cont {padding-bottom:clamp(50px, calc(100 / var(--inner) * 100vw), 100px);}
.icon img {vertical-align:middle; margin-top:-.02em;}
.txt-center {text-align:center;}

/* footer */
.footer {background:#fff; color:#454545; padding:48px 0 56px; border-top:1px solid var(--color-border);}
.footer-inner {display:flex; flex-direction:column; gap:30px;}
.footer-head {display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.footer-brand img {display:block; height:clamp(36px, calc(44 / var(--inner) * 100vw), 44px); width:auto;}
.footer-legal {display:flex; align-items:center; gap:0; flex-wrap:wrap;}
.footer-legal a {font-size:var(--font-size-16); font-weight:400; line-height:1.4em; letter-spacing:-0.03em; color:#454545; text-decoration:none;}
.footer-legal a:hover {color:var(--color-primary); text-decoration:underline;}
.footer-legal a + a {position:relative; margin-left:12px; padding-left:12px;}
.footer-legal a + a::before {content:""; position:absolute; left:0; top:50%; width:1px; height:12px; background:var(--color-border); transform:translateY(-50%);}
.footer-body {display:flex; align-items:flex-start; justify-content:space-between; gap:40px;}
.footer-company {display:flex; flex-direction:column; gap:16px; min-width:0;}
.footer-company-name {margin:0; font-size:var(--font-size-16); font-weight:600; line-height:1.4em; letter-spacing:-0.03em; color:#454545;}
.footer-meta-row {display:flex; align-items:center; flex-wrap:wrap; gap:16px 40px;}
.footer-meta-item {display:inline-flex; align-items:center; gap:10px; min-width:0;}
.footer-meta-label {flex-shrink:0; font-size:var(--font-size-16); font-weight:600; line-height:1.4em; letter-spacing:-0.03em; color:#454545;}
.footer-meta-value {font-size:var(--font-size-16); font-weight:400; line-height:1.4em; letter-spacing:-0.03em; color:#454545; word-break:keep-all;}
.footer-link {color:inherit; text-decoration:none;}
.footer-link:hover {color:var(--color-primary); text-decoration:underline;}
.footer .copyright {margin:0; padding-top:0; border-top:none; font-size:var(--font-size-16); font-weight:300; line-height:1.4em; letter-spacing:-0.03em; color:#868686;}

/* floating / top button (.fab-stack) */
.fab-stack {position:fixed; right:var(--container-space); bottom:var(--container-space); z-index:900; display:flex; flex-direction:column; align-items:flex-end; gap:12px;}
.chatbot-fab {position:static; width:clamp(40px, calc(56 / var(--inner) * 100vw), 56px); height:clamp(40px, calc(56 / var(--inner) * 100vw), 56px); border-radius:var(--radius-md); background:var(--color-primary); color:#fff; font-size:var(--font-size-24); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(2,7,233,0.25); transition:transform var(--transition), box-shadow var(--transition), background var(--transition);}
.chatbot-fab:hover {transform:translateY(-2px); box-shadow:0 6px 20px rgba(2,7,233,0.32); color:#fff;}
.top-fab {width:clamp(40px, calc(56 / var(--inner) * 100vw), 56px); height:clamp(40px, calc(56 / var(--inner) * 100vw), 56px); border-radius:var(--radius-md); background:#fff; color:var(--color-ink); border:1px solid var(--color-border); font-size:var(--font-size-22); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(17,24,39,0.1); cursor:pointer; transition:background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);}
.top-fab:hover {background:#242424; border-color:#242424; color:#fff; box-shadow:0 6px 20px rgba(36,36,36,0.22);}
.chatbot-fab .ph {font-size:var(--font-size-24); line-height:1em;}
.top-fab .ph {font-size:var(--font-size-22); line-height:1em;}