@font-face {
    font-family: 'Noto Sans TC Light';
    src: url(../fonts/Noto_Sans_TC/NotoSansTC-Light.otf)format('woff2');
}

.navbar {
    height: 65px;
    padding: 0px 2% !important;
}

#logo {
    height: 45px;
}

.toggler-area a {
    color: transparent !important;
    text-decoration: none !important;
}

nav {
    height: 85px;
    background-color: white;
}

.navbar-nav {
    padding-right: 60px;
}

.nav-item {
    font-family: 'Noto Sans TC Light';
    font-size: 19px !important;
    font-weight: 600;
    color: #3e3a39;
    padding-right: 13px;
}


.navbar-toggler {
    border: none !important;

}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.toggler-area {
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0px;
    top: 20px;
}

.active {
    color: #84B81F !important;
}

@media (max-width: 991px) {
    #logo {
        height: 50px;
    }

    .navbar {
        height: 65px;
        padding: 0px 5% !important;
    }

    .navbar>div {
        position: static !important;
    }


    .toggler-area {
        position: absolute;
        right: 0px;
        top: 15px;
    }

    .navbar-collapse {
        flex-basis: 50%;
        flex-grow: 0;
        background-color: white;
        width: 150px !important;
        padding: 0px 25px !important;
        border-radius: 40px 0px 40px 40px;
        position: absolute;
        right: 0px;
        top: 61px;
        z-index: 20;
    }

    .nav-item {
        margin: 5px 0px;
        padding-right: 0px !important;
        font-size: 17px !important;
    }

    .navbar-nav {
        padding-right: 0px !important;
        width: 90%;
    }
}