#header {position: sticky;top:0;left:0;width: 100%;border-bottom: 0;z-index: 9998; padding-bottom: 3px;}
#header>.header{max-width: 1920px; margin: auto; transition: all 0.3s;}
#header .inner{width: 95%; margin:auto; display:flex;align-items: center; position: relative; justify-content: space-between;}
 
#header .logo {width:15%}
#header .logo a{display: inline-block;}

#header #menu{width:100%;margin:0 0 0 3%;font-family: var(--notoSans), serif;}
#header #menu .menu{width: calc(100% / 6);position: relative;top:0;display: block!important;}
#header #menu .depth01.on{color: var(--pointcolor); }
#header #menu .depth01{padding:35px 0;display:block; text-align: center; font-size: 18px; font-family: 'Godo'}
#header #menu .depth02{display:none;position:absolute;top:100%;left:0;width:100%;}
#header #menu .depth02 a{ font-size: 18px;}
#header .depth02:after {position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 0; height: 1px; background: var(--pointcolor); content: ""; width: 0; transition: 0.6s;}
#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: 28px;height: 22px;position: absolute;top: 20px;right: -50px;transition: .1s;cursor: pointer;z-index:999999999;}
.nav_btn span {position: absolute; right: 0; width: 100%; height: 4px; border-radius: 3px; transition: all 0.3s; background-color: #000; }
.nav_btn span:nth-of-type(1) {top: 0;}
/* .nav_btn span:nth-child(1):after{display: block; content:''; width: 4px; height: 4px; background-color: #000; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} */
.nav_btn span:after{display: block; content:''; width: 3.5px; height: 3.5px; background-color: #000; border-radius: 50%; position: absolute; top: 50%; left: -7px; transform: translateY(-50%);}
.nav_btn span:nth-of-type(2) {top: 9px;}    
.nav_btn span:nth-of-type(3) {bottom: 0;}
.nav_btn.open span:nth-of-type(1) {-webkit-transform : translateY(9px) rotate(-45deg); transform : translateY(9px) rotate(-45deg); width:100%}
.nav_btn.open span:nth-of-type(2) {left : 50%; opacity : 0; -webkit-animation : active-menu-bar05 .8s forwards; animation : active-menu-bar05 .8s forwards;}
.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(3) {width: 100%; -webkit-transform : translateY(-10px) rotate(45deg); transform : translateY(-10px) rotate(45deg);}


#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%);}
.nav_btn.sticky span{background-color: #000;}
.nav_btn.board span{background-color: #000;}

.topBtn{cursor: pointer;}
#quick {background: none; }	
.quick_wrap {position: fixed; right: 65px;	top: 50%; display: flex;    flex-direction: column;    flex-wrap: wrap;     transform: translateY(-50%); z-index: 998;} 

.quick_wrap li {width: 56px; height: 56px; border-radius: 50%;  background-repeat: no-repeat; background-position: center ; position: relative; transition: .6s; transform: translateX(0); overflow: hidden; margin-bottom: 1rem; cursor: pointer;}
.quick_wrap li.q01:hover {transform: translateX(-115px); overflow: visible;}
.quick_wrap li.q01 {background-color: #ed819c;}
.quick_wrap li.q02 {background-color: #fae300;}
.quick_wrap li.q03 {background-color: #00c300;}
.quick_wrap li.q04 {background: linear-gradient(to top,    #fdc062 0%,    #ee653d 25%,    #e5414f 50%,    #a237b6 75%,    #4e47d0 100%  )}
.quick_wrap li.q05 {background-color: #00c300;}
.quick_wrap li.q06 {background-color: #ed819c;}
.quick_wrap li.q07 img{max-width: 17%;}
.quick_wrap li.q07.active img{transform: rotate(-45deg); top: 28%;}

.quick_wrap li:last-child {background-color: #626262;text-align: center;color: #fff; display: flex; align-items: center; flex-direction: column; font-weight: 800;margin-bottom:0; line-height: 56px;} 
.quick_wrap li.q07:hover, .quick_wrap li:last-child:hover {transform: translateX(0);}

.quick_wrap li.q01::after {width: 0;left: 5px;height: 100%;position: absolute;    z-index: -1;    border-radius: 50px; transition: .6s; color: #fff; padding: 17px 0 0 20px; text-align: center; top: 0; overflow: hidden; opacity: 0; font-weight: 700;    font-size: 16px; white-space: nowrap; letter-spacing: 0;}    
.quick_wrap li.q01:hover::after {width: 165px; opacity: 1;}

.quick_wrap li.q01::after {content: '055.362.7575'; background-color: #e17595;}

.quick_wrap li a{width: 290%;height: 100%;display: block;}
.quick_wrap li a img {position: relative; top: 50%; transform: translateY(-50%); left: 16px;}
.quick_wrap li.q01 a img {left: 18px;}
.quick_wrap li.q05 a img {left: 18px;}
.quick_wrap li.q06 a img {left: 20px;}

@media(max-width: 990px){
    .quick_wrap {top: auto;transform: unset;bottom: 2%;right: 5%;}
    .quick_wrap li {width: 50px;height: 50px; }
    .quick_wrap li a img {left: 13px;}
    .quick_wrap li.q01 a img{left: 15px;}
    .quick_wrap li.q06 a img{left: 17px;}
    .quick_wrap li.q07 a img{left: 14px;}
    .quick_wrap li.q07 {background-color: #ed819a;}
    #to_top .mo {width: 15px;height: auto;}

    .quick_icon {pointer-events: none; opacity: 0;} 
    .quick_icon.on, .quick_icon.q07,.quick_icon:last-child { pointer-events: auto; opacity: 1;} 
    .quick_wrap li::after {padding: 15px 0 0 20px;} 
    
    .login li:last-child a{margin-left: 0;}
}
#footer .fmenu{padding-top: 20px;}
#footer .fmenu a{color: #fff; opacity: .5;}
#footer .line{background-color: #736e6c; width: 100%; height: 1px; margin-top: 20px;}
#footer .fcopy{opacity: .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: #f9f8f8;text-align: center;font-size: 0.95rem;}
    #header .depth02 a{display:block;padding:1rem;position:relative;top:0;left:0; border-bottom: 1px solid #dadada;}
    #header .depth02 a:hover{color: var(--pointcolor);}
    #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;}

}
@media (max-width:1800px){
    #header #menu .menu_wrap{width: 80%;}
    #header #menu .login{width: 25%;}
    #header #menu .login img{display: none;}
    #header #menu .login .pl-10{padding-left: 0;}
}
@media (max-width:1580px){
    #header #menu{width: 85%;margin: 0;}
    #header .login{width: 14%;}
    #header .depth02 a{padding: 0.9375rem 0;}   
}
@media (max-width:1200px){
    #header #menu{width: 85%;margin: 0;}
    #header .login{width: 14%;}
    
}
@media (max-width: 990px) {
    #header #menu .login{width: 50%;}
    .login a{margin-left: 0;}
     #header #menu .login img{display: block;}
    #header #menu .login .pl-10{padding-left: 0.625rem;}

    #header{padding-bottom: 0;}
    #header.sticky {position: fixed;top: 0;left: 0;}
    /* #header>.header.mOpen .menu_wrap{opacity: 1;} */
    html.open-menu {overflow: hidden;}
    .nav_btn{display: inline-block; position: fixed; top:24px; right: 5%;}
    .dropdown-menu{height:auto;}
    #header .nav-menu{padding:0;width: 100%;height:100%;overflow: scroll;position: fixed;right: 0;top:-100%;bottom: 0;background-color: #fff;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 a{font-size: 18px;}
    #header .nav-menu.on:after {display: block;content: "";clear: both;width: calc(100% - 8px);height: 80px;background: #fff;position: fixed;top: 0;left: 0; border-bottom: 1px solid #dfdfdf;}
    #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:after{width: 86%;transition: .5s all ease .5s;}
    #header #menu #lnb .depth01 {padding: 15px 0;font-size: 22px;text-align: left; font-family: var(--koSerif), serif;}
    #header #menu #lnb .depth01.on{color: #363636;}
    #header #menu #lnb .active .depth01{color: #363636; background-color: #fff; border-bottom: 2px solid #ed819c;}

    #header #menu #lnb .depth02 {transform: translateX(0);position: relative;top: 0;font-size: 2rem;background-color: #fff; border-bottom: 2px solid #cfcfcf;}
    #header #menu #lnb .depth02 a{padding: 10px 7%;color: #595959;display: block;}
    #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 #lnb .depth02 > li:last-child{border-bottom: 0;}

    #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;}
    #header.mOpen .logo{position: fixed;top: 0;left:5%;z-index: 9999;}
    #header .tel{display: block;position: absolute;top: 50%;left: 5%;transform: translateY(-50%);font-size: 20px;}
    #header .login_m{width: 100%; margin-top: 3rem;}
    #header .login_m .login{width: 70%;text-align: center; margin-left: auto; margin-right: auto; display: block !important;}
    #header .login li{flex-grow: 1;;}
    #header .login li a{padding:8px 15px;font-size: 1.375rem;}

    #site_map{display: none !important;}
    #header.mOpen .menu_wrap:after{display: none !important;}

    #header .login_m a{font-weight: 600; background-color: var(--pointcolor); border-radius: 60px;}

    #header #menu #lnb .depth01{position: relative;}
    /* #header #menu #lnb .depth01:after{width: 12px; height: 12px; border-right: 3px solid #ed819c; border-bottom: 3px solid #ed819c; display: block; content: ''; position: absolute; top: 40%; right: 2%; transform: rotate(45deg);  transition: all .3s;}
    #header #menu #lnb .active .depth01:after{transform: rotate(225deg); top: 45%;} */
}

@media (max-width: 768px){
    #header #menu .login{width: 90%;}
}