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

.heartbeat {animation: heartbeat 4s 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:translateY(0);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform:translateY(-20px);
    animation-timing-function: ease-in;
  }
  17% {
    transform:translateY(-25px);
    animation-timing-function: ease-out;
  }
  33% {
    transform:translateY(-10px);
    animation-timing-function: ease-in;
  }
  45% {
    transform:translateY(-5px);
    animation-timing-function: ease-out;
  }
}

.blink {animation: blink 2s infinite both;}
.blink.delay10 {animation: blink 2.5s 0.2s infinite both;}
@keyframes blink {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

.headingWrap .char-wrap { transform-origin: center top;animation: char-wrap 1s infinite alternate;}
@keyframes char-wrap {
   0% {   transform: translate(0px,0px); }
   100% {   transform: translate(0px,-10px); }
}

.headingWrap .shadow div { animation: shadow 1s infinite alternate;}
@keyframes shadow {
   0% {   transform: translateY(0) scale(1); }
   100% {   transform: translateY(10px)scale(1.1); }
}
.headingWrap .light-wrap .light01{transform-origin: center top; animation: light 0.7s infinite alternate;}
.headingWrap .light-wrap .light02{transform-origin: center top; animation: light 0.7s infinite alternate;}
@keyframes light {
   0% {   transform: scaleY(0);opacity: 0; }

   50% {   transform: scaleY(1); opacity: 1;}
}
.kv-motion .air {transform-origin: center top; animation: air 1.7s infinite ;}
@keyframes air {
   0% {   transform: translate(-800px,0px);opacity: 0; }

   40% {   transform: translate(0px,0px); opacity: 1;}
   100% {   transform: translate(1000px,0px);; opacity: 0;}
}
.kv-motion .tank {transform-origin: center top; animation: tank 1.7s infinite alternate;}
@keyframes tank {
   0% {   transform: translate(0px,10px);opacity: 1; }
   100% {   transform: translate(0px,-10px);; opacity: 1;}
}
.kv-motion .tank {transform-origin: center top; animation: tank 1.7s infinite alternate;}
@keyframes tank {
   0% {   transform: translate(0px,10px);opacity: 1; }
   100% {   transform: translate(0px,-10px);; opacity: 1;}
}
.kv2-wrap .light-wrap .light01{transform-origin: right 10%; animation: light2 0.7s infinite alternate;}
.kv2-wrap .light-wrap .light02{transform-origin: right 10%; animation: light2 0.7s infinite alternate;}
@keyframes light2 {
   0% {   transform: scaleY(0);opacity: 0; }

   50% {   transform: scaleY(1); opacity: 1;}
}
.kv2-wrap .ship {transform-origin: center top; animation: ship 1.0s infinite alternate;}
@keyframes ship {
   0% {   transform: translate(0px,0px);opacity: 1; }
   100% {   transform: translate(0px,-5px);; opacity: 1;}
}
.kv2-wrap .tank {transform-origin: center top; animation: tank1 0.2s infinite alternate;}
@keyframes tank1 {
   0% {   transform: translate(0px,0px);opacity: 1; }
   100% {   transform: translate(-1px,-1px);; opacity: 1;}
}
.kv2-wrap .char-wrap { transform-origin: center top;animation: char-wrap1 1s infinite alternate;}
@keyframes char-wrap1 {
   0% {   transform: translate(0px,0px); }
   20% {   transform: translate(0px,-10px); }
   100% {   transform: translate(0px,0px); }
}
.kv2-wrap .air {transform-origin: center top; animation: air1 2.7s infinite ;}
@keyframes air1 {
   0% {   transform: translate(200px,-100px);opacity: 0; }

   20% {   transform: translate(0px,0px); opacity: 1;}
   50% {   transform: translate(-200px,100px);; opacity: 0;}
   100% {   transform: translate(-200px,100px);; opacity: 0;}
}
.keyvisual-wrap {animation: keyvisual-wrap 0.7s both;transform:  translateY(-100px);opacity: 0;transform-origin: center bottom;}
@keyframes keyvisual-wrap {
   0% {   transform: translateY(200px) translateX(-50%);opacity: 0; }

   100% {   transform: translateY(0) translateX(-50%); opacity: 1;}
}

main .spaceship {transform-origin: 60% 64%; animation: spaceship ease-in-out 1.2s infinite alternate;}

@keyframes spaceship {
   0% {   transform: rotate3d(12, 1, 65, 15deg); }

   100% {  transform: rotate3d(12, 1, 16, -9deg);}
}


main .satum { animation: satum ease-in-out 1.0s infinite alternate;}

@keyframes satum {
   0% {   transform: scale(1); opacity: 0.8; }

   100% {  transform: scale(1.1);opacity: 1; }
}

main .star { animation: star ease-in-out 2s infinite both;}

@keyframes star {
   0% {   transform: translate(700px,-500px); opacity: 0.8; }
   50% {  transform: translate(0px,0px);opacity: 1; }
   60% {  transform: translate(0px,0px);opacity: 1; }
   100% {  transform: translate(-700px,500px);opacity: 0; }
}

.kv-wrap .rabbit {opacity:0;animation: rabbit cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s  both;transform-origin: 100% 8%;}
.kv-wrap .ship-group {opacity:0;animation: rabbit cubic-bezier(0.25, 1, 0.5, 1) 0.6s 0.3s both;transform-origin: 157% 8%;}
.kv-wrap .ship-group .wave {animation: wave ease-in-out 0.8s infinite both;}
.kv-wrap .submarine {opacity:0;animation: submarine cubic-bezier(0.25, 1, 0.5, 1) 0.6s 0.5s both;transform-origin: 0% 100%;}
.kv-wrap .jet {opacity:0;animation: jet ease-in-out 6.8s infinite both;}
.kv-wrap .planet {animation: planet ease 7.6s 0.5s infinite ;transform-origin: 350% 350%;}
.kv-wrap .planet01 {animation: planet01 ease-in-out 8.6s 0.8s infinite ;transform-origin: 450% 350%;}
.kv-wrap .starBall {opacity:0;animation: starBall ease-in-out 3.6s 0.8s infinite ;transform-origin: 350% 350%;}
.kv-wrap .satellite-group {opacity:0;animation: satellite-group ease-in-out 2s  both;}
.kv-wrap .satellite-group .satellite {opacity:1;}
.kv-wrap .satellite-group .wave {opacity:1;animation: wave ease-in-out 1s  infinite;}
.kv-wrap .satellite-group .line {opacity:1;animation: wave ease-in-out 0.5s 2s both;transform-origin: 50% 0%;}
.kv-wrap .object {opacity:0;animation: object1 ease-in-out 1.6s 0.5s infinite alternate ;}
 
 @keyframes rabbit {
   0% {   transform: scale(0); opacity: 0; }
   100% {  transform: scale(1);opacity: 1; }
}
 @keyframes wave {
   0% {   transform: scale(0.5); opacity: 0; }
   100% {  transform: scale(1);opacity: 1; }
}
 
 @keyframes submarine {
   0% {   transform: scaleY(0.5) translateY(50px); opacity: 0; }
   100% {  transform: scaleY(1) translateY(0);opacity: 1; }
}
@keyframes jet {
   0% {   transform: translate(-100px,80px); opacity: 0.3; }
   30% {  transform: translate(0px,0px);opacity: 0.8; }
   50% {  transform: translate(0px,0px);opacity: 1; }
   70% {  transform: translate(700px,-500px);opacity: 0; }
}
@keyframes planet {
   0% {   transform: rotate(0deg);opacity: 1;  }
   70% {   transform: rotate(180deg);opacity: 0;  }
   100% {  transform: rotate(0deg);opacity: 0; }
}
@keyframes planet01 {
   0% {   transform: rotate(0deg);opacity: 1;  }

   100% {  transform: rotate(360deg);opacity: 1; }
}
@keyframes starBall {
   0% {   transform: rotate(0deg);opacity: 1;  }
   50% {  transform: rotate(180deg);opacity: 0; }
   100% {  transform: rotate(0deg);opacity: 0; }
}
@keyframes satellite-group {
   0% {   transform: translate(-100px,80px); opacity: 0; }
   100% {  transform: translate(0,0);opacity: 1; }
}
@keyframes satellite {
   0% {   transform: translate(-100px,80px); opacity: 0; }
   100% {  transform: translate(0,0);opacity: 1; }
}
@keyframes object1 {
   0% {   transform: translateY(0) rotate(0deg); opacity: 1; }
   100% {  transform: translateY(20px)  rotate(10deg);opacity: 1; }
}