@charset "utf-8";
/* 헤더 · 전체메뉴 (국문 nav.php, 영문 eng/nav.php 공통) */
#header{position:absolute;top:0;left:0;width:100%;border-bottom:1px solid rgba(255,255,255,.18);z-index:1000;background:transparent;transition:background .4s;}
#header .nav{display:flex;justify-content:space-between;align-items:center;max-width:1820px;height:90px;margin:0 auto;}
#header .nav .h_logo{position:relative;height:100%;display:flex;justify-content:center;align-items:center;}
#header .nav .h_logo>a{display:flex;align-items:center;transition:all .3s;}
#header .nav .h_logo>a:hover{opacity:0.8;}
#header .nav .h_logo .lg{display:block;}
#header .nav .h_logo .lg+.lg{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.34);}
#header .nav .h_logo .ko{display:block;font-family:var(--f-paper);font-size:22px;font-weight:600;line-height:26px;letter-spacing:-.02em;color:#fff;}
#header .nav .h_logo .en{display:block;margin-top:2px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:400;line-height:18px;letter-spacing:.01em;color:#fff;}
#header .nav .h_logo .ko-br{display:none;} /* 국문 센터명 줄바꿈 위치: 소형 모바일(480px 이하)에서만 사용 */
#cssmenu>nav>ul{display:flex;}
#cssmenu>nav>ul>li{position:relative;}
#cssmenu>nav>ul>li>a{display:block;padding:0 50px;line-height:90px;font-family:var(--f-paper);font-size:18px;font-weight:700;color:#fff;transition:all .6s;}
#cssmenu>nav>ul>li>a.active{color:#fff;}
#cssmenu>nav>ul>li>ul{display:none;position:absolute;top:90px;left:50%;transform:translateX(-50%);background:rgba(17,19,23,.96);box-shadow:10px 10px 15px rgba(0,0,0,.2);transition:all .6s;}
#cssmenu>nav>ul>li>ul>li>a{display:block;width:180px;padding:16px 0;text-align:center;font-size:15px;color:rgba(255,255,255,.65);border-bottom:1px solid rgba(255,255,255,.08);transition:all .6s;}
#cssmenu>nav>ul>li:hover>a{color:#fff !important;}
#cssmenu>nav>ul>li:hover>ul{display:block;}
#cssmenu>nav>ul>li:hover>ul::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:2px;background:#fff;animation:strach .5s;}
#cssmenu>nav>ul>li>ul>li>a:hover{color:#fff;background:rgba(255,255,255,.06);}
@keyframes strach{ 0%{transform:scaleX(0);} 100%{transform:scaleX(1);} }
#header{transition:background .4s, box-shadow .4s, border-color .4s;}
#header .h_logo .ko, #header .h_logo .en, #header .h_logo .lg, #cssmenu>nav>ul>li>a, h1.pc-menu span{transition:color .4s, border-color .4s, background .4s;}
/* 스크롤 시 · 마우스 올렸을 때: 흰 배경 · 검정 텍스트 · 은은한 그림자 (검정 배경 사용 안 함) */
#header.fixed{position:fixed;top:0;left:0;}
#header.fixed, #header:hover{background:#fff;border-bottom-color:#E2E5EA;box-shadow:0 4px 24px rgba(0,0,0,.06);}
#header.fixed .nav .h_logo .ko, #header:hover .nav .h_logo .ko{color:#111;}
#header.fixed .nav .h_logo .en, #header:hover .nav .h_logo .en{color:#555;}
#header.fixed .nav .h_logo .lg+.lg, #header:hover .nav .h_logo .lg+.lg{border-left-color:rgba(0,0,0,.15);}
#header.fixed #cssmenu>nav>ul>li>a, #header:hover #cssmenu>nav>ul>li>a{color:#111;}
#header.fixed #cssmenu>nav>ul>li>a.active,
#header.fixed #cssmenu>nav>ul>li:hover>a,
#header:hover #cssmenu>nav>ul>li>a.active,
#header:hover #cssmenu>nav>ul>li:hover>a{color:#004A9B !important;}
#cssmenu>nav>ul>li>ul, #header.fixed #cssmenu>nav>ul>li>ul{background:#fff;border:1px solid #E2E5EA;border-top:0;box-shadow:0 24px 48px -24px rgba(10,23,48,.25);}
#cssmenu>nav>ul>li>ul>li>a, #header.fixed #cssmenu>nav>ul>li>ul>li>a{color:#555;border-bottom-color:#EEE;}
#cssmenu>nav>ul>li>ul>li>a:hover, #header.fixed #cssmenu>nav>ul>li>ul>li>a:hover{color:#004A9B;background:#F5F8FC;}
#cssmenu>nav>ul>li:hover>ul::before, #header.fixed #cssmenu>nav>ul>li:hover>ul::before{background:#004A9B;}
#header.fixed h1.pc-menu, #header:hover h1.pc-menu{background:rgba(0,0,0,.05);}
#header.fixed h1.pc-menu span, #header:hover h1.pc-menu span{background:#111;}

h1.pc-menu{display:none;position:absolute;top:50%;right:20px;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);text-align:center;cursor:pointer;z-index:100;transition:.3s;}
h1.pc-menu button{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:none;border:none;}
h1.pc-menu span{display:block;width:20px;height:2px;background:#fff;transition:.3s;}
h1.pc-menu span:nth-child(even) {margin: 5px 0;}
h1.pc-menu:hover{background:var(--sub);}

.all-menu{position:fixed;top:0;left:100%;width:450px;height:100%;background:#0A1730;overflow:hidden;z-index:100;transition:1.4s .1s;}
.all-menu.open{left:calc(100% - 450px);}
.all-menu>*{color:#fff;}
.all-menu .inner{position:relative;display:flex;flex-direction:column;height:100%;} /* 머리(센터명 2개) 높이만큼 메뉴 영역이 자동으로 줄어듦 */
.all-menu .menu-h{display:flex;justify-content:flex-end;align-items:flex-start;flex-wrap:wrap;width:100%;padding:37px 60px 24px;}
.all-menu .menu-h .close{position:relative;width:33px;height:33px;background:none;border:0;}
.all-menu .menu-h .close span{position:absolute;top:0;width:2px;height:100%;background:#fff;}
.all-menu .menu-h .close span:first-child{left:15px;transform:rotate(-45deg);}
.all-menu .menu-h .close span:last-child{left:15px;transform:rotate(45deg);}
.all-menu .menu-box{flex:1 1 auto;min-height:0;overflow-y:auto;}
.all-menu .menu-box .box{position:relative;padding:22px 60px;transition:.5s;}
.all-menu .menu-box .box:hover{background:rgba(255,255,255,.05);transition:.7s;}
.all-menu .menu-box .box:after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:calc(100% - 120px);height:1px;background:rgba(255,255,255,.15);}
.all-menu .menu-box .box:last-child:after{display:none;}
.all-menu .menu-box h2{margin-bottom:12px;font-size:23px;line-height:1;color:#fff;letter-spacing:-.25px;}
.all-menu .menu-box h2 a{color:#fff;}
.all-menu .menu-box ul{display:flex;flex-wrap:wrap;gap:4px 0;}
.all-menu .menu-box ul li+li:before{content:'';display:inline-block;width:1px;height:70%;margin:5px 16px 0;background:rgba(255,255,255,.3);vertical-align:top;}
.all-menu .menu-box ul li a{display:inline-block;font-size:15px;line-height:1.6;font-weight:400;color:rgba(255,255,255,.55);transition:.2s;}
.all-menu .menu-box ul li a:hover{color:#fff;}
/* 언어 전환 (KOR / ENG) */
.lang-sw{display:flex;flex:none;align-items:center;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.34);border-radius:999px;}
.lang-sw a{display:block;padding:8px 16px;border-radius:999px;font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;line-height:18px;letter-spacing:.04em;color:rgba(255,255,255,.72);transition:background .3s,color .3s;}
.lang-sw a:hover{color:#fff;}
.lang-sw a.on{background:#fff;color:#0A1730;}
.lang-sw a:focus-visible{outline:2px solid #fff;outline-offset:1px;}
#header.fixed .lang-sw, #header:hover .lang-sw{border-color:#D5DAE1;}
#header.fixed .lang-sw a, #header:hover .lang-sw a{color:#5B616B;}
#header.fixed .lang-sw a:hover, #header:hover .lang-sw a:hover{color:#004A9B;}
#header.fixed .lang-sw a.on, #header:hover .lang-sw a.on{background:#004A9B;color:#fff;}
#header .nav .lang-sw{margin-left:12px;}
.all-menu .menu-h{justify-content:space-between;align-items:center;}
.all-menu .lang-sw a.on{background:#fff;color:#0A1730;}
@media (max-width:1820px){
	#header .nav{padding:0 20px;}
}
@media (max-width:1240px){
	#header #cssmenu>nav>ul>li>a{padding:0 22px;}
}
@media (max-width:1320px){
	#cssmenu>nav>ul>li>a{padding:0 30px;}
	#cssmenu>nav>ul>li>ul>li>a{width:170px;}
	#header .nav .h_logo .ko{font-size:20px;}
}
@media (max-width:1280px){
	.all-menu .menu-h{padding:8% 5% 5%;}
	.all-menu .menu-box{padding:0;}
	.all-menu .menu-box .box{padding:25px 5%;}
	.all-menu .menu-box .box:after{width:calc(100% - 10%);}
	.all-menu .menu-box .box:hover{background:transparent;}
}
@media (max-width:1080px){
	#header .nav{height:80px;}
	#header .nav .h_logo .ko{font-size:19px;}
	#cssmenu{display:none;}
	h1.pc-menu{display:block;}
	#header .nav .lang-sw{margin-right:62px;}
}
@media (max-width:767px){
	/* 모바일: 센터명 2개를 PC와 같이 좌우 배치 + 구분선 (국문은 공간이 모자라면 센터명 안에서 줄바꿈) */
	#header .nav .h_logo{min-width:0;max-width:calc(100% - 64px);} /* 오른쪽 전체메뉴 버튼 자리 */
	#header .nav .h_logo .lg{flex:0 1 auto;min-width:0;}
	#header .nav .h_logo .lg+.lg{margin-left:10px;padding-left:10px;}
	#header .nav .h_logo .ko{font-size:14px;line-height:18px;word-break:keep-all;}
	#header .nav .h_logo .en{display:none;}
	#header .nav .lang-sw{display:none;}
	.all-menu{width:80%;}
	.all-menu.open{left:20%;}
	.all-menu .menu-h{padding:22px 5% 16px;}
	.all-menu .menu-h .close{width:27px;height:27px;margin-top:-3px;}
	.all-menu .menu-box .box{padding:15px 5%;}
	.all-menu .menu-box h2{font-size:17px;}
	.all-menu .menu-box ul li+li:before{height:68%;margin:4px 10px 0 10px;}}
@media (max-width:640px){
	#header .nav{height:65px;}
	h1.pc-menu{width:42px;height:42px;}
}
@media (max-width:480px){
	#header .nav .h_logo .lg{width:max-content;} /* 센터명은 지정한 위치(<br class="ko-br">)에서만 두 줄로 */
	#header .nav .h_logo .ko{white-space:nowrap;}
	#header .nav .h_logo .ko-br{display:inline;}
	#header .nav .h_logo .lg+.lg{margin-left:8px;padding-left:8px;}
	#header .nav .h_logo .ko{font-size:13px;line-height:17px;}
}