*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;touch-action: pan-y;}
body {
    /* 背景颜色 */
    background-color: #66cccc;
    /*height:100vh;*/
    overflow:hidden;
}
.about{
    height:calc(100% - 100px);
    overflow:hidden;
}
.am-container{
    height:100%;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width:5px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
}
/*input滑块*/
input[type='range']{
    -webkit-appearance: none;
    appearance: none;
    border-radius: 4px;
    background: -webkit-linear-gradient(rgb(199 12 12), rgb(199 12 12)) no-repeat #ffffff80;
    background-size: 50% 100%; /* 因为周期默认value=0.50正好占50% */
    /*transform-origin: 75px 75px;*/
    /*transform: rotate(-90deg);*/
}
input[type=range]:focus {
    outline: none;
}
input[type='range']::-webkit-slider-runnable-track{
    box-shadow: 0 1px 1px #0d1112, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
    border-radius: 4px;
    height: 8px;
}
input[type='range']::-moz-range-track{
    box-shadow: 0 1px 1px #0d1112, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
    border-radius: 4px;
    height: 8px;
}
input[type="range"]::-ms-track{
    color:transparent;
    box-shadow: 0 1px 1px #0d1112, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
    border-radius: 4px;
    height: 8px;
}
input[type='range']::-ms-fill-lower{
    box-shadow: 0 1px 1px #0d1112, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
    border-radius: 4px;
    height: 8px;
}
/*firefox 和 chrome ，safari*/
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border: 5px solid #fff;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: rgb(199 12 12);
    cursor: pointer;
    margin-top:-4px;
    box-shadow: 0 1px 1px #0d1112, inset 0 -.125em .125em #0d111280;
}
input[type='range']::-moz-range-thumb {
    border: 5px solid #fff;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: rgb(199 12 12);
    cursor: pointer;
    margin-top:-4px;
    box-shadow: 0 1px 1px #0d1112, inset 0 -.125em .125em #0d111280;
}
/*IE*/
input[type='range']::-ms-thumb {
    border: 5px solid #fff;
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: rgb(199 12 12);
    cursor: pointer;
    margin-top:-4px;
    box-shadow: 0 1px 1px #0d1112, inset 0 -.125em .125em #0d111280;
}
input[type=range]::-webkit-slider-thumb:hover {
    box-shadow:0 0 5px #fff;
}
input[type=range]::-moz-range-thumb:hover {
    box-shadow:0 0 5px #fff;
}
input[type=range]::-ms-thumb:hover {
    box-shadow:0 0 5px #fff;
}
.closeRange::-webkit-slider-thumb {
    background: rgb(188,188,188) !important;
}
.closeRange::-moz-range-thumb {
    background: rgb(188,188,188) !important;
}
.closeRange::-ms-thumb {
    background: rgb(188,188,188) !important;
}
.filter input::before {
  content: "";
  width: 2px;
  height: 2px;
  border:1px dashed #ffffff80;
  position: absolute;
  left:calc(50% - 15px);
  margin-top: -8px;
}
.filter input::after {
  content: "";
  width: 2px;
  height: 2px;
  border:1px dashed #ffffff80;
  position: absolute;
  margin-top: 15px;
  left:calc(50% - 15px);
}
#StereoPanner::before {
  content: "";
  width: 2px;
  height: 2px;
  border:1px dashed #ffffff80;
  position: absolute;
  left:calc(50% - 42px);
  margin-top: -8px;
}
#StereoPanner::after {
  content: "";
  width: 2px;
  height: 2px;
  border:1px dashed #ffffff80;
  position: absolute;
  margin-top: 15px;
  left:calc(50% - 42px);
}
#fade-range{
    width:45%;
    background-size: 45.45% 100%;
    margin:5px 0 8px 86px;
}
#strongSlider{
    width:45%;
    background-size: 0% 100%;
}
#pbrSlider{
    width:45%;
    background-size: 14.28% 100%;
}
#StereoPanner{
    width:45%;
    background-size: 50% 100%;
}
#speed3D{
    width:45%;
    background-size: 50% 100%;
}

.main{
    position: relative;
    top: 20px;
    width: 100%;
    height: calc(100% - 200px);
    box-shadow: 0 15px 50px rgb(0,0,0);
    border-radius: 10px;
    outline: 0;
}
.musicBox{
    position: absolute;
    width: 100%;
    height: 52px;
    top:0;
    left:0;
    line-height: 52px;
    margin: 0 auto;
    background: url(../img/playbar.png) 0px -6px;
    border-radius: 10px 10px 0 0;
    padding:0 20px;
}
.buttons{
    cursor: pointer;
    display: block;
    float: left;
    text-indent: -9999px;
    background: url(../img/playbar.png) no-repeat 0px;
}
.buttons2{
    position:relative;
    cursor: pointer;
    display: block;
    float: left;
    text-indent: -9999px;
    background: url(../img/playbar.png) no-repeat 0px;
    left:377px;
}
.buttons2.lbxh,.buttons2.dqxh,.buttons2.sjbf{
    margin-right:10px;
}
#vol-range{
    float:right;
    margin-top: 20px;
    margin-left:-5px;
}
#fileBox{
    width: 25px;
    height: 25px;
    margin: 13px 0 0 0;
    background-position: -88px -163px;
}
#playK{
    position:relative;
    width:650px;
    height:52px;
    float:right;
    right:0;
}
#fileBox:hover{
    background-position: -88px -189px;
}
.file{
    position: relative;
    opacity: 0;
    height:100%;
    width: 100%;
    cursor: pointer;
    font-size:0;
}
#pre,#pre2{
    width: 28px;
    height: 28px;
    margin: 10px 10px 0 0;
    background-position: 0 -130px;
}
#pre:hover,#pre2:hover{
    background-position: -30px -130px;
}
/*#startStop{*/
/*    left: 80px;*/
/*}*/
.start{
    width: 36px;
    height: 36px;
    margin: 6px 10px 0 0;
    background-position: 0 -204px;
}
.start:hover{
    background-position: -40px -204px;
}
.stop{
    width: 36px;
    height: 36px;
    margin: 6px 10px 0 0;
    background-position: 0 -165px;
}
.stop:hover{
    background-position: -40px -165px;
}
#next,#next2{
    width: 28px;
    height: 28px;
    margin: 10px 20px 0 0;
    background-position: -80px -130px;
}
#next:hover,#next2:hover{
    background-position: -110px -130px;
}
#volume,#volume2{
    width: 25px;
    height: 25px;
    margin: 12px 12px 0 0;
}
.m-vol {
    position: absolute;
    top: -113px;
    left: 155px;
    clear: both;
    width: 32px;
    height: 113px;
}
.m-vol .barbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 113px;
    background: url(../img/playbar.png) no-repeat 0 -503px;
}

.m-vol .vbg {
    position: absolute;
    padding: 4px 0;
    top: 11px;
    left: 14px;
    width: 4px;
    height: 93px;
}
.m-vol .curr {
    position: absolute;
    left: 14px;
    width: 4px;
    bottom: 9px;
    /*left: 0;*/
    /*overflow: hidden;*/
    background: url(../img/playbar.png) no-repeat -40px bottom;
}
.m-vol .btn {
    position: absolute;
    top:-10px;
    left: -7px;
    display: block;
    width: 18px;
    height: 20px;
    cursor: pointer;
    background: url(../img/iconall.png) no-repeat -40px -250px;
}
#volumeT:hover,#volumeT2:hover{
    background-position: -40px -280px;
}
.icn-vol {
    background-position: -2px -248px;
}
.icn-vol:hover {
    background-position: -31px -248px;
}
.icn-volno {
    background-position: -104px -69px;
}
.icn-volno:hover {
    background-position: -126px -69px;
}
.lbxh{
    width: 25px;
    height: 25px;
    margin: 12px 2px 0 0;
    background-position: -3px -344px;
}
.lbxh:hover{
    background-position: -33px -344px;
}
.dqxh{
    width: 25px;
    height: 25px;
    margin: 12px 2px 0 0;
    background-position: -66px -344px;
}
.dqxh:hover{
    background-position: -93px -344px;
}
.sjbf{
    width: 25px;
    height: 25px;
    margin: 12px 2px 0 0;
    background-position: -66px -248px;
}
.sjbf:hover{
    background-position: -93px -248px;
}
.userSelect{
    /* 火狐 */
    -moz-user-select: none;
    /* Safari 和 欧朋 */
    -webkit-user-select: none;
    /* IE10+ and Edge */
    -ms-user-select: none;
    /* Standard syntax 标准语法(谷歌) */
    user-select: none;
}
#progressDiv,#progressDiv2{
    position:relative;
    float: left;
}
#progressDiv .times,#progressDiv2 .times{
    position:relative;
    left:365px;
    top:-3px;
    text-align: center;
    display: inline-block;
    color: #797979;
    text-shadow: 0 1px 0 #121212;
    font-size: 12px;
    font-weight: 900;
}
#rollTime,#rollTime2{
    color: #a1a1a1 !important;
}
#exTime{
    top:-4px !important;
    font-size:10px !important;
}
.times2{
    top:14px !important;
}
#exTime2{
    top:13px !important;
    font-size:10px !important;
}
#progressDiv .progress,#progressDiv2 .progress{
    position: absolute;
    top: 20px;
}
#totalProgress,#totalProgress2{
    width:350px;
    height:9px;
    background: url(../img/statbar.png) no-repeat right 0;
}
#progressBar,#progressBar2{
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height:9px;
    background: url(../img/statbar.png) no-repeat left -66px;
}
#progressBar .btn,#progressBar2 .btn,#vol-range .btn {
    position: absolute;
    top: -7px;
    right: -13px;
    width: 22px;
    height: 24px;
    margin-left: -11px;
    background: url(../img/iconall.png) no-repeat 0 -250px;
    cursor:pointer;
}
#progressBar .btn:hover,#progressBar2 .btn:hover,#vol-range .btn:hover{
    background-position: 0 -280px;
}
#vol-range{
    position: absolute;
    top: 0;
    width: 0%;
    height:9px;
    background: url(../img/statbar.png) no-repeat left -66px;
}
#vol-range-total{
    width:93px;
    height:9px;
    background: url(../img/statbar.png) no-repeat right 0;
}
#progressVol{
    float:left;
    margin-top:20px;
    margin-left:380px;
}
#song-list-screen{
    left:915px;
    top:13px;
}
.musicList{
    position: relative;
    top: 47px;
    width: 50%;
    height: calc(100% - 47px);
    border-right: 3px solid rgb(0 0 0 / 80%);
    background: url(../img/playlist_bg.png) no-repeat;
    overflow: hidden;
    z-index: 2;
    background-position: -1020px 0;
    background-repeat: repeat-y;
    /*border-radius:0 0 0 10px;*/
}
#musicList,#musicList2{
    /*position: absolute;*/
    list-style: none;
    margin: 0;
    height:calc(100% - 28px);
    padding: 2px 10px;
    overflow: auto;
    color: #ccc;
}
#musicList2{
    margin-top:28px;
}
.musicList2{
    display:none;
    position: absolute;
    bottom:47px;
    left:0;
    right:0;
    margin:0 auto;
    width: 970px;
    height: 300px;
    background: url(../img/playlist_bg.png) no-repeat;
    overflow: hidden;
    z-index: 4;
    background-position: -1020px 0;
    background-repeat: repeat-y;
    border-radius:10px 10px 0 0;
}

.delAll{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 28px;
    line-height: 28px;
    color: #9b9b9b;
    font-size: 12px;
    margin-bottom:0;
    background: url(../img/playlist_bg.png) no-repeat -50px 0;
}
.delAll2{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    height: 28px;
    line-height: 28px;
    color: #9b9b9b;
    font-size: 12px;
    margin-top:0;
    background: url(../img/playbar.png) 0px -6px;
}
.barBtn{
    position:absolute;
    font-size:12px;
    padding-top:4px;
    padding-left:20px;
    text-align: center;
    left:20px;
    width: 55px;
    height: 25px;
    display:inline-block;
    background: url(../img/playbar.png) no-repeat -45px -70px;
    cursor:pointer;
    &:hover{
        cursor:pointer;
        color:#ffffffd6;
        background: url(../img/playbar.png) no-repeat -45px -100px;
        visibility: visible !important;
    }
}
#strongBtn{
    top:5px;
}
#coverBtn{
    top:40px;
    display: none;
}
#lrcBtn{
    top:80px;
    display: none;
}
#songArtistPicBtn{
    top:120px;
    display: none;
}
#songMvBtn{
    top:160px;
    display: none;
}
._color{
    color:#ba0b0b !important;
}
#delAll,#delAll2{
    color: #9b9b9b;
    cursor: pointer;
}
#delAll:hover,#delAll2:hover {
    color:#ffffffd6;
    .icn-del{
        background: url(../img/playlist.png) no-repeat -205px -30px;
    }
}
.icn-del{
    position:relative;
    display:inline-block;
    width: 14px;
    top:2px;
    margin: 0 10px;
    text-indent: -9999px;
    height: 10px;
    background: url(../img/playlist.png) no-repeat -205px 0px;
}
#musicList>li,#musicList2>li{
    position: relative;
    display:flex;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 12px;
    float: left;
    width: 100%;
    /* 火狐 */
    -moz-user-select: none;
    /* Safari 和 欧朋 */
    -webkit-user-select: none;
    /* IE10+ and Edge */
    -ms-user-select: none;
    /* Standard syntax 标准语法(谷歌) */
    user-select: none;
}
.col {
    height: 28px;
    line-height: 28px;
    overflow: hidden;
    cursor: pointer;
}
.col-1 {
    width: 25px;
}
.col-2{
    width:100%;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.col-2 > .list-num {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
}
.col-2-play .list-num {
    width: 14px;
    background: url(../img/wave.gif) 2px 10px no-repeat;
    text-indent: -99px;
}
.col-2 > .list-songName{
    margin-left: 20px;
}

.col-3 {
    width: 25px;
}
.col-3 span{
    width: 14px;
    margin-left: 0;
    float: right;
    overflow: hidden;
    margin: 7px 7px 0 10px;
    text-indent: -9999px;
    height: 16px;
    background: url(../img/playlist.png) no-repeat -50px 0px;
}
.col-3 span:hover{
    background: url(../img/playlist.png) no-repeat -50px -20px;
}
.liFocus > .col-1{
    margin-top: 8px;
    height: 13px;
    background: url(../img/playlist.png) no-repeat -172px 0;
}
#musicList>li:hover,#musicList2>li:hover{
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
}
.liFocus{
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
}
/* 让canvas位于ul标签下面 */
#canvas{
    position: absolute;
    right:0;
    top: 47px;
    width: 50%;
    height: calc(100% - 47px);
    border-left: 3px solid rgb(0 0 0 / 80%);
    background: url(../img/playlist_bg.png) no-repeat;
    overflow: hidden;
    background-position: -1020px 0;
    background-repeat: repeat-y;
    /*border-radius:0 0 10px 0;*/
}
#wrap{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
#canvas-btn{
    border-radius:18px;
    top:10px;
    right:20px;
    transition: all .3s;
}
.switch {
    position: absolute;
    display: inline-block;
    width: 32px;  /* 设置开关的宽度 */
    height: 15px; /* 设置开关的高度 */
}

.switch input[type=checkbox] {
    opacity: 0; /* 隐藏原始 checkbox */
    width: 0;
    height: 0;
}

.switch-label-canvas,.switch-label-fade,.switch-label-StereoPanner,.switch-label-VocalCancellation,.switch-label-filter {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom:0;
    background-color: #ccc; /* 设置默认颜色 */
    transition: .4s; /* 添加平滑过渡 */
    border-radius: 15px; /* 圆角 */
}

.switch-label-canvas:before,.switch-label-fade:before,.switch-label-StereoPanner:before,.switch-label-VocalCancellation:before,.switch-label-filter:before {
    position: absolute;
    content: "";
    height: 13px; /* 按钮高度 */
    width: 13px;  /* 按钮宽度 */
    left: 3px;    /* 按钮距离左边的距离 */
    bottom: 1px;  /* 按钮距离下边的距离 */
    background-color: white;
    transition: .4s; /* 添加平滑过渡 */
    border-radius: 50%; /* 圆形按钮 */
}

/* 当 checkbox 被选中时 (开关状态) */
#switch-input-canvas:checked + .switch-label-canvas {
    background-color: #ba0b0b; /* 选中状态的颜色 */
}
#switch-input-canvas:checked + .switch-label-canvas:before {
    transform: translateX(13px); /* 按钮向右移动 */
}
#switch-input-fade:checked + .switch-label-fade {
    background-color: #ba0b0b; /* 选中状态的颜色 */
}
#switch-input-fade:checked + .switch-label-fade:before {
    transform: translateX(13px); /* 按钮向右移动 */
}
#switch-input-StereoPanner:checked + .switch-label-StereoPanner {
    background-color: #ba0b0b; /* 选中状态的颜色 */
}
#switch-input-StereoPanner:checked + .switch-label-StereoPanner:before {
    transform: translateX(13px); /* 按钮向右移动 */
}
#switch-input-VocalCancellation:checked + .switch-label-VocalCancellation {
    background-color: #ba0b0b; /* 选中状态的颜色 */
}
#switch-input-VocalCancellation:checked + .switch-label-VocalCancellation:before {
    transform: translateX(13px); /* 按钮向右移动 */
}
#switch-input-filter:checked + .switch-label-filter {
    background-color: #ba0b0b; /* 选中状态的颜色 */
}
#switch-input-filter:checked + .switch-label-filter:before {
    transform: translateX(13px); /* 按钮向右移动 */
}
#panner {
    width: 100px;
    height: 100px;
    left:20px;
    margin-bottom:5px;
    /*border: 1px solid #888;*/
    position: relative;
    display: inline-block;
    /*overflow: hidden;*/
    display:none;
}
#zero {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    /*background-color: #088;*/
    border-radius: 10px;
    text-align: center;
    line-height:22px;
    color:#ffffff80;
    font-size:18px;
}
#dest {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50px;
    left: 60px;
    margin: -8px 0 0 -8px;
    /*background-color: #800;*/
    border-radius: 8px;
    text-align: center;
    line-height:16px;
    color:#ffffff80;
    font-size:10px;
}

.drag-box {
    display:none;
    user-select: none;
    z-index: 999;
    position: fixed;
    width: 500px;
    height: 50%;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.8);
    border: none;
    left: calc(50% - 250px);
    top: 25%;
}

#dragBoxBar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
    line-height: 30px;
    border-bottom: 1px solid #191919;
    border-radius: 10px 10px 0 0;
    background: #2d2d2d;
    cursor: move;
}
.zttl {
    width:100%;
    padding-right: 45px;
    margin: 0;
    height: 38px;
    line-height: 38px;
    padding-left: 18px;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    opacity: .8;
    background: url(../img/playbar.png) 0px -15px;
}
.zcls {
    position: absolute;
    z-index: 20;
    top: 9px;
    right: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-indent: -9999px;
    cursor: pointer;
    background: url(../img/playlist.png) no-repeat -200px 5px;
}
.zcls:hover{
    background: url(../img/playlist.png) no-repeat -200px -25px;
}

.pointer-events {
    pointer-events: none;
}


.no-border {
    border: none;
}

#injectedBox {
    height: calc(100% - 39px);
    display: flex;
    align-items: flex-start;
    font-size: 13px;
    background: url(../img/playlist_bg.png);
    background-position: -1020px 0;
    flex-direction: column;
    overflow-y: auto;
    border-radius:0 0 10px 10px;
}
.zcnt-t{
    position: relative;
    top: 0px;
    width: 100%;
    /*height: 200px;*/
    border-bottom: 3px solid rgb(0 0 0 / 80%);
    /*overflow: auto;*/
    padding:5px 10px;
}
.zcnt-lr{
    width:100%;
    height:calc(100% + 40px);
    display: flex;
}
.zcnt-l{
    position: relative;
    width: 75%;
    left:0;
    /*border-right: 2px solid rgb(0 0 0 / 80%);*/
    padding:5px 10px;
}
.zcnt-r{
    position: relative;
    right:0;
    width: 25%;
    /*border-left: 2px solid rgb(0 0 0 / 80%);*/
    padding:5px 10px 5px 0px;
}
.span-btn{
    border:1px solid #ffffff80;
    padding:2px 5px;
    display:inline-block;
    margin-bottom:5px;
    border-radius:3px;
    cursor: pointer;
}
@media (any-hover: hover){
    .span-btn:hover{
        border-color:#ba0b0b;
        color:#ba0b0b;
    }
}
.span-btn-active{
    border-color:#ba0b0b;
    color:#ba0b0b;
}
.zcnt-t-section{
    margin-top:5px;
    border:1px dashed #ffffff80;
    border-radius:4px;
    padding:10px 5px 5px 5px;
}
.zcnt-t-fade,.zcnt-t-StereoPanner,.zcnt-t-VocalCancellation{
    margin-left:24px;
}
.zcnt-t-filter{
    right: 20px;
}
.zcnt-t-input{
    margin-left:20px;
    margin-top:-2px;
}
.zcnt-t-span{
    margin-left:5px;
}
.zcnt-t-span em{
    color:#ba0b0b;
}
.zcnt-l-span{
    position: relative;
    left:5px;
    top:-4px;
}
.zcnt-l-span em{
    color:#ba0b0b;
}
.zcnt-l-input{
    margin-top:-2px;
    margin-bottom:10px;
}
.filter{
    margin-left: 20px;
    width:calc(100% - 20px);
}
.filter input{
    width:85%;
}
.zcnt-t-section-div{
    float:left;
    margin-left:20px;
}
.zcnt-r-section-div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.barBtn,.canvas-btn{
    z-index:2;
}
.song-cover{
    position:absolute;
    visibility: hidden;
    width:100%;
    height:140px;
    z-index:1;
}
.song-pic{
    position: relative;
    width:100px;
    height:100px;
    border-radius: 50%;
    margin:auto;
    margin-top:10px;
    background:url(../img/player-default.png) no-repeat;
    background-size:cover;
    border:10px solid #ffffff30;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 20%);
}
.pic-light{
    box-shadow: 0 0 10px 5px #ffffff99, inset 0 0 0.125em 1px #ffffff99 !important;
}
.song-pic-in{
    position: absolute;
    width:40px;
    height:40px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    margin:auto;
}
.song-artist{
    position: absolute;
    width:100%;
    height:20px;
    text-align: center;
    line-height: 20px;
    /*margin:10px 0 5px 0;*/
    bottom: 0;
    overflow: hidden;
    color:#ffffffab;
    transition: margin .25s ease;
    -webkit-transition: margin .25s ease;
    -moz-transition: margin .25s ease;
    -o-transition: margin .25s ease;
    -ms-transition: margin .25s ease;
}
#wrap-fish {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 120px;
    margin:0 auto;
}
/*歌词*/
#lrc-con {
    display: none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:calc(100% - 160px);
    margin:0 auto;
    /*pointer-events: none;*/
    overflow: hidden;
    z-index: 2;
    margin-top:140px;
    color:#ffffffab;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(15%, hsla(0, 0%, 100%, .6)), color-stop(25%, #fff), color-stop(75%, #fff), color-stop(85%, hsla(0, 0%, 100%, .6)), to(hsla(0, 0%, 100%, 0)));
    -webkit-mask-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .6) 15%, #fff 25%, #fff 75%, hsla(0, 0%, 100%, .6) 85%, hsla(0, 0%, 100%, 0));
    mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(15%, hsla(0, 0%, 100%, .6)), color-stop(25%, #fff), color-stop(75%, #fff), color-stop(85%, hsla(0, 0%, 100%, .6)), to(hsla(0, 0%, 100%, 0)));
    mask-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .6) 15%, #fff 25%, #fff 75%, hsla(0, 0%, 100%, .6) 85%, hsla(0, 0%, 100%, 0));
}

#lrc-list {
    list-style-type: none;
    padding-left:0;
    /*transition: all .5s ease;*/
    /*-webkit-transition: all .5s ease;*/
    /*-moz-transition: all .5s ease;*/
    /*-o-transition: all .5s ease;*/
    /*-ms-transition: all .5s ease;*/
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    margin-bottom: 0;
    overflow: hidden;
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab;
    /*overflow-y: auto;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -ms-overflow-style: none;  /* 针对 Internet Explorer 和旧版 Edge 隐藏滚动条 */
    scrollbar-width: none;  /* 针对 Firefox 隐藏滚动条 */
}
#lrc-list::-webkit-scrollbar{
    width:0;
    height:0;
    display: none;
}
#lrc-list li{
    text-align: center;
    Word-wrap:break-word;
    white-space:pre-wrap;
    padding: 10px 50px;
    /*transition: all .5s ease;*/
    /*-webkit-transition: all .5s ease;*/
    /*-moz-transition: all .5s ease;*/
    /*-o-transition: all .5s ease;*/
    /*-ms-transition: all .5s ease;*/
}

#lrc-list li.active {
    /*font-size:18px;*/
    font-weight: 900;
    color: #ba0b0b;
}
/*写真*/
#song-artist-pic{
    display: none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    text-align: center;
    padding-top:82px;
    margin:0 auto;
    color:#ffffffab;
    z-index: 0;
}
.song-artist-pic:after,.song-artist-pic-wrap:before{
    content: "";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}
.song-artist-pic:after{
    background-color: rgba(0, 0, 0, 0.1);
}
.song-artist-pic-wrap:before{
    background-color: rgba(0, 0, 0, 0.7);
}
.song-artist-pic-controls{
    display:none;
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.pic-fade-times{
    visibility: hidden;
    position:absolute;
    top:50%;
    margin-top:-46px;
    left: 20px;
    width:22px;
    height:22px;
    transition: all .5s ease;
    overflow: hidden;
    z-index:2;
    &:hover{
        visibility: visible;
        width:118px;
        transition: all .5s ease;
    }
}
.pic-times{
    float:left;
    font-size:10px;
    text-align: center;
    line-height: 20px;
    width:22px;
    height:22px;
    margin-left:10px;
    color:#ffffff30;
    border:1px solid #ffffff30;
    background-color:#00000000;
    border-radius:50%;
    cursor:pointer;
    &:hover{
        color:#ffffff;
        border:1px solid #00000010;
        background-color:#00000080;
        visibility: visible !important;
    }
}
.pic-times-action{
    color:#ffffff;
    border:1px solid #00000010;
    background-color:#00000080;
}
.pic-times-0{
    margin-left:0;
    visibility: visible;
}
.pic-pre-next{
    position:absolute;
    width:22px;
    height:22px;
    font-size:10px;
    text-align: center;
    line-height: 20px;
    color:#ffffff30;
    border:1px solid #ffffff30;
    background-color:#00000000;
    border-radius:50%;
    top:50%;
    margin-top:-11px;
    cursor:pointer;
    z-index:2;
    &:hover{
        color:#ffffff;
        border:1px solid #00000010;
        background-color:#00000080;
        visibility: visible !important;
    }
}
.pic-pre{
    left: 20px;
}
.pic-next{
    right: 20px;
}
#lrc-filter-wrap{
    display: none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    margin:0 auto;
    -webkit-filter: blur(500px);
    -moz-filter: blur(500px);
    -o-filter: blur(500px);
    -ms-filter: blur(500px);
    filter:blur(500px);
    z-index: 0;
}
#pic-filter-wrap{
    display: none;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    margin:0 auto;
    -webkit-filter: blur(100px);
    -moz-filter: blur(100px);
    -o-filter: blur(100px);
    -ms-filter: blur(100px);
    filter:blur(100px);
    z-index: 0;
}
/*MV*/
#song-mv{
    display: none;
    position:absolute;
    right: 0;
    left: 0;
    width:260px;
    height:140px;
    text-align: center;
    padding-top:102px;
    border-radius: 8px;
    color:#ffffffab;
    margin:0 auto;
    z-index: 2;
    /*border:1px solid red;*/
}
#song-mv video{
    border-radius: 8px;
}
.boxScreen {
    display: none;
    position:absolute;
    right:10px;
    bottom:10px;
    width: 22px;
    height: 22px;
    color:#ffffff80;
    background-color:#00000000;
    border-radius: 50%;
    text-align: center;
    line-height:22px;
    cursor: pointer;
    transition: all .3s ease;
    z-index:9999;
    &:hover{
        color:#ffffff;
        background-color:#00000080 ;
        visibility: visible !important;
    }
}
.g-btmbar {
    display:none;
    position: fixed;
    zoom: 1;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    width: 100%;
    z-index: 1002;
}
.m-playbar {
    position: absolute;
    zoom: 1;
    top: -53px;
    left: 0;
    width: 100%;
    height: 53px;
    margin: 0 auto;
    transition: all .3s ease;
    &:hover{
        top:-53px !important;
    }
}
.m-playbar .updn {
    position: relative;
    z-index: 11;
}
.m-playbar .updn .left {
    position: absolute;
    top: -14px;
    right: 15px;
    width: 52px;
    height: 67px;
    background: url(../img/playbar.png) no-repeat 0 9999px;
    background-position: 0 -380px;
}
.f-fl {
    float: left;
}
.m-playbar .updn .btn {
    display: block;
    width: 18px;
    height: 18px;
    margin: 6px 0 0 17px;
    background: url(../img/playbar.png) no-repeat 0 9999px;
    background-position: -100px -380px;
}
.m-playbar-lock .updn .btn {
    background-position: -100px -380px;
    transition: all 0s ease;
    &:hover{
        background-position: -100px -400px;
    }
}
.m-playbar-unlock .updn .btn {
    background-position: -80px -380px;
    transition: all 0s ease;
    &:hover{
        background-position: -80px -400px;
    }
}
.m-playbar .updn .right {
    position: absolute;
    top: -1px;
    right: 0;
    width: 15px;
    height: 54px;
    background: url(../img/playbar.png) no-repeat 0 9999px;
    background-position: -52px -393px;
    pointer-events: none;
}
.m-playbar .bg {
    height: 53px;
    zoom: 1;
    margin-right: 67px;
    background: url(../img/playbar.png) no-repeat 0 9999px;
    background-position: 0 0;
    background-repeat: repeat-x;
}
.m-playbar .hand {
    position: absolute;
    top: -10px;
    width: 100%;
    height: 20px;
    cursor: pointer;
}
.m-playbar .wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    z-index: 15;
    width: 970px;
    height: 47px;
    margin: 0 auto;
}

.m-playbar .head {
    position: relative;
    margin: 6px 15px 0 0;
    float: left;
}
.m-playbar .head, .m-playbar .head img {
    width: 34px;
    height: 34px;
}
.m-playbar .head .mask {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 34px;
    height: 35px;
    background: url(../img/playbar.png) no-repeat 0 9999px;
    background-position: 0 -80px;
}

._disNon{
    visibility: hidden !important;
}
@media only screen and (max-width:768px){
    .musicList,#canvas{
        border:none;
        /*border-radius:0 0 10px 10px;*/
        width:100%;
    }
    .musicList{
        background: none;
    }
    .musicBox{
        padding:0 5px;
    }
    #playK{
        width:295px;
    }
    #pre,.start,.stop{
        margin-right:5px;
    }
    #next{
        margin-right: 38px;
    }
    .lbxh,.dqxh,.sjbf,#volume {
        margin-top: 2px;
        margin-right: 2px;
    }
    .m-vol{
        left:163px;
    }
    #progressDiv .progress{
        top:30px;
        left:-75px;
    }
    #totalProgress{
        width:170px;
    }
    #progressDiv .times{
        left:5px;
        top:-13px;
    }
    #exTime{
        top:-14px !important;
    }
    #canvas-btn{
        top: unset;
        bottom:5px;
        right:10px;
        z-index:9;
    }
    #strongBtn{
        top: unset;
        left:5px;
        bottom: 0;
        z-index: 9;
    }
    #lrcBtn{
        top: unset;
        left:65px;
        bottom: 0;
        z-index: 9;
    }
    #lrc-con {
        height:calc(100% - 168px);
    }
    #coverBtn{
        top: unset;
        left:125px;
        bottom: 0;
        z-index: 9;
    }
    #songArtistPicBtn{
        top: unset;
        left:185px;
        bottom: 0;
        z-index: 9;
    }
    #song-artist-pic {
        /*height: calc(100% - 28px);*/
    }
    #songMvBtn{
        top: unset;
        left:245px;
        bottom: 0;
        z-index: 9;
    }
    .drag-box {
        width: 80%;
        left: 10%;
    }
    .zcnt-t-fade {
        margin-top: 2px;
    }
    .isHidden{
        display:none;
    }
    .filter input{
        width:75%;
    }
    .filter input::before,.filter input::after,#StereoPanner::before,#StereoPanner::after{
        display:none;
    }
    .boxScreen {
        visibility: hidden;
    }
}
@media only screen and (max-height:750px){
    .song-cover{
        height:100px;
    }
    .song-pic{
        width:70px;
        height:70px;
        margin-top:5px;
        border:5px solid #ffffff30;
    }
    .pic-light{
        box-shadow: 0 0 10px 2px #ffffff99, inset 0 0 0.125em 0.02em #ffffff99 !important;
    }
    .song-pic-in{
        width:30px;
        height:30px;
    }
    /*.song-artist{*/
    /*    margin-top:5px;*/
    /*}*/
    #wrap-fish {
        width: 80px;
        height: 80px;
    }
    /*歌词*/
    #lrc-con {
        height:calc(100% - 130px);
        margin-top:100px;
    }
    #song-artist-pic {
        padding-top: 62px;
    }
    #song-mv{
        width:190px;
        height:100px;
        padding-top: 45px;
    }
}
@media only screen and (max-height:545px){
    .song-pic{
        margin-left:5px;
        margin-right:0;
    }
    .song-artist{
        width:80px;
        text-align:left;
        padding-left:5px;
    }
    #wrap-fish {
        margin-left:0;
    }
    /*歌词*/
    #lrc-con {
        height:calc(100% - 20px);
        margin-top:0;
    }
    #lrc-list{
        padding-left: 3em;
    }
}
@media only screen and (max-width:350px){
    #playK{
        width:auto;
    }
    #progressDiv .times {
        left: -5px;
    }
    #volume,#next {
        margin-right: 8px;
    }
    .lbxh, .dqxh, .sjbf{
        margin-right: 3px;
    }
    .m-vol {
        left: 136px;
    }
    #progressDiv .progress {
        left: -55px;
    }
    #totalProgress{
        width:120px;
    }
    .filter input{
        width:70%;
    }
    #fade-range{
        width:40%;
    }
    #strongSlider{
        width:40%;
    }
    #pbrSlider{
        width:40%;
    }
    #StereoPanner{
        width:40%;
    }
    #speed3D{
        width:40%;
    }
}
@media only screen and (max-width:300px){
    #playK{
        width:auto;
    }
    .lbxh, .dqxh, .sjbf, #pre, .start, .stop,#next {
        margin-right: 0px;
    }
    .m-vol {
        left: 113px;
    }
    #pre, .start, .stop,#next,#fileBox {
        margin-top: 0px;
    }
    #progressDiv .progress {
        left: -165px;
        top:35px;
    }
    #progressDiv .times{
        display:none;
    }
}

/* 针对dom的全屏设置 */
/* 全屏属性 */
#canvas:-webkit-full-screen {
    background: #000000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000');
    background-image: -webkit-linear-gradient(200deg, #7f7280, #000000);
    background-image: -moz-linear-gradient(200deg, #7f7280, #000000);
    background-image: -o-linear-gradient(200deg, #7f7280, #000000);
    background-image: -ms-linear-gradient(200deg, #7f7280, #000000);
    background-image: linear-gradient(200deg, #7f7280, #000000);
    .canvas-btn{
        display:none;
    }
    .boxScreen{
        bottom:unset;
        right:15px;
        top:15px;
        scale: 1.5;
        color:#ffffff;
        &:hover{
            scale: 1.2;
        }
    }
    .g-btmbar{
        display:block;
    }
    #lrc-con {
        height:calc(100% - 200px);
        margin-top:150px;
    }
    #lrc-list li,.song-artist {
        font-size:22px;
        color: #ffffff;
    }
    #lrc-list li.active {
        font-size:22px;
        color: #ba0b0b;
    }
    #song-mv{
        bottom: 67px;
        width:540px;
        height:300px;
        margin-right:20px;
    }
    .pic-pre-next{
        transform:scale(1.5);
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times{
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times-action {
        color: #ffffff;
        border: 1px solid #00000010;
    }
    .pic-fade-times{
        transform:scale(1.5);
        transition: all 0s ease;
        margin-top:-56px;
        &:hover{
            left:44px;
            transition: all 0s ease;
        }
    }
}
#canvas:-moz-full-screen {
    background: #000000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000');
    background-image: -webkit-linear-gradient(200deg, #7f7280, #000000);
    background-image: -moz-linear-gradient(200deg, #7f7280, #000000);
    background-image: -o-linear-gradient(200deg, #7f7280, #000000);
    background-image: -ms-linear-gradient(200deg, #7f7280, #000000);
    background-image: linear-gradient(200deg, #7f7280, #000000);
    .canvas-btn{
        display:none;
    }
    .boxScreen{
        bottom:unset;
        right:15px;
        top:15px;
        scale: 1.5;
        color:#ffffff;
        &:hover{
            scale: 1.2;
        }
    }
    .g-btmbar{
        display:block;
    }
    #lrc-con {
        height:calc(100% - 200px);
        margin-top:150px;
    }
    #lrc-list li,.song-artist {
        font-size:22px;
        color: #ffffff;
    }
    #lrc-list li.active {
        font-size:22px;
        color: #ba0b0b;
    }
    #song-mv{
        bottom: 67px;
        width:540px;
        height:300px;
        margin-right:20px;
    }
    .pic-pre-next{
        transform:scale(1.5);
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times{
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times-action {
        color: #ffffff;
        border: 1px solid #00000010;
    }
    .pic-fade-times{
        transform:scale(1.5);
        transition: all 0s ease;
        margin-top:-56px;
        &:hover{
            left:44px;
            transition: all 0s ease;
        }
    }
}
#canvas:-ms-fullscreen {
    background: #000000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000');
    background-image: -webkit-linear-gradient(200deg, #7f7280, #000000);
    background-image: -moz-linear-gradient(200deg, #7f7280, #000000);
    background-image: -o-linear-gradient(200deg, #7f7280, #000000);
    background-image: -ms-linear-gradient(200deg, #7f7280, #000000);
    background-image: linear-gradient(200deg, #7f7280, #000000);
    .canvas-btn{
        display:none;
    }
    .boxScreen{
        bottom:unset;
        right:15px;
        top:15px;
        scale: 1.5;
        color:#ffffff;
        &:hover{
            scale: 1.2;
        }
    }
    .g-btmbar{
        display:block;
    }
    #lrc-con {
        height:calc(100% - 200px);
        margin-top:150px;
    }
    #lrc-list li,.song-artist {
        font-size:22px;
        color: #ffffff;
    }
    #lrc-list li.active {
        font-size:22px;
        color: #ba0b0b;
    }
    #song-mv{
        bottom: 67px;
        width:540px;
        height:300px;
        margin-right:20px;
    }
    .pic-pre-next{
        transform:scale(1.5);
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times{
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times-action {
        color: #ffffff;
        border: 1px solid #00000010;
    }
    .pic-fade-times{
        transform:scale(1.5);
        transition: all 0s ease;
        margin-top:-56px;
        &:hover{
            left:44px;
            transition: all 0s ease;
        }
    }
}
/* 全屏伪类 当前chrome:70 不支持 */
#canvas:full-screen {
    background: #000000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000');
    background-image: -webkit-linear-gradient(200deg, #7f7280, #000000);
    background-image: -moz-linear-gradient(200deg, #7f7280, #000000);
    background-image: -o-linear-gradient(200deg, #7f7280, #000000);
    background-image: -ms-linear-gradient(200deg, #7f7280, #000000);
    background-image: linear-gradient(200deg, #7f7280, #000000);
    .canvas-btn{
        display:none;
    }
    .boxScreen{
        bottom:unset;
        right:15px;
        top:15px;
        scale: 1.5;
        color:#ffffff;
        &:hover{
            scale: 1.2;
        }
    }
    .g-btmbar{
        display:block;
    }
    #lrc-con {
        height:calc(100% - 200px);
        margin-top:150px;
    }
    #lrc-list li,.song-artist {
        font-size:22px;
        color: #ffffff;
    }
    #lrc-list li.active {
        font-size:22px;
        color: #ba0b0b;
    }
    #song-mv{
        bottom: 67px;
        width:540px;
        height:300px;
        margin-right:20px;
    }
    .pic-pre-next{
        transform:scale(1.5);
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times{
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times-action {
        color: #ffffff;
        border: 1px solid #00000010;
    }
    .pic-fade-times{
        transform:scale(1.5);
        transition: all 0s ease;
        margin-top:-56px;
        &:hover{
            left:44px;
            transition: all 0s ease;
        }
    }
}
/* IE11支持 */
#canvas:fullscreen {
    background: #000000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f7280', endColorstr='#000000');
    background-image: -webkit-linear-gradient(200deg, #7f7280, #000000);
    background-image: -moz-linear-gradient(200deg, #7f7280, #000000);
    background-image: -o-linear-gradient(200deg, #7f7280, #000000);
    background-image: -ms-linear-gradient(200deg, #7f7280, #000000);
    background-image: linear-gradient(200deg, #7f7280, #000000);
    .canvas-btn{
        display:none;
    }
    .boxScreen{
        bottom:unset;
        right:15px;
        top:15px;
        scale: 1.5;
        color:#ffffff;
        &:hover{
            scale: 1.2;
        }
    }
    .g-btmbar{
        display:block;
    }
    #lrc-con {
        height:calc(100% - 200px);
        margin-top:150px;
    }
    #lrc-list li,.song-artist {
        font-size:22px;
        color: #ffffff;
    }
    #lrc-list li.active {
        font-size:22px;
        color: #ba0b0b;
    }
    #song-mv{
        bottom: 67px;
        width:540px;
        height:300px;
        margin-right:20px;
    }
    .pic-pre-next{
        transform:scale(1.5);
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times{
        color: #ffffff;
        border: 1px solid #ffffff;
        &:hover{
            color:#ffffff;
            border:1px solid #00000010;
        }
    }
    .pic-times-action {
        color: #ffffff;
        border: 1px solid #00000010;
    }
    .pic-fade-times{
        transform:scale(1.5);
        transition: all 0s ease;
        margin-top:-56px;
        &:hover{
            left:44px;
            transition: all 0s ease;
        }
    }
}