body,
html {
  margin: 0;
  padding: 0;
  background: url(../img/welcome_bg.jpeg) center;
  width: 100%;
  height: 100%;
}

.div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -145px;
  width: 290px;
  height: 438px;
  margin-top: -219px;
  z-index: 999;
}

.div1 {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -44px;
  width: 100px;
  height: 80px;
}


.zzsc1 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -335px;
  margin-top: -20px;
  width: 670px;
  height: 80px;
  text-align: center;
  font-size: 10px;
}

.zzsc1>div {
  background-color: #fff;
  height: 100%;
  width: 2px;
  margin-right: 1px;

  display: inline-block;

  -webkit-animation: stretchdelay 7.2s infinite ease-in-out;
  animation: stretchdelay 7.2s infinite ease-in-out;
}

.zzsc1 .rect2 {
  -webkit-animation-delay: -7.1s;
  animation-delay: -7.1s;
}

.zzsc1 .rect3 {
  -webkit-animation-delay: -7.0s;
  animation-delay: -7.0s;
}

.zzsc1 .rect4 {
  -webkit-animation-delay: -6.9s;
  animation-delay: -6.9s;
}

.zzsc1 .rect5 {
  -webkit-animation-delay: -6.8s;
  animation-delay: -6.8s;
}

.zzsc1 .rect6 {
  -webkit-animation-delay: -6.7s;
  animation-delay: -6.7s;
}

.zzsc1 .rect7 {
  -webkit-animation-delay: -6.6s;
  animation-delay: -6.6s;
}

.zzsc1 .rect8 {
  -webkit-animation-delay: -6.5s;
  animation-delay: -6.5s;
}

.zzsc1 .rect9 {
  -webkit-animation-delay: -6.4s;
  animation-delay: -6.4s;
}

.zzsc1 .rect10 {
  -webkit-animation-delay: -6.3s;
  animation-delay: -6.3s;
}

.zzsc1 .rect11 {
  -webkit-animation-delay: -6.2s;
  animation-delay: -6.2s;
}

.zzsc1 .rect12 {
  -webkit-animation-delay: -6.1s;
  animation-delay: -6.1s;
}

.zzsc1 .rect13 {
  -webkit-animation-delay: -6.0s;
  animation-delay: -6.0s;
}

.zzsc1 .rect14 {
  -webkit-animation-delay: -5.9s;
  animation-delay: -5.9s;
}

.zzsc1 .rect15 {
  -webkit-animation-delay: -5.8s;
  animation-delay: -5.8s;
}

.zzsc1 .rect16 {
  -webkit-animation-delay: -5.7s;
  animation-delay: -5.7s;
}

.zzsc1 .rect17 {
  -webkit-animation-delay: -5.6s;
  animation-delay: -5.6s;
}

.zzsc1 .rect18 {
  -webkit-animation-delay: -5.5s;
  animation-delay: -5.5s;
}

.zzsc1 .rect19 {
  -webkit-animation-delay: -5.4s;
  animation-delay: -5.4s;
}

.zzsc1 .rect20 {
  -webkit-animation-delay: -5.3s;
  animation-delay: -5.3s;
}

.zzsc1 .rect21 {
  -webkit-animation-delay: -5.2s;
  animation-delay: -5.2s;
}

.zzsc1 .rect22 {
  -webkit-animation-delay: -5.1s;
  animation-delay: -5.1s;
}

.zzsc1 .rect23 {
  -webkit-animation-delay: -5.0s;
  animation-delay: -5.0s;
}

.zzsc1 .rect24 {
  -webkit-animation-delay: -4.9s;
  animation-delay: -4.9s;
}

.zzsc1 .rect25 {
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.zzsc1 .rect26 {
  -webkit-animation-delay: -4.7s;
  animation-delay: -4.7s;
}

.zzsc1 .rect27 {
  -webkit-animation-delay: -4.6s;
  animation-delay: -4.6s;
}

.zzsc1 .rect28 {
  -webkit-animation-delay: -4.5s;
  animation-delay: -4.5s;
}

.zzsc1 .rect29 {
  -webkit-animation-delay: -4.4s;
  animation-delay: -4.4s;
}

.zzsc1 .rect30 {
  -webkit-animation-delay: -4.3s;
  animation-delay: -4.3s;
}

.zzsc1 .rect31 {
  -webkit-animation-delay: -4.2s;
  animation-delay: -4.2s;
}

.zzsc1 .rect32 {
  -webkit-animation-delay: -4.1s;
  animation-delay: -4.1s;
}

.zzsc1 .rect33 {
  -webkit-animation-delay: -4.0s;
  animation-delay: -4.0s;
}

.zzsc1 .rect34 {
  -webkit-animation-delay: -3.9s;
  animation-delay: -3.9s;
}

.zzsc1 .rect35 {
  -webkit-animation-delay: -3.8s;
  animation-delay: -3.8s;
}

.zzsc1 .rect36 {
  -webkit-animation-delay: -3.7s;
  animation-delay: -3.7s;
}

.zzsc1 .rect37 {
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.zzsc1 .rect38 {
  -webkit-animation-delay: -3.5s;
  animation-delay: -3.5s;
}

.zzsc1 .rect39 {
  -webkit-animation-delay: -3.4s;
  animation-delay: -3.4s;
}

.zzsc1 .rect40 {
  -webkit-animation-delay: -3.3s;
  animation-delay: -3.3s;
}

.zzsc1 .rect41 {
  -webkit-animation-delay: -3.2s;
  animation-delay: -3.2s;
}

.zzsc1 .rect42 {
  -webkit-animation-delay: -3.1s;
  animation-delay: -3.1s;
}

.zzsc1 .rect43 {
  -webkit-animation-delay: -3.0s;
  animation-delay: -3.0s;
}

.zzsc1 .rect44 {
  -webkit-animation-delay: -2.9s;
  animation-delay: -2.9s;
}

.zzsc1 .rect45 {
  -webkit-animation-delay: -2.8s;
  animation-delay: -2.8s;
}

.zzsc1 .rect46 {
  -webkit-animation-delay: -2.7s;
  animation-delay: -2.7s;
}

.zzsc1 .rect47 {
  -webkit-animation-delay: -2.6s;
  animation-delay: -2.6s;
}

.zzsc1 .rect48 {
  -webkit-animation-delay: -2.5s;
  animation-delay: -2.5s;
}

.zzsc1 .rect49 {
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.zzsc1 .rect50 {
  -webkit-animation-delay: -2.3s;
  animation-delay: -2.3s;
}

.zzsc1 .rect51 {
  -webkit-animation-delay: -2.2s;
  animation-delay: -2.2s;
}

.zzsc1 .rect52 {
  -webkit-animation-delay: -2.1s;
  animation-delay: -2.1s;
}

.zzsc1 .rect53 {
  -webkit-animation-delay: -2.0s;
  animation-delay: -2.0s;
}

.zzsc1 .rect54 {
  -webkit-animation-delay: -1.9s;
  animation-delay: -1.9s;
}

.zzsc1 .rect55 {
  -webkit-animation-delay: -1.8s;
  animation-delay: -1.8s;
}


.zzsc1 .rect56 {
  -webkit-animation-delay: -1.7s;
  animation-delay: -1.7s;
}

.zzsc1 .rect57 {
  -webkit-animation-delay: -1.6s;
  animation-delay: -1.6s;
}

.zzsc1 .rect58 {
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;
}

.zzsc1 .rect59 {
  -webkit-animation-delay: -1.4s;
  animation-delay: -1.4s;
}

.zzsc1 .rect60 {
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.3s;
}

.zzsc1 .rect61 {
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.zzsc1 .rect62 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.zzsc1 .rect63 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.zzsc1 .rect64 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.zzsc1 .rect65 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}


.zzsc1 .rect66 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.zzsc1 .rect67 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.zzsc1 .rect68 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.zzsc1 .rect69 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.zzsc1 .rect70 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.zzsc1 .rect71 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.zzsc1 .rect72 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}



@keyframes stretchdelay {
  0% {
    -webkit-transform: scaleY(0.4);
    background: #9a6ee4;
  }

  5% {
    -webkit-transform: scaleY(1.0);
    background: #9a6ee4;
  }

  8% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  10% {
    -webkit-transform: scaleY(0.8);
    background: #da6e6e;
  }

  12% {
    -webkit-transform: scaleY(0.6);
    background: #7cdcd2;
  }

  15% {
    -webkit-transform: scaleY(0.9);
    background: #9a6ee4;
  }

  18% {
    -webkit-transform: scaleY(0.3);
    background: #7cdcd2;
  }

  20% {
    -webkit-transform: scaleY(0.7);
    background: #da6e6e;
  }

  23% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  25% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  30% {
    -webkit-transform: scaleY(1.0);
    background: #9a6ee4;
  }

  33% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  36% {
    -webkit-transform: scaleY(0.9);
    background: #7cdcd2;
  }

  39% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  60% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  100% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }
}

@keyframes stretchdelay {
  0% {
    -webkit-transform: scaleY(0.4);
    background: #9a6ee4;
  }

  5% {
    -webkit-transform: scaleY(1.0);
    background: #9a6ee4;
  }

  8% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  10% {
    -webkit-transform: scaleY(0.8);
    background: #da6e6e;
  }

  12% {
    -webkit-transform: scaleY(0.6);
    background: #7cdcd2;
  }

  15% {
    -webkit-transform: scaleY(0.9);
    background: #9a6ee4;
  }

  18% {
    -webkit-transform: scaleY(0.3);
    background: #7cdcd2;
  }

  20% {
    -webkit-transform: scaleY(0.7);
    background: #da6e6e;
  }

  23% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  25% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  30% {
    -webkit-transform: scaleY(1.0);
    background: #9a6ee4;
  }

  33% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  36% {
    -webkit-transform: scaleY(0.9);
    background: #7cdcd2;
  }

  39% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  60% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }

  100% {
    -webkit-transform: scaleY(0.4);
    background: #7cdcd2;
  }
}