.wow{animation-duration:2s;animation-name:fadeInUp}
.controller{/* margin-top:-100px */}
.grid:after{content:'';display:block;clear:both}
.grid-sizer,.grid-item{width:47%;margin:0 1.5%}
.grid-item{float:left;margin-top:200px}
.speBox{position:relative}
.speBox .speBoxTitle{font-size:30px;font-weight:400;line-height:100%;color:#383535;padding-bottom:10px}
.speBox .subBoxTitle{writing-mode:tb-rl;position:absolute;right:5px;top:54px;width:20px;letter-spacing:.3em;line-height:150%;color:#5f5a5a;font-weight:400;font-size:15px}
.speBox .subBoxTitle a{color:#5f5a5a}
.grid-item:nth-child(odd) .speBox .subBoxTitle{right:inherit;left:0}
.speBox >div{width:calc(100% - 50px);margin:15px 0}
.grid-item:nth-child(odd) .speBox >div{margin-left:50px}
#prolay .pro-list{overflow:hidden}
#prolay .pro-list >div{float:left;width:calc((100% - 60px) / 3)}
#prolay .pro-list .p-border{margin-bottom:40px}
#prolay .pro-list .p-border .photo a,#news li .photo a,#comprehensive .bxslider a,#book .webframe ul li .photo{display:block;background-repeat:no-repeat;background-position: 100% 0;background-size: 95%;background-color: #fff;transition: all linear .3s;}
#prolay .pro-list .p-border .photo a img,#news li .photo a img,#comprehensive .bxslider a img,#book .webframe ul li .photo a img{width:100%}
#prolay .pro-list .p-border .p-info h3{margin:14px 0 3px}
#prolay .pro-list .p-border .p-info h3 a{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;color:#2e2f35;font-size:16px;line-height:120%}
#prolay .pro-list .p-border .p-info .describe{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;color:#6a717d;height:21px}
#prolay .pro-list .p-border .p-info .price{overflow:hidden;height:21px}
#prolay .pro-list .p-border .p-info .price span{float:left;font-size:12px;color:#8d7693}
#prolay .pro-list .p-border .p-info .price span.old{float:right;text-decoration:line-through;color:#a2a2a2}
/*news*/
#NPBox{
    padding: 50px 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.container {width: 1080px;position: relative;margin: 0 auto;}
#NPBox .sectionTitle {margin-bottom: 20px;}
#NPBox .sectionTitle h2 {font-size: 32px;display: inline-block;color: white;}
#NPBox .sectionTitle .btn {display: inline-block;margin-left: 30px;}
#NPBox .sectionTitle .btn a {font-size: 16px;color: white;}
#NPBox .sectionTitle .btn a i {margin-right: 5px;color: #ffffff;}


#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: #ffffff;font-weight: bold;text-align: center;color: #232323;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;font-weight: bold;color: white;}
#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;color: white;}
#NPBox .news-item .date::after{content: "";position: absolute;right: -23px;width: 13px;height: 2px;background: #ffffff;top: 50%;transform: translateY(-50%);}
#NPBox .news-item .more{position: absolute;bottom: 0px;right: 0px;font-size: 15px;padding-right: 40px;color: white;}
#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: #ffffff;font-size: 16px;}
#freebox{margin-top:50px}
#freebox .free{border-top:1px solid #d9d9d9}
#freebox .free h4{display:inline-block;background:#7b7fb2;color:#fff;font-size:15px;padding:5px 15px;font-weight:400;margin-bottom:15px}
#freebox .free p{color:#6b646c;line-height:150%}
.float{position:absolute;z-index:-1}
.float.flowerA{right:0;top:0;background-image:url(/images/15/bg-flower-A.png);background-repeat:no-repeat;background-position:100% 50%;background-size:cover;width:40%;height:100%}
.float.flowerB{left:0;bottom:10%}
.float.flowerC{background-image:url(/images/15/bg-flower-C.png)}
#bookBox{background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;padding: 65px 0;}
#bookBox #NewsTitle{}
#NewsTitle .index-title{color: #000;}
#NewsTitle .index-title h2{font-size:40px;line-height:110%;margin-bottom:10px;text-align: center;font-weight: normal;}
#NewsTitle .index-title p a{color:#fff;font-size:18px;text-transform: uppercase;line-height:110%;background: linear-gradient(150deg, #489583 0%,#1d5570 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: bold;}
#NewsTitle .index-title p{
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
}
/*about*/
#aboutBox{padding: 80px 0;background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#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);background-color: white;background-position: 100% 50%;background-repeat: no-repeat;background-size: cover;}
#aboutBox .about-info h4{
    font-size: 14px;
    margin-bottom: 10px;
}
#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: 35px;}
#aboutBox .about-info h2 img{
    margin-right: 5px;
    margin-bottom: 5px;
}
#aboutBox .info{
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 170%;
}
#aboutBox #SeoStarRating{margin-bottom: 20px;}
#aboutBox .btn a{font-size: 14px;color: #000000;transition: ease .3s;}
#aboutBox .btn a i{padding-right: 8px;color: #0a0a0a;}
#aboutBox .btn a:hover{color: #353535;}
#bookBox #book{/* margin-top:-175px; */z-index:3;position:relative;}
#book .blabla{width:760px;margin:0 auto;background:#fff;padding:50px 100px}
#book .blabla h2{text-align:center;font-size:40px;line-height:100%;font-weight:400;color:#383434}
#book .blabla h3{margin:20px 0;color:#ada6d3;text-align:center;font-size:18px}
#book .blabla p{color:#7a7a7a;text-align:center;font-size:14px;line-height:150%;overflow:hidden;height:23px}
#book .webframe{width: 1366px;margin:0 auto;}
#book .webframe ul li{/* width:calc(100% / 4); *//* margin-right:-4px; *//* vertical-align:top; *//* display:none; */}
#book .webframe ul li:nth-child(1),#book .webframe ul li:nth-child(2),#book .webframe ul li:nth-child(3),#book .webframe ul li:nth-child(4){/* display:inline-block; */}
#book .webframe ul li .mofd{margin: 10px;position:relative;box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);}
#book .webframe ul li:hover .photo{background-size: 90%;}
#book .webframe ul li h3{position:absolute;bottom:0;left:0;width:calc(100% - 20px);padding:10px}
#book .webframe ul li h3 a{color: #000;font-weight:400;font-size:15px;}
#book .webframe ul li h3 a img{
    width: 13px;
    display: inline-block;
    margin-right: 5px;
}
#book .webframe ul li h3 a i{margin-right:5px}
#news li .news-info,#news li .photo a:before,#about .more a,#prolay .pro-list .p-box,.speBox .subBoxTitle a{transition:all linear .3s;-moz-transition:all linear .3s;-ms-transition:all linear .3s;-o-transition:all linear .3s;-webkit-transition:all linear .3s}
#book .webframe ul li{transition:all cubic-bezier(0.42,0,0,0.97) .3s;-moz-transition:all cubic-bezier(0.42,0,0,0.97) .3s;-ms-transition:all cubic-bezier(0.42,0,0,0.97) .3s;-o-transition:all cubic-bezier(0.42,0,0,0.97) .3s;-webkit-transition:all cubic-bezier(0.42,0,0,0.97) .3s}
@media screen and (min-width: 1025px) {
#news li .photo a:before{content:'';position:absolute;width:100%;height:100%;top:0;left:0;display:block;background:rgba(0,0,0,0.45)}
#news li:hover .photo a:before{opacity:0}
#news li .news-info{position:absolute;bottom:0;left:0;width:calc(100% - 20px);background:rgba(167,138,198,0)}
#news li:hover .news-info{background:#a78ac6}
#bookBox, #NPBox, #aboutBox{background-attachment:fixed;}
#prolay .pro-list >div:hover .p-box{transform:translateY(10px)}
.speBox .subBoxTitle a:hover{color:#a77bb2}
#book .webframe ul.sOver li{width:calc(100% / 5)}
#book .webframe ul.sOver li.divOver{width:calc((100% / 5) * 2)}
#book .webframe ul li .photo a img{/* height:293px */}
#prolay .pro-list >div:nth-child(2n) .p-box{ animation-duration:1s;}
#prolay .pro-list >div:nth-child(3n) .p-box{ animation-duration:.6s;}
}
@media screen and (min-width: 1281px) {
#book .webframe ul li .photo a img{/* height:373px */}
#prolay .pro-list >div:nth-child(3n-1){margin:0 30px}
}
@media screen and (min-width: 1681px) {
#book .webframe ul li .photo a img{/* height:480px */}
}
@media screen and (max-width: 1680px) {
#book .webframe{width:1200px}
#NPBox .news-item h3{width: 60%;}
}
@media screen and (max-width: 1366px) {
#book .blabla h2{font-size:32px}
#book .blabla{padding:40px 100px}
}
@media screen and (max-width: 1280px) {
#book .webframe{width:960px}
#prolay .pro-list >div{width:calc((100% - 30px) / 2)}
#prolay .pro-list >div:nth-child(odd){margin-right:30px}
.float.flowerA{width:50%;background-size:contain;top:50%}
.float.flowerC{top:0}
.container {width: 90%;}
}
@media screen and (max-width: 1024px) {
#book .webframe{width:90%}
.grid-sizer,.grid-item{width:90%;margin:100px 5% 0}
.controller{margin-top:-180px}
#prolay .pro-list >div:nth-last-of-type(1) .p-border,#prolay .pro-list >div:nth-last-of-type(2) .p-border{margin-bottom:0}
#book .blabla{width:calc(90% - 200px)}
#NPBox .news-item h3{width: 55%;}
#NPBox .sectionTitle h2{font-size: 30px;color: #040404;}
#NPBox .index-btn a{width: 250px;}
#aboutBox .about-info{padding: 30px 40px;}
#aboutBox .about-info h2{font-size: 26px;}
}
@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%;}
#aboutBox .about-img{min-height: 280px;}
}
@media screen and (max-width: 768px) {
#book .webframe ul li{width:calc(100% / 2)}
.speBox .speBoxTitle{font-size:24px}
.controller{margin-top:-160px}
.speBox >div{width:calc(100% - 30px)}
.speBox .subBoxTitle{right:0}
.grid-item:nth-child(odd) .speBox >div{margin-left:30px}
#bookBox #NewsTitle{}
#bookBox{}
#NPBox .news-item .more{display: none;}
#aboutBox{padding-bottom: 120px;}
#aboutBox .about-info{width: 65%;padding: 30px;}
}
@media screen and (max-width: 640px) {
.controller{margin-top:0}
.grid-sizer,.grid-item{margin:70px 5% 0}
#news li{width:calc(50% - 5px)}
#news li:nth-child(odd){margin-right:10px}
#news li .border{margin-bottom:10px}
#bookBox #NewsTitle{}
#newBox{padding: 15px;}
#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: #ffffff;color: #191919;padding: 14px;}
#NPBox .sectionTitle .btn a,#NPBox .sectionTitle .btn a i{color: #000;}
#aboutBox .about-info{width: 100%;}
}
@media screen and (max-width:540px){
.sectionTitle h2{font-size: 26px;}
#NPBox .sectionTitle .btn a{font-size: 14px;}
}
@media screen and (max-width: 480px) {
.grid-sizer,.grid-item{margin:70px 2.5% 0;width:95%}
#prolay .pro-list >div{width:calc((100% - 15px) / 2)}
#prolay .pro-list >div:nth-child(odd){margin-right:15px}
#NewsTitle .index-title h2{font-size:30px}
#NewsTitle .index-title p a{font-size:16px}
#bookBox #NewsTitle{}
#book .blabla{width: calc(90% - 60px);padding: 30px 30px;}
#book .blabla h2{font-size:24px}
#book .blabla h3{margin:15px 0}
#bookBox #book{}
#book .webframe{width:100%}
#news li .border{margin:0}
#news li .news-info .news-bottom{overflow:hidden}
#news li .news-info .news-bottom p{float:left;margin-right:10px;max-width:80px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#news li .news-info .news-bottom p a{line-height:100%}
#news li .news-info h3{font-size:16px;margin-top:8px;line-height:110%}
#news li .news-info .news-bottom p a{line-height:100%;color:#848484}
#news li{width:calc(100% - 5px);margin-bottom:5px;border-bottom:1px solid #ddc7e3;padding-bottom:5px}
#news li:nth-child(odd){margin:0 5px 5px 0}
#news li .news-info{float:left;width:calc(100% - 120px);color:#a77bb2;background:none}
#news li .photo{float:left;width:100px}
#news li .news-info .news-bottom p{font-size:16px;line-height:100%}
#news li .news-info h3 a{color:#5a5b67}
.sectionTitle h2{font-size: 24px;}
#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;}
#aboutBox {
    padding: 30px 0;
}
}