@charset "utf-8";
/* css reset */
#line{width:100%; margin:0 auto; background:transparent none repeat scroll 0 0 !important;}
 
.playlist .noborder{border:none;}
/*.playlist li span{ line-height:20px;}*/
.playlist li.first { border-top: 0 none;}


/*music controls*/
.transport-controls{height:25px;width:25px; float:left;margin-top:7px;}
.ranking-list .transport-controls{margin:15px;}
.transport-controls a{outline:none;}

/*text info*/
.infoLeft{float:left;  }
.infoLeft h4 a{display:block;font-size:12px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;font-weight:bold;}
.infoLeft h4 a:link {color: #252525; text-decoration:none; outline:none;}
.infoLeft h4 a:visited {color:#ff030d; text-decoration:none; outline:none;}
.infoLeft h4 a:hover {color:#ff030d; text-decoration:none; outline:none;}
.infoLeft h4 a:active {color:#ff030d; text-decoration:none; outline:none;}
.infoLeft p{ color:#666666}
.infoLeft b{color: #A5D92F; padding:0 3px;}
.infoRight{    color: #737373;
    font-size: 12px;
    /* color: #fff; */
    font-family: 'Raleway', sans-serif;
    margin-top: 9px;
    font-size: 12px;
    letter-spacing: 0.8px;
    line-height: 0px;} 
.star_grade, .star_grade em { display: inline-block;overflow: hidden;font-size: 0; line-height: 0; }
.star_grade { text-align: left;margin-top: 9px; }
.star_grade em{background: url(../images/gray.png) 0 0 no-repeat;height: 23px;width:18px;margin-left:6px; }
.star_grade .active {background: url(../images/blue.png) 0 0 no-repeat; }
 
.play_actions a{display:inline-block;*display:inline;*zoom:1;min-width:32px;text-align: center;}
.node{ display:none}

 



#sb2{      width: 56px;
    height: 47px;
    float: left;
    cursor: pointer;
    background: url(../images/icon-playsb.png) no-repeat;
    background-position: 9px -68px;}
#sb2:hover{      width: 56px;
      width: 56px;
    height: 47px;
    float: left;
    cursor: pointer;
    background: url(../images/icon-playsb2.png) no-repeat;
    background-position: 7px -68px;}	
	
 
#sb1{       width: 56px;
    height: 47px;
    float: left;
    cursor: pointer;
    background: url(../images/icon-playsb3.png) no-repeat;
    background-position: 7px -68px;}
 
#sb20{    width: 56px;
    height: 22px;
    float: left;
    cursor: pointer;
    background: url(../images/icon-playsb0.png) no-repeat;
    background-position: 9px -98px;}
 
#sb10{     width: 56px;
    height: 22px;
    float: left;
    cursor: pointer;
    background: url(../images/icon-playsb0.png) no-repeat;
    background-position: 10px -179px;}
 





.jp-seek-bars {width:100%;height:100%;overflow:hidden;cursor:pointer;}
.jp-play-bowen{width:100%;height:100%;}
.jp-play-bars {background:url(../images/progress-overlay.png);width:0px;height: 100%;overflow:hidden;border-right:1px solid #A8DF2E; margin-left:-1px;}

.bp-next{z-index: 1;position:absolute;height:24px;width:24px;left: 49px;top: 7px;background:url(../images/play_pause_skip.png) -36px -108px;}
.bp-next:hover{background:url(../images/play_pause_skip.png) -36px -144px;}
.bp-prev{z-index: 1;top: 7px;left: 0px;position:absolute;height:24px;width:24px;background:url("../images/play_pause_skip.png") 0 -108px no-repeat;display:block;}
.jp-controls li span{margin-top:5px;float:left;}
 
/****播放器****/
#MusicBox{     width: 103%;
    /* margin: 0 auto; */
    /* padding: 10px 0 0 0; */
    /* position: relative; */
    /* color: #FFFFFF; */
    /* border-top: #FFFFFF 0px solid; */
    /* display: none; */
    /* top: 707px; */
    /* background: #000; */
    /* width: 115%; */
    /* padding: 0px 230px; */

    /* top: auto; */
       bottom: -56px;
    /* box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5); */
    /* left: -22px; */
    z-index: 300;
    /* height: 222px; */
   
    padding-right: 0px;
    left: 0px;
    max-width: 114%;
    margin: 0 auto;
    display: none;
   }

 /*.down    {     text-transform: uppercase;  background-color: #20bf00;}
	
.down:hover    {  background-color: #20bf00b8;}	*/
	
	

.jp-infos{ width:calc(100% - 35px); overflow:hidden; float:left;margin-right:0px;}
.jp-infos a{  ;}
.jp-infos a:hover{color:#888;text-decoration: none;}

 	
.icon-shopping-cart	{     margin: -9px -5px -9px -9px;
      padding: 6px 23px 5px 22px;
    background-color: #333333;
    color: #656565;
    font-size: 14px;
    margin-top: 32px;}
.icon-shopping-cart:hover{     margin: -9px -5px -9px -9px;
      padding: 6px 23px 5px 22px;
    background-color: #4E4E4E;
    color: #A29F9F;
    font-size: 14px;
    margin-top: 32px;}		
	

.jp-progress{    overflow:hidden;width:100%; height:65px; margin-top:-7px; float:left;background:url("../images/bowen.png") no-repeat;}
.jp-seek-bars { width:100%;height:100%;overflow:hidden;cursor:pointer;}
.jp-play-bar {background:url(../images/progress-overlay.png);
	/*opacity:0.3;
	filter:alpha(opacity=30);
*/
border-right:1px solid #A8DF2E;width:0px;height: 100%;overflow:hidden;margin-left:-1px;}

.jp-play-bar .jp-current-time,.jp-play-bar .jp-duration{ float:left; width:30px;  font-size:12px; color:#FFFFFF; float:right; background-color:#000000; padding:0 5px}
.jp-play-bar .player_txt { position: absolute; width:600px;;opacity:0.7;filter:alpha(opacity=70)}

.bp-next{z-index: 1;position:absolute;height:24px;width:24px;left: 49px;top: 7px;background:url(../images/play_pause_skip.png) -36px -108px;}
.bp-next:hover{background:url(../images/play_pause_skip.png) -36px -144px;}

.jp-controls li span{margin-top:5px;float:left;}

 
#MusicBox .metadata,#MusicBox .musicdata{    line-height: 17px;
    font-size: 12px;
    height: 21px;
    overflow: hidden;
    width: calc(100% - 50px);
    color: #D6D6D6;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
#MusicBox .metadata a{color:#007CFF}

.jp-play-bars {
    background: url("../images/progress-overlay.png") repeat scroll 0 0 transparent;
    border-right: 0px solid #fff;
    height: 100%;
    margin-left: -1px;
    overflow: hidden;
    width: 0;
    background: rgb(2, 75, 255);
}

.bp-pause,.bp-play{background:url(../images/icon-play.png) no-repeat;    width: 33px;
    height: 29px;}
.bp-play{       background-position: -1px -95px;}
 
.bp-pause{       background-position: -2px -175px;}
 

 
.infoMusicBox .transport-controls{margin:12px 10px 0 18px;}
.infoMusicBox .jp-progress{width:100%;margin-bottom:5px;}
.infoMusicBox .player_txt{height: 40px;overflow:hidden;zoom:1;margin:0;width:620px;position: absolute;color:#fff;}
.infoMusicBox .player_txt div{float:right;background:#000;padding:0 4px;opacity: 0.8;}

.musicdata a{ color:#888}
/*
.bp-pause,.bp-play,.jp-next,.jp-previous{ float:left;width:24px;height:24px;display:block;background:url(../images/play_pause_skip.png) no-repeat;}
.bp-pause,.bp-play{ width:36px;height:36px;background-position:-36px -36px;}
.bp-play{ position:relative;z-index:999; background-position:-36px -36px;}
.bp-pause{ position:relative;z-index:999;}
.bp-pause:hover{ background-position:0 0;}
.jp-next{ background-position: -36px -108px; margin-left: -3px;}
.jp-next:hover{ background-position:-36px -144px;}
.jp-previous{ background-position: 0 -108px; margin-right: -3px;}
.jp-previous:hover{ background-position:0 -144px;}
.jp-previous,.jp-next{ margin-top:5px;}*/

@media (max-width: 480px) {
    #MusicBox{ width: 100%;      z-index: 0;   }
}
@media (max-width: 640px) {
    .player_txt{ margin-left: 15px; height: auto;}
    .infoLeft{ width: 100%;}
    .infoRight{display: none;}

}
@media (max-width: 452px) {
    #MusicBox .metadata,#MusicBox .musicdata{width: 100%;}
    #MusicBox .imgBox{}
}






ul.playlist li .transport-controls{
   border-radius: 50%;
    position: absolute;
    left: -1px;
    background: linear-gradient(-180deg, rgba(252, 246, 255, 0) 0%, rgba(0, 0, 0, 0) 100%);
    top: 32px;
    z-index: 30;
}

ul.playlist li .metadata .player_txt{
	width:100%;
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:space-between;
	justify-content:space-between;
}
ul.playlist li{
	position:relative;
}
ul.playlist{

}