#header {z-index: 999; position: relative; width: 100%; min-width: 1400px;}

#topNavWrap{position:fixed;top:0;width:100%;height:105px;padding:0 50px;display: flex;border-bottom:1px solid rgba(255,255,255,.0);transition:all .3s;}
#topNavWrap.sub{position:absolute}

/* 로고 */
#top_logo{position:relative;top:80%;transform:translateY(-50%)}

/* 블랙 */
#topNavWrap.black {background-color: rgba(255,255,255,.8);}
#topNavWrap.black #sns_menu p{color:#111;font-weight:bold}
#topNavWrap.black #seoul {filter: brightness(0);}


#seoul {position: relative; top:43px;right: 5px;}

/* index nav */
#nav_menu{position:relative;top:43px;width:140px;letter-spacing:.3px;text-align:center;color:#fff;margin-left: auto;}
#nav_menu.sub{display:none}
#nav_menu p{overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-40px);display:inline-block;padding:5px 16px;border-radius:30px;background-color:#111;transition:all .2s;cursor:pointer}
#nav_menu p:before{display:block;content:"";position:absolute;left:0;bottom:0;z-index:0;width:100%;height:0;background-color:#fff;transition:all .3s var(--ani)}
#nav_menu p span{position:relative;z-index:1}
#nav_menu ul{text-align: left;}
#nav_menu ul li{opacity:0;}
#nav_menu ul li a{position:relative;color:#fff;transition:all .2s 0s; -font-smoothing: antialiased; font-weight: 100;line-height:2.4; font-weight: 500; text-shadow: 2px 2px 2px rgba(0,0,0,0.3);}
#nav_menu ul li a:hover, #nav_menu ul li a.on {color:#d0b17f;}
#nav_menu .bg{visibility:hidden;opacity:0;position:absolute;left:-35px;top:-20px;z-index:-1;transform:scale(.7);width:calc(100% + 90px);height:680px;padding:20px 35px;border-radius:26px;background-color:#151515;transition:all .2s}

/* atc01 진입*/
/* #nav_menu.active .bg{visibility:visible} */
#nav_menu.active p{opacity:1;visibility:visible;transform:translateY(0);transition:all .6s var(--ani);margin-bottom:25px}
#nav_menu.active ul{display:none;transform:translateY(0);padding-bottom:10px}
#nav_menu.active ul li{opacity:0;transform:translateY(20px)}
/* 메뉴버튼on */
#nav_menu.on .bg{opacity:1;transform:scale(1);transition:all .6s var(--ani);visibility: visible;}
#nav_menu.on p:before{height:100%}
#nav_menu.on p span{font-weight:bold;color:#111}
#nav_menu ul.on li{opacity:1;transform:translateY(0);margin-top:0;transition:all .6s var(--ani)}
#nav_menu ul.on li:nth-child(1){transition-delay:0s}
#nav_menu ul.on li:nth-child(2){transition-delay:.1s}
#nav_menu ul.on li:nth-child(3){transition-delay:.2s}
#nav_menu ul.on li:nth-child(4){transition-delay:.3s}
#nav_menu ul.on li:nth-child(5){transition-delay:.4s}
#nav_menu ul.on li:nth-child(6){transition-delay:.5s}
#nav_menu ul.on li:nth-child(7){transition-delay:.6s}
#nav_menu ul.on li:nth-child(8){transition-delay:.7s}
#nav_menu ul.on li:nth-child(9){transition-delay:.8s}
#nav_menu ul.on li:nth-child(10){transition-delay:.9s}
#nav_menu ul.on li:nth-child(11){transition-delay:1s}
#nav_menu ul.on li:nth-child(12){transition-delay:1.1s}
#nav_menu ul.on li:nth-child(13){transition-delay:1.2s}
/* 화이트 */
#nav_menu.white{color:#111}
#nav_menu.white p{font-weight:bold;background-color:#fff}
#nav_menu.white p:before{background-color:#111}
#nav_menu.white .bg{background-color:#fff}
#nav_menu.white.on p span{color:#fff}
#nav_menu.white ul li a{font-weight:bold;color:#111}
#nav_menu.white ul li a:before{background-color:#111}

/* 서브 메뉴 마우스온 */
#topNavWrap.on{border-color:#e1e1e1;background-color:#fff}
#topNavWrap.on #topNav > li > a{color:#111}
#topNavWrap.on #menuLine{background-color:#666}
#topNavWrap.on .top_menu li a{color:#08151d}

/* 대분류  */
#topNav{display:none;float:right;z-index:1;height:96px;margin-left:60px}
#topNav:after{display:block;content:"";visibility:hidden;clear:both}
#topNav.sub{display:block}
#topNav > li{float:left;position:relative;padding:0 25px;line-height:105px}
#topNav > li > a{display:block;font-size:17px;color:#fff;transition:all .2s}
#topNav.black > li > a{color:#08151d}
#menuLine{position:absolute;bottom:-1px;left:50%;width:0;height:1px;background-color:transparent;transition:all 0.5s ease-in-out}

/* 소분류 */
.top_nav_s{display:none;position:absolute;width:100%;min-height:165px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);padding-top:15px}
.top_nav_s li a{display:block;margin:0px;font-size:14px;line-height:26px;text-align:center;color:#08151d;transition:color .2s;}
.top_nav_s li a:hover{color:#999}

/* 메뉴배경 */
.top_nav_bg{position:fixed;width:100%;display:none;top:105px;height:140px;background:#fff;-webkit-box-shadow:0px 12px 12px -17px rgba(0,0,0,0.25);box-shadow:0px 12px 12px -17px rgba(0,0,0,0.25)}



/*추가*/
#lnb .menu i{display: none;}
#lnb .menu .depth02:after{display:block;content: "";clear: both; visibility: visible;opacity: 0;position: absolute;left: -35px;top: -20px;z-index: -1;transform: scale(.7);width: 100%;height:calc(100% + 40px);border-radius: 26px;background-color: #ffffff;transition: all 0s;}
#lnb .menu .depth02.on:after {opacity: 1;transform: scale(1);transition: all .2s}
#lnb .menu .depth02 li{transition: none}
#lnb .menu .depth02 li a{color: #000;transition: none;}
#lnb .depth02.on{transition: none}


#topNavWrap .login{position:relative;top:43px;margin-left: 40px;display: flex;justify-content: center;}
#topNavWrap .login li a{padding:0 10px;position:relative;top:0;left:0;display: block;}
#topNavWrap .login li a span{display: none;position: absolute;top: 130%;left: 50%;transform: translateX(-50%);width: 80px;text-align: center;padding: 5px;border-radius: 150px;background:#000;color: #fff;font-size: 0.8rem;}
#topNavWrap .login li a:hover span{display: block;}
#menuBox{display: flex;width: 100%;}



.menu-btn {display:none;order:3;width: 25px;height: 15px;top:28px;right:5%; margin:auto; position:fixed;/*left: 15px;position: absolute;*/ z-index: 10000;cursor: pointer;-webkit-transition: top 300ms;transition: top 300ms;}
/* .menu-btn.active{top:50px;right:50px;} */
.menu-btn span {opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";right: 0;display: block;width: 100%;height: 2px;border-radius: 10px;background-color: #fff;position: absolute;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .4s ease-in-out;transition: .4s ease-in-out;}
.menu-btn.active span{background: #fff;}

.menu-btn .btn_line01 {top: 0;}
.menu-btn .btn_line02 {top: 7px;}
.menu-btn .btn_line03 {bottom: 0;}

.menu-btn.active span{}
.menu-btn.active span:nth-child(1) {top: 9px;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
.menu-btn.active span:nth-child(2) {opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";right: -60px;}
.menu-btn.active span:nth-child(3) {top: 9px;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);}


.black .menu-btn span{background: #000;}

.menu_first_item{display: none;}


@media (max-width: 1440px){
    #nav_menu .bg{height:570px}
}

@media (max-width: 1024px){
    #nav_menu .bg {height: 500px;}}

@media (min-width: 1200px){
    /* sns */
    #sns_menu{position:relative;top:43px;margin-left:70px;font-size:16px}
    #sns_menu p{cursor:pointer;color:#fff}
    #sns_menu p i{margin-left:40px;font-size:13px}
    #sns_menu.on p{font-weight:normal!important;color:#fff!important}
    #sns_menu ul{padding:20px 0 10px}
    #sns_menu ul li{opacity:0;transform:translateY(20px);transition:all .2s}
    #sns_menu.on ul li{opacity:1;transform:translateY(0);transition:all .6s var(--ani)}
    #sns_menu.on ul li:nth-child(1){transition-delay:0s}
    #sns_menu.on ul li:nth-child(2){transition-delay:.1s}

    #sns_menu ul li a{font-size:15px;line-height:1.6;color:#fff;transition:all .2s}
    #sns_menu ul li a:hover{opacity:.5}
    #sns_menu .bg{opacity:0;position:absolute;left:-30px;top:-20px;z-index:-1;transform:scale(.7);width:calc(100% + 60px);height:calc(100% + 40px);padding:20px 30px;border-radius:26px;background-color:#151515;transition:all .2s}
    #sns_menu.on .bg{opacity:1;transform:scale(1);transition:all .6s var(--ani)}

    /* 온로드 */
    #nav_menu.visi ul li{opacity:1;transform:translateY(0);transition:all .6s var(--ani)}
    #nav_menu.visi ul li:nth-child(1){transition-delay:0s}
    #nav_menu.visi ul li:nth-child(2){transition-delay:.1s}
    #nav_menu.visi ul li:nth-child(3){transition-delay:.2s}
    #nav_menu.visi ul li:nth-child(4){transition-delay:.3s}
    #nav_menu.visi ul li:nth-child(5){transition-delay:.4s}
    #nav_menu.visi ul li:nth-child(6){transition-delay:.5s}
    #nav_menu.visi ul li:nth-child(7){transition-delay:.6s}
    #nav_menu.visi ul li:nth-child(8){transition-delay:.7s}
    #nav_menu.visi ul li:nth-child(9){transition-delay:.8s}
    #nav_menu.visi ul li:nth-child(10){transition-delay:.9s}
    #nav_menu.visi ul li:nth-child(11){transition-delay:1s}
    #nav_menu.visi ul li:nth-child(12){transition-delay:1.1s}
    #nav_menu.visi ul li:nth-child(13){transition-delay:1.2s}

    #nav_menu ul li a:before{display:block;content:"";position:absolute;right:0;bottom:-2px;transform:scaleX(0);transform-origin:bottom left;height:1px;background-color:#d0b17f;transition:transform .3s;}
    #nav_menu ul li a:hover:before, #nav_menu ul li a.on:before{transform:scaleX(1);transform-origin:bottom right; color:#d0b17f;width:calc(100%);}

    #lnb .depth02{display: none;position: absolute;top:0;right: 140px;width: 310px;padding: 20px 35px;padding-left: 0;transition: none;}
    #nav_menu ul{transform:translateY(-36px);text-align:left;transition:all .2s}
    #nav_menu.visi ul li{position: relative;width: 100%;}
    #nav_menu ul li{transform:translateY(20px); font-size: 18px;}

}

@media (max-width: 1200px){
    .menu-btn{display: block;}
    #menuBox {display:block;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;width: -webkit-calc(100% - 510px);width: calc(100% - 510px);margin-left: -90px;position: absolute;top: 0;height: 100vh;width: 100%;max-width: 580px;right: 0;-webkit-transform: translate(100%);-ms-transform: translate(100%);transform: translate(100%);z-index: 550;background: #111;visibility: hidden;background-image: url(/img/main/s_logo_m.png);background-position: right bottom;background-size: 50%;background-repeat: no-repeat;}
    #menuBox.active{right:580px;visibility: visible;}
    

    #nav_menu{width:100%;top:0;left:0;right:auto;bottom:auto;margin-top: 30px;}
    #nav_menu ul{font-size: 18px;padding:0 5%}
    #nav_menu .bg{display:none;}
    #seoul{display: none;}
    #topNavWrap .login{top: 0;left: 0;margin-left: 0;justify-content: flex-end;padding-top: 28px;padding-right: 20%;}
    #nav_menu p{transform: translateY(0);display: none;}
    #nav_menu ul li a{line-height: 2.8;}
    #sns_menu{position:absolute;bottom:30px;left: 5%;}

    #top_logo{top:0;transform: translate(0);}
    #top_logo a{display: inline-block;padding:20px 0;position: relative;top: 0;left: 0;}
    #top_logo a:after {display: block;content: "";clear: both;width: 35px;height: 35px;background-image: url(/img/main/s_logo.png);background-repeat: no-repeat;background-position: center;background-size: 100%;position: absolute;top: 20px;right: -60px;}
    #top_logo.active{position: fixed;z-index: 9990;}

    .black #top_logo a:after{filter: brightness(0);}

    #nav_menu ul li{opacity:1;}

    #lnb .depth01{font-size:16px;display: block;}
    #lnb .depth02{margin-top:80px;position:fixed;top:0;right:-30px;opacity:0;visibility: hidden;width:100%;z-index: -1;height: 100%;transition-property: opacity,right; transition-duration: .6s, .8s;}
    #lnb .depth02.slide_depth02{right:0;opacity: 1;visibility: visible;z-index:1;}
    #lnb.open .depth01{opacity: 0;}
    #lnb .menu .depth02 li a{color: #fff;line-height: 2.6;font-size: 14px;}
    

    .menu_first_item{display: inline-block;cursor: pointer;position: relative;top:0;left: 0;color: #d0b17f;font-size: 16px;line-height: 2.8;}
    .menu_first_item:before{display: block;content: "";position: absolute;right: -5px;bottom: 14px;transform: scaleX(1);transform-origin: bottom right;color: #d0b17f;width: calc(100% + 20px);height: 1px;background-color: #d0b17f;transition: transform .3s;}
    .menu_first_item:after{display: block;content: "";width: 10px;height: 1px;background-color: #d0b17f;transform: rotate(145deg);position: absolute;bottom: 17px;left: -15px;}

}

@media (max-width: 990px){
    #topNavWrap{height: auto;padding:0 5%;}
    
    #top_logo a img{height:35px}

    #nav_menu ul{font-size: 16px;}
    #nav_menu ul li a{line-height: 2.6;}
    #topNavWrap .login{padding-right: 75px;}
}
@media (max-width: 768px){
    #menuBox{width: 100%;margin-left: 0;max-width: 100%;}
    #menuBox.active{right: 100%;}
}



/* 퀵메뉴 */
.quick_box_main .q_link {position: fixed;right: 50px;bottom:30px;width:5rem;height:5rem;display:flex;justify-content: center;align-items: center;z-index: 9990;background-color: #d0b17f;border-radius: 50%;}
.quick_box_main .q_link img{align-self: center;}
.quick_box_main .q_link.click_btn{bottom:120px;background-color: #fff;z-index: 9991; line-height: 1; font-size: 14px; font-weight: 600;}
.quick_box_main .q_link.click_btn.active p {display: none;}
.quick_box_main .q_link.click_btn img{transform: rotate(45deg);transition: all .8s var(--ani); filter: invert(1); display: none; width: 18px;}
.quick_box_main .q_link.click_btn.active img{transform: rotate(0deg); display: block;}
.quick_box_main .quick {position: fixed;z-index: 9993;bottom: 210px;right: 50px;width: 5rem;}
.quick_box_main .quick li{margin-top:10px;}
.quick_box_main .quick li a{display: flex;padding:13px 20px;border-radius: 50px;height: 5rem; text-align: center; line-height: 1; font-size: 14px; font-weight: 600; background-color: #fff;justify-content: center;align-items: center;}
.quick_box_main .quick li img{margin-left: 10px;width: 30px;}
.quick_box_main .quick li span{width: 70px;}
.quick_box_main .quick li {transform: translateX(160px);opacity: 0;transition: all .8s var(--ani);}
.quick_box_main .quick.active li{transform: translateX(0);opacity: 1;}

.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;}

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

}