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

.add-star:not(.play-mo) {opacity:0;}
.play-mo.add-star ,.play-mo .add-star {animation: add-star 1.7s 0.0s linear infinite;opacity:1;}

@keyframes add-star {
	100%	{transform: rotate(360deg);opacity:1;}
}

.play-mo.ballonShake ,.play-mo .ballonShake {animation: ballonShake  0.15s infinite both;}
@keyframes ballonShake {
	0% 		{transform: rotate(1.2deg);}
	50% 	{transform: rotate(0);}
	100% 	{transform: rotate(1.2deg);}
}
.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;}
}
.jobsHashListArea .hash_list li {transition:0.3s;}


.add-qzoom:not(.play-mo) {transform:scale(0) ;opacity:0;}





.add-flipInX:not(.play-mo) {opacity:0}

.play-mo.add-flipInX ,.play-mo .add-flipInX{

animation: flipInX 0.8s  cubic-bezier(0.34, 1.56, 0.64, 1);animation-fill-mode: both;

}

@keyframes flipInX{
0%{transform:perspective(400px) rotateX(90deg);opacity:0}
40%{transform:perspective(400px) rotateX(-10deg)}
70%{transform:perspective(400px) rotateX(10deg)}
100%{transform:perspective(400px)  rotateX(0deg);opacity:1}
}



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

 

.add-lightSpeedIn:not(.play-mo) {opacity:0;}
.play-mo.add-lightSpeedIn ,.play-mo .add-lightSpeedIn{transform-origin: bottom;
animation: lightSpeedIn 0.8s 1.2s ease;animation-fill-mode: both;}

 
@keyframes lightSpeedIn{
0%{transform:translateX(100%) skewX(-10deg);opacity:0}
60%{transform:translateX(0%) skewX(10deg);opacity:1}
80%{transform:translateX(0%) skewX(-5deg);opacity:1}
100%{transform:translateX(0%) skewX(0deg);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);
	}
}


.benefitTabContent  .frame{ opacity:0}
.benefitTabContent  .photo{ transform:translate(13px,-11px);opacity:0.5}
.benefitTabContent  .point{ transform:translateX(535px);opacity:0}
.benefitTabContent  .area{ transform:translateX(100px);opacity:0}
.benefitTabContent  .content{ transform:translateY(100px);opacity:0}


.benefitTabContent.active  .frame{animation: activeFrame 0.8s ease;animation-fill-mode: both; }
.benefitTabContent.active  .photo{ animation: activePhoto 0.3s ease;animation-fill-mode: both;}
.benefitTabContent.active  .point{animation: activePoint 0.5s ease;animation-fill-mode: both; }
.benefitTabContent.active  .area{animation: activeArea 0.5s ease;animation-fill-mode: both; }
.benefitTabContent.active  .content{animation: activeContent 0.5s ease;animation-fill-mode: both; }
@keyframes activeFrame{
100%{opacity:1}
}
@keyframes activePhoto{
100%{transform:translate(0,0);opacity:1}
}
@keyframes activePoint{
100%{transform:translate(0,0);opacity:1}
}
@keyframes activeArea{
100%{transform:translateX(0);opacity:1}
}
@keyframes activeContent{
100%{transform:translateY(0);opacity:1}
}

.tabContainer .tabContent .cardTab li:nth-of-type(1){
	transform:translateX(50%) ;opacity:0;

}


.tabContainer .tabContent .cardTab li:nth-of-type(1) .glass{
	transform:translateX(10%);opacity:0;
}
.tabContainer .tabContent .cardTab li:nth-of-type(1) .text{
	transform:translateX(10%);opacity:0;
}

.tabContainer .tabContent .cardTab li:nth-of-type(2){
	transform:translateX(-50%);opacity:0;
}

.tabContainer .tabContent .cardTab li:nth-of-type(2) .glass{
	transform:translateX(-10%);opacity:0;
}
.tabContainer .tabContent .cardTab li:nth-of-type(2) .text{
	transform:translateX(-10%);opacity:0;
}
.tabContainer .tabContent.active .cardTab li{
	animation: activeTabContentClass 0.5s ease;animation-fill-mode: both;
}

.tabContainer .tabContent.active .cardTab li .glass{
	animation: activeTabContentClass 0.8s  0.2s ease;animation-fill-mode: both;
}
.tabContainer .tabContent.active .cardTab li .text{
	animation: activeTabContentClass 0.9s 0.5s ease;animation-fill-mode: both;
}


@keyframes activeTabContentClass{
100%{transform:translateX(0);opacity:1}
}


.add-time:not(.play-mo){
	transform:  translateY(70px) ;opacity:0;
}

.play-mo.add-time,.play-mo .add-time {
    animation: target_image 10s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes target_image {

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

}