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

.view_filter_init {
opacity:0;
}
.view_filter {
	animation: add-view 0.3s  cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: 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;animation-fill-mode: 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);animation-fill-mode: 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);animation-fill-mode: 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);animation-fill-mode: 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);animation-fill-mode: 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);animation-fill-mode: 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;}
.play-mo.ballonShake.delay10 ,.play-mo .ballonShake.delay10 {animation: ballonShake 0.4s 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;
		}
	}

	.sticker {
		animation:swing-in-left-fwd 1.5s cubic-bezier(0.02, 0.47, 0.86, 1.08) infinite both;
	}
	.sticker01 {
		animation:swing-in-left-fwd 1.7s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite both;
	}
	.sticker03 {animation:swing-in-right-fwd 1.7s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite both;}
	.sticker03 {animation:swing-in-right-fwd 1.7s cubic-bezier(0.38, -0.48, 1, 1) infinite both;}

	.sticker02 {
		animation:swing-in-left-fwd 1.9s cubic-bezier(0.57, 0.01, 0.39, 0.63) infinite both;
	}

	@keyframes swing-in-left-fwd {
		0% {
			transform: rotateY(28deg);
			transform-origin: left;
			opacity: 1;
		}
		50% {
			transform: rotateY(30deg);
			transform-origin: left;
			opacity: 1;
		}
		100% {
			transform: rotateY(28deg);
			transform-origin: left;
			opacity: 1;
		}
	}
	@keyframes swing-in-right-fwd {
		0% {
			transform: rotateY(28deg);
			transform-origin: right;
			opacity: 1;
		}
		50% {
			transform: rotateY(30deg);
			transform-origin: right;
			opacity: 1;
		}
		100% {
			transform: rotateY(28deg);
			transform-origin: right;
			opacity: 1;
		}
	}
.first-motion .ani{opacity: 0;} 
.first-motion.play-mo .add-main1 {animation: add-kreamBox 1.2s 0s cubic-bezier(0.5, 0, 0.75, 0) both;transform:scale(1) ;transform-origin: center center;opacity: 0;}
.first-motion.play-mo .introRedLine{animation: add-line 0.5s 0.5s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(2000px,-550px);opacity: 0;}
.first-motion.play-mo .introWhiteLine{animation: add-line 0.5s 0.2s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(-1800px,-700px);opacity: 0;}
.first-motion.play-mo .introGreenLine{animation: add-line 0.5s 0.6s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(900px,350px);opacity: 0;}
.first-motion.play-mo .introVioletLine{animation: add-line 0.5s 0.6s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(-1100px,350px);opacity: 0;}

@media screen and (max-width:720px) {
	/* .first-motion.play-mo .add-main1 {animation: add-kreamBox 1.5s 0s cubic-bezier(0.5, 0, 0.75, 0) both;transform:scale(1) ;transform-origin: center center;opacity: 0;}
	.first-motion.play-mo .introRedLine{animation: add-line 0.5s 0.5s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(1485px,-1480px);opacity: 0;}
	.first-motion.play-mo .introWhiteLine{animation: add-line 0.5s 0.2s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(-1485px,-1435px);opacity: 0;}
	.first-motion.play-mo .introGreenLine{animation: add-line 0.5s 0.6s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(1485px,570px);opacity: 0;}
	.first-motion.play-mo .introVioletLine{animation: add-line 0.5s 0.6s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(-1100px,360px);opacity: 0;}		 */
	.first-motion.play-mo .add-main1 {
		animation: add-kreamBox 1.5s 0s ease-in  both;transform:scale(1) ;transform-origin: center center;opacity: 0;
		-webkit-animation:add-kreamBox 1.5s 0s ease-in  both;transform:scale(1) ;transform-origin: center center;opacity: 0;
	}
	.first-motion.play-mo .introRedLine{
		animation: add-line 1.5s 0.5s ease-in both;transform: scale(1) translate(1435px,-1435px);opacity: 0;
		-webkit-animation: add-line 1.5s 0.5s ease-in both;transform: scale(1) translate(1435px,-1435px);opacity: 0;
	}
	.first-motion.play-mo .introWhiteLine{
		animation: add-line 1.5s 0.2s ease-in both;transform: scale(1) translate(-1485px,-1435px);opacity: 0;
		-webkit-animation: add-line 1.5s 0.2s ease-in both;transform: scale(1) translate(-1485px,-1435px);opacity: 0;
	}
	.first-motion.play-mo .introGreenLine{
		animation: add-line 1.5s 0.6s ease-in both;transform: scale(1) translate(1485px,695px);opacity: 0;
		/* -webkit-animation: add-line 1.5s 0.6s ease-in both;transform: scale(1) translate(1485px,570px);opacity: 0; */
	}
	.first-motion.play-mo .introVioletLine{
		animation: add-line 1.5s 0.6s ease-in both;transform: scale(1) translate(-1100px,360px);opacity: 0;
		-webkit-animation: add-line 1.5s 0.6s ease-in both;transform: scale(1) translate(-1100px,360px);opacity: 0;
	}	
}

		
@keyframes add-kreamBox {
	0%{opacity: 0;}
	30%{opacity: 1;}
	100%	{transform: scale(1);opacity: 1;}
}
@-webkit-keyframes add-line {
	100%	{
		-webkit-transform: scale(1) translate(0,0);opacity: 1;
		transform: scale(1) translate(0,0);opacity: 1;
	}
}
@keyframes add-line {
	100%	{transform: scale(1) translate(0,0);opacity: 1;}
}
.first-motion.play-mo .kreamBox_ani {animation: add-kreamBox_ani 0.5s 1.2s   cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1)  rotateX(0deg)   skew(0deg,0deg);opacity: 1;}
@keyframes add-kreamBox_ani {
	/* 100%	{transform: scale(1) translate(0,1500px);opacity: 0;} */
}

.first-motion.play-mo .add-line01_back{animation: add-line01_back 0.5s 1.5s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(0,0);opacity: 1;}
.first-motion.play-mo .add-line02_back{animation: add-line01_back 0.5s 1.7s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(0,0);opacity: 1;}
.first-motion.play-mo .add-line03_back{animation: add-line01_back 0.5s 1.6s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(0,0);opacity: 1;}
.first-motion.play-mo .add-line04_back{animation: add-line01_back 0.5s 1.6s cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(1) translate(0,0);opacity: 1;}

@keyframes add-line01_back {
	100%	{transform: scale(1) translate(0,1500px);opacity: 0;}
}

.second-motion h2 {transform: scale(1) translate(0,-1000px);opacity: 0;}
.second-motion .link-area {transform: scale(1) translate(0,-1000px);opacity: 0;}

.second-motion h2 {transform: scale(1);opacity: 0;}
.second-motion .heading-title .ani1{transform: scale(1);opacity: 0;}
.second-motion .heading-title .ani2{transform: scale(1);opacity: 0;}
.second-motion .heading-title .ani3{transform: scale(1);opacity: 0;}
.second-motion .link-area {transform: scale(1);opacity: 0;}
.second-motion dd {transform: scale(1);opacity: 0;}
.second-motion.play-mo h2 {animation: add-open 1.5s 0.3s cubic-bezier(0.25, 1, 0.5, 1) both;}
.second-motion.play-mo .heading-title .ani1{animation: add-open 1.2s 0.0s cubic-bezier(0.25, 1, 0.5, 1) both;}
.second-motion.play-mo .heading-title .ani2{animation: add-open 1.2s 1.2s cubic-bezier(0.25, 1, 0.5, 1) both;}
.second-motion.play-mo .heading-title .ani3{animation: add-open 1.2s 1.4s cubic-bezier(0.25, 1, 0.5, 1) both;}
.second-motion.play-mo .link-area {animation: add-open 0.5s 2.4s cubic-bezier(0.25, 1, 0.5, 1) both;}
.second-motion.play-mo dd {animation: add-open 0.5s 2.2s cubic-bezier(0.25, 1, 0.5, 1) both;}
@keyframes add-open {
	0%	{transform: scale(1) translate(0,0);opacity: 0;}
	100%	{transform: scale(1) translate(0,0);opacity: 1;}
}
.headingWrap .pLine01,.headingWrap .pLine02,.headingWrap .pLine03{opacity: 0;}


/* 2023.05.17 version */
/* .headingWrap .pLine01.play-mo {animation: add-open 0.5s 0.7s cubic-bezier(0.5, 0, 0.75, 0) both;transform-origin: left top;opacity: 0;}
.headingWrap .pLine02.play-mo {animation: add-open 0.5s 0.8s cubic-bezier(0.5, 0, 0.75, 0) both;transform-origin: right bottom;opacity: 0;}
.headingWrap .pLine03.play-mo {animation: add-open 0.5s 0.6s cubic-bezier(0.5, 0, 0.75, 0) both;transform-origin: left bottom;opacity: 0;}
@keyframes add-pLine01 {
	100%	{transform: scale(1)  rotateY(0deg) rotateY(0deg);opacity: 1;}
} */

/* 2023.05.18 version */
.headingWrap .pLine01.play-mo {animation: add-pLine01 0.5s 0.2s   cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(4)  ;transform-origin: left top;opacity: 0;}
.headingWrap .pLine02.play-mo {animation: add-pLine01 0.5s 0.5s   cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(4)  ;transform-origin: right bottom;opacity: 0;}
.headingWrap .pLine03.play-mo {animation: add-pLine01 0.5s 1.5s   cubic-bezier(0.5, 0, 0.75, 0) both;transform: scale(4)  ;transform-origin: left bottom;opacity: 0;}
@keyframes add-pLine01 {
	100%	{transform: scale(1)  ;opacity: 1;}
}

.headingWrap{overflow:hidden;}

.ballonShake ,.play-mo .ballonShake {animation: ballonShake 0.25s infinite both;opacity:1 !important;transform-origin: top left;}
.ballonShake.delay10 ,.play-mo .ballonShake.delay10 {animation: ballonShake 0.4s infinite both;opacity:1 !important;transform-origin: top left;}
@keyframes ballonShake {
	0% 		{transform: rotate(0.5deg);}
	50% 	{transform: rotate(0);}
	100% 	{transform: rotate(0.5deg);}
}

.swing-in-bottom-bck {
	animation: swing-in-bottom-bck 2.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both infinite;
}

@keyframes swing-in-bottom-bck {
  0% {
    transform: rotateX(-70deg);
    transform-origin: bottom;
    opacity: 1;
  }
  100% {
    transform: rotateX(0);
    transform-origin: bottom;
    opacity: 1;
  }
}

.swing-in-top-bck {animation: swing-in-top-bck 2.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both infinite;}

@keyframes swing-in-top-bck {
  0% {
    transform: rotateX(70deg);
    transform-origin: top;
    opacity: 1;
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 1;
  }
}

@keyframes bounce-bottom {
  0% {
    transform: translateY(45px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(24px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(12px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(6px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(4px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

@keyframes bounce-top {
  0% {
    transform: translateY(-45px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(-24px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(-12px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-6px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}



.play-mo.bounce-bottom {
	animation: bounce-bottom 0.9s 0.2s both;
}
.play-mo.bounce-top {
	animation: bounce-top 0.9s both;
}
.aboutWrap .firstMotion{overflow:hidden;}

.firstMotion .first  .line{transform:translateY(50px);opacity:0;}
.firstMotion .first   .text{transform:translateY(50px) ;opacity:0;}

.firstMotion .second  .line{transform:translateY(50px) ;opacity:0;}
.firstMotion .second   .text{transform:translateY(50px) ;opacity:0;}

.firstMotion .third  .line{transform:translateY(50px) ;opacity:0;}
.firstMotion .third   .text{transform:translateY(50px) ;opacity:0;}

.firstMotion .fourth  .line{transform:translateY(50px) ;opacity:0;}
.firstMotion .fourth   .text{transform:translateY(50px) ;opacity:0;}

.firstMotion .fifth  .line{transform:translateY(50px) ;opacity:0;}
.firstMotion .fifth   .text{transform:translateY(50px) ;opacity:0;}


.firstMotion .play-mo.first   .line {animation: add-chart1 0.4s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.firstMotion .play-mo.first   .text {animation: add-chart2 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

.firstMotion .play-mo.second   .line {animation: add-chart1 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.firstMotion .play-mo.second   .text {animation: add-chart2 0.4s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

.firstMotion .play-mo.third   .line {animation: add-chart1 0.4s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.firstMotion .play-mo.third   .text {animation: add-chart2 0.4s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

.firstMotion .play-mo.fourth   .line {animation: add-chart1 0.4s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.firstMotion .play-mo.fourth   .text {animation: add-chart2 0.4s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

.firstMotion .play-mo.fifth   .line {animation: add-chart1 0.4s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.firstMotion .play-mo.fifth   .text {animation: add-chart2 0.4s 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

.aboutWrap .secondMotion{transform:translateY(70px) ;opacity:0;}
.secondMotion .round{opacity:0;}
.firstMotion .round{opacity:0;}
.secondMotion .pop{transform:translateY(70px) ;opacity:0;}
.motion-box-4 .pop{transform:translateY(70px) ;opacity:0;}
.firstMotion .pop{transform:translateY(70px) ;opacity:0;}
.firstMotion .pop-2{transform:translateY(70px) ;opacity:0;}
.aboutWrap .play-mo.secondMotion {animation: add-chart1 0.4s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.aboutWrap .play-mo.firstMotion {animation: add-chart1 0.4s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.secondMotion .round    {animation: add-round 0.5s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;}
.play-mo.firstMotion .round    {animation: add-round 0.5s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;}
.play-mo.firstMotion .pop {animation: add-chart1 0.4s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.firstMotion .pop-2 {animation: add-chart1 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.secondMotion .pop-1 {animation: add-chart1 0.4s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.secondMotion .pop-2 {animation: add-chart1 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.secondMotion .pop-3 {animation: add-chart1 0.4s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

.play-mo.motion-box-4 .pop {
	transform:translateY(70px);
	opacity: 0;
}
.play-mo.motion-box-4 .pop-1 {animation: add-chart1 0.4s 0.0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.motion-box-4 .pop-2 {animation: add-chart1 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.motion-box-4 .pop-3 {animation: add-chart1 0.4s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

@keyframes add-chart1 {
	100%	{transform: translate(0px);opacity:1;}
}
@keyframes add-chart2 {
	100%	{transform: translate(-50%,0px);opacity:1;}
}
@keyframes add-round {
	0%{transform:scale(0.5);opacity:0}
	100%{transform:scale(1) ;opacity:0.4}
}

.thirdMotion .graph{transform:translateY(70px) ;opacity:0;}
.thirdMotion .pop{transform:translateY(70px) ;opacity:0;}

.play-mo.thirdMotion .pop {animation: add-chart1 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.thirdMotion .graph {animation: add-chart1 0.4s 0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

.fourthMotion .triangle{transform:translateY(70px) ;opacity:0;}
/* .fourthMotion .triangle_front{transform:translateY(70px) ;opacity:0;} */
.fourthMotion .mix{transform:translateY(70px) ;opacity:0;}

.play-mo.fourthMotion .triangle {animation: add-chart1 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
/* .play-mo.fourthMotion .triangle_front {animation: add-chart1 0.4s 0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;} */
.play-mo.fourthMotion .mix {animation: add-chart1 0.4s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

.fifthMotion .app{transform:translateY(70px) ;opacity:0;}
.fifthMotion .round{transform:translateY(70px) ;opacity:0;}
.fifthMotion .round01{transform:translateY(70px) ;opacity:0;}
.fifthMotion .round02{transform:translateY(70px) ;opacity:0;}

 
.play-mo.fifthMotion .app {animation: add-chart1 0.4s 0s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.fifthMotion .round02 {animation: add-point 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.fifthMotion .round01 {animation: add-point 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.play-mo.fifthMotion .round {animation: add-point 0.4s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

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

.firstMotion .play-mo.fourth   .line {animation: add-chart1 0.4s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.firstMotion .play-mo.fourth   .text {animation: add-chart2 0.4s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}