body{
    margin: 0;
    padding:0;
  font-family: "微软雅黑","黑体";
  width: 100%;
  height:100%;
  overflow: hidden;
}
h1,h2,h3,h4,h5,p{
  margin:0;
  padding:0;
  font-size: 100%;
  font-weight:normal;
}

.path {
 stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s linear forwards;
}
.path path{
  stroke-width: 1;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.b1{
    animation-delay:0s;
    -webkit-animation-delay:0s;
    -moz-animation-delay:0s;
    -o-animation-delay:0s;
    animation-duration:.8s;
    -webkit-animation-duration:.8s;
    -moz-animation-duration:.8s;
    -o-animation-duration:.8s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
}
.b2{
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;
    animation-duration:2s;
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    -o-animation-duration:2s;
}
.b3{
    animation-delay: .3s;
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -o-animation-delay: .3s;
    animation-duration:1.4s;
    -webkit-animation-duration:1.4s;
    -moz-animation-duration:1.4s;
    -o-animation-duration:1.4s;
}
.b4{
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -o-animation-delay: .5s;
    animation-duration:1.2s;
    -webkit-animation-duration:1.2s;
    -moz-animation-duration:1.2s;
    -o-animation-duration:1.2s;
}
.b5{
    animation-delay:.5s;
    -webkit-animation-delay:.5s;
    -moz-animation-delay:.5s;
    -o-animation-delay:.5s;
    animation-duration:6s;
    -webkit-animation-duration:6s;
    -moz-animation-duration:6s;
    -o-animation-duration:6s;
}

.a1{
    animation: fadeInDown .5s both;
    -webkit-animation: fadeInDown .5s both;
    -moz-animation: fadeInDown .5s both;
    -o-animation: fadeInDown .5s both;
}
.a2{
    animation: fadeInDown 1s both;
    -webkit-animation: fadeInDown 1s both;
    -moz-animation: fadeInDown 1s both;
    -o-animation: fadeInDown 1s both;
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;
}
.a3{
    animation: fadeInDown .1s both;
    -webkit-animation: fadeInDown .1s both;
    -moz-animation: fadeInDown .1s both;
    -o-animation: fadeInDown .1s both;
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;
}
.a4{
    animation: fadeInLeft 8s  linear infinite;
    -webkit-animation: fadeInLeft 8s  linear infinite;
    -moz-animation: fadeInLeft 8s  linear infinite;
    -o-animation: fadeInLeft 8s  linear infinite;
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;
}
.a5{
    animation: fadeInDown .4s both;
    -webkit-animation: fadeInDown .4s both;
    -moz-animation: fadeInDown .4s both;
    -o-animation: fadeInDown .4s both;
    animation-delay:.2s;
    -webkit-animation-delay:.2s;
    -moz-animation-delay:.2s;
    -o-animation-delay:.2s;
}
.fadeIn{
    animation: fadeIn 1.5s both;
    -webkit-animation: fadeIn 1.5s both;
    -moz-animation: fadeIn 1.5s both;
    -o-animation: fadeIn 1.5s both;
    animation-delay:.5s;
    -webkit-animation-delay:.5s;
    -moz-animation-delay:.5s;
    -o-animation-delay:.5s;
}
.show {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
}

.hide {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
}


.borderCity,
.imgTest {
    /*-webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;*/
}

.borderCity path {
    fill: none;
    stroke: #1555DC;

}
path{
    stroke-width:0.5;
    stroke: #ffb403;
}


.city3_yun{
  animation:fadeIn linear forwards;
  -webkit-animation:fadeIn linear forwards;
  -moz-animation:fadeIn linear forwards;
  -o-animation:fadeIn linear forwards;
  animation-delay:.5s;
  -webkit-animation-delay:.5s;
  -moz-animation-delay:.5s;
  -o-animation-delay:.5s;
  animation-duration:1.5s;
  -webkit-animation-duration:1.5s;
  -moz-animation-duration:1.5s;
  -o-animation-duration:1.5s;
  position: absolute;
  background: url(yun.png) no-repeat center -50px;
  background-size: 70%;
  width: 100%;
  height: 100%;
}
.city4_yun{
  animation:fadeIn linear forwards;
  -webkit-animation:fadeIn linear forwards;
  -moz-animation:fadeIn linear forwards;
  -o-animation:fadeIn linear forwards;
  animation-delay:.5s;
  -webkit-animation-delay:.5s;
  -moz-animation-delay:.5s;
  -o-animation-delay:.5s;
  animation-duration:1.5s;
  -webkit-animation-duration:1.5s;
  -moz-animation-duration:1.5s;
  -o-animation-duration:1.5s;
  position: absolute;
  background: url(float_cloud4.png) no-repeat center 0;
  background-size:contain;
  width: 100%;
  height: 100%;
}
.float-mod{
    width: 1200px;
    height: 100%;
  position: absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);    
  -webkit-transform: translateX(-50%);    
  -moz-transform: translateX(-50%);    
  -o-transform: translateX(-50%);    
  animation:fadeIn 1s ease forwards;
  -webkit-animation:fadeIn 1s ease forwards;
  -moz-animation:fadeIn 1s ease forwards;
  -o-animation:fadeIn 1s ease forwards;
  animation-delay:2s;
  -webkit-animation-delay:2s;
  -moz-animation-delay:2s;
  -o-animation-delay:2s;
  opacity:0;
  -webkit-opacity:0;
  -moz-opacity:0;
  -o-opacity:0;
  margin: 0 auto; 
  z-index: 2;
}
.float{
  background-image: url(float_1.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 31px;
  height: 27px;
  animation:fadnDown 2s linear infinite alternate;
  -webkit-animation:fadnDown 2s linear infinite alternate;
  -moz-animation:fadnDown 2s linear infinite alternate;
  -o-animation:fadnDown 2s linear infinite alternate;
  position: absolute;
}
.float01{
  background-size: 60%;
  top: 90px;
  left: 360px;
}
.float02{
  background-size: 50%;
  top: 210px;
  left: 260px;
  opacity: .7;
  -webkit-opacity: .7;
  -moz-opacity: .7;
  -o-opacity: .7;
  animation-delay:.5s;
  -webkit-animation-delay:.5s;
  -moz-animation-delay:.5s;
  -o-animation-delay:.5s;
}
.float03{
  background-size: 50%;
  top: 210px;
  left: 630px;
  opacity: .8;
  -webkit-opacity: .8;
  -moz-opacity: .8;
  -o-opacity: .8;
  animation-delay:2.5s;
  -webkit-animation-delay:2.5s;
  -moz-animation-delay:2.5s;
  -o-animation-delay:2.5s;
}
.float04{
  background-size: 50%;
  top: 140px;
  left: 780px;
  opacity: .7;
  -webkit-opacity: .7;
  -moz-opacity: .7;
  -o-opacity: .7;
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
}

.float-text{
  position: absolute;
  height: 100%;
  z-index: 2;
  overflow: hidden;;
  
}
.float-text h2{
  font-size: 42px;
  color: #e18b38;
  animation: fadeRight 1s forwards;
  -webkit-animation: fadeRight 1s forwards;
  -moz-animation: fadeRight 1s forwards;
  -o-animation: fadeRight 1s forwards;
}

.float-text h3{
  font-size: 15px;
  color: #333;
  animation: fadeLeft 2.5s forwards;
  -webkit-animation: fadeLeft 2.5s forwards;
  -moz-animation: fadeLeft 2.5s forwards;
  -o-animation: fadeLeft 2.5s forwards;
}

.showCity_1{
  -webkit-animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  -moz-animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  -o-animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);


}

@keyframes scaleUp {
  0% {
    transform: translate(-50%,-50%) scale(1);
    -moz-transform: translate(-50%,-50%)  scale(1);
    -o-transform: translate(-50%,-50%)  scale(1);
    -webkit-transform: translate(-50%,-50%) scale(1);
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  } 
  100% {
    transform: translate(-50%,-50%) scale(.9);
    -webkit-transform:translate(-50%,-50%) scale(.9);
    -moz-transform: translate(-50%,-50%)  scale(.9);
    -o-transform: translate(-50%,-50%) scale(.9);
    
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }
}

@-moz-keyframes scaleUp {
  0%{
    transform: translate(-50%,-50%) scale(1);
    -webkit-transform: translate(-50%,-50%) scale(1);
    -moz-transform: translate(-50%,-50%) scale(1);
    -o-transform: translate(-50%,-50%) scale(1);
    
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  } 
  100% {
    transform: translate(-50%,-50%) scale(.9);
    -webkit-transform:translate(-50%,-50%) scale(.9);
    -moz-transform: translate(-50%,-50%) scale(.9);
    -o-transform: translate(-50%,-50%) scale(.9);
    
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }
}

@-webkit-keyframes scaleUp {
  0% {
    transform: translate(-50%,-50%) scale(1);
    -webkit-transform: translate(-50%,-50%) scale(1);
    -moz-transform: translate(-50%,-50%) scale(1);
    -o-transform: translate(-50%,-50%) scale(1);
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  } 
  100% {
    transform: translate(-50%,-50%) scale(.9);
    -webkit-transform:translate(-50%,-50%) scale(.9);
    -moz-transform: translate(-50%,-50%) scale(.9);
    -o-transform: translate(-50%,-50%) scale(.9);
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }
}

@-o-keyframes scaleUp {
  0% {
    transform: translate(-50%,-50%) scale(1);
    -webkit-transform: translate(-50%,-50%) scale(1);
    -moz-transform: translate(-50%,-50%) scale(1);
    -o-transform: translate(-50%,-50%) scale(1);
    
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  } 
  100% {
    transform: translate(-50%,-50%) scale(.9);
    -webkit-transform:translate(-50%,-50%) scale(.9);
    -moz-transform: translate(-50%,-50%) scale(.9);
    -o-transform: translate(-50%,-50%) scale(.9);
    
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }
}
.showCity_2{
  animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  -moz-animation: scaleUp 20s 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  -o-animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
display: none;
  
}
.showCity_3{
  animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  -moz-animation: fadeIn 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  /*-moz-animation: scaleUp 21.5s 5s forwards cubic-bezier(0.7, 0, 0.3, 1);*/
  -o-animation: scaleUp 3s 4.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
  
  display: none;
}
.showCity_4{
  display: none;
    -moz-animation:fadeIn .6s 6s forwards;
}

.showCity_4 .float-text h2{
  font-size: 55px;
  color:#ed9c46;
  text-shadow: 2px 0px 0px #f56ef6;
  -webkit-text-shadow: 2px 0px 0px #f56ef6;
  -moz-text-shadow: 2px 0px 0px #f56ef6;
  -o-text-shadow: 2px 0px 0px #f56ef6;
  text-shadow: 2px 0px 0px #f56ef6 \8;
  line-height: 64px;
}
.showCity_4 .float-text h3{
  font-size: 18px;
}
.showCity_2 .float-text{
  top:100px;
  left:185px;
}

.city4_float02{
  background: url(float_2.png) no-repeat center 20px;
  width: 100%;
  height:100%;
  background-size: 50%;
  position: absolute;
  left:0;
  top:0;
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  -o-opacity: 0;
  animation:fadeBig 4.5s .8s  infinite;
  -webkit-animation:fadeBig 4.5s .8s  infinite;
  -moz-animation:fadeBig 4.5s .8s  infinite;
  -o-animation:fadeBig 4.5s .8s  infinite;
}
.showCity_4 .float-text{left:200px;top:90px;}
.showCity_4 .float01{background-size: 80%;left:540px;opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;-o-opacity: .5;}
.showCity_4 .float02{background-size: 80%;left:340px;opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;-o-opacity: .5;}
.showCity_4 .float03{background-size: 80%;left:650px;top:280px;opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;-o-opacity: .5;}
.showCity_2 .float01{background-size: 90%;left:420px;top:60px;opacity: 1;-webkit-opacity: 1;-moz-opacity: 1;-o-opacity:1;} 
.showCity_2 .float02{background-size: 80%;left:340px;opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;-o-opacity: .5;}
.showCity_2 .float03{background-size: 80%;left:750px;top:220px;opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;-o-opacity: .5;}
.showCity_2 .float04{background-size: 80%;left:650px;top:140px;opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;-o-opacity: .5;}
.showCity_3 .float-text{left:200px;top:90px;}
.showCity_3 .float01{left:360px;top:80px;}
.showCity_3 .float02{left:420px;top:200px;}
.showCity_3 .float03{left:650px;top:70px;}
.tsfc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);width:100%;height:100%;
}

.showCity_1 .float-text{left:45%;top:80px;}
.showCity_1 .float01{background-size: 80%;opacity: 1;-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;}
.showCity_1 .float04{top:100px;left:850px;}


.go-index{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  position: absolute;
  right:100px;
  top:60px;
  cursor: pointer;
  z-index:9999;
}
.showCity_4{
  text-align: center;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;-webkit-opacity:0;-moz-opacity:0;-o-opacity: 0;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -o-transform: translateY(5px);
  }

  100% {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
  }
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -o-transform: translateY(5px);
  }

  100% {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
  }
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -o-transform: translateY(5px);
  }

  100% {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
  }
}

@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -o-transform: translateY(5px);
  }

  100% {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
  }
}

@keyframes fadeInLeft {
  50%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
    transform: translate(16px,6px);
    -webkit-transform: translate(16px,6px);
    -moz-transform: translate(16px,6px);
    -o-transform: translate(16px,6px);
  }

  100%{
    transform: translate(0px,10px);
    -webkit-transform: translate(0px,10px);
    -moz-transform: translate(0px,10px);
    -o-transform: translate(0px,10px);
  }
}
@-moz-keyframes fadeInLeft {
  50%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
    transform: translate(16px,6px);
    -webkit-transform: translate(16px,6px);
    -moz-transform: translate(16px,6px);
    -o-transform: translate(16px,6px);
  }

  100%{
    transform: translate(0px,10px);
    -webkit-transform: translate(0px,10px);
    -moz-transform: translate(0px,10px);
    -o-transform: translate(0px,10px);
  }
}
@-webkit-keyframes fadeInLeft {
  50%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
    transform: translate(16px,6px);
    -webkit-transform: translate(16px,6px);
    -moz-transform: translate(16px,6px);
    -o-transform: translate(16px,6px);
  }

  100%{
    transform: translate(0px,10px);
    -webkit-transform: translate(0px,10px);
    -moz-transform: translate(0px,10px);
    -o-transform: translate(0px,10px);
  }
}
@-o-keyframes fadeInLeft {
  50%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
    transform: translate(16px,6px);
    -webkit-transform: translate(16px,6px);
    -moz-transform: translate(16px,6px);
    -o-transform: translate(16px,6px);
  }

  100%{
    transform: translate(0px,10px);
    -webkit-transform: translate(0px,10px);
    -moz-transform: translate(0px,10px);
    -o-transform: translate(0px,10px);
  }
}

@keyframes fadeIn {
  0%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }

  100%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }

  100%{
   opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }

  100%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }

  100%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  }
}

@keyframes fadnDown{
  0%{
    transform: translateY(0px);  
    -webkit-transform: translateY(0px);  
    -moz-transform: translateY(0px);  
    -o-transform: translateY(0px);  
  }
  100%{
    transform: translateY(10px); 
    -webkit-transform: translateY(10px); 
    -moz-transform: translateY(10px); 
    -o-transform: translateY(10px); 
  }
}
@-moz-keyframes fadnDown{
  0%{
    transform: translateY(0px);  
    -webkit-transform: translateY(0px);  
    -moz-transform: translateY(0px);  
    -o-transform: translateY(0px);  
  }
  100%{
    transform: translateY(10px); 
    -webkit-transform: translateY(10px); 
    -moz-transform: translateY(10px); 
    -o-transform: translateY(10px); 
  }
}
@-webkit-keyframes fadnDown{
  0%{
    transform: translateY(0px);  
    -webkit-transform: translateY(0px);  
    -moz-transform: translateY(0px);  
    -o-transform: translateY(0px);  
  }
  100%{
    transform: translateY(10px); 
    -webkit-transform: translateY(10px); 
    -moz-transform: translateY(10px); 
    -o-transform: translateY(10px); 
  }
}
@-o-keyframes fadnDown{
  0%{
    transform: translateY(0px);  
    -webkit-transform: translateY(0px);  
    -moz-ansform: translateY(0px);  
    -o-transform: translateY(0px);  
  }
  100%{
    transform: translateY(10px); 
    -webkit-transform: translateY(10px); 
    -moz-transform: translateY(10px); 
    -o-transform: translateY(10px); 
  }
}

@keyframes fadeRight{
  0%{
    transform: translateX(60px);
    -webkit-transform: translateX(60px);
    -moz-transform: translateX(60px);
    -o-transform: translateX(60px);
  }
  100%{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
  }
}
@-moz-keyframes fadeRight{
  0%{
    transform: translateX(60px);
    -webkit-transform: translateX(60px);
    -moz-transform: translateX(60px);
    transform: translateX(60px);
  }
  100%{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
  }
}
@-webkit-keyframes fadeRight{
  0%{
    transform: translateX(60px);
    -webkit-transform: translateX(60px);
    -moz-transform: translateX(60px);
    -o-transform: translateX(60px);
  }
  100%{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
  }
}
@-o-keyframes fadeRight{
  0%{
    transform: translateX(60px);
    -webkit-transform: translateX(60px);
    -moz-transform: translateX(60px);
    -o-transform: translateX(60px);
  }
  100%{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
  }
}

@keyframes fadeLeft{
  0%{
    transform: translateX(-60px);
    -webkit-transform: translateX(-60px);
    -moz-transform: translateX(-60px);
    -o-transform: translateX(-60px);
  }
  100%{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
  }
}
@-webkit-keyframes fadeLeft{
  0%{
    transform: translateX(-60px);
    -webkit-transform: translateX(-60px);
    -moz-transform: translateX(-60px);
    -o-transform: translateX(-60px);
  }
  100%{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
  }
}
@-moz-keyframes fadeLeft{
  0%{
    transform: translateX(-60px);
    -webkit-transform: translateX(-60px);
    -moz-transform: translateX(-60px);
    -o-transform: translateX(-60px);
  }
  100%{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
  }
}
@-o-keyframes fadeLeft{
  0%{
    transform: translateX(-60px);
    -webkit-transform: translateX(-60px);
    -moz-transform: translateX(-60px);
    -o-transform: translateX(-60px);
  }
  100%{
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
  }
}

@keyframes fadeOut{

  0%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  }
   100%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }
}
@-webkit-keyframes fadeOut{

  0%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  }
   100%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }
}
@-moz-keyframes fadeOut{

  0%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  }
   100%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }
}
@-o-keyframes fadeOut{

  0%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
  }
   100%{
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
  }
}

@keyframes fadeBig{
  0%{
    background-size: 40%;
  }
  100%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    background-size:50%;
  }
}
@-webkit-keyframes fadeBig{
  0%{
    background-size: 40%;
  }
  100%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    background-size:50%;
  }
}
@-moz-keyframes fadeBig{
  0%{
    background-size: 40%;
  }
  100%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    background-size:50%;
  }
}
@-o-keyframes fadeBig{
  0%{
    background-size: 40%;
  }
  100%{
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    background-size:50%;
  }
}
.in-crc-btn{
	height:30px;
	background:none;
  border:1px solid #ffb403;
  border-radius:20px;
  text-align: center;
  color: #ffb403;
  line-height:30px;
  animation:fadeIn 1s ease forwards;
  -webkit-animation:fadeIn 2s ease forwards;
  -moz-animation:fadeIn 2s ease forwards;
	-o-animation:fadeIn 2s ease forwards;
	cursor:pointer;
	display:inline-block;
  text-decoration: none;
  font-size: 14px;
  padding: 0 20px;
  position: relative;
  z-index: 1000;
}
.in-crc-btn:after{
  content: "进入华润官网";
}


.show-city{
    display:none;
    background-size: cover ;
    position:absolute;
    left:0;
    top:0;
    background-position: center top;
    background-repeat: no-repeat;
}
.show-city .float-text{
    display: none;
}
.show-city .float-text h2,.show-city .float-text h3{
    animation: none;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation:none;
}