@charset "utf-8";

/********************************************************
■ SideBar : 사이드바(모바일 메뉴)
********************************************************/

/* sidebar Box */
#sidebar{display: none;width: 100%;height:100%;background: #fff;position: fixed;top: 0;left: 0;z-index:999999;box-shadow: 0 0 5px 5px rgba(50, 60, 70, 0.15);-webkit-box-shadow: 0 0 5px 5px rgba(50, 60, 70, 0.15);}
#sidebar .inner {display: flex;justify-content: space-between;align-items: center;max-width: 1400px;margin: 0 auto;padding: 0;}

.sidebar__header {background: var(--color-main);}
.sidebar__header .inner {height: 116px;}
.sidebar__header-logo {display: flex;width: 206px;}
.sidebar__header-logo img {max-width: 100%;}
.sidebar__btn-close {display: flex;align-items: center;width: 30px;height: 22px;position: relative;}
.sidebar__btn-close::before,
.sidebar__btn-close::after {content: '';display: block;width: 100%;height: 2px;background: #000;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
.sidebar__btn-close::before {transform: rotate(45deg);}
.sidebar__btn-close::after {transform: rotate(-45deg);}

.sidebar__cont {height: 100%;border-top: 1px solid rgba(255,255,255,.3);box-sizing: border-box;}
.sidebar__menu {height: 100%;}
.sidebar__menu_depth1 {width: 100%;margin-top: 60px;}
.sidebar__menu_depth1::-webkit-scrollbar {width: 0px;border-radius: 10px;}
.sidebar__menu_depth1::-webkit-scrollbar-thumb {background-color: #000;border-radius: 10px;}
.sidebar__menu_depth1::-webkit-scrollbar-track {background-color: unset;border-radius: 10px;}
.sidebar__menu_depth1 .sm-ul1 {display: flex;align-items: flex-start;flex-flow: row wrap;gap: 0 60px;}
.sidebar__menu_depth1 .sm-li1 {width: calc(25% - 45px);}
.sidebar__menu_depth1 .sm-a1 {display: block;padding: 10px 0;border-bottom: 1px solid #ddd;box-sizing: border-box;color: #333;font-size: 1.20em;font-weight: 600;}
.sidebar__menu_depth2 .sm-ul2 {margin-top: 15px;}
.sidebar__menu_depth2 .sm-li2 {padding: 0 10px;}
.sidebar__menu_depth2 .sm-li2:not(:last-child) {margin-bottom: 15px;}
.sidebar__menu_depth2 .sm-a2 {position: relative;padding-left: 13px;color: rgba(0, 0, 0, .8);font-weight: 500;transition: .35s;}
.sidebar__menu_depth2 .sm-a2::before{content: '';display: block;width: 3px;height: 3px;border-radius: 50%;background: rgba(0, 0, 0, .8);position: absolute;top: 0;bottom: 0;left: 0;margin: auto;}
.sidebar__menu_depth2 .sm-a2:hover::before,
.sidebar__menu_depth2 .sm-a2:focus::before {background: var(--color-main);}
.sidebar__menu_depth2 .sm-li2.active .sm-a2 {color: var(--color-main);font-weight: 600;}
.sidebar__menu_depth2 .sm-s2 {display: inline-block;padding-right: 12px;position: relative;}
/* .sidebar__menu_depth2 .sm-s2::after {content: '';display: block;width: 5px;height: 5px;border-radius: 50%;background: var(--color-main);position: absolute;top: 3px;right: 0;opacity: 0;transition: .35s;} */
/* .sidebar__menu_depth2 .sm-a2:hover .sm-s2::after,
.sidebar__menu_depth2 .sm-a2:focus .sm-s2::after, */
.sidebar__menu_depth2 .sm-ul3 {margin-top: 10px;}
/* .sidebar__menu_depth2 .sm-li2.active .sm-s2::after {opacity: 1;} */
.sidebar__menu_depth3 .sm-li3 {padding: 0 10px;}
.sidebar__menu_depth3 .sm-li3:not(:last-child) {margin-bottom: 5px;}
.sidebar__menu_depth3 .sm-a3 {padding-left: 15px;color: rgba(0, 0, 0, .6);font-size: .90em;font-weight: 500;position: relative;}
.sidebar__menu_depth3 .sm-a3::before {content: '';display: block;width: 5px;height: 5px;border-top: 1px solid #000;border-right: 1px solid #000;transform: rotate(45deg);position: absolute;top: 0;bottom: 0;left: 0;margin: auto;}
.sidebar__menu_depth3 .sm-a3:hover,
.sidebar__menu_depth3 .sm-a3:focus {text-decoration: underline;text-underline-offset: 4px;}
.sidebar__menu_depth2 .sm-a3:hover::before,
.sidebar__menu_depth2 .sm-a3:focus::before {border-top: 1px solid var(--color-main);border-right: 1px solid var(--color-main);}

[class*=sidebar__menu_depth] a {transition: .35s;}
[class*=sidebar__menu_depth] a:hover,
[class*=sidebar__menu_depth] a:focus {color: var(--color-main);}

@media all and (max-width: 1399px){
	#sidebar .inner {max-width: 100%;margin: 0 40px;}
}
@media all and (max-width: 1199px){
	.sidebar__menu_depth1 .sm-ul1 {gap: 0 30px;}
	.sidebar__menu_depth1 .sm-li1 {width: calc(25% - 23px);}
}
@media all and (max-width: 1024px){
    #sidebar {background: #fff;}
	.sidebar__header {background: var(--color-main);}
	.sidebar__header .inner {height: 80px;}
	.sidebar__header-logo img {max-width: 85%;}
	.sidebar__menu .inner {width: 100%;margin: 0 !important;}
	.sidebar__menu_depth1 {margin: 0;height: calc(100vh - 120px);overflow-y: auto;}
	.sidebar__menu_depth1 .sm-ul1 {width: 100%;}
	.sidebar__menu_depth1 .sm-li1 {width: 100%;margin: 0;border-bottom: 1px solid #e5e5e5;}
	.sidebar__menu_depth1 .sm-li1:not(:last-child) {margin-right: 0;}
	.sidebar__menu_depth1 .sm-a1 {color: #000;padding: 19px 30px;position: relative;font-size: 18px;border-bottom: 0;}
	.sidebar__menu_depth1 .sm-a1.active {color: var(--color-main);}
	.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .sm-a1::after {content: '';display: block;width: 10px;height: 10px;border-left: 2px solid #000;border-bottom: 2px solid #000;transform: rotate(-45deg);position: absolute;top: 0;bottom: 0;right: 40px;margin: auto;}
	.sidebar__menu_depth1 .sm-a1.active::after {border-color: var(--color-main);transform: rotate(135deg);}
	.sidebar__menu_depth2 {max-height: 0;overflow: hidden;transition: max-height .35s ease;}
	.sidebar__menu_depth2 .sm-ul2 {width: 100%;margin-top: 0;padding: 20px 30px;background: #f8f8f8;}
	.sidebar__menu_depth2 .sm-a2 {color: #000;font-size: 17px;}
}
@media all and (max-width: 768px ){
    #sidebar .inner {margin: 0 30px;}
	.sidebar__menu_depth3 .sm-a3 {font-size: 16px;}
}
@media all and (max-width: 640px ){
    #sidebar .inner {margin: 0 15px;}
}