@charset "utf-8";

/* ****************************************************
Title: index.css
---------------------------------------------------------------------------- */

#pagebody{
  position: relative;
}
#logo{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
z-index: 500;
}

#logo img {opacity: 0.7;}
/* =============================
 .section1
==============================*/


.cp_anime13 {
	position: relative;
	z-index: 1;
}
.cp_anime13,
.cp_anime13 .cp_first,
.cp_anime13 .cp_second,
.cp_anime13 .cp_third {
	width: 100%;
	height: 100vh;
}
.cp_anime13 .cp_first,
.cp_anime13 .cp_second,
.cp_anime13 .cp_third {
	position: absolute;
}
.cp_anime13 .cp_second,
.cp_anime13 .cp_third {
	opacity: 0;
}
.cp_anime13 .cp_first {
	z-index: 10;
	animation: anime13_first 10s infinite;
background: #0f2027; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #0f2027, #203a43, #2c5364); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #0f2027, #203a43, #2c5364); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
@-webkit-keyframes anime13_first {
	0%   { opacity: 1.0; }
	10%  { opacity: 0.8; }
	20%  { opacity: 0.6; }
	30%  { opacity: 0.4; }
	40%  { opacity: 0.2; }
	50%  { opacity: 0.1; }
	60%  { opacity: 0.2; }
	70%  { opacity: 0.4; }
	80%  { opacity: 0.6; }
	90%  { opacity: 0.8; }
	100% { opacity: 1.0; }
}
@keyframes anime13_first {
	0%   { opacity: 1.0; }
	10%  { opacity: 0.8; }
	20%  { opacity: 0.6; }
	30%  { opacity: 0.4; }
	40%  { opacity: 0.2; }
	50%  { opacity: 0.1; }
	60%  { opacity: 0.2; }
	70%  { opacity: 0.4; }
	80%  { opacity: 0.6; }
	90%  { opacity: 0.8; }
	100% { opacity: 1.0; }
}
.cp_anime13 .cp_second {
	z-index: 20;
	animation: anime13_second 10s infinite; animation-delay: 2s;
background: #c31432;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
@-webkit-keyframes anime13_second {
	0%   { opacity: 0; }
	10%  { opacity: 0.2; }
	20%  { opacity: 0.4; }
	30%  { opacity: 0.6; }
	40%  { opacity: 0.8; }
	50%  { opacity: 1.0; }
	60%  { opacity: 0.8; }
	70%  { opacity: 0.6; }
	80%  { opacity: 0.4; }
	90%  { opacity: 0.2; }
	100% { opacity: 0; }
}
@keyframes anime13_second {
	0%   { opacity: 0; }
	10%  { opacity: 0.2; }
	20%  { opacity: 0.4; }
	30%  { opacity: 0.6; }
	40%  { opacity: 0.8; }
	50%  { opacity: 1.0; }
	60%  { opacity: 0.8; }
	70%  { opacity: 0.6; }
	80%  { opacity: 0.4; }
	90%  { opacity: 0.2; }
	100% { opacity: 0; }
}
.cp_anime13 .cp_third {
	z-index: 30;
	animation: anime13_third 10s infinite;
	animation-delay: 8s;
background: #bdc3c7;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
@-webkit-keyframes anime13_third {
	0%   { opacity: 0; }
	10%  { opacity: 0.2; }
	20%  { opacity: 0.4; }
	30%  { opacity: 0.6; }
	40%  { opacity: 0.8; }
	50%  { opacity: 1.0; }
	60%  { opacity: 0.8; }
	70%  { opacity: 0.6; }
	80%  { opacity: 0.4; }
	90%  { opacity: 0.2; }
	100% { opacity: 0; }
}
@keyframes anime13_third {
	0%   { opacity: 0; }
	10%  { opacity: 0.2; }
	20%  { opacity: 0.4; }
	30%  { opacity: 0.6; }
	40%  { opacity: 0.8; }
	50%  { opacity: 1.0; }
	60%  { opacity: 0.8; }
	70%  { opacity: 0.6; }
	80%  { opacity: 0.4; }
	90%  { opacity: 0.2; }
	100% { opacity: 0; }
}