@charset "utf-8";

/*
******************************************************************
* MJP top.css
******************************************************************
*/
body{
	background-color: #000000;
}
#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;
	height: 850px;
	overflow: hidden;
	display: none;
}
/******** header ********/
header{
	position: absolute;
	min-width: 1024px;
	width: 100%;
	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{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 850px;
	z-index: 1;
}

#contents h1{
	position: absolute;
	top: 60px;
	left: 50%;
	margin-left: -415px;
	opacity: 0;
	-webkit-filter: blur(20px);
	z-index: 2;
	transition: ease 1s;
	-webkit-transition: ease 1s;
}
#contents h1.motion{
	opacity: 1;
	-webkit-filter: blur(0px);
}

#contents .machine{
	position: absolute;
	top: 0;
	left: 50%;
	width: 980px;
	margin-left: -490px;
	opacity: 0;
	-webkit-filter: blur(20px);
	z-index: 2;
	transition: ease 1s;
	-webkit-transition: ease 1s;
}
#contents .machine.motion{
	opacity: 1;
	-webkit-filter: blur(0px);
}

#contents .catch_copy{
	position: absolute;
	top: 400px;
	left: 50%;
	width: 980px;
	margin-left: -501px;
	opacity: 0;
	z-index: 2;
	transform:translate(-200px,100px);
	-webkit-transform:translate(-200px,100px);
	transition: ease 0.5s;
	-webkit-transition: ease 0.5s;
}
#contents .catch_copy.motion{
	transform:translate(0,0);
	-webkit-transform:translate(0,0);
	opacity: 1;
}

#contents .machine img{
	position: absolute;
	right: -90px;
	top: 160px;
}

#contents .beetle{
	position: absolute;
	z-index: 3;
	transform:translate(800%,620px);
	-webkit-transform:translate(800%,620px);
	transition: ease 17s;
	-webkit-transition: ease 17s;
}
#contents .beetle.motion{
	transform:translate(-300%,20px);
	-webkit-transform:translate(-300%,20px);
}

#contents nav{
	position: absolute;
	bottom: 50px;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: ease 1s;
	-webkit-transition: ease 1s;
	z-index: 4;
}
#contents nav.motion{
	opacity: 1;
}
#contents nav::before{
	content: "";
	position: absolute;
	width: 100%;
	bottom: 0;
	height: 80px;
	background-color: #0341a0;
	opacity: 0.6;
	z-index: 1;
}
#contents nav ul{
	width: 1024px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	z-index: 2;
}
#contents nav ul li{
	display: inline-block;
	vertical-align: middle;
}
#contents nav ul li a{
	display: block;
}

/******** footer ********/
footer{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color: #000000;
	z-index: 1;
}
footer .inner{
	width: 1024px;
	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 ********/
#bgs{
	position: relative;
	min-width: 1024px;
	height: 850px;
	overflow: hidden;
	z-index: 0;
}
#bgs .pic-01{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}
#bgs .pic-02{
	position: absolute;
	opacity: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 2;
	transition: ease 2s;
	-webkit-transition: ease 2s;
}
#bgs .pic-02.motion{
	opacity: 1;
}
#bgs .pic-03{
	position: absolute;
	left: 50%;
	transform:translateY(813px);
	-webkit-transform:translateY(813px);
	margin-left: -478.5px;
	z-index: 3;
	transition: ease 0.5s;
	-webkit-transition: ease 0.5s;
}
#bgs .pic-03.motion{
	transform:translateY(37px);
	-webkit-transform:translateY(37px);
}
#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 .star-bg{
	position: absolute;
	width: 100%;
	min-width: 1024px;
	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;
}
#bgs .ultraman{
	position: absolute;
	left: -30%;
	top: 200px;
	z-index: 0;
	transition: ease 10s;
	-webkit-transition: ease 10s;
}
#bgs .ultraman.motion{
	top: -200px;
	left: 70%;
	transform: scale(0.4);
	-webkit-transform: scale(0.4);
}