/* INIT */
/* MAIN */
.visualBg {
  opacity: 0;

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

.copy01 {
  opacity: 0;

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

h1 {
  opacity: 0;

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

.releaseday {
  opacity: 0;

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

.copy02 {
  opacity: 0;

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

.mainCont {
  display: none;
}

/* INTRODUCTION */
.intro01-01 {
  opacity: 0;

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

.intro01-02 {
  opacity: 0;

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

.intro02-01 {
  opacity: 0;

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

.intro03-01 {
  opacity: 0;

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

/* PRODUCT */
.productBox11 {
  opacity: 0;

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

.productBox01 {
  opacity: 0;

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

.productBox02 {
  opacity: 0;

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

.productBox03 {
  opacity: 0;

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

.productBox04 {
  opacity: 0;

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

.productBox05 {
  opacity: 0;

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

/* ANIMATION */
/* MAIN */
.on .visualBg {
  animation: main01 .6s ease-in 0s forwards;
}

.on h1 {
  animation: main01 .6s ease-in .8s forwards;
}

.on .copy02 {
  animation: main01 .6s ease-in 1.6s forwards;
}

.on .copy01,.on .releaseday {
  animation: main01 .4s ease-in 2.8s forwards;
}

.on .mainCont {
  display: block;
  animation: main02 .4s ease-in 2.8s forwards;
  opacity: 0;

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

/* INTRODUCTION */
.on.intro01-01 {
  animation: ef01 .4s ease-out 0s forwards;
}

.on.intro01-02 {
  animation: ef01 .4s ease-out 0s forwards;
}

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

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

/* PRODUCT */
.on.productBox11 {
  animation: ef03 .6s ease-out 0s forwards;
}

.on.productBox01 {
  animation: ef03 .6s 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 */
/* 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)";
  }
}