@keyframes scroll-icon{
      0% {
        -webkit-transform:translateY(-40px);
        transform: translateY(-40px);
        opacity: 0;
      }
      30%, 70% {
        opacity: 1;
      }
      100% {
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
        opacity: 1;
      }
      ;
    }
    .scroll-icon{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      z-index:6;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      height:60px;
      width:1px;
      font-size:22px;
      -webkit-transition:.4s;
      transition:.4s;
      overflow:hidden;
    }
    .scroll-icon::after{
      content:'';
      width:1px;
      height:60px;
      background-color:#2e3c66;
      -webkit-animation:scroll-icon 3s infinite cubic-bezier(0.72, 0.02, 0.4, 0.78);
      animation:scroll-icon 3s infinite cubic-bezier(0.72, 0.02, 0.4, 0.78);
    }
.shu_box{
  width:100%;
  height:60px;
  overflow:hidden;
}

    @media only screen and (min-width: 1024px){
      .scroll-icon{
        height:60px;
      }
      .scroll-icon::after{
        height:60px;
      }

    }
    @media only screen and (max-width: 1024px) and (min-width: 769px){
      .scroll-icon{
        height:60px;
        -webkit-transition:.9s;
        transition:.9s;
      }
      .scroll-icon::after{
        height:60px;
        -webkit-animation:scroll-icon 3s infinite cubic-bezier(0.72, 0.02, 0.9, 0.78);
        animation:scroll-icon 3s infinite cubic-bezier(0.72, 0.02, 0.9, 0.78);
      }

    }
    @media only screen and (max-width: 768px){
      .scroll-icon{
        height:40px;
      }
      .scroll-icon::after{
        height:40px;
      }
    }