.audioPlayer{float:left;width:100%;height:.8rem;position:relative;}
.audioPlayer-playpause{float:left;width:.8rem;height:.8rem;position:relative;left:0;top:0;z-index:6; border-radius:50%;cursor:pointer;overflow: hidden;}
.audioPlayer-playpause:hover {opacity: .8;}
.audioPlayer:not(.audioPlayer-playing) .audioPlayer-playpause .audio-play-stop,.audioPlayer-playing .audioPlayer-playpause .audio-play{display:none}
 
.audioPlayer.audioPlayer-mute .audioPlayer-volume .audioPlayer-volume-button{font-size:0}

.timeCurrentDuration {width: 1.6rem; position: relative; left: 50%;top: 0; margin-left: -1.4rem;  height:.6rem; font-size:.24rem; margin-top: -.15rem; }
.timeCurrentDuration .audioPlayer-time-current{float:left;height:.5rem;line-height:.5rem;color: #fff; }
.timeCurrentDuration .audioPlayer-time-duration{float:right;height:.5rem;line-height:.5rem;color: #fff;}
.timeCurrentDuration span{float: left;margin-left: 8px;padding-left: 5px; font-size:.2rem;line-height:.5rem;color: #fff; }

.audioPlayer-time-forward{position:absolute;right:0;top:0;z-index:20;margin-right:10%;margin-top:.9rem;cursor:pointer;font-size:.20rem; display: none;}
.audioPlayer-time-rewind{position:absolute;left:0;top:0;z-index:20;margin-left:10%;margin-top:.9rem;cursor:pointer;font-size:.20rem;display: none;}
.audioPlayer-time-forward .s-s,.audioPlayer-time-rewind .s-s{height:.8rem;line-height:.8rem;padding:0 .15rem;opacity:.6}
.audioPlayer-time-forward img,.audioPlayer-time-rewind img{width:.8rem;height:.8rem;cursor:pointer}
.audioPlayer-time-rewind .audio-player-rewind-h,
.audioPlayer-time-rewind:hover .audio-player-rewind,
.audioPlayer-time-forward:hover .audio-player-forward,
.audioPlayer-time-forward .audio-player-forward-h{display:none}
.audioPlayer-time-forward:hover .audio-player-forward-h,
.audioPlayer-time-rewind:hover .audio-player-rewind-h{display:block}

.audioPlayer-bar{width:calc(100% - 1.8rem); height:.06rem; margin-left: 1.1rem;margin-top: .4rem; position:absolute;left:0;top:0;background:#BEC8D2;border-radius:.03rem;}
.audioPlayer-bar::before{content:'';position:absolute;top:0; height:.06rem;background-color:#DDE2E6;border-radius:100%;}
.audioPlayer-bar > div{position:absolute;left:0;top:0; height:.06rem;}

.audioPlayer-bar-loaded{z-index:1;height:2px;background:#BEC8D2;border-radius:.03rem;}
.audioPlayer-bar-played{ z-index:2;height:.06rem; left: 0;}
.audioPlayer-bar-played::after{content:''; position:absolute; top:0;right:-1px;margin-right:0;width:20px;height:20px;background-color:#fff;overflow: hidden;}

.audioPlayer-bar-played{background:#f4d394;border-radius:.03rem;}
.audioPlayer-bar-played::after{top:-8px;right:-10px;margin-left:10px;width:20px;height:20px;background:#f4d394;border-radius:100%;}
 
.audioPlayer-volume{ float: right; width: .5rem;  height: .5rem; position: absolute; right: 0;top: 0;margin-top: .15rem;}
.audioPlayer-volume-button{float: left; width: .5rem;  height: .5rem; position: absolute; right: 0;top: 0; cursor:pointer}
.audioPlayer-volume-button a{float: left; width: .5rem;  height: .5rem;background-image: url("../audioPlayer/images/audioVolume.png"); background-position: center center;background-size: cover}
.audioPlayer.audioPlayer-mute .audioPlayer-volume-button a{  width: .5rem; height: .5rem;background-image: url("../audioPlayer/images/audioVolume-off.png"); background-position: center center;background-size: cover;}
.audioPlayer-volume .audioPlayer-volume-adjust{ width:100%;}