@charset "utf-8";

.flash_box{
	background:url(../img/ani_bg.png) no-repeat center top;
	width:760px;
	height:750px;
	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: 600px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 500;
}
.flash_box .startbtn{
	position: absolute;
	top: 530px;
	left: 50%;
	margin-left: -140px;
	z-index: 500;
}

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


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

.scene {
	text-align: center;
}

.scene .txt{
	z-index: 500;
	opacity: 0;
	position: relative;
	top: 0;
	left: 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;
}

.scene .card img {
	-webkit-transition: all .4s linear;
	   -moz-transition: all .4s linear;
	    -ms-transition: all .4s linear;
	     -o-transition: all .4s linear;
	        transition: all .4s linear;
}

.scene .card.bright img {
	/*
	 -webkit-filter: brightness(4);
     -moz-filter: brightness(4);
     -o-filter: brightness(4);
     -ms-filter: brightness(4);
     filter: brightness(4);
	    */
		-webkit-box-shadow: 0 0 100px #FFF;
	        box-shadow: 0 0 100px #FFF;
}
.scene .card.shadow img {
	
	 -webkit-box-shadow: 0 0 40px #FFF;
	        box-shadow: 0 0 40px #FFF;
}

.scene .txt.active{
	opacity: 1;
}
.scene .txt .open_txt,
.scene .txt .suffle_txt{
	display: none;
	left: 50%;
}
.scene .txt .open_txt{
	position: absolute;
	top: 130px;
	margin-left: -241px;
}
.scene .txt .suffle_txt{
	position: absolute;
	top: 120px;
	margin-left: -242px;
}
.scene .txt.open .open_txt{
	display: block;
	position: absolute;
	
}
.scene .txt.suffle .suffle_txt{
	display: block;
	position: absolute;
	
}

.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); }
}