my_tests/assets/css/components/_custom-navbar.scss

$main-font-family: Helvetica, Noto Sans TC, Roboto, 'Microsoft JhengHei', Arial, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

// navbar-mobile
.nb-mobile {

    top: 66px;
    bottom: 0;
    transform: translateX(-100vw);
    width: 100vw;
    z-index: 1040;
    background: #FFF;
    position: absolute;

    &.active {
        top: 56px;
        transform: translateX(0);
        bottom: 0;
        width: 100vw;
        overflow-x: hidden;
        overflow-y: auto;
        background: #FFF;
        display: block;
        position: fixed;
    }


    .nb-mobile-arrow {
        padding-left: 1rem;
        padding-right: 1rem;
        color: rgba(0, 0, 0, 0.87);

        .fa-angle-up {
            display: none;
            &.active {
                display: block;
            }
        }
        .fa-angle-down {
            display: none;
            &.active {
                display: block;
            }
        }
    }

    .nb-mobile-secItem {
        display: none;
        &.active {
            display: block;
        }
    }

    ul {
        padding-left: 0;
    }


    ul li {
        list-style: none;
        font-family: $main-font-family;
        padding-left: 30px;
        padding-right: 30px;

        .single-section-head {
            color: #34404B;
            margin: 0;
            padding: 0.5rem 0;
            background: #FFF;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-weight: bold !important;
            &:hover {
                background-color: #F4F4F4;
            }
            &.active {
                color: #EE751B;
            }
            img {
                margin-right: 5px;
            }
        }

        .multi-section-head-sub-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            &:hover {
                background: #F4F4F4;
            }

            a {
                width: 80%;
            }
        }

        .multi-section-head {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            font-weight: bold !important;
            &.active {
                color: #EE751B;
            }
            img {
                margin-right: 5px;
            }
        }

        .multi-section-head-sub {
            color: #34404B;
            font-weight: 300;
            margin: 0;
            padding-left: 3rem; // 因應專欄架構改變
            &:hover,
            &.active {
                background: #F4F4F4;
            }
            a {
                color: #34404B;
            }
        }

        .multi-section-head-sub--divider {
            width: 100%;
            height: 1px;
            background-color: #D7D7D7;
            margin: 0.2rem 0;
        }

    }

    .single-section-head-sub--divider {
        width: 100%;
        height: 1px;
        background-color: #D7D7D7;
        margin: 0.2rem 0;
    }

    .multi-section-wrapper {
        &:active {
            background-color: transparent;
        }
    }

    .multi-section {
        padding: 0.5rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        &:hover {
            background-color: #F4F4F4;
        }

        a {
            display: flex;
            width: 80%;
            color: #34404B;
            &.active {
                color: #EE751B;
            }
        }
    }

    ul a:hover {
        text-decoration: none;
    }

    .nb-mobile-arrow-third {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .fa-arrow-third {
        &.is-rotate{
            transform: rotate(180deg);
        }
    }

    .nb-divider {
        margin: 0.2rem 0;
        border-bottom: 1px solid #D7D7D7;
    }

    .nb-mobile-thdItem {
            display: none;
            
            &.is-show {
                display: block;
            }
        > a > li {
            color: #34404B;
            padding-left: 5rem;
            margin: 0.2rem 0 0;
            font-weight: 300;

            &:hover,
            &.active {
                background: #F4F4F4;
            }
        }

        .thd-menu--divider {
            width: 100%;
            height: 1px;
            background-color: #D7D7D7;
            margin: 0.2rem 0;
        }
    }

}


// footer-fix

.footer-fix {
    width: 100%;
    background-color: #FFF;
    z-index: 1029;
    box-shadow: 0 8px 15px 2px rgba(0,0,0,.12);

    .footer-fix-wrapper {
        width: 20%;
        text-align: center;
        text-decoration: none;
        &:active,
        &:visited {
            background-color: #e6e6e6;
            text-decoration: none;
        }
        a {
            &:hover {
                text-decoration: none;
            }
        }
    }

    .footer-fix-title {
        margin-top: 5px;
        color: #EE7800;
        font-size: 13px;
    }
}

.top-designer,
.search-bar,
.search-tab {
    display: none;
}