@charset "utf-8";

.flash_box{
	background:url(../img/ani_bg.png) no-repeat center top;
	width:690px;
	height:690px;
	margin: 0 auto 40px auto;
	position: relative;
	overflow: hidden;
}

.flash_box .canvas,
.flash_box .glcanvas{
	position: absolute;
	top: 0;
	left: 0;
}
.flash_box .canvas{
	z-index: 500;
}
.flash_box a,
.flash_box a img{
	outline: none;
	border: none;
}


.flash_box .btnArea {
	position: absolute;
	top: 548px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 50000;
}
.flash_box .startbtn{
	position: absolute;
	top: 510px;
	left: 50%;
	margin-left: -243px;
	z-index: 500;
	opacity: 0;
	-webkit-transition: all .4s linear;
	   -moz-transition: all .4s linear;
	    -ms-transition: all .4s linear;
	     -o-transition: all .4s linear;
	        transition: all .4s linear;
}

.flash_box .startbtn{
	opacity: 1;
}

.flash_box .endbtn{
	position: absolute;
	top: 300px;
	left: 50%;
	margin-left: -243px;
	z-index: 500;
}
.flash_box .btnArea .btn{
	display: inline-block;
}


.flash_box .paybtn{
	margin-left: 78px;
}
.legacyArea {
	display: none;
	position: relative;
	top: 0;
	left: 0;
}
.modan_browser {
	display: none;
	position: relative;
	top: 0;
	left: 0;
}

.scene {
	text-align: center;
}

.scene-01 {
	z-index: 10;
}
.scene-02 {
	z-index: 20;
	display: none;
}
.scene-03 {
	z-index: 30;
	display: none;
}
.scene-04 {
	z-index: 40;
	display: none;
}
.scene-05 {
	z-index: 50;
	display: none;
}
.scene-common {
	z-index: 5;
}

.scene_item {
	width: 810px;
}


.scene_item,
.result-item{
	position: absolute;
}



.flash_box .endbtn {
	display: none;
}

.flash_box .btnArea {
	display: none;
}



.result-item {
	display: none;
}

.card.rotate1 img{
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	-webkit-animation-name: rotate;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

	-moz-animation-name: rotate;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-timing-function: linear;

	-ms-animation-name: rotate;
	-ms-animation-duration: 3s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: normal;
	-ms-animation-timing-function: linear;

	-o-animation-name: rotate;
	-o-animation-duration: 3s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	-o-animation-timing-function: linear;

	animation-name: rotate;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}
.card.rotate2 img{
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	-webkit-animation-name: rotate-rev;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

	-moz-animation-name: rotate-rev;
	-moz-animation-duration: 4s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-timing-function: linear;

	-ms-animation-name: rotate-rev;
	-ms-animation-duration: 4s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: normal;
	-ms-animation-timing-function: linear;

	-o-animation-name: rotate-rev;
	-o-animation-duration: 4s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	-o-animation-timing-function: linear;

	animation-name: rotate-rev;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}
.card.rotate3 img{
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	-webkit-animation-name: rotate;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

	-moz-animation-name: rotate;
	-moz-animation-duration: 4s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-timing-function: linear;

	-ms-animation-name: rotate;
	-ms-animation-duration: 4s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: normal;
	-ms-animation-timing-function: linear;

	-o-animation-name: rotate;
	-o-animation-duration: 4s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	-o-animation-timing-function: linear;

	animation-name: rotate;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}
.card.rotate4 img{
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	-webkit-animation-name: rotate-rev;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

	-moz-animation-name: rotate-rev;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-timing-function: linear;

	-ms-animation-name: rotate-rev;
	-ms-animation-duration: 2s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: normal;
	-ms-animation-timing-function: linear;

	-o-animation-name: rotate-rev;
	-o-animation-duration: 2s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	-o-animation-timing-function: linear;

	animation-name: rotate-rev;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}
.card.rotate5 img{
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

	-webkit-animation-name: rotate;
	-webkit-animation-duration: 6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

	-moz-animation-name: rotate;
	-moz-animation-duration: 6s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-timing-function: linear;

	-ms-animation-name: rotate;
	-ms-animation-duration: 6s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: normal;
	-ms-animation-timing-function: linear;

	-o-animation-name: rotate;
	-o-animation-duration: 6s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: normal;
	-o-animation-timing-function: linear;

	animation-name: rotate;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}

.card.rotate-end img{
	-webkit-transition: all linear .4s;
	   -moz-transition: all linear .4s;
	    -ms-transition: all linear .4s;
	     -o-transition: all linear .4s;
	        transition: all linear .4s;
	    
	-webkit-transform: rotate(0);
	   -moz-transform: rotate(0);
	    -ms-transform: rotate(0);
	     -o-transform: rotate(0);
	        transform: rotate(0);
}

@-webkit-keyframes rotate {
	0% { -webkit-transform: rotate(0deg); }
	100% 	{ -webkit-transform: rotate(-360deg); }
}

@-moz-keyframes rotate {
	0% { -moz-transform: rotate(0deg); }
	100% 	{ -moz-transform: rotate(-360deg); }
}

@-ms-keyframes rotate {
	0% { -ms-transform: rotate(0deg); }
	100% 	{ -ms-transform: rotate(-360deg); }
}

@-o-keyframes rotate {
	0% { -o-transform: rotate(0deg); }
	100% 	{ -o-transform: rotate(-360deg); }
}

@-webkit-keyframes rotate-rev {
	0% { -webkit-transform: rotate(0deg); }
	100% 	{ -webkit-transform: rotate(360deg); }
}

@-moz-keyframes rotate-rev {
	0% { -moz-transform: rotate(0deg); }
	100% 	{ -moz-transform: rotate(360deg); }
}

@-ms-keyframes rotate-rev {
	0% { -ms-transform: rotate(0deg); }
	100% 	{ -ms-transform: rotate(360deg); }
}

@-o-keyframes rotate-rev {
	0% { -o-transform: rotate(0deg); }
	100% 	{ -o-transform: rotate(360deg); }
}