@charset "utf-8";

#way_hd{width:100%;height:10rem;position:fixed;top:0;left:0;z-index:500;transition:all .3s}
#top_bg{display:none;width:100%;height:35rem;/*메뉴별 최대높이로 수정 + 높이*/border-top:1px solid #f2f2f2;background:#fff;box-shadow:0 1rem 2rem rgba(0,0,0,.2);position:fixed;top:0;left:0;z-index:0;}/*탑전체배경*/
#way_hd .top_menu_warp{max-width:150rem;width:calc(100% - 4rem);height:10rem;margin:0 auto;position:relative;top:-10rem;opacity:0;z-index:2;transition:top 1s, opacity 1s}
#way_hd .top_menu_warp.active{opacity:1;top:0}
#way_hd .top_menu_warp .logo{position:absolute;left:0;top:50%;transform:translateY(-50%)}
#way_hd .top_menu_warp .logo a{display:block}
#way_hd .top_menu_warp .logo .logo02{display:none}

/*메뉴*/
#way_hd #way_top_nav{min-width:44rem;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:flex;}
#way_hd #way_top_nav .nav_li{width:auto;height:100%;padding:0 2rem;white-space:nowrap;position:relative;transition:all .4s}
#way_hd #way_top_nav .nav_li .nav_name{display:block;min-width:7rem;width:100%;height:100%;font-weight:500;font-size:1.8rem;color:#fff;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
#way_hd #way_top_nav .nav_li .nav_name.on{color:var(--pt-color2)}
#way_hd #way_top_nav .nav_li .dep2_list{display:none;width:100%;height:25rem;/*메뉴별 최대높이로 수정*/padding:5rem 1rem;border-left:1px solid #ddd;position:absolute;left:0;transition:all .4s}

#way_hd #way_top_nav .nav_li:last-child .dep2_list{border-right:1px solid #ddd}
#way_hd #way_top_nav .nav_li .dep2_list:before{content:'';width:0;height:2px;background:#fff;text-align:center;position:absolute;top:0;left:50%;transform:translateX(-50%);transition:all .5s}
#way_hd #way_top_nav .nav_li .dep2_list .menu{font-size:1.6rem;line-height:150%;text-align:center;color:#666;position:relative;word-break:keep-all}
#way_hd #way_top_nav .nav_li .dep2_list .menu > a{display:block;width:100%;height:100%;color:#666;position:relative;transition:all .3s}
#way_hd #way_top_nav .nav_li .dep2_list .menu.on > a{color:var(--pt-color)}
#way_hd #way_top_nav .nav_li .dep2_list .menu .db_menu_name.active .arr img{transform:rotate(180deg)}
#way_hd #way_top_nav .nav_li .dep2_list .menu + .menu{margin-top:1rem}

/*allmenu버튼 영역*/
#allmenu_btn{width:2.5rem;height:2.5rem;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:600;cursor:pointer}
#allmenu_btn.all_btn_mobile{display:none}
#allmenu_btn .lines, #allmenu_btn .lines::after, #allmenu_btn .lines::before{width:100%;height:2px;background:#fff;position:absolute;left:0;top:50%;transition:.2s}
#allmenu_btn .lines::before{content:'';width:100%;height:2px;left:0;top:-0.8rem}
#allmenu_btn .lines::after{content:'';width:100%;left:auto;right:0;top:0.8rem}

/*메뉴on, 메뉴호버효과*/
#way_hd.on{background:#fff;box-shadow:0 0 1rem rgba(0,0,0,.2)}
#way_hd.on #way_top_nav .nav_li .nav_name{color:#333}
#way_hd.on .pc_sitemap_btn .square:nth-child(1), #way_hd.on .pc_sitemap_btn .square:nth-child(4),
#way_hd.on2 .pc_sitemap_btn .square:nth-child(1), #way_hd.on2 .pc_sitemap_btn .square:nth-child(4){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 #way_top_nav .nav_li .nav_name.on,
#way_hd.on2 #way_top_nav .nav_li .nav_name.on{color:var(--pt-color)}

#way_hd.on2{box-shadow:none}
#way_hd.on2:before{content:'';width:100%;height:1px;background:#ddd;position:absolute;bottom:0;left:0;z-index:2}
#way_hd.on2 #way_top_nav .nav_li{padding:0 4rem}
#way_hd.on2 #way_top_nav .nav_li.active{background:var(--pt-color)}
#way_hd.on2 #way_top_nav .nav_li.active .nav_name{color:#fff}
#way_hd.on2 #way_top_nav .nav_li.active .dep2_list{border-color:var(--pt-color);background:var(--pt-color)}
#way_hd.on2 #way_top_nav .nav_li.active .dep2_list:before{width:80%}
#way_hd.on2 #way_top_nav .nav_li.active .dep2_list .menu > a{font-weight:500;color:rgba(255,255,255,.8);position:relative;transition:all .3s}
#way_hd.on2 #way_top_nav .nav_li.active .dep2_list .menu > a:hover{color:#fff}
#way_hd.on2 #way_top_nav .nav_li.active .dep2_list .menu > a .menu_tit{display:inline-block;position:relative}
#way_hd.on2 #way_top_nav .nav_li.active .dep2_list .menu > a .menu_tit:before{content:'';width:0;height:2px;background:#fff;position:absolute;bottom:0;left:50%;transform:translateX(-50%);transition:all .3s}
#way_hd.on2 #way_top_nav .nav_li.active .dep2_list .menu > a:hover{color:#fff}
#way_hd.on2 #way_top_nav .nav_li.active .dep2_list .menu > a:hover .menu_tit:before{width:100%;}
#way_hd.on2 #way_top_nav .nav_li.active .dep2_list .menu > a .arr img{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(349deg) brightness(101%) contrast(102%);}

#way_hd.on2 #way_top_nav .nav_li .nav_name{color:#333}

#way_hd.on2 .top_menu_warp .logo .logo02{display:block}
#way_hd.on2 .top_menu_warp .logo .logo01{display:none}

#way_hd.on2 #allmenu_btn .lines, #way_hd.on2 #allmenu_btn .lines::after, #way_hd.on2 #allmenu_btn .lines::before{background:#333}

#way_hd.on #allmenu_btn .lines, #way_hd.on #allmenu_btn .lines::after, #way_hd.on #allmenu_btn .lines::before{background:#333}


/*hover,click event*/
#allmenu_btn.active{}
#allmenu_btn.active .lines{background:transparent !important}
#allmenu_btn.active .lines::before, #way_hd.on #allmenu_btn.active .lines::before{background:#fff;width:100%;top:0;transform:rotate(45deg)}
#allmenu_btn.active .lines::after, #way_hd.on #allmenu_btn.active .lines::after{background:#fff;width:100%;top:0;transform:rotate(-45deg)}

#allmenu_btn.all_btn_mobile.active .lines::before, #way_hd.on #allmenu_btn.active.all_btn_mobile .lines::before,
#allmenu_btn.all_btn_mobile.active .lines::after, #way_hd.on #allmenu_btn.active.all_btn_mobile .lines::after{background:#333}

/*사이트맵버튼 신규 */
.pc_sitemap_btn{width:2.8rem;height:2.8rem;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:.8rem;height:.8rem;background-color:var(--pt-color2); transition:all 0.4s ease-in-out; }
.pc_sitemap_btn .square:nth-child(1) {top: 0; left: 0; background: #fff;}
.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: #fff;}

/* active */
.pc_sitemap_btn.active .square {width:2rem;height:.3rem}
.pc_sitemap_btn.active .square:nth-child(1){top:.8rem;transform:rotate(45deg)}
.pc_sitemap_btn.active .square:nth-child(2){top:.8rem;transform:rotate(135deg)}
.pc_sitemap_btn.active .square:nth-child(3){bottom:.9rem;transform:rotate(-45deg)}
.pc_sitemap_btn.active .square:nth-child(4){bottom:.9rem;transform:rotate(-135deg)}
#way_hd.on .pc_sitemap_btn.active .square:nth-child(1),
.pc_sitemap_btn.active .square:nth-child(1){background:#fff}
#way_hd.on .pc_sitemap_btn.active .square:nth-child(4),
.pc_sitemap_btn.active .square:nth-child(4){background:#fff}

/*pc전체메뉴*/
#all_menu_pc{width:0;height:100%;overflow-y:auto;position:fixed;top:0;right:0;z-index:100;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:140rem;width:100%;max-height:80vh;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:3.5rem;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{width:0;height:100%;overflow:hidden;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:absolute;top:0;right:-4rem;z-index:6;opacity:0;transition:all .3s}
#navWrap .inner:before{content:'';position:absolute;right:-4rem;opacity:0;transition:all .4s}
#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}
#allmenu_bg.active{display:none}
/*대분류*/
#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.7rem;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.on{color:var(--pt-color)}

/*모바일 2단메뉴*/
#navWrap .db_menu_name{overflow:hidden}
#navWrap .db_menu_name:after {content:"\f107";float:right;font-family:'fontawesome';}
#navWrap .db_menu_name.active:after {content:"\f106"}
#navWrap .smenu .db_dep3{display:none;padding:1.5rem 1rem;background:#fff}


#way_hd.nofixed{top:-10rem}


@media(max-width:1400px){
#all_menu_pc .all_menu_area{padding:0 2rem}
}
@media(max-width:1280px){
#way_hd, #way_hd .top_menu_warp{height:9rem}	
#way_hd .top_menu_warp .logo img{width:31rem}

#way_hd #way_top_nav{left:auto;right:6rem;transform:translateY(-50%)}
#way_hd #way_top_nav .nav_li{padding:0 1.5rem}
#way_hd.on2 #way_top_nav .nav_li{padding:0 3rem}
#way_hd.on2 .top_menu_warp .logo{opacity:0}
/*pc전체메뉴*/
#all_menu_pc .all_menu_area .nav_list .nav_name{font-size:3.2rem}
#all_menu_pc .all_menu_area .nav_list .all_dep2_list li a{font-size:1.8rem}
}
@media(max-width:1024px){
#way_hd, #way_hd .top_menu_warp{height:8rem}	
#way_hd .top_menu_warp .logo img{width:30rem}
	
#way_hd #way_top_nav{display:none}
.pc_sitemap_btn{display:none}
#all_menu_pc.active{display:none}
#allmenu_btn.all_btn_mobile{display:block}

/*모바일 전체메뉴 엑티브는 1024 이하에서만*/
#navWrap.active{width:100%;}
#navWrap.active .inner{right:0;opacity:1}
#allmenu_bg.active{display:block}
}
@media(max-width:767px){
#way_hd, #way_hd .top_menu_warp{height:7rem}
#way_hd .top_menu_warp .logo img{width:25rem}
}
@media(max-width:480px){
#way_hd .top_menu_warp .logo img{width:22rem}	
#navWrap .inner, #navWrap .inner, #navWrap.on .inner:before{width:70%}
}