/****************************
 * 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;
    font-size:14px; font-weight:500; text-transform:uppercase;
    color:var(--vii-color-dark);
}

/* hover */
.desktop-menu ul > li > :where(a,span):hover,
.desktop-menu ul > li > :where(a,span):focus {color:var(--vii-color-primary);}

/* current */
.desktop-menu ul > li[class*="current"] > :where(a,span) {font-weight:700; color:var(--vii-color-primary);}

/* 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:14px;}
.desktop-menu ul > li[class*="has-child"] > :where(a,span):after {
    position:absolute; right:0; top:50%;
    display:inline-block; transform:translateY(-50%);
    content:"\e931"; font-family:var(--vii-font-icomoon); font-size:.6em;
    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 > Lv1
****************************/
.desktop-menu ul.menu {display:flex; gap:0 36px;}
.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:calc(100% + 7px); right:-20px; z-index:2;
    min-width:calc(100% + 40px); max-width:300px; background:#fff;
    box-shadow:0 -3px 15px 5px rgb(0 0 0 / 10%);
    border-radius:4px;
    transition:var(--vii-transition);
}
.desktop-menu ul.sub-menu > li:not(:last-child) {border-bottom:1px solid var(--vii-color-light-gray);}
.desktop-menu ul.sub-menu > li > :where(a,span) {
    display:block; padding:12px 20px 10px;
    width:max-content; max-width:100%;
}

/* pointer */
.desktop-menu ul.sub-menu:before {
    content:""; position:absolute; bottom:100%; right:20%;
    width:0; height:0;
    border-bottom:7px solid #fff;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
}

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

/* has submenu arrow */
.desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span) {padding-left:32px;}
.desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span):after {left:12px;top:52.5%;right:auto;}
.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 {right:100%; top:0; margin-right:10px; min-width:unset;}

/* pointer */
.desktop-menu ul.sub-menu ul.sub-menu:before {
    right:-13px; top:15px; left:auto;
    transform:rotate(180deg); transform-origin:center;
    border-top:7px solid transparent;
    border-right:7px solid #fff;
    border-bottom:7px solid transparent;
}

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


/****************************
 * Menu with banner has single
****************************/
body.banner-has-single {
    --vii-logo-height:40px;
}
body.banner-has-single .vii-menu-row.top-panel {background:#fff;}
body.banner-has-single .vii-menu-row.main {background:rgba(0, 0, 0, 0); border-bottom:none; position:relative;}
body.banner-has-single .vii-menu-row.main:before {
    content:"";
    position:absolute; top:50%; transform:translateY(-50%);
    left:calc(var(--vii-gap-container) / 2); right:calc(var(--vii-gap-container) / 2);
    height:72px; border-radius:4px; background:rgba(255, 255, 255, .3); backdrop-filter:blur(94px);
}
body.banner-has-single .vii-menu-row.main > .vii-menu-col {position:relative; z-index:1;}
body.banner-has-single.scroll-middle .vii-menu-row.main:before {box-shadow:0 0 5px 1px var(--vii-color-light-gray);}
html.menu-open body.banner-has-single .vii-menu-row.main:before {
    border-radius:4px 4px 0 0; border:1px solid #e7e7e7;
}


/****************************
 * Mega menu
****************************/
/* Show mega menu */
html:not(.menu-open) .vii-menu-overlay {opacity:0; pointer-events:none; visibility:hidden}

/* position with admin bar */
html.has-admin-bar .vii-menu-overlay {top:calc(var(--vii-header-height) + 32px);}

/* general mega menu */
.vii-menu-overlay ul {list-style:none; margin:0; position:relative;}
.vii-menu-overlay ul > li {padding:0;}
.vii-menu-overlay > li > :where(a,span) {
    text-decoration:none; display:inline-block;
    font-size:14px; font-weight:500; text-transform:uppercase;
    color:var(--vii-color-dark);
}
.vii-menu-overlay ul.sub-menu {
    position:absolute; left:100%; top:0; opacity:0; pointer-events:none;
    transition:opacity 0.3s ease;
}
.vii-menu-overlay ul > li[class*="has-child"]:hover > ul.sub-menu {opacity:1; pointer-events:auto;}

/* Style layout */
.vii-menu-overlay {left:0; right:0; top:var(--vii-header-height);}
.vii-menu-overlay__menu {border-radius:0 0 8px 8px; border:1px solid #e7e7e7; border-top:none;}

/* Sticky */
body.scroll-middle.scroll-down:not(.scroll-bottom) .vii-menu-overlay {
    opacity:0; pointer-events:none;
    transform:translateY(calc(-1 * var(--vii-header-top-height)))
}
body.scroll-middle .vii-menu-overlay {top:var(--vii-header-main-height);}
html.has-admin-bar body.scroll-middle .vii-menu-overlay {top:calc(var(--vii-header-main-height) + 32px);}

/* Menu lv1 */
.vii-menu-overlay ul.menu {
    --height-menu:100px;
    width:clamp(200px, 298px, 33.33%); background:var(--vii-color-blue);
    padding:36px 0; counter-reset:menu_order;
    transition:height 0.6s ease;
}
.vii-menu-overlay ul.menu > li {
    counter-increment:menu_order;
    padding:12px clamp(var(--vii-gap-container), 48px, var(--vii-gap-side));
}
.vii-menu-overlay ul.menu > li:hover {z-index:10;}
.vii-menu-overlay ul.menu > li > a {
    position:relative; padding-left:22px;
    font-size:var(--vii-size-h6); color:#fff;
}
.vii-menu-overlay ul.menu > li > a:before {
    content:"0" counter(menu_order);
    font-size:12px; font-weight:400; color:rgba(255, 255, 255, .4); letter-spacing:-0.04em; line-height:1;
    position:absolute; left:0; top:9px;
}
.vii-menu-overlay ul.menu > li > a:after {
    content:"";
    position:absolute; left:22px; bottom:-2px;
    width:0; height:2px; background:#fff;
    transition:var(--vii-transition);
}
.vii-menu-overlay ul.menu > li:hover > a:after,
.vii-menu-overlay ul.menu > li[class*="current"] > a:after {width:calc(100% - 22px);}

.vii-menu-overlay ul.menu:not(:hover):not(:has([class*="current"])) li:first-child > ul.sub-menu,
.vii-menu-overlay ul:not(:hover) > li[class*="current"] > ul.sub-menu {
    opacity:1; pointer-events:auto;
}

/* Menu lv2 */
.vii-menu-overlay ul.menu > li > ul.sub-menu {width:140%; height:100%; padding:48px 0; z-index:5;}
.vii-menu-overlay ul.menu > li > ul.sub-menu:after {
    content:"";
    position:absolute; right:0; top:48px;
    width:1px; height:calc(var(--height-menu) - 96px); background:rgba(0, 0, 0, .2); pointer-events:none;
}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li {padding:0 48px;}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li:not(:last-child) {margin-bottom:4px;}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li > a {
    min-height:56px; width:100%; border-radius:8px;
    position:relative; padding-right:100px;
    display:inline-flex; align-items:center;
}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li > a:before {
    font-family:var(--vii-font-icomoon), fantasy; content:"\e902";
    color:var(--vii-color-turquoise); line-height:1; font-size:20px;
    position:absolute; left:8px; top:50%; transform:translateY(-50%); opacity:0;
    transition:opacity 0.3s ease;
}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li > a:after {
    font-family:var(--vii-font-icomoon), fantasy; content:"\e915";
    width:16px; height:16px; display:flex; align-items:center; justify-content:center;
    line-height:1; color:rgba(0, 0, 0, .3); font-size:9px;
    position:absolute; top:50%; right:0; transform:translateY(-50%);
    transition:var(--vii-transition);
}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li[class*="current"]:not(.custom-link-scroll) > a,
.vii-menu-overlay ul.menu > li > ul.sub-menu > li:hover > a {
    background:var(--vii-color-blue); color:var(--vii-color-white);
    padding-left:36px; padding-right:64px;
}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li[class*="current"]:not(.custom-link-scroll) > a:after,
.vii-menu-overlay ul.menu > li > ul.sub-menu > li:hover > a:after {color:#fff; transform:translate(-8px, -50%)}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li[class*="current"]:not(.custom-link-scroll) > a:before,
.vii-menu-overlay ul.menu > li > ul.sub-menu > li:hover > a:before {opacity:1;}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li:not([class*="has-child"]) > a {padding-right:56px;}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li:not([class*="has-child"]) > a:after {opacity:0;}
.vii-menu-overlay ul.menu > li > ul.sub-menu > li:not([class*="has-child"]):hover > a {padding-right:20px;}

/* Menu lv3 */
.vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu {min-width:100%; padding:48px; z-index:10; height:100%; left:calc(100% - 2px);}
.vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu > li:not(:last-child) {margin-bottom:16px;}
.vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu > li[class*="current"] > a,
.vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu > li > a:hover {color:var(--vii-color-blue); text-decoration:underline;}
.vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu > li[class*="current"] > a {font-weight:700}

/* update height for menu */
@media only screen and (max-height:700px) {
    .vii-menu-overlay ul.menu {padding-top:2.5vh; padding-bottom:2.5vh}
    .vii-menu-overlay ul.menu > li > ul.sub-menu,
    .vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu {
        padding-top:calc(2.5vh + 12px); padding-bottom:calc(2.5vh + 12px);
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li > a {min-height:50px; line-height:1.25}
    .vii-menu-overlay ul.menu > li > ul.sub-menu:after {height:calc(95vh - 24px)}
}

/* layout with banner has single image */
body.banner-has-single .vii-menu-overlay {
    --vii-gap-container:20px;
    top:calc(var(--vii-header-height) - 19px)
}
html.has-admin-bar body.banner-has-single .vii-menu-overlay {
    top:calc(var(--vii-header-height) + 13px)
}
body.scroll-middle.banner-has-single .vii-menu-overlay {top:calc(var(--vii-header-main-height) - 19px);}
html.has-admin-bar body.scroll-middle.banner-has-single .vii-menu-overlay {top:calc(var(--vii-header-main-height) + 13px);}