@charset "utf-8";

/***** fx_parallax *****/

.fx_parallax_kit1 {
  transition: 0.0s;
}

.fx_parallax_kit2 {
  transition: 0.7s;
}

.fx_parallax_kit3 {
  transition: 1.4s;
}

.fx_parallax_kit4 {
  transition: 2.1s;
}

/***** fx_fadein *****/

.fx_fadein {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fx_fadein_act {
	opacity: 1;
  animation: fx_fadein 0s 0s forwards;
}

.fx_fadein_up {
  transform: translate( 0px, 50px );
}

.fx_fadein_up.fx_fadein_act {
  transform: translate( 0px, 0px );
}

.fx_fadein_down {
  transform: translate( 0px, -50px );
}

.fx_fadein_down.fx_fadein_act {
  transform: translate( 0px, 0px );
}

.fx_fadein_slide_rl {
  transform: translate( 50px, 0px );
}

.fx_fadein_slide_rl.fx_fadein_act {
  transform: translate( 0px, 0px );
}

.fx_fadein_slide_lr {
  transform: translate( -50px, 0px );
}

.fx_fadein_slide_lr.fx_fadein_act {
  transform: translate( 0px, 0px );
}

@keyframes fx_fadein {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

/***** fx_fadeout *****/

.fx_fadeout {
  opacity: 1;
  transform: translate( 0, 0 );
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fx_fadeout_act {
	opacity: 0;
}

.fx_fadeout_up.fx_fadeout_act {
  transform: translate( 0, -50px );
  animation: fx_fadeout 0s 0.5s forwards;
}

.fx_fadeout_down.fx_fadeout_act {
  transform: translate( 0, 50px );
  animation: fx_fadeout 0s 0.5s forwards;
}

.fx_fadeout_slide_rl.fx_fadeout_act {
  transform: translate( -50px, 0 );
  animation: fx_fadeout 0s 0.5s forwards;
}

.fx_fadeout_slide_lr.fx_fadeout_act {
  transform: translate( 50px, 0 );
  animation: fx_fadeout 0s 0.5s forwards;
}

@keyframes fx_fadeout {
  0% {
    visibility: visible;
  }
  100% {
    z-index: -10;
    visibility: hidden;
  }
}

/***** fx_rotation *****/

.fx_rotation {
	position: fixed;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
  padding: 0px 0px 0px 0px;
  perspective: 50px;
}

.fx_rotation_object1 {
  width: 100%;
  height: 100%;
  transform: translateZ(20px);
  filter: blur(0.0px);
}

.fx_rotation::after {
	content: "";
	position: absolute;
	z-index: 10;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	opacity: 0.3;
}

.fx_rotation_kit1 {
	position: absolute;
	z-index: 10;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
}

.fx_rotation_kit1_set1 {
	animation: fx_rotation_kit1_set1 70s linear infinite;
}

.fx_rotation_kit1_set2 {
	animation: fx_rotation_kit1_set1 60s linear infinite;
}

.fx_rotation_kit1_set3 {
	animation: fx_rotation_kit1_set1 50s linear infinite;
}

.fx_rotation_kit1_set4 {
	animation: fx_rotation_kit1_set1 300s linear infinite;
}

.fx_rotation_kit1_set5 {
	animation: fx_rotation_kit1_set1 200s linear infinite;
}

.fx_rotation_kit1_set6 {
	animation: fx_rotation_kit1_set1 100s linear infinite;
}

.fx_rotation_kit1_set7 {
	animation: fx_rotation_kit1_set1 300s linear infinite;
}

.fx_rotation_kit1_set8 {
	animation: fx_rotation_kit1_set1 200s linear infinite;
}

.fx_rotation_kit1_set9 {
	animation: fx_rotation_kit1_set1 100s linear infinite;
}

.fx_rotation_kit1_set1 path,
.fx_rotation_kit1_set2 path,
.fx_rotation_kit1_set3 path,
.fx_rotation_kit1_set4 path,
.fx_rotation_kit1_set5 path {
	animation: fx_rotation_kit1_set2 10s linear infinite;
}

.fx_rotation_kit1_set6 path,
.fx_rotation_kit1_set7 path,
.fx_rotation_kit1_set8 path,
.fx_rotation_kit1_set9 path {
	animation: fx_rotation_kit1_set3 10s 5s linear infinite;
}

@keyframes fx_rotation_kit1_set1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fx_rotation_kit1_set2 {
  0% {
		fill: #1673B2;
  }
	50% {
		fill: #15ADDB;
	}
  100% {
		fill: #1673B2;
  }
}

@keyframes fx_rotation_kit1_set3 {
  0% {
		fill: #1673B2;
  }
	50% {
		fill: #15ADDB;
	}
  100% {
		fill: #1673B2;
  }
}

/***** font *****/

.fx_meteor_line {
	position: fixed;
	z-index: -100;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.fx_meteor_line_kit1 {
  position: absolute;
  z-index: -100;
  top: 0;
  left: 0;
	width: 300px;
	opacity: 0;
}

.fx_meteor_line_kit1 svg {
	width: 100%;
	display: block;
}

.fx_meteor_line_kit1_set1 {
	animation: fx_meteor_line_kit1_set1 5s infinite;
}

.fx_meteor_line_kit1_set2 {
	animation: fx_meteor_line_kit1_set2 5s 1s infinite;
}

.fx_meteor_line_kit1_set3 {
	animation: fx_meteor_line_kit1_set3 5s 2s infinite;
}

@keyframes fx_meteor_line_kit1_set1 {
  0% {
		fill: #1673B2;
		opacity: 0;
		transform: translate( 0px, 0px) rotate(10deg);
  }
	60% {
		fill: #15ADDB;
		opacity: 1;
	}
  100% {
		fill: #ffffff;
		opacity: 0;
		transform: translate( 500px, 100px) rotate(10deg);
  }
}

@keyframes fx_meteor_line_kit1_set2 {
  0% {
		transform: translate( 0px, 0px) rotate(10deg);
		fill: #1673B2;
		opacity: 0;
  }
	60% {
		fill: #15ADDB;
		opacity: 1;
	}
  100% {
		transform: translate( 400px, 100px) rotate(10deg);
		fill: #ffffff;
		opacity: 0;
  }
}

@keyframes fx_meteor_line_kit1_set3 {
  0% {
		transform: translate( 0px, 0px) rotate(10deg);
		fill: #1673B2;
		opacity: 0;
  }
	60% {
		fill: #15ADDB;
		opacity: 1;
	}
  100% {
		transform: translate( 300px, 100px) rotate(10deg);
		fill: #ffffff;
		opacity: 0;
  }
}

.fx_meteor_line_kit2 {
	position: absolute;
  z-index: -100;
  bottom: 35%;
  right: 0;
	width: 400px;
	opacity: 0;
}

.fx_meteor_line_kit2 svg {
	width: 100%;
	display: block;
}

.fx_meteor_line_kit2_set1 {
	animation: fx_meteor_line_kit2_set1 5s infinite;
}

.fx_meteor_line_kit2_set2 {
	animation: fx_meteor_line_kit2_set2 5s 1s infinite;
}

.fx_meteor_line_kit2_set3 {
	animation: fx_meteor_line_kit2_set3 5s 2s infinite;
}


@keyframes fx_meteor_line_kit2_set1 {
  0% {
		fill: #1673B2;
		opacity: 0;
		transform: translate( 0px, 0px) rotate(-10deg);
  }
	60% {
		fill: #15ADDB;
		opacity: 1;
	}
  100% {
		fill: #ffffff;
		opacity: 0;
		transform: translate( -700px, 100px) rotate(-10deg);
  }
}

@keyframes fx_meteor_line_kit2_set2 {
  0% {
		transform: translate( 0px, 0px) rotate(-10deg);
		fill: #1673B2;
		opacity: 0;
  }
	60% {
		fill: #15ADDB;
		opacity: 1;
	}
  100% {
		transform: translate( -500px, 100px) rotate(-10deg);
		fill: #ffffff;
		opacity: 0;
  }
}

@keyframes fx_meteor_line_kit2_set3 {
  0% {
		transform: translate( 0px, 0px) rotate(-10deg);
		fill: #1673B2;
		opacity: 0;
  }
	60% {
		fill: #15ADDB;
		opacity: 1;
	}
  100% {
		transform: translate( -500px, 100px) rotate(-10deg);
		fill: #ffffff;
		opacity: 0;
  }
}

/***** fx_meteor_bright *****/

.fx_meteor_bright {
	position: fixed;
	z-index: -80;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.fx_meteor_bright_kit1 {
	position: absolute;
  z-index: -100;
  top: 30%;
  left: 80px;
	width: 80px;
	opacity: 0;
}

.fx_meteor_bright_kit1 svg {
	width: 100%;
	display: block;
}

.fx_meteor_bright_kit1_set1 {
	animation: fx_meteor_bright_kit1_set1 5s infinite;
}

.fx_meteor_bright_kit1_set2 {
	animation: fx_meteor_bright_kit1_set1 5s 2s infinite;
}

@keyframes fx_meteor_bright_kit1_set1 {
  0% {
		fill: #1673B2;
		opacity: 0;
  }
	60% {
		fill: #15ADDB;
		opacity: 1;
	}
  100% {
		fill: #ffffff;
		opacity: 0;
  }
}

.fx_meteor_bright_kit2 {
	position: absolute;
  z-index: -100;
  top: 10%;
  right: 80px;
	width: 80px;
	opacity: 0;
}

.fx_meteor_bright_kit2 svg {
	width: 100%;
	display: block;
}

.fx_meteor_bright_kit2_set1 {
	animation: fx_meteor_bright_kit2_set1 5s 2s infinite;
}

.fx_meteor_bright_kit2_set2 {
	animation: fx_meteor_bright_kit2_set1 5s 4s infinite;
}

@keyframes fx_meteor_bright_kit2_set1 {
  0% {
		fill: #1673B2;
		opacity: 0;
  }
	60% {
		fill: #15ADDB;
		opacity: 1;
	}
  100% {
		fill: #ffffff;
		opacity: 0;
  }
}

/***** responsive *****/

@media ( max-width: 1400px ) {

/* .fx_rotation_kit1 {
  top: 5vh;
  bottom: -300vh;
  left: -300vw;
  right: -300vw;
} */

}

@media ( max-width: 1024px ) {

.fx_rotation {
  top: 100px;
}

.fx_rotation_object1 {
  transform: translateZ(20px);
}

}

@media ( max-width: 767px ) {

.fx_rotation {
  top: 65px;
}

.fx_rotation_object1 {
  transform: translateZ(30px);
}

.fx_meteor_line_kit1 {
  width: 200px;
}

.fx_meteor_line_kit2 {
  top: 70%;
  width: 200px;
}

.fx_meteor_bright_kit1 {
  top: 20%;
  left: 30px;
  width: 60px;
}

.fx_meteor_bright_kit2 {
  top: 10%;
  right: 30px;
  width: 60px;
}

}