@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 .cinner {display: flex;justify-content: space-between;align-items: center;height: 100%;} 

.sidebar__header {height: 80px;border-bottom: 1px solid #D9D9D9;box-sizing: border-box;} 
.sidebar__header-logo {width: 360px;} 
.sidebar__btn-close {display: flex;align-items: center;width: 36px;height: 26px;position: relative;} 
.sidebar__btn-close::before, .sidebar__btn-close::after {content: '';display: block;width: 100%;height: 3px;background: #111;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: calc(100vh - 70px);overflow-y: auto;} 
.sidebar__login {display: flex;justify-content: center;width: 100%;padding: 10px 0;box-sizing: border-box;}
.sidebar__login > li {position: relative;} 
.sidebar__login > li:not(:last-child) {padding-right: 20px;margin-right: 20px;} 
.sidebar__login > li:not(:last-child)::after {content: '';display: block;width: 1px;height: 12px;background: #7E7E7E;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;} 
.sidebar__login > li > a {display: block;box-sizing: border-box;color: #7E7E7E;font-family: var(--font-Outfit);font-size: 18px;font-weight: 500;} 
.sidebar__login > li >  a:hover {color: var(--color-main);}

.sidebar__menu {height: 90%;overflow-y: auto;} 
.sidebar__menu_depth1 {width: 100%;} 
.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 {width: 100%;} 
.sidebar__menu_depth1 .sm-li1 {display: flex;flex-direction: column;align-items: flex-start;border-bottom: 1px solid #EBEBEB;box-sizing: border-box;position: relative;} 
.sidebar__menu_depth1 .sm-a1 {display: block;max-width: 90%;width: 100%;padding: 15px 30px;color: #303030;font-size: 1.10em;font-weight: 700;} 
.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow {display: block;width: 16px;height: 16px;border-top: 2px solid #303030;border-right: 2px solid #303030;transform: rotate(135deg);position: absolute;top: 26px;right: 38px;cursor: pointer;transition: transform 0.3s ease-in-out;}
.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2).active .toggle-arrow {transform: rotate(-45deg) translate(-4px, 4px);}
.sidebar__menu_depth2 {max-height: 0px;overflow: hidden;border-top: 0px solid #EBEBEB;box-sizing: border-box;transition: max-height 0.3s ease-in-out;}
.sidebar__menu_depth2.open {width: 100%;max-height: 500px;border-top-width: 1px;background: #fafafa;}
.sidebar__menu_depth2 .sm-ul2 {display: flex;flex-direction: column;gap: 0 30px;} 
.sidebar__menu_depth2 .sm-a2 {display: block;padding: 10px 30px;color: #666;font-weight: 500;} 
.sidebar__menu_depth2 .sm-s2 {display: inline-block;position: relative;}
.sidebar__menu_depth2 .sm-s2::after {content: '';display: block;width: 4px;aspect-ratio: 1 / 1;border-radius: 50%;background: var(--color-main);position: absolute;top: 4px;right: -10px;opacity: 0;transition: .35s;}
.sidebar__menu_depth2 .sm-li2.active .sm-a2::after {opacity: 1;}
.sidebar__menu_depth3 {background: #ececec;}
.sidebar__menu_depth3 .sm-li3 {padding: 10px 10px;} 
.sidebar__menu_depth3 .sm-a3 {color: #666;font-size: 18px;padding: 10px 20px;} 
.sidebar__menu_depth3 .sm-s3 {padding-left: 16px;position: relative;}
.sidebar__menu_depth3 .sm-s3::before {content: '';display: block;width: 6px;height: 6px;border-top: 1px solid #666;border-right: 1px solid #666;transform: rotate(45deg);position: absolute;top: 0;left: 0;bottom: 0;margin: auto;transition: .35s;}
.sidebar__menu_depth3 .sm-a3:hover, 
.sidebar__menu_depth3 .sm-a3:focus { color: #fff; text-decoration: underline; text-underline-offset: 4px; } 
[class*=sidebar__menu_depth] a { transition: .35s; } 
[class*=sidebar__menu_depth] a.sm-a2:hover, 
[class*=sidebar__menu_depth] a.sm-a2:focus,
.sidebar__menu_depth2 .sm-li2.active .sm-a2  {color: var(--color-main);}
[class*=sidebar__menu_depth] a.sm-a2:hover .sm-s2::after, 
[class*=sidebar__menu_depth] a.sm-a2:focus .sm-s2::after,
.sidebar__menu_depth2 .sm-li2.active .sm-s2::after  {opacity: 1;}
[class*=sidebar__menu_depth] a.sm-a3:hover, 
[class*=sidebar__menu_depth] a.sm-a3:focus,
.sidebar__menu_depth3 .sm-li3.active .sm-a3  {color: var(--color-main);text-decoration: underline;text-underline-offset: 8px;} 
[class*=sidebar__menu_depth] a.sm-a3:hover .sm-s3::before, 
[class*=sidebar__menu_depth] a.sm-a3:focus .sm-s3::before,
.sidebar__menu_depth3 .sm-li3.active .sm-s3::before {border-color: var(--color-main);}

@media all and (max-width: 1024px){
	.sidebar__menu_depth1 {overflow-y: auto;}
}
@media all and (max-width: 768px){
	.sidebar__header {height: 70px;}
	.sidebar__btn-close {width: 30px;height: 22px;}
	.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow {width: 12px;height: 12px;top: 20px;}
}
@media all and (max-width: 640px ){
	.sidebar__header-logo {width: 300px;}    
	.sidebar__btn-close {width: 24px;height: 18px;}
	.sidebar__btn-close::before, 
	.sidebar__btn-close::after {height: 2px;}
	.sidebar__cont {height: calc(100vh - 70px);}
	.sidebar__menu_depth1 .sm-a1 {padding: 15px 20px;font-size: 18px;}
	.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow {width: 12px;height: 12px;top: 19px;right: 28px;}
	.sidebar__menu_depth1 .quick-list {gap: 25px;}
}
@media all and (max-width: 480px){
	.sidebar__header-logo {width: 250px;} 
}