/** 해더 깜빡임 방지 **/
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}


/*---------------------- 해더 */
#header { border-bottom:1px solid #d8d8d8; position:fixed; top:0px; left:0px; z-index:9999; width:100%; height:6.25rem; background:#fff; background-position:left bottom !important; } 
#header .inner { display: flex; gap:1rem; align-items: center; justify-content: space-between; position:relative; z-index:9; height:100%; } 
#header h1 a {display: flex; align-items: center; }

@media screen and (max-width:1024px){
	#header { height:5rem; }
}	




/* GNB */
#header .w_gnb {display: flex; align-items: center; justify-content: center; flex:1; } 
#header .w_gnb .gnb {display: flex; justify-content: center; width:100%; } 
#header .w_gnb .gnb > ul { display: flex; width:100%; text-align:center;} 
#header .w_gnb .gnb > ul > li { flex:1;position:relative; text-align:center} 
/* #header .w_gnb .gnb > ul > li:nth-child(1),
#header .w_gnb .gnb > ul > li:nth-child(2),
#header .w_gnb .gnb > ul > li:nth-child(3) {flex: 1.15;} */
#header .w_gnb .gnb > ul > li > a { display:flex; align-items: center; justify-content: center;width:100%; height:100px; font-weight: 600; color:#080504; text-align:left; transition: 0.2s all ease-in;} 
#header .w_gnb .gnb > ul > li:hover > a,
#header .w_gnb .gnb > ul > li.on > a { color:#eb1c74; } 

#header .w_gnb .gnb > ul > li:hover .sub_menu {background-color: #fcfcfc;}


/* #header .w_gnb .gnb .gnb_affiliates > ul > li > a:hover::after {display: inline-block; }
#header .w_gnb .gnb .gnb_affiliates > ul > li > a::after { display:none; margin-left:2px; transition: all 0.3s; content: url('../../img/common/link.svg'); }  */


/** GNB > 드롭다운 **/
#header .w_gnb .sub_menu { display:none; gap:10px; flex-direction: column; padding-top:16px; position:absolute; top:100px; left:0; width:100%;} 
#header .w_gnb .sub_menu::after { display: block;position: absolute; top:50%; right:0; width:1px; height:100%; background-color:#f5f5f5; content: ""; transform: translateY(-50%);}
#header .w_gnb .gnb > ul > li:last-child .sub_menu::after {display: none;}

#header .w_gnb .sub_menu.show { display:flex; }
#header .w_gnb .sub_menu > li > a { display:block; padding:7px; font-size:14px; font-weight: 500; line-height: 1.2; color:#585858; text-align: center; word-break: keep-all;} 
#header .w_gnb .sub_menu > li > a:hover { color:#eb1c74; } 

#header .w_gnb .sub_menu,
#header #gnb_bar  {height:300px;}


/** GNB > 스크롤 **/
#header #gnb_bar { display:none; border-bottom:1px solid #ccc; position: absolute; top:100px; left: 0px; width: 100%;background:#fff;} 
#header.bg_on { width:100%; height:80px; } 
#header.bg_on .w_gnb .gnb > ul > li > a { height:80px; } 
#header.bg_on .w_gnb .sub_menu { top:78px; } 
#header.bg_on #gnb_bar { top:80px; } 

/** GNB > 스크롤 **/
#header #gnb_bar { display:none; border-bottom:1px solid #ccc; position: absolute; top:100px; left: 0px; width: 100%;background:#fff;} 
#header.bg_on { width:100%; height:80px; } 
#header.bg_on .w_gnb .gnb > ul > li > a { height:80px; } 
#header.bg_on .w_gnb .sub_menu,
#header.bg_on #gnb_bar { top:80px; } 




/** GNB > 모바일메뉴 **/
.m_gnb { position:absolute; top:5rem; left:0px; width:100%; } 
.m_gnb .gnb > ul { overflow-x:hidden; position:relative; width:100%; background:rgba(18,18,18, .97); } 
.m_gnb .gnb > ul:after { display:block; clear:both; content:""; } 
.m_gnb .gnb > ul > li > a { display:block; padding:15px 0px; border-bottom:1px solid rgba(255,255,255, .065); font-size:14px; color:#ffffff; text-align:center } 

.m_gnb .sub_menu { display:none !important; width:100%; background:#4a4a4a; line-height:20px; } 
.m_gnb .sub_menu > li > a { display:block; padding:5px 0px; border-bottom:1px solid rgba(255,255,255, .065); font-size:12px; color:#fff; text-align:center } 
.m_gnb .sub_menu > li > a:hover { background:#009091; } 




/** 다국어, 모바일 메뉴 **/
#header .util_nav { display: flex; gap:16px; align-items: center; } 
#header .util_nav .lang_select {position: relative;} 
#header .util_nav .lang_select button {display: flex; align-items: center; flex-shrink: 0; padding:0 10px; border:1px solid #ccc; position: relative; width:4rem; height:2.125rem; background:url("../../img/common/sl_arrow.png") no-repeat right 10px center; font-size:14px; transition: 0.2s all ease-in; border-radius:17px;}

#header .util_nav .lang_select .lang_ul {display: none;  border: 1px solid #ccc; border-bottom:0 none; position: absolute; top: calc(100% + 5px); left: 0; z-index: 10; min-width: 100%; background: #fff;}
#header .util_nav .lang_select .lang_ul li {  border-bottom: 1px solid #ccc;}
#header .util_nav .lang_select .lang_ul li a { display: block;padding: 6px 12px; color: #333; text-decoration: none;}

#header .util_nav .lang_select .lang_ul li:hover {background: #f2f2f2;}


#header .util_nav .m_gnb_on { display:none; } 
#header .util_nav .m_gnb_on a {display: flex;}

@media screen and (max-width:1024px){
	#header { height:5rem; } 
	#header .w_gnb { display: none; } 
	#header .util_nav .m_gnb_on { display: block; } 
}