.wave-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%; /* 물결의 길이를 두 배로 설정 */
  height: 100%;/*auto;*/
  animation: moveWaves 10s infinite linear;
  /* animation: moveWaves 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite; */
}

.wave1 {
  opacity: 0.9;
  animation-delay: 0s;
  animation-duration: 12s;
}

.wave2 {
  opacity: 0.7;
  animation-delay: 0s;
  animation-duration: 20s;
  animation-direction: reverse;
}

.wave3 {
  opacity: 0.5;
  animation-delay: 0s;
  animation-duration: 30s;
}

.wave4 {
  opacity: 0.4;
  animation-delay: 0s;
  animation-duration: 10s;
  animation-direction: reverse;
}

/* 애니메이션 */
@keyframes moveWaves {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
