@charset "utf-8";

#way_hd{width:100%;height:10rem;background:#000;position:fixed;top:0;lett:0;z-index:1000;transition:all .5s}
#way_hd, #top_menu_area, .top_menu_warp{transition:all .3s}
.top_menu_warp{max-width:150rem;width:calc(100% - 4rem);height:10rem;margin:0 auto;position:relative} 
.top_menu_warp .logo{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:all .3s}

#way_top_nav{height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;}
#way_top_nav>li{height:100%;padding:0 2.5rem;text-align:center;color:#fff;position:relative}
#way_top_nav>li>a{display:block;height:100%;font-size:1.8rem;font-weight:700;color:#fff;white-space: nowrap;transition:all .3s;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-family:'Play'}
#way_top_nav>li>a span{position:relative}
#way_top_nav>li>a span:before, #way_top_nav>li>a span:after{content:'';width:0;height:2px;background:#fff;position:absolute;transition:all .3s}
#way_top_nav>li>a span:before{top:-3px;right:0}
#way_top_nav>li>a span:after{bottom:-5px;left:0}

#way_top_nav>li>a.active span:before,
#way_top_nav>li>a.active span:after{width:100%}

#way_top_nav>li>a.hov span:before,
#way_top_nav>li>a.hov span:after{width:100%}


@keyframes line{from{width:0}to{width:2rem}}
#way_top_nav .site_map_li a{padding-top:1.3rem}

#way_top_nav ul{display:none;width:20rem;padding:2rem 1rem;border-radius:1rem;background:#fff;box-shadow:0 0 1rem rgba(0,0,0,.1);position:absolute;top:10rem;left:50%;transform:translateX(-50%)}
#way_top_nav ul li{margin-left:0;font-size:1.6rem;text-align:center;float:none}
#way_top_nav ul li:last-child{border-bottom:none}
#way_top_nav ul li a{display:block;width:100%;height:100%;padding:1.3rem 0;border-bottom:1px dashed #ddd;font-weight:500;color:#666}
#way_top_nav ul li a span{display:inline-block;position: relative;color:#aaa;}
#way_top_nav ul li a span:before{position: absolute; content: attr(data-label); top: 0; left: 0; width: 0; height: 100%; color: var(--pt-color); white-space: nowrap; transition: all 0.2s ease-in-out; overflow: hidden; z-index:9;}
#way_top_nav ul li a.on span{color:var(--pt-color)}
#way_top_nav ul li a.on span:before{display:none}
#way_top_nav ul li:last-child a{border-bottom:0}

#way_top_nav ul li a:hover span:before{width:100%}


/*탑메뉴 스크롤시*/
#way_hd.on, #way_hd.sub{box-shadow:0 1rem 1rem rgba(0,0,0,.1)}



/* pc,mobile 메뉴 전체보기 버튼 */
#menu_btn{width:2.5rem;height:2.5rem;position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:100;transition:all .3s}
#menu_btn.pc_active, #menu_btn.m_active{background:none;z-index:9999}
.menu_icon{width:100%;height:100%;position:relative;cursor:pointer}
.menu_icon span.lines, .menu_icon span.lines::before, .menu_icon span.lines::after{width:100%;height:2px;background:#fff;position:absolute;top:50%;right:0;transition:.3s}
.menu_icon span.lines::before{content:'';top:-8px}
.menu_icon span.lines::after{content:'';top:8px}

.menu_icon.active .lines{background:transparent !important}
.menu_icon.active .lines::before{width:2.2rem;background:#333;top:0;right:0.3rem;transform:rotate(45deg)}
.menu_icon.active .lines::after{width:2.2rem;background:#333;top:0;right:0.3rem;transform:rotate(-45deg)}

/* mobile 메뉴 전체보기 버튼 */
.m_menu_icon{display:none}

/*탑메뉴 버튼 - rem 대신 px*/
.top_btn{width:40px;height:28px;border:0;background:none;display:flex;flex-direction:column;justify-content:center;position:absolute;top:50%;right:0;transform:translateY(-50%);-webkit-appearance: none}
.top_btn .line{display:block;width:50%;height:4px;background:#fff;margin:2px auto;transition:all .3s;}
.top_btn .line:nth-child(1){margin-right:0;background:var(--pt-color)}
.top_btn .line:nth-child(2){width:100%}
.top_btn .line:nth-child(3){margin-left:0}

/* hover */
.top_btn:hover .line,
.top_btn.active .line{width:100% !important}

/* active */
.top_btn.active{z-index:9999}
.top_btn.active .line:nth-child(2){opacity: 0;}
.top_btn.active .line:nth-child(1){background:var(--pt-color);transform:translateY(8px) rotate(45deg);z-index:1;}
.top_btn.active .line:nth-child(3){background:#222;transform:translateY(-8px) rotate(-45deg)}

.top_btn.m_all_btn{display:none;width:35px}
.top_btn.m_all_btn.active .line:nth-child(1) {transform:translateY(5px) rotate(45deg);position:absolute;top:1px}


#way_hd.on .top_btn .line:nth-child(1){background:var(--pt-color)}
#way_hd.sub .top_btn .line:nth-child(1){background:var(--pt-color)}

/*언어선택*/
#way_hd .language_btn{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
#way_hd .language_btn img{margin-right:1rem}
#way_hd .language_btn a{font-size:1.6rem;font-weight:700;line-height:.7;color:rgba(255,255,255,.6);font-family:'Play'}
#way_hd .language_btn a:last-child{margin-left:1rem;position:relative}
#way_hd .language_btn a:last-child:before{content:'';width:1px;height:1rem;background:rgba(255,255,255,.3);position:absolute;left:-.5rem;top:50%;transform:translateY(-50%)}
#way_hd .language_btn a.on{color:#fff}



/*전체메뉴 클릭시*/
#pc_new_all_menu.nav_active{width:100%}
#pc_new_all_menu.nav_active:before,
#pc_new_all_menu.nav_active:after{width:100%;transition-delay:.3s}
#pc_new_all_menu.nav_active:after{transition-delay:.6s}

#pc_new_all_menu .all_menu_tit.active{opacity:1}
#pc_new_all_menu .all_menu_tit.active .tit_box{top:0}

#pc_new_all_menu .all_menu_list.active{opacity:1}
#pc_new_all_menu .all_menu_list.active .all_menu_area{left:0}


/*모바일 오픈메뉴 */
#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}
#navWrap .inner::-webkit-scrollbar{display:none}
#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.active{font-weight:600}
#navWrap .lnb .bmenu:after{content:"\f107";float:right;font-family:'fontawesome'}
#navWrap .lnb .bmenu.on:after{content:"\f106"}

#navWrap .lnb .bmenu.bmenu_a:after{display:none}

/* 소분류 */
#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.7rem;color:#777}
#navWrap .smenu li a.active{color:var(--pt-color)}



/*사이트전체검색*/
#main_sch_btn{width:5rem;height:5rem;border:0;border-radius:5rem;background:rgba(255,255,255,.2);position:absolute;top:50%;right:6rem;transform:translateY(-50%)}

#site_sch_area{width:100%;height:100%;position:fixed;top:0;left:0;z-index:-999;opacity:0;transition:all 1s}
#site_sch_area .sch_bg{width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0}
#site_sch_area #site_sch{width:100%;height:10rem;background:#fff;position:relative;top:-10rem;z-index:10;transition:top 1s;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
#site_sch_area #site_sch form{max-width:60rem;width:90%;display:flex}
#site_sch_area #site_sch #sch_stx{width:calc(100% - 5rem);height:6rem;padding:0 2rem;border:0;border-radius:0;border-bottom:2px solid #222;font-size:1.8rem;font-weight:500;color:#222}
#site_sch_area #site_sch #sch_stx::placeholder{color:#999}
#site_sch_area #site_sch #sch_submit{width:6rem;height:6rem;border:0;background:none;font-size:2rem;color:#333;} 
#site_sch_area .sch_close{width:5rem;height:5rem;border-radius:5rem;background:#fff;position:absolute;bottom:-7rem;left:50%;transform:translateX(-50%);cursor:pointer}
#site_sch_area .sch_close img{width:1.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

#site_sch_area.active{opacity:1;z-index:9999}
#site_sch_area.active #site_sch{top:0}


@media(max-width: 1280px){	
#way_hd, #top_menu_area, .top_menu_warp{height:8rem}
.top_menu_warp .logo img{max-width:14rem}

}


@media(max-width: 1024px){
.top_btn.pc_all_btn{display:none}    
.top_btn.m_all_btn{display:flex}

#way_top_nav{display:none}
.top_menu_warp .logo img{max-width:13rem}
#way_hd .language_btn{right:6rem}


}

@media(max-width: 767px){
#way_hd, #top_menu_area, .top_menu_warp, .pc_all_btn{height:7rem}
.top_menu_warp .logo img{max-width:12rem}
.menu_icon span.lines::before{top:-7px}
.menu_icon span.lines::after{top:7px}
}
@media(max-width: 480px){
.top_menu_warp{width:calc(100% - 3rem)}
.top_menu_warp .logo img{max-width:11rem}
#way_hd .language_btn{right:5.5rem}
#navWrap .inner, #navWrap .inner, #navWrap.on .inner:before{width:70%}

.top_btn.m_all_btn{width:30px}
.top_btn .line{height:3px}


}
@media(max-width: 320px){
#way_hd, #top_menu_area, .top_menu_warp, .pc_all_btn{height:6rem}

}