.sbw{
    width: 330px;
    height: 110px;
    margin: 0 auto;
    margin-top:300px;
    position: relative;
    overflow: hidden;
    z-index: 9999;
}
 .sbw .zhezhao{
    width: 330px;
    height: 110px;
    position: absolute;
    left: 0;
    top:0;
    /* background-image: linear-gradient(  
        to right,   
        rgba(0,0,0,0.9) 0%,   
        rgba(0,0,0,0.6) 5%,   
        rgba(0,0,0,0) 10%,   
        rgba(0,0,0,0) 90%,   
        rgba(0,0,0,0.6) 95%,   
        rgba(0,0,0,0.9) 100%);  */
    z-index: 10000;
 } 
 .sbw .loading-2 {
    top: 300px;
    width: 330px;
    height: 110px;
    font-size: 0;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 auto;
  }
  
  .sbw .loading-2-text {
    background-image: url("sbw.png");
    width: 96px;
    height: 110px;
    display: inline-block;
  }
  
  @keyframes wave-animation {
    0% {
      background-position: 0px bottom;
    }
  
    100% {
      background-position: 200px bottom;
    }
  }
  @keyframes loading-animation0 {
    0% {
      background-size: 200px 0px;
    }
  
    100% {
      background-size: 200px 50px;
    }
  }
  @keyframes loading-animation1 {
    0% {
      background-size: 200px 50px;
    }
  
    100% {
      background-size: 200px 100px;
    }
  }
  @keyframes loading-animation2 {
    0% {
      background-size: 200px 100px;
    }
  
    100% {
      background-size: 200px 150px;
    }
  }
  @keyframes loading-animation3 {
    0% {
      background-size: 200px 150px;
    }
  
    100% {
      background-size: 200px 160px;
    }
  }
  @keyframes left-right-l0{
      0%{
        left:-117px;
      }
    
      100%{
          left:0px;
      }
  }
  @keyframes left-right-l1{
    0%{
      left:0px;
    }
  
    100%{
        left:117px;
    }
}
@keyframes left-right-l2{
    0%{
      left:117px;
    }
  
    100%{
        left:234px;
    }
}
@keyframes left-right-l3{
    0%{
      left:234px;
    }
  
    100%{
        left:351px;
    }
}
.hxd{
  width: 75px;
  height: 82px;
  margin: 0 auto;
}
.hxd-img{
  width: 75px;
  height: 82px;
  margin: 0 auto;
  background: url(big.png) no-repeat center center;
  background-size: 100% 100%;
  animation:hxd-animation 2s infinite linear;
}
@keyframes hxd-animation{
  0%{
      width: 75px;
      height: 82px;
  }
  50%{
    width: 64px;
    height: 72px;
  }
  100%{
    width: 75px;
    height: 82px;
  }
}
.sbw .wave {
    background-image: url("bl.png");
    -moz-background-clip: text;
    -o-background-clip: text;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: absolute;
    left:0;
    top:0;
    text-shadow: 0px 0px rgba(255, 255, 255, 0.06);
    background-size: 200px 200px;
    background-repeat: repeat-x;
    opacity: 1;
    width: 96px;
    height: 110px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 36px;
  }
  .sbw .l0{
      left: -117px;
      animation:wave-animation 1s infinite linear, loading-animation0 1s infinite linear,left-right-l0 1s infinite linear;
  }
  .sbw .l1{
      left: 0px;
      animation:wave-animation 1s infinite linear, loading-animation1 1s infinite linear,left-right-l1 1s infinite linear;
  }
  .sbw .l2{
      left:117px;
      animation:wave-animation 1s infinite linear, loading-animation2 1s infinite linear,left-right-l2 1s infinite linear;
  }
  .sbw .l3{
      left:234px;
      animation:wave-animation 1s infinite linear, loading-animation3 1s infinite linear,left-right-l3 1s infinite linear;
  }
  .sbw .wave-2 {
    -moz-background-clip: initial;
    -o-background-clip: initial;
    -webkit-background-clip: initial;
    background-clip: initial;
    display: inline-block;
  }

  .pont {
    display: inline-block;
    width: 0px;
    height: 20px;
    vertical-align: middle;
    border-radius: 1px;
}
.pont .typing_loader{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  -webkit-animation: typing 1s linear infinite alternate;
     -moz-animation: Typing 1s linear infinite alternate;
          animation: typing 1s linear infinite alternate;
  margin: 3px auto; /* Not necessary- its only for layouting*/  
  position: relative;
  left: 2px;
  display: inline-block;
}
@-webkit-keyframes typing{
  0%{
      background-color: rgba(42,180,255, 1);
      box-shadow: 6px 0px 0px 0px rgba(42,180,255,0.2), 
      12px 0px 0px 0px rgba(42,180,255,0.2);
    }
  25%{ 
      background-color: rgba(42,180,255, 0.4);
      box-shadow: 6px 0px 0px 0px rgba(42,180,255,2), 
      12px 0px 0px 0px rgba(42,180,255,0.2);
  }
  75%{ background-color: rgba(42,180,255, 0.4);
      box-shadow: 6px 0px 0px 0px rgba(42,180,255,0.2), 
      12px 0px 0px 0px rgba(42,180,255,1);
    }
}

@-moz-keyframes typing{
  0%{
      background-color: rgba(42,180,255, 1);
      box-shadow: 6px 0px 0px 0px rgba(42,180,255,0.2), 
      12px 0px 0px 0px rgba(42,180,255,0.2);
    }
  25%{ 
      background-color: rgba(42,180,255, 0.4);
      box-shadow: 6px 0px 0px 0px rgba(42,180,255,2), 
      12px 0px 0px 0px rgba(42,180,255,0.2);
  }
  75%{ background-color: rgba(42,180,255, 0.4);
      box-shadow: 6px 0px 0px 0px rgba(42,180,255,0.2), 
      12px 0px 0px 0px rgba(42,180,255,1);
    }
}

@keyframes typing{
  0%{
      background-color: rgba(42,180,255, 1);
      box-shadow: 6px 0px 0px 0px rgba(42,180,255,0.2), 
      12px 0px 0px 0px rgba(42,180,255,0.2);
    }
  25%{ 
      background-color: rgba(42,180,255, 0.4);
      box-shadow: 6px 0px 0px 0px rgba(42,180,255,2), 
                  12px 0px 0px 0px rgba(42,180,255,0.2);
  }
  75%{ background-color: rgba(42,180,255, 0.4);
      box-shadow: 6px 0px 0px 0px rgba(42,180,255,0.2), 
                  12px 0px 0px 0px rgba(42,180,255,1);
    }
}

/* 抽题进度条 */
.draw_jdt_box{
  width: 400px;
  height: 6px;
  border: 1px solid #c6e8ff;
  border-radius: 10px;
  background: #fff;
  position: relative;
}
.draw_jdt_inner{
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 6px;
  background: #17bbfd;
  border-radius: 3px;
}
/* 雷达动效 */

.radar {
  width: 375px;
  margin: 0px auto;
  display: block;
  overflow: hidden;
  position: relative;
}

.radar .ti {
  float: left;
  width: 100%;
  font-size: 18px;
  text-align: center;
  color: #2a2a2a;
  line-height: 36px;    margin-bottom: 6px;
}
.L_transform{float: left;width: 375px;height: 310px;margin-top: 35px;}
.L_transform .trans_bg{position: relative;float: left;margin-left: 26px;width:300px;height:300px;}

.L_transform .bg_shade {
  background: url(quan_bg.png) no-repeat;
  width: 419px;
  height: 390px;
  position: absolute;
  left: -56px;
  top: -39px;
}
.L_transform .trans_bg .circles{position: absolute;}

.trans_bg .topcircle{left:119px;top:28px;}
.trans_bg .leftcircle{left:49px;top:172px;}
.trans_bg .rightcircle{left: 208px;top: 140px;}

/* .trans_bg .trio{color: #ffffff;font-size: 16px;text-align: center;margin: 0 auto;width: 50px;height: 53px;background: url(ph0.png);position: absolute;}*/
.trans_bg .circles.active .trio i{width:2px;height:2px;background: #48abe4;display: inline-block;position: absolute;top: 38px;left: 30px;
  animation: sbw 1s;border-radius: 100%;opacity: 0;} 
.trans_bg .heart_box{width: 301px;display: inline-block;height: 300px;}
.trans_bg .heart_box .heart{position:absolute;width:88px;height:88px;background: url(quan_circle.png) no-repeat;left: 105px;top: 105px;}
.trans_bg .heart_box .shan{width: 211px;height: 129px;background: url(quan_rotate.png) no-repeat;top: 25px;left: 42px;position: absolute;
  -webkit-transform-origin: 107px 124px;
  transform-origin: 108px 124px;
  transform: rotate(0deg);
  animation: radar 5s linear infinite;
}
@keyframes radar{
  0%{
      transform: rotate(0deg);
  }
  50%{
      transform: rotate(180deg);
  }
  100%{
      transform: rotate(360deg);
  }
}
@keyframes sbw{
  0%{
    transform: scale(1);
    opacity: 0.8;
  }
  50%{
    opacity: 0.2;
  }
  100%{
    transform: scale(24);
    opacity: 0;
  }
}