.astro-music{ width: 1240px; height: 124px; margin: 50px auto;}
.astro-music video, .astro-music embed{ display: none;}
.astro-music .img-box{ position: relative; width: 220px; height: 124px; box-shadow: 3px 3px 5px  #ddd;  float: left;}
.astro-music .img-box img{ width: 100%; height: 100%;}
.astro-music .img-box .handle-box{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer;}
.astro-music .img-box .play{ background: url('//n.sinaimg.cn/astro/music/audio-play.png') rgba(0,0,0,0.2) no-repeat center center; background-size: 40px 40px;}
.astro-music .img-box .pause{ background: url('//n.sinaimg.cn/astro/music/audio-pause.png') rgba(0,0,0,0.2) no-repeat center center; background-size: 40px 40px;}

.astro-music .content{ position: relative; width: 980px; height: 115px; padding: 5px 20px 0; margin-top: 2px; background: #f2fbff; float: right;}
.astro-music .change{ position: absolute; right: 0; top: 2px; width: 89px; height: 30px; background: url('//n.sinaimg.cn/astro/music/change.png'); background-size: 100% 100%; cursor: pointer;}
.astro-music .change:hover{ background: url('//n.sinaimg.cn/astro/music/change-hover.png'); background-size: 100% 100%;}
.astro-music .content .top{ line-height: 20px; margin-right: 90px;}
.astro-music .content h2{ width: 55%; height: 20px; font-size: 16px; color: #333; font-weight: normal; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.astro-music .content .top div{ width: 45%; float: right;}
.astro-music .content .top span{ font-size: 14px; color: #999; margin-right: 20px; padding-left: 23px; float: right;}
.astro-music .content .top .play-count{ background: url('//n.sinaimg.cn/astro/music/play.png') no-repeat left center;}
.astro-music .content .top .comment-count{ background: url('//n.sinaimg.cn/astro/music/music-comment.png') no-repeat left center;}
.astro-music .content .top .like-count{ background: url('//n.sinaimg.cn/astro/music/music-like.png') no-repeat left center;}
.astro-music .content .top .date{ background: url('//n.sinaimg.cn/astro/music/music-date.png') no-repeat left center;}

.astro-music .music{ position: relative; margin-top: 20px;}
.astro-music .music img{ width: 100%;}
.astro-music .music-hover{ position: absolute; left: 0; top: 0; width: 0; overflow: hidden;}
.astro-music .music-hover img{ width: 980px;}
.astro-music .music-handle{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer;}

.astro-music .time-box{ line-height: 20px;}
.astro-music .time-box span{ font-size: 12px; width: 5%;}
.astro-music .time-box span:first-of-type{ color: #4EBEF6; float: left;}
.astro-music .time-box span:last-of-type{ color: #C2D0D9; text-align: right; float: right;}
.astro-music .time-box .line{ position: relative; width: 89%; height: 20px; float: left; cursor: pointer;}
.astro-music .time-box .circle{ position: absolute; left: 0; top: 50%; margin-top: -7px; width: 14px; height: 14px; background: #D0E6FF; border-radius: 50%; cursor: pointer;}
.astro-music .time-box .circle::after{ position: absolute; left: 3px; top: 3px; content: ''; width: 8px; height: 8px; background: #4EBEF6; border-radius: 50%; cursor: pointer;}
.astro-music .barrage{ position: absolute; }