@charset "utf-8";
/* 設計師用 RWD版CSS檔 style_rwd.css */
/* 說明：
    可提供設計師在此檔，針對RWD版面進行設計；非RWD版面則不需載此CSS檔。*/


@media (min-width: 1200px) {
    body.home .banner {
        width: 100%;
        height: 90vh;
    }
}


@media (min-width: 992px) {
    .header .navbar-collapse.collapse {
        display: inline-block !important;
    }

    #side1collapseB {
        display: block !important;
        height: auto !important;
    }
}


@media (max-width: 991px) and (min-width: 768px) {
    .header .navbar .navbar-nav>li>a {
        text-shadow: none;
        background: none;
        color: #fff;
        text-align: center;
    }

    .header .navbar .navbar-nav {
        display: flex;
        justify-content: space-between;
    }

    .header .navbar .navbar-nav>li {
        display: block;
        width: 100%;
    }
}

@media (min-width: 768px) {
    body.home .header:before {
        content: "";
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 20%, rgba(0, 0, 0, 0) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 20%, rgba(0, 0, 0, 0) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 20%, rgba(0, 0, 0, 0) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
        /* IE6-9 */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        min-height: 200px;
        z-index: 20;
    }

    #side1collapse {
        display: block !important;
        height: auto !important;
    }

    table.table.reflow-table tr th,
    table.table.reflow-table tr td {
        text-align: center;
        vertical-align: middle;
    }

    table.table.reflow-table tr:nth-child(1) td {
        border-top: none;
    }

    table.table tr td .pic {
        max-width: 150px;
        margin: auto;
    }

    body.cart .tb-area.form-ship table th {
        width: 200px;
    }

    body.product .pro-intro .sec4 .slick-dots {
        text-align: right;
    }
}


@media (max-width: 1199px) {
    .header .banner .bxslider li {
        height: auto;
    }

    .header .banner .bxslider li img {
        display: block;
    }

    /*.header .navbar .navbar-nav {
        margin-top: 30px;
        clear: both;
        float: none;
        text-align: center;
    }*/

    .header .navbar .navbar-nav>li {
        float: none;
        display: inline-block;
    }



    .header .navbar .navbar-brand {}

    #floating {
        margin-top: -90px;
    }
}

@media (max-width: 991px) {
    .header .navbar .navbar-nav {
        padding: 0;
        margin-top: 0;
        clear: both;
        float: none;
    }

    .header .navbar .navbar-header {
        float: none;
        border-bottom: 1px solid #fff;
    }

    .header .navbar .sub-nav {
        top: 10px;
        transform: translateY(0);
    }

    .content .btn-more {
        top: 12px;
    }





    .header .navbar .navbar-brand {
        width: 74px;
        height: 18px;
        background-size: contain;
        margin: 15px 0;
    }

    /*contact*/
    body.contact .bg {
        right: 0;
    }

    body.contact .box-area {
        width: 60%;
        background: rgba(255, 255, 255, 0.85);
        margin: 80px 30px 80px auto;
    }

    /*product*/
    body.product .side .side-toggle {
        display: block;
        background: #4A525A;
        border-radius: 0;
        color: #fff;
        line-height: normal;
        padding: 10px;
    }

    body.product .side .side-toggle.collapsed i.fa-angle-up,
    body.product .side .side-toggle:not(.collapsed) i.fa-angle-down {
        display: none;
    }


    body.product .side .side-toggle i.fa-angle-up,
    body.product .side .side-toggle.collapsed i.fa-angle-down {
        display: inline-block;
    }

    body.product .side .toggle-icon {
        float: right;
    }

    body.product .side .side-nav>ul {
        border: 1px solid #858585;
        margin-top: 5px;
    }

    body.product .side .side-nav>ul li {
        display: block;
        margin: 0;
        padding: 0;
    }

    body.product .side .side-nav>ul li+li {
        border-top: 1px solid #858585;
    }

    body.product .side .side-nav>ul>li>a,
    body.product .side .side-nav>ul>li>a:hover {
        border: none;
        margin: 0;
    }

    body.product .side .side-nav>ul>li>a:hover {
        background: rgba(181, 137, 59, 1);
    }

    body.product .side .side-nav>ul>li>a:before {
        display: none;
    }

    .pro-detail .form-inline .number-spinner input {
        width: 100%;
    }

    body.product .pro-intro .sec4 .title {
        position: relative;
        background: none;
        padding: 0;
        top: auto;
        bottom: auto;
        pointer-events: none;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

    body.product .pro-intro .sec4 .pic-mirror {
        display: none;
    }


}

@media (max-width: 767px) {

    .side .side-toggle {
        display: block;
        background: #4A525A;
        border-radius: 0;
        color: #fff;
        line-height: normal;
        padding: 10px;
        border: none;
    }

    .side .side-toggle.collapsed i.fa-angle-up,
    .side .side-toggle:not(.collapsed) i.fa-angle-down {
        display: none;
    }


    .side .side-toggle i.fa-angle-up,
    .side .side-toggle.collapsed i.fa-angle-down {
        display: inline-block;
    }

    .side .toggle-icon {
        float: right;
    }

    .side .side-nav>ul {
        border: 1px solid #858585;
        margin-top: 5px;
    }

    .side .side-nav>ul li {
        display: block;
        margin: 0;
        padding: 0;
    }

    .side .side-nav>ul li+li {
        border-top: 1px solid #858585;
    }

    .side .side-nav>ul>li>a,
    .side .side-nav>ul>li>a:hover {
        border: none;
        margin: 0;
    }

    .side .side-nav>ul>li>a:hover {
        background: rgba(181, 137, 59, 1);
    }

    .side .side-nav>ul>li>a:before {
        display: none;
    }



    #floating,
    #floating.fixed {
        top: 40px;
        margin-top: 0;
    }

    #floating .btn-floating {
        display: block;
    }

    #floating ul {
        width: 0;
        overflow: hidden;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #floating.open ul {
        width: 60px;
    }

    .header .navbar {
        position: relative;
    }

    .header .navbar .navbar-brand {
        margin-left: 15px;
    }

    .header .navbar .navbar-header {
        text-align: center;
        position: relative;
    }

    .header .navbar .navbar-toggle {
        font-size: 18px;
        color: #1EB5BE;
        letter-spacing: 2px;
        border: none;
        float: none;
        margin: 0 0 20px;
        padding: 0;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .navbar-toggle .icon-bar:nth-child(3) {
        transform: rotate(-45deg);
        margin-top: -8px;
    }

    .navbar-toggle .icon-bar:nth-child(2) {
        opacity: 0;
    }

    .navbar-toggle .icon-bar:first-child {
        transform: rotate(45deg);
    }

    .navbar-toggle .icon-bar {
        transition: all .3s ease;
        background: #fff;
    }

    .navbar-toggle.collapsed .icon-bar {
        transform: rotate(0deg);
        margin-top: 5px;
    }

    .navbar-toggle.collapsed .icon-bar:nth-child(2) {
        opacity: 1;
    }

    .header .navbar .sub-nav {
        right: 50px;
    }

    .header .navbar .navbar-toggle:hover {
        background: none;
        color: #888;
    }

    .header .navbar .navbar-nav {
        background: none;
        margin: 0 -15px;
    }

    .header .navbar .navbar-nav>li {
        display: block;
    }

    .header .navbar .navbar-nav>li+li:before {
        display: none;
    }

    .header .navbar .navbar-nav>li>a {
        width: auto;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        padding: 10px;
    }

    /*.header .navbar .sub-nav {
            text-align: center;
            margin: 10px 0 20px;
            position: relative;
            right: auto;
            top: auto;
        }*/

    .header .navbar .btn-default {
        color: #333;
    }

    .header .navbar-collapse {
        background: rgb(0, 0, 0);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(181, 137, 59, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(181, 137, 59, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(181, 137, 59, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#b5893b', GradientType=0);
        /* IE6-9 */
    }

    /*.header .navbar .sub-nav li:nth-child(3) {
            display: block;
        }*/

    .header .navbar .lang {
        display: block;
    }

    .header .navbar .lang .btn {
        width: 100%;
        height: 30px;
        border-radius: 4px;
        color: #000;
        text-indent: 0;
        margin: 10px auto;
        background: #fff;
        font-size: 15px;
        float: none;
    }

    .header .navbar .lang .dropdown-menu {
        position: relative;
        top: auto;
        width: 100%;
        margin: 5px 0 15px;
        border: none;
    }

    .header .navbar .lang .dropdown-menu:before {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    /*.header .navbar .lang {
            text-align: center;
            display: block;
            margin-top: 10px;
            position: static;
        }

            .header .navbar .lang .btn {
                width: 100%;
                background: none;
                font-size: 14px;
                border: none;
                float: none;
                display: block;
                padding: 8px;
            }*/

    .header .navbar .lang .btn,
    .header .navbar .lang .btn:active .header .navbar .lang .btn:focus {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    /*.header .navbar .lang .dropdown-menu {
                text-align: center;
                box-shadow: none;
                float: none;
                position: static;
            }*/

    .footer {
        padding: 0;
    }



    .footer .copyright,
    .footer .siteinfo,
    .footer .siteinfo ul {
        display: block;
    }

    .footer .siteinfo ul>li {
        display: block;
    }

    .footer .siteinfo ul>li+li:before {
        display: none;
    }

    .main {
        z-index: auto;
    }

    .side .nav {
        margin-bottom: 20px;
    }

    .side .nav>li {
        float: none;
        display: block;
        margin: 0;
    }

    .side .nav>li+li {
        border-top: 1px solid #ABCFDB;
    }

    .content .list-box .txt-list li.list-header {
        display: none;
    }

    .content .list-box .txt-list li span {
        float: none;
        display: block;
        padding: 0;
    }

    .content .btn-box .page-info select {
        width: 100px;
        display: inline-block;
    }

    .content .btn-box .pager,
    .content .btn-box .page-info {
        float: none;
    }

    .content .btn-box .pager {
        display: block;
    }

    .content .btn-box .pager li {
        margin: 0;
    }

    .content .btn-box .pager li>a {
        width: 100%;
        text-align: center;
        margin: 5px 0 0;
    }

    /*home*/
    body.home .header .navbar {
        position: relative;
        background: #000;
        min-height: 0;
    }

    body.home .about_slogan .sec {
        display: block;
        text-align: left;
    }

    body.home .about_slogan .sec p:nth-child(2) {
        text-align: left;
    }

    body.home .about_slogan p {
        font-size: 24px;
        color: #fff;
        margin-bottom: 10px;
    }

    body.home .about_slogan .sec+p {
        margin-left: 0;
    }

    body.home .about_slogan .wd:before {
        margin: 30px 0;
    }

    body.home .home-about {
        min-height: 450px;
    }

    body.home .about_slogan .pic {
        width: 50%;
    }

    .banner .slogan {
        position: relative;
        top: auto;
        left: auto;
        transform: translate(0, 0);
        color: #fff;
        text-align: center;
        background: #b5893b;
        padding: 10px;
    }
    body.about .content .timeline .items .time {
        display: block;
    }
    body.about .content .feature {
        margin-left: auto;
        margin-right: auto;
        padding: 7% 4%;
    }

    body.about .content .feature .feature_list .items {
        margin-bottom: 15px;
    }

    body.about .content .feature .title {
        font-size: 18px;
    }

    body.about .content .feature .feature_list {
        flex-flow: wrap;
    }

    body.about .content .feature .feature_list .items .subtitle {
        font-size: 18px;
    }

    body.about .content .content_box,
    body.about .content .content_box.reverse {
        flex-direction: column;
    }

    body.about .content .content_box .desc,
    body.about .content .content_box.reverse .desc {
        margin-right: 0;
        margin-left: 0;
    }

    body.about .content .content_box .pic {
        padding-left: 0;
        padding-right: 0;
    }

    /*news*/
    .news-list li a .info {
        display: block;
    }

    .news-list .date {
        display: block;
    }

    /*faq*/
    /*.faq-list .panel-group .panel:before{
            position:relative;
        }*/
    .faq-list .panel-group .panel {
        padding-left: 0;
    }

    .faq-list {
        width: 100%;
    }

    /*contact*/
    body.contact .box-area {
        width: 85%;
        margin: 50px auto -70px;
        background: #fff;
    }

    body.contact .bg {
        position: relative;
        height: 300px;
    }

    /*member*/
    body.member .box-area {
        width: 90%;
    }

    body.member.login .btn-box .btn-login {
        width: 100%;
    }

    .btn-box,
    body.member.login .btn-box ul {
        width: 100%;
        display: block;
    }

    body.member.login .btn-box ul li a {
        background: #ddd;
        display: block;
        padding: 10px 20px;
    }

    body.member.login .btn-box ul li a:hover {
        color: #fff;
        background: #b5893b;
        text-decoration: none;
    }


    .btn-box ul li {
        display: block;
        margin-bottom: 7px;
    }

    .btn-box .pager li {
        display: inline-block;
    }






    body.member.index .btn-member {
        display: block;
    }

    body.member.index .btn-member li {
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }

    body.member.index .btn-member li a {
        width: 100%;
    }

    body.member.index .btn-member li a:hover:before {
        transform: rotate(0);
    }

    table.table.reflow-table tr td:nth-child(1) {
        background: #DCD8CD;
        border-top: none;
    }

    table.table.reflow-table tr td:nth-child(2) {
        border-top: none;
    }

    table.table.reflow-table tr td a.btn-tb {
        display: inline-flex;
    }

    table.table.reflow-table tr td:not([data-th="商品圖"]) {
        display: flex;
    }

    table.table.reflow-table tr td[data-th="商品圖"] {
        background: none;
    }

    table.table.reflow-table tr td[data-th="商品圖"]:before {
        display: block;
        background: #96897B;
        padding: 8px;
        margin: 0 -8px 8px;
    }


    table.table.reflow-table tr td .pic {
        max-width: 150px;
    }

    table.table.tb-normal tr td,
    table.table.tb-normal tr th {
        display: block;
    }

    table.table.tb-normal tr td {
        border-left: none;
        border-top: none;
        padding-top: 0;
    }

    /*cart*/
    body.cart .number-spinner,
    table.table.reflow-table tr td a.btn-tb {
        margin: 0;
    }

    body.cart .btn-box.d-flex {
        display: block;
    }

    body.cart .btn-box.d-flex a {
        margin-bottom: 5px;
    }

    .tb-area .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    .btn-box a.btn-style {
        display: block;
    }

    .enter-coupon,
    .enter-coupon a {
        display: block;
    }

    .tb-area .form-inline .form-control,
    .tb-area .autoW {
        display: block;
        width: 100%;
        vertical-align: middle;
    }

    .tb-area .form-control {
        margin-bottom: 5px;
    }

    /*dealer*/
    body.member.dealer.index .btn-member {
        width: 100%;
    }

    body.dealer .search-revenue .date {
        margin-bottom: 5px;
    }

    body.dealer .search-revenue a.btn {
        width: 100%;
    }

    .header .navbar .navbar-header {
        border-bottom: none;
    }

    body.product .pro-intro .d-flex {
        display: block;
    }

    body.product .pro-intro .sec1 .bg {
        background: url(../images/all/bg_pro.jpg) no-repeat center bottom;
        position: relative;
        z-index: 0;
        background-size: cover;
        width: 100%;
        height: 150px;
    }

    body.product .pro-intro .sec1 .scroll-pic-area {
        padding-top: 0;
    }

    body.product .pro-intro .sec1 .pic,
    body.product .pro-intro .sec3 .pic {
        width: 20%;
        position: relative;
        margin: -50px auto 0;
    }

    body.product .pro-intro .sec1 .pic {
        padding-top: 0;
    }
    body.product .pro-intro .sec3 .pic {
        margin: 0 auto 0;
    }

    body.product .pro-intro .sec1 .info {
        width: 100%;
        padding-bottom: 0;
        z-index: 1;
        margin: auto;
    }

    body.product .pro-intro .sec1 .info img {
        display: block;
        width: 110px;
        margin: 15px auto;
    }


    body.product .pro-intro .sec2 {
        width: 100%;
        margin: 50px 0;
        position: relative;
    }

    body.product .pro-intro .sec2 .info {
        width: 100%;
    }

    body.product .pro-intro .sec2 .pic {
        position: absolute;
        right: 0;
        width: 80%;
        bottom: 0;
        opacity: .5;
    }

    body.product .pro-intro .sec2 .pic img {
        margin: 0 0 0 auto;
    }

    body.product .pro-intro .sec3 {
        position: relative;
        margin-bottom: 50px;
        margin-top: 0;
    }

    body.product .pro-intro .sec3 .info {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }

    body.product .pro-intro .sec3 .info br {
        display: none;
    }


}

@media (max-width: 600px) {

    /*.enter-coupon {
        display: flex;
        justify-content: space-between;
    }
    .enter-coupon input {
        min-width: 0;
    }*/
    /*body.home .banner {
        width: 100%;
        height: 60vh;
        margin-top: -26px;
    }*/

    body.product .pro-intro .sec2 .pic {
        right: -15%;
    }



}



@media (max-width: 480px) {

    .content .btn-box .pager li:nth-child(1),
    .content .btn-box .pager li:last-child {
        display: table;
        margin: auto;
    }

}