:root {
    --ease-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  
  .fadeup {
    -webkit-transform: translateY(5vw) scale(1);
    transform: translateY(5vw) scale(1);
    -webkit-transition-duration: .6s;
    transition-duration: .6s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
    transition-property: opacity, -webkit-transform, -webkit-filter;
    transition-property: transform, opacity, filter;
    transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    opacity: 0;
    will-change: transform, opacity;
}

.fadeup.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

.delay01 {
    transition-delay: calc(0.15s * 1)!important;
    opacity: 0;
}

.delay02 {
    transition-delay: calc(0.15s * 2)!important;
    opacity: 0;
}

.delay03 {
    transition-delay: calc(0.15s * 3)!important;
    opacity: 0;
}

.delay04 {
    transition-delay: calc(0.15s * 4)!important;
    opacity: 0;
}

.delay05 {
    transition-delay: calc(0.15s * 5)!important;
    opacity: 0;
}

.delay06 {
    transition-delay: calc(0.15s * 6);
    opacity: 0;
}

.poyopoyo {
    animation: poyopoyo 1s infinite;
    display: block;
}

@keyframes poyopoyo {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


/*fadeUpblur */
.fadeUpblur {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(10px);
    transition: opacity 0.6s var(--ease-in-out), filter 0.6s var(--ease-in-out),
      transform 0.6s var(--ease-in-out);
  }
  .active.fadeUpblur {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
  

  
.reflection:after {
    content:"";
    height:100%;
    width:30px;
    position:absolute;
    top:-180px;
    left:0;
    background-color: #fff;
    opacity:0;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 3s ease-in-out infinite;
    }
       
    @keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
    }


@keyframes fadeInScale {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .fadein-scale.active {
    opacity: 0; 
    transform: scale(0.8); 
    animation: fadeInScale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1.26) forwards;
    animation-delay: 0.2s; 
    will-change: opacity, transform;
  }