@charset "utf-8";

/*농구*/

#game #jjansun{width: 82%;height: 25%;left: 7.5%;top: 52%;}
#game #jjansun span{display:block;width:100%;height:100%;background-image:url(https://dbins2.speedgabia.com/jjansun/images/game2/jjansun_default.png);background-size: contain; background-repeat: no-repeat; animation:jump 0.5s infinite alternate; animation-play-state:paused;}
#game #jjansun span.win{background-image:url(https://dbins2.speedgabia.com/jjansun/images/game2/jjansun_win.png); animation-play-state:paused !important;}
#game #jjansun span.lose{background-image:url(https://dbins2.speedgabia.com/jjansun/images/game2/jjansun_lose.png);  animation-play-state:paused !important;}


#wrap #game #gauge{width: 51%;left: 3%;height: 8%;top: 2%;background-image: url('https://dbins2.speedgabia.com/jjansun/images/game2/game_gauge.png');background-size: contain;background-repeat: no-repeat;background-position: center;}
#wrap #game #gauge div{width: 96.9%;height: 52%;top: 7.3%;left: 1.6%;border-radius: 4vw;overflow: hidden;position: absolute;}
#wrap #game #gauge #bar{width: 0%; height: 100%; bottom:0%; left:0%; background:#f06629;  position:absolute;}
#wrap #game #gauge #bar.start{animation-name: gauge_ani; -webkit-animation-name: gauge_ani; animation-duration: 0.6s; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear;}
#wrap #game #gauge #bar.pause{animation-play-state: paused;}
#wrap #game #gauge .line{position:absolute;right: 34%;width: 4%; height:99%;background: #df8585;top: 0px;}
@keyframes gauge_ani{0% {width: 0%;} 100% {width: 100%;}}

#wrap #game #net{top: 32%;left: 38.5%;width: 23%;height: 13%;z-index: 6;}
#wrap #game #net span{background-image: url('https://dbins2.speedgabia.com/jjansun/images/game2/game_net.png'); background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; width:100%; height:100%; top:0%; left:0%;}

#wrap #game #timer{font-size: 20px;top: 22.5%;position:absolute;color:#000;font-weight: 800;text-align: center;z-index: 3;width: 100%;left: 0;}
#wrap #game #timer em{margin-left:10px;/* font-size: 22px; */}

#wrap #game #score{top: 1.8%;right: 4%;width: 37%;text-align: right;z-index: 10;color: #000;font-size: 23px;font-weight: 800;}
#wrap #game #score em{font-size: 27px;line-height:25px;color: #f06629;font-weight: 800;vertical-align: -1px;margin-left: 5px;}

#wrap #game #bonus{top: 13%;left: calc(50% - 100px);display: none;width: 200px;background: #fff;padding: 4px 0; z-index: 3;}


#wrap #game #ball{top: 76%;left: 37.5%;width: 24.9%;height: 15%; z-index: 5;}
#wrap #game #ball span{background-image: url('https://dbins2.speedgabia.com/jjansun/images/game2/game_ball.png'); background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; width:100%; height:100%; top:0%; left:0%;}
#wrap #game #throwBall{top: 76%;left: 37.5%;width: 24.9%;height: 15%; z-index: 5;}
#wrap #game #throwBall span{background-image: url('https://dbins2.speedgabia.com/jjansun/images/game2/game_ball.png'); background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; width:100%; height:100%; top:0%; left:0%;}

#wrap #game #txt{top: 45%;left:0%;width:100%;height:9%;z-index: 20; display:none;}
#wrap #game #txt span{background-size: contain;background-position: center;background-repeat: no-repeat;position: absolute;width: 70%; height:100%; top:0%;left: 15%;}
#wrap #game #txt span.goal{background-image: url('https://dbins2.speedgabia.com/jjansun/images/game2/game_txt_goal.png'); }
#wrap #game #txt span.try{background-image: url('https://dbins2.speedgabia.com/jjansun/images/game2/game_txt_retry.png'); }


@keyframes blink {
    50% {
      opacity: 0.0;
    }
  }
.blink {animation: blink 0.7s step-start 0s infinite;}

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

#game #combo{width:110px; top:8%; right:2%; display: none;}
#game #combo img{width:70px;}
#game #combo em{font-size: 20px; font-weight: bold; margin-top: -4px; display: inline-block;}