/* fv-img */
@media (min-width: 1024px) {
  .fv::after {
    opacity: 0; 
    animation: fvImg 1s .5s forwards;
  }
}
@media (max-width: 1023px) {
  .fv__box::before,
  .fv__box::after {
    opacity: 0; 
    animation: fvImg 1s .5s forwards;
  }
}
@keyframes fvImg {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
/* fv-bubble end */

/* fv-bubble */
.fv__more-bubble li { position: absolute; opacity: 0; width: 18px; top: 198px; right: 0;}
/* .fv__more-bubble li:nth-child(1) { width: 32px; top: 0; left: 0;}
.fv__more-bubble li:nth-child(2) { width: 32px; top: 42px; right: 0;}
.fv__more-bubble li:nth-child(3) { width: 32px; top: 80px; left: 0;}
.fv__more-bubble li:nth-child(4) { width: 24px; top: 126px; right: 8px;}
.fv__more-bubble li:nth-child(5) { width: 18px; top: 152px; left: 14px;} */
.fv__more-bubble li:nth-child(1) { animation: fvBubble 5s linear infinite;}
.fv__more-bubble li:nth-child(2) { animation: fvBubble 5s 1s linear infinite;}
.fv__more-bubble li:nth-child(3) { animation: fvBubble 5s 2s linear infinite;}
.fv__more-bubble li:nth-child(4) { animation: fvBubble 5s 3s linear infinite;}
.fv__more-bubble li:nth-child(5) { animation: fvBubble 5s 4s linear infinite;}
@keyframes fvBubble {
  0%   { opacity: 0; width: 18px; top: 198px; right: 0;}
  20%  { opacity: 1; width: 18px; top: 152px; right: 33px;}
  40%  { opacity: 1; width: 24px; top: 126px; right: 8px;}
  60%  { opacity: 1; width: 32px; top: 80px; right: 33px;}
  80%  { opacity: 1; width: 32px; top: 42px; right: 0;}
  100% { opacity: 0; width: 32px; top: 0; right: 33px;}
}
@keyframes fvBubble1 {
  0% { opacity: .8; transform: translate(50%, 50%);}
  75% { opacity: 0; transform: translate(0, 0);}
  100% { opacity: 0; transform: translate(0, 0);}
}
@keyframes fvBubble2 {
  0% { opacity: 1; top: 80px; right: 32px;}
  50% { opacity: 1; top: 42px; right: 0;}
  100% {opacity: 0; top: 0; right: 32px;}
}
@keyframes fvBubble3 {
  0% { width: 24px; top: 126px; right: 0;}
  50% { width: 32px; top: 80px; right: 32px;}
  100% { width: 32px; top: 42px; right: 0;}
}
@keyframes fvBubble4 {
  0% { width: 18px; top: 152px; right: 32px;}
  50% { width: 24px; top: 126px; right: 8px;}
  100% { width: 32px; top: 80px; right: 32px;}
}
@keyframes fvBubble5 {
  0% { opacity: 0; width: 18px; top: 198px; right: 0;}
  50% { opacity: 1; width: 18px; top: 152px; right: 32px;}
  100% { opacity: 1; width: 24px; top: 126px; right: 8px;}
}
/* fv-bubble end */

/* about */
@media (min-width: 1024px) {
  .about__box::after {
    transform: translateY(50%) scale(.99);
  }
  .about__box.on::after {
    animation: aboutBubble 4s linear forwards;
  }
  .about__box.on-next::after {
    animation: aboutBubbleNext 4s linear infinite;
  }
}
@media (max-width: 1023px) {
  .about__wrap::after {
    transform: translateY(50%) scale(.99);
  }
  .about__wrap.on::after {
    animation: aboutBubble 4s linear forwards;
  }
  .about__wrap.on-next::after {
    animation: aboutBubbleNext 4s linear infinite;
  }
}
@keyframes aboutBubble {
  0% { transform: translateY(50%) scale(.99); }
  35% { transform: scale(1);}
  70% { transform: scale(.99);}
  100% {transform: translateY(0%) scale(1);}
}
@keyframes aboutBubbleNext {
  0% {transform: translateY(0) scale(1);}
  50% { transform: translateY(16px) scale(.99); }
  100% {transform: translateY(0) scale(1);}
}
/* about end */