.blueText { color: #1173c3;}
.pagination { position: absolute; z-index: 20; width: 100%; left: 0; bottom: 10px; text-align: center;}
.swiper-pagination-switch { display: inline-block; width: 12px; height: 12px; border-radius: 100%; background: #fff; margin: 0 5px; opacity: 0.7; cursor: pointer;}
.swiper-visible-switch { background: #aaa;}
.swiper-active-switch { background: #1173c3;}

.btn { display: inline-block; font-size: 18px; padding: 15px 50px; background: #fff; color: #267dca; cursor: pointer;}
.btn.btnA { background: #267dca; color: #fff;}
.btn.btnA:hover { color: #fff;}

.titleA { padding: 50px 0;}

.scene-1 {}
.scene-1 .content { position: relative;}
.scene-1 .bg { position: relative;}
.scene-1 .bg img { width: 100%; vertical-align: top;}

.scene-1 .list { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%;}
.scene-1 .list .point { position: absolute; z-index: 3; width: 3.253796%; height: 6.666667%; background: url(../img/point.png) no-repeat;
	background-size: 100%; cursor: pointer; animation: fadeBigSmall 1s ease infinite alternate; -webkit-animation: fadeBigSmall 1s ease infinite alternate;}
.scene-1 .list .point-1 { top: 38.3%; left: 29%;}
.scene-1 .list .point-2 { top: 49.5%; left: 53.5%;}
.scene-1 .list .point-3 { top: 58%; left: 26.5%;}
.scene-1 .list .item { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat; background-size: 100%; opacity: 0; transition: all .6s ease; -webkit-transition: all .6s ease;}
.scene-1 .list .item.active { opacity: 1;}
.scene-1 .list .item-1 { background-image: url(../img/circle-1.png);}
.scene-1 .list .item-2 { background-image: url(../img/circle-2.png);}
.scene-1 .list .item-3 { background-image: url(../img/circle-3.png);}

.scene-3 { position: relative;}
.scene-3 .titleB { position: relative; z-index: 1; text-align: center; margin-bottom: 2%;}
.scene-3 .content { position: relative; background-color: #0d0d0d; overflow: hidden;}
.scene-3 .content img { width: 60%; vertical-align: top;}
.scene-3 .content .describe { top: 40%; left: 70%;}


.scene-3 .content.center img { width: 100%;}
.scene-3 .content.center .describe { top: 7%;}
.scene-3 .content.left img { position: relative; left: 40%;}


.scene-4 .content.right .describe { left: 50%; width: 39%;}

.scene-5 { position: relative;}
.scene-5 .content.swiper-1 img { width: 100%;}
.scene-5 .content.swiper-1 .describe { top: 18%; left: 57%; z-index: 10;}
.scene-5 .content.swiper-1 a { width: 62px; height: 62px; top: 65%;}
.scene-5 .content.swiper-1 a.arrow-left { left: 57%; background: url(../img/ico-left.png) no-repeat; background-size: 100%;}
.scene-5 .content.swiper-1 a.arrow-right { left: 62%; background: url(../img/ico-right.png) no-repeat; background-size: 100%;}


.scene-5 .content.swiper-1 .describe { width: 33%;}


.scene-6 .content.center .describe { top: 10%;}


.scene-8 .content.left .describe { width: 45%;}

.whiteText { color: #fff;}
.blackText { color: #000;}
.textCenter { text-align: center;}

.container { position: relative;}
.container .tabbar { position: absolute; z-index: 3; top: 6%; right: 10%; font-size: 0;}
.container .tabbar .item { display: inline-block; width: 170px; height: 60px; line-height: 60px; text-align: center;
	 font-size: 20px; color: #fff; background: #1e7bcd; cursor: pointer; transition: all .3s ease; -webkit-transition: all .3s ease;}
.container .tabbar .item.active { color: #1e7bcd; background: #fff;}


.container .content { position: relative;}

.content .describe { position: absolute; top: 30%;}
.content.center .describe { position: absolute; top: 27%; left: 36%; width: 28%; padding: 0 1%; box-sizing: border-box;}

.content.left .describe { position: absolute; left: 8%; width: 30%;}
.content.right .describe { right: 8%; width: 22%;}

.content .describe h5 { font-weight: normal; font-size: 42px;}
.content .describe h2 { font-weight: normal; font-size: 24px; line-height: 45px;}

.container .content img { width: 100%; vertical-align: top;}


.container .content .titleB { position: absolute; left: 5%;}
.container .content .titleB h5 { color: #fff;}
.container .content.img-cent { background-color: #000;}
.container .content.img-cent img { width: 70%;}
.container .content.img-cent h2 { color: #fff;}
.container .content.img-cent .describe { color: #fff; left: 75%;}
.container .content .describe.space { left: 6%;}
.container .content .describe.space .titleB { position: relative;}
.container .content .describe.space .titleB h5 { color: #000;}
.container .content .describe.left { left: 5%;}
.container .content.swiper-4 .describe { top: 18%; left: 5%; z-index: 10;}
.container .content.swiper-4 a { width: 62px; height: 62px; top: 55%;}
.container .content.swiper-4 a.arrow-left { left: 5%; background: url(../img/ico-left.png) no-repeat; background-size: 100%;}
.container .content.swiper-4 a.arrow-right { left: 10%; background: url(../img/ico-right.png) no-repeat; background-size: 100%;}
.container .list .item { display: inline-block; width: 100px; height: 60px; text-align: center;
	 font-size: 14px; color: #666; cursor: pointer; transition: all .3s ease; -webkit-transition: all .3s ease;}
.container .list .item.active { color: #000; }
.container .list .item span { display: block;}
.container .content .list .item i { display: inline-block; width: 40px; height: 40px; background: no-repeat;}
.container .content .list .item i.business { background-image: url(../img/ico-gray-business.png);}
.container .content .list .item.active i.business { background-image: url(../img/ico-business.png);}
.container .content .list .item i.home { background-image: url(../img/ico-gray-home.png);}
.container .content .list .item.active i.home { background-image: url(../img/ico-home.png);}
.container .content.swiper-5 .describe { top: 18%; left: 68%; z-index: 10;}
.container .content.swiper-5 a { width: 62px; height: 62px; top: 55%;}
.container .content.swiper-5 a.arrow-left { left: 68%; background: url(../img/ico-left.png) no-repeat; background-size: 100%;}
.container .content.swiper-5 a.arrow-right { left: 73%; background: url(../img/ico-right.png) no-repeat; background-size: 100%;}
.container .engine img { width: 100%;}

.manual { position: absolute;  bottom: 17%; width: 100%; text-align: center; font-size: 22px;}
.manual a { display: block; color: #fff; margin: 10px 0;}
.manual a:hover { text-decoration: underline;}


.subBanner { text-align: center; padding: 20px 0 0;}
.subBanner img { width: 42.5%; vertical-align: top;}
.subBanner .title { padding: 40px 0; border-bottom: 1px #b3b3b3 solid; background: #fff;}
.subBanner .title ul { padding: 0; margin: 0; font-size: 0; text-align: center;}
.subBanner .title li { list-style: none; display: inline-block; line-height: 30px; font-size: 20px; color: #707070;
	padding: 0 10px; margin: 0 25px; vertical-align: middle; transition: all .3s ease; -webkit-transition: all .3s ease;}
.subBanner .title li span { display: block; color: #707070; font-size: 18px;}
.subBanner .title li b { color: #333; font-size: 30px; font-weight: normal;}
.subBanner .title li b i { font-style: normal; color: #1e7bcd;}

@keyframes fadeBigSmall {
	0% { transform: scale(1); opacity: .6;}
	100% { transform: scale(1.1); opacity: 1;}
}
@-webkit-keyframes fadeBigSmall {
	0% { -webkit-transform: scale(1); opacity: .6;}
	100% { -webkit-transform: scale(1.1); opacity: 1;}
}
@keyframes fadeDown {
	0% { transform: translate(0, -10%);}
	100% { transform: translate(0, 0);}
}
@-webkit-keyframes fadeDown {
	0% { -webkit-transform: translate(0, -10%);}
	100% { -webkit-transform: translate(0, 0);}
}
@-webkit-keyframes animation1 {
	0% { background-image: url(../animation-1/1.png);}
	8% { background-image: url(../animation-1/2.png);}
	16% { background-image: url(../animation-1/3.png);}
	24% { background-image: url(../animation-1/4.png);}
	32% { background-image: url(../animation-1/5.png);}
	40% { background-image: url(../animation-1/6.png);}
	48% { background-image: url(../animation-1/7.png);}
	56% { background-image: url(../animation-1/8.png);}
	64% { background-image: url(../animation-1/9.png);}
	72% { background-image: url(../animation-1/10.png);}
	80% { background-image: url(../animation-1/11.png);}
	90% { background-image: url(../animation-1/12.png);}
	100% { background-image: url(../animation-1/13.png);}
}
@-webkit-keyframes animation2 {
	0% { background-image: url(../animation-2/1.png);}
	8% { background-image: url(../animation-2/2.png);}
	16% { background-image: url(../animation-2/3.png);}
	24% { background-image: url(../animation-2/4.png);}
	32% { background-image: url(../animation-2/5.png);}
	40% { background-image: url(../animation-2/6.png);}
	48% { background-image: url(../animation-2/7.png);}
	56% { background-image: url(../animation-2/8.png);}
	64% { background-image: url(../animation-2/9.png);}
	72% { background-image: url(../animation-2/10.png);}
	80% { background-image: url(../animation-2/11.png);}
	90% { background-image: url(../animation-2/12.png);}
	100% { background-image: url(../animation-2/13.png);}
}
@-webkit-keyframes animation3 {
	0% { background-image: url(../animation-3/1.png);}
	14% { background-image: url(../animation-3/2.png);}
	28% { background-image: url(../animation-3/3.png);}
	42% { background-image: url(../animation-3/4.png);}
	56% { background-image: url(../animation-3/5.png);}
	70% { background-image: url(../animation-3/6.png);}
	80% { background-image: url(../animation-3/7.png);}
	90% { background-image: url(../animation-3/8.png);}
	100% { background-image: url(../animation-3/9.png);}
}
@-webkit-keyframes animation4 {
	0% { background-image: url(../animation-4/1.jpg);}
	20% { background-image: url(../animation-4/2.jpg);}
	40% { background-image: url(../animation-4/3.jpg);}
	60% { background-image: url(../animation-4/4.jpg);}
	80% { background-image: url(../animation-4/5.jpg);}
	100% { background-image: url(../animation-4/1.jpg);}
}

@media (max-width: 1600px) {
	.titleA h5 { font-size: 38px;}
	.titleA h2 { font-size: 20px;}
	.titleB h5 { font-size: 38px; margin-bottom: 10px;}
	.titleB h2 { font-size: 14px;}
	.titleC { padding: 60px 0;}
	.titleC h5 { font-size: 45px;}
	
	.content .describe h5 { font-size: 32px;}
	.content .describe h2 { font-size: 18px; line-height: 35px;}

	.scene-2 .tabbar .item { width: 120px; height: 40px; line-height: 40px; font-size: 16px;}
	.scene-2 .colors { zoom: .7;}


	.navbarFixed .banner { margin-bottom: 50px;}
	.consume .content { height: 750px;}
	.consume .content .titleB h2 { font-size: 14px;}
	.consume .content .img { height: 820px; top: 17%;}
	.consume .content .list { position: absolute; top: 50%;}
	.consume .content .list .item { width: 200px; height: 100px; margin-bottom: 10px;}
	
	.productList .item { bottom: 10px; padding: 0 25px; line-height: 90px;}
	.productList .item.title { height: 50px; line-height: 50px;}
	.productList .item span { font-size: 16px;}
	.productList .item .arr { zoom: .8; bottom: 15px;}
	.productList .item .priceList { margin: 0 -25px;}
	.productList .item .priceList .price-item { padding: 0 25px; height: 60px; line-height: 60px; margin-bottom: 5px; font-size: 14px;}
	.productList .item .priceList .price-item li.tabbar span { font-size: 14px;}

	.scene-5 .content.swiper-1 a { width: 50px; height: 50px; top: 68%;}
	
}

@media (max-width: 1366px) {
	.pagination { bottom: 80px;}
    .navbarFixed .banner { margin-bottom: 50px;}
	.titleA { padding: 40px 0;}
	.titleA h5 { font-size: 35px; letter-spacing: 3px;}
	.titleA h2 { font-size: 16px; letter-spacing: 3px;}
	.titleB h5 { font-size: 24px; margin-bottom: 10px; letter-spacing: 2px;}
	.titleB h2 { font-size: 12px; letter-spacing: 2px;}
	.titleC { padding: 40px 0;}
	.titleC h5 { font-size: 35px; letter-spacing: 3px;}

	.content .describe h5 { font-size: 24px;}
	.content .describe h2 { font-size: 16px; line-height: 30px;}

	.scene-2 .tabbar .item { width: 100px; height: 30px; line-height: 30px; font-size: 14px;}
	.scene-2 .colors { zoom: .5;}


	.consume .content { height: 610px;}
	.consume .content .list { position: absolute; top: 53%;}
	.consume .content .list .item { width: 150px; height: 80px; margin-bottom: 20px;}
	.consume .content .list .item b { font-size: 24px;}
	.consume .content .list .item span { font-size: 12px;}

	.productList .item { bottom: 10px; padding: 0 15px; line-height: 70px;}
	.productList .item.title { height: 40px; line-height: 40px;}
	.productList .item span { width: 20%; font-size: 14px;}
	.productList .item span.tit { width: 30%;}
	.productList .item .arr { zoom: .5; bottom: 15px;}
	.productList .item .priceList { margin: 0 -15px; padding: 6px 0 25px;}
	.productList .item .priceList .price-item { padding: 0 15px; height: 40px; line-height: 40px; margin-bottom: 2px; font-size: 14px;}
	.productList .item .priceList .price-item li.tabbar span { width: 50px; height: 25px; line-height: 25px; font-size: 14px;}


	.container .content.swiper-4 a { width: 40px; height: 40px; top: 55%;}

	.scene-5 .content.swiper-1 a { width: 40px; height: 40px; top: 69%;}
	.scene-5 .content.swiper-1 a { width: 40px; height: 40px; top: 69%;}

	.productList .item .priceList .price-item li.tit { width: 17%;}

}
.navbarFixed .navbar{top:0;}