@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;align-items: center;max-width: 1400px;height: 100%;margin: 0 auto;position: relative;}
.sidebar__header {height: 100px;background: #fff;border-bottom: 1px solid #EBEBEB;box-sizing: border-box;}
.sidebar__header .inner {height: 100px;} 
.sidebar__header-logo {display: block;max-width: 300px;width: 100%;} 
.sidebar__header-logo img {max-width: 100%;}
.sidebar__header .lang {display: flex;gap: 0 5px;margin-left: 10px;}
.sidebar__header .lang > li > a {display: block;width: 30px;aspect-ratio: 1 / 1;border-radius: 50%;}
.sidebar__header .lang > li:nth-child(2) > a {border: 1px solid #747474;box-sizing: border-box;}
.sidebar__btn-close {display: flex;align-items: center;width: 30px;height: 22px;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;}
.sidebar__btn-close::before,
.sidebar__btn-close::after {content: '';display: block;width: 100%;height: 3px;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: calc(100vh - 100px);overflow-y: auto;}
.sidebar__cont .inner {flex-direction: column;}
.sidebar__menu {width: 100%;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 {flex-direction: column;align-items: flex-start;border-bottom: 1px solid #EBEBEB;box-sizing: border-box;position: relative;}
.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: 30px;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);}
.sidebar__menu_depth1 .sm-li1:not(:last-child) {margin-bottom: 0;} 
.sidebar__menu_depth1 .sm-a1 {display: block;margin: 0;padding: 20px 30px;color: #303030;font-size: 20px;font-weight: 600;line-height: 1.3;}
.sidebar__menu_depth1 .sm-li1:not(:has(.sidebar__menu_depth2)).active .sm-a1 {color: var(--color-main);}
.sidebar__menu_depth2 {max-height: 0px;overflow: hidden;transition: max-height 0.3s ease-in-out;}
.sidebar__menu_depth2.open {width: 100%;max-height: 500px;background: #fafafa;}
.sidebar__menu_depth2 .sm-ul2 {display: flex;flex-direction: column;gap: 0 30px;padding: 10px 0;border-top: 1px solid #EBEBEB;box-sizing: border-box;}
.sidebar__menu_depth2 .sm-a2 {display: block;padding: 10px 30px;color: #666;font-size: 18px;font-weight: 500;}
[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);} 

@media all and (max-width: 1500px){
	#sidebar .inner {margin: 0 50px;}
}
@media all and (max-width: 1399px){
	.sidebar__header-logo {max-width: 420px;}
}
@media all and (max-width: 1199px){
	#sidebar .inner {margin: 0 30px;}
	.sidebar__header {height: 80px;}
	.sidebar__cont {height: calc(100vh - 80px);}
	.sidebar__cont .inner {margin: 0 !important;}
    .sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow {top: 24px;}
    .sidebar__menu_depth2.open {width: 100%;max-height: 500px;background: #fafafa;}
}
@media all and (max-width: 1024px){
	.sidebar__header-logo {max-width: 340px;}
	.sidebar__header .header__login {margin-left: 0;}
	.sidebar__cont .btn-calc {max-width: calc(100% - 60px);margin: 10px 30px;}	
}
@media all and (max-width: 768px){
}
@media all and (max-width: 640px ){
	#sidebar .inner {margin: 0 20px;}
	.sidebar__header-logo {max-width: 250px;}
	.sidebar__btn-close {width: 26px;height: 19px;}
	.sidebar__btn-close::before,
	.sidebar__btn-close::after {height: 2px;}
	.sidebar__menu_depth1 .sm-a1 {padding: 16px 50px 16px 20px;}
	.sidebar__menu_depth2 .sm-a2 {padding: 10px 20px}
	.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow {width: 12px;height: 12px;right: 28px;}
}
@media all and (max-width: 480px){
	.sidebar__header-logo {max-width: 198px;}
}