#header {position: relative;}
#header .header_bg {position: absolute; z-index: 999; top: 0; left: 0; right: 0; background: #fff;overflow: hidden;}
.header_gnb {border-bottom: 1px solid #ddd;}
#header .contains {max-width: 1400px; margin: 0 auto; height: 90px; line-height: 90px; transition: all 0.5s;}
.tlogo {display: inline-block; text-align: right; width: 15%;}
/* .tlogo img {max-width: 100%;} */

.container-mn {display: inline-block;float: right; width: 75%;}
.main-nav #gnb {display: flex; justify-content: flex-end; text-align: center;}

.main-nav #gnb > li {width: 14.2%; position: relative;}
.main-nav #gnb > li > a {display: block; line-height: 90px; height: 90px; font-size: 18px; color: #222; font-weight: 500; transition: all 0.5s; position: relative; word-break: keep-all;}
.main-nav #gnb li:last-child .submenuul {border-right: 1px solid #ddd;}
.main-nav #gnb li .submenuul {border-left: 1px solid #ddd; height: 500px;    position: absolute; z-index: 999999; top: 91px; left: 0; width: 100%; padding: 20px 0;}
.submenuul li a {display: block; padding: 5px 0; font-size: 16px; font-weight: 400;line-height: 1.8; word-break: keep-all;}
.main-nav #gnb .hover ul {border-top: 2px solid #f79d23;}




/*헤더-스크롤*/
#header.header_scroll {position: fixed;z-index: 9999;top: 0;left: 0;right: 0;}
#header.header_scroll .header_bg {background: rgba(255,255,255,1); box-shadow: 0px 5px 30px rgba(0,0,0,0.2);}
#header.header_scroll .mob-btn {top: 30px;}

/*슬라이드와 헤더간격*/
#main_slide,.submn-area {padding-top: 90px;}


.menu-overlay {
    width: 50%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,0.8);
    color: white;
    transform: translateX(100%);
    transition: all 0.6s ease-in-out;
      z-index: 99999999;
  }

  .menu-overlay.open {
    transform: translateX(0);
    padding-top: 80px;
  }
  .menu-overlay.open .menu-overlay__image img {
    animation: fadeIn 0.8s ease-in-out 0.6s forwards;
  }
  .menu-overlay.open .nav {
    animation: fadeIn 0.8s ease-in-out 0.2s forwards;
  }


.navArea .inner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    transition: 0.7s;
    opacity: 0;
}
.menu-overlay.open .navArea .inner{opacity: 1;}
.navArea .inner:after {
    content: '';
    display: block;
    clear: both;
}
.gnbList li{z-index:1}
.gnbList li:after{content:'';display:block;clear:both}
.gnbList li * {vertical-align:top}
.gnbList > li > a
{position:relative;display:block;float:left;width:100%;color:#fff;font-size:30px;font-weight:600;line-height: 1.8;letter-spacing: -.05em; font-family: 'Noto Sans KR';}
.gnbList li a:hover{text-decoration:none}
/*.gnbList > li.gnb03 > a{width:350px}*/
.gnbList > li.gnbON > a, .gnbList > li:hover > a{color:#f79d23}
.gnbList li .subGnb
{position:relative;overflow:hidden;display:block;float:left;height:95px;padding:10px 0 10px 0;transition:1s;-webkit-transition:1s;opacity:0.2;z-index:0;    padding: 0;}
.gnbList li .subGnb ul{display:inline-block;padding-left:6px}
.gnbList li .subGnb *{vertical-align:top}
.gnbList li .subGnb:before{content:'';display:inline-block;width:171px;height:2px;margin-top:40px;background:#f79d23}
.gnbList > li .subGnb ul li{float:left}
.gnbList > li .subGnb ul li a{height:75px;padding:1px 12px 0;color:rgba(255,255,255,1);font-size:18px;font-weight:500;line-height:79px; font-family: 'Noto Sans KR';}
.gnbList > li .subGnb ul li.subON a, .gnbList > li .subGnb ul li a:hover{color:#f79d23;}
.gnbList > li .subGnb ul li.subON a{font-weight:600}
.gnbList li:hover .subGnb, .gnbList > li.gnbON .subGnb{;opacity:1;z-index:100}
.gnbList > li.gnbON a + .subGnb{z-index:0}
.gnbList li .subGnb:before{width:48px}/*20201124 171px*/
/*.gnbList li.gnb03 .subGnb:before{width:58px}*/
.gnbList li:hover{z-index:10}

.linkLang{position:relative;margin:60px 0 0 -8px;text-align:left}
.linkLang a{display:inline-block;padding:0 8px;color:rgba(255,255,255,0.5);font-size:16px;line-height:34px}
.linkLang a.on{color:rgba(255,255,255,1);font-weight:600}


.close-button{
    padding-top: 20px;
    padding-right: 20px;
    text-align: right;
    cursor: pointer;
}



/* 영문 헤더 */

.eng-header .main-nav #gnb > li{
    flex-grow: 1;
}


@media screen and (max-width: 1200px){
    .menu-overlay {width: 40%;}
    .gnbList li .subGnb {height: 100px;}
    .gnbList li .subGnb:before {display: none;}
    .gnbList li .subGnb ul {padding-left: 0;}
    .gnbList > li > a {font-size: 26px;}
    .gnbList > li .subGnb ul li a {height: auto; line-height: 40px;}
}

@media screen and (max-width: 1024px){
    .desk-hide {display: none;}
    .show .overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);z-index: 1001;}
    #header .header_bg {max-height: 90px!important;}
    .tlogo {width: 80%;}
    .tlogo img {max-width: 100%!important; padding-left: 40px; padding-top: 5px;}
    .main-nav {position: fixed;top: 0;bottom: 0;right: -260px;background: #f1f1f1;z-index: 99999;width: 260px;height: 100%;transition: all ease 0.2s;overflow-y: auto;}
    .show .main-nav {right: 0;}
    .main-nav #gnb {display: block;}
  .main-nav #gnb > li:hover > a::after {display: none;}
    .main-nav #gnb > .submenu {width: 100%;}
    .main-nav #gnb > .submenu > a {padding: 10px 0 10px 30px;text-align: left;border-bottom: 1px solid #ddd;line-height: 1.8;pointer-events: none;height: auto;}
    .main-nav #gnb li .submenuul {position: static; height: auto;padding: 0; display: none;}
    .main-nav #gnb li .submenuul a {padding: 5px 20px 5px 35px;text-align: left; border-bottom: 1px solid #ddd; background: #e7e7e7;}
    .main-nav ul li.submenu i {position: absolute;width: 100%;height: 55px;top: 0;right: 0px;cursor: pointer;-webkit-transition: all ease 0.5s;transition: all ease 0.5s;line-height: 45px;}
    .main-nav ul li.submenu i:after {content: url(m-meic.png);height: 0;width: 0;position: absolute;top: 0;right: 30px;z-index: 10;line-height: 45px;}
    .main-nav ul > .submenu:last-child .submenuul {transform: translateX(0px);}
    #header.header_scroll .contains {height: 90px; line-height: 90px;}
    #header.header_scroll .header_bg {height: 90px!important;}
}

@media screen and (max-width: 575px){
    #head-mn {padding: 0 5px;}
    .tlogo {width: 60%;}
    #header .contains {height: 60px; line-height: 60px;}
  #header.header_scroll .contains {height: 60px; line-height: 60px;}
    #header.header_scroll .header_bg {height: 60px!important;}
    #header .header_bg {max-height: 60px!important;}
    #main_slide,.submn-area {padding-top: 60px;}

    .menu-overlay {width: 90%; background: rgba(0,0,0,0.95);}
    .gnbList > li > a {font-size: 22px;}
    .gnbList > li .subGnb ul li a {font-size: 16px;}
    .gnbList li .subGnb{
        height: unset !important;
    }
    .close-button{
        margin-top: 20px;
    }
}



/*모바일*/
.mob-btn {display: none;position: absolute;float: right;padding: 5px 7px;margin: 0px;background-color: transparent;cursor: pointer;right: 50px;top: 30px;z-index: 999;transition: top 0.5s;}
.mob-btn span {display: block;width: 30px;height: 3px;border-radius: 1px;background: #222;}
.mob-btn span + span {margin-top: 5px;}
.header_scroll .mob-btn {top: 30px;}

@media screen and (max-width: 1024px){
    .mob-btn {display: block;}

}
@media screen and (max-width: 575px){
    .mob-btn {top: 18px !important; right: 10px;}

}
