/**[bar music start]**/
#myAudio{position: absolute;left: -200%;}
.comp-music{width: 100%;height: 66px;opacity: 0.96;z-index: 9998;background: rgba(247, 244, 236, 0.96);border-top: 1px solid #e4ded0;position: fixed;bottom: 2px;left: 0;pointer-events: none;}
.comp-music .music-img,
.comp-music .bottom-mode,
.comp-music .bottom-prev,
.comp-music .bottom-pause,
.comp-music .bottom-next,
.comp-music .bottom-list,
.comp-music .bottom-voice,
.comp-music .bottom-list-div,
.comp-music .bottom-line .el-slider,
.comp-music .bottom-voice .el-slider{pointer-events: auto;}
.comp-music .music-img{width: 66px;height: 66px;float: left;display: flex;justify-content: center;align-items: center;animation: rotating 9s linear infinite;}
.comp-music .music-img img{max-height: 90%;max-width: 90%;border-radius: 50%;}
.comp-music .music-main{width: calc(100% - 70px);height: 100%;float: right;}
.music-main .main-top,
.music-main .main-bottom{width: 98%;height: 50%;padding: 0 5px;align-items: center;display: flex;}
.music-main .main-top{width: calc(100% - 100px);}
.music-main .main-top>div,
.music-main .main-bottom>div{color: #4a463f;}
.main-top .top-title{width: 26%;white-space: nowrap;overflow: hidden;text-align: left;}
.main-top .top-lrc{width: 100%;white-space: nowrap;overflow: hidden;}
.main-bottom .bottom-left,
.main-bottom .bottom-right{width: 40px;}
.bottom-mode,.bottom-prev,.bottom-pause,.bottom-next,.bottom-list,.bottom-voice{position: relative;width:20px;height: 20px;padding: 2px; margin-left: 2px;cursor: pointer;}
.main-bottom>div img{max-height: 100%;}
.bottom-list{position: relative;}
.bottom-list .bottom-list-div{
    position: absolute;
    display: none;
    width: 120px;
    height: 160px;
    overflow: auto;
    background: #fffdf8;
    bottom: 62px;
    right: 0;
    border: 1px solid #e4ded0;
    color: #4a463f;
    text-align: left;
    border-radius: 5px;
    font-size: 12px;
}
.bottom-list .bottom-list-div>div{margin:3px 5px;white-space: nowrap;}
.bottom-list .bottom-list-div.list-div-show{display: block;}
.bottom-list .bottom-list-div>div:hover{font-size: 14px;color: #9a6a5d;}
.bottom-list .bottom-list-div>div small{margin-left: 5px;}
.bottom-right{margin-right: 30px;}
.bottom-line{width:60%;height: 2px;background: #d8d2c5;border-radius: 4px;margin: 0 10px;}
.bottom-line .el-slider{width: 100%;height: 100%;background: #9a6a5d;}
.bottom-line .el-slider .el-slider__button{height: 12px;width: 12px;border-radius: 50%;background: #FFF;cursor: pointer;}
.bottom-voice .el-slider{position: absolute;bottom: 63px;left: 0;background: #fffdf8;border: 1px solid #e4ded0;height: 160px;border-radius: 3px;}
.bottom-voice .el-slider .el-slider__runway{height: 80% !important;width: 2px;margin: 0 10px -5px 10px;}
.bottom-voice .el-slider .el-slider__runway .el-slider__bar{width:100% !important;}
.bottom-voice .el-slider .el-slider__button{position: absolute;bottom: 50%;height: 12px;width: 12px;left: 10px;border-radius: 50%;background: #FFF;}
/**[bar music end]**/