#header {position: fixed;top:0;left:0;width: 100%;border-bottom: 0;z-index: 9998;/* background: rgba(0,0,0,0.98);box-shadow: 0 0 7px rgb(0 0 0 / 10%); */}
 
#header .container{display:flex;align-items: center;}
#header .logo {width:15%}
#header .logo a {display: inline-block;}
#header .logo img {filter: invert(1) brightness(1.5) sepia(2) grayscale(.7);}
#header #menu {width:70%; margin:0 20px; font-family: var(--notoSans), serif;}
#header #menu .menu {width: calc(100% /5); position: relative; top:0; display: block!important;}
#header.Immunity #menu .menu {width: calc(100% /6)}

#header #menu .depth01 {padding:25px 0; display:block; color:#fff; font-weight: 400; font-size: 1.125rem; text-align: center;}
#header #menu .depth02 {display:none; position:absolute; top:100%; left:0; right:0; margin: auto; width:100%;}

#header .depth02 a.depthTit img {width: 10px; align-self: center;}

.nav_btn{display: none;width: 26px;height: 26px;position: fixed;top: 7px; right: 7%;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 .ham4.active .top {stroke-dashoffset: -68px;}
.nav_btn .ham4.active .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 .hamRotate.active {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 .line {stroke: var(--pointcolor);}
.nav_btn.sticky.open .line {stroke:#fff;}



.site-menu {display: block; width: 54px; height: 54px;}
.site-menu .ham4 .top {stroke-dasharray: 40 121;}
.site-menu .ham4 .bottom {stroke-dasharray: 40 121;}
.site-menu .ham4.active .top {stroke-dashoffset: -68px;}
.site-menu .ham4.active .bottom {stroke-dashoffset: -68px;}

.site-menu .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;}
.site-menu .hamRotate.active {transform: rotate(45deg);}
.site-menu .line {fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke:#fff; stroke-width:4.5; stroke-linecap:round;}  


#header .mainBtn {border-radius: 20px; background-color: #e4e0d7; padding: .5rem 2rem; font-weight: 700; display: block; color:var(--pointcolor); margin-right: 3rem;}
#header.Immunity .mainBtn {background-color: var(--pointcolor); color:#e4e0d7;}
#header.Immunity.mOpen .mainBtn {background-color: #e4e0d7;}

#header.sticky .mainBtn {background-color: var(--pointcolor); color:#e4e0d7;}
#header.sticky.mOpen .mainBtn {background-color: #e4e0d7;}
#header.sticky .mainBtn.sitemap {background-color: #e4e0d7; color:var(--pointcolor);}

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

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

.sub.board{padding-top: 74px;}

/* sticky */
#header.sticky {position: fixed;top: 0;left: 0;width: 100%;z-index: 9998;background: #fff;box-shadow: 0 0 7px rgb(0 0 0 / 10%);}
#header.sticky .logo img {filter: none;}
#header.sticky.mOpen .logo img {filter: invert(1) grayscale(.5) brightness(1.5) sepia(2);}


#header.sticky #menu .depth01 {color:#282828;}
#header.sticky #menu .depth01:hover {color:var(--pointcolor)}

#header .login img {filter: invert(1) grayscale(.5) brightness(1.5);}
#header.sticky .login img {filter:none;}
#header.sticky.mOpen .login img {filter: invert(1) grayscale(.5) brightness(1.5);}
#header.sticky .site-menu .line {stroke: var(--pointcolor);}

#header.sticky .site-menu.sitemap .line {stroke: #fff;}

#header.sticky .logo.sitemap img {filter: invert(1) grayscale(.5) brightness(1.5) sepia(2);}
#header.sticky .login.sitemap img {filter: invert(1) grayscale(.5) brightness(2);}

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

    #header .container{position: relative;top:0;left:0; max-width:1720px; width: 90%;}
    #header .dropdown-menu {visibility: hidden;opacity: 0;display: block!important;transition: all .5s ease}
    #header #menu .depth01{transition: all .5s ease;}
    #header #menu .depth01:hover {color:#e4e0d7; font-weight: 700;}

    #header #menu .depth01 img {display: none;}

    #header .dropdown-menu.visible{visibility: visible;opacity: 1;} 
    
    #header .logo {width: 183px;display:flex;align-items: center; z-index: 9999;}
    #header #menu {width: calc(100% - 560px);}
    #header #menu #lnb .depth02 {height: auto; background-color: rgba(48,84,83,.8); padding: 20px;text-align: left; margin-top: 1px; box-shadow: rgba(0, 0, 0, .5) 1px 0 10px;}
    #header #menu #lnb .depth02 > li {position: relative;}
    #header #menu .depth02 {width: 200px;}
    #header .depth02 a {display:inline-block;/* position:relative; */top:0;left:0;padding: 10px 0; width: 100%; color:#fff; opacity: .7; padding-right: 10px;}
    #header .depth02 a.depthTit {display: flex; align-items: center; justify-content: space-between;}
    #header .depth02 a:hover {opacity: 1; color:#e4e0d7; font-weight: 700;}

    #header .header .nav_line {width: 37px;left: 22.5px;}
    #header .header .nav_line {height: 2px; border-radius: 3px; background: #e4e0d7; position: absolute; bottom: 20px; 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.sticky .header .nav_line {background-color: var(--pointcolor);}

    #header #menu .depth03 {width: 200px; position: absolute; background-color: rgba(48,84,83,.8); left: 180px; top:10%; padding: 1rem;}

    #header .login{display: flex; align-items: center; gap:0 .7rem; flex-shrink: 0; z-index: 9999;}
    /* #header .login li{width: 50%;padding: 0 5px;} */
    /* #header .login li a{padding:3px 0;text-align: center;border-radius: 150px;border:1px solid transparent;display: block;color: #fff;} */
   
 

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

    #sitemap {display: none;position:absolute;top:0;left:0;padding:50px 30px;background-color: var(--pointcolor); color: #fff; width: 100%; height: 100vh;}
    #sitemap.on {display: block;}
    #sitemap .site-box{/*  overflow-y: scroll;  */max-width: 1720px; width: 100%; margin: auto;}
    /* #sitemap .site-box::-webkit-scrollbar{width: 2px;}
    #sitemap .site-box::-webkit-scrollbar-track{background-color: #000;} */
    #sitemap #site-nav {/* border-top:1px solid rgba(255,255,255,.1); */ margin-top: 2rem; padding-right: 1rem;}
    #sitemap #site-nav .dropdown-menu{visibility: visible;opacity: 1;position: relative;}
    #sitemap #site-nav .menu {display: flex;align-items: baseline; padding: 1rem 0; border-top:1px solid rgba(255,255,255,.1); }
    #sitemap #site-nav .menu+.menu{margin-top:10px;}
    #sitemap #site-nav .depth01{width: 20%;padding: 10px 0;padding-right: 15px;color: #fff; font-size: 1.625rem;}
    #sitemap #site-nav .depth02{display: flex!important;align-items: flex-start;width: calc(100% - 120px);flex-wrap:wrap}
    #sitemap #site-nav .depth02 li{width: 20%;text-align: left;font-size: 0.9em;}
    #sitemap #site-nav .depth02 a {color: #fff;position: relative;top: 0;left:0; font-size: 1.25rem; opacity: 1;}
    #sitemap #site-nav .depth02 a.depthTit {font-weight: 700;}
    #sitemap #site-nav .depth02 a.depthTit img {display: none;}
    #sitemap #site-nav .depth03 li {width: 100%;}
    #sitemap #site-nav .depth03 a {font-size: 1.125rem; font-weight: 300; color:#e4e0d7; padding: 5px 0;}
    #sitemap #site-nav .depth03 a:hover {font-weight: 700;}

    #header.sticky #sitemap.on .line {stroke:#fff;}

}

@media (max-width:1580px){
    #header .container{width: 100%;padding: 0 15px}
    #header #menu{width: calc(100% - 300px);}
    /* #header .logo{width: 100px} */
    #header .depth02 a{padding: 0.9375rem 0;}
    #header #menu .depth02{width: 150px;}
    #header #menu .depth03{width: 150px;}
}
@media (max-width: 990px) {
    #sitemap{display: none!important;}
    #header .container{width: 90%;padding: 0;}
    html.open-menu {overflow: hidden;}
    .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: var(--pointcolor);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: 80px 0 30px 0; 
    }
    #header .nav-menu.on:after {display: block;content: "";clear: both;width: calc(100% - 8px);height: 80px;background: var(--pointcolor);position: fixed;top: 0;left: 0;}
    #header .nav-menu.on:before {content:''; position: absolute; width: 90%; height: 1px; background-color: rgba(223,223,223,.25); left: 0; right:0; margin: auto;}
    #header .nav-menu.on {top: 0;} 
    #header #menu #lnb .menu {width: 100%!important; text-align: left;}
    #header #menu #lnb .menu.active span {border-bottom: 1px solid #e4e0d7;}
    /* #header #menu #lnb .menu > span:after{display: block;content:"";clear:both;left:7%;width: 0;transition: .5s all ease 0s;background-color: #e4e0d7;height: 1px;position: absolute; top: 50px;}
    #header #menu #lnb .menu > span.active:after{width: 160px;transition: .5s all ease .5s;} */

    /* #header #menu #lnb {padding-top: 1rem;} */
    #header #menu #lnb .depth01 {padding: 15px 7%; font-weight: 300; position: relative; font-size: 2.5rem;text-align: left;font-family: var(--mainfont), sans-serif;color: #fff;}
    #header #menu #lnb .menu.active .depth01{color: #e4e0d7;font-weight: 700;}
    
    #header #menu .menu .depth01 {display: flex; align-items: center; justify-content: space-between;}
    #header #menu .menu .depth01 > img {transform: rotate(90deg); transition: .3s;}
    #header #menu .menu.active .depth01 > img {transform: rotate(270deg); transition: .3s;}
    
    #header #menu #lnb .depth02 {left: 0;transform: translateX(0);position: relative;top: 0;font-size: 1.5rem; background-color: #1c3231;}
    #header #menu #lnb .depth02 a{padding: 1.5rem 7% 1.5rem 10%;color: #fff; font-size: 2.1rem; display: block;}
    #header #menu #lnb .depth02 .active > a {font-weight: 700; color:#e4e0d7;}
    #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 .depth02 a.depthTit img {transform: rotate(90deg);}
    #header #menu #lnb .depth02 > li.active img {transform: rotate(270deg);}

    #header #menu #lnb .depth03 {background-color: #091e1d;}
    #header #menu #lnb .depth03 a {padding: 1.2rem 7% 1.2rem 13%;color:#e4e0d7;}


    #header .logo{padding: 15px 0;width: auto;}
    #header .logo img {width: 14rem;}
    #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{display: none;}
    #header #menu .login {display: flex; flex-direction: column; width: auto; gap:2.5rem 0; margin-top: 2rem;}
    #header .login li {padding:10px 7%;width: auto; position: relative;} 
    #header .login li:first-child:after {content:''; width: 90%; height: 1px; bottom:-13px; background-color: rgba(223, 223, 223, .25); position: absolute; left: 0; right:0; margin: auto;}
    #header .login li a {display: flex; align-items: center; font-size: 18px; color:#fff; gap:0 1rem;}
    #header .login li a.mainBtn {color:var(--pointcolor); width: fit-content; font-weight: 700;}
}


/* footer */
footer {background-color: #203131; letter-spacing: -0.04rem;}
footer .infoList {display: flex; align-items: center; justify-content: center; margin-top: 1.875rem;}
footer .infoList a {color:#fff; padding: 0 1.3rem; position: relative;}
footer .infoList a:after {content:''; width: 1px; height: .9375rem; background-color: #fff; position: absolute; bottom:3px; left: 0;}
footer .infoList li:first-child a:after {display: none;}
footer .infoList a:hover {font-weight: 700;}

footer .bottomInfo {color:var(--beige); opacity: .5;} 
footer .footerLogo {width: 10.8125rem;}


/* counsel_pop */
.counsel_pop {transition: .3s all ease; max-width:1720px; width: 100%; position: fixed; bottom:0; left:0; right:0; margin: auto; transform: translateY(100%);z-index: 9997;background: rgba(48,84,83,.8); padding: 1.2rem 1rem;}
.counsel_pop.on {transform: translateY(0%);}
.counsel_pop .counsel_Btn {position: absolute; background-color: rgba(48,84,83,.8); padding: 0.7rem 5rem .5rem 3.8rem; color:#e4e0d7; font-size: 20px; cursor: pointer; transform: translateY(-97.5%); left: 0; right:0; margin: auto; width: fit-content; top:-0.0625rem;}
.counsel_pop .counsel_Btn:after {width: 10px; height: 10px; border-right: 2px solid var(--beige); border-bottom: 2px solid var(--beige); position: absolute; right: 3rem; content:''; top: 10px; bottom:0; margin: auto; transform: rotate(-135deg); transition: all 0.2s ease-in-out;}
.counsel_pop.on .counsel_Btn:after { transform: rotate(45deg); top:0;}

.counsel_pop .inner{display: flex;align-items: center; gap:.7rem; justify-content: space-between; transition: 0s all ease; max-width: var(--layoutwidth); width: 100%; margin: auto;}
.counsel_pop .inner > div {display: flex; align-items: center;}
.counsel_pop .inner .counsel_box {width:15%}
.counsel_pop .inner .select_box {width:18%}
.counsel_pop .inner > div:nth-child(5) {margin-left: 1rem;}
.counsel_pop .inner .counsel_tit{color: #fff;}

.counsel_pop .counsel_box label{width: auto;padding-right: 10px;color: #fff;}
.counsel_pop .counsel_box input[type="text"] {padding:8px 16px; width: 100%; font-size: 1rem; background-color: #fff; color:#000; box-shadow: none; border:none;}
.counsel_pop .select_box select {padding:8px 16px; width: 100%; font-size: 1rem; background-color: #fff; color: #a6a6a6; box-shadow: none; border:none;}
.counsel_pop .select_box option {padding-inline: 0; min-block-size: 0; padding-block-end: 0; display: inline-block;}

.counsel_pop .counsel_box input[type="text"]::placeholder {color:#949494;}
.counsel_pop .counsel_box input[type="text"]::-webkit-input-placeholder{color:#949494;}
.counsel_pop .counsel_box input[type="text"]::-ms-input-placeholder{color:#949494;}

.counsel_pop input[type=text]:focus, .counsel_pop input[type=password]:focus, .counsel_pop textarea:focus, .counsel_pop select:focus{border:0!important;border-bottom:1px solid rgba(255,255,255,0.4)!important}
.counsel_pop #confirm_submit{width: 100%;text-align: center;color: var(--pointcolor); background-color: #e4e0d7; padding: .625rem 2rem;font-weight: 700;}
.counsel_pop .check_box{font-size: .875rem; color: #fff; font-weight: 300;}
.counsel_pop .check_box label a{margin-left: 5px;color: #fff;}

.counsel_pop select {-webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; border:none; appearance:none; background:url('/img/main/select_arrow.png') no-repeat right 14px center;}
.counsel_pop input[type="checkbox"]{display: none;}
.counsel_pop input + label {width: 17px; max-width: 100%; height: 17px; border: 1px solid #fff; display: inline-block; cursor: pointer; vertical-align: middle; user-select: none }
.counsel_pop input:checked + label {background:#000;}
.counsel_pop input + label + label {margin-left: 10px; font-size: .875rem; position: relative; cursor: pointer; user-select: none; white-space: nowrap;}


@media(max-width:990px) {
    .counsel_pop .counsel_Btn {right:0; margin: auto; width: fit-content;}
    .counsel_pop .inner {flex-wrap: wrap; gap:1rem; width: 92%;}
    .counsel_pop .inner > div:nth-child(1) {display: none;}
    .counsel_pop .inner .counsel_box, .counsel_pop .inner .select_box {width: 49%;}
}
@media(max-width:768px) {
    .counsel_pop {background-color: var(--pointcolor); padding: 2rem 1rem;}
    .counsel_pop .counsel_Btn {background-color: var(--pointcolor); font-size: 1.6rem; transform: translateY(-97%);}
    .counsel_pop .inner > .submit_box {width: 100%;}
}
@media(max-width:500px) {
    .counsel_pop .inner .counsel_box, .counsel_pop .inner .select_box {width: 100%;}
    .counsel_pop .inner .check_box {width: 48%;}
    .counsel_pop .inner > div:nth-child(5) {margin-left: 0;}

    .counsel_pop #confirm_submit {font-size: 1.5rem; padding: 1rem;}
    .counsel_pop .counsel_box input[type="text"] {font-size: 1.5rem;}
    .counsel_pop .select_box select {font-size: 1.5rem;}
    .counsel_pop input + label + label {font-size: 1.1rem;}
}



/* 퀵메뉴 */
.quick_box_main .q_link {position: fixed;right: 3rem;bottom: 135px; width: 55px; height: 55px; display:flex;justify-content: center;align-items: center;z-index: 9995;background-color: #1a1a1a; border-radius: 50%; /* box-shadow: 0 0 10px rgb(142 142 142 / 20%); */}
.quick_box_main .q_link img {align-self: center;}
.quick_box_main .q_link.click_btn {bottom:135px;background-color: #fff; /* box-shadow: 0 0 10px rgb(142 142 142 / 20%); */ z-index: 9995; display: none;}
.quick_box_main .q_link.top {font-size: 14px; letter-spacing: 0;}
.quick_box_main img {/* width: 1.625rem; */ filter: invert(1) brightness(2);}

.quick_box_main .q_link.click_btn img{transform: rotate(0);transition: all .8s var(--ani); width: 1.375rem;}
.quick_box_main .q_link.click_btn.active img{transform: rotate(45deg); display: block;}
.quick_box_main .quick {position: fixed;z-index: 9995;bottom: 200px;right: 3rem;}
.quick_box_main .quick li{margin-top:10px;}
.quick_box_main .quick li a{display: flex; border-radius: 50px; width: 55px; height: 55px; /* box-shadow: 0 0 10px rgb(142 142 142 / 20%); */ background-color: rgba(0, 0, 0, .3); justify-content: center;align-items: center;}


/* .quick_box_main .quick li:nth-child(1){transition-delay: .2s;}
.quick_box_main .quick li:nth-child(2){transition-delay: .4s;}
.quick_box_main .quick li:nth-child(3){transition-delay: .6s;}
.quick_box_main .quick li:nth-child(4){transition-delay: .8s;}
.quick_box_main .quick li:nth-child(5){transition-delay: 1s;}
.quick_box_main .quick li:nth-child(6){transition-delay: 1.2s;}
.quick_box_main .quick li:nth-child(7){transition-delay: 1.4s;} */

@media (max-width: 768px) { 
    .quick_box_main .quick {transform: translateX(160px); transition: all .8s var(--ani);}
    .quick_box_main .quick.active {transform: translateX(0px); transition: all .8s var(--ani);}
    .quick_box_main .quick li a {width: 50px; height: 50px; background-color: #e4e0d7;}
    .quick_box_main img {filter: none;}
    .quick_box_main .q_link.click_btn {width: 50px; height: 50px; bottom: 140px; display: flex; background-color: var(--pointcolor);}
    .quick_box_main .quick li {transform: translateX(0px);opacity: 0;transition: all .8s var(--ani);}
    .quick_box_main .quick.active li{transform: translateX(0);opacity: 1;}
    .quick_box_main .q_link {bottom: 80px; width: 50px; height: 50px; background-color: #e4e0d7; color:var(--pointcolor)}
    

    .quick_box_main .q_link, .quick_box_main .quick {right:1.5rem}

    .quick_box_main .bg {transition: .3s;}
    .quick_box_main .bg.on {width: 100%; height: 100vh; background-color: rgba(0,0,0,.5); position: fixed; z-index: 9993; top:0; left: 0; transition: height .3s;}
}