/* indexbox */
.indexbox { position: relative; }
.indexbox h3.boxtit { font-size: 30px; color: #ad9d8f; }
.indexbox .more { margin-top: 40px; }
.indexbox .more a { position: relative; padding: 15px 50px; border: 2px #ad9d8f solid; color: #ad9d8f; }
.indexbox .more a:before { position: absolute; width: 0; height: 100%; background: #ad9c8f; display: block; left: 0; top: 0; content: ""; z-index: -1; }

/* NewsBox */
#NewsBox { position: absolute; width: 500px; background: #fff; right: 0; bottom: 0; z-index: 2; }
#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 { padding: 15px 0 15px 30px; }
#NewsBox ul li { position: relative; }
#NewsBox ul li a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#NewsBox ul li .time { font-size: 12px; color: #404040; }
#NewsBox ul li .txt { height: 60px; -webkit-line-clamp: 2; }

/* aboutBox */
#aboutBox { padding-top: 9vw; }
#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: 35px; }
#aboutBox .aboutinfo .row.info article { margin-bottom: 30px; font-weight: 300; line-height: 230%; font-size: 18px; }
#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: 85vw; height: 230px; background: #0f2942; display: block; top: 0; left: 0; z-index: 2; content: ""; }
#productBox:after { position: absolute; width: 50%; height: 100%; background: #efebe9; display: block; top: 0; right: 0; z-index: 1; 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 .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; }
#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; }
#productBox .productinfo ul li article { height: 81px; font-weight: 400; color: #393939; -webkit-line-clamp: 3; }

/* 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 (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.info .more a { border-color: #25496b; color: #25496b; }
	#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%; }
}
@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) {
	#NewsBox  , #productBox .productinfo ul { width: 100%; }
}