/*type10_r*/
@charset "utf-8";
/*========================================== Top Menu ==========================================*/
#header{width:100%;position:fixed;top:-10rem;left:0;z-index:9;transition:0.3s}
#header.load{top:0}
#header .header_inner{width:100%;height:9rem;border-bottom:1px solid rgba(255,255,255,0.2);position:relative;transition:all 0.3s}

/*헤더 hover,scroll event*/
#header.hd_scroll, #header:hover{background:rgba(0,0,0,0.8)}

/*로고 영역*/
#header .logo{position:absolute;left:4rem;top:50%;transform:translateY(-50%)}

/*탑메뉴 영역*/
#top_nav{width:80rem;height:100%;margin-left:4rem;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10}
/*depth01*/
#top_nav .depth01{display:inline-block}
#top_nav .depth01>li{float:left;position:relative}
#top_nav .depth01>li>a{display:block;height:9rem;padding:0 4rem;font-size:1.8rem;font-weight:400;line-height:9rem;color:#fff;position:relative;transition:.2s}

#top_nav .depth01>li>a::before{content:'';width:100%;height:2px;background:var(--pt-color2);position:absolute;left:0;bottom:-2px;opacity:0;transition:.2s}
#top_nav .depth01>li:hover>a::before{opacity:1}
#top_nav .depth01>li>a.active{font-weight:600;color:var(--pt-color2)}
#top_nav .depth01>li>a.hov{color:var(--pt-color2)}
/*depth02*/
#top_nav .depth02{display:none;width:100%;padding:2rem 0;text-align:center;position:absolute;top:8.9rem;left:0;z-index:9}
#top_nav .depth02.on{display:flex;justify-content:center}
#top_nav .depth02 li a{display:block;height:3rem;padding:0 2rem;font-size:1.6rem;line-height:3.5rem;color:#fff;white-space:nowrap}
#top_nav .depth02 li:hover a, #top_nav .depth02 li a.active{color:var(--pt-color2)}


/*depth02_bg*/
.depth02_bg{display:none;width:100%;height:7.2rem;border-bottom:1px solid rgba(255,255,255,0.2);background:rgba(0,0,0,0.73);position:absolute;top:9rem;left:0;z-index:8}
.depth02_bg.on{display:block}

/*allmenu버튼 영역*/
#allmenu_btn_wrap{width:2.5rem;height:100%;padding:0 4rem;background:var(--pt-color);position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:600;cursor:pointer}
#allmenu_btn{width:inherit;height:inherit;left:50%;top:50%;transform:translate(-50%,-50%);position:relative}
#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:'';top:-0.8rem}
#allmenu_btn .lines::after{content:'';top:0.8rem}
/*hover,click event*/
#allmenu_btn.active .lines{background:transparent !important}
#header:hover #allmenu_btn.active .lines::before, #allmenu_btn.active .lines::before{background:#fff;top:0;transform:rotate(45deg)}
#header:hover #allmenu_btn.active .lines::after, #allmenu_btn.active .lines::after{background:#fff;top:0;transform:rotate(-45deg)}

/*allmenu 영역*/
#allmenu{display:none;width:100%;height:100%;position:fixed;top:0;right:0;z-index:500}
#allmenu .inner{width:40rem;min-width:280px;height:100%;padding:7.5rem 0;background:var(--pt-color);overflow-y:scroll;position:fixed;top:0;right:-4rem;z-index:6;opacity:0;transition:all .1s}
#allmenu .inner::before{content:'';width:36rem;min-width:280px;height:7rem;background:var(--pt-color);position:fixed;top:0;right:-4rem;z-index:100;opacity:0;transition:all .4s}
#allmenu.on .inner, #allmenu.on .inner::before{right:0;opacity:1;transition:all .4s}
#allmenu .inner::-webkit-scrollbar{display:none} 
/*allmenu배경 영역*/
#allmenu_bg{display:none;width:100%;height:100%;background:#000;position:fixed;top:0;left:0;z-index:5;opacity:0.6}
/* 대분류 */
#allmenu .lnb .bmenu{display:block;width:100%;height:5rem;padding:0 2.5rem;border:none;background:none;font-size:1.8rem;line-height:5rem;text-align:left;color:#fff;position:relative}
#allmenu .lnb .bmenu.active{font-weight:600}
#allmenu .lnb .bmenu::after{content:"\f107";font-weight:normal;float:right;font-family:'fontawesome'}
#allmenu .lnb .bmenu.on::after{content:"\f106"}
/* 소분류 */
#allmenu .smenu{display:none;padding:1.5rem 2.5rem;background:#00000018}
#allmenu .smenu li a{display:block;padding:0.7rem 1.5rem;border-radius:0.5rem;font-size:1.7rem;color:#eee;transition:all .3s}
#allmenu .smenu li a.active{background:rgba(255,255,255,.1)}


@media(max-width: 1300px){
#header .logo{left:2rem}
#header .logo img{max-width:21rem} 
#top_nav .depth01>li>a{padding:0 3rem}   
}
@media(max-width: 1024px){
#header .header_inner{height:8rem}
#top_nav{display:none} 
#header .logo img{max-width:20rem}
#allmenu .inner, #allmenu .inner::before{width:36rem}
#allmenu .lnb .bmenu{padding:0 2.5rem}    
#allmenu .smenu li a{padding:0.5rem 1.5rem}       
}
@media(max-width: 767px){
#header .header_inner{height:7rem}    
#header .logo img{max-width:19rem}
#allmenu_btn_wrap{padding:0 3.5rem} 
}
@media(max-width: 480px){
#header .logo img{max-width:18rem}
#allmenu .inner, #allmenu .inner::before{width:70%}    
}
@media(max-width: 320px){
#header .header_inner{height:6rem}
#header .logo img{max-width:17rem} 
}