@charset "utf-8";

#top_nav_wrap{position:absolute;left:0;right:0;top:-80px;width:100%;height:80px;line-height:1.5}
#top_logo{position:absolute;top:33px;left:80px;z-index:100}

/* GNB */
#gnb{position:absolute;top:25px;left:50%;margin-left:-294px;z-index:100}
#gnb > li{display:inline-block;position:relative;margin:0 18px;padding:15px 0}
#gnb > li > a.bmenu{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.7px;font-family: 'Raleway', sans-serif}
#gnb > li > ul{display:none;position:absolute;left:-50px;top:44px;width:146px;background-color:#333}
#gnb > li > ul > li > a{display:block;border-bottom:solid 1px #3f3f3f;font-size:13px;line-height:49px;color:#fff;text-align:center;transition:all .2s;font-family:notokr-regular}
#gnb > li > ul > li > a:hover{background-color:#3f3f3f}

/* 메뉴 버튼 */
#nav_btn_wrap{position:absolute;top:15px;right:80px;z-index:105}
#nav_btn{display:block;position:relative;width:55px;height:55px;cursor:pointer;transition:all .2s}
#nav_btn span, #nav_btn span:before, #nav_btn span:after{position:absolute;z-index:20;width:35px;height:1px}
#nav_btn span{display:block;position:absolute;top:50%;left:50%;margin-left:-10px;margin-top:-1px;background-color:transparent;-webkit-transition:all ease .3s;transition:all ease .3s}
#nav_btn span:before, #nav_btn span:after{display:block;content:'';right:0;z-index:-1;background-color:#fff;-webkit-transition:all ease .3s;transition:all ease .3s}
#nav_btn span:before{top:-5px}
#nav_btn span:after{top:5px;right:0}
#nav_btn.active{z-index:200}
#nav_btn.active span{background-color:transparent}
#nav_btn.active span:before{background-color:#fff;-webkit-transform:translateY(5px) translateX(0) rotate(45deg);-ms-transform:translateY(5px) translateX(0) rotate(45deg);transform:translateY(5px) translateX(0) rotate(45deg);-webkit-transition:all ease .5s;transition:all ease .5s}
#nav_btn.active span:after{background-color:#fff;-webkit-transform:translateY(-5px) translateX(0) rotate(-45deg);-ms-transform:translateY(-5px) translateX(0) rotate(-45deg);transform:translateY(-5px) translateX(0) rotate(-45deg);-webkit-transition:all ease .5s;transition:all ease .5s}

#nav_btn span.move:before,#nav_btn span.move:after{right:0;opacity:1}

/* 메뉴 */
#nav_wrap{display:none;position:fixed;bottom:-100%;left:0;right:0;z-index:104;width:100%;height:100%;overflow:hidden;;background-color:#463f37}

/* 대분류 */
.nav_cont{display:table;margin:0 auto;min-width:1200px}

#top_nav{display:table;padding:140px 0 200px;margin:0 auto;overflow:hidden}
#top_nav > li{position:relative;float:left;padding:0 30px;margin-bottom:12px;transition:all.3s;font-family:'Raleway', sans-serif}
#top_nav > li .bmenu:after, #top_nav > li .bmenu:before{position:absolute;bottom:0;height:1px;width:0;content:'';background-color:#ffeedc;transition:all.3s}
#top_nav > li .bmenu:before{right:50%}
#top_nav > li .bmenu:after{left:50%}
#top_nav > li.active .bmenu:after, #top_nav > li.active .bmenu:before{width:50%}
#top_nav > li.active .bmenu{color:#ffeedc}

#top_nav > li > a{display:inline-block;position:relative;font-size:32px;font-weight:300;color:#fff;letter-spacing:0;-webkit-transition:all .2s;transition:all .2s}

#nav_wrap .cs_area{width:100%;border-top:solid 1px #696969;overflow:hidden}
#nav_wrap .cs_area dl{float:left;padding-top:25px;margin-right:40px}
#nav_wrap .cs_area dl dt{padding-bottom:15px;font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.7px;font-family: 'Raleway', sans-serif}
#nav_wrap .cs_area dl dd{font-size:13.5px;line-height:28px;color:#b8b8b8;font-family:notokr-regular}
#nav_wrap .cs_area dl dd span{font-size:20px;color:#fff;font-family:notokr-bold}
#nav_wrap .cs_area .img_area{float:right}
#nav_wrap .cs_area .img_area li {float:left;width:180px;height:100px;margin:15px 0 0 10px}
#nav_wrap .cs_area .img_area li a{display:block;height:100px}
#nav_wrap .cs_area .img_area .back{width:100%;height:100px;background-color:rgba(28, 28, 28, 0.6);transition:all .3s}
#nav_wrap .cs_area .img_area li:hover .back{background-color:rgba(28, 28, 28, 0.24)}
#nav_wrap .cs_area .img_area .back h4{padding-top:40px;font-size:13.5px;color:#fff;font-weight:normal;text-align:center;font-family:notokr-medium}
/* 소분류 */
#top_nav > li > ul{width:auto;padding-top:15px;font-family:'notokr-regular'}
#top_nav > li > ul > li a{display:inline-block;position:relative;font-size:14px;font-weight:normal;line-height:2;color:#aaa;-webkit-transition:all .2s;transition:all .2s}
#top_nav > li > ul > li a:hover{color:#fff}

/* ===== 서브일때 ===== */
#top_nav_wrap.sub{top:0}



#gnb > li > ul.sub_ul2{margin-left: -1px;}
#gnb > li > ul.sub_ul3{margin-left: -1px;}
#gnb > li > ul.sub_ul4{margin-left: 2px;}
#gnb > li > ul.sub_ul5{margin-left:-2px}
#gnb > li > ul.sub_ul6{margin-left:21px}
#gnb > li > ul.sub_ul7{margin-left: 16px;}