:root {
    --btn-default-bg: #299BB1;
    --btn-default-hover-bg: #227e91;
    --link-white-hover-color: #ddd;
}

body {
    font-family: 'Microsoft JhengHei', sans-serif;
}

a {
    color: #212529;
    cursor: pointer;
}

    a:hover {
        color: #299BB1;
        text-decoration: none;
    }

.btn-default {
    background-color: var(--btn-default-bg);
    border-color: var(--btn-default-bg);
    color: #fff;
}

    .btn-default:hover {
        background-color: var(--btn-default-hover-bg);
        color: #fff;
    }

.dropdown-toggle::after {
    display: none;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--btn-default-bg);
}

.page-link {
    min-width: 38px;
    text-align: center;
}

/*fix-feature*/
.fix-feature .scrollToTop {
    border: 1px solid var(--btn-default-bg);
    background-color: #fff;
}

    .fix-feature .scrollToTop .rounded-circle {
        background-color: var(--btn-default-bg);
        height: 100%;
    }

    .fix-feature .scrollToTop:hover {
        background-color: #ccc;
    }

        .fix-feature .scrollToTop:hover .rounded-circle {
            background-color: var(--btn-default-bg);
        }

        .fix-feature .scrollToTop:hover .circle i {
            color: #ccc;
        }

.scrollToTop .circle {
    background-color: var(--btn-default-bg);
}

.fix-search .adv-search {
    background-color: #fff;
}

    .fix-search .adv-search .circle {
        background-color: var(--btn-default-bg);
    }

header .logo {
    display: block;
    font-size: 30px;
    color: #fff;
    padding: 0 15px;
}

header.navbar {
    background-color: var(--btn-default-bg);
    z-index: 1006;
    border-top: 0;
    border-bottom: 0;
}

.navbar-expand .navbar-nav .nav-link {
    color: #fff;
    border-left: transparent;
    border-right: transparent;
}

header .navbar-nav li a:hover, header .navbar-nav li a.active, header .navbar-nav li a:focus, header .navbar-nav li.show > a {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
}

header .navbar-nav .dropdown-menu {
    border: 0;
    min-width: 8rem;
}

header .navbar-nav li ul li a:hover {
    background-color: var(--btn-default-bg);
    color: #fff;
}

.main-menu {
    display: none;
}

/* footer */
footer {
    background-color: var(--btn-default-bg);
    border-top: unset;
    padding: 40px 0;
    color: #fff;
}

    footer a {
        color: #fff;
    }

        footer a:hover {
            color: var(--link-white-hover-color);
        }

    footer ul {
        /*display: flex;*/
        list-style: none;
        padding-left: 0;
        /*flex-wrap: wrap;*/
    }

        footer ul li {
            /*flex-basis: 50%;*/
            margin-bottom: 5px;
        }

    footer .agent ul.info {
        display: block;
    }

        footer .agent ul.info li {
            margin-bottom: 5px;
        }

    footer .profile {
        display: flex;
        justify-content: flex-start;
        /*font-size: 0.85rem;*/
    }

    footer .image-container {
        display: none;
        margin-right: 10px;
    }

.copyright {
    background-color: var(--btn-default-bg);
    color: #fff;
}

    .copyright a {
        color: #fff;
    }

/*nav-mobile*/
#nav-mobile {
    width: 270px;
    background-color: #ffffff;
    color: #333333;
    border-right: 0;
}

    #nav-mobile .wrapper {
        width: 270px;
    }

    #nav-mobile .header {
        background-color: var(--btn-default-bg);
        padding: 10px;
    }

    #nav-mobile .exit {
        position: relative;
        width: 20px;
        height: 20px;
    }

        #nav-mobile .exit:hover {
            opacity: 0.85;
            cursor: pointer;
        }

        #nav-mobile .exit:before, #nav-mobile .exit:after {
            position: absolute;
            top: 0;
            left: 9px;
            content: '';
            width: 2px;
            height: 20px;
            background-color: #fff;
        }

        #nav-mobile .exit:before {
            transform: rotate(45deg);
        }

        #nav-mobile .exit:after {
            transform: rotate(-45deg);
        }

    #nav-mobile .logo {
        width: 100%;
        height: auto;
        font-size: 30px;
    }

        #nav-mobile .logo a i {
            color: #fff;
        }

        #nav-mobile .logo img {
            height: 40px;
        }

    #nav-mobile .search {
        padding: 10px 20px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

        #nav-mobile .search input {
            padding-right: 42.5px;
        }

        #nav-mobile .search i {
            position: absolute;
            right: 15px;
            top: 10px;
        }

    #nav-mobile .body {
        padding: 10px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }

        #nav-mobile .body a {
            position: relative;
            display: flex;
            color: #212529;
            padding: 10px 20px;
        }

        #nav-mobile .body ul {
            padding-left: 0;
            margin-bottom: 0;
            list-style: unset;
        }

            #nav-mobile .body ul > li > a:hover {
                background-color: var(--btn-default-bg);
                color: #fff;
            }

            #nav-mobile .body ul > li > ul > li > a {
                padding-right: 10px;
                padding-left: 40px;
                font-size: inherit;
            }


            #nav-mobile .body ul > li > ul > li > ul > li > a {
                padding-right: 10px;
                padding-left: 2.5em;
            }

                #nav-mobile .body ul > li > ul > li > ul > li > a:before {
                    left: 1.5em;
                }

            #nav-mobile .body ul > li > ul {
                display: none;
            }

            #nav-mobile .body ul > li.active ul,
            #nav-mobile .body ul > li.open ul,
            #nav-mobile .body ul > li.show ul {
                display: block;
            }

    #nav-mobile .feature {
        background-color: #299bb1;
    }

        #nav-mobile .feature a {
            color: #ffffff;
            font-size: 18px;
        }

            #nav-mobile .feature a.line {
                background-image: url(/Images/line-logo.svg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                width: 20px;
                height: 20px;
            }

    #nav-mobile.feature-panel .feature a.facebook {
        background-image: url('/Images/facebook-logo-white.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 20px;
        height: 20px;
    }

/* section-filter */
.section-filter.home {
    background-color: transparent;
    width: 100%;
}

.filter-panel {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2);
    position: relative;
}

    .filter-panel a.search {
        text-align: center;
        font-weight: bold;
    }

        .filter-panel a.search:hover {
            text-decoration: none;
            cursor: pointer;
        }

    .filter-panel .option ul.items > li > a:hover, .filter-panel .option ul.items > li > a.active {
        background-color: var(--btn-default-bg);
        color: #fff;
    }

    .filter-panel .keyword > input {
        border: 1px solid #d1d1d1;
    }

    .filter-panel .dropdown-toggle {
        border: 1px solid #d1d1d1;
        background-color: #fff;
    }

    .filter-panel .mega-dropdown.scroll .dropdown-menu {
        width: 100%;
    }

        .filter-panel .mega-dropdown.scroll .dropdown-menu .dropdown-item {
            padding: 6px 12px;
        }

    .filter-panel .dropdown-item:hover {
        background-color: var(--btn-default-bg);
        color: #fff;
    }

#mobile-search {
    border-left: 0;
}

    #mobile-search .header, #mobile-search .feature {
        background-color: var(--btn-default-bg);
        color: #fff;
    }

    #mobile-search a.card-header.open {
        color: #299bb1;
    }

/* Breadcrumb */
.breadcrumb-item a {
    color: rgb(119, 119, 119);
}

.breadcrumb-item a:hover {
    color: var(--btn-default-bg);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d;
}

@media (max-width: 767px) {
    .list .card {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
}

@media (min-width: 768px) {
    .section-filter.home .filter-panel {
        margin-top: -80px;
    }
}

@media(min-width:992px) {
    header .logo {
        display: none;
    }

    .main-menu {
        display: flex;
    }
}

@media (min-width: 1200px) {
    footer .profile {
        justify-content: space-around;
    }

        footer .profile .image-container {
            margin-right: 0;
        }
}