/* INIT */
/* SYSTEM */
.event01-01 {
  opacity: 0;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.event02-01 {
  opacity: 0;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/* ANIMATION */
/* eventDUCTION */
.on.event01-01 {
  animation: ef01 .4s ease-out 0s forwards;
}

.on.event02-01 {
  animation: ef01 .4s ease-out 0s forwards;
}

/* KEYFRAME */
/* MAIN */
@keyframes main01 {
  0% {
    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100% {
    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@keyframes main02 {
  0% {
    display: block;
    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100% {
    display: block;
    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

/* OTHER */
@keyframes ef01 {
  0% {
    transform: translateY(5%);
    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100% {
    transform: translateY(0);
    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@keyframes ef02 {
  0% {
    transform: translateY(10%);
    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100% {
    transform: translateY(0);
    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}

@keyframes ef03 {
  0% {
    transform: translateY(15px);
    opacity: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  }
  100% {
    transform: translateY(0);
    opacity: 1;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  }
}