@import url('https://fonts.googleapis.com/css?family=Lora&display=swap');


.section1{position: relative;overflow: hidden;}


/*瀑布流-------*/
.grid {
  max-width: 100%;
}

/* clearfix */
.grid:after,.grid-item:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 25%;
}

.grid-item {
  float: left;
 
}

.rol-6 { width: 50%; }
/*---------------------------*/


/*按鈕*/
.btn{margin: 15px 0px;}
.btn a{position: relative;padding: 5px 28px;color: #E33339;transition: ease .3s;display: inline-block;}
.btn a:hover{color: #9c9c9c;}
.btn a:hover > span{background: #9c9c9c; }
.btn a > span{position: absolute;overflow: hidden;background: #E33339;}
.btn a .tln{left: 0px;top: 0px;width: 100%;height: 3px;}
.btn a .bln{left: 0px;bottom:0px;width: 100%;height: 3px;}
.btn a .lln{left: 0px;top: 0px;width: 3px;height: 100%;}
.btn a .rln{right: 0px;top: 0px;width: 3px;height: 100%;}

.btn a > span::after{content: "";position: absolute;overflow: hidden;background: url("/images/26/txr3.png")}
.btn a .tln::after{content: "";left: 0;top: 0;width: 100%;height: 1px;}
.btn a .bln::after{content: "";left: 0;bottom: 0;width: 100%;height: 1px;}
.btn a .lln::after{content: "";left: 0;top: 0;width: 1px;height: 100%;}
.btn a .rln::after{content: "";right: 0;top: 0;width: 1px;height: 100%;}


.section-title{position: relative;height: 65px;margin-bottom: 35px;}
.section-title h2{position: absolute;left: calc(50% + 60px);top: 60px;font-size: 36px;color: #E33339}
.section-title .btn{position: absolute;right: 60px;top: 60px;}


/*about*/
#aboutBox{width: 50%;padding: 60px;position: relative;}
#aboutBox .about-info{padding: 0 30px;}
#aboutBox .about-info h3{font-size: 36px;color: #E33339;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#aboutBox .about-info h3 span{margin-left: 10px;font-size: 18px;}
#aboutBox .about-info .info{font-size: 16px;-webkit-line-clamp: 3;}
#aboutBox .about-img{text-align: center;}
#aboutBox .about-img > div{display: block;background-repeat: no-repeat;background-size: contain;background-position: center;}
#aboutBox #SeoStarRating{position: absolute;top: 15px;right: 30px;}
#aboutBox .ykln{position: absolute;bottom: 0px;left: 0px;}


/*product*/
#products .section-title h2{left: 66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#products .section-title .btn{right: 60px;}
.product-item{width: 25%;padding: 66px;position: relative;}
.product-item:hover > a{filter: grayscale(1);}
.product-item:hover .protitle p.price span{transition: ease .3s;}
.product-item:hover .protitle p.text-clamp,.product-item:hover .protitle p.price span,.product-item:hover .date,.product-item:hover .btn a,.product-item:hover .protitle p.price span.saleprice b{color: #9c9c9c;}
.product-item:hover .btn a > span{background: #9c9c9c}
.product-item a.photo{display: block; background-size: cover;transition: ease .3s;}
.product-item .info{position: relative;height: 160px;}
.product-item .protitle{padding-top: 30px;}
.product-item .protitle p.text-clamp{font-size: 20px;line-height: 1.7;-webkit-line-clamp: 2;}
.product-item .protitle p.price span{display: inline-block;}
.product-item .protitle p.price span.old{margin-right: 5px;}
.product-item .protitle p.price span.saleprice{height: 29px;}
.product-item .protitle p.price span.saleprice b{font-size: 22px;color: #E33339;}
.product-item .date{font-size: 12px;color: #a5a5a5;font-family: 'Lora', serif;letter-spacing: 0.1em;position: absolute;left: 0px;bottom: 0px;}
.product-item .btn{position: absolute;right: 0px;bottom: 0px;margin: 0px;}
.product-item .btn a{font-family: 'Lora', serif;color:#E33339;letter-spacing: 1px; }
.product-item .ttln{right: 0px;left: auto;height: 97%;}
.product-item:nth-child(2n+1) .ttln{display: none;}

/*book*/
.book-item .ttln{position: absolute;top: 0px;left:auto;height: 96%;}
#bookbox .ykln.b-line{top: auto;bottom: 0px;}
#bookbox .section-title{margin-top: 30px;}
#bookbox .section-title h2{left:66px;top: 66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position: static;text-align: center;}
#bookbox .section-title .btn{right: 66px;top: 66px;position: static;text-align: center;}
#bookbox .book-content{display: flex;flex-wrap: wrap;padding: 15px 20px 0px}
#bookbox .book-item{width: 25%;}
#bookbox .book-item a.photo{display: block; background-size: cover;transition: ease .3s;}
#bookbox .book-item > div{display: block;position: relative;transition: ease .3s;padding: 55px;}
#bookbox .book-item > div:hover{filter: grayscale(0.9);}
#bookbox .book-item > div h3{position: absolute; bottom: 77px;left: 77px;background: url(/images/26/bg.gif);}
#bookbox .book-item > div h3 a{color: #E33339;padding: 5px 7px;font-size: 16px;font-weight: normal;max-width: 140px;-webkit-line-clamp: 2;}

/*other-set*/
.other-content{margin-top: -150px;}
.other-content .bg-content{padding: 40px;}
.other-content .other-bg{position: relative;}
.other-content .other-bg a.photo{display: block;}
.other-content .other-bg .other-desc{position: absolute;width: 210px;height: 88%;top: 0;bottom: 0;left: 0;right: 0;margin: auto;background: #E33339;padding: 30px;}
.other-content .other-bg .other-desc .title{font-size: 26px;color: #fff;text-align: center;;}
.other-content .other-bg .other-desc .txt{position: absolute;bottom: 30px;color: #fff;}
.other-content .other-bg .other-desc .txt p{text-align: center;font-size: 13px;line-height: 1.8}
.other-content .other-bg .other-desc .txt p.t1,
.other-content .other-bg .other-desc .txt p.t3{padding-bottom: 12px;}
.other-content .other-set{position: relative; }
.other-content .other-set.noneCI{display: none;}
.other-content .other-set .ykln.t-line{margin: 0px;}
.other-content .set-content{display: flex;}
.other-content .set-content .item{width: 33%;padding: 50px 0px;text-align: center;position: relative;}
.other-content .set-content .item a.photo{display: block; width: 100%;}
.other-content .set-content .item article{padding: 0 45px;}
.other-content .set-content .item .othertitle h3{text-align: center;font-size: 17px;font-weight: normal;}
.other-content .set-content .item font{text-align: center;-webkit-line-clamp: 2;height: 45px;}
.other-content .set-content .ykln.b-line{display: none;}

/*ssbanner*/
#ssbanner{padding: 55px 65px;}
#ssbanner .bxslider {display: flex;justify-content: space-between;}
#ssbanner .ssbanner-item{overflow: hidden;position: relative; background-position: 50%; background-repeat: no-repeat; background-size:cover;margin: 0 15px;}
#ssbanner .ssbanner-item span.title{max-width: 50%; position: absolute;left: 22px;bottom: 22px;background: url(/images/26/bg.gif);padding: 5px 7px;color: #E33339;}
#ssbanner .slick-slider{margin-bottom: 0px;}
/*news*/
.section2{margin-top: 20px;}
.section2 #NPBox{padding-top: 30px;}
.section2 #NPBox .sectionTitle h2{font-size: 36px;text-align: center;color: #E33339;padding-bottom: 15px;}
.section2 #NPBox .sectionTitle .btn{text-align: center;margin: 0px;}
.section2 #newBox{padding: 15px 20px 0px;display: flex;flex-wrap: wrap;}

.news-item{width: 25%;padding: 55px;position: relative;}
.news-item:hover .photo-content > a{filter: grayscale(1);}
.news-item:hover .protitle p.price span{transition: ease .3s;}
.news-item:hover .protitle p.text-clamp,.news-item:hover .protitle p.price span,.news-item:hover .btn a,.news-item:hover .info .desc{color: #9c9c9c;}
.news-item:hover .btn a > span{background: #9c9c9c}
.news-item .photo-content{position: relative;}
.news-item a.photo{display: block; background-size: cover;transition: ease .3s;}
.news-item .info{position: relative;height: 160px;}
.news-item .info .desc{-webkit-line-clamp: 2;padding-top: 5px;transition: ease .3s;height: 50px;}
.news-item .protitle{padding-top: 30px;}
.news-item .protitle p.text-clamp{height: 34px; font-size: 20px;line-height: 1.7;-webkit-line-clamp: 1;}
.news-item .date{font-size: 12px;color: #a5a5a5;font-family: 'Lora', serif;letter-spacing: 0.1em;position: absolute;left: 0px;bottom: 0px;background: #E33339;color: #fff;padding: 3px 5px;}
.news-item .btn{position: absolute;right: 0px;bottom: 0px;margin: 0px;}
.news-item .btn a{font-family: 'Lora', serif;color:#E33339;letter-spacing: 1px; }
.news-item .ttln{right: 0px;left: auto;height: 97%;}
.news-item:nth-child(4n) .ttln{display: none;}



@media screen and (max-width: 1440px) {
    #aboutBox{}
    #aboutBox .about-info h3{padding-bottom: 30px;}
    #aboutBox #SeoStarRating{left: 30px;top: 60px;right: auto;}
    .product-item{padding: 35px;}
    #bookbox .book-item{}
    .other-content .bg-content{}
    .other-content .set-content .item{padding: 10px;}
    #products .section-title h2{left: 35px;}
    #products .section-title .btn{right: 35px;}
    .news-item,#bookbox .book-item > div{padding: 35px;}
}
@media screen and (max-width: 1280px) {
    #aboutBox{padding: 40px;}
    .product-item{padding: 20px;}
    .other-content .bg-content{min-height: 550px;}
    #products .section-title h2{left: 20px;top: 40px;}
    #products .section-title .btn{right: 20px;top: 40px;}
    #bookbox .section-title h2{top: 30px; left: 30px;}
    #bookbox .section-title .btn{top:30px; right: 30px;}
    .other-content .set-content .item article{padding: 0px;}
    .other-content .other-bg,.other-content .other-bg img{min-height: 480px;}
    .other-content .other-bg a.photo{background-size: cover;}
    #bookbox .book-item > div h3{bottom: 60px;left: 60px;}
    .news-item,#bookbox .book-item{width: 33%;}
    .news-item:nth-child(4n) .ttln,#bookbox .book-item:nth-child(4n) .ttln{display: block;}
    .news-item:nth-child(3n) .ttln,#bookbox .book-item:nth-child(3n) .ttln{display: none;}
}
@media screen and (max-width: 1180px) {
    .product-item{}
    #bookbox .book-item{}
    .other-content .bg-content{min-height: 450px;}
    .other-content .other-bg, .other-content .other-bg img{min-height: 380px;}
}
@media screen and (max-width: 1024px){
    .product-item .protitle{padding-top: 25px;}
    .section2 #newBox,#bookbox .book-content{padding: 15px 0px 0px;}
    #aboutBox .about-info h3 span{display: block;margin-left: 0px;}
    #aboutBox #SeoStarRating{top: 92px}
}
@media screen and (max-width: 980px){
    .btn a{padding: 4.5px 16px;}
    .product-item{
       
    }
    #aboutBox {
        
        padding: 20px;
    }
    #products .section-title h2,#products .section-title .btn{top: 20px;}
    #bookbox .book-item{}
    .other-content .bg-content{padding: 25px;}
    .other-content .other-bg .other-desc .title{font-size: 22px;}
    .other-content .bg-content{min-height: 380px;}
    .news-item,#bookbox .book-item{width: 50%;}
    .news-item:nth-child(3n) .ttln,#bookbox .book-item:nth-child(3n) .ttln{display: block;}
    .news-item:nth-child(2n) .ttln,#bookbox .book-item:nth-child(2n) .ttln{display: none;}
    .news-item .btn a{padding: 4.5px 16px;}
}

@media screen and (max-width: 768px){
    #aboutBox,.rol-6{width: 100%;}
    .product-item,#bookbox .book-item{width: 50%;}
    #aboutBox{}
    .product-item{}
    .section1 .ttln.section-ml{display: none;}
    #ssbanner{padding: 55px;}
    .other-content .bg-content{margin-top: 30px;}
    #bookbox .book-item{}
    .other-content .bg-content,.other-content .other-bg, .other-content .other-bg img{min-height: 435px;}

}
@media screen and (max-width: 640px) {
    .news-item,#bookbox .book-item > div{padding: 20px;}
    .product-item{}
    #bookbox .book-item > div h3{bottom: 45px;left: 45px;}
}
@media screen and (max-width: 480px){
    #products .section-title h2, #products .section-title .btn,
    #bookbox .section-title h2,#bookbox .section-title .btn{position: static;text-align: center;margin: 5px 0px;}
    #aboutBox .about-info{padding: 0px;}
    #aboutBox .about-info h3{font-size: 30px;padding-bottom: 25px;}
    #products .section-title h2,#bookbox .section-title h2,.section2 #NPBox .sectionTitle h2{font-size: 30px;}
    #aboutBox #SeoStarRating{left: 5px;top: 80px;}
    .product-item {}
    .product-item .protitle p.text-clamp,.news-item .newtitle p.text-clamp{font-size: 16px;}
    #bookbox .book-item{}
    .product-item .protitle p.price span{display: block;}
    .product-item, .news-item,#bookbox .book-item > div{padding: 15px;}
    .product-item .btn a,.news-item .btn a{padding: 4.5px 5px;font-size: 12px;}
    .product-itemm .protitle p.text-clamp{font-size: 16px;}
}
@media screen and (max-width: 420px){
    .product-item .protitle p.price span{display: block;}
    .product-item,{padding: 15px;}
    .product-item .btn a,{padding: 4.5px 5px;font-size: 12px;}
    #bookbox .book-item > div h3{bottom: 30px;left: 30px;}
    #bookbox .book-item > div h3 a{font-size: 14px;max-width: 100px;}

    .other-content .set-content{flex-wrap: wrap;height: 100%;}
    .other-content .set-content .item{width: 100%;height: auto;}
    .other-content .set-content .ykln.b-line{display: none;}
    .other-content .set-content .ykln.b-line{display: block;}
    .other-content .set-content .item{padding: 25px 15px;}
    .other-content .set-content .item a.photo{background-size: contain;}
    .other-content .set-content .item article{padding: 0 30px;}
    .other-content .set-content .item font{padding-top: 15px;}
    #ssbanner{padding: 25px;}
}
@media screen and (max-width: 375px) {
    .news-item .date{letter-spacing: 0px;}
}
@media screen and (max-width: 320px){
    .product-item, .news-item{}
}