﻿.horiAndVertMainMenuCssVariables {
    /* Font Size */
    --node-font-size: 16px;
    --description-font-size: var(--r-smaller-font, 0.8em);
    --parent-node-font-size-level1: 1.1em;
    --container-node-font-size-level1: 1.5em;
    /* Font Weight */
    --node-font-weight: bold;
    --parent-node-font-weight-level1: bold;
    --container-node-font-weight-level1: bold;
    /* Font Color */
    --node-font-color-level1: #000000;
    --disable-link-font-color: #cccccc;
    --mobile-node-font-color: #000000;
    --desktop-node-font-color-level0: #FFFFFF;
    --desktop-node-font-color-hover-level0: #000000;
    --mobile-current-node-font-color-level0: #FFFFFF;
    --current-node-icon-color-level1: red;
    --desktop-current-node-font-color-level0: #FFFFFF;
    --description-font-color: #808090;
    /* Line Height */
    --node-line-height: 1em;
    --node-line-height-level1: 2em;
    --container-node-line-height-level1: 1.5em;
    /* Background */
    --block-bg-level0: rgba(255,255,255,0.97);
    --mobile-hamburger-bg: rgba(0,0,0,0.1);
    --mobile-arrow-bg: rgba(0, 0, 0, 0.08);
    --desktop-block-bg-level0: transparent;
    --desktop-block-bg-color-level1: rgba(255,255,255,0.97);
    --desktop-node-bg-hover-level0: #EEEEEE;
    --mobile-current-node-bg-level0: #555555;
    --desktop-current-node-bg-level0: #555555;
    /* Padding */
    --mobile-node-padding: calc(var(--node-font-size) * 0.8125) calc(var(--node-font-size) * 1.25);
    --node-padding-left-level1: 10px;
    --desktop-block-padding-level1: 1em 1em 2em 1em;
    --desktop-node-padding-level0: calc(var(--node-font-size) * 0.8125) calc(var(--node-font-size) * 1.25);
    --column-padding: 0 1em 0 3em;
    /* Margin */
    --image-margin: 0 0;
    --description-margin-left: 2em;
    --parent-node-margin-top-level1: 1em;
    --level3orlower-node-container-margin: 0.5em;
    /* Width */
    --mobile-block-width: 100%;
    --desktop-block-width-level1: 1200px;
    --image-max-width: 80%;
    /* Border */
    --block-border-level0: 0 none;
    --mobile-block-border: none 0;
    --mobile-node-border-top-level1: 1px solid rgba(0, 0, 0, 0.05);
    --image-border: none 0px;
    /* Height */
    --mobile-block-max-height: 80vh;
    /* Others */
    --link-text-decoration: none;
    --block-shadow-level0: none;
    --menu-radius: 5px;
    --mobile-hamburger-button-size: 29px;
    --mobile-hamburger-line-color: #FFFFFF;
    --mobile-hamburger-shadow: black 1px 1px;
    --node-list-style-type-level1: disc;
    --node-list-style-type-hover-level1: circle;
    --mobile-border-radius: 5px;
    --mobile-plus-sign: '+';
    --mobile-minus-sign: '-';
    /*--desktop-block-shadow-level1: -2px 12px 8px 10px rgb(0 0 0 / 20%);*/
    --current-node-icon-level0: "\f185";
    --current-node-icon-level1: "\f185";
    --image-border-radius: 10px;
}

/* 整個主導覽列外圍 */
.mp主導覽列2 .fspsMainNav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 4;
    max-height: var(--mobile-block-max-height);
    overflow-y: scroll;
    width : 100%;
}

.mp主導覽列2:after {
    clear: both;
    content: "\00a0";
    display: block;
    height: 0;
    font: 0px/0 serif;
    overflow: hidden;
}

#main-menu {
    clear: both;
    /* Custom Setting */
    box-shadow: var(--block-shadow-level0);
    border: var(--block-border-level0);
    background-color: var(--block-bg-level0);
}

@media (min-width: 768px) {
    .mp主導覽列2 .fspsMainNav {
        width: 100%; /* put the menu to the center */
        margin: 0 auto;
        /*margin: 0 auto 0 -3px; align to the left and shew */
        position: static !important;
        max-height: initial;
        overflow-y: unset;
    }

    #main-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        background-color: var(--desktop-block-bg-level0);
    }
}

/* Mobile menu toggle button */
.mp主導覽列2 .main-menu-btn {
    float: right;
    clear: both;
    margin: 5px 10px;
    position: relative;
    display: inline-block;
    width: var(--mobile-hamburger-button-size);
    height: var(--mobile-hamburger-button-size);
    text-indent: var(--mobile-hamburger-button-size);
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* lines & gray bg */
    box-shadow: var(--mobile-hamburger-shadow);
    background-color: var(--mobile-hamburger-bg);
}

/* hamburger icon */
.mp主導覽列2 .main-menu-btn-icon,
.mp主導覽列2 .main-menu-btn-icon:before,
.mp主導覽列2 .main-menu-btn-icon:after {
    position: absolute;
    top: 50%;
    left: calc(var(--mobile-hamburger-button-size) * 0.067);
    height: calc(var(--mobile-hamburger-button-size) * 0.069);
    width: calc(var(--mobile-hamburger-button-size) * 0.828);
    background: var(--mobile-hamburger-line-color);
    transition: all 0.25s;
}

    .mp主導覽列2 .main-menu-btn-icon:before {
        content: '';
        top: calc(-0.3 * var(--mobile-hamburger-button-size));
        left: 0;
    }

    .mp主導覽列2 .main-menu-btn-icon:after {
        content: '';
        top: calc(var(--mobile-hamburger-button-size) * 0.3);
        left: 0;
    }

/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
    height: 0;
    background: transparent;
}

    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
        top: 0;
        transform: rotate(-45deg);
    }

    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
        top: 0;
        transform: rotate(45deg);
    }

/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

    /* hide the menu in mobile view */
    #main-menu-state:not(:checked) ~ #main-menu {
        display: none;
        width: var(--mobile-block-width);
    }

    #main-menu-state:checked ~ #main-menu {
        display: block;
        width: var(--mobile-block-width);
        overflow: hidden;
    }

@media (min-width: 768px) {
    #main-menu > li {
        display: block;
    }

    /* hide the button in desktop view */
    .mp主導覽列2 .main-menu-btn {
        position: absolute;
        top: -99999px;
    }

    /* always show the menu in desktop view */
    #main-menu-state:not(:checked) ~ #main-menu, #main-menu-state:checked ~ #main-menu {
        display: flex;
        width: 100%;
        justify-content: flex-end;
    }
}

.mp主導覽列2 .sm-mega {
    border: var(--mobile-block-border);
    border-radius: var(--mobile-border-radius);
}

    .mp主導覽列2 .sm-mega a, .mp主導覽列2 .sm-mega a:hover, .mp主導覽列2 .sm-mega a:focus, .mp主導覽列2 .sm-mega a:active {
        padding: var(--mobile-node-padding);
        color: var(--mobile-node-font-color);
        font-size: var(--node-font-size);
        font-weight: var(--node-font-weight);
        line-height: var(--node-line-height);
        text-decoration: var(--link-text-decoration);
    }

        .mp主導覽列2 .sm-mega a.currentTopNode {
            background: var(--mobile-current-node-bg-level0);
            color: var(--mobile-current-node-font-color-level0);
        }

            .mp主導覽列2 .sm-mega a.currentTopNode::after {
                content: var(--current-node-icon-level0);
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                display: inline;
                margin-left: 5px;
                color: inherit;
            }

        .mp主導覽列2 .sm-mega a.disabled {
            color: var(--disable-link-font-color);
        }

        .mp主導覽列2 .sm-mega a .sub-arrow {
            position: absolute;
            top: 50%;
            margin-top: calc(var(--node-font-size) * -1.0625);
            left: auto;
            right: calc(var(--node-font-size) * 0.25);
            width: calc(var(--node-font-size) * 2.125);
            height: calc(var(--node-font-size) * 2.125);
            overflow: hidden;
            font: bold calc(var(--node-font-size) * 0.875)/calc(var(--node-font-size) * 2.125) monospace !important;
            text-align: center;
            text-shadow: none;
            background: var(--mobile-arrow-bg);
        }

            .mp主導覽列2 .sm-mega a .sub-arrow::before {
                content: var(--mobile-plus-sign);
            }

        .mp主導覽列2 .sm-mega a.highlighted .sub-arrow::before {
            content: var(--mobile-minus-sign);
        }

    .mp主導覽列2 .sm-mega li {
        border-top: var(--mobile-node-border-top-level1);
    }

    .mp主導覽列2 .sm-mega > li:first-child {
        border-top: 0;
    }

    .mp主導覽列2 .sm-mega ul a, .mp主導覽列2 .sm-mega ul a:hover, .mp主導覽列2 .sm-mega ul a:focus, .mp主導覽列2 .sm-mega ul a:active {
        font-size: var(--node-font-size);
        border-left: calc(var(--node-font-size) * 0.5) solid transparent;
    }

    .mp主導覽列2 .sm-mega ul ul a,
    .mp主導覽列2 .sm-mega ul ul a:hover,
    .mp主導覽列2 .sm-mega ul ul a:focus,
    .mp主導覽列2 .sm-mega ul ul a:active {
        border-left: var(--node-font-size) solid transparent;
    }

    .mp主導覽列2 .sm-mega ul ul ul a,
    .mp主導覽列2 .sm-mega ul ul ul a:hover,
    .mp主導覽列2 .sm-mega ul ul ul a:focus,
    .mp主導覽列2 .sm-mega ul ul ul a:active {
        border-left: calc(var(--node-font-size) * 1.5) solid transparent;
    }

    .mp主導覽列2 .sm-mega ul ul ul ul a,
    .mp主導覽列2 .sm-mega ul ul ul ul a:hover,
    .mp主導覽列2 .sm-mega ul ul ul ul a:focus,
    .mp主導覽列2 .sm-mega ul ul ul ul a:active {
        border-left: calc(var(--node-font-size) * 2) solid transparent;
    }

    .mp主導覽列2 .sm-mega ul ul ul ul ul a,
    .mp主導覽列2 .sm-mega ul ul ul ul ul a:hover,
    .mp主導覽列2 .sm-mega ul ul ul ul ul a:focus,
    .mp主導覽列2 .sm-mega ul ul ul ul ul a:active {
        border-left: calc(var(--node-font-size) * 2.5) solid transparent;
    }

@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主導覽列2 .sm-mega ul {
        position: absolute;
        width: 12em;
    }

        .mp主導覽列2 .sm-mega ul li {
            float: none;
        }

    .mp主導覽列2 .sm-mega a {
        white-space: nowrap;
    }

    .mp主導覽列2 .sm-mega ul a {
        white-space: normal;
    }

    /* ...end */

    .mp主導覽列2 .sm-mega a {
        padding: var(--desktop-node-padding-level0);
        color: var(--desktop-node-font-color-level0);
    }

        .mp主導覽列2 .sm-mega a:hover, .mp主導覽列2 .sm-mega a:focus, .mp主導覽列2 .sm-mega a:active, .mp主導覽列2 .sm-mega a.highlighted {
            background: var(--desktop-node-bg-hover-level0);
            color: var(--desktop-node-font-color-hover-level0);
        }

        .mp主導覽列2 .sm-mega a.currentTopNode {
            background: var(--desktop-current-node-bg-level0);
            color: var(--desktop-current-node-font-color-level0);
        }

        .mp主導覽列2 .sm-mega a.disabled {
            background: #fff;
            color: var(--disable-link-font-color);
        }

        .mp主導覽列2 .sm-mega a.has-submenu {
            padding-right: calc(var(--node-font-size) * 2);
        }

        .mp主導覽列2 .sm-mega a .sub-arrow {
            top: 50%;
            margin-top: calc(var(--node-font-size) * -0.5);
            right: calc(var(--node-font-size) * 1.25);
            width: calc(var(--node-font-size) * 0.5);
            height: var(--node-font-size);
            font: calc(var(--node-font-size) * 0.875)/var(--node-font-size) monospace !important;
            background: transparent;
        }

        .mp主導覽列2 .sm-mega a.highlighted .sub-arrow::before {
            content: '+';
        }

    /* level 1 (static) node */
    .mp主導覽列2 .sm-mega > li {
        border-top: 0;
    }

        /* level 1 (static) first node, Home node */
        .mp主導覽列2 .sm-mega > li:first-child {
            border-left: 0;
        }

    /* level 1 (static) node 傾斜 
    .sm-mega > li > a {
        transform: skewX(-10deg);
        background-color: #c482b3; 
    }
    */

    .mp主導覽列2 .sm-mega ul {
        border: none 0;
        border-radius: var(--menu-radius);
    }

        .mp主導覽列2 .sm-mega ul a {
            border: 0 !important;
            line-height: var(--line-height);
        }

            .mp主導覽列2 .sm-mega ul a.has-submenu {
                padding-right: calc(var(--node-font-size) * 1.25);
            }

        .mp主導覽列2 .sm-mega ul > li {
            border-left: 0;
        }

            .mp主導覽列2 .sm-mega ul > li:first-child {
                border-top: 0;
            }

    .mp主導覽列2 .sm-mega .scroll-up,
    .mp主導覽列2 .sm-mega .scroll-down {
        position: absolute;
        display: none;
        visibility: hidden;
        overflow: hidden;
        background: #fff;
        height: 20px;
    }

    .mp主導覽列2 .sm-mega .scroll-up-arrow,
    .mp主導覽列2 .sm-mega .scroll-down-arrow {
        position: absolute;
        top: -2px;
        left: 50%;
        margin-left: -8px;
        width: 0;
        height: 0;
        overflow: hidden;
        border-width: 8px;
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent #555555 transparent;
    }

    .mp主導覽列2 .sm-mega .scroll-down-arrow {
        top: 6px;
        border-style: solid dashed dashed dashed;
        border-color: #555555 transparent transparent transparent;
    }
}

/* ============= Start Mega Menu ====================================================== */

#main-menu,
#main-menu > .has-mega-menu {
    position: static !important; /* Default Value is static */
}

    /* Level 1 */
    #main-menu > .has-mega-menu .scroll-up,
    #main-menu > .has-mega-menu .scroll-down {
        margin-left: 0 !important;
    }

    /* Level 2, ul.mega-menu */
    #main-menu .mega-menu {
        margin-left: -1px !important;
        margin-right: -1px !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        color: var(--node-font-color-level1);
    }

        /* clear any floats inside the mega menus */
        #main-menu .mega-menu > li {
            overflow: auto;
        }

        #main-menu .mega-menu ul {
            position: static;
            display: block;
            margin: 0.4em 0;
            border: 0;
            padding: 0;
            width: auto;
            background: transparent;
            box-shadow: none;
        }

            #main-menu .mega-menu ul ul {
                padding: 0 0 0 1em;
            }

            #main-menu .mega-menu ul li {
                display: list-item;
                list-style-type: var(--node-list-style-type-level1);
                list-style-position: outside;
                border: 0;
                line-height: var(--node-line-height-level1);
                padding-left: var(--node-padding-left-level1);
            }

                #main-menu .mega-menu ul li:hover {
                    list-style-type: var(--node-list-style-type-hover-level1);
                }

        #main-menu .mega-menu a {
            display: inline;
            border: 0;
            padding: 0;
            color: inherit;
            text-decoration: var(--link-text-decoration);
        }

            /* Current node in mega menu */
            #main-menu .mega-menu a.currentNode::after {
                content: var(--current-node-icon-level1);
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                display: inline;
                margin-left: 5px;
                color: var(--current-node-icon-color-level1);
            }

        /* simple columns inside the mega menus */
        #main-menu .mega-menu .column-1-3 {
            padding: var(--column-padding);
        }

            #main-menu .mega-menu .column-1-3 > ul {
                margin: 0 0 0 0;
            }

        #main-menu .mega-menu .hasChildren {
            margin-top: var(--parent-node-margin-top-level1);
        }

            #main-menu .mega-menu .hasChildren > a {
                font-weight: var(--parent-node-font-weight-level1);
                font-size: var(--parent-node-font-size-level1);
            }

        #main-menu .mega-menu .noLink {
            font-weight: var(--container-node-font-weight-level1);
            font-size: var(--container-node-font-size-level1);
            line-height: var(--container-node-line-height-level1);
        }

        #main-menu .mega-menu .hasChildren ul { /* level 3 or lower node container */
            margin: var(--level3orlower-node-container-margin);
        }

        #main-menu .mega-menu .description {
            font-size: var(--description-font-size);
            margin-left: var(--description-margin-left);
            display: block;
            color: var(--description-font-color);
        }

@media (max-width: 480px) {
    .notShowInMobileMode { /* Hide node in mobile mode */
        display: none !important;
    }
}

#main-menu .mega-menu .mega-menu-sample-image {
    margin: var(--image-margin);
    max-width: var(--image-max-width);
    height: auto;
    border-radius: var(--image-border-radius);
    border: var(--image-border);
    display: block;
}

/* Desktop Mode */
@media (min-width: 768px) {
    #main-menu .mega-menu > li { /* Container of div.column-1-3*/
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between;
        align-content: stretch;
        padding: var(--desktop-block-padding-level1);
        width: var(--desktop-block-width-level1);
        max-width: 100%;
        margin: 0 0 0 auto;
        background-color: #fcfcf2;
        border-radius: 20px 0 0 20px;
    }

    #main-menu .mega-menu .column-1-3 {
        width: 30%;
    }
}

/* 彈出 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: 0;
            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, default for mobile situation */
.verticalMenuExist .fspsVerticalMenuPH {
    display: none;
}

@media (min-width: 768px) {

    .verticalMenuExist .fspsVerticalMenuPH {
        display: block;
    }

    .verticalMenuExist .lowerLeverVerticalMenu {
        /* Font Size */
        --v-heading-font-size: 1.5em;
        /* Font Weight */
        --v-node-font-weight: 800;
        --v-icon-font-weight: 900;
        /* Font Color */
        --v-heading-font-color: #FFFFFF;
        --v-node-font-color: var(--color08);
        --v-arrow-color: #000000;
        --v-current-node-font-color: #FFFFFF;
        /* Line Height */
        /* Background */
        --v-heading-bg: linear-gradient(to bottom, var(--color-darkgreen01), var(--color-darkgreen02));
        --v-block-bg: linear-gradient(to bottom, #FFFFFF 95%, var(--color04) 100%);
        --v-node-bg-hover: linear-gradient(135deg, #FFFFFF 70%, var(--color13) 100%);
        --v-current-node-bg: linear-gradient(to bottom, var(--color02), var(--color03));
        /* Padding */
        --v-heading-padding: 0.3em 0.5em;
        --v-block-padding: 1em 0;
        --v-node-padding: 0.4em 0.5em;
        /* Margin */
        --v-heading-margin: 0 0 0.5em 0;
        --v-arrow-margin-left: 0.5em;
        --v-current-node-icon-margin-left: 0.5em;
        /* Width */
        /* Border */
        --v-node-border-left-width: 4px;
        --v-node-border-left-color-highlight: orange;
        /* Height */
        /* Others */
        --v-block-max-height: 80vh;
        --v-border-radius: 0.2em;
        --v-animation-time: 7s;
        --v-lower-lever-indent: 1em;
        --v-icon-font-family: "Font Awesome 5 Free";
    }

        /* 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);
        }

        /* reset our lists to remove bullet points and padding */
        .verticalMenuExist .lowerLeverVerticalMenu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* 整個垂直主導覽列外圍，有外框及陰影 */
        .verticalMenuExist .lowerLeverVerticalMenu .mainmenu {
            padding: var(--v-block-padding);
            background-image: var(--v-block-bg);
            border-radius: var(--v-border-radius);
            max-height: var(--v-block-max-height);
            overflow-y: auto;
        }

            /* set ALL links font color */
            .verticalMenuExist .lowerLeverVerticalMenu .mainmenu a {
                display: block;
                text-decoration: none;
                color: var(--v-node-font-color);
                padding: var(--v-node-padding);
                border-left: solid var(--v-node-border-left-width) transparent;
                font-weight: var(--v-node-font-weight);
            }

                .verticalMenuExist .lowerLeverVerticalMenu .mainmenu a:hover {
                    border-left: solid var(--v-node-border-left-width) var(--v-node-border-left-color-highlight);
                    background-image: var(--v-node-bg-hover);
                }

        .verticalMenuExist .lowerLeverVerticalMenu a.hasChildren::after {
            content: "\f101"; /* Arrow */
            font-family: var(--v-icon-font-family);
            font-weight: var(--v-icon-font-weight);
            color: var(--v-arrow-color);
            display: inline-block;
            margin-left: var(--v-arrow-margin-left);
        }

        .verticalMenuExist .lowerLeverVerticalMenu a.stayOpen::after {
            transform: rotate(90deg);
        }

        /* 預設所有下層 submenu 都是隱藏的 */
        .verticalMenuExist .lowerLeverVerticalMenu .submenu {
            overflow: hidden;
            max-height: 0;
            transition: all var(--v-animation-time) ease-out;
            padding-left: var(--v-lower-lever-indent);
        }

        .verticalMenuExist .lowerLeverVerticalMenu .mainmenu a.stayOpen + .submenu {
            display: block;
            max-height: 1200px;
        }

        .verticalMenuExist .lowerLeverVerticalMenu a.current, .verticalMenuExist .lowerLeverVerticalMenu a.current:hover {
            background-color: var(--color01);
            background-image: var(--v-current-node-bg);
            color: var(--v-current-node-font-color);
            border-left: var(--v-node-border-highlight);
        }

            .verticalMenuExist .lowerLeverVerticalMenu a.current:hover {
            }

            /* 現正顯示的節點 */
            .verticalMenuExist .lowerLeverVerticalMenu a.current::after {
                content: "⭐";
                font-weight: var(--v-icon-font-weight);
                display: inline-block;
                color: #FFFFFF;
                margin-left: var(--v-current-node-icon-margin-left);
            }
}

/*Vertical Menu CSS End (Do not change nor remove)*/


/*Color Variable Start*/
.mainMenuColors
{
--color01 : rgb(78,192,125); /*C*/
--color02 : rgb(79,199,127); /*C*/
--color03 : rgb(76,184,122); /*C*/
--color04 : rgb(191,232,234); /*C*/
--color05 : rgb(75,180,121); /*C*/
--color06 : rgb(71,162,117); /*C*/
--color07 : rgb(30,146,72); /*C*/
--color08 : rgb(30,135,72); /*C*/
--color09 : rgb(30,156,72); /*C*/
--color10 : rgb(98,229,146); /*C*/
--color11 : rgb(138,216,183); /*C*/
--color12 : rgb(91,204,138); /*C*/
--color13 : rgb(204,232,246); /*C*/
--color14 : rgb(76,242,125); /*C*/
--color15 : rgb(84,249,134); /*C*/
}
/*Color Variable End*/






