/* page motion */
.add-upscroll:not(.play-mo) {transform:translateY(70px) ;opacity:0;}
.play-mo.add-upscroll ,.play-mo .add-upscroll {animation: add-upscroll 0.7s 0s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay10 ,.play-mo .add-upscroll.delay10 {animation: add-upscroll 0.8s 0.1s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay20 ,.play-mo .add-upscroll.delay20 {animation: add-upscroll 0.8s 0.2s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay30 ,.play-mo .add-upscroll.delay30 {animation: add-upscroll 0.8s 0.3s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay40 ,.play-mo .add-upscroll.delay40 {animation: add-upscroll 0.8s 0.4s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay50 ,.play-mo .add-upscroll.delay50 {animation: add-upscroll 0.8s 0.5s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay60 ,.play-mo .add-upscroll.delay60 {animation: add-upscroll 0.8s 0.6s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay70 ,.play-mo .add-upscroll.delay70 {animation: add-upscroll 0.8s 0.7s ease-in-out;animation-fill-mode: both;}
.play-mo.add-upscroll.delay80 ,.play-mo .add-upscroll.delay80 {animation: add-upscroll 0.8s 0.8s ease-in-out;animation-fill-mode: both;}
@keyframes add-upscroll {
	0%		{transform:translateY(70px);opacity:0;}
	100%	{transform: translateY(0px);opacity:1;}
}

.add-downscroll:not(.play-mo) {transform:translateY(-70px) ;opacity:0;}
.play-mo.add-downscroll ,.play-mo .add-downscroll {animation: add-downscroll 0.7s 0.0s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay10 ,.play-mo .add-downscroll.delay10 {animation: add-downscroll 0.7s 0.1s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay20 ,.play-mo .add-downscroll.delay20 {animation: add-downscroll 0.7s 0.2s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay30 ,.play-mo .add-downscroll.delay30 {animation: add-downscroll 0.7s 0.3s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay40 ,.play-mo .add-downscroll.delay40 {animation: add-downscroll 0.7s 0.4s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay50 ,.play-mo .add-downscroll.delay50 {animation: add-downscroll 0.7s 0.5s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay60 ,.play-mo .add-downscroll.delay60 {animation: add-downscroll 0.7s 0.6s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay70 ,.play-mo .add-downscroll.delay70 {animation: add-downscroll 0.7s 0.7s ease-in-out;animation-fill-mode: both;}
.play-mo.add-downscroll.delay80 ,.play-mo .add-downscroll.delay80 {animation: add-downscroll 0.7s 0.8s ease-in-out;animation-fill-mode: both;}

@keyframes add-downscroll {
	0%		{transform: translateY(-70px) ;opacity:0;}
	100%	{transform: translateY(0px);opacity:1;}
}

header.show {animation: showMenu 0.3s ease-out;animation-fill-mode: both;}
@keyframes showMenu {

	100%{
		opacity:1;
		top:0px;
	}

}

.centerAni {
    transform-origin: center center;
	}
.rightorg {
    transform-origin: right center;
	}

.add-qzoom:not(.play-mo) {transform:scale(0) ;opacity:0;}
.play-mo.add-qzoom ,.play-mo .add-qzoom {animation: add-qzoom 0.7s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay10 ,.play-mo .add-qzoom.delay10 {animation: add-qzoom 0.7s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay20 ,.play-mo .add-qzoom.delay20 {animation: add-qzoom 0.7s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay30 ,.play-mo .add-qzoom.delay30 {animation: add-qzoom 0.7s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay40 ,.play-mo .add-qzoom.delay40 {animation: add-qzoom 0.7s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay50 ,.play-mo .add-qzoom.delay50 {animation: add-qzoom 0.7s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay60 ,.play-mo .add-qzoom.delay60 {animation: add-qzoom 0.7s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay70 ,.play-mo .add-qzoom.delay70 {animation: add-qzoom 0.7s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.add-qzoom.delay80 ,.play-mo .add-qzoom.delay80 {animation: add-qzoom 0.7s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

@keyframes add-qzoom {
	0%		{transform: scale(0);opacity:0.5;}
	100%	{transform: scale(1);opacity:1;}
}

@keyframes scrollAni {
	0%{transform:  translateY(10px);}
	100%{transform: translateY(0px);}
}

.heartbeat {animation: heartbeat 3s 1s ease-in-out infinite both;}
.heartbeat.delay10 {animation: heartbeat 2.5s 0.2s ease-in-out infinite both;}
.heartbeat.delay20 {animation: heartbeat 2.5s 2s ease-in-out infinite both;}

.obj-round01 {animation:moveAni 3s linear alternate infinite;z-index:9;}
.obj-round02 {animation:moveAni1 5s 0.5s linear alternate infinite;transform-origin:center bottom;}
/* .motion-keyvisual {animation:machine 1.2s 0.5s cubic-bezier(0.22, 0.08, 0.1, 1) both;} */

 @keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(0.8);
    animation-timing-function: ease-in;
  }
  17% {
    transform: scale(0.99);
    animation-timing-function: ease-out;
  }
  33% {
    transform: scale(0.95);
    animation-timing-function: ease-in;
  }
  45% {
    transform: scale(1.2);
    animation-timing-function: ease-out;
  }
}


@keyframes moveAni {
	0%		{transform: scale(0.9);}
  30%	{transform: scale(1);}
  70%	{transform: scale(0.95);}
	100%	{transform: scale(1.03);}
}

@keyframes moveAni1 {
	0%		{transform: scale(1);}
  30%	{transform: scale(1.1);}
  70%	{transform: scale(0.95);}
	100%	{transform: scale(1.05);}
}

@keyframes jump {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Cloud and Plane Animations */
.ani {
  position: absolute;
  animation-duration:3s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Cloud 01 Animation */
.c_left.cloud01 {
  animation-name: cloudMove;
  animation-delay: 0s;
}

@keyframes cloudMove {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Cloud 02 Animation */
.c_left.cloud02 {
  animation-name: cloudMove;
  animation-delay:0.2s;
}

@keyframes cloud02Move {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0);
  }
}

.c_right.cloud03 {
  animation-name: cloudMove;
  animation-delay:0.5s;
}

.c_right.cloud04 {
  animation-name: cloudMove;
  animation-delay:1s;
}

/* Plane Animation */
.plane {
  animation-name: planeMove;
  animation-duration:10s;
  animation-delay: 0s;
}

@keyframes planeMove {
  0% {
    transform: translateX(-100px) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

.session__process li:not(.play-mo) {opacity:0;}
.play-mo.session__process li:nth-of-type(1),
.play-mo .session__process li:nth-of-type(1) {animation: bg_down 1.0s  ease-out  both;}
.play-mo.session__process li:nth-of-type(2),
.play-mo .session__process li:nth-of-type(2) {animation: bg_down 1.0s  0.4s ease-out  both;}
.play-mo.session__process li:nth-of-type(3),
.play-mo .session__process li:nth-of-type(3) {animation: bg_down 1.0s  0.8s ease-out  both;}
  
@keyframes bg_down {
  0% {
		opacity:0;
    transform: translateX(30px);
  }
  100% {
		opacity:1;
    transform: translateX(0px);
  }
}

@keyframes rotateAni {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* @keyframes paperAni {
  0% {
    opacity:0;
    transform:translate3d(220px, -30px, 100px) scale(1) rotate(0deg);
  }
  30% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1.2) rotate(-20deg);
  }
  100% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1.2) rotate(-20deg);
  }
}

@keyframes paperAni2 {
  0% {
    opacity:0;
    transform:translate3d(-220px, -30px, 100px) scale(1) rotate(0deg);
  }
  30% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1.2) rotate(20deg);
  }
  100% {
    opacity:1;
    transform:translate3d(0,0,0) scale(1.2) rotate(20deg);
  }
} */

@keyframes springAni {
  0% {
    opacity:0;
    width:0;
    transform:translate3d(-200px,130px,100px) scale(1) rotate(0deg);
  }
  100% {
    opacity:1;
    width:66px;
    transform:translate3d(0,0,0) scale(1.2) rotate(20deg);
  }
}

@keyframes paperAni {
  0% {
    opacity: 0;
    transform: translate3d(220px, -30px, 0) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate3d(150px, 30px, 0) rotate(30deg);
  }
  30% {
    transform: translate3d(80px, 60px, 0) rotate(60deg);
  }
  45% {
    transform: translate3d(20px, 90px, 0) rotate(90deg);
  }
  60% {
    transform: translate3d(-40px, 120px, 0) rotate(120deg);
  }
  75% {
    transform: translate3d(-100px, 150px, 0) rotate(150deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(-160px, 180px, 0) rotate(180deg);
  }
}

@keyframes paperAni2 {
  0% {
    opacity: 0;
    transform: translate3d(-220px, -30px, 0) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate3d(-150px, 30px, 0) rotate(-30deg);
  }
  30% {
    transform: translate3d(-80px, 60px, 0) rotate(-60deg);
  }
  45% {
    transform: translate3d(-20px, 90px, 0) rotate(-90deg);
  }
  60% {
    transform: translate3d(40px, 120px, 0) rotate(-120deg);
  }
  75% {
    transform: translate3d(100px, 150px, 0) rotate(-150deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(160px, 180px, 0) rotate(-180deg);
  }
}

@keyframes springAni {
  0% {
    opacity: 0;
    transform: translate3d(0, -30px, 0) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate3d(30px, 30px, 0) rotate(45deg);
  }
  30% {
    transform: translate3d(60px, 60px, 0) rotate(90deg);
  }
  45% {
    transform: translate3d(30px, 90px, 0) rotate(135deg);
  }
  60% {
    transform: translate3d(0, 120px, 0) rotate(180deg);
  }
  75% {
    transform: translate3d(-30px, 150px, 0) rotate(225deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(-60px, 180px, 0) rotate(270deg);
  }
}