@charset "utf-8";

#side_menu_wrap{width:100%;height:7rem;margin:-7rem auto 0;background:rgba(8,13,26,.6);box-shadow:0 0 1rem rgba(0,0,0,.1);position:relative;z-index:2}
#side_menu_wrap .side_inner{max-width:150rem;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between}
.side_menu_mobile{max-width:64.5rem;width:100%;height:100%}
.side_menu_mobile .drop_header{position:relative;display:flex}
.side_menu_mobile .home{width:7rem;height:7rem;background:var(--pt-color)}
.side_menu_mobile .home a{display:block;width:100%;height:100%;position:relative}
.side_menu_mobile .home img{width:2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* 첫번째 depth */
.side_menu_mobile ul.dep1{width:calc((100% - 5rem) / 2);border-right:1px solid rgba(255,255,255,.2)}
.side_menu_mobile ul.dep1>li{height:100%;position:relative}
.side_menu_mobile ul.dep1>li::after{content:'';width:0.8rem;height:0.8rem;border-left:2px solid #666;border-bottom:2px solid #666;position:absolute;right:2rem;top:50%;transform:translateY(-50%) rotate(-45deg);transition:all 0.2s}
.side_menu_mobile ul.dep1>li.active::after{transform:rotate(135deg)}
.side_menu_mobile ul.dep1>li>a{display:block;width:100%;height:100%;padding:0 4rem 0 3rem;font-size:1.7rem;font-weight:500;line-height:normal;color:#fff;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;display:flex;align-items:center}
.side_menu_mobile ul.sub_menu_list_m.dep1>li>a{color:#fff}

/* 두번째 depth */
.side_menu_mobile ul.dep2{display:none;width:calc(100% + 2px);border:1px solid #ddd;border-top:none;border-radius:0 0 1rem 1rem;background:#fff;overflow:hidden;position:absolute;top:7rem;z-index:99}
.side_menu_mobile ul.sub_menu_list_m.dep2{left:auto;right:-1px}
.side_menu_mobile ul.dep2>li{width:100%;margin-right:-1px;border-top:1px solid #ddd;transition:.2s}
.side_menu_mobile ul.dep2>li>a{display:block;padding:1.5rem 3rem;font-size:1.6rem}
.side_menu_mobile ul.dep2>li.sub_menu_on>a{font-weight:600;color:var(--pt-color)}


#side_menu_wrap .page_root{margin-right:3rem;display:flex;flex-wrap:wrap;align-items:center;gap:2.2rem}
#side_menu_wrap .page_root li{font-size:1.6rem;color:rgba(255,255,255,.6);position:relative}
#side_menu_wrap .page_root li.home{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
#side_menu_wrap .page_root li:before{content:url(/hd/side_menu/arr_side.png);position:absolute;right:-1.4rem;top:50%;transform:translateY(-50%)}
#side_menu_wrap .page_root li:last-child{font-weight:600;color:#fff}
#side_menu_wrap .page_root li:last-child:before{display:none}


.side_menu_mobile ul.dep2>li.db_tit>a{padding:1.5rem 3rem 1.5rem 2rem;position:relative}
.db_tit > a::after{content: '';width: 0.6rem;height: 0.6rem;border-left: 2px solid #666;border-bottom: 2px solid #666;position: absolute;right:2rem;top: 50%;transform: translateY(-50%) rotate(-45deg);transition: all 0.2s;}
.db_tit > a.active:after{transform:rotate(135deg);}
.db_tit > a.on{color:var(--pt-color)}
.db_list{display:none;padding:1rem 2rem;background:#f7f7f7}
.db_list li{border-bottom:1px dashed #ddd}
.db_list li a{display:block;padding:1rem;font-size:1.6rem;color:#666}
.db_list li a.on{color:var(--pt-color)}
.db_list li:last-child{border-bottom:0}

@media(max-width: 1024px) {
#side_menu_wrap{width:100%;border-radius:0}	
.side_menu_mobile{max-width:100%}	
.side_menu_mobile .home{border-radius:0}
#side_menu_wrap .page_root{margin-right:0;position:absolute;right:2rem;top:-3.5rem}
}

@media(max-width: 767px){
#side_menu_wrap{height:5.5rem;margin-top:-5.5rem}
.side_menu_mobile .home{width:5.5rem;height:5.5rem}
.side_menu_mobile ul.dep1>li>a{padding:0 3rem 0 2rem}

.side_menu_mobile ul.dep2{top:5.5rem}
.side_menu_mobile ul.dep2>li>a{padding:1.5rem 2rem}




}

@media(max-width: 480px){
.side_menu_mobile ul.dep2{width:calc(200% + 2px)}	
#side_menu_wrap .page_root{display:none}


}