/* banner start */
#banner{
	width: 100%;
	height: 200px;
	background-image: url(../images/productsSolutions/banner.jpg);
	background-size: 1220px;
	background-position: 0 236px;
	color: #FFF;
	font-weight: 100;
	overflow: hidden;
	background-color: #316adb;
	background-repeat: no-repeat;
	animation-name: bannerByTopToCenter;
	animation-duration: 2s;
	animation-fill-mode: both;
}
#banner .title{
	font-size:30px;
	position:relative;
	top:-200px;
	opacity:0;
	text-align:center;
	animation-name: titleByTopToCenter;
	filter: blur(90px);
}
@keyframes titleByTopToCenter {
	0% {
	  opacity: 0;
	  top:-200px;
	  filter: blur(90px);
	}
  
	100% {
	  opacity: 1;
	  top:79px;
	  filter: blur(0px);
	}
}
@keyframes bannerByTopToCenter {
	0% {
		background-position: 0 236px;
	}
  
	100% {
		background-position: 0 -236px;
	}
  }
/* banner end */
/* applyFor start */
#applyFor{
	position:relative;
	width:100%;
	height:720px;
	overflow:hidden;
	background-color:#FFF;
}
#applyFor .bg{
	position: absolute;
	z-index:0;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow:hidden;
}
#applyFor .bg i{
	height:70px;
	background-color: #f2fbff;
	border-radius:70px;
	width:700px;
	position:absolute;
	animation-fill-mode: both;
	animation-duration: .3s;
}
#applyFor .bg i.l{
	transform: rotate(-45deg);
}
#applyFor .bg i.r{
	transform: rotate(-45deg);
}
#applyFor .bg .l._i_1{
	left: -577px;
	top: 604px;
	animation-name: l_i_1;
}
@keyframes l_i_1 {
	0% {
		left: -610px;
		top: 635px;
	}
  
	100% {
		left: -577px;
		top: 604px;
	}
}
#applyFor .bg .l._i_2{
	left: -450px;
	top: 630px;
	animation-delay:0.3s;
	animation-name: l_i_2;
}
@keyframes l_i_2 {
	0% {
		left: -650px;
		top: 910px;
	}
  
	100% {
		left: -450px;
		top: 630px;
	}
}
#applyFor .bg .l._i_3{
	left: -287px;
	top: 623px;
	animation-delay:0.6s;
	animation-name: l_i_3;
}
@keyframes l_i_3 {
	0% {
		left: -587px;
		top: 1274px;
	}
  
	100% {
		left: -287px;
		top: 623px;
	}
}
#applyFor .bg .l._i_4{
	left: -265px;
	top: 759px;
	animation-delay:0.8s;
	animation-name: l_i_4;
}
@keyframes l_i_4 {
	0% {
		left: -565px;
		top: 1618px;
	}
  
	100% {
		left: -265px;
		top: 759px;
	}
}
#applyFor .bg .l._i_5{
	left: -240px;
	top: 892px;
	animation-delay:1s;
	animation-name: l_i_5;
}
@keyframes l_i_5 {
	0% {
		left: -540px;
		top: 2007px;
	}
  
	100% {
		left: -240px;
		top: 892px;
	}
}
#applyFor .bg .r._i_1{
	right:-577px;
	top: 40px;
	animation-delay:1s;
	animation-name: r_i_1;
}
@keyframes r_i_1 {
	0% {
		right: -677px;
		top: -46px;
	}
  
	100% {
		right: -577px;
		top: 40px;
	}
}
#applyFor .bg .r._i_2{
	right: -450px;
	top: 19px;
	animation-delay:0.8s;
	animation-name: r_i_2;
}
@keyframes r_i_2 {
	0% {
		right: -650px;
		top: -193px;
	}
	100% {
		right: -450px;
		top: 19px;
	}
}
#applyFor .bg .r._i_3{
	right: -287px;
	top: 30px;
	animation-delay:0.6s;
	animation-name: r_i_3;
}
@keyframes r_i_3 {
	0% {
		right: -687px;
		top: -391px;
	}
	100% {
		right: -287px;
		top: 30px;
	}
}
#applyFor .bg .r._i_4{
	right: -265px;
	top: -102px;
	animation-delay:0.3s;
	animation-name: r_i_4;
}
@keyframes r_i_4 {
	0% {
		right: -465px;
		top: -291px;
	}
	100% {
		right: -265px;
		top: -102px;
	}
}
#applyFor .bg .r._i_5{
	right: -240px;
	top: -229px;
	animation-name: r_i_5;
}
@keyframes r_i_5 {
	0% {
		right: -340px;
		top: -491px;
	}
	100% {
		right: -240px;
		top: -229px;
	}
}
#applyFor .center-icon{
    overflow: hidden;
    margin: 60px auto 0;
	text-align: center;
	position: relative;
	z-index: 1;
}
#applyFor .center-icon img{
    width: 166px;
    margin: 0 auto;
    display: block;
}
#applyFor .center-icon i{
    font-size: 14px;
    display: block;
    margin: 0 auto;
}
#applyFor .dot{
	width:1100px;
	margin:75px auto 0;
	display:table;
	position: relative;
	z-index: 1;
}
#applyFor .dot .ceil{
	text-align:center;
	position:relative;
	overflow:hidden;
	width:270px;
	height:270px;
	margin: 0 auto;
}
#applyFor .dot .ceil .text{
	position: absolute;
	top: 65px;
	left: 0;
	right: 0;
}
#applyFor .dot .ceil .text p{
    font-size: 50px;
	line-height: 1;
	color:#0088ff;
    margin-top: 22px;
}
#applyFor .dot .ceil .text i{
    font-size: 16px;
	line-height: 26px;
	display: block;
	color: #666666;
	margin-top: 3px;
}
#applyFor .desc{
	color:#666;
	font-size:16px;
	line-height:25px;
	text-align:center;
	position:relative;
	z-index:1;
	margin-top:60px;
}
#applyFor .button{
	position:relative;
	z-index:1;
	width: 180px;
	height:40px;
	box-sizing:border-box;
	border:1px solid #3399ff;
	color:#3399ff;
	margin: 40px auto 0;
	border-radius:40px;
	line-height:40px;
	text-align:center;
	font-size:18px;
	cursor:pointer;
}
#applyFor .button:hover{
	/* background-color: #3399ff; */
	background-image: linear-gradient(160deg, #385aff 20%,#6b31ff 80%);
	color:#FFF;
}
#applyFor .button:active{
	background-image: linear-gradient(160deg, #385aff 50%,#6b31ff 90%);
}
/* applyFor end */
/* step start */
#step{
	position:relative;
	width:100%;
	height:720px;
	overflow:hidden;
	background-color:#FFF;
}
#step .bg{
	background-image: url(../images/productsSolutions/jz-pr-process-bg1.png);
	width: 1366px;
	height: 140px;
	background-size: 1366px auto;
	position: absolute;
	left: 50%;
	margin-left: -683px;
	margin-top: 50px;
}
#step .step_box{
	width: 1000px;
	margin:70px auto 0;
	overflow:hidden;
	text-align:Center;
}
#step .step_box .ceil{
	float:left;
	width: 20%;
}
#step .ceil .line{
	width: 0;
	height: 120px;
	border-left: 1px dashed #ffa319;
	margin: 0 auto 4px;
}
#step .ceil .strp{
	width: 60px;
	height: 60px;
	border: 2px dotted #ffa319;
	border-radius: 100%;
	text-align: center;
	line-height: 60px;
	color: #ffa319;
	font-size: 36px;
	margin: 0 auto;
}
#step .ceil .name{
	font-size: 20px;
	margin-top: 10px;
}
#step .ceil .desc{
	margin-top: 8px;
	font-size: 14px;
	font-weight: lighter;
}
#step .step_box .ceil.c1{
	margin-top:48px;
}
#step .step_box .ceil.c2{
	margin-top:91px;
}
#step .step_box .ceil.c3{
	margin-top:115px;
}
#step .step_box .ceil.c4{
	margin-top:80px;
}
#step .step_box .ceil.c5{
	margin-top:24px;
}
#step .step_box .ceil.c1 .line{
	height:190px;
}
#step .step_box .ceil.c2 .line{
	height:147px;
}
#step .step_box .ceil.c3 .line{
	height:123px;
}
#step .step_box .ceil.c4 .line{
	height:158px;
}
#step .step_box .ceil.c5 .line{
	height:214px;
}
/* step end */
/* flowStep start */
#flowStep{
	position:relative;
	width:100%;
	height:720px;
	overflow:hidden;
	background-color:#f5f7fa;
}
#flowStep .step_box{
	overflow:hidden;
	width: 1000px;
	margin: 80px auto 0;
}
#flowStep .step_box .ceil{
	width: 220px;
	float:left;
	margin:15px 15px;
	box-sizing:border-box;
	border:1px solid #e8f1ff;
	text-align: center;
	background-color: #fff;
	height:340px;
}
#flowStep .step_box .ceil .icon{
	height:150px;
	line-height:150px;
	color:#3399ff;
}
#flowStep .step_box .ceil .icon i{
	font-size:62px;
}
#flowStep .step_box .ceil:hover .icon{
	background-color:#3399ff;
}
#flowStep .step_box .ceil:hover{
	box-shadow:5px 4px 5px 0 #dbe4ee;
}
#flowStep .step_box .ceil:hover .icon{
	color:#FFF;
}
#flowStep .ceil .name{
	font-size: 20px;
	margin-top: 25px;
}
#flowStep .ceil .desc{
	margin-top: 13px;
	font-size: 14px;
	font-weight: lighter;
}
/* flowStep end */
/* drive start */
#drive{
	position:relative;
	width:100%;
	height:720px;
	overflow:hidden;
	background-color:#FFF;
}
#drive .bg{
	width: 410px;
	height: 410px;
	margin: 50px auto 0;
	overflow: hidden;
	position: relative;
}
#drive .bg svg{
	transform: rotate(-11deg);
	position: relative;
	left: 4px;
	top: 4px;
}
#drive .bg img{
	position: absolute;
	top:50%;
	width:100px;
	left:50%;
	margin-top:-18px;
	margin-left:-50px;
}
#drive .bg .dot{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 2;
}
#drive .bg .dot i{
	width:20px;
	height:20px;
	border:2px solid #FFF;
	border-radius:100%;
	box-sizing:border-box;
	position: absolute;
	background-color:#FFF;
}
#drive .bg .dot i.d_1{
	top: 6px;
	left: 136px;
	border-color:#7540fd;
}
#drive .bg .dot i.d_2{
	left: 285px;
	top: 21px;
	border-color:#6a5dfc;
}
#drive .bg .dot i.d_3{
	left: 380px;
	top: 137px;
	border-color:#798efa;
}
#drive .bg .dot i.d_4{
	left: 366px;
	top: 286px;
	border-color:#5c82f9;
}
#drive .bg .dot i.d_5{
	left: 249px;
	top: 382px;
	border-color:#6175fa;
}
#drive .bg .dot i.d_6{
	top: 367px;
	left: 101px;
	border-color:#6c58fc;
}
#drive .bg .dot i.d_7{
	left: 6px;
	top: 251px;
	border-color:#773dfd;
}
#drive .bg .dot i.d_8{
	top: 101px;
	left: 19px;
	border-color:#894afe;
}
#drive .text{
	width: 1000px;
	position: absolute;
	top: 240px;
	left: 50%;
	margin-left: -500px;
}
#drive .text i{
	font-weight:lighter;
	position: absolute;
}
#drive .text i.i_1{
	left: 278px;
	top: 0;
}
#drive .text i.i_2{
	left: 622px;
	top: 10px;
}
#drive .text i.i_3{
	left: 719px;
	top: 148px;
}
#drive .text i.i_4{
	left: 700px;
	top: 323px;
}
#drive .text i.i_5{
	left: 579px;
	top: 425px;
}
#drive .text i.i_6{
	top: 417px;
	left: 253px;
}
#drive .text i.i_7{
	top: 261px;
	left: 144px;
}
#drive .text i.i_8{
	top: 100px;
	left: 144px;
}
/* drive end */

/* controlCapacity start */
#controlCapacity{
	position:relative;
	width:100%;
	height:720px;
	overflow:hidden;
	background-color:#f5f7fa;
}
#controlCapacity ul{
	width:980px;
	margin:25px auto 0;
	overflow:hidden;
}
#controlCapacity li{
	width:470px;
	height:180px;
	border:1px solid #ececec;
	background-color:#FFF;
	margin:10px;
	float:left;
}
#controlCapacity li:hover{
	box-shadow: 2px 3px 7px 0 #dbe6f0;
}
#controlCapacity li i{
	font-size: 100px;
	line-height: 180px;
	margin-left: 60px;
	color: #39f;
}
#controlCapacity li  .t_box{
	width: 240px;
	float: right;
	margin-top: 40px;
}
#controlCapacity li .name{	
	font-size: 20px;
	color: #333;
}
#controlCapacity li .desc{
	font-size:14px;
	font-weight: lighter;
	color:#666;
	margin-top: 11px;
}
/* controlCapacity end */