@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: 1520px;height: 100%;margin: 0 auto;} 
.sidebar__header { height: 100px; } 
.sidebar__header .inner { height: 100px; } 
.sidebar__header-logo {display: flex;width: 266px;} 
.sidebar__header-logo img { max-width: 100%; } 
.sidebar__btn-close {display: flex;align-items: center;width: 40px;height: 29px;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 {height: calc(100vh - 100px);overflow-y: auto;} 
.sidebar__menu {height: 95%;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; align-items: center;} 
.sidebar__menu_depth1 .sm-li1:not(:last-child) {margin-bottom: 30px;} 
.sidebar__menu_depth1 .sm-a1 {margin: 0 40px 0 0;color: #303030;font-size: 1.40em;font-weight: 700;} 
.sidebar__menu_depth2 .sm-ul2 {display: flex;gap: 0 30px;} 
.sidebar__menu_depth2 .sm-a2 {color: #666;font-weight: 500;} 
.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-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: 1600px ){
	#sidebar .inner {margin: 0 50px;}
}
@media all and (max-width: 1399px ){
	#sidebar .inner {margin: 0 30px;}
}
@media all and (max-width: 1199px){
	.sidebar__header {height: 80px;background: var(--color-main);}
    .sidebar__header .btn-wrap {display: flex;align-items:center;gap: 30px;}
    .sidebar__header .btn-wrap .lang > li {display: inline-block;position:relative}
    .sidebar__header .btn-wrap .lang > li:not(:last-child) {margin-right: 10px;padding-right: 15px;}
    .sidebar__header .btn-wrap .lang > li:not(:last-child)::before {content: '';display: block;width: 1px;height: 15px;background: #fff;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;}
    .sidebar__header .btn-wrap .lang > li::after {content: '';display: block;width: calc(100% + 2px);height: 3px;background: #fff;opacity: 0;}
    .sidebar__header .btn-wrap .lang > li.active::after {opacity: 1;}
    .sidebar__header .btn-wrap .lang > li > a {color: #fff;font-weight: 600;opacity: .5;transition: .35s;}
    .sidebar__header .btn-wrap .lang > li.active > a {opacity: 1;}

	.sidebar__cont {height: calc(100vh - 80px);}	
	#sidebar .sidebar__menu .inner {align-items: flex-start;height: 100%;margin: 0;}
	.sidebar__btn-close {width: 40px;height: 29px;}
	.sidebar__menu_depth1 {overflow-y: auto;}
	.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) translate(-6px, 6px);}
	.sidebar__menu_depth1 .sm-li1:not(:last-child) {margin-bottom: 0;} 
	.sidebar__menu_depth1 .sm-a1 {display: block;max-width: 85%;width: 100%;margin: 0;padding: 20px 30px;font-size: 1.20em;}
	.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 {flex-direction: column;/* padding: 10px 0; *//* border-top: 1px solid #EBEBEB; *//* box-sizing: border-box; */}
	.sidebar__menu_depth2 .sm-a2 {display: block;padding: 10px 30px;}
	.sidebar__menu_depth3 {background: #ececec;}
    .sidebar__menu_depth1 .quick-list {display: flex;justify-content: center;gap: 35px;margin-top: 20px;padding: 0 30px;}
    .sidebar__menu_depth1 .quick-list > li > a {display: block;width: 40px;aspect-ratio: 1 / 1;border-radius: 50px;background: #F5F5F5;}
}
@media all and (max-width: 1024px){
	.sidebar__header-logo img {max-width: 85%;}
	.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow {top: 27px;}
}
@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 {width: 182px;}
    .sidebar__header .btn-wrap {gap: 20px;}
	.sidebar__header .btn-wrap .lang > li::after {height: 2px;}
	.sidebar__header .btn-wrap .lang > li > a {font-size: 16px;}

	.sidebar__cont {height: calc(100vh - 70px);}	
	.sidebar__menu_depth1 .sm-a1 {padding: 20px;font-size: 18px;}
	.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow {width: 12px;height: 12px;top: 27px;right: 28px;}
	.sidebar__menu_depth1 .quick-list {gap: 25px;}
}