/* Common */
a {
    text-decoration: none;
}
a:hover {
    opacity: .85;
    transition: all 0.2s ease;
}
li {
    list-style: none;
}
.text {
    color: #444;
}
.logo img {
    width: 8em;
}
.title .cn {
    font-size: 1.5em;
    color: #9A6D3B;
}
.title .en {
    font-size: .8em;
    color: #ABABAB;
}
.yellow .cn {
    color: #FFFDD5;
}
.yellow .en {
    color: rgba(255, 253, 213, .5);
}
.btn_outline_brown {
    font-size: 1.2em;
    background-color: #fff;
    border: 1px solid #9A6D3B;
    color: #9A6D3B;
    width: 35%;
    padding: 10px 8px;
}
.btn_fill_brown {
    font-size: 1.2em;
    background-color: #9A6D3B;
    color: #fff;
    width: 35%;
    padding: 10px 8px;
}

.btn_brown {
    font-size: 1.2em;
    background-color: #E3DED8;
    color: #9A6D3B;
    width: 35%;
    padding: 10px 8px;
}
.btn_orange {
    font-size: 1em;
    background: linear-gradient(-45deg, #EE5D2D, #F2AE14);
    width: 100%;
    padding: 10px 8px;
}
.search_box .btn_fill_brown {
    width: auto;
    padding: 8px;
}
.btn_brown:hover, .btn_outline_brown:hover {
    color: #9A6D3B;
}
.btn_fill_brown:hover {
    color: #fff;
}
.btn_brown img {
    width: 1em;
    margin-left: 10px;
}
.btn_blue {
    font-size: 1.2em;
    background-color: #E1EFFF;
    color: #04172E;
    width: 35%;
    padding: 10px 8px;
}
.btn_grey {
    font-size: .8em;
    background-color: #A8A8A8;
    color: #fff;
    width: 35%;
    padding: 6px 8px;
}
.btn_red {
    font-size: .8em;
    background-color: #DE0707;
    color: #fff;
    width: 35%;
    padding: 6px 8px;
}
.btn_dark_brown {
    font-size: .8em;
    background-color: #9A6D3B;
    color: #fff;
    width: 35%;
    padding: 6px 8px;
}
.btn_dark_brown:hover, .btn_grey:hover, .btn_red:hover {
    color: #fff;
}
.bar_menu {
    background-color: #C79E6C;
}
.aside_menu {
    display: flex;
}
.aside_menu a {
    background: #F5F5F5;
    margin-bottom: 8px;
    color: #444;
    width: 100%;
    display: flex;
    justify-content: center;
}
.aside_menu .active {
    background: #C79E6C;
    color: #fff;
}
.icon5 {
    width: 20%;
}
.icon5 .text {
    font-size: .9em;
}
.icon5 img {
    width: 8em;
}
.banner img {
    width: 100%;
}
.table thead th {
    background-color: #FFFDD5;
    border-left: 5px solid #fff;
    color: #C79E6C;
}
.table tbody th {
    font-weight: 500;
}
.table tbody th,.table tbody td {
    background-color: #F5F5F5;
    border: 5px solid #fff;
}

.table_list thead th {
    background-color: #D9D9D9;
    border: 5px solid #F5F5F5;
    color: #fff;
}
.table_list tbody th, .table_list tbody td {
    background-color: #FFFFFF;
    border: 5px solid #F5F5F5;
}
.table_list>:not(:last-child)>:last-child>* {
    border-bottom-color: #F5F5F5;
}
.form-check {
    color: #C79E6C;
}
.form-check-input:checked {
    background-color: #C79E6C;
    border-color: #C79E6C;
}
form img {
    width: 2.5em;
}
.form {
    width: 50%;
}
.link {
    color: #A8A8A8;
}
.link a {
    color: #9A6D3B;
}
/* Header */
.header {
    background-color: #E3DED8;
}
.header_scroll {
    display: flex;
    align-items: center;
}
.header .top a {
    color: #9A6D3B;
    font-size: .8em;
}
.header .top a img {
    width: 1.5em;
    margin-right: 5px;
}
.header_menu {
    padding: 4px 0 8px;
}
.header .header_menu a {
    color: #444;
    padding: 6px 0;
    margin: 0 5px;
}
.header .header_menu a.active, .header .header_menu a:hover {
    color: #9A6D3B;
    border-bottom:  5px solid #9A6D3B;
}
.bar, .delete, .close {
    display: none;
}
.nav_bar_right {
    position: relative;
}
.search_box {
    display: none;
    position: absolute;
    top: 30px;
    right: 6%;
    z-index: 20;
    width: 350px;
    height: 4.8em;
    background-color: #FDEDDD;
    border: 1px solid #9A6D3B;
}
.dropdown_menu {
    display: none;
    position: absolute;
    top: 30px;
    left: 60px;
    z-index: 20;
    background-color: #E3DED8;
    border: 1px solid #9A6D3B;
}
.dropdown_menu a {
    color: #9A6D3B;
    font-size: .8em;
}
.dropdown_menu a.active ,.dropdown_menu a:hover {
    background-color: #fff;
}
.header .top a img.dropdown_arrow, .qa_arrow {
    width: 8px;
    margin-left: 6px;
}
.menu_icon{
    width: 2.5em;
}
.open {
    display: block;
}
/* Product */
.product {
    background: url(../images/product_bg.png) left center no-repeat;
    background-size: cover;
    background-color: #C79E6C;
}
/* Product_list */
.carousel {
    position: relative;
}
.left_arrow {
    position: absolute;
    left: 0;
    top: 50%;
    cursor: pointer;
}
.right_arrow {
    position: absolute;
    right: 0;
    top: 50%;
    cursor: pointer;
}
.product_list .product_name {
    font-size: 1.5em;
    color: #444;
}
.product_list .description {
    font-size: .9em;
    color: #A8A8A8;
}
.product_list .price {
    font-size: 2em;
    color: #DE0707;
}
.product_list .detail {
    background-color: #F5F5F5;
}
.detail_img img {
    width: 50%;
}
.product_list label {
    font-size: .8em;
}
.product_list .btn_outline_brown, .shopping_cart .btn_brown {
    margin-right: 8px;
}
/* QA */
.qa {
    background: url(../images/qa_bg.png) no-repeat;
    background-size: cover;
    background-color: #C79E6C;
    color: #444;
}
.qa .question {
    background-color: #FFFDD5;
}
.qa .question span {
    background-color: #9A6D3B;
}
.qa .text {
    flex: 1 2 100px;
}
.qa .answer {
    cursor: pointer;
}
.qa .answer span {
    background-color: #C79E6C;
}
.hidden {
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden;
}
.auto {
    white-space: wrap; 
    text-overflow: clip;
    overflow: auto;
}
.auto img {
    transform: rotate(180deg);
} 
.qa span {
    width: 1.5em;
    height: 1.5em;
    font-size: 1.5em;
    margin-right: 10px;
}
.hidden .text {
    width: 20px;
    overflow: hidden;
}
/* Select_price */
.select_price {
    background: url(../images/price_bg.png) center center no-repeat;
    background-size: cover;
    background-color: #C79E6C;
}
.select_price .item {
    height: 25em;
    border-image: linear-gradient(#F2AE14, #EE5D2D) 30;
    mask: linear-gradient(black, black);
    border-width: 5px;
    border-radius: 16px;
    border-style: solid;
}
.select_price .item li img {
    width: 1.5em;
    margin-right: 5px;
}
.btn_orange img {
    margin-left: 8px;
    width: 1em;
}
.select_price .price {
    color: #DE0707;
}
.select_price .tip {
    color: #EE5D2D;
    background-color: #FFFDD5;
}
.select_price .tip {
    font-size: 1em;
}
.select_price .tip img {
    width: 1em;
    margin-right: 5px;
}
.select_price .price span, .select_price .price p {
    font-size: .5em;
    font-weight: 500;
    color: #444;
}
.select_price h5 {
    color: #9A6D3B;
}
/* Shopping cart */
.num span, .total span {
    color: #DE0707;
    font-size: 1.5em;
}
/* Purchase records */
table span {
    margin-right: 10px;
}
table .return {
    color: #DE0707;
    font-size: .75em;
}
/* Footer */
.footer {
    font-size: .85em;
    color: #9A6D3B;
    background-color: #E3DED8;
}
.footer a {
    color: #9A6D3B;
}
.footer .social a {
    background-color: #9A6D3B;
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    margin: 0 4px;
}
.footer .social img {
    width: 60%;
}

.footer .info img {
    width: 1.2em;
    margin-right: 5px;
}
.footer .menu a:not(:last-child) {
    border-right: 1px solid#9A6D3B;
}
.copyright {
    background-color: #D1C7BD;
}
.service {
    z-index: 20;
    width: 3.5em;
    height: 3.5em;
    background-color: #9A6D3B;
    padding: 4px;
    border: 3px solid #fff;    
    bottom: 10em;
    right: 4em;
}
.service img {
    width: 2.5em;
}
.chatbox {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 450px;
    z-index: 1500;
}
.chatbox .chatbox_header .user {
    position: relative;
}
.chatbox .chatbox_header .avatar {
    width: 2.5em;
}
.chatbox .chatbox_header .circle {
    position: absolute;
    background: #3cb140;
    width: .8em;
    height: .8em;
    right: 0;
    bottom: 0;
    border: 2px solid #fff;
}
.chatbox .chatbox_header .online {
    font-size: .8em;
}
.chatbox .chatbox_header .chatbox_close {
    width: .8em;
    cursor: pointer;
}
.chatbox .chatbox_dialog {
    height: 400px;
    overflow-y: scroll;
}
.chatbox .chatbox_dialog .left .dialog_text {
    background-color: #F5F5F5;
}
.chatbox .chatbox_dialog .right .dialog_text {
    background-color: #2955dc;
}
.chatbox .chatbox_dialog .time {
    font-size: .8em;
    color: #444;
}
.chatbox .chatbox_footer .chatbox_send {
    margin-left: 10px;
    width: 1.5em;
    cursor: pointer;
}
@media only screen and (max-width: 768px) {
    /* Common */
    .btn_brown, .btn_blue, .btn_outline_brown, .btn_fill_brown {
        font-size: 1em;
        width: 100%;
        padding: 8px 6px;
    }
    .icon5 {
        width: 100%;
    }
    .banner {
        width: 100%;
        overflow: hidden;
    }
    .banner img {
        width: auto;
        height: 12em;
    }
    .form {
        width: 100%;
    }
    /* Header */
    .header {
        position: relative;
    }
    .header_menu {
        display: none;
        z-index: 20;
        height: 100%;
        background-color: #E3DED8;
        padding: 14px 0;
    }
    .header .header_menu a {
        display: block;
        width: 100%;
        color: #9A6D3B;
        padding: 10px 0;
        margin: 0;
    }
    .header .header_menu a.active, .header .header_menu a:hover {
        background-color: #fff;
        border: 0;
    }
    .bar, .open {
        display: block;
    }
    .nav_bar_right {
        position: static;
    }
    .dropdown_menu {
        position: absolute;
        top: 40px;
        right: 0;
        left: 0;
        z-index: 20;
    }
    .search_box {
        display: none;
        width: auto;
        height: 4.5em;
        left: 0;
        right: 0;
    }
    .aside_menu {
        display: none;
    }
    /* Product_item */
    .detail_img img {
        width: 100%;
    }
    /* Select price */
    .select_price .item {
        height: auto;
    }
    .select_price .item.bg-white {
        transform: scale(1);
    }
    /* Footer */
    .footer a {
        width: 100%;
        padding: 4px 0;
    }
    .footer .menu a:not(:last-child) {
        border-right: none;
    }
    .service {
        bottom: 1em;
        right: 1em;
    }
    .chatbox {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .chatbox .chatbox_dialog {
        height: 100vh;
        overflow-y: scroll;
    }
    .chatbox .chatbox_footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
    }
}