*{ padding:0px; margin:0px;}
body {
 background:#F6F6F6;
  font-size:14px;
}



/****一次性****/
#caseBlanche {
  height:100px;
  width:100px;
  position:absolute;
  left:-10px;
  top:20px;
}

#caseBlanche #load {
  color:#fff;
  font-family:calibri;
  text-align:center;
  position:absolute;
  top :32px;
  left :26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#0CF;
  
}
#caseBlanche #load  p{ line-height:80px;}



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

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

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

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

/****流量包月****/
#caseBlanche2 {
  height:100px;
  width:100px;
  position:absolute;
  top:100px;
  left:100px;

}

#caseBlanche2 #load {
  color:#fff;
  font-family:calibri;
  text-align:center;
  position:absolute;
  top:32px;
  left:26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#F60;
  
}
#caseBlanche2 #load  p{ line-height:80px;}
#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%;
  position:absolute;
  top:20px;
  left:15px;
  animation:rond 3s infinite;
  -webkit-animation:rond 3s infinite;
}

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



/****流量包日****/
#caseBlanche3 {
  height:100px;
  width:100px;
  position:absolute;
  top:140px;
  left:-10px;
}

#caseBlanche3 #load {
  color:#fff;
  font-family:calibri;
  text-align:center;
  position:absolute;
  top:32px;
  left:26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#0C3;
  
}
#caseBlanche3 #load  p{ line-height:80px;}
#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%;
  position:absolute;
  top:20px;
  left:15px;
  animation:rond 3s infinite;
  -webkit-animation:rond 3s infinite;
}

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


/****夜间流量****/
#caseBlanche4{
  height:100px;
  width:100px;
  position:absolute;
  top:20px; left:200px;
 
}

#caseBlanche4 #load {
  color:#fff;
  font-family:calibri;
  text-align:center;
  position:absolute;
  top:32px;
  left:26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#900;
  
}
#caseBlanche4 #load  p{ line-height:80px;}
#caseBlanche4 #test{
  height:10px;
  width:10px;
  position:absolute;
  background-color:#900;
  border-radius:50%;
  top:0px;
  left:10px;
   margin:5px;
}

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

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


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

#caseBlanche5 #load {
  color:#fff;
  font-family:calibri;
  text-align:center;
  position:absolute;
  top:32px;
  left:26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#CC3;
  
}
#caseBlanche5 #load  p{ line-height:80px;}
#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;
  font-family:calibri;
  text-align:center;
  position:absolute;
  top:32px;
  left:26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#F0F;
  
}
#caseBlanche6 #load  p{ line-height:80px;}
#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;
  font-family:calibri;
  text-align:center;
  position:absolute;
  top:32px;
  left:26px;
  height:80px;
  width:80px;
  border-radius:40px;
  background:#06F;
  
}
#caseBlanche7 #load  p{ line-height:80px;}
#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;
}

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