.player_module {
    background-image: linear-gradient(90deg,rgba(99,99,99,.1),rgba(99,99,99,.1) 1px,transparent 0,transparent),linear-gradient(90deg,hsla(0,0%,100%,.1) -20%,transparent 15%),linear-gradient(0deg,hsla(0,0%,100%,.1),transparent 25%);
    background-color: #0009;
    border-top: 1px solid hsla(0,0%,100%,.49411765);
    border-radius: 10px;
    box-shadow: 0 0 10px 5px #ffffff26
}

#CorePlayer {
    position: fixed;
    width: 0;
    height: 0;
    right: 0;
    bottom: 0
}

#CoreWrapper {
    display: flex;
    font-family: Microsoft Yahei,Times New Roman,Times,serif;
    bottom: 0;
    right: 0;
    position: fixed;
    width: 400px;
    height: 120px;
    color: #fff;
    transition: background-color .5s,box-shadow .5s,left .4s,transform .4s
}

#CoreWrapper:hover {
    background-color: #000c
}

#CoreWrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

#CoreWrapper.dragging {
    transition: none!important
}

#CoreWrapper.dragging .song_name {
    cursor: grabbing!important
}

#CoreWrapper .operate_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 340px;
    padding: 20px
}

#CoreWrapper .operate_box .left_img {
    width: 85px;
    height: 85px;
    background-size: cover;
    background-position: center;
    user-select: none;
    -webkit-user-select: none
}

#CoreWrapper .operate_box .right_operate {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    flex: 1;
    height: 100%;
    padding-left: 10px;
    user-select: none
}

#CoreWrapper .operate_box .right_operate .song_name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 700
}

#CoreWrapper .operate_box .right_operate .song_name .name {
    width: 120px;
    padding-right: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

#CoreWrapper .operate_box .right_operate .song_name .time {
    font-size: 13px
}

#CoreWrapper .operate_box .right_operate .song_name:hover {
    cursor: grab
}

#CoreWrapper .operate_box .right_operate .operation_button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px
}

#CoreWrapper .operate_box .right_operate .operation_button .iconfont {
    font-size: 22px;
    cursor: pointer
}

#CoreWrapper .operate_box .slider {
    position: relative;
    height: 20px
}

#CoreWrapper .operate_box .slider .track,#CoreWrapper .operate_box .slider .active_track {
    position: absolute;
    height: 6px;
    cursor: pointer
}

#CoreWrapper .operate_box .slider .track {
    top: 10px;
    width: 100%;
    background-color: #ffffff4d
}

#CoreWrapper .operate_box .slider .active_track {
    width: 30%;
    background-color: #fff
}

#CoreWrapper .operate_box .slider .thumb {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 8px;
    left: 30%;
    background-color: #fff;
    border-radius: 50vh
}

#CoreWrapper .left_arrow,#CoreWrapper .right_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -1px;
    width: 30px;
    height: 100%;
    background-color: #000c;
    background-image: linear-gradient(90deg,rgba(99,99,99,.1),rgba(99,99,99,.1) 1px,transparent 0,transparent),linear-gradient(90deg,hsla(0,0%,100%,.1) -20%,transparent 15%),linear-gradient(0deg,hsla(0,0%,100%,.1),transparent 25%);
    border-top: 1px solid hsla(0,0%,100%,.49411765);
    transition: transform .3s;
    cursor: pointer
}

#CoreWrapper .left_arrow .iconfont,#CoreWrapper .right_arrow .iconfont {
    font-size: 20px
}

#CoreWrapper .left_arrow {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-left: 1px solid hsla(0,0%,100%,.49411765)
}

#CoreWrapper .right_arrow {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-right: 1px solid hsla(0,0%,100%,.49411765)
}

#CoreWrapper.left {
    transform: translate(-30px)
}

#CoreWrapper.right {
    transform: translate(30px)
}

#CoreWrapper.hidden.left {
    transform: translate(calc(-100% + 30px))
}

#CoreWrapper.hidden.right {
    transform: translate(calc(100% - 30px))
}

#CoreWrapper .show_list_button {
    position: absolute;
    left: 30px;
    right: 0;
    bottom: 0;
    width: calc(100% - 60px);
    height: 15px;
    text-align: center;
    opacity: 0;
    background-image: linear-gradient(transparent 0%,transparent 70%,#fff 100%);
    transition: opacity .3s;
    cursor: pointer
}

#CoreWrapper .show_list_button:hover {
    opacity: 1
}

#CoreWrapper .list_box {
    position: absolute;
    top: 100%;
    left: calc(30px + 2.5%);
    width: calc(95% - 60px);
    max-height: 250px;
    padding: 10px 0;
    background-color: #000000bf;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s,top .3s;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

#CoreWrapper .list_box::-webkit-scrollbar {
    width: 0;
    height: 0
}

#CoreWrapper .list_box .empty_tips {
    margin: 10px 0;
    font-weight: 700;
    text-align: center
}

#CoreWrapper .list_box .song_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 45px;
    padding: 0 20px;
    transition: background-color .3s
}

#CoreWrapper .list_box .song_item .title {
    width: 80%;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    user-select: none
}

#CoreWrapper .list_box .song_item .function_button {
    display: flex;
    opacity: 0;
    transition: opacity .3s;
    cursor: pointer
}

#CoreWrapper .list_box .song_item .function_button .iconfont {
    font-size: 20px;
    padding: 0 4px
}

#CoreWrapper .list_box .song_item.current:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 0 6px #fff
}

#CoreWrapper .list_box .song_item:hover {
    background-color: #fff2
}

#CoreWrapper .list_box .song_item:hover .function_button {
    opacity: 1
}

#CoreWrapper .list_box.show {
    top: 110%;
    opacity: 1;
    pointer-events: inherit
}

@font-face {
    font-family: iconfont;
    src: url(data:font/woff2;base64,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) format("woff2")
}

.iconfont {
    font-family: iconfont!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-24gl-volumeZero:before {
    content: "\ea0d"
}

.icon-24gl-volumeMiddle:before {
    content: "\ea0e"
}

.icon-24gl-nextCircle:before {
    content: "\ea6b"
}

.icon-24gl-pauseCircle:before {
    content: "\ea6d"
}

.icon-24gl-playCircle:before {
    content: "\ea6e"
}

.icon-24gl-previousCircle:before {
    content: "\ea73"
}

.icon-24gl-shuffle:before {
    content: "\ea75"
}

.icon-24gl-repeat2:before {
    content: "\ea76"
}

.icon-24gl-repeatOnce2:before {
    content: "\ea77"
}

.icon-24gl-trash2:before {
    content: "\eb45"
}

.icon-24gl-arrowDown3:before {
    content: "\eb69"
}

.icon-24gl-arrowLeft3:before {
    content: "\eb6a"
}

.icon-24gl-arrowRight:before {
    content: "\eb6b"
}

.icon-24gl-arrowRight3:before {
    content: "\eb6c"
}

.icon-24gl-arrowUp3:before {
    content: "\eb6d"
}