/* 메인메뉴 */
/* =========================모바일 딤처리========================= */
.menu_dim{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.3s;z-index:998;}
.menu_dim.active{opacity:1;visibility:visible;}
/* =========================기본 구조========================= */
.btn_close{display:none;}
#header #headerWrap{position:absolute; top:0; left:0; width:100%;z-index:1001; } 
#header .inner{display:flex;align-items:center;justify-content:space-between;}

#header #logo img{ width:220px;}
#header #logo .logo_fixed{ display:none;}
#gnb_wrap{ display:flex;align-items: center; }
/* =========================PC 메뉴 (드롭다운)========================= */
.depth1{display:flex;gap:57px; padding-right:30px;}
.depth1 > li{position:relative;}
.depth1 > li > a{display:block;padding:50px 0;font-size:23px;font-weight:600; color:#fff; letter-spacing:0;}


/* 2차 메뉴 기본 상태 */
.depth2{position:absolute;top:100%;left:50%;min-width:250px;background:#222376; padding:15px 0; opacity:0;visibility:hidden;transform: translate(-50%, 0px);transition:opacity .25s ease,transform .25s ease,visibility .25s ease;z-index:100;}/* hover 시 열림 */
.depth1 > li:hover > .depth2{opacity:1;visibility:visible;}/* 2차 메뉴 li 애니메이션 */
.depth2 li{opacity:0;transform:translateY(8px);transition:.2s ease;}
.depth1 > li:hover .depth2 li{opacity:1;transform:translateY(0);}
.depth2 li a{display:block;padding:10px 20px; color:#fff; text-align:center;}
.depth2 li:last-child a{border-bottom:none;}
.depth2 li a:hover{ color:#FF0}
.depth2 li a[target="_blank"]:after {content: "\f0f4"; display:inline-block;font-family: "remixicon"; color:#999; margin-left:7px; font-size:20px; font-weight:500}

.btn_menu{display:none;background:none;border:none;cursor:pointer;position:relative; color:#fff; font-size:30px;}
.hd_wrapper{ display:flex;align-items: center;}
.hd_wrapper ul{display:flex;gap:17px; align-items: center;margin-left:30px;} 

#header .topLink{ background:rgb(0,0,0,0.5); color:#fff; padding:10px 20px; border-radius:20px; display:inline-block; margin-left:50px;}

.hd_login{ display:flex;}
.hd_login li{ margin-left:10px;}
.hd_login a{ color:#777;}


/* Header :: FIXED 스타일 (PC스타일) */
#header.fixed #headerWrap{ position:fixed;top:0; left:0;box-shadow: 12px 9px 17px #0000001c; background:#fff; border-bottom:0;}
#header.fixed .depth1 > li > a{ color:#333;}

#header.fixed .lang_btn{ background:#efefef;}
#header.fixed .btn_menu{ color:#333;}

@media (max-width:1920px){
	
	#header #logo img{ width:170px;}
	#header.fixed #logo img{ width:120px;}
	.depth1{gap:70px;}
	.depth1 > li > a{ font-size:19px;}
	.depth2{min-width:200px;}	 
	.depth2 li a{padding:7px 20px; font-size:16px;}
	.depth1 > li > a{padding:37px 0;}
	.hd_login a{ font-size:15px;}
	

}

@media (max-width:1500px){
	#header .inner{ padding:0 10px; box-sizing:border-box;}
	
}
@media (max-width:1280px){
	
	#header .inner{ padding:20px 10px;}
 
	.btn_menu{display:block;z-index:1100;}
	.btn_close{display:flex; justify-content: center;align-items: center;position:absolute;top:18px;right:18px;width:40px;height:40px;border:0;background:none;font-size:34px;cursor:pointer;z-index:1200;}
	#gnb{position:fixed;top:0;right:-100%;width:320px;max-width:85%;height:100vh;background:#fff;overflow-y:auto;transition:.35s ease;box-shadow:-5px 0 20px rgba(0,0,0,.15);z-index:99999;}
	#gnb.active{right:0;}.depth1{display:block;padding-top:80px;}
	.depth1 > li{border-bottom:1px solid #eee;position:relative;}
	.depth1 > li > a{line-height:1;padding:18px 20px;display:flex;justify-content:space-between;align-items:center; color:#222; font-size:19px;}
	.depth1 > li:has(.depth2) > a::after{content:"+";font-size:20px;font-weight:700;}
	.depth1 > li.open > a::after{content:"−";}
	.depth2{position:static;opacity:1 !important;visibility:visible !important;transform:none !important;border:none;background:#f8f8f8;display:block;max-height:0;overflow:hidden;transition:max-height .35s ease; padding:0; border-radius:0;}
	.depth1 > li.open .depth2{max-height:500px;}
	.depth2 li{opacity:1 !important;transform:none !important;}
	.depth2 li:nth-child(1) a{padding:20px 35px 10px 35px;}
	.depth2 li:last-child a{padding:10px 35px 20px 35px;}
	.depth2 li a{padding:10px 35px; text-align:left; color:#666;}
	.depth2 li a:hover{ color:#06C}
	#gnb_wrap{ padding:0;} 
}
@media (max-width:1280px){
	#header #logo img{ width:130px;}
}