/* INIT */
/* SYSTEM */
.system01-01,.system02-01,.system02-02,.system03-01,.system03-02 {
  opacity: 0;

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

/* ANIMATION */
/* systemDUCTION */
.on.system01-01,.on.system02-01,.on.system02-02,.on.system03-01,.on.system03-02 {
  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)";
  }
}