@charset "utf-8";

/* 과일 쌓기 */
#intro .content .icon{width:50px;}

#game #score{font-size: 20px;color:#000;font-weight: 600;top: 4%;left: 5%;width: 59%;text-align: left;z-index: 10;}
#game #score em{font-size:30px;margin-left:10px;color: #ff5200;vertical-align: -3px;}

#game #order{width: 68%;height: 12%;top: 22%;left: 16%;overflow: hidden;background: #ffffff;border-radius: 15px; display: block;}
#game #order .orderSwiper{width: 94%;height: 80%;top: 10%;left: 4%;overflow: hidden;}
#game #timer{font-size:20px;color:#000; font-weight: 600; top: 4%;right: 5%; width: 37%;text-align: right; z-index: 10;}
#game #timer em{font-size:30px;margin-left:10px;color:#000;display: inline-block;vertical-align: -3px;}
#game .character{top:11%; position: absolute;}

#game .feverImg {width: 100%;height: 9%;top:38%;left:0%;z-index: 999;display: none;}
#game .feverImg img{width:80%;}
#game #control{width: 100%;height: 39%;bottom: 16%;left: 0%;}
#game #control .left{width: 32%;height:100%;top:0%;left:0%;cursor:pointer;}
#game #control .right{width: 32%;height:100%;top:0%;right:0%;cursor:pointer;}
#game #stack{width: 25%;height:64%;top: 31%;left: 37%;}
#game #stack .stack{width:100%; height:22%; top:0%; left:0%; position: absolute;}
#game #stack .stack img{width:100%; height:auto;}

#game .swiper-slide{height: 100%; border-radius: 10px; border: 3px solid #ffffff; box-sizing: border-box;}
#game .swiper-slide img{height:100%; width:100%; box-sizing: border-box; padding: 7px;}
#game .swiper-slide-active{background-color:#fff; border-radius: 10px; border: 3px solid #efb510; box-sizing: border-box;}

@keyframes headShake {
    0 {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
    
      6.5% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
      }
    
      16.5% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
      }
    
      31.5% {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px) ;
      }
    
      43.5% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
      }
    
      50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
      }
   }


.headShake {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake;
}

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