/* head-anime ---------------------------------------------------------------------------------------------- */
.fade0 {
  animation-name: fade0;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fade0 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade01-1 {
  animation-name: mv01-1;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fade01-2 {
  animation-name: mv01-2;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fade01-3 {
  animation-name: mv01-3;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes mv01-1 {
  0% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 100%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}
@keyframes mv01-2 {
  0% {
    opacity: 1;
    clip-path: inset(0% 0% 100% 0%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}
@keyframes mv01-3 {
  0% {
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    transform: scale(1.1);
    opacity: 0;
  }
  20% {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
  }
}
.fade02-1 {
  animation-name: mv02-1;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fade02-2 {
  animation-name: mv02-1;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes mv02-1 {
  0% {
    transform: translateX(-5%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
.fade03-1 {
  animation-name: mv03-1;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fade03-2 {
  animation-name: mv03-1;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes mv03-1 {
  0% {
    opacity: 1;
    clip-path: inset(0% 100% 0% 0%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}
.fade04-1 {
  animation-name: mv04-1;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fade04-2 {
  animation-name: mv04-1;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes mv04-1 {
  from {
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
  to {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
/* body-anime ---------------------------------------------------------------------------------------------- */
.pop01 {
  opacity: 0;
}

.pop01.active {
  animation-name: popup;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.pop02 {
  opacity: 0;
}

.pop02.active {
  animation-name: popup1;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.pop03 {
  opacity: 0;
}

.pop03.active {
  animation-name: popup2;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.pop04 {
  opacity: 0;
}

.pop04.active {
  animation-name: popup3;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.pop05 {
  opacity: 0;
}

.pop05.active {
  animation-name: popup4;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.pop06 {
  opacity: 0;
}

.pop06.active {
  animation-name: popup1;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.8s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.pop07 {
  opacity: 0;
}

.pop07.active {
  animation-name: popup;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.7s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.pop08 {
  opacity: 0;
}

.pop08.active {
  animation-name: popup1;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 2.1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes popup {
  0% {
    transform: translateY(10%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes popup1 {
  0% {
    opacity: 1;
    clip-path: inset(0% 100% 0% 0%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}
@keyframes popup2 {
  0% {
    opacity: 1;
    clip-path: inset(0% 0% 100% 0%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}
@keyframes popup3 {
  0% {
    transform: translateY(5%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes popup4 {
  from {
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    opacity: 0;
  }
  to {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
.img-ani01 {
  opacity: 0;
}

.img-ani01.active {
  animation-name: img-ani01;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes img-ani01 {
  0% {
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    opacity: 0;
    transform: translateY(3%);
  }
  100% {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0%);
  }
}
.img-ani02 {
  opacity: 0;
}

.img-ani02.active {
  animation-name: img-ani02;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.7s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes img-ani02 {
  0% {
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    opacity: 0;
    transform: translateX(3%);
  }
  100% {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
    transform: translateX(0%);
  }
}
.img-ani03 {
  opacity: 0;
}

.img-ani03.active {
  animation-name: img-ani03;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.7s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes img-ani03 {
  0% {
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    opacity: 0;
    transform: translateX(-3%);
  }
  100% {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
    transform: translateX(0%);
  }
}
.fadein-logo01 {
  opacity: 0;
}

.fadein-logo01.active {
  animation-name: fadein-logo01;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-logo01 {
  0% {
    opacity: 0;
    transform: translate(0);
  }
  100% {
    opacity: 1;
    transform: translate(5px, -5px);
  }
}
.fadein-logo02 {
  opacity: 0;
}

.fadein-logo02.active {
  animation-name: fadein-logo02;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-logo02 {
  0% {
    opacity: 0;
    transform: translate(0);
  }
  100% {
    opacity: 1;
    transform: translate(5px, -5px);
  }
}
.fadein-logo-e {
  opacity: 0;
}

.fadein-logo-e.active {
  opacity: 1;
  animation-name: fadein-logo-e;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-logo-e {
  from {
    clip-path: inset(0 100% 0% 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.out-ani {
  opacity: 0;
}

.out-ani.active {
  animation-name: icon-f;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes icon-f {
  0% {
    opacity: 1;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
.read-down {
  opacity: 1;
}

.read-down.active {
  opacity: 1;
  animation-name: read-down;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

@keyframes read-down {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(150%);
  }
}
.read-down02 {
  opacity: 0;
}

.read-down02.active {
  opacity: 0;
  animation-name: read-down02;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

@keyframes read-down02 {
  from {
    clip-path: inset(0% 0% 100% 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.fadein-up {
  opacity: 0;
}

.fadein-up.active {
  opacity: 1;
  animation-name: fadein-up;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-up {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadein-txt-w {
  opacity: 0;
}

.fadein-txt-w.active {
  opacity: 1;
  animation-name: fadein-txt-w;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-txt-w2 {
  opacity: 0;
}

.fadein-txt-w2.active {
  opacity: 1;
  animation-name: fadein-txt-w;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-txt-w3 {
  opacity: 0;
}

.fadein-txt-w3.active {
  opacity: 1;
  animation-name: fadein-txt-w;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-txt-w {
  from {
    clip-path: inset(0 100% 0% 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
@keyframes fadein-txt-w3 {
  from {
    clip-path: inset(0% 100% 100% 0%);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.fadein-txt-w-r {
  opacity: 0;
}

.fadein-txt-w-r.active {
  opacity: 1;
  animation-name: fadein-txt-w-r;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-txt-w-r02 {
  opacity: 0;
}

.fadein-txt-w-r02.active {
  opacity: 1;
  animation-name: fadein-txt-w-r;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-delay: 1.7s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-txt-w-r {
  from {
    clip-path: inset(0 0% 0% 100%);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.fadein-txt-up {
  opacity: 0;
}

.fadein-txt-up.active {
  opacity: 1;
  animation-name: fadein-txt-up;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-txt-up2 {
  opacity: 0;
}

.fadein-txt-up2.active {
  animation-name: fadein-txt-up;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-txt-up {
  from {
    clip-path: inset(0 0% 100% 0%);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
@keyframes fadein-txt-up2 {
  from {
    clip-path: inset(0 0% 100% 0%);
    opacity: 0;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.fadein-txt-c {
  opacity: 0;
}

.fadein-txt-c.active {
  opacity: 1;
  animation-name: fadein-txt-c;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-txt-c {
  from {
    clip-path: inset(0 100% 0% 100%);
    opacity: 0;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.fadein-txt-down {
  opacity: 0;
}

.fadein-txt-down.active {
  opacity: 1;
  animation-name: fadein-txt-down;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-txt-down {
  from {
    clip-path: inset(100% 0% 0% 0%);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.fadein-txt-b {
  opacity: 0;
}

.fadein-txt-b.active {
  opacity: 1;
  animation-name: fadein-txt-b;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-txt-b2 {
  opacity: 0;
}

.fadein-txt-b2.active {
  opacity: 1;
  animation-name: fadein-txt-b;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-txt-b {
  from {
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    opacity: 1;
  }
  to {
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
.fadein-up1 {
  opacity: 0;
}

.fadein-up1.active {
  opacity: 1;
  animation-name: fadein-up2;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-up2 {
  opacity: 0;
}

.fadein-up2.active {
  opacity: 1;
  animation-name: fadein-up4;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-up3 {
  opacity: 0;
}

.fadein-up3.active {
  opacity: 1;
  animation-name: fadein-up3;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.8s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-up4 {
  opacity: 0;
}

.fadein-up4.active {
  opacity: 1;
  animation-name: fadein-up4;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.8s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-up5 {
  opacity: 0;
}

.fadein-up5.active {
  opacity: 1;
  animation-name: fadein-up1;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 1.8s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-up6 {
  opacity: 0;
}

.fadein-up6.active {
  opacity: 1;
  animation-name: fadein-up1;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 2.1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-up7 {
  opacity: 1;
}

.fadein-up7.active {
  animation-name: fadein-up2;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes fadein-up1 {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fadein-up2 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fadein-up3 {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fadein-up4 {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
.img-up {
  opacity: 0;
}

.img-up.active {
  opacity: 1;
  animation-name: img-up;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.img-up02 {
  opacity: 0;
}

.img-up02.active {
  opacity: 1;
  animation-name: img-up;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes img-up {
  0% {
    opacity: 0;
    transform: scale(1.3) rotate(-45deg);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
.img-down {
  opacity: 0;
}

.img-down.active {
  opacity: 1;
  animation-name: img-down;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes img-down {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.line-down {
  opacity: 0;
}

.line-down.active {
  opacity: 1;
  animation-name: img-down;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 2.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes img-down {
  0% {
    opacity: 0;
    transform: translateY(-120px);
  }
  100% {
    opacity: 1;
    transform: translateY(120px);
  }
}
.fadein-l {
  opacity: 0;
}

.fadein-l.active {
  opacity: 1;
  animation-name: fadein-l;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-l2 {
  opacity: 0;
}

.fadein-l2.active {
  opacity: 1;
  animation-name: fadein-l;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-l3 {
  opacity: 0;
}

.fadein-l3.active {
  opacity: 1;
  animation-name: fadein-l;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 2.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-l4 {
  opacity: 0;
}

.fadein-l4.active {
  opacity: 1;
  animation-name: fadein-l2;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-l5 {
  opacity: 0;
}

.fadein-l5.active {
  opacity: 1;
  animation-name: fadein-l2;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.fadein-l6 {
  opacity: 0;
}

.fadein-l6.active {
  opacity: 1;
  animation-name: fadein-l2;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 2.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-l {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes fadein-l2 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadein-l3 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadein-r {
  opacity: 0;
}

.fadein-r.active {
  opacity: 1;
  animation-name: fadein-r;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-r {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
.fadein-up-zoom {
  opacity: 0;
}

.fadein-up-zoom.active {
  opacity: 1;
  animation-name: fadein-up-zoom;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-up-zoom {
  0% {
    opacity: 0;
    transform: scale(1.03) translateY(50px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}
.fadein-bg {
  opacity: 0;
}

.fadein-bg.active {
  opacity: 1;
  animation-name: fadein-bg;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-bg {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
.color-ani01 {
  opacity: 0;
}

.color-ani01.active {
  opacity: 1;
  animation-name: color-ani01;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes color-ani01 {
  0% {
    opacity: 1;
    color: #fff;
  }
  100% {
    opacity: 1;
    color: #8cb9bc;
  }
}
.color-ani02 {
  opacity: 0;
}

.color-ani02.active {
  opacity: 1;
  animation-name: color-ani02;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes color-ani02 {
  0% {
    opacity: 1;
    color: #000;
  }
  100% {
    opacity: 1;
    color: #d66e9c;
  }
}
.fadein-zoom {
  opacity: 0;
}

.fadein-zoom.active {
  opacity: 1;
  animation-name: fadein-zoom;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein-zoom {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.on-txt-ani {
  opacity: 0;
}

.on-txt-ani.active {
  opacity: 1;
  animation-name: on-txt-ani;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes on-txt-ani {
  from {
    clip-path: inset(0 100% 100% 0 round 0 0 800px 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.icon-ani {
  opacity: 0;
}

.icon-ani.active {
  opacity: 0;
  animation-name: icon-ani;
  animation-duration: 0.4s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

@keyframes icon-ani {
  0% {
    opacity: 0;
    transform: translateY(20px) rotate(30deg) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}
.txt-ani01 {
  opacity: 0;
}

.txt-ani01.active {
  animation-name: txt-ani;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.txt-ani02 {
  opacity: 0;
}

.txt-ani02.active {
  animation-name: txt-ani;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.txt-ani03 {
  opacity: 0;
}

.txt-ani03.active {
  opacity: 1;
  animation-name: txt-ani;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.9s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.txt-ani04 {
  opacity: 0;
}

.txt-ani04.active {
  opacity: 1;
  animation-name: txt-ani;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1.1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.txt-ani05 {
  opacity: 0;
}

.txt-ani05.active {
  opacity: 1;
  animation-name: txt-ani;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1.3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

.txt-ani06 {
  opacity: 0;
}

.txt-ani06.active {
  opacity: 1;
  animation-name: txt-ani;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes txt-ani {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.t-line-ani01 {
  opacity: 0;
}

.t-line-ani01.active {
  opacity: 1;
  animation-name: t-line-ani01;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes t-line-ani01 {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.t-line-ani02 {
  opacity: 0;
}

.t-line-ani02.active {
  opacity: 1;
  animation-name: t-line-ani02;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes t-line-ani02 {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.t-line-ani03 {
  opacity: 0;
}

.t-line-ani03.active {
  opacity: 1;
  animation-name: t-line-ani03;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes t-line-ani03 {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
.t-line-ani04 {
  opacity: 0;
}

.t-line-ani04.active {
  opacity: 1;
  animation-name: t-line-ani04;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes t-line-ani04 {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
.logo-ani01 {
  opacity: 0;
}

.logo-ani01.active {
  opacity: 0;
  animation-name: logo-ani01;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.logo-ani02 {
  opacity: 0;
}

.logo-ani02.active {
  opacity: 0;
  animation-name: logo-ani02;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

.logo-ani03 {
  opacity: 0;
}

.logo-ani03.active {
  opacity: 0;
  animation-name: logo-ani03;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

@keyframes logo-ani01 {
  from {
    clip-path: polygon(0 0, 0 0, 0 0);
    opacity: 1;
  }
  to {
    clip-path: polygon(0 0, 0% 300%, 300% 0);
    opacity: 1;
  }
}
@keyframes logo-ani02 {
  from {
    clip-path: polygon(0 0, 0 0, 0 0);
    opacity: 1;
  }
  to {
    clip-path: polygon(0 0, 0% 300%, 300% 0);
    opacity: 1;
  }
}
.door-txt01 {
  opacity: 0;
}

.door-txt01.active {
  opacity: 1;
  animation-name: door-txt01;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes door-txt01 {
  0% {
    opacity: 0;
    transform: translateY(5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.door-txt02 {
  opacity: 0;
}

.door-txt02.active {
  opacity: 1;
  animation-name: door-txt02;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes door-txt02 {
  from {
    clip-path: inset(0 100% 0% 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.door-txt03 {
  opacity: 0;
}

.door-txt03.active {
  opacity: 1;
  animation-name: door-txt03;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes door-txt03 {
  from {
    clip-path: inset(0 100% 0% 0%);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.door-txt04 {
  opacity: 0;
}

.door-txt04.active {
  opacity: 1;
  animation-name: door-txt04;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 2.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes door-txt04 {
  from {
    clip-path: inset(0 100% 0% 0%);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.door-txt05 {
  opacity: 0;
}

.door-txt05.active {
  opacity: 1;
  animation-name: door-txt05;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 2.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes door-txt05 {
  from {
    clip-path: inset(0% 0% 100% 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
.bg-ani {
  opacity: 0;
}

.bg-ani.active {
  opacity: 1;
  animation-name: bg-ani;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bg-ani {
  0% {
    transform: translate(0%, -10%);
    opacity: 0;
  }
  100% {
    transform: translate(0%, 10%);
    opacity: 0.5;
  }
}
/* marker */
.marker-color00 {
  background-image: linear-gradient(90deg, rgba(236, 231, 157, 0.5), rgba(236, 231, 157, 0.5));
}

.marker-color01 {
  background-image: linear-gradient(90deg, rgba(111, 126, 136, 0.3), rgba(111, 126, 136, 0.3));
}

.marker-color02 {
  background-image: linear-gradient(90deg, rgba(109, 116, 168, 0.3), rgba(109, 116, 168, 0.3));
}

.marker-color03 {
  background-image: linear-gradient(90deg, rgba(255, 226, 153, 0.5), rgba(255, 226, 153, 0.5));
}

.marker-color04 {
  background-image: linear-gradient(90deg, rgba(123, 150, 165, 0.8), rgba(123, 150, 165, 0.8));
}

.marker-color05 {
  background-image: linear-gradient(90deg, rgb(207, 196, 185), rgb(207, 196, 185));
}

.marker-color06 {
  background-image: linear-gradient(90deg, rgb(100, 84, 80), rgb(100, 84, 80));
}

.marker-color07 {
  background-image: linear-gradient(90deg, rgb(47, 32, 27), rgb(47, 32, 27));
}

.marker-color08 {
  background-image: linear-gradient(90deg, rgb(214, 191, 162), rgb(214, 191, 162));
}

.marker {
  display: inline;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 50%;
  padding: 0px 4px 3px 5px;
  transition: all 1s ease;
  position: relative;
}

.marker.active {
  background-size: 100% 50%;
}

.marker-txt {
  display: inline;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 3px;
  padding: 0 5px 3px 10px;
  transition: all 1s ease;
}

.marker-txt.active {
  background-size: 100% 3px;
}

/*//////////////////////////////// for iphone ////////////////////////////*/
@media (min-width: 0px) and (max-width: 766px) {
  .fade0 {
    animation-name: fade0;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes fade0 {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .fade01-1 {
    animation-name: mv01-1;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .fade01-2 {
    animation-name: mv01-2;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .fade01-3 {
    animation-name: mv01-3;
    animation-duration: 5s;
    animation-timing-function: ease-out;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes mv01-1 {
    0% {
      opacity: 1;
      clip-path: inset(0% 0% 100% 0%);
    }
    100% {
      opacity: 1;
      clip-path: inset(0% 0% 0% 0%);
    }
  }
  @keyframes mv01-2 {
    0% {
      opacity: 1;
      clip-path: inset(0% 100% 0% 0%);
    }
    100% {
      opacity: 1;
      clip-path: inset(0% 0% 0% 0%);
    }
  }
  @keyframes mv01-3 {
    0% {
      -moz-filter: blur(4px);
      -o-filter: blur(4px);
      -ms-filter: blur(4px);
      filter: blur(4px);
      transform: scale(1.1);
      opacity: 0;
    }
    20% {
      -moz-filter: blur(0px);
      -o-filter: blur(0px);
      -ms-filter: blur(0px);
      filter: blur(0px);
      opacity: 1;
    }
    100% {
      -moz-filter: blur(0px);
      -o-filter: blur(0px);
      -ms-filter: blur(0px);
      filter: blur(0px);
      transform: scale(1);
      opacity: 1;
    }
  }
  .fade02-1 {
    animation-name: mv02-1;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .fade02-2 {
    animation-name: mv02-1;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes mv02-1 {
    0% {
      transform: translateX(-5%);
      opacity: 0;
    }
    100% {
      transform: translateX(0%);
      opacity: 1;
    }
  }
  .fade03-1 {
    animation-name: mv03-1;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 1.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .fade03-2 {
    animation-name: mv03-1;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes mv03-1 {
    0% {
      opacity: 1;
      clip-path: inset(0% 100% 0% 0%);
    }
    100% {
      opacity: 1;
      clip-path: inset(0% 0% 0% 0%);
    }
  }
  .fade04-1 {
    animation-name: mv04-1;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 1.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .fade04-2 {
    animation-name: mv04-1;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes mv04-1 {
    from {
      -moz-filter: blur(4px);
      -o-filter: blur(4px);
      -ms-filter: blur(4px);
      filter: blur(4px);
      opacity: 0;
    }
    to {
      -moz-filter: blur(0px);
      -o-filter: blur(0px);
      -ms-filter: blur(0px);
      filter: blur(0px);
      opacity: 1;
    }
  }
}/*# sourceMappingURL=anime.css.map */