@charset "utf-8";

.pc_side_menu_area{width:100%;overflow:hidden;}
.pc_side_menu_area .tit_box{width:100%;height:15rem;border-radius:0 2rem 0 0;background:url(/hd/side_menu/tit_bg.jpg) no-repeat center/cover;text-align:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;}
.pc_side_menu_area .tit_box .tit{width:100%;font-size:2.5rem;font-weight:700;letter-spacing:-.5px;color:#fff;}
.pc_side_menu_area .sub_menu_list{width:100%;background:#fff;position:relative;z-index:1} 
.pc_side_menu_area .sub_menu_list li{width:100%;height:6rem;position:relative}
.pc_side_menu_area .sub_menu_list li a{width:100%;height:100%;padding:0 3.5rem;font-size:1.6rem;font-weight:500;color:#333;position:relative;display:flex;align-items:center}

.pc_side_menu_area .sub_menu_list li a:after{content:'';width:100%;height:1px;background:#ddd;position:absolute;bottom:0;left:0}
.pc_side_menu_area .sub_menu_list li a:before{content:url(/hd/side_menu/plus.png);position:absolute;top:50%;right:3.5rem;transform:translateY(-50%);transition:all .3s}

.pc_side_menu_area .sub_menu_list li a.on{background:#fef6e8;color:var(--pt-color)}
.pc_side_menu_area .sub_menu_list li a.on:before{content:'';width:12px;height:2px;background:url(/hd/side_menu/minus.png) no-repeat center/cover;}

.pc_side_menu_area .sub_menu_list li:hover a{color:var(--pt-color)}
.pc_side_menu_area .sub_menu_list li:hover a:before{transform:translateY(-50%) rotate(180deg)}
.pc_side_menu_area .sub_menu_list li:hover a.on:before{transform:translateY(-50%) rotate(0)}


/* 사이드 메뉴 mobile ============================================ */
.side_menu_mobile{display:none}
.side_menu_mobile .tit_box{width:100%;padding:7rem 2rem 9.5rem;text-align:center;background:url(/hd/side_menu/bnr_img.jpg) no-repeat center/cover}
.side_menu_mobile .tit_box .tit{font-size:4rem;font-weight:700;color:#222}

.side_menu_mobile .page_root{margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}
.side_menu_mobile .page_root li{color:#666;position:relative}
.side_menu_mobile .page_root li.home{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.side_menu_mobile .page_root li:before{content:url(/hd/sub_banner/arr.png);position:absolute;right:-1.3rem;top:50%;transform:translateY(-50%)}
.side_menu_mobile .page_root li:last-child{color:var(--pt-color)}
.side_menu_mobile .page_root li:last-child:before{display:none}

.side_menu_mobile .drop_header{max-width:80rem;width:100%;margin:-2.5rem auto 0;position:relative;display:flex}
.side_menu_mobile .home{width:5rem;height:5rem;background:var(--pt-color);position:relative}
.side_menu_mobile .home a{display:block}
.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 #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;border-top: 1px solid #ddd;border-bottom:1px solid #ddd;font-size:1.6rem;line-height:5.2rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.side_menu_mobile ul.dep1>li.active > a{border-bottom:0}

.side_menu_mobile ul ul.dep2{padding:2rem}
.side_menu_mobile ul.dep2>li.on{background: #fef6e8}
.side_menu_mobile ul.dep2>li.on a{background:#fef6e8;color:var(--pt-color)}
.side_menu_mobile ul.dep2>li:last-child{border-bottom:0}
/* 두번째 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:calc(5rem + 1px);left:-1px;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-bottom:1px dashed #ddd;transition:.2s}
.side_menu_mobile ul.dep2>li>a{display:block;height:4.8rem;padding:0 1.2rem;background:#fff;font-size:1.6rem;line-height:5rem;white-space:nowrap}
.side_menu_mobile ul.dep2>.sub_menu_on>a{background: #fef6e8}
.side_menu_mobile ul.dep2>li.sub_menu_on>a{color:var(--pt-color)}


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

@media(max-width:1024px) {
.side_menu_mobile .tit_box{padding:5rem 2rem 7.5rem}
.side_menu_mobile .tit_box .tit{font-size:3.7rem}
}

@media(max-width:767px) {
.side_menu_mobile .tit_box .tit{font-size:3.4rem}
}

@media(max-width:480px) {
.side_menu_mobile .tit_box .tit{font-size:3.1rem}
.side_menu_mobile ul.dep2{width:calc(200% + 2px)}
.side_menu_mobile ul.dep1 ul.dep2{width:calc(200% + 3px)}
}

@media(max-width:320px) {
.side_menu_mobile .tit_box .tit{font-size:2.8rem}
}