/* head-anime ---------------------------------------------------------------------------------------------- */
.fade0 {
  animation-name: fade0;
  animation-duration: .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: .5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0; }

.fade01-2 {
  animation-name: mv01-2;
  animation-duration: .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: .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% {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    transform: scale(1.1);
    opacity: 0; }
  20% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    opacity: 1; }
  100% {
    -webkit-filter: blur(0px);
    -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: .8s;
  animation-timing-function: ease-out;
  animation-delay: .5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0; }

.fade02-2 {
  animation-name: mv02-1;
  animation-duration: .8s;
  animation-timing-function: ease-out;
  animation-delay: .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: .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: .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: .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: .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 {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    opacity: 0; }
  to {
    -webkit-filter: blur(0px);
    -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: .5s;
  animation-timing-function: ease-in-out;
  animation-delay: .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: .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: .5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0; }

.pop04 {
  opacity: 0; }

.pop04.active {
  animation-name: popup3;
  animation-duration: .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: .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: .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: .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 {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    opacity: 0; }
  to {
    -webkit-filter: blur(0px);
    -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: .7s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes img-ani01 {
  0% {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    opacity: 0;
    transform: translateY(3%); }
  100% {
    -webkit-filter: blur(0px);
    -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: .7s;
  animation-timing-function: ease-in-out;
  animation-delay: .7s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes img-ani02 {
  0% {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    opacity: 0;
    transform: translateX(3%); }
  100% {
    -webkit-filter: blur(0px);
    -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: .7s;
  animation-timing-function: ease-in-out;
  animation-delay: .7s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes img-ani03 {
  0% {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    opacity: 0;
    transform: translateX(-3%); }
  100% {
    -webkit-filter: blur(0px);
    -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: .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: .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: .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: .7s;
  animation-timing-function: ease-out;
  animation-delay: .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: .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: .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: .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: .7s;
  animation-timing-function: ease-out;
  animation-delay: .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: .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: .7s;
  animation-timing-function: ease-out;
  animation-delay: .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: .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: .5s;
  animation-timing-function: ease-out;
  animation-delay: .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: .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: .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: .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: .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 {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    opacity: 1; }
  to {
    -webkit-filter: blur(0px);
    -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: .5s;
  animation-timing-function: ease-out;
  animation-delay: .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: .5s;
  animation-timing-function: ease-out;
  animation-delay: .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: .5s;
  animation-timing-function: ease-out;
  animation-delay: .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: .5s;
  animation-timing-function: ease-out;
  animation-delay: .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: .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: .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: .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: .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: .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: .5s;
  animation-timing-function: ease-out;
  animation-delay: .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: .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: .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: .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: .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: .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: .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: .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: .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: .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: .5s;
  animation-timing-function: ease-out;
  animation-delay: .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: .5s;
  animation-timing-function: ease-out;
  animation-delay: .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: .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: .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: .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: .7s;
  animation-timing-function: ease-in-out;
  animation-delay: .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: .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: .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: .5s;
  animation-timing-function: ease-out;
  animation-delay: .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: .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: .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, #cfc4b9, #cfc4b9); }

.marker-color06 {
  background-image: linear-gradient(90deg, #645450, #645450); }

.marker-color07 {
  background-image: linear-gradient(90deg, #2f201b, #2f201b); }

.marker-color08 {
  background-image: linear-gradient(90deg, #d6bfa2, #d6bfa2); }

.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: .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: .5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0; }

  .fade01-2 {
    animation-name: mv01-2;
    animation-duration: .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: .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% {
      -webkit-filter: blur(4px);
      -moz-filter: blur(4px);
      -o-filter: blur(4px);
      -ms-filter: blur(4px);
      filter: blur(4px);
      transform: scale(1.1);
      opacity: 0; }
    20% {
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -o-filter: blur(0px);
      -ms-filter: blur(0px);
      filter: blur(0px);
      opacity: 1; }
    100% {
      -webkit-filter: blur(0px);
      -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: .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: .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: .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: .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: .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: .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 {
      -webkit-filter: blur(4px);
      -moz-filter: blur(4px);
      -o-filter: blur(4px);
      -ms-filter: blur(4px);
      filter: blur(4px);
      opacity: 0; }
    to {
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -o-filter: blur(0px);
      -ms-filter: blur(0px);
      filter: blur(0px);
      opacity: 1; } } }