@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfPI42ohvTobdw.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfPI42ogvTobdw.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfPI42ouvTo.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfPk5GohvTobdw.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfPk5GogvTobdw.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfPk5GouvTo.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfOA5WohvTobdw.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfOA5WogvTobdw.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfOA5WouvTo.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfOc5mohvTobdw.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfOc5mogvTobdw.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfOc5mouvTo.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfO452ohvTobdw.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfO452ogvTobdw.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHsv4kjgoGqM7E_CfO452ouvTo.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3_-gs6FospT4.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3_-gs6VospT4.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3_-gs51os.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E30-8s6FospT4.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E30-8s6VospT4.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E30-8s51os.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3t-4s6FospT4.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3t-4s6VospT4.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3t-4s51os.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3q-0s6FospT4.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3q-0s6VospT4.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3q-0s51os.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3j-ws6FospT4.woff2) format('woff2');
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3j-ws6VospT4.woff2) format('woff2');
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Barlow;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://www.myfreemp3.com.cn/static/css/7cHqv4kjgoGqM7E3j-ws51os.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

* {
    outline: 0!important
}

html {
    overscroll-behavior-y: none;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-color: hsla(0,0%,60%,.3) transparent;
    scrollbar-width: thin
}

#main .aplayer,body,html {
    font-family: Barlow,-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif
}

body {
    padding-right: 0!important;
    font-size: 13px
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-thumb {
    background: #636e72;
    border-radius: 8px
}

::-webkit-scrollbar-track {
    background: #d6dadc
}

li,ol,ul {
    margin: 0;
    padding: 0;
    list-style: none
}

a {
    cursor: pointer
}

a:hover {
    text-decoration: none
}

.with-play-bar .nav-bar {
    bottom: 56px
}

.nav-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    user-select: none;
    border-right: 1px solid #dee2e6
}

.nav-bar::-webkit-scrollbar {
    width: 2px
}

.navBar-logo {
    padding: 16px 30px;
    color: #222;
    font-size: 30px;
    font-weight: 600
}

.navBar-logo span {
    color: #f90251
}

.navBar-group {
    display: block;
    margin: 0 32px;
    padding: 0 8px;
    height: 40px;
    line-height: 40px;
    color: #212121!important;
    opacity: .7;
    transition: opacity .3s
}

.navBar-group:hover {
    opacity: 1;
    color: #283149
}

.head.navBar-group,.head.navBar-group:hover {
    opacity: 1;
    color: grey!important;
    cursor: default
}

.navBar-group i {
    display: inline-block;
    width: 40px;
    vertical-align: middle;
    font-size: 21px;
    color: #283149
}

.navBar-current {
    opacity: 1;
    pointer-events: none;
    background-color: #f5f5f7
}

.navBar-current i,.navBar-current span {
    font-weight: 700
}

.Rootlist {
    margin: 8px 0
}

.m-nav-bar {
    display: none;
    width: 100%;
    height: 40px;
    background: #f4f9fc;
    user-select: none;
    bottom: 0;
    position: fixed
}

.m-nav-bar ul {
    display: flex;
    list-style: none
}

.m-navBar-group {
    overflow: hidden;
    text-align: center;
    line-height: 40px;
    flex: 1
}

.m-navBar-current {
    font-weight: 700;
    pointer-events: none;
    color: #f90251
}

.main-view {
    padding: 0 0 20px 250px
}

.navbar {
    margin-bottom: 20px;
    height: 50px;
    z-index: 9
}

.navbar a {
    color: #212529;
    transition: .3s
}

.navbar a:hover {
    color: #f90251
}

.navbar i {
    font-size: 20px
}

.dropdown-menu {
    border: solid 1px #eee;
    box-shadow: 0 0 30px 0 rgba(82,63,105,.2)
}

.nickname .dropdown-menu {
    display: block;
    left: auto;
    right: 0;
    margin-top: -1px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-out 0s
}

.nickname.dropdown:hover>.dropdown-menu {
    opacity: 1;
    visibility: visible
}

.navbar .dropdown-toggle::after {
    display: none
}

.navbar .nav-link {
    padding: 0 .5rem
}

#search {
    flex: 0;
    width: 100%;
    border-bottom: solid 1px #f4f6fb
}

#search .input-group-append {
    margin-left: 0
}

#search .input-group .custom-select {
    -ms-flex: none;
    flex: none;
    width: auto;
    border-right: none
}

.left-side {
    display: none;
    overflow-x: hidden;
    width: 50%
}

.right-side {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.right-side::-webkit-scrollbar {
    width: 0
}

.right-row {
    padding-top: 70px;
    max-width: 400px;
    margin: 0 auto;
    overflow: visible
}

.aplayer-list,.aplayer-list ol {
    max-height: none!important
}

#player .aplayer-list {
    display: block
}

#player .aplayer-list-index {
    display: inline-block;
    width: 30px;
    text-align: center;
    color: #283149;
    font-weight: 700
}

/*#player .aplayer-list-light .aplayer-list-index{background:url(https://ae01.alicdn.com/kf/H03a170fafaf442e0ba58cc493c8d8c05A.jpg) no-repeat center center;-webkit-filter:invert(100%);filter:invert(100%);font-size:0;height:54px}*/
a {
    text-decoration: none
}

#player .form-check-input {
    position: relative;
    vertical-align: middle;
    margin-top: 0
}

.aplayer-list-download,.aplayer-list-time {
    float: right;
    width: 40px;
    text-align: center;
    color: #212529
}

#audioPage .aplayer {
    margin: 0;
    box-shadow: none
}

#player .aplayer-list ol li .aplayer-list-author {
    color: #212529
}

#player .aplayer-list ol li .aplayer-list-title {
    font-weight: 700
}

#player .aplayer-list ol li {
    font-size: 14px;
    height: 62px;
    line-height: 62px;
    padding: 0 5px 0 10px;
    border-top: none;
    border-radius: 12px
}

#player .aplayer-list-cur {
    top: 10px;
    bottom: 10px;
    height: auto
}

#player .aplayer-list-light,#player li:hover {
    background-color: rgba(255,2,81,.05);
    color: #f90251
}

.aplayer-more {
    height: 60px;
    text-align: center;
    font-size: 12px;
    line-height: 60px;
    cursor: pointer
}

.aplayer-more:hover {
    background-color: rgba(0,0,0,.05)
}

.aplayer-lyrics-container {
    background: rgba(233,236,239,.7);
    width: 100%;
    position: absolute;
    height: 30px;
    line-height: 30px;
    top: -30px;
    text-align: center;
    left: 0;
    font-size: 18px;
    display: none;
    pointer-events: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px)
}

#play-bar .aplayer-icon-speed {
    font-size: 13px
}

.pb-control-right {
    display: flex;
    align-items: center;
    float: right;
    right: 0;
    height: 56px;
    padding: 0 12px;
    border-left: solid 1px #d9d9da
}

.aplayer .pb-control-right button {
    margin: 0 10px;
    width: 18px;
    height: 18px;
    opacity: 1
}

.aplayer .pb-control-right button svg path {
    fill: #283149
}

.ap-volume-bar {
    height: 4.3px;
    width: 90px;
    cursor: pointer;
    margin: 0 10px 0 5px
}

.ap-volume-bar-value {
    transition: none;
    background-color: #fe444b
}

.pb-icon-volume-down {
    margin: 0 0 0 10px
}

#play-bar {
    overflow: visible;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: none;
    margin: 0;
    height: 56px;
    background: #f6f6f8;
    border-top: 1px solid #d9d9da!important
}

#play-bar .pb-control {
    min-width: 162px;
    padding: 0 12px;
    float: left;
    height: 56px;
    border-right: solid 1px #d9d9da
}

#play-bar .pb-control svg {
    width: 34px;
    margin: 0 10px;
    opacity: .7;
    cursor: pointer
}

#play-bar .pb-control svg:hover {
    opacity: 1
}

#play-bar .pb-control svg path {
    fill: #283149
}

#play-bar .aplayer-info {
    border-bottom: none
}

#play-bar .aplayer-thumb {
    -webkit-transform: none;
    transform: none;
    height: 12px;
    width: 12px
}

#play-bar .aplayer-time-inner {
    line-height: 17px
}

#play-bar .aplayer-controller {
    align-items: center
}

#play-bar .aplayer-time {
    color: #283149;
    font-size: 13px;
    bottom: 3px
}

#play-bar .aplayer-music {
    margin-bottom: 0
}

#play-bar .aplayer-author {
    color: #283149
}

.TLH_body .play-lrc .aplayer-lrc {
    max-height: 140px;
    height: auto;
    overflow-y: scroll;
    margin: 0
}

.TLH_body .aplayer-lrc .aplayer-lrc-contents {
    height: 100%;
    transform: none!important
}

.TLH_body .play-lrc .aplayer-lrc .aplayer-lrc-current {
    opacity: 1
}

.TLH_body .play-lrc .aplayer-lrc p {
    opacity: .6;
    line-height: 20px!important;
    height: 20px!important;
    font-size: 16px
}

.TLH_body .play-lrc .aplayer-lrc::after,.TLH_body .play-lrc .aplayer-lrc::before {
    width: 0
}

#play-bar .aplayer-time .aplayer-icon {
    color: #283149
}

#play-bar .aplayer-time .aplayer-icon path {
    fill: #283149
}

#play-bar .aplayer-icon-menu {
    display: none
}

#play-bar.aplayer-withlrc .aplayer-pic {
    margin-left: 8px;
    top: 8px;
    height: 40px;
    width: 40px;
    border-radius: 5px
}

#play-bar .aplayer-bar {
    height: 4px;
    border-radius: 2.5px;
    background: #e7e7e7
}

#play-bar .aplayer-loaded {
    height: inherit;
    border-radius: inherit;
    background: #b9ddcf
}

#play-bar .aplayer-played {
    height: inherit;
    border-radius: inherit
}

.with-play-bar .main-view {
    padding-bottom: 100px
}

.TLH_body,.TLH_cover {
    padding: 0 30px
}

.cover-art {
    position: relative;
    padding-top: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    border-radius: 6px;
    overflow: hidden
}

.cover-art-image {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://ae01.alicdn.com/kf/H0b1fe467600f41c2a3495b1af0505aceM.jpg);
    background-size: cover;
    transition: all .3s ease
}

.mo-info {
    overflow: hidden;
    margin: 12px 0 4px;
    width: 100%;
    height: auto;
    text-align: center
}

.mo-info-name {
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.mo-info-by {
    display: none;
    padding-right: 8px;
    font-size: 14px;
    opacity: .6
}

.mo-meta {
    display: block;
    margin-bottom: 6px;
    text-align: center;
    font-size: 14px;
    opacity: .6
}

.TLH_button {
    text-align: center;
    margin-bottom: 20px
}

.btn-green {
    display: block;
    margin: 12px auto 0;
    padding: 11px 40px;
    min-width: 140px;
    border: none;
    border-radius: 8px;
    background-color: #f90251;
    text-indent: .4em;
    letter-spacing: .4em;
    font-size: 11px;
    color: #fff
}

.btn-green-disabled {
    opacity: .35;
    pointer-events: none
}

.btn-green:hover {
    background-color: #b81921
}

.btn-green:focus {
    box-shadow: inset 0 0 0 1px #b81921,inset 0 0 0 2px #f4f4f4
}

.EmptyState {
    float: left;
    padding: 2em 16px;
    width: 50%;
    text-align: center
}

.EmptyState .icon-kong {
    margin: 30px 0;
    font-size: 90px
}

.EmptyState h1 {
    margin: 0;
    font-weight: 700;
    line-height: 56px
}

#audioPage,#discoverPage,#empty,#fmPage,#listPage,#searchPage,#smartbox {
    display: none
}

.listwrapper {
    margin: -10px -5px;
    user-select: none;
    overflow: hidden
}

.listwrapper ul {
    overflow: hidden
}

.listwrapper li {
    margin-bottom: 16px;
    cursor: pointer;
    padding: 5px
}

.listwrapper .lw-img {
    box-shadow: rgba(0,0,0,.2) 0 12px 16px -8px;
    position: relative;
    padding-top: 100%;
    border-radius: 12px;
    transition: transform .3s;
    max-width: 200px;
    max-height: 200px
}

.listwrapper .lw-img:hover {
    transform: scale(1.02)
}

.listwrapper .lw-img::after {
    content: "";
    background: #eee url(https://ae01.alicdn.com/kf/Hd01fe22f39324e6691efd555b7035ebfH.jpg) 50% no-repeat;
    height: 100%;
    top: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
    border-radius: inherit
}

.listwrapper .lw-img img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit
}

.listwrapper .lw-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    background: rgba(0,0,0,.3);
    border-radius: 99px
}

.lw-collect {
    padding: 2px 5px 1px;
    margin: 0
}

.lw-collect.icon-heart-o {
    color: red
}

.lw-collect.icon-heart {
    color: #fff
}

.listwrapper .lw-title {
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 8px 5px
}

#hotkey span:nth-child(1) {
    float: right;
    margin-left: 2px;
    color: #b3b3b3
}

.key-group {
    overflow: hidden;
    margin: -8px -14px
}

.key-group a:hover {
    background-color: rgba(0,0,0,.05);
    color: #f90251
}

.key-list {
    color: #212529;
    float: left;
    overflow: hidden;
    padding: 8px 14px;
    width: 25%;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: .2s
}

#historykey {
    margin: 0 0 -.5rem
}

.historykey {
    font-size: .75rem;
    padding: .375rem .875rem;
    width: auto!important;
    background-color: #f4f6fb;
    border-radius: 4rem;
    margin-right: .5rem;
    margin-bottom: .5rem
}

footer {
    margin-top: 15px;
    padding-top: 15px
}

#msg {
    padding: 10px;
    background-color: rgba(0,0,0,.05);
    border-radius: 5px
}

.home-tab ul {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    list-style: none;
    user-select: none;
    border-radius: 6px
}

.home-tab li {
    position: relative;
    display: inline-block;
    margin-right: 25px
}

.home-tab span {
    padding: 6px 10px;
    height: 36px;
    line-height: 36px;
    cursor: pointer
}

.home-tab span:hover {
    background: #f5f5f7
}

.home-tab .home-tab-current {
    color: #f90251;
    pointer-events: none
}

.home-category,.home-toplist {
    display: none
}

#searchbox .home-title:first-child {
    padding-top: 15px
}

.home-title {
    padding-top: 32px;
    margin-bottom: 32px;
    font-size: 28px;
    font-weight: 700
}

.home-title:first-child {
    border-top: none;
    padding-top: 0
}

.home-title .btn {
    float: right;
    color: gray;
    font-size: 13px;
    padding-right: 0
}

.home-ads {
    margin-bottom: -32px
}

.goto-top {
    right: 20px;
    bottom: 10px;
    width: 31px;
    height: 30px;
    position: fixed;
    cursor: pointer;
    background: #eee;
    opacity: .8;
    border-radius: 4px
}

.with-play-bar .goto-top {
    bottom: 100px
}

.goto-top:hover {
    opacity: 1
}

.goto-top i {
    position: absolute
}

.goto-top i::after,.goto-top i::before {
    content: "";
    width: 10px;
    height: 1px;
    position: absolute;
    top: 10px;
    background: #283149;
    transform-origin: 0;
    left: 15px;
    will-change: transform
}

.goto-top i::before {
    transform: rotate(45deg)
}

.goto-top i::after {
    transform: rotate(135deg)
}

.goto-top.animate i {
    animation: arrow .5s ease forwards
}

.goto-top.animate i::before {
    animation: arrowUp .5s ease forwards
}

.goto-top.animate i::after {
    animation: arrowDown .5s ease forwards
}

@keyframes arrow {
    0%,100% {
        transform: translateY(0);
        opacity: 1
    }

    23% {
        transform: translateY(-12px);
        opacity: .5
    }

    24%,60% {
        transform: translateY(14px);
        opacity: 0
    }

    61% {
        opacity: 1;
        transform: translateY(14px)
    }
}

@keyframes arrowUp {
    0%,100% {
        transform: rotate(45deg) scaleX(1)
    }

    20%,61% {
        transform: rotate(90deg) scaleX(.1)
    }
}

@keyframes arrowDown {
    0%,100% {
        transform: rotate(135deg) scaleX(1)
    }

    20%,61% {
        transform: rotate(90deg) scaleX(.1)
    }
}

.HC-more {
    padding: 10px;
    text-align: center;
    cursor: pointer
}

#pop-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999
}

.with-play-bar #pop-container {
    bottom: 100px
}

[class*=pop-] {
    position: relative;
    display: flex;
    overflow: hidden;
    margin-top: 10px;
    width: 300px;
    max-width: calc(100vw - 40px);
    border-radius: 8px;
    box-shadow: 0 4px 16px -1px rgba(18,22,33,.3);
    align-items: center;
    word-break: break-all;
    user-select: none
}

[class*=pop-] .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #99a3ba;
    opacity: 0;
    transition: opacity 1s
}

.pop-info {
    padding: 20px 20px;
    background: #2e77d0
}

.pop-info .text span {
    color: #fff;
    font-size: 16px
}

.pop-info .icon svg {
    fill: #fff
}

.pop-download {
    padding: 32px 20px;
    background: #fff
}

.pop-download .percent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: #f5f9ff;
    transition: background .6s ease,transform .16s ease;
    transform: scaleX(0);
    transform-origin: 0 50%
}

.pop-download .percent span {
    position: absolute;
    right: 0;
    bottom: 19px;
    display: block;
    width: 100%;
    height: 2px;
    opacity: 0;
    transition: transform .8s ease;
    transform: translateY(.5px)
}

.pop-download .percent span::after,.pop-download .percent span::before {
    position: absolute;
    top: 0;
    height: 2px;
    border-radius: 1px;
    background: #5628ee;
    content: "";
    transition: background .8s ease,transform .8s ease,height .3s ease;
    transform: rotate(var(--r)) scaleY(var(--s));
    --r: 0;
    --s: 0.5
}

.pop-download .percent span::before {
    right: 0;
    width: 64%;
    transform-origin: 0 50%
}

.pop-download .percent span::after {
    left: 0;
    width: 38%;
    transform-origin: 100% 50%
}

.pop-download .percent div {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 300%;
    transition: transform 1s ease;
    transform: translateX(var(--x));
    --x: 0
}

.pop-download .percent svg {
    display: block;
    width: 100%;
    height: 12px;
    color: #5628ee;
    transition: color .5s ease;
    stroke-width: 1.2px
}

.pop-download.finished .percent {
    background: #fff
}

.pop-download.finished .percent span {
    width: 20px;
    opacity: 1;
    transform: translate(-20px,-19px)
}

.pop-download.finished .percent span::after,.pop-download.finished .percent span::before {
    background: #99a3ba;
    transition: background .6s ease,transform .6s ease .45s;
    --s: 1;
    animation: check .4s linear forwards .6s
}

.pop-download.finished .percent span::before {
    --r: -50deg
}

.pop-download.finished .percent span::after {
    --r: 38deg
}

.pop-download.finished .percent svg {
    opacity: 0
}

.pop-download.finished .text {
    --y: 0
}

.pop-download.finished .text>div {
    opacity: 0
}

.pop-download .text {
    position: relative;
    z-index: 1;
    width: calc(100% - 40px);
    transition: transform .6s ease;
    transform: translateY(var(--y));
    --y: -18px
}

.pop-download .text strong {
    display: block;
    overflow: hidden;
    color: #3f4656;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    font-size: 14px
}

.pop-download .text>div {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    line-height: 20px;
    transition: opacity .4s ease;
    transform: translateY(6px);
    align-items: center
}

.pop-download .text>div small {
    display: inline-block;
    color: #99a3ba;
    vertical-align: top;
    white-space: nowrap;
    font-size: 12px
}

.pop-download .text>div>small {
    width: 30px;
    text-align: center
}

.pop-download .text>div div {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    vertical-align: top
}

.pop-download .text>div div::before {
    display: inline-block;
    margin-top: 9px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #99a3ba;
    content: "";
    vertical-align: top
}

.pop-download .text>div div small {
    position: absolute;
    top: 0;
    left: 8px
}

[class*=pop-] .icon {
    position: relative;
    z-index: 1;
    display: flex;
    margin-left: auto;
    padding-left: 10px;
    transition: opacity .4s ease;
    align-items: center
}

[class*=pop-] .icon>div {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none
}

.pop-download.finished .icon {
    opacity: 0
}

[class*=pop-] .icon svg {
    width: 20px;
    height: 20px
}

@keyframes check {
    100% {
        background: #0eac70
    }
}

@media (min-width: 1030px) {
    .left-side {
        float:left
    }

    .right-side {
        padding-left: 125px;
        position: fixed;
        top: 0;
        right: 0;
        left: 50%;
        width: auto;
        bottom: 0;
        overflow-y: auto
    }

    .with-play-bar .right-side {
        bottom: 56px
    }

    #audioPage {
        overflow: hidden
    }
}

@media (max-width: 1029px) {
    .EmptyState,.left-side {
        width:100%
    }

    .right-row {
        display: flex;
        max-width: none;
        padding: 0 0 20px
    }

    .TLH_body,.TLH_cover {
        padding: 0
    }

    .cover-art {
        min-width: 157px
    }

    .TLH_body {
        margin-left: 40px
    }

    .TLH_body div {
        text-align: left
    }

    .mo-meta {
        display: unset;
        opacity: 1
    }

    .mo-info-by {
        display: unset
    }

    .btn-green {
        display: inline-block;
        margin: 16px 16px 0 0;
        padding: 11px 30px;
        min-width: 100px
    }

    #hotkey span:nth-child(1),.play-lrc {
        display: none
    }
}

@media (min-width: 767px) {
    #play-bar .aplayer-info {
        overflow:hidden;
        padding: 10px 16px
    }

    .aplayer-pic {
        pointer-events: none
    }

    .aplayer-button {
        display: none
    }

    li.with-time .aplayer-list-download {
        display: none
    }

    #audioPage .aplayer:not(.editing) .aplayer-list li.with-time:hover .aplayer-list-time {
        display: none
    }

    #audioPage .aplayer:not(.editing) .aplayer-list li.with-time:hover .aplayer-list-download {
        display: block
    }

    #play-bar .aplayer-time>button,#play-bar .aplayer-time>div {
        display: none
    }
}

@media (max-width: 767px) {
    .listwrapper li {
        width:25%!important
    }

    #play-bar .aplayer-info {
        margin-left: 50px
    }

    .with-play-bar .main-view {
        padding-bottom: 140px
    }

    #play-bar {
        bottom: 40px
    }

    .m-nav-bar {
        display: block
    }

    .aplayer-list-download {
        margin-right: -10px;
        display: block
    }

    .aplayer-list-time {
        margin: 0;
        min-width: 0
    }

    .goto-top {
        bottom: 50px;
        right: 10px
    }

    .with-play-bar .goto-top {
        bottom: 134px
    }

    .TLH_batch,.nav-bar,.pb-control,.pb-control-right {
        display: none
    }

    .main-view {
        padding-bottom: 60px;
        padding-left: 0
    }

    #pop-container {
        bottom: 50px
    }

    .with-play-bar #pop-container {
        bottom: 140px
    }
}

@media (max-width: 500px) {
    ::-webkit-scrollbar {
        width:0
    }

    .listwrapper li {
        width: 50%!important
    }

    .key-list {
        width: 50%
    }

    .TLH_body {
        margin-left: 20px
    }
}

@media (max-width: 400px) {
    .aplayer-list-time {
        display:none
    }
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,.1)
}

#argprogress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex
}

#loader .progress-bar {
    height: 2.5px;
    width: 0;
    transition: all .2s ease-in-out 0s;
    background: rgba(88,108,177,.8);
    box-shadow: 0 0 10px #586cb1,0 0 5px #586cb1
}

#m-download .form-control[readonly] {
    background-color: transparent;
    height: inherit
}

#m-download .btn,#m-download .form-control,#m-download .input-group-text {
    color: #161616;
    border: none;
    background: #f4f4f4!important;
    height: 40px!important;
    line-height: 40px
}

#m-download .btn {
    padding: 0 12px
}

#m-download .btn:hover {
    color: #161616;
    background: #e5e5e5!important
}

.modal-open {
    overflow: visible
}

#shortcuts .badge {
    position: absolute;
    right: 20px;
    margin-top: 3px
}