@charset "utf-8";

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

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


.animation_box .btnArea {
	position: absolute;
	top: 760px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 500;
}

.animation_box .btnArea-pay {
	top: 760px;	
}

.animation_box .startbtn{
	position: absolute;
	top: 670px;
	left: 50%;
	margin-left: -184px;
	z-index: 500;
}

.animation_box .endbtn{
	position: absolute;
	top: 670px;
	left: 50%;
	margin-left: -184px;
	z-index: 500;
}
.animation_box .btnArea .btn{
	display: inline-block;
}


.animation_box .paybtn{
	margin-left: 0;
	padding-top: 1px;
}
.legacyArea {
	display: none;
	position: relative;
	top: 0;
	left: 0;
}
.modan_browser {
	display: none;
	position: relative;
	top: 0;
	left: 0;
}

.scene {
	text-align: center;
}



.master {
	position: relative;
	top: 0;
	left: 0;
	z-index: 2;
}
.master img {
	position: absolute;
	top: 0;
	left: 0;
	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;
}

.master.result1 .line {
	opacity: 1;
}


.animation_box .endbtn {
	display: none;
}

.animation_box .btnArea {
	display: none;
}



.result-item {
	display: none;
}




.card.blur img {
	-webkit-transition: all .8s linear;
	   -moz-transition: all .8s linear;
	    -ms-transition: all .8s linear;
	     -o-transition: all .8s linear;
	        transition: all .8s linear;
	-webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3);
	
}

.card.blur-stop img {
	-webkit-transition: all .8s linear;
	   -moz-transition: all .8s linear;
	    -ms-transition: all .8s linear;
	     -o-transition: all .8s linear;
	        transition: all .8s linear;
	-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3);
	
}

.card.blur-loop img {
	-webkit-transition: all .8s linear;
	   -moz-transition: all .8s linear;
	    -ms-transition: all .8s linear;
	     -o-transition: all .8s linear;
	        transition: all .8s linear;
	
	-webkit-animation-name: blur;
	-webkit-animation-duration: 6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

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

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

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

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

.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-card;
	-webkit-animation-duration: 9s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

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

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

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

	animation-name: rotate-card;
	animation-duration: 9s;
	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-card;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

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

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

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

	animation-name: rotate-rev-card;
	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-card;
	-webkit-animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

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

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

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

	animation-name: rotate-card;
	animation-duration: 8s;
	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-card;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

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

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

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

	animation-name: rotate-rev-card;
	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-card;
	-webkit-animation-duration: 6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-timing-function: linear;

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

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

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

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

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

.card.rota-90 img{
	-webkit-transition: all ease .8s;
	   -moz-transition: all ease .8s;
	    -ms-transition: all ease .8s;
	     -o-transition: all ease .8s;
	        transition: all ease .8s;
	-webkit-transform: rotate(90deg);
	   -moz-transform: rotate(90deg);
	    -ms-transform: rotate(90deg);
	     -o-transform: rotate(90deg);
	        transform: rotate(90deg);	
}
.card.rota-180 img{
	-webkit-transition: all ease .8s;
	   -moz-transition: all ease .8s;
	    -ms-transition: all ease .8s;
	     -o-transition: all ease .8s;
	        transition: all ease .8s;
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);	
}
.card.rota-90 img{
	-webkit-transition: all ease .8s;
	   -moz-transition: all ease .8s;
	    -ms-transition: all ease .8s;
	     -o-transition: all ease .8s;
	        transition: all ease .8s;
	-webkit-transform: scale(.5,.5) rotate(450deg);
	   -moz-transform: scale(.5,.5) rotate(450deg);
	    -ms-transform: scale(.5,.5) rotate(450deg);
	     -o-transform: scale(.5,.5) rotate(450deg);
	        transform: scale(.5,.5) rotate(450deg);	
}
.card.rota-360 img{
	-webkit-transition: all ease .8s;
	   -moz-transition: all ease .8s;
	    -ms-transition: all ease .8s;
	     -o-transition: all ease .8s;
	        transition: all ease .8s;
	-webkit-transform: scale(.5,.5) rotate(360deg);
	   -moz-transform: scale(.5,.5) rotate(360deg);
	    -ms-transform: scale(.5,.5) rotate(360deg);
	     -o-transform: scale(.5,.5) rotate(360deg);
	        transform: scale(.5,.5) rotate(360deg);	
}

@-webkit-keyframes rotate-card {
	0% { -webkit-transform: rotate(0deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% {transform:rotate(-180deg);-webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3);}
	100% 	{ -webkit-transform: rotate(-360deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-moz-keyframes rotate-card {
	0% { -moz-transform: rotate(0deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% {transform:rotate(-180deg);-webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3);}
	100% 	{ -moz-transform: rotate(-360deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-ms-keyframes rotate-card {
	0% { -ms-transform: rotate(0deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% {transform:rotate(-180deg);-webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3);}
	100% 	{ -ms-transform: rotate(-360deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-o-keyframes rotate-card {
	0% { -o-transform: rotate(0deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% {transform:rotate(-180deg);-webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3);}
	100% 	{ -o-transform: rotate(-360deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-webkit-keyframes rotate-rev-card {
	0% { -webkit-transform: rotate(0deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% {transform:rotate(180deg);-webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3);}
	100% 	{ -webkit-transform: rotate(360deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-moz-keyframes rotate-rev-card {
	0% { -moz-transform: rotate(0deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% {transform:rotate(180deg);-webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3);}
	100% 	{ -moz-transform: rotate(360deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-ms-keyframes rotate-rev-card {
	0% { -ms-transform: rotate(0deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% {transform:rotate(180deg);-webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3);}
	100% 	{ -ms-transform: rotate(360deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-o-keyframes rotate-rev-card {
	0% { -o-transform: rotate(0deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% {transform:rotate(180deg);-webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3);}
	100% 	{ -o-transform: rotate(360deg);-webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

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

@-webkit-keyframes blur {
	0% { -webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% { -webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3); }
	100% 	{ -webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-moz-keyframes blur {
	0% { -webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% { -webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3); }
	100% 	{ -webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-ms-keyframes blur {
	0% { -webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% { -webkit-box-shadow: 0 0 16px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3); }
	100% 	{ -webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}

@-o-keyframes blur {
	0% { -webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
	50% { -webkit-box-shadow: 0 0 40px rgba(162,0,255,.3);
	        box-shadow: 0 0 16px rgba(162,0,255,.3); }
	100% 	{ -webkit-box-shadow: 0 0 12px rgba(162,0,255,.3);
	        box-shadow: 0 0 12px rgba(162,0,255,.3); }
}