.chart-box{
    display: inline-block;
    width: 100%;
}

/****一次性****/
#caseBlanche {
  height:100px;
  width:100%;
  position: relative;
  float: left;
  box-sizing: border-box;
  
}

#caseBlanche .load {
  color:#fff;
  text-align:center;
  position:absolute;
  left: -40px;
  top:10px;
  margin-left: 50%;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#0CF;
}




/****DEBUT TEST****/
#test {
  height:10px;
  width:10px;
  position:absolute;
  background-color:#0CF;
  border-radius:50%;
  top:0px;
  left:10px;
  margin:5px;
}

#caseBlanche .rond {
  height:100px;
  width:100px;
  border:1px solid #0CF;
  border-radius:50%;
  text-align: center;
  margin: auto;
  animation:rondoff 3s infinite;
  -webkit-animation:rondoff 3s infinite;
}

@keyframes rond {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}

@keyframes rondoff {
  0% {transform : rotate(360deg);}
  100% {transform : rotate(0deg);}
}

@-webkit-keyframes rond {
    0%{-webkit-transform : rotate(0deg);}
  100%{-webkit-transform : rotate(360deg);}
}

@-webkit-keyframes rondoff {
  0%{-webkit-transform : rotate(360deg);}
  100%{-webkit-transform : rotate(0deg);}
}
/****第一个****/

/****流量包月****/
#caseBlanche2 {
  height:100px;
  width:50%;
  position: relative;
  float: left;
  box-sizing: border-box;
}

#caseBlanche2 .load {
  color:#fff;
  text-align:center;
  position:absolute;
  left: -40px;
  top:10px;
  margin-left: 50%;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#F60;
}

#caseBlanche2 #test{
  height:10px;
  width:10px;
  position:absolute;
  background-color:#F60;
  border-radius:50%;
  top:0px;
  left:10px;
    margin:5px;
}

#caseBlanche2 .rond {
  height:100px;
  width:100px;
  border:1px solid #F60;
  border-radius:50%;
  text-align: center;
  margin: auto;
  animation:rond 3s infinite;
  -webkit-animation:rond 3s infinite;
}

/****第二个****/



/****流量包日****/
#caseBlanche3 {
  height:100px;
  width:50%;
  position: relative;
  float: left;
  box-sizing: border-box;
  
}

#caseBlanche3 .load {
  color:#fff;
  text-align:center;
  position:absolute;
  left: -40px;
  top:10px;
  margin-left: 50%;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#0C3;

}

#caseBlanche3 #test{
  height:10px;
  width:10px;
  position:absolute;
  background-color:#0C3;
  border-radius:50%;
  top:0px;
  left:10px;
   margin:5px;
}

#caseBlanche3 .rond {
  height:100px;
  width:100px;
  border:1px solid #0C3;
  border-radius:50%;
  text-align: center;
  margin: auto;
  animation:rond 3s infinite;
  -webkit-animation:rond 3s infinite;
}

/****第三个****/


/****夜间流量****/
#caseBlanche4{
  height:100px;
  width:100%;
  position: relative;
  float: left;
  box-sizing: border-box;
  
}

#caseBlanche4 .load {
  color:#fff;
  text-align:center;
  position:absolute;
  left: -40px;
  top:10px;
  margin-left: 50%;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#FF3300;

}

#caseBlanche4 #test{
  height:10px;
  width:10px;
  position:absolute;
  background-color:#FF3300;
  border-radius:50%;
  top:0px;
  left:10px;
  margin:5px;
}

#caseBlanche4 .rond {
  height:100px;
  width:100px;
  border:1px solid #FF3300;
  border-radius:50%;
  text-align: center;
  margin: auto;
  animation:rondoff 3s infinite;
  -webkit-animation:rondoff 3s infinite;
}

/****第四个****/


/****定向流量****/
#caseBlanche5{
  height:100px;
  width:100px;
  position:absolute;
  top:140px; left:200px;

}

#caseBlanche5 .load {
  color:#fff;
  text-align:center;
  position:absolute;
  top:32px;
  left:26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#CC3;

}

#caseBlanche5 #test{
  height:10px;
  width:10px;
  position:absolute;
  background-color:#CC3;
  border-radius:50%;
  top:0px;
  left:10px;
   margin:5px;
}

#caseBlanche5 .rond {
  height:100px;
  width:100px;
  border:1px solid #CC3;
  border-radius:50%;
  position:absolute;
  top:20px;
  left:15px;
  animation:rond 3s infinite;
  -webkit-animation:rond 3s infinite;
}

/****第五个****/


/****4G专享流量****/
#caseBlanche6{
  height:100px;
  width:100px;
  position:absolute;
  top:210px; left:100px;

}

#caseBlanche6 .load {
  color:#fff;
  text-align:center;
  position:absolute;
  top:32px;
  left:26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#F0F;

}
#caseBlanche6 #test{
  height:10px;
  width:10px;
  position:absolute;
  background-color:#F0F;
  border-radius:50%;
  top:0px;
  left:10px;
   margin:5px;
}

#caseBlanche6 .rond {
  height:100px;
  width:100px;
  border:1px solid #F0F;
  border-radius:50%;
  position:absolute;
  top:20px;
  left:15px;
  animation:rond 3s infinite;
  -webkit-animation:rond 3s infinite;
}

/****第六个****/

/****4G加餐流量****/
#caseBlanche7{
  height:100px;
  width:100px;
  position:absolute;
  top:-10px; left:100px;

}

#caseBlanche7 .load {
  color:#fff;
  text-align:center;
  position:absolute;
  top:32px;
  left:26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#06F;

}
#caseBlanche7 #test{
  height:10px;
  width:10px;
  position:absolute;
  background-color:#06F;
  border-radius:50%;
  top:0px;
  left:10px;
   margin:5px;
}

#caseBlanche7 .rond {
  height:100px;
  width:100px;
  border:1px solid #06F;
  border-radius:50%;
  position:absolute;
  top:20px;
  left:15px;
  animation:rond 3s infinite;
  -webkit-animation:rond 3s infinite;
}

/****第七个****/

/*圆圈 附近的文字*/
#caseBlanche .explain{
    position: absolute;
    top: 35%;
    right: 20%;
    height: 35px;
    line-height: 35px;
    text-align: left;
    color: #FFF;
    font-size: 18px;
    text-shadow: none;
}

#caseBlanche2 .explain{
    position: absolute;
    top: -35%;
    left: 15%;
    width: 20px;
    line-height: 20px;
    text-align: left;
    color: #FFF;
    font-size: 18px;
    text-shadow: none;
}

#caseBlanche3 .explain{
    position: absolute;
    top: -35%;
    right: 15%;
    width: 20px;
    line-height: 20px;
    text-align: left;
    color: #FFF;
    font-size: 18px;
    text-shadow: none;
}

#caseBlanche4 .explain{
    position: absolute;
    top: 35%;
    left: 20%;
    height: 35px;
    line-height: 35px;
    text-align: left;
    color: #FFF;
    font-size: 18px;
    text-shadow: none;
}

.load p{
    line-height:80px;
    font-size: 22px;
}