body{
	width: 100%;
	padding-top: 80px;
	font-size: 20px;
	overflow-x: hidden;
}
.box{
	position: relative;
}
.box-bg{
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
.box .pic-title{
	width: 163px;
}
.box1{
	padding: 160px 0;
	background: url(../img/box1-bg.png) no-repeat 50% 50%;
	background-size: cover;
}
.box h1 img.title{
	display: block;
	width:198px;
	margin-bottom:24px;
}
.box1 h1{
	font-size: 68px;
}
.box h1 span.color-blue{
	margin-left: 90px;
	position: relative;
}
.box h1 span.color-blue:before{
	content: "";
	position: absolute;
	width: 41px;
	height: 8px;
	border-radius: 40px;
	background:#858C9F;
	left: -66px;
	top:50%;
	margin-top: -4px;
}
.box1 h3{
	font-size: 18px;
	color: #fff;
	margin-top: 30px;
}
.box1 h2:first-of-type{
	margin-top: 100px;
}
.box1 h2{
	font-size: 30px;
	color: #fff;
	margin-bottom: 40px;
}
.box1 h2 b{
	display: inline-block;
	width: 25px;
}
.box1 h2 span{
	position: relative;
	color: #72D7E1;
	border: 1px solid #72D7E1;
	border-radius: 40px;
	padding: 12px 15px;
}
.box1 h2 span:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 55px;
	left: 14px;
	top: 12px;
	background:rgba(114,215,225,.18);
	border-radius: 40px;
}
.box1 .pic{
	position: absolute;
	width: 50%;
	top: 30px;
	right: 0;
}
.box2,.box9{
	padding: 115px 0 135px;
}
.box2 .pic1,.box4 .pic1,.box9 .pic1{
	padding-top: 10px;
	min-width:53%;
	max-width:53%;
}
.box2 .pic1 img,.box4 .pic1 img{
	box-shadow:42px 37px 0px 0px #f5f5f5;
}
.box9 .pic1 img{
	box-shadow:42px 37px 0px 0px #72D7E1;
}
.box2 .txt,.box4 .txt,.box9 .txt{
	margin-left: 60px;
}
.box2 .txt h1,.box4 .txt h1,.box9 .txt h1{
	font-size: 48px;
	color: #72D7E1;
	font-weight: bold;
}

.box2 .pic-title,.box4 .pic-title,.box9 .pic-title{
	margin-bottom: 71px;
}
.box2 .txt .content,.box4 .txt .content,.box9 .txt .content{
	margin-top: 30px;
	height: 320px;
	padding:31px 22px;
	border: 1px solid rgba(114,215,225,1);
	font-size: 20px;
	color: #666;
	position: relative;
}
.box2 .txt .content:before,.box4 .txt .content:before,.box9 .txt .content:before{
	content: "";
	position: absolute;
	width: 57px;
	height: 24px;
	background: #72D7E1;
	top: -24px;
	left: -1px;
}
.box4{
	padding-top: 115px;
}
.box4 .txt{
	margin:0 60px 0 0;
}
.box4 .txt .content{
	height: 270px;
}
.box9 .pic2{
	width: 40%;
	display: block;
}
.box9 .txt .content{
	height: 266px;
}
.box3 {
	padding: 189px 0 20px;
	background: url(../img/box3-bg.png) no-repeat;
	background-size: 100% 100%;
}
.box3 h1.title{
	font-size: 48px;
	color: #72D7E1;
	opacity: 0.4;
	font-weight:bold;
	margin-bottom: 30px;
}
.box3 h4{
	font-size: 36px;
	margin: 0 32px 0 95px;
}
.box3 p.color-w{
	opacity: 0.6;
}
.order-box{
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	margin-bottom: 22px;
}
.order-box li{
	min-width: 20%;
	max-width: 20%;
	padding: 38px 0 27px;
	border-bottom: 1px solid #3E4B67;
	cursor: pointer;
}
.order-box {
	font-size: 14px;
}
.order-box span{
	font-size: 58px;
	margin-right: 8px;
}
.order-box p.title{
	font-size: 26px;
	margin-bottom: 4px;
}
.order-box li.active{
	border-bottom-color:#72D7E1;
}
.swiper-slide{
	opacity: 0.4;
	transition: opacity ease 0.4s; 
}
.swiper-container{
	width: 120%;
	margin-left:-10%;
}
.swiper-slide-active{
	opacity: 1;
}
.overflower{
	width: 100%;
	overflow-x: hidden;
}
.swiper-button-next,.swiper-button-prev{
	width: 40px;
	height: 40px;
	background-size: contain;
}
.swiper-button-next{
	right: 32%;
	background: url(../img/box3-right.png) no-repeat;
}
.swiper-button-prev{
	left:32%;
	background: url(../img/box3-left.png) no-repeat;
}
.swiper-pagination-fraction{
	width: 7%;
	background: #FFFFFF;
	left: 50%;
	height: 40px;
	line-height: 40px;
	bottom: 1px;
	margin-left:8.5%;
}
.swiper-pagination-current{
	color: #72D7E1;
}
.swiper-pagination-total{
	color: #999;
}
.box5{
	padding-top: 120px;
}
.box5 h1.title,.box6 h1.title,.box11 h1.title{
	font-size: 48px;
	text-align: center;
	color: #72D7E1;
	font-weight: bold;
}
.box5 .pic1{
	width: 163px;
	height: 55px;
	display: block;
	margin: 44px auto 114px;
}
.goodlist img{
	display: block;
	margin: 37px auto;
	width: 56px;
}
.goodlist .bgcolor-f5{
	height: 260px;
	padding: 40px 32px 0;
}
.goodlist .bgcolor-f5 p{
	font-size: 18px;
	opacity: 0.8;
	text-align: left;
	line-height: 1.6;
}
.goodlist .bgcolor-f5 h5{
	margin-bottom: 25px;
	font-weight: bold;
}
.goodlist .txt{
	border: 1px solid #ebebeb;
}
.box5 .goodlist li:nth-of-type(even) .txt{
	border: 0;
	border-top: 1px solid #ebebeb;
}
.box5 .goodlist li:last-of-type .txt{
	border-top: 1px solid #ebebeb;
	border-right:1px solid #ebebeb;
}
.goodlist .num{
	font-size: 80px;
	color:#ccc;
	line-height: 131px;
}
.box6{
	border-top: 70px solid #fff;
	padding: 100px 0 0;
	background: #0E1F44;
}
.box6 .picbg{
	margin-top: 70px;
	position: relative;
}
.box6 .pic1{
	display: block;
	width: 91px;
	height: 55px;
	margin: 44px auto 60px;
}
.box6 .contain{
	position: absolute;
	left: 50%;
	top:60px;
	margin-left: -600px;
	z-index: 2;
}
.box6 h1.title{
	opacity: .4;
}
.box6 h5,.box7 h5{
	font-size: 28px;
}
.box6 h6,.box7 h6{
	opacity: .4;
	margin-top: 10px;
}
.box7{
	background: #0E1F44;
	padding-bottom: 80px;
}
.box7 .contain{
	position: absolute;
	left: 50%;
	top:60px;
	margin-left: -600px;
	z-index: 2;
}
.box7 .pic1{
	margin: 102px 0 0;
}
.box8{
	padding-bottom: 100px;
}
.box8 li{
	max-width: 25%;
}
.box8 li img{
	width: 60%;
	margin:160px 0 28px;
	transition: all ease .2s; 
}
.box8 li p{
	color: #999;
	margin-top: 8px;
}
.box8 li img:hover{
	transform: scale(1.1)
}
.box10{
	background: #0E1F44;
	padding-top: 98px;
}
.box10 h1.title{
	color: #72D7E1;
	opacity: .4;
	font-size: 48px;
	margin-bottom: 30px;
	font-weight: bold;
}
.box10 .pic1{
	width: 91px;
	height: 55px;
}
.box10 .download{
	margin: 104px 0 40px;
	width: 345px;
}
.box10 .download li{
	float: left;
	width: 44%;
	margin:0 6% 20px 0;
	height: 48px;
	line-height: 48px;
	text-align: center;
	background-repeat: no-repeat;
	background-color: #22489D;
	background-size: 42px 48px;
}
.box10 .download li:hover{
	transform: scale(1.1);
}
.box10 .download .iphone{
	background-image: url(../img/box10-icon01.png);
}
.box10 .download .android{
	background-image: url(../img/box10-icon02.png);
}
.box10 .download .wxapp{
	background-image: url(../img/box10-icon03.png);
}
.box10 .download .pc{
	background-image: url(../img/box10-icon04.png);
}
.box10 h4{
	font-size: 26px;
}
.box10 .pic2{
	width: 60%;
	margin: 26px 0 110px;
}
.box .pic3{
	width: 60%;
	position: absolute;
	right: 0;
	bottom: 3%;
}
.box11{
	padding-top: 130px;
}
.box11 h1.title{
	margin: 0 0 44px;
}
.box11 .pic1{
	width: 163px;
	height: 55px;
}
.box11 ul{
	margin: 120px 0 0;
}
.box11 ul li{
	width: 33%;
	float: left;
	height: 340px;
}
.box11 ul img{
	width: 66px;
	height: 66px;
}
.box11 ul h6{
	font-size: 26px;
	margin: 43px 0 29px;
}
.box11 ul p{
	color: #999;
	width: 64%;
	margin: 0 auto;
	text-align: left;
}
.footer {
	padding:20px 0 10px;
}
.footer .left{
	color: #999;
}
.footer .left p{
	margin-bottom: 20px;
}
.footer .right{
	font-size: 28px;
	margin-left: 80px;
}
.footer .right h5{
	position: relative;
	margin-bottom: 20px;
}
.footer .right h5:before{
	content: "";
	position: absolute;
	bottom: -12px;
	width: 113px;
	height: 1px;
	background: #333;
}
.footer .right p{
	color: #999;
}
.footer .right p a{
	color: #333;
	font-weight: bold;
}

@media only screen and (min-width: 1200px) {
	.contain{
		width:1200px;
	}
}
@media only screen and (max-width: 1199px) {
	.contain{
		margin: 0 30px;
	}
	.goodlist .bgcolor-f5{
		height: 340px;
	}
	.box6 .contain,.box7 .contain{
		width: 50%;
		margin: 40px 0 0;
		top:0;
		left: 25%;
	}
	.box6 .pic1{
		margin: 20px auto 30px;
	}
}