/* 플로팅 헤더 (PC 전용, 1101px 이상) */
@media (min-width:1101px) {
	#header.hf{top:1.6rem; left:6rem; right:6rem; width:auto; padding:1.6rem 4rem; border-radius:999px; background:#fff; box-shadow:0 1rem 3rem rgba(1,44,62,0.12); transition:top .55s cubic-bezier(.65,0,.35,1), left .55s cubic-bezier(.65,0,.35,1), right .55s cubic-bezier(.65,0,.35,1), border-radius .55s cubic-bezier(.65,0,.35,1), padding .55s cubic-bezier(.65,0,.35,1), box-shadow .55s ease, transform .4s cubic-bezier(.45,0,.55,1);}
	#header.hf.is_fixed{top:0; left:0; right:0; padding:1.6rem 6rem; border-radius:0; box-shadow:0 1px 0 rgba(0,0,0,0.06);}
	#header.hf.is_hide{transform:translateY(calc(-100% - 3rem));}

	/* 첫 진입: 로고만 보이는 작은 알약 → 좌우로 펼침 */
	#header.hf.is_intro{transition:left 1s cubic-bezier(.65,0,.35,1), right 1s cubic-bezier(.65,0,.35,1), padding 1s cubic-bezier(.65,0,.35,1);}
	#header.hf .logo{transition:left 1s cubic-bezier(.65,0,.35,1), transform 1s cubic-bezier(.65,0,.35,1);}
	#header.hf .nav, #header.hf .headerIconGroup{transition:opacity .4s ease;}
	#header.hf-notrans, #header.hf-notrans .logo{transition:none !important;}
	#header.hf.is_load{padding-left:2.8rem; padding-right:2.8rem;}
	#header.hf.is_load .logo{left:50%; transform:translate(-50%,-50%);}
	#header.hf.is_load .nav, #header.hf.is_load .headerIconGroup{opacity:0; visibility:hidden;}

	/* 로고·메뉴 글자 크기 (2026-10-23 2차) */
	#header.hf .logo img{height:3.4rem;}
	#header.hf .nav_li{font-size:1.8rem; padding-right:3.6rem;}
	#header.hf .nav_li:last-child{padding-right:0;}

	/* 검색창: 검색 버튼이 아이콘 자리에 정확히 겹치도록(오른쪽 전체메뉴 버튼 폭 5.4rem + 간격 2.4rem 보정), 테두리·그림자 없음 */
	#header.hf .headseaBox{right:calc(5.4rem + 2.4rem - 1rem);}
	#header.hf .headsearchBar{box-shadow:none;}
	#header.hf .headsearchBar:after{content:none; display:none;}

	/* 전체메뉴 버튼 */
	.hf-menuBtn{display:flex; align-items:center; justify-content:center; width:5.4rem; height:4.2rem; margin-left:2.4rem; padding:0; border:0; background:transparent; cursor:pointer;}
	.hf-menuBtn svg{display:block; width:5.4rem; height:1.2rem;}
	.hf-menuBtn svg rect{fill:#012C3E; transition:transform .3s ease;}
	.hf-menuBtn:hover svg rect:last-child{transform:translateX(-1.2rem);}
}
.hf-menuBtn{display:none;}
@media (min-width:1101px) {.hf-menuBtn{display:flex;}}

/* 전체메뉴 (PC 전용) */
.hf-menu{position:fixed; inset:0; z-index:800; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(182deg,#14335A -31.61%,#031A26 98.1%); opacity:0; visibility:hidden; pointer-events:none; clip-path:circle(0% at 100% 0); transition:opacity .45s ease, visibility .45s ease, clip-path 1s ease;}
.hf-menu.is-open{opacity:1; visibility:visible; pointer-events:auto; clip-path:circle(150% at 100% 0);}
.hf-menu.is-open .hf-marqueeTrack{animation-play-state:running;}
@media (max-width:1100px) {.hf-menu{display:none !important;}}
.hf-menuClose{position:absolute; top:3rem; right:3rem; z-index:2; display:flex; align-items:center; justify-content:center; width:4.6rem; height:4.6rem; padding:0; border:0; background:transparent; cursor:pointer;}
.hf-menuClose svg{display:block; width:2.6rem; height:2.6rem; transition:transform .3s ease;}
.hf-menuClose:hover svg{transform:rotate(90deg);}
.hf-menuInner{position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:center; gap:4rem; width:100%; max-width:1600px; padding:0 4rem; margin-top:-8rem;}
.hf-menuCol{display:flex; flex-direction:column; align-items:center; gap:1.4rem; width:18rem; padding-bottom:2rem; border-bottom:0.5px solid rgba(255,255,255,0.35);}
.hf-menuNum{color:rgba(255,255,255,0.5); font-family:'Pretendard-Regular'; font-size:1.4rem; letter-spacing:-0.03em;}
.hf-menuTitle{color:#fff; font-family:'Pretendard-Medium'; font-size:2.4rem; letter-spacing:-0.03em; white-space:nowrap; transition:color .2s ease;}
.hf-menuTitle:hover{color:#FFD179;}
.hf-menuCta{position:absolute; left:50%; bottom:22rem; z-index:1; display:flex; gap:1.2rem; transform:translateX(-50%);}
.hf-menuCta a{display:flex; align-items:center; justify-content:center; min-width:16rem; height:5rem; padding:0 2.4rem; border:0.5px solid rgba(255,255,255,0.6); border-radius:999px; color:#fff; font-family:'Pretendard-Medium'; font-size:1.6rem; transition:background .2s ease, color .2s ease;}
.hf-menuCta a:hover{background:#fff; color:#031A26;}
.hf-marquee{position:absolute; left:0; right:0; bottom:0; z-index:0; display:flex; overflow:hidden; pointer-events:none; transform:translateY(14%);}
.hf-marqueeTrack{display:flex; width:max-content; animation:hf_marquee 40s linear infinite; animation-play-state:paused;}
@font-face{font-family:'HF-Marquee'; font-weight:800; font-display:swap; src:url(/public/font/Pretendard-ExtraBold.woff2) format('woff2');}
.hf-marqueeText{flex-shrink:0; margin:0; padding-right:0.4em; color:rgba(255,255,255,0.08); font-family:'HF-Marquee','Pretendard-ExtraBold'; font-weight:800; font-size:18rem; line-height:1; white-space:nowrap;}
@keyframes hf_marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (max-width:1400px) {.hf-menuInner{flex-wrap:wrap; gap:3rem 2.4rem; margin-top:-4rem;} .hf-menuTitle{font-size:2rem;} .hf-marqueeText{font-size:14rem;}}
body.hf-lock{overflow:hidden;}

@media (prefers-reduced-motion:reduce) {
	#header.hf, #header.hf .logo, .hf-menu{transition:none !important;}
	.hf-marqueeTrack{animation:none;}
}

/* 2026-10-23 3차: GNB 호버 밑줄 없음(글자색 변경은 유지), 검색창이 열리면 아이콘 자리에 닫기(X) */
#header .nav_li a::before{content:none; display:none;}
#header .headseaBtn, #header .headseaBtn:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cpath d='M26 26L58 58M58 26L26 58' stroke='%23000' stroke-width='4.4' stroke-linecap='round'/%3E%3C/svg%3E");}

/* 모바일 햄버거 메뉴 (2026-10-23): 메뉴 목록 높이 제한(common.css 39rem) 해제 — 7개 메뉴 모두 보이게, 화면이 짧으면 바깥 영역만 스크롤 */
@media (max-width:767px) {
	.hamMenu{max-height:none; overflow:visible;}
	.hamMenuWrap{overflow-x:hidden; overflow-y:auto; padding-bottom:5rem; box-sizing:border-box;}
}

/* 2026-10-27: 모바일·태블릿 검색창 닫기(X) — 돋보기 아이콘(5rem 칸에 1.6rem, 선 0.2rem)과 같은 크기로. 84칸 중 X+선 36.4 → 3.7rem 이면 약 1.6rem */
@media (max-width:1100px) {
	#header .headseaBtn, #header .headseaBtn:hover{background-size:3.7rem;}
}