/* header */
.nav_btn{display: none;width: 62px;height: 62px;position: fixed;top: .375rem; right: .5rem;transition: .1s;cursor: pointer;z-index:10000;}
.nav_btn .ham4 .top {stroke-dasharray: 40 121;}
.nav_btn .ham4 .bottom {stroke-dasharray: 40 121;}
.nav_btn.on .ham4 .top {stroke-dashoffset: -68px;}
.nav_btn.on .ham4 .bottom {stroke-dashoffset: -68px;}

.nav_btn .ham {cursor: pointer;-webkit-tap-highlight-color: transparent;transition: transform 400ms; -moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;}
.nav_btn.on .hamRotate {transform: rotate(45deg);}
.nav_btn .line {fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke:#fff; stroke-width:3.5; stroke-linecap:round;}  

.nav_btn.sticky.open .line {stroke:#fff;}



#header .header {position: fixed;top:0;left: 0;width: 100%;z-index:9990;transition: All .5s ease; padding: 1.5rem 0;}
#header .header .inner {width: 90%; max-width:1500px; margin: auto;display: flex; align-items: center; justify-content: space-between;}
#header .header .logo {width:15%;text-align: center;display: flex;align-items: center;justify-content: center; z-index: 999;}
#header .header .logo img {width: 13.8125rem; filter: invert(1) brightness(5);}
#header .header #menu {width: 70%; padding: 0 2.3em;}
#header .header #menu a {color:#fff; font-size: 1.125em; font-weight: 700;}
#header .header #menu .nav-menu-ul {display: flex; justify-content: space-between;}


#header .header .nav_line{width: 27px;left: 22.5px;}
#header .header .nav_line{height: 3px;background: var(--pointcolor);position: absolute;bottom: 10px;left: 37px;opacity: 0;transition: left 0.6s cubic-bezier(.77,0,.175,1), width 0.3s ease, height 0.5s ease, top 0.5s ease;}

#header .header.sticky {background-color: #fff;}
#header .header.board {background-color: #fff}
#header .header.board .logo img {filter: none;}
#header .header.board #menu a {color:#000;}

#header .header.sticky .logo img {filter: none;}
.nav_btn.sticky .line {stroke: #000;}
.nav_btn.sticky.on .line {stroke: #fff;}

@media(min-width:991px) {
    #header .header.sticky  #menu a {color:#000;}
}

@media (max-width:990px){
    .nav_btn{display: inline-block;}
    /* .nav_btn .line {stroke: #000;} */
    #header .header .logo {width: auto; position: relative; z-index: 9999; padding: .7rem 0;}
    
    #header .header .nav_line{display: none;}

    
    #header .header .nav-menu{flex-wrap:wrap;overflow: hidden;position: fixed; right: 0; border-radius: 0; z-index: 10000;letter-spacing: 0px;transition-timing-function: ease-in-out;
        width: 75%;height: 100%; padding-bottom: 2rem; top: -100%; background-position: center;background-repeat: no-repeat;background-size: cover;
        background-position:left center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: var(--pointcolor);
        -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;}



    #header .header .nav-menu.on{padding-top:60px;top:0}
    #header .header .nav-menu.on #lnb{opacity: 1;transition: All .5s ease;}

    #header .header #menu .nav-menu-ul {flex-direction: column; padding: 0 3em; gap:2rem 0;}
    #header .header #menu .nav-menu-ul li.active {font-weight: 400;}
    #header .header #menu .nav-menu-ul li {font-size: 16px; margin-top: .5rem; width: fit-content; position: relative; padding-bottom: .2em;}
    #header .header #menu .nav-menu-ul li:first-child {margin-top:0;}
    #header .header #menu .nav-menu-ul li:hover {transition: 1s;}
    #header .header #menu .nav-menu-ul li:hover:after {content:''; position: absolute; width: 100%; height: 2px; background-color:var(--pointcolor); left: 0; bottom:0;}

    #header .header #menu .Logo_Lg {position: absolute; bottom:3rem; right: 2rem; width: 22.6875em;}   
}


.quick_box {position: fixed; z-index: 9990; display: flex; flex-direction: column; justify-content: center; gap:1rem; right:3.75rem; bottom:40px;}
.quick_box .q_link {position: fixed; z-index: 999; right:3.75rem; bottom:6.3rem; width:3.125rem; height:3.125rem;display:flex;justify-content: center;align-items: center;background-color: #fff;border-radius: 50%; box-shadow: 0 0 7px rgb(0 0 0 / .1);}
.quick_box .q_link img{align-self: center;}
.quick_box .q_link.click_btn{position: fixed; z-index: 999; right:3.75rem; bottom:10.3rem; width: 3.3125rem; height: 3.3125rem; align-self: center; background-color: var(--pointcolor);}
.quick_box .quick_circle {position: absolute; width: 6.25rem; animation: textRotation 32s linear infinite;}



.quick_box .q_link.click_btn span {position: relative; width: 100%; height: 100%; transition: .3s;}
.quick_box .q_link.click_btn span:after {content:''; width: .875rem; height: 2px; background-color: #fff; position: absolute; right:0; left:0; top:0; bottom:0; margin: auto; transition: .3s;} 
.quick_box .q_link.click_btn span:before {content:''; width: .875rem; height: 2px; background-color: #fff; position: absolute; right:0; left:0; top:0; bottom:0; margin: auto;}

.quick_box .q_link.click_btn.active span:after {transform: rotate(90deg); transition: .3s;}



.quick_box .quick {position: fixed; z-index: 9993;bottom: 14.375rem; right: 3.75rem;}
.quick_box .quick li{margin-top:10px;}
.quick_box .quick li a{display: flex; align-items: center; border-radius: 50px; width: 3.3125rem; height: 3.3125rem; background-color: var(--pointcolor); box-shadow: 0 0 7px rgb(0 71 139 / 0.07);}
.quick_box .quick li img{margin: auto; width:1.5rem;}
.quick_box .quick li span{position: absolute; display: none; opacity: 0; left: 0%; font-size: 16px; font-weight: 600; min-width: 5.875em; width: 100%; background-color: var(--pointcolor); border-radius:5px; color:#fff; text-align: center; padding:.3rem .5rem; transition: all .8s var(--ani);}
.quick_box .quick li:hover span:after {content:''; width: .5625rem; height: .5625rem; clip-path: polygon(100% 50%, 0 0, 0 100%); background-color: var(--pointcolor); position: absolute; right:-8px; top:0; bottom:0;margin: auto;}

.quick_box .quick li:hover span {display: block; left: -105px; opacity: 1; transition: all .8s var(--ani);}
.quick_box .quick.active li {transform: translateX(160px);opacity: 0;transition: all .8s var(--ani);}
.quick_box .quick li{transform: translateX(0);opacity: 1; transition: all .8s var(--ani);}


.quick_box .quick li:nth-child(1){transition-delay: .2s;}
.quick_box .quick li:nth-child(2){transition-delay: .4s;}
.quick_box .quick li:nth-child(3){transition-delay: .6s;}
.quick_box .quick li:nth-child(4){transition-delay: .8s;}

@media (max-width:990px){
    .quick_box .quick {right:1.75rem}
    .quick_box .q_link.click_btn {right:1.75rem}
    .quick_box .q_link {right:1.75rem}
    .quick_box .q_link img {width: .9375rem;}
}