/* -----------------------
  serum
----------------------- */
.serum {
  position: relative;
}

.serum .loop01 {
  top: min(calc(200/ 750 * 100vw), 200px);
  animation: scrollLoop 20s linear infinite;
}

.serum .loop02 {
  top: min(calc(388/ 750 * 100vw), 388px);
  animation: loopReverse 20s linear infinite;
}

.serum .loop>p {
  width: min(calc(3074/ 768 * 100vw), 3074px);
}

@keyframes loopReverse {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.serum_pic {
  position: relative;
  z-index: 2;
}

.serum_bubble span {
  position: absolute;
  animation: floatBubble 4s ease-in-out infinite;
}

@keyframes floatBubble {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-40px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes floatBubbleDw {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(40px);
  }

  100% {
    transform: translateY(0);
  }
}

.serum_bubble span:nth-child(1) {
  width: min(calc(80/ 768 * 100vw), 80px);
  top: min(calc(342/ 768 * 100vw), 342px);
  left: min(calc(62/ 768 * 100vw), 62px);
  animation-duration: 2s;
}


.serum_bubble span:nth-child(2) {
  width: min(calc(204/ 768 * 100vw), 204px);
  bottom: min(calc(75/ 768 * 100vw), 75px);
  right: min(calc(65/ 768 * 100vw), 65px);
  animation: floatBubbleDw 4s ease-in-out infinite;
}

.serum_bubble span:nth-child(3) {
  width: min(calc(270/ 768 * 100vw), 270px);
  top: min(calc(152/ 768 * 100vw), 152px);
  left: min(calc(72/ 768 * 100vw), 72px);
  animation-duration: 4.5s;
}

.serum_bubble span:nth-child(4) {
  width: min(calc(122/ 768 * 100vw), 122px);
  top: min(calc(82/ 768 * 100vw), 82px);
  right: min(calc(185/ 768 * 100vw), 185px);
  animation: floatBubbleDw 5s ease-in-out infinite;
}