@charset "utf-8";

#way_hd{width:100%;height:10rem;position:fixed;z-index:100;transition:all .3s}
.top_menu_warp{max-width:140rem;width:100%;height:10rem;margin:0 auto;position:relative} 
.top_menu_warp .logo{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:all .3s}
.top_menu_warp .logo a{display:block}
.top_menu_warp .logo .logo02{display:none}

#way_top_nav{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-wrap: wrap;}
#way_top_nav>li{display:inline-block;padding:0 2.5rem;letter-spacing:-0.3px;text-align:center;color:#fff;position:relative;font-family:'Poppins','Pretendard'}
#way_top_nav>li>a{display:block;padding:2.5rem 0;font-weight:500;font-size:1.7rem;color:#fff;zoom:1;position:relative}
#way_top_nav>li>a:before{content:'';width:0;height:2px;background:#fff;position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);transition:all .3s}
#way_top_nav>li>a:hover:before{width:100%}
#way_top_nav>li>a.active:before{content:'';width:100%;height:2px;background:#fff;position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);transition:all .3s}

#way_top_nav ul{display:none;width:15rem;border:1px solid #ddd;background:#fff;position:absolute;top:7.4rem;left:50%;transform:translateX(-50%)}
#way_top_nav ul li{margin-left:0;border-bottom:#ddd;font-size:1.6rem;text-align:center;float:none}
#way_top_nav ul li:last-child{border-bottom:none}
#way_top_nav ul a{display:block;width:100%;height:100%;color:#666;transition:all .3s}
#way_top_nav ul a:hover{background:#f7f7f7;color:#000}
#way_top_nav ul>li>a{padding:1.3rem 2rem}

/*언어선택*/
#way_hd .top_menu_warp .language{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;}
#way_hd .top_menu_warp .language li{font-weight:500;font-size:1.6rem;color:rgba(255,255,255,.6);position:relative}
#way_hd .top_menu_warp .language li + li{margin-left:2rem}
#way_hd .top_menu_warp .language li + li:before{content:'';width:1px;height:1rem;background:rgba(255,255,255,.3);position:absolute;left:-1rem;top:50%;transform:translateY(-50%)}
#way_hd .top_menu_warp .language li a{color:rgba(255,255,255,.6);transition:all .3s;font-family:'Poppins'}
#way_hd .top_menu_warp .language li.on a, #way_hd .top_menu_warp .language li:hover a {color:#fff}

/*탑메뉴 스크롤시*/
#way_hd.on{width:100%;background:#fff;box-shadow:2px 2px 1px 1px rgba(0,0,0,0.03);position:fixed;top:0;left:0;z-index:100}
#way_hd.on #way_top_nav>li>a{color:#333}
#way_hd.on #way_top_nav>li>a:before{background:#333}
#way_hd.on #way_top_nav>li>a.active:before{background:#333}
#way_hd.on .top_menu_warp .logo .logo01{display:none}
#way_hd.on .top_menu_warp .logo .logo02{display:block}
#way_hd.on #allmn_btn span, #way_hd.on #allmn_btn span:before, #way_hd.on  #allmn_btn span:after{background-color:#333}
#way_hd.on .top_menu_warp .language li a{color:#888}
#way_hd.on .top_menu_warp .language li + li:before{background:#ddd}
#way_hd.on .top_menu_warp .language li.on a, #way_hd.on .top_menu_warp .language li:hover a {color:#333}

/* mobile 메뉴 전체보기 버튼 */
#allmn_btn_wrap{display:none;width:2.5rem;height:2.5rem;position:absolute;right:2rem;top:50%;transform:translateY(-50%);z-index:1002}
#allmn_btn{width:100%;height:100%;position:relative;cursor:pointer;transition:all .2s}
#allmn_btn span, #allmn_btn span:before, #allmn_btn span:after{width:100%;height:2px;background:#fff;position:absolute;left:0;top:50%;z-index:20;transition:all ease .2s}
#allmn_btn span:before{content:'';top:-0.8rem}
#allmn_btn span:after{content:'';top:0.8rem}

#allmn_btn_wrap.active{position:fixed;top:4rem;transform:translateY(none);z-index:200}
#allmn_btn.active span{background:transparent !important}
#allmn_btn.active span:before{background:#333;top:0;transform:rotate(45deg)}
#allmn_btn.active span:after{background:#333;top:0;transform:rotate(-45deg)}

/* 오픈메뉴 */
#navWrap{display:none;width:100%;height:100%;position:fixed;top:0;right:0;z-index:100}
#navWrap .inner{min-width:280px;width:36rem;height:100%;padding:7.5rem 0;background:#fff;overflow-y:scroll;position:fixed;top:0;right:-4rem;z-index:6;opacity:0;transition:all .1s}
#navWrap .inner:before{content:'';position:absolute;right:-4rem;opacity:0;transition:all .4s}
#navWrap.on .inner{right:0;opacity:1;transition:all .4s}
#navWrap.on .inner:before{min-width:280px;width:36rem;height:7rem;background:#fff;position:fixed;top:0;right:0;z-index:100;opacity:1}
#allmenu_bg{display:none;width:100%;height:100vh;background:rgba(0,0,0,.7);position:fixed;top:0;left:0;z-index:5}

/* 대분류 */
#navWrap .lnb .bmenu{display:block;width:100%;height:45px;padding:0 2.5rem;border:none;border-bottom:1px solid #ddd;background:none;font-size:1.8rem;line-height:45px;text-align:left;color:#333;position:relative}
#navWrap .lnb .bmenu:after{content:"\f107";float:right;font-family:'fontawesome'}
#navWrap .lnb .bmenu.on:after{content:"\f106"}
#navWrap .lnb .bmenu.only_menu:after{content:url(/hd/top_menu/plus.png)}

/* 소분류 */
#navWrap .smenu{display:none;padding:1.5rem 2.5rem;border-bottom:1px solid #ddd;background:#f2f3f5}
#navWrap .smenu li a{display:block;padding:0.5rem 0;font-size:1.6rem;color:#777}


@media (max-width: 1400px) {
.top_menu_warp .logo{left:2rem}
#way_hd .top_menu_warp .language{right:2rem}
}
@media (max-width: 1280px) {
#way_hd, #top_menu_area, .top_menu_warp{height:8rem}
.top_menu_warp .logo img{max-width:16rem} 
#way_top_nav>li{padding:0 1.5rem}
}
@media (max-width: 1024px) {	
.top_menu_warp .logo img{max-width:15rem}
#way_top_nav{display:none}
#way_hd .top_menu_warp .language{right:7rem}
#allmn_btn_wrap{display:block}
#navWrap .inner::-webkit-scrollbar{display:none} 
#navWrap.on .inner{overflow-y:scroll;-ms-overflow-style:none}
}
@media (max-width: 767px){
#way_hd, #top_menu_area, .top_menu_warp{height:7rem}
.top_menu_warp .logo img{max-width:14rem}
}
@media (max-width: 480px){
#navWrap .inner, #navWrap.on .inner:before{width:70%}
.top_menu_warp .logo img{max-width:13rem}
#way_hd .top_menu_warp .language{right:6rem}
}
@media (max-width: 320px) {
#way_hd, #top_menu_area, .top_menu_warp{height:6rem}
}