@charset "utf-8"; 

/********************************************************
■ SideBar : 사이드바(모바일 메뉴)
********************************************************/
/* sidebar Box */
#sidebar {max-width: 400px;width: 100%;height: 100%;background: #fff;position: fixed;top: 0;right: -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 {right: 0;}
#sidebar .inner {/* padding: 50px 60px; *//* display: flex; *//* align-items: center; *//* max-width: 1400px; */height: 100%;/* margin: 0 auto; *//* position: relative; */}
.sidebar__header {/* height: 100px; */padding: 50px 60px;background: #fff;/* border-bottom: 1px solid #EBEBEB; */box-sizing: border-box;}
.sidebar__header .inner {/* height: 100px; */} 
/* .sidebar__header-logo {display: block;max-width: 100px;width: 100%;} 
.sidebar__header-logo img {max-width: 100%;} */
.sidebar__header-logo {min-width: 116px;height: 80px;/* position: absolute; *//* top: 50px; *//* left: 50px; *//* z-index: 999; */}
.sidebar__header-logo a {display: block;height: 100%;position: relative;}
.sidebar__header-logo img {height: 100%;position: absolute;top: 0;left: 0;animation-duration: 4s;animation-iteration-count: infinite;animation-direction: alternate;animation-timing-function: ease-in-out;}
.sidebar__header-logo img.ani_in {animation-name: fadeIn;/* animation-delay: 4s; */opacity: 0;}
.sidebar__header-logo img.ani_out {animation-name: fadeOut;}
@keyframes fadeIn {
	0%, 25%,50% {opacity:0;}
	75%, 100% {opacity: 1;}
}
@keyframes fadeOut {
	0%, 25% {opacity: 1;}
	50%, 75%, 100% {opacity: 0;}
}

.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:first-child > a {border: 1px solid #747474;box-sizing: border-box;}
.sidebar__btn-close {display: flex;align-items: center;width: 35px;aspect-ratio: 1 / 1;position: absolute;top: 40px;/* bottom: 0; */right: 40px;margin: auto;}
.sidebar__btn-close::before,
.sidebar__btn-close::after {content: '';display: block;width: 100%;height: 5px;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: 85%;padding: 0 50px;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: 15px;} 
.sidebar__menu_depth1 .sm-a1 {display: block;margin: 0;/* padding: 20px 30px; *//* font-family: var(--font-Times), var(--font-Pretendard); */color: #303030;font-weight: 600;font-size: 1.50em;text-align: right;}
.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: 15px;margin-top: 15px;}
.sidebar__menu_depth2 .sm-a2 {color: #333;font-size: 17px;text-align: right;}
[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);font-weight: 600;} 

@media all and (max-width: 1500px){
}
@media all and (max-width: 1399px){
}
@media all and (max-width: 1199px){
	
}
@media all and (max-width: 1024px){
	.sidebar__header {padding: 50px 60px;}
}
@media all and (max-width: 768px){
	.sidebar__header-logo {height: 80px;}
}
@media all and (max-width: 640px ){
	.sidebar__header {padding: 30px 30px 50px;}
}
@media all and (max-width: 480px){
	#sidebar {/* width: 100%; */}
}