#header {position: fixed;top:30px;left:50%;width: 100%;border-bottom: 0;z-index: 9998; padding-bottom: 3px; max-width: 1600px; transform: translateX(-50%); border-radius: 10px;}
#header.sticky{max-width: 100%; width: 100%; top: 0; border-radius: 0;}
#header>.header{margin: auto; transition: all 0.3s; max-width: 1920px;}
#header .inner{width: 95%; margin:auto; display:flex;align-items: center; position: relative; justify-content: space-between;}
 
#header .logo {width:20%}
#header .logo .m_logo{display: none;}

#header #menu{width:100%;margin:0 0 0 3%;font-family: var(--notoSans), serif;}
#header #menu .menu{width: calc(100% / 5);position: relative;top:0;display: block!important;}
#header #menu .depth01{padding:30px 0;display:block; font-size: 18px; font-weight: 600;}
#header #menu .depth02{display:none;position:absolute;top:103%;left:-1rem;width:110%;}
#header #menu .depth02 a{ font-size: 18px;}
#header .depth02.visible:after{width: 100%;}
#header .depth02.visible a:hover{font-weight: 600;}

.login a{padding: .5rem 1.2rem; border-radius: 60px;}
.login li:first-child a{margin-left: 0;}
.login li:last-child a{margin-left: 20px;}
@media(max-width: 1580px){
    #header #menu .depth01{font-size: 14px;}
    #header #menu .depth02 a{font-size: 14px;}
}
@media(max-width: 1240px){
    #header #menu .depth01{font-size: 13px;}
    #header #menu .depth02 a{font-size: 13px;}
}
@media(max-width: 1024px){
    #header #menu .depth01{font-size: 11px;}
    #header #menu .depth02 a{font-size: 11px;}
}
.nav_btn{width: 45px;height: 20px;position: absolute;top: 20px;right: -50px;transition: .1s;cursor: pointer;z-index:999999999;}
.nav_btn span {position: absolute; right: 0; width: 100%; height: 4px; transition: all 0.3s; background-color: var(--pointcolor); }
.nav_btn span:nth-of-type(1) {top: 0;}
.nav_btn span:nth-of-type(2) {top: 9px;} 
.nav_btn.open {top: 35px;}
.nav_btn.open span:nth-of-type(1) {-webkit-transform : translateY(8px) rotate(-45deg); transform : translateY(8px) rotate(-45deg); width:100%; background-color: #fff;}
.nav_btn.open span:after{display: none;}
@-webkit-keyframes active-menu-bar05 {
    100% {
        height: 0;
    }
}
@keyframes active-menu-bar05 {
    100% {
        height: 0;
    }
}
.nav_btn.open span:nth-of-type(2) {width: 100%; -webkit-transform : translateY(-2px) rotate(45deg); transform : translateY(-2px) rotate(45deg); background-color: #fff}


#header{transition: .3s all ease; background-color: #fff;}
#header.open{background: #fff;}

/* board */
#header.board {position: fixed;top: 0;left: 0;width: 100%;z-index: 9998;background: rgb(255 255 255 / 90%);box-shadow: 0 0 7px rgb(0 0 0 / 10%);}
.sub.board{padding-top: 74px;}

/* sticky */
#header.sticky {width: 100%;z-index: 9998;background: #fff;box-shadow: 0 0 7px rgb(0 0 0 / 10%);}

.topBtn{cursor: pointer; filter: drop-shadow(0 6px 18px rgba(0,0,0,.18))}
.quick_wrap {position: fixed; right: 30px;	bottom: 30px; display: flex; flex-direction: column; flex-wrap: wrap; z-index: 998;} 
/* 패널이 UL 기준으로 움직이게 */
.quick_wrap{ position:fixed; isolation:isolate; }
.quick_wrap.relative{ position:fixed; }

/* 남색 패널 */
.quick_panel{position:absolute;right:0;bottom:110px;width:90px;background:#0b2c5d;border-radius:60px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .35s ease, opacity .25s ease;z-index:1; }
.quick_panel.active{max-height: 380px;  opacity:1;pointer-events:auto;}
.quick_panel_inner{padding: 2rem 1rem 180px 1rem; background-image: url(/img/main/q_logo.png); background-repeat: no-repeat; background-size: auto; background-position: right top 32%;}
.quick_panel_inner .line{width: 100%; height: 1px; background-color: #375780;}
/* 노란 QUICK 버튼 */
.quick_toggle{margin-bottom: 20px; cursor:pointer;  position:relative;z-index:2; }

 .hq_wrap{position: absolute; bottom: 0; left: 0;}
.hq_wrap p.width40{border-right: 2px solid #2b4a78;}
@media(max-width: 1700px){
    #header{width: 95%;}
}
@media(max-width: 1580px){
    .quick_panel.active{max-height: 350px;}
    .quick_panel_inner{background-position: right top 28.5%;}
}
@media(max-width: 1240px){
    .quick_panel.active{max-height: 330px;}
    .quick_panel_inner{background-position: right top 26.5%;}
}

@media (min-width:990px){
    .dropdown-menu {position: absolute;width:100%}
    .dropdown{position:relative;top:0;left:0}

    #header .dropdown-menu {visibility: hidden;opacity: 0;display: block!important;transition: all .5s ease}
    #header #menu .depth01{transition: all .5s ease; }
    #header .dropdown-menu.visible{visibility: visible;opacity: 1;}
    
    #header #menu #lnb .depth02{background-color: #0d2f78;font-size: 0.95rem; border-radius: 0 0 6px 6px;}
    #header .depth02 a{display:block;padding:1.2rem;position:relative;top:0;left:0; color: #fff; font-weight: 600;}
    #header .menu01 .depth02 li:nth-child(1) a, #header .menu01 .depth02 li:nth-child(2) a, #header .menu02 .depth02 li:nth-child(1) a{padding-bottom: 0;}
    #header .depth02 a:hover{color: #f7cb00;}
    #header .depth02 a.void_link span {position: absolute;top:50%;right:0.9375rem;transform: translateY(-50%);color: #666666;}
    #header .depth02 li:last-child a{border-bottom: 0;}

   
}
#footer .fmenu .color-white{border-bottom: 1px solid #fff;}

@media(max-width: 1550px){
    #footer .container>.flex-between{flex-direction: column;}
    #footer .container .finfo{margin-top: 2.500rem;}
}
@media (max-width: 990px) {
     .quick_wrap {bottom: 0; right: auto; left: 0; width: 100%;}
     .quick_wrap .topBtn{filter: none;}
     .quick_wrap .q01{border-right: 2px solid #2b4a78;}
    #header{padding-bottom: 0; }
    html.open-menu {overflow: hidden;}
    #header .inner{width: 90%;}
    .nav_btn{display: inline-block; position: fixed; top:58px; right: 7%; z-index: 9999;}
    .dropdown-menu{height:auto;}
    #header .nav-menu{padding:0;width: 100%;height:100%;overflow: scroll;position: fixed;right: 0;top:-300%;bottom: 0;background-color: #0d2f78;z-index: 9997;letter-spacing: 0px;transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
        -moz-transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        transition-duration: .5s;
        -ms-transition-duration: .5s;
        -moz-transition-duration: .5s;
        -webkit-transition-duration: .5s;
        -o-transition-duration: .5s;padding: 90px 0 30px 0;
        background-position: bottom -3% right -3%;
        background-repeat: no-repeat;
        background-size:  80%;
    }
    #header #menu .depth02{left: 0;}
    #header #menu .depth02 a{font-size: 24px; font-weight: 600;}
    #header #menu #lnb .depth02 a:hover{color: #f7cb00;}
    #header .nav-menu.on:after {display: block;content: "";clear: both;width: calc(100% - 8px);height: 80px;background: #0d2f78;position: fixed;top: 0;left: 0;}
    #header .nav-menu.on {top: 0;}
    #header #menu #lnb{width: 90%; margin-left: auto; margin-right: auto;}
    #header #menu #lnb .menu {width: 100%!important;text-align: left;}
    #header #menu #lnb .menu.active span.pl-10{transform: rotate(-180deg); margin-left: 10px;}
    #header #menu #lnb .depth01 {padding: 15px 0;font-size: 32px;text-align: left; color: #abc1f0; font-weight: 600;}
    #header #menu #lnb .depth01.on{color: #fff;}
    #header #menu #lnb .depth01:hover{color: #fff;}
    #header #menu #lnb .depth01 a{color: #abc1f0;}
    #header #menu #lnb .depth01 a:hover{color: #fff;} 
    #header #menu #lnb .active .depth01{color: #fff;}

    #header #menu #lnb .depth02 {transform: translateX(0);position: relative;top: 0;font-size: 2rem;}
    #header #menu #lnb .depth02 a{padding: 10px 0;color: #595959;display: block; color: #fff;}
    #header #menu #lnb .depth02 a.void_link span {transform: rotate(90deg);transition: .5s all ease;}
    #header #menu #lnb .depth02 a.void_link {display: flex;justify-content: space-between;}

    #header #menu #lnb .depth02 > li.active a span{transform: rotate(270deg);}
     #header.mOpen{
    transform: none !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

    #header .logo{padding: 25px 0;width: auto;}
    #header.mOpen .logo{position: fixed;top: 0;left:5%;z-index: 9999;}
    #header.mOpen .logo .p_logo{display: none;}
    #header.mOpen .logo .m_logo{display: block;}
    #header.mOpen .logo img{max-width: 70%;}
    #site_map{display: none !important;}
    #header.mOpen .menu_wrap:after{display: none !important;}

    .nav_btn.sticky{top: 28px;}

    #header #menu #lnb .depth01{position: relative;}
}
@media(max-width: 890px){
    .quick_wrap .q01{width: auto;}
    .quick_wrap .q02{width: auto;}

    
}
@media(max-width: 800px){
.hq_wrap p.width40, .hq_wrap p.width60{width: auto;}
}
@media(max-width: 500px){
    #header.mOpen .logo img{max-width: 60%;} 
}
@media(max-width: 990px){
    #footer .logo_img{width: 60%;}
    #footer .container .finfo .info{flex-direction: column;}
    #footer .container .finfo .info p{margin-bottom: 0.625rem;}
    #footer .container .finfo .info p:last-child{margin-bottom: 0;}
    #footer .container>.flex-between .flex-between{margin-top: 2.500rem;}
}