@charset "utf-8";

#topNavWrap{opacity:0;position:fixed;top:-120px;z-index:100;min-width:1280px;width:100%;height:100px;padding:0 120px;border-bottom:1px solid #e1e1e1;background-color:#fff}
#topNavWrap.sub{position:relative;top:0;opacity:1}
@media (max-width:1400px){
#topNavWrap{padding:0 30px}	
}
/* 로고 */
#top_logo{float:left;position:relative;z-index:101;line-height:100px}

/* 대분류  */
#topNav{position:absolute;left:50%;z-index:1;transform:translateX(-50%);height:100px}
#topNav:after{display:block;content:"";visibility:hidden;clear:both}
#topNav > li{float:left;position:relative;padding:0 35px;line-height:100px}
#topNav > li > a{display:block;font-size:16px;font-weight:600;color:#222;transition:all .2s;font-family:'Philosopher', 'AppleSDGothicNeo'}
#menuLine{position:absolute;bottom:-1px;left:50%;width:0;height:1px;background-color:transparent;transition:all .4s cubic-bezier(.35,.97,.22,1)}
#topNavWrap.on #menuLine{background-color:#111}

/* 소분류 */
.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:15px;line-height:28px;text-align:center;color:#111;transition:color .2s}
.top_nav_s li a:hover{color:#869883}

/* sns */
#topNavWrap .top_tip{float:right;position:relative;z-index:101}
#topNavWrap .top_tip li{display:inline-block;line-height:100px}
#topNavWrap .top_tip li+li{margin-left:20px}
#topNavWrap .top_tip li a{display:block;position:relative;font-size:14px;font-weight:700;color:#111;-webkit-transition:all .2s;transition:all .2s;font-family:'Philosopher'}
#topNavWrap .top_tip li a:hover{color:#869883}
#topNavWrap .top_tip li a:after{display:block;content:"";position:absolute;top:30px;left:50%;-webkit-transform:scaleY(7);transform:scaleY(7);width:3px;height:3px;border-radius:3px;background:#869883;opacity:0;margin-left:-1px;-webkit-transition:all .12s;transition:all .12s}
#topNavWrap .top_tip li a:hover:after{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}

/* 전체메뉴배경 */
.top_nav_bg{position:fixed;width:100%;display:none;top:100px;height:150px;background:#fff;box-shadow:5px 5px 15px rgba(0,0,0,.05)}
.top_nav_bg.sub{position:absolute}

/* 메뉴버튼 */
#navBtn{position:absolute;top:35px;right:120px;z-index:101;width:28px;height:28px;cursor:pointer}
#navBtn span{position:absolute;top:50%;left:0;width:0;background-color:#111}
#navBtn span, #navBtn:before, #navBtn:after{display:block;position:absolute;z-index:20;width:0;height:1px;-webkit-transition:all .3s cubic-bezier(.35,.97,.22,1), width .6s .6s;transition:all .3s cubic-bezier(.35,.97,.22,1), width .6s .6s}
#navBtn:before, #navBtn:after{content:'';left:0;top:5px;z-index:-1;background-color:#111}
#navBtn:after{top:23px}
#navBtn.active span{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
#navBtn.active:before{top:50%;-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg)}
#navBtn.active:after{top:50%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
#navBtn.on span{width:100%}
#navBtn.on:before, #navBtn.on:after{width:100%}

/* 메뉴오픈 */
.hd_overlay{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0;z-index:99;width:100%;height:100%;background-color:rgba(0,0,0,.3)}
#navWrap{position:fixed;top:-480px;left:0;z-index:100;min-width:1280px;width:100%;height:400px;background-color:#fff}
#navWrap .inner{width:1280px;margin:0 auto;padding:140px 0 0}
#navWrap .inner:after{display:block;content:"";visibility:hidden;clear:both}
#navWrap .nav_mn{float:left;width:50%;padding-top:30px}
#navWrap .nav_mn li{float:left;width:33%;margin-bottom:10px}
#navWrap .nav_mn li a{position:relative;display:block;font-size:16px;font-weight:600;line-height:36px;color:#3c3f3a;-webkit-transition:all .2s cubic-bezier(1, 0.68, 0.16, 0.9);transition:all .2s cubic-bezier(1, 0.68, 0.16, 0.9)}
#navWrap .nav_mn li a:before{content:"";position:absolute;left:0;bottom:0;width:90%;height:1px;background-color:#3c3f3a;-webkit-transform:scale3d(0, 5, 1);-ms-transform:scale3d(0, 5, 1);transform:scale3d(0, 5, 1);	-webkit-transform-origin:0% 50%;transform-origin:0% 50%;-webkit-transition:transform .3s cubic-bezier(1, 0.68, 0.16, 0.9);transition:transform .3s cubic-bezier(1, 0.68, 0.16, 0.9)}
#navWrap .nav_mn li a:hover:before{-webkit-transform:scale3d(1, 1, 1);-ms-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}