#header {position: fixed;top:0;left:0;width: 100%;border-bottom: 0;z-index: 9998;}
#header .inner{width: 90%;margin:auto;display:flex;align-items: center; justify-content: space-between;}
 
#header .logo {width:14%}
/* #header .logo a{display: inline-block;} */
#header .logo img {display: block;}
#header .logo img.Logo_w{display: none;}
#header #menu{width:70%;font-family: var(--notoSans), serif;}
#header #menu .menu{width: calc(100% / 6);position: relative;top:0;display: block!important;}
#header #menu .depth01{padding:25px 0;display:block;color:#fff;text-align: center; font-weight: 700; font-size: 1.375rem;}
#header #menu .depth02{display:none;position:absolute;top:100%;left:0;width:100%;}


.nav_btn{display: none;width: 26px;height: 26px;position: fixed;top: 20px;right: 5%;transition: .1s;cursor: pointer;z-index:10000;}
.nav_btn span{width: 6px;height: 6px;background-color: #000;display: block;position: absolute;border-radius:1px;}
.nav_btn span:nth-child(1){left: 0;top: 0;}
.nav_btn span:nth-child(2){left: 50%;top: 0;transform: translateX(-50%);}
.nav_btn span:nth-child(3){right: 0;top: 0;}
.nav_btn span:nth-child(4){left: 0;top: 50%;transform: translateY(-50%);}
.nav_btn span:nth-child(5){position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.nav_btn span:nth-child(6){right: 0px;top: 50%;transform: translateY(-50%);}
.nav_btn span:nth-child(7){left: 0px;bottom: 0px;}
.nav_btn span:nth-child(8){position: absolute;left: 50%;bottom: 0px;transform: translateX(-50%);}
.nav_btn span:nth-child(9){right: 0px;bottom: 0px;}
.nav_btn.open{position: fixed;transform: rotate(180deg);cursor: pointer;transition: .5s cubic-bezier(.8, .5, .2, 1.4);}
.nav_btn.open span{width:4px;height:4px;transition-delay: 200ms;transition: .5s cubic-bezier(.8, .5, .2, 1.4);border-radius: 50%;background-color: #000;}
.nav_btn.open span:nth-child(2) {left: 6px;top: 6px;}
.nav_btn.open span:nth-child(4) {left: 6px;top: 18px;}
.nav_btn.open span:nth-child(5) {left: 12px;top: 12px;}
.nav_btn.open span:nth-child(6) {right: 6px;top: 6px;}
.nav_btn.open span:nth-child(8) {left: 18px;bottom: 6px;}

#header{transition: .3s all ease;}

/* 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%);} */
#header.board .logo img{display: none;}
#header.board .logo img.Logo_w{display: block;}
/* .sub.board{padding-top: 74px;} */

/* sticky */
#header.sticky {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%);}
#header.sticky .logo img{display: block;}
#header.sticky .logo img.Logo_w{display: none;}
.nav_btn.sticky span{background-color: #000;}
.nav_btn.board span{background-color: #000;}


@media (min-width:1240px){
    .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:hover .depth01{background-color: rgba(255,255,255,0.9);}
    #header .menu:hover .depth01 span{color: #000;}
    
    #header .header .nav_line {width: 37px;left: 22.5px; z-index: 9;}
    #header .header .nav_line {height: 3px; border-radius: 3px; background: var(--pointcolor); position: absolute; bottom: 0; left: 37px; opacity: 0;transition: transform 0.6s cubic-bezier(0.36, 0, 0.66, -0.56), width 0.3s ease, height 0.5s ease, top 0.5s ease;}


    #header #menu #lnb .depth02{background-color: rgba(255,255,255,0.9);text-align: center;font-size: 0.95rem;}
    #header .depth02 a{display:block; font-size: 1.25rem; padding:0.9375rem .5rem;position:relative;top:0;left:0;/* border-top:1px solid #d1d1d1; */ }
    #header .depth02 a:hover{background-color: var(--pointcolor); color:#fff; font-weight: 600;}
    #header .depth02 a.void_link span {position: absolute;top:50%;right:0.9375rem;transform: translateY(-50%);color: #666666;}

    #header .login{width: 7%;}
    #header .login li{width: 50%;padding: 0 5px;}
    #header .login li a{padding:3px 0;text-align: center; display: block;color: #fff; font-weight: 700;}
    /* #header .login li:hover a{background-color: #fff;color: #000;} */


    #header.sticky .menu .depth01 span{color: #000;}
    #header.sticky .login a{color: #000; font-weight: 600;}
    /* #header.sticky .login li:hover a{background-color: #000;color: #fff;} */

    /* #header.board .menu .depth01 span{color: #fff;}
    #header.board.sticky .menu .depth01 span{color: #000;} */
    #header.board .login a{color: #000;}
    /* #header.board .login li:hover a{background-color: #000;color: #fff;} */

    #header .nav-menu .login {display: none;}
}

@media (max-width:1580px){
    #header #menu{width: 71%;margin-left:3%;}
    #header .login{width: 10%;}
    #header .depth02 a{padding: 0.9375rem 0;}
}
@media (max-width: 1240px) {
    html.open-menu {overflow: hidden;}
    #header.mobileClick.sticky {background-color: rgb(255 255 255 / 90%); height: 70px;} 
    .nav_btn.open span {background-color: #fff;}
    .nav_btn{display: inline-block;}
    .dropdown-menu{height:auto;width:100%!important}
    #header .nav-menu{padding:0;width: 100%;height:100%;overflow: scroll;position: fixed;right: 0;top:-100%;bottom: 0;background-color: #333;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%;
        background-image: url(/img/main/m_logo.png);
    }
    #header .nav-menu.on:after {display: block;content: "";clear: both;width: calc(100% - 8px);height: 70px;background: rgba(0,0,0,.2);position: fixed;top: 0;left: 0;}
    #header .nav-menu.on {top: 0;}
    /* #header .m_login {display: flex;font-size: 1.500rem;padding:15px;font-family: 'Raleway', sans-serif;}
    #header .m_login li{padding-right: 20px;margin-right:20px;position:relative;top:0;left:0}
    #header .m_login li:after{display: block;content: "";clear: both;width: 1px;height: 60%;position: absolute;top:50%;right:0;background-color: #000;transform: translateY(-50%);}
    #header .m_login li:last-child:after{display: none;padding-right: 0;margin-right: 0;} */
    #header #menu #lnb .menu {width: 100%!important;text-align: left;}
    #header #menu #lnb .menu:after{display: block;content:"";clear:both;left:7%;width: 0;transition: .5s all ease 0s;background-color: #fff;height: 1px;position: absolute;bottom: 0;}
    #header #menu #lnb .menu.active:after{width: 86%;transition: .5s all ease .5s;}
    #header #menu #lnb .depth01 {padding: 15px 7%;font-size: 2.188rem; font-weight: 200; text-align: left;font-family: var(--mainfont), sans-serif;color: #fff;}
    
    #header.mOpen #menu #lnb .depth01.void_link {position: relative;}
    #header.mOpen #menu #lnb .depth01.void_link:after {content:''; width: 11px; height: 1px; background-color: #fff; position: absolute; right:1rem; top:0; bottom:0; margin: auto; transition: .3s;}
    #header.mOpen #menu #lnb .depth01.void_link:before {content:''; width: 1px; height: 11px; background-color: #fff; position: absolute; right:1.5rem; top:0; bottom:0; margin: auto; transition: .3s;}
    #header.mOpen #menu #lnb .active .depth01.void_link:after {background-color: var(--pointcolor); transform: rotate(45deg);}
    #header.mOpen #menu #lnb .active .depth01.void_link:before {background-color: var(--pointcolor); transform: rotate(45deg);}
    
    /* #header #menu #lnb .menu.active .depth01{color: #000;} */
    #header #menu #lnb .depth02 {left: 0;transform: translateX(0);position: relative;top: 0;font-size: 1.5rem;padding: 0 0 20px 0;}
    #header #menu #lnb .depth02 a{padding: 10px 7%;color: #fff;display: block; font-size: 1.7rem; font-weight: 200;}
    #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 .menu-btn {display: block;width: 25px;height: 15px;top:0; bottom:0; margin:auto; right: 5%;position: absolute; z-index: 9999;cursor: pointer;-webkit-transition: top 300ms;transition: top 300ms;}
    #header .menu-btn span {opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";right: 0;display: block;width: 100%;height: 1px;border-radius: 10px;background-color: #000;position: absolute;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .4s ease-in-out;transition: .4s ease-in-out;}
    #header .menu-btn .btn_line01 {top: 0;}
    #header .menu-btn .btn_line02 {top: 7px;}
    #header .menu-btn .btn_line03 {bottom: 0;}

    #header .menu-btn.on {position: fixed;top: 20px;right: 5%;bottom: auto;height:35px;width:35px}
    #header .menu-btn.on span:nth-child(1) {top: 17px;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
    #header .menu-btn.on span:nth-child(2) {opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";right: -60px;}
    #header .menu-btn.on span:nth-child(3) {top: 17px;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);}


    #header .logo{padding: 15px 0;width: auto; position: fixed; top:0;}
    #header.mOpen .logo{position: fixed;top: 0;left:5%;z-index: 9999;}
    #header.mOpen .logo img {filter: brightness(10);}
    /* #header.mOpen .logo img.logo_c{display: block;} */
    #header .tel{display: block;position: absolute;top: 50%;left: 5%;transform: translateY(-50%);font-size: 20px;}
    #header .login{display: none;}
    #header #menu .login {display: flex;width: 100%;padding: 0 7%; margin-top: 3rem;}
    #header .login li{padding: 0 5px;}
    #header .login li + li {margin-left: 1rem;}
    #header .login li a{padding:8px 0;text-align: center;border-radius: 150px;display: block;color: #fff; font-size: 1.5rem;}
    /* #header .login li:hover a{background-color: transparent;color: #000;} */
}



/* quick */
.quick_wrap{position: fixed;top:50%;transform: translateY(-50%);right:15px;text-align: center;z-index: 999;}
.quick_wrap .quick{overflow: hidden;}
.quick_wrap li {background-color: #4c4c4c; width:60px; height: 60px; border-radius: 50%; top:0;left: 0; display: flex; align-items: center; justify-content: center;}
.quick_wrap li + li {margin-top: .7rem;}
.quick_wrap a {color: #000;display: block;}
/* .quick_wrap .quick li:after{display: block;content: "";clear:both;width:70%;height:1px;background-color: rgba(255,255,255,0.3);position:absolute;top:0;left: 15%;}
.quick_wrap .quick li:first-child:after{display: none;} */
.quick_wrap li span{position: absolute; right: 130%; margin-top: -30px; display: none; font-size: 18px; width:110px; height: fit-content; padding: 5px 0; border-radius: 16px; background-color: rgba(0,0,0,0.3); color:#fff;}
.quick_wrap li:hover span {display: block;}
.quick_wrap a.top {background-color:var(--pointcolor); font-family:var(--pointfont); position: absolute; right:0; font-size: 1rem; font-weight: 900; width: 60px; height: 60px; border-radius: 50%; margin-top: .7rem; letter-spacing: 1px; color:#fff; display: flex; justify-content: center; align-items: center; }
.quick_wrap .click_btn{display: none;}

@media (min-width: 1024px) {
    .quick li img{opacity:1!important;}
}

@media (max-width: 768px) {
    .quick_wrap {top:60%;}
    .quick_wrap li {width: 44px; height: 44px;}
    .quick_wrap li img {width: 1.875em;}
    .quick_wrap a.top {width: 44px; height: 44px;}

    .quick_wrap li span {font-size: 1.2rem; width: 90px; margin-top: -24px;}
}