@media only screen and (min-width:1181px) {
/****************************
 * Menu > Desktop
****************************/
.ifs-menu-row {border-bottom:1px solid var(--menu-line);}
.ifs-menu-row.top {min-height:var(--ifs-top-menu-height); padding:0 32px; gap:8px;}

/* column */
.ifs-menu-col {width:var(--ifs-menu-col-width);}
.ifs-menu-col.middle {
    width:calc(100% - 2 * var(--ifs-menu-col-width));
    border-left:1px solid var(--menu-line); border-right:1px solid var(--menu-line);
}

/****************************
 * Menu > Common
****************************/
/* menu */
.desktop-menu ul > li > :where(a,span) {
    text-decoration:none; display:inline-block;
    font-size:var(--menu-item-size); color:var(--menu-color);
    transition:var(--ifs-transition);
}

/* hover */
.desktop-menu ul > li > :where(a,span):hover, .desktop-menu ul > li > :where(a,span):focus,
.desktop-menu ul > li[class*="current"]:not(.custom-link-scroll) > :where(a,span) {color:var(--menu-color-hover);}

/* 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:16px;}
.desktop-menu ul > li[class*="has-child"] > :where(a,span):after {
    position:absolute; right:0; top:55%;
    display:inline-block; transform:translateY(-50%);
    content:"\e931"; font-family:var(--ifs-font-icomoon), fantasy; font-size:0.7em; font-weight:400;
    transition:transform .3s ease;
}
.desktop-menu ul > li[class*="has-child"]:hover > :where(a,span):after,
.desktop-menu ul > li[class*="has-child"]:focus > :where(a,span):after {transform:translateY(-60%) rotate(180deg);}

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

/****************************
 * Menu > Lv1
****************************/
.desktop-menu ul.menu {display:flex; gap:0 24px;}
.desktop-menu ul.menu > li:before {
    content:"";
    width:100%; height:3px; background:var(--ifs-color-turquoise-2);
    position:absolute; left:0; bottom:-24px;
    transition:opacity .3s ease; opacity:0;
}
.desktop-menu ul.menu > li[class*="has-child"]:hover:before {opacity:1;}
.desktop-menu ul.menu > li > :where(a,span) {
    display:flex; align-items:center; justify-content:center;
    padding-top:5px; padding-bottom:5px;
    font-weight:600;line-height:1.4;
}


/****************************
 * Menu > Lv2
****************************/
.desktop-menu ul.sub-menu {
    --menu-color:var(--ifs-color-dark-green);
    --menu-color-hover:var(--ifs-color-primary);

    top:calc(100% + 24px); left:0;
    min-width:100%; background:var(--ifs-color-bg); padding:10px;
    box-shadow:0 0 30px 10px rgba(0,0,0,.05);
    transition:var(--ifs-transition);
}
.desktop-menu ul.sub-menu > li > :where(a,span) {
    min-width:100%; width:max-content; max-width:100%;
    display:flex; align-items:center;
    padding: 6px 48px 6px 10px; position:relative;
}
.desktop-menu ul.sub-menu > li > :where(a,span):after {
    width:48px; aspect-ratio:1; right:-10px;
    line-height:1;
    display:flex; align-items:center; justify-content:center;
    transform: translateY(-52.5%) rotate(-90deg)
}
.desktop-menu ul.sub-menu > li[class*="has-child"]:hover > :where(a,span):after,
.desktop-menu ul.sub-menu > li[class*="has-child"]:focus > :where(a,span):after {
    transform: translate(2px, -52.5%) rotate(-90deg);
}

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


/****************************
 * Menu > Lv3
****************************/
.desktop-menu ul.sub-menu ul.sub-menu {
    left:calc(100% + 12px); top: -10px;
    min-width:unset; margin-top:0;
}
.desktop-menu ul.sub-menu ul.sub-menu > li > :where(a,span) {padding:6px 12px;}

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


/****************************
 * Menu > Last menu item
****************************/
.desktop-menu:has(li:last-child > ul.sub-menu ul.sub-menu) ul.menu > li:last-child > ul.sub-menu {left:auto; right:-20px;}
.desktop-menu:has(li:last-child > ul.sub-menu ul.sub-menu) ul.menu > li:last-child > ul.sub-menu:before {left:auto; right:17.5%;}
.desktop-menu:has(li:last-child > ul.sub-menu ul.sub-menu) ul.menu > li:last-child > ul.sub-menu > li > :where(a,span) {
    margin-left:auto;
    padding-left:48px; padding-right:10px; justify-content:flex-end;
}
.desktop-menu:has(li:last-child > ul.sub-menu ul.sub-menu) ul.menu > li:last-child > ul.sub-menu > li > :where(a,span):after {
    right:auto; left:0; transform: translateY(-52.5%) rotate(90deg);
}
.desktop-menu:has(li:last-child > ul.sub-menu ul.sub-menu) ul.menu > li:last-child > ul.sub-menu > li[class*="has-child"]:hover > :where(a,span):after {
    transform:translate(-2px, -52.5%) rotate(90deg);
}
.desktop-menu:has(li:last-child > ul.sub-menu ul.sub-menu) ul.menu > li:last-child > ul.sub-menu > li > ul.sub-menu {
    left:auto; right:100%;
    margin-left:0; margin-right:12px;
}
.desktop-menu:has(li:last-child > ul.sub-menu ul.sub-menu) ul.menu > li:last-child > ul.sub-menu > li > ul.sub-menu:before {
    right:-14px;
    transform:rotate(180deg); transform-origin:center;
}
.desktop-menu:has(li:last-child > ul.sub-menu ul.sub-menu) ul.menu > li:last-child > ul.sub-menu > li > ul.sub-menu:after {
    right:-12px;
}


/****************************
 * Responsive
****************************/
@media only screen and (min-width:1800px) {
    .desktop-menu {
        & ul {
            & > li[class*="has-child"] > :where(a,span) {
                padding-right:1.1vw;
            }
        }
    }
    .desktop-menu ul.menu {gap:0 1.8vw;}

    .ifs-menu-row.top {gap:clamp(8px, 1vw, 24px);}
    .ifs-menu-row.top .desktop-menu ul.menu {gap:0 1.2vw;}
    .desktop-menu ul.sub-menu {max-width:25vw;}
    .desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span) {padding-right:2vw;}
}
@media only screen and (max-width:1280px) {
    .desktop-menu ul.menu {
        gap:0 12px;
        & > li > :where(a,span) {
            font-size:13px;
        }
    }
}
}