@charset "utf-8";

#topNavWrap{position:relative;height:98px;font-weight:300}
#topNavWrap .inner{position:relative;max-width:1200px;margin:0 auto}

#topNavWrap .top_logo{padding-top:20px}

/* 대분류  */
#topNav{position:absolute;top:0;right:0;z-index:1;height:94px}
#topNav:after{display:block;content:"";visibility:hidden;clear:both}
#topNav > li{float:left;position:relative;padding:0 25px;line-height:40px}
#topNav > li > a{display:block;font-size:16px;line-height:97px;font-weight:400;color:#222;letter-spacing:-.3px;transition:all .2s}
#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:130%;left:90%;min-height:165px;padding-top:10px;-ms-transform:translateX(-50%);transform:translateX(-50%)}
.top_nav_s li a{display:block;margin:0px;font-size:14px;line-height:26px;text-align: left;color:#222;transition:color .2s}
.top_nav_s li a:hover{color:#999}

/* 전체메뉴배경 */
.top_nav_bg{position:fixed;width:100%;display:none;top:98px;height:170px;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);}

/* 마우스온 */
#topNavWrap.on #menuLine{background-color:#f5af2b}
#topNavWrap.on{border-bottom:solid 1px #e1e1e1;background-color:#fff}
#topNavWrap.on #topNav > li > a{color:#222}

/* 1023px 이하 탑메뉴 스타일 ***********************/

/*메인 탑메뉴 스타일*/
#allMenu{position:fixed;right:-100%;top: 0;width:320px;height:100%;background: #281d19;}
#allMenu, #allMenu *, #allMenu:before, #allMenu:after{box-sizing:border-box}
#allMenu > ul{margin-top: 98px;}
#allMenu li.bmenu:hover{background-color:rgb(22, 22, 25)}
#allMenu li.bmenu > a{display:block;position:relative;width:100%;height: 52px;padding-left:30px;font-size: 17px;line-height: 52px;color:#b1b1b1;letter-spacing:-0.3px;transition:all .2s;}
#allMenu li.bmenu > a:after{display:block;position:absolute;top:0;right:28px;content:"\f105";font-size:20px;font-weight:normal;color:#666666;font-family:FontAwesome;transform:rotate(90deg)}
#allMenu li.bmenu > a.active:after{transform:rotate(-90deg)}
#allMenu li.bmenu > ul.smenu{display:none;padding-bottom:10px}
#allMenu li.bmenu > ul.smenu li a{display:block;width:100%;padding-left:30px;font-size: 15px;line-height: 31px;color:#9d9d9d;transition:all .2s;}
#allMenu li.bmenu > ul.smenu li a:hover{color:#fff}

/* 메뉴 전체보기 버튼 */
#allmn_btn_wrap{display:none;position:absolute;top: 12px;right: 10px;z-index:1002;}
#allmn_btn_wrap, #allmn_btn_wrap *{box-sizing:border-box}
#allmn_btn{display:block;position:relative;width:73px;height:70px;cursor:pointer;transition:all .1s}
#allmn_btn span, #allmn_btn span:before, #allmn_btn span:after{position:absolute;z-index:20;width: 4px;height: 4px}
#allmn_btn span{position:absolute;top:48%;left:34px;width: 4px;-webkit-transition:all ease .1s;transition:all ease .1s;background:#222;}
#allmn_btn span:before, #allmn_btn span:after{content:'';right:0;z-index:-1;-webkit-transition:all ease .1s;transition:all ease .1s}
#allmn_btn span:before{top:-10px;background:#222}
#allmn_btn span:after{top:10px;background:#222}
#allmn_btn.active{z-index:200}
#allmn_btn.active span{background-color:transparent;background: #222;}
#allmn_btn.active span:before{width:2px;height:16px;border-radius:0;-webkit-transform:translateY(3px) translateX(0) rotate(45deg);-ms-transform:translateY(3px) translateX(0) rotate(45deg);transform:translateY(3px) translateX(0) rotate(45deg);background:#fff}
#allmn_btn.active span:after{width:2px;height:16px;border-radius:0;-webkit-transform:translateY(-17px) translateX(0) rotate(-45deg);-ms-transform:translateY(-17px) translateX(0) rotate(-45deg);transform:translateY(-17px) translateX(0) rotate(-45deg);background:#fff}

@media (max-width:1200px){
#topNavWrap .inner{padding:0 20px}
}
@media (max-width:1023px){
#allmn_btn_wrap{display:block}
#topNav{display:none}
}

@media (max-width:540px){
#topNavWrap{height:auto}
#topNavWrap .inner{padding:0 10px}
#allmn_btn_wrap{right:0;top: 5px;}
#topNavWrap .top_logo img{width:80%}
}