.centerAll {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mainBG {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  color: #ffffff;
}

#mainBG .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("/img/wave.png");
  background-size: 1000px 100px;
}

#mainBG .wave.wave1 {
  animation: wave-animate 30s linear infinite;
  z-index: 303;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
#mainBG .wave.wave2 {
  animation: wave-animate2 15s linear infinite;
  z-index: 302;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}
#mainBG .wave.wave3 {
  animation: wave-animate 30s linear infinite;
  z-index: 301;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15;
}
#mainBG .wave.wave4 {
  animation: wave-animate2 5s linear infinite;
  z-index: 300;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 20px;
}

@keyframes wave-animate {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1000px;
  }
}

@keyframes wave-animate2 {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px;
  }
}