html,body,ul,p,h2,h3,audio{margin:0;padding:0;}
html{-webkit-text-size-adjust:none;}
a{text-decoration:none;color:#666;}
li{list-style:none;}
b{font-weight:normal;}
.clearfix{zoom:1;}
.clearfix:after{content:"";display:block;clear:both;height:0;}


html,body{width:100%;height:100%;overflow:hidden;color:#fff;font:12px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;background-size:cover;}

.music{position:relative;height:100%;-moz-user-select:none;}

/***音量***/
.volume{position:absolute;left:-200px;top:10px;display:none;}
.volume-icon{position:absolute;width:0;height:0;border:7px solid #fff;border-right:7px solid #666;font-size:0;line-height:0;}
.volume-icon01{position:absolute;left:1px;top:-3px;width:3px;height:6px;border-left:4px solid #666;border-right:1px solid #666;}
.volume-icon02{position:absolute;left:10px;top:-4px;width:1px;height:8px;background:#666;}
.volume-icon03{position:absolute;left:8px;top:-6px;width:1px;height:10px;color:#333;font-size:10px;font-weight:normal;line-height:10px;background:#fff;}
.volume-bar{position:absolute;left:23px;top:5px;height:3px;width:90px;background:#CCC;cursor:pointer;}
.volume-val{position:absolute;height:3px;width:82px;left:0;top:0;background:#36C;overflow:hidden;}
.volume-control{position:absolute;top:-2px;left:82px;width:8px;height:8px;border-radius:50%;background:#999;overflow:hidden;}

.rorate-pic{-webkit-animation:rorate 7s linear infinite;animation:rorate 7s linear infinite;}
.rorate-pic-stop{-webkit-animation-play-state:paused;animation-play-state:paused;}
@-webkit-keyframes rorate{
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.fun-intro{position: absolute;right:10px;top:20px;width:450px;line-height:26px;font-size:12px;}
.fun-intro .intro-tit{font:20px/28px "宋体";}


/***歌曲列表***/
.list-btn{position:absolute;right:0;top:8px;width:18px;height:30px;border-top-left-radius:3px;border-bottom-left-radius:3px;font:bold 16px/30px "Mircrosoft Yahei";text-align:center;background:#ccc;z-index:1000;}
.song-box{position: absolute;top:0;width:100%;border:1px solid #aaa;color:#666;transition:0.5s left;-webkit-transition:0.5s left;z-index:1000;-moz-user-select:none;}
.song-box-unfold{left:0;}
.song-box-fold{left:100%;}
.song-box .close-list{top:5px;right:8px;}
.list-hd{height:28px;border-bottom:1px solid #dad8d8;font-size:13px;line-height:28px;background:-webkit-linear-gradient(top, #ddd, #f0f0f0);}
.list-song-tracks,.list-song-name,.list-song-songer{display:inline-block;height:27px;padding-left:10px;line-height:27px;vertical-align:middle;}
.list-song-tracks{width:12%;padding-left:0;text-align:center;}
.list-song-name{width:55%;}
.cur-song .list-song-tracks{background:url(../images/listen.gif) center center no-repeat;}
.cur-song-stop .list-song-tracks{background:url(../images/listen-stop.gif) center center no-repeat;}
.cur-song .tracks-val,.cur-song-stop .tracks-val{font-size:0;}
.list-bd{height:162px;overflow-y:auto;}
.list-bd li{background:#fff;}
.list-bd .bg-song{background:#efefef;}
.list-bd .hoverLi{color:#fff;background:#99c;}

/***歌词***/
.lrc{position: absolute;left:0;bottom:130px;width:100%;text-align:center;z-index:10;}
.lrc-box{width:110%;height:230px;overflow-y:auto;color:#aaa;font-size:14px;line-height:26px;}
.lrc-box .lrc-list{margin-right:5%;}
.lrc-box .lrc-list .curLrc{color:#fff;font-weight:bold;font-size:16px;}

/***播放模式***/
.play-mode{position: absolute;left:10px;top:10px;text-align:center;}
.play-mode .mode-item{position:relative;display:none;width:25px;height:25px;margin-right:15px;color:#fff;font-weight:bold;cursor:pointer;}
.play-mode .mode-icon{position:absolute;}
.play-mode .mode-single01,.play-mode .mode-list01{left:0;top:0;}
.play-mode .mode-single01,.play-mode .mode-list02{left:0;top:10px;}
.play-mode .mode-single02{left:0;top:-1px;}
.play-mode .mode-single03{left:3px;top:7px;height:11px;overflow:hidden;}
.play-mode .mode-random01{left:-1px;top:6px;z-index:100;}
.play-mode .mode-random02{left:2px;top:1px;width:15px;overflow:hidden;}
.play-mode .mode-random03{left:2px;top:9px;width:15px;overflow:hidden;}

.play-mode.play-mode-list .mode-list{display:inline-block;}
.play-mode.play-mode-random .mode-random{display:inline-block;}
.play-mode.play-mode-single .mode-single{display:inline-block;}

/***进度条***/
.player-progress{position:absolute;left:0;bottom:80px;width:100%;z-index:1000;}
.player-progress .progress-bar{position:relative;height:4px;margin:15px 45px;background:#aaa;}
.player-progress .progress-val{position:absolute;height:4px;width:0;left:0;top:0;background:#fff;overflow:hidden;}
.player-progress .progress-icon{position:absolute;top:50%;left:0;z-index:10000;display:block;width:15px;height:15px;border-radius:50%;background:#fff;cursor:pointer;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.player-progress .progress-time{position:absolute;left:-38px;right:-38px;top:-8px;}
.player-progress .progress-time .cur-time{position:absolute;left:0;}
.player-progress .progress-time .total-time{position:absolute;right:0;}

/*歌曲信息*/
.player-bar{position:absolute;left:0;bottom:0;right:0;}
.song{margin-left:6px;padding-left:65px;}
.song-pic{position:relative;float:left;margin-left:-65px;}
.song-pic img{width:55px;height:55px;border:1px solid #ccc;border-radius:50%;-webkit-transition:1s all;}
.song-pic .circle{position:absolute;width:12px;height:12px;border:3px solid #fff;border-radius:50%;left:50%;top:50%;opacity:.8;background:#666;-webkit-transform:translate(-50% , -50%);transform:translate(-50% , -50%);}
.song-des{margin-right:135px;font-size:12px;line-height:16px;}
.song-name{padding-bottom:6px;font-size:14px;font-weight:normal;}
.song .song-name,.song .song-songer,.song .song-album{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.song-des span{color:#fff;}

/***播放操作按钮***/
.play-bar{position: absolute;right:10px;top:50%;height:35px;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.play-bar .prev,.play-bar .status,.play-bar .next{position:relative;display:inline-block;width:28px;height:28px;margin-left:8px;cursor:pointer;overflow:hidden;}
.play-bar .status{top:2px;width:32px;height:35px;}
.action-icon{position:absolute;width:0;height:0;top:0;font-size:0;line-height:0;}
.prev .prev-icon{left:3px;top:0;border:10px solid transparent;border-right:10px solid #fff;}
.next .next-icon{left:7px;top:0;border:10px solid transparent;border-left:10px solid #fff;}
.line{position:absolute;width:2px;height:20px;top:0;background:#fff;}
.prev .line{left:7px;top:0;}
.next .line{right:6px;top:0;}
.stop-icon{left:10px;top:0;border:15px solid transparent;border-left:15px solid #fff;}
.play-icon{left:8px;top:0;width:10px;height:30px;border-left:3px solid #fff;border-right:3px solid #fff;}
.status-stop .play-icon{display:none;}
.status-play .stop-icon{display:none;}

.mask{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.8);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.7)), color-stop(71%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.8)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 80%, rgba(0,0,0,0.8) 81%, rgba(0,0,0,0.8) 100%));
background: -moz-linear-gradient(top, rgba(0,0,0,0.8) , rgba(0,0,0,0.8));
}

::-webkit-scrollbar{width:.5em;height:.5em;}
::-webkit-scrollbar-track {background:rgba(217,217,217,0.5)}
::-webkit-scrollbar-thumb {background:#ccc;border-radius:10px;}