

.page1 .progress.on .huang.prog1{
  animation: progw1 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon1.png) no-repeat left bottom;
}
@keyframes progw1{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  
  100%{
    width: 300px;
  }
}
.page1 .progress.on .huang.prog2{
  animation: progw2 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon2.png) no-repeat left bottom;
}
@keyframes progw2{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  
  100%{
    width: 410px;
  }
}
.page1 .progress.on .huang.prog3{
  animation: progw3 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon3.png) no-repeat left bottom;
}
@keyframes progw3{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  
  100%{
    width: 524px;
  }
}
.page1 .progress.on .huang.prog4{
  animation: progw4 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon4.png) no-repeat left bottom;
}
@keyframes progw4{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  
  100%{
    width: 636px;
  }
}
.page1 .progress.on .huang.prog5{
  animation: progw5 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon5.png) no-repeat left bottom;
}
@keyframes progw5{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  
  100%{
    width: 750px;
  }
}
.page1 .progress.on .huang.prog6{
  animation: progw6 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon6.png) no-repeat left bottom;
}
@keyframes progw6{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  
  100%{
    width: 790px;
  }
}
.page1 .progress.on .huang.prog7{
  animation: progw7 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon7.png) no-repeat left bottom;
}
@keyframes progw7{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  68%{
    width: 835px;
  }
  
  100%{
    width: 835px;
  }
}
.page1 .progress.on .huang.prog8{
  animation: progw8 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon8.png) no-repeat left bottom;
}
@keyframes progw8{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  68%{
    width: 835px;
  }
  72%{
    width: 875px;
  }
  
  100%{
    width: 875px;
  }
}
.page1 .progress.on .huang.prog9{
  animation: progw9 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon9.png) no-repeat left bottom;
}
@keyframes progw9{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  68%{
    width: 835px;
  }
  72%{
    width: 875px;
  }
  76%{
    width: 920px;
  }
  
  100%{
    width: 920px;
  }
}
.page1 .progress.on .huang.prog10{
  animation: progw10 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon10.png) no-repeat left bottom;
}
@keyframes progw10{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  68%{
    width: 835px;
  }
  72%{
    width: 875px;
  }
  76%{
    width: 920px;
  }
  80%{
    width: 960px;
  }
  
  100%{
    width: 960px;
  }
}
.page1 .progress.on .huang.prog11{
  animation: progw11 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon11.png) no-repeat left bottom;
}
@keyframes progw11{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  68%{
    width: 835px;
  }
  72%{
    width: 875px;
  }
  76%{
    width: 920px;
  }
  80%{
    width: 960px;
  }
  84%{
    width: 1020px;
  }
  
  100%{
    width: 1020px;
  }
}
.page1 .progress.on .huang.prog12{
  animation: progw12 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon12.png) no-repeat left bottom;
}
@keyframes progw12{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  68%{
    width: 835px;
  }
  72%{
    width: 875px;
  }
  76%{
    width: 920px;
  }
  80%{
    width: 960px;
  }
  84%{
    width: 1020px;
  }
  88%{
    width: 1070px;
  }
  
  100%{
    width: 1070px;
  }
}
.page1 .progress.on .huang.prog13{
  animation: progw13 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon13.png) no-repeat left bottom;
}
@keyframes progw13{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  68%{
    width: 835px;
  }
  72%{
    width: 875px;
  }
  76%{
    width: 920px;
  }
  80%{
    width: 960px;
  }
  84%{
    width: 1020px;
  }
  88%{
    width: 1070px;
  }
  92%{
    width: 1120px;
  }
  
  100%{
    width: 1120px;
  }
}
.page1 .progress.on .huang.prog14{
  animation: progw14 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon14.png) no-repeat left bottom;
}
@keyframes progw14{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  68%{
    width: 835px;
  }
  72%{
    width: 875px;
  }
  76%{
    width: 920px;
  }
  80%{
    width: 960px;
  }
  84%{
    width: 1020px;
  }
  88%{
    width: 1070px;
  }
  92%{
    width: 1120px;
  }
  96%{
    width: 1160px;
  }
  100%{
    width: 1160px;
  }
}
.page1 .progress.on .huang.prog15{
  animation: progw15 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: url(img/bg1xon15.png) no-repeat left bottom;
}
@keyframes progw15{
  0%{
    width: 206px;
  }
  20%{
    width: 300px;
  }
  30%{
    width: 410px;
  }
  40%{
    width: 524px;
  }
  50%{
    width: 636px;
  }
  60%{
    width: 750px;
  }
  64%{
    width: 790px;
  }
  68%{
    width: 835px;
  }
  72%{
    width: 875px;
  }
  76%{
    width: 920px;
  }
  80%{
    width: 960px;
  }
  84%{
    width: 1020px;
  }
  88%{
    width: 1070px;
  }
  92%{
    width: 1120px;
  }
  96%{
    width: 1160px;
  }
  100%{
    width: 1445px;
  }
}
.page1 .progress .huang span{
    left: 1117px;
    bottom: -14px;
}
.page1 .progress.on .huang.prog0 span{
  left: 92px;
  bottom: -2px;
}
.page1 .progress.on .huang.prog1 span{
  animation: prog1 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog1{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  
  100%{
    left: 195px;
    bottom: 1px;
  }
}
.page1 .progress.on .huang.prog2 span{
  animation: prog2 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog2{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  
  100%{
    left: 290px;
    bottom: -11px;
  }
}
.page1 .progress.on .huang.prog3 span{
  animation: prog3 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog3{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  
  100%{
    left: 425px;
    bottom: -20px;
  }
}
.page1 .progress.on .huang.prog4 span{
  animation: prog4 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog4{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  
  100%{
    left: 550px;
    bottom: -16px;
  }
}
.page1 .progress.on .huang.prog5 span{
  animation: prog5 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog5{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  
  100%{
    left: 655px;
    bottom: -3px;
  }
}
.page1 .progress.on .huang.prog6 span{
  animation: prog6 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog6{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  
  100%{
    left: 705px;
    bottom: 0px;
  }
}
.page1 .progress.on .huang.prog7 span{
  animation: prog7 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog7{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  39%{
    left: 730px;
    bottom: 0px;
  }
  42%{
    left: 755px;
    bottom: 1px;
  }
  
  100%{
    left: 755px;
    bottom: 1px;
  }
}
.page1 .progress.on .huang.prog8 span{
  animation: prog8 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog8{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  39%{
    left: 730px;
    bottom: 0px;
  }
  42%{
    left: 755px;
    bottom: 1px;
  }
  45%{
    left: 780px;
    bottom: 1px;
  }
  48%{
    left: 805px;
    bottom: 0px;
  }
  
  100%{
    left: 805px;
    bottom: 0px;
  }
}
.page1 .progress.on .huang.prog9 span{
  animation: prog9 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog9{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  39%{
    left: 730px;
    bottom: 0px;
  }
  42%{
    left: 755px;
    bottom: 1px;
  }
  45%{
    left: 780px;
    bottom: 1px;
  }
  48%{
    left: 805px;
    bottom: 0px;
  }
  51%{
    left: 830px;
    bottom: -1px;
  }
  54%{
    left: 855px;
    bottom: -2px;
  }
  
  100%{
    left: 855px;
    bottom: -2px;
  }
}
.page1 .progress.on .huang.prog10 span{
  animation: prog10 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog10{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  39%{
    left: 730px;
    bottom: 0px;
  }
  42%{
    left: 755px;
    bottom: 1px;
  }
  45%{
    left: 780px;
    bottom: 1px;
  }
  48%{
    left: 805px;
    bottom: 0px;
  }
  51%{
    left: 830px;
    bottom: -1px;
  }
  54%{
    left: 855px;
    bottom: -2px;
  }
  57%{
    left: 870px;
    bottom: -4px;
  }
  60%{
    left: 888px;
    bottom: -5px;
  }
  
  100%{
    left: 888px;
    bottom: -5px;
  }
}
.page1 .progress.on .huang.prog11 span{
  animation: prog11 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog11{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  39%{
    left: 730px;
    bottom: 0px;
  }
  42%{
    left: 755px;
    bottom: 1px;
  }
  45%{
    left: 780px;
    bottom: 1px;
  }
  48%{
    left: 805px;
    bottom: 0px;
  }
  51%{
    left: 830px;
    bottom: -1px;
  }
  54%{
    left: 855px;
    bottom: -2px;
  }
  57%{
    left: 870px;
    bottom: -4px;
  }
  60%{
    left: 888px;
    bottom: -5px;
  }
  63%{
    left: 910px;
    bottom: -8px;
  }
  66%{
    left: 935px;
    bottom: -11px;
  }
  
  100%{
    left: 935px;
    bottom: -11px;
  }
}
.page1 .progress.on .huang.prog12 span{
  animation: prog12 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog12{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  39%{
    left: 730px;
    bottom: 0px;
  }
  42%{
    left: 755px;
    bottom: 1px;
  }
  45%{
    left: 780px;
    bottom: 1px;
  }
  48%{
    left: 805px;
    bottom: 0px;
  }
  51%{
    left: 830px;
    bottom: -1px;
  }
  54%{
    left: 855px;
    bottom: -2px;
  }
  57%{
    left: 870px;
    bottom: -4px;
  }
  60%{
    left: 888px;
    bottom: -5px;
  }
  63%{
    left: 910px;
    bottom: -8px;
  }
  66%{
    left: 935px;
    bottom: -11px;
  }
  69%{
    left: 960px;
    bottom: -13px;
  }
  72%{
    left: 985px;
    bottom: -15px;
  }
  
  100%{
    left: 985px;
    bottom: -15px;
  }
}
.page1 .progress.on .huang.prog13 span{
  animation: prog13 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog13{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  39%{
    left: 730px;
    bottom: 0px;
  }
  42%{
    left: 755px;
    bottom: 1px;
  }
  45%{
    left: 780px;
    bottom: 1px;
  }
  48%{
    left: 805px;
    bottom: 0px;
  }
  51%{
    left: 830px;
    bottom: -1px;
  }
  54%{
    left: 855px;
    bottom: -2px;
  }
  57%{
    left: 870px;
    bottom: -4px;
  }
  60%{
    left: 888px;
    bottom: -5px;
  }
  63%{
    left: 910px;
    bottom: -8px;
  }
  66%{
    left: 935px;
    bottom: -11px;
  }
  69%{
    left: 960px;
    bottom: -13px;
  }
  72%{
    left: 985px;
    bottom: -15px;
  }
  75%{
    left: 1010px;
    bottom: -16px;
  }
  78%{
    left: 1035px;
    bottom: -17px;
  }
  
  100%{
    left: 1035px;
    bottom: -17px;
  }
}
.page1 .progress.on .huang.prog14 span{
  animation: prog14 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog14{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  39%{
    left: 730px;
    bottom: 0px;
  }
  42%{
    left: 755px;
    bottom: 1px;
  }
  45%{
    left: 780px;
    bottom: 1px;
  }
  48%{
    left: 805px;
    bottom: 0px;
  }
  51%{
    left: 830px;
    bottom: -1px;
  }
  54%{
    left: 855px;
    bottom: -2px;
  }
  57%{
    left: 870px;
    bottom: -4px;
  }
  60%{
    left: 888px;
    bottom: -5px;
  }
  63%{
    left: 910px;
    bottom: -8px;
  }
  66%{
    left: 935px;
    bottom: -11px;
  }
  69%{
    left: 960px;
    bottom: -13px;
  }
  72%{
    left: 985px;
    bottom: -15px;
  }
  75%{
    left: 1010px;
    bottom: -16px;
  }
  78%{
    left: 1035px;
    bottom: -17px;
  }
  81%{
    left: 1060px;
    bottom: -17px;
  }
  84%{
    left: 1085px;
    bottom: -16px;
  }
  
  100%{
    left: 1085px;
    bottom: -16px;
  }
}
.page1 .progress.on .huang.prog15 span{
  animation: prog15 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes prog15{
  0%{
    left: 92px;
    bottom: -2px;
  }
  3%{
    left: 126px;
    bottom: 1px;
  }
  6%{
    left: 195px;
    bottom: 1px;
  }
  9%{
    left: 230px;
    bottom: -3px;
  }
  12%{
    left: 290px;
    bottom: -11px;
  }
  15%{
    left: 360px;
    bottom: -17px;
  }
  18%{
    left: 425px;
    bottom: -20px;
  }
  21%{
    left: 485px;
    bottom: -20px;
  }
  24%{
    left: 550px;
    bottom: -16px;
  }
  27%{
    left: 610px;
    bottom: -8px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  30%{
    left: 655px;
    bottom: -3px;
  }
  33%{
    left: 680px;
    bottom: -1px;
  }
  36%{
    left: 705px;
    bottom: 0px;
  }
  39%{
    left: 730px;
    bottom: 0px;
  }
  42%{
    left: 755px;
    bottom: 1px;
  }
  45%{
    left: 780px;
    bottom: 1px;
  }
  48%{
    left: 805px;
    bottom: 0px;
  }
  51%{
    left: 830px;
    bottom: -1px;
  }
  54%{
    left: 855px;
    bottom: -2px;
  }
  57%{
    left: 870px;
    bottom: -4px;
  }
  60%{
    left: 888px;
    bottom: -5px;
  }
  63%{
    left: 910px;
    bottom: -8px;
  }
  66%{
    left: 935px;
    bottom: -11px;
  }
  69%{
    left: 960px;
    bottom: -13px;
  }
  72%{
    left: 985px;
    bottom: -15px;
  }
  75%{
    left: 1010px;
    bottom: -16px;
  }
  78%{
    left: 1035px;
    bottom: -17px;
  }
  81%{
    left: 1060px;
    bottom: -17px;
  }
  84%{
    left: 1085px;
    bottom: -16px;
  }
  87%{
    left: 1100px;
    bottom: -16px;
  }
  90%{
    left: 1117px;
    bottom: -14px;
  }
  100%{
    left: 1117px;
    bottom: -14px;
  }
}

.page1 .kpi1{
  opacity: 0;
  margin-left: -2000px;
}
.page1 .bg.on .kpi1{
  animation: kpi1 1s linear;
  animation-fill-mode:forwards;
}
@keyframes kpi1{
  0%{
    opacity: 0;
    margin-left: -2000px;
  }
  50%{
    opacity: 1;
    margin-left: -398px;
  }
  100%{
    opacity: 1;
    margin-left: -398px;
  }
}
.page1 .kpi2{
  opacity: 0;
  margin-left: -2000px;
}
.page1 .bg.on .kpi2{
  animation: kpi2 1s linear;
  animation-fill-mode:forwards;
}
@keyframes kpi2{
  0%{
    opacity: 0;
    margin-left: -2000px;
  }
  50%{
    opacity: 0;
    margin-left: -399px;
  }
  75%{
    opacity: 1;
    margin-left: -656px;
  }
  100%{
    opacity: 1;
    margin-left: -656px;
  }
}
.page1 .kpi3{
  opacity: 0;
  margin-left: -2000px;
}
.page1 .bg.on .kpi3{
  animation: kpi3 1s linear;
  animation-fill-mode:forwards;
}
@keyframes kpi3{
  0%{
    opacity: 0;
    margin-left: -2000px;
  }
  50%{
    opacity: 0;
    margin-left: -399px;
  }
  75%{
    opacity: 0;
    margin-left: -654px;
  }
  100%{
    opacity: 1;
    margin-left: -833px;
  }
}
.page1 .kpi5{
  opacity: 0;
  margin-left: 2000px;
}
.page1 .bg.on .kpi5{
  animation: kpi5 1s linear;
  animation-fill-mode:forwards;
}
@keyframes kpi5{
  0%{
    opacity: 0;
    margin-left: 2000px;
  }
  50%{
    opacity: 1;
    margin-left: 0px;
  }
  100%{
    opacity: 1;
    margin-left: 0px;
  }
}
.page1 .kpi6{
  opacity: 0;
  margin-left: 2000px;
}
.page1 .bg.on .kpi6{
  animation: kpi6 1s linear;
  animation-fill-mode:forwards;
}
@keyframes kpi6{
  0%{
    opacity: 0;
    margin-left: 2000px;
  }
  50%{
    opacity: 0;
    margin-left: -344px;
  }
  75%{
    opacity: 1;
    margin-left: 242px;
  }
  100%{
    opacity: 1;
    margin-left: 242px;
  }
}
.page1 .kpi7{
  opacity: 0;
  margin-left: 2000px;
}
.page1 .bg.on .kpi7{
  animation: kpi7 1s linear;
  animation-fill-mode:forwards;
}
@keyframes kpi7{
  0%{
    opacity: 0;
    margin-left: 2000px;
  }
  50%{
    opacity: 0;
    margin-left: -344px;
  }
  75%{
    opacity: 0;
    margin-left: 241px;
  }
  100%{
    opacity: 1;
    margin-left: 464px;
  }
}
.page1 .bg .slogan .i1{
  opacity: 0;
  margin-left: -1200px;
  transition: all 0.5s;
  transition-delay: 0.7s;
}
.page1 .bg.on .slogan .i1{
  opacity: 1;
  margin-left: -628px;
}
.page1 .bg .slogan .i2{
  opacity: 0;
  margin-left: 1200px;
  transition: all 0.5s;
  transition-delay: 0.7s;
}
.page1 .bg.on .slogan .i2{
  opacity: 1;
  margin-left: 13px;
}
.page1 .bg .slogan .i3{
  opacity: 0;
  transition: all 0.2s;
  transition-delay: 1s;
}
.page1 .bg.on .slogan .i3{
  opacity: 1;
}

@media(min-width: 1950px){
  .page1 .bg.on .slogan .i1{
    margin-left: -742px;
  }
  .page1 .bg.on .slogan .i2{
    margin-left: 16px;
  }
}


.page1-0 .mbg{
  margin-left: -1070px;
  opacity: 0;
  transition: all 0.5s;
}
.page1-0.active .mbg{
  opacity: 1;
  margin-left: -870px;
}
.page1-0 .mbg .kp i{
  opacity: 0;
  left: -50px;
  transition: all 0.3s;
}
.page1-0.active .mbg .kp .i1{
  transition-delay: 1.3s;
  left: 0;
  opacity: 1;
}

.page1-0.active .mbg .kp .i2{
  transition-delay: 1.1s;
  left: 153px;
  opacity: 1;
}

.page1-0.active .mbg .kp .i3{
  transition-delay: 0.9s;
  left: 306px;
  opacity: 1;
}

.page1-0.active .mbg .kp .i4{
  transition-delay: 0.7s;
  left: 459px;
  opacity: 1;
}

.page1-0.active .mbg .kp .i5{
  transition-delay: 0.5s;
  left: 612px;
  opacity: 1;
}
.page1-0 .gocj{
  opacity: 0;
  top: 700px;
  transition: all 0.3s;
  transition-delay: 1.2s;
}
.page1-0.active .gocj{
  opacity: 1;
  top: 680px;
}
.page1-0 .mbg .s{
  opacity: 0;
  right: 0;
  transition: all 0.3s;
  transition-delay: 1.2s;
}
.page1-0.active .mbg .s{
  opacity: 1;
  right: 30px;
}


.page1-2 .mbg{
  top: 206px;
  opacity: 0;
  transition: all 0.5s;
}
.page1-2.active .mbg{
  top: 146px;
  opacity: 1;
}
.page1-2 .m{
  opacity: 0;
  top: 340px;
  transition: all 0.5s;
}
.page1-2.active .m{
  top: 280px;
  opacity: 1;
}
.page1-2 .m i{
  top: 20px;
  transition: all 0.5s;
  transition-delay: 0.5s;
}
.page1-2.active .m i{
  top: 0px;
}

.page2 .m{
  transform: scale(0.4);
  opacity: 0;
  transition: all 0.3s;
}
.page2 .m.active{
  transform: scale(1);
  opacity: 1;
}
.page2 .txt{
  top: 850px;
  opacity: 0;
  transition: all 0.3s;
  transition-delay: 0.6s;
}
.page2 .txt.active{
  top: 790px;
  opacity: 1;
}
.page2 .card .i1{
  opacity: 0;
}
.page2 .card.active .i1{
  animation: card1 0.5s linear;
  animation-fill-mode:forwards;
  animation-delay:0.2s;
}
@keyframes card1{
  0%{
    opacity: 0;
    transform: translate3d(300px,-120px,-1000px);
    z-index: 1;
  }
  90%{
    z-index: 1;
  }
  95%{
    z-index: 11;
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
    z-index: 11;
  }
}
.page2 .card .i2{
  opacity: 0;
}
.page2 .card.active .i2{
  animation: card2 0.5s linear;
  animation-fill-mode:forwards;
  animation-delay:0.2s;
}
@keyframes card2{
  0%{
    opacity: 0;
    transform: translate3d(-300px,-80px,-1000px);
    z-index: 1;
  }
  90%{
    z-index: 1;
  }
  95%{
    z-index: 11;
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
    z-index: 11;
  }
}
.page2 .card .i3{
  opacity: 0;
}
.page2 .card.active .i3{
  animation: card3 0.5s linear;
  animation-fill-mode:forwards;
  animation-delay:0.2s;
}
@keyframes card3{
  0%{
    opacity: 0;
    transform: translate3d(-300px,-80px,-1000px);
    z-index: 1;
  }
  90%{
    z-index: 1;
  }
  95%{
    z-index: 11;
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
    z-index: 11;
  }
}
.page2 .card .i4{
  opacity: 0;
}
.page2 .card.active .i4{
  animation: card4 0.5s linear;
  animation-fill-mode:forwards;
  animation-delay:0.2s;
}
@keyframes card4{
  0%{
    opacity: 0;
    transform: translate3d(300px,-60px,-1000px);
    z-index: 1;
  }
  90%{
    z-index: 1;
  }
  95%{
    z-index: 11;
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
    z-index: 11;
  }
}
.page2 .card .i6{
  opacity: 0;
}
.page2 .card.active .i6{
  animation: card6 0.5s linear;
  animation-fill-mode:forwards;
  animation-delay:0.2s;
}
@keyframes card6{
  0%{
    opacity: 0;
    transform: translate3d(300px,-60px,-1000px);
    z-index: 1;
  }
  90%{
    z-index: 1;
  }
  95%{
    z-index: 11;
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
    z-index: 11;
  }
}
.page2 .card .i7{
  opacity: 0;
}
.page2 .card.active .i7{
  animation: card7 0.5s linear;
  animation-fill-mode:forwards;
  animation-delay:0.2s;
}
@keyframes card7{
  0%{
    opacity: 0;
    transform: translate3d(300px,-60px,-1000px);
    z-index: 1;
  }
  90%{
    z-index: 1;
  }
  95%{
    z-index: 1;
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translate3d(0,0,0);
    z-index: 1;
  }
}
.page2 .card .i5{
  opacity: 0;
  height: 22px;
  top: 445px;
  transition: all 0.2s;
  transition-delay: 0.2s;
}
.page2 .card.active .i5{
  top: 298px;
  height: 166px;
  opacity: 1;
}

/*.page3 .slogan{
  opacity: 0;
  top: 200px;
  transition: all 0.3s;
}
.page3 .slogan.active{
  opacity: 1;
  top: 280px;
}*/
.page3 .slogan i{
  opacity: 0;
}
.page3 .slogan.active i{
  animation: bg3s1 0.1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.page3 .slogan.active .i2{
  animation-delay: 0.2s;
}
.page3 .slogan.active .i3{
  animation-delay: 0.4s;
}
@keyframes bg3s1{
    0%{
        opacity: 0;
        transform: scale(4) translate3d(-20px,0,1000px);
    }
    100%{
        opacity: 1;
        transform: scale(1) translate3d(0,0,0);
    }
}
.page3 .txt{
  opacity: 0;
  top: 660px;
  transition: all 0.3s;
  transition-delay: 0.2s;
}
.page3 .txt.active{
  opacity: 1;
  top: 520px;
}
.page3 .left .l1{
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.4s;
}
.page3 .left.active .l1{
  opacity: 1;
}
.page3 .right .r1{
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.4s;
}
.page3 .right.active .r1{
  opacity: 1;
}
.page3 .left .l2{
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.6s;
}
.page3 .left.active .l2{
  opacity: 1;
}
.page3 .right .r2{
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.6s;
}
.page3 .right.active .r2{
  opacity: 1;
}
.page3 .left .l3{
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.8s;
}
.page3 .left.active .l3{
  opacity: 1;
}
.page3 .right .r3{
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.8s;
}
.page3 .right.active .r3{
  opacity: 1;
}

.page4 .m{
  margin-left: -716px;
  opacity: 0;
  transition: all 0.3s;
}
.page4 .m.active{
  margin-left: -666px;
  opacity: 1;
}
.page4 .swiper{
  margin-left: 100px;
  opacity: 0;
  transition: all 0.3s;
}
.page4 .swiper.active{
  margin-left: 50px;
  opacity: 1;
}
.page4 .swiper.active .right{
  animation: jt 1s infinite linear;
  animation-delay: 1s;
}
@keyframes jt{
  0%{
    right: -40px;
  }
  50%{
    right: -50px;
  }
  100%{
    right: -40px;
  }
}

.page5 .txtz1{
  opacity: 0;
  top: 280px;
  transition: all 0.3s;
}
.page5 .txtz1.active{
  opacity: 1;
  top: 150px;
}
.page5 .txtz2{
  opacity: 0;
  top: 618px;
  transition: all 0.3s;
}
.page5 .txtz2.active{
  opacity: 1;
  top: 488px;
}

.page6 .st{
  opacity: 0;
  top: 142px;
  transition: all 0.3s;
  transition-delay: 0.2s;
}
.page6 .st.active{
  opacity: 1;
  top: 44px;
}
.page6 .link{
  opacity: 0;
  top: 242px;
  transition: all 0.3s;
  transition-delay: 0.2s;
}
.page6 .link.active{
  opacity: 1;
  top: 130px;
}
.page6 .btn{
  opacity: 0;
  top: 840px;
  transition: all 0.3s;
  transition-delay: 0.2s;
}
.page6 .btn.active{
  opacity: 1;
  top: 708px;
}