.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 font {font-weight: 500;font-size: 35px;vertical-align: baseline;color: #fff;}
.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: 290px;border: 5px #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;display: none;}
.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 {padding: 100px 0;}
#aboutBox .bg {width: 95%;background: #eee;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: 65px;text-transform: uppercase;font-family: 'Roboto', sans-serif;color: #333;font-weight: 700;}
#aboutBox .titBox:before { display: none; }
#aboutBox .info article {margin-bottom: 20px;line-height: 235%;color: #191919;text-align: justify;}
#aboutBox .info .more { margin: 40px 0 0 auto; }
#aboutBox .info .more a font {}
#aboutBox .info .more a span {
    display: none;
}
#aboutBox .info .more a span:before {}
#aboutBox #SeoStarRating font:last-child { color: #8e8e8e; }
#aboutBox .img {position: absolute;width: 45vw;height: 360px;background: no-repeat 50% / cover;left: 0;bottom: -120px;z-index: 2;border: 10px solid #e11515;}

/* productBox */
#productBox {padding: calc(5vw + 30px) 0 5vw;overflow: hidden;}
#productBox ul li { position: relative; margin: 10px 0 70px; padding: 30px; }
#productBox ul li .img {position: absolute;height: calc(100% - 60px);width: calc(100% - 60px);border: 10px 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;border-radius: 15px;overflow: hidden;}
#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: 15px;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.slick-slide a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;}
#customBox ul li .bg {opacity: 1;}
#customBox ul li .info {padding: 3vw 0 0;height: calc(500px - 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 0;}
#NewsBox .listbox { position: relative; z-index: 2; }
#NewsBox ul {margin: 3vw 0 0;}
#NewsBox ul li {background: #2d2d2d;border: 0;}
#NewsBox ul li:nth-child(2n) {background: #212121;}
#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%; }
	#aboutBox .img{height: 280px;}
}
@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: 100%;height: 100%;top: calc(5vw + 30px);left: auto;right: 0;opacity: .15;}
	#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: #e11515;}
}
@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 {padding: 5vw 0;}
	#aboutBox .workframe >div { width: 100%; }
	#aboutBox .info .more { margin-bottom: 40px;}
	#aboutBox .img {width: 100vw;position: relative;bottom: 0;height: 440px;border: 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: 25vw;}
	#customBox ul li .info article { width: 100%; }
	#youtubeBox .bg { width: 60vw; height: 100%; }
	#youtubeBox iframe { width: 90vw; height: 55vw; }
	#aboutBox .img{height: 325px;}
}
@media screen and (max-width: 640px){
	#aboutBox .titBox font{font-size: 35px;}  
	.wraprow .titBox:before { width: 50px; }
	.wraprow .titBox font:last-child, .wraprow .titBox font {display: block;text-align: center;margin: 0;}
	.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 {
    height: 155px;
}
	#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; }
}