#header {position: fixed;top:0;left:0;width: 100%; background: transparent; z-index: 9998; transition: .3s all ease;}

#header .container{display:flex;align-items: center; justify-content: space-between; max-width: 1700px; width: 95%;}
#header .logo {width:17%}
#header .logo a {display: inline-block;}

#header #menu {width:95%; margin:0 1rem;}
#header #menu .nav-menu-ul {justify-content: space-between; width: 100%;}
#header #menu .menu {width:fit-content; position: relative;top:0;display: block!important;}
#header #menu .depth01 {padding:25px 0;display:block;color:#333;text-align: center; white-space: nowrap;}

.menu-btn-wrap .menu-btn  input {display: none;}

/* sticky */
#header.sticky {position: fixed;top: 0;left: 0;width: 100%;z-index: 9998; background-color: rgba(62,57,46,.4);}
/* #header.sticky .login li:hover a{background-color: var(--pointcolor);} */


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

  

    #header .container {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 .3s ease; color:#fff; letter-spacing: 0;}

    #header #menu .nav-menu {display: flex;}

    #header #menu .menu:hover {background: no-repeat center url('/img/main/over.png');}

    /* #header #menu .nav-menu .depth01.on .Tit {opacity: 0;} */
    /* #header #menu .nav-menu .depth01 .Tit {opacity: 1; transition: all .5s ease;} */
    /* #header #menu .nav-menu .depth01 .desc {position: absolute; top:0; bottom:0; left:0; right:0; height: fit-content; margin: auto; opacity: 0;} */
    
    
    #header.subPage #menu .depth01, #header.subPage .login_wrap a {color:#333; font-weight: 300;}
    #header.subPage .login_wrap a:nth-child(1):before {background-color: #333;}
    #header.subPage .login_wrap li+li:before {background-color: #333;}
    #header.subPage .logo img {filter: brightness(0.3);}

    #header.subPage.sticky #menu .depth01, #header.subPage.sticky .login_wrap a {color:#fff; font-weight: 100;}
    #header.subPage.sticky .login_wrap a:nth-child(1):before {background-color:#fff;}
    #header.subPage.sticky .login_wrap li+li:before {background-color: #fff;}
    #header.subPage.sticky .logo img {filter: brightness(1);}

    #header #menu .nav-menu .depth01.on .desc {opacity: 1;}




    #header .dropdown-menu.visible {visibility: visible;opacity: 1;} 
    
    #header .logo {display:flex;align-items: center;}
    #header .tel {display: none;}


    #header .quickList {display: flex; width: 15%;}
    #header .quickList li {padding: 0 .5rem;}
    #header .quickList .h_icon {width: 2.875rem;}    

    #header .login_wrap {display: flex; align-items: center; width:11rem;}
    #header .login_wrap a {position: relative;}
    #header .login_wrap a:nth-child(1):before{content: "";display: inline-block;width: 1px;height: 0.85em;background-color: #fff; position: absolute; top:0; bottom:0; right:0; margin: auto;}
    #header .login_wrap a {font-family: var(--pointfont); color:#fff; padding: 0 .7rem; letter-spacing: 1px;}

    #header .m_login {display: none;}

}


@media (max-width: 1340px) {
    #header .container {width: 90%;padding: 0;}
    html.open-menu {overflow: hidden;}
    .nav_btn {display: inline-block;}
    #header .nav-menu {padding:0;width: 100%;height:100vh; position: fixed; top:0; right:-120%; background-color: #716e66;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: 70px 0 0 0; 
    }

    #header .header.mOpen .logo:after{border-bottom: 1px solid #707f76;display: block;content: "";clear: both;width: 100vw;height: 1px;position: absolute;top: 75px; left: -46px; z-index: -1;}

    #header .nav-menu.on {right:0;}
    #header .nav-menu.on #lnb{opacity: 1;transition: All .3s ease; padding:0 2rem;}

    #header .nav-menu.on .nav-menu-ul {flex-direction: column;}

    #header #lnb{width: 100%;opacity: 0;display: block;}
    #header #lnb .menu .depth01{width: 100%;text-align: left;display: block; font-weight: 100; color:#fff; padding:1rem 0; position:relative;top:0;left:0;font-size: 2.5rem; opacity: .6;}
    /* #header #lnb .menu .depth01:after {content:''; position: absolute; width:1.12rem; height: 1.12rem; background-color: #f4ede5; border-radius: 50%; top:.7rem; right:.3rem;} */

    #header #lnb .menu .depth01:hover {opacity: 1; font-weight: 300;}

    #header #menu .nav-menu .depth01 .Tit {padding-left: 2rem;}
    /* #header #menu .nav-menu .depth01 .desc  {display: none;} */

    #header .logo {padding: 15px 0;width: auto;}
    /* #header.mOpen .logo {position: fixed;top: 0;left:5%;z-index: 9999;}  */
    #header.mOpen .logo {z-index: 9999;} 
    #header .quickList {display: none;}
    #header .tel {display: block;position: absolute; color:#fff; top: 50%; right:7rem;transform: translateY(-50%);font-size: 2.5rem; padding: 1rem;}
    #header.mOpen .tel {display: none;}

    #header #menu .menu {width: 100%;}

    #header .m_login {display: block;}
    #header .login_wrap {display: none;}
/*     
    #header .m_quickList {display: flex; justify-content: center; border-top:1px solid #707f76; border-bottom:1px solid #707f76; padding: 2rem;}
    #header .m_quickList li {padding: 2rem; width: 25%;}
    #header .m_quickList li p {margin-top: 2rem; font-size: 1.5rem; color:#fff; font-weight: 300;} */


    #header .m_login {display: flex; position: absolute; margin-left: auto; width: fit-content; bottom:10%; right:3rem;}   
    #header .m_login a {width: 50%; text-align: center; font-size: 1.5rem;}
    #header .m_login a + a {margin-left: 1rem;}
    #header .m_login a {color:#fff; font-weight: 300; padding: .7rem 3rem; font-size: 1.875rem; border-radius: 30px; border:1px solid #eee;}

   
    .nav_btn, .nav_btn span {display: inline-block; transition: all .4s; box-sizing: border-box;}
    
    .nav_btn {position: relative; width: 38px; height: 22px; right:0; z-index: 9999; cursor: pointer;}
    
    .nav_btn span {position: absolute; right: 0; width: 100%; height: 3px; background-color: #fff; border-radius: 3px; }
    
    .nav_btn span:nth-of-type(1) {top: 0; width: 80%;}    
    .nav_btn span:nth-of-type(2) {top: 9px;}    
    .nav_btn span:nth-of-type(3) {bottom: 0; width: 60%;}
   
    .nav_btn.on span:nth-of-type(1) {-webkit-transform : translateY(9px) rotate(-45deg); transform : translateY(9px) rotate(-45deg);}
    .nav_btn.on span:nth-of-type(2) {left : 50%; opacity : 0; -webkit-animation : active-menu-bar05 .8s forwards; animation : active-menu-bar05 .8s forwards;}
    @-webkit-keyframes active-menu-bar05 {
        100% {
            height: 0;
        }
    }
    @keyframes active-menu-bar05 {
        100% {
            height: 0;
        }
    }
    .nav_btn.on span:nth-of-type(3) {width: 80%; -webkit-transform : translateY(-10px) rotate(45deg); transform : translateY(-10px) rotate(45deg);}
    
    

}



@media (max-width: 500px) {
    .login li.menu-btn-wrap .menu-btn {width: 58px;height: 58px;}

    #header .tel {right:5rem;} 

    #header #lnb .menu .depth01 {font-size: 2rem;}
    #header .m_login li a {padding: .7rem 3rem; font-size: 1.5rem;}
  
}







/* 퀵메뉴 */
.quick_main .q_link {position: fixed;right: 50px;bottom:120px;width:4.1875rem;height:4.1875rem;display:flex;justify-content: center;align-items: center;z-index: 9990;background-color:var(--pointcolor);border-radius: 50%;}
.quick_main .q_link.click_btn span {font-weight: 700;}
.quick_main .q_link.click_btn {bottom:120px;background-color: #fff;z-index: 9991; transform: rotate(45deg); line-height: 1; font-size: 14px; font-weight: 600; transition: .3s;}
.quick_main .q_link.click_btn.active {transform: rotate(0)}


.quick_main .quick {position: fixed;z-index: 9993;bottom: 200px;right: 50px;}
.quick_main .quick li{margin-top:10px;}
.quick_main .quick li a{display: flex; border-radius: 50%; width:4.1875rem;height:4.1875rem; text-align: center; font-size: 14px; font-family: var(--pointfont); font-weight: 700; background-color: #fff;justify-content: center;align-items: center;}

.quick_main .quick li span{width: 70px;}
.quick_main .quick.active li {transform: translateX(160px);opacity: 0;transition: all .8s var(--ani);}
.quick_main .quick li{transform: translateX(0);opacity: 1; transition: all .8s var(--ani);}

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

@media (max-width: 768px) { 
   .quick_main .q_link{bottom:20px;right:15px;}
   .quick_main .quick {bottom:130px; right:7px;width:50px}
   .quick_main .q_link.click_btn{bottom:75px;}
   .quick_main .q_link img {height: 17px;} 
   .quick_main .quick li {margin-top: 5px;}
   .quick_main .quick li img{height:25px;}
   .quick_main .quick li a {font-size:12px; line-height:1;}

}



#bo_gall #bo_cate #bo_cate_on {border-color: var(--pointcolor); background-color: var(--pointcolor); color:#fff; font-weight:400;}
#bo_gall #bo_cate a {border-color:#afafaf; border-radius: 0; color:#afafaf; box-shadow:none;}
#bo_gall #bo_cate a:focus, #bo_gall #bo_cate a:hover, #bo_gall #bo_cate a:active {background-color: #525252; color:#fff; border-color:#525252;}