/************ TABLE OF CONTENTS ***************
1. Base
2. Header
3. Popup
4. Footer
5. Banner
6. Section  
7. List
8. Detail
9. Form
10. Shopping
11. Member
12. Single

----------------------------------- */

/* ***** Fonts ***** */

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700|Quicksand:300,400,500,700|Shadows+Into+Light+Two');
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');

@import url('../lib/animate/animate.css');
@import url('../lib/owl/css/owl.css');
@import url('../lib/font-awesome/css/font-awesome.min.css');
@import url('../lib/bootstrap/dist/css/bootstrap-select.min.css');

/*** 
====================================================================
1	Base
====================================================================
***/

* {
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
}

body {
    font-family: PingFangTC,微軟正黑體,Microsoft JhengHei,Arial,Roboto,sans-serif !important;
    position: relative;
    z-index: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0px;
    background: none;
    line-height: 1.4em;
}

p {
    color: #51545f;
    font-size: 16px;
    line-height: 1.8em;
}

.m-0 {
    margin: 0 !important;
}

.mt-15 {
    margin-top: 15px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-100 {
    margin-top: 100px;
}

.mt-150 {
    margin-top: 150px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-50 {
    margin-right: 50px;
}

.mr-100 {
    margin-right: 100px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-100 {
    margin-bottom: 100px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-30 {
    margin-left: 30px;
}

.ml-50 {
    margin-left: 50px;
}

.ml-100 {
    margin-left: 100px;
}

.p-0 {
    padding: 0 !important;
}

.p-10 {
    padding: 10px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pr-20 {
    padding-right: 20px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-30 {
    padding-bottom: 30px !important;
}

.pb-40 {
    padding-bottom: 40px !important;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    cursor: pointer;
    color: #dd9b59;
    outline: none;
}

    a:hover {
        transition: all 500ms;
    }

input:focus, button:focus {
    outline: none !important;
}

li {
    list-style: none;
}

.auto-container {
    position: static;
    max-width: 1200px;
    padding: 0px 50px;
    margin: 0 auto;
}

.auto-container-xs {
    position: static;
    max-width: 1080px;
    padding: 0px 50px;
    margin: 0 auto;
}

    .auto-container:before, .auto-container-xs:before {
        display: table;
        content: " ";
    }

    .auto-container:after, .auto-container-xs:after {
        display: table;
        content: " ";
        clear: both;
    }

.medium-container {
    max-width: 850px;
}

.page-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 300px;
}

.min-height-100 {
    min-height: -moz-calc(100vh - 60px);
    min-height: -webkit-calc(100vh - 60px);
    min-height: -o-calc(100vh - 60px);
    min-height: calc(100vh - 60px);
}

/* ------ color ------ */
/*gray #6c655e (menu
  btn light #b6a89b
  btn dark #493d31
  milkTea #b39076
*/

.bg-light {
    background-color: #f0ebe7;
}

.bg-dark {
    background-color: #493d31;
}

.bg-white {
    background-color: #fff;
}

:not(.input-group-btn) > .btn {
    width: 220px;
    border-radius: 2px;
    text-align: center;
    padding: 9px 12px;
    line-height: initial;
}

.input-group-btn .btn {
    border-radius: 2px;
}

.btn-light {
    color: #fff;
    background-color: #b6a89b;
}

    .btn-light:hover, .btn-light:active, .btn-light:focus {
        color: #fff;
        background-color: #a59586;
    }

.btn-dark {
    color: #fff;
    background-color: #493d31;
}

    .btn-dark:hover, .btn-dark:active, .btn-dark:focus {
        color: #fff;
        background: #5c4f43;
    }

.btn-white {
    color: #b6a89b;
    background-color: #fff;
    border: 1px solid #b6a89b;
}

    .btn-white:hover, .btn-white:active, .btn-white:focus {
        color: #b6a89b;
        background: #f9f7f5;
    }

/*** 
====================================================================
2. Header 
====================================================================
***/

.main-header {
    padding: 0;
    height: 100px;
    background: #fff;
    box-shadow: 0px 1px 1px rgb(0 0 0 / 10%);
}

    .main-header + * {
        margin-top: 100px;
    }

/*.main-header .auto-container {
        padding: 0 15px;
    }*/

.main-logo {
    float: left;
    position: absolute;
    width: auto;
    padding: 30px 0;
    height: 100px;
}

/*---menu---*/
.main-menu > li > a {
    color: #6c655e;
    /*text-shadow: black 0 0 1em;*/
    padding: 35px 15px;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    cursor: pointer;
}

    .main-menu > li > a:hover,
    .main-menu > li > a:focus,
    .main-menu > li.active > a {
        background-color: transparent;
        color: #b39076;
    }

.main-menu > li.dropdown > a:after {
    font-family: 'FontAwesome';
    content: "\f0d7";
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -10px;
    height: 20px;
    display: block;
    line-height: 20px;
    font-size: 12px;
    font-weight: normal;
    z-index: 5;
}

.main-menu .dropdown .sub-menu {
    display: none;
    position: absolute;
    left: 0px;
    top: 100%;
    width: 200px;
    z-index: 100;
    padding: 0;
    background: #493d31;
    border-top: 2px solid #b39076;
}

    .main-menu .dropdown .sub-menu li {
        padding: 12px 16px;
        border-bottom: 1px solid #eee;
    }

        .main-menu .dropdown .sub-menu li:last-child {
            border-bottom: none;
        }

.main-menu .dropdown:hover .sub-menu li:hover {
    background: #5c4f43;
}

.main-menu .dropdown .sub-menu li a {
    color: #b0aba6;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: block;
}

.main-menu .dropdown:hover .sub-menu li:hover a {
    color: #f4f3f2;
}

.main-menu .dropdown .dropdown-btn {
    display: none;
}

/*---menu buttons---*/
.main-buttons {
    margin-left: 30px;
}

    .main-buttons > li > a {
        padding: 35px 15px;
        color: #6c655e;
        font-size: 18px;
        line-height: 30px;
    }

        .main-buttons > li > a:hover, .main-buttons > li > a:focus {
            background-color: transparent;
            color: #b39076;
        }

        .main-buttons > li > a .user-icon {
            height: 17px;
            width: 17px;
            margin-top: -2px;
            content: url("../images/icon_user.svg");
        }

        .main-buttons > li > a:hover .user-icon, .main-buttons > li > a:focus .user-icon {
            content: url('../images/icon_user-hover.svg');
        }


/*---search---*/
.main-header .search-panel {
    border: none;
    border-top: 2px solid #b39076;
    border-radius: 0;
    padding: 20px 30px;
    background-color: #fff;
}

    .main-header .search-panel .search-panel-inner {
        position: relative;
    }

    .main-header .search-panel .search-input {
        background-color: transparent;
        border-bottom: 1px solid #b6a89b;
        padding: 6px 12px;
        width: 250px;
        text-align: center;
        font-size: 14px;
    }

    .main-header .search-panel .search-input {
        color: #7b756c;
    }

        .main-header .search-panel .search-input::placeholder {
            color: #b0b0b0;
            opacity: 1;
        }

        .main-header .search-panel .search-input:-ms-input-placeholder {
            color: #b0b0b0;
        }

        .main-header .search-panel .search-input::-ms-input-placeholder {
            color: #b0b0b0;
        }

.search-panel .search-button {
    position: absolute;
    left: 2px;
    background: transparent;
    color: #b6a89b;
    top: 6px;
    font-size: 16px;
}

/*---hamburger---*/
.main-header .navbar-toggle .icon-bar {
    width: 26px;
    height: 3px;
    background: #6c655e;
}

.main-header .navbar-toggle .fa-times {
    color: #fff;
    margin-top: -8px;
    font-size: 25px;
}

.main-header .navbar-toggle {
    position: absolute;
    right: 0px;
    margin-top: 12px;
}


.main-header .slide-logo,
.main-header .fa-times {
    display: none;
}

/*** 
====================================================================
3. Popup 
====================================================================
***/

#LoadingMask.pre {
    display: block !important;
}

#LoadingMask {
    display: none;
    z-index: 5000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .5;
    background-color: #000;
    transition: opacity .15s linear;
}

.loading-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -50px;
    color: #fff;
    text-align: center;
    padding: 0;
}

/*** 
====================================================================
4. Footer 
====================================================================
***/
.footer_area {
    padding: 20px 0;
    background-color: #493d31;
}

    .footer_area .row {
        /*padding: 15px 0;*/
        position: relative;
    }

        .footer_area .row > div {
            /*padding: 0 10px;*/
        }

    .footer_area h2 {
        font-size: 18px;
        color: #fff;
        padding: 30px 0;
    }

    .footer_area p, .footer_area p > a:not(:hover) {
        font-size: 13px;
        color: #c3c3c3;
    }

        .footer_area p > a {
            /*padding-left: 18px;*/
        }

            .footer_area p > a:before {
                /*font-family: "FontAwesome";
                content: "\f105";
                padding: 0 10px 8px 0;*/
            }

    .footer_area .share-links, .footer_area .copyright {
        height: 40px;
        vertical-align: bottom;
        display: table-cell;
    }

        .footer_area .share-links a:not(:hover) {
            color: #fff;
        }

        .footer_area .share-links a {
            font-size: 20px;
            padding: 0 25px 0 5px;
        }

    .footer_area .copyright {
        font-size: 13px;
        color: #9b9b9b;
        float: right;
    }

    .footer_area .footer-logo {
        position: absolute;
        right: 25px;
        top: 45%;
        height: 40px;
        width: auto;
    }

/*fixed chat*/
.fixed_chat {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
}

    .fixed_chat:hover {
        -webkit-transition-duration: 500ms;
        transition-duration: 500ms;
        transform: scale(1.05);
    }

    .fixed_chat img {
        width: 60px;
    }

/*** 
====================================================================
5. Banner 
====================================================================
***/

/*----------owl----------*/

/*nav*/
.owl-carousel {
    z-index: auto;
}

.owl-prev, .owl-next {
    position: absolute;
    display: inline-block;
    top: 50%;
    margin-top: -34px;
    width: 34px;
    height: 34px;
    border: none;
    text-align: center;
}

.owl-prev {
    left: 1%;
}

.owl-next {
    right: 1%;
}

    .owl-prev .fa, .owl-next .fa {
        color: #b7b7b7;
        font-size: 55px;
        font-weight: 400;
    }

.owl-prev .fa {
    padding-right: 2px;
}

.owl-next .fa {
    padding-left: 2px;
}

.owl-prev:hover, .owl-prev:focus,
.owl-next:hover, .owl-next:focus {
    background-color: transparent;
}

    .owl-prev:hover .fa,
    .owl-next:hover .fa {
        color: #555;
    }

/*circle*/
.owl-nav-circle .owl-prev, .owl-nav-circle .owl-next {
    border: 0;
    border-radius: 0;
    text-align: center;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8e8e8;
}

.section_area.bg-light .owl-nav-circle .owl-prev, .section_area.bg-light .owl-nav-circle .owl-next {
    top: 38%;
}

.owl-nav-circle .owl-prev {
    left: calc(25% - 34px);
}

.owl-nav-circle .owl-next {
    right: calc(25% - 34px);
}


    .owl-nav-circle .owl-prev .fa, .owl-nav-circle .owl-next .fa {
        color: #555;
        text-align: center;
        font-size: 26px;
        font-weight: 300;
    }

    .owl-nav-circle .owl-prev:hover, .owl-nav-circle .owl-prev:focus,
    .owl-nav-circle .owl-next:hover, .owl-nav-circle .owl-next:focus {
        background-color: #b6a89b;
        color: #eee;
    }


/*dot*/
.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
}

    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background: #493d31;
        opacity: 1;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .owl-theme .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background-color: rgba(216, 216, 216, 0.3);
        display: block;
        transition: opacity 200ms ease;
        border-radius: 30px;
    }

.dots-outter {
    text-align: center;
    padding-top: 20px;
}

/*--------------------*/

.bannerArea-item {
    height: 350px;
    position: relative;
    background-color: #493d31;
}

.banner-image {
    background-size: cover;
    background-position: center;
    position: relative;
    display: inline-block;
    height: 350px;
    width: 65%;
}

.banner-box {
    float: right;
    background-color: #493d31;
    height: 350px;
    width: 35%;
    text-align: center;
}

    .banner-box h2 {
        color: #fff;
        padding-top: 130px;
        padding-bottom: 22px;
        font-size: 32px;
        line-height: 1.4;
    }

    .banner-box p {
        color: #bbb;
        font-size: 13px;
        line-height: 1.5;
    }


/*--owl-carousel--*/

.banner-carousel .donts-container {
    position: relative;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.banner-carousel .dots-outter {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 32px 0;
    /*background-color: rgba(200,200,200,0.2);*/
}

.banner-carousel .owl-dots .owl-dot span {
    background-color: rgba(255,255,255,.5);
}

/*** 
====================================================================
6. Section  
====================================================================
***/

.section_area {
    padding: 50px 0;
}

    /*.section_area + .section_area {
        padding-top: 30px;
    }*/

    .section_area.list-activity, .section_area.list-case {
        padding-top: 40px;
    }

        .section_area.list-activity .area-title, .section_area.list-case .area-title {
            margin-bottom: 50px;
        }

    .section_area .area-title {
        color: #493d31;
        font-size: 22px;
        font-weight: 600;
        display: table;
        margin: 0 auto;
        margin-bottom: 50px;
        padding: 0 30px;
        border-left: 1px solid #493d31;
        border-right: 1px solid #493d31;
    }

        .section_area .area-title.left {
            width: 100%;
            margin: -10px 0 0 0;
            padding: 0 0 8px 0;
            border: none;
            font-size: 20px;
        }

    .section_area .area-block-two {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section_area .area-left {
        width: 40%;
        /*float: left;*/
        padding: 25px;
    }

    .section_area .area-right {
        width: 60%;
        display: inline-block;
    }

    .section_area .area-left h2 {
        color: #493d31;
        padding-bottom: 22px;
        font-size: 32px;
        line-height: 1.4;
    }

    .section_area .area-left p {
        color: #bbb;
        font-size: 13px;
        line-height: 1.5;
        padding-bottom: 22px;
    }


/*--block--*/
.block .box {
    padding: 0 15px;
}

    .block .box .box-inner {
        position: relative;
        border-radius: 5px;
    }

        .block .box .box-inner:hover img {
            opacity: 0.8;
            -webkit-transition-duration: 500ms;
            transition-duration: 500ms;
        }

        .block .box .box-inner img {
            border-radius: 3px;
            width: 100%;
        }


/*box-rectangle */
.block-shape .box .box-inner .image-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 0%;
}

    .block-shape .box .box-inner .image-box img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
    }

/*new arrival  w250 x h350*/
.shape-v1 .box .box-inner .image-box {
    padding-bottom: 140%;
}

    .shape-v1 .box .box-inner .image-box img {
        height: 100%;
        width: auto;
    }

/*--product w500 x h330*/
.shape-v2 .box .box-inner .image-box {
    padding-bottom: 66%;
}

/*--brand w360 x h200*/
.shape-v3 .box {
    padding: 20px 45px 40px 45px;
}

    .shape-v3 .box .box-inner .image-box {
        padding-bottom: 55.55%;
    }

/*--brand w1000 x h250*/
.shape-v4 .box .box-inner .image-box {
    padding-bottom: 25%;
}

/*--list banner w945 x 300*/
.shape-v5 .box .box-inner .image-box {
    padding-bottom: 31.74%;
}

/*--list product square*/
.shape-v6 .box .box-inner .image-box {
    padding-bottom: 100%;
}

    .shape-v6 .box .box-inner .image-box img {
        height: 100%;
        width: auto;
    }


/*txt*/
.block .box .box-inner .block-content {
    padding: 20px 0px;
    /*height: 180px;*/
    width: 100%;
}

    .block .box .box-inner .block-content .block-title {
        font-size: 18px;
        font-weight: 600;
        color: #493d31;
        padding-bottom: 8px;
        /*one line*/
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
    }

    .block .box .box-inner .block-content .btn {
        position: absolute;
        bottom: 10px;
        left: calc(50% - 120px);
    }

    .block .box .box-inner .block-content .block-txt {
        font-size: 13px;
        color: #949494;
        /*two line*/
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.6em;
        min-height: 45px;
    }

    .block .box .box-inner .block-content .block-subtxt {
        font-size: 13px;
        color: #949494;
    }

    .block .box .box-inner .block-content .block-right {
        font-size: 13px;
        color: #949494;
        position: absolute;
        bottom: 55px;
        right: 0;
    }


/*index product*/
.block .product-carousel .box {
    padding: 0;
}

.product-carousel .owl-item:not(.center) {
    opacity: 0.4;
    transform: scale(0.9);
}

    .product-carousel .owl-item:not(.center) .btn {
        display: none;
    }

/*list-case*/
.list-case .block .box .box-inner .block-content {
    height: 110px;
    padding: 18px 0px;
}

    .list-case .block .box .box-inner .block-content .block-title {
        width: calc(100% - 75px);
    }

    .list-case .block .box .box-inner .block-content .block-subtxt {
        padding-bottom: 2px;
    }

    .list-case .block .box .box-inner .block-content .block-right {
        bottom: 50px;
    }

/*list-activity*/
.list-activity .block .box:not(:first-child) {
    padding-top: 40px;
}

.list-activity .block .box .box-inner .block-content {
    height: 140px;
    border-bottom: 1px solid #d1d1d1;
    padding: 18px 0px;
}

    .list-activity .block .box .box-inner .block-content .block-title {
        padding: 4px 0;
    }

    .list-activity .block .box .box-inner .block-content .btn {
        position: absolute;
        bottom: 18px;
        right: 0;
        left: initial;
        width: 120px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .list-activity .block .box .box-inner .block-content .block-txt {
        padding-right: 130px;
    }


/*listpage banner*/
.top-banner .block .box {
    padding: 0;
}

    .top-banner .block .box .box-inner:hover img {
        opacity: 1;
    }

    .top-banner .block .box .box-inner .block-content {
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        height: auto;
        padding: 2% 25px;
    }

        .top-banner .block .box .box-inner .block-content .block-title {
            font-size: 34px;
            color: #fff;
            text-shadow: 1px 1px 2px rgb(100 100 100 / 50%);
            padding: 0;
        }

        .top-banner .block .box .box-inner .block-content .block-subtxt {
            font-size: 20px;
            font-weight: 500;
            color: #fff;
            text-shadow: 1px 1px 2px rgb(100 100 100 / 50%);
        }

.top-banner.full .block .box .box-inner .block-content {
    padding-left: 0;
}

    .top-banner.full .block .box .box-inner .block-content .block-title {
        color: #493d31;
    }

    .top-banner.full .block .box .box-inner .block-content .block-subtxt {
        color: #493d31;
    }

.top-banner .block .box .box-inner img.image-center {
    position: absolute;
    padding: 0;
    width: 20%;
    max-width: 240px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

/*product-area*/
.content-right .product-area {
    margin-top: 15px;
}

.product-area .block .box .box-inner .block-content {
    height: 121px;
    padding: 15px 0px;
}

.product-area .block .box .box-inner:hover img {
    transform: translate(-50%, -50%) scale(1.1);
    -webkit-transform: translateY(-50%) translateX(-50%) scale(1.1);
}

.product-area .block .box .box-inner .block-content .block-title {
    padding: 4px 0;
}

.block .box .box-inner .block-content .block-money {
    font-size: 14px;
    color: #dd9b59;
    margin-top: 12px;
}

.btn-addcar, .btn-triangle, .btn-trashcan {
    width: 30px;
    height: 30px;
    background-color: #f7f7f7;
    border-radius: 2px;
    color: #99999a;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn-addcar:hover, .btn-triangle:hover, .btn-trashcan:hover {
        color: #99999a;
        box-shadow: 0 0 11px 1px rgb(132 132 132 / 40%);
        border: solid 1px #b6a89b;
    }


    .btn-addcar.lg, .btn-triangle.lg, .btn-like.lg, .btn-trashcan.lg {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

.block .box .box-inner .btn-addcar {
    position: absolute;
    bottom: 38px;
    right: 0;
}

.btn-trashcan img {
    width: 20px !important;
}

.block .box .box-inner .btn-trashcan {
    position: absolute;
}


.btn-like {
    width: 30px;
    height: 30px;
    background-color: #f7f7f7;
    border-radius: 2px;
    color: #99999a;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2.5px;
}

    .btn-like:hover {
        /*background-color: #eee9e4;*/
        box-shadow: 0 0 11px 1px rgb(132 132 132 / 40%);
        border: solid 1px #b6a89b;
    }

    .btn-like .fa-heart {
        color: #b6a89b;
    }

.block .box .box-inner .btn-like {
    position: absolute;
    right: 8px;
    top: 8px;
}

.product-area .block .box .box-inner .btn-like { /*circle*/
    background-color: #fff;
    border-radius: 50%;
}

    .product-area .block .box .box-inner .btn-like:hover {
        /*background-color: #eee9e4;*/
        box-shadow: 0 0 11px 1px rgb(132 132 132 / 40%);
        border: solid 1px #b6a89b;
    }

.btn-remove {
    width: 30px;
    height: 30px;
    background-color: #f7f7f7;
    border-radius: 2px;
    color: #99999a;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2px;
}

    .btn-remove:hover {
        /*background-color: #eee9e4;*/
        box-shadow: 0 0 11px 1px rgb(132 132 132 / 40%);
        border: solid 1px #b6a89b;
        color: #99999a;
    }

.block .box .box-inner .btn-remove {
    position: absolute;
    right: 0;
}

.list-cart .block .box .box-inner .btn-remove {
    background-color: #b6a89b;
    color: #fff;
}


.block .box .box-inner .block-content .quantity-txt {
    position: absolute;
    bottom: 0;
    right: 0;
    /*left: 100px;*/
    width: 30px;
    padding-left: 3px;
    text-align: center;
    line-height: 1;
    color: #b1b1b1;
    font-size: 14px;
}

    .block .box .box-inner .block-content .quantity-txt:before {
        content: "x";
        position: absolute;
        right: 100%;
        /*top: 3px;*/
        line-height: 1;
        font-size: 13px;
        font-weight: normal;
    }

/*---list-search、member collection、member order---*/
.section_area.list-search {
    padding-top: 40px;
}

.list-search .block .box .box-inner {
    border-bottom: 1px solid #b1b1b1;
    border-radius: 0;
    display: flex;
    padding: 25px 0;
}

    .list-search .block .box .box-inner::before,
    .list-search .block .box .box-inner:after {
        content: "";
        display: table;
        clear: both;
    }

.list-search .block .box:first-child .box-inner {
    border-top: 3px solid #b6a89b;
}

.list-search .block .box:last-child .box-inner {
    border-bottom: 3px solid #b6a89b;
}

.member_area.list-search .block .box .box-inner {
    border-width: 1px;
}

.list-search .block .box .box-inner .image-box {
    display: inline-block;
    width: 16vh;
    padding-bottom: 16vh;
}

.list-search .block .box .box-inner .block-content {
    display: inline-block;
    width: 81%;
    height: auto;
    position: relative;
    margin: 3% 0 0 3%;
    padding: 0;
}

.list-search .block .box .box-inner:hover img {
    opacity: 1;
}

.list-search .block .box .box-inner .image-box:hover img {
    opacity: 0.8;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.list-search .block .box .box-inner .block-content .block-title {
    max-width: 45%;
}

    .list-search .block .box .box-inner .block-content .block-title:hover {
        color: #b39076;
        -webkit-transition-duration: 500ms;
        transition-duration: 500ms;
    }

.list-search .block .box .box-inner .block-content .block-subtxt {
    position: absolute;
    left: 0;
    top: 43%;
    font-size: 14px;
    width: 45%;
    /*two line*/
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.6em;
    min-height: 45px;
}

.list-search .block .box .box-inner .block-content .block-money {
    position: absolute;
    left: 50%;
    top: 40%;
    margin: 0;
    font-size: 16px;
}

.list-search .block .box .box-inner .block-content .quantity-txt {
    top: 40%;
    bottom: initial;
    font-size: 16px;
}

    .list-search .block .box .box-inner .block-content .quantity-txt:before {
        top: 2px;
    }

.list-search .block .box .box-inner .btn-like,
.list-search.member_area .block .box .box-inner .btn-addcar {
    right: 10%;
    top: 35%;
}

.list-search .block .box .box-inner .btn-addcar,
.list-search .block .box .box-inner .btn-remove,
.list-search.member_area .block .box .box-inner .btn-trashcan {
    right: 0;
    top: 35%;
}

/*----llist-cart (shopping cart)----*/

.list-cart .block .box .box-inner {
    padding: 20px;
    border-bottom: 1px solid #b1b1b1;
    border-radius: 0;
    display: flex;
}

.list-cart .block .box:first-child .box-inner {
    border-top: 3px solid #b6a89b;
}

.list-cart .block .box:last-child .box-inner {
    border-bottom: 3px solid #b6a89b;
}

.list-cart.list-striped .box:nth-of-type(odd) .box-inner {
    background-color: rgba(240, 235, 231, 0.5);
}

.list-cart .block .box .box-inner .image-box {
    display: inline-block;
    width: 23vh;
    padding-bottom: 23vh;
}

.list-cart .block .box .box-inner .block-content {
    display: inline-block;
    position: relative;
    width: 74%;
    height: auto;
    margin: 1% 0 0 3%;
    padding: 2px 0 0;
}

    .list-cart .block .box .box-inner .block-content .block-title {
        max-width: 45%;
    }

    .list-cart .block .box .box-inner .block-content .block-subtxt {
        position: absolute;
        left: 0;
        top: 40%;
        font-size: 14px;
        width: 45%;
        /*one line*/
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-cart .block .box .box-inner .block-content .block-money {
        position: absolute;
        top: initial;
        left: 0;
        bottom: 2px;
        font-size: 15px;
        margin: 0;
    }

    .list-cart .block .box .box-inner .block-content .quantity-box {
        width: 120px;
        position: absolute;
        top: 35%;
        left: 50%;
    }

        .list-cart .block .box .box-inner .block-content .quantity-box .input-group-btn .btn {
            font-size: 16px;
            padding: 7px 9px;
            width: 30px;
            line-height: 1;
        }

        .list-cart .block .box .box-inner .block-content .quantity-box .form-control {
            padding: 5px 8px 3.5px 8px;
            font-size: 14px;
        }

.list-cart .block .box .box-inner .btn-like {
    width: 28px;
    height: 28px;
    top: 36%;
    right: 10%;
}

.list-cart .block .box .box-inner .btn-remove {
    width: 28px;
    height: 28px;
    top: 36%;
    right: 0;
}

/*total-box (checkout)*/
.list-cart .total-box .block .box .box-inner,
.list-cart .order-box .block .box .box-inner {
    padding: 15px 5px;
    min-height: 100px;
}

.list-cart .total-box .block .box:first-child .box-inner {
    border-top: none;
}

.list-cart .total-box .block .box:last-child .box-inner {
    border-bottom: 1px solid #b1b1b1;
    margin-bottom: 12px;
}

.list-cart .total-box .block .box .box-inner .image-box {
    width: 30%;
    padding-bottom: 30%;
}

.list-cart .total-box .block .box .box-inner .block-content {
    width: 67%;
}

    .list-cart .total-box .block .box .box-inner .block-content .block-title,
    .list-cart .order-box .block .box .box-inner .block-content .block-title {
        max-width: 100%;
        font-size: 14px;
        /*two line*/
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.5em;
        min-height: 42px;
        white-space: initial;
    }

    .list-cart .total-box .block .box .box-inner .block-content .block-money,
    .list-cart .order-box .block .box .box-inner .block-content .block-money {
        top: initial;
        bottom: 0;
        line-height: 1;
        font-size: 14px;
    }

/*---order-box (checkout)---*/
.list-cart .order-box .block .box:first-child .box-inner {
    border-top-width: 2px;
}

.list-cart .order-box .block .box:last-child .box-inner {
    border-bottom-width: 2px;
}

.list-cart .order-box .block .box .box-inner .image-box {
    width: 16%;
    padding-bottom: 16%;
}

.list-cart .order-box .block .box .box-inner .block-content {
    width: 80%;
}

    .list-cart .order-box .block .box .box-inner .block-content .block-title {
        font-size: 16px;
    }

    .list-cart .order-box .block .box .box-inner .block-content .quantity-txt {
        font-size: 16px;
    }



.
/*.member_area*/
.member_area.list-search .block .box .box-inner {
    padding: 20px 0;
}

.member_area.list-search .block .box .box-inner .block-content {
    margin: 1% 0 0 2.5%;
}

/*images_area*/
.section_area.images_area {
    padding: 20px 0 0;
}

/*detail-carousel*/
.detail_area .image-list .block .box {
    padding: 0;
}

.detail_area .image-list .main-image {
    width: 100%;
    opacity: 1 !important;
}

.detail_area .image-list .block .detail-carousel {
    margin: 18px 0 0 0;
    cursor: pointer;
}

.detail_area .image-list .block .box {
    padding: 0 0 0 8px;
}

.detail_area .image-list .block .detail-carousel .box .box-inner img {
    opacity: 0.4;
}

.detail_area .image-list .block .detail-carousel .box.in .box-inner img {
    opacity: 1;
}

.detail_area .image-list .block .detail-carousel .box .box-inner:hover img {
    opacity: 1;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.detail_area .main-image-box {
    position: relative;
}

    .detail_area .main-image-box .color-button {
        position: absolute;
        right: 8px;
        bottom: 8px;
    }

        .detail_area .main-image-box .color-button li.active {
            box-shadow: 0 2px 8px 0 rgb(0 0 0 / 40%);
        }

        .detail_area .main-image-box .color-button li:not(.active) {
            opacity: 0.6;
        }
/*** 
====================================================================
7. List
====================================================================
***

/*-----breadcrumb-----*/

.breadcrumb {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    background-color: transparent;
    border-radius: .25rem;
}

    .breadcrumb > .active {
        font-weight: 600;
    }

    .breadcrumb, .breadcrumb a {
        color: #9b9b9b;
        font-size: 16px;
        font-weight: 600;
    }

        .breadcrumb a:hover {
            color: #b6a89b;
        }

        .breadcrumb > li {
            color: #493d31;
        }

            .breadcrumb > li + li:before {
                font-family: "FontAwesome";
                content: "\f105";
                padding: 0 18px 0px 6px;
                color: #9b9b9b;
                font-size: 17px;
            }

/*-----toolbar-----*/
.toolbar-area {
    position: relative;
    display: flex;
}

.toolbar {
    position: absolute;
    bottom: 5px;
    right: 0;
}

    /*button*/
    .toolbar .bootstrap-select {
        width: 150px !important;
    }

        .toolbar .bootstrap-select:before {
            content: "";
            background: url(../images/icon_filter.svg) no-repeat;
            background-size: cover;
            position: absolute;
            top: 8px;
            left: 4px;
            width: 20px;
            height: 18px;
            display: block;
            z-index: 100;
        }

        .toolbar .bootstrap-select .btn {
            border: none;
            padding-left: 30px;
            background: transparent;
            color: #493d31;
            width: 100%;
        }

    .toolbar .open > .dropdown-toggle.btn-default:hover, .toolbar .open > .dropdown-toggle.btn-default:focus {
        background-color: #f9f7f5;
    }

    .toolbar .bootstrap-select .dropdown-menu li a {
        padding-left: 26px;
    }

/*-----pagination-----*/
.pagination_area {
    margin-bottom: 60px;
    text-align: center;
}

.pagination {
    margin: 0;
}

    .pagination > li > a, .pagination > li > span, .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover, .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span {
        color: #b39076;
        border: none;
        border-radius: 3px;
        margin: 0 2.5px;
        font-size: 15px;
        padding: 6px 13px;
    }

    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
        border: none;
        background-color: #493d31;
    }

    .pagination > li > a, .pagination > li > span {
        background-color: transparent;
    }

/*nextpage_area*/
.nextpage_area {
    margin-bottom: 60px;
    text-align: right;
}

    .nextpage_area .pagination > li > a > i {
        color: #80868b;
    }

        .nextpage_area .pagination > li > a > i ~ span,
        .nextpage_area .pagination > li > a > span ~ i {
            margin-left: 12px;
        }

    .nextpage_area .pagination > li:last-child > a:before {
        content: "";
        position: absolute;
        left: -2.5px;
        height: 70%;
        border-left: 1px solid #d8d8d8;
    }

/*-----product list-----*/

.product-listpage {
    position: relative;
}

    .product-listpage .breadcrumb {
        margin-top: 22px;
    }


    .product-listpage .toolbar {
        position: relative;
        float: right;
        margin-top: -22px;
        bottom: initial;
        right: initial;
    }

        .product-listpage .toolbar > a {
            color: #4a4c58;
            position: relative;
            margin-left: 20px;
        }

            .product-listpage .toolbar > a:hover, .product-listpage .toolbar > a:focus {
                color: #b39076;
            }

            .product-listpage .toolbar > a:before,
            .product-listpage .toolbar > a:after {
                font-family: 'FontAwesome';
                position: absolute;
                left: -10px;
                font-size: 13px;
            }

            .product-listpage .toolbar > a:before {
                content: "\f0de";
                top: 0px;
            }

            .product-listpage .toolbar > a:after {
                content: "\f0dd";
                bottom: 1px;
            }

.sort-button-up:after, .sort-button:after {
    color: #c3c3c3;
}

.sort-button-down:before, .sort-button:before {
    color: #c3c3c3;
}

/*filter panel*/
.filter-txt {
    position: relative;
    padding-left: 32px;
}

    .filter-txt:before {
        content: "";
        background: url(../images/icon_filter.svg) no-repeat;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 4px;
        width: 20px;
        height: 20px;
        display: block;
        z-index: 100;
    }

button.filter-txt { /*collapse handle*/
    background: transparent;
}

    button.filter-txt:hover, button.filter-txt:focus, button.filter-txt:not(.collapsed) {
        color: #b39076;
    }

.filter-panel {
    color: #493d31;
    background-color: #fff;
}

    .filter-panel .filter-item {
        border-bottom: 1px solid #d8d8d8;
        padding: 20px 0 12px 0;
    }

        .filter-panel .filter-item .checkbox label > span {
            font-size: 14px;
        }

    .filter-panel .filter-txt { /*left*/
        border-bottom: 1px solid #d8d8d8;
        padding-bottom: 10px;
        font-size: 18px;
        font-weight: 600;
    }

        .filter-panel .filter-txt:before {
            top: 3px;
            width: 22px;
        }

    .filter-panel .input-group {
        padding: 25px 0;
    }

        .filter-panel .input-group .form-control {
            height: 36px;
        }

        .filter-panel .input-group .btn {
            font-size: 13px;
            height: 36px;
            margin: 0;
        }

.filter-item .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

.filter-item .range-box {
    display: flex;
}

    .filter-item .range-box > div {
        width: 45%;
        display: inline-block;
    }

        .filter-item .range-box > div.middle {
            width: 12%;
            clear: both;
            border-bottom: 1px solid #ccc;
            margin: 0 12px 17px 12px;
        }

    .filter-item .range-box .form-control {
        height: 36px;
    }

/*** 
====================================================================
8. Detail
====================================================================
***/

.detail_area {
    padding: 30px 0 50px 0;
}

    .detail_area h1 {
        font-size: 28px;
        color: #493d31;
        margin-bottom: 25px;
        font-weight: 600;
    }

        .detail_area h1 span {
            font-size: 20px;
        }

    .detail_area .main-image {
        width: 100%;
        margin-bottom: 25px;
    }

    .detail_area .article-date {
        margin-bottom: 3px;
        color: #c3c3c3;
        font-size: 16px;
    }

    .detail_area p {
        color: #7c7c7c;
        position: relative;
        line-height: 1.6em;
        margin: 0 0 20px;
    }

        .detail_area p:last-child {
            margin: 0;
        }

    .detail_area img {
        max-width: 100%;
    }

    /*left-right*/
    .detail_area .detail-panel {
        overflow: auto;
    }

    .detail_area .panel-left {
        display: inline-block;
        width: 43%;
    }

    .detail_area .panel-right {
        display: inline-block;
        width: 50%;
        float: right;
    }

        .detail_area .panel-right h1 {
            font-size: 28px;
            margin-bottom: 20px;
        }


    .detail_area .price-box {
        position: relative;
        border-bottom: solid 2px #b6a89b;
        padding-bottom: 20px;
    }

        .detail_area .price-box .sell-price {
            font-size: 20px;
            color: #dd9b59;
            margin-right: 20px;
        }

        .detail_area .price-box .ori-price {
            font-size: 16px;
            color: #a5a5a5;
            text-decoration: line-through;
        }

        .detail_area .price-box .toolbar {
            bottom: 19px;
            display: flex;
        }

            .detail_area .price-box .toolbar > * {
                display: inline-flex;
                margin-left: 10px;
            }

    .detail_area .spec-box {
        margin-top: 15px;
    }

        .detail_area .spec-box > li {
            display: table;
            min-height: 42px;
            padding: 5px 0;
        }

            .detail_area .spec-box > li > div {
                display: table-cell;
                vertical-align: middle;
                font-size: 16px;
            }

                .detail_area .spec-box > li > div:first-child {
                    width: 100px;
                    color: #9b9b9b;
                }

                .detail_area .spec-box > li > div:last-child {
                    color: #6c655e;
                }


    .detail_area .color-button > li {
        cursor: pointer;
        display: flex;
        float: left;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        position: relative;
        margin: 2px;
        margin-right: 15px;
    }

        .detail_area .color-button > li:last-child {
            margin-right: 2px !important;
        }

        .detail_area .color-button > li.active:last-child, .detail_area .color-button > li:hover:last-child {
            margin-right: 0 !important;
        }
        /*.detail_area .color-button > li:before {
            content: "";
            display: inline-block;
            width: 37.5px;
            height: 37.5px;
            border-radius: 50%;
            border: 3.5px solid #fff;          
            z-index: 2;
        }*/

        .detail_area .color-button > li:after {
            content: "";
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 4px solid #fff;
            position: absolute;
            top: -1px;
            left: -1px;
        }

        .detail_area .color-button > li.active:after,
        .detail_area .color-button > li:hover:after {
            width: 34px;
            height: 34px;
            border: 3.5px solid #fff;
            top: 2px;
            left: 2px;
        }

        .detail_area .color-button > li.active,
        .detail_area .color-button > li:hover {
            width: 38px;
            height: 38px;
            margin: 0 calc(15px - 2px) 0 0;
        }

    /*.detail_area .color-button > li.active:after,
        .detail_area .color-button > li:hover:after {
            content: "";
            display: none;
        }*/

    .detail_area .spec-box .spec-button {
        margin-top: 3px;
    }

        .detail_area .spec-box .spec-button > li {
            cursor: pointer;
            display: flex;
            float: left;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 32px;
            margin: 0 5px 5px 0;
            border: 2px solid #f4f1ee;
            font-size: 15px;
            color: #6c655e;
        }

            .detail_area .spec-box .spec-button > li:hover,
            .detail_area .spec-box .spec-button > li.active {
                border-color: #493d31;
            }

    .detail_area .txt-note {
        background: #f8f6f4;
        color: #7c7c7c;
        font-size: 14px;
        padding: 25px;
        margin-top: 10px;
        line-height: 1.6em;
        border-radius: 3px;
    }

    .detail_area .button-box > * {
        margin-top: 25px;
        width: 45%;
    }

    .detail_area .button-box > .btn {
        display: inline-block;
        float: right;
    }

/*quantity-box*/
.quantity-box {
    display: inline-table;
    border: 1px solid #f3f3f3;
    border-radius: 2px;
}

    .quantity-box .input-group-btn .btn {
        position: relative !important;
        bottom: initial !important;
        left: initial !important;
        padding: 5.5px 15px;
        margin: 0;
        border: none;
        background-color: #f3f3f3;
        color: #848484;
        font-weight: 600;
        font-size: 18px;
    }

        .quantity-box .input-group-btn .btn:hover {
            background-color: #e8e8e8;
        }

    .quantity-box .input-group-btn:last-child > .btn, .quantity-box .input-group-btn:last-child > .btn-group {
        margin-right: -1px;
    }

    .quantity-box .form-control {
        border: none;
        padding: 8.5px 12px 0 12px;
        height: auto;
        text-align: center;
        box-shadow: none;
        border-radius: 0;
    }

/*tab*/
.detail_area .tab-box {
    margin-top: 35px;
    border-bottom: 1.5px solid #c3c3c3;
    text-align: center;
    display: flex;
    padding-bottom: 1px;
}

    .detail_area .tab-box .nav-tabs {
        border: none;
        width: auto;
        display: inline-block;
        margin: 0 auto;
    }

        .detail_area .tab-box .nav-tabs > li > a {
            border-radius: 2px 2px 0 0;
            padding: 10px 30px;
            font-size: 16px;
            color: #8b8b8b;
        }

    .detail_area .tab-box .nav > li:not(.active) > a:hover, .detail_area .tab-box .nav > li:not(.active) > a:focus {
        background-color: #eee9e5;
        border-color: none;
    }

    .detail_area .tab-box .nav-tabs > li.active > a,
    .detail_area .tab-box .nav-tabs > li.active > a:hover,
    .detail_area .tab-box .nav-tabs > li.active > a:focus {
        color: #493d31;
        border: 1.5px solid #c3c3c3;
        border-bottom: none;
    }

.detail_area .tab-content > .tab-pane {
    padding-top: 30px;
}

/*toolModal*/
#toolModal {
    border-radius: 3px;
    color: #4a4c58;
}

    #toolModal .modal-header {
        padding: 40px 30px;
        border-bottom: none;
    }

        #toolModal .modal-header .close {
            font-size: 30px;
            font-weight: 400;
            margin-top: -4px;
        }

    #toolModal .modal-title {
        font-size: 20px;
        color: #4a4a4a;
        text-align: center;
    }

        #toolModal .modal-title img {
            margin-top: -4px;
        }

    #toolModal .modal-body {
        text-align: center;
        padding: 0 15px 15px 15px;
    }

    #toolModal .spec-box {
        display: inline-block;
        width: auto;
        margin: 0 auto;
        text-align: left;
    }

        #toolModal .spec-box > li {
            display: table;
            min-height: 55px;
            width: 100%;
        }

            #toolModal .spec-box > li > div {
                display: table-cell;
                vertical-align: middle;
                font-size: 16px;
            }

                #toolModal .spec-box > li > div:first-child {
                    width: 30%;
                }

                #toolModal .spec-box > li > div:last-child {
                    width: 70%;
                }

    #toolModal .modal-dialog {
        top: calc(50% - 280px);
    }

    #toolModal .btn {
        margin: 18px auto 10px auto;
        display: block;
    }

    #toolModal .modal-footer {
        margin: 0 30px 35px 30px;
        text-align: left;
    }

        #toolModal .modal-footer h4 {
            font-size: 16px;
            font-weight: 500;
            text-align: center;
        }

    #toolModal .result-text {
        margin-top: 8px;
        text-align: center;
        font-size: 16px;
    }

        #toolModal .result-text #calculator-result-quantity {
            color: #dd9b59;
            font-size: 15px;
        }
/*** 
====================================================================
9. Form
====================================================================
***/

.sub-title + .form-area {
    padding: 15px 0;
}

.form-group {
    margin-bottom: 25px;
}

.form-area .form-group:last-child {
    margin-bottom: 0;
}

.form-group > label {
    display: block;
    font-size: 15px;
    margin-bottom: 8px;
}

.form-control {
    color: #383838;
    font-size: 15px;
    border-radius: 1px;
    padding: 3px 12px 0 12px;
    height: 40px;
}

    .form-control:focus {
        border-color: #b6a89c;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .form-control::-webkit-input-placeholder {
        color: #c3c3c3;
    }

    .form-control::-moz-placeholder {
        color: #c3c3c3;
    }

    .form-control:-ms-input-placeholder {
        color: #c3c3c3;
    }

    .form-control:placeholder {
        color: #c3c3c3;
    }


/*------------checkbox、radio----------*/
.form-group .checkbox {
    margin-top: 0;
}

input[type=checkbox], input[type=radio] {
    width: 15px;
    height: 15px;
    padding: 0;
}

.radio-inline, .checkbox-inline {
    padding-left: 0;
}

    .radio-inline label {
        min-height: 20px;
        padding-left: 0;
        margin-bottom: 0;
        font-weight: normal;
        cursor: pointer;
    }

.checkbox label > span, .radio label > span, radio-inline label > span {
    font-size: 15px;
    padding-left: 3px;
    line-height: 1.8;
}

/*--color---*/
.radio.custom, .checkbox.custom {
    width: calc(100% - 22px);
    left: 22px;
}

    .radio.custom > label > input[type=radio] + span::before,
    .checkbox.custom > label > input[type=checkbox] + span::before {
        position: absolute;
        left: -22px;
        top: 5px;
    }

.login-box .checkbox.custom > label > input[type=checkbox] + span::before {
    top: initial;
}

.custom > label {
    padding-left: 0;
}

    .custom > label > [type=checkbox], .custom > label > input[type=radio] {
        opacity: 0;
    }

        .custom > label > input[type=checkbox] + span,
        .custom > label > input[type=radio] + span {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            margin: 0;
            padding-left: 0;
            /*line-height: 20px;*/
            min-height: 18px;
            min-width: 18px;
            font-weight: normal;
        }


            .custom > label > input[type=checkbox] + span::before,
            .custom > label > input[type=radio] + span::before {
                font-family: fontAwesome;
                content: "\a0";
                font-weight: 300;
                font-size: 9px;
                color: #b6a89b;
                background-color: #fff;
                border: 1px solid #c0c0c0;
                border-radius: 2px;
                box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
                display: inline-flex;
                justify-content: center;
                align-items: center;
                margin-right: 6px;
                width: 16.5px;
                height: 16.5px;
            }

            .custom > label > input[type=radio] + span::before {
                border-radius: 50%;
            }

    /*checked*/
    .custom > label > input[type=checkbox]:checked + span::before {
        content: '\f00c';
    }

    .custom > label > input[type=radio]:checked + span::before {
        content: "\f111";
        color: #b6a89b;
    }


    /*hover*/
    .custom > label > input[type=checkbox]:hover + span::before,
    .custom > label > input[type=radio]:hover + span::before,
    .custom > label > input[type=checkbox] + span:hover::before,
    .custom > label > input[type=radio] + span:hover::before {
        border-color: #b6a89b;
    }

/*.custom > label > input[type=checkbox]:hover + span,
    .custom > label > input[type=radio]:hover + span,
    .custom > label > input[type=checkbox] + span:hover,
    .custom > label > input[type=radio] + span:hover  {
        color: #938e89;
    }*/

/*------------bootstrap-select------------*/

.form-group .bootstrap-select {
    margin: 0 10px 12px 0;
}

    .form-group .bootstrap-select,
    .form-group .bootstrap-select .btn {
        width: 150px !important;
    }

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
}

.bootstrap-select .dropdown-menu {
    border-radius: 2px;
    padding: 3px;
    background-color: #fff;
    border-top: none;
}

    .bootstrap-select .dropdown-menu > li > a {
        padding: 6px 15px;
        color: #666;
        background: #fff;
    }

        .bootstrap-select .dropdown-menu > li > a:hover, .bootstrap-select .dropdown-menu > li > a:focus {
            background-color: #f0f0f0;
        }

    .bootstrap-select .dropdown-menu > .active > a, .bootstrap-select .dropdown-menu > .active > a:hover, .bootstrap-select .dropdown-menu > .active > a:focus {
        color: #fff;
        background-color: #b6a89b;
    }


/*** 
====================================================================
10. Shopping
====================================================================
***/

/*----llist-cart----*/

.list-cart {
    padding: 40px 0 50px 0;
}

    .list-cart .panel-left {
        display: inline-block;
        width: 64%;
    }

    .list-cart .panel-right {
        display: inline-block;
        width: 32%;
        float: right;
        margin-bottom: 40px;
    }

    .list-cart .area-title {
        font-size: 22px;
        font-weight: 600;
        color: #493d31;
        width: 100%;
        margin: -10px 0 0 0;
        padding: 0 0 8px 0;
        border: none;
    }

    .list-cart .sub-title {
        color: #493d31;
        font-size: 22px;
        font-weight: 600;
        width: 100%;
        margin: -10px 0 0 0;
        padding: 0 0 8px 0;
        border: none;
        font-size: 20px;
    }


    /*-----subtotal------*/
    .list-cart .panel-right .total-box {
        padding: 23px 20px;
        border-radius: 5px;
        background-color: rgba(240, 235, 231, 0.43);
    }

    .list-cart .total-box .subtotal-box {
        border-bottom: 1px solid #b1b1b1;
        padding-bottom: 16px;
        margin-bottom: 10px;
    }

        .list-cart .total-box .subtotal-box > li {
            display: table;
            min-height: 32px;
            width: 100%;
        }

            .list-cart .total-box .subtotal-box > li > div {
                display: table-cell;
                vertical-align: middle;
                font-size: 15px;
                width: 50%;
            }

                .list-cart .total-box .subtotal-box > li > div:first-child {
                    color: #848484;
                }

                .list-cart .total-box .subtotal-box > li > div:last-child {
                    color: #848484;
                    text-align: right;
                }

                    .list-cart .total-box .subtotal-box > li > div:last-child span {
                        color: #333;
                        font-size: 16px;
                        font-weight: 500;
                        text-align: right;
                        display: inline-block;
                        width: 50px;
                    }

    .list-cart .total-box .total-count {
        color: #9a9a9a;
        text-align: right;
    }

        .list-cart .total-box .total-count span {
            color: #dd9b59;
            font-size: 15px;
            font-weight: 500;
        }

    .list-cart .total-box .total-price {
        color: #333;
        font-size: 18px;
        text-align: right;
        margin: 25px 0 0 0;
    }

        .list-cart .total-box .total-price span {
            font-size: 22px;
            font-weight: 600;
        }

    .list-cart .panel-right .btn {
        width: 100%;
        margin-top: 20px;
    }

/*----shopping-step-----*/
.shopping-step {
    width: 100%;
    height: 46px;
    margin: 25px 0 20px 0;
    position: relative;
}

    .shopping-step > li {
        display: inline-flex;
        align-items: center;
        font-size: 20px;
        font-weight: 600;
        background-color: #fff;
    }

        .shopping-step > li:first-child {
            position: absolute;
            left: 0;
        }

        .shopping-step > li:nth-child(2) {
            position: absolute;
            left: calc(33.33% - 42px);
        }

        .shopping-step > li:nth-child(3) {
            position: absolute;
            left: calc(66.66% - 84px);
        }

        .shopping-step > li:last-child {
            position: absolute;
            right: 0;
        }

        .shopping-step > li:not(:last-child):before {
            content: "";
            display: block;
            background-color: #eadfb8;
            height: 2px;
            width: 150%;
            position: absolute;
            left: 100%;
            bottom: 50%;
            margin-left: 10px;
            z-index: 0;
        }

        .shopping-step > li > span {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background-color: #b6a89b;
            color: #fff;
            font-size: 15px;
            font-weight: normal;
            margin-right: 8px;
        }

        .shopping-step > li.active > span {
            background-color: #493d31;
            transform: scale(1.2);
            margin-right: 12px;
        }

.button-box > * {
    width: 49% !important;
}

.button-box > .btn:last-child {
    float: right;
}

/*-----cart-inner-------*/
.list-cart .cart-inner {
    border-bottom: 1px solid #c3c3c3;
    padding: 0 0 40px 0;
    margin: -10px 0 45px 0;
}

.list-cart .order-box + .cart-inner {
    margin-top: 30px;
    margin-bottom: 0;
    padding-bottom: 5px;
    border-bottom: none;
}

.cart-inner .sub-title {
    margin: 0;
    padding: 0 0 15px 0;
}

.cart-inner .cart-inner-row:first-of-type {
    border-bottom: 1px solid #c3c3c3;
    padding-bottom: 40px;
    margin-bottom: 35px;
}

.cart-inner .pay-button li {
    display: inline-flex;
    align-items: center;
    width: 48%;
    height: 65px;
    padding: 16px;
    border: 1px solid #9b9b9b;
    border-radius: 2px;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

    .cart-inner .pay-button li:last-child {
        float: right;
    }

    .cart-inner .pay-button li:before {
        content: "";
        display: inline-block;
        border: 1px solid #9b9b9b;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        margin-right: 12px;
    }

    .cart-inner .pay-button li img {
        height: 100%;
        width: auto;
        max-height: 30px;
        max-width: 80%;
    }

    .cart-inner .pay-button li.active {
        border: 1px solid #b99515;
        outline: 0.5px solid #b99515;
    }

        .cart-inner .pay-button li.active:before {
            border: 4px solid #b99515;
        }

.cart-inner .sub-panel {
    padding: 20px 22px;
    border-radius: 5px;
    background-color: rgba(240, 235, 231, 0.43);
    display: table;
    width: 100%;
}

.list-cart .cart-inner .sub-panel > div {
    display: table-cell;
    vertical-align: middle;
    padding-top: 12px;
}

.cart-inner .sub-panel > div.title {
    font-size: 15px;
    width: 100px;
}

.cart-inner .sub-panel > div.txt .input-group-btn .btn {
    line-height: 1;
    height: 40px;
    padding: 0 25px 0 25px;
}

.cart-inner .sub-panel > div.note-box {
    display: table-row;
}

    .cart-inner .sub-panel > div.note-box:before {
        content: "";
        display: table-cell;
    }

    .cart-inner .sub-panel > div.note-box > * {
        display: table-cell;
        text-align: right;
        padding-top: 10px;
        color: #c3c3c3;
        font-size: 14px;
    }

    .cart-inner .sub-panel > div.note-box > div span {
        color: #000;
        font-size: 15px;
    }

    .cart-inner .sub-panel > div.note-box > a {
        color: #b6a89b;
    }

        .cart-inner .sub-panel > div.note-box > a:hover {
            color: #a59586;
        }

        .cart-inner .sub-panel > div.note-box > a .fa-plus {
            font-size: 10px;
            font-weight: 300;
            border: 2px solid;
            border-radius: 50%;
            width: 19px;
            height: 19px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 5px;
            position: relative;
            top: -0.5px;
            padding-top: 0.5px;
        }


.cart-inner .sub-panel .spec-box > li {
    display: block;
    padding: 5px 0;
}

    .cart-inner .sub-panel .spec-box > li > span {
        font-size: 14px;
        color: #7c7c7c;
    }

        .cart-inner .sub-panel .spec-box > li > span:last-child {
            font-size: 15px;
            color: #4a4c58;
        }

.list-cart .cart-check {
    border-top: 1px solid #b6a89b;
    padding: 25px 0 25px 0;
    margin: 35px 0 0 0;
}

    .list-cart .cart-check .checkbox {
        margin-bottom: 15px;
    }

        .list-cart .cart-check .checkbox span a {
            color: #b6a89b;
        }
/*** 
====================================================================
11. Member
====================================================================
**
*/

.login-bg {
    background: url('../images/img_login_bg.jpg') no-repeat center center;
    background-size: cover;
}

.login-box {
    min-height: -moz-calc(100vh- 100px);
    min-height: -webkit-calc(100vh - 100px);
    min-height: -o-calc(100vh - 100px);
    min-height: calc(100vh - 100px);
    background-color: #fff;
    margin: 0 auto;
    width: 400px;
    padding: 10vh 40px 40px 40px;
}

    .login-box > img {
        margin: 0 auto;
        display: block;
        width: 55%;
        padding-bottom: 6px;
    }

    .login-box > h1 {
        font-size: 18px;
        color: #4a4c58;
        text-align: center;
        font-weight: 600;
        padding-bottom: 8vh;
        min-height: 55px;
    }

    .login-box .form-area {
        min-height: 260px;
    }

    .login-box .form-group > label {
        font-size: 16px;
    }

    .login-box .text-right {
        float: right;
        font-weight: normal;
        font-size: 13px;
    }

.input-addicon {
    position: relative;
}

    .input-addicon .form-control-icon {
        position: absolute;
        right: 8px;
        top: 10px;
    }

        .input-addicon .form-control-icon.icon-eye:before {
            content: "";
            background: url(../images/icon_eye.svg) no-repeat;
            background-size: cover;
            width: 20px;
            height: 16px;
            display: block;
        }

.login-box .form-group .checkbox {
    margin-top: 8px;
}

    .login-box .form-group .checkbox label > span {
        font-size: 13px;
    }

/*.login-box .form-group .checkbox.custom > label > input[type=checkbox] + span::before {
        top: initial;
    }*/

.login-box .btn.btn-light {
    margin-top: 10px;
    width: 100%;
}

.login-box .note-txt {
    margin-top: 8px;
    color: #9b9b9b;
    font-size: 13px;
}

.login-box .sub-title {
    margin-top: 3vh;
    color: #9b9b9b;
    font-size: 16px;
    text-align: center;
}

.login-box .external-button {
    margin-top: 12px;
    text-align: center;
}

    .login-box .external-button a:not(:last-child) {
        margin-right: 22px;
    }

    .login-box .external-button a:hover {
        opacity: 0.8;
        -webkit-transition-duration: 500ms;
        transition-duration: 500ms;
    }

.login-box .msg-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    margin-bottom: 25px;
    color: #9b9b9b;
    opacity: 0;
}

    .login-box .msg-box.active {
        opacity: 1;
        -webkit-transition-duration: 500ms;
        transition-duration: 500ms;
    }

    .login-box .msg-box img {
        width: 42px;
        height: 42px;
        margin-top: -2px;
        margin-right: 10px;
    }

/*-----profile-----*/
.member-page {
    position: relative;
}

.member-right {
    padding: 30px 0 50px 0;
}

.member-left {
    padding: 0;
}

.member_area .area-title {
    color: #493d31;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    padding: 0 0 8px 0;
    position: relative;
}

    .member_area .area-title span {
        font-size: 15px;
        color: #4a4c58;
        font-weight: normal;
        padding-left: 5px;
    }

.member_area .form-area {
    padding: 35px 0;
    margin-bottom: 40px;
    border-top: 1px solid #b6a89b;
    border-bottom: 1px solid #b6a89b;
}

/*menu-btn*/
.member-menu-btn {
    background: transparent;
    padding-right: 4px;
    font-size: 23px;
}

    .member-menu-btn:hover {
        color: #b39076;
    }

    .member-menu-btn .fa-angle-left {
        font-weight: 600;
    }

    .member-menu-btn.collapsed .fa-times,
    .member-menu-btn:not(.collapsed) .fa-angle-left {
        display: none;
    }

    .member-menu-btn:not(.collapsed) {
        position: absolute;
        right: 0;
        top: -10px;
        z-index: 100;
    }

    .member-menu-btn .fa-times {
        margin-right: 25px;
    }

    .member-menu-btn:not(.collapsed) {
        animation: memberslide 1s ease;
    }

@keyframes memberslide {
    from {
        right: 150%;
    }

    to {
        right: 0;
    }
}

/*animate*/
.member-menu {
    position: absolute;
    right: 100%;
    width: 100%;
    transition: all 0.5s ease;
    display: block;
    background-color: #fff;
    z-index: 100;
}

    .member-menu.collapsing {
        height: auto !important;
        /*right: 100%;*/
        transition: all 0.3s ease;
    }

    .member-menu.in {
        right: 0;
    }

        .member-menu.in > ul {
            padding: 25px 20px 50px 20px;
            min-height: 100vh;
        }

    /*member-menu*/
    .member-menu > ul {
        padding: 25px 0 50px 0;
    }

    .member-menu ul > li > a {
        display: block;
        font-size: 16px;
        padding: 10px 8px;
        border-bottom: 1px solid #d8d8d8;
        color: #9b9b9b;
        font-weight: 500;
    }

    .member-menu ul.sub-menu {
        padding: 10px 32px;
        border-bottom: 1px solid #d8d8d8;
    }

        .member-menu ul.sub-menu > li > a {
            font-size: 15px;
            padding: 7px 0;
            border: none;
        }

    .member-menu ul > li.active > a {
        color: #493d31;
        font-weight: 600;
    }

    .member-menu ul > li > a > .user-icon,
    .member-menu ul > li > a > i {
        margin-right: 5px;
    }

    .member-menu ul > li > a > .user-icon {
        height: 14px;
        width: 14px;
        margin-top: -2px;
        content: url(../images/icon_user_gray.svg);
    }

    .member-menu ul > li.active > a > .user-icon {
        content: url(../images/icon_user.svg);
    }

    .member-menu ul > li > a:hover, .member-menu ul > li > a:focus {
        color: #b39076;
        transition: none;
    }

        .member-menu ul > li > a:hover .user-icon,
        .member-menu ul > li > a:focus .user-icon {
            content: url('../images/icon_user-hover.svg');
        }

/*------table------*/
.table-box {
    overflow-x: auto;
    margin-bottom: 15px;
}

    .table-box .table {
        min-width: 650px;
        margin-bottom: 10px;
    }

        .table-box .table > thead > tr > th {
            border-top: 1px solid #b6a89b !important;
            border-bottom: 1px solid #b6a89b;
            padding: 10px 8px;
            color: #4a4c58;
        }

        .table-box .table > tbody > tr > td {
            padding: 18px 8px;
            color: #4a4c58;
        }

        .table-box .table > tbody > tr:last-child > td {
            border-bottom: 1px solid #b6a89b;
        }

        .table-box .table > tbody > tr > td a {
            color: #c58a4f;
        }

    .table-box .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #f4f1ee;
    }

/*order detail*/
.member_area .cart-inner .sub-panel {
    margin-top: 25px;
    padding: 28px;
}

/*** 
====================================================================
12. Single
====================================================================
***/

/*-----empty center-----*/
.stepPanel .empty-box {
    margin: 70px 0 100px 0;
}

.single-area .empty-box {
    margin: 230px 0 180px 0 !important;
}

.empty-box img {
    margin: 0 auto;
    display: block;
    max-width: 300px;
}

.empty-box h2 {
    margin-top: 20px;
    text-align: center;
    color: #4a4a4a;
    font-size: 24px;
    font-weight: 600;
}

.empty-box p {
    padding: 0px;
    text-align: center;
    color: #c3c3c3;
    font-size: 15px;
}

/*----single page----*/
.single-area h1 {
    text-align: center;
    color: #4a4a4a;
    margin: 50px 0 60px 0;
    font-size: 28px;
    font-weight: 600;
}

.single-area .detail_area {
    border: solid 1px #d7d7d7;
    background-color: #fff;
    margin: 30px 0;
    padding: 35px 5%;
    border-radius: 4px;
}

.single-area.faq-area .detail_area {
    padding: 25px 4%;
}

.single-area .top-box {
    width: 450px;
    display: block;
    margin: 20px auto;
}

    .single-area .top-box img {
        width: 100%;
    }

.single-area .search-panel {
    position: relative;
    margin: 25px 15px 30px 15px;
}

    .single-area .search-panel input {
        box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.14);
    }

    .single-area .search-panel .search-button {
        left: initial;
        right: 10px;
        top: 8px;
    }

.single-area .detail_area .faq-btn {
    font-size: 17px;
    color: #898989;
    width: 100%;
    font-weight: 600;
    display: block;
}

    .single-area .detail_area .faq-btn:before {
        font-family: "FontAwesome";
        content: "\f068";
        float: right;
        color: #80868b;
        font-size: 18px;
        font-weight: normal;
    }

    .single-area .detail_area .faq-btn.collapsed:before {
        content: "\f067";
    }

    .single-area .detail_area .faq-btn span {
        font-size: 18px;
        color: #b6a89b;
    }

.single-area .detail_area .collapsing {
    top: 22px;
}

.single-area .detail_area .collapse {
    padding-top: 22px;
    /*transition: all 250ms ease;*/
}