@import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Italianno|Nothing+You+Could+Do&display=swap');


.wrapper{width: 100%;overflow: hidden;}


/*小廣告*/
#ssbanner{padding: 40px 0px;margin-bottom: 50px;background: #fbf8f0;}
#ssbanner .container{width: 1115px;}
#ssbanner .ssbanner-item{margin: 0 15px;background-size: 100% auto;background-position: center;background-repeat: no-repeat;}
#ssbanner .ssbanner-item a{display: block;position: relative;transition: ease .3s;}
#ssbanner .ssbanner-item a:hover{background: rgba(121, 85, 26, 0.5);}
#ssbanner .ssbanner-item .title{position: absolute;padding: 15px; width: 100%; top: 50%;transform: translateY(-50%); text-align: center;color: #fff;opacity: 0;transition: ease .3s;}
#ssbanner .ssbanner-item a:hover .title{opacity: 1;}
#ssbanner .slick-slider{margin-bottom: 0px;background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
#ssbanner .arrow{display: block;position: absolute;top: 50%;height: 20px;width: 20px;cursor: pointer;opacity: .5;transition: ease .3s;}
#ssbanner .arrow:hover{opacity: 1;}
#ssbanner .prev{left: 0px; transform: translateY(-50%); margin-left: -35px;background: url(/images/27/ico_arrow_prev.svg) no-repeat;}
#ssbanner .next{right: 0px; transform: translateY(-50%); margin-right: -35px;background: url(/images/27/ico_arrow_next.svg) no-repeat;}

.sectionTitle{margin-bottom: 20px;}
.sectionTitle h2{font-size: 32px;display: inline-block;}
.sectionTitle .btn{display: inline-block;margin-left: 30px;}
.sectionTitle .btn a{font-size: 16px;}
.sectionTitle .btn a i{margin-right: 5px;color: #79551a;}

.index-btn{text-align: center;}
.index-btn a{display: inline-block;font-size: 16px; background: #fbf8f0;transition: ease .3s; color: #000;font-weight: bold; box-sizing: border-box;width: 380px;height: 56px;line-height: 56px;}
.index-btn a i{margin: 0 5px;color:#79551a;}
.index-btn a:hover{background:#79551a;color: #fff; }
.index-btn a:hover i{color: #fff;}
/*news*/
#NPBox{margin-bottom: 80px;}


#newBox{border: 1px solid #eee;box-sizing: border-box;}
#NPBox .news-content-title{display: inline-block;margin-right: 30px; width: 124px;padding: 16px 0;background: #79551a;font-weight: bold;text-align: center;color: #fff;font-size: 16px;}
#NPBox .new-slider{width: calc(100% - 160px);display: inline-block;margin-bottom: 0px;}
#NPBox .news-item{position: relative;display: flex;align-items: center;}
#NPBox .news-item .date{vertical-align: text-bottom;position: relative; font-family: 'Montserrat', sans-serif;margin-right: 30px;font-size: 15px;}
#NPBox .news-item h3{width: 70%;}
#NPBox .news-item .title{display: inline-block;overflow:hidden;text-overflow:ellipsis; white-space:nowrap; vertical-align: text-bottom; font-size: 15px;font-weight: bold;}
#NPBox .news-item .date::after{content: "";position: absolute;right: -23px; width: 13px;height: 2px;background: #79551a;top: 50%;transform: translateY(-50%);}
#NPBox .news-item .more{position: absolute;bottom: 0px; right: 0px;font-size: 15px;padding-right: 40px;}
#NPBox .news-item .more::after{content: ""; position: absolute;left: -15px;height: 24px;width: 1px;background: #eee;display: inline-block;}
#NPBox .news-item .more i{padding:0 5px;color: #79551a;font-size: 16px;}

/*product*/
#products{padding-bottom: 100px;}
#products .sectionTitle{margin-bottom: 40px;}
.products-list{display: flex;flex-wrap: wrap;}
.products-list .product-item{margin-right: 30px;margin-bottom: 40px;width: 340px;}
.products-list .product-item:nth-child(3n){margin-right: 0px;}
.products-list .product-item .photobox{overflow: hidden;}
.products-list .product-item a.photo{display: block; background-size: cover;width: 100%;transition: ease .6s;}
.products-list .product-item a.photo:hover{transform: scale(1.2);}
.products-list .product-item .info{margin-top: 10px;}
.products-list .product-item .title{font-size: 16px;font-weight: bold;margin-bottom: 5px;transition: ease .3s;-webkit-line-clamp: 1;width: 100%;}
.products-list .product-item .price {padding: 5px 0px;font-size: 14px;display: flex;align-items: center;}
.products-list .product-item .price .dollar{vertical-align: baseline;}
.products-list .product-item .saleprice .dollar{color: red;font-size: 18px;}
.products-list .product-item .old{text-decoration: line-through;}
.products-list .product-item .saleprice{padding-bottom: 4px;}
.products-list .product-item .line{margin: 0 10px;width: 1px;background: #eee;display: inline-block;height: 15px;}
.products-list .product-item .btn{text-align: right}
.products-list .product-item a.more{transition: ease .3s; padding: 3px 8px;border: 1px solid #79551a;border-radius: 11px;background-color: #fff;color: #79551a;font-size: 12px;font-weight: 700;}
.products-list .product-item:hover .title{color: #79551a;}
.products-list .product-item a.more:hover{background: #79551a;color: #fff;}

/*about*/
#aboutBox{padding-bottom: 60px;}
#aboutBox .about-img{background-repeat: no-repeat;background-size: cover;background-position: center;}
#aboutBox .about-info{width: 54%;padding: 60px 80px;box-sizing: border-box;background: url(/images/27/about-info.png) no-repeat 50% 0;margin-top: -220px;}
#aboutBox .about-info h3{font-family: 'Montserrat', sans-serif;font-size: 15px;color: #79551a;margin-bottom: 15px;}
#aboutBox .about-info h2{font-size: 30px;color: #212121;margin-bottom: 20px;-webkit-line-clamp: 2;}
#aboutBox .info{-webkit-line-clamp: 3;height: 70px;}
#aboutBox #SeoStarRating{margin-bottom: 20px;}
#aboutBox .btn a{font-size: 18px;color: #212121;transition: ease .3s;}
#aboutBox .btn a i{padding-right: 8px;color:#79551a }
#aboutBox .btn a:hover{color:#79551a; }

/*book*/
#bookbox{padding-bottom: 150px;}
#bookbox .container{width: 83%;}
#bookbox .sectionTitle{text-align: center;position: relative;}
#bookbox .sectionTitle h2{position: relative;}
#bookbox .sectionTitle b{
    font-family: 'Nothing You Could Do', cursive;
    font-family: 'Italianno', cursive;
    position: absolute;
    left: -20px;
    width: 100%;
    height: 100%;
    display: block;
    top: -95px;
    font-size: 150px;
    line-height: 197px;
    text-align: center;
    font-style: italic;
    transform: rotate(-9deg);
    font-weight: 400;
    letter-spacing: 10px;
    color: rgba(239, 231, 218, 0.5);
    z-index: -1;
}
#bookbox .index-btn{margin-bottom: 30px;}
#bookbox .swiper-wrapper{}
.book-item > div{position: relative;}
.book-item > div a.photo{width: 70%;}
.book-item .info{float: right;margin-top: 150px;width: 25%; margin-left: 30px;}
.book-item .info a.title{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; transition: ease .3s; line-height: 1;opacity: 0;font-size: 42px; color: #fff;font-weight: bold;width: 100%;text-align: left; }
.book-item .info a.btn{
	display: block;
    font-size: 16px;
    background: #fbf8f0;
    transition: ease .3s;
    color: #000;
    font-weight: bold;
    box-sizing: border-box;
    width: 180px;
    padding: 15px;
    margin-top: 45px;
    opacity: 0;
}
.book-item .info a.btn i {
    margin: 0 5px;
    color: #79551a;
}
.book-item .info a.btn:hover i {
    color: #fff;
}
.book-item .info a.btn:hover {
    background: #79551a;
    color: #fff;
}
.book-item.swiper-slide-active .info a.btn,.book-item.swiper-slide-active .info a{opacity:1;}
#bookbox .book-content{}
#bookbox .book-bg{position: relative;}
#bookbox .book-bg::after{z-index:-1;position: absolute;top: 50px;left: 0;width: 100%;height: 100%;background: linear-gradient(270deg,#efe7da,#efe7da 70%,#fff 0,#fff);content: "";}

/*otherset*/
#other-content{padding-bottom: 80px;}
#other-content.noneCI{display: none;}
.other-set .item{position: relative;}
.other-set .item article{position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;padding: 47px 58px 52px;display: flex;align-items: center;justify-content: space-between;color: #fff;}
.other-set .item article .othertitle{width: 30%;}
.other-set .item article .othertitle p{font-size: 24px;font-weight: bold;-webkit-line-clamp: 3;line-height: 1.2;}
.other-set .item article font{width: 40%;font-weight: bold;-webkit-line-clamp: 5;}
.other-set .item article .index-btn{width: 180px;}
.other-set .item article .index-btn a{width: 100%;height: 43px;line-height: 43px;font-size: 14px;}
.other-set a.photo{position: relative;}
.other-set a.photo::after{content: "";position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.52)}
.other-set .swiper-slide{opacity: 0 !important;}
.other-set .swiper-slide-active{opacity: 1 !important;}

@media screen and (max-width: 1680px){
    #NPBox .news-item h3{width: 60%;}
}
@media screen and (max-width: 1440px){
    .book-item .info a.title{font-size: 36px;}
}
@media screen and (max-width: 1240px){
    #ssbanner .container{width: 83%;}
    .products-list .product-item{width: 31%;}

}
@media screen and (max-width: 1100px){
    .products-list .product-item{margin-right: 25px;}
}
@media screen and (max-width: 1024px){
    .sectionTitle h2{font-size: 30px;}
    .index-btn a{width: 250px;}
    #NPBox .news-item h3{width: 55%;}
    .book-item .info a.btn{width: 120px;padding: 10px;font-size: 14px;}
    #aboutBox .about-info{padding: 30px 40px;}
    #aboutBox .about-info h2{font-size: 26px;}
    .book-item .info a.title{font-size: 28px;}
    #bookbox .book-bg::after{height: 90%;}
    .other-set .item article .index-btn{width: 120px;}
    .other-set .item article .othertitle p{font-size: 20px;}
}
@media screen and (max-width: 940px){
    #NPBox .news-content-title{margin-right: 15px;}
    #NPBox .news-item .more{padding-right: 10px;}
    #NPBox .news-item h3{width: 50%;}
    .products-list .product-item{margin-right: 20px;}
    #aboutBox .about-img{min-height: 280px;}
}
@media screen and (max-width:768px){
    #bookbox .container{width: 85%;}
    #ssbanner .container{width: 88%;}
    #NPBox .news-item .more{display: none;}
    #aboutBox{padding-bottom: 120px;}
    #aboutBox .about-info{width: 65%;padding: 30px;}
    .products-list{justify-content: space-between;}
    .products-list .product-item{width: 47%;margin-right: 0px;}
    .book-item .info{margin-left: 0px;margin-top: 95px;}
    #ssbanner .prev{margin-left: -20px;}
    #ssbanner .arrow{margin-right: -20px;}

}
@media screen and (max-width:640px){
    #newBox{padding: 16px;}
    #NPBox .new-slider{width: 100%;}
    #NPBox .news-item h3{width: calc(100% - 110px);}
    #NPBox .news-content-title{display: none;}
    #NPBox .sectionTitle{margin-bottom: 0px;background: #79551a;color: #fff;padding: 5px 0 5px 16px;}
    #NPBox .sectionTitle .btn a,#NPBox .sectionTitle .btn a i{color: #fff;}
    .book-item > div a.photo{width: 100%;}
    .book-item .info{width: 100%;float:inherit;margin: 45px 0px 0px;padding-left: 70px;}
    .book-item .info a.btn{margin-top: 20px;}
    #bookbox .book-bg::after{height: 100%;background: linear-gradient(270deg,#efe7da,#efe7da 85%,#fff 0,#fff);}
    .other-set a.photo{min-height: 250px;background-size: cover;}
    .other-set .item article{display: block;}
    .other-set .item article .othertitle,.other-set .item article font,.other-set .item article .index-btn{width: 100%;}
    .other-set .item article .othertitle p{text-align: center; -webkit-line-clamp: 2;}
    .other-set .item article font{-webkit-line-clamp: 3;text-align: center;padding: 15px 0px;}
    .other-set .item article .index-btn{position: absolute;left: 0px;bottom: 35px;}

    .other-set .item article .index-btn a{width: 70%;}
    #aboutBox .about-info{width: 100%;margin-top: -165px;}
}
@media screen and (max-width:540px){
    .sectionTitle h2{font-size: 26px;}
    #NPBox .sectionTitle .btn a{font-size: 14px;}
}
@media screen and (max-width:480px){
    .sectionTitle h2{font-size: 24px;}
    .products-list .product-item{width: 100%;}
    #bookbox .sectionTitle b{font-size: 120px;}
    #ssbanner .arrow{display: none !important;}
    #NPBox .news-item{display: block;}
    #NPBox .news-item .date,#NPBox .news-item h3{display: block;}
    #NPBox .news-item h3{width: 100%;}
    #NPBox .news-item .date::after{display: none;}
}
@media screen and (max-width:375px){
    #bookbox .sectionTitle b{font-size: 100px;}
}