/* CSS Document */

#splash{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	/*background-color:#FFF;*/
	z-index:10000;
	display:table;
}
#splash .wrap{
	width:100%;
	height:100%;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

/* scene_1 */
#splash .scene_1{
	opacity:1;
}
#splash .scene_1 p{
	text-align:center;
    line-height: 2.4;
    font-size: 16px;
    letter-spacing: 0.4em;
    padding-top: 50px;
	position:relative;
	z-index:1;
	opacity:0;
}
#splash .scene_1 p strong{
    font-size: 18px;
}

#splash .scene_1.anim p{
	animation:
		s_1_1 1.2s ease 0s alternate forwards,
		s_1_2 0.5s ease 2.5s alternate forwards;
}
@keyframes s_1_1 {
	from{
		padding-top: 50px;
		opacity:0;
	}
	to {
		padding-top: 0px;
		opacity:1;
	}
}
@keyframes s_1_2 {
	from{
		opacity:1;
	}
	to {
		opacity:0;
	}
}


/* scene_2 */
#splash .scene_2{
}
#splash .scene_2 .logo_wrap{
	/*
	background-image:url(../img/logo_a.png);
	background-size:157px 250px;
	*/
	width:157px;
	height:250px;
	top:50%;
	left:50%;
	position:fixed;
	z-index:2;
	margin:-125px 0 0 -78px;
}
#splash .scene_2 .logo_wrap p{
	background-size:157px 250px;
	background-repeat:no-repeat;
	position:absolute;
}
#splash .scene_2 .logo_wrap p.logo1{
	background-image:url("/_img/top/logo_anim_1.png");
	background-position:0 0;
	width:115px;
	height:22px;
	top:0px;
	left:0px;
	
	width:0;
}
#splash .scene_2 .logo_wrap p.logo2{
	background-image:url("/_img/top/logo_anim_1.png");
	background-position:-80px -22px;
	width:60px;
	height:150px;
	top:22px;
	left:80px;
	
	height:0;
}
#splash .scene_2 .logo_wrap p.logo3{
	background-image:url("/_img/top/logo_anim_1.png");
	background-position:0px -128px;
	width:80px;
	height:22px;
	top:128px;
	left:0px;
	
	width:0;
	left:81px;
	background-position:-80px -128px;
}
#splash .scene_2 .logo_wrap p.logo4{
	background-image:url("/_img/top/logo_anim_2.png");
	background-position: 0px -30px;
	width:19px;
	height:220px;
	top:30px;
	left:0px;
	
	height:0;
	top:250px;
	background-position: 0px -250px;
}
#splash .scene_2 .logo_wrap p.logo5{
	background-image:url("/_img/top/logo_anim_2.png");
	background-position: -19px -30px;
	width:140px;
	height:220px;
	top:30px;
	left:19px;
	
	height:0;
}
/*
#splash .scene_2.anim .logo_wrap p.logo1{
	animation:s_2_1 0.4s linear 0.2s alternate forwards;
}
#splash .scene_2.anim .logo_wrap p.logo2{
	animation:s_2_2 0.6s linear 0.6s alternate forwards;
}
#splash .scene_2.anim .logo_wrap p.logo3{
	animation:s_2_3 0.4s linear 1.2s alternate forwards;
}
#splash .scene_2.anim .logo_wrap p.logo4{
	animation:s_2_4 0.6s linear 1.6s alternate forwards;
}
#splash .scene_2.anim .logo_wrap p.logo5{
	animation:s_2_5 0.6s linear 2.1s alternate forwards;
}
#splash .scene_2.anim .logo_wrap{
	animation:s_2_6 0.5s linear 3.6s alternate forwards;
}
@keyframes s_2_1 {
	100% {width:115px}
}
@keyframes s_2_2 {
	100% {height:125px}
}
@keyframes s_2_3 {
	100% {width:80px;left:0px;background-position:0px -128px;}
}
@keyframes s_2_4 {
	100% {height:220px;top:30px;background-position:0px -30px;}
}
@keyframes s_2_5 {
	100% {height:220px}
}
@keyframes s_2_6 {
	100% {opacity:0}
}
*/

#splash .scene_2.anim .logo_wrap p.logo1{
	transition: all 0.4s linear 0.2s;
	width:115px;
}
#splash .scene_2.anim .logo_wrap p.logo2{
	transition: all 0.6s linear 0.6s;
	height:125px;
}
#splash .scene_2.anim .logo_wrap p.logo3{
	transition: all 0.4s linear 1.2s;
	width:80px;
	left:0px;
	background-position:0px -128px;
}
#splash .scene_2.anim .logo_wrap p.logo4{
	transition: all 0.6s linear 1.6s;
	height:220px;
	top:30px;
	background-position:0px -30px;
}
#splash .scene_2.anim .logo_wrap p.logo5{
	transition: all 0.6s linear 2.1s;
	height:220px;
}
#splash .scene_2.anim .logo_wrap{
	transition: all 0.5s linear 3.6s;
	opacity:0;
}


/*
#splash .scene_2{
	opacity:0;
	position:fixed;
	z-index:2;
	top:50%;
	left:50%;
	margin:-100px 0 0 -75px;
	
	opacity:1;
	margin:-125px 0 0 -125px;
}
@keyframes s_2_1 {
	from{
		display:none;
		opacity:0;
	}
	to{
		display:block;
		opacity:1;
	}
}
@keyframes s_2_2 {
	from{
		display:block;
		opacity:1;
	}
	to {
		display:block;
		opacity:0;
	}
}
#splash .scene_2 p.logo{
	width:250px;
	height:250px;
	overflow:hidden;
	background-image:url(../img/logo_frame.png);
	background-size:7250px 250px;
}
#splash .scene_2.anim{
	animation:s_2_2 0.5s ease 2s alternate forwards;
}
#splash .scene_2.anim p.logo{
	animation:s_2_3 1.0s steps(28) 0s forwards;
}
@keyframes s_2_3 {
	100% {background-position:-7000px;}
}
*/

/* bg */
#splash .bg{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:0;
}
#splash .bg div{
	position:absolute;
	width:50%;
	height:100%;
	background-color:#FFF;
}
#splash .bg div.bg_l{
	top:0;
	left:0;
}
#splash .bg div.bg_r{
	top:0;
	right:0;
}

#splash .bg.anim div.bg_l{
	animation:s_bg_l 1.2s ease 0s alternate forwards;
}
#splash .bg.anim div.bg_r{
	animation:s_bg_r 1.2s ease 0s alternate forwards;
}
@keyframes s_bg_l {
	from{
		left:0;
	}
	to{
		left:-50%;
	}
}
@keyframes s_bg_r {
	from{
		right:0;
	}
	to{
		right:-50%;
	}
}
/*
#splash .bg.anim div.bg_l{
	transition: all 1.2s ease 0s;
	left:-50%;
}
#splash .bg.anim div.bg_r{
	transition: all 1.2s ease 0s;
	right:-50%;
}
*/

/* gnav */
#top header nav.hide > ul > li{
	opacity:0;
}
#top header nav.anim > ul > li:nth-child(1){
	animation:s_nav_1 0.8s ease 0.0s alternate forwards;
}
#top header nav.anim > ul > li:nth-child(2){
	animation:s_nav_1 0.8s ease 0.3s alternate forwards;
}
#top header nav.anim > ul > li:nth-child(3){
	animation:s_nav_1 0.8s ease 0.6s alternate forwards;
}
#top header nav.anim > ul > li:nth-child(4){
	animation:s_nav_1 0.8s ease 0.9s alternate forwards;
}
@keyframes s_nav_1{
	from{
		margin-top:-30px;
		opacity:0;
	}
	to{
		margin-top:-0px;
		opacity:1;
	}
}