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

/* .motion-keyvisual {animation:machine 0.8s 0.5s cubic-bezier(0.92, -0.01, 1, 1) both;} */
/* .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.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;
  }
}

.flip-diagonal-1-tr {
	animation: flip-diagonal-1-tr 5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite alternate;
}

@keyframes flip-diagonal-1-tr {
  0% {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  100% {
    transform: rotate3d(1, 1, 0, 180deg);
  }
}

.slit-in-diagonal-2 {
	animation: slit-in-diagonal-2 2s ease-out infinite alternate both;
}

@keyframes slit-in-diagonal-2 {
  0% {
    transform: translateZ(-800px) rotate3d(-1, 1, 0, -90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  54% {
    transform: translateZ(-160px) rotate3d(-1, 1, 0, -87deg);
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  100% {
    transform: translateZ(0) rotate3d(-1, 1, 0, 0);
    animation-timing-function: ease-out;
  }
}

.flip-horizontal-bottom {
	animation: flip-horizontal-bottom 5.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite alternate;
}
@keyframes flip-horizontal-bottom {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(-180deg);
  }
}

.flip-vertical-left {
	animation: flip-vertical-left 5.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite alternate;
}
@keyframes flip-vertical-left {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(-180deg);
  }
}

.motion-g01 .rnd01  {
	transform-origin: right bottom;
	animation: rnd01_01 8.2s infinite ;
  background-position:0 0;
}
.motion-g01 .rnd02  {
	animation: rnd01_02 5.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite alternate;
}
/* .motion-g01 .line  {
	transform-origin: 200px 300px;
	animation: rnd01_01 8.2s  infinite ;
} */
@keyframes rnd01_01 {

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes rnd01_02 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
/*
.motion-g02 {
	animation: rnd02_01 18.2s ease-out infinite ;
}
*/
.motion-g02 .rnd01  {
	transform-origin: 100px 100px;
	animation: rnd02_01 8.2s ease-out infinite alternate ;
}
.motion-g02 .rnd02  {
	animation: rnd02_02 5.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite alternate;
}
.motion-g02 .line01  {
	transform-origin: 10px 300px;
	animation: line02_01 8.2s ease-out infinite alternate;
}
.motion-g02 .line02  {
	transform-origin: top right;
	animation: line02_021 8.2s ease-out infinite alternate;
}
@keyframes rnd02_01 {
  100% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(60deg);
  }
}
@keyframes line02_01 {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(-60deg) scale(1);
  }
}
@keyframes line02_02 {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(0);
  }
}
@keyframes rnd02_02 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes motion-g02 {

  100% {
    transform: rotate(360deg);
  }
}