@charset "utf-8";
/*reset*/
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);word-wrap: break-word;font-size: inherit;line-height: inherit;overflow: visible;}
header,footer,section,article,aside,nav,address,figure,figcaption,menu,details{display:block;}

.f-cb{height: 0;}
.f-cb:after{display:block;content:" ";height:0;visibility:hidden;clear:both;}
.f-ib{display:inline-block;}
.f-din{display:inline;}
.f-dn{display:none;}
.f-db{display:block;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-oh{overflow: hidden;zoom: 1;clear: both;}
.f-tdn{text-decoration: none!important;}
.f-vam,.f-vama *{vertical-align:middle;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-lhn{line-height:normal;}
.f-toe{overflow:hidden;word-wrap:normal!important;white-space:nowrap;text-overflow:ellipsis;}
.f-usn{-webkit-user-select:none;user-select:none;}
.f-bsb{-webkit-box-sizing:border-box;box-sizing:border-box;}
.f-cp{cursor: pointer}

/*滚动条美化*/
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-button:vertical{display:none}
::-webkit-scrollbar-track:vertical{background-color:transparent;}
::-webkit-scrollbar-track-piece{background-color:transparent;}
::-webkit-scrollbar-thumb:vertical{background-color:#fc008b;border-radius:6px}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:vertical:active {background-color: #2e86ef}

html,body{
    width: 100%;
    height: 100%;
    background-color: #20213d;
    overflow: hidden;
}

/*SMusic*/
.grid-music-container{position:absolute;top:0;left:0;width:100%;height:100%;font-weight:300;text-align:center;z-index:99;}
.grid-music-container .close{display:block;width:16px;height:16px;float:right;margin-top:12px;margin-right:15px;background:url(img/close.png) no-repeat;background-size:16px auto;cursor:pointer}
#canvas{margin:0 auto;text-align:center;}
.grid-music-container .m-music-play-wrap{width:100%;height:100%;text-align:center;}
.grid-music-container .u-cover{width:174px;height:174px;position:absolute;left:50%;top:73px;margin-left:-87px;border-radius:100%;overflow:hidden;z-index:999}
.grid-music-container .u-cover img{width:auto; height:100%; border-radius:50%;}
.grid-music-container .u-cover.play{-webkit-animation: Circle 10s linear infinite 0s forwards; animation: Circle 10s linear infinite 0s forwards;}
.grid-music-container .u-cover.paused{-webkit-animation-play-state: paused;animation-play-state: paused;}

.grid-music-container .m-now-info{position:relative;text-align:center;}
.grid-music-container .m-now-info .play_change{width:120px;height:30px;border:0.5px solid #fff;border-radius:16px;font-size:14px;line-height:28px;font-weight:300;text-align:center; margin:10px auto;display:block;}
.grid-music-container .m-now-info .play_change i{margin-top:-2px;margin-right:4px;}

.grid-music-container .m-now-info .bottom{position:fixed;left:0;bottom:30px;width:100%;height:auto;z-index:999;}
.grid-music-container .m-now-info .bottom h2{font-weight:normal;line-height:30px;}
.grid-music-container .m-now-info .bottom h2 strong{font-size:18px;color:#fff;font-weight: 300;}

.grid-music-container .m-now-controls{ padding-top: 10px; position: relative;}
.grid-music-container .m-now-controls .u-control{display: inline-block;vertical-align:middle;font-size: 0;overflow: hidden;}
.grid-music-container .m-now-controls .u-process{width: 200px;height: 5px;border-radius:5px;position: relative;background-color: #fff;}
.grid-music-container .m-now-controls .u-process .buffer-process,
.grid-music-container .m-now-controls .u-process .current-process{display: block;width:5px;height:5px;border-radius:5px;position:absolute;top:0;left: 0;background: #fc008b;z-index: 1;}
.grid-music-container .m-now-controls .u-process .buffer-process{z-index: 0;background-color: #fff;}
.grid-music-container .u-time{margin-top:4px;font-size: 12px;font-weight:300;color: #fff;}
.grid-music-container .u-time span{color:rgba(255,255,255,.5)}

.grid-music-container .m-now-controls .u-volume{position: relative;height:40px;}
.grid-music-container .u-volume .volume-process{position: relative;display: inline-block;width: 220px;height: 5px;border-radius:5px;margin-left:0;vertical-align: middle;border:0;background: #fff;cursor: pointer;}
.grid-music-container .u-volume .volume-process .volume-current,
.grid-music-container .u-volume .volume-process .volume-event{display:inline-block;width:50%;height:5px;border-radius:5px;background-color: #fc008b;position: absolute;top: 0;left: 0;
	-webkit-transition: width .3s linear;transition: width .3s linear;
	background: -moz-linear-gradient(0deg, #d165ff, #fc008b);
	background: -webkit-gradient(linear,0 50%,100% 50%,from(#d165ff),to(#fc008b));
	background: -webkit-linear-gradient(0deg, #d165ff, #fc008b);
	background: -o-linear-gradient(0deg, #d165ff, #fc008b);
}
.grid-music-container .u-volume .volume-process .volume-event{width:100%;height:5px;border-radius:5px;background:none;z-index: 1;}
.grid-music-container .u-volume .volume-process .volume-bar{width:11px;height:11px;border:1px solid #fc008b; border-radius: 100%;background-color: #fc008b;position: absolute;top:-3px;left:-5px;-webkit-transition:left .3s linear;transition:left .3s linear;}
.grid-music-container .u-volume .volume-process .volume-bar:hover,
.grid-music-container .u-volume .volume-process .volume-bar:active{background-color: #fff;border-color:#fff;}
.grid-music-container .u-volume .volume-control{display: inline-block;vertical-align: middle;width: 40px;height: 40px;background: url(img/play_icon.png) -160px 0 no-repeat;background-size:auto 80px;cursor: pointer;}
.grid-music-container .u-volume .volume-control.muted{background-position: -80px -40px;}
.grid-music-container .u-volume .volume-all{display: inline-block;vertical-align: middle;width: 40px;height: 40px;background: url(img/play_icon.png) -120px -40px no-repeat;background-size:auto 80px;}

.grid-music-container .m-music-list-wrap{position:absolute;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.5);z-index:9999;}
.grid-music-container .m-music-list-wrap ul{position:absolute;left:0;bottom:0;width:100%;padding:20px 0;background:rgba(30,30,60,1);text-align:right;}
.grid-music-container .m-music-list-wrap li{display:block;font-size:12px;line-height:35px;font-weight:200; margin:0;padding:0 16px;cursor:pointer;color:#fff;border-bottom:0.5px dashed #555;}
.grid-music-container .m-music-list-wrap li strong{font-size:14px;float:left;text-align:left;font-weight:300;}
.grid-music-container .m-music-list-wrap li:hover,.grid-music-container .m-music-list-wrap li.current{background-color:rgba(255,255,255,.1);color:#fff;}
.grid-music-container .m-music-list-wrap li.current{background-color:transparent;color: #fc008b;}
.grid-music-container .m-music-list-wrap li .downicon{width:30px;height:30px;maring:10px auto;}
.grid-music-container .m-music-list-wrap li:last-child{border-bottom:none;}

.grid-music-container .m-play-controls{margin-top: 20px;}
.grid-music-container .m-play-controls a{display: inline-block;vertical-align: middle;}
.grid-music-container .m-play-controls .u-play-btn{display: inline-block;width: 40px;height: 40px;cursor: pointer;}

.u-play-btn{background: url(img/play_icon.png) no-repeat;background-size: auto 80px;}
.u-play-btn.prev{margin-right:10px;background-position: -120px 0;}
.u-play-btn.next{margin-left:10px;background-position: 0 0;}
.u-play-btn.play{background:url(img/icon_voler_02.gif) no-repeat;background-size: 40px auto;}
.u-play-btn.paused{background-position: -40px 0;}
.u-play-btn.down{margin-right:34px;background-position: -40px -40px;}
.u-play-btn.list{margin-left:34px;background-position: 0 -40px;border-bottom: 0;}