.wraprow { position: relative; padding: 5vw 0; }
.wraprow .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; opacity: .3; top: 0; left: 0; z-index: 1; }
.wraprow .titBox { padding: 20px 0; color: #181627; }
.wraprow .titBox:before { position: relative; margin-right: 10px; width: 80px; border-bottom: 1px solid; display: inline-block; vertical-align: baseline; top: -9px; content: ""; }
.wraprow .titBox font { font-weight: 500; font-size: 35px; vertical-align: baseline; }
.wraprow .titBox font:last-child { margin-left: 10px; font-weight: 400; font-size: 20px; }
.wraprow .more { position: relative; margin: 0 50px 0 auto; width: 300px; }
.wraprow .more a { padding: 20px 0; width: 250px; border: 1px #d20320 solid; display: block; text-align: center; }
.wraprow .more a font { position: relative; font-size: 18px; color: #0c0b19; z-index: 2; -webkit-transition-duration: .3s; transition-duration: .3s; }
.wraprow .more a span { position: absolute; width: 80px; height: 1px; background: #000; display: block; right: 0; top: calc((100% - 1px) / 2); z-index: 3; -webkit-transition-duration: .2s; transition-duration: .2s; }
.wraprow .more a span:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 16px 7px 0; border-color: transparent transparent #0c0b19 transparent; right: -1px; bottom: 50%; content: ""; }
.wraprow .more a:after { position: absolute; width: 0; height: 100%; background: #d20320; display: block; top: 0; left: 0; content: ""; z-index: 1; -webkit-transition-duration: .2s; transition-duration: .2s; }

/* aboutBox */
#aboutBox { margin: -100px 0 0; padding: 100px 0; }
#aboutBox .bg { width: 95%; background: url(/images/35/img-aboutBg.jpg) no-repeat 50% / cover; display: block; opacity: 1; }
#aboutBox .workframe { width: 1170px; font-size: 0; }
#aboutBox .workframe >div { width: 50%; display: inline-block; vertical-align: top; }
#aboutBox .titBox font { margin: 0 0 5px; display: block; line-height: 100%; font-size: 35px; color: #fff; }
#aboutBox .titBox:before { display: none; }
#aboutBox .info article { margin-bottom: 20px; line-height: 235%; color: #9492b1; }
#aboutBox .info .more { margin: 40px 0 0 auto; }
#aboutBox .info .more a font { color: #fff; }
#aboutBox .info .more a span { background: #fff; }
#aboutBox .info .more a span:before { border-color: transparent transparent #fff transparent; }
#aboutBox #SeoStarRating font:last-child { color: #8e8e8e; }
#aboutBox .img { position: absolute; width: 45vw; height: 300px; background: no-repeat 50% / cover; box-shadow: 0px 15px 15px rgba(26, 26, 51, .2); left: 0; bottom: -50px; z-index: 2; }

/* productBox */
#productBox { padding: calc(5vw + 30px) 0 5vw; }
#productBox ul li { position: relative; margin: 10px 0 70px; padding: 30px; }
#productBox ul li .img { position: absolute; height: calc(100% - 50px); width: calc(100% - 50px); border: 5px solid #d20320; -webkit-box-shadow: 0 7px 14px rgba(56, 5, 5, .37); box-shadow: 0 7px 14px rgba(56, 5, 5, .37); -webkit-transition: -webkit-transform .3s cubic-bezier(.25,.46,.45,.94); transition: -webkit-transform .3s cubic-bezier(.25,.46,.45,.94); transition: transform .3s cubic-bezier(.25,.46,.45,.94); transition: transform .3s cubic-bezier(.25,.46,.45,.94),-webkit-transform .3s cubic-bezier(.25,.46,.45,.94); left: 20px; top: 20px; }
#productBox ul li .img:before { margin: 15px; width: calc(100% - 30px); height: calc(100% - 30px); background: #fff; display: block; content: ""; }
#productBox ul li a { position: relative; margin: 10px; z-index: 2; }

/* customBox */
#customBox { padding: 0; z-index: 5; }
#customBox:before , #customBox:after { position: absolute; width: 25px; height: 100%; background: #fff; display: inline-block; content: ""; top: 0; left: 0; z-index: 5; opacity: .4; }
#customBox:after { left: auto; right: 0; }
#customBox .btn a { position: absolute; width: 65px; height: 7px; display: block; left: 25px; top: calc((100% - 7px) / 2); z-index: 3; -webkit-transition-duration: .2s; transition-duration: .2s; }
#customBox .btn a:before { position: absolute; width: 100%; height: 1px; background: #fff; display: block; bottom: 0; content: ""; }
#customBox .btn a:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 7px 13px 0 0; border-color: transparent #fff transparent transparent; left: -1px; bottom: 0; content: ""; }
#customBox .btn a#nextBtn { left: auto; right: 25px; }
#customBox .btn a#nextBtn:after { border-width: 0 13px 7px 0; border-color: transparent transparent #fff transparent; left: auto; right: -1px; }
#customBox ul li.slick-slide { position: relative; background: #000; }
#customBox ul li .bg { opacity: .6; }
#customBox ul li .info { padding: 3vw 0 0; height: calc(400px - 3vw); z-index: 9; }
#customBox ul li .info h3 { margin-bottom: 20px; font-size: 40px; color: #fff; }
#customBox ul li .info article { width: 500px; line-height: 200%; color: #fff; }
#customBox .slick-dots li button:before { height: 5px; background: #d20320; display: inline-block; content: ""; }

/* bookBox */
#bookBox { padding: 8vw 0; }
#bookBox .bg { width: calc(100% - 5vw); height: calc(100% - 10vw); box-shadow: 0px 15px 15px rgba(26, 26, 51, .1); left: 5vw; top: 5vw; opacity: 1; }
#bookBox ul { font-size: 0; }
#bookBox ul li { position: relative; overflow: hidden; margin: 30px; width: 450px; display: inline-block; }
#bookBox ul li h3 { position: absolute; padding: 20px; width: calc(65% - 20px); background: #fff; right: 0; bottom: 0; }
#bookBox ul li h3 a { height: 70px; font-weight: 400; font-size: 20px; color: #434343; -webkit-line-clamp: 2; }

/* youtubeBox */
#youtubeBox { position: relative; padding: 3vw 0 6vw; }
#youtubeBox .bg { width: 630px; height: 575px; background: url(/images/35/img-aboutBg.jpg) no-repeat 50% / cover; top: -1vw; left: auto; right: 0; opacity: 1; }
#youtubeBox iframe { margin-top: 40px; width: 960px; height: 576px; }

/* NewsBox */
#NewsBox { padding: 3vw 0 5vw; }
#NewsBox .listbox { position: relative; z-index: 2; }
#NewsBox ul { margin: 3vw 0 5vw; }
#NewsBox ul li { background: url(/images/35/img-news1Bg.jpg); border: 0; }
#NewsBox ul li:nth-child(2n) { background: url(/images/35/img-news2Bg.jpg); }
#NewsBox ul li a { display: block; font-size: 0; }
#NewsBox ul li a font { width: 80px; display: -webkit-inline-box; color: #fff; }
#NewsBox ul li a font.time { padding: 40px; }
#NewsBox ul li a font.txt { width: calc(100% - 170px); height: 27px; -webkit-line-clamp: 1; }
#NewsBox ul li a font.arrow { position: relative; padding: 0; width: 1px; height: 30px; background: #fff; }
#NewsBox ul li a font.arrow:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 13px 7px 0 0; border-color: #fff transparent transparent transparent; left: 0; bottom: -1px; content: ""; }

@media screen and (max-width: 1680px){
	#productBox .workframe { width: 90%; }
	#customBox .btn a { width: 45px; }
	#customBox ul li .info { width: calc(90% - 90px); }
}
@media screen and (max-width: 1440px){
	#aboutBox .workframe { width: 75%; }
}
@media screen and (min-width: 1281px){
	.wraprow .more:hover a font { color: #fff; }
	.wraprow .more:hover a span { right: 30px; }
	.wraprow .more:hover a:after { width: 252px; }
	#productBox .bg { width: 700px; height: 585px; top: calc(5vw + 30px); left: auto; right: 0; opacity: 1; }
	#productBox ul li:hover .img { -webkit-transform: scale(.95); transform: scale(.95); }
	#customBox .btn a#prevBtn:hover { left: 10px; }
	#customBox .btn a#nextBtn:hover { right: 10px; }
	#bookBox ul li:hover a.photo { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2); }
	#NewsBox ul li:hover { background: url(/images/35/img-newsHBg.jpg); }
}
@media screen and (max-width: 1280px){
	#aboutBox .bg { width: 100%; }
	#aboutBox .workframe { width: 90%; }
	#bookBox .bg { width: 100%; height: 100%; top: 0; left: 0; }
	#bookBox ul li { margin: 15px 15px 15px 0; width: calc((100% - 30px) / 2); }
	#bookBox ul li:nth-child(2n) { margin: 15px 0 15px 15px; }
	#bookBox ul li h3 { padding: 10px 20px; width: calc(100% - 40px); }
	#bookBox ul li h3 a { height: 30px; -webkit-line-clamp: 1; }
	#youtubeBox .bg { width: 55vw; height: 47vw; top: 0; }
	#youtubeBox iframe { width: 70vw; height: 43vw; }
	#NewsBox ul li a font.time { padding: 40px 40px 40px 0; }
	#NewsBox ul li a font.txt { width: calc(100% - 130px); }
}
@media screen and (max-width: 1024px){
	#aboutBox { margin-top: -60px; padding: 10vw 0; }
	#aboutBox .workframe >div { width: 100%; }
	#aboutBox .info .more { margin: -30px auto 0; }
	#aboutBox .img { width: 80vw; position: relative; bottom: 0; }
	#productBox ul li { padding: 0; }
	#productBox ul li .img { opacity: 0; }
}
@media screen and (max-width: 980px){
	#customBox:before , #customBox:after { opacity: 0; }
	#customBox ul li .info { width: 80vw; height: 80vw; }
	#customBox ul li .info article { width: 100%; }
	#youtubeBox .bg { width: 60vw; height: 100%; }
	#youtubeBox iframe { width: 90vw; height: 55vw; }
}
@media screen and (max-width: 640px){
	.wraprow .titBox:before { width: 50px; }
	.wraprow .titBox font:last-child { margin-top: -10px; display: block; text-align: right; }
	.wraprow .more { margin: 0 auto; width: 180px; }
	.wraprow .more a { padding: 10px 0; width: 180px; }
	.wraprow .more a font { font-size: 17px; }
	.wraprow .more a span { width: 50px; right: -25px; }
	.wraprow .more a span:before { border-width: 0 10px 6px 0; }
	#aboutBox .info .more { margin: 30px 0 50px auto; }
	#aboutBox .img { width: 95vw; }
	#customBox .btn { display: none; }
	#bookBox ul { text-align: center; }
	#bookBox ul li , #bookBox ul li:nth-child(2n) { margin: 15px 0; width: 90%; }
	#NewsBox ul li a { padding: 10px 0; }
	#NewsBox ul li a font.time { padding: 0; width: 100%; display: block; font-size: 12px; color: #aaaab9; }
	#NewsBox ul li a font.txt { width: 100%; display: block; }
	#NewsBox ul li a font.arrow { display: none; }
}