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

body {overflow-x:hidden;}
#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:var(--navy-950);color:var(--white);font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

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

#wrapper {position:relative;}

.contain {width:100%; max-width:calc(var(--content-width) + (var(--space-container) * 2)); margin:0 auto; padding-right:var(--space-container); padding-left:var(--space-container);}

/* header */
body:has(#header.is-mega-open):before {content:""; position:fixed; inset:0; z-index:90; background:rgba(0, 26, 40, .42); pointer-events:none; animation:megaDim .25s var(--ease-out) forwards;}
@keyframes megaDim {
	from {opacity:0;}
	to {opacity:1;}
}
#header {position:sticky; top:0; left:0; width:100%; height:var(--header-height); background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(160%) blur(16px); border-bottom:1px solid rgba(226,232,240,.9); transition:box-shadow .35s var(--ease-out), border-color .35s; overflow:visible; z-index:100;}
#header.is-mega-open {border-bottom-color:transparent;}
#header .contain {display:flex; align-items:center; justify-content:space-between; gap:var(--space-24); position:relative; width:100%; max-width:calc(var(--wide-width) + (var(--space-container) * 2)); height:100%; padding:0 var(--space-container); margin:0 auto; z-index:30;}

.sitelogo {flex:0 0 16%; width:16%; max-width:280px; min-width:0;}
.sitelogo a {display:flex; align-items:center; width:100%;}
#gnb {flex:1; height:100%; min-width:0;}
#gnb > ul {display:flex; width:100%; height:100%; margin:0; padding:0; text-align:center;}
#gnb > ul > li {position:relative; flex:1 1 20%; width:20%; height:100%;}
#gnb > ul > li:after {content:""; position:absolute; right:12%; bottom:0; left:12%; height:3px; background:var(--color-primary); border-radius:3px 3px 0 0; transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease-out);}
#gnb > ul > li.active:after {transform:scaleX(1);}
#gnb > ul > li > a {display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0 8px; color:var(--ink); font-size:var(--font-size-18); font-weight:700; line-height:1.5em; letter-spacing:-.03em; text-align:center; white-space:nowrap; transition:color .25s;}
#gnb > ul > li > a div {display:flex; flex-direction:column; align-items:center; justify-content:flex-start; overflow:hidden; height:1.5em; padding:0 4px;}
#gnb > ul > li.active > a {color:var(--color-primary);}

#gnb .submenu {display:none; position:absolute; top:100%; left:0; width:100%; height:auto; overflow:visible; margin:var(--space-18) 0; padding:var(--space-16) var(--space-12) var(--space-20); text-align:center; background:transparent; border-radius:10px; z-index:31;}
#gnb > ul > li.active .submenu {background:#f3f5f8;}
#gnb .submenu>ul {padding:0;}
#gnb .submenu>ul>li>a {display:block; padding:var(--space-12) var(--space-8); color:var(--ink-soft); font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-.02em; border-radius:6px; white-space:nowrap; transition:color .2s, background .2s;}
#gnb .submenu>ul>li>a:hover, #gnb .submenu>ul>li.active>a {color:var(--navy-900); background:rgba(0,68,131,.08);}

.header-utils {display:flex; flex:0 0 20%; align-items:center; justify-content:flex-end; gap:2px; width:20%; max-width:320px; min-width:0;}
.header-utils .util-link {position:relative; padding:var(--space-8) var(--space-12); color:var(--ink-soft); font-size:var(--font-size-14); font-weight:500; line-height:1.5em; white-space:nowrap; transition:color .2s;}
.header-utils .util-link:not(:last-of-type):after {content:""; position:absolute; top:50%; right:0; width:1px; height:12px; background:var(--line); transform:translateY(-50%);}
.header-utils .util-link:hover {color:var(--color-primary);}

.gnb-wrap {display:flex; align-items:center; gap:var(--space-50);}

.submenu-bg {display:none; position:absolute; top:100%; left:0; width:100%; height:0; background:var(--white); border-radius:0 0 var(--radius-16) var(--radius-16); box-shadow:var(--shadow-lg); z-index:20;}

#header.active {background:var(--white); border-bottom-color:rgba(226,232,240,.65); box-shadow:var(--shadow-header);}
#header.active #gnb > ul > li > a {color:var(--ink);}
#header.active #gnb > ul > li.active > a {color:var(--color-primary);}

/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; right:var(--space-container); width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-sm); -webkit-transform:translateY(-50%); transform:translateY(-50%); align-items:center; justify-content:center;}
.btn-m-menu div {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:18px; height:2px; border-radius:2px; background:var(--navy-900);}
#sub:not(:has(.sub-visual)) .btn-m-menu span {background:var(--navy-900);}
#header.active .btn-m-menu span {background:var(--navy-900);}

.mobile-navigation {position:fixed; top:var(--header-height); left:0; right:0; bottom:0; width:auto; height:auto; padding:12px 20px 40px; overflow:auto; background:rgba(255, 255, 255, .98); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); visibility:hidden; opacity:0; pointer-events:none; transition:opacity .2s, visibility .2s; z-index:99;}
.mobile-navigation .home,
.mobile-navigation .close {display:none;}
.mobile-navigation .nav-menu>ul {border-top:0;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid var(--line);}
.mobile-navigation .nav-menu>ul>li>a {position:relative; display:block; padding:18px 28px 18px 4px; color:var(--ink); font-size:var(--font-size-16); font-weight:700; line-height:1.5em; letter-spacing:-.02em;}
.mobile-navigation .nav-menu>ul>li>a div {display:flex; align-items:flex-end; gap:5px;}
.mobile-navigation .nav-menu>ul>li>a .en {order:2; font-size:.8em; font-weight:500; line-height:1.3em; opacity:.4;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:8px; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); transition:transform .2s, border-color .2s;}
.mobile-navigation .nav-menu>ul>li.active>a {color:var(--brand-600);}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-30%) rotate(-135deg); border-color:var(--brand-600);}
.mobile-navigation .nav-menu .submenu {display:none; background:transparent; padding:0 0 12px;}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:flex; align-items:flex-end; gap:5px; padding:11px 12px; color:var(--muted); font-size:var(--font-size-15); font-weight:500; line-height:1.5em; letter-spacing:-.02em; border-radius:var(--r-xs); transition:background .2s, color .2s;}
.mobile-navigation .nav-menu .submenu > ul > li > a .bar {display:none;}
.mobile-navigation .nav-menu .submenu > ul > li > a .en {order:2; font-size:.8em; line-height:1.3em; font-weight:400; opacity:.4;}
.mobile-navigation .nav-menu .submenu > ul > li > a:hover,
.mobile-navigation .nav-menu .submenu > ul > li.active > a {background:var(--surface); color:var(--navy-900);}
.mobile-navigation .header-utils {display:none; flex-direction:row; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px; width:100%; max-width:none;}
.mobile-navigation .header-utils .util-link {position:relative; display:inline-flex; padding:var(--space-8) var(--space-12); color:var(--ink-soft); font-size:var(--font-size-14); font-weight:500; line-height:1.5em; border-radius:0; text-align:center;}
.mobile-navigation .header-utils .util-link:not(:last-of-type):after {display:block; content:""; position:absolute; top:50%; right:0; width:1px; height:12px; background:var(--line); transform:translateY(-50%);}
.mobile-navigation .header-utils .util-link:hover {background:transparent; color:var(--color-primary);}

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

html.menu-opened {overflow:hidden;}
/* sticky는 overflow:hidden 시 스크롤 위치에서 이탈 → 메뉴 열린 동안 헤더 고정 */
html.menu-opened #header {position:fixed; top:0; left:0; width:100%;}
html.menu-opened .mobile-navigation {visibility:visible; opacity:1; pointer-events:auto;}
html.menu-opened .mobile-overlay {display:none;}

/* main-visual */
.main-visual {position:relative; width:100%; height:calc(100vh - var(--header-height)); background:var(--navy-950);}
.main-visual .contain {max-width:calc(var(--wide-width) + (var(--space-container) * 2));}
.main-visual .items {position:relative; height:100%; background:var(--navy-950); overflow:hidden;}
.main-visual .item {position:relative; height:calc(100vh - var(--header-height)); overflow:hidden;}
.main-visual .img {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:8s linear; transform:scale(1.04);}
.main-visual .img img {display:block; width:100%; height:100%; object-fit:cover;}
.main-visual .item:after {content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,17,31,.72) 0%,rgba(7,17,31,.38) 38%,rgba(7,17,31,.12) 68%,rgba(7,17,31,.2) 100%),linear-gradient(180deg,rgba(7,17,31,.08) 0%,transparent 40%,rgba(7,17,31,.45) 100%); z-index:1;}
.main-visual .caption {position:absolute; inset:0; display:flex; align-items:flex-end; padding-bottom:168px; color:var(--white); pointer-events:none; z-index:4;}
.main-visual .caption .contain {pointer-events:auto; width:100%;}
.main-visual .caption .txt {max-width:980px; text-align:left;}
.main-visual .caption h2 {font-family:var(--font-title); font-size:var(--font-size-72); font-weight:800; line-height:1.18em; letter-spacing:-.035em; opacity:0; transform:translateY(24px); animation:mainVisualRise 1s var(--ease-out) .2s forwards;}
.main-visual .caption h2 span {display:block;}
.main-visual .caption h2 .hero-line-sub {white-space:nowrap;}
.main-visual .caption .hero-accent {font-style:normal; background:linear-gradient(135deg,var(--sky-200) 0%,var(--brand-400) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.main-visual .caption p {margin-top:var(--space-20); max-width:720px; color:rgba(255,255,255,.88); font-size:var(--font-size-22); font-weight:500; line-height:1.6em; letter-spacing:-.02em; opacity:0; transform:translateY(24px); animation:mainVisualRise 1s var(--ease-out) .38s forwards;}

.main-visual .active .img {transform:scale(1);}

.main-visual .slick-dots {position:absolute; bottom:var(--space-120); left:50%; transform:translateX(-50%); width:100%; max-width:1780px; height:8px; padding:0 var(--space-container); margin:0 auto; text-align:left; line-height:0; z-index:5;}
.main-visual .slick-dots li {display:inline-block; margin:0 4px;}
.main-visual .slick-dots li button {position:relative; display:block; width:60px; height:4px; background:rgba(255,255,255,.24); backdrop-filter:blur(20px); border:none; overflow:hidden; text-indent:-9999em; transition:.2s;}
.main-visual .slick-dots li button:before {display:none;}
.main-visual .slick-dots .slick-active button {background:#fff;}
.main-visual .visual-arrows {display:flex; gap:var(--space-20); align-items:center; margin-top:32px; opacity:0; transform:translateY(20px); animation:mainVisualRise 1s var(--ease-out) .52s forwards;}
.main-visual .slide-btn {position:relative; display:grid; place-items:center; flex:0 0 56px; width:56px; height:56px; color:var(--white); background:transparent; border:1px solid rgba(255,255,255,.55); border-radius:50%; transition:transform .25s, border-color .25s;}
.main-visual .slide-btn:before {content:""; position:absolute; inset:5px; background:var(--color-primary); border-radius:50%; transition:background .25s, transform .25s;}
.main-visual .slide-btn svg {position:relative; width:18px; height:18px; z-index:1;}
.main-visual .slide-btn:hover {border-color:var(--white); transform:scale(1.04);}
.main-visual .slide-btn:hover:before {background:var(--brand-500);}
.main-visual .visual-counter {color:var(--white); font-family:var(--font-title); font-size:var(--font-size-16); font-weight:700; letter-spacing:.04em; font-variant-numeric:tabular-nums;}
.main-visual .visual-counter .sep,
.main-visual .visual-counter .visual-total {margin:0; color:rgba(255,255,255,.45); font-weight:700;}
.main-visual .visual-counter .sep {margin:0 6px;}

.main-visual .quick {position:absolute; left:50%; bottom:40px; transform:translateX(-50%); width:min(100% - 48px, var(--wide-width)); max-width:var(--wide-width); color:var(--ink); background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.45); border-radius:var(--radius-16); box-shadow:var(--shadow-lg); backdrop-filter:blur(12px) saturate(130%); -webkit-backdrop-filter:blur(12px) saturate(130%); overflow:hidden; z-index:5;}
.main-visual .quick-grid {display:grid; grid-template-columns:repeat(4,1fr); width:100%;}
.main-visual .quick-item {position:relative; display:flex; align-items:center; justify-content:center; gap:var(--space-16); padding:var(--space-22) var(--space-20); border-right:1px solid rgba(15,39,68,.08); overflow:hidden; text-align:left; transition:background .3s var(--ease-out);}
.main-visual .quick-item:last-child {border-right:0;}
.main-visual .quick-item:before {content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--color-primary); transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--ease-out);}
.main-visual .quick-item:hover {background:rgba(255,255,255,.72);}
.main-visual .quick-item:hover:before {transform:scaleX(1);}
.main-visual .quick-ico {display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; background:rgba(0,68,131,.06); border-radius:var(--radius-10,10px); overflow:hidden; transition:transform .25s var(--ease-out), background .25s;}
.main-visual .quick-ico img {display:block; width:36px; height:36px; object-fit:contain;}
.main-visual .quick-item:hover .quick-ico {background:rgba(0,68,131,.1); transform:translateY(-3px);}
.main-visual .quick-item .txt {display:block; min-width:0;}
.main-visual .quick-item strong {display:block; color:#2c2c2c; font-family:var(--font-title); font-size:var(--font-size-20); font-weight:700; line-height:1.3em; letter-spacing:-.03em; white-space:nowrap; transition:color .25s;}
.main-visual .quick-item:hover strong {color:var(--color-primary);}

@keyframes mainVisualRise {
	to {opacity:1; transform:translateY(0);}
}

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

/* ========== main sections ========== */
.section-head {display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-20); margin-bottom:var(--space-44); position:relative;}
.eyebrow {display:inline-flex; align-items:center; gap:var(--space-8); margin-bottom:var(--space-10); font-size:var(--font-size-12); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-600);}
.eyebrow:before {content:""; width:var(--space-18); height:2px; background:var(--brand-500);}
.section-head h2 {font-family:var(--font-title); font-size:var(--font-size-42); font-weight:700; letter-spacing:-.04em; line-height:1.2em; color:var(--ink);}
.section-head p {margin-top:var(--space-12); color:var(--ink-soft); font-size:var(--font-size-18); font-weight:400; line-height:1.6em; letter-spacing:-.02em;}
.more-btn {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-height:44px; margin-left:var(--space-32); padding:0 var(--space-24); border:1px solid #d0d7e2; border-radius:var(--r-pill); background:var(--white); font-size:var(--font-size-16); font-weight:700; color:#334155; letter-spacing:-.02em; transition:border-color .2s, color .2s, background .2s;}
.more-btn:hover {border-color:var(--brand-600); color:var(--brand-600); background:#f5f9fc;}

.btn {display:inline-flex; align-items:center; justify-content:center; gap:var(--space-8); min-height:52px; padding:0 var(--space-26); border-radius:var(--r-sm); font-size:var(--font-size-16); font-weight:700; letter-spacing:-.02em; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;}
.btn:hover {transform:translateY(-2px);}
.btn-primary {background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); color:var(--white); box-shadow:0 10px 28px rgba(0, 68, 131, .3);}
.btn-primary:hover {background:linear-gradient(135deg, var(--brand-400), var(--brand-500)); box-shadow:0 14px 34px rgba(0, 68, 131, .38);}
.btn svg {width:16px; height:16px;}

.news-schedule {position:relative; padding:var(--space-120) 0 var(--space-100); background:#f8f9fb;}
.news-schedule .section-head {align-items:flex-end; justify-content:space-between; gap:var(--space-24);}
.news-schedule .section-head-title {flex:1; min-width:0;}
.news-schedule .section-head-title .eyebrow {margin-bottom:var(--space-8); color:var(--brand-600); font-weight:800;}
.news-schedule .section-head-title .eyebrow:before {display:none;}
.news-schedule .section-head-row {display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-20) var(--space-28);}
.news-schedule .section-head-row h2 {margin:0; flex-shrink:0;}
.news-schedule .section-head-desc {margin:0; flex:1; min-width:var(--space-200); max-width:720px; color:var(--ink-soft); font-size:var(--font-size-18); font-weight:400; line-height:1.6em; letter-spacing:-.02em;}
.news-schedule .section-head .more-btn {flex-shrink:0; margin-left:0;}
.ns-grid {display:grid; grid-template-columns:1fr; gap:var(--space-32); align-items:stretch;}
.board-card {display:flex; flex-direction:column; background:var(--white); border:1px solid #e2e6ec; border-radius:var(--r-md); padding:0; min-height:0; box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease-out), border-color .3s; overflow:hidden;}
.board-card:hover {border-color:#cfdcea; box-shadow:var(--shadow-md);}
.board-card:not(:has(.board-card-head)) .main-board-list {padding-top:var(--space-16);}
.main-board-list {list-style:none; flex:1; margin:0; padding:var(--space-8) var(--space-20) var(--space-16);}
.main-board-list li {border-bottom:1px solid #eef1f5;}
.main-board-list li:last-child {border-bottom:0;}
.main-board-list a {display:grid; grid-template-columns:68px minmax(0, 1fr); gap:var(--space-16); align-items:center; padding:var(--space-17) var(--space-8); border-radius:var(--r-xs); transition:background .28s var(--ease-out), padding .28s var(--ease-out);}
.main-board-list li:first-child {border-bottom-color:#e2e8f0;}
.main-board-list li:first-child a,
.main-board-list li:hover a {padding:var(--space-20) var(--space-10); grid-template-columns:76px minmax(0, 1fr); background:linear-gradient(90deg, rgba(0, 68, 131, .06) 0%, transparent 72%);}
.main-board-list li:first-child a .title,
.main-board-list li:hover a .title {font-weight:700; color:var(--ink); font-size:var(--font-size-19);}
.main-board-list li:first-child .date,
.main-board-list li:hover .date {color:var(--brand-600);}
.main-board-list:has(li:hover) li:first-child:not(:hover) a {padding:var(--space-17) var(--space-8); grid-template-columns:var(--space-68) minmax(0, 1fr); background:transparent;}
.main-board-list:has(li:hover) li:first-child:not(:hover) a .title {font-weight:500; color:#6b7280; font-size:var(--font-size-18);}
.main-board-list:has(li:hover) li:first-child:not(:hover) .date {color:#1f2937;}
.main-board-list .date {font-size:var(--font-size-16); font-weight:700; color:#1f2937; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.02em; transition:color .28s var(--ease-out);}
.main-board-list .title {position:relative; justify-self:start; max-width:100%; font-size:var(--font-size-18); font-weight:500; letter-spacing:-.02em; color:#6b7280; line-height:1.45em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .28s var(--ease-out), font-size .28s var(--ease-out), font-weight .28s var(--ease-out);}

.intro-links {padding:var(--space-88) 0 clamp(66px, calc(112 / var(--inner) * 100vw), 112px);; background:var(--white);}
.intro-links .section-head {align-items:flex-end; justify-content:space-between; gap:var(--space-48); margin-bottom:var(--space-40);}
.feature-grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-24);}
.feature-card:first-child {grid-column:1 / -1; display:grid; grid-template-columns:1.15fr 1fr; gap:var(--space-36); align-items:center;}
.feature-card:first-child .feature-body {padding:var(--space-8) 0 0;}
.feature-card:first-child .feature-body h3 {font-size:var(--font-size-30);}
.feature-card:first-child .feature-foot {padding-top:var(--space-28);}
.feature-card {display:flex; flex-direction:column; color:inherit; background:transparent; border-radius:0; min-height:0; box-shadow:none; transition:transform .3s var(--ease-out);}
.feature-card:hover {transform:translateY(-4px);}
.feature-thumb {position:relative; display:block; aspect-ratio:16 / 10; border-radius:var(--r-md); overflow:hidden; background:#e8eef5; box-shadow:var(--shadow-sm); transition:box-shadow .3s var(--ease-out);}
.feature-thumb:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(0, 26, 40, .18) 100%); opacity:0; transition:opacity .45s var(--ease-out); pointer-events:none;}
.feature-card:hover .feature-thumb:after {opacity:1;}
.feature-card:hover .feature-thumb {box-shadow:var(--shadow-md);}
.feature-thumb img {width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-out);}
.feature-card:hover .feature-thumb img {transform:scale(1.05);}
.feature-body {display:flex; flex-direction:column; flex:1; padding:var(--space-22) var(--space-6) 0;}
.feature-body h3 {margin:0; font-family:var(--font-title); font-size:var(--font-size-24); font-weight:700; letter-spacing:-.03em; line-height:1.35em; color:#111827;}
.feature-body p {margin:var(--space-18) 0 0; font-size:var(--font-size-17); line-height:1.45em; color:var(--muted);}
.feature-body p span {display:block;}
.feature-body p span + span {margin-top:2px;}
.feature-foot {display:flex; align-items:center; justify-content:flex-end; gap:var(--space-10); margin-top:auto; padding-top:var(--space-22);}
.feature-foot .foot-label {font-size:var(--font-size-14); font-weight:800; letter-spacing:.08em; color:#94a3b8;}
.feature-plus {width:34px; height:34px; border-radius:var(--r-xs); background:#e8eef5; color:#334155; display:grid; place-items:center; transition:background .25s, color .25s, transform .25s;}
.feature-plus svg {width:14px; height:14px;}
.feature-card:hover .feature-plus {background:var(--brand-600); color:var(--white); transform:rotate(90deg);}
.feature-card:hover .foot-label {color:var(--brand-600);}

.metrics {position:relative; padding:var(--space-120) 0; color:var(--white); background-color:var(--navy-900); background-image:linear-gradient(165deg, rgba(0, 47, 92, .82) 0%, rgba(0, 58, 112, .76) 52%, rgba(0, 68, 131, .72) 100%), url("/images/main/metrics-bg.jpg"); background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden;}
.metrics:before {content:""; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(183, 212, 239, .08), transparent 70%), radial-gradient(ellipse 40% 50% at 100% 0%, rgba(255, 255, 255, .04), transparent 60%); pointer-events:none;}
.metrics .contain {position:relative; z-index:1;}
.metrics .eyebrow {margin:0 0 var(--space-12); font-size:var(--font-size-13); font-weight:700; line-height:1.4em; letter-spacing:.12em; color:var(--sky-200);}
.metrics .eyebrow:before {width:6px; height:6px; border-radius:50%; background:var(--sky-200); flex-shrink:0;}
.metrics-head {margin-bottom:var(--space-56);}
.metrics-head h2 {font-family:var(--font-title); font-size:var(--font-size-42); font-weight:700; letter-spacing:-.04em; line-height:1.2em; color:var(--white);}
.metrics-head p {margin-top:var(--space-12); font-size:var(--font-size-18); font-weight:400; line-height:1.6em; letter-spacing:-.02em; color:rgba(255, 255, 255, .62);}
.metric-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-16);}
.metric {padding:var(--space-28) var(--space-24); border-radius:var(--r-md); border:1px solid rgba(255, 255, 255, .1); background:rgba(255, 255, 255, .04); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .35s var(--ease-out), background .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);}
.metric:hover {transform:translateY(-4px); background:rgba(255, 255, 255, .08); border-color:rgba(255, 255, 255, .18); box-shadow:0 16px 40px rgba(0, 20, 40, .22);}
.metric.is-featured {background:rgba(255, 255, 255, .07); border-color:rgba(183, 212, 239, .22);}
.metric.is-featured:hover {border-color:rgba(183, 212, 239, .38); box-shadow:0 20px 48px rgba(0, 20, 40, .28);}
.metric-num {display:block; font-family:var(--font-title); font-size:var(--font-size-62); font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--white); font-variant-numeric:tabular-nums; transition:transform .35s var(--ease-out);}
.metric:hover .metric-num {transform:translateY(-2px);}
.metric.is-featured .metric-num {font-size:var(--font-size-72);}
.metric-num .num {display:inline-block;}
.metric-num .unit {margin-left:5px; font-size:.4em; font-weight:700; letter-spacing:-.02em; color:var(--sky-200);}
.metric-label {display:block; margin-top:var(--space-14); font-size:var(--font-size-17); font-weight:500; letter-spacing:-.02em; color:rgba(255, 255, 255, .58); transition:color .25s;}
.metric:hover .metric-label {color:rgba(255, 255, 255, .78);}

.guide-hub {padding:96px 0 var(--space-150); background:linear-gradient(180deg, #eef3f9 0%, #e4ebf4 100%);}
.guide-hub-grid {display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:var(--space-24); align-items:stretch;}
.guide-links {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-16);}
.guide-link {display:block; color:inherit;}
.guide-link-box {display:flex; align-items:center; gap:var(--space-18); min-height:112px; padding:var(--space-24) var(--space-26); background:var(--white); border:1px solid #dde5ef; border-radius:var(--r-md); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease-out), border-color .25s, box-shadow .25s;}
.guide-link:hover .guide-link-box {transform:translateY(-3px); border-color:#b8cde3; box-shadow:var(--shadow-md);}
.guide-link-ico {width:52px; height:52px; border-radius:var(--r-sm); background:linear-gradient(145deg, var(--brand-600), var(--brand-500)); display:grid; place-items:center; flex-shrink:0; transition:transform .25s;}
.guide-link-ico svg {width:24px; height:24px; color:var(--white);}
.guide-link:hover .guide-link-ico {transform:scale(1.05);}
.guide-link-body {flex:1; min-width:0;}
.guide-link-body strong {display:block; font-family:var(--font-title); font-size:var(--font-size-20); font-weight:800; letter-spacing:-.03em; line-height:1.35em; color:#0f172a;}
.guide-link-arrow {width:36px; height:36px; border-radius:50%; background:#eef3f9; color:#64748b; display:grid; place-items:center; flex-shrink:0; transition:background .25s, color .25s, transform .25s;}
.guide-link-arrow svg {width:16px; height:16px;}
.guide-link:hover .guide-link-arrow {background:var(--brand-600); color:var(--white); transform:translateX(2px);}
.guide-contact {display:flex; flex-direction:column; justify-content:center; padding:var(--space-40) var(--space-36); border-radius:var(--r-md); background-image:linear-gradient(165deg, rgba(0, 58, 112, .93) 0%, rgba(0, 68, 131, .89) 52%, rgba(10, 90, 158, .85) 100%), url("/images/main/contact-bg.jpg"); background-size:cover; background-position:center; background-repeat:no-repeat; color:var(--white); box-shadow:var(--shadow-lg); position:relative; overflow:hidden;}
.guide-contact:before {content:""; position:absolute; width:220px; height:220px; right:-60px; top:-80px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.09), transparent 68%); pointer-events:none;}
.guide-contact .label {position:relative; margin:0 0 var(--space-16); font-size:var(--font-size-15); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255, 255, 255, .72);}
.guide-contact .phone {position:relative; margin:0; font-family:var(--font-title); font-size:var(--font-size-26); font-weight:800; letter-spacing:-.03em; line-height:1.1em;}
.guide-contact .btn-primary {position:relative; margin-top:var(--space-28); align-self:flex-start; min-width:148px; min-height:46px; font-size:var(--font-size-16); background:var(--white); color:var(--brand-600); box-shadow:none;}
.guide-contact .btn-primary:hover {background:#f0f7ff; color:#003a70;}

/* 서브 공통 (비주얼, 타이틀, 로컬 네비) */
.sub-visual {position:relative; width:100%; height:auto; padding:var(--space-120) 0 0; overflow:hidden; color:var(--ink); background:var(--white);}
.sub-visual .cell {position:relative; width:100%;}
.sub-visual .sv-head {padding-bottom:0;}
.lnb-depth {gap:var(--space-16); margin-bottom:var(--space-28);}
.lnb-depth .icon {display:grid; place-items:center; flex:0 0 16px; width:16px; height:16px; color:var(--muted); transition:color .2s;}
.lnb-depth .icon:hover {color:var(--brand-600);}
.lnb-depth .icon svg {display:block; width:16px; height:16px;}
.lnb-depth .depth {position:relative; display:inline-flex; align-items:center; color:#b8b8b8; font-size:var(--font-size-16); font-weight:700; line-height:1.5em; letter-spacing:-.03em; white-space:nowrap;}
.lnb-depth .depth:before {content:""; display:inline-block; width:3px; height:3px; margin-right:var(--space-16); background:#b8b8b8; border-radius:50%; flex-shrink:0;}
.lnb-depth .depth2 {color:var(--brand-600);}
.sv-head-row {display:flex; align-items:center; justify-content:space-between; gap:var(--space-24) var(--space-32); flex-wrap:wrap; padding-bottom:var(--space-48);}
.sub-visual .sv-head h2 {margin:0; flex-shrink:0; font-family:var(--font-title); font-size:var(--font-size-48); font-weight:800; line-height:1.5em; letter-spacing:-.03em; color:var(--ink);}
.lnb {width:auto; max-width:100%; overflow:hidden;}
.lnb .swiper {overflow:visible;}
.lnb ul {display:flex; gap:var(--space-10);}
.lnb ul li {flex:0 0 auto; width:auto; text-align:center;}
.lnb ul li a {display:inline-flex; align-items:center; justify-content:center; min-width:0; height:var(--lnb-height); padding:0 var(--space-28); color:#8f8f8f; background:#f4f4f4; border-radius:32px; font-size:var(--font-size-16); font-weight:700; line-height:1.5em; letter-spacing:-.05em; white-space:nowrap; transition:background .25s, color .25s;}
.lnb ul li a:hover {color:var(--ink-soft); background:#eceff3;}
.lnb ul li.active a {color:var(--white); background:var(--brand-600);}
.sv-divider {display:block; width:100%; height:1px; background:var(--line); border:0;}

#contArea {max-width:calc(var(--content-width) + (var(--space-container) * 2)); padding:0 var(--space-container); margin:0 auto;}
#contArea.wide {max-width:100%; padding:0;}

.sub-title h2 {position:relative; padding-top:var(--space-80); padding-bottom:var(--space-48); color:var(--ink); font-family:var(--font-title); font-size:var(--font-size-36); font-weight:700; line-height:1.5em; letter-spacing:-.03em; text-align:left;}

.real-cont {min-height:300px; padding-top:var(--space-80); padding-bottom:var(--space-150);}
.sub-title:not(.blind) + .real-cont {padding-top:0;}
.real-cont.pb0 {padding-bottom:0;}

/* footer */
#footer {position:relative; width:100%; padding:56px 0 40px; color:rgba(255,255,255,.62); background:var(--navy-950); font-size:16px; z-index:1;}
#footer .contain {display:block; max-width:calc(var(--content-width) + (var(--space-container) * 2));}
#footer .ft-head {display:flex; align-items:center; justify-content:space-between; gap:var(--space-24); margin-bottom:var(--space-32);}
#footer .ft-logo-wrap {display:block; width:280px; max-width:min(280px,62vw); height:64px;}
#footer .ft-logo-wrap img {display:block; width:280px; max-width:100%; height:64px; object-fit:contain; object-position:left center;}
#footer .footer-top-btn {display:flex; align-items:center; justify-content:center; flex:0 0 52px; width:52px; height:52px; color:var(--navy-950); background:var(--white); border-radius:50%; transition:transform .25s var(--ease), background .25s;}
#footer .footer-top-btn:hover {background:var(--brand-100); transform:translateY(-2px);}
#footer .footer-top-btn svg {width:20px; height:20px;}
#footer .ft-body {display:flex; flex-direction:column; gap:var(--space-12);}
#footer .ft-desc {color:rgba(255,255,255,.62); font-size:16px; line-height:1.65em; letter-spacing:-.02em;}
#footer .ft-meta {display:flex; flex-direction:column; gap:var(--space-8); margin-top:4px;}
#footer .ft-meta-row {display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-8); font-size:16px; line-height:1.75em;}
#footer .ft-meta-label {flex-shrink:0; color:rgba(255,255,255,.92); font-weight:700;}
#footer .ft-meta-sep {flex-shrink:0; color:rgba(255,255,255,.22);}
#footer .ft-meta-value {color:rgba(255,255,255,.48); font-weight:400;}
#footer .ft-meta-value a {color:inherit;}
#footer .ft-meta-value a:hover {color:var(--white);}
#footer .ft-meta-row-contact {gap:var(--space-8) var(--space-28); white-space:nowrap;}
#footer .ft-meta-item {display:inline-flex; align-items:baseline; flex-shrink:0; gap:var(--space-8);}
#footer .ft-divider {display:block; width:100%; height:1px; margin:var(--space-28) 0 var(--space-24); background:rgba(255,255,255,.1); border:0;}
#footer .ft-bar {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-20) var(--space-32);}
#footer .copyright {color:rgba(255,255,255,.32); font-size:14px; line-height:1.6em;}
#footer .copyright-sep {margin:0 6px; color:rgba(255,255,255,.22);}
#footer .copyright-design {color:rgba(255,255,255,.18);}
#footer .ft-links {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
#footer .ft-links a {padding:0 12px; color:rgba(255,255,255,.62); font-size:13px; font-weight:700; transition:color .2s;}
#footer .ft-links a:first-child {padding-left:0;}
#footer .ft-links a:last-child {padding-right:0;}
#footer .ft-links a:hover {color:var(--white);}
#footer .ft-links .sep {color:rgba(255,255,255,.22); font-size:12px;}