*{
	margin: 0;
	padding: 0;
}
body{
	/* min-width: 1200px; */
}

li{
	list-style: none;
}

.title{
	width: 100%;
	/* height:630px; */
	background: url(../images/title_back.png)no-repeat 100% 100%;
	overflow: hidden;
}

.title1{
	width: 1200px;
	height: 100%;
	margin: auto;
	position: relative;
}

.title1>img{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}

.title1>.title_left{
	left: -100%;
	cursor: pointer;
	animation: bannerL 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

.title1>.title_right{
	right: -100%;
	animation: bannerR 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

@keyframes bannerL{
	from{
		left: -100%;
	}
	to{
		left: 0%;
	}
}

@keyframes bannerR{
	from{
		right: -100%;
	}
	to{
		right: 0%;
	}
}



.fast_title{
	text-align: center;
	position: relative;
}

.fast_title>h4{
	font-size:40px;
	font-family:Microsoft YaHei;
	color:rgba(30,35,48,1);
	line-height:36px;
	margin-bottom: 36px;
	position: absolute;
	left: 0;
	margin-top: 0;
	right: 0;
	margin: auto;
}

.fast_title>div{
	position: absolute;
	left: 0;
	top: 0px;
	right: 0;
	margin:71px auto 0;
}

.fast_app_title{
	height: 125px;
}

.animationEffects>h4{
	margin-top: 46px;
	animation: animationEffectsTitle1 1.2s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

.animationEffects>div{
	margin-top: 46px;
	animation: animationEffectsTitle2 0.5s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

@keyframes animationEffectsTitle1{
	0% {
		margin-top: -50%;
	}
	
	70% {
		margin-top:2%;
	}
	
	80% {
		margin-top:-2%;
	}
	
	100% {
		margin-top:0%;
	}
}

@keyframes animationEffectsTitle2{
	0% {
		margin-top: -50%;
	}
	
	100% {
		margin-top:71px;
	}
}

.fast_title>div>p{
	font-size:16px;
	font-family:Microsoft YaHei;
	color:rgba(106,106,111,1);
	line-height:30px;
}

.fast_app{
	padding-top: 102px;
	overflow: hidden;
	padding-bottom: 73px;
}

.fast_app_value{
	width: 1200px;
	height:394px;
	overflow: hidden;
	margin:80px auto 0px;
}

.fast_app_value_left{
	float: left;
	width:313px;
	height:394px;
}

.fast_app_value_left>img{
	vertical-align: top;
	height: 100%;
}

.fast_app_value_right{
	float: right;
	width: 885px;
	height:394px;
	overflow: hidden;
}

.fast_electricity{
	height: 95px;
}

@keyframes fastAppValueRight{
	35% {
		transform: rotateY(-40deg);
	}
	
	65% {
		transform: rotateY(40deg);
	}
	
	100% {
		transform: rotateY(0deg);
	}
}

.fast_app_value_right>li{
	width:440px;
	height:197px;
	list-style: none;
	border-top:1px solid rgba(229,229,229,1);
	border-bottom:1px solid rgba(229,229,229,1);
	border-right:1px solid rgba(229,229,229,1);
	float: left;
}

.fast_app_val{
	margin-top: 48px;
	margin-left: 42px;
}

.fast_app_val>h6{
	font-size:24px;
	font-family:Microsoft YaHei;
	color:rgba(30,35,48,1);
	line-height:24px;
	margin-bottom: 18px;
}

.fast_app_val>p{
	font-size:16px;
	font-family:Microsoft YaHei;
	font-weight:400;
	color:rgba(103,107,110,1);
	line-height:30px;
	width: 372px;
}

.fast_app_value_right>li:hover>.fast_app_val>h6{
	color:rgba(0,103,237,1);
}

.electricity{
	overflow: hidden;
	background:rgba(251,251,251,1);
	padding-top: 80px;
}

.electricity_ul{
	width: 1200px;
	height:316px;
	margin:auto;
	padding-top: 80px;
	padding-bottom: 94px;
	overflow: hidden;
}

.electricity_li{
	width:285px;
	height:316px;
	background:rgba(240,244,251,1);
	float: left;
	text-align: center;
	margin-right: 20px;
	margin-top: -50%;
}

.electricity_li2{background:rgba(246,243,251,1);}
.electricity_li3{background:rgba(251,246,240,1);}
.electricity_li4{background:rgba(239,250,245,1);}

.electricity_li:nth-child(4){
	margin-right: 0;
}

.electricity_li:hover{
	box-shadow:0px 9px 21px 0px rgba(186,186,186,0.33);
}

.electricity_li_img{
	margin:54px auto 0;
	height: 72px;
}

.electricity_li_img>img{
	height: 100%;
}

.electricity_li>h6{
	font-size:20px;
	font-family:Microsoft YaHei;
	color:rgba(30,35,48,1);
	line-height:36px;
	margin-top: 40px;
	margin-bottom: 16px;
}

.electricity_li>p{
	font-size:14px;
	font-family:Microsoft YaHei;
	font-weight:400;
	color:rgba(60,60,60,1);
	line-height:25px;
}

.product{
	padding-top: 79px;
}

.product_div_ul{
	width: 100%;
	min-width: 1200px;
	overflow: hidden;
	margin:79px auto 0;
}

.product_ul{
	width: 100%;
	overflow: hidden;
	min-width: 1200px;
}

@keyframes productUl{
	0%{
		transform: scale(1);
		-ms-transform: scale(1); /* IE 9 */
		-webkit-transform: scale(1); /* Safari and Chrome */
	}
	50%{
		transform: scale(1.2);
		-ms-transform: scale(1.2); /* IE 9 */
		-webkit-transform: scale(1.2); /* Safari and Chrome */
	}
	100%{
		transform: scale(1);
		-ms-transform: scale(1); /* IE 9 */
		-webkit-transform: scale(1); /* Safari and Chrome */
	}
}

.product_li{
	float: left;
	width:25%;
	height: 250px;
	position: relative;
	overflow: hidden;
}

.product_li>img{
	width: 100%;
	height: 100%;
	background-color: aqua;
	border: 0;
	transition: all 0.6s;
}

.product_li:hover>img{
	transform: scale(1.1);
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari and Chrome */
}

.product_li_div{
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
	z-index: 10;
	display: none;
	animation: productLiDiv 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

.product_li_div>div{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	text-align: center;
	height: 74px;
	cursor: pointer;
}

.product_li_div>div>p{
	font-size: 22px;
	color: #FFFFFF;
	line-height: 45px;
}

.product_li_div>div>a{
	font-size: 18px;
	color: azure;
	text-decoration: none;
	margin-top: 6px;
	    display: block;
}

.product_li_div>div>a:hover{
	text-decoration: underline;
}

.product_li:hover>.product_li_div{
	display: block;
}

@keyframes productLiDiv{
	from{opacity: 0;}
	to{opacity: 1;}
}

.marketing{
	padding-top: 79px;
}

.marketing_ul{
	width: 1200px;
	margin:auto;
	padding-top: 82px;
	padding-bottom: 60px;
	height: 672px;
}

.marketing_li{
	float: left;
	width: 400px;
	height: 87px;
	margin-bottom: 61px;
	position: relative;
	padding-top: 20px;
}

.marketing_li_left{
	float: left;
	height: 87px;
	padding-left: 30px;
	background: #fff;
	z-index: 10;
	position: relative;
}

.marketing_li_left>img{
	height: 100%;
}

.marketing_li_right{
	margin-left: 41%;
	float: left;
	margin-top: 15px;
	position: absolute;
	top: 0;
}

@keyframes marketingLiRight{
	0%{
		margin-left: -50%;
	}
	
	to{
		margin-left: 41%;
	}
}

.marketing_li_right>h6{
	font-size:18px;
	font-family:Microsoft YaHei;
	color:rgba(34,34,34,1);
	margin-bottom: 10px;
}

.marketing_li_right>p{
	font-size:13px;
	font-family:Microsoft YaHei;
	color:rgba(34,34,34,1);
}

.pay{
	padding-top: 80px;
	background:rgba(236,245,254,1);
	overflow: hidden;
}

.pay_ul{
	overflow: hidden;
	width: 980px;
	margin: 48px auto 0;
}

.pay_li{
	float: left;
	width: 110px;
	height: 212px;
	margin-right: 180px;
}

.pay_li>img{
	width: 100%;
	vertical-align: top;
}

.pay_li>p{
	font-size:16px;
	font-family:Microsoft YaHei;
	color:rgba(30,35,48,1);
	line-height:30px;
	text-align: center;
}

.pay_li:nth-child(4n){
	margin-right: 0px;
}

.pay_button{
	width:212px;
	height:52px;
	border: 1px solid #003F82;
	border-radius:4px;
	display: block;
	margin:0px auto 87px;
	font-size:18px;
	font-family:Microsoft YaHei;
	line-height: 54px;
	outline: none;
	cursor: pointer;
	
	background:transparent;
	color:#003F82;
}

.pay_button:hover{
	background:#003F82;
	color:rgba(255,255,255,1);
}

.fast{
	overflow: hidden;
}

.fast_product{
	height: 95px;
}

@keyframes electricityUlLi1{
	from{margin-top: -50%;}
	to{margin-top: 0%;}
}

.fast_marketing{
	height: 95px;
	
}

.marketing_li_div{
	position: absolute;
	width: 345px;
	height: 100%;
	top: 0;
	left: 0;
}

.marketing_li_div:hover{
	width: 345px;
	height: 120px;
	background: rgba(255,255,255,1);
	box-shadow: 0px 0px 21px 0px rgba(186,186,186,0.33);
	padding-top: 20px;
	top: -20px;
}

.marketing_li_div:hover>.marketing_li_right{
	top: 20px;
}

.fast_pay{
	height: 125px;
}

.pay_button>div{
	width: 72px;
	height: 24px;
	overflow: hidden;
	margin: auto;
	line-height: 24px;
}

.pay_button>div>span{
	display: block;
}

.pay_button>div>span:nth-child(2){
	display: none;
	margin-top: 50px;
}
.pay_button:hover>div>span:nth-child(1){
	animation: payButtonDiv1 0.4s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

.pay_button:hover>div>span:nth-child(2){
	animation: payButtonDiv2 0.4s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	display: block;
}

@keyframes payButtonDiv1{
	from{margin-top: 0px;}
	to{margin-top: -40px;}
}

@keyframes payButtonDiv2{
	from{margin-top: 50px;}
	to{margin-top: 16px;}
}