/* 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 both;}
.play-mo.add-upscroll.delay10 ,.play-mo .add-upscroll.delay10 {animation: add-upscroll 0.8s 0.1s ease-in-out both;}
.play-mo.add-upscroll.delay20 ,.play-mo .add-upscroll.delay20 {animation: add-upscroll 0.8s 0.2s ease-in-out both;}
.play-mo.add-upscroll.delay30 ,.play-mo .add-upscroll.delay30 {animation: add-upscroll 0.8s 0.3s ease-in-out both;}
.play-mo.add-upscroll.delay40 ,.play-mo .add-upscroll.delay40 {animation: add-upscroll 0.8s 0.4s ease-in-out both;}
.play-mo.add-upscroll.delay50 ,.play-mo .add-upscroll.delay50 {animation: add-upscroll 0.8s 0.5s ease-in-out both;}
.play-mo.add-upscroll.delay60 ,.play-mo .add-upscroll.delay60 {animation: add-upscroll 0.8s 0.6s ease-in-out both;}
.play-mo.add-upscroll.delay70 ,.play-mo .add-upscroll.delay70 {animation: add-upscroll 0.8s 0.7s ease-in-out both;}
.play-mo.add-upscroll.delay80 ,.play-mo .add-upscroll.delay80 {animation: add-upscroll 0.8s 0.8s ease-in-out 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 both;}
.play-mo.add-downscroll.delay10 ,.play-mo .add-downscroll.delay10 {animation: add-downscroll 0.7s 0.1s ease-in-out both;}
.play-mo.add-downscroll.delay20 ,.play-mo .add-downscroll.delay20 {animation: add-downscroll 0.7s 0.2s ease-in-out both;}
.play-mo.add-downscroll.delay30 ,.play-mo .add-downscroll.delay30 {animation: add-downscroll 0.7s 0.3s ease-in-out both;}
.play-mo.add-downscroll.delay40 ,.play-mo .add-downscroll.delay40 {animation: add-downscroll 0.7s 0.4s ease-in-out both;}
.play-mo.add-downscroll.delay50 ,.play-mo .add-downscroll.delay50 {animation: add-downscroll 0.7s 0.5s ease-in-out both;}
.play-mo.add-downscroll.delay60 ,.play-mo .add-downscroll.delay60 {animation: add-downscroll 0.7s 0.6s ease-in-out both;}
.play-mo.add-downscroll.delay70 ,.play-mo .add-downscroll.delay70 {animation: add-downscroll 0.7s 0.7s ease-in-out both;}
.play-mo.add-downscroll.delay80 ,.play-mo .add-downscroll.delay80 {animation: add-downscroll 0.7s 0.8s ease-in-out both;}

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

header.show {animation: showMenu 0.3s ease-out 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) 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) 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) 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) 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) 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) 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) 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) 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) both;}

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

@keyframes move-up-down {
	0%		{transform:translate(-50%,5px);}
	100%	{transform:translate(-50%,0);}
}

.add-qzoom:not(.play-mo) {transform:scale(0) ;opacity:0;}

.add-fadIn:not(.play-mo) {opacity:0}
.play-mo.add-fadIn ,.play-mo .add-fadIn{

animation: fadIn 0.5s 0.5s ease-in-out both;

}

@keyframes fadIn{
0%{opacity:0}
100%{opacity:1}
}

.add-zoomRotate:not(.play-mo) {opacity:0}
.play-mo.add-zoomRotate ,.play-mo .add-zoomRotate{

animation: zoomRotate 1.0s 1.0s cubic-bezier(0.33, 1, 0.68, 1) both;

}

@keyframes zoomRotate{
	0%{transform:scale(0.8);opacity:0}
	100%{transform:scale(1) rotate(360deg);opacity:1}
}

.add-zoom:not(.play-mo) {opacity:0}
.play-mo.add-zoom ,.play-mo .add-zoom{animation: add-zoom 0.3s 0.3s cubic-bezier(0.33, 1, 0.68, 1) both;}
.play-mo.add-zoom.delay10 ,.play-mo .add-zoom.delay10 {animation: add-zoom 0.4s 0.8s cubic-bezier(0.33, 1, 0.68, 1) both;}
.play-mo.add-zoom.delay20 ,.play-mo .add-zoom.delay20 {animation: add-zoom 0.6s 0.6s cubic-bezier(0.33, 1, 0.68, 1) both;}
.play-mo.add-zoom.delay30 ,.play-mo .add-zoom.delay30 {animation: add-zoom 0.8s 0.9s cubic-bezier(0.33, 1, 0.68, 1) both;}

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

.ballonShake {animation: ballonShake 0.2s infinite both;}
@keyframes ballonShake {
	0% 		{transform: rotate(8deg);}
	50% 	{transform: rotate(0);}
	100% 	{transform: rotate(8deg);}
}

@keyframes ani-zoom {
	100% 	{transform: scale(1);}
}

@keyframes ani-zoomBox {
	80% 	{transform: scale(1.2);}
	100% 	{transform: scale(1);}
}

@keyframes ani-fadeIn {
	100% 	{opacity:1;}
}
@keyframes ani-translateY {
	100% 	{transform: translateY(0); opacity:1;}
}
@keyframes ani-translateX {
	100% 	{transform: translateX(0); opacity:1;}
}

@keyframes ani-translateXS {
	100% 	{transform: translateX(0) skew(0deg, 0deg); opacity:1;}
}

@keyframes waveAni {
	0%   {background-position-y:5px;}
	100% {background-position-y:0px;}
}

@keyframes ani-hide {
	100% 	{transform: scale(0);opacity:0;}
}
@keyframes ani-show {
	0% 		{transform: scale(0);opacity:1;}
	100% 	{transform: scale(1);opacity:1;}
}

@keyframes ani-star {
	0% 		{transform: scale(1);}
	100% 	{transform: scale(0.5);}
}

.add-rotate {animation: rotate-center 1.5s ease-in-out infinite both;}
@keyframes rotate-center {
	0% 		{transform: rotate(0);}
	50% 	{transform: rotate(360deg);}
	100% 	{transform: rotate(360deg);}
}

@keyframes rotate-scale-up {
  0% {
    transform: scale(0) rotateZ(0);
		opacity:0;
  }
  100% {
    transform: scale(1) rotateZ(360deg);
		opacity:1;
  }
}