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

 
.section1{
    background: url(../../assets/images/img_bg_section1.png) no-repeat center center;
	padding: 80px 0 0px;
	height: 100vh;
	background-size: 500vw auto;
	opacity: 0.1;
	animation: section1 2.7s 0.5s cubic-bezier(0.33, 1, 0.68, 1)  both;
}

@keyframes section1 {
	0%{background-size: 500vw auto;opacity: 0.3;filter: blur(4px);}
	100%{background-size: 100vw auto;opacity: 1;filter: blur(0px);}
}


.header {animation: header 0.7s 1.5s ease-in-out  both;transform:  translateY(-100px);}
@keyframes header {
	0%{transform:  translateY(-100px);opacity: 0;}
	100%{transform: translateY(0px);opacity: 1;}
}


.section1 .section1__title img:nth-of-type(1) {
	animation: header 0.5s 1.8s cubic-bezier(0.33, 1, 0.68, 1)  both;transform:  translateY(-100px);
}

.section1 .section1__title img:nth-of-type(2) {
	animation: header 0.7s 2.0s cubic-bezier(0.33, 1, 0.68, 1)  both;transform:  translateY(-100px);
}

.section1 .section1__title p {
	animation: header 0.9s 2.2s cubic-bezier(0.33, 1, 0.68, 1)  both;transform:  translateY(-100px);
}
.section1 .section1__bottom .section1__bottom--info {
	animation: bottom1 0.9s cubic-bezier(0.33, 1, 0.68, 1)  both;transform:  translateY(100px);
}
.section1 .section1__bottom .btn__support {
	animation: bottom1 0.7s 2.0s cubic-bezier(0.33, 1, 0.68, 1)  both;transform:  translateY(100px);
}
/* .section1 .section1__bottom .btn__down {
	animation: bottom1 0.5s 1.8s cubic-bezier(0.33, 1, 0.68, 1)  both;transform:  translateY(100px);
} */
@keyframes bottom1 {
	0%{transform:  translateY(100px);opacity: 0;}
	100%{transform: translateY(0px);opacity: 1;}
}


.section1__visual .visual__1{animation: visual__1 1.7s 1.0s cubic-bezier(0.34, 1.56, 0.64, 1)  both;z-index:10;}
@keyframes visual__1 {
	0%{transform: scale(0);opacity: 0;}
	40%{transform: scale(1.5);}
	60%{transform: scale(1.5);}
	100%{transform: scale(1);opacity: 1;}
}
.section1__visual .visual__1.add{animation: visual__1add 1.7s 1.0s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;}
@keyframes visual__1add {
	0%{transform: scale(1) rotate3d(1, 1, 1, 0deg);}
	50%{transform: rotate3d(1, 3, -4, 2deg);}
	100%{transform: scale(1.15) rotate3d(1, -3, 4, 2deg);}
}

.section1__visual .visual__2{animation: visual__2 0.7s 2.2s cubic-bezier(0.34, 1.56, 0.64, 1)  both;z-index:1;}
@keyframes visual__2 {
	0%{transform: scale(0) translate(281px, 144px);opacity: 0;}
	100%{transform: scale(1)  translate(0px, 0px);opacity: 1;}
}
.section1__visual .visual__2.add{animation: visual__2add 1.7s 1.0s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;}
@keyframes visual__2add {
	0%{transform:  translate(0px, 0px);opacity: 1;}
	100%{transform:   translate(120px, 30px);opacity: 0.5;}
}

.section1__visual .visual__3{animation: visual__3 0.7s 2.2s cubic-bezier(0.34, 1.56, 0.64, 1)  both;z-index:1;}
@keyframes visual__3 {
	0%{transform: scale(0) translate(394px, 45px);;opacity: 0;}
	100%{transform: scale(1)  translate(0px, 0px);opacity: 1;}
}
.section1__visual .visual__3.add{animation: visual__3add 1.7s 1.1s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;}
@keyframes visual__3add {
	0%{transform:  translate(0px, 0px);opacity: 1;}
	100%{transform:   translate(140px, 10px);opacity: 0.5;}
}

.section1__visual .visual__4{animation: visual__4 0.8s 2.1s cubic-bezier(0.34, 1.56, 0.64, 1)  both;z-index:1;}
@keyframes visual__4 {
	0%{transform: scale(0) translate(394px, 5px);;opacity: 0;}
	100%{transform: scale(1)  translate(0px, 0px);opacity: 1;}
}
.section1__visual .visual__4.add{animation: visual__4add 1.7s 1.1s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;}
@keyframes visual__4add {
	0%{transform:  translate(0px, 0px);opacity: 1;}
	100%{transform:   translate(150px, 10px);opacity: 0.5;}
}
.section1__visual .visual__5{animation: visual__5 0.7s 2.1s cubic-bezier(0.34, 1.56, 0.64, 1)  both;z-index:1;}
@keyframes visual__5 {
	0%{transform: scale(0) translate(239px, -158px);opacity: 0;}
	100%{transform: scale(1)  translate(0px, 0px);opacity: 1;}
}
.section1__visual .visual__5.add{animation: visual__5add 1.7s 1.1s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;}
@keyframes visual__5add {
	0%{transform:  translate(0px, 0px);opacity: 1;}
	100%{transform:   translate(110px, -60px);opacity: 0.0;}
}

.section1__visual .visual__6{animation: visual__6 0.7s 2.1s cubic-bezier(0.34, 1.56, 0.64, 1)  both;z-index:1;}
@keyframes visual__6 {
	0%{transform: scale(0) translate(-195px, -129px);;opacity: 0;}
	100%{transform: scale(1)  translate(0px, 0px);opacity: 1;}
}
.section1__visual .visual__6.add{animation: visual__6add 1.7s 1.1s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;}
@keyframes visual__6add {
	0%{transform:  translate(0px, 0px);opacity: 1;}
	100%{transform:   translate(-70px, -40px);opacity: 0.0;}
}

.section1__visual .visual__7{animation: visual__7 0.8s 2.1s cubic-bezier(0.34, 1.56, 0.64, 1)  both;z-index:1;}
@keyframes visual__7 {
	0%{transform: scale(0) translate(-295px, 58px);;opacity: 0;}
	100%{transform: scale(1)  translate(0px, 0px);opacity: 1;}
}
.section1__visual .visual__7.add{animation: visual__7add 1.7s 1.1s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;}
@keyframes visual__7add {
	0%{transform:  translate(0px, 0px);opacity: 1;}
	100%{transform:   translate(-70px, 20px);opacity: 0.0;}
}