/* ******************************************************************
 *	File name		: top.css
 *	Summary			: page layout
 * ******************************************************************
 */

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

body{
	overflow:hidden;
}
body::before{
	content:" ";
	position:absolute;
	top:233px;
	left:45%;
	width:260px;
	height:260px;
	background:url(../../image/top/earth.png) no-repeat center 0;
	animation:earth 30.0s linear 0.1s both infinite;
	z-index:0;
}

#wrapper{
	background:url(../../image/top/bg_top.png) no-repeat center 0;
}

@keyframes fade{
	0%   {opacity:1}
	100% {opacity:0;}
}
@keyframes earth{
	0%   {opacity:1.0;left:45%;top:233px;}
	50%  {opacity:0.0;left:70%;top:150px;}
	51%  {opacity:0.0;left:20%;top:350px;}
	100% {opacity:1.0;left:45%;top:233px;}
}
@keyframes earth_sp{
	0%   {opacity:1.0;left:65%;top:183px;}
	50%  {opacity:0.0;left:100%;top:83px;}
	51%  {opacity:0.0;left:40%;top:283px;}
	100% {opacity:1.0;left:65%;top:183px;}
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	body::before{
		content:" ";
		position:absolute;
		top:183px;
		left:65%;
		width:260px;
		height:260px;
		background:url(../../image/top/earth.png) no-repeat;
		background-size:130px 130px;
		animation:earth_sp 30.0s linear 0.1s both infinite;
		z-index:0;
	}
	#wrapper{
		background:url(../../image/top/bg_top.png) no-repeat;
		background-size:960px 697px;
		background-position:35% 60px;
	}
}

/* -----------------------------------------------------------------
   main_ing
----------------------------------------------------------------- */

main{
}
#main_contents{
}
#main_img{
	position:relative;
	height:875px;
	z-index:90;
	}
	#main_txt,
	#img_01,
	#img_02{
		display:block;
		position:absolute;
	}
	#main_txt{
		top:384px;
		left:calc(50% - 487px);
	}
	#img_01{
		top:53px;
		left:calc(50% - 566px);
		animation:float 7.0s linear 0s both infinite;
	}
	#img_02{
		top:417px;
		left:calc(50% - 103px);
		animation:float_r 7.0s linear 0s both infinite;
	}
	#main_txt_sp,
	#img_01_sp,
	#img_02_sp{
		display:none;
		position:absolute;
	}

@keyframes float{
	0%   {margin-top:0px;}
	50%  {margin-top:-30px;}
	100% {margin-top:0px;}
}
@keyframes float_r{
	0%   {margin-top:-30px;}
	50%  {margin-top:0px;}
	100% {margin-top:-30px;}
}

/* --- responsive --- */
@media only screen and (max-width:1040px){
	#main_txt{
		left:calc(50% - 487px);
	}
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#main_img{
	}
	#main_txt,
	#img_01,
	#img_02{
		display:none;
	}
	#main_txt_sp,
	#img_01_sp,
	#img_02_sp{
		display:block;
	}
	#main_txt_sp{
		width:52.3%;
		top:37.4%;
		left:7%;
	}
	#img_01_sp{
		width:67.9%;
		top:1.5%;
		left:2%;
		animation:float 7.0s linear 0s both infinite;
	}
	#img_02_sp{
		width:86.9%;
		top:55%;
		left:10%;
		animation:float_r 7.0s linear 0s both infinite;
	}
}

/* -----------------------------------------------------------------
   banner
----------------------------------------------------------------- */

#banner{
	margin-top:-30px;
	padding:0px 0;
}
#banner ul{
	display:-webkit-flex;
	display:flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:center;
	flex-wrap:wrap;
	}
	#banner ul li{
		width:100%;
		height:auto;
		margin:0 10px 30px !important;
	}
	#banner ul li.discovery_link{
		position:relative;
		width:330px;
		max-width:100%;
		height:100px;
		margin:0 10px 30px !important;
		background:url(../../image/banner/discovery.png) no-repeat 0 0;
		background-size:cover;
		}
		#banner ul li.discovery_link a{
			display:-webkit-flex;
			display:flex;
			justify-content:center;
			align-items:center;
			width:100%;
			height:100%;
			font-size:1.1rem;
			text-decoration:none;
			color:#FFF;
			line-height:1.5;
			}
			#banner ul li.discovery_link a b{
				display:inline-block;
				margin:-10px 0 10px;
				font-size:1.35rem;
		}
		#banner ul li.discovery_link a:hover{
			background:rgba(0,0,0,0.3);
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#banner{
		display:block;
	}
}