@charset "utf-8";

.shopping_way.hot {
    text-align: center;
}
.top-nav>ul>li {
    color: #fff;
}
.site-header .search-box .form-control {
    background: transparent;
}
.search-box:after {
    color: #E9DCD6;
}
/*------------ banner ------------*/

.wrapper {
    background: #2F0108;
}

.site-main {
    position: relative;
}

.site-main:after {
    content: '';
    width: 100%;
    height: 60%;
    background: url(../../images/common/bg.jpg)center top;
    display: block;
    bottom: 0;
    background-size: 100%;
    position: absolute;
    z-index: 0;
}


.sect1 .container,
.products-sect .container,
.ad-sect .container{
    z-index: 80;
}


.banner {
    margin-bottom: 135px;
}



.banner .slick-arrow {

    transition: all .2s;

    border: 0;

    color: transparent;

    background: rgba(233, 220, 214, .7);

    width: 50px;

    height: 50px;

    text-align: center;

    line-height: 50px;

    position: absolute;

    z-index: 50;

    cursor: pointer;

}



.banner .slick-arrow:hover {

    transition: all .2s;

    background: #ebd1ba;

}



.banner .slick-arrow:before {

    content: "";

    font-family: 'icon-font' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 50px;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    color: #5c2d2d;

    font-size: 30px;

}



.banner .slick-prev {

    left: 0;

    bottom: 50px;

}



.banner .slick-prev:before {

    content: "\e100e";

}



.banner .slick-next {

    bottom: 0;

    left: 50px;

}



.banner .slick-next:before {

    content: "\e1020";

}



.btn-scroll {

    display: block;

    width: 107px;

    height: 107px;

    left: 50%;

    bottom: -50px;

    margin: 0 0 0 -35px;

    z-index: 50;

    position: absolute;

    background: url('../../images/common/index/scroll.png');

}

.btn-scroll:hover {
    opacity: 0.65;

}




/*------------ more ------------*/



/*section .more {
    
    line-height: 80px;
    max-width: 100px;
    height: 100px;
    margin: 35px auto 0;
    display: block;
    text-align: center;
    background: #D54F22;
    border: 1px SOLID #eee6e6a8;
    letter-spacing: 1px;
    transition: all .2s;
    }


section .more:before{
        content:"MORE";
        font-size:18px;
       display: block; 
       color:#eee6e6ed;
    width: 85px;
    height: 85px;
    margin: 4px auto 0;
    text-align: center;
    background: #D54F22;
    border: 3px SOLID #eee6e6a8;
    letter-spacing: 1px;
    transition: all .2s;
    }


section .more:hover::before{
        border:1px SOLID #eee6e6a8;
        /*background: #E1673E;
        margin: 6px auto 0;
    

}*/
/*------jose參考-----*/

div.back {
    margin: 50px;
}

.about-box .text .more {
    width: 98px;
    height: 98px;
    line-height: 98px;
    /*margin: 35px auto 0;*/
    display: block;
    color: #fff;
    text-align: center;
    border: 1px solid #fff;
    font-weight: bold;
    font-size: 15px;
    /*outline: 3px solid #D54F22;*/
    letter-spacing: 1px;
    transition: all .1s;
    position: absolute;
    z-index: 99;
    left: 0;
    top: 50%;
    margin: -50px 0 0 -50px;
    writing-mode: lr;
}

.about-box .text .more:before {
    content: '';
    display: block;
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: #D54F22;
    border: 3px solid #fff;
    z-index: -2;
    transition: all .1s ease;
}

.about-box .text .more:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #D54F22;
    z-index: -3;
}


.about-box .text .more:hover:before {
    border: 1px solid #fff;
    background: #933414;

}






.products-sect .more {
    width: 98px;
    height: 98px;
    line-height: 98px;
    margin: 30px auto -1px;
    display: block;
    color: #fff;
    text-align: center;
    border: 1px solid #fff;
    font-weight: bold;
    /*outline: 3px solid #D54F22;*/
    letter-spacing: 1px;
    transition: all .1s;
    position: relative;
    z-index: 99;

}

.products-sect .more:before {
    content: '';
    display: block;
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: #D54F22;
    border: 3px solid #fff;
    z-index: -2;
    transition: all .1s ease;

}

.products-sect .more:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #D54F22;
    z-index: -3;
}


.products-sect .more:hover:before {
    border: 1px solid #fff;
    background: #933414;


}






/*------------ sect1 ------------*/



.sect1 {

    max-width: 1820px;

    margin: 0 auto;

    background: url('../../images/common/index/about-bg.jpg') no-repeat center top;

    -webkit-background-size: cover;

    background-size: cover;

    padding: 0px 0 93px;
    position: relative;
        z-index: 1;

}

.sect5 {

    padding: 0px 0 70px;
    ;

}



/*----- news ----*/



.news-box {

    position: relative;

    top: -20px;

    margin: 0 0 20px;

}



.news-box .title {

    background: #B1A7A0;

    color: #fff;

    width: 155px;

    line-height: 50px;

    font-family: "Times New Roman";

    text-align: center;

    font-size: 20px;

    letter-spacing: 4px;

    float: left;

}



.news-box .news-marquee {

    background: url('../../images/common/index/news-bg.jpg');

    padding: 15px;

    height: 50px;

    float: right;

    width: calc(100% - 155px);

    box-sizing: border-box;

    letter-spacing: 1px;

    line-height: 1.2;

}



.news-marquee .date {
    border-bottom: 1px solid #111;
    display: inline-block;
    color: #111;
    padding-right: 10px;
    margin-right: -4px;

}



.news-marquee .name {

    border-bottom: 1px solid #000000;

    display: inline-block;
	    margin-right: 40px;

}



/*ios */

.news-marquee a {

    display: inline-block;

    line-height: 1;

    white-space: nowrap;

}

/*/ios*/

/*----- about ----*/



.about-box {

    position: relative;

}



.about-box .pic {

    position: absolute;
    top: 70px;
    max-width: 669px;
    right: 130px;

}



.about-box .text {

    font-size: 18px;
    padding: 70px 300px 27px;

    background: rgba(233, 220, 214, 0.4);

    border: 5px solid rgba(225, 225, 225, 0.6);

    max-width: 1100px;

    margin: 2px 130px -50px 5px;

    box-sizing: border-box;

    float: right;

    position: relative;

    z-index: 15;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;

}



.about-box .text .title {

    font-family: "Times New Roman";

    font-size: 32px;

    line-height: 1.2;

    font-weight: bold;

    margin: 0 0 20px;

    letter-spacing: 9px;

}





/*------------ products ------------*/
.products-sect:before {
    content: '';
    width: 100%;
    height: 100%;
    background: url(../../images/common/bg.jpg);
    display: block;
    z-index: 11;
}



.products-sect {
    padding: 70px 0 90px;
}



.products-sect .title {
    font-size: 32px;
    font-weight: bold;
    font-style: inherit;
    color: #2C0006;
    font-family: "Times New Roman", '新細明體';
    text-align: center;
    margin: 0 0 10px;
    position: relative;
    letter-spacing: 0.15em;
}



.products-arrow {

    position: absolute;

    top: 10px;

    right: 0;

    width: 65px;

}



.products-arrow:before {

    /*content: "";

    display: block;

    width: 1px;

    height: 34px;

    background: rgba(255, 255, 255, 0.5);

    position: absolute;

    top: 50%;

    right: 50%;

    margin: 24px 0 0 0;*/

}



.products-arrow button {

    border: 0;

    color: transparent;

    background: none;

    cursor: pointer;

    padding: 0;

    position: absolute;

}



.products-arrow .slick-prev {
    left: -5px;
    top: -5px;
}



.products-arrow .slick-next {

    right: -65px;
    top: -5px
}



.products-arrow .slick-arrow:before {
    color: #999;
    border: 1px solid;
    font-family: 'icon-font' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 25px;
}



.products-arrow .slick-arrow:hover:before {
    color: #775a47;
}



.products-arrow .slick-prev:before {

    content: "\e100e";

}



.products-arrow .slick-next:before {

    content: "\e1020";

}



.products-list {

    margin: 0 -17px;

}

.products-list .new>a {

    position: relative;

}

.products-list .new>a::before {
    content: 'NEW';
    text-align: center;
    display: block;
    z-index: 15;
    left: 1px;
    top: 2px;
    color: #fff;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 99em;
    background: #e54610;
    line-height: 50px;
}

.products-list li {

    width: 20%;

    padding: 0 17px;

}



.products-list li a {

    margin: 0 auto;

    max-width: 260px;

    display: block;

    box-sizing: border-box;

}



.products-list .pic {

    position: relative;

    box-sizing: border-box;

    transition: all .2s;

    border: 1px solid #fff;

    margin: 0 auto 3px;

    max-width: 260px;

    overflow: hidden;
}



.products-list .pic:before,

.products-list .pic:after {

    position: absolute;

    display: block;

    transition: all .2s;

    opacity: 0;

}



.products-list .pic:before {

    content: "";

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(255, 204, 153, .6);

    z-index: 50;

}



.products-list .pic:after {

    content: "";

    display: block;

    background: url(../../images/common/p-hover.png) no-repeat 50% 50% rgba(255, 204, 153, .6);

    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;

}






.products-list a:hover .pic:after {

    transition: all .2s;

    opacity: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}




.products-list li a:hover .pic:after {

    /*top: 50%;*/



}


.products-list .pic img {

    transition: all 0.35s ease-in-out;

    transform: scale(1);

}



.products-list .pic:hover img {

    transition: all 0.35s ease-in-out;

    transform: scale(1.2);

}



.products-list .text {

    text-align: center;

    max-width: 260px;

    margin: 0 auto;

    box-sizing: border-box;

    /* background: #E9DCD6;*/

    padding: 8px 10px;

    position: relative;

    transition: all .2s;

}



.products-list li .text:hover {

    background: #fff;

    transition: all .2s;

}



.products-list .name {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
    font-size: 16px;
    color: #000000;

}



.products-list li .offers {

    color: #B20000;

    font-weight: bold;

    font-size: 18px;

    position: relative;

}



.products-list li .offers i {

    font-size: 18px;

    color: #B20000;

    vertical-align: middle;

    display: inline-block;

    margin: 0 5px 3px 0;

}

.products-list li .wish,

.products-list li .del {

    width: 35px;

    height: 35px;

    background: rgba(188, 124, 88, .5);

    text-align: center;

    line-height: 35px;

    color: #fff;

    font-size: 18px;

    position: absolute;

    bottom: 0;

    right: 0;

    z-index: 15;

    transition: all .2s;

}



.products-list li .wish:hover,

.products-list li .del:hover {

    transition: all .2s;

    background: rgba(188, 124, 88, 1);

}





.products-list li .pic a {

    position: relative;

    z-index: 1011;

}

.products-list li .pic .btn {

    background: #79796A;

    width: 32px;

    height: 32px;

    line-height: 32px;

    text-align: center;

    position: absolute;

    right: 0;

    top: 0;

    z-index: 1012;

    border-radius: 0;



}

.products-list li .pic .btn:hover {

    background: #a5a698;

}

.products-list li .pic .btn i {

    color: #fff;

    font-size: 20px;

    line-height: 30px;

}





/*------------ ad ------------*/



.ad-sect {

    padding-bottom: 60px;

}





/*------------ rwd ------------*/



@media screen and (max-width: 1280px) {

    .sect1 {

        padding: 0px 0 50px;

    }


    .about-box .text {

        /*max-width: 100%;

        float: none;

        margin: -20px 0 0 0;*/
        /*原始----*/


    }

    /* .about-box .pic {

        position: static;

        margin: 15px auto 0;

    }*/

}

@media screen and (max-width: 1000px) {

    /*手機板*/
    .products-sect {
        margin: 25px 0;
    }

    .banner {
        padding-bottom: 25px;
        /* padding: 15px 0; */
        background: #E9DCD6;
        margin: 0;
    }

    .sect5 {
        background: #E9DCD6;
        padding-bottom: 45px;
    }

    .about-box .text {
        position: relative;
        width: 800px;
        padding: 25px 60px 0;
        line-height: 28px;
        margin: 3%;

    }

    .about-box .pic {
        display: none;
    }

    .about-box .text .title {
        font-size: 27px;
    }

    .products-sect .title {

        font-size: 27px;

        /*margin-bottom: 10px;*/
        margin: 35px 0 50px 0px;
    }

    section .more {
        font-size: 10px;
        letter-spacing: 0;
        margin: 5px auto;
    }

    .sect1,
    .ad-sect {
        padding: 10px 0 20px;
    }

    .products-sect,
    .sect5 {
        padding: 10px 0;
    }

    .products-sect .more {
        margin: -5px auto -16px;
    }

    .products-list {
        margin: 30px 0 10px;
    }

    .products-list li {
        padding: 19px 17px;
    }

    .products-list li .offers {
        line-height: 1.2;
    }

    .products-arrow {
        left: 50%;
        top: 30px;
        margin: 0 0 0 -32px;
    }

    .products-arrow .slick-arrow:before {
        font-size: 20px
    }

    .products-arrow:before {
        margin-top: 0;
        height: -30px;
    }

    .products-arrow .slick-next {

        right: -68px;
        margin: 20px;
    }

    .products-arrow .slick-prev {
        left: -19px;
        margin: 20px;
    }

    .banner .slick-prev {
        left: 0px;
        bottom: 0px;
    }

    .btn-scroll {
        display: none;
    }

    .index-about-editor {
        letter-spacing: 0;
    }

    .wrapper {
        background: none;
    }

}

@media screen and (max-width: 900px) {
    .about-box .text .more {
        left: 51%;
        top: 110%;

    }

    .about-box .text .more {
        width: 85px;
        height: 85px;
        line-height: 85px;
        font-size: 13px;

    }

    .about-box .text .more:before {
        border: 2px solid #fff;
    }

    .products-sect .more {
        width: 85px;
        height: 85px;
        line-height: 85px;
        font-size: 13px;

    }

    .products-sect .more:before {
        border: 2px solid #fff;
    }
}

@media screen and (max-width: 880px) {
    .about-box .text {
        margin: auto;
        width: 100%;
        padding: 25px 75px 0;
    }

    /*.about-box .pic{
          display: none;
}*/

}

@media screen and (max-width: 768px) {
    .about-box .text {
        padding: 26px 46px 0;
        line-height: 30px;
    }
}

@media screen and (max-width: 667px) {
    .about-box .text {
        line-height: 27px;
    }
}

@media screen and (max-width: 600px) {

    .banner .slick-arrow {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .banner .slick-arrow:before {
        font-size: 10px;
        line-height: 30px;
    }

    .banner .slick-next {
        bottom: 0px;
        left: 30px;
    }

    /* .news-box .title,
    .news-box .news-marquee {
        float: none;
        width: auto;
        height: 35px;
        line-height: 35px;
    }*/
    .news-box .title {
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        width: 65px;
        letter-spacing: 1px;
    }

    .news-box .news-marquee {
        width: calc(100% - 65px);
        height: 30px;
        line-height: 30px;
    }

    .news-box .news-marquee {
        padding: 0 10px;

    }

    .news-marquee .date,
    .news-marquee .name {

        line-height: 1.2;
    }

    .about-box .text {
        padding: 20px;

    }
}

@media screen and (max-width: 550px) {
    .about-box .text {
        height: 550px;
        width: 100%;
        /*position:relative;*/
        line-height: 28px;
        margin: auto;
        text-align: center;
        writing-mode: rl;
        font-size: 15px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 14;
    }

    .about-box .text .more {
        left: 50%;
        top: 100%;
    }

    .products-sect .title {
        margin: 10px 0 50px 0px;
    }
}

@media screen and (max-width: 350px) {
    .about-box .text {
        height: 500px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 10;

    }
}