.audiobox{
width: 50%;
margin: auto;
display: none;
}
.name{font-size:20px;font-weight:100;text-align:center;color:#000;font-weight:bold;}
.img{margin:0 auto;width:100%;height:auto;overflow:hidden;margin-top:30px;}
.img img{display:block;width:60%;height:auto;margin:0 auto;}
.rainbow{animation: 40s rainbow infinite linear;}
@keyframes rainbow {
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.time{width:100%;height:30px;overflow:hidden;line-height:30px;font-size:14px;color:#000;margin-top:30px;}
.now_time{float:left;}
.all_time{float:right;}
.gc_show{width:100%;height:30px;line-height:30px;text-align:center;font-size:14px;margin-top:30px;}
.time_progress{width:100%;height:6px;}
.progress{width:100%;height:6px;background:#000;position:relative;}
.bar{position:absolute;top:0;left:0;height:6px;background:#09f;display:block;}
.btn{width:20px;height:20px;background:#5f84cb;border-radius:50%;position:absolute;position:absolute;top:-8px;}
.contros{width:90%;height:60px;margin:0 auto;overflow:hidden;line-height:60px;}

.button{margin:15px auto 20px;display:block;
height: 31px;
border: none;
padding: 0 18px;
background: #b90b13;
border-radius: 20px;
color: rgba(255,255,255,.9);
cursor: pointer;}

/* .button:hover{background:#b90b13; color:#fff;} */
.playing{background:#6085cb; color:#fff;}