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

@keyframes scrollAni {
	0%{transform:  translateY(10px);}
	100%{transform: translateY(0px);}
}

.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-ani {
	animation: flip-vertical-left 2.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;
}

@keyframes flip-vertical-left {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(-180deg);
  }
}

@keyframes light_ani {
  0% {
    transform:scale(1.02);
    opacity:0.3;
  }
  100% {
    transform:scale(1);
    opacity:1;
  }
}

@keyframes scale-ani {
  0% {
    transform:scale(1) translateX(0);
    transform-origin: center center;
  }
  100% {
    transform:scale(1.165) translateX(0);
    transform-origin: center center;
  }
}
@keyframes scale-out-ani {
  0% {
    transform:scale(1.165) translateX(0);
    transform-origin: center center;
  }
  100% {
    transform:scale(1) translateX(0);
    transform-origin: center center;
  }
}
@keyframes scale-ani2 {
  0% {
    transform:scale(1) translateX(0);
    transform-origin: center center;
  }
  100% {
    transform:scale(1.165) translateX(0);
    transform-origin: center center;
  }
}
@keyframes scale-out-ani2 {
  0% {
    transform:scale(1.165) translateX(0);
    transform-origin: center center;
  }
  100% {
    transform:scale(1) translateX(0);
    transform-origin: center center;
  }
}

@keyframes target_image {
  0%{
    transform:  translateY(0px);
  }
  100%{
    transform: translateY(10px);
  }
}

.talk-motion .talk {animation:scrollAni 1s ease-in-out alternate infinite;}
.talk-motion .shadow {animation:shadowAni 1s ease-in-out alternate infinite;}

@keyframes shadowAni {
  0% {transform:  scale(1);}
  100% {transform: scale(0.8);}
}
.motion-wrap .typing-kor .text01 ,
.motion-wrap .typing-kor .text02 ,
.motion-wrap .typing-kor .text03 ,
.motion-wrap .typing-kor .text04 {opacity:0;display:none;}

.motion-wrap.pp .typing-kor .text01 ,
.motion-wrap.pp .typing-kor .text02 ,
.motion-wrap.pp .typing-kor .text03 ,
.motion-wrap.pp .typing-kor .text04 {opacity:1;}

.scrollMotionWrap .motion-wrap .text-eng div,.motion-wrap .date ,.motion-wrap .start{opacity:0;}
.scrollMotionWrap .motion-wrap.pp .text-eng div,.motion-wrap.pp .date ,.motion-wrap.pp .start{opacity:1;}

.motion-wrap:not(.pp) .typing-kor .text01{animation: text01 0.2s 0.0s cubic-bezier(0.55, 0, 1, 0.45)   both ;}
.motion-wrap:not(.pp) .typing-kor .text02{animation: text01 0.2s 0.3s cubic-bezier(0.55, 0, 1, 0.45)   both ;}
.motion-wrap:not(.pp) .typing-kor .text03{animation: text01 0.2s 0.6s cubic-bezier(0.55, 0, 1, 0.45)   both ;}
.motion-wrap:not(.pp) .typing-kor .text04{animation: text01 0.2s 0.9s cubic-bezier(0.55, 0, 1, 0.45)   both ;}

@keyframes text01 {
  0% {
    transform: scale(0.5);
    opacity:0;
    display:none;
  }
  100% {
    transform: scale(1); 	opacity:1;
    display:inline-flex;
  }
}

.motion-wrap .typing-kor .cursor {animation: textcursor 0.8s 0.1s cubic-bezier(0.55, 0, 1, 0.45)   infinite ;}

@keyframes textcursor {
  0% {
    transform: scale(1);
	  opacity:0;
  }
  100% {
	  transform: scale(1); 	
    opacity:1;
  }
}
.scrollMotionWrap .motion-wrap:not(.pp) .text-eng div {animation: text-eng 0.5s 0.8s ease-in-out;animation-fill-mode: both;}
@keyframes text-eng {
	0%		{transform:translateY(30px);opacity:0;}
	100%	{transform: translateY(0px);opacity:1;}
}

.motion-wrap:not(.pp) .date {animation: text-eng 0.5s 1.3s ease-in-out;animation-fill-mode: both;}
.motion-wrap:not(.pp) .start {animation: text-eng 0.5s 1.8s ease-in-out;animation-fill-mode: both;}
 
.countingWrap .sticker01 {animation: sticker01 1.2s 0.1s ease-in-out alternate infinite;}
.countingWrap .sticker02 {animation: sticker01 1.2s 1.1s ease-in-out alternate infinite;}
@keyframes sticker01 {
	0%		{transform:translateY(0px);}
	100%	{transform: translateY(-30px);}
}
.recruitWorldWrap  .char{animation: sticker01 1.2s 1.1s ease-in-out alternate infinite;}
.jdWrap  .object{animation: sticker01 1.2s 1.1s ease-in-out alternate infinite;}
.introWrap  .text-object{animation: text-object 1.2s 1.1s cubic-bezier(0, 0.55, 0.45, 1) alternate  infinite;}
.yomojomoWrap  .text-object{animation: text-object 1.2s 1.1s cubic-bezier(0, 0.55, 0.45, 1) alternate  infinite;}
.star01 {animation: star 1.2s 0.1s ease-in-out alternate infinite;}
.star02 {animation: star 1.2s 1.1s ease-in-out alternate infinite;}

@keyframes star {
	0%		{transform:scale(1);}
	100%	{transform: scale(1.5);}
}
.introWrap .object{animation: object1 1.2s 1.1s ease-in-out alternate infinite; transform-origin: right bottom;}
.introWrap .char{animation: sticker01 1.2s 1.1s ease-in-out alternate infinite;}
.introWrap .heart01{animation: star 1.2s 0.1s ease-in-out alternate infinite;}
.introWrap .heart02{animation: star 1.2s 1.1s ease-in-out alternate infinite;}

@keyframes text-object {
	0%		{transform:scale(1);}
	100%	{transform: scale(1.3);}
}
@keyframes object1 {
	0%		{transform: rotate3d(0, 0, 0, 5deg);}
	100%	{transform: rotate3d(0, 0, 3, 5deg);}
}

.post:not(.play-mo) {opacity:0;}
.post.play-mo{animation: postit 1.5s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both}
@keyframes postit {
  0% {
    transform: rotateX(-50deg) skewY(10deg);
    transform-origin:right top;
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg) skewY(0deg);
    transform-origin:right top;
    opacity: 1;
  }
}
.scrollWrap {
  overflow: hidden;
}