@charset "utf-8";
body{
	background-color: #050922;
}
#pre-loader{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 850px;
	text-align: center;
	background-color: #040000;
	z-index: 9999;
}
#pre-loader .scene-box{
	position: relative;
	width: 500px;
	height: 274px;
	top: 50%;
	left: 50%;
	margin: -137px 0 0 -250px;
	z-index: 0;
}
#pre-loader .scene-box img{
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	z-index: 1;
	transition: ease 1s;
	-webkit-transition: ease 1s;
}
#pre-loader .scene-box img.motion{
	opacity: 1;
}
#pre-loader .txt-load{
	position: relative;
	top: 100px;
	z-index: 0;
}

#wrp-all{
	position: relative;
	min-width: 1024px;
	background: url(../img/common/space_bg_l.jpg) repeat-y 0 0;
	overflow: hidden;
	display: none;
}
.wrp-all-inner{
	position: relative;
	min-width: 1024px;
	background: url(../img/common/space_bg_r.jpg) repeat-y right 0;
	overflow: hidden;
}

/******** header ********/
header{
	position: relative;
	min-width: 1024px;
	width: 100%;
	height: 70px;
	z-index: 1;
}
header .logo-01{
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 0;
}
header .logo-02{
	position: absolute;
	top: 10px;
	left: 50%;
	margin-left: -94px;
	z-index: 0;
}
header .logo-03{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 0;
}

/******** #contents ********/
#contents{
	width: 980px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
#contents h1{
	text-align: center;
}
#contents h1 a:hover{
	opacity: 0.7;
}
#contents nav{
	margin-bottom: 50px;
}
#contents nav ul li{
	display: inline-block;
	vertical-align: middle;
}
#contents nav ul li a{
	display: block;
}

/******** #transition-area ********/
#transition-area{
	position: relative;
	min-width: 1024px;
	height: 410px;
	background: url(../img/common/earth.png) no-repeat center 0;
	background-size: cover;
	-webkit-background-size: cover;
	z-index: 1;
}
#transition-area p{
	position: absolute;
	bottom: 50px;
	left: 50%;
	margin-left: -467px;
	z-index: 1;
}

/******** footer ********/
footer{
	position: relative;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color: #000000;
	z-index: 1;
}
footer .inner{
	width: 980px;
	margin: 0 auto;
	position: relative;
}
footer .inner .sns-btn{
	position: absolute;
	top: 15px;
	left: 0;
}
footer .inner .sns-btn .sns-link li{
	display: inline-block;
	vertical-align: top;
	line-height: 1;
}
footer .inner .sns-btn .sns-link li:first-child{
	margin-right: 8px;
}
footer .inner .sns-btn .sns-link li a:hover{
	opacity: 0.7;
}
footer .inner .txt-read{
	text-align: center;
	color: #dcdcdc;
	font-size: 14px;
	line-height: 50px;
}
footer .inner .copy-right{
	position: absolute;
	right: 0;
	top: 19px;
	color: #dcdcdc;
	font-size: 12px;
}

#bgs{
	position: relative;
	z-index: 0;
}
#bgs .moon-bg{
	position: fixed;
	right: -140px;
	top: -160px;
	width: 451px;
	height: 453px;
	z-index: 0;
}
#bgs .meteor{
	position: fixed;
	top: -40px;
	z-index: 0;
	transform:translate(900px,0);
	-webkit-transform:translate(900px,0);
}
#bgs .meteor.motion{
	transform:translate(-300px,600px);
	-webkit-transform:translate(-300px,600px);
	transition: ease 4s;
	-webkit-transition: ease 4s;
}
#bgs .planet{
	position: fixed;
	right: -140px;
	bottom: 100px;
	z-index: 0;
	transform:translate(0,0);
	-webkit-transform:translate(0,0);
}
#bgs .planet.motion{
	transform:translate(-1500%,-900px);
	-webkit-transform:translate(-1500%,-900px);
	transition: ease 50s;
	-webkit-transition: ease 50s;
}
#bgs .star-bg{
	position: fixed;
	width: 100%;
	min-width: 1024px;
	height: 1200px;
	top: 0;
	left: 0;
	z-index: 0;
}
#bgs .star-bg img{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 0;
	transition: ease 2s;
	-webkit-transition: ease 2s;
}
#bgs .star-bg img.motion{
	opacity: 1;
}