/* INIT */
/* PRODUCT */
/* 
.productBox02 {
  opacity: 0;
}

.productBox03 {
  opacity: 0;
}

.productBox04 {
  opacity: 0;
}

.productBox05 {
  opacity: 0;
}
*/
/* ANIMATION */
/* PRODUCT */
.on.productBox01 {
  animation: ef01 .4s ease-out 0s forwards;
}

.on.productBox02 {
  animation: ef03 .6s ease-out 0s forwards;
}

.on.productBox03 {
  animation: ef03 .6s ease-out 0s forwards;
}

.on.productBox04 {
  animation: ef03 .6s ease-out 0s forwards;
}

.on.productBox05 {
  animation: ef03 .6s ease-out 0s forwards;
}

/* KEYFRAME */
/* 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)";
  }
}