@charset "utf-8";

/*pc사이드메뉴*/
#pc_sub_menu_list{width:100%;position:absolute;bottom:0;left:0;z-index:11;display: flex;flex-wrap: wrap;justify-content: center;}
#pc_sub_menu_list li{min-width:21rem;height:6rem;position:relative}
#pc_sub_menu_list li a{transition:all .3s}
#pc_sub_menu_list li:before{content:'';width:0;height:2px;left:50%;background:#0858a3;position:absolute;top:0;transform:translateX(-50%);transition:all .3s}
#pc_sub_menu_list li.on:before, #pc_sub_menu_list li:hover:before{width:100%}
#pc_sub_menu_list li.on a{background:#fff;color:#0858a3}
#pc_sub_menu_list li:hover a{background:rgba(255,255,255,.8);color:#0858a3}
#pc_sub_menu_list li a{display:block;width:100%;height:100%;font-weight:500;font-size:1.9rem;color:#fff;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;}


/*모바일사이드메뉴*/
#side_menu_area{max-width:140rem;width:100%;height:8rem;border-radius:.5rem;background:#fff;box-shadow:0 0 1rem rgba(0,0,0,.1);position:absolute;bottom:0;left:0;z-index:15;display:none;flex-wrap:wrap}
#side_menu_area .home{width:8rem;height:8rem;border-radius:.5rem 0 0 .5rem;background:#0858a3;position:relative}
#side_menu_area .home img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#side_menu_area .side_menu{width:30rem;height:100%;position:relative;}
#side_menu_area .sub_menu_tit{display:block;width:100%;height:100%;padding:0 2rem;border-right:1px solid #ddd;border-bottom:1px solid #ddd;font-size:1.7rem;color:#333;line-height:8rem;position:relative;word-break:break-all}
#side_menu_area .sub_menu_tit img{position:absolute;right:2rem;top:50%;transform:translate(-50%,-50%);transition:all .3s}
#side_menu_area .sub_menu_tit.on{background:#f7f7f7;color:#0858a3}
#side_menu_area .sub_menu_tit.on img{top:calc(50% - 3px);transform:rotate(-180deg)}

#side_menu_area .sub_menu_list{display:none;width:calc(100% + 1px);padding:2rem 0;border:1px solid #ddd;border-top:0;border-radius:5px;box-shadow:0 4px 1rem -4px rgba(0,0,0,.3);background:#fff;position:absolute;left:-1px}
#side_menu_area .sub_menu_list li{padding:1rem 3rem 1rem;border-bottom:1px dashed #ddd;background:#fff;font-size:1.6rem;position:relative;transition:all .3s}
#side_menu_area .sub_menu_list li:before{content:'';width:3px;height:3px;border-radius:3px;background:#0858a3;position:absolute;left:2rem;top:50%;transform:translateY(-50%);}
#side_menu_area .sub_menu_list li:last-child{border-bottom:0}
#side_menu_area .sub_menu_list li a{display:block;width:100%;height:100%;color:#333}
#side_menu_area .sub_menu_list li.on{border-color:#0858a3;background:#0858a3}
#side_menu_area .sub_menu_list li:hover{border-color:#1271cb;background:#1271cb}
#side_menu_area .sub_menu_list li:hover:before, #side_menu_area .sub_menu_list li.on:before{background:#fff}
#side_menu_area .sub_menu_list li:hover a, #side_menu_area .sub_menu_list li.on a{color:#fff}

#side_menu_area .page_state_list{position:absolute;right:4rem;top:50%;transform:translateY(-50%)}
#side_menu_area .page_state_list li{display:inline-block;font-size:1.5rem;color:#888;position:relative}
#side_menu_area .page_state_list li + li{padding-left:2rem}
#side_menu_area .page_state_list li + li:before{content:url(/hd/side_menu/arr_side.png);position:absolute;left:.4rem;top:50%;transform:translateY(-50%)}
#side_menu_area .page_state_list li:last-child{color:#0858a3}

@media(max-width:1280px){
#side_menu_area, #side_menu_area .home{border-radius:0}
}
@media(max-width:1024px){
#side_menu_area .page_state_list{display:none}

#pc_sub_menu_list li{min-width:auto}
#pc_sub_menu_list li a{padding:0 2rem}
}
@media(max-width:767px){
#pc_sub_menu_list{display:none}
#side_menu_area{display:flex}
	
#side_menu_area{height:6rem}
#side_menu_area .home{width:6rem;height:6rem}
#side_menu_area .home img{width:35%}
#side_menu_area .side_menu{width:calc(50% - 3rem)}
#side_menu_area .sub_menu_tit{padding:0 2.8rem 0 1.5rem;font-size:1.6rem;line-height:6rem}
#side_menu_area .sub_menu_tit img{width:1rem;height:auto;right:.5rem}
}
@media(max-width:480px){
#side_menu_area .sub_menu_tit{line-height:2rem;display:flex;align-items:center}  
#side_menu_area .sub_menu_tit.on{border-bottom:1px dotted #ddd;}
#side_menu_area .sub_menu_list{width:calc(200% + 1px);background:#f7f7f7;}
#side_menu_area .sub_menu_list li{background:#f7f7f7}
#side_menu_area .side_s_menu .sub_menu_list{width:calc(200% + 1px);left:calc(-100% - 1px)}

}