@charset "utf-8";

#top_nav_wrap{position:relative;margin:0 auto;width:100%;line-height:1.5;font-family:'notokr-medium'}
#main_logo{position:absolute;top:23px;left:150px;z-index:15}

/* 메뉴 전체보기 버튼 ----------------------------------------- */
#allmn_btn_wrap {position:absolute;top:0;right:0;z-index:1002;}
#allmn_btn_wrap, #allmn_btn_wrap * {box-sizing:border-box}
#allmn_btn{display:block;position:relative;width:100px;height:100px;cursor:pointer;transition:all .2s;background:#111f30}
#allmn_btn:before{position:absolute;top:69px;left:32px;content:'MENU';font-weight:600;font-size:13px;color:#fff;font-family:'Poppins';opacity:0}
#allmn_btn span, #allmn_btn span:before, #allmn_btn span:after {position:absolute;z-index:20;width:20px;height:2px;background-color:#fff}
#allmn_btn span {position:absolute;top:50%;left:50%;margin:-1px 0 0 -10px;-webkit-transition:all ease .2s;transition:all ease .2s;background:none}
#allmn_btn span:before, #allmn_btn span:after {content:'';right:0;z-index:-1;-webkit-transition:all ease .2s;transition:all ease .2s}
#allmn_btn span:before {top:-4px}
#allmn_btn span:after {top:4px}
#allmn_btn.active {z-index:200;background:none}
#allmn_btn.active span {background-color:transparent}
#allmn_btn.active span:before {top:-6px;-webkit-transform:translateY(6px) translateX(0) rotate(45deg);-ms-transform:translateY(6px) translateX(0) rotate(45deg);transform:translateY(6px) translateX(0) rotate(45deg)}
#allmn_btn.active span:after {top:6px;-webkit-transform:translateY(-6px) translateX(0) rotate(-45deg);-ms-transform:translateY(-6px) translateX(0) rotate(-45deg);transform:translateY(-6px) translateX(0) rotate(-45deg)}

/* 대분류  */
#main_nav{position:fixed;top:0;right:-50%;z-index:1000;width:50%;height:100%;opacity:0;background-color:rgba(0,0,0,.9);-webkit-transition:all .4s;transition:all .4s}
#top_nav:after{display:block;content:"";visibility:hidden;clear:both}
#top_nav > li{position:relative;width:200px;padding:0 20px 28px}
#top_nav > li > a{display:block;position:relative;font-size:25px;letter-spacing:-0.5px;color:#fff;transition:all .2s;font-family:'Rozha One','notokr-light';}
#top_nav > li.active > a{color:#2665aa}
#main_nav.active{right:0;opacity:1}
#main_nav > ul{margin-top:205px;padding-left:100px}

/* 소분류  */
#top_nav > li > ul{display:none;position:absolute;top:0px;right:-140px;margin-left:-69px;z-index:1002;min-width:150px;width:auto}
#top_nav > li > ul > li{float:none}
#top_nav > li > ul > li a{display:block;position:relative;padding:6px 0;font-size:16px;color:rgba(255, 255, 255, 0.71);transition:all .3s}
#top_nav > li > ul > li a:hover{padding-left:10px}
#top_nav > li > ul > li a:before{display:inline-block;position:absolute;left:10px;top:15px;width:3px;height:3px;border-radius:50%;background-color:#b1a19a;content:'';opacity:0;transition:all .3s}
#top_nav > li > ul > li a:hover:before{left:0;opacity:1}


/* 서브 */
#sub_hd_wrapper{position:relative;width:1265px;height:100px;margin:0 auto;font-family:'notokr-medium'}
#sub_hd_wrapper #top_logo{position:absolute;top:23px}
#sub_nav #top_nav{position:absolute;top:37px;right:0}
#sub_nav #top_nav > li{float:left;width:auto}
#sub_nav #top_nav > li > a{font-size:18px;color:#666}
#sub_nav #top_nav > li > a:hover{color:#333}
#sub_nav #top_nav > li > ul{top:32px;right:auto;margin-left:-19px}
#sub_nav #top_nav > li > ul > li a{padding:12px 20px;border-bottom:solid 1px #3c3c3c;font-size:14px;background-color:#212121}
#sub_nav #top_nav > li > ul > li a:hover{padding-left:20px;background-color:#333}
#sub_nav #top_nav > li > ul > li a:before{display:none}

/**/
#allmn_btn_wrap.move #allmn_btn{position:fixed;right:0;top:0;background:none;transition:all 1s}
#allmn_btn_wrap.move #allmn_btn:before{opacity:1;transition:all 1s}
#allmn_btn_wrap.move #allmn_btn span:before,#allmn_btn_wrap.move #allmn_btn span:after{background:#fff}
#allmn_btn_wrap.move #allmn_btn.active span{background:none}