@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: 115px; background: #fff; } 
.sidebar__header .cinner { height: 100%; position: relative; } 
.sidebar__header-logo { display: flex; align-items: center; position: relative; top: 0; left: 0; height: 100%; max-width: 200px; } 
.sidebar__btn-close { display: flex; align-items: center; width: 34px; height: 26px; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; } 
.sidebar__btn-close::before, .sidebar__btn-close::after { content: ''; display: block; width: 100%; height: 3px; background: #111; 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 { max-height: calc(100vh - 115px); height: 88%; border-top: 4px solid var(--color-main); box-sizing: border-box; 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; 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-a1 { display: block; max-width: calc(100% - 52px); width: 100%; padding: 20px; box-sizing: border-box; color: #303030; font-size: 1.30em; font-weight: 700; } 
.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 { width: 100%; } 
.sidebar__menu_depth2 .sm-li2:has(.sidebar__menu_depth3) .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: 28px; cursor: pointer; transition: transform 0.3s ease-in-out; } 
.sidebar__menu_depth2 .sm-li2:has(.sidebar__menu_depth3).active .toggle-arrow { transform: rotate(-45deg) translate(-6px, 6px); } 
.sidebar__menu_depth2 .sm-a2 { display: block; padding: 15px 30px; color: #666; font-weight: 500; } 
.sidebar__menu_depth3 { background: #ececec; } 
.sidebar__menu_depth3 .sm-a3 { display: inline-block; color: #666; font-size: 17px; padding: 12px 30px; } 
.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 ) { } 
@media all and (max-width: 1399px ) { } 
@media all and (max-width: 1199px) {.sidebar__header { height: 90px; } 
.sidebar__header-logo img { max-width: 80%; } 
.sidebar__cont { max-height: calc(100vh - 90px); } 
.sidebar__menu_depth1 { overflow-y: auto; } 
.sidebar__menu_depth1 .sm-li1:not(:last-child) { margin-bottom: 0; } 
.sidebar__menu_depth1 .sm-a1 { width: 100%; padding: 20px 30px; font-size: 1.20em; } 
.sidebar__menu_depth2 .sm-ul2 { flex-direction: column; } 
 }
@media all and (max-width: 1024px) {.sidebar__header { height: 80px; } 
.sidebar__cont { max-height: calc(100vh - 80px); } 
.sidebar__cont .cinner { margin: 0; width:100% } 
.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow { width: 14px; height: 14px; top: 23px; } 
.sidebar__menu_depth1 .sm-a1 { padding: 17px 30px; font-size: 1.11em; } 
 }
@media all and (max-width: 768px) {.sidebar__btn-close { width: 30px; height: 22px; } 
 }
@media all and (max-width: 640px ) {.sidebar__header { height: 70px; } 
.sidebar__header-logo img { max-width: 65%; } 
.sidebar__btn-close { width: 26px; height: 21px; } 
.sidebar__cont { max-height: calc(100vh - 70px); } 
.sidebar__menu_depth1 .sm-a1 { padding: 17px 20px; font-size: 18px; } 
.sidebar__menu_depth1 .sm-li1:has(.sidebar__menu_depth2) .toggle-arrow { width: 12px; height: 12px; top: 22px; right: 25px; } 
.sidebar__menu_depth2 .sm-a2 { padding: 15px 20px; font-size: 17px; } 
.sidebar__menu_depth3 .sm-a3 { padding: 12px 20px; font-size: 16px; } 
 }