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


.motion-keyvisual .ani {}
.playOn-mo.add-downscroll ,.playOn-mo .add-downscroll {animation: add-downscrollOn 0.7s 0.0s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn1 ,.playOn-mo .add-downscroll.delayOn1 {animation: add-downscrollOn 0.7s 0.1s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn2 ,.playOn-mo .add-downscroll.delayOn2 {animation: add-downscrollOn 0.7s 0.2s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn3 ,.playOn-mo .add-downscroll.delayOn3 {animation: add-downscrollOn 0.7s 0.3s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn4 ,.playOn-mo .add-downscroll.delayOn4 {animation: add-downscrollOn 0.7s 0.4s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn5 ,.playOn-mo .add-downscroll.delayOn5 {animation: add-downscrollOn 0.7s 0.5s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn6 ,.playOn-mo .add-downscroll.delayOn6 {animation: add-downscrollOn 0.7s 0.6s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn7 ,.playOn-mo .add-downscroll.delayOn7 {animation: add-downscrollOn 0.7s 0.7s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn8 ,.playOn-mo .add-downscroll.delayOn8 {animation: add-downscrollOn 0.7s 0.8s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn9 ,.playOn-mo .add-downscroll.delayOn9 {animation: add-downscrollOn 0.7s 0.9s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn10 ,.playOn-mo .add-downscroll.delayOn10 {animation: add-downscrollOn 0.7s 1.0s ease-in-out;animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn11 ,.playOn-mo .add-downscroll.delayOn11 {animation: add-downscrollOn 0.7s 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn12 ,.playOn-mo .add-downscroll.delayOn12 {animation: add-downscrollOn 0.7s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn13 ,.playOn-mo .add-downscroll.delayOn13 {animation: add-downscrollOn 0.7s 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn14 ,.playOn-mo .add-downscroll.delayOn14 {animation: add-downscrollOn 0.7s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn15 ,.playOn-mo .add-downscroll.delayOn15 {animation: add-downscrollOn 0.7s 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn16 ,.playOn-mo .add-downscroll.delayOn16 {animation: add-downscrollOn 0.7s 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.playOn-mo.add-downscroll.delayOn17 ,.playOn-mo .add-downscroll.delayOn17 {animation: add-downscrollOn 0.7s 1.7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

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

@keyframes add-downscroll {
	0%		{transform: translateY(-50px) ;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;
	}

}

.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;}
}

.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;}

 @keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(0.97);
    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);
    animation-timing-function: ease-out;
  }
}


.scrollArrow {animation:scrollAni 1s infinite alternate;}
@keyframes scrollAni {
	0%{transform:  translateY(10px);}
	100%{transform: translateY(0px);}
}

.motion-car01 .move {animation: add-pre-balloon 1.3s 0s alternate infinite ;}
.motion-car02 .move {animation: add-pre-balloon 1.3s 1s alternate infinite ;}
@keyframes add-pre-balloon {
	100% {
		transform: translate(-10px,0);
	}
}

.motion-plane {animation: add-plane 1.3s 0s alternate infinite ;}

@keyframes add-plane {
  100% {
		transform: translate(10px,30px);
    opacity:1;
	}
}