/*변수사용은 variable과 maxin에서 사용*/
#header{position:absolute;width:100%; height:80px; background:var(--white ); z-index:9999; box-sizing:border-box; transition:all .40s ease; box-shadow: var( --box-shadow-base);}

.header_top{position:relative; width:95%;margin:0 auto; transition:all .40s ease; display: flex; }
.header_top .logo{position:absolute;  left:0; z-index:999; top:10px; height: 55px; display:flex; align-items:center; }
.header_top .logo a{display:block; width:232px;  text-align: center; max-height:55px; }
.header_top .logo a img{max-width: 100%; height:auto; max-height:100%; }


.select_lang {  position:absolute;  left:250px; top:30px; }
.select_lang ul { display:flex; justify-content:center;   justify-content: flex-end;}
.select_lang ul li { width:30px; margin:0 0px; }
.select_lang ul li a {display:block;/* background-image:url('/_templates/_common/_asset/image/flag_kor.jpg'); */background-repeat:no-repeat;width:24px;height:18px;background-size:100% auto;/*text-indent:-10000px;*/border:1px solid #ccc;}
.select_lang ul li a img{vertical-align:top; max-width:100%}



/* header 전체메뉴 */

.allmenu{position:absolute; top:0px;  right:0; z-index:30; }
.allmenu .allmenu_toggle{display:block;position:relative;width:50px;height: 50px;box-sizing:border-box;border:1px solid var(--gray-base); text-align: center; margin-top: 14px; display:flex;align-items:center; justify-content:center }
.allmenu .allmenu_toggle:hover{background-color: var(--primary-color); border-radius: 100px; color:var(--white)}
.container .allmenu_box ul.dep02_ul > li > a:hover{text-decoration:underline}
.allmenu  span.op_cl{ width:100%; color:var(--black); font-size:1.82rem; text-align: center; }
.allmenu  span.op_cl:hover {color:var(--white)}
.allmenu .allmenu_toggle:hover:before, .allmenu .allmenu_toggle:hover:after{width:14px}
.allmenu .allmenu_toggle:hover strong{width:35px}

/* 전체메뉴layer*/
#allmenu_layer{display:none; position:absolute; top:0; left:0%; width:100%; z-index:99999; background:#fff; padding-bottom:10rem; box-shadow: var(--box-shadow-base); }
#allmenu_layer:before{content:''; left:0; top:0; width:100%; height:100%;}
#allmenu_layer .allmenu{position:relative; width:100%;}
#allmenu_layer .allmenu_inner{position:relative;width:1400px;margin:0 auto;padding: 10px 0;}
.allmenu_tit{position: relative;color:#000;font-size: 3rem;/* left: 10%; *//* top:15px; */width: 1400px;margin: 0 auto;text-align: center;margin-top: 20px;}

/*layer 닫기버튼*/
#allmenu_layer .allmenu .allmenu_close{display:block;position:absolute;right:5%;top:0%;width: 58px;height: 58px;border:1px solid #fff;box-sizing: border-box; z-index: 50}
#allmenu_layer .allmenu .allmenu_close:before, #allmenu_layer .allmenu .allmenu_close:after{content:'';position:absolute;left: 40%;width: 33px;height:2px;margin-left: -11px;background:#000;transition:all .20s ease}
#allmenu_layer .allmenu_close:before{top: 28px;transform:rotate(45deg)} 
#allmenu_layer .allmenu_close:after{bottom: 26px;transform:rotate(-45deg)}
#allmenu_layer .allmenu_close:hover:before{transform:rotate(225deg)}
#allmenu_layer .allmenu_close:hover:after{transform:rotate(135deg)}   
.mob_menuLogin {position:relative;    padding: 0 0.625rem; }
.mob_menuLogin ul{display: flex; gap: 0.625rem;}
.mob_menuLogin ul li a{border:1px solid var(--gray-base); border-radius: var(--radi-30); padding: .5rem 1.25rem;}
.mob_menuLogin ul li a:hover{background: var(--gray-80); color:var(--white)}

.allmenu_box_wrap  .container  {display: flex;    gap: 0.625rem;}
.container .allmenu_box{    width: 20%;      margin: 40px 0px 0px;  
    padding: 20px 0px 0px;    position: relative; border-right:1px solid var(--gray-base)}
    .container .allmenu_box:last-child{border-right:0}
.container .allmenu_box::after,.container .allmenu_box ul.dep02_ul::after{    content:'';    display:block;    clear:both;}
.container .allmenu_box .dep01 {padding: 0 0.625rem;}
 .container .allmenu_box .dep01 .tit{ font-size: 1.5625rem; color:var(--black); font-weight: bold; text-align: left; margin-bottom: 1.25rem; display: inline-block; }
 .container .allmenu_box ul.dep02_ul {    position: relative;  }
.container .allmenu_box ul.dep02_ul > li{    margin: 0px 5px;    display: block;}
 .container .allmenu_box ul.dep02_ul > li > a{    padding: 8px 0px;    font-size: 0.875rem;       display: block;    width: 100%;    text-align: left; position: relative; padding-left: 0.625rem;   }
 .container .allmenu_box ul.dep02_ul > li > a:after{position:absolute; content: ''; width: 4px; height: 4px; background: var(--primary-color); left:0; top:15px; border-radius: var(--radi-30);}
 .container .allmenu_box ul.dep02_ul > li > ul.dep03_ul{padding-top: 15px;min-height: 120px;padding-left:0}
.container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li{margin: 0px 0px 10px 0px;display: block;padding-left: 5px;}
.container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > a{    line-height: 1.5;    font-size: 0.9375rem;    color: #616161;    display: block; position: relative; padding-left: 15px;}
.container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > a:after{position:absolute; content: ''; width: 4px; height: 4px; border-radius: 30px; background: #000; top:8px; left:0}
.container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > a:hover{color:#000; text-decoration: underline}

.container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > a.have_menu > span{    background: url(../image/common/menu_plus.png) no-repeat center center;    width: 20px;    height: 22px;    text-indent: -9999px;    display: inline-block;    margin-left: 10px;}
 .container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > a.have_menu.active > span{    background: url(../image/common/menu_minus.png) no-repeat center }
.container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > ul.dep04_ul{    margin: 8px 0px 12px;}
 .container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > ul.dep04_ul > li{    margin-bottom: 5px;    padding-left: 7px;}

.container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > ul.dep04_ul > li > a{    font-size: 14px;    color: #909db8;}

.dep03_ul > li > a.have_menu + ul.dep04_ul {    height:0px;    overflow:hidden;    transition:height 200ms;}
.dep03_ul > li > a.have_menu.active + ul.dep04_ul {    height:auto;}

.h_300 {min-height:300px}


#hnb {width: 100%; }
#hnb ul.list{width:100%; margin:0 auto; display: flex;     justify-content: flex-end; padding-right:50px; margin-top:18px;  align-items: center; height: 40px;}
#hnb ul.list > li{margin:5px 20px; position:relative; }
.admin{background: var(--primary-gradi); border-radius:var(--radi-30); padding: 0rem 0.75rem; color:var(--white); height: 32px; line-height: 33px;}
#hnb ul.list li a{font-size: 0.75rem;}
#hnb ul.list li i {vertical-align: middle; padding-bottom: -5px;}

.util .lang {position: relative;display: inline-block;vertical-align: bottom;}
.util .lang .lang_btn {min-width: 6rem;height: 2.8rem;background-color: var(--white);border-radius: 15px;font-size: 0.6875rem; font-weight: 600;   color: var(--gray-80);text-align: center;line-height: 1.625rem;transition: .2s;border: 1px solid var(--gray-base);}
.util .lang:hover .lang_btn, 
.util .lang:focus .lang_btn {background-color: var(--primary-color);color: var(--white);}
.util .lang .lang_list {visibility: hidden;overflow: hidden;width: 0;height: 0;opacity: 0;position: absolute;top: auto;left: 50%;
    -webkit-transform: translateX(-50%);transform: translateX(-50%);overflow: hidden;top: 100%;width: 4rem;margin-top: 0.625rem;padding: 0.625rem;border: 1px solid #ddd;background-color: #fff;white-space: nowrap;}
.util .lang.active .lang_list {visibility: visible;overflow: visible;width: auto;height: auto;opacity: 1;margin-top: 0.9375rem;transition: all 0.2s;}
.util .lang .lang_list:before {position: absolute;left: 50%;top: -0.3rem;width: 0.625rem;height: 0.625rem;background-color: var(--white);border-top: 1px solid var(--gray-base);border-left: 1px solid var(--gray-base);content: '';transform: rotate(45deg) translateX(-50%);}
.util .lang .lang_list ul li{margin:0; }
.util .lang .lang_list ul li a {display: inline-block;padding:.0.625rem .5rem;}
.util .lang .lang_list ul li a:hover{background: var(--gray-5); color:var(--primary-color); display: inline-block; width:100%; height: 100%; border-radius: 5px;}



@media all and (max-width:1400px)
{	
    .header_top{width:100%; min-width: 100%;}
	.gnb_ul{ padding:12px 0%; width: 100%;}
	.gnb_ul>li>a{font-size:1.125rem}
	.sub02{background-size:cover}
	.sub_visual > h1{font-size:1.1875rem;padding-top:33px}
	.sub_visual{height:100px}
	.location-dep3 .loca_dep3_nav {width:100%;}
	#footer .footer_inner {width:100%;}
	.sub-tit {width:100%;}
	
	.gnb_ul>li{width:auto; margin-right:4%}
	.gnb_ul>li .subdepth .list_wrap {width: 100%;}
	.gnb_ul > li .subdepth {padding: 20px 15px;}

    #allmenu_layer .allmenu_inner, .allmenu_tit {width:100%}

}


@media all and (max-width:1280px)
{
	
	/*header*/
	#header{ height:70px;}
    .header_top{width:100%; height:0; background:none; min-width: 100%; }
    .header_top .logo{left:1%; top:8px; }
    #gnb{display:none;}    
	.allsch .allsch_toggle{height:70px; width: 70px;right:-10px}
	.ai_serach {top:10px; right:170px}
	
	.gnb_box{display:none}
    .allmenu .allmenu_toggle {margin-top:8px; margin-right: 15px;}
    #hnb ul.list {margin-right:65px}
	

	

}




@media all and (max-width:1000px)
{

	
    #allmenu_layer:before{content:'';position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.7);}	
    #allmenu_layer .allmenu_inner{width:100%;  background: #fff; }
    .container .allmenu_box {min-width:auto; width:100% }
    .allmenu_box_wrap .container {display: block;}
     .allmenu_box_wrap .container .allmenu_box{padding:0;/* margin-bottom: 15px; */ display: flex}
     .allmenu_box_wrap .container .allmenu_box .dep01 {position:relative; float: left; width: 100%; padding-left: 15px;padding-right: 15px;  font-size: 0.875rem; top:0; border-bottom: 1px solid var(--gray-base);}
    .container .allmenu_box .dep01 {padding:1.5625rem 0;}
    .allmenu_box_wrap .container .allmenu_box .dep01 .tit{color:var(--black);font-size: 1.125rem; width: 100%; line-height: 35px; }
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul {  border-top:1px solid #ccc}
     .container .allmenu_box .dep01 .tit {margin-bottom:0}
    
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul.hide {display:none}
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul {background-color: var(--gray-5);}
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li {width:100%; display: block; }
     /*.allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li:first-child{margin-top:20px;}*/
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li > ul.dep02_ul {min-height:auto;background: #f2f2f2;}
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li > ul.dep03_ul {min-height:auto;background: #f2f2f2;}
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li > a {border:0; text-align: left;font-size: 0.8125rem; padding: 8px}
    .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li:last-child{border-bottom:0}
        
    
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li > a {position:relative}
    .m_pl{ position:absolute; right:35px; top:30px ; width: 15px;;height: 15px;background: url(../image/common/menu_plus.png) no-repeat center center;display: inline-block;margin-left: 10px;}
        
    
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li {padding-bottom:0px;}
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li{margin:0}
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul{padding-bottom:15px;}
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul{margin: 0px 0px 5px 0px;        padding: .5rem 0.625rem;}
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li > ul.dep02_ul > li > ul.dep04_ul {margin: 0px 0px 0px;}
    
    
   
        .container .allmenu_box {margin:0 0 0 }
        .container .allmenu_box ul.dep02_ul > li > a {background:none}
     .allmenu_box_wrap .container .allmenu_box ul.dep02_ul > li > a, .container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > a, .container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > a:hover{color: #000;}
        .container .allmenu_box {border-top:0}
        #allmenu_layer .allmenu .allmenu_close {border:1px solid #e9e9e9; background: #e9e9e9}
        #allmenu_layer .allmenu .allmenu_close:before, #allmenu_layer .allmenu .allmenu_close:after {background:#000;}
        .allmenu_box_wrap .container .allmenu_box span.dep01 {color:#fff;background: #151a59}
        #allmenu_layer .allmenu_inner {padding: 60px 0 0px 0}
        .allmenu_tit{display:none}
        .logo img {height:60%}
        .allmenu .allmenu_toggle strong {top:31px; left:40%;}
        .allmenu .allmenu_toggle:before, .allmenu .allmenu_toggle:after{left:40%;}
        .container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > a, .container .allmenu_box ul.dep02_ul > li > ul.dep03_ul > li > ul.dep04_ul > li > a {font-size:.88rem}
        #hnb ul.list > li:nth-child(2){display:none}
        
        #allmenu_layer .allmenu .allmenu_close {right:1px; top:1px}
      
        #hnb ul.list {margin-top:13px}
}

@media all and (max-width:768px){
    #header {height: 60px;}
.allmenu .allmenu_toggle {width:40px; height: 40px;}
.header_top .logo img {width: 100%;}

	    .header_top .logo a img { height:22px; width:auto; }
.header_top .logo a {text-align: left;}
.header_top .logo {top:0}
.admin{background: none; color:var(--black); padding: 0 0 ;}
#hnb ul.list{margin-top:8px}
}