/****************************
 * Menu > Common
****************************/
/* clear list style */
.desktop-menu ul {list-style:none; margin:0;}
.desktop-menu ul > li {padding:0; position:relative;}
.desktop-menu ul > li > :where(a,span) {
    text-decoration:none; display:inline-block; position:relative;
    font-size:var(--vii-size-body-medium); color:var(--vii-color-primary);
}

/* hover */
.desktop-menu ul > li > :where(a,span):hover,
.desktop-menu ul > li > :where(a,span):focus,
.desktop-menu ul > li[class*="current"] > :where(a,span) {text-decoration:underline;}

/* hide unused submenus */
.desktop-menu ul.sub-menu ul.sub-menu ul.sub-menu {display:none;}

/* show/hide submenu */
.desktop-menu li:not(:hover) > ul.sub-menu {opacity:0; visibility:hidden; pointer-events:none;}

/* submenu animation (search submenuAnimationDelay to edit stagger time) */
.desktop-menu li[class*="has-child"]:hover > ul.sub-menu > li {
    animation:slide-fade-in .4s ease forwards;
    opacity:0;
}
@keyframes slide-fade-in {
    0% {transform:translate(-15px); opacity:0;}
    100% {transform:translate(0); opacity:1;}
}

/* has submenu arrow */
.desktop-menu ul > li[class*="has-child"] > :where(a,span) {position:relative; padding-right:20px;}
.desktop-menu ul > li[class*="has-child"] > :where(a,span):after {
    position:absolute; right:0; top:52.5%;
    display:inline-block; transform:translateY(-50%);
    content:"\e931"; font-family:var(--vii-font-icomoon); font-size:13px; font-weight:400;
    transition:transform .3s ease;
}
.desktop-menu li[class*="has-child"].active > :where(a,span):after,
.desktop-menu li[class*="has-child"]:hover > :where(a,span):after {transform:translateY(-50%) rotate(180deg);}

/* a11y */
.desktop-menu ul.menu > li > :where(a,span):focus-visible {
    outline:2px solid var(--vii-color-primary); border-radius:3px; text-decoration:none;
    background:transparent; color:var(--vii-color-primary);
    transition:none;
}

/* menu position */
body.is-left-header .vii-menu-row.main {padding-left:var(--vii-gap-side);}
body.is-center-header .vii-menu-row.main:before {content:''; display:block; min-width:120px;}
body.is-center-header .vii-menu-row.main .vii-menu-col.right {min-width:120px; justify-content:end;}


/* column */
.vii-menu-col.left { gap:8px;}
.vii-menu-col.left .vii-menu-col__inner {padding:4px 8px 4px 16px;}
.vii-menu-col.left .vii-menu-block.menu {padding-right:16px; transform:translateY(-1px)}


/****************************
 * Menu > Lv1
****************************/
.desktop-menu ul.menu {display:flex; gap:0 16px;}

.desktop-menu ul.menu > li > :where(a,span) {
    display:flex; align-items:center; justify-content:center;
    padding-top:5px; padding-bottom:5px;
}


/****************************
 * Menu > Lv2
****************************/
.desktop-menu ul.sub-menu {
    position:absolute; top:100%; left:-16px; z-index:2;
    min-width:calc(100% + 32px); max-width:360px;
    padding-top:10px; border-radius:var(--vii-radius-4);
    transition:var(--vii-transition);
}
.desktop-menu ul.sub-menu > li {padding:0 16px;}
.desktop-menu ul.sub-menu > li:not(:last-child) {border-bottom:1px solid rgba(112, 112, 112, 0.15);}
.desktop-menu ul.sub-menu > li > :where(a,span) {
    display:block; padding:8px 0;
    width:max-content; max-width:100%;
}

/* pointer */
.desktop-menu ul.sub-menu:before {
    content:"";
    position:absolute; inset:10px 0 0; background:#fff;
    border-radius:var(--vii-radius-4); box-shadow:0 -3px 15px 5px rgb(0 0 0 / 10%);
    transition:var(--vii-transition);
}

/* placeholder for pointer icon */
.desktop-menu ul.sub-menu:after {
    content:""; position:absolute; left:0; bottom:100%; right:0;
    height:10px;
}

/* has submenu arrow */
.desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span) {padding-right:30px;}
.desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span):after {right:0;}
.desktop-menu ul.sub-menu > li[class*="has-child"]:hover > :where(a,span):after {transform:translateY(-50%) rotate(-90deg);}


/****************************
 * Menu > Lv3
****************************/
.desktop-menu ul.sub-menu ul.sub-menu {
    left:100%; top:0; min-width:unset;
    margin-left:1px; margin-top:0; padding-top:0;
    background:#fff; box-shadow:0 -3px 15px 5px rgb(0 0 0 / 10%);
}

/* pointer */
.desktop-menu ul.sub-menu ul.sub-menu:before {opacity:0;}

/* placeholder for pointer icon */
.desktop-menu ul.sub-menu ul.sub-menu:after {
    top:0; bottom:0; right:100%; left:auto;
    width:10px; height:auto;
}


/****************************
 * Menu Responsive
****************************/
@media only screen and (max-width:1380px) {
    .desktop-menu ul.menu {gap:0 25px;}
}