@charset "utf-8"; 

/********************************************************
■ SideBar : 사이드바(모바일 메뉴)
********************************************************/
/* sidebar Box */
#sidebar {/* display: none; */width: 100%;height: 100%;background: url(../../img/img-sidebar_bg.jpg) center center / cover no-repeat;position: fixed;top: 0;left: 100%;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);transition: .5s;} 
#sidebar.active {left: 0;}
#sidebar::after {content: '';display: block;width: 100%;height: 100%;background: rgba(0,0,0,.2);position: absolute;top: 0;left: 0;right: 0;bottom: 0;backdrop-filter: blur(10px);}
#sidebar .cinner {display: flex;flex-direction: column;justify-content: center;gap: 70px 0;height: 100%;}
.sidebar__wrap {display: flex;flex-direction: column;justify-content: center;gap: 50px 0;width: 100%;height: 100%;}

.sidebar__header {position: relative;z-index: 1;} 
.sidebar__header .cinner {} 
.sidebar__header-logo {display: none;} 
.sidebar__header-logo img {max-width: 100%;} 
.sidebar__btn-close {display: flex;align-items: center;width: 36px;height: 26px;margin-left: auto;position: relative;} 
.sidebar__btn-close::before, .sidebar__btn-close::after {content: '';display: block;width: 100%;height: 3px;background: #fff;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 {position: relative;z-index: 1;} 
.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 {display: flex;width: 100%;border-right: 1px solid rgba(255, 255, 255, 0.1);box-sizing: border-box;} 
.sidebar__menu_depth1 .sm-li1 {display: flex;flex-direction: column;align-items: center;gap: 40px 0;width: 20%;padding: 70px 20px 55px;border-left: 1px solid rgba(255, 255, 255, 0.1);box-sizing: border-box;} 
.sidebar__menu_depth1 .sm-li1:not(:last-child) {/* margin-bottom: 30px; */} 
.sidebar__menu_depth1 .sm-a1 {/* margin: 0 40px 0 0; */color: #fff;font-size: 1.40em;font-weight: 700;text-align: center;line-height: 1.2;} 
.sidebar__menu_depth2 .sm-ul2 {/* display: flex; *//* gap: 0 30px; */} 
.sidebar__menu_depth2 .sm-li2:not(:last-child) {margin-bottom: 20px;} 
.sidebar__menu_depth2 .sm-a2 {color: #fff;/* font-size: 1.10em; */font-weight: 500;text-align: center;} 
.sidebar__menu_depth3 .sm-li3 { padding: 3px 0; } 
.sidebar__menu_depth3 .sm-a3 { color: rgba(255,255,255,.4); font-size: .90em; padding: 5px 0; } 
.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); */text-decoration: underline;text-underline-offset: 8px;opacity: .6;} 

@media all and (max-width: 1600px ){
	/* #sidebar .inner {margin: 0 50px;} */
}
@media all and (max-width: 1399px ){
	/* #sidebar .inner {margin: 0 30px;} */
	.sidebar__menu_depth1 .sm-li1 {gap: 30px 0;}
}
@media all and (max-width: 1199px){
	/* .sidebar__header {height: 80px;background: var(--color-main);} */
	/* .sidebar__cont {height: calc(100vh - 80px);} */
	.sidebar__menu_depth1 .sm-li1 {gap: 20px 0;}
	.sidebar__menu_depth1 .sm-a1 {font-size: 1.20em;}
	.sidebar__menu_depth2 .sm-a2 {font-size: 18px;}
	
	
}
@media all and (max-width: 1024px){
	#sidebar {background: #fff;}
	#sidebar::after {display: none;}
	#sidebar .cinner {flex-direction: row;}
	.sidebar__wrap {justify-content: normal;gap: 0;}

	.sidebar__header {height: 80px;background: var(--color-main);}
	.sidebar__header .cinner {align-items: center;}
	.sidebar__header-logo {display: block;width: 300px;} 
	.sidebar__header-logo img {max-width: 85%;}
	.sidebar__btn-close {width: 30px;height: 22px;}

	.sidebar__cont {height: calc(100vh - 80px);overflow-y: auto;}
	.sidebar__menu .cinner {margin: 0;}
	
	.sidebar__menu_depth1 {/* padding: 30px 0; */}
	.sidebar__menu_depth1 .sm-ul1 {display: block;}
	.sidebar__menu_depth1 .sm-li1 {flex-direction: column;align-items: flex-start;gap: 0;width: 100%;padding: 0;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: 24px;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;width: 100%;margin: 0;padding: 20px 30px;color: #333;font-size: 20px;text-align: -webkit-auto;}
	.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 {flex-direction: column;padding: 10px 0;border-top: 1px solid #EBEBEB;box-sizing: border-box;}
	.sidebar__menu_depth2 .sm-li2:not(:last-child) {margin-bottom: 0;} 
	.sidebar__menu_depth2 .sm-a2 {display: block;padding: 10px 30px;color: #666;text-align: left;}
}
@media all and (max-width: 768px){
	.sidebar__btn-close {width: 30px;height: 22px;}
}
@media all and (max-width: 640px ){
	#sidebar .inner {margin: 0 20px;}
	.sidebar__header {height: 70px;}
	.sidebar__header-logo img {max-width: 80%;}
	.sidebar__menu_depth1 .sm-a1 {padding: 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;}
}