@media (min-height: 938px) {
  .top5{
    overflow: hidden;
  }
}
@media (max-width: 1300px) {
  .top5 {
    width: 380px; }
  .topList ul li {
    font-size: 17px; }
    .topList ul li span.num {
      width: 30px;
      height: 32px; }
    /*.topList ul li img.cup {
      width: 20px; }*/
    .topList ul li span.name {
      width: calc(100% - 98px); }
  /*.topList a.giftLink {
    width: 22px; }*/
  .top5tag {
    height: 32px; } }

@media (max-width: 1050px) {
  .top5MobileTrigger {
    display: inline-block; }
  #game1 {
    width: 24%;
    left: 15%;
    top: 37%; }
  #game2 {
    width: 27%;
    left: 36%;
    top: 53%; }
  #game3 {
    width: 14%;
    left: 62%;
    top: 25%; }
  #cloud2 {
    width: 8%;
    left: 48%;
    top: 0%;
  }
  #cloud4 {
    left: 86%; }
  #cloud6 {
    left: 91%; }
  .airBaloons .ab2 {
    left: 78%; }
  .airBaloons .ab3 {
    left: 74%; }
  .logo {
    width: 34%;
    left: 1%;
    top: 0%;}
  .top5 {
    right: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%); }
    .top5.open {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); } }

@media (max-width: 850px) {
  .mainScence {
    background: url("../img/scence_bg_pad.jpg") left top no-repeat;
    -webkit-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto; }
  .logo {
    width: 44%;
    left: 1%;
    top: 0%; }
  #game1 {
    width: 35%;
    left: 11%;
    top: 24%; }
  #game2 {
    width: 42%;
    left: 47%;
    top: 38%; }
  #game3 {
    width: 26%;
    left: 15%;
    top: 46%; }
  .airBaloons .ab1 {
    width: 15%;
    left: 53%; }
  #cloud1 {
    width: 8%;
    left: 88%;
    top: 9%;
  }
  #cloud2 {
    top: 1%;
    left: 55%;
     }
  #cloud3 {
    width: 11%; }
  #cloud4 {
    left: 78%;
    top: 1%; }
  #cloud5 {
    width: 27%;
    left: 5%;
    top: 0%; }
  #cloud6 {
    left: 86%;
    top: 4%; } }

@media (max-width: 1050px) and (min-height: 1360px) {
  .mainScence {
    background: url("../img/scence_bg_pad.jpg") left top no-repeat;
    -webkit-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto; }
  .logo {
    width: 44%;
    left: 2%;
    top: 0%; }
  #game1 {
    width: 35%;
    left: 11%;
    top: 26%; }
  #game2 {
    width: 42%;
    left: 48%;
    top: 38%; }
  #game3 {
    width: 24%;
    left: 16%;
    top: 49%; }
  .airBaloons .ab1 {
    width: 15%;
    left: 52%; }
  #cloud1 {
    width: 9%;
    left: 92%;
    top: 11%;
  }
  #cloud2 {
    top: 1%; }
  #cloud3 {
    width: 11%; }
  #cloud4 {
    left: 78%;
    top: 4%; }
  #cloud5 {
    width: 27%;
    left: 3%;
    top: 0%; }
  #cloud6 {
    left: 85%;
    top: 7%; }
  .f-pieces{
    width: 20px;
  }
}

@media (max-width: 480px) {
  .formGift input[type="radio"]+label{
    width: 40%;
    height: 0;
    padding-bottom: 42%;
  }
  .mainTip p{
    font-size: 24px;
  }
  .mainTip{
    width: auto;
  }
  .mainTip img:last-child{
    right: -45px;
  }
  .mainTip img{
    left: -44px;
  }
  .mainScence {
    background: url("../img/scence_bg_mobile.jpg") left top no-repeat;
    -webkit-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
        -ms-background-position-y: -35px;
            background-position-y: -35px;
    overflow: hidden; }
  .logo {
    width: 58%;
    left: 2%;
    top: -1.5%; }
  #game1 {
        width: 40%;
   left: 33%;
    top: 24%;}
  #game2 {
        width: 51%;
    left: 45%;
    top: 47%; }
  #game3 {
    width: 28%;
    left: 5%;
    top: 23%;}
  .lobbyLink{
    width: 60%;
  }
  .top5MobileTrigger {
    width: 37%;
    padding-left: 40px; }
    .top5MobileTrigger img {
      width: 100%; }
  .airBaloons .ab1 {
    width: 15%;
    left: 11%;
    top: 91%; }
  .airBaloons .ab2 {
    width: 11%;
    left: 83%;
    top: 5%; }
  .airBaloons .ab3 {
    width: 8%;
    left: 79%;
    top: 8%; }
  .topList {
    padding: 0 10px; }
    .topList ul li {
      font-size: 15px;
      padding: 2px 10px; }
      .topList ul li span.num {
        width: 25px; }
      .topList ul li span.sec {
        width: 40px; }
      .topList ul li span.name {
        width: calc(100% - 75px); }
  .top5 {
    width: 340px; }
    .top5 .top5Title {
      width: 35%;
      margin-top: 5px;
      margin-bottom: 5px; }
  #cloud1 {
    width: 14%;
    left: 85%;
    top: 18%; }
  .popUpDialog .dialogBox {
    padding: 30px 35px;
    padding-bottom: 80px;
    padding-top: 40px;
    border-width: 7px;
    top: 50%; }
    .popUpDialog .dialogBox p {
      text-align: center; }
    .popUpDialog .dialogBox img.infoTable {
      left: 52%;
      -webkit-transform: translate(-50%, -80%);
      -moz-transform: translate(-50%, -80%);
      -ms-transform: translate(-50%, -80%);
      -o-transform: translate(-50%, -80%);
      transform: translate(-50%, -80%); }
    .popUpDialog .dialogBox .bottomBTN {
      text-align: center; }
      .popUpDialog .dialogBox .bottomBTN a {
        font-size: 18px; } }
        
@media (max-width: 420px) {
  .twoStepTitle{
    font-size: 18px;
  }
  .f-pieces{
    width: 15px;
    left: 120%;
  }

  .f-pieces:nth-child(2){
    left: 80%;
  }

  .f-pieces:nth-child(4){
    left: 70%;
  }
  .f-pieces:nth-child(5){
    left: 60%;
  }
  .f-pieces:nth-child(6){
    left: 80%;
  }
  .f-pieces:nth-child(7){
    left: 60%;
  }

  .ferris_wheel_loading .wrapper{
    -webkit-transform: translate(-50%,-50%) scale(1.2);
       -moz-transform: translate(-50%,-50%) scale(1.2);
        -ms-transform: translate(-50%,-50%) scale(1.2);
         -o-transform: translate(-50%,-50%) scale(1.2);
            transform: translate(-50%,-50%) scale(1.2);
  }
  .infoPop .dialogBox .infoTable {
    display: none;
  }

  .infoPop .dialogBox{
    padding: 25px 20px;
    padding-bottom: 15px;
  }

  .close{
    width: 30px;
  }

  .infoPop .dialogBox .bottomBTN{
    position: relative;
    bottom: 0;
  }

  .infoPop .dialogBox .bottomBTN a{
        padding: 10px 17px;
        font-size: 13px;
  }
}

@media (max-width: 380px) {
  .top5 {
    width: 85%; }
  .formGift input[type="radio"]+label{
    width: 43%;
    padding-bottom: 45%;
    margin: 0 2px;
  }
  .form-wrap .form-private{
    width: calc(100% - 30px);
  }
  .popUpDialog .dialogBox {
    padding: 25px 30px;
    padding-top: 35px;
    padding-bottom: 80px; }
    .popUpDialog .dialogBox p {
      font-size: 16px; } }

@media (max-width: 350px) {
  .infoPop .dialogBox {
    padding: 25px 10px;
    padding-bottom: 15px;
  }
  .infoPop .dialogBox .bottomBTN{
    padding: 10px 20px;
  }
  .infoPop .dialogBox .bottomBTN a{
        padding: 7px 17px;
    font-size: 12px;
  }
  .topList ul {
    padding: 6px; }
    .topList ul li {
      font-size: 13px; }
      .topList ul li img.cup, .topList ul li a.giftLink {
        width: 33px; }
      .topList ul li span.name {
        width: calc(100% - 73px); }
      .topList ul li span.num {
        width: 22px;
        height: 28px; }
  .top5tag {
    height: 26px; }
  .popUpDialog .dialogBox {
    padding-top: 40px; }
    .popUpDialog .dialogBox .bottomBTN {
      text-align: center;
      margin-top: 10px;
      margin-bottom: -5px; }
      .popUpDialog .dialogBox .bottomBTN a {
        font-size: 16px; } }

@media (max-height: 420px) {
  .mainScence {
    background: url("../img/scence_bg.jpg") left top no-repeat;
    -webkit-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto; }
  .logo {
    width: 31%;
    left: 1%;
    top: -1%; }
  #game1 {
    width: 19%;
    left: 10%;
    top: 40%; }
  #game2 {
    width: 23%;
    left: 26%;
    top: 52%; }
  #game3 {
    width: 12%;
    left: 48%;
    top: 21%; }
  #cloud5 {
    width: 19%;
    top: -2%;
    left: 3%; }
  .airBaloons .ab1 {
    width: 8%;
    left: 11%;
    top: 82%; }
  .airBaloons .ab2 {
    left: 55%; }
  .airBaloons .ab3 {
    left: 53%; }
  .top5 {
    width: 34%;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
    .top5 .top5Title {
      width: 36%;
      margin-top: 5px;
      margin-bottom: 5px; }
  .top5MobileTrigger {
    display: none; }
  .top5tag {
    height: 23px; }
  .topList {
    padding: 0 7px; }
    .topList ul {
      padding: 6px; }
      .topList ul li {
        font-size: 13px;
        padding: 2px 10px; }
        .topList ul li span.num {
          width: 22px;
          height: 22px; }
        .topList ul li span.sec {
          width: 40px; }
        .topList ul li span.name {
          width: calc(100% - 118px); }
        .topList ul li img.cup, .topList ul li a.giftLink {
          width: 15px;
          margin-left: 5px; }
  .popUpDialog .dialogBox p {
    font-size: 16px; }
  .popUpDialog .dialogBox .infoTable {
    left: -37px; }
  .popUpDialog .dialogBox .bottomBTN a {
    font-size: 18px; } }