@charset "UTF-8";
/*
 * move_page.css
 *
 */

/*==================================
        opening animation
==================================*/
.opening_bg {
    width: 100vw;
    height: 100vh;
    background: #00246C;
    animation: bgAnime 1s linear 3.5s forwards;
	-moz-animation: bgAnime 1s linear 3.5s forwards;
	-webkit-animation: bgAnime 1s linear 3.5s forwards;
	-o-animation: bgAnime 1s linear 3.5s forwards;
	-ms-animation: bgAnime 1s linear 3.5s forwards;
	position: fixed;
	z-index: 9999999;
	top: 0px;
}
 
.opening_bg img {
    text-align: center;
    font-size: 20vh;
    font-family: 'Anton', cursive;
    color: #fff;
    height: 1em;
    line-height: 1.2;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 7;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    -o-opacity: 0;
    -ms-opacity: 0;
    animation: textAnime1 2s linear forwards;
	-moz-animation: textAnime1 2s linear forwards;
	-webkit-animation: textAnime1 2s linear forwards;
	-o-animation: textAnime1 2s linear forwards;
	-ms-animation: textAnime1 2s linear forwards;
}
.opening_bg p span{
    display: inline-block;
}
 
/*keyframe*/
@keyframes textAnime1{
0%{
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    -o-opacity: 0;
    -ms-opacity: 0;
	transform: translate(-400px, 0px) rotate(0);
	-moz-transform: translate(-400px, 0px) rotate(0);
	-webkit-transform: translate(-400px, 0px) rotate(0);
	-o-transform: translate(-400px, 0px) rotate(0);
	-ms-transform: translate(-400px, 0px) rotate(0);
}
70%{
	transform: translate(0px, 0px) rotate(600deg);
	-moz-transform: translate(0px, 0px) rotate(600deg);
	-webkit-transform: translate(0px, 0px) rotate(600deg);
	-o-transform: translate(0px, 0px) rotate(600deg);
	-ms-transform: translate(0px, 0px) rotate(600deg);
}
100%{
	transform: translate(0px, 0px) rotate(720deg);
	-moz-transform: translate(0px, 0px) rotate(720deg);
	-webkit-transform: translate(0px, 0px) rotate(720deg);
	-o-transform: translate(0px, 0px) rotate(720deg);
	-ms-transform: translate(0px, 0px) rotate(720deg);
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    -o-opacity: 1;
    -ms-opacity: 1;
}
}

@keyframes bgAnime{
0%{
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    -o-opacity: 1;
    -ms-opacity: 1;
}
99%{
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    -o-opacity: 0;
    -ms-opacity: 0;
}
100%{
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    -o-opacity: 0;
    -ms-opacity: 0;
	z-index:-1;
    display: none;
}
}



/*==================================
        move_page
==================================*/
._move{
	position:fixed;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	min-height:480px;
	z-index:9999999;
}
._move.moved{
	left:0;
	transform:rotate(45deg) scale(3);
	-moz-transform:rotate(45deg) scale(3);
	-webkit-transform:rotate(45deg) scale(3);
	-o-transform:rotate(45deg) scale(3);
	-ms-transform:rotate(45deg) scale(3);
}
._move.moved:after,._move.moved:before{
	content:'';
	position:absolute;
	width:50.1%;
	height:0;
	background:#fff;
	animation:anime 1.6s cubic-bezier(.39,.575,.565,1);
	-moz-animation: anime 1.6s cubic-bezier(.39,.575,.565,1);
	-webkit-animation: anime 1.6s cubic-bezier(.39,.575,.565,1);
	-o-animation: anime 1.6s cubic-bezier(.39,.575,.565,1);
	-ms-animation: anime 1.6s cubic-bezier(.39,.575,.565,1);
}
@-webkit-keyframes anime{
	0%{
		width:50.1%;
		height:0;
		background:#ffde00
	}
	40%{
		width:50.1%;
		height:100%
	}
	60%{
		height:100%;
		width:100%;
		opacity:1;
		-moz-opacity: 1;
		-webkit-opacity: 1;
		-o-opacity: 1;
		-ms-opacity: 1;
		background:#ffde00
	}
	100%{
		height:100%;
		width:100%;
		opacity:0;
		-moz-opacity: 0;
		-webkit-opacity: 0;
		-o-opacity: 0;
		-ms-opacity: 0;
		background:#fff
	}
}
@keyframes anime{
	0%{
		width:50.1%;
		height:0;
		background:#FEBD11
	}
	40%{
		width:50.1%;
		height:100%
	}
	60%{
		height:100%;
		width:100%;
		opacity:1;
		-moz-opacity: 1;
		-webkit-opacity: 1;
		-o-opacity: 1;
		-ms-opacity: 1;
		background:#FEBD11
	}
	100%{
		height:100%;
		width:100%;
		opacity:0;
		-moz-opacity: 0;
		-webkit-opacity: 0;
		-o-opacity: 0;
		-ms-opacity: 0;
		background:#fff
	}
}
._move.moved:before{
	bottom:0;
	left:0
}
._move.moved:after{
	top:0;
	right:0
}