.main_bg{
  height:100%;
  width:100%;
}
.main{
  width:100%;
  height:100%;
  position:relative;
  margin:0 auto;
  top:14%;
}
.ydy{  
  width:100%;  
  height:100%; 
  background-color:rgba(0,0,0,0.5); 
  position:fixed;  
  top:0px;  
  z-index:1000000;  
} 
.num_box{
  height:190px;
  width:100%;
  position:relative;
  text-align:center;
  /*top:55px;*/
  top:4%;
  background-image: url("../images/bg.png");
  background-size:88% 50%;
  background-repeat: no-repeat;
  /*margin-left:6px;*/
  margin-left:2%;
}
.clock1{
  position: absolute;
  left: 2%;
  top: 4%;
}
.clock2{
  position: absolute;
  left: 17%;
  top: 4%;
}
.clock3{
  position: absolute;
  left: 33%;
  top: 4%;
}
.clock4{
  position: absolute;
  left: 49%;
  top: 4%;
}
.clock5{
  position: absolute;
  left: 64%;
  top: 4%;
}
.clock1 img{
  transform: scale(0.5)
}
.clock2 img{
  transform: scale(0.5)
}
.clock3 img{
  transform: scale(0.5)
}
.clock4 img{
  transform: scale(0.5)
}
.clock5 img{
  transform: scale(0.5)
}
#res{
  position:relative;
  text-align:center;
  color:#fff;
  top:3%;
  height:30px;
  margin-right: 16%;
}
/*iphone 6*/
.num1_a, .num1_b, .num1_c, .num1_d{
  position: absolute;
  background: url(../images/di.png) top center repeat-y;
  width: 40px;
  height: 60px;
  left: 6%;
  top: 8%;
}

.num2_a, .num2_b, .num2_c, .num2_d{
  position: absolute;
  left: 22%;
  background: url(../images/di.png) top center repeat-y;
  width: 40px;
  height: 60px;
  top: 8%;
}
.num3_a, .num3_b, .num3_c, .num3_d{
  position: absolute;
  left: 38%;
  background: url(../images/di.png) top center repeat-y;
  width: 40px;
  height: 60px;
  top: 8%;
}
.num4_a, .num4_b, .num4_c, .num4_d{
  position: absolute;
  left: 53%;
  background: url(../images/di.png) top center repeat-y;
  width: 40px;
  height: 60px;
  top: 8%;
}
.num5_a, .num5_b, .num5_c, .num5_d{
  position: absolute;
  left: 69%;
  background: url(../images/di.png) top center repeat-y;
  width: 40px;
  height: 60px;
  top: 8%;
}
/*.num1-b, .num2_b, .num3_b, .num4_b, .num5_b {
  visibility: hidden;
}*/


.bg_0 {
  position: absolute;
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 6%;
}

.bg_1 {
  position: absolute; 
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 22%;
}

.bg_2 {
  position: absolute;  
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 37.5%;
}

.bg_3 {
  position: absolute; 
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 53.5%;
}

.bg_4 {
  position: absolute;
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 69%;
}

.bg_5 {
  position: absolute;
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 6%;
}

.bg_6 {
  position: absolute; 
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 22%;
}

.bg_7 {
  position: absolute;  
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 37.5%;
}

.bg_8 {
  position: absolute; 
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 53.5%;
}

.bg_9 {
  position: absolute;
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 69%;
}

.bg_10 {
  position: absolute;
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 6%;
}

.bg_11 {
  position: absolute; 
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 22%;
}

.bg_12 {
  position: absolute;  
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 37.5%;
}

.bg_13 {
  position: absolute; 
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 53.5%;
}

.bg_14 {
  position: absolute;
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 69%;
}

.bg_15 {
  position: absolute;
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 6%;
}

.bg_16 {
  position: absolute; 
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 22%;
}

.bg_17 {
  position: absolute;  
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 37.5%;
}

.bg_18 {
  position: absolute; 
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 53.5%;
}

.bg_19 {
  position: absolute;
  width: 78px;
  background-position-y: 0px;
  height: 78px;
  top: 27px;
  left: 69%;
}

.result {
  position: absolute;
}
.a0 {
  z-index: 1000;
  width:40px;
  height:30px;
}
.b1 {
  z-index: 999;
  visibility: hidden;
  width:40px;
  height:30px;
}
.c2 {
  z-index: 999;
  visibility: hidden;
  width:40px;
  height:30px;
}
.d3 {
  z-index: 999;
  visibility: hidden;
  width:40px;
  height:30px;
}
.bar{
  background-image:url("../images/before.png");
  transform: scale(0.6);
}
.chanel{
  background:url("../images/close.png") no-repeat;
  background-size: 55% 55%;
  top:-100px;
}
.bar{
    position: absolute;
    left: 83%;
    top: -21%;
    width: 59px;
    height: 112px;
    background-image: url(./images/after.png);
}
.res0{
  background: url(../images/0.png) no-repeat;
  background-size: 50% 50%;
}
.res1{
  background: url(../images/1.png) no-repeat;
  background-size: 50% 50%;
}
.res2{
  background: url(../images/2.png) no-repeat;
  background-size: 50% 50%;
}
.res3{
  background: url(../images/3.png) no-repeat;
  background-size: 50% 50%;
}
.res4{
  background: url(../images/4.png) no-repeat;
  background-size: 50% 50%;
}
.res5{
  background: url(../images/5.png) no-repeat;
  background-size: 50% 50%;
}
.res6{
  background: url(../images/6.png) no-repeat;
  background-size: 50% 50%;
}
.res7{
  background: url(../images/7.png) no-repeat;
  background-size: 50% 50%;
}
.res8{
  background: url(../images/8.png) no-repeat;
  background-size: 50% 50%;
}
.res9{
  background: url(../images/9.png) no-repeat;
  background-size: 50% 50%;
}

/*iphone 4 iphone 5*/
@media screen and (min-width: 320px) and (max-width :350px){
    .main{
      top:0%;
    }
    #res{
      top:12%;
    }
    .num_box{
      top:18%;
      background-size: 88% 36%;
    }
    .chanel{
      background-size: 45% 45%;
      top:-38%;
    }
    .bar{
      position: absolute;
      left: 81%;
      top: -26%;
      width: 59px;
      height: 112px;
      background-image: url(./images/after.png);
      transform: scale(0.5);
      background-repeat: no-repeat
    }
    .clock1{
      left: -1%;
      top: -3%;
    }

    .clock2{
      left: 15%;
      top: -3%;
    }
    .clock3{
      left: 30%;
      top: -3%;
    }
    .clock4{
      left: 46%;
      top: -3%;
    }
    .clock5{
      left: 62%;
      top: -3%;
    }
    .clock1 img{
      transform: scale(0.4)
    }
    .clock2 img{
      transform: scale(0.4)
    }
    .clock3 img{
      transform: scale(0.4)
    }
    .clock4 img{
      transform: scale(0.4)
    }
    .clock5 img{
      transform: scale(0.4)
    }
  .num1_a, .num1_b, .num1_c, .num1_d{
    position: absolute;
    background: url(../images/di.png) top center repeat-y;
    width: 36px;
    height: 36px;
    left: 5.5%;
    top: 7%;
  }

  .num2_a, .num2_b, .num2_c, .num2_d{
    position: absolute;
    left: 111px;
    background: url(../images/di.png) top center repeat-y;
    width: 36px;
    height: 36px;
    left: 21%;
    top: 7%;
  }
  .num3_a, .num3_b, .num3_c, .num3_d{
    position: absolute;
    left: 162px;
    background: url(../images/di.png) top center repeat-y;
    width: 36px;
    height: 36px;
    left: 36.5%;
    top: 7%;
  }
  .num4_a, .num4_b, .num4_c, .num4_d{
    position: absolute;
    left: 214px;
    background: url(../images/di.png) top center repeat-y;
    width: 36px;
    height: 36px;
    left: 52%;
    top: 7%;
  }
  .num5_a, .num5_b, .num5_c, .num5_d{
    position: absolute;
    left: 264px;
    background: url(../images/di.png) top center repeat-y;
    width: 36px;
    height: 36px;
    left: 68%;
    top: 7%;
  }
  .bg_0 {
    top: 7%;
    left:5.5%;
  }

  .bg_1 {
    top: 7%;
    left: 21%;
  }

  .bg_2 {
    top: 7%;
    left: 37%;
  }

  .bg_3 {
    top: 7%;
    left: 52.5%;
  }

  .bg_4 {
    top: 7%;
    left: 68.5%;
  }

  .bg_5 {
    top: 7%;
    left:5%;
  }

  .bg_6 {
    top: 7%;
    left: 20.5%;
  }

  .bg_7 {
    top: 7%;
    left: 36%;
  }

  .bg_8 {
    top: 7%;
    left: 52%;
  }

  .bg_9 {
    top: 7%;
    left: 68%;
  }

  .bg_10 {
    top: 7%;
    left: 5%;
  }

  .bg_11 {
    top: 7%;
    left: 20.5%;
  }

  .bg_12 {
    top: 7%;
    left: 36%;
  }

  .bg_13 {
    top: 7%;
    left: 52%;
  }

  .bg_14 {
    top: 7%;
    left: 68%;
  }

  .bg_15 {
    top: 7%;
    left:5%;
  }

  .bg_16 {
    top: 7%;
    left: 20.5%;
  }

  .bg_17 {
    top: 7%;
    left: 36%;
  }

  .bg_18 {
    top: 7%;
    left: 52%;
  }

  .bg_19 {
    top: 7%;
    left: 68%;
  }
  .res0{
    background: url(../images/0.png) no-repeat;
    background-size: 46% 46%;
  }
  .res1{
    background: url(../images/1.png) no-repeat;
    background-size: 46% 46%;
  }
  .res2{
    background: url(../images/2.png) no-repeat;
    background-size: 46% 46%;
  }
  .res3{
    background: url(../images/3.png) no-repeat;
    background-size: 46% 46%;
  }
  .res4{
    background: url(../images/4.png) no-repeat;
    background-size: 46% 46%;
  }
  .res5{
    background: url(../images/5.png) no-repeat;
    background-size: 46% 46%;
  }
  .res6{
    background: url(../images/6.png) no-repeat;
    background-size: 46% 46%;
  }
  .res7{
    background: url(../images/7.png) no-repeat;
    background-size: 46% 46%;
  }
  .res8{
    background: url(../images/8.png) no-repeat;
    background-size: 46% 46%;
  }
  .res9{
    background: url(../images/9.png) no-repeat;
    background-size: 46% 46%;
  }

}

/*安卓*/
@media screen and (min-width:359px) and (max-width :370px){
  .bar{
      left: 82%;
      top: -40px;
      width: 59px;
      height: 112px;
      background-image: url(./images/after.png);
      transform: scale(0.6);
      background-repeat: no-repeat

  }
  .num1_a, .num1_b, .num1_c, .num1_d{
    left: 5.5%;
  }

  .num2_a, .num2_b, .num2_c, .num2_d{
    left: 21%;
  }
  .num3_a, .num3_b, .num3_c, .num3_d{
    left: 37%;
  }
  .num4_a, .num4_b, .num4_c, .num4_d{
    left: 52.5%;
  }
  .num5_a, .num5_b, .num5_c, .num5_d{
    left: 68%;
  }
  .bg_0 {
    top: 13%;
    left: 5.5%;
  }

  .bg_1 {
    top: 13%;
    left: 21%;
  }

  .bg_2 {
    top: 13%;
    left: 37%;
  }

  .bg_3 {
    top: 13%;
    left: 53%;
  }

  .bg_4 {
    top: 13%;
    left: 68.5%;
  }

  .bg_5 {
    top: 13%;
    left: 5.5%;
  }

  .bg_6 {
    top: 13%;
    left: 21%;
  }

  .bg_7 {
    top: 13%;
    left: 37%;
  }

  .bg_8 {
    top: 13%;
    left: 53%;
  }

  .bg_9 {
    top: 13%;
    left: 68.5%;
  }

  .bg_10 {
    top: 13%;
    left: 5.5%;
  }

  .bg_11 {
    top: 13%;
    left: 21%;
  }

  .bg_12 {
    top: 13%;
    left: 37%;
  }

  .bg_13 {
    top: 13%;
    left: 53%;
  }

  .bg_14 {
    top: 13%;
    left: 68.5%;
  }

  .bg_15 {
    top: 13%;
    left: 5.5%;
  }

  .bg_16 {
    top: 13%;
    left: 21%;
  }

  .bg_17 {
    top: 13%;
    left: 37%;
  }

  .bg_18 {
    top: 13%;
    left: 53%;
  }

  .bg_19 {
    top: 13%;
    left: 68.5%;
  }
  .clock1{
    left: 0.5%;
  }
  .clock2{
    left: 16%;
  }
  .clock3{
    left: 31%;
  }
  .clock4{
    left: 47.5%;
  }
  .clock5{
    left: 63%;
  }
}

/*安卓*/
@media screen and (min-width:384px) and (max-width :411px){
  .num1_a, .num1_b, .num1_c, .num1_d{
    left: 6%;
  }

  .num2_a, .num2_b, .num2_c, .num2_d{
    left: 21.5%;
  }
  .num3_a, .num3_b, .num3_c, .num3_d{
    left: 37.5%;
  }
  .num4_a, .num4_b, .num4_c, .num4_d{
    left: 53%;
  }
  .num5_a, .num5_b, .num5_c, .num5_d{
    left: 68.5%;
  }
  .bg_0 {
    top: 13%;
    left: 6%;
  }

  .bg_1 {
    top: 13%;
    left: 22%;
  }

  .bg_2 {
    top: 13%;
    left: 37.5%;
  }

  .bg_3 {
    top: 13%;
    left: 53%;
  }

  .bg_4 {
    top: 13%;
    left: 69%;
  }

  .bg_5 {
    top: 13%;
    left: 6%;
  }

  .bg_6 {
    top: 13%;
    left: 22%;
  }

  .bg_7 {
    top: 13%;
    left: 37.5%;
  }

  .bg_8 {
    top: 13%;
    left: 53%;
  }

  .bg_9 {
    top: 13%;
    left: 69%;
  }

  .bg_10 {
    top: 13%;
    left: 6%;
  }

  .bg_11 {
    top: 13%;
    left: 22%;
  }

  .bg_12 {
    top: 13%;
    left: 37.5%;
  }

  .bg_13 {
    top: 13%;
    left: 53%;
  }

  .bg_14 {
    top: 13%;
    left: 69%;
  }

  .bg_15 {
    top: 13%;
    left: 6%;
  }

  .bg_16 {
    top: 13%;
    left: 22%;
  }

  .bg_17 {
    top: 13%;
    left: 37.5%;
  }

  .bg_18 {
    top: 13%;
    left: 53%;
  }

  .bg_19 {
    top: 13%;
    left: 69%;
  }
}

/*安卓,iphone 6 plus*/
@media screen and (min-width:412px){
  .num1_a, .num1_b, .num1_c, .num1_d{
    left: 6%;
  }

  .num2_a, .num2_b, .num2_c, .num2_d{
    left: 21.5%;
  }
  .num3_a, .num3_b, .num3_c, .num3_d{
    left: 37.5%;
  }
  .num4_a, .num4_b, .num4_c, .num4_d{
    left: 53%;
  }
  .num5_a, .num5_b, .num5_c, .num5_d{
    left: 69%;
  }  
  .bg_0 {
    top: 14.2%;
    left: 6%;
  }

  .bg_1 {
    top: 14.2%;
    left: 22%;
  }

  .bg_2 {
    top: 14.2%;
    left: 38%;
  }

  .bg_3 {
    top: 14.2%;
    left: 53.5%;
  }

  .bg_4 {
    top: 14.2%;
    left: 69%;
  }

  .bg_5 {
    top: 14.2%;
    left: 6%;
  }

  .bg_6 {
    top: 14.2%;
    left: 22%;
  }

  .bg_7 {
    top: 14.2%;
    left: 38%;
  }

  .bg_8 {
    top: 14.2%;
    left: 53.5%;
  }

  .bg_9 {
    top: 14.2%;
    left: 69%;
  }

  .bg_10 {
    top: 14.2%;
    left: 6%;
  }

  .bg_11 {
    top: 14.2%;
    left: 22%;
  }

  .bg_12 {
    top: 14.2%;
    left: 38%;
  }

  .bg_13 {
    top: 14.2%;
    left: 53.5%;
  }

  .bg_14 {
    top: 14.2%;
    left: 69%;
  }

  .bg_15 {
    top: 14.2%;
    left: 6%;
  }

  .bg_16 {
    top: 14.2%;
    left: 22%;
  }

  .bg_17 {
    top: 14.2%;
    left: 38%;
  }

  .bg_18 {
    top: 14.2%;
    left: 53.5%;
  }

  .bg_19 {
    top: 14.2%;
    left: 69%;
  }
}