@charset 'utf-8';
/*===========================  重置初始样式 start  ===========================*/
*{-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
html,div,body,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0;font-size:100%;line-height:100%;vertical-align:baseline;background:transparent;}
ol,ul,li,ul li{list-style:none;}
:focus {outline:0;}
ins {text-decoration:none;}
table {border-collapse:collapse;border-spacing:0;}
html,body{height:100%;}article,aside,dialog,details,footer,figure,header,hgroup,menu,media,nav,section{display:block;padding:0;margin:0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,iframe,fieldset,input,textarea,p,blockquote,th,td,button{padding:0;margin:0;}
fieldset,img,button{border:0;}
body,input,select,textarea,button{font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", 黑体, "Helvetica Neue", Arial, sans-serif;color:#fff;font-size:16px;}
table{border-collapse:collapse;border-spacing:0;}
a,a:hover{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
textarea {-webkit-appearance: none;}
em,i{font-style: normal;}
/* ======== placeholder ========= */
input[placeholder], [placeholder], *[placeholder] {color:#acacac !important;}
input::-webkit-input-placeholder {color:#acacac;}
input:-moz-placeholder {color:#acacac;}
input::-moz-placeholder {color:#acacac;}
input:-ms-input-placeholder {color:#acacac;}
.fl{float: left;}
.fr{float: right;}
/*==== 加载动画 =====*/
.loading{
	position: fixed;
	z-index:99;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	background-color: #000;
}
.sk-fading-circle {
  width: 40px;
  height: 40px;
  position: absolute;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
}
.sk-fading-circle .sk-circle {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0; }
.sk-fading-circle .sk-circle:before {
content: '';
display: block;
margin: 0 auto;
width: 4px;
height: 12px;
background-color: #fff;
border-radius: 4px;
-webkit-animation: sk-circleFadeDelay 0.8s infinite ease-in-out both;
animation: sk-circleFadeDelay 0.8s infinite ease-in-out both; 
}
.sk-fading-circle .sk-circle2 {
-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg); 
}
.sk-fading-circle .sk-circle3 {
-webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
        transform: rotate(90deg); 
}
.sk-fading-circle .sk-circle4 {
-webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
        transform: rotate(135deg); 
}
.sk-fading-circle .sk-circle5 {
-webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
        transform: rotate(180deg);
}
.sk-fading-circle .sk-circle6 {
-webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
        transform: rotate(225deg); 
}
.sk-fading-circle .sk-circle7 {
-webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
        transform: rotate(270deg); 
}
.sk-fading-circle .sk-circle8 {
-webkit-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
        transform: rotate(315deg); 
}
.sk-fading-circle .sk-circle2:before {
-webkit-animation-delay: -0.7s;
        animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle3:before {
-webkit-animation-delay: -0.6s;
        animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle4:before {
-webkit-animation-delay: -0.5s;
        animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle5:before {
-webkit-animation-delay: -0.4s;
        animation-delay: -0.4s; 
}
.sk-fading-circle .sk-circle6:before {
-webkit-animation-delay: -0.3s;
        animation-delay: -0.3s; 
}
.sk-fading-circle .sk-circle7:before {
-webkit-animation-delay: -0.2s;
        animation-delay: -0.2s; 
}
.sk-fading-circle .sk-circle8:before {
-webkit-animation-delay: -0.1s;
        animation-delay: -0.1s; 
}
@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% {opacity: 0; }
  40% {opacity: 1; } 
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% {opacity: 0; }
  40% {opacity: 1; } 
}
/*======= 竖屏时样式适应 =======*/
html,body{
  	width: 100%;
  	height: 100%;
  	overflow:hidden;
  	position: relative;
  	z-index: 0;
}
.wrapper-bg{
	position: absolute;
	z-index:0;
	left:50%;
	top:0;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: auto;
	height: 100%;
	display: block;
	margin:0 auto;
  filter: url(blur.svg#blur);
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -ms-filter: blur(15px);    
  filter: blur(15px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
}
.container{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow:hidden;
  background:rgba(0,0,0,0.5);
}
.title{
	position: relative;
	height:20%;
  width: 100%;
  min-height: 36px;
  text-align: center;
  background: rgba(0,0,0,0.2);
}
.title .audio-img{
	position: absolute;
	top:50%;
	left:4%;
	width: auto;
	height:1.9rem;
	margin-top:-0.95rem;
}
.title .audio-name{
	position: absolute;
    left: 33.33%;
    top: 33.6%;
    font-size: 0.34rem;
    width: calc(55% - 1rem);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-bottom: 0.06rem;
}
.title .audio-user{
	position: absolute;
	left: 33.33%;
	top:55.2%;
	font-size: 0.28rem;
	width: calc(55% - 1rem);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-bottom: 0.06rem;
}
.title .play-btn{
	position: absolute;
	top:50%;
	right:10%;
	height: 1rem;
	width: 1rem;
	margin-top: -0.5rem;
	background: url('../images/play.png') no-repeat center right;
	background-size: auto 100%;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}
.title .play-btn.active{
	background: url('../images/pause.png') no-repeat center right;
	background-size: auto 100%;
}
#audio{
	width: 0;
	height: 0;
	visibility: hidden;
}
/*============================ 详情页面 =====================*/
.audio-content{
	width: 100%;
	height: 60%;
	padding: 0.9rem 1.25rem;
	text-align: center;
	overflow-y:scroll;
}
.audio-content p{
	font-size: 0.3rem;
	margin-bottom: 0.3rem;
}
.audio-content .audio-msg,
.audio-content .audio-notfound{
	opacity: 0.7;
}
.audio-content .audio-notfound{
	position: absolute;
	left:50%;
	top:50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.audio-content .audio-detail,
.audio-content .audio-noDetail{
	opacity: 0.7;
	line-height: 2;
	margin-top: 0.6rem;
}

.download-audio{
	width: 100%;
	height: 13%;
	position: relative;
}
.download-audio a{
	position: absolute;
	left:13.3%;
	bottom: 25%;
	height: 0.9rem;
	border-radius: 0.45rem;
	width: 73.4%;
	background:  #99FFFF;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}
.download-audio img{
	position: absolute;
	top:0.26rem;
	left:28.45%;
	height: 0.38rem;
	width: 0.38rem;
}
.download-audio span{
	position: absolute;
	top:0.26rem;
	left: 39%;
	font-size: 0.38rem;
	height: 0.38rem;
	line-height: 1;
	color: #333;
}

.progress-box{
	position: relative;
  	height: 7%;
  	width: 100%;
}
.progress-bar{
	position: absolute;
  	z-index: 4;
  	bottom: 20px;
	width: 100%;
	height: 2px;
	padding: 0 1.2rem;
}
.progress-second{
	position: absolute;
	left: 0;
  	top:0;
  	width: 1.2rem;
	color:#7F7F7F;
	font-size: 0.24rem;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.progress-back{
	width: 100%;
	height: 100%;
	border-radius:2px;
	background: rgba(255,255,255,0.2);
}
.progress-inner{
	position: absolute;
	top:0;
	left:1.2rem;
	width: 0;
	height: 100%;
	border-radius:5px;
	background:#99FFFF;
}
.progress-btn{
	position: absolute;
	top:-7px;
	left: 1.2rem;
	width: 16px;
	margin-left: -8px;
	height: 16px;
	border-radius: 10px;
	background:#99FFFF;
}
.progress-all{
	position: absolute;
	right:0;
	top:0;
	width: 1.2rem;
	color:#7F7F7F;
	font-size: 0.24rem;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.message{
	display: none;
	padding: 0.3rem 0.5rem;
    max-width: 7rem;
    background: rgba(0,0,0,0.8);
    border-radius: 0.2rem;
    position: fixed;
    z-index: 99;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-size: 14px;
    text-align: center;
    line-height: 1.2;
}
/*======== 横屏样式适应 =======*/
@media all and (orientation : landscape) { 
	.wrapper-bg{
		width: 100%;
		height: auto;
	}
	.title .play-btn,.title .audio-img{
		height: 40px;
    	width: 40px;
    	margin-top: -20px;
	}
	.title .audio-name{
		top:30.6%;
		left:calc(4% + 60px);
		font-size: 16px;
	}
	.title .audio-user{
		left:calc(4% + 60px);
		font-size:14px;
	}
	.audio-content{
	 	height: 50%;
	 	padding:20px 60px;
	 	
	}
	.audio-content p{
		font-size:14px;
		margin-bottom: 10px;
	}
	.audio-content .audio-detail, .audio-content .audio-noDetail{
		margin-top: 20px;
	}
	.progress-box{
		height: 14%;
	}
	.download-audio{
		height: 16%;
	}
	.download-audio a{
		height:85%;
		bottom: 10%;
	}
	.download-audio img {
	    top: 20%;
	    left: 35.45%;
	    height: 60%;
	    width: auto;
	}
	.download-audio span {
		left:55%;
	    top:50%;
	    font-size: 18px;
	    height: auto;
	    width: auto;
	    line-height: 1;
	    -webkit-transform:translate(-50%,-50%);
	    -moz-transform:translate(-50%,-50%);
	    -ms-transform:translate(-50%,-50%);
	    -o-transform:translate(-50%,-50%);
	    transform:translate(-50%,-50%);
	}
	.progress-second,.progress-all{
		font-size: 14px;
	}
} 

/*======== 屏幕过大时样式适应 =======*/
@media screen and (min-width: 750px){
	.progress-box{
		height: 50px;
	}
	.download-audio a{
		bottom: 0;
	}
	.title .audio-img{
		height: 1.6rem;
    	margin-top: -0.8rem;
	}
} 

/*======== 屏幕过大时样式适应 =======*/
@media screen and (min-width: 1000px){
	.progress-box{
		height: 50px;
	}
	.download-audio a{
		bottom: 0;
	}
	.title .audio-img{
		height: 80%;
    	width: auto;
    	margin-top: 0;
    	top: 10%;
	}
	.title .audio-name {
	    left: 29%;
	    font-size: 20px;
	}
	.title .audio-user {
	    left: 29%;
	    font-size: 18px;
	}
	.title .play-btn{
		height: 80px;
    	width: 80px;
    	margin-top: -40px;
	}
	.audio-content {
	    height: 50%;
	    padding: 60px 120px;
	}
	.audio-content p{
		font-size: 24px;
		margin-bottom: 20px;
	}
	.audio-content .audio-detail, .audio-content .audio-noDetail{
		margin-top: 40px;
	}
	.download-audio span{
		font-size: 32px;
		left:52%;
		top:50%;
		height: auto;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.progress-second,.progress-all{
		font-size: 24px;
	}
}