*{
	box-sizing: border-box;
}
html,body{
	padding: 0;
	margin: 0;
	font-size: 14px;
	width: 100vw;
}
body{
	background-image: url(../images/bg.jpg);
	background-size: cover;
	position: relative;
	border-top: 1px solid transparent;
	max-width: 100%;
	min-height: 100vh;
	overflow: hidden;
}
a{text-decoration:none;color:#666666;}
a:hover{text-decoration:none;color:#F00;}


@keyframes ripple {
	0% {
		box-shadow: 0 0 0 0vw rgba(255, 255, 255, 0.48),0 0 0 2.6vw rgba(255, 255, 255, 0.24);
	}

	100% {
		box-shadow: 0 0 0 2.6vw rgba(255, 255, 255, 0.24),0 0 0 5.2vw rgba(255, 255, 255, 0);
	}
}

@keyframes rotate {
	from {
		transform: rotate(360deg); 
	}
	to {
		transform: rotate(-360deg); 
	} 
}

.center-box{
	width: 80vw;
	max-width: 300px;
	margin: 10vw auto 0;
	position: relative;
}

.center-box .image-box{
	padding-top: 35px;
	opacity: 1;
	transition: .3s;
}

.center-box .image-box .img-box{
	width: 100%;
	height: 80vw;
	max-height: 300px;
	padding: 5vw;
	border-radius: 50%;
	border: 3px solid #999;
}

.center-box .image-box .img-box .img-bg{
	width: 100%;
	height: 100%;
	background-size: cover;
	border-radius: 50%;
	position: relative;
}

.center-box .image-box .img-box .img-bg:after{
	position: absolute;
	content:'';
	top: -3vw;
	left: -3vw;
	width: calc(100% + 6vw); 
	height: calc(100% + 6vw); 
	background-image: url(../images/cirleBg.png);
	background-size: cover;
	border-radius: 50%;
}

.center-box .image-box .img-box .img-bg:before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 7.7vw;
	height: 7.7vw;
	background: #FFF;
	border-radius: 50%;
	animation: ripple 1.2s linear infinite;
}

.center-box .image-box .img-box .rotate{
	animation: rotate linear 30s infinite;
}
.center-box .image-box .img-box .pause-music{
	animation-play-state:paused;
	-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

.center-box .image-box .title{
	font-size: 18px;
	color: #666;
	text-align: center;
	margin: 1rem auto;
}
.center-box .image-box .info{
	font-size: 12px;
	color: #999;
	text-align: center;
	margin: 1rem auto;
}
.center-box .image-box .more{
	font-size: 12px;
	color: #939bae;
	text-align: center;
	margin: 1rem auto;
}
.center-box .content-box{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: none;
}
.center-box .content-box:after{
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3rem;
	background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
    background: -o-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
    background: -ms-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%);
	background: linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%);
}
.center-box .content-box:before{
	position: absolute;
	content: '';
	top: 5.5rem;
	left: 0;
	width: 100%;
	height: 2rem;
	background: -webkit-linear-gradient(bottom,rgba(255,255,255,0) 0,#fff 100%);
    background: -o-linear-gradient(bottom,rgba(255,255,255,0) 0,#fff 100%);
    background: -ms-linear-gradient(bottom,rgba(255,255,255,0) 0,#fff 100%);
	background: linear-gradient(to top,rgba(255,255,255,0) 0,#fff 100%);
	z-index: 2;
}

.center-box .content-box .title{
	font-size: 18px;
	color: #666;
	text-align: center;
	margin: 1rem auto;
}
.center-box .content-box .info{
	font-size: 14px;
	color: #999;
	text-align: center;
	margin: 1rem auto;
}
.center-box .content-box .intro{
	font-size: 14px;
	color: #999;
	text-align: center;
	overflow: scroll;
	position: absolute;
	height: calc(100% - 6rem);
	left: 0;
	bottom: 0;
}
.audio{
	height: 20px;
	width: 100px;
}

.progress-box{
	margin:4vh 2vw;
	text-align: center;
}

.progress-box .start-time{
	display: inline-block;
	color: #777777;
	width: 3rem;
	text-align: center;
	vertical-align: top;
    margin-top: 5px;
}
.progress-box .progress-img{
	display: inline-block;
	width: calc(100% - 7rem);
	max-width: 300px;
	margin: 0;
	font-size: 0;
	position: relative;
}
.progress-box .progress-img .progress1{
	width: 100%;
	display: inline-block;
	height: 0;
	padding-bottom: 11.1111%;
	background-image: url(../images/progress.png);
	background-size: cover;
	position: relative;
}
.progress-box .progress-img .progress2{
	position: absolute;
	width: 0%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/progressNow.png);
	background-size: cover;
}
.progress-box .end-time{
	display: inline-block;
	color: #777777;
	width: 3rem;
	text-align: center;
    vertical-align: top;
    margin-top: 5px;
}

.btn-box{
	display: flex;
	padding: 0;
	margin:5vh 2vw;
}

.btn-box .list-btn{
	flex: 1;
	list-style: none;
	text-align: center;
}

.btn-box .list-btn .btn{
	display: inline-block;
	width: 24px;
	height: 27px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-box .list-btn:nth-child(1) .btn{
	background-image: url(../images/btnDownload.png);
}
.btn-box .list-btn:nth-child(2) .btn{
	background-image: url(../images/btnPrev.png);
}
.btn-box .list-btn:nth-child(3) .btn{
	background-image: url(../images/btnPlay.png);
}
.btn-box .list-btn:nth-child(4) .btn{
	background-image: url(../images/btnNext.png);
}
.btn-box .list-btn:nth-child(5) .btn{
	background-image: url(../images/btnSound.png);
}
.btn-box .list-btn .btn-mute{
	background-image: url(../images/btnMute.png) !important;
}
.btn-box .list-btn .btn-pause{
	background-image: url(../images/btnPause.png) !important;
}

.menu-box{
	position: absolute;
	height: 100vh;
	width: 50%;
	top: 0;
	right: 0;
	background: rgba(255,255,255,.9);
	z-index: 3;
	text-align: center;
	padding:5vh 0;
	transform: translateX(100%);
	transition: .4s;
}
.menu-box-show{
	transform: translateX(0);
}
.menu-btn{
	position: absolute;
	display: inline-block;
	width: 24px;
	height: 12.8px;
	background: url(../images/menuBtn.png);
	background-size: cover;
	top: 0;
	right: .5rem;
	top: 2rem;
}
.menu-close-btn{
	position: absolute;
	display: inline-block;
	width: 24px;
	height: 12.8px;
	background: url(../images/menuBtnClose.png);
	background-size: cover;
	top: 0;
	right: .5rem;
	top: 2rem;
}
.menu-box .logo{
	max-width: 50%;
}

.menu-box .music-list{
	padding: 0;
	margin: 4rem 0;
	height: 60vh;
	overflow: scroll;
}
.menu-box .music-list .music-item{
	list-style: none;
	line-height: 3.5em;
	color: #939bae;
	font-size: 14px;
	padding-left: 35px; 
	position: relative;
}
.menu-box .music-list .music-item:after{
	position: absolute;
	content: '';
	width: 21px;
	height: 23px;
	background: url(../images/listIcon.png);
	left: 30px;
	top:calc(50% - 11.5px);
}
.menu-box .music-list .on{ color:#F00;}