.wraprow { position: relative; padding: 2vw 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: #ffffff; }
.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 #ffffff solid;display: block;text-align: center;}
.wraprow .more a font {position: relative;font-size: 18px;color: #fff;z-index: 2;-webkit-transition-duration: .3s;transition-duration: .3s;}
.wraprow .more a span {position: absolute;width: 80px;height: 1px;background: #fff;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 #fff transparent;right: -1px;bottom: 50%;content: "";}
.wraprow .more a:after {position: absolute;width: 0;height: 100%;background: #fff;display: block;top: 0;left: 0;content: "";z-index: 1;-webkit-transition-duration: .2s;transition-duration: .2s;}


.container {max-width:1140px;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}
.row{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -15px;margin-left: -15px;}
.col{-ms-flex-preferred-size: 0;flex-basis: 0;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;max-width: 100%;}
.secondary-info-bg {background: #b00110;}
.secondary_info {color:#fff}
.secondary_info:hover .info_icon {border-radius:100rem;color:#ccad66;-webkit-animation:bounce 1s;animation:bounce 1s}
.secondary_info>div {font-weight:100;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.secondary_info .info_icon {font-size:2.5rem;float:left; padding-right: 5px;}
.secondary_info .info_words {float:left;margin-left:10px}
.secondary_info .info_words>span {display:block;font-size:.8rem}
.secondary_info .info_words>span>span {font-weight:400}
.secondary-info-bg2 {background:transparent;padding-top:10px}
.secondary-info-bg2 .secondary_info2 {color:#fff}
.secondary-info-bg2 .secondary_info2:hover .info_icon {color:#ccad66;-webkit-animation:bounce 1s;animation:bounce 1s}
.secondary-info-bg2 .secondary_info2>div {font-weight:100;-webkit-box-align:center;-ms-flex-align:center;
align-items:center}
.secondary-info-bg2 .secondary_info2 .info_icon {font-size:2.5rem;width:150px;line-height:95px;margin:0 auto 8px;text-align:center;background:url("/theme-bu/img/hex.png") no-repeat top}
.secondary-info-bg2 .secondary_info2 .info_words {display:block;text-align:center}
.secondary-info-bg2 .secondary_info2 .info_words>span {display:block;font-size:.9rem;color:#ca9663}
.secondary-info-bg2 .secondary_info2 .info_words>span>span {font-weight:400;color:#790707}

/* 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 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 #b00110;-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: #0b253b;border: 0;}
#NewsBox ul li:nth-child(2n) {background: #013765;}
#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; }
	.container{width:950px;}
}
@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; }
	.container{ display: none;}
}
@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: #ffffff; }
	#NewsBox ul li a font.txt { width: 100%; display: block; }
	#NewsBox ul li a font.arrow { display: none; }
}