/* indexbox */
.indexbox { position: relative; }
.indexbox h3.boxtit {font-size: 30px;color: #fff;}
.indexbox .more {margin-top: 40px;}
.indexbox .more a {position: relative;padding: 15px 50px;color: #fff;background: linear-gradient(#e3b48b, #97683e);border-radius: 50px;}

/* NewsBox */
#NewsBox {padding: 90px 0;}
#NewsBox .info{width:1280px;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, #customBox h2 {font-size: 30px;color: #fff;margin-bottom: 40px;text-align: center;}
#NewsBox ul {display: flex;flex-wrap: wrap;}
#NewsBox ul li {position: relative;width: calc((100%/3) - 40px);margin: 20px;}
#NewsBox ul li a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#NewsBox ul li .time {height: 260px;}
#NewsBox ul li .time img{width:100%;height: 100%;object-fit: cover;}
#NewsBox ul li .txt {height: 57px;-webkit-line-clamp: 2;margin: 10px 0;font-size: 18px;line-height: 150%;font-weight: 500;}
#NewsBox.promotions ul li .txt {height: auto;-webkit-line-clamp: 1;text-align: center;}
#NewsBox ul li article{font-size: 13px;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-style: italic;font-weight: 100;opacity: .5;}

/* aboutBox */
#aboutBox {padding: 50px 0;}
#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;width: 1280px;margin: 0 auto;}
#aboutBox .aboutinfo .row {}
#aboutBox .aboutinfo .row.info {}
#aboutBox .aboutinfo .row.info h2 {margin-bottom: 25px;font-weight: 600;font-size: 30px;}
#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: 50px 0;z-index: 2;background: rgb(0 0 0 / 25%);}
#productBox .productinfo{width:1280px;margin: 0 auto;}
#productBox ul li {position: relative;border: 1px solid #4a5da4;margin: 30px 0;}
#productBox ul li >a { position: absolute; width: 100%; height: 100%; z-index: 2; }
#productBox ul li .info {padding: 40px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#productBox ul li .img {background: no-repeat 50% / cover;width: 13%;}
#productBox ul li .price {width: 65%;}
#productBox ul li .morebox{width:15%;display: flex;flex-direction: column;}
#productBox ul li .morebox p{margin: 3px 0;text-align: center;color: #cecdcd;font-size: 12px;font-style: italic;}
#productBox ul li .morebox p a{display: block;background: linear-gradient(#e3b48b, #97683e);position: relative;z-index: 5;color: #fff;text-align: center;padding: 10px 0;font-style: initial;border-radius: 50px;}
#productBox ul li .price font { margin-right: 10px; display: inline-block; font-size: 15px; }
#productBox ul li .price font.old { color: #a3a3a3; }
#productBox ul li h3 {margin-bottom: 5px;height: auto;font-size: 20px;-webkit-line-clamp: 1;color: #fff;}
#productBox ul li p {height: auto;font-weight: 400;font-size: 14px;color: #fff;-webkit-line-clamp: 1;}
#productBox .more, #NewsBox .more{text-align: center;}

/* 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{background: rgb(0 0 0 / 25%);padding: 50px 0;}
#faqList li {margin-bottom: 10px;border: 1px solid #4a5da4;}
#faqList li .title {position: relative;padding: 15px 65px 15px 25px;display: block;}
#faqList li .title font {color: #fff;}
#faqList li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 25px; }
#faqList li .title span:before , #faqList li .title span:after {width: 16px;height: 1px;background: #fff;display: block;content: "";-webkit-transform: translateY(9px);transform: translateY(9px);}
#faqList li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
#faqList li .info {padding: 15px 25px;background: rgb(255 255 255 / 5%);-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}
#faqList li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

@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) {
	#aboutBox .aboutinfo, #productBox .productinfo, #NewsBox .info{width:90%;}
	#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; }
	#NewsBox ul li .time{height: 220px;}
}
@media screen and (max-width:1024px) {
	#NewsBox ul li .time{height: 180px;}
	#productBox:before { width: 95vw; }
	#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) {
	#NewsBox ul li{width: calc((100%/2) - 40px);}
	#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; }
	#productBox .bg { display: none; }
	#customBox ul li .info article { width: 85%; }
	#productBox ul li .info{padding:25px;}
}
@media screen and (max-width:640px) {
	#NewsBox ul li{width: calc((100%/1) - 40px);}
	#productBox ul li .info{display:flex;flex-direction: column;}
	.indexbox h3.boxtit, #aboutBox .aboutinfo .row.info h2{font-size: 25px;}
	#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; }
	#NewsBox  , #productBox .productinfo ul { width: 100%; }
	#productBox ul li .img, #productBox ul li .morebox{width:100%;}
	#productBox ul li .price{width:100%;margin: 10px 0;}
	#productBox ul li h3, #productBox ul li p{text-align: center;}
}