@charset "utf-8";
#hd_login_msg, #hd_pop {display: none;}

/* ============================================================
   헤더 / 펼쳐지는 메뉴
   ============================================================ */
.hd {position: fixed; inset: 0 0 auto; z-index: 100; color: #fff; transition: background .3s, color .3s, box-shadow .3s;}
.hd.is-solid, .hd.is-open, .hd.is-nav {color: var(--text); background: #fff; box-shadow: 0 1px 0 var(--line);}
.hd-in {position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: center; width: min(100% - var(--gut) * 2, var(--max)); height: var(--hd-h); margin-inline: auto;}
.logo {display: inline-flex; align-items: center; gap: 1rem; min-height: 4.8rem;}
.logo svg {width: 3rem; height: 3.4rem; fill: var(--blue);}
.logo-word {font-size: 2rem; font-weight: 700; letter-spacing: -.01em;}
.hd-util {display: flex; align-items: center; gap: 1.2rem;}
.btn-quote {display: none; align-items: center; gap: .8rem; min-height: 4.8rem; padding: 0 2.4rem; font-size: 1.5rem; font-weight: 700; color: #fff; background: var(--blue); transition: background .3s;}
.btn-quote svg {width: 1.4rem; height: 1.4rem; transition: transform .3s var(--ease);}
.btn-quote:hover, .btn-quote:focus-visible {background: #0e47d1;}
.btn-quote:hover svg {transform: translate(.4rem, -.4rem);}
.gnb {display: none;}
.burger {position: relative; width: 4.8rem; height: 4.8rem;}
.burger span {position: absolute; left: 1.1rem; width: 2.6rem; height: .2rem; background: currentColor; transition: transform .3s var(--ease), opacity .2s;}
.burger span:nth-child(1) {top: 1.6rem;}
.burger span:nth-child(2) {top: 2.3rem;}
.burger span:nth-child(3) {top: 3rem;}
.burger[aria-expanded="true"] span:nth-child(1) {transform: translateY(.7rem) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2) {opacity: 0;}
.burger[aria-expanded="true"] span:nth-child(3) {transform: translateY(-.7rem) rotate(-45deg);}
@media (min-width: 64.0625em) {
  .hd-in {grid-template-columns: 1fr auto 1fr;}
  .gnb {display: block;}
  .burger {display: none;}
  .btn-quote {display: inline-flex; justify-self: end;}
  .hd-util {justify-content: flex-end;}
}
@media (min-width: 40em) and (max-width: 64em) {.btn-quote {display: inline-flex;}}

.gnb-list {display: flex; gap: 1.2rem;}
.gnb-item {display: flex; align-items: center;}
.gnb-link {display: inline-flex; align-items: center; min-height: 4.8rem; padding-inline: 1.2rem 0; font-size: 1.6rem; font-weight: 700; transition: color .25s;}
.gnb-toggle {display: grid; place-items: center; width: 3.2rem; height: 4.8rem;}
.gnb-toggle svg {width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s var(--ease);}
.gnb-toggle[aria-expanded="true"] svg {transform: rotate(180deg);}
.gnb-item.is-active .gnb-link {color: var(--blue);}

.mega {position: absolute; inset: 100% 0 auto; z-index: 1; color: var(--text); background: #fff; box-shadow: 0 2.4rem 4rem rgba(16, 29, 58, .1); border-top: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-1.4rem); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;}
.hd.is-open .mega {opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;}
.mega-in {display: grid; width: min(100% - var(--gut) * 2, var(--max)); margin-inline: auto;}
.mega-group {grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; padding-block: 5.6rem 6.4rem; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;}
.mega-group.is-on {opacity: 1; visibility: visible; transition: opacity .3s .05s, visibility 0s;}
.mega-title {font-family: var(--font-en); font-size: clamp(4.4rem, 5vw, 7.2rem); line-height: 1; text-transform: uppercase; color: var(--navy);}
.mega-desc {margin-top: 1.6rem; font-size: 1.6rem; color: var(--sub);}
.mega-links {display: grid; gap: .4rem;}
.mega-links a {display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 5.6rem; padding-inline: 1.6rem; border-bottom: 1px solid var(--line); font-size: 2rem; font-weight: 700; opacity: 0; transform: translateY(1rem); transition: color .25s, background .25s, padding .25s var(--ease), opacity .3s, transform .3s var(--ease);}
.mega-links a svg {width: 1.8rem; height: 1.8rem; color: var(--blue); opacity: 0; transition: opacity .25s, transform .3s var(--ease);}
.mega-links a:hover, .mega-links a:focus-visible {color: var(--blue); background: var(--bg-alt); padding-left: 2.4rem;}
.mega-links a:hover svg, .mega-links a:focus-visible svg {opacity: 1; transform: translate(.4rem, -.4rem);}
.mega-group.is-on .mega-links a {opacity: 1; transform: none;}
.mega-group.is-on .mega-links li:nth-child(1) a {transition-delay: 0s, 0s, 0s, .05s, .05s;}
.mega-group.is-on .mega-links li:nth-child(2) a {transition-delay: 0s, 0s, 0s, .09s, .09s;}
.mega-group.is-on .mega-links li:nth-child(3) a {transition-delay: 0s, 0s, 0s, .13s, .13s;}
.mega-group.is-on .mega-links li:nth-child(4) a {transition-delay: 0s, 0s, 0s, .17s, .17s;}
@media (max-width: 64em) {.mega {display: none;}}

.scrim {position: fixed; inset: 0; z-index: 90; background: rgba(16, 29, 58, .38); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;}
.scrim.is-on {opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s;}

/* 모바일 메뉴 */
.mnav {position: fixed; inset: var(--hd-h) 0 0; z-index: 95; display: flex; flex-direction: column; padding: 1.6rem var(--gut) 4rem; overflow-y: auto; overscroll-behavior: contain; color: var(--text); background: #fff; opacity: 0; visibility: hidden; transform: translateY(-1.6rem); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;}
.mnav.is-on {opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;}
.m-acc {display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 6.4rem; border-bottom: 1px solid var(--line); font-size: 2.2rem; font-weight: 700; text-align: left;}
.m-acc svg {width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s var(--ease);}
.m-acc[aria-expanded="true"] {color: var(--blue);}
.m-acc[aria-expanded="true"] svg {transform: rotate(180deg);}
.m-sub {padding: .8rem 0 1.6rem; background: var(--bg-alt);}
.m-sub a {display: flex; align-items: center; min-height: 4.8rem; padding-inline: 2rem; font-size: 1.7rem; font-weight: 500;}
.m-sub a:active {color: var(--blue);}
.m-cta {margin-top: 3.2rem; width: 100%;}
html.nav-lock {overflow: hidden;}
@media (min-width: 64.0625em) {.mnav {display: none;}}


/* ============================================================
   푸터
   ============================================================ */
.ft {padding-block: 4.8rem; color: rgba(255, 255, 255, .7); background: #0a1429;}
.ft-in {display: grid; gap: 3.2rem; align-items: center;}
.ft .logo {color: #fff;}
.ft-nav {display: flex; flex-wrap: wrap; gap: .4rem 3.2rem;}
.ft-nav a {display: inline-flex; align-items: center; min-height: 4.8rem; font-size: 1.5rem; transition: color .25s;}
.ft-nav a:hover, .ft-nav a:focus-visible {color: #fff;}
.ft-note {font-size: 1.3rem; letter-spacing: .06em;}
@media (min-width: 64em) {.ft-in {grid-template-columns: auto 1fr auto; gap: 6.4rem;} .ft-nav {justify-content: center;} .ft-note {text-align: right;}}


/* ============================================================
   등장 효과 (JS가 정상일 때만 .fx 로 숨김 처리)
   ============================================================ */
.ln {display: block; overflow: hidden; padding-block: .12em; margin-block: -.12em;}
.ln > span {display: block;}
.fx [data-reveal] {opacity: 0; transform: translateY(2rem); transition: opacity .9s ease var(--d, 0s), transform .9s var(--ease) var(--d, 0s);}
.fx [data-reveal].is-in {opacity: 1; transform: none;}
.fx [data-lines] .ln > span {transform: translateY(105%); transition: transform .95s var(--ease) calc(var(--d, 0s) + var(--i, 0) * .12s);}
.fx [data-lines].is-in .ln > span {transform: none;}
.ln:nth-child(2) {--i: 1;}
.ln:nth-child(3) {--i: 2;}
.fx .rule {transform: scaleX(0); transition: transform 1.1s var(--ease) var(--d, 0s);}
.fx .rule.is-in {transform: none;}
.outline-reveal > span {display: block;}
.fx .outline-reveal > span {clip-path: inset(-10% 100% -10% 0); transition: clip-path 1.8s var(--ease) var(--d, 0s);}
.fx .outline-reveal.is-in > span {clip-path: inset(-10% -2% -10% 0);}

@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  *, *::before, *::after {animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important;}
  .hero-bg {transform: none;}
}

/* 현재 메뉴 표시 / 푸터 보강 */
.gnb-item.is-current .gnb-link {position: relative;}
.gnb-item.is-current .gnb-link::after {content: ''; position: absolute; left: 1.2rem; right: 0; bottom: .6rem; height: .2rem; background: var(--blue);}
.ft-info {margin-top: 3.2rem; padding-top: 3.2rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 1.4rem;}
.ft-info address {display: flex; flex-wrap: wrap; gap: .8rem 3.2rem; font-style: normal;}
.ft-util {margin-top: 2.4rem;}
.ft-util ul {display: flex; gap: 1.6rem;}
.ft-util a {display: inline-flex; align-items: center; min-height: 4.4rem; font-size: 1.3rem; color: rgba(255, 255, 255, .6);}
.ft-util a:hover, .ft-util a:focus-visible {color: #fff;}