@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: 106px; width: 106px }
.aplayer-withlrc.aplayer .aplayer-info { margin-left: 106px; height: 106px }
.aplayer-withlrc.aplayer .aplayer-lrc { display: block }
.aplayer { font-family: Arial,Helvetica,sans-serif; margin: 20px 5px;box-shadow: 0 2px 15px 0 rgba(0,0,0,.08),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 }
    .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; float: left; height: 100px; width: 100px; background-color: #ca0000 }
        .aplayer .aplayer-pic img { height: 100%; width: 100% }
        .aplayer .aplayer-pic .aplayer-button { position: absolute; color: #fff; -webkit-border-radius: 50%; border-radius: 50%; opacity: .8; 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: 26px; height: 26px; border: 2px solid #fff; top: 50%; left: 50%; margin: -15px 0 0 -15px }
            .aplayer .aplayer-pic .aplayer-play .aplayer-icon-play { position: absolute; top: 2px; left: 4px; font-size: 20px; line-height: 23px }
        .aplayer .aplayer-pic .aplayer-pause { width: 24px; height: 24px; border: 2px solid #fff; bottom: 4px; right: 4px }
            .aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause { position: absolute; top: 1px; left: 6px; font-size: 12px; line-height: 24px }
    .aplayer .aplayer-info { margin-left: 120px; padding: 20px 7px 20px 10px; height: 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
        .aplayer .aplayer-info .aplayer-music { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 17px }
            .aplayer .aplayer-info .aplayer-music .aplayer-title { font-size: 16px }
            .aplayer .aplayer-info .aplayer-music .aplayer-author { font-size: 12px; color: #666 }
        .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: #cdcdcd; cursor: pointer !important }
                    .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { position: absolute; left: 0; top: 0; bottom: 0; background: #e68989; 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: #ca0000; height: 2px }
                        .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { position: absolute; top: 0; right: 5px; margin-top: -6px; margin-right: -10px; height: 12px; width: 12px; border: 1px solid #ca0000; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; cursor: pointer !important }
                            .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover { background: #ca0000 }
            .aplayer .aplayer-info .aplayer-controller .aplayer-time { position: absolute; right: 6px; bottom: -1px; height: 17px; color: #999; font-size: 11px }
                .aplayer .aplayer-info .aplayer-controller .aplayer-time i { color: #666; 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: #aaa }
                        .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: #ca0000 }
    .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 }