/* CSS Document */
/*     
===============================================
    动画库  
  定义动画区块(animateBox)  动画展示(animateShow)
  
===============================================
*/
.animateBox {
	opacity: 0;
}
.animateShow {
	opacity: 1;
	transition: 1s;
}
/* END RESET CSS */
.t5o {
	-webkit-transition: all .5s ease .1s;
	-moz-transition: all .5s ease .1s;
	-o-transition: all .5s ease .1s;
	transition: all .5s ease .1s;
}
.t8o {
	-webkit-transition: all .8s ease .1s;
	-moz-transition: all .8s ease .1s;
	-o-transition: all .8s ease .1s;
	transition: all .8s ease .1s;
}
.t20o {
	-webkit-transition: all 20s ease .1s;
	-moz-transition: all 20s ease .1s;
	-o-transition: all 20s ease .1s;
	transition: all 20s ease .1s;
}
.t3out {
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}
/*     
============================
  以下参数根据页面自定义修改     
============================
*/
.gotop {
	position: absolute;
	top: 0;
	right: 0;
	width: 72px;
	height: 45px;
	background: url(../images/gotop.png) no-repeat;
	text-align: center;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.gotop i {
	width: 9px;
	height: 6px;
	background: url(../images/arrow.png) no-repeat;
	display: inline-block;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.gotop:hover {
	-webkit-transform: translateY(-0.5px);
	transform: translateY(-0.5px);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	opacity: 0.9;
}
.upmove {
	transform: translate(0, 80px);
	-ms-transform: translate(0, 80px);
	-webkit-transform: translate(0, 80px);
	-o-transform: translate(0, 80px);
	-moz-transform: translate(0, 80px);
	opacity: 0;
}
.wobble-vertical {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active {
  -webkit-animation-name: wobble-vertical;
  animation-name: wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
/*电气通页面*/

.payway-inner.animateBox {
	position: relative;
	top: 30px;
	overflow: hidden;
}
.payway-inner.animateShow {
	opacity: 1;
	top: 0;
	transition: 840ms;
}
.debitcar-pay.animateBox {
	transform: translateX(-600px);
	-webkit-transform: translateX(-600px);
	-moz-transform: translateX(-600px);
}
.debitcar-pay.animateShow {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transition: 1s .3s;
}
.box-sol-dqt.animateBox {
	transform: translateX(600px);
	-webkit-transform: translateX(600px);
	-moz-transform: translateX(600px);
}
.box-sol-dqt.animateShow {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transition: 1s;
}
/*     
============================
    营销推广
============================
*/
.market-adv-box .circle-block.animateBox {
	transform: translateX(-600px);
	-webkit-transform: translateX(-600px);
	-moz-transform: translateX(-600px);
}
.market-adv-box .circle-block.animateShow {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
}
.market-adv-box .circle-block.animateShow.delay1 {
	transition: 1s 200ms;
}
.market-adv-box .circle-block.animateShow.delay2 {
	transition: 1s 400ms;
}
.market-adv-box .circle-block.animateShow.delay3 {
	transition: 1s 600ms;
}
.market-adv-box .circle-block.animateShow.delay4 {
	transition: 1s 800ms;
}
/*详细介绍*/
#con-jbtm.animateBox, #gold-bootn.animateBox {
	transform: translateX(-50px);
	-webkit-transform: translateX(-50px);
	-moz-transform: translateX(-50px);
}
#search-rank.animateBox, #hot-recom.animateBox {
	transform: translateX(50px);
	-webkit-transform: translateX(50px);
	-moz-transform: translateX(50px);
}
#con-jbtm.animateShow, #search-rank.animateShow, #gold-bootn.animateShow, #hot-recom.animateShow {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
}
/*     
============================
     关键词服务
============================
*/
.flow-con .con-squre.animateBox {
	transform: translateX(-22px);
	-webkit-transform: translateX(-22px);
	-moz-transform: translateX(-22px);
}
.flow-con .con-squre.animateShow {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
}
.flow-con .con-squre.animateShow.delay1 {
	transition: 1s 200ms;
}
.flow-con .con-squre.animateShow.delay2 {
	transition: 1s 400ms;
}
.flow-con .con-squre.animateShow.delay3 {
	transition: 1s 600ms;
}
.flow-con .con-squre.animateShow.delay4 {
	transition: 1s 800ms;
}
.flow-con .con-squre.animateShow.delay5 {
	transition: 1s 1s;
}
.flow-con .con-squre.animateShow.delay6 {
	transition: 1s 1.2s;
}




/*     
======================================
   动画库
======================================
*/

@keyframes icoAnimate {
 0% {
transform: rotate(0deg);
}
 20% {
transform: rotate(15deg);
}
 50% {
transform: rotate(-15deg);
}
 80% {
transform: rotate(15deg);
}
 100% {
transform: rotate(0deg);
}
}
 @-webkit-keyframes icoAnimate {
 0% {
-webkit-transform: rotate(0deg);
}
 20% {
-webkit-transform: rotate(15deg);
}
 50% {
-webkit-transform: rotate(-15deg);
}
 80% {
-webkit-transform: rotate(15deg);
}
 100% {
-webkit-transform: rotate(0deg);
}
}
 @-moz-keyframes icoAnimate {
 0% {
-moz-transform: rotate(0deg);
}
 20% {
-moz-transform: rotate(15deg);
}
 50% {
-moz-transform: rotate(-15deg);
}
 80% {
-moz-transform: rotate(15deg);
}
 100% {
-moz-transform: rotate(0deg);
}
}

/* Wobble Vertical */
@-webkit-keyframes wobble-vertical {
 16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
 33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
 49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
 66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
 83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
 @keyframes wobble-vertical {
 16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
 33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
 49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
 66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
 83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
 @keyframes myS {
 0% {
transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
}
 50% {
transform: translate(0, 0);
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-o-transform: translate(0, 0);
-moz-transform: translate(0, 0);
}
 100% {
transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
}
}
 @-moz-keyframes myS /* Firefox */ {
 0% {
transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
}
 50% {
transform: translate(0, 0);
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-o-transform: translate(0, 0);
-moz-transform: translate(0, 0);
}
 100% {
transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
}
}
 @-webkit-keyframes myS /* Safari 和 Chrome */ {
 0% {
transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
}
 50% {
transform: translate(0, 0);
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-o-transform: translate(0, 0);
-moz-transform: translate(0, 0);
}
 100% {
transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
}
}
 @-o-keyframes myS /* Opera */ {
0%; {
transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
}
50% {
transform: translate(0, 0);
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-o-transform: translate(0, 0);
-moz-transform: translate(0, 0);
}
100% {
transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
}
}
 @keyframes myfirst {
 0% {
transform: translate(0, -42px);
-ms-transform: translate(0, -42px);
-webkit-transform: translate(0, -42px);
-o-transform: translate(0, -42px);
-moz-transform: translate(0, -42px);
}
 100% {
transform: translate(0, 42px));
-ms-transform: translate(0, 42px);
-webkit-transform: translate(0, 42px);
-o-transform: translate(0, 42px);
-moz-transform: translate(0, 42px);
}
}
 @-moz-keyframes myfirst /* Firefox */ {
 0% {
transform: translate(0, -42px);
-ms-transform: translate(0, -42px);
-webkit-transform: translate(0, -42px);
-o-transform: translate(0, -42px);
-moz-transform: translate(0, -42px);
}
 100% {
transform: translate(0, 42px));
-ms-transform: translate(0, 42px);
-webkit-transform: translate(0, 42px);
-o-transform: translate(0, 42px);
-moz-transform: translate(0, 42px);
}
}
 @-webkit-keyframes myfirst /* Safari 和 Chrome */ {
 0% {
transform: translate(0, -42px);
-ms-transform: translate(0, -42px);
-webkit-transform: translate(0, -42px);
-o-transform: translate(0, -42px);
-moz-transform: translate(0, -42px);
}
 100% {
transform: translate(0, 42px));
-ms-transform: translate(0, 42px);
-webkit-transform: translate(0, 42px);
-o-transform: translate(0, 42px);
-moz-transform: translate(0, 42px);
}
}
 @-o-keyframes myfirst /* Opera */ {
0%; {
transform: translate(0, -42px);
-ms-transform: translate(0, -42px);
-webkit-transform: translate(0, -42px);
-o-transform: translate(0, -42px);
-moz-transform: translate(0, -42px);
}
100% {
transform: translate(0, 42px));
-ms-transform: translate(0, 42px);
-webkit-transform: translate(0, 42px);
-o-transform: translate(0, 42px);
-moz-transform: translate(0, 42px);
}
}