@font-face { font-family: aplayer-fontello; src: url(font/aplayer-fontello.eot?72550380); src: url(font/aplayer-fontello.eot?72550380#iefix) format("embedded-opentype"), url(font/aplayer-fontello.woff?72550380) format("woff"), url(font/aplayer-fontello.ttf?72550380) format("truetype"), url(font/aplayer-fontello.svg?72550380#fontello) format("svg"); font-weight: 400; font-style: normal }

.aplayer-narrow { width: 66px }
.aplayer-narrow .aplayer-info { display: none }
.aplayer-withlrc.aplayer-narrow { width: 106px }
.aplayer-withlrc.aplayer .aplayer-pic { height:320px; width: 366px; }
.aplayer-withlrc.aplayer .aplayer-info { margin-left: 0px; height: 106px }
.aplayer-withlrc.aplayer .aplayer-lrc { display: block }
.aplayer { font-family: Arial, Helvetica, sans-serif;/* margin: 5px; -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); -webkit-border-radius: 2px; border-radius: 2px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color:rgba(255,255,255,0.8) */}
.aplayer [class*=" aplayer-icon-"]:before,
.aplayer [class^=aplayer-icon-]:before { font-family: aplayer-fontello; font-style: normal; font-weight: 400; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em }
.aplayer .aplayer-lrc-content,
.aplayer .aplayer-pic .aplayer-hide { display: none }
.aplayer .aplayer-icon-weibo:before { content: '\e805' }
.aplayer .aplayer-icon-play:before { content: '\e806' }
.aplayer .aplayer-icon-pause:before { content: '\e807' }
.aplayer .aplayer-icon-to-start:before { content: '\e808' }
.aplayer .aplayer-icon-to-end:before { content: '\e809' }
.aplayer .aplayer-icon-list:before { content: '\e80a' }
.aplayer .aplayer-icon-menu:before { content: '\e80b' }
.aplayer .aplayer-icon-volume-off:before { content: '\e800' }
.aplayer .aplayer-icon-volume-down:before { content: '\e801' }
.aplayer .aplayer-icon-volume-up:before { content: '\e802' }
.aplayer span { cursor: default!important }

.aplayer .aplayer-pic { position: relative;  height: auto; width: 100%; margin:30px auto; text-align:center; }
.aplayer .aplayer-pic img { width:90%; height:auto;  border-radius:50%; margin:0 auto;}

.aplayer .aplayer-pic .aplayer-button { position: absolute; color: #fff; -webkit-border-radius: 50%; border-radius: 50%; opacity:1; cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); box-shadow: 0 1px 1px rgba(0,0,0,.2); background: rgba(0,0,0,.2) }
.aplayer .aplayer-pic .aplayer-button:hover { opacity: 1 }
.aplayer .aplayer-pic .aplayer-play { width: 56px; height: 56px; border: 2px solid #fff; top: 50%; left: 50%; margin: -28px 0 0 -28px }
.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play { position: absolute; top: 0px; left: 4px; font-size: 50px; line-height: 56px }
.aplayer .aplayer-pic .aplayer-pause { width: 56px; height: 56px; border: 2px solid #fff; top: 50%; left: 50%; margin: -28px 0 0 -28px }
.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause { position: absolute; top: 0px; left: 4px; font-size: 50px; line-height: 56px }

.aplayer .aplayer-info { padding:50px 7px 0 10px; height: 66px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box ; position:relative;}
.aplayer .aplayer-info .aplayer-music { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 17px; text-align:center; }
.aplayer .aplayer-info .aplayer-music .aplayer-title { font-size: 16px; color:#fff; display:block;}
.aplayer .aplayer-info .aplayer-music .aplayer-author { font-size: 12px; color: #fff; display:block; }
.aplayer .aplayer-info .aplayer-controller { position: relative }
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { margin: 0 120px 0 5px }
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { position: relative; height: 2px; width: 100%; background: #aaa; cursor: pointer!important }
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { position: absolute; left: 0; top: 0; bottom: 0; background: #ffffff; height: 2px; -webkit-transition: all .5s ease; transition: all .5s ease }
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { position: absolute; left: 0; top: 0; bottom: 0; background: #67d2ad; height: 2px }
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { position: absolute; top: 0; right: 5px; margin-top: -4px; margin-right: -10px; height: 8px; width: 8px; border: 1px solid #67d2ad; -webkit-border-radius: 50%; border-radius: 50%; background: #67d2ad; cursor: pointer!important }
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover { background: #b9fffa }
.aplayer .aplayer-info .aplayer-controller .aplayer-time { position: absolute; right: 0; bottom: -5px; height: 17px; color: #fff; font-size: 11px }
.aplayer .aplayer-info .aplayer-controller .aplayer-time i { color: #fff; font-size: 15px }
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap { display: inline-block; margin-left: 7px; cursor: pointer!important }
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap { display: block }
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap { display: none; position: absolute; bottom: 17px; right: -5px; width: 25px; height: 40px; z-index: 99 }
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar { position: absolute; bottom: 0; right: 10px; width: 5px; height: 35px; background: #fff }
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume { position: absolute; bottom: 0; right: 0; width: 5px; background: #67d2ad }
.aplayer .aplayer-lrc { display: none; position: relative; height: 40px; background: #fff; text-align: center; overflow: hidden; margin: -10px 0 10px }
.aplayer .aplayer-lrc:after,
.aplayer .aplayer-lrc:before { position: absolute; z-index: 1; display: block; overflow: hidden; content: ' '; width: 100% }
.aplayer .aplayer-lrc:before { top: 0; height: 10%; background: -webkit-linear-gradient(top, #fff 0, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255,255,255,0))); background: linear-gradient(to bottom, #fff 0, rgba(255,255,255,0) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 )
}
.aplayer .aplayer-lrc:after { bottom: 0; height: 33%; background: -webkit-linear-gradient(bottom, #fff 0, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left bottom, left top, from(white), to(rgba(255,255,255,0))); background: linear-gradient(to top, #fff 0, rgba(255,255,255,0) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )
}
.aplayer .aplayer-lrc p { font-size: 12px; color: #666; line-height: 20px; padding: 0; margin: 0; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; opacity: .4 }
.aplayer .aplayer-lrc p.aplayer-lrc-current { opacity: 1 }
.aplayer .aplayer-lrc .aplayer-lrc-contents { width: 100%; -webkit-transition: all .5s ease-out; transition: all .5s ease-out }