﻿#tabstyle .nav, #tabstyle01 .nav, #tabstyle02 .nav, #tabstyle03 .nav {
    --bs-nav-link-color: rgba(186, 189, 86, .5);
    --bs-nav-link-hover-color: rgba(102, 100, 100, 1);
}

#tabstyle .nav-link, #tabstyle01 .nav-link, #tabstyle02 .nav-link, #tabstyle03 .nav-link {
    border: none;
    /*border-color: rgba(186, 189, 86, .5);*/
    font-size: 16px;
    background: rgba(102, 100, 100, .08);
    color: rgba(102, 100, 100, 1);
}

#tabstyle .nav-pills .nav-link.active, .nav-pills .show > .nav-link, #tabstyle01 .nav-pills .nav-link.active, .nav-pills .show > .nav-link,
#tabstyle02 .nav-pills .nav-link.active, .nav-pills .show > .nav-link, #tabstyle03 .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: rgba(0, 36, 77, .5);
    color: white;
}

#tabstyle .nav-pills .nav-link, #tabstyle01 .nav-pills .nav-link, #tabstyle02 .nav-pills .nav-link, #tabstyle03 .nav-pills .nav-link {
    border-radius: 50px;
}

#tabstyle .nav-item, #tabstyle01 .nav-item, #tabstyle02 .nav-item, #tabstyle03 .nav-item {
    padding: 0 0.2rem;
}

#tabstyle .more, #tabstyle01 .more, #tabstyle02 .more, #tabstyle03 .more {
    font-size: 16px;
}

    #tabstyle .more a, #tabstyle01 .more a, #tabstyle02 .more a, #tabstyle03 .more a {
        color: rgba(102, 100, 100, 1);
    }

@media (max-width: 768px) {
    #tabstyle .nav-scroll-wrapper, #tabstyle01 .nav-scroll-wrapper, #tabstyle02 .nav-scroll-wrapper, #tabstyle03 .nav-scroll-wrapper {
        position: relative;
    }

        /* 在右側加上漸層陰影提示 */
        #tabstyle .nav-scroll-wrapper::after, #tabstyle01 .nav-scroll-wrapper::after, #tabstyle02 .nav-scroll-wrapper::after, #tabstyle03 .nav-scroll-wrapper::after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
        }

    #tabstyle .nav, #tabstyle01 .nav, #tabstyle02 .nav, #tabstyle03 .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        #tabstyle .nav::-webkit-scrollbar, #tabstyle01 .nav::-webkit-scrollbar, #tabstyle02 .nav::-webkit-scrollbar, #tabstyle03 .nav::-webkit-scrollbar {
            display: none;
        }

    #tabstyle .nav-item, #tabstyle01 .nav-item, #tabstyle02 .nav-item, #tabstyle03 .nav-item {
        flex: 0 0 auto;
    }

    #tabstyle .sticky-end, #tabstyle01 .sticky-end, #tabstyle02 .sticky-end, #tabstyle03 .sticky-end {
        position: sticky;
        right: 0;
        z-index: 2;
    }
}

@media (max-width: 575.98px) {
    #tabstyle .nav-link, #tabstyle01 .nav-link, #tabstyle02 .nav-link, #tabstyle03 .nav-link {
        font-size: 15px;
    }

    #tabstyle .more, #tabstyle01 .more, #tabstyle02 .more, #tabstyle03 .more {
        font-size: 15px;
    }
}

    @media (min-width: 576px) and (max-width: 1199.98px) {
        #tabstyle .nav-link, #tabstyle01 .nav-link, #tabstyle02 .nav-link, #tabstyle03 .nav-link {
            font-size: 15.5px;
        }

        #tabstyle .more, #tabstyle01 .more, #tabstyle02 .more, #tabstyle03 .more {
            font-size: 15.5px;
        }
    }