* {
    padding: 0;
    margin: 0;
    font-family: 'Sans-serif', sans-serif;
}

/* body {
    background-color: #2534a3;
} */

.center {
    position: absolute;
    width: 100%;
    /* top: 3%; */
    /* bottom: 100px; */
    /*height: 70%;*/
    height: 70%;
    height: -moz-calc(78% - 60px);
    height: -webkit-calc(78% - 60px);
    height: calc(78% - 60px);
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1600px;
    min-width: 1040px;
    margin: 0 auto;
}

.searchListItem li {
    list-style: none;
    display: list-item;
    height: 50px;
    line-height: 50px;
    max-height: 50px;
    border-bottom: 1px solid rgba(150, 150, 150, .0);
}

.btn {
    transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    position: relative;
    border-radius: 2px;
    /*border: 1px solid #fff;*/
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .9);
    opacity: .8;
    filter: alpha(opacity=80);
    cursor: pointer;
    font-size: 14px;
    padding: 6px 25px;
    margin: 0 2px;
}

.btn:hover {
    border: 1px solid #fff;
    opacity: 1;
    filter: alpha(opacity=100);
    color: #fff;
}

#lyricBox {
    height: 100%;
    width: 300px;
    padding: 10px;
    overflow-y: auto;
    color: #fff;
}

#songListBox {
    /* float: left; */
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    height: 100%;
    /* min-width: 400;
    width: 300px; */
    /* padding: 0 40px; */
    min-width: 233px;
    border-top: 1px solid rgba(150, 150, 150, .3);
    border-left: 1px solid rgba(150, 150, 150, .3);
    border-bottom: 1px solid rgba(150, 150, 150, .3);
}

#createNewSongListBtn {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_list_menu.png);
    background-image: -webkit-image-set(url(../img/icon_list_menu.png) 1x, url(../img/icon_list_menu@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: -120px -80px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 10px;
    /* position: relative; */
    /* right: 10px; */
    zoom: 0.75;
    /*兼容火狐*/
    -moz-transform: scale(0.75);
    -moz-transform-origin: top left;
    opacity: .8;
    filter: alpha(opacity=80);
}

#createNewSongListBtn:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

#manageSongListBtn {
    width: 36px;
    height: 36px;
    background-image: url(../img/manage.png);
    background-image: -webkit-image-set(url(../img/manage.png) 1x, url(../img/manage.png) 2x);
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 10px;
    /* position: relative; */
    /* right: 10px; */
    zoom: 0.75;
    /*兼容火狐*/
    -moz-transform: scale(0.75);
    -moz-transform-origin: top left;
    opacity: .8;
    filter: alpha(opacity=80);
}

#manageSongListBtn:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

#songListNameBox {
    height: 92%;
    /* overflow-y: auto; */
    border-top: 1px solid rgba(150, 150, 150, .3);
}

#songListBox li {
    /* width: 95%; */
    height: 40px;
    list-style: none;
    display: list-item;
    padding: 0 0 0 5px;
    line-height: 40px;
    font-size: 15px;
}

.songListSelect {
    background-color: rgba(255, 255, 255, .2);
}

#songListNameItem li .songListName {
    float: left;
    width: 100%;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: width 0.2s;
    -moz-transition: width 0.2s;
    -webkit-transition: width 0.2s;
    -o-transition: width 0.2s;
}

.songListNameMenu {
    /* float: left; */
    width: 0;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width 0.2s;
    -moz-transition: width 0.2s;
    -webkit-transition: width 0.2s;
    -o-transition: width 0.2s;
}

.songListNameMenuShow .songListName {
    width: 65% !important;
}

.songListNameMenuShow .songListNameMenu {
    width: 35% !important;
}

#searchListBox {
    /* float: left; */
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
    height: 100%;
    border: 1px solid rgba(150, 150, 150, .3);
    /* min-width: 1000px;
    width: 1000px;
    max-width: 1020px; */
    /* width: 100%; */
    /* min-width: 933px; */
    /* overflow-y: auto; */
}

.searchListHeaderNumber,
.searchListNumber,
.searchListHeaderPlatform,
.searchListPlatform,
.searchListHeaderName,
.searchListName,
.searchListNameTxt,
.searchListHeaderMenu,
.searchListMenu,
.searchListHeaderSinger,
.searchListSinger,
.searchListHeaderAlbum,
.searchListAlbum,
.searchListHeaderTime,
.searchListTime {
    display: inline-block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchListHeaderNumber,
.searchListNumber {
    width: 4%;
    /*padding: 14px 5px;*/
    text-align: center;
}

.searchListHeaderPlatform,
.searchListPlatform {
    width: 4%;
    /*padding: 14px 5px;*/
    /* text-align: center; */
}

.searchListHeaderName,
.searchListName {
    /* width: 31%; */
    width: 46%;
    /*padding: 14px 0;*/
}

.searchListNameTxt {
    max-width: 100%;
    vertical-align: bottom;
}

.searchListNameHasMv {
    max-width: 90%;
    max-width: -moz-calc(100% - 25.84px);
    max-width: -webkit-calc(100% - 25.84px);
    max-width: calc(100% - 25.84px);
}

.searchListName .searchListSubtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    position: absolute;
    display: block;
    height: 12px;
    line-height: 12px;
    margin-top: -10px;
}

.searchListHeaderMenu,
.searchListMenu {
    /* width: 15%; */
    width: 0;
    /* visibility: hidden; */
}

.searchListMenuShow {
    color: rgba(255, 255, 255, .85);
}

.searchListMenuShow .searchListName {
    /*写给不支持calc()的浏览器*/
    width: 30%;
    width: -moz-calc(46% - 140px);
    width: -webkit-calc(46% - 140px);
    width: calc(46% - 140px);
}

.searchListMenuShow .searchListMenu {
    /*写给不支持calc()的浏览器*/
    width: 16%;
    width: -moz-calc(140px);
    width: -webkit-calc(140px);
    width: calc(140px);
}


/* .searchListMenuShow {
    visibility: visible;
} */


/* .searchListMenuHide {
    visibility: hidden;
} */

.searchListHeaderMenu {
    /*padding: 14px 0;*/
}

.searchListMenu .list_menu__item {
    margin-top: 8px;
}

.searchListHeaderSinger,
.searchListSinger {
    width: 15%;
    /*padding: 14px 0;*/
}

.searchListSinger .singer {
    cursor: pointer;
}

.searchListHeaderAlbum,
.searchListAlbum {
    width: 22%;
    /*padding: 14px 0;*/
}

.searchListHeaderTime,
.searchListTime {
    /* float: left; */
    width: 5%;
    /*padding: 14px 0;*/
}

#searchListShowMoreBtn,
#searchListShowMoreNoneBtn,
#searchListShowMoreLoadingBtn {
    display: none;
}

.searchListShowMore {
    cursor: pointer;
}

.searchListShowMore:hover {
    color: #fff;
}

.searchListShowMore,
.searchListShowMoreNone,
.searchListShowMoreLoading {
    text-align: center;
    width: 100%;
    /*padding: 14px 0;*/
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}

.searchListShowMoreLoading {
    /*padding: 10px 0;*/
}

.searchListTimeAndDelete .list_menu__icon_delete {
    display: none;
}

.searchListDeleteShow .searchListTime {
    display: none;
}

.searchListDeleteShow .list_menu__icon_delete {
    display: inline-block;
    margin-top: 5px;
}

.searchListAlbum span {
    cursor: pointer;
}

.bg_player,
.bg_player_mask,
body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg_player,
.bg_player_mask {
    position: fixed;
    top: 0;
    left: 0;
}

.bg_player_mask {
    background-color: #292a2b;
    background-color: rgba(0, 0, 0, .35);
    z-index: -1;
}

.bg_player {
    z-index: -2;
    /* display: none; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    /*opacity: .6;*/
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    display: block;
    background-image: url(../img/default_bg_3.jpg);
    transition: all .8s
}

.list_menu__item {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top
}

.list_menu__icon_add,
.list_menu__icon_delete,
.list_menu__icon_down,
.list_menu__icon_edit,
.list_menu__icon_pause,
.list_menu__icon_play,
.list_menu__icon_share {
    width: 36px;
    height: 36px;
    background-image: url(../img/icon_list_menu.png);
    background-image: -webkit-image-set(url(../img/icon_list_menu.png) 1x, url(../img/icon_list_menu@2x.png) 2x);
    background-repeat: no-repeat
}

.list_menu__icon_play {
    background-position: -80px 0
}

.list_menu__icon_pause {
    background-position: -80px -200px
}

.list_menu__icon_share {
    background-position: -80px -40px
}

.list_menu__icon_add {
    background-position: -80px -80px
}

.list_menu__icon_down {
    background-position: -80px -120px
}

.list_menu__icon_edit {
    background-position: -80px -240px
}

.list_menu__icon_delete {
    background-position: -80px -160px
}

@media (max-width: 1240px) {
    .list_menu__item {
        margin-right: 5px
    }

    .searchListMenuShow .searchListName {
        /*写给不支持calc()的浏览器*/
        width: 30%;
        width: -moz-calc(46% - 125px);
        width: -webkit-calc(46% - 125px);
        width: calc(46% - 125px);
    }

    .searchListMenuShow .searchListMenu {
        /*写给不支持calc()的浏览器*/
        width: 16%;
        width: -moz-calc(125px);
        width: -webkit-calc(125px);
        width: calc(125px);
    }
}

.songlist__item--enable .list_menu__item {
    cursor: pointer;
}

.songlist__item--enable .list_menu__icon_play:hover {
    background-position: -120px 0
}

.songlist__item--enable .list_menu__icon_pause:hover {
    background-position: -120px -200px
}

.songlist__item--enable .list_menu__icon_share:hover {
    background-position: -120px -40px
}

.songlist__item--enable .list_menu__icon_add:hover {
    background-position: -120px -80px
}

.songlist__item--enable .list_menu__icon_down:hover {
    background-position: -120px -120px
}

.songlist__item--enable .list_menu__icon_edit:hover {
    background-position: -120px -240px
}

.songlist__item--enable .list_menu__icon_delete:hover {
    background-position: -120px -160px
}

.songlist__item--disable .list_menu__item {
    cursor: default
}

.songlist__item--disable .list_menu__icon_play {
    background-position: -160px 0;
}

.songlist__item--disable .list_menu__icon_pause {
    background-position: -160px -200px
}

.songlist__item--disable .list_menu__icon_share {
    background-position: -160px -40px
}

.songlist__item--disable .list_menu__icon_add {
    background-position: -160px -80px
}

.songlist__item--disable .list_menu__icon_down {
    background-position: -160px -120px
}

.songlist__item--disable .list_menu__icon_edit {
    background-position: -160px -240px
}


/* .songlist__item--disable .list_menu__icon_delete,
.songlist__item--disable .list_menu__item:hover {
    background-position: -160px -160px
} */

#addToSongListBox {
    max-height: 200px;
    width: 168px;
    padding: 5px 0;
    position: absolute;
    z-index: 3;
    /* color: #fff; */
    background-color: rgba(255, 255, 255, .9);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* overflow-y: auto; */
    display: none;
    outline: none
}

#addToSongListBox li {
    display: block;
    height: 36px;
    line-height: 36px;
    padding-left: 30px;
    padding-right: 15px;
    margin-bottom: 1px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    list-style: none;
}

#addToSongListBox li:hover {
    background-color: rgba(167, 167, 167, 0.699);
    cursor: pointer;
}

#createNewSongList {
    font-size: 14px;
    color: rgb(87, 87, 87);
}

.downloadSongQualityText {
    display: inline-block;
    vertical-align: -4px;
    /* line-height: 36px; */
}

#downloadSongBox {
    display: none;
    padding: 20px;
}

#downloadSongName {
    padding: 0 0 10px 0;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    list-style: none;
}

.downloadBtnBox {
    /* text-align: center; */
    margin: 10px 0;
    width: 100%;
}

.downloadBtnBox .downloadBtnBoxShare {
    width: 20%;
    text-align: right;
    float: left;
}

.downloadBtnBox .downloadBtnBoxStart {
    width: 30%;
    text-align: right;
    float: left;
}

.downloadBtnBox .downloadBtnBoxEnd {
    /* width: 50%; */
    text-align: center;
}

.songListNameMenu .list_menu__item {
    zoom: 0.75;
    vertical-align: middle;
    /*兼容火狐*/
    -moz-transform: scale(0.75);
    -moz-transform-origin: top left;
}

#key {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.btn_big_down,
.btn_big_like,
.btn_big_next,
.btn_big_only,
.btn_big_play,
.btn_big_prev,
.btn_big_style_list,
.btn_big_style_order,
.btn_big_style_random,
.btn_big_style_single,
.btn_big_style_all_random,
.btn_big_voice,
.btn_lang,
.mod_btn_comment,
.player_progress__dot {
    position: absolute;
    background-image: url(../img/player.png);
    background-image: -webkit-image-set(url(../img/player.png) 1x);
    opacity: .8;
    filter: alpha(opacity=80);
}

.btn_big_down:hover,
.btn_big_like:hover,
.btn_big_next:hover,
.btn_big_only:hover,
.btn_big_play:hover,
.btn_big_prev:hover,
.btn_big_style_list:hover,
.btn_big_style_order:hover,
.btn_big_style_random:hover,
.btn_big_style_single:hover,
.btn_big_style_all_random:hover,
.btn_big_voice:hover,
.mod_btn_comment:hover {
    opacity: 1;
    filter: none
}

.btn_big_prev {
    top: 4px;
    left: 0;
    width: 19px;
    height: 20px;
    background-position: 0 -30px
}

.mod_btn_comment {
    top: 5px;
    right: 353px;
    width: 24px;
    height: 24px;
    background-position: 0 -400px;
}

.btn_big_play {
    top: 0;
    left: 65px;
    width: 21px;
    height: 29px;
    background-position: 0 0
}

.btn_big_play--pause {
    background-position: -30px 0
}

.btn_big_next {
    top: 4px;
    left: 132px;
    width: 19px;
    height: 20px;
    background-position: 0 -52px
}

.btn_big_like {
    top: 4px;
    right: 330px;
    width: 23px;
    height: 21px;
    background-position: 0 -96px
}

.btn_big_like--like {
    background-position: -30px -96px
}

.btn_big_down {
    top: 4px;
    /* right: 286px; */
    right: 283px;
    width: 22px;
    height: 21px;
    background-position: 0 -120px
}

.btn_big_voice {
    top: 4px;
    left: -31px;
    width: 26px;
    height: 21px;
    background-position: 0 -144px
}

.btn_big_voice--no {
    background-position: 0 -182px
}

.btn_big_style_random {
    top: 6px;
    right: 317px;
    /* right: 378px; */
    width: 25px;
    height: 19px;
    background-position: 0 -74px
}

.btn_big_style_order {
    top: 4px;
    right: 316px;
    /* right: 377px; */
    width: 23px;
    height: 20px;
    background-position: 0 -260px
}

.btn_big_style_single {
    top: 4px;
    right: 317px;
    /* right: 378px; */
    width: 26px;
    height: 25px;
    background-position: 0 -232px
}

.btn_big_style_list {
    top: 4px;
    right: 317px;
    /* right: 378px; */
    width: 26px;
    height: 25px;
    background-position: 0 -205px
}

.btn_big_style_all_random {
    top: 4px;
    right: 317px;
    position: absolute;
    width: 24px;
    height: 24px;
    background-position: 0 -520px
}

.btn_big_only {
    top: 3px;
    right: 217px;
    width: 74px;
    height: 26px;
    background-position: 0 -282px
}

.btn_big_only--on {
    background-position: 0 -311px
}

.player__ft {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
}

.player_music {
    position: relative;
    margin: 0 475px 0 200px;
}

.player_music__info {
    padding-right: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.player_music__time {
    position: absolute;
    top: 0;
    right: 0
}

.player_progress {
    padding-top: 6px;
    height: 8px;
    cursor: pointer
}

.player_progress__inner {
    position: relative;
    height: 2px;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=true, startColorstr=#19FFFFFF, endColorstr=#19FFFFFF);
    background: rgba(255, 255, 255, .1)
}

.player_progress__load {
    height: 2px;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=true, startColorstr=#33FFFFFF, endColorstr=#33FFFFFF);
    background: rgba(255, 255, 255, .2)
}

.player_progress__play {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=true, startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);
    background: rgba(255, 255, 255, .7)
}

.player_progress__dot {
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background-position: 0 -170px;
    opacity: 1;
    filter: none
}

.player_voice {
    position: absolute;
    top: 0;
    right: 95px;
    width: 80px;
    padding-top: 13px
}

.songlist__item--playing {
    color: rgb(255, 255, 255);
}

.songlist__item--playing .searchListNumber {
    /* position: absolute; */
    /* top: 50%; */
    /* left: 40px; */
    /* margin-top: -5px; */
    /* width: 10px; */
    /* height: 10px; */
    background: url(../img/wave.gif) 0 0 no-repeat;
    background-position: center center;
    text-indent: -200px;
    /* overflow: hidden; */
}

.songlist__item--playing .songlist__item--enable .list_menu__icon_play {
    background-position: -80px -200px;
}

.songlist__item--playing .songlist__item--enable .list_menu__icon_play:hover {
    background-position: -120px -200px;
}

#songListNameItem .songListPlaying {
    text-shadow: 0 0 8px #fff, 0 0 20px rgb(108, 201, 193);
    color: #fff;
}

#sim_song_info,
#time_show {
    color: rgba(255, 255, 255, .9);
}

#sim_song_info:hover {
    color: #fff;
}

.player_lyric {
    position: absolute;
    bottom: 55px;
    left: 0;
    width: 100%;
    height: 15%;
    /*写给不支持calc()的浏览器*/
    /* height: 21%; */
    height: -moz-calc(22% - 60px);
    height: -webkit-calc(22% - 60px);
    height: calc(22% - 60px);
}

.albumImgShow {
    height: 100%;
    min-width: 233px;
}

.albumImgBox {
    text-align: left;
    top: 50%;
    /* margin-top: 3%; */
    height: 100%;
    display: flex;
    align-items: center;
}

#albumImg {
    max-width: 100%;
    max-height: 90%;
    border: 1px solid rgba(150, 150, 150, .3);
}

.lyricShow {
    height: 100%;
    color: rgba(255, 255, 255, .7);
}

.lyric-item {
    height: 100%;
    display: table;
    /* position: relative; */
}

#lyric-first {
    text-align: right;
    display: table-cell;
    vertical-align: top;
    /* position: absolute;
    top: 0px; */
}

#lyric-second {
    text-align: left;
    display: table-cell;
    vertical-align: bottom;
    /* position: absolute; */
    /* bottom: 0px;
    text-align: center; */
}

.lyric-playing {
    color: rgb(109, 241, 241);
}

.player_lyric_btn,
.player_mv_btn,
.player_quality {
    position: absolute;
    top: 4px;
    height: 21px;
    line-height: 21px;
    opacity: .8;
    color: #fff;
    filter: alpha(opacity=80);
    border: 2px solid #fff;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.player_quality {
    right: 217px;
    width: 50px;
    font-size: 12px;
}

.player_lyric_btn {
    right: 388px;
    width: 35px;
    font-size: 12px;
}

.player_mv_btn {
    right: 435px;
    width: 30px;
    font-size: 12px;
    color: gray;
    border-color: gray;
}

.player_mv_btn_enable {

    color: #fff;
    border-color: #fff;
}

.player_mv_btn_enable:hover,
.player_lyric_btn:hover,
.player_quality:hover {
    opacity: 1;
    filter: none
}

#player_quality_panel {
    /* z-index: 100; */
    /* max-height: 275px; */
    /* max-width: 150px; */
    padding: 5px 0 5px 5px;
    position: absolute;
    z-index: 3;
    color: #fff;
    background-color: rgba(0, 0, 0, .15);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-y: auto;
    display: none;
    outline: none;
    /* bottom: 60px; */
}

#lyricTypeOne {
    font-size: 25px;
    display: none;
    overflow: hidden;
}

#lyricTypeTwoContentBox {
    overflow: hidden;
    height: 100%;
}

#lyricTypeTwoContent {
    /*height: 100%;*/
    text-align: center;
    font-size: 25px;
    /*overflow: hidden;*/
    line-height: 35px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#setting {
    position: absolute;
    right: 5px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: .8;
    filter: alpha(opacity=80);
    transition: All 0.5s ease-in-out;
    -webkit-transition: All 0.5s ease-in-out;
    -moz-transition: All 0.5s ease-in-out;
    -o-transition: All 0.5s ease-in-out;
}

#setting:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

#alarm {
    position: absolute;
    right: 40px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: .8;
    filter: alpha(opacity=80);
}

#alarm:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

#alarm_panel {
    display: none;
    width: 250px;
    padding: 10px 0
}

#alarm_panel li {
    list-style: none;
    display: list-item;
    line-height: 35px;
    cursor: pointer;
    padding: 0 0 0 20px;
}

#alarm_panel li:hover {
    background-color: rgba(167, 167, 167, 0.699);
}

#alarm_panel .seleted {
    background-image: url(../img/selected.png);
    background-image: -webkit-image-set(url(../img/selected.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: 75%;
}

#alarmRestTime {
    color: red;
    font-size: 14px;
    padding: 0 0 5px 20px;
}

#userIcon {
    position: absolute;
    right: 75px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    opacity: .8;
    filter: alpha(opacity=80);
}

#userIcon:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

#userBox {
    display: none;
}

#successPanel {
    padding: 25px;
}

.userNameBox {
    padding-left: 8%;
    padding-bottom: 10px;
    font-size: 16px;
}

#userName {
    font-size: 20px;
}

.loginSuccess #successPanel {
    display: block;
}

.loginSuccess #failPanel {
    display: none;
}

#searchListBox > div.optiscroll-v > b {
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    width: 4px;
    right: 4px;
    box-shadow: 0 0 0 #FFF;
}

#songListNameBox > div.optiscroll-v > b {
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    width: 4px;
    right: 4px;
    box-shadow: 0 0 0 #FFF;
}

#addToSongListBox > div.optiscroll-v > b {
    cursor: pointer;
    width: 4px;
    right: 4px;
    box-shadow: 0 0 0 #FFF;
}

#update_panel {
    display: none;
    padding: 20px;
}

#update_title {
    font-size: 22px;
    text-align: center;
}

#update_content {
    font-size: 14px;
    line-height: 24px;
    height: 160px;
    overflow: auto;
}

#update_describe {
    font-size: 14px;
    line-height: 24px;
    margin-top: 10px;
    height: 50px;
    overflow: auto;
}

#update_progress {
    padding-top: 10px;
}

.player__head {
    margin-top: 20px;
    height: 40px;
}

#platformListFilter .layui-input {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.smallicon {
    /* display: inline-block; */
    width: auto;
    height: auto;
    padding: 1px 2px;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 8px;
}

.smallIcon {
    display: inline-block;
    /* width: auto; */
    /* height: auto; */
    padding: 0 2px;
    border: 1px solid rgb(47, 236, 30);
    color: rgb(47, 236, 30);
    border-radius: 5px;
    font-size: 12px;
    line-height: 12px;
    opacity: .8;
    filter: alpha(opacity=80);
    cursor: pointer;
}

.songQualitySqIcon {
    border: 1px solid rgb(255, 166, 0);
    color: rgb(255, 166, 0);
}

.songQualityDTSIcon {
    border: 1px solid rgb(255, 30, 0);
    color: rgb(255, 30, 0);
}

.mvIcon {
    opacity: .8;
    filter: alpha(opacity=80);
    display: inline-block;
}

.mvIcon:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.search_suggest_highlight {
    color: #31c27c;
}

#change_platform_panel {
    display: none;
    padding: 20px;
}

#change_platform_progress_text {
    font-size: 14px;
    line-height: 24px;
    height: 50px;
    overflow: auto;
}

#change_platform_err_text {
    font-size: 14px;
    line-height: 24px;
    margin-top: 10px;
    /*max-height: 200px;*/
    overflow: auto;
}

.lyric_fullscreen_btn_box {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 32px;
    height: 32px;
}

#lyric_fullscreen_enter, #lyric_fullscreen_exit {
    opacity: 0.2;
    filter: alpha(opacity=20);
    width: 32px;
    height: 32px;
    transition: opacity 0.25s ease;
}

#lyric_fullscreen_exit {
    display: none;
}

#lyric_fullscreen_enter:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    display: block;
}

/*uc浏览器、夸克 背景不对 设置透明*/
.lyric_enter_fullscreen {
    background: transparent;
}

.lyric_enter_fullscreen #lyric_fullscreen_enter {
    display: none;
}

.lyric_enter_fullscreen #lyric_fullscreen_exit {
    display: block;
}

.lyric_enter_fullscreen #lyric_fullscreen_exit:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    display: block;
}

.lyric_enter_fullscreen .bg_player_mask {
    display: block !important;
}

.lyric_enter_fullscreen .bg_player_img {
    display: block !important;
}

#lyricTypeTwo .bg_player_mask {
    display: none;
}

#lyricTypeTwo .bg_player_img {
    display: none;
}

#comment_panel {
    display: none;
}

.comment {
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #fff;
}

.comment .comment-list {
    height: 100%;
    padding: 0 10px;
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
    -webkit-overflow-scrolling: touch;
}

.comment .comment-list .comment-title {
    height: 34px;
    line-height: 34px;
    padding: 10px 0;
    color: #fff;
    border-bottom: 1px solid hsla(0, 0%, 100%, .8)
}

.comment .comment-list .comment-item {
    position: relative;
    padding: 15px 0 15px 55px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.comment .comment-list .comment-item .comment-item-pic {
    display: block;
    position: absolute;
    left: 0;
    top: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
}

.comment .comment-list .comment-item .comment-item-title {
    height: 20px;
    margin-bottom: 6px;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
}

.comment .comment-list .comment-item .comment-item-content {
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 25px;
    text-align: justify;
    color: hsla(0, 0%, 100%, .6);
}

.comment .comment-list .comment-item .comment-item-content img {
    position: relative;
    vertical-align: middle;
    top: -2px;
}

.comment .comment-list .comment-item .comment-item-content .emoji {
    height: 24px;
    width: 24px;
}

.comment .comment-list .comment-item .comment-item-replied {
    padding: 8px 19px;
    margin-top: 10px;
    line-height: 20px;
    border: 1px solid hsla(0, 0%, 100%, .3);
    color: hsla(0, 0%, 100%, .6);
}

.comment .comment-list .comment-item .comment-item-replied a {
    color: #fff;
}

.comment .comment-list .comment-item .comment-item-opt {
    margin-top: 10px;
    line-height: 25px;
    text-align: right;
    overflow: hidden;
}

.comment .comment-list .comment-item .comment-item-opt .comment-opt-date {
    float: left;
    line-height: 28px;
    color: hsla(0, 0%, 100%, .8);
}

.comment .comment-list .comment-item .comment-item-opt .comment-opt-liked {
    display: inline-block;
    height: 20px;
    line-height: 20px;
}

.comment_show_more {
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    font-size: 20px;
    display: none;
    opacity: .7;
    filter: alpha(opacity=70);
}

.comment_show_more:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.comment-title, #hot_comment_list, #normal_comment_list, .comment_show_more {
    padding-right: 15px;
}

#comment_list > div.optiscroll-v > b {
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    width: 4px;
    right: 4px;
    box-shadow: 0 0 0 #FFF;
}


.lyric_fullscreen_control_box {
    position: absolute;
    bottom: 10px;
    left: -120px;
    height: 32px;
    width: 150px;
    background-color: rgba(255, 255, 255, 0.1);
    display: none;
    /*text-align: left;*/
}

.lyric_fullscreen_control_item {
    position: absolute;
    background-image: url(../img/fullsreen_control.png);
    background-image: -webkit-image-set(url(../img/fullsreen_control.png) 1x);
    opacity: .8;
    filter: alpha(opacity=80);
    display: inline-block;
}

.lyric_fullscreen_control_item:hover {
    opacity: 1;
    filter: none;
}

.lyric_fullscreen_control_item_play {
    left: 45px;
    width: 32px;
    height: 32px;
    background-position: -40px 0
}

.lyric_fullscreen_control_item_play--pause {
    background-position: 0 0
}

.lyric_fullscreen_control_item_prev {
    left: 5px;
    width: 32px;
    height: 32px;
    background-position: 0 -40px
}

.lyric_fullscreen_control_item_next {
    left: 85px;
    width: 32px;
    height: 32px;
    background-position: -40px -40px
}

.lyric_fullscreen_control_item_spread {
    left: 130px;
    width: 32px;
    height: 32px;
    background-position: -40px -80px
}

.lyric_fullscreen_control_item_collapse {
    background-position: 0 -80px
}

#platformListFilter .layui-form-select dl {
    max-height: 380px;
}


.grab {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

.grabbing {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

#lyricDragLine {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 0;
    z-index: -1;
    display: none;
}

#lyricDragLine hr {
    position: absolute;
    width: 70%;
    left: 15%;
    background-color: transparent;
    height: 0;
    margin: 0 0;
    border: 2px dashed rgba(255, 255, 255, .3);
}

#lyricDragTimeBox {
    position: absolute;
    top: calc(50% - 12px);
    left: 87%;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#lyricDragTimeBox:hover {
    color: rgba(255, 255, 255, .8);
}

#lyricDragTime {
    font-size: 20px;
}

#lyricDragTimeBox i {
    font-size: 20px;
}

.lyric_drag_show{
    display: none;
}