
.audiogroup-page .section-list{margin-top: 25px;margin-bottom: 15px;}
.audiogroup-page .audio-top .right-tit{width: calc(100% - 205px);}
.audiogroup-page .section-header{background: #F4F4F4;padding: 10px 20px;line-height: 30px;}
.audiogroup-page .section-header .title {color: #5B5B5B;font-size: 20px;}
.audiogroup-page .section-header .title .num{color: #E61A1E;margin-left: 10px;}
.audiogroup-page .section-header .sort{color: #999999;font-size: 16px;}
.audiogroup-page .section-header .sort .active,.audiogroup-page .section-header .sort .active:hover{color: #E61A1E;}
.audiogroup-page .section-header .sort a,.audiogroup-page .section-header .sort a:hover{color: #999999;}
.audiogroup-page .section-body{font-size: 16px;line-height: 30px;}
.audiogroup-page .section-body li{border-bottom: 1px solid #F4F4F4;padding: 17px 20px;}
.audiogroup-page .section-body .title{color: #5B5B5B;padding-left: 34px;display: block;float: left; width: calc(100% - 80px);background:url(../../images/detail-img/play.png) no-repeat left center ; }
.audiogroup-page .section-body .column{color: #999;}
.audiogroup-page .section-body li:hover ,.audiogroup-page .section-body .swiper-slide-active{background:#F9F9F9;}
.audiogroup-page .section-body li:hover .title,.audiogroup-page .section-body .swiper-slide-active .title{background:url(../../images/detail-img/playon.png) no-repeat left center ;color: #E61A1E;}

.audiojs.error{display: none;}

.audio-player{width: 100%;height: 50px;background: rgba(0, 0, 0, .6);position: fixed;bottom: 0;z-index: 999;overflow: initial;}
.audio-player .c-audio {width: calc(100% - 130px);display: flex;align-items: center;height: 100%;overflow: hidden;padding-top: 7px;}
.audio-player .c-audio>div{width: 100%;}
.audio-player .c-audio .probox{background: rgba(0, 0, 0, .4);border-radius: 2px;height: 3px;margin: 20px 0px;width: calc(100% - 150px);}
.audio-player .c-audio .progress{background: #fff;border-radius: 2px;height: 3px;position: relative;overflow: inherit;}
.audio-player .c-audio .progress:after{position: absolute;cursor: pointer; top: -4px;right: -11px;content:'';display: block;width:11px;height:11px;background:rgba(255,255,255,1);box-shadow:0px 3px 8px 0px rgba(0, 0, 0, 0.3);border-radius:50%;}
.audio-player .c-audio .time{color:#C8C8C8;font-size:16px;line-height: 26px;margin: 7px 0px;} 
.audio-player .c-audio .time em{color:#FFFFFF;font-style: normal;}
.audio-player .c-audio .time strong{font-weight: normal;}

.audio-player .l-audio{position: absolute;left: -200px;}
.audio-player .playbox span{display: inline-block;width: 50px;height: 50px;cursor: pointer; }
.audio-player .playbox .play-prev{background: url(../../images/detail-img/icon32.png) no-repeat center center;float: left; }
.audio-player .playbox .play-pause{background: url(../../images/detail-img/stop.png) no-repeat center center ;background-size: 35px;padding: 0;}
.audio-player .playbox .play-pause.play{background: url(../../images/detail-img/icon31.png) no-repeat center center ;}
.audio-player .playbox .play-next{background: url(../../images/detail-img/icon33.png) no-repeat center center ;}

.audio-player .r-audio{position: absolute;right: -130px;top: 0;}
.audio-player .r-audio .volume{background: url(../../images/detail-img/volume.png) no-repeat center center ;display: inline-block;width: 50px;height: 50px;cursor: pointer;}
.audio-player .r-audio .soundlist{background: url(../../images/detail-img/menu.png) no-repeat center center ;display: inline-block;width: 50px;height: 50px;cursor: pointer;}
.audio-player .r-audio .soundlist:hover{background-color: rgba(0, 0, 0, .7);}

.audio-player .volumebox{position: relative;}
.audio-player .volumebox:hover .voice-progress-wrapper{display: block;}
.audio-player .voice-progress-wrapper {width: 5px;height: 100px;position: absolute;bottom: 50px;left: 0;right: 0;margin: auto;display: none;}
.audio-player .voice-progress-wrapper:hover {display: block;}
.audio-player .volumebox .voice-progress {height: 100px;border-radius:3px;background: #666;}
.audio-player .volumebox .active-voice-progres {height: 100%;max-height: 100px;border-radius:3px;background: rgba(255,255,255, .7);position: absolute;width: 100%;bottom: 0px;}
.audio-player .volumebox .active-voice-progres::after {content: '';display: inline-block;width: 11px;height: 11px;background: #fff;box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.3);border-radius: 50%;position: absolute;left: -3px;transform: translateY(-50%);cursor: pointer;}
.audio-player .volumebox .play-mode-wrapper{position: relative;}


.audio-detailpage .audio-player .l-audio{left: -80px;}
.audio-detailpage .audio-player .r-audio{right: -80px;}

.player{position: relative;}

.audio-player .audiomenu{display:none;position: fixed;right:0;bottom:50px;background: rgba(0,0,0,.7);padding:20px 0}
.audio-player .audiomenu .alltext{padding:0 30px;color:#fff;font-size:16px;margin-bottom:15px;}
.audio-player .audiomenu ul{padding:0 15px 0 10px}
.audio-player .audiomenu ul li{color:#BFBFBF;font-size:14px;line-height: 30px;padding-left:20px;}
.audio-player .audiomenu ul li.on{color:#fff;background: url('../../images/detail-img/playing.gif') left center/12px no-repeat;}
.audio-player .audiomenu ul li .name{padding-right:10px;}


.line2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.d-flex{display: flex;flex-direction: row;}
.d-shrink{flex-shrink: 0;}
.d-grow{flex-grow: 1;min-width:0}
.d-v-flex{display: flex;flex-direction: column;}
.d-v-grow{flex:1}


@media (max-width: 1600px) {
  
  .audio-player .l-audio{left: 0;}
  .audio-player .c-audio{width: calc(100% - 280px);margin-left: 160px;}
  .audio-player .r-audio{right: 0;}
}
@media (max-width: 992px) {
  .audio-detailpage .audio-player .l-audio{left: 0px;}
  .audio-detailpage .audio-player .r-audio{right: 0px;}
  .audio-detailpage .audio-player .c-audio{width: calc(100% - 120px);margin:0px auto;}
}
@media (max-width: 768px) {
  .audiogroup-page .leftlogo{float: none;text-align: center;margin-bottom: 20px;}
  .audiogroup-page .audio-top .right-tit{width: 100%;}
}
@media (max-width: 475px) {

  .audio-player{display: none;}
  .audiogroup-page .section-body .title{text-overflow: inherit;white-space: initial;width: auto;}
}