@font-face {

    font-family: zicon;

    src: url(../fonts/icon.eot);

    src: url(../fonts/icon.eot?#iefix) format("embedded-opentype"),

    url(../fonts/icon.woff) format("woff"),

    url(../fonts/icon.ttf) format("truetype"),

    url(../fonts/icon.svg#uxzfont) format("svg");

}



.z-icon {

    display: inline-block;

    font: normal normal normal 14px/1 zicon;

    font-size: inherit;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale

}





.z-icon-music:before {

  content: "\f001";

}



.z-icon-search:before {

  content: "\f002";

}



.z-icon-remove:before {

  content: "\f00d";

}



.z-icon-trash:before {

  content: "\f014";

}



.z-icon-repeat:before {

  content: "\f01e";

}



.z-icon-refresh:before {

  content: "\f021";

}



.z-icon-list-alt:before {

  content: "\f022";

}



.z-icon-volume-off:before {

  content: "\f026";

}



.z-icon-volume-down:before {

  content: "\f027";

}



.z-icon-volume-up:before {

  content: "\f028";

}



.z-icon-step-backward:before {

  content: "\f048";

}



.z-icon-fast-backward:before {

  content: "\f049";

}



.z-icon-backward:before {

  content: "\f04a";

}



.z-icon-play:before {

  content: "\f04b";

}



.z-icon-pause:before {

  content: "\f04c";

}



.z-icon-stop:before {

  content: "\f04d";

}



.z-icon-forward:before {

  content: "\f04e";

}



.z-icon-fast-forward:before {

  content: "\f050";

}



.z-icon-step-forward:before {

  content: "\f051";

}



.z-icon-chevron-left:before {

  content: "\f053";

}



.z-icon-chevron-right:before {

  content: "\f054";

}



.z-icon-remove-sign:before {

  content: "\f057";

}



.z-icon-ok-sign:before {

  content: "\f058";

}



.z-icon-arrow-left:before {

  content: "\f060";

}



.z-icon-arrow-right:before {

  content: "\f061";

}



.z-icon-share-alt:before {

  content: "\f064";

}



.z-icon-exclamation-sign:before {

  content: "\f06a";

}



.z-icon-random:before {

  content: "\f074";

}



.z-icon-retweet:before {

  content: "\f079";

}



.z-icon-retweet-one:before {

  content: "\f080";

}



.z-icon-reorder:before {

  content: "\f0c8";

}



.z-icon-reorder-list:before {

  content: "\f0c9";

}



.z-icon-long-arrow-left:before {

  content: "\f177";

}



.z-icon-long-arrow-right:before {

  content: "\f178";

}



.zplayer ::-webkit-scrollbar {

    width: 3px!important

}



.zplayer ::-webkit-scrollbar-track {

    border-radius: 10px!important;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)!important

}



.zplayer ::-webkit-scrollbar-thumb {

    border-radius: 10px!important;

    background: rgba(0,0,0,.1)!important;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5)!important

}



.zplayer ::-webkit-scrollbar-thumb:window-inactive {

    background: rgba(255,0,0,.4)!important

}



.zplayer .zplayer-content {

    float: left;

    width: 100%;

    /* border-top: 1px solid #ededed; */

    /* border-bottom: 1px solid #ededed; */

    border: 1px solid #ededed;

    background: #fff;

}



.zplayer .ss-btn {

    float: right;

    width: 20px;

    height: 62px;

    background: #3da0fd none repeat scroll 0 0;

    cursor: pointer;

}



.zplayer .ss-btn i {

    margin-top: 1px;

    padding: 0 4px;

    color: #fff;

    font-size: 14px;

    line-height: 62px

}



.zplayer .zplayer-list-btn {

    float: right;

    color: #6e6e6e;

    font-size: 14px;

    line-height: 19px;

    cursor: pointer;

}



.zplayer .zplayer-list {

    clear: both;

    overflow: auto;

    margin: 0;

    padding: 0;

    width: 100%;

    border: 1px solid #dedede;

    border-top: none;

    background: #fff;

    transition: all .5s ease;

}



.zplayer .zplayer-list li {

    overflow: hidden;

    padding: 3px 20px;

    color: #878787;

    list-style-position: inside;

    list-style-type: decimal;

    text-overflow: ellipsis;

    font-size: 11px;

    line-height: 1.5;

    cursor: pointer

}



.zplayer .zplayer-list li:hover {

    color: #716e6e;

    font-weight: 700

}



.zplayer .zplayer-list li.playing {

    padding-left: 17px;

    border-left: 3px solid #3da0ff;

    color: #716e6e;

    font-weight: 700

}



.zplayer .display-none {

    display: none

}



.zplayer {

    z-index: 1024;

    width: 100%;

    font-family: Arial,Helvetica,sans-serif;

    transition: transform .5s ease;

    transform: translateX(0px);

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



.zplayer-fixed .zplayer{

	position: fixed;

	bottom: 0;

	left: 0;

	width: 375px;

}



.zplayer span {

    cursor: default!important

}



.zplayer .zplayer-pic {

    position: absolute;

    top: 0;

    left: 0;

    width: 62px;

    height: 62px

}



.zplayer .zplayer-pic img {

    width: 100%;

    height: 100%

}



.zplayer .zplayer-info {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    margin-left: 60px;

    padding: 4px 5px 0 10px;

    height: 60px

}



.zplayer .zplayer-info .zplayer-music {

    overflow: hidden;

    margin-bottom: 5px;

    text-overflow: ellipsis;

}



.zplayer .zplayer-info .zplayer-music .zplayer-title {

    font-size: 14px

}



.zplayer .zplayer-info .zplayer-music .zplayer-author {

    color: #666;

    font-size: 12px

}



.zplayer .zplayer-info .zplayer-controller {

    position: relative

}



.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar {

    position: relative;

    width: 100%;

    height: 2px;

    background: #cdcdcd;

    cursor: pointer!important

}



.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-loaded {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    height: 2px;

    background: #aaa;

    -webkit-transition: all .5s ease;

    transition: all .5s ease

}



.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-played,.zplayer .zplayer-volume-played {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    height: 2px;

    background: #3da0ff;

}



.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-played .zplayer-thumb,.zplayer .zplayer-volume-thumb {

    position: absolute;

    top: 0;

    right: 5px;

    margin-top: -4px;

    margin-right: -10px;

    width: 8px;

    height: 8px;

    border: 1px solid #3da0ff;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    background: #fff;

    cursor: pointer!important

}



.zplayer .zplayer-info .zplayer-controller .zplayer-bar-wrap .zplayer-bar .zplayer-played .zplayer-thumb:hover,.zplayer .zplayer-volume-thumb:hover {

    background: #3da0ff

}



.zplayer .zplayer-info .zplayer-controller .zplayer-time {

    margin-top: 12px;

    color: #999;

    font-size: 12px;

}



.zplayer .zplayer-info .zplayer-controller .zplayer-time .z-icon {

    margin-left: 10px;

    width: 14px;

    font-size: 14px;

}



.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap {

    display: inline-block;

    cursor: pointer!important

}



.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap:hover .zplayer-volume-bar-wrap {

    display: block

}



.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap .zplayer-volume-bar-wrap {

    position: absolute;

    right: -5px;

    bottom: 17px;

    z-index: 99;

    display: none;

    width: 25px;

    height: 40px

}



.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap .zplayer-volume-bar-wrap .zplayer-volume-bar {

    position: absolute;

    right: 10px;

    bottom: 0;

    width: 5px;

    height: 35px;

    background: #aaa

}



.zplayer .zplayer-info .zplayer-controller .zplayer-volume-wrap .zplayer-volume-bar-wrap .zplayer-volume-bar .zplayer-volume {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 5px;

    background: #3da0ff

}



.zplayer .zplayer-menu-bars {

    display: inline-block;

    margin-left: 6px;

}



.zplayer .zplayer-menu-volume {

    float: right;

    display: inline-block

}



.zplayer .zplayer-menu-bars i,.zplayer .zplayer-menu-volume i {

    cursor: pointer;

    color: #666;

}



.zplayer .zplayer-list-btn:hover,.zplayer .zplayer-menu-bars i:hover,.zplayer .zplayer-menu-volume i:hover {

    color: #000

}



.zplayer .zplayer-volume-bar {

    position: relative;

    width: 100%;

    height: 2px;

    background: #cdcdcd;

    cursor: pointer!important

}



.zplayer .zplayer-volume-bar {

    position: relative;

    display: inline-block;

    margin-top: -3px;

    margin-left: 4px;

    width: 40px;

    height: 2px;

    background: #cdcdcd;

    vertical-align: middle;

    cursor: pointer!important;

}



.zplayer .lrc-hide{

	opacity: 0.5;

}



.zplayer-withlrc .zlrc {

    display: block;

}

.zplayer-withlrc .zplayer-pic{

	height: 112px;

	width: 112px;

}

.zplayer-withlrc .zplayer-info{

	height: 112px;

	margin-left: 112px;

}



.zlrc {

    display: none;

    /* position: fixed; */

    /* left: 0; */

    /* bottom: 0; */

    /* width: 100%; */

    /* margin: 5px 20px; */

    background: rgba(255, 255, 255, 0.15);

}



.zplayer-lrc {

    position: relative;

    height: 40px;

    text-align: center;

    overflow: hidden;

    margin: 5px 20px;

}



.zplayer-lrc:after,.zplayer .zplayer-lrc:before {

    position: absolute;

    z-index: 1;

    display: block;

    overflow: hidden;

    content: ' ';

    width: 100%

}



.zplayer-lrc p {

    font-size: 14px;

    color: #666;

    line-height: 20px;

    padding: 0;

    margin: 0;

    -webkit-transition: all .5s ease-out;

    transition: all .5s ease-out;

    opacity: .4;

    height: 20px!important;

    overflow: hidden;

}



.zplayer-lrc p.zplayer-lrc-current {

    opacity: 1;

    overflow: visible;

    height: auto!important;

    min-height: 20px;

}



.zplayer-lrc .zplayer-lrc-contents {

    width: 100%;

    -webkit-transition: all .5s ease-out;

    transition: all .5s ease-out

}





.zplayer-fixed .zplayer{

	transform: translateX(-355px);

}



.zplayer-fixed .zlrc{

	position: fixed;

    left: 0;

    bottom: 0;

    width: 50%;

}

.zplayer-fixed .zplayer-pic{

	height: 60px;

	width: 60px;

}

.zplayer-fixed .zplayer-info{

	height: 60px;

	margin-left: 60px;

}

.zplayer-fixed .zplayer .zplayer-content{

	border-left: none;

	border-right: none;

	width: 355px;

}



.zplayer-fixed .zplayer-lrc p{

	color: #3da0ff;

}

.zplayer-fixed .zplayer .zplayer-list{

	border-bottom: none;

	width: 355px;

}