/* indexbox */
.indexbox { position: relative; }
.indexbox h3.boxtit {font-size: 35px;color: #efefef;font-weight: 400;letter-spacing: 5px;padding: 0 20px;}
.indexbox h3.boxtit:first-letter{color: #7eafda;}
.indexbox .more { margin-top: 40px; }
.indexbox .more a {position: relative;padding: 20px 90px;border: 2px #b00110 solid;color: #fff;background: #b00110;}
.indexbox .more a:before {position: absolute;width: 0;height: 100%;background: #b00110;display: block;left: 0;top: 0;content: "";z-index: -1;}

/* NewsBox */
#NewsBox {z-index: 2;padding: 70px 0;}
#NewsBox >div{
    width: 1600px;
    margin: 0 auto;
}
#NewsBox .btn { position: absolute; font-size: 0; right: 0; top: 0; }
#NewsBox .btn a , #bookBox .bookinfo .btns a { width: 67px; height: 67px; background: #dce5eb; line-height: 67px; text-align: center; }
#NewsBox .btn a#prevBtn , #bookBox .bookinfo .btns a#bookPBtn { margin-right: 1px; }
#NewsBox .btn a i , #bookBox .bookinfo .btns a i { font-size: 20px; color: #0f2942; }
#NewsBox h2 { padding: 20px 135px 20px 30px; border-bottom: 1px #e8f0f7 solid; }
#NewsBox ul {
    overflow: hidden;
    margin-top: 3vw;
}
#NewsBox ul li {position: relative;float: left;width: calc((100%/3) - 44px);border-radius: 10px;overflow: hidden;border: 1px solid #464646;margin: 20px;}
#NewsBox ul li .info {
    padding: 20px;
}
#NewsBox ul li .time {font-size: 12px;color: #7eafda;}
#NewsBox ul li .time i{
    margin-right: 5px;
    font-size: 8px;
}
#NewsBox ul li .info h3 a {
    height: 40px;
    font-weight: 500;
    font-size: 22px;
    color: #fff;
    -webkit-line-clamp: 1;
}
#NewsBox ul li .txt { height: 60px; -webkit-line-clamp: 2; }
#NewsBox ul li .info article {
    height: 48px;
    color: #888888;
    -webkit-line-clamp: 2;
    font-size: 14px;
}

/* aboutBox */
#aboutBox {padding: 5vw 0;background: #013765;}
#aboutBox .fixTxt {position: absolute;font-size: 13vw;font-weight: 900;color: rgb(255 255 255 / 3%);white-space: nowrap;left: 0;top: 0;line-height: 145%;z-index: 1;}
#aboutBox #pictureBox { position: absolute; width: 380px; height: 245px; box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3); right: 0; top: 0; z-index: 3; }
#aboutBox #pictureBox a.photo { width: 100%; height: 245px; }
#aboutBox .aboutinfo {position: relative;font-size: 0;z-index: 2;width: 1600px;margin: 0 auto;}
#aboutBox .aboutinfo .row.info {
    overflow: hidden;
}
#aboutBox .aboutinfo .row .left {
    float: left;
    width: 50%;
}
#aboutBox .aboutinfo .row .left h1{
    margin-bottom: 30px;
}
#aboutBox .aboutinfo .row .right {
    float: right;
    width: 40%;
}
#aboutBox .aboutinfo .row .left h3{
    color: #fff;
    font-weight: 200;
    letter-spacing: 2px;
    font-size: 16px;
    margin-bottom: 5px;
}
#aboutBox .aboutinfo .row.info h2 {margin-bottom: 25px;font-weight: 400;font-size: 17px;color: #fff;letter-spacing: 3px;}
#aboutBox .aboutinfo .row.info article {margin-bottom: 30px;font-weight: 300;line-height: 180%;font-size: 15px;color: #fff;}
#aboutBox .aboutinfo .row.img { position: absolute; height: 100%; }
#aboutBox .aboutinfo .row.img a.photo { width: 100%; height: 100%; }

/* SeoStarRating */
#SeoStarRating {vertical-align: bottom;}

/* productBox */
#productBox {padding: 70px 0;z-index: 2;}
#productBox .bg { position: absolute; width: 30vw; height: 17vw; background: no-repeat 50% / cover; box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3); top: -7vw; right: 10vw; z-index: 4; }
#productBox .productinfo {position: relative;z-index: 3;width: 1600px;margin: 0 auto;}
#productBox .productinfo ul {margin-top: 3vw;overflow: hidden;}
#productBox .productinfo ul li {position: relative;float: left;width: 25%;}
#productBox .productinfo ul li a { position: absolute; width: 100%; height: 100%; z-index: 2; }
#productBox .productinfo ul li .info {padding: 20px;}
#productBox .productinfo ul li .img { margin-bottom: 30px; background: no-repeat 50% / cover; }
#productBox .productinfo ul li.slick-active .img { box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3); }
#productBox .productinfo ul li .price font { margin-right: 10px; display: inline-block; font-size: 15px; }
#productBox .productinfo ul li .price font.old { color: #a3a3a3; }
#productBox .productinfo ul li h3 {margin-bottom: 20px;height: 34px;font-size: 20px;-webkit-line-clamp: 1;color: #fff;}
#productBox .productinfo ul li article {height: 72px;font-weight: 400;color: #969696;-webkit-line-clamp: 3;font-size: 14px;}

/* bookBox */
#bookBox { background: #efebe9; }
#bookBox:before , #customBox:before { position: absolute; width: 50%; height: 100%; background: #dcd7d2; top: 0; left: 0; z-index: 1; content: ""; }
#bookBox .bg { position: absolute; width: 42%; height: calc(100% - 50px); left: 50%; bottom: 0; z-index: 2; background: #fff; }
#bookBox .bg >div { height: 100%; background: no-repeat 50% / cover; opacity: .2; }
#bookBox .bookinfo { position: relative; top: -50px; z-index: 3; }
#bookBox .bookinfo .rightBox , #bookBox .bookinfo .slick-dots { position: absolute; margin-left: calc(5% + 50px); width: 22%; text-align: left; font-size: 0; bottom: 50px; left: 62%; }
#bookBox .bookinfo .boxtit { font-size: 30px; bottom: calc(100% - 200px); }
#bookBox .bookinfo .list { position: relative; }
#bookBox .bookinfo ul li { font-size: 0; }
#bookBox .bookinfo ul li .img { margin: 50px 50px 50px 0; width: 62%; display: inline-block; box-shadow: 0 0 50px 2px rgba(0, 0, 0, .3); }
#bookBox .bookinfo ul li .info { margin-left: 5%; width: 22%; display: inline-block; }
#bookBox .bookinfo ul li .info a { width: 90%; height: 170px; font-size: 20px; color: #292929; -webkit-line-clamp: 5; }
#bookBox .bookinfo .btns { margin: auto; width: 135px; right: 8%; left: auto; }
#bookBox .bookinfo .slick-dots li { margin: 0; }
#bookBox .bookinfo .slick-dots li button:before , #bookBox .bookinfo .slick-dots li.slick-active button:before { color: #0f2942; }
#bookBox .bookinfo .more { width: 90%; text-align: right; }

/* customBox */
#customBox ul { padding: 50px 0; z-index: 2; }
#customBox ul li { position: relative; }
#customBox ul li .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; z-index: 1; }
#customBox ul li .bg iframe { width: 100%; height: 100%; }
#customBox ul li .info { position: relative; padding: 70px 0; min-height: 215px; background: rgb(15 41 66 / .8); z-index: 2; }
#customBox ul li .info h3 { text-align: center; font-size: 35px; }
#customBox ul li .info article { margin: 30px auto 0; width: 700px; line-height: 200%; text-align: center; font-weight: 400; color: #ccc; }

@media screen and (max-width:1600px) {
#productBox .productinfo, #NewsBox >div, #aboutBox .aboutinfo{width: 90%;}
}
@media screen and (min-width:1281px) {
	.indexbox .more a:hover {color: #fff;background: none;}
	.indexbox .more a:hover:before { width: 100%; }
}
@media screen and (max-width:1280px) {
	#productBox .productinfo ul li.slick-active .img { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3); }
	#bookBox .bookinfo .rightBox , #bookBox .bookinfo .slick-dots { margin-left: 50px; }
	#bookBox .bookinfo ul li .info { margin-left: 0; }
}
@media screen and (max-width:1024px) {
	#productBox .productinfo ul li{
    width: 50%;
}
	#productBox:before { width: 95vw; }
	#productBox { padding: 5vw 5vw calc(5vw + 80px); }
	#bookBox .bookinfo .boxtit { margin-left: 0; width: 100%; text-align: center; top: -40px; bottom: auto; left: 0; }
	#bookBox .bookinfo ul li .img { margin: 30px 30px 30px 0; width: calc(92% - 135px); box-shadow: 0 0 20px 2px rgba(0, 0, 0, .3); }
	#bookBox .bookinfo ul li .info { position: absolute; width: calc(92% - 135px); background: #0f2942; display: block; left: 0; bottom: 30px; z-index: 2; }
	#bookBox .bookinfo ul li .info a { margin: 10px 20px 4px; height: 34px; color: #fff; -webkit-line-clamp: 1; }
	#bookBox .bookinfo .slick-dots { margin-left: 0; width: 100%; text-align: center; left: 0; bottom: -10px; }
}
@media screen and (max-width:980px) {
	#aboutBox .fixTxt { display: none; }
	#aboutBox #pictureBox { top: -7vw; }
	#aboutBox #pictureBox , #aboutBox #pictureBox a.photo { width: 40vw; height: 25vw; }
	#aboutBox .aboutinfo .row .left h3, #SeoStarRating, #aboutBox .aboutinfo .row.info h2, #aboutBox .aboutinfo .row.info article, #aboutBox p.more {text-align: center;}
	#aboutBox .aboutinfo .row .left, #aboutBox .aboutinfo .row .right {
    float: none;
    width: 100%;
    text-align: center;
}
	#aboutBox .aboutinfo .row.info h3.boxtit { color: #25496b; }
	#aboutBox .aboutinfo .row.info .more a {}
	#aboutBox .aboutinfo .row.img { width: 100%; display: block; opacity: .4; top: 0; left: 0; z-index: 1; }
	#productBox .bg { display: none; }
	#customBox ul li .info article { width: 85%; }
	#NewsBox ul li{
    width: calc(100% - 2px);
    float: none;
    margin: 20px 0;
}
#NewsBox ul li a img{
    width: 100%;
}
}
@media screen and (max-width:640px) {
	#NewsBox { position: relative; width: 90%; }
	#productBox .productinfo ul { margin: auto; width: 80%; }
	#bookBox .bookinfo ul li .img { margin: 30px; width: calc(100% - 60px); }
	#bookBox .bookinfo ul li .info { width: calc(100% - 60px); left: 30px; }
	#bookBox .bookinfo .btns { display: none; }
}
@media screen and (max-width:500px) {
	#aboutBox {
    padding: 40px 0;
}
	#productBox .productinfo ul li{
    width: 100%;
}
	#NewsBox  , #productBox .productinfo ul { width: 100%; }
	#aboutBox .aboutinfo .row .left h1 img{
    width: 200px;
}
}