@charset "utf-8"; 

/********************************************************
■ SideBar : 사이드바(모바일 메뉴)
********************************************************/
/* sidebar Box */
#sidebar {display: none; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); 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;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__wrap{height: 100%;}

.sidebar__header {position: relative;z-index: 1;padding:100px 0;} 
.sidebar__header .cinner {} 
.sidebar__language{display: flex; justify-content: center; align-items: center; gap: 30px;}
.sidebar__language a{font-size: 0.90em; font-weight: 500; color: #fff; padding: 3px 15px; box-sizing: border-box;}
.sidebar__language a.active{border: 4px solid #fff; border-radius: 3px; font-weight: 700;}
.sidebar__header-logo {display: none;} 
.sidebar__header-logo img {max-width: 100%;} 
.sidebar__btn-close {position: absolute; top: 30px; right: 55px; z-index: 100; display: flex;align-items: center;width: 50px;height: auto;aspect-ratio:1 / 1; background: url('/local/en/theme/BS4-Basic/img/ico-close.png') no-repeat; background-size: 100% !important;} 

/* .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 {position: relative;z-index: 1; height: calc(100% - 330px); overflow-y: auto;} 
.sidebar__cont::-webkit-scrollbar{display: none;}
.sidebar__menu {height: 100%;}
.sidebar__menu .cinner{width: 90%; height: 100%; margin: 0 auto;}
.sidebar__menu_depth1 {width: 100%; height: 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%;height: 100%;box-sizing: border-box;justify-content: space-between;} 
.sidebar__menu_depth1 .sm-li1 {display: flex;flex-direction: column;gap: 50px 0;padding:0;box-sizing: border-box;} 
.sidebar__menu_depth1 .sm-li1:not(:last-child) {/* margin-bottom: 30px; */} 
.sidebar__menu_depth1 .sm-a1 {color: #d3d5d9;font-size: 1.25em;font-weight: 700;text-align: left;line-height: 1.2;border-bottom: 1px solid #999;padding-bottom: 10px;} 
.sidebar__menu_depth1 .sm-a1:hover,
.sidebar__menu_depth1 .sm-a1:focus{color: var(--color-blue); border-bottom: 1px solid var(--color-blue);}

.sidebar__menu_depth2{height: 100%;}
.sidebar__menu_depth2 .sm-ul2 {display: flex; flex-wrap: wrap; gap: 0 40px; flex-direction: column;}
.sidebar__menu_depth2 .sm-li2{width: 100%;}
.sidebar__menu_depth2 .sm-li2:not(:last-child) {margin-bottom: 20px;} 
.sidebar__menu_depth2 .sm-a2 {display:inline-block;color: #fff;font-size: 1.00em;font-weight: 500;text-align: left;border-bottom: 1px solid #fff;line-height: 1;} 
.sidebar__menu_depth2 .sm-a2:hover, 
.sidebar__menu_depth2 .sm-a2:focus{color: var(--color-blue); border-bottom: 1px solid var(--color-blue);}

.sidebar__menu_depth3{margin-top:15px}
.sidebar__menu_depth3 .sm-li3{line-height: normal;padding: 5px 0;} 
.sidebar__menu_depth3 .sm-a3 {font-size:16px; font-weight: 600; color:#dddddde8; line-height: 1;}
.sidebar__menu_depth3 .sm-a3 span{line-height: 1;}
.sidebar__menu_depth3 .sm-a3:hover, 
.sidebar__menu_depth3 .sm-a3:focus{color:var(--color-red);} 
[class*=sidebar__menu_depth] a { transition: .35s;}
.sidebar__menu_depth1 .sm-li1.active .sm-a1{color: var(--color-blue); border-bottom: 1px solid var(--color-blue);}
.sidebar__menu_depth2 .sm-li2.active .sm-a2 {color: var(--color-blue); border-bottom: 1px solid var(--color-blue);} 
.sidebar__menu_depth3 .sm-li3.active .sm-a3 {color:#fff; background: var(--color-blue);}
.sidebar__menu_depth4 .sm-li4.active .sm-a4 {color:var(--color-blue); font-weight: 600;}
.sidebar__menu_depth4{margin:5px 0;}
.sidebar__menu_depth4 .sm-li4{padding:3px 0;}
.sidebar__menu_depth4 .sm-a4{font-size:14px; font-weight:400; color: #ddddddb5; position: relative; display: flex; align-items: center;}
.sidebar__menu_depth4 .sm-a4::before{content: '/'; font-size: 10px; padding: 0 5px;}
.sidebar__menu_depth4 .sm-a4:hover, 
.sidebar__menu_depth4 .sm-a4:focus{color: var(--color-red);} 
@media all and (min-width:1910px) and (max-width: 1920px){	
	.sidebar__menu_depth1 .sm-li1:first-child{width: 550px;}
	.sidebar__menu_depth1 .sm-li1:first-child .sidebar__menu_depth2 .sm-ul2{max-height: 180%;}
	.sidebar__menu_depth1 .sm-li1:first-child .sidebar__menu_depth2 .sm-li2{width: calc(50% - 20px);}
}
@media all and (max-width: 1909px){
	.sidebar__cont{padding-bottom: 0; height: calc(100% - 330px);}
	.sidebar__menu_depth1 .sm-ul1{gap: 100px;}
	.sidebar__menu_depth1 .sm-li1{width: 20%;}
	.sidebar__menu_depth2 .sm-ul2{flex-wrap: nowrap;}
	.sidebar__menu_depth1 .sm-li1:first-child .sidebar__menu_depth2 .sm-ul2{max-width: 100%;}
	.sidebar__menu_depth1 .sm-li1:first-child .sidebar__menu_depth2 .sm-li2{width: 100%;}
}
@media all and (max-width:1600px){
	.sidebar__menu_depth1 .sm-ul1{gap: 60px;}
	.sidebar__btn-close{right: 35px;}
}
@media all and (max-width: 1399px){
	.sidebar__menu_depth1 .sm-li1 {gap: 30px 0;}
	.sidebar__menu_depth1 .sm-a1{font-size: 1.15em;}
}
@media all and (max-width: 1199px){
	.sidebar__btn-close{width: 40px; right: 30px;}
	.sidebar__menu_depth1 .sm-ul1{gap: 40px;}
	.sidebar__menu_depth1 .sm-li1 {gap: 20px 0;}
	.sidebar__menu_depth1 .sm-a1{font-size: 1.10em;}
	.sidebar__menu_depth2 .sm-a2 {font-size: 18px;}
}
@media all and (max-width: 1100px){
	#sidebar {background: #fff;}
	#sidebar::after {display: none;}
	#sidebar .cinner {display:flex;justify-content:space-between;flex-direction: row;width:100%;height: 100%;}
	.sidebar__wrap {justify-content: normal;gap: 0;}

	.sidebar__header {height: 80px;background:url('/local/en/theme/BS4-Basic/img/img-sidebar_bg.png');background-size: cover !important;padding: 0;}
	.sidebar__header .cinner {align-items: center;}
	.sidebar__header-logo {display: block;} 
	.sidebar__header-logo img {max-width: 85%;}
	.sidebar__language{gap: 20px;}
	.sidebar__btn-close {width: 30px; top: 25px;}

	.sidebar__cont {height: calc(100vh - 80px);overflow-y: auto;padding: 30px;}
	.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;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;position: relative;border-bottom: 1px solid #ddd;}
    .sidebar__menu_depth1 .sm-a1::after{content: '';position:absolute;right:20px;top:50%;transform:translateY(-50%);width: 20px;height: 13px;background: url('/local/en/theme/BS4-Basic/img/ico-sidebar_arrow_01.png')no-repeat;background-size: cover !important;transition: transform .3s ease-in-out;}
	.sidebar__menu_depth1 .sm-li1.active .sm-a1::after{background: url('/local/en/theme/BS4-Basic/img/ico-sidebar_arrow_02.png')no-repeat;transform: rotate(-90deg);}
	.sidebar__menu_depth2 {max-height: 0px;overflow: hidden;transition: max-height 0.3s ease-in-out; width: 100%;}
    .sidebar__menu_depth2.open {width: 100%;max-height: 500px;}
	.sidebar__menu_depth2 .sm-ul2 {flex-direction: column;padding:0;box-sizing: border-box;}
	.sidebar__menu_depth2 .sm-li2:not(:last-child) {margin-bottom: 0;} 		
	.sidebar__menu_depth2 .sm-a2 {display: block;padding: 15px 30px;color: #666;text-align: left; border-top: 0; border-bottom: 0; background: #e8ebf0;}
    .sidebar__menu_depth3{margin-top: 0;background: #f9fafc;}
	.sidebar__menu_depth3 .sm-li3{padding: 10px 0;}
	.sidebar__menu_depth3 .sm-li3.active{padding:0;}
	.sidebar__menu_depth3 .sm-li3.active .sm-a3{padding: 10px 30px;}
	.sidebar__menu_depth3 .sm-li3.active .sm-ul4{padding: 10px 35px 0 35px;}
	.sidebar__menu_depth3 .sm-a3 span{line-height: 1.2;}
	.sidebar__menu_depth4{margin: 0;}
	.sidebar__menu_depth4 .sm-ul4{display: flex; flex-wrap: wrap; padding: 10px 40px; gap: 5px 15px;}
	.sidebar__menu_depth4 .sm-li4{padding:0;}	
	.sidebar__menu_depth4 .sm-a4::before{padding: 0 10px 0 5px;}

	/* 컬러 */
	.sidebar__menu_depth1 .sm-li1.active .sm-a1{color:#0053a8;border-bottom: 1px solid #0053a8;}
	/* .sidebar__menu_depth1 .sm-li1.active .sm-a1{border-bottom: 0;} */
	.sidebar__menu_depth1 .sm-a1:hover,
	.sidebar__menu_depth1 .sm-a1:focus{color:#0053a8;border-bottom: 1px solid #0053a8;}
	.sidebar__menu_depth1 .sm-li1.active .sm-a2,
	.sidebar__menu_depth2 .sm-li2.active .sm-a2{color: #0053a8;}
	.sidebar__menu_depth2 .sm-li2:nth-child(1) .sm-a2{border-top: 0 !important;}
	.sidebar__menu_depth1 .sm-li1.active .sm-a2,
	.sidebar__menu_depth2 .sm-li2.active .sm-a2{border-top:1px solid #346c87;}
	.sidebar__menu_depth2 .sm-li2.active .sm-a2{text-decoration: underline;text-underline-offset: 6px;}
	.sidebar__menu_depth2 .sm-a2:hover, 
	.sidebar__menu_depth2 .sm-a2:focus{color:#0053a8; border-bottom: 0;}
	.sidebar__menu_depth3 .sm-li3.active .sm-a3{background: #0053a8;}
	.sidebar__menu_depth4 .sm-li4.active .sm-a4{color: #0053a8;}

	/* 폰트 */
	.sidebar__menu_depth1 .sm-a1 {padding: 20px 0; font-size: 19px;}
	.sidebar__menu_depth2 .sm-a2 {padding: 15px 20px;font-size: 18px;}
	.sidebar__menu_depth3 .sm-a3{padding: 5px 30px;font-size:18px;color: #000;font-weight: 400;display: block; width: 100%;}
	.sidebar__menu_depth4 .sm-a4{font-size: 16px;color: #767676;}
	.sidebar__menu_depth4 .sm-ul4{padding: 5px 35px;}

	.sidebar__menu_depth1 .sm-li1:last-child {padding-bottom: 80px;} 
}
@media all and (max-width:440px){
	.sidebar__menu_depth1 .sm-li1:last-child .sidebar__menu_depth2.open{min-height: 570px;}
}
@media all and (max-width: 640px){
	.sidebar__header {height: 70px;}
	.sidebar__header-logo img {max-width: 80%;}
	.sidebar__language{gap: 15px;}
	.sidebar__language a{padding: 3px 20px;}
	.sidebar__btn-close{right: 20px; top: 20px;}	
	.sidebar__menu_depth1 .sm-a1::after{width: 15px;height: 10px;}	
	.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow {width: 12px;height: 12px;right: 28px;}		
	.sidebar__menu_depth4 .sm-a4::before{padding: 0 5px;}
}