@charset "utf-8";
body { background: #4514b3  }
.gameArea {   }
.gameArea { position: relative; margin: 0 auto; width: 100%; max-width: 414px; height: 300px; overflow: hidden;background:url(../images/finsh01_backGround.jpg) top center repeat-x  ; border-radius: 50px; }
.gameArea .gameBackground {  position: absolute;top:0; left: 0;width: 3500px; height: 300px; text-align: right; background:url(../images/background01.jpg) top center repeat-x  ;z-index: 1 ; }
.gameArea .gameBackground .finshBase { display: inline-block; width: 300px; height: 100%; background: url(../images/finsh01.jpg)}
.gameArea .finshWindow { display: none; position: absolute;top:0; left: 0; width: 100%; height: 300px; text-align: center; background: rgba(0,0,0,0.5);z-index: 99 }
.gameArea .finshWindow img { margin: 10px auto 0 auto; }
.gameArea .finshWindow .reStart { display: inline-block; margin: 0 auto; width: 50%; height: auto; font: bold 20px/24px "arial","微軟正黑體"; background:#fff }

.gameArea .startWindow { display: block; position: absolute;top:0; left: 0; width: 100%; height: 300px; text-align: center; background: rgba(0,0,0,0.0);z-index: 99 }
.gameArea .startWindow img { margin: 30px auto 0 auto; }
.gameArea .startWindow .start { display: inline-block; margin: 0 auto; width: 100%; height: auto;-webkit-animation: start 0.6s  infinite; animation: start 0.6s  infinite; animation-direction: alternate;}
@-webkit-keyframes start {
  0% { transform: scale(1); -webkit-transform: scale(1); } 
  100% { transform: scale(0.9); -webkit-transform: scale(0.9);}

}

@keyframes start {  
  0% { transform: scale(1); -webkit-transform: scale(1); } 
  100% { transform: scale(0.9); -webkit-transform: scale(0.9);}
  
}

.gameArea .candyWindow { display: block; position: absolute;top:30%; left: 3000px; width: 160px; height: 160px; text-align: center; animation: candy 0.6s steps(2) infinite;-webkit-animation: candy 0.6s steps(2) infinite; background: url(../images/candy.png) top left;;z-index: 999; color: #fff }
@-webkit-keyframes candy {
  0% { background-position:0 0px; }
  100% { background-position: -320px 0px; }
}
@keyframes candy {
  0% { background-position:0 0px; }
  100% { background-position: -320px 0px; }
}


.gameArea .scoreBoard{ display: inline-block; position: absolute; top: 5px; left: 45%; height: 50px; text-align: left; font: bold 28px/28px "arial","微軟正黑體"; color: #fff200; z-index: 80}
.gameArea .scoreBoard img { vertical-align: bottom; }
.gameArea .scoreBoard span img { display: inline-block; margin: 0 5px; width: auto; height: 60%; }
.gameArea .scoreBoard .life {margin: 0 0 0 10px;}

.gameArea .item,
.gameArea .itemImpactedAnimationUse { display: inline-block; width: 80px; height: 80px;z-index: 10;}
.itemImpactedAnimationUse {}
.gameArea .itemG1 {position: absolute; top: 53%; left: 400px;-webkit-animation: itemOne 0.6s steps(2) infinite;animation: itemOne 0.6s steps(2) infinite; background: url(../images/item01.png) top left;}
@-webkit-keyframes itemOne {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}

@keyframes itemOne {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}


.gameArea .itemG2 {position: absolute; top: 53%; left: 400px;-webkit-animation: itemTwo 0.6s steps(2) infinite;animation: itemTwo 0.6s steps(2) infinite; background: url(../images/item02.png) top left;}
@-webkit-keyframes itemTwo {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}
@keyframes itemTwo {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}

.gameArea .itemG3 {position: absolute; top: 53%; left: 400px;-webkit-animation: itemThree 0.6s steps(2) infinite;animation: itemThree 0.6s steps(2) infinite; background: url(../images/item03.png) top left;}
@-webkit-keyframes itemThree {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}

@keyframes itemThree {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}




.gameArea .itemImpactedAnimationUse {position: absolute; top:0; left: 0;-webkit-animation: itemImpactedAnimationUse 1s infinite;animation: itemImpactedAnimationUse 1s infinite;}
@-webkit-keyframes itemImpactedAnimationUse {
  0% { transform: rotate(0deg);  }
  100% {  transform: rotate(360deg); top:-60px; left: 0px }
}
@keyframes itemImpactedAnimationUse {
  0% { transform: rotate(0deg);  }
  100% {  transform: rotate(360deg); top:-60px; left: 0px }
}

.mobo { position: absolute; top:54%; left: 10%; width: 80px; height: 80px; z-index: 10}
.moboStand { background:url(../images/mobo_stand.png);-webkit-animation: moboStand 0.6s steps(2) infinite;animation: moboStand 0.6s steps(2) infinite; }
.moboFly { background:url(../images/mobo_fly.png); }
.moboJump { background:url(../images/mobo_jump.png); }
.moboHited { background:url(../images/mobo_hited.png);-webkit-animation: moboHited 0.6s steps(2) infinite;animation: moboHited 0.6s steps(2) infinite; }
@-webkit-keyframes moboHited {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}
@keyframes moboHited {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}

@-webkit-keyframes moboStand {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}

@keyframes moboStand {
  0% { background-position:0 0px; }
  100% { background-position: -160px 0px; }
}


.moboWalk { background:url(../images/mobo_walk.png);-webkit-animation: moboWalk 0.6s steps(3) infinite; animation: moboWalk 0.6s steps(3) infinite;}
@-webkit-keyframes moboWalk {
  0% { background-position:0 0px; }
  100% { background-position: -240px 0px; }
}
@keyframes moboWalk {
  0% { background-position:0 0px; }
  100% { background-position: -240px 0px; }
}


.gamePad { position: relative; margin: 20px auto 0 auto; width: 100%; max-width: 414px; height: auto; }
.gamePad .jump { margin: 0 auto; width: 158px; height: 140px; background: url(../images/bottonA.png) top center no-repeat;}


@media only screen and (max-width: 500px) {

.gameArea {width: 80%}
}