.qplayerF{margin:0 auto;margin-top:-5px;display:flex;align-items:center}
#musicBtn{position:relative}
#QPlayer{position:fixed;transition:transform .5s ease;right:0;width:fit-content;height:fit-content;z-index:99}
#player{float:right;width:260px;height:var(--service-icon-size);margin:0 auto;position:relative;box-sizing:border-box;border-radius:30px;padding-left:10px;background:0 0;box-shadow:none;display:flex;align-items:center}
/*#player .cover{position:absolute;right:0;overflow:hidden;border-radius:50%;width:var(--service-icon-size);height:var(--service-icon-size);cursor:pointer;z-index:1}*/
#player .cover img{height:100%;border-radius:50%;object-fit:cover}
#player .ctrl{line-height:14px;font-size:14px;margin-top:0;color:#636363;padding:8px;width:175px;display:none;position:relative}
#player .ctrl .musicTag.marquee{cursor:ew-resize;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
#player .ctrl .musicTag music,#player .ctrl .musicTag strong{display:inline;font-size:85%;text-overflow:ellipsis;white-space:nowrap}
#player .ctrl .musicTag music{font-size:12px;color:#757575;margin-left:5px}
#player .ctrl .music_progress{margin-top:12px;display:flex;align-items:center;justify-content:space-between;width:100%}
#player .ctrl .music_progress .timer{font-size:12px;color:#5f5f5f;margin:0;vertical-align:middle;line-height:18px}
#player .ctrl .contr{text-align:center;position:relative;display:flex;align-items:center;gap:15px;padding:0 10px}
#player .ctrl .icon{display:inline-block;opacity:1;cursor:pointer;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none;background:url(../img/audio_sprite.png) no-repeat 0 9999px;transition:.2s;-webkit-font-smoothing:antialiased}
#player .ctrl .icon.enable,#player .ctrl .icon:hover{opacity:1}
#player .ctrl .icon:active{opacity:.3}
.liebiao{background-image:url(../img/liebiao.png);background-position:-58px -14px!important;width:13px;height:10px;position:absolute;top:40px;right:10px}
.rewind{background-position:-33px 0!important;width:9px;height:10px}
.playback{background-position:0 0!important;width:14px;height:18px}
.playback.playing{background-position:-36px -63px!important;width:14px;height:18px}
.fastforward{background-position:-58px 0!important;width:9px;height:10px}
#playlist{background:#fff;width:250px;margin:0;padding:0;position:absolute;max-height:0;overflow:hidden;z-index:99;text-align:left;bottom:65px;right:10px;border:0;transition:max-height .5s ease}
#playlist.go{max-height:300px;border:1px solid #eee}
#playlist li{color:#989898;font-size:11px;line-height:2;padding:3px 15px;cursor:pointer;text-overflow:ellipsis;list-style-position:inside;list-style-type:decimal;white-space:nowrap;overflow:hidden;transition:.2s;-webkit-font-smoothing:antialiased}
#playlist li.playing,#playlist li:hover{color:#716e6e;font-weight:700;border-left:3px solid #1abc9c;padding:3px 11px}
#playlist li strong,#playlist li.playing strong{width:100px;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute}
#playlist li music,#playlist li.playing music{width:100px;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:right;margin-left:90px;text-align:right}
#pContent{position:absolute;right:0}
#QPlayer ::-webkit-scrollbar{width:3px!important}
#QPlayer ::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)!important;border-radius:10px!important}
#QPlayer ::-webkit-scrollbar-thumb{border-radius:10px!important;background:rgba(0,0,0,.1)!important;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)!important}
#QPlayer ::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,0,0,.4)!important}
.marquee{overflow:hidden}
.qplayer-notification{position:fixed;top:20px;right:30px;display:inline-block;z-index:999999;margin:10px;box-sizing:border-box;overflow:hidden;backface-visibility:hidden;perspective:1000px;padding-bottom:5px;color:#4f4f4f;font-family:'Lucida Grande','Segoe UI',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px}
.qplayer-notification-icon{display:block;width:50px;height:50px;position:absolute;float:left;text-align:center;vertical-align:bottom;color:#fff;font-size:22px;font-weight:700;background-color:#2980b9;line-height:48px}
.qplayer-notification .body{padding-left:14px;padding-right:60px;height:50px;vertical-align:middle;display:table;background-color:#fff;left:50px;top:0;position:relative}
.qplayer-notification .message{display:table-cell;vertical-align:middle;white-space:nowrap;color:#777;font-size:15px;font-weight:700}
.qplayer-notification .close{position:absolute;top:0;right:0;font-size:19px;line-height:13px;color:#ddd;padding:7px;text-decoration:none;display:none}
.animation-target{-webkit-animation:animation 1s linear both;animation:animation 1s linear both}
@-webkit-keyframes animation{0%{-webkit-transform:matrix3d(.5,0,0,0,0,.5,0,0,0,0,1,0,0,0,0,1)}
3.4%{-webkit-transform:matrix3d(.658,0,0,0,0,.703,0,0,0,0,1,0,0,0,0,1)}
4.7%{-webkit-transform:matrix3d(.725,0,0,0,0,.8,0,0,0,0,1,0,0,0,0,1)}
6.81%{-webkit-transform:matrix3d(.83,0,0,0,0,.946,0,0,0,0,1,0,0,0,0,1)}
9.41%{-webkit-transform:matrix3d(.942,0,0,0,0,1.084,0,0,0,0,1,0,0,0,0,1)}
10.21%{-webkit-transform:matrix3d(.971,0,0,0,0,1.113,0,0,0,0,1,0,0,0,0,1)}
13.61%{-webkit-transform:matrix3d(1.062,0,0,0,0,1.166,0,0,0,0,1,0,0,0,0,1)}
14.11%{-webkit-transform:matrix3d(1.07,0,0,0,0,1.165,0,0,0,0,1,0,0,0,0,1)}
17.52%{-webkit-transform:matrix3d(1.104,0,0,0,0,1.12,0,0,0,0,1,0,0,0,0,1)}
18.72%{-webkit-transform:matrix3d(1.106,0,0,0,0,1.094,0,0,0,0,1,0,0,0,0,1)}
21.32%{-webkit-transform:matrix3d(1.098,0,0,0,0,1.035,0,0,0,0,1,0,0,0,0,1)}
24.32%{-webkit-transform:matrix3d(1.075,0,0,0,0,.98,0,0,0,0,1,0,0,0,0,1)}
25.23%{-webkit-transform:matrix3d(1.067,0,0,0,0,.969,0,0,0,0,1,0,0,0,0,1)}
29.03%{-webkit-transform:matrix3d(1.031,0,0,0,0,.948,0,0,0,0,1,0,0,0,0,1)}
29.93%{-webkit-transform:matrix3d(1.024,0,0,0,0,.949,0,0,0,0,1,0,0,0,0,1)}
35.54%{-webkit-transform:matrix3d(.99,0,0,0,0,.981,0,0,0,0,1,0,0,0,0,1)}
36.74%{-webkit-transform:matrix3d(.986,0,0,0,0,.989,0,0,0,0,1,0,0,0,0,1)}
41.04%{-webkit-transform:matrix3d(.98,0,0,0,0,1.011,0,0,0,0,1,0,0,0,0,1)}
44.44%{-webkit-transform:matrix3d(.983,0,0,0,0,1.016,0,0,0,0,1,0,0,0,0,1)}
52.15%{-webkit-transform:matrix3d(.996,0,0,0,0,1.003,0,0,0,0,1,0,0,0,0,1)}
59.86%{-webkit-transform:matrix3d(1.003,0,0,0,0,.995,0,0,0,0,1,0,0,0,0,1)}
63.26%{-webkit-transform:matrix3d(1.004,0,0,0,0,.996,0,0,0,0,1,0,0,0,0,1)}
75.28%{-webkit-transform:matrix3d(1.001,0,0,0,0,1.002,0,0,0,0,1,0,0,0,0,1)}
85.49%{-webkit-transform:matrix3d(.999,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}
90.69%{-webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}
100%{-webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}
}
@keyframes animation{0%{transform:matrix3d(.5,0,0,0,0,.5,0,0,0,0,1,0,0,0,0,1)}
3.4%{transform:matrix3d(.658,0,0,0,0,.703,0,0,0,0,1,0,0,0,0,1)}
4.7%{transform:matrix3d(.725,0,0,0,0,.8,0,0,0,0,1,0,0,0,0,1)}
6.81%{transform:matrix3d(.83,0,0,0,0,.946,0,0,0,0,1,0,0,0,0,1)}
9.41%{transform:matrix3d(.942,0,0,0,0,1.084,0,0,0,0,1,0,0,0,0,1)}
10.21%{transform:matrix3d(.971,0,0,0,0,1.113,0,0,0,0,1,0,0,0,0,1)}
13.61%{transform:matrix3d(1.062,0,0,0,0,1.166,0,0,0,0,1,0,0,0,0,1)}
14.11%{transform:matrix3d(1.07,0,0,0,0,1.165,0,0,0,0,1,0,0,0,0,1)}
17.52%{transform:matrix3d(1.104,0,0,0,0,1.12,0,0,0,0,1,0,0,0,0,1)}
18.72%{transform:matrix3d(1.106,0,0,0,0,1.094,0,0,0,0,1,0,0,0,0,1)}
21.32%{transform:matrix3d(1.098,0,0,0,0,1.035,0,0,0,0,1,0,0,0,0,1)}
24.32%{transform:matrix3d(1.075,0,0,0,0,.98,0,0,0,0,1,0,0,0,0,1)}
25.23%{transform:matrix3d(1.067,0,0,0,0,.969,0,0,0,0,1,0,0,0,0,1)}
29.03%{transform:matrix3d(1.031,0,0,0,0,.948,0,0,0,0,1,0,0,0,0,1)}
29.93%{transform:matrix3d(1.024,0,0,0,0,.949,0,0,0,0,1,0,0,0,0,1)}
35.54%{transform:matrix3d(.99,0,0,0,0,.981,0,0,0,0,1,0,0,0,0,1)}
36.74%{transform:matrix3d(.986,0,0,0,0,.989,0,0,0,0,1,0,0,0,0,1)}
41.04%{transform:matrix3d(.98,0,0,0,0,1.011,0,0,0,0,1,0,0,0,0,1)}
44.44%{transform:matrix3d(.983,0,0,0,0,1.016,0,0,0,0,1,0,0,0,0,1)}
52.15%{transform:matrix3d(.996,0,0,0,0,1.003,0,0,0,0,1,0,0,0,0,1)}
59.86%{transform:matrix3d(1.003,0,0,0,0,.995,0,0,0,0,1,0,0,0,0,1)}
63.26%{transform:matrix3d(1.004,0,0,0,0,.996,0,0,0,0,1,0,0,0,0,1)}
75.28%{transform:matrix3d(1.001,0,0,0,0,1.002,0,0,0,0,1,0,0,0,0,1)}
85.49%{transform:matrix3d(.999,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}
90.69%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}
100%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}
}
.qplayer_tips{width:210px;height:0;text-align:center;background:#9bcd9b;position:fixed;margin:30px;color:#fff;border-radius:.5em;font-size:18px;font-weight:700;z-index:9999999}
.qplayer_tips .tips_arrow{border-width:0;border-style:solid;border-color:#9bcd9b transparent transparent transparent;position:absolute;bottom:-29px;left:17px}
.qplayer_tips .tips_button{height:0;padding:0;width:58px;position:absolute;bottom:7px;right:7px;border:0;color:#fff;background-color:transparent;border:1px dashed rgba(0,0,0,.15);border-radius:5px;cursor:pointer;font-size:10px}
.qplayer_tips .tips_button:hover{box-shadow:0 0 10px #fff}
.qplayer_tips .info{padding:20px;display:table}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 若你使用的是 <music class="cover"> 自定义标签，补充以下样式 */
#player music.cover {
    display: block;
    position: absolute;
    right: 0;
    overflow: hidden;
    border-radius: 50%;
    width: var(--service-icon-size);
    height: var(--service-icon-size);
    cursor: pointer;
    z-index: 1;
}

#player music.cover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--service-icon-size) / 3.5);
    height: calc(var(--service-icon-size) / 3.5);
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(200, 200, 200, 0.5);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
    z-index: 2;
}