<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.horiAndVertMainMenuCssVariables {
    /* Font Size */
    --node-font-size: 18px;
    --mobile-node-font-size-level1: calc(var(--node-font-size) * 0.9);
    /* Font Weight */
    --node-font-weight: bold;
    /* Font Color */
    --node-font-color-level0: #ffffff;
    --mobile-node-font-color-hover: #000000;
    --current-node-font-color-level0: #ffffff;
    --current-node-icon-color-level0: #FFFFFF;
    --current-node-font-color-level1: #000000;
    --desktop-node-font-color-level1: #000000;
    --desktop-node-font-color-hover-level1: var(--color08);
    --desktop-arrow-color: #555555;
    /* Line Height */
    --node-line-height: 1em;
    /* Background */
    --block-bg-level0: #1963CC;
    --mobile-hamburger-bg: transparent;
    --block-bg-level1: rgba(133,184,203, 0.7);
    --desktop-block-bg-level1: #FFFFFF;
    --desktop-node-bg-hover-level1: #eeeeee;
    /* Padding */
    --mobile-node-padding: calc(var(--node-font-size) * 0.73) calc(var(--node-font-size) * 1.11);
    /* Margin */
    /* Width */
    --mobile-block-width: 100vw;
    /* Border */
    --block-border-level0: 0 none;
    --mobile-node-border-top: 1px solid rgba(0, 0, 0, 0.05);
    --mobile-node-border-left-level1: 8px solid transparent;
    --desktop-block-border-color: #bbbbbb;
    --desktop-block-border-level1: 1px solid var(--desktop-block-border-color);
    /* 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: #5c544e;
    --mobile-hamburger-shadow: none;
    --menu-container-radius: 50px;
    --mobile-plus-sign: '+';
    --mobile-minus-sign: '-';
    --current-node-icon-level0: "\f005";
    --current-node-icon-level1: "\f185";
    --desktop-block-shadow-level1: 0 5px 9px rgba(0, 0, 0, 0.2);
}

    /* 整個主導覽列外圍 */
.mp主導覽列3 .fspsMainNav {
    position: fixed;
    top: 0;
    left: 0px;
    z-index: 4;
    max-height: var(--mobile-block-max-height);
    overflow-y: scroll;
}

    .mp主導覽列3:after {
        clear: both;
        content: "\00a0"; /*Unicode Character 'NO-BREAK SPACE'*/
        display: block;
        height: 0;
        font: 0px/0 serif;
        overflow: hidden;
    }

/* ul 主導覽列節點容器 */
#main-menu {
    clear: both;

    /* Custom Setting */
    box-shadow: var(--block-shadow-level0);
    border: var(--block-border-level0);
    background: var(--block-bg-level0);
    border-radius: var(--menu-radius); /* 圓角 */
}

/* Desktop Mode */
@media (min-width: 768px) {
    #main-menu {
        clear: none;
    }

    .mp主導覽列3 .fspsMainNav {
        border-radius: var(--menu-container-radius); /* 大圓角 */
        position: static;
        max-height: initial;
        overflow-y: unset;
    }
}

/* 手機版, 整個主導覽列開合按鈕 */
.mp主導覽列3 .main-menu-btn {
    float: right;
    margin: 6px 10px;
    margin-top: 60px;
    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);
    box-shadow: var(--mobile-hamburger-shadow);
    background-color: rgba(255, 255, 255, 0);
}

/* hamburger icon，張開用 */
.mp主導覽列3 .main-menu-btn-icon,
.mp主導覽列3 .main-menu-btn-icon:before,
.mp主導覽列3 .main-menu-btn-icon:after {
    position: absolute;
    top: calc(50% - var(--mobile-hamburger-button-size) * 0.04);
    left: calc(var(--mobile-hamburger-button-size) * 0.15);
    height: calc(var(--mobile-hamburger-button-size) * 0.069);
    width: calc(var(--mobile-hamburger-button-size) * 0.7);
    background: var(--mobile-hamburger-line-color);
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

    .mp主導覽列3 .main-menu-btn-icon:before {
        content: '';
        top: calc(-0.3 * var(--mobile-hamburger-button-size));
        left: 0;
    }

    .mp主導覽列3 .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;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
        top: 0;
        -webkit-transform: rotate(45deg);
        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);
    }


@media (min-width: 768px) {
    /* 不顯示展開按鈕 */
    .mp主導覽列3 .main-menu-btn {
        position: absolute;
        top: -99999px;
    }

    /* always show the menu in desktop view */
    #main-menu-state:not(:checked) ~ #main-menu {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
}

/* ============================================================================================================= */

/* 整個主導覽列 */
.mp主導覽列3 .sm-clean {
}

    /*預設節點樣式*/
    .mp主導覽列3 .sm-clean a, .mp主導覽列3 .sm-clean a:hover, .mp主導覽列3 .sm-clean a:focus, .mp主導覽列3 .sm-clean a:active {
        padding: var(--mobile-node-padding);
        /* make room for the toggle button (sub indicator) */
        padding-right: calc(var(--node-font-size) * 3.2);
        color: var(--node-font-color-level0);
        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主導覽列3 .sm-clean a.currentTopNode {
            color: var(--current-node-font-color-level0);
        }

            .mp主導覽列3 .sm-clean a.currentTopNode::after {
                content: var(--current-node-icon-level0);
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                display: inline;
                margin-left: 5px;
                color: var(--current-node-icon-color-level0);
                font-size: 0.9em;
                line-height: 1em;
            }

        /* 已停用節點預設樣式 */
        .mp主導覽列3 .sm-clean a.disabled {
            color: #bbbbbb;
        }

        /* 有下層節點的節點的符號（+,-）樣式 */
        .mp主導覽列3 .sm-clean a .sub-arrow {
            position: absolute;
            top: 50%;
            margin-top: calc(var(--node-font-size) * -0.944);
            left: auto;
            right: calc(var(--node-font-size) * 0.222);
            width: calc(var(--node-font-size) * 1.8889);
            height: calc(var(--node-font-size) * 1.8889);
            overflow: hidden;
            font: bold calc(var(--node-font-size) * 0.8889)/calc(var(--node-font-size) * 1.8889) monospace !important;
            text-align: center;
            text-shadow: none;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 20%;
        }

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

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

    /* 左上、右上角圓角 */
    .mp主導覽列3 .sm-clean &gt; li:first-child &gt; a, .mp主導覽列3 .sm-clean &gt; li:first-child &gt; :not(ul) a {
        border-radius: var(--menu-radius) var(--menu-radius) 0 0;
    }

    /* 左下、右下角圓角 */
    .mp主導覽列3 .sm-clean &gt; li:last-child &gt; a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; *:not(ul) a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; *:not(ul) a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; *:not(ul) a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; *:not(ul) a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; *:not(ul) a, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul {
        border-radius: 0 0 var(--menu-radius) var(--menu-radius);
    }

        .mp主導覽列3 .sm-clean &gt; li:last-child &gt; a.highlighted, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; *:not(ul) a.highlighted, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; a.highlighted, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; *:not(ul) a.highlighted, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; a.highlighted, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; *:not(ul) a.highlighted, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; a.highlighted, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; *:not(ul) a.highlighted, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; a.highlighted, .mp主導覽列3 .sm-clean &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; ul &gt; li:last-child &gt; *:not(ul) a.highlighted {
            border-radius: 0;
        }

    /* 每個節點之間 */
    .mp主導覽列3 .sm-clean li {
        border-top: var(--mobile-node-border-top);
    }

    /* Home 節點 */
    .mp主導覽列3 .sm-clean &gt; li:first-child {
        border-top: 0;
    }

    /* 第2層或以下 */
    .mp主導覽列3 .sm-clean ul {
        background: var(--block-bg-level1);
    }

        /* 第2層或以下節點 */
        .mp主導覽列3 .sm-clean ul a, .mp主導覽列3 .sm-clean ul a:hover, .mp主導覽列3 .sm-clean ul a:focus, .mp主導覽列3 .sm-clean ul a:active {
            font-size: var(--mobile-node-font-size-level1);
            border-left: var(--mobile-node-border-left-level1);
        }

        /* 第3層節點 */
        .mp主導覽列3 .sm-clean ul ul a,
        .mp主導覽列3 .sm-clean ul ul a:hover,
        .mp主導覽列3 .sm-clean ul ul a:focus,
        .mp主導覽列3 .sm-clean ul ul a:active {
            border-left: calc(var(--node-font-size) * 0.9) solid transparent;
        }

        /* 第4層節點 */
        .mp主導覽列3 .sm-clean ul ul ul a,
        .mp主導覽列3 .sm-clean ul ul ul a:hover,
        .mp主導覽列3 .sm-clean ul ul ul a:focus,
        .mp主導覽列3 .sm-clean ul ul ul a:active {
            border-left: calc(var(--node-font-size) * 1.4) solid transparent;
        }

        /* 第5層節點 */
        .mp主導覽列3 .sm-clean ul ul ul ul a,
        .mp主導覽列3 .sm-clean ul ul ul ul a:hover,
        .mp主導覽列3 .sm-clean ul ul ul ul a:focus,
        .mp主導覽列3 .sm-clean ul ul ul ul a:active {
            border-left: calc(var(--node-font-size) * 1.8) solid transparent;
        }

        /* 第6層節點 */
        .mp主導覽列3 .sm-clean ul ul ul ul ul a,
        .mp主導覽列3 .sm-clean ul ul ul ul ul a:hover,
        .mp主導覽列3 .sm-clean ul ul ul ul ul a:focus,
        .mp主導覽列3 .sm-clean ul ul ul ul ul a:active {
            border-left: calc(var(--node-font-size) * 2.3) solid transparent;
        }

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


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

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

@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主導覽列3 .sm-clean ul {
        position: absolute;
        width: 12em;
    }

    .mp主導覽列3 .sm-clean li {
        float: left;
    }

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

    .mp主導覽列3 .sm-clean ul li {
        float: none;
    }

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

    .mp主導覽列3 .sm-clean ul a {
        white-space: normal;
    }

    .mp主導覽列3 .sm-clean .sm-nowrap &gt; li &gt; a, .mp主導覽列3 .sm-clean .sm-nowrap &gt; li &gt; :not(ul) a {
        white-space: nowrap;
    }

    /* ...end */

    /* static Block 靜態方塊 */
    .mp主導覽列3 .sm-clean {
        padding: 0 calc(var(--node-font-size) * 0.5556);
    }

        /* 第一層，節點預設樣式 */
        .mp主導覽列3 .sm-clean a, .mp主導覽列3 .sm-clean a:hover, .mp主導覽列3 .sm-clean a:focus, .mp主導覽列3 .sm-clean a:active, .mp主導覽列3 .sm-clean a.highlighted {
            padding: calc(var(--node-font-size) * 0.85);
            color: var(--node-font-color-level0);
            border-radius: 0 !important;
        }

            /* 第一層，節點 Hover 樣式 */
            .mp主導覽列3 .sm-clean a:hover, .mp主導覽列3 .sm-clean a:focus, .mp主導覽列3 .sm-clean a:active, .mp主導覽列3 .sm-clean a.highlighted {
                color: var(--mobile-node-font-color-hover);
            }

            /* 第一層，現選節點 */
            .mp主導覽列3 .sm-clean a.currentTopNode {
                color: var(--current-node-font-color-level0);
            }

            /* 第一層，停用節點 */
            .mp主導覽列3 .sm-clean a.disabled {
                color: #bbbbbb;
            }

            .mp主導覽列3 .sm-clean a.has-submenu {
                padding-right: calc(var(--node-font-size) * 1.8);
            }

            /* 第一層，向下箭頭 */
            .mp主導覽列3 .sm-clean a .sub-arrow {
                top: 50%;
                margin-top: -2px;
                right: 12px;
                width: 0;
                height: 0;
                border-width: calc(var(--node-font-size) * 0.3);
                border-style: solid dashed dashed dashed;
                border-color: var(--desktop-arrow-color) transparent transparent transparent;
                background: transparent;
                border-radius: 0;
            }

                /* 桌面版不顯示 '+'  */
                .mp主導覽列3 .sm-clean a .sub-arrow::before {
                    display: none;
                }

        /* 桌面版節點間不顯示 Border */
        .mp主導覽列3 .sm-clean li {
            border-top: 0;
        }

        /*第2層的向上箭頭*/
        .mp主導覽列3 .sm-clean &gt; li &gt; ul::before,
        .mp主導覽列3 .sm-clean &gt; li &gt; ul::after {
            content: '';
            position: absolute;
            top: -18px;
            left: 30px;
            width: 0;
            height: 0;
            overflow: hidden;
            border-width: 9px;
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent var(--desktop-block-border-color) transparent;
        }

        .mp主導覽列3 .sm-clean &gt; li &gt; ul::after {
            top: -16px;
            left: 31px;
            border-width: 8px;
            border-color: transparent transparent var(--desktop-block-bg-level1) transparent;
        }

        /* 第2層方塊 */
        .mp主導覽列3 .sm-clean ul {
            border: var(--desktop-block-border-level1); /* 顏色(3)邊框 */
            padding: 5px 0;
            background: var(--desktop-block-bg-level1);
            border-radius: var(--menu-radius) !important;
            box-shadow: var(--desktop-block-shadow-level1);
        }

            /* 第 2 層節點 */
            .mp主導覽列3 .sm-clean ul a, .mp主導覽列3 .sm-clean ul a:hover, .mp主導覽列3 .sm-clean ul a:focus, .mp主導覽列3 .sm-clean ul a:active, .mp主導覽列3 .sm-clean ul a.highlighted {
                border: 0 !important;
                padding: calc(var(--node-font-size) * 0.55556) calc(var(--node-font-size) * 1.1111);
                color: var(--desktop-node-font-color-level1);
            }

                /* 第 2 層節點 Hover */
                .mp主導覽列3 .sm-clean ul a:hover, .mp主導覽列3 .sm-clean ul a:focus, .mp主導覽列3 .sm-clean ul a:active, .mp主導覽列3 .sm-clean ul a.highlighted {
                    background: var(--desktop-node-bg-hover-level1);
                    color: var(--desktop-node-font-color-hover-level1);
                }

                /* 第 2 層節點現選 */
                .mp主導覽列3 .sm-clean ul a.currentNode, .mp主導覽列3 .sm-clean ul a.currentNode::after {
                    color: var(--desktop-node-font-color-hover-level1); /* 顏色(6)文字 */
                }

                /* 第 2 層節點停用 */
                .mp主導覽列3 .sm-clean ul a.disabled {
                    background: #fff;
                    color: #cccccc; /* 顏色(7)文字 */
                }

                /* 有下一層，右方預備空間顯示箭頭 */
                .mp主導覽列3 .sm-clean ul a.has-submenu {
                    padding-right: calc(var(--node-font-size) * 1.8);
                }

                /* 第 2 層節點，下層箭頭 */
                .mp主導覽列3 .sm-clean ul a .sub-arrow {
                    right: 8px;
                    top: 50%;
                    margin-top: -5px;
                    border-width: calc(var(--node-font-size) * 0.27778);
                    border-style: dashed dashed dashed solid;
                    border-color: transparent transparent transparent var(--desktop-arrow-color);
                }

        .mp主導覽列3 .sm-clean .scroll-up,
        .mp主導覽列3 .sm-clean .scroll-down {
            position: absolute;
            display: none;
            visibility: hidden;
            overflow: hidden;
            background: #fff;
            height: 20px;
        }

            .mp主導覽列3 .sm-clean .scroll-up:hover,
            .mp主導覽列3 .sm-clean .scroll-down:hover {
                background: #eeeeee;
            }

                .mp主導覽列3 .sm-clean .scroll-up:hover .scroll-up-arrow {
                    border-color: transparent transparent var(--color02) transparent;
                }

                .mp主導覽列3 .sm-clean .scroll-down:hover .scroll-down-arrow {
                    border-color: var(--color02) transparent transparent transparent;
                }

        /*彈出方塊，當不夠高度顯示時，顯示的箭頭*/
        .mp主導覽列3 .sm-clean .scroll-up-arrow,
        .mp主導覽列3 .sm-clean .scroll-down-arrow {
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -6px;
            width: 0;
            height: 0;
            overflow: hidden;
            border-width: 6px;
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent #555555 transparent;
        }

        .mp主導覽列3 .sm-clean .scroll-down-arrow {
            top: 8px;
            border-style: solid dashed dashed dashed;
            border-color: #555555 transparent transparent transparent;
        }
}

/* 彈出 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;
        }
    }
}

/*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*/
/*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: bold;
        /* Font Color */
        --v-heading-font-color: #FFFFFF;
        --v-node-font-color: var(--color08);
        --v-node-font-color-hover: #FFFFFF;
        --v-arrow-color: #000000;
        --v-current-node-font-color: var(--color02);
        /* Line Height */
        /* Background */
        --v-heading-background: linear-gradient(to bottom, var(--color02), var(--color03));
        --v-block-background: linear-gradient(to bottom, #FFFFFF 95%, var(--color04) 100%);
        --v-node-bg-hover: var(--color15);
        /* Padding */
        --v-heading-padding: 0.3em 0.5em;
        --v-block-padding: 1em 0;
        --v-node-padding: 0.2em 0.5em 0.2em 0.5em;
        /* Margin */
        --v-heading-margin: 0 0 0.5em 0;
        --v-arrow-margin-right: 6px;
        --v-current-node-margin-left: 7px;
        /* 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-lower-lever-indent: 1em;
    }
        /* 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-background);
            color: var(--v-heading-font-color);
            padding: var(--v-heading-padding);
            border-radius: var(--v-border-radius);
        }

        .verticalMenuExist .lowerLeverVerticalMenu .mainmenu {
            margin: 0;
            padding: var(--v-block-padding);
            background-image: var(--v-block-background);
            border-radius: var(--v-border-radius);
            max-height: var(--v-block-max-height);
            overflow-y: auto;
        }

        .verticalMenuExist .lowerLeverVerticalMenu ul {
            list-style-type: none;
            padding: 0 0 0 var(--v-lower-lever-indent);
        }

        .verticalMenuExist .lowerLeverVerticalMenu li {
            padding: 0 0.5em;
            font-weight: var(--v-node-font-weight);
        }

        .verticalMenuExist .lowerLeverVerticalMenu a {
            color: var(--v-node-font-color);
            text-decoration: none;
            padding: var(--v-node-padding);
            display: block;
            border-left: var(--v-node-border-left-width) solid transparent;
        }

            .verticalMenuExist .lowerLeverVerticalMenu a:hover {
                color: var(--v-node-font-color-hover);
                border-left: var(--v-node-border-left-width) solid var(--color03);
                background-color: var(--v-node-bg-hover);
            }

        .verticalMenuExist .lowerLeverVerticalMenu .ptParent { /* Has children node */
            cursor: pointer;
            user-select: none;
            font-weight: bold;
            display: block;
            padding: var(--v-node-padding);
        }

            .verticalMenuExist .lowerLeverVerticalMenu .ptParent::before {
                content: "\25B6"; /* Arrow */
                color: var(--v-arrow-color);
                display: inline-block;
                margin-right: var(--v-arrow-margin-right);
            }

        .verticalMenuExist .lowerLeverVerticalMenu .ptParent-down::before {
            transform: rotate(90deg);
        }

        .verticalMenuExist .lowerLeverVerticalMenu .nested {
            display: none;
        }

        .verticalMenuExist .lowerLeverVerticalMenu .active {
            display: block;
        }

        .verticalMenuExist .lowerLeverVerticalMenu .current {
            color: var(--v-current-node-font-color);
            border-left: var(--v-node-border-left-width) solid var(--v-node-border-left-color-highlight);
            margin-left: var(--v-current-node-margin-left);
        }
}

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





</pre></body></html>