@charset "utf-8";

#way_hd{width:100%;height:9rem;background:#fff;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_area{height:100%}
.top_menu_warp{max-width:154rem;width:calc(100% - 4rem);height:100%;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 .logo02{display:none}

#way_top_nav{position:absolute;top:50%;right:7rem;transform:translateY(-50%)}
#way_top_nav>li{display:inline-block;padding:0 2rem;text-align:center;color:#fff;float:left;position:relative}
#way_top_nav>li>a{display:block;padding:3.5rem 0;font-size:1.7rem;font-weight:500;color:#222;transition:all .3s;font-family:'Poppins'}
#way_top_nav>li>a.active{color:var(--pt-color2)}

@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:1px solid #ddd;border-top:2px solid var(--pt-color);border-radius:0 0 1rem 1rem;background:#fff;position:absolute;top:9.3rem;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%;padding:1.3rem 0;border-bottom:1px dashed #ddd;font-weight:500;color:#666}
#way_top_nav ul li a:hover{background:#f7f7f7;color:var(--pt-color)}
#way_top_nav ul li:last-child a{border-bottom:0}

#way_top_nav .menu_list01, #way_top_nav .menu_list05{display:none !important}
#way_top_nav .menu_list02{width:30rem !important}
#way_top_nav .menu_list03{width:45rem !important}

#way_hd.on{box-shadow:0 0 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:#222;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}

/*사이트맵버튼 신규 */
.pc_sitemap_btn{width:28px;height:28px;border:0;background:none;position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:999;cursor:pointer}
.pc_sitemap_btn .square{position: absolute; display:block; width:8px;height:8px;background-color:var(--pt-color2); transition:all 0.4s ease-in-out; }
.pc_sitemap_btn .square:nth-child(1) {top: 0; left: 0; background: #222;}
.pc_sitemap_btn .square:nth-child(2) {top: 0; right: 0;}
.pc_sitemap_btn .square:nth-child(3) {bottom: 0; left: 0;}
.pc_sitemap_btn .square:nth-child(4) {bottom: 0; right: 0; background: #222;}

/*사이트맵버튼 신규 active */
.pc_sitemap_btn.active .square {width:20px;height:3px;background:#fff}
.pc_sitemap_btn.active .square:nth-child(1){top:8px;transform:rotate(45deg)}
.pc_sitemap_btn.active .square:nth-child(2){top:8px;transform:rotate(135deg)}
.pc_sitemap_btn.active .square:nth-child(3){bottom:9px;transform:rotate(-45deg)}
.pc_sitemap_btn.active .square:nth-child(4){bottom:9px;transform:rotate(-135deg)}



/*pc전체메뉴*/
#all_menu_pc{width:0;height:100%;overflow-y:auto;position:fixed;top:0;right:0;z-index:90;transition:all .3s;transition-delay:.3s}
#all_menu_pc:before{content:'';width:0;height:100%;background:var(--pt-color);position:absolute;right:0;top:0;opacity:0;transition:all .5s}
#all_menu_pc:after{content:'';width:0;height:100%;background:url(/hd/top_menu/all_bg.jpg) no-repeat center/cover;position:absolute;right:0;top:0;transition:all .5s;opacity:0;transition-delay:.2s}
#all_menu_pc .inner{width:100%;height:100%;position:relative;z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;opacity:0;transition:.3s;transition-delay:0}
#all_menu_pc .all_menu_area{max-width:150rem;width:100%;max-height:80vh;padding:0 5rem;overflow-y:auto}
#all_menu_pc .all_menu_area .nav_list{width:100%;padding:3rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
#all_menu_pc .all_menu_area .nav_list + .nav_list {border-top:1px dashed rgba(255,255,255,.6)} 
#all_menu_pc .all_menu_area .nav_list .nav_name{width:25rem;font-weight:700;font-size:3rem;line-height:120%;color:#fff;transition:all .3s}
#all_menu_pc .all_menu_area .nav_list .all_dep2_list{width:calc(100% - 28rem);position:relative;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1rem 2rem}
#all_menu_pc .all_menu_area .nav_list .all_dep2_list li{position:relative}
#all_menu_pc .all_menu_area .nav_list .all_dep2_list li + li:before{content:'';width:1px;height:1.5rem;background:rgba(255,255,255,.3);position:absolute;left:-1rem;top:50%;transform:translateY(-50%) rotate(30deg)}
#all_menu_pc .all_menu_area .nav_list .all_dep2_list li a{font-weight:500;font-size:2rem;color:#fff;transition:all .3s}
#all_menu_pc .all_menu_area .nav_list .all_dep2_list li a span{position:relative}
#all_menu_pc .all_menu_area .nav_list .all_dep2_list li a span:before{content:'';width:0;height:2px;background:#fff;position:absolute;left:50%;bottom:-1rem;transform:translateX(-50%);transition:all .3s}

/*마우스오버*/
#all_menu_pc .all_menu_area .nav_list:hover .all_dep2_list li a{color:rgba(255,255,255,.6)}
#all_menu_pc .all_menu_area .nav_list .all_dep2_list li a:hover{color:#fff}
#all_menu_pc .all_menu_area .nav_list .all_dep2_list li a:hover span:before{width:100%}

#all_menu_pc.active{width:100%;transition:all.3s}
#all_menu_pc.active:before{width:100%;opacity:1}
#all_menu_pc.active:after{width:100%;opacity:1}
#all_menu_pc.active .inner{opacity:1;transition:all .3s;transition-delay:.5s}



/*모바일 오픈메뉴 */
#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 .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)}



@media(max-width: 1280px){	
#way_hd{height:8rem}
.top_menu_warp{width:100%}
.top_menu_warp .logo{left:2rem}
.top_menu_warp .logo img{max-width:21rem}
#way_top_nav{right:7rem}
#menu_btn{right:2rem}
}


@media(max-width: 1024px){
.pc_menu_icon{display:none}    
.m_menu_icon{display:block}
#way_top_nav{display:none}
.top_menu_warp .logo img{max-width:20rem}
}

@media(max-width: 767px){
#way_hd{height:7rem}
.top_menu_warp .logo img{max-width:19rem}
.menu_icon span.lines::before{top:-7px}
.menu_icon span.lines::after{top:7px}
}
@media(max-width: 480px){
#navWrap .inner, #navWrap .inner, #navWrap.on .inner:before{width:70%}
.top_menu_warp .logo img{max-width:18rem}
}
@media(max-width: 320px){
#way_hd{height:6rem}
.top_menu_warp .logo img{max-width:17rem}
}