my_tests/assets/css/components/_custom.scss

$main-font-family: 'Microsoft JhengHei', Helvetica, Noto Sans TC, Roboto, Arial, sans-serif;
$main-color: #EE7800;

// navbar
.navbar {
    padding: 0 1rem;

    &.navbar-member {
        padding: 0 1.5rem;
        background-color: #F5F5F5;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
    }

    .navbar-nav {

        .nav-item {
            text-align: center;
        }

        .nav-link {
            color: rgba(0, 0, 0, .87);
            font-size: 1.17rem;
            font-family: $main-font-family;
            border-radius: 0;
            background-color: transparent;
            padding: 1.075rem 10px;
            margin: 0 8px;
            border-bottom: 4px solid transparent;
            &:hover {
                cursor: pointer;
                color: rgba(0, 0, 0, 0.87);
                // background-color:#e6e6e6; //因應專欄架構改變
                background-color: transparent;
                border-bottom: 4px solid $main-color;
            }
            &.active {
                // background-color:#e6e6e6; //因應專欄架構改變
                background-color: transparent;
                color: rgba(0, 0, 0, 0.87);
                border-bottom: 4px solid $main-color;
            }
            &:active {
                // background-color: #e6e6e6; // 找靈感廣宣需求
                background-color: transparent; //因應專欄架構改變
                color: rgba(0, 0, 0, 0.87);
                border-bottom: 4px solid $main-color;
            }
        }

        .dropdown-item {
            font-family: $main-font-family;
            &:hover {
                // background-color:#e6e6e6; //因應專欄架構改變
                background-color: transparent;

                &+.arrow-right {
                    color: $main-color;
                }
            }
            &:active {
                // color: #000; //因應專欄架構改變
                color: $main-color;
                background-color: transparent;
            }
        }

    }

    .nav-user {
        a {
            color: rgba(0, 0, 0, 0.87);
            font-family: $main-font-family;
            width: 100%;
            height: 100%;
            &:hover {
                color: #727679;
                text-decoration: none;
            }
        }
        .dropdown-origin-width {
            right: 0;
            left: auto;
            min-width: 7.6rem;
        }
        img {
            border-radius: 50%;
        }

        .nav-user-login {
            &:hover {
                cursor: pointer;
            }
        }

        .nav-user-wrapper.dropdown {
            &:hover {
                .dropdown-menu {
                    display: block;
                }
            }
        }
    }

    .dropdown-menu {
        top: 95%;

        &.dropdown-level-width {
            min-width: 13.5rem;
            padding: 0;
        }

    }

    .arrow-right {
        padding: 0.5rem;
    }
}

//因應專欄架構改變
.dropdown-menu li {
    position: relative;
}

.nav-item .thdmenu-block {
    display: none;
    position: absolute;
    left: 99.5%;
    top: -4px;
}

.dropdown-sub:hover>div,
.dropdown-sub:hover .submenu {
    color: #EE7800;
}

.thdmenu-block>li:hover > .dropdown-item {
    color: #EE7800;
}

.dropdown-menu>li:hover > .thdmenu-block {
    display: block;
}

.navbar-nav>li:hover > .dropdown-menu {
    display: block;
}

// foooter
.footer{
    $footer-circle-color:#d1d2d3;
    background-color: #f4f4f4 ;

    .footer-content{
        font-family: $main-font-family;

        a{
            color: #727679 ;
            &:hover{
                text-decoration: none;
            }
        }

        .footer-content-tel{
            font-size: 13px;
        }

    }

    .footer-media-wrapper:hover{
        background-color: rgba(241, 241, 241, 0.082);

        .footer-media{
            color: #3b5998;
        }

    }

    .footer-block:nth-child(1), .footer-block:nth-child(2){
        border-right: 1px solid $footer-circle-color;
    }


    .footer-note{
        .footer-note-item:nth-child(1), .footer-note-item:nth-child(2){
            border-right: 1px solid $footer-circle-color;
        }

    }

    .footer-divider-horizon{
        width: 90%;
        border-top: 1px solid $footer-circle-color;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-divider-straight{
        background-color: $footer-circle-color;
        width: 1px;
        height: 36px;
    }

    .footer-media-item{
        display: block;
        &.after{
            display: none;
        }
    }

    .footer-content a:hover{
        .footer-media-item.before{
            display: none;
        }
        .footer-media-item.after{
            display: block;
        }

    }

}

// Modal-隱私保護

.privacy{
    font-family: $main-font-family;
    .modal-body{
        li{
            font-size: 14px;
            line-height: 22px;
        }
        a:hover{
            text-decoration: none;
        }
    }
}

.aboutUs{
    font-family: $main-font-family;

    .modal-content{
        position: relative;
        button{
            position: absolute;
            right: 3%;
            top: 2%;
        }

        .aboutUs-title{
            margin-left: auto;
            margin-right: auto;
        }
        .modal-body{
            p{
                font-size: 14px;
            }
        }
    }

}