.listening.new .cplay-detail li { position: relative; padding: 0px 20px; width: 100%; font-size: 13px; box-sizing: border-box; } 
.listening.new .cplay-detail li:hover { background: none; } 
.audioplayer { display: block; box-sizing: border-box; padding: 0 24px; width: 100%; height: 105px; position: relative; padding-top: 38px; } 
.audioplayer .song-name { position: absolute; top: 17px; left: 0; color: #607d8b; font-size: 14px; width: 100%; padding-left: 25px; } 
.audioplayer-playpause { display: inline-block; width: 35px; height: 35px; position: relative; left: 0; top: 10px; border-radius: 50%; cursor: pointer; } 
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause { background: #3e51b4; } 
.audioplayer-playing .audioplayer-playpause { background: #3e51b4; } 
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a { content: ''; display: block; position: absolute; top: 10px; left: 10px; width: 0; height: 0px; margin-left: 4px; border-top: 8px solid transparent; border-right: none; border-bottom: 8px solid transparent; border-left: 12px solid #fff; border-radius: 3px; } 
.audioplayer-playing .audioplayer-playpause a { content: ''; display: block; width: 12px; height: 14px; position: relative; } 
.audioplayer-playing .audioplayer-playpause a::before, .audioplayer-playing .audioplayer-playpause a::after { content: ''; width: 4px; height: 14px; background-color: #fff; border-radius: 4px; position: absolute; top: 11px; left: 12px; } 
.audioplayer-playing .audioplayer-playpause a::after { left: 20px; } 
.audioplayer-time { display: inline-block; width: 40px; font-size: 13px; font-weight: 700; color: #607D8B; } 
.audioplayer-time-current { margin-left: 24px; } 
.audioplayer-time-duration { margin-right: 0; } 
.audioplayer-bar { position: relative; top: 13px; display: inline-block; width: calc(100% - 232px); margin: 13px 14px; height: 12px; cursor: pointer; } 
.audioplayer-bar::before { content: ''; position: absolute; top: 5px; width: 100%; height: 4px; background-color: #DDE2E6; } 
.audioplayer-bar > div { position: absolute; left: 0; top: 5px; } 
.audioplayer-bar-loaded { z-index: 1; height: 4px; border-radius: 10px; background: #BEC8D2; } 
.audioplayer-bar-played { z-index: 2; border-radius: 10px; height: 4px; background: #3e51b4; } 
.audioplayer-bar-played::after { display: block; position: absolute; content: ''; box-sizing: border-box; top: -7px; right: -1px; margin-right: -7px; width: 18px; height: 18px; background-color: #fff; border-radius: 10px; } 
.listening.new .audioplayer-bar-played:active::after { width: 24px; height: 24px; border-radius: 30px; top: -10px; right: -5px; } 
.audioplayer:not(.audioplayer-playing) .audioplayer-bar-played::after { border: 2px solid #BEC8D2; } 
.audioplayer-playing .audioplayer-bar-played::after { border: 2px solid #3e51b4; } 
.audioplayer-volume { display: none; position: relative; top: 15px; } 
.audioplayer-volume-button { float: left; width: 24px; height: 24px; cursor: pointer; } 
.audioplayer-volume-button a { display: block; width: 6px; height: 8px; background-color: #9A9FB0; position: relative; } 
.audioplayer-volume-button a:before, .audioplayer-volume-button a:after { content: ''; position: absolute; } 
.audioplayer-volume-button a:before { width: 0; height: 0; border-top: 8px solid transparent; border-right: 9px solid #9A9FB0; border-bottom: 8px solid transparent; border-left: none; top: -4px; } 
.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after { left: 10px; top: -2px; width: 6px; height: 6px; border: 6px double #9A9FB0; border-width: 6px 6px 0 0; border-radius: 0 12px 0 0; transform: rotate(45deg); } 
.audioplayer-mute .audioplayer-volume-button a { background-color: #FD4F1A; } 
.audioplayer-mute .audioplayer-volume-button a:before { border-right: 9px solid #FD4F1A; } 
.audioplayer-volume-adjust { float: left; margin-left: 8px; margin-top: 2px; } 
.audioplayer-volume-adjust > div { position: relative; display: block; width: 60px; height: 4px; border-radius: 10px; cursor: pointer; background-color: #BEC8D2; } 
.audioplayer-volume-adjust div div { position: absolute; top: 0; left: 0; height: 4px; background-color: #3e51b4; border-radius: 10px; } 
.audioplayer .speed { background: #f1f1f1; float: right; margin-right: 10px; border-radius: 16px; font-size: 13px; color: #607d8b; text-align: center; padding: 5px 7px 3px; height: 25px; width: 48px; margin-top: 20px; box-sizing: border-box; line-height: 1; font-weight: 700; } 
.audioplayer .speed a { text-decoration: none; color: inherit; } 
.audioplayer .speed:hover { color: #5c67f7; } 

.mdw-script .myclass-detail-cont .cplay-detail li { padding: 0 20px; margin: 0; width: 100%; box-sizing: border-box; background: #f9f9f9; border-color: #e5e5e5; } 
#problem_main .myclass-detail-cont .w-cplay-detail .cplay-detail>li { padding: 0 20px; background: #f9f9f9; } 


@media screen and (max-width: 750px){
 .audioplayer .speed { margin-top: 17px; } 
 .audioplayer-volume-adjust { display: none; } 
 .audioplayer { padding: 33px 0 0 10px !important; } 
 .audioplayer .song-name { padding-left: 11px; } 
 .audioplayer-bar { margin: 0 15px; width: calc(100% - 222px); top: 0px; } 
 .audioplayer-time-duration { margin-right: 0; } 
 .audioplayer-time-current { margin-left: 14px; } 
 .audioplayer-time-duration { margin-left: 0 } 
 .audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after { left: 11px; top: 0px; width:8px; height:8px; } 
 }