@charset "utf-8";

/*=================================================================*/
/*  animation
/*=================================================================*/

.charm .topTxt,
.charm .leftSlide,
.charm .detailLink,
.charm .rightSlide,
.charm .charmList,
.slogan,
.lrFadeIn_l_3,
.lrFadeIn_l_2,
.topicsWrap .col2,
.topicsWrap .col4,
.lrFadeIn_l_2,
.lrFadeIn_r_2,
.upFadeIn_1,
.upFadeIn_2,
.snsWrap .youtube,
.snsWrap .instagram,
.school .menuWrap { opacity: 0; }

.charm .topTxt.on { animation: lrFadeIn_l 0.6s ease-out 0.1s forwards; }
.charm .leftSlide.on { animation: lrFadeIn_l 0.6s ease-out 0.5s forwards; }
.charm .detailLink.on { animation: lrFadeIn_l 0.6s ease-out 0.5s forwards; }
.charm .rightSlide.on { animation: lrFadeIn_r 0.6s ease-out 0.3s forwards; }
.charm .charmList.on { animation: lrFadeIn_l 0.6s ease-out 0.7s forwards; }
.slogan.on { animation: upFadeIn 0.6s ease-out 1.6s forwards; }
.lrFadeIn_l_3.on,
.lrFadeIn_l_2.on { animation: lrFadeIn_l 0.6s ease-out 0.2s forwards; }
.topicsWrap .col2.on { animation: upFadeIn 0.6s ease-out 0.2s forwards; }
.topicsWrap .col4.on { animation: upFadeIn 0.6s ease-out 0.2s forwards; }
.lrFadeIn_r_2.on { animation: lrFadeIn_r 0.6s ease-out 0.2s forwards; }

.upFadeIn_1.on { animation: upFadeIn 0.6s ease-out 0.1s forwards; }
.upFadeIn_2.on { animation: upFadeIn 0.6s ease-out 0.2s forwards; }
.snsWrap .youtube.on { animation: lrFadeIn_l 0.6s ease-out 0.5s forwards; }
.snsWrap .instagram.on { animation: lrFadeIn_r 0.6s ease-out 0.5s forwards; }
.school .menuWrap.on { animation: upFadeIn 0.6s ease-out 0.5s forwards; }

@keyframes fadein {
  from {
      opacity: 0;
      transform: scale(0.9);
  }
  to {
      opacity: 1;
      transform: scale(1.0);
  }
}

@keyframes fadein02 {
  from {
      opacity: 0;
      transform: scale(1.05);
  }
  to {
      opacity: 1;
      transform: scale(1.0);
  }
}

@keyframes upFadeIn {
  from {
      opacity: 0;
      transform: scale(0.9);
      transform: translate(0,15px);
  }
  to {
      opacity: 1;
      transform: scale(1.0);
      transform: translate(0,0)
  }
}

@keyframes lrFadeIn_l {
  from {
      opacity: 0;
      transform: scale(0.9);
      transform: translate(-15px,0);
  }
  to {
      opacity: 1;
      transform: scale(1.0);
      transform: translate(0,0)
  }
}

@keyframes lrFadeIn_r {
  from {
      opacity: 0;
      transform: scale(0.9);
      transform: translate(15px,0);
  }
  to {
      opacity: 1;
      transform: scale(1.0);
      transform: translate(0,0)
  }
}

@media screen and (max-width: 768px) {
/*<start>==========================================================*/

.slogan.on { animation: upFadeIn 0.6s ease-out 0.4s forwards; }

/*<end>============================================================*/
}