// /* CSS波浪效果 */

// .ripple {
//     height: 1px;
//     background-image: linear-gradient(to top, #2580b3 55%, #ffe6fa 100%);
//     color: white;
//     .waves {
//         position: relative;
//         width: 100%;
//         height: 15%;
//         margin-bottom: -7px;
//         /*Fix for safari gap*/
//         min-height: 80px;
//         max-height: 150px;
//         transform: translateY(-100%);
//         z-index: 2;
//     }

//     .content {
//         position: relative;
//         height: 20vh;
//         text-align: center;
//         background-color: #fff;
//     }

//     /* Animation */
//     .parallax > use {
//         fill: rgba(249, 249, 249, 0.7);
//         animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
//         transition: all 0.3s;
//     }

//     .parallax > use:nth-child(1) {
//         animation-delay: -2s;
//         animation-duration: 7s;
//     }

//     .parallax > use:nth-child(2) {
//         animation-delay: -3s;
//         animation-duration: 10s;
//     }

//     .parallax > use:nth-child(3) {
//         animation-delay: -4s;
//         animation-duration: 13s;
//     }

//     .parallax > use:nth-child(4) {
//         animation-delay: -5s;
//         animation-duration: 20s;
//     }

//     @keyframes move-forever {
//         0% {
//             transform: translate3d(-90px, 0, 0);
//         }

//         100% {
//             transform: translate3d(85px, 0, 0);
//         }
//     }

//     /*适配移动端*/
//     @media (max-width: 768px) {
//         .waves {
//             height: 40px;
//             min-height: 40px;
//         }

//         h1 {
//             font-size: 24px;
//         }
//     }
// }

.ripple {
  background-image: linear-gradient(to top, #ffe6fa, transparent);
}

.waves {
  position: relative;
  width: 100%;
  margin-bottom: -30px;
  min-height: 30px;
  max-height: 30px;
  transform: translateY(-100%);
  z-index: 2;
}

@media screen and (max-width: 800px) {
  .record {
    box-sizing: border-box;
    padding: 1rem;

    .gongAn {
      display: flex;
      flex-direction: column;
    }
  }
}

.parallax > use {
  /* 使use元素执行move-forever动画 */
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax > use:nth-child(1) {
  /* 延迟2秒启动动画  */
  animation-delay: -2s;
  /* 设置动画持续时间为7秒 */
  animation-duration: 7s;
}

.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/*适配移动端*/
@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px;
  }

  h1 {
    font-size: 24px;
  }
}
