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

.view_filter_init {
opacity:0;
}
.view_filter {
	animation: add-view 0.3s  cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes add-view {
	0%		{transform: scale(0);opacity:0;}
	100%	{transform: scale(1);opacity:1;}
}

.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);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);opacity:0}
100%{transform:scale(1) ;opacity:1}
}

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


#wrap section.headingWrap.fix {position:fixed;bottom:0px;width: 100%;}
#wrap section.headingWrap.nofix {position:absolute;bottom:0px;width: 100%;}
/* header.fixed {top:0;transition:0.3s;} */



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


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

.add-shake {animation: shareAni 0.3s ease-in-out infinite both;transform-origin: left bottom;}
@keyframes shareAni {
	0% 		{transform: rotate(1.2deg);}
	50% 	{transform: rotate(0);}
	100% 	{transform: rotate(1deg);}
}

@keyframes scale-in-br {
    0% {
            transform: scale(0);
            transform-origin: 100% 100%;
            opacity: 1;
    }
    100% {
            transform: scale(1);
            transform-origin: 100% 100%;
            opacity: 1;
    }
}

.add-wheelRotate {animation: wheelRotateAni 3s cubic-bezier(0.33, 1, 0.68, 1) infinite both;}
@keyframes wheelRotateAni {
	0% 		{transform: rotate(0);}
	100% 	{transform: rotate(360deg);}
}

.add-zoomR {animation: zoomRAni 2.3s cubic-bezier(0.33, 1, 0.68, 1) infinite both;}
@keyframes zoomRAni {
	0%		{transform:scale(0.7);}
	50% 	{transform: scale(1);}
	100%	{transform:scale(0.7);}
}

.play-mo.add-slideLeft ,.play-mo .add-slideLeft {animation: slide-tl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes slide-tl {
	0% 		{transform: translateY(-100px) translateX(-100px);}
	100% 	{transform: translateY(0) translateX(0);}
  }

  .play-mo.add-slideRight ,.play-mo .add-slideRight {animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
  .play-mo.add-slideRight.delay10 ,.play-mo .add-slideRight.delay10 {animation: slide-in-right 0.5s 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
	.play-mo.add-slideRight.delay20 ,.play-mo .add-slideRight.delay20 {animation: slide-in-right 0.7s 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
	.play-mo.add-slideRight.delay30 ,.play-mo .add-slideRight.delay30 {animation: slide-in-right 0.9s 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}  
  @keyframes slide-in-right {
	0% {
	  		transform: translateX(1000px);
	  		opacity: 0;
	}
	100% {
	  		transform: translateX(0);
	  		opacity: 1;
	}
  }

	@keyframes blur{
		0%{
			filter: blur(0);
			-webkit-filter: blur(0);
		}
		50%{
			filter: blur(5px);
			-webkit-filter: blur(5px);
		}
		100%{
			filter: blur(0);
			-webkit-filter: blur(0);
		}
	}

	.bounce-in-fwd:not(.play-mo) {opacity:0}
	.play-mo.bounce-in-fwd ,.play-mo .bounce-in-fwd {animation:bounce-in-fwd 1s 0.2s both}
	@keyframes bounce-in-fwd {
		0% {
			transform: scale(0);
			animation-timing-function: ease-in;
			opacity: 0;
		}
		38% {
			transform: scale(1);
			animation-timing-function: ease-out;
			opacity: 1;
		}
		55% {
			transform: scale(0.85);
			animation-timing-function: ease-in;
		}
		72% {
			transform: scale(1);
			animation-timing-function: ease-out;
		}
		81% {
			transform: scale(0.9);
			animation-timing-function: ease-in;
		}
		89% {
			transform: scale(1);
			animation-timing-function: ease-out;
		}
		95% {
			transform: scale(0.95);
			animation-timing-function: ease-in;
		}
		100% {
			transform: scale(1);
			animation-timing-function: ease-out;
		}
	}
	


/* header {top: -300px;}

header .mp-title{background: #fff;}
.play-mo.add-header{animation: add-header 0.5s 0s ease-in-out both;}

@keyframes add-header {
	100%	{top:0px}
}

.gnb-area {margin-top: -100px;    z-index: -1;}
.play-mo.add-menu{animation: add-menu 0.5s 0.3s ease-in-out both;}
@keyframes add-menu {
	100%	{margin-top:0px}
}

.motion-box {transform:translateY(1000px);}
.play-mo.motion-box {animation: add-headingWrap 0.5s 0.3s ease-in-out both;}
@keyframes add-headingWrap {
	100%	{transform:translateY(0px);} */
/* } */

.objectBox {animation: add-objectBox 2.5s 0s  infinite alternate;transform: scale(0.5) ;transform-origin: left bottom;}
@keyframes add-objectBox {
	0%	{transform: scale(0.5);}
	70%	{transform: scale(1);}
	100%	{transform: scale(1);}
}
@media screen and (max-width:768px) {
	@keyframes add-objectBox {
		0%	{transform: scale(0.7);}
		70%	{transform: scale(1);}
		100%	{transform: scale(1);}
	}
}
/* .objectBox .eye{animation: add-eye 2.5s 0s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite alternate;transform-origin: left center;}
@keyframes add-eye {
	0%	{transform: translateX(0) scale(1);}
	80%	{transform: translateX(0) scale(1);}
	90%	{transform: translateX(10px) scale(1.05);}
	100%	{transform: translateX(0) scale(1);}
} */

.objectBox .eye .eyeball {animation: add-beye 2s 1s alternate infinite ;}
@keyframes add-beye {
	0%	{height:10%;}
	10%	{height:100%;}
	100%	{height:100%;}
}

.planning .box {animation: add-box 3.5s 1s  infinite alternate;transform-origin: center center;}
@keyframes add-box {
	0%	{transform:scale(0.9) rotate(90deg);opacity:1}
	40%	{transform:scale(1) rotate(90deg);opacity:1}
	70%	{transform:scale(1) rotate(0deg);opacity:1}
	100%	{transform:scale(0.7) rotate(0deg);opacity:1}
}

.button .cursor {animation: add-cursor 1.5s 1s cubic-bezier(0.34, 1.85, 0.64, 1) infinite alternate;transform:translate(100px,100px);}
@keyframes add-cursor {
	0%	{transform:translate(50px,50px);}
	100%	{transform:translate(0,0);opacity:1}

}
/* .button .bt_active{animation: add-bt_active 1.5s 1s infinite alternate;opacity:0;z-index: 2;} */
.button .bt_active {animation: add-bt_active 1.5s 1.1s infinite alternate;opacity:0;z-index: 2;}
@keyframes add-bt_active {
	0%	{opacity:0;}
	40%	{opacity:1;}
	100%	{opacity:1;}

}

.app .android {animation: add-android 3.5s 1s  cubic-bezier(0.68, 0, 0.32, 1.6)  infinite alternate;z-index: 2;}
/* .app .android {animation: add-android 3.5s 1s  cubic-bezier(0.68, -0.6, 0.32, 1.6)  infinite alternate;z-index: 2;} */
@keyframes add-android {
	
	/* 0%	{transform:translate(-10px,50px);} */
	100%	{transform: translate(-53px,320px);}
}
.app .apple{animation: add-apple 2.5s 1.5s  cubic-bezier(0.68, 0, 0.32, 1.6)  infinite alternate;z-index: 2;}
@keyframes add-apple {
	0%	{transform:translate(0,0);}
	/* 0%	{transform:translate(-10px,50px);} */
	100%	{transform: translate(-53px,180px);}
}

.booting .text{animation: add-text 1s 1s    alternate infinite ;overflow:hidden;}
@keyframes add-text {
	0%	{opacity:1}
	100%	{opacity:0.3}
}

.booting .eye .eyeball {animation: add-beye 2s 1s alternate infinite ;}
@keyframes add-beye {
	0%	{height:10%;}
	10%	{height:100%;}
	100%	{height:100%;}
}
.booting .loading .ani {opacity:0.3}
.load_proc {animation: add-load_proc 1.0s 0s alternate infinite ;overflow:hidden;}
@keyframes add-load_proc {
	0%	{opacity:0.3}
	100%	{opacity:1}
}
.registWrap .ob_hand{animation: add-hand 2.5s 0s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite ;transform-origin: left bottom;}
@keyframes add-hand {
	0%	{transform: rotate(0deg);}
	30%	{transform: rotate(-50deg);}
	50%	{transform: rotate(0deg);}
}
.registWrap .ob_star{animation: add-ob_star 2.5s 0s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite ;}
.registWrap .ob_star01{animation: add-ob_star 2.5s 0.1s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite ;}
@keyframes add-ob_star {
	0%	{transform: translate(-100px,100px) rotate(0deg);opacity:0;}
	30%	{transform: translate(-100px,100px) rotate(0deg);opacity:0;}
	60%	{transform: translate(0px,0px) ;opacity:0.8;}
	90%	{transform: translate(0px,0px) rotate(360deg);opacity:1;}
	100%	{transform: translate(0px,0px) ;opacity:0;}
}

.registWrap .ob_03{animation: add-ob_03 2.5s 0s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
@keyframes add-ob_03 {
	0%	{transform: translate(0px,0px) ;}
	100%	{transform: translate(100px,-100px) ;}
}
.registWrap .ob_02{animation: add-ob_02 5s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
@keyframes add-ob_02 {
	0%	{transform: rotate(0deg) scale(1);}
	90%	{transform: rotate(0deg) scale(1);}
	100%	{transform: rotate(360deg) scale(1.2);}
}
.registWrap .ob_01{animation: add-ob_01 5s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
@keyframes add-ob_01 {
	0%	{transform: translateY(0);}
	90%	{transform: translateY(0);}
	100%	{transform: translateY(-20px);}
}
.blockM {animation: add-block 1.2s 0.5s  infinite alternate;}
.blockG {animation: add-block1 1.7s 1.5s  infinite alternate;}
.blockH {animation: add-block 1.4s 0.0s  infinite alternate;}
@keyframes add-block {
	0%	{transform: translateY(0);}
	100%	{transform: translateY(-30px);}
}
@keyframes add-block1 {
	0%	{transform: translateY(0);}
	100%	{transform: translateY(-20px);}
}