body {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .page-wpr {
    width: 100%;
    position: relative;
  }
  
  .page-wpr .top {
    width: 100%;
    height: 50px;
    margin-top: -1px;
  }
  
  * {
    font-family: '微软雅黑';
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 100% auto;
  }
  
  .container {
    width: 100%;
  }
  
  .main {
    width: 100%;
    height: 4700px;
    position: relative;
    background-image: url(//resource.a0bi.com/aola/act/12vip/res/images/bg.jpg?__hash=73ea15);
  }
  
  .animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
  }
  
  .btn {
    cursor: pointer;
    transition: all .3s ease;
  }
  
  .btn:hover {
    transform: translate(0, -5px);
  }
  
  [v-cloak] {
    display: none;
  }
  
  /**css3**/
  @-webkit-keyframes circle {
    0% {
      transform: rotate(0deg)
    }
  
    100% {
      transform: rotate(360deg)
    }
  }
  
  @keyframes circle {
    0% {
      transform: rotate(0deg)
    }
  
    100% {
      transform: rotate(360deg)
    }
  }
  
  @-webkit-keyframes showBig {
    0% {
      -webkit-transform: scale(0)
    }
  
    100% {
      -webkit-transform: scale(1)
    }
  }
  
  @keyframes showBig {
    0% {
      transform: scale(0)
    }
  
    100% {
      transform: scale(1)
    }
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }
  
  @-webkit-keyframes bounceInLeft {
    0%,
    100%,
    60%,
    75%,
    90% {
      -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
      transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-3000px, 0, 0);
      transform: translate3d(-3000px, 0, 0)
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(25px, 0, 0);
      transform: translate3d(25px, 0, 0)
    }
    75% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0)
    }
    90% {
      -webkit-transform: translate3d(5px, 0, 0);
      transform: translate3d(5px, 0, 0)
    }
    100% {
      -webkit-transform: none;
      transform: none
    }
  }
  
  @keyframes bounceInLeft {
    0%,
    100%,
    60%,
    75%,
    90% {
      -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
      transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-3000px, 0, 0);
      transform: translate3d(-3000px, 0, 0)
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(25px, 0, 0);
      transform: translate3d(25px, 0, 0)
    }
    75% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0)
    }
    90% {
      -webkit-transform: translate3d(5px, 0, 0);
      transform: translate3d(5px, 0, 0)
    }
    100% {
      -webkit-transform: none;
      transform: none
    }
  }
  
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0)
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none
    }
  }