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

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

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.5s 1.2s 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;}
@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%   {transform: translateY(10px);}
	100% {transform: translateY(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;}  
  @keyframes slide-in-right {
	0% {
	  		transform: translateX(1000px);
	  		opacity: 0;
	}
	100% {
	  		transform: translateX(0);
	  		opacity: 1;
	}
  }

.add-balloon {animation: balloonAni 1.3s 0s alternate infinite ;}
.add-balloon.delay10 {animation: balloonAni 1.5s 0.5s alternate infinite ;}
.add-balloon.delay20 {animation: balloonAni 1.3s 1s alternate infinite ;}
@keyframes balloonAni {
	100% {transform: translate(0%,-10px);}
}


  .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.delay1 ,.play-mo .add-downscroll.delay1 {animation: add-downscroll 0.7s 0.1s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay2 ,.play-mo .add-downscroll.delay2 {animation: add-downscroll 0.7s 0.2s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay3 ,.play-mo .add-downscroll.delay3 {animation: add-downscroll 0.7s 0.3s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay4 ,.play-mo .add-downscroll.delay4 {animation: add-downscroll 0.7s 0.4s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay5 ,.play-mo .add-downscroll.delay5 {animation: add-downscroll 0.7s 0.5s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay6 ,.play-mo .add-downscroll.delay6 {animation: add-downscroll 0.7s 0.6s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay7 ,.play-mo .add-downscroll.delay7 {animation: add-downscroll 0.7s 0.7s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay8 ,.play-mo .add-downscroll.delay8 {animation: add-downscroll 0.7s 0.8s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay9 ,.play-mo .add-downscroll.delay9 {animation: add-downscroll 0.7s 0.9s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay10 ,.play-mo .add-downscroll.delay10 {animation: add-downscroll 0.7s 1.0s ease-in-out;animation-fill-mode: both;}
  .play-mo.add-downscroll.delay11 ,.play-mo .add-downscroll.delay11 {animation: add-downscroll 0.7s 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay12 ,.play-mo .add-downscroll.delay12 {animation: add-downscroll 0.7s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay13 ,.play-mo .add-downscroll.delay13 {animation: add-downscroll 0.7s 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay14 ,.play-mo .add-downscroll.delay14 {animation: add-downscroll 0.7s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay15 ,.play-mo .add-downscroll.delay15 {animation: add-downscroll 0.7s 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay16 ,.play-mo .add-downscroll.delay16 {animation: add-downscroll 0.7s 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
  .play-mo.add-downscroll.delay17 ,.play-mo .add-downscroll.delay17 {animation: add-downscroll 0.7s 1.7s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}

.moon2 {animation: moon2 1.3s ease-in-out infinite alternate;transform-origin: right center;}
@keyframes moon2 {
	0% 		{transform:scale(1) translateY(0);opacity:1;}
	100% 	{transform:scale(1.1) translateX(10px);opacity:0.8;}
}

.star01 {animation: star 7.0s 0s ease-in-out infinite ;opacity:0;}
.star02 {animation: star 7.0s  0.5s ease-in-out infinite ;opacity:0;}
.star03 {animation: star 7.0s  0.3s ease-in-out infinite ;opacity:0;}
.star04 {animation: star 7.0s  0.2s ease-in-out infinite ;opacity:0;}
.star05 {animation: star 7.0s  0.8s ease-in-out infinite ;opacity:0;}
.star06 {animation: star 7.0s  0.4s ease-in-out infinite ;opacity:0;}
@keyframes star {
	0% 		{transform: translate(1000px,-1000px);opacity:1;}
	100% 	{transform: translate(-500px,500px);opacity:0;}
}

@keyframes main_show {
	0%{
		transform: scale( 0 );opacity: 0;
	
	}
	100%{
		transform: scale( 1 );opacity: 1;
	
	}
}

.light {
	opacity: 1;
	animation: light 0.8s 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;
}
@keyframes light {
	0%{
		opacity: 1;
	
	}
	100%{
		opacity: 0.7;
	
	}
}

.ani_btn:hover {	animation: tabchar2 0.5s 0.1s alternate infinite;
	transition:transform 10s easy-in;}

@keyframes tabchar2 {
	0%{	background-position: center 0;	}
	100%{background-position: center 20px;	}
}

.benefitWrap .char01 ,.campInfoWrap .char01{
	animation: tabchar 1s alternate infinite;
	transition:transform 10s easy-in;
}

.add-upscrollbg:not(.play-mo) {background-position: center 70px;opacity:0;}
.play-mo.add-upscrollbg ,.play-mo .add-upscrollbg {animation: add-upscrollbg 1.0s 0s ease-in-out;animation-fill-mode: both;}
@keyframes add-upscrollbg {
	0%{	background-position: center 70px;	opacity:0;}
	100%{background-position: center 0;	opacity:1;}
}


.headingWrap .heading__title dt {animation: add-upscroll 0.7s 0s ease-in-out;animation-fill-mode: both;  }
.headingWrap .heading__title dd {animation: add-upscroll 0.7s 0.2s ease-in-out;animation-fill-mode: both;  }


.fadeZoom {
    animation: fadeZoom 0.7s 1s cubic-bezier(0.34, 1.56, 0.64, 1) ;animation-fill-mode: both;
	opacity:0;
	transform: translateX(0);
}
@keyframes fadeZoom {

	100%{
		transform: translateX(0);
		opacity:1;
	}
}
.fadeZoom2 {
    animation: fadeZoom2 0.7s 0s cubic-bezier(0.34, 1.56, 0.64, 1) ;animation-fill-mode: both;
	
}
@keyframes fadeZoom2 {

	100%{
		transform: translateX(0);
		opacity:0;
	}
}

.aware-button.top, .aware-button.right, .aware-button.bottom, .aware-button.left {
	transition:0.5s ease-in-out;
}
.aware-button.top {
	transform: translateY(20px);
}
.aware-button.right{
	transform: translateX(-20px);
}
.aware-button.bottom {
	transform: translateY(-20px);
}
.aware-button.left {
	transform: translateX(20px);
}
.aware-button:focus {
	transform: scale(1.1);
}

.aware-button {
    transition: transform 3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.slide-bl,
.slide-br,
.slide-left {opacity:0;}
.play-mo.slide-bl, .play-mo .slide-bl {animation:slide-bl 1.5s cubic-bezier(.25,.46,.45,.94) both;}
.play-mo.slide-br, .play-mo .slide-br {animation:slide-br 1.5s cubic-bezier(.25,.46,.45,.94) both}
.play-mo.slide-left, .play-mo .slide-left {animation:slide-left 1.5s cubic-bezier(.25,.46,.45,.94) both}
@keyframes slide-bl {
	0% 	{
		transform: translateY(-80px) translateX(0);
		
	}
	100% {
		transform: translateY(0) translateX(0);			
		opacity:1;
	}
}
@keyframes slide-br {
	0% 	{
		transform: translateY(-80px) translateX(-80px);
	}
	100% {
		transform: translateY(0) translateX(0);			
		opacity:1;
	}
}
@keyframes slide-left {
	0% 	{
		transform: translateY(0) translateX(-80px);
	}
	100% {
		transform: translateY(0) translateX(0);			
		opacity:1;
	}
}

.service__group .items{}

.companyInfoWrap .service__group .items:nth-of-type(1) {transform:perspective(400px) rotateY(-5deg);}
.companyInfoWrap .service__group .items:nth-of-type(2) {transform: translateX(-155px) perspective(400px) rotateY(-5deg) scale(0.90);}
.companyInfoWrap .service__group .items:nth-of-type(3) {transform: translateX(-370px) perspective(400px) rotateY(-5deg) scale(0.82);}
.companyInfoWrap .service__group .items:nth-of-type(4) {transform: translateX(-582px) perspective(400px) rotateY(-5deg) scale(0.75);}

.play-mo.service__group .items:nth-of-type(1) {animation:  show_card 1.2s 0.4s cubic-bezier(0, 0.55, 0.45, 1) both;}
.play-mo.service__group .items:nth-of-type(2) {animation:  show_card 1.2s 0.3s cubic-bezier(0, 0.55, 0.45, 1) both;}
.play-mo.service__group .items:nth-of-type(3) {animation:  show_card 1.2s 0.2s cubic-bezier(0, 0.55, 0.45, 1) both;}
.play-mo.service__group .items:nth-of-type(4) {animation:  show_card 1.2s 0.1s cubic-bezier(0, 0.55, 0.45, 1) both;}
 @keyframes show_card{
0%{}
40%{transform:perspective(400px) translateX(0) rotateY(5deg);}
100%{transform:perspective(400px) translateX(0) rotateY(0deg);}
}

.heading__title figure ,.heading__title a{transform:translateY(-70px) ;opacity:0;}
.heading__title figure {animation: add-downscroll 0.7s 0.2s ease-in-out;animation-fill-mode: both;}
.heading__title a {animation: add-downscroll 0.7s 0.4s ease-in-out;animation-fill-mode: both;}


.motion__group .add_right1{transform: translate(800px,-800px);opacity:0;}
.motion__group .add_right2 .ani{transform: translate(800px,-800px);opacity:0;}
.motion__group .add_right3{transform: translate(800px,-800px);opacity:0;}
.motion__group .add_right4{transform: translate(800px,-800px);opacity:0;}
.motion__group .add_right5{transform: translate(800px,-800px);opacity:0;}
.motion__group .add_right6{transform: translate(800px,-800px);opacity:0;}
.motion__group .add_right7{transform: translate(800px,-800px);opacity:0;}
.motion__group .add_right8{transform: translate(800px,-800px);opacity:0;}
.motion__group .add_right9{transform: translate(800px,-800px);opacity:0;}

.motion__group .add_right1 {animation: add-right 0.7s 0.2s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right2  .ani:nth-of-type(1){animation: add-right 0.7s 0.3s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right2  .ani:nth-of-type(2){animation: add-right 0.7s 0.4s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right2  .ani:nth-of-type(3){animation: add-right 0.7s 0.5s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right2  .ani:nth-of-type(4){animation: add-right 0.7s 0.6s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right3 {animation: add-right 0.7s 0.4s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right4 {animation: add-right 0.7s 0.5s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right5 {animation: add-right 0.7s 0.6s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right6 {animation: add-right 0.7s 0.7s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right7 {animation: add-right 0.7s 0.8s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right8 {animation: add-right 0.7s 0.9s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .add_right9 {animation: add-right 0.7s 1.0s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}

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

.motion__group .sharp-cloud.add_top {transform: translateY(-800px);opacity:0;}
.motion__group .sharp-wifi .add_top.ani {transform: translateY(-800px);opacity:0;}
.motion__group .sharp-round.add_top {transform: translateY(-800px);opacity:0;}

.motion__group .sharp-cloud.add_top {animation: add-right 0.7s 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}
.motion__group .sharp-wifi .add_top.ani:nth-of-type(1) {animation: add-right 0.7s 1.3s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .sharp-wifi .add_top.ani:nth-of-type(2) {animation: add-right 0.7s 1.4s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .sharp-wifi .add_top.ani:nth-of-type(3) {animation: add-right 0.7s 1.5s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .sharp-wifi .add_top.ani:nth-of-type(4) {animation: add-right 0.7s 1.6s cubic-bezier(0, 0.55, 0.45, 1);animation-fill-mode: both;}
.motion__group .sharp-round.add_top {animation: add-right 0.7s 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;}


.motion__group .sharp-wifi .next_ani.ani:nth-of-type(1) {animation: add-next-w 1.3s .3s cubic-bezier(0, 0.55, 0.45, 1) alternate infinite;}
.motion__group .sharp-wifi .next_ani.ani:nth-of-type(2) {animation: add-next-w 1.3s .4s cubic-bezier(0, 0.55, 0.45, 1) alternate infinite;}
.motion__group .sharp-wifi .next_ani.ani:nth-of-type(3) {animation: add-next-w 1.3s .5s cubic-bezier(0, 0.55, 0.45, 1) alternate infinite;}
.motion__group .sharp-wifi .next_ani.ani:nth-of-type(4) {animation: add-next-w 1.3s .6s cubic-bezier(0, 0.55, 0.45, 1) alternate infinite;}

@keyframes add-next-w {
	0% {
		transform: scale(1) translate(-5px ,-5px);
	}
	100% {
		transform: scale(1.1) translate(0px ,0px);
	}
}
.motion__group .sharp-joystick.next_ani .ani,
.benefitWrap .joystick .handle {animation: add-next-joy 1.3s .3s ease-in-out alternate infinite;transform-origin: bottom center;}
@keyframes add-next-joy {
	0% {
		transform: rotate3d(1, 1, 1, 7deg);;
	}
	50% {
		transform: rotate3d(1, 1, -10, 7deg);;
	}
	100% {
		transform: rotate3d(1, 1, 10, 17deg) ;
	}
}
.motion__group .sharp-cloud.next_ani {animation: add-pre-cloud 1.3s .3s ease-in-out alternate infinite;}
@keyframes add-pre-cloud {
	0%{
		transform: scale( 1.0 ) translate(0px, 0px) ;
	
	}
	100%{
		transform: scale( 1.00 ) translate(10px, -8px) ;
	
	}
}

.motion__group .box-town.next_ani {animation: add-next-town 2.3s .3s ease-in-out alternate infinite;transform-origin: bottom center;}
@keyframes add-next-town {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scaleY(0.95) scaleX(1.05);
	}
	100% {
		transform: scaleY(1.02)  scaleX(0.95);
	}
}


.b_object svg{animation: add-6 6s linear infinite;transform-origin: 50% 50%;}
@keyframes add-6 {

	100% {
		opacity:1;
		transform: rotate(360deg) ;
	}
}
.b_object01 .o1 {animation: add-1 1.2s  alternate infinite;transform-origin: center center;}
.b_object01 .o2 {animation: add-2 1.1s  alternate infinite;transform-origin: center center;}
@keyframes add-1 {
	0% {
		opacity:0;
		transform:translateY(70px);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes add-2 {
	0% {
		opacity:0;
		transform:translateY(70px);
	}
	100% {
		opacity:1;
		transform:translateY(0);
	}
}
.h_object {animation: h-1 2.2s  alternate infinite;transform-origin: center center;}
.h_object02 {animation: h-1 1.8s  alternate infinite;transform-origin: center center;}
.h_object01 {animation: h-2 1.8s  alternate infinite;transform-origin: center center;}
@keyframes h-1 {
	0% {
		opacity:0;
		transform:scale(1)  ;
	}
	100% {
		opacity:1;
		transform:scale(1.2)  ;
	}
}
@keyframes h-2 {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(90deg);
	}
}
.hRound {animation: h-2 4.3s   alternate infinite;transform-origin: center center;}
.object01 ,.object02 ,.object03 ,.p_object01 ,.p_object02 {animation: add-6 4.3s   linear infinite;transform-origin: center center;}
.object05 {animation: add-6 5.3s   linear infinite;transform-origin: center center;}
.object04 {animation: add-6 2.3s   linear infinite;transform-origin: center center;}


.link:hover t:nth-of-type(1){animation:  show_link_tutorial_hover 0.2s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;}
.link:hover t:nth-of-type(2){animation:  show_link_tutorial_hover 0.2s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;}
.link:hover t:nth-of-type(3){animation:  show_link_tutorial_hover 0.2s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;}
.link:hover t:nth-of-type(4){animation:  show_link_tutorial_hover 0.2s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;}
.link:hover t:nth-of-type(5){animation:  show_link_tutorial_hover 0.2s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;}
.link:hover t:nth-of-type(6){animation:  show_link_tutorial_hover 0.2s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;}
.link:hover t:nth-of-type(7){animation:  show_link_tutorial_hover 0.2s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;}
.link:hover t:nth-of-type(8){animation:  show_link_tutorial_hover 0.2s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;}
.link:hover t:nth-of-type(9){animation:  show_link_tutorial_hover 0.2s 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) alternate ;}

@keyframes show_link_tutorial_hover {
	0% 	{transform: scale(1);opacity:0.7;}
	100% 	{transform: scale(1.3);opacity:1;}
}

.headingRedWrap .object ,.headingMotion .shape {animation: h-4 2.2s  alternate infinite;transform-origin: center center;}

@keyframes h-4 {
	0% {
		opacity:0;
		transform:scale(1) translateY(20px);
	}
	100% {
		opacity:1;
		transform:scale(1.2) translateY(0px);
	}
}
.hiringWrap .object,
.movieWrap .object {animation: h-4 5.2s  alternate infinite;transform-origin: center center;}

.hiringWrap .hiring__list li:nth-of-type(1) .card dl:before {animation: add-11 2.2s  linear infinite;transform-origin: center center;}
@keyframes add-11 {
	0% {
		opacity:1;
		transform:translateY(20px);
	}
	100% {
		opacity:0;
		transform:translateY(0);
	}
}

.hiringWrap .hiring__list li:nth-of-type(2) .card dl:before {animation: add-12 3.2s  0.3s linear infinite;transform-origin: center center;}
@keyframes add-12 {

	100% {
		transform: rotate(360deg) ;
	}
}

.hiringWrap .hiring__list li:nth-of-type(3) .card dl:before {animation: add-13 2.2s  0.2s  alternate infinite;transform-origin: center center;}
@keyframes add-13 {
	0% {
		opacity:1;
		transform:scale(1);
	}
	100% {
		opacity:0.5;
		transform:scale(0.9);
	}
}
.hiringWrap .hiring__list li:nth-of-type(4) .card dl:before {animation: add-14 2.2s 0.1s alternate infinite;transform-origin: center center;}
@keyframes add-14 {
	0% {
		opacity:1;
		transform:scale(1);
	}
	100% {
		opacity:0.5;
		transform:scale(0.9);
	}
}

.p_object05 path:nth-of-type(1)  {animation: p-1 1.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
.p_object05 path:nth-of-type(2)  {animation: p-2 1.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
.p_object05 path:nth-of-type(3)  {animation: p-3 1.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}

@keyframes p-1 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	100% {
		opacity:0.5;
		transform: translate(84px,142px);
	}
}
@keyframes p-2 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	100% {
		opacity:0.5;
		transform: translate(55px,94px);
	}
}
@keyframes p-3 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	100% {
		opacity:0.5;
		transform: translate(28px,47px);
	}
}

 
.HQ_about .object path:nth-of-type(1)  {animation: p-11 1.5s 0.1s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite alternate;}
.HQ_about .object path:nth-of-type(2)  {animation: p-12 1.5s 0.1s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite alternate;}

 @keyframes p-11 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	100% {
		opacity:0.5;
		transform: translate(-58px,71px);
	}
}
@keyframes p-12 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	100% {
		opacity:0.5;
		transform: translate(-30px,34px);
	}
}

.headingRedWrap .object06 path:nth-of-type(1)  {animation: p-21 2.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
.headingRedWrap .object06 path:nth-of-type(2)  {animation: p-22 2.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
.headingRedWrap .object06 path:nth-of-type(3)  {animation: p-23 2.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
@keyframes p-21 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	100% {
		opacity:0.5;
		transform: translate(112px,0);
	}
}
@keyframes p-22 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	100% {
		opacity:0.5;
		transform: translate(77px,0);
	}
}
@keyframes p-23 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	100% {
		opacity:0.5;
		transform: translate(40px,0);
	}
}

 .headingRedWrap .object06 {animation: pp-23 3.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
 @keyframes pp-23 {
	0% {
		transform: perspective(400px) translate(0,0) rotateY(0deg) rotateX(0deg) scale(1);
	}
	50% {
			transform: perspective(400px) translate(20px,-20px) rotateY(-12deg) rotateX(20deg) scale(0.5);
	}
	100% {
			transform: perspective(400px) translate(-20px,30px) rotateY(52deg) rotateX(-40deg) scale(0.8);
	}
}

.object-group svg:nth-of-type(2)   {transform: rotate(45deg); transform-origin: center center;}
 /*
.aboutWrap .object   {animation: add-a 2.2s 0.5s alternate infinite;transform-origin: center center;}
@keyframes add-a {
	0% {
		transform:scale(1);
	}
	100% {
		transform:scale(0.7);
	}
}
*/

.headingMotion .star  {animation: add-6 2.3s   linear infinite;transform-origin: center center;}
.headingMotion .spring svg {animation: p-40 2.5s 0.1s   infinite alternate; }
.headingMotion .spring path:nth-of-type(1)  {animation: p-41 2.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
.headingMotion .spring path:nth-of-type(2)  {animation: p-42 2.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
.headingMotion .spring path:nth-of-type(3)  {animation: p-43 2.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;}
@keyframes p-40 {
	0% {
		transform:perspective(300px) rotateY(40deg) rotateX(20deg);
	}
	50% {
		transform:perspective(120px) rotateY(10deg) rotateX(50deg);
	}
	100% {
		transform:perspective(200px) rotateY(30deg) rotateX(20deg);
	}
}
@keyframes p-41 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	80% {
		opacity:0.5;
		transform: translate(62px,0);
	}
}
@keyframes p-42 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	80% {
		opacity:0.5;
		transform: translate(44px,0);
	}
}
@keyframes p-43 {
	0% {
		opacity:1;
		transform:translate(0,0);
	}
	80% {
		opacity:0.5;
		transform: translate(25px,0);
	}
}