*{
  outline:none;font-family:"Microsoft Yahei";
  -webkit-tap-highlight-color:transparent;
  /**以下两行隐藏一些input控件本身样式及select箭头***/
  /*-webkit-appearance:none;
  -moz-appearance:none;*/
  /**以下3行解决webkit translation 闪烁问题**/
  -webkit-backface-visibility:hidden;
  -webkit-perspective:1000;
  -webkit-transform-style:preserve-3d;
}
body,html{padding:0; margin:0;width:100%;overflow:hidden;height:100%;background-color:#302e2f;}
.clearfix {*zoom:1}
.clearfix:before, .clearfix:after {content: ' '; display: table }
.clearfix:after {clear: both; }
a{text-decoration:none;}
ul,li{margin:0;padding:0;list-style:none;list-style-type:none;}
.hideimg{opacity:0;}

/***arrow and loading***/
/***音乐控制按钮****/
.musicBar{width:30px;height:30px;position:absolute;z-index:99999;right:10px;bottom:10px;}
img.musicOn{animation:rolling 1.2s linear infinite;-webkit-animation:rolling 1.2s linear infinite;}

/***loading 动画***/
#loading{width:100%;height:100%;position:fixed;left:0;top:0;z-index:999999999;text-align:center;background:#fff;}
.spinner {
  margin: 60% auto 0;
  width: 150px;
  text-align: center;
}
 
.spinner > div {
  width: 30px;
  height: 30px;
  background-color: #0097d0;
 
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
.arrow{width:9.375%;position:absolute;bottom:1.5%;left:45.3125%;opacity:1;z-index:99;}
.arrow{animation:arrow 1s ease-out infinite;-webkit-animation:arrow 1s ease-out infinite;}


.main{width:100%;height:100%;overflow:hidden;position:absolute;}
.page{width:100%;height:100%;overflow:hidden;position:absolute;left:0;top:0;}

/***第一页**/
#page1{display:block;z-index:20;background:url(../images/bg-2.png) no-repeat center bottom; background-size:100% 50%;}
.page1-1{width:100%;position:absolute;left:0;top:0;}
.wList{width:100%;position:absolute;left:0;top:75%;text-align:center;font-size:0px;}
.page1-2{width:80.46875%;margin-bottom:7%;}
.page1-3{width:50%;}
.active .page1-2{
	animation:bounceInDown 1s ease-out 0s forwards;
	-webkit-animation:bounceInDown 1s ease-out 0s forwards;
}
.active .page1-3{
	animation:bounceInDown 1s ease-out 1s forwards;
	-webkit-animation:bounceInDown 1s ease-out 1s forwards;
}

/**第二页**/
#page2{display:none;z-index:17;background:url(../images/bg.jpg) no-repeat center top; background-size:100% 100%;}
.container {
	position:relative;
	display:inline-block;
	width: 100%;
	height:100%;
	margin:0 auto;
	overflow:hidden;
}

#robot {
	position:relative;
	width: 100%;
	height:100%;
	top: 0px;
	left: 0px;
	z-index: 1;
}

#redux {
	position: absolute;
	width:100%;
	top: 0px;
	left: 0px;
	z-index: 2;
}
.page2-1{
	position:absolute;width:78.6%;left:10.7%;top:45%;z-index:99;
	/*animation:tada 2s ease-out infinite;
	-webkit-animation:tada 2s ease-out infinite;*/
    text-align:center;
}
.page2-1 img{display:inline-block;width:14%;}
.page2-1 img.tips6{width:20%;}

.active .tips1{
	animation:bounceInUp 0.5s ease-out 1s forwards;
	-webkit-animation:bounceInUp 0.5s ease-out 1s forwards;
}
.active .tips2{
	animation:bounceInUp 0.5s ease-out 1.5s forwards;
	-webkit-animation:bounceInUp 0.5s ease-out 1.5s forwards;
}
.active .tips3{
	animation:bounceInUp 0.5s ease-out 2s forwards;
	-webkit-animation:bounceInUp 0.5s ease-out 2s forwards;
}
.active .tips4{
	animation:bounceInUp 0.5s ease-out 2.5s forwards;
	-webkit-animation:bounceInUp 0.5s ease-out 2.5s forwards;
}
.active .tips5{
	animation:bounceInUp 0.5s ease-out 3s forwards;
	-webkit-animation:bounceInUp 0.5s ease-out 3s forwards;
}
.active .tips6{
	animation:bounceInUp 0.5s ease-out 3.5s forwards;
	-webkit-animation:bounceInUp 0.5s ease-out 3.5s forwards;
}
.active .page2-1{
	animation:bounceBig 1s ease-out 4s infinite;
	-webkit-animation:bounceBig 1s ease-out 4s infinite;
}


.wordsBox{
    width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	text-align:center;
	font-size:18px;
	z-index:99;
	display:none;
	color:#fff;
	background:rgba(0,0,0,0.7);
}
.wordsBox p{margin-bottom:1%;}
.words1{font-size:22px;margin-top:15%;}
.words2{margin-top:8%;line-height:150%;}
.words3{margin-top:8%;}
.words4{margin-top:1%;}
.words5{margin-top:5%;}
.words6{margin-top:5%;text-align:center;}
.words6 img{width:80%;}

.active .words1{
	animation:fadeInUp 1s ease-out 0s forwards;
	-webkit-animation:fadeInUp 1s ease-out 0s forwards;
}
.active .words2{
	animation:fadeInUp 1s ease-out 1s forwards;
	-webkit-animation:fadeInUp 1s ease-out 1s forwards;
}
.active .words3{
	animation:fadeInUp 1s ease-out 2s forwards;
	-webkit-animation:fadeInUp 1s ease-out 2s forwards;
}
.active .words4{
	animation:fadeInUp 1s ease-out 3s forwards;
	-webkit-animation:fadeInUp 1s ease-out 3s forwards;
}
.active .words5{
	animation:fadeInUp 1s ease-out 4s forwards;
	-webkit-animation:fadeInUp 1s ease-out 4s forwards;
}
.active .words6{
	animation:fadeInUp 1s ease-out 5s forwards;
	-webkit-animation:fadeInUp 1s ease-out 5s forwards;
}


/****第三页****/
#page3{display:block;z-index:15;background:url(../images/bg3.jpg) no-repeat center top; background-size:100% 100%;}
.page3-1{width:85.3125%;position:absolute;left:7.34375%;top:45%;}
.active .page3-1{
	animation:bounceInRight 1s ease-out 1s forwards;
	-webkit-animation:bounceInRight 1s ease-out 1s forwards;
}
/****第四页****/
#page4{display:block;z-index:13;background:url(../images/bg4.jpg) no-repeat center top; background-size:100% 100%;}
.page4-1{width:60%;position:absolute;left:20%;top:12%;}
.page4-2{width:91.5625%;position:absolute;left:4.21875%;top:22%;}
.page4-3{width:100%;position:absolute;left:0%;top:67%;}
.active .page4-1{
	animation:zoomIn 1s ease-out 1s forwards;
	-webkit-animation:zoomIn 1s ease-out 1s forwards;
}
.active .page4-2{
	animation:flipInY 1s ease-out 2s forwards;
	-webkit-animation:flipInY 1s ease-out 2s forwards;
}
.active .page4-3{
	animation:flipInY 1s ease-out 3s forwards;
	-webkit-animation:flipInY 1s ease-out 3s forwards;
}
/****第五页****/
#page5{display:block;z-index:11;background:url(../images/bg4.jpg) no-repeat center top; background-size:100% 100%;}
.page5-1{width:75.46%;position:absolute;left:12.26%;top:8%;}
.page5-2{width:90%;position:absolute;left:5%;top:15%;border-radius:10px;}
.page5-3{width:90%;position:absolute;left:5%;top:55%;}
.active .page5-1{
	animation:fadeInDown 1s ease-out 1s forwards;
	-webkit-animation:fadeInDown 1s ease-out 1s forwards;
}
.active .page5-2{
	animation:flipInX 1s ease-out 2s forwards;
	-webkit-animation:flipInX 1s ease-out 2s forwards;
}
.active .page5-3{
	animation:flipInX 1s ease-out 3s forwards;
	-webkit-animation:flipInX 1s ease-out 3s forwards;
}
/****第六页****/
#page6{display:block;z-index:10;background:url(../images/bg4.jpg) no-repeat center top; background-size:100% 100%;}
.page6-1{width:61.5625%;position:absolute;left:19.21875%;top:5%;}
.page6-2{width:96%;position:absolute;left:2%;top:12%;}
.page6-3{width:96%;position:absolute;left:2%;top:40%;border-radius:10px;}
.page6-4{width:46.71875%;position:absolute;left:2%;top:74%;border-radius:10px;}
.page6-5{width:41.5625%;position:absolute;right:2%;top:74%;border-radius:10px;}
.active .page6-1{
	animation:bounceInDown 1s ease-out 1s forwards;
	-webkit-animation:bounceInDown 1s ease-out 1s forwards;
}
.active .page6-2{
	animation:fadeInDown 1s ease-out 2s forwards;
	-webkit-animation:fadeInDown 1s ease-out 2s forwards;
}
.active .page6-3{
	animation:fadeInUp 1s ease-out 2s forwards;
	-webkit-animation:fadeInUp 1s ease-out 2s forwards;
}
.active .page6-4{
	animation:fadeInRight 1s ease-out 3s forwards;
	-webkit-animation:fadeInRight 1s ease-out 3s forwards;
}
.active .page6-5{
	animation:fadeInLeft 1s ease-out 3s forwards;
	-webkit-animation:fadeInLeft 1s ease-out 3s forwards;
}

/****第七页****/
#page7{display:block;z-index:9;background:url(../images/bg4.jpg) no-repeat center top; background-size:100% 100%;}
.page7-1{width:25.94%;position:absolute;left:37.03%;top:13%;}
.page7-2{width:79%;position:absolute;left:10.5%;top:28%;border-radius:10px;}
.page7-3{width:99%;position:absolute;left:0.5%;top:55%;}
.goRegist{display:inline-block;position:absolute;width:35%;left:32.5%;bottom:10%;font-size:14px;height:24px;line-height:24px;color:#fff;background-color:#0b8cd0;border-radius:5px;text-align:center;}
.active .page7-1{
	animation:bounceIn 1s ease-out 1s forwards;
	-webkit-animation:bounceIn 1s ease-out 1s forwards;
}
.active .page7-2{
	animation:bounceInLeft 1s ease-out 2s forwards;
	-webkit-animation:bounceInLeft 1s ease-out 2s forwards;
}
.active .page7-3{
	animation:lightSpeedIn 2s ease-out 3s forwards;
	-webkit-animation:lightSpeedIn 2s ease-out 3s forwards;
}
.active .goRegist{
	animation:fadeInUp 1s ease-out 5s forwards;
	-webkit-animation:fadeInUp 1s ease-out 5s forwards;
}



/**注册页面**/
#regist{background:url(../images/bg.jpg) no-repeat center top; background-size:100% 100%;}
.head{width:100%;}
.bottomLine{width:100%;position:absolute;left:0;bottom:0;z-index:99;}
.menuBox{
   width:94%;
   margin:35% auto 0 auto;
   padding:3%;
}
.menuBox h3{
  width:100%;
  margin:0 auto;
  line-height:180%;
  font-size:18px;
  color:#a21a1e;
  border-bottom:1px solid #a21a1e;
}
.menuBox h5{
  width:100%;
  margin:0 auto;
  line-height:180%;
  font-size:14px;
  color:#000;
}
.menuBox p{
  font-size:14px;
  color:#464646;
  text-indent:25px;
  line-height:150%;
}
.menuBox p.noIndent{text-indent:0;}
.menuBox ul li{width:100%;margin:10px 0;font-size:14px;line-height:150%;color:#000;}
.text{width:50%;border:1px solid #ccc;height:20px;}
.textarea{width:50%;}
.select{width:50%; height:25px;}
label,input,select,textarea{display:inline-block;vertical-align:middle;}
label{
  width:30%;
  text-align:right;
  font-size:14px;
  color:#000;
  padding-right:10px;
}
label.noColor{color:#444;}
.menuBox ul li span.submit{width:30%;display:inline-block;height:24px;line-height:24px;color:#fff; background-color:#c6011d; border-radius:5px;cursor:pointer;border:none;font-size:14px;}
.menuBox ul li:last-child{text-align:center;margin-top:5%;}
.menuBox ol{padding-left:0;margin-top:0;}
.menuBox ol li{line-height:28px;font-size:12px;}
.menuBox ol li.sub{background:url(../image/arrow2.png) left no-repeat;}

/****citys***/
#citys{background:url(../images/bg.jpg) no-repeat center top; background-size:100% 100%;}
.mapBox{width:99%;position:relative;margin:30% 0.5% 0 0.5%;font-size:0;}
.mapBox .mapImg{width:100%;position:relative;z-index:1;}
.mapBox .dotImg{
	width:100%;position:absolute;z-index:2;left:0;top:0;
	animation:bounce 1.5s linear infinite;
	-webkit-animation:bounce 1.5s linear infinite;
}
.mapBox .links{width:13.2%;height:6.5%;display:block;position:absolute;background-color:rgba(0,0,0,0);z-index:10;}
#guangzhou{right:33.5%;bottom:16.5%;}
#dongguan{right:14.8%;bottom:16.4%;}
#chongqing{left: 39.5%;bottom:33.5%;}
#xian{left: 45%;top: 47%;}
#shijiazhuang{left: 55.6%;top: 38.5%;}
#zhengzhou{right: 18.3%;top: 46.5%;}
#hefei{right: 26%;bottom:38%;}
#nanjing{right: 4.5%;bottom: 41.7%;}
#qingdao{right: 2.15%;top: 41.2%;}
#dalian{right: 17.3%;top: 32.4%;}

/***success***/
#resault{background:url(../images/bg.jpg) no-repeat center top; background-size:100% 100%;}
#resault .mapBox{text-align:center;}
.success{
	width:80%;
	margin-top:20%;
	animation:scaleBig 2s linear infinite;
	-webkit-animation:scaleBig 2s linear infinite;
}

/**iphone4***/
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
.words1{margin-top:10%;}
.page4-3{top:72%;}
}
/**iphone5***/
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
.mapBox{margin:35% 3.125% 0 3.125%;}
}
/**iphone6s***/
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:3){
.mapBox{margin:35% 3.125% 0 3.125%;}
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-1px,0);
    transform: translate3d(0,-1px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-1px,0);
    transform: translate3d(0,-1px,0);
  }
}
@-webkit-keyframes bounceBig {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}

@keyframes bounceBig {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }
}