@keyframes loding{
    0% {
      -webkit-transform: scaley(1);
      transform: scaley(1);
    }
    80% {
      -webkit-transform: scaley(0.3);
      transform: scaley(0.3);
    }
    90% {
      -webkit-transform: scaley(1);
      transform: scaley(1);
    }
  }
  main {
    padding: 0;
    margin: 0;
    font-size: 16px;
    background-color: #fff;
    color: #fff;
    position: fixed;
    width: 100%;
    height:100vh;
    top: 0;
    left: 0;
    z-index: 9999999;
  }
  .loding {
    max-width: 397px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 20%;
    text-align:center;
  }
  .loding .loding_line {
    text-align: center;
    margin-top: 30px;
  }
  .loding_line>div {
    background-color:#999;
    width: 10px;
    height:5px;
    border-radius: 0;
    margin: 1px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation: loding 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
    animation: loding 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
  }
  .loding_line>div:nth-child(1), .loding_line>div:nth-child(5) {
    -webkit-animation-delay: 0.5s !important;
    animation-delay: 0.5s !important;
  }



  @keyframes scroll-icon{
    0% {
      -webkit-transform:translateY(-12px);
      transform: translateY(-12px);
      opacity: 0;
    }
    30%, 70% {
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(12px);
      transform: translateY(12px);
      opacity: 0;
    };
  }