/* normalize */
nav ul, nav li {margin: 0; padding: 0; list-style: none; line-height: 1;}
nav p {margin: 0; line-height: 1;}
nav a, nav a:link, nav a:visited, nav a:not(.ielts):link, nav a:not(.ielts):visited {color: #000;}
nav a.active, nav a.active:link, nav a.active:visited {color: #fff;}

/* 최상단 메뉴 */
nav > ul {display: flex; align-items: center;}
nav > ul > li {position: relative; border-top: solid 3px transparent; transition: all .2s;}
/*nav > ul > li.is_view, nav > ul >  li.top-menu > p:hover {transition: all .5s; } 서브메뉴 hover 전에 사라지는 현상 때문에 원복: 확인요 */
nav > ul > li.is_view, nav > ul > li:hover {transition: all .5s;}
nav > ul > li > p {padding: 1rem;}
nav > ul > li.active, nav > ul > li.is_view, nav > ul > li:hover, nav > ul > li.test {background-color: var(--bs-blue); border-top: solid 3px #247cff; color: #fff;}

/* logo */
li.logo img {margin: 0 1.5rem 0 1rem;height: 25px;transition: all .5s;}
li.logo:hover img {transform: scale(1.1);transition: all .5s;}
li.logo:hover {border-top: none; background-color: transparent;}

/* 서브메뉴 container */
nav > ul > li > ul {position: absolute; opacity: 0; visibility: hidden; min-width: max-content; box-shadow: 0 0 10px rgba(0,0,0,.15); background-color: #fff; color: #000; box-sizing: border-box; transition: opacity 0.1s, visibility 0.1s;}
nav > ul > li > ul::before {content: '';position: absolute;top: -3px;left: 0;width: 0;height: 3px;background-color: var(--bs-blue);transition: width 0.5s;}
/*nav > ul > li.test > ul, nav > ul > li.is_view > ul,  nav > ul > li.top-menu > p:hover + ul {opacity: 1; visibility: visible; margin-top: 0; animation: fadeIn 0.5s;}*/
nav > ul > li.test > ul, nav > ul > li.is_view > ul,  nav > ul > li:hover > ul {opacity: 1; visibility: visible; margin-top: 0; animation: fadeIn 0.2s;}
nav > ul > li:hover > ul::before, nav > ul > li.is_view > ul::before, nav > ul > li.test > ul::before {width: 100%;}
nav > ul > li.is_view > ul { z-index: 10000;}

/* menu item */
nav > ul > li > ul:not(.multi-menu) > li a {display: block; border-bottom:solid 1px var(--bs-gray-300); padding: .5rem 1rem;transition: all .2s;}
nav > ul > li > ul:not(.multi-menu) > li a:hover {background-color: var(--bs-primary-bg-subtle);transition: all .2s;}
nav > ul li.division {background-color: var(--bs-primary-bg-subtle);}
nav > ul > li li a.active {background-color: #000; color: #fff;}

/* category */
nav > ul ul p {font-size: 0.75em; font-weight: 400; color: var(--bs-gray-600); border-bottom: solid 1px var(--bs-gray-700); padding: 0 0 3px 1rem;}

/* gap */
nav span.gap {position: relative;padding: 0 1rem;}
nav span.gap::after {position: absolute; content: ""; width: 5px; height: 5px; background-color: var(--bs-gray-500); border-radius: 50%; top: calc(50% - 2px); left: calc(50% - 2px);}

/* multi-menu */
ul.multi-menu {display: grid; grid-template-columns: 1fr; grid-gap: 1rem; padding: 1rem; max-height: 90vh; overflow-y: auto;}
ul.multi-menu.grid-2 {grid-template-columns: repeat(2, 1fr);}
ul.multi-menu.grid-3 {grid-template-columns: repeat(3, 1fr);}
ul.multi-menu.grid-4 {grid-template-columns: repeat(4, 1fr);}
ul.multi-menu ul li:not(.services) {border-bottom: solid 1px var(--bs-gray-300);}
ul.multi-menu ul li.services {display: grid; --cols: 2; grid-template-columns: repeat(var(--cols), 1fr); border-bottom: solid 1px var(--bs-gray-300);}

ul.multi-menu ul li a {display: block; padding: .5rem 1rem; transition: all .2s;}
ul.multi-menu ul li a:hover {background-color: var(--bs-primary-bg-subtle); transition: all .2s;}
ul.multi-menu ul li.services a.ielts, ul.multi-menu a.ielts {color: var(--ielts-primary); background-color: var(--ielts-primary-light);}
ul.multi-menu ul li.services a.ielts:hover, ul.multi-menu ul li.services a.ielts.active, ul.multi-menu a.ielts:hover  {color: #fff; background-color: var(--ielts-primary);}
ul.multi-menu ul li.services a.academy {color: var(--academy-primary); background-color: var(--academy-primary-light);}
ul.multi-menu ul li.services a.academy:hover, ul.multi-menu ul li.services a.academy.active {color: #fff; background-color: var(--academy-primary);}
ul.multi-menu ul li.services a.toeic {color: var(--toeic-primary); background-color: var(--toeic-primary-light);}
ul.multi-menu ul li.services a.toeic:hover, ul.multi-menu ul li.services a.toeic.active {color: #fff; background-color: var(--toeic-primary);}
ul.multi-menu ul li.services a.hnd {color: var(--hnd-primary); background-color: var(--hnd-primary-light);}
ul.multi-menu ul li.services a.hnd:hover, ul.multi-menu ul li.services a.hnd.active {color: #fff; background-color: var(--hnd-primary);}

.with-btn {display: flex; justify-content: space-between;}
.with-btn a {flex: 1}
.with-btn a.add-btn {flex: 0 1 auto}

li.spread {display: flex; justify-content: space-between;}

/* user menu */
.navbar-user {margin-right: 1rem;}
.navbar-user .bi {font-size: 30px;margin-right: .5rem;}
.navbar-user img.thumbnail {width: 35px;height: 35px;font-size: 30px;border-radius: 35px;margin-right: .25rem;}
.navbar-user a {color: var(--bs-dark);font-size: .75rem;}
.navbar-user a:hover {color: var(--bs-gray-700);}
.navbar-user a:focus {outline: none;}
.navbar-user a.dropdown-item {color: #000;}

@media (max-width: 1600px) {
    ul.multi-menu.grid-3 {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 1200px) {
    ul.multi-menu.grid-3 {grid-template-columns: repeat(1, 1fr);}
    ul.multi-menu.grid-2 {grid-template-columns: repeat(1, 1fr);}
}