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

/* ============================================================
   상단 유틸 / 헤더
   ============================================================ */
.util {height: 4rem; font-size: 1.3rem; color: #b8d9ef; background: var(--navy);}
.util .inner {display: flex; align-items: center; justify-content: space-between; height: 100%;}
.hd {position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: .2rem solid var(--line); transition: box-shadow .3s;}
.hd.is-fixed {box-shadow: 0 .8rem 2.4rem rgba(26, 74, 107, .1);}
.hd .inner {display: flex; align-items: center; justify-content: space-between; height: 8.8rem; gap: 2rem;}
.logo {display: inline-flex; align-items: center; gap: 1.2rem;}
.logo-ic {display: grid; place-items: center; width: 4.8rem; height: 4.8rem; border-radius: 1.4rem; font-size: 2.2rem; font-weight: 700; color: #fff; background: var(--green);}
.logo-tx {font-size: 2.6rem; font-weight: 800; letter-spacing: -.05rem; color: var(--navy);}
.gnb {display: flex; align-items: center; gap: 4.8rem; font-size: 1.7rem; font-weight: 600; color: var(--text);}
.gnb a {display: inline-flex; align-items: center; min-height: 4.8rem; transition: color .25s;}
.gnb a:hover, .gnb a.is-on {color: var(--green);}
.gnb a.is-on {font-weight: 700;}
.hd-cta {display: flex; align-items: center; gap: 1rem;}
.hd-cta .pill {min-height: 4.4rem; padding: 0 2.2rem; font-size: 1.5rem;}
.hd-cta .pill-line {color: var(--green); border-color: var(--green);}
.hd-cta .pill-line:hover {color: #fff; background: var(--green);}
.burger {display: none; width: 4.8rem; height: 4.8rem; border-radius: 1.2rem; background: var(--bg-blue);}
.burger span {display: block; width: 2.2rem; height: .2rem; margin: .5rem auto; background: var(--navy); transition: transform .3s var(--ease), opacity .2s;}
.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);}
.mnav {display: none;}


.ft {padding-block: 4.8rem; color: #8fb3d0; background: #0a2230;}
.ft .inner {display: flex; align-items: center; justify-content: space-between; gap: 3rem;}
.ft-name {font-size: 2.2rem; font-weight: 800; color: #fff;}
.ft-desc {margin-top: .6rem; font-size: 1.3rem;}
.ft-r {text-align: right; font-size: 1.3rem;}
.ft-links {display: flex; justify-content: flex-end; gap: 2rem; margin-top: .8rem;}
.ft-links a {display: inline-flex; align-items: center; min-height: 4.4rem; transition: color .25s;}
.ft-links a:hover {color: #fff;}


/* ============================================================
   등장 효과 (스크립트가 정상일 때만 .fx 로 숨김)
   ============================================================ */
.fx [data-reveal] {opacity: 0; transform: translateY(3rem); transition: opacity .8s ease var(--d, 0s), transform .8s var(--ease) var(--d, 0s);}
.fx [data-reveal].is-in {opacity: 1; transform: none;}

/* PC 상단 메뉴 + 하위 메뉴(드롭다운) */
.gnb {display: block;}
.gnb-list {display: flex; align-items: center; gap: 4rem;}
.gnb-item {position: relative;}
.gnb .gnb-link {display: inline-flex; align-items: center; min-height: 8.8rem; font-size: 1.7rem; font-weight: 600; color: var(--text); transition: color .25s;}
.gnb .gnb-link:hover, .gnb .gnb-item.is-current .gnb-link {color: var(--green);}
.gnb .gnb-item.is-current .gnb-link {font-weight: 700;}
.gnb .gnb-item.is-current .gnb-link::after {content: ''; position: absolute; left: 0; right: 0; bottom: 1.6rem; height: .3rem; border-radius: .3rem; background: var(--green);}
.gnb-sub {position: absolute; top: calc(100% - 1.4rem); left: 50%; z-index: 5; min-width: 20rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1.8rem; background: #fff; box-shadow: 0 1.6rem 3.2rem rgba(26, 74, 107, .14); opacity: 0; visibility: hidden; transform: translate(-50%, 1rem); transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;}
.gnb-item.has-sub:hover .gnb-sub, .gnb-item.has-sub:focus-within .gnb-sub {opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .25s var(--ease), visibility 0s;}
.gnb-item.is-closed .gnb-sub {opacity: 0; visibility: hidden;}
.gnb .gnb-sub a {display: flex; align-items: center; min-height: 4.4rem; padding: 0 1.4rem; border-radius: 1rem; font-size: 1.5rem; font-weight: 600; white-space: nowrap; color: var(--text); transition: background .25s, color .25s;}
.gnb .gnb-sub a:hover, .gnb .gnb-sub a:focus-visible, .gnb .gnb-sub a.is-on {color: var(--green); background: var(--green-soft);}

/* 모바일 메뉴 보강 */
.m-acc {display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 6rem; border-bottom: 1px solid var(--line); font-size: 2rem; font-weight: 700; text-align: left;}
.m-acc i {position: relative; width: 1.6rem; height: 1.6rem; transition: transform .3s var(--ease);}
.m-acc i::before, .m-acc i::after {content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: .2rem; background: currentColor;}
.m-acc i::after {transform: rotate(90deg); transition: transform .3s var(--ease);}
.m-acc[aria-expanded="true"] {color: var(--green);}
.m-acc[aria-expanded="true"] i::after {transform: rotate(0);}
.m-sub {padding: .6rem 0 1.2rem; background: var(--bg-blue);}
.mnav .m-sub a {min-height: 4.8rem; padding-left: 2rem; border-bottom: 0; font-size: 1.7rem; font-weight: 600;}
.pill-line-w {color: #fff; border: .2rem solid rgba(255, 255, 255, .7);}
.pill-line-w:hover {color: var(--green-dark); background: #fff;}

/* 인터랙션: 스크롤 진행 막대 / 맨 위로 버튼 */
.fx-progress {position: fixed; top: 0; left: 0; z-index: 300; width: 100%; height: .4rem; background: linear-gradient(90deg, var(--green), var(--yellow)); transform: scaleX(0); transform-origin: left; pointer-events: none;}
.totop {position: fixed; right: 2.4rem; bottom: 2.4rem; z-index: 150; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; color: #fff; background: var(--navy); box-shadow: 0 1rem 2.4rem rgba(26, 74, 107, .3); opacity: 0; visibility: hidden; transform: translateY(1.6rem); transition: opacity .3s, transform .3s var(--ease), background .25s, visibility 0s .3s;}
.totop.is-on {opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s var(--ease), background .25s, visibility 0s;}
.totop:hover, .totop:focus-visible {background: var(--green); transform: translateY(-.4rem);}
.totop svg {width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;}
@media (max-width: 47.999em) {.totop {right: 1.4rem; bottom: 1.4rem; width: 4.8rem; height: 4.8rem;}}