@charset "utf-8";
	/* CSS Document */

html { overflow-x: hidden; overflow-y: auto; } /*隐藏横向工东条*/

.le{float:left;}
.ri{float:right;}
* {
	margin:0;
	padding:0
}
html,body {
	width:100%;
	height:100%;
	overflow:hidden
}
body {
	font:12px/1.5 "hiragino sans gb","Helvetica Neue",Helvetica,STHeiTi;
	-webkit-tap-highlight-color:rgba(0,0,0,0)
}
a {
	text-decoration:none
}
li {
	list-style:none
}
a,img {
	-webkit-touch-callout:none
}
.wrap {
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden
}
.zuobian {
	z-index: 1;
	-webkit-transition-property: -webkit-transform; 
	-webkit-transition-duration: 0.3s; 
	-webkit-transition-timing-function: ease-out; 
	-webkit-transition-delay: initial; 
	-webkit-transform: translate3d(0, 0px, 0px);
}
.youbian {
	-webkit-transition-property: -webkit-transform; 
	-webkit-transition-duration: 0.3s;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-delay: initial;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.box {
	position:absolute;
	top:0;
	bottom:0px;
	z-index:5;
	width:100%;
	overflow: hidden;
}
.flex_box {
	display:-webkit-box;
	-webkit-box-orient:vertical;
	display:-ms-flexbox;
	-ms-flex-direction:column;
	width:100%;
	height:100%;
	/*overflow:hidden*/
}
.flex_item {
	-webkit-box-flex:1;
	-ms-flex:1;
	position:relative
}
.user_info {
	position:absolute;
	top:10px;
	left:0;
	z-index:6;
	height:32px;
	line-height:32px;
	-webkit-border-radius:0 300px 300px 0;
	border-radius:0 300px 300px 0;
	background:rgba(0,0,0,.25)
}
.user_info .txt {
	float:left;
	margin:0 5px;
	font-size:12px;
	color:#fff;
	-webkit-transition-property: -webkit-transform; 
	-webkit-transition-duration: 0.3s; 
	-webkit-transition-timing-function: ease-out;
	 -webkit-transition-delay: initial; 
	-webkit-transform: translate3d(0px, -24px, 0px); 
}
.user_info .avatar {
	float:left;
	width:25px;
	height:25px;
	margin:4px 4px 0 0;
	-webkit-border-radius:300px;
	border-radius:300px
}
.user_info .avatar img {
	display:block;
	width:100%;
	height:100%;
	-webkit-border-radius:300px;
	border-radius:300px
}
.song_info {
	display:-webkit-box;
	-webkit-box-align:center;
	display:-ms-flexbox;
	-ms-flex-align:center;
	position:absolute;
	top:0;
	bottom:0;
	width:100%
}
.song_info .cont {
	width:100%
}
.song_info .song,.song_info .singer {
	width:60%;
	margin:0 auto;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	text-align:center;
	color: #666;
}
.song_info .song {
	font-size: 15px;
	font-weight: bold;
	color: #222;
	line-height: 2;
}
.song_info .singer {
	margin-top:4px;
	font-size:15px
}
.song_info .singer .arrow {
	display:inline-block;
	position:relative;
	top:1px;
	width:8px;
	height:13px;
	margin-left:5px;
	background:url(../images/sprite_page_play.png) no-repeat;
	background-size:50px 200px;
	background-position:0 -160px
}
.album_cover .cover_container {
	position:relative;
	max-width:50%;
	margin:0 auto;
	padding-bottom:23px
}
.album_cover img {
	display:block;
	width:100%;
	background:#fff;
	border-radius: 50%;
}
.song-to{-webkit-animation: rotating 20s linear infinite;animation: rotating 20s linear infinite;}
@-webkit-keyframes rotating {
	from{
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
    	transform: rotate(0deg);
	}
	to{
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.kognzhianniu .btn_play,.kognzhianniu .btn_pause {
	position:absolute;
	bottom:0;
	left:50%;
	z-index:10;
	width:46px;
	height:46px;
	overflow:hidden;
	margin-left:-23px
}
.kognzhianniu .btn_play span,.kognzhianniu .btn_pause span {
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	width:46px;
	height:46px;
	line-height:999em;
	background:url(../images/sprite_page_play.png) no-repeat;
	background-size:50px 200px
}
.kognzhianniu .btn_pause span {
	background-position:0 -50px
}
.kognzhianniu .btn_play i,.kognzhianniu .btn_pause i {
	position:absolute;
	top:2px;
	left:2px;
	z-index:1;
	width:42px;
	height:42px;
	-webkit-border-radius:300px;
	border-radius:300px;
	background:rgba(0,0,0,.8)
}
.kognzhianniu .btn_play:active span,.kognzhianniu .btn_pause:active span {
	opacity:.5
}
.kognzhianniu .btn_play:active i,.kognzhianniu .btn_pause:active i {
	background:rgba(0,0,0,.9)
}
.lyric {
	display:-webkit-box;
	-webkit-box-align:center;
	display:-ms-flexbox;
	-ms-flex-align:center;
	position:absolute;
	top:0;
	
	width:100%
}
.lyric .cont {
	width:100%;
	height:92px;
	overflow:hidden
}
.lyric .cont.three_row {
	height:72px
}
.lyric .cont .txt {
	padding:0 50px
}
.lyric .cont p {
	width:100%;
	height:24px;
	line-height:24px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:13px;
	/* color:rgba(255,255,255,.8); */
	color: #444;
	text-align:center
}
.lyric .cont .current {
	color: #F47378;
}
.lyric .cont p.loading {
	line-height:100%
}
.download,.love {
	position:absolute;
	right:12px;
	bottom:15px;
	z-index:6;
	width:34px;
	height:34px
}
.download {
	left:12px
}
.icon_download,.icon_love,.icon_loved {
	display:block;
	width:33px;
	height:33px;
	border:solid 1px rgba(255,255,255,.2);
	-webkit-border-radius:300px;
	border-radius:300px;
	overflow:hidden
}
.icon_download i,.icon_love i,.icon_loved i {
	display:block;
	width:17px;
	height:14px;
	line-height:999px;
	overflow:hidden;
	margin:10px auto 0;
	background:url(../images/sprite_page_play.png) no-repeat;
	background-size:50px 200px
}
.icon_download i {
	width:17px;
	height:18px;
	margin-top:5px;
	background-position:0 -140px
}
.icon_love i {
	background-position:0 -100px
}
.icon_loved i {
	background-position:0 -120px
}
.icon_download:active i,.icon_love:active i,.icon_loved:active i {
	opacity:.5
}
.play_bar {
	position:absolute;
	bottom:80px;
	z-index:5;
	width:100%;
	height:40px
}
.play_bar .progress {
	position:absolute;
	left:50px;
	right:50px;
	z-index:2;
	height:40px;
	overflow:hidden
}
.play_bar .bar {
	position:absolute;
	top:20px;
	left:0;
	z-index:3;
	width:100%;
	height:2px;
	background-color:#252525
}
.play_bar .has_load {
	position:absolute;
	top:20px;
	left:-100%;
	z-index:4;
	width:100%;
	height:2px;
	background-color:#303B35
}
.play_bar .has_play {
	position:absolute;
	top:20px;
	left:-100%;
	z-index:5;
	width:100%;
	height:2px;
	background-color: #F47378;
}
.play_bar .has_play span {
	position:absolute;
	top:-20px;
	right:-21px;
	width:40px;
	height:40px
}
.play_bar .has_play span i {
	display:block;
	width:2px;
	height:8px;
	margin:17px auto 0;
	background: #F47378;
}
.play_bar .play_time {
	position:absolute;
	top:10px;
	left:5px;
	right:5px;
	z-index:1
}
.play_bar .play_time time {
	position:absolute;
	top:3px;
	font-size:12px;
	font-family:arial;
	color:#878787
}
.play_bar .play_time time:nth-child(1) {
	left:5px
}
.play_bar .play_time time:nth-child(2) {
	right:5px
}
.btns {
	position:absolute;
	left:0;
	bottom:0;
	z-index:4;
	width:100%;
	height:22px;
	overflow:hidden;
	text-align:center
}
.btn_music:active {
	background-color:#0a9244
}
.btn_music:before {
	content:"";
	position:absolute;
	top:5px;
	left:7px;
	width:27px;
	height:29px;
	background-size:cover
}
.btn_music .dot {
	display:inline-block;
	width:16px;
	overflow:hidden;
	white-space:nowrap;
	text-align:left;
	vertical-align:middle
}
.btns.disabled:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	width:100%;
	height:100%
}
.gradient_mask {
	position:absolute;
	bottom:0;
	left:0;
	z-index:3;
	width:100%;
	height:250px;
	background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),#000);
	background-image:-ms-linear-gradient(top,rgba(0,0,0,0),#000)
}
.bg {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	z-index:1;
	width:100%;
	background-size:cover;
	background-position:center;
	-webkit-filter:blur(6px);
	-webkit-transform:scale(1.05)
}
.bg_mask {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	z-index:2;
	width:100%;
	background-color:#000
}
.tips {
	position:absolute;
	top:0;
	left:0;
	z-index:11;
	width:100%;
	-webkit-transform:translateY(-100%);
	-webkit-transition:all 250ms
}
.tips.on {
	-webkit-transform:translateY(0)
}
.tips p {
	height:30px;
	line-height:30px;
	margin:0 10px;
	text-align:center;
	font-size:14px;
	color:#fff;
	-webkit-border-radius:0 0 3px 3px;
	background:rgba(0,0,0,.7)
}
.tips.success p:before {
	content:"";
	display:inline-block;
	width:11px;
	height:8.5px;
	margin-right:5px;
	vertical-align:middle;
	background-image:url(data:image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAARCAYAAADZsVyDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACzSURBVDhPrdRhDYQwDAVgLGDhLGABC2fhPGEBC1jAAhbOwq6P7JFlWXtd1iVN+PXRvRamlNIUWDOtSHQTFOeSmqNgotlOawRcoyfiGIVb6J3zCKyiI7CJEkbrH6nFuXZ/UcJHHuU3v8CKx4USxhTL81Y6d6OEX/KAbi28Cy2Hh3w1vButt6KFM3/eBrE9/wNr2PWgWng3qu1xC3d3yltoq1XiyN51/TIaa2eB71LYmu5P/wd5jrW2jCv+WwAAAABJRU5ErkJggg==);
	background-size:cover
}

.music-header {
	overflow: auto;
	padding: 20px;
}
.music-header .music-img {
	float: left;width: 30%;
}
.music-header .music-img img {
	max-width: 100%;
	border-radius: 5px;
}
.music-header .music-des {
	float: left;width: 70%;
}
.music-header .music-des .title {
	margin-left: 10px;
	font-size: 16px;
	font-weight: 600;
}

.music-header .music-des .remark {
	margin-left: 10px;
	line-height: 1.5;
	color: #404040;
	font-size: 12px;
}

/* 播放页面，点击返回 */
.fanhui {
	position: absolute;
    z-index: 999;
    left: 20px;
    top: 15px;
	color: #666;
}
.kangao {
	position: absolute;
    z-index: 999;
    right: 20px;
    top: 15px;
}
.content p {
	line-height: 2.5;
	text-indent: 20px;
}
.close-look {    
	font-size: 12px;
   	color: #A6A6A6;
}
.look-content {
	position: absolute;
	top: 0px;
	width: 100%;
	left: 0;
	background: #fff;
	height: 100%;
	z-index: 999;
	display: none;
	overflow: auto;
	opacity: 0.96;
    padding: 20px;
}
.look-content .content-body {
	padding: 20px;
}
/*左边的开始*/
.zuobian{position:absolute;top:0;}

.kongzhi{width:20px;position:fixed;bottom:0;z-index:1999;}
.kongzhi .diyige{width:20px;height:15px;}
.kongzhi a{width:5px;height:5px;display:blcok;border-radius:50%;background:#fff;overflow:hidden;text-indent:-999999999999px;opacity:.5}
.kongzhi .kongzhi_2{opacity:1;}

.btns{text-align:right;}
.btns a{color:#666;padding-right:15px;font-size:14px;}
.zuobian .liebiao{overflow:auto;}

.liebiao ul{}
.liebiao ul a{display:block;border-bottom:1px dotted #e5e5e5;padding:10px 0;}
.liebiao ul li{font-size:14px;color:#fff;padding:0 15px;padding-left: 20px;}
.liebiao ul li font{font-size: 14px;color: #555;font-weight: bold;margin-right: 3px;} 
.liebiao ul li b {font-size: 14px;color: #555;line-height: 2.5;}
.liebiao ul li .content {display: none;}
.liebiao ul .danqian li font, .liebiao ul .danqian li b{color: #F47378;}
.liebiao ul li span{font-size:12px;color:#999;}
.liebiao ul .danqian{background:url(../images/dance.gif) no-repeat 93% 50%;}


/*左右按钮*/
.kognzhianniu .btn_play,.kognzhianniu .btn_pause{position:absolute;bottom:30px; z-indec:9999999;}

.kognzhianniu .play_left{left:30%;width:40px;height:40px;margin-left:-20px;}
.kognzhianniu .play_right{left:70%;width:40px;height:40px;margin-left:-20px;}
.kognzhianniu .play_right i,.kognzhianniu .play_left i{width: 36px;height: 36px;}
.kognzhianniu .play_left span{background:url(../images/bg_page_play_d9d4a05.png) no-repeat;}
.kognzhianniu .play_right span{background:url(../images/bg_page_play_d9d4a05.png) no-repeat 0 -48px;}
.kognzhianniu .play_right span,.kognzhianniu .play_left span{width: 40px;height: 40px;background-size: 40px 86px;}