/* indexbox */
.indexbox { position: relative; }
.indexbox h3.boxtit {font-size: 35px;color: #4a4a4a;letter-spacing: 5px;border-bottom: 1px solid #d1d1d1;padding-bottom: 20px;}
.indexbox h3.boxtit:first-letter{color: #2196f3;}
.indexbox .more { margin-top: 40px; }
.indexbox .more a {position: relative;padding: 15px 50px;color: #fff;background: #292929;}
.indexbox .more a:before { position: absolute; width: 0; height: 100%; background: #ad9c8f; display: block; left: 0; top: 0; content: ""; z-index: -1; }

/* NewsBox */
#NewsBox {width: 1400px;margin: 50px auto;background: #fff;padding: 70px;box-shadow: 0 0 10px rgb(0 0 0 / 10%);}
#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 {margin-top: 50px;}
#NewsBox ul li { position: relative; }
#NewsBox ul li a {}
#NewsBox ul li .time { font-size: 12px; color: #404040; }
#NewsBox ul li .txt { height: 60px; -webkit-line-clamp: 2; }
#NewsBox ul li {margin: 0 15px 30px;width: calc((100%/3) - 30px);display: inline-block;}
#NewsBox ul li .info {position: relative;padding: 30px;background: #fff;}
#NewsBox ul li .info h3 a {height: 36px;font-weight: 500;font-size: 22px;color: #000;-webkit-line-clamp: 1;display: block;text-align: center;}

/* aboutBox */
#aboutBox {}
#aboutBox .fixTxt { position: absolute; font-size: 13vw; font-weight: 900; color: #f2f5f7; white-space: nowrap; left: 0; top: 0; 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; }
#aboutBox .aboutinfo .row { width: 50%; display: inline-block; vertical-align: top; }
#aboutBox .aboutinfo .row.info { padding: 3vw 7vw 5vw 10vw; width: calc(50% - 17vw); }
#aboutBox .aboutinfo .row.info h2 {margin-bottom: 25px;font-weight: 400;font-size: 25px;text-transform: uppercase;margin-top: 20px;}
#aboutBox .aboutinfo .row.info article {margin-bottom: 30px;font-weight: 300;line-height: 230%;font-size: 16px;text-align: justify;}
#aboutBox .aboutinfo .row.img { position: absolute; height: 100%; }
#aboutBox .aboutinfo .row.img a.photo { width: 100%; height: 100%; }

/* SeoStarRating */
#SeoStarRating { text-align: right; }

/* productBox */
#productBox { padding: 5vw; z-index: 2; }
#productBox:before {position: absolute;width: 100%;height: 230px;background: #f5f7fa;display: block;top: 0;left: 0;z-index: 2;content: "";}
#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; }
#productBox h3.boxtit, #productBox h3.boxtit:first-letter{text-align: center;}
#productBox .productinfo ul { margin-top: 3vw; }
#productBox .productinfo ul li { position: relative; }
#productBox .productinfo ul li a { position: absolute; width: 100%; height: 100%; z-index: 2; }
#productBox .productinfo ul li .info {padding: 40px;box-shadow: 0 0 10px rgb(0 0 0 / 10%);margin: 20px;background: #fff;}
#productBox .productinfo ul li .img {margin-bottom: 30px;background: no-repeat 50% / cover;border-radius: 15px;}
#productBox .productinfo ul li.slick-active .img {}
#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: 37px;font-size: 23px;-webkit-line-clamp: 1;text-align: center;}
#productBox .productinfo ul li article {height: auto;font-weight: 400;color: #fff;-webkit-line-clamp: 3;display: block;text-align: center;background: #292929;padding: 15px 0;}

/* bookBox */
#bookBox { background: #efebe9; }
#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:1440px) {
	#NewsBox{width:calc(100% - 140px);margin:0;box-shadow:none}
}
@media screen and (min-width:1281px) {
	.indexbox .more a:hover { color: #fff; }
	.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: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 { padding-top: 0; }
	#aboutBox .fixTxt { display: none; }
	#aboutBox #pictureBox { top: -7vw; }
	#aboutBox #pictureBox , #aboutBox #pictureBox a.photo { width: 40vw; height: 25vw; }
	#aboutBox .aboutinfo { padding: 5vw 0; }
	#aboutBox .aboutinfo .row.info { position: relative; padding: 3vw 10vw; width: 80%; z-index: 2; }
	#aboutBox .aboutinfo .row.info h3.boxtit { color: #25496b; }
	#aboutBox .aboutinfo .row.img {width: 100%;display: block;opacity: .05;top: 0;left: 0;z-index: 1;}
	#productBox .bg { display: none; }
	#customBox ul li .info article { width: 85%; }
}
@media screen and (max-width: 640px) {
	#productBox {padding: 5vw;}
	#productBox .productinfo ul {margin-top: 30px;width: 100%;}
	#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) {
	#NewsBox {width: calc(100% - 40px);padding: 40px 20px;}
}