.bottomArea{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    background-color: #191919;
    display: flex;
    align-items: center;
    z-index: 10;
}
.bottomArea > span[class^="btn_"]{ cursor: pointer; margin-right: 15px; }
.btn_index{ width: 69px; height: 100%; background: url(../img/btn_index.png) no-repeat center; background-size: 100%; opacity: 0.3; margin-left: 20px; }
.btn_index.active, .btn_index:hover{ background: url(../img/btn_index_o.png) no-repeat center; background-size: 100%; opacity: 1; }
.btn_info{ width: 13px; height: 100%; background: url(../img/btn_info.png) no-repeat center; background-size: 100%; opacity: 0.3; }
.btn_info.active, .btn_info:hover{ background: url(../img/btn_info_o.png) no-repeat center; background-size: 100%; opacity: 1; }
.btn_down{ width: 15px; height: 100%; background: url(../img/btn_down.png) no-repeat center; background-size: 100%; opacity: 0.3; }
.btn_down.active, .btn_down:hover{ background: url(../img/btn_down_o.png) no-repeat center; background-size: 100%; opacity: 1; }
.btn_help{ width: 12px; height: 100%; background: url(../img/btn_search.png) no-repeat center; background-size: 100%; opacity: 0.3; }
.btn_help.active, .btn_help:hover{ background: url(../img/btn_search_o.png) no-repeat center; background-size: 100%; opacity: 1; }

.progressBg{ width: 560px; height: 14px; position: relative; cursor: pointer; margin-left: 15px; margin-right: 10px; }
.progressBg::after{ content: ""; position: absolute; top: 6px; left: 0; width: 100%; height: 1px; background-color: #fff; }
.progressOver{ width: 0; height: 7px; border-radius: 3.5px; background-color: #fff; position: absolute; top: 3px; left: 0; cursor: pointer; }

.timeGroup{ width: 100px; color: #fff; font-family: 'AppleSDGothicNeoL'; font-size: 15px;  opacity: 1; margin-right: 20px; display: flex; align-items: center; justify-content: center; }
.totTime{ opacity: 0.3; }
.slash{ width: 1px; height: 11px; background-color: #fff; opacity: 0.3; margin: 0 5px; }
.btn_pause{ width: 11px; height: 100%; background: url(../img/btn_pause.png) no-repeat center; background-size: 100%; opacity: 0.3; }
.btn_pause.active, .btn_pause:hover{ background: url(../img/btn_pause_o.png) no-repeat center; background-size: 100%; opacity: 1; }

.btn_play{ width: 11px; height: 100%; background: url(../img/btn_play.png) no-repeat center; background-size: 100%; opacity: 0.3; }
.btn_play.active, .btn_play:hover{ background: url(../img/btn_play_o.png) no-repeat center; background-size: 100%; opacity: 1; }

.btn_replay{ width: 15px; height: 100%; background: url(../img/btn_replay.png) no-repeat center; background-size: 100%; }
.btn_replay.active, .btn_replay:hover{ background: url(../img/btn_replay_o.png) no-repeat center; background-size: 100%; }

.btn_rate{ width: 15px; height: 100%; background: url(../img/btn_replay.png) no-repeat center; background-size: 100%; }



.btn_script{ width: 12px; height: 100%; background: url(../img/btn_script.png) no-repeat center; background-size: 100%; opacity: 0.3; }
.btn_script.active{ background: url(../img/btn_script_o.png) no-repeat center; background-size: 100%; opacity: 1; }

.btn_volumeon{ width: 14px; height: 100%; background: url(../img/btn_volumeon.png) no-repeat center; background-size: 100%; opacity: 0.3; margin-right: 0px !important; }
.btn_volumeon.active, .btn_volumeon:hover{ background: url(../img/btn_volumeon_o.png) no-repeat center; background-size: 100%; opacity: 1; }
.btn_volumeoff{ width: 14px; height: 100%; background: url(../img/btn_volumeoff.png) no-repeat center; background-size: 100%; opacity: 0.3; margin-right: 0px !important; }
.btn_volumeoff.active, .btn_volumeoff:hover{ background: url(../img/btn_volumeoff_o.png) no-repeat center; background-size: 100%; opacity: 1; }

.vprogressBg{ width: 90px; height: 14px; position: relative; cursor: pointer; margin-left: 15px; margin-right: 15px; }
.vprogressBg::after{ content: ""; position: absolute; top: 6px; left: 0; width: 100%; height: 1px; background-color: #fff; }
.vprogressOver{ width: 0; height: 7px; border-radius: 3.5px; background-color: #fff; position: absolute; top: 3px; left: 0; cursor: pointer; }

.btn_fs{ width: 14px; height: 100%; opacity: 0.3; margin-right: 0px !important; }
.btn_fs{ background: url(../img/btn_fs_on.png) no-repeat center; background-size: 100%; }
.btn_fs:hover{ background: url(../img/btn_fs_on_o.png) no-repeat center; background-size: 100%; opacity: 1; }

.btn_fs.fsoff{ background: url(../img/btn_fs_off.png) no-repeat center; background-size: 100%; }
.btn_fs.fsoff:hover{ background: url(../img/btn_fs_off_o.png) no-repeat center; background-size: 100%; opacity: 1; }

.btn_prev{ width: 15px; height: 100%; background: url(../img/btn_prev.png) no-repeat center; background-size: 100%; margin-left: 20px; margin-right: 5px !important; }
.btn_prev.active, .btn_prev:hover{ background: url(../img/btn_prev_o.png) no-repeat center; background-size: 100%; }

.curPage{ color: #fff; font-family: 'AppleSDGothicNeoB'; font-size: 20px; }
.totPage{ color: #fff; font-family: 'AppleSDGothicNeoB'; font-size: 20px; opacity: 0.3; }

.btn_next{ width: 15px; height: 100%; background: url(../img/btn_next.png) no-repeat center; background-size: 100%; margin-left: 5px; margin-right: 5px !important; }
.btn_next.active, .btn_next:hover{ background: url(../img/btn_next_o.png) no-repeat center; background-size: 100%; }