@charset "UTF-8";

/*//////////////////////////////////////////////////

CSS Snidel Beauty Kakao

//////////////////////////////////////////////////*/

/* SVG01 */

@-webkit-keyframes svg01_animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

@keyframes svg01_animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

.js-svg.is-active .svg-elem1-1 {
  -webkit-animation: svg01_animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: svg01_animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes svg01_animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

@keyframes svg01_animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

.js-svg.is-active .svg-elem1-2 {
  -webkit-animation: svg01_animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8500000000000001s both;
          animation: svg01_animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8500000000000001s both;
}

@-webkit-keyframes svg01_animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

@keyframes svg01_animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

.js-svg.is-active .svg-elem1-3 {
  -webkit-animation: svg01_animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
          animation: svg01_animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes svg01_animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

@keyframes svg01_animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

.js-svg.is-active .svg-elem1-4 {
  -webkit-animation: svg01_animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9500000000000001s both;
          animation: svg01_animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9500000000000001s both;
}

@-webkit-keyframes svg01_animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

@keyframes svg01_animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

.js-svg.is-active .svg-elem1-5 {
  -webkit-animation: svg01_animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: svg01_animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes svg01_animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

@keyframes svg01_animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

.js-svg.is-active .svg-elem1-6 {
  -webkit-animation: svg01_animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s both;
          animation: svg01_animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s both;
}

@-webkit-keyframes svg01_animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

@keyframes svg01_animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(247,175,15);
  }
}

.js-svg.is-active .svg-elem1-7 {
  -webkit-animation: svg01_animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
          animation: svg01_animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}



/* SVG02 */
@-webkit-keyframes svg02_animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

@keyframes svg02_animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

.js-svg.is-active .svg-elem2-1 {
  -webkit-animation: svg02_animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: svg02_animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes svg02_animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

@keyframes svg02_animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

.js-svg.is-active .svg-elem2-2 {
  -webkit-animation: svg02_animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8500000000000001s both;
          animation: svg02_animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8500000000000001s both;
}

@-webkit-keyframes svg02_animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

@keyframes svg02_animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

.js-svg.is-active .svg-elem2-3 {
  -webkit-animation: svg02_animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
          animation: svg02_animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes svg02_animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

@keyframes svg02_animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

.js-svg.is-active .svg-elem2-4 {
  -webkit-animation: svg02_animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9500000000000001s both;
          animation: svg02_animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9500000000000001s both;
}

@-webkit-keyframes svg02_animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

@keyframes svg02_animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

.js-svg.is-active .svg-elem2-5 {
  -webkit-animation: svg02_animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: svg02_animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes svg02_animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

@keyframes svg02_animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

.js-svg.is-active .svg-elem2-6 {
  -webkit-animation: svg02_animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s both;
          animation: svg02_animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s both;
}

@-webkit-keyframes svg02_animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

@keyframes svg02_animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(237,124,155);
  }
}

.js-svg.is-active .svg-elem2-7 {
  -webkit-animation: svg02_animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
          animation: svg02_animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}



/* ========================================================
                      * Fadeup  *
========================================================= */
.ef1 {
  opacity: 0;
  filter: blur(5px);
  transition:
    opacity 1.5s cubic-bezier(0.51, 0.21, 0.41, 1),
    filter 1.5s cubic-bezier(0.51, 0.21, 0.41, 1);
}

.ef1.is-active {
  opacity: 1;
  filter: blur(0);
}

.ef2,
.menu_list li .ef2 {
  opacity: 0;
  translate: 0 5svh;
  transition: opacity 1.8s ease, translate 1.5s ease;
}

.ef2.is-active,
.menu_list li .nav_img.ef2.is-active {
  opacity: 1;
  translate: 0 0;
}

.menu_list li:nth-of-type(2) .nav_img.ef2.is-active  { transition-delay: 0.5s; }
.menu_list li:nth-of-type(3) .nav_img.ef2.is-active { transition-delay: 1s; }

.sec_mv .menu_list li .nav_img {
  animation: 3s ease-in-out 0s infinite normal none running fuwafuwa;
}
@keyframes fuwafuwa {
  0% , 100%{
      transform: translateY(0);
  }
  50%{
      transform: translateY(calc(20*calc(100vw / 1400)
*calc(468 / 780)));
  }
}