@charset "utf-8";

#side_menu_wrap{position:relative;width:100%;background:#fff}
#side_menu_wrap:after{display:block;content:"";position:absolute;left:0;bottom:0;z-index:-1;width:100%;height:1px;background-color:#e1e1e1}

.side_menu{position:relative;width:100%;margin:0 auto;zoom:1}
.side_menu .sub_menu_list{overflow:hidden;padding:2rem 3rem;border-radius:5rem;margin:-3rem auto 0;background:#fff;text-align:center;position:relative;z-index:10}
.side_menu .sub_menu_list li{display:inline-block;width:18rem;margin-left:1rem;border-radius:6rem;overflow:hidden}
.side_menu .sub_menu_list li:first-child{margin-left:0}
.side_menu .sub_menu_list li a{display:block;width:100%;height:6rem;font-size:1.7rem;color:#533c2a;line-height:6rem;letter-spacing:-.2px;-webkit-transition:all .3s;position:relative;transition:all .3s}
.side_menu .sub_menu_list li.on{background:#bc3036;box-shadow:.5rem .5rem 1.5rem rgba(188,48,54,.3)}
.side_menu .sub_menu_list li.off{background:#f7f7f7;transition:all .3s}
.side_menu .sub_menu_list li.off:hover{background:#bc3036;color:#fff}
.side_menu .sub_menu_list li.off:hover a{color:#fff}
.side_menu .sub_menu_list li.on a{color:#fff}

/* 사이드 메뉴 mobile ============================================ */
.side_menu_mobile{display:none;height:100%;margin:0 auto;position:relative;}
.side_menu_mobile .drop_header{position:relative;display:flex;}
.side_menu_mobile .home{width:5rem;height:5rem;background:#bc3036;position:relative;}
.side_menu_mobile .home a{display:block;}
.side_menu_mobile .home img{width:1.7rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.side_menu_mobile ul{width:100%;}

/* 첫번째 depth */
.side_menu_mobile ul.dep1{width:calc((100% - 5rem) / 2);border-right:1px solid #ddd;border-bottom:1px solid #ddd;background:#fff;}
.side_menu_mobile ul.dep1 > li{width: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:1.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;height:5rem;padding:0 2.2rem 0 1.2rem;font-size:1.6rem;line-height:5.2rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.side_menu_mobile ul.sub_menu_list_m.dep1 > li > a{background:#f7f7f7;}

/* 두번째 depth */
.side_menu_mobile ul.dep2{width:calc(100% + 2px);border:1px solid #ddd;border-top:none;border-radius:0 0 1rem 1rem;background:#fff;overflow:hidden;position:absolute;top:5rem;left:-1px;z-index:9;display:none;}
.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;height:4.8rem;padding:0 1.2rem;font-size:1.6rem;line-height:5rem;white-space:nowrap;}
.side_menu_mobile ul.dep2 > li.sub_menu_on > a{font-weight:600;}  /* 해당페이지 메뉴 */
.side_menu_mobile ul.dep2 > li:hover a{background:#f7f7f7;}


@media (max-width: 767px) {
.side_menu_pc{display:none}
.side_menu_mobile{display:block;z-index:10}
}

@media (max-width: 480px) {
/* 두번째 depth */
/* .side_menu_mobile ul.dep2{width:calc(150% + 2px);} */
}