.gamebox{
	width: 100%; height: 100%;
	overflow: hidden;
	font: 1em/1.5em 'Helvetica';
    color: #333;
    -webkit-user-select:disabled;
	padding: 0;
	margin: 0;
	background-size: 100% 100%;
	cursor: pointer;
}
.gamebox.bg{background-size: 100%;}
.light_box{     overflow: hidden;
    width: 139px;
    height: 69px;
    position: absolute;
    left: 150px;
    top: 11px;
}
.gamebox{
		display: flex;

    -webkit-perspective:1000px;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		width: 360px;
		height: 88px;
		position: relative;
/*		background: #e6e6e6;*/

}
.out #title{
	opacity: 0;
	-webkit-transform: translateZ(-50px) rotateX(5deg);
}
.out #additional{
	opacity: 0;
}
.out #stage{
	opacity: 0;
	-webkit-transform: translateZ(0px);
}
.in div#stage{
	opacity: 1;
/*	-webkit-transform: translateZ(0px) rotateY(0) rotateX(0);*/
    -webkit-transition: 2.3s ease-in;
    width: 100%;
}

#ringgroup{
	position: absolute;
	width: 800px;
	height: 800px;
	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -400px;
	-webkit-transition: All 2.2s 0.1s;
	-webkit-transform: rotateZ(-360deg) translateZ(-4000px) scale(0.02);
	-webkit-perspective:1000px;
	-webkit-transform-style:preserve-3d;
}
#ringgroup.pass{
	-webkit-transform:rotateZ(0) translateZ(3200px) scale(1);
	opacity: 1;
}
.ring{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/ring.png');
	-webkit-transform-style:preserve-3d;
	/*border: 4px solid white;*/
	/*border-radius: 400px;*/
}
.ring:nth-of-type(1){-webkit-transform: translateZ(0px);opacity: 1;}
.ring:nth-of-type(2){-webkit-transform: rotateZ(60deg) translateZ(-1000px) scale(0.9);opacity: 0.7;}
.ring:nth-of-type(3){-webkit-transform: rotateZ(120deg) translateZ(-200px) scale(0.8);opacity: 0.5;}
.ring:nth-of-type(4){-webkit-transform: rotateZ(30deg) translateZ(-3000px) scale(0.7);opacity: 0.1;}
#core{
	display: block;
	position: absolute;
	width: 400px;
	height: 316px;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -158px;
	-webkit-transition: All 0.9s ease;
	-webkit-transform:  translateZ(-4000px) rotateY(90deg) rotateZ(30deg);
	opacity: 1;
}
#core.pass{
	-webkit-transform: rotateZ(0) translateZ(1000px) rotateY(-15deg);
	opacity: 0;

}
#core img{
	width: 100%;
	height: auto;

}

}
#stage{
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-transition:All 2.3s 0s ease-in;
	-webkit-filter:brightness(1.3);
	width: 100%;
	height: 100%;
	position: relative;
	/*border: 1px solid red;*/
}
#hero{
	width: 100%;
	text-align: center;

}
#hero img{
	width: 96%;
    max-width: 1133px;
    margin-top: 8px;
    margin-left: -60px;

}

#hero .light_line{ content: ""; 
	position: absolute; 
	width:30px; 
	height: 100%; 
	top: 0; 
	left: -150px; 
	overflow: hidden;
	background: -moz-linear-gradient(left, rgba(255,255,255,.2)0, rgba(255,255,255,.8)50%, rgba(255,255,255,.2)100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,.2)), color-stop(50%, rgba(255,255,255,.8)), color-stop(100%, rgba(255,255,255,.2)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,.2)0, rgba(255,255,255,.8)50%, rgba(255,255,255,.2)100%);
	background: -o-linear-gradient(left, rgba(255,255,255,.2)0, rgba(255,255,255,.8)50%, rgba(255,255,255,.2)100%);
	-webkit-transform: skewX(-25deg);
	-moz-transform: skewX(-25deg);
	-webkit-animation:light 2s ease infinite;
	 -moz-animation:light 2s ease infinite;}

.light_line { left: 150%; transition: left 1s ease 0s; }
#title{
	position: absolute;
	width: 100%;
	left: 0;
	top: 14%;
	text-align: center;
	-webkit-transition:All 1.6s ease-out;
}
#title img{
	width: 25%;
	max-width: 530px;
}
#additional{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 16%;
	text-align: center;
	-webkit-transition:All 1s 0.8s ease-in;
}
#additional img{
	width: 45%;
	max-width: 760px;
}
#copyright{
	position: fixed;
	left: 15px;
	bottom:15px;
	color: rgba(255,255,255,0.2);
	font-size: 12px;
	font-family: Arial;
}
#light{
	width: 360px;
	height: 88px;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -180px;
	-webkit-transform:scaleX(0.1) scaleY(0.1);
	-webkit-filter:brightness(0);
	-webkit-transition:All 0.4s ease-in;
}
#light.pass{
	-webkit-transform:scaleX(2) scaleY(0.5);
	-webkit-filter:brightness(6);
}
#light.passed{
	-webkit-transform:scaleX(6) scaleY(1.1);
	-webkit-filter:brightness(0);
	-webkit-transition:All 0.3s ease-out;
}
#wave{
	width: 320px;
	height: 320px;
	top: 50%;
	left: 50%;
	margin-left: -160px;
	margin-top: -160px;
	position: absolute;
	background: url('../images/wave.png');
	-webkit-transform: scale(0.01);
	-webkit-transition: All 0.9s 0.62s ease;
	-webkit-filter:brightness(3);
}
#wave.pass{
	-webkit-transform: scale(12);
	-webkit-filter:brightness(1);
	opacity: 0;
}
*{margin: 0;padding: 0;}
.wrap{
	  height: 100%;
	  position: relative;
	  -webkit-transform-style:preserve-3d;
	  -webkit-perspective:0px;

	  -moz-transform-style:preserve-3d;
	  -moz-perspective:0px;

	  -webkit-animation:mydhua 4s ease infinite;
	  -moz-animation:mydhua 4s ease infinite;
	    position: absolute;
    left: 92px;
    top: 0;
	 

}
.gbox{width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;
	 margin:-25px 0 0 -25px; line-height: 50px;text-align: center;font-size: 48px;color: white;
		}
.gbox1{
	-webkit-transform:rotatey(90deg) translatez(-25px);
	-moz-transform:rotatey(90deg) translatez(-25px);
	background: url(../images/4.jpg) no-repeat;
	background-size: 100% 100%; 
}
.gbox2{
	-webkit-transform:rotatey(90deg) translatez(25px);
	-moz-transform:rotatey(90deg) translatez(25px);
	background: url(../images/2.jpg) no-repeat;
	background-size: 100% 100%;
}
.gbox3{
	-webkit-transform:rotatex(90deg) translatez(25px);
	-moz-transform:rotatex(90deg) translatez(25px);
	background: url(../images/3.jpg) no-repeat;
	background-size: 100% 100%;
}
.gbox4{
	-webkit-transform:rotatex(90deg) translatez(-25px);
	-moz-transform:rotatex(90deg) translatez(-25px);
	background: url(../images/1.jpg) no-repeat;
	background-size: 100% 100%;
}
.box5{
	-webkit-transform: translatez(-25px);
	-moz-transform:translatez(-25px);
	background: url(../images/5.jpg) no-repeat;
	background-size: 100% 100%;
}
.gbox6{
	-webkit-transform: translatez(25px);
	-moz-transform:translatez(25px);
	background: url(../images/6.jpg) no-repeat;
	background-size: 100% 100%;
}

@-webkit-keyframes mydhua{

	0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
	100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }
}
@-moz-keyframes mydhua{

	0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
	100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}
}
@-webkit-keyframes light{

	0%{left: -150px;}
	100%{left: 120%;}
}
@-moz-keyframes light{

	0%{left: -150px;}
	100%{left: 120%;}
}