/* 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;}
}
.load-upscroll {transform:translateY(70px) ;opacity:0;}
.load-upscroll {animation: add-upscroll 0.7s 0s ease-in-out;animation-fill-mode: both;}
.load-upscroll.delay10  {animation: add-upscroll 0.8s 0.1s ease-in-out;animation-fill-mode: both;}

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

}

.rollIn {animation: roll-in-right 0.6s 0s ease-out both;}
.rollIn.delay10 {animation: roll-in-right 0.6s 0.2s ease-out both;}
.rollIn.delay20 {animation: roll-in-right 0.6s 0.1s ease-out both;}
.rollIn.delay30 {animation: roll-in-right 0.6s 0.3s ease-out both;}

@keyframes roll-in-right {
  0% {
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

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

.kv-icon01 {animation: bounce 1.1s both;}
.kv-icon02 {animation: bounce 1.3s both;}
.kv-icon03 {animation: bounce 1.1s both;}
.kv-icon04 {animation: bounce 1.6s both;}
.kv-icon01 > div {animation:moveAni 1s 0.5s infinite alternate;}
.kv-icon01 .arr01 {animation: arr01 0.6s ease-out alternate infinite;}
.kv-icon01 .arr02 {animation: arr02 0.6s ease-out alternate infinite;}
.kv-icon04 .tank {animation: tankMove 0.6s ease-out alternate infinite;}

@keyframes arr01 {
  0% {
    transform: translateY(0) rotate(0);
    /* opacity: 0; */
  }
  100% {
    transform: translateY(-10px) rotate(0deg);
    /* opacity: 1; */
  }
}

@keyframes arr02 {
  0% {
    transform: translateY(0) rotate(0);
    /* opacity: 0; */
  }
  100% {
    transform: translateY(10px) rotate(0deg);
    /* opacity: 1; */
  }
}


@keyframes tankMove {
  0% {
    transform: translateX(0) rotate(0);
    /* opacity: 0; */
  }
  100% {
    transform: translateX(10px) rotate(0deg);
    /* opacity: 1; */
  }
}

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
 @keyframes bounce {
  0% {
    transform: translateY(-500px);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: translateY(-65px);
    animation-timing-function: ease-in;
  }
  72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  81% {
    transform: translateY(-28px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  95% {
    transform: translateY(-8px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}

.headingWrap .keyvisual-wrap figure {animation: blurMotion 1.2s both;}

@keyframes blurMotion {
	0% {
		filter: blur(10px);
	}
	100% {
		filter: blur(0px);
	}
}