h2.title { margin-bottom: 35px; font-size: 55px; font-weight: 300; text-align: center; color: #012b42; }
p.readmore { margin: 40px 0; text-align: center; }
p.readmore a ,
#contactBox #form1 .send a { padding: 10px 40px; background: #FF9800; display: inline-block; color: #fff; }

#page-scroll { z-index: 1; }

/* page-wrap */
#page-wrap { position: fixed; background: #002a41; box-shadow: 0 0 10px #151515; left: 0; top: 0; z-index: 10; white-space: nowrap; font-size: 0; }
#page-wrap .row { position: relative; height: 100vh; display: inline-block; }

/* aboutBox */
#aboutBox { overflow: hidden; margin-left: -38vw; padding: 0 0 0 38vw; background: url(/images/32/img-aboutBg.png) no-repeat 0 0 / auto 100%; }
#aboutBox >div { position: relative; float: left; width: 34vw; }
#aboutBox .info .box { position: relative; }
#aboutBox .info .box:after { position: absolute; border-style: solid; border-width: 10vw 0 0 10vw; border-color: transparent transparent transparent #022c43; bottom: -30px; left: 42px; content: ""; z-index: -1; }
#aboutBox .info h2 { margin: 20vw 0 3vw; text-align: left; font-size: 55px; color: #Efff; font-weight: 400; }
#aboutBox .info p { margin-left: 60px; font-size: 25px; color: #fff; }
#aboutBox .info #SeoStarRating { margin-left: 60px; }
#aboutBox .info #SeoStarRating font ,
#aboutBox .info #SeoStarRating font:nth-child(2) { color: #0380c5; }
#aboutBox .picture { width: 40vw; }
#aboutBox .picture .btn { position: absolute; font-size: 0; top: calc((100% - 50px) / 2); left: -65px; z-index: 10; }
#aboutBox .picture .btn a { position: relative; padding: 0 29px 0 12px; height: 50px; display: inline-block; }
#aboutBox .picture .btn a span { border-style: solid; border-width: 24px 24px 24px 0; border-color: transparent #022c43 transparent transparent; display: inline-block; }
#aboutBox .picture .btn a:before { position: absolute; width: 14px; height: 29px; background: url(/images/32/icon-arrow.png) no-repeat 0 0; display: inline-block; top: calc((100% - 29px) / 2); left: 0; content: ""; }
#aboutBox .picture .btn a:after { position: absolute; width: 15px; height: 2px; display: inline-block; background: rgba(255, 255, 255, .5); top: calc((100% - 2px) / 2); right: 0; content: ""; }
#aboutBox .picture .btn a#nextBtn { padding: 0 12px 0 29px; }
#aboutBox .picture .btn a#nextBtn:before { background-position: -14px 0; left: auto; right: 0; }
#aboutBox .picture .btn a#nextBtn:after { background: #012437; left: 0; right: auto; }
#aboutBox .picture .btn a#nextBtn span { border-width: 24px 0 24px 24px; border-color: transparent transparent transparent #ed8b00; }
#aboutBox .picture .list { position: relative; height: 100vh; background: no-repeat 50% / cover; }
#aboutBox .picture .list >div { padding: calc(80vh - 104px) 20% 20vh 15%; width: 66%; height: 104px; background: rgba(0,10,15,.5); }
#aboutBox .picture .list >div article { margin-bottom: 10px; height: 88px; font-size: 18px; color: #e2f4ff; -webkit-line-clamp: 3; white-space: initial; }
#aboutBox .picture .list >div a.more { font-size: 12px; color: #e2f4ff; }
#aboutBox [class^="triangle-"] { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 60px 56px 60px; border-color: transparent transparent #012b42 transparent; bottom: 50px; left: 38vw; z-index: 10; }
#aboutBox .triangle-2 { border-width: 0 9vw 8.5vw 9vw; left: 65vw; }

/* customBox */
#customBox { width: 100vw; background: url(/images/32/img-customBg.jpg) #002a41; text-align: center; top: 0; left: 0; }
#customBox >div { line-height: 100vh; font-size: 0; z-index: 13; }
#customBox .box { width: 50%; display: inline-block; }
#customBox .box .list h3 { font-weight: 400; font-size: 50px; color: #FF9800; }
#customBox .box .list article { margin: 0 50px; font-size: 18px; color: #83a8bc; }
#customBox .bottomBox [class^="triangle-"] { position: absolute; border-style: solid; border-width: 27vw 27vw 0 27vw; border-color: #041f2d transparent transparent transparent; top: 0; left: 2vw; z-index: 10; }
#customBox .bottomBox .triangle-2 { border-width: 12vw 12vw 0 12vw; left: 56vw; border-color: #012b42 transparent transparent transparent; }
#customBox .bottomBox .triangle-3 { border-width: 8vw 8vw 0 8vw; left: 80vw; }
#customBox .bottomBox .triangle-4 { border-width: 0 8vw 8vw 0; border-color: transparent #ed8b00 transparent transparent; top: 11vw; left: 8vw; z-index: 11; }
#customBox .bottomBox .triangle-5 { border-width: 0 23vw 23vw 23vw; border-color: transparent transparent #012b42 transparent; top: auto; bottom: 50px; left: -3vw; }
#customBox .bottomBox .triangle-6 { border-width: 0 6vw 6vw 6vw; border-color: transparent transparent #ed8b00 transparent; top: auto; bottom: 50px; left: 32vw; z-index: 12; }
#customBox .bottomBox .img { position: absolute; width: 70vw; bottom: 50px; left: 3vw; z-index: 11; }

/* contBox */
#contBox { position: fixed; width: 100%; background: #fff; border-top: 2px #0a1016 solid; text-align: center; bottom: 0; left: 0; z-index: 11; }
#contBox a { margin: 5px 10px; display: inline-block; }
#contBox a font { display: inline-block; font-weight: bold; font-size: 22px; color: #0e4174;  }
#contBox a font.circle { margin-right: 10px; width: 40px; height: 40px; background: #0f2b48; border-radius: 50%; }
#contBox a font.circle span { margin: calc((100% - 1px) / 2) auto 0; width: 20px; height: 1px; background: #fff; display: block; opacity: 1; }
#contBox a font.circle span:last-child { margin: -10px auto 0; width: 1px; height: 20px; }
#contBox a:hover font.circle span:last-child { opacity: 0; }

/* product */
#product { position: fixed; width: 100%; height: 100vh; background: no-repeat 50% / cover; top: 0; left: 0; }
#product:before { position: fixed; width: 100%; height: 100vh; background: rgba(0, 10, 15, .55); display: block; top: 0; left: 0; z-index: 1; content: ""; }
#product >div { line-height: 100vh; z-index: 2; }
#product .box { width: 100%; display: inline-block; }
#product .box h2.title { color: #c9e5f3; }
#product .box .pro-list .info { padding: 0 15px; }
#product .box .pro-list .info h3 a { margin: 20px 0; height: 30px; text-align: center; font-size: 18px; color: #e5e5e5; -webkit-line-clamp: 1; }
#product .box .pro-list .info p.price { min-height: 30px; text-align: center; }
#product .box .pro-list .info p.price span { margin: 0 10px; display: inline-block; font-size: 16px; color: #FF9800; vertical-align: middle; }
#product .box .pro-list .info p.price span.old { text-decoration: line-through; font-size: 12px; color: #c4c4c4; }

/* fixBox */
#fixBox { width: 100%; height: 105vw; }

.wrap { position: relative; background: #fff; box-shadow: 0 0 10px #151515; }

/* NewsBox */
#NewsBox { position: relative; overflow: hidden; }
#NewsBox:before { position: absolute; width: 0; height: 100%; background: rgba(156, 156, 156, .5); border-style: solid; border-width: 20vw 0 0 100vw; border-color: transparent transparent #ed8b05 #ed8b05; display: inline-block; content: ""; top: 0; left: 0; transform: rotate(3.14159rad);
}
#NewsBox .workframe { z-index: 3; }
#NewsBox h2.title { position: absolute; top: 5vw; left: 60%; color: #fff; }
#NewsBox ul li .newImg { float: left; width: 40%; }
#NewsBox ul li .newImg a.photo img { width: 100%; }
#NewsBox ul li .info { margin: 11vw 0 0 20%; float: left; width: 40%; }
#NewsBox ul li .info h3 a { margin: 20px 0; height: 36px; font-size: 24px; color: #fff; font-weight: 400; -webkit-line-clamp: 1; }
#NewsBox ul li .info article { margin: 20px 0; height: 81px; font-size: 16px; color: #fff; -webkit-line-clamp: 3; }
#NewsBox ul li .info p { margin-top: 60px; padding-top: 20px; border-top: 1px #e87c07 solid; color: #fff; }
#NewsBox ul li .info p a { margin-left: 10px; color: #fff; }
#NewsBox:after { position: absolute; border-style: solid; border-width: 19vw 16vw 0 16vw; border-color: #f09315 transparent transparent transparent; content: ""; top: 0; left: 40vw; }

/* bookBox */
#bookBox { position: relative; overflow: hidden; padding-top: 45px; }
#bookBox:before ,
#bookBox:after { position: absolute; width: 100%; height: 100%; background: rgba(156, 156, 156, .5); display: block; top: 0; left: 0; content: ""; }
#bookBox a.photo { margin: 0 10px; }
#bookBox ul li h3 a { margin: 10px; height: 36px; font-size: 18px; font-weight: 400; color: #000; -webkit-line-clamp: 1; }
#bookBox:after { width: 20vw; height: 1px; background: #d6d6d6; }

/* contactBox */
#contactBox { padding-top: 45px; }
#contactBox #form1 { font-size: 0; }
#contactBox #form1 >div { position: relative; margin: 15px; width: calc((100% / 3) - 30px); display: inline-block; }
#contactBox #form1 >div label { position: absolute; height: 50px; line-height: 50px; font-size: 14px; color: #ed8b00; }
#contactBox #form1 >div input { padding-left: 60px; width: 100%; height: 50px; border-bottom: 2px solid #002f49; box-sizing: border-box; color: #091f2a; font-weight: 500; font-size: 30px; }
#contactBox #form1 >div img { position: absolute; right: 0; top: 15px; }
#contactBox #form1 .send { margin: 40px 0; width: 100%; text-align: center; }

@media screen and (max-width: 1440px) {
	#aboutBox { margin-left: -48vw; padding: 0 0 0 48vw; }
	#NewsBox h2.title { top: 3vw; left: 50%; }
	#NewsBox ul li .info { margin: 11vw 0 0 10%; width: 50%; }
	#NewsBox ul li .info article { height: 51px; -webkit-line-clamp: 2; }
}
@media screen and (min-width: 1281px) {
	#aboutBox .picture .btn a:hover span { border-color: transparent #fff transparent transparent; }
	#aboutBox .picture .btn a#nextBtn:hover span { border-color: transparent transparent transparent #fff; }
}
@media screen and (max-width: 1280px) {
	#aboutBox { margin-left: -58vw; }
	#aboutBox .picture { width: 50vw; }
	#contactBox #form1 >div { width: calc(50% - 30px); }
}
@media screen and (max-width: 1024px) {
	#page-scroll { display: none; }
	#page-wrap { position: relative; white-space: inherit; }
	#page-wrap .row { height: auto; display: block; }
	#aboutBox { margin-left: 0; margin-top: -43vw; padding: 25vw 0 0; background: url(/images/32/img-aboutMobileBg.png) no-repeat 0 0 / 100% auto; }
	#aboutBox .info { margin: 0 auto 55px; float: none; width: 90%; }
	#aboutBox .info .box >* { position: relative; z-index: 2; }
	#aboutBox .info .box:after { border-width: 148px 0 0 148px; z-index: 1; }
	#aboutBox .picture { float: none; width: 100%; }
	#aboutBox .picture .list { height: auto; }
	#aboutBox .picture .list >div { padding: calc(60vh - 104px) 15% 40vh; width: 70%; }
	#aboutBox .picture .slick-slider { margin-bottom: 0; }
	#aboutBox .picture .btn { top: auto; bottom: 7vh; left: calc((100% - 130px) / 2); }
	#aboutBox [class^="triangle-"] { display: none; }
	#customBox .bottomBox .triangle-5 { border-width: 0 37vw 37vw 37vw; bottom: 0; }
	#customBox .bottomBox .triangle-6 { border-width: 0 16vw 16vw 16vw; bottom: 0; }
	#customBox .bottomBox .img { width: 100vw; bottom: 0; }
	#customBox .box:last-child { margin-left: 10%; width: 40%; }
	#product .box h2.title { margin-top: 10vh; }
	#fixBox { height: 100vh; }
}
@media screen and (max-width: 980px) {
	#customBox { padding: 20vh 0; }
	#customBox >div { text-align: center; line-height: 170%; }
	#customBox .box { width: 90%; }
	#customBox .box:last-child { margin-left: 0; width: 90%; }
	#customBox .bottomBox .triangle-4 { left: -1vw; }
	#NewsBox h2.title { position: relative; top: auto; left: auto; }
	#NewsBox ul li .info { margin: 0 0 0 10%; }
}
@media screen and (max-width: 768px) {
	#aboutBox .picture .list >div { padding: calc(35vh - 104px) 15% 20vh; }
	#customBox .box { width: 100%; }
	#NewsBox ul li .newImg { float: none; margin: auto; }
	#NewsBox ul li .info { float: none; margin: 10px auto; width: 90%; }
	#NewsBox ul li .info h3 a { text-align: center; }
	#NewsBox ul li .info p { text-align: right; }
	#contactBox #form1 >div { width: calc(100% - 30px); }
}
@media screen and (max-width: 640px) {
	#NewsBox ul li .newImg { width: 70vw; height: 70vw; }
}