#effect_area {
	position:			absolute;
	margin-top:			auto;
	width:				544px;
	height:				544px;
	overflow:			hidden;
}

#bpc_bg {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			1;
}
#bpc_bg img {
	width:				544px;
	height:				544px;
}
#roulette {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			2;
}
#roulette2 {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			2;
}
#roulette3 {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			2;
}
#roulette4 {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			2;
}
#roulette5 {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			2;
}#roulette img {
	width:				544px;
	height:				544px;
	z-index:			2;
}
#roulette_cover {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			3;
}
#roulette_cover img {
	width:				544px;
	height:				544px;
	z-index:			3;
}

#cutin {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			3;
}
#cutin img {
	width:				544px;
	height:				544px;
	z-index:			4;
}

#win_item {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			5;
}
#win_item2 {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			5;
}#win_item img {
	width:				544px;
	height:				544px;
	z-index:			5;
}

#get,
.pt_finish{
    text-align: center;
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #ff2a5b;
    display: none;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    z-index:10;
}


#flash {
	position:			absolute;
	top:				0;
	left:				0;
	width:				544px;
	height:				544px;
	z-index:			5;
}
#flash img {
	width:				544px;
	height:				544px;
	z-index:			5;
}


#item {
	z-index:			2;
	top:				250px;
	left:				440px;
	position:			absolute;
	display: none;
}


.entry_down {
	animation: entry_down 500ms linear 1;
	animation-fill-mode: forwards;
}

@keyframes entry_down{
	0%  {transform: translate(0px, -300px);}
	100%  {transform: translate(0px, 0px);}
}

.flip-container {
	perspective: 1000;
	position: absolute;
	top: 250px;
	left: 440px;
	z-index: 3;
	display: none;
}

.flip-container, .front, .back {
	width: 200px;
	height: 265px;
	background-size: 200px 265px !important;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
	animation: coins2 7s ease-out forwards;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
}
.back {
	transform: rotateY(180deg);
}
@keyframes coins2 {
  0% {
	transform: rotateY(0deg) translate(0,0) ;
	transform-origin:50% 200px;
  }
  3% {
	transform: rotateY(0deg);
	transform-origin:50% 200px;
  }
  6% {
	transform: rotateY(0deg);
	transform-origin:50% 200px;
  }
  9% {
	transform: rotateY(0deg);
	transform-origin:50% 200px;
  }
  30% { transform: rotateY(0deg); }
  60% { transform: rotateY(-30deg); }
  98% { transform: rotateY(-60deg); }
  100% { transform: rotateY(-180deg);}
}


.flash_bg1 {
	-webkit-animation: image_flash1 150ms linear infinite;
	animation: image_flash1 150ms linear infinite;
}

@-webkit-keyframes image_flash1{
	0% {opacity:1;}
	100% {opacity:0;}
}

.bgFadeIn {
	animation:bgFadeIn 500ms linear forwards;
}

@keyframes bgFadeIn{
	0% {opacity:0;}
	100% {opacity:1;}
}



.falling {
  -webkit-animation: falling 2000ms linear both;
  animation: falling 2000ms linear both;
}

/* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bs%3A%5B%7BT%3A%22t%22%2Ce%3A%22b%22%2Cd%3A2000%2CD%3A0%2Cf%3A%7Bx%3A0%2Cy%3A-250%7D%2Ct%3A%7Bx%3A0%2Cy%3A0%7D%2Cs%3A3%2Cb%3A4%7D%5D%7D */

@-webkit-keyframes falling { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -250, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -250, 0, 1); }
  4.3% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -121.432, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -121.432, 0, 1); }
  8.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.354, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.354, 0, 1); }
  12.91% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 13.069, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 13.069, 0, 1); }
  17.22% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.334, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.334, 0, 1); }
  28.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5.157, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5.157, 0, 1); }
  39.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.558, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.558, 0, 1); }
  61.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.104, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.104, 0, 1); }
  83.98% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.007, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.007, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes falling { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -250, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -250, 0, 1); }
  4.3% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -121.432, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -121.432, 0, 1); }
  8.61% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.354, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -30.354, 0, 1); }
  12.91% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 13.069, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 13.069, 0, 1); }
  17.22% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.334, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.334, 0, 1); }
  28.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5.157, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5.157, 0, 1); }
  39.44% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.558, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.558, 0, 1); }
  61.66% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.104, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.104, 0, 1); }
  83.98% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.007, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.007, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

.shakeYinfinite {
	animation: shakeYinfinite 200ms infinite;
}

@keyframes shakeYinfinite {
	0% {transform: translate(0px, 0px) rotateZ(0deg)}
	100% {transform: translate(0px, 10px) rotateZ(0deg)}
}

.shakeXinfinite {
	animation: shakeXinfinite 400ms infinite;
}

@keyframes shakeXinfinite {
	0% {transform: translate(0px, 0px) rotateZ(0deg)}
	25% {transform: translate(-10px, 10px) rotateZ(0deg)}
	50% {transform: translate(10px, -10px) rotateZ(0deg)}
	75% {transform: translate(-10px, -20px) rotateZ(0deg)}
	100% {transform: translate(10px, 20px) rotateZ(0deg)}
}

.completeFadeIn {
	/* ƒAƒjƒ[ƒVƒ‡ƒ“‚Ì’·‚³ */
	animation:completeFadeIn 500ms linear forwards;
}

@keyframes completeFadeIn{
	0% {filter:brightness(100%);opacity:0;}
	100% {filter:brightness(100%);opacity:1;}
}
.completeFadeOut {
	/* ƒAƒjƒ[ƒVƒ‡ƒ“‚Ì’·‚³ */
	animation:completeFadeOut 500ms linear forwards;
}

@keyframes completeFadeOut{
	0% {filter:brightness(100%);opacity:1;}
	100% {filter:brightness(100%);opacity:0;}
}

.scatterZoom {
	animation: scatterZoom 500ms ease-in forwards;
}

@keyframes scatterZoom {
	0%		{ -webkit-transform: scale(1.3); transform: scale(1.8); }
	20%		{ -webkit-transform: scale(1); transform: scale(1); }
	40%		{ -webkit-transform: scale(1.3); transform: scale(1.3); }
	60%		{ -webkit-transform: scale(1); transform: scale(1); }
	80%		{ -webkit-transform: scale(1.3); transform: scale(1.3); }
	100%	{ -webkit-transform: scale(1.5); transform: scale(1.5); }
}

.entry_zoom {
	animation: entry_zoom 400ms linear 1;
	animation-fill-mode: forwards;
}

@keyframes entry_zoom{
	0%  {transform: scale(0);}
	90%  {transform: scale(1.5);}
	100%  {transform: scale(1);}
}

.selectedPanel {
	animation: selectedPanel 4000ms forwards;
}
@keyframes selectedPanel {
	0%		{ opacity: 100; transform:scale(0.6) translate(0px, 0px); }
	1.25%		{ opacity: 100; transform:scale(1.0) translate(-1px, -1px); }
	2.5%		{ opacity: 100; transform:scale(1.0) translate(-2px, 2px); }
	3.75%		{ opacity: 100; transform:scale(1.0) translate(3px, -1px); }
	5%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	70%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	80%		{ opacity: 0; transform:scale(1.0) translate(0px, 0px); }
	100%		{ opacity: 0; transform:scale(1.0) translate(0px, 0px); }
}

.fullCutInA {
	animation: fullCutInA 5500ms linear forwards;
}
@keyframes fullCutInA {
	0%		{ opacity: 100; transform:translate(10px, -2px); }
	5%		{ opacity: 100; transform:translate(5px, -1px); }
	90%		{ opacity: 100; transform:translate(-10px, 2px); }
	100%		{ opacity: 0; transform:translate(-10px, 2px); }
}

.fullCutInB {
	animation: fullCutInB 4000ms linear forwards;
}
@keyframes fullCutInB {
	0%		{ opacity: 100; transform:translate(-10px, -2px); }
	10%		{ opacity: 100; transform:translate(-5px, -1px); }
	85%		{ opacity: 100; transform:translate(10px, 2px); }
	100%		{ opacity: 0; transform:translate(10px, 2px); }
}

.hexagonRoulette {
	animation: hexagonRoulette 200ms linear infinite;
}

@keyframes hexagonRoulette {
	0%		{ clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); }
	24.999%		{ clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); }
	25%		{ clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 0 100%, 0 0, 50% 0); }
	49.999%		{ clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 0 100%, 0 0, 50% 0); }
	50%		{ clip-path: polygon(100% 50%, 50% 50%, 50% 100%, 0 100%, 0 0, 100% 0); }
	74.999%		{ clip-path: polygon(100% 50%, 50% 50%, 50% 100%, 0 100%, 0 0, 100% 0); }
	75%		{ clip-path: polygon(100% 100%, 50% 100%, 50% 50%, 0 50%, 0 0, 100% 0); }
	100%		{ clip-path: polygon(100% 100%, 50% 100%, 50% 50%, 0 50%, 0 0, 100% 0); }
}

.selectedPanel {
	animation: selectedPanel 4000ms forwards;
}
@keyframes selectedPanel {
	0%		{ opacity: 100; transform:scale(0.6) translate(0px, 0px); }
	1.25%		{ opacity: 100; transform:scale(1.0) translate(-1px, -1px); }
	2.5%		{ opacity: 100; transform:scale(1.0) translate(-2px, 2px); }
	3.75%		{ opacity: 100; transform:scale(1.0) translate(3px, -1px); }
	5%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	70%		{ opacity: 100; transform:scale(1.0) translate(0px, 0px); }
	80%		{ opacity: 0; transform:scale(1.0) translate(0px, 0px); }
	100%		{ opacity: 0; transform:scale(1.0) translate(0px, 0px); }
}

.lastCutIn {
	animation: lastCutIn 1500ms linear forwards;
}

@keyframes lastCutIn {
	0%		{ transform:scale(1.0) translate(272px, 0px) rotateZ(0deg); }
	10%		{ transform:scale(1.0) translate(10px, 0px) rotateZ(0deg); }
	90%		{ transform:scale(1.0) translate(-10px, 0px) rotateZ(0deg); }
	100%		{ transform:scale(1.0) translate(-272px, 0px) rotateZ(0deg); }

	0%		{ opacity: 0; }
	10%		{ opacity: 1; }
	90%		{ opacity: 1; }
	100%		{ opacity: 0; }
}