.horiAndVertMainMenuCssVariables {
    /* Font Size */
    --mobile-node-font-size: 16px;
    --desktop-node-font-size: clamp(16px, 2.5vw, 22px);
    --desktop-open-close-button-font-size: 50px;
    --mobile-open-close-button-font-size: 30px;
    /* Font Weight */
    --node-font-weight: normal;
    --current-node-font-weight-level0: bold;
    /* Font Color */
    --desktop-close-button-font-color: #818181;
    --desktop-close-button-font-color-hover: #FFFFFF;
    --mobile-close-button-font-color: var(--color08);
    --node-font-color: #333;
    --mobile-current-node-font-color: var(--color08);
    --desktop-node-font-color-level0: #FFFFFF;
    --desktop-node-font-color-hover-level0: #FFFFFF;
    --desktop-node-font-color-hover-level1: #FFFFFF;
    --current-node-icon-color-level1: inherit;
    --current-node-font-color-level1: #FFFFFF;
    --current-node-font-color-level0: #FFFFFF;
    --current-node-arrow-color: #FFFFFF;
    --arrow-color: var(--color03);
    --arrow-color-hover: #FFFFFF;
    /* Line Height */
    --node-line-height: 1em;
    /* Background */
    --mobile-overlay-bg-color: transparent;
    --desktop-overlay-bg-color: rgba(0,0,0, 0.7);
    --open-button-bg-color: #FFFFFF;
    --block-bg-level0: #FFFFFF;
    --desktop-container-bg: transparent;
    --mobile-container-bg: var(--color03);
    --block-bg-level1: #FFFFFF;
    --desktop-block-bg-level1: linear-gradient(to right, var(--color04) 0%, #FFFFFF 30%, #FFFFFF 100%); /*New*/
    --mobile-block-bg-level1: #ebf2ff; /*New*/
    --mobile-arrow-bg: var(--color04);
    --desktop-block-bg-level0: transparent;
    --desktop-node-bg-hover-level0: var(--color03);
    --desktop-node-highlighted-bg: var(--color13);
    --desktop-block-bg-hover-level1: var(--color05);
    --current-node-bg-level0: linear-gradient(to bottom, var(--color08), var(--color09));
    --current-node-bg-level1: linear-gradient(to bottom, var(--color08), var(--color09));
    /* Padding */
    --mobile-node-padding: calc(var(--mobile-node-font-size) * 0.8125) calc(var(--mobile-node-font-size) * 1.25);
    --block-padding-top: 0;
    --mobile-padding-right: calc(var(--mobile-node-font-size) * 3.62);
    --vertical-node-padding: calc(var(--mobile-node-font-size) * 0.625) calc(var(--mobile-node-font-size) * 1.25);
    --open-close-button-padding: 0.1em;
    /* Margin */
    --arrow-margin-top-level1: -4.02px;
    --mobile-overlay-margin-top: 100px; /* this equal to the height of school logo */
    /* Width */
    --desktop-block-width: auto;
    /* Border */
    --block-border-level0: 0 none;
    --mobile-block-border-top: 2px solid var(--color05);
    --mobile-node-border-top: 1px solid var(--color04);
    /* Height */
    /* Others */
    --overlay-transition-time: 0.5s;
    --open-close-button-position-top: 10px;
    --open-close-button-position-right: 10px;
    --link-text-decoration: none;
    --block-shadow-level0: none;
    --menu-radius: 4px;
    --mobile-plus-sign: '+';
    --mobile-minus-sign: '-';
    --desktop-node-highlighted-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);
    --desktop-block-shadow-level1: rgba(0, 0, 0, 0.16) 0px 1px 4px; /*0 4px 3px rgba(0, 0, 0, 0.25);*/ /*New*/
    --current-node-icon-level0: ""; /*"\f654";*/
    --current-node-icon-level1: ""; /*"\f654";*/
    --arrow-size-level0: 4px 4px 4px 6px;
    --arrow-size-level1: 4.02px 0 4.02px 6px;
    --arrow-position-right: 10px;
}

/*  Overlay & Button Start ======================================*/

#fspsOverlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background-color: var(--mobile-overlay-bg-color);
    overflow-y: hidden;
    transition: var(--overlay-transition-time);
    margin-top: var(--mobile-overlay-margin-top);
}

    #fspsOverlay .overlayClosebtn, #fspsOpenMenuBtn {
        
        line-height: 1;
        padding: var(--open-close-button-padding);
        transition: all 0.5s;
        cursor: pointer;
        font-size: var(--mobile-open-close-button-font-size);
    }

    #fspsOverlay .overlayClosebtn {
        position: absolute;
        top: 0;
        right: 10px;
        z-index : 99999;
        color: var(--mobile-close-button-font-color);
        background-color: transparent;
    }

        #fspsOverlay .overlayClosebtn:hover, #fspsOverlay .overlayClosebtn:focus {
            color: #000000;
            transform: scale(1.1);
        }

#fspsOpenMenuBtn {
    position: fixed;
    top: var(--open-close-button-position-top);
    right: var(--open-close-button-position-right);
    background-color: var(--open-button-bg-color);
}

    /*打開按鈕（三形），Hover*/
    #fspsOpenMenuBtn:hover {
        transform: scale(1.1);
    }

@media (min-width: 768px) {
    #fspsOverlay {
        margin-top: 0;
        background-color: var(--desktop-overlay-bg-color);
    }
    #fspsOverlay .overlayClosebtn {
        font-size: var(--desktop-open-close-button-font-size);
        color: var(--desktop-close-button-font-color);
    }

        #fspsOverlay .overlayClosebtn:hover, #fspsOverlay .overlayClosebtn:focus {
            color: var(--desktop-close-button-font-color-hover);
        }

    #fspsOpenMenuBtn {
        font-size: var(--desktop-open-close-button-font-size);
    }
}

/*  Overlay & Button End ======================================*/


/* SmartMenu 本體 */
#main-menu {
    width: 100% !important;
    box-shadow: var(--block-shadow-level0);
    border: var(--block-border-level0);
}

/* 整個彈出道覽列外圍 */
.mp主導覽列22 .fspsSidenav {
    height: auto;
    width: 0;
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    background-color: var(--mobile-container-bg);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: var(--block-padding-top);
    max-height : 80vh
}

@media (min-width: 768px) { /*大於768px*/

    /*桌面版時，主導覽列闊度是 auto */
    #main-menu {
        float: left;
        margin-top: 120px;
        margin-left: 5%;
    }

    /* 主導覽列佔全部高度 */
    .mp主導覽列22 .fspsSidenav {
        height: 100%;
        background-color: var(--desktop-container-bg);
        max-height : auto;
    }
}

/* ======================== Smart Menu ================================================*/
/* 整個流動版導覽列 */
.mp主導覽列22 .sm-mint {
    border-top: var(--mobile-block-border-top); /* 顏色(1) */
    background: var(--block-bg-level0);
}

    /* 所有節點通用樣式 */
    .mp主導覽列22 .sm-mint a
    , .mp主導覽列22 .sm-mint a:hover
    , .mp主導覽列22 .sm-mint a:focus
    , .mp主導覽列22 .sm-mint a:active 
    {
        padding: var(--mobile-node-padding);
        /* make room for the toggle button (sub indicator) */
        padding-right: var(--mobile-padding-right);
        color: var(--node-font-color); /* 文字顏色(1) */
        font-size: var(--mobile-node-font-size);
        font-weight: var(--node-font-weight);
        line-height: var(--node-line-height);
        text-decoration: var(--link-text-decoration);
    }

        /* 現選節點預設樣式 */
        .mp主導覽列22 .sm-mint a.current {
            font-weight: bold;
        }

        .mp主導覽列22 .sm-mint a.currentTopNode {
            font-weight: var(--current-node-font-weight-level0);
        }

            .mp主導覽列22 .sm-mint a.currentTopNode::after {
                content: var(--current-node-icon-level0);
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                display: inline;
                margin-left: 5px;
                color: var(--mobile-current-node-font-color);
            }

        /* 已停用節點預設樣式 */
        .mp主導覽列22 .sm-mint a.disabled {
            color: #cccccc; /* 文字顏色(2) */
        }

        .mp主導覽列22 .sm-mint a .sub-arrow {
            position: absolute;
            top: 50%;
            margin-top: calc(var(--mobile-node-font-size) * -1.0625);
            left: auto;
            right: calc(var(--mobile-node-font-size) * 0.25);
            width: calc(var(--mobile-node-font-size) * 2.125);
            height: calc(var(--mobile-node-font-size) * 2.125);
            overflow: hidden;
            font: bold calc(var(--mobile-node-font-size) * 1)/calc(var(--mobile-node-font-size) * 2.125) monospace !important;
            text-align: center;
            text-shadow: none;
            background: rgba(255,255,255,0.3); /*New*/
            border-radius: 15%;
        }

            .mp主導覽列22 .sm-mint a .sub-arrow::before { /* 未被展開時 */
                content: var(--mobile-plus-sign);
            }

        .mp主導覽列22 .sm-mint a.highlighted .sub-arrow::before { /* 已被展開後 */
            content: var(--mobile-minus-sign);
        }

    /* 預設節點 */
    .mp主導覽列22 .sm-mint li {
        border-top: var(--mobile-node-border-top);
    }

    .mp主導覽列22 .sm-mint > li:first-child {
        border-top: 0;
    }

    /* 第二層及以下方塊 */
    .mp主導覽列22 .sm-mint ul {
        background: var(--mobile-block-bg-level1); /*New*/
    }

        /* 第二層及以下之節點 */
        .mp主導覽列22 .sm-mint ul a
        , .mp主導覽列22 .sm-mint ul a:hover
        , .mp主導覽列22 .sm-mint ul a:focus
        , .mp主導覽列22 .sm-mint ul a:active 
        {
            font-size: calc(var(--mobile-node-font-size) * 0.875);
            border-left: calc(var(--mobile-node-font-size) * 0.5) solid transparent;
            border-bottom: rgba(255,255,255,0.3) solid 1px; /*New*/
        }

        /*level 3*/
        .mp主導覽列22 .sm-mint ul ul {
            background-color: var(--block-bg-level1);
        }

            /* 第三層節點 */
            .mp主導覽列22 .sm-mint ul ul a,
            .mp主導覽列22 .sm-mint ul ul a:hover,
            .mp主導覽列22 .sm-mint ul ul a:focus,
            .mp主導覽列22 .sm-mint ul ul a:active {
                border-left: var(--mobile-node-font-size) solid transparent;
            }
            /* 第四層節點 */
            .mp主導覽列22 .sm-mint ul ul ul a,
            .mp主導覽列22 .sm-mint ul ul ul a:hover,
            .mp主導覽列22 .sm-mint ul ul ul a:focus,
            .mp主導覽列22 .sm-mint ul ul ul a:active {
                border-left: calc(var(--mobile-node-font-size) * 1.5) solid transparent;
            }
            /* 第五層節點 */
            .mp主導覽列22 .sm-mint ul ul ul ul a,
            .mp主導覽列22 .sm-mint ul ul ul ul a:hover,
            .mp主導覽列22 .sm-mint ul ul ul ul a:focus,
            .mp主導覽列22 .sm-mint ul ul ul ul a:active {
                border-left: calc(var(--mobile-node-font-size) * 2) solid transparent;
            }
            /* 第六層節點 */
            .mp主導覽列22 .sm-mint ul ul ul ul ul a,
            .mp主導覽列22 .sm-mint ul ul ul ul ul a:hover,
            .mp主導覽列22 .sm-mint ul ul ul ul ul a:focus,
            .mp主導覽列22 .sm-mint ul ul ul ul ul a:active {
                border-left: calc(var(--mobile-node-font-size) * 2.5) solid transparent;
            }

    .mp主導覽列22 .sm-mint li.notShowInMobileMode {
        display: none;
    }

    /* 第2層現選節點 */
    .mp主導覽列22 .sm-mint ul a.currentNode {
    }

        .mp主導覽列22 .sm-mint ul a.currentNode::after
        , .mp主導覽列22 .sm-mint ul a.parentNode::after {
            content: var(--current-node-icon-level1);
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            display: inline;
            margin-left: 5px;
            color: var(--current-node-icon-color-level1);
        }

@media (min-width: 768px) {
    /* Switch to desktop layout
  -----------------------------------------------
     These transform the menu tree from
     collapsible to desktop (navbar + dropdowns)
  -----------------------------------------------*/
    /* start... (it's not recommended editing these rules) */

    .mp主導覽列22 .sm-mint ul {
        position: absolute;
        width: 12em;
    }

    .mp主導覽列22 .sm-mint li {
        float: left;
    }

        .mp主導覽列22 .sm-mint li.notShowInMobileMode {
            display: inherit;
        }

    .mp主導覽列22 .sm-mint ul li, .mp主導覽列22 .sm-mint.sm-vertical li {
        float: none;
    }

    .mp主導覽列22 .sm-mint a {
        white-space: nowrap;
    }

    .mp主導覽列22 .sm-mint ul a, .mp主導覽列22 .sm-mint.sm-vertical a {
        white-space: normal;
    }

    .mp主導覽列22 .sm-mint .sm-nowrap > li > a, .mp主導覽列22 .sm-mint .sm-nowrap > li > :not(ul) a {
        white-space: nowrap;
    }

    /* ...end */

    /* static Block 靜態方塊 */
    .mp主導覽列22 .sm-mint {
        border-top: 0;
        background: var(--desktop-block-bg-level0);
    }

        /* 第一層，節點預設樣式 */
        .mp主導覽列22 .sm-mint a
        , .mp主導覽列22 .sm-mint a:hover
        , .mp主導覽列22 .sm-mint a:focus
        , .mp主導覽列22 .sm-mint a:active
        , .mp主導覽列22 .sm-mint a.highlighted 
        {
            padding: 0 calc(var(--desktop-node-font-size) * 1.25);
            line-height : 2;
            color: var(--desktop-node-font-color-level0);
            border-radius: var(--menu-radius) var(--menu-radius) 0 0;
            font-size: var(--desktop-node-font-size);
        }

            /* 節點 Hover 樣式 */
            .mp主導覽列22 .sm-mint a:hover, .mp主導覽列22 .sm-mint a:focus, .mp主導覽列22 .sm-mint a:active {
                background: var(--desktop-node-bg-hover-level0);
                color: var(--desktop-node-font-color-hover-level0);
            }

            .mp主導覽列22 .sm-mint a.currentTopNode {
                background-image: var(--current-node-bg-level0);
                color: var(--desktop-node-font-color-hover-level0);
            }

            .mp主導覽列22 .sm-mint a.highlighted {
                background: var(--desktop-node-highlighted-bg);
                color: var(--node-font-color);
                /*box-shadow: var(--desktop-node-highlighted-shadow);*/ /*New*/
            }

            .mp主導覽列22 .sm-mint a.disabled {
                background: transparent;
                color: #cccccc;
                box-shadow: none;
            }

            .mp主導覽列22 .sm-mint a.has-submenu {
                padding-right: calc(var(--desktop-node-font-size) * 2.125);
            }

            /* 代表有下層的箭頭 */
            .mp主導覽列22 .sm-mint a .sub-arrow {
                top: 50%;
                margin-top: -3px;
                right: 20px;
                width: 0;
                height: 0;
                border-width: var(--arrow-size-level0);
                border-style: dashed dashed dashed solid;
                border-color: transparent transparent transparent var(--arrow-color);
                background: transparent;
                border-radius: 0;
            }

            /* 代表有下層的箭頭 在 Hover 時 */
            .mp主導覽列22 .sm-mint a:hover .sub-arrow, .mp主導覽列22 .sm-mint a:focus .sub-arrow, .mp主導覽列22 .sm-mint a:active .sub-arrow {
                border-color: transparent transparent transparent var(--arrow-color-hover);
            }

            .mp主導覽列22 .sm-mint a.highlighted .sub-arrow {
                border-color: transparent transparent transparent var(--arrow-color);
            }

            .mp主導覽列22 .sm-mint a.disabled .sub-arrow {
                border-color: transparent transparent transparent var(--arrow-color);
            }

            .mp主導覽列22 .sm-mint a .sub-arrow::before {
                display: none;
            }

            .mp主導覽列22 .sm-mint a.currentTopNode .sub-arrow {
                border-color: transparent transparent transparent var(--current-node-arrow-color);
            }

            .mp主導覽列22 .sm-mint a.currentTopNode::after {
                color: var(--current-node-font-color-level0);
            }

        .mp主導覽列22 .sm-mint li {
            border-top: 0;
        }

        /* 第二層及以下各層 */
        .mp主導覽列22 .sm-mint ul {
            border: 0;
            padding: 8px 0;
            background: var(--desktop-block-bg-level1); /*New*/
            border-radius: 0 var(--menu-radius) var(--menu-radius) var(--menu-radius);
            box-shadow: var(--desktop-block-shadow-level1);
        }

        .mp主導覽列22 .sm-mint ul a
        , .mp主導覽列22 .sm-mint ul a:hover
        , .mp主導覽列22 .sm-mint ul a:focus
        , .mp主導覽列22 .sm-mint ul a:active
        , .mp主導覽列22 .sm-mint ul a.highlighted 
        {
            font-size: calc(var(--desktop-node-font-size) * 0.8);
        }

            /* 第三層及以下各層方塊 */
            .mp主導覽列22 .sm-mint ul ul {
                border-radius: var(--menu-radius);
            }

            /* 第二層及以下節點 */
            .mp主導覽列22 .sm-mint ul a
            , .mp主導覽列22 .sm-mint ul a:hover
            , .mp主導覽列22 .sm-mint ul a:focus
            , .mp主導覽列22 .sm-mint ul a:active
            , .mp主導覽列22 .sm-mint ul a.highlighted {
                border: 0 !important;
                padding: 0 calc(var(--desktop-node-font-size) * 1.25);
                color: var(--node-font-color);
                border-radius: 0;
            }

                /* 第二層及以下節點 Hover */
                .mp主導覽列22 .sm-mint ul a:hover, .mp主導覽列22 .sm-mint ul a:focus, .mp主導覽列22 .sm-mint ul a:active, .mp主導覽列22 .sm-mint ul a.highlighted {
                    background: var(--desktop-block-bg-hover-level1);
                    color: var(--desktop-node-font-color-hover-level1);
                    box-shadow: none;
                }

                /* 第二層及以下停用節點 */
                .mp主導覽列22 .sm-mint ul a.disabled {
                    background: transparent;
                    color: #b3b3b3; /* 文字顏色(2) */
                }

                /* 第 2 層節點現選 */
                .mp主導覽列22 .sm-mint ul a.currentNode {
                    background-image: var(--current-node-bg-level1); /**/
                    color: var(--current-node-font-color-level1); /**/
                }

                    .mp主導覽列22 .sm-mint ul a.currentNode::after {
                        color: var(--current-node-icon-color-level1);
                    }

                /* 讓位給右方的箭頭 */
                .mp主導覽列22 .sm-mint ul a.has-submenu {
                    padding-right: calc(var(--desktop-node-font-size) * 1.25);
                }

                /* 第二層或以下，有下一層時顯示的向右箭頭 */
                .mp主導覽列22 .sm-mint ul a .sub-arrow {
                    right: var(--arrow-position-right);
                    margin-top: var(--arrow-margin-top-level1);
                    border-width: var(--arrow-size-level1);
                    border-style: dashed dashed dashed solid;
                    border-color: transparent transparent transparent var(--arrow-color);
                }

                /* 第二層或以下，有下一層時顯示的向右箭頭 Hover */
                .mp主導覽列22 .sm-mint ul a:hover .sub-arrow, .mp主導覽列22 .sm-mint ul a:focus .sub-arrow, .mp主導覽列22 .sm-mint ul a:active .sub-arrow, .mp主導覽列22 .sm-mint ul a.highlighted .sub-arrow {
                    border-color: transparent transparent transparent var(--arrow-color-hover);
                }

                /* 第二層或以下，有下一層時顯示的向右箭頭 Hover （停用節點）*/
                .mp主導覽列22 .sm-mint ul a.disabled .sub-arrow {
                    border-color: transparent transparent transparent var(--arrow-color-hover);
                }

        .mp主導覽列22 .sm-mint .scroll-up,
        .mp主導覽列22 .sm-mint .scroll-down {
            position: absolute;
            display: none;
            visibility: hidden;
            overflow: hidden;
            background: var(--color13);
            height: 20px;
        }

        /* 向上、向下箭頭 */
        .mp主導覽列22 .sm-mint .scroll-up-arrow,
        .mp主導覽列22 .sm-mint .scroll-down-arrow {
            position: absolute;
            top: 6px;
            left: 50%;
            margin-left: -8px;
            width: 0;
            height: 0;
            overflow: hidden;
            border-width: 0 6px 8px 6px;
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent var(--arrow-color) transparent;
        }

        .mp主導覽列22 .sm-mint .scroll-down-arrow {
            border-width: 8px 6px 0 6px;
            border-style: solid dashed dashed dashed;
            border-color: var(--arrow-color) transparent transparent transparent;
        }

    .mp主導覽列22 .sm-mint.sm-vertical {
        border-bottom: 0;
    }

        .mp主導覽列22 .sm-mint.sm-vertical a {
            padding: 0 calc(var(--desktop-node-font-size) * 1.25);
            line-height: 2;
            border-radius: 4px 0 0 4px;
        }

            .mp主導覽列22 .sm-mint.sm-vertical a:hover, .mp主導覽列22 .sm-mint.sm-vertical a:focus, .mp主導覽列22 .sm-mint.sm-vertical a:active, .mp主導覽列22 .sm-mint.sm-vertical a.highlighted {
                background: var(--color02);
                color: #fff;
                box-shadow: none;
            }

            .mp主導覽列22 .sm-mint.sm-vertical a.disabled {
                background: transparent;
                color: #cccccc;
            }

            .mp主導覽列22 .sm-mint.sm-vertical a .sub-arrow {
                right: 10px;
                margin-top: -4.02px;
                border-width: 4.02px 0 4.02px 6px;
                border-style: dashed dashed dashed solid;
                border-color: transparent transparent transparent var(--arrow-color);
            }

            .mp主導覽列22 .sm-mint.sm-vertical a:hover .sub-arrow, .mp主導覽列22 .sm-mint.sm-vertical a:focus .sub-arrow, .mp主導覽列22 .sm-mint.sm-vertical a:active .sub-arrow, .mp主導覽列22 .sm-mint.sm-vertical a.highlighted .sub-arrow {
                border-color: transparent transparent transparent #fff;
            }

            .mp主導覽列22 .sm-mint.sm-vertical a.disabled .sub-arrow {
                border-color: transparent transparent transparent rgb(184,46,179);
            }

        .mp主導覽列22 .sm-mint.sm-vertical ul {
            border-radius: 4px !important;
        }

            .mp主導覽列22 .sm-mint.sm-vertical ul a {
                
            }
}

/* 彈出 menu 的動畫 */
@media (min-width:768px) {
    #main-menu {
        -webkit-font-smoothing: subpixel-antialiased;
    }

        /* show animation */
        #main-menu ul.show-animation {
            animation: show-animation 0.7s;
        }

    @keyframes show-animation {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /* hide animation */
    #main-menu ul.hide-animation {
        animation: hide-animation 0.7s;
    }

    @keyframes hide-animation {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}

/*Vertical Menu Container Start (Do not change nor remove)*/

.verticalMenuExist {
    --vertical-menu-padding: 1rem;
    --variable-content-padding: 1rem;
}

    .verticalMenuExist .fullWidthContainer {
        width: 100%;
    }

    /* Container for left(Vertical Menu) and right(Main Content) side */
    .verticalMenuExist .fspsFixedWidthRow {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
    }

/* Vertical Menu */
    .verticalMenuExist .fspsVerticalMenuPH {
        flex-basis: 20%;
        min-width: 200px;
        max-width: 300px;
        flex-grow: 1;
        flex-shrink: 0;
        position: relative;
        padding: 0;
        border: solid var(--vertical-menu-padding) transparent;
    }

/* Main Content */
    .verticalMenuExist .variableContent
    , .verticalMenuExist .realContent {
        flex-basis: auto;
        width: 80%;
        flex-grow: 6;
        flex-shrink: 1;
    }

    .verticalMenuExist #fspsFirstRow .variableContent {
        padding: var(--variable-content-padding) var(--variable-content-padding) 0 var(--variable-content-padding);
    }

    .verticalMenuExist .fspsContentRow .realContent {
        padding: 0 var(--variable-content-padding);
    }

        .verticalMenuExist .lowerLeverVerticalMenu {
            position: absolute;
            top: 100px;
            z-index: 1;
            width: 100%;
        }

    .verticalMenuExist .fspsContentRow {
        
    }

/*Vertical Menu Container End (Do not change nor remove)*/


/*Vertical Menu CSS Start (Do not change nor remove)*/

/* Hide vertical Menu */
.verticalMenuExist .fspsVerticalMenuPH {
    display: none;
}

@media (min-width: 768px) {

    .verticalMenuExist .fspsVerticalMenuPH {
        display: block;
    }

    /* show vertical menu */
    .verticalMenuExist .lowerLeverVerticalMenu {
        --highlight-color: #f2a535;
        /* Font Size */
        --v-heading-font-size: 1.5em;
        --v-node-font-size: 1.2rem;
        --v-node-font-size-level1: 1rem;
        --v-arrow-size: 1.3em;
        /* Font Weight */
        --v-node-font-weight: bold;
        --v-node-font-weight-level1: bold;
        --v-icon-font-weight: 900;
        /* Font Color */
        --v-heading-font-color: #FFFFFF;
        --v-node-font-color: var(--color08);
        --v-node-font-color-level1: var(--color08);
        --v-node-font-color-level1-hover: #000000;
        --v-current-node-font-color: var(--color02);
        /* Line Height */
        --v-node-line-height: 1.5em;
        --v-node-line-height-level1: 2em;
        /* Background */
        --v-heading-bg: linear-gradient(to bottom, var(--color02), var(--color03));
        --v-node-bg: linear-gradient(90deg, var(--color10) 0%, var(--color04) 2%, rgb(255,255,255) 3%, rgb(255,255,255) 100%);
        --v-node-bg-hover: linear-gradient(90deg, var(--highlight-color) 0%, var(--highlight-color) 2%, rgb(255,255,255) 3%, rgb(255,255,255) 100%);
        --v-node-bg-hover-level1: linear-gradient(135deg, #FFFFFF 70%, var(--color13) 100%);
        --v-block-bg-level1: #FFFFFF;
        /* Padding */
        --v-heading-padding: 0.3em 0.5em;
        --v-node-padding: 0.5em 0.6em;
        --v-node-padding-level1: 0 1em;
        /* Margin */
        --v-heading-margin: 0 0 0.5em 0;
        --v-icon-margin-right: 0.6em;
        --v-current-node-icon-margin-left: 0.5em;
        /* Width */
        /* Border */
        --v-border-bottom: solid 1px var(--color04);
        --v-border-bottom-hover: solid 1px rgba(0, 0, 0, 0.2);
        --v-node-border-left-hover-level1: 5px solid var(--highlight-color); /* Orange */
        --v-node-border-left-level1: 1px dotted rgba(0, 0, 0, 0.2);
        /* Height */
        /* Others */
        --v-block-max-height: 80vh;
        --v-border-radius: 0.3em;
        --v-animation-time: 0.15s;
        --v-block-indent-level1: 1em;
        --v-icon-font-family: "Font Awesome 6 Free";
        --v-current-node-icon: "\f185";
        color: #000000;
    }

        /* Curent Displaying webpage node on the top of vertical Menu */
        .verticalMenuExist .lowerLeverVerticalMenu .topNode {
            font-weight: 800;
            margin: var(--v-heading-margin);
            font-size: var(--v-heading-font-size);
            background-image: var(--v-heading-bg);
            color: var(--v-heading-font-color);
            padding: var(--v-heading-padding);
            border-radius: var(--v-border-radius);
        }

        /* vertical menu itself */
        .verticalMenuExist .lowerLeverVerticalMenu .mainmenu {
            border-radius: var(--v-border-radius);
            overflow: hidden;
            max-height: var(--v-block-max-height);
            overflow-y: auto;
        }

        .verticalMenuExist .lowerLeverVerticalMenu ul {
            margin: 0;
            padding: 0;
        }

        .verticalMenuExist .lowerLeverVerticalMenu a:hover {
            cursor: pointer;
        }

        /* level 1 nodes */
        .verticalMenuExist .lowerLeverVerticalMenu > ul > li > a:first-child {
            margin: 0;
            background-image: var(--v-node-bg);
            padding: var(--v-node-padding);
            font-size: var(--v-node-font-size);
            font-weight: var(--v-node-font-weight);
            line-height: var(--v-node-line-height);
            display: block;
            color: var(--v-node-font-color);
            text-decoration: none;
            border-bottom: var(--v-border-bottom);
            cursor: pointer;
        }

        /* level 1 last node */
        .verticalMenuExist .lowerLeverVerticalMenu > ul > li:last-child > a:first-child {
            border-bottom: none 0px;
        }

        /* level 1 node hover */
        .verticalMenuExist .lowerLeverVerticalMenu > ul > li > a:first-child:hover {
            border-bottom: var(--v-border-bottom-hover);
            background-image: var(--v-node-bg-hover);
        }

        /* font awesome icon */
        .verticalMenuExist .lowerLeverVerticalMenu i {
            margin-right: var(--v-icon-margin-right);
        }

        .verticalMenuExist .lowerLeverVerticalMenu li {
            list-style-type: none;
        }

        /* all nodes */
        .verticalMenuExist .lowerLeverVerticalMenu ul li a {
            position: relative;
        }

        /* level 2 or lower node */
        .verticalMenuExist .lowerLeverVerticalMenu ul ul li a {
            color: var(--v-node-font-color-level1);
            text-decoration: none;
            font-size: var(--v-node-font-size-level1);
            font-weight: var(--v-node-font-weight-level1);
            line-height: var(--v-node-line-height-level1);
            display: block;
            padding: var(--v-node-padding-level1);
            transition: all var(--v-animation-time);
        }

            /* level 2 or lower node hover */
            .verticalMenuExist .lowerLeverVerticalMenu ul ul li a:hover {
                background: var(--v-node-bg-hover-level1);
                border-left: var(--v-node-border-left-hover-level1);
                color: var(--v-node-font-color-level1-hover);
            }

        /* level 2 or lower block */
        .verticalMenuExist .lowerLeverVerticalMenu .mainmenu ul {
            display: none;
            background-color: var(--v-block-bg-level1);
        }

        /* child block of current selected node */
        .verticalMenuExist .lowerLeverVerticalMenu li.active > ul {
            display: block;
        }

        /* level 3 or lower block */
        .verticalMenuExist .lowerLeverVerticalMenu ul ul ul {
            margin-left: var(--v-block-indent-level1);
            border-left: var(--v-node-border-left-level1);
        }

        .verticalMenuExist .lowerLeverVerticalMenu a:not(:only-child)
        {
            position : relative;
        }

        /* has children node, arrow point to right, child block is hidden */
        .verticalMenuExist .lowerLeverVerticalMenu a:not(:only-child):after {
            content: "\f104";
            font-family: var(--v-icon-font-family);
            font-weight: var(--v-icon-font-weight);
            position: absolute;
            right: 10px;
            top: 10px;
            font-size: var(--v-arrow-size);
        }

        .verticalMenuExist .lowerLeverVerticalMenu ul ul a:not(:only-child):after {
            top: 0px;
        }

        /* has children node, arrow point down, child block is opened */
        .verticalMenuExist .lowerLeverVerticalMenu .active > a:not(:only-child):after {
            font-family: var(--v-icon-font-family);
            font-weight: var(--v-icon-font-weight);
            content: "\f107";
        }

        /* current page node,  wheel icon */
        .verticalMenuExist .lowerLeverVerticalMenu .current:after {
            content: var(--v-current-node-icon);
            font-family: var(--v-icon-font-family);
            font-weight: var(--v-icon-font-weight);
            display: inline;
            margin-left: var(--v-current-node-icon-margin-left);
            color: inherit;
        }

        /* no children node */
        .verticalMenuExist .lowerLeverVerticalMenu .noChild {
        }

            /* no children node hover */
            .verticalMenuExist .lowerLeverVerticalMenu .noChild:hover {
            }
}


/*Vertical Menu CSS End (Do not change nor remove)*/


/*Color Variable Start*/
.mainMenuColors
{
--color01 : rgb(48,146,192); /*C*/
--color02 : rgb(49,152,199); /*C*/
--color03 : rgb(46,140,184); /*C*/
--color04 : rgb(161,209,232); /*C*/
--color05 : rgb(45,137,180); /*C*/
--color06 : rgb(41,124,162); /*C*/
--color07 : rgb(0,104,146); /*C*/
--color08 : rgb(0,97,135); /*C*/
--color09 : rgb(0,111,156); /*C*/
--color10 : rgb(68,178,229); /*C*/
--color11 : rgb(108,182,216); /*C*/
--color12 : rgb(61,158,204); /*C*/
--color13 : rgb(174,213,232); /*C*/
--color14 : rgb(46,180,242); /*C*/
--color15 : rgb(54,188,249); /*C*/
}
/*Color Variable End*/