@charset "utf-8";
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,input,lengend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea,th{color:#333;background-color:#fff;font-size:14px;line-height:1.5;font-family:poppin,'PingFang SC',Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;font-family:Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif/9}
h1,h2,h3,h4,h5,h6{font-size:100%}
li{list-style:none}
img{border:0 none;border-radius:10px;-ms-interpolation-mode:bicubic;image-rendering:optimizeQuality}
input[type=button],input[type=submit]{cursor:pointer}
button{cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
a{color:#333;text-decoration:none}
a:hover{color:#31c27c;text-decoration:none}
a:focus,button:focus,input:focus{outline:0}
.text-center{text-align:center}
.clear-fix{zoom:1}
.clear-fix:before,.clear-fix:after{display:table;line-height:0;content:""}
.clear-fix:after{clear:both}
.hidden{display:none!important}
.mCSB_container::-webkit-scrollbar{width:0;height:0}
#lyric::-webkit-scrollbar{width:0;height:0}
html,body{height:100%;width:100%;background-color:#777970;overflow:hidden}
body{background:#000;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a8a99',endColorstr='#000000');background-image:-webkit-linear-gradient(200deg,#7a8a99,#000);background-image:-moz-linear-gradient(200deg,#7a8a99,#000);background-image:-o-linear-gradient(200deg,#7a8a99,#000);background-image:-ms-linear-gradient(200deg,#7a8a99,#000);background-image:linear-gradient(200deg,#7a8a99,#000);overflow:hidden}
#blur-img{position:fixed;height:100%;left:-10%;width:120%;overflow:hidden}
#mobile-blur{-webkit-filter:blur(50px);filter:blur(50px);-webkit-transform:scale(1.15);transform:scale(1.15);position:absolute;top:0;bottom:0;left:0;z-index:1;width:100%;background-size:cover;background-position:bottom center}
.blur-mask{display:none;position:absolute;width:100%;height:100%;background-color:#000;filter:alpha(opacity=30);-moz-opacity:.3;opacity:.3;top:0;left:0;overflow:hidden}
.mobile-mask{filter:alpha(opacity=60);-moz-opacity:.6;opacity:.6}
#mkplayer{display:none}
.header{height:50px;position:absolute}
.logo{transition:all .25s ease;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-o-transition:all .25s ease;-ms-transition:all .25s ease;display:inline-block;font-size:23px;color:#829194;cursor:pointer;margin:10px 20px}
.logo:hover{color:#fff}
.container{position:relative;width:100%;height:100%;max-width:1200px;margin:0 auto}
.center{position:absolute;width:100%;top:50px;bottom:100px}
.btn-bar{position:absolute;display:inline-block;left:0;right:400px;height:55px}
.btn-box{position:absolute;top:10px;bottom:10px;left:10px;right:10px}
.btn{transition:all .25s ease;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-o-transition:all .25s ease;-ms-transition:all .25s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;position:relative;border-radius:2px;border:1px solid #fff;border:1px solid #96969680;color:#fff;opacity:.8;filter:alpha(opacity=80);cursor:pointer;font-size:14px;padding:6px 25px;margin:0 2px}
.btn:hover{border:1px solid #fff;opacity:1;filter:alpha(opacity=100)}
.btn[data-action='player']{display:none}
#search-area{padding:25px 15px}
.search-group{font-size:0;padding-bottom:10px}
.search-group>input,.search-group>button{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.search-group>input{padding:5px;border:1px solid #a7a1a1;height:35px;width:80%}
.search-group>button{border:1px solid #a7a1a1;background-color:#eee;height:35px;margin-left:-1px;width:20%;white-space:nowrap;text-overflow:clip;overflow:hidden}
.radio-group>label{margin-right:10px;cursor:pointer}
.radio-group>label>input{vertical-align:-2px}
.select-group{margin-top:8px;color:grey}
.click-group{display:flex;justify-content:space-between;align-items:center;padding-top:8px;color:grey;cursor:pointer}
.click-group:hover{text-decoration:none}
.settings-switch{position:relative;display:inline-block;width:40px;height:20px}
.settings-switch input{opacity:0;width:0;height:0}
.settings-slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:34px;transition:.4s}
.settings-slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}
.settings-switch input:checked + .settings-slider{background-color:#4CAF50}
.settings-switch input:checked + .settings-slider:before{transform:translateX(20px)}
.settings-select{display:flex;padding:10px 0;border-bottom:1px solid #ddd}
.settings-toggle{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #ddd}
.settings-navigate{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #ddd;cursor:pointer}
.data-area{position:absolute;left:0;right:400px;top:60px;bottom:0;overflow:hidden}
.data-box{position:absolute;left:10px;right:10px;top:10px;bottom:10px;overflow-y:auto}
.list-head{height:40px}
.list-item{width:100%;height:50px;line-height:50px;color:#bdbdbe;color:#e1e1e1cc;font-size:14px;overflow:hidden;border-bottom:1px solid #9696961a;cursor:default;position:relative}
.list-playing{color:#fff}
.list-num{display:block;width:30px;text-align:center;float:left;overflow:hidden}
.list-playing .list-num{background:url(../images/wave.gif) 10px 20px no-repeat;text-indent:-99px}
.music-name{position:relative;display:block;width:auto;margin-left:40px;margin-right:300px;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
.music-name-cult{display:block;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item:hover .music-name-cult{padding-right:150px}
.list-playing:hover .music-name-cult{padding-right:100px}
.auth-name,.music-album,.auth-name-click,.music-album-click{position:relative;display:block;width:150px;float:right;height:100%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-name-click:hover,.music-album-click:hover{color:#fff;cursor:pointer}
.list-mobile-menu{display:none}
.list-menu{position:absolute;right:10px;top:50%;overflow:hidden;font-size:0;height:36px;margin-top:-18px;float:right;display:none}
.list-item:hover .list-menu{display:block}
.list-head:hover .list-menu{display:none}
.list-icon{display:block;width:36px;height:36px;background-image:url(../images/icon_list_menu.png);float:left;margin-left:10px;cursor:pointer}
.list-playing .icon-play{display:none}
.icon-play{background-position:-80px 0}
.icon-play:hover{background-position:-120px 0}
.icon-download{background-position:-80px -120px}
.icon-download:hover{background-position:-120px -120px}
.icon-share{background-position:-80px -40px}
.icon-share:hover{background-position:-120px -40px}
.icon-addlist{background-position:-80px -80px}
.icon-addlist:hover{background-position:-120px -80px}
.icon-dellist{background-position:-80px -160px}
.icon-dellist:hover{background-position:-120px -160px}
.share-url{width:100%;margin-top:10px;margin-bottom:10px;line-height:30px;box-sizing:border-box;padding:0 5px;border:1px solid #ccc;box-shadow:1px 1px 5px #0000001a inset;color:#333;height:35px}
.share-tips{font-size:12px;color:#a9a9a9}
.list-clickable{cursor:pointer}
.sheet-item{position:relative;display:block;width:25%;float:left;text-align:center;margin-bottom:20px}
.sheet-cover{display:block;width:100px;height:100px;margin:10px auto;cursor:pointer}
.sheet-playing:before{content:url(../images/wave.gif);position:absolute;top:90px;left:50%;margin-left:-45px}
.sheet-name{display:inline-block;max-width:150px;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;margin-bottom:10px;color:#fff;cursor:pointer;font-size:12px}
.sheet-title-bar{border-radius:2px;margin:20px 0;text-align:center;line-height:40px;height:40px;color:#C5C5C5;background-color:#0000001f}
.login-btn{cursor:pointer}
.login-btn:hover{color:#31c27c}
.player{height:100%;width:400px;float:right;position:relative}
.cover{position:relative;display:block;width:186px;height:186px;margin:auto}
.cover:after{content:"";position:absolute;left:9px;top:0;width:201px;height:180px;background:url(../images/album_cover_player.png) 0 0 no-repeat;pointer-events:none}
.music-cover{vertical-align:middle;width:186px;height:186px}
.lyric{position:absolute;left:10px;right:10px;top:200px;bottom:36px;overflow:hidden;text-align:center;color:#bdbdbe;color:#e1e1e1cc;line-height:30px;padding:20px 0}
#lyric{position:absolute;width:100%;top:0;bottom:0;overflow:hidden}
#lyric>li{word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lyric .lplaying{color:#31c27c}
.lyric-tip{position:absolute;width:100%;top:50%}
#music-info{transition:all .25s ease;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-o-transition:all .25s ease;-ms-transition:all .25s ease;position:absolute;width:27px;height:26px;border-radius:13px;right:10px;bottom:10px;cursor:pointer;color:#fff;text-align:center;line-height:26px;font-weight:700;background-image:url(../images/player.png);background-position:-28px -367px;background-color:#353535;opacity:.3;filter:Alpha(opacity=30)}
#music-info:hover{opacity:1;filter:Alpha(opacity=100)}
.info-title{color:#B2AFAF}
.info-btn{cursor:pointer;color:#31c27c}
.info-btn:hover{text-decoration:underline}
.info-btn-ai{cursor:pointer;color:#31c27c;display:inline-block;background:linear-gradient(74deg,#4285f4 0,#9b72cb 9%,#d96570 20%,#d96570 24%,#9b72cb 35%,#4285f4 44%,#9b72cb 50%,#d96570 56%,#fff 75%,#fff 100%);background-size:400% auto;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .8s ease-in-out}
.info-btn-ai:hover{background-position:-250% 0}
.footer{height:100px;bottom:0;width:100%;position:absolute}
.player-btn{background-image:url(../images/player.png);opacity:.8;filter:alpha(opacity=80)}
.player-btn:hover{opacity:1;filter:alpha(opacity=100)}
.btn-state-paused{background-position:-30px 0}
.con-btn{float:left;width:130px;height:100%;position:relative;margin:0 10px}
.con-btn a{display:inline-block;position:absolute;top:50%}
.btn-prev{background-position:0 -30px;width:19px;height:20px;margin-top:-10px}
.btn-play{width:21px;height:29px;margin-top:-14.5px;left:36%;margin-left:-10.5px}
.btn-next{background-position:0 -52px;right:30%;width:19px;height:20px;margin-top:-10px}
.btn-order{background-position:0 -173px;background-size:450%;right:0;width:25px;height:25px;margin-top:-10px}
.btn-order-single{background-position:0 -196px}
.btn-order-list{background-position:0 -173px}
.btn-order-random{background-position:0 -62px;height:18px;margin-top:-9px}
.progress{width:auto;margin-left:150px;margin-right:200px;height:100%;position:relative}
.progress-box{position:absolute;height:20px;left:10px;right:0;top:50%;margin-top:-9px}
.vol{float:right;width:200px;height:100%;right:0;top:2px;position:relative}
.quiet{width:60px;height:100%;position:relative;float:left}
.btn-quiet{display:inline-block;position:absolute;width:26px;height:21px;top:50%;right:0;margin-top:-10px;background-position:0 -144px}
.btn-state-quiet{background-position:0 -182px}
.volume{position:relative;margin-left:60px;height:100%;overflow:hidden}
.volume-box{position:absolute;height:20px;left:10px;right:10px;top:50%;margin-top:-10px}
.mkpgb-area{position:relative;cursor:pointer;height:100%}
.mkpgb-bar{position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;border-radius:2px;background-color:#808284;overflow:hidden}
.mkpgb-cur{position:absolute;background-color:#D8D8D8;width:0;height:2px;top:50%;margin-top:-1px;border-radius:2px;transition:all .25s ease;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-o-transition:all .25s ease;-ms-transition:all .25s ease}
.mkpgb-dot{width:10px;height:10px;background-color:#fff;border-radius:5px;overflow:hidden;position:absolute;left:0;margin-left:-5px;top:50%;margin-top:-5px;transition:all .25s ease;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-o-transition:all .25s ease;-ms-transition:all .25s ease}
.mkpgb-locked{cursor:default}
.dot-move{-webkit-box-shadow:0 0 20px #fff;-moz-animation:dot-move 3s linear 2s infinite;-webkit-animation:dot-move 3s linear 2s infinite;-o-animation:dot-move 3s linear 2s infinite;-ms-animation:dot-move 3s linear 2s infinite}
@-webkit-keyframes dot-move {
0%{-webkit-box-shadow:0 0 20px #fff}
25%{-webkit-box-shadow:0 0 10px #fff}
50%{-webkit-box-shadow:0 0 0 #fff}
75%{-webkit-box-shadow:0 0 10px #fff}
100%{-webkit-box-shadow:0 0 20px #fff}
}
@keyframes dot-move {
0%{-webkit-box-shadow:0 0 10px #363333}
25%{-webkit-box-shadow:0 0 7px #363333}
50%{-webkit-box-shadow:0 0 0 #fff}
75%{-webkit-box-shadow:0 0 6px #fff}
100%{-webkit-box-shadow:0 0 10px #363333}
}