.section{
    width: 100%;
    height: 16.84rem;
    position: relative;
    overflow: hidden;
}

.bg1{
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/wap/music-bg-1.png) no-repeat;
    background-size: 100% 100%;
}

.bg2{
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/wap/music-bg-2.png) no-repeat;
    background-size: 100% 100%;
}

.bg3{
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/wap/music-bg-3.png) no-repeat;
    background-size: 100% 100%;
}

.section-text{
    width: 4.64rem;
    height: 1.4rem;
    margin: 1.5rem auto 0;
}

.mucic-cd{
    width: 4.73rem;
    height: 4.73rem;
    margin: 0.5rem auto 0;
    position: relative;
}

.music-wallpaper-text{
    width: 2.04rem;
    height: 0.97rem;
    position: absolute;
    top: 0;
    left: 1.5rem;
}

.mucis-wallpaper-cover{
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.cover-cd1{
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/wap/mucis-wallpaper-cover-1.png) no-repeat;
    background-size: 100% 100%;
}

.cover-cd2{
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/wap/mucis-wallpaper-cover-2.png) no-repeat;
    background-size: 100% 100%;
}

.cover-cd3{
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/wap/mucis-wallpaper-cover-3.png) no-repeat;
    background-size: 100% 100%;
}

.mucic-info{
    width: 6.44rem;
    height: 3.07rem;
    margin: 0.2rem auto;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/wap/music-info.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

.mucis-info-detail{
    width: 5.5rem;
    height: 2.6rem;
    margin: 0.2rem auto;
    overflow: hidden;
}

.music-name{
    font-size: 0.25rem;
    color: #fff;
    margin: 0.2rem 0 0.3rem;
}

.music-desc{
    font-size: 0.3rem;
    color: #36fad3;
    margin: 0.2rem 0;
}

.music-line{
    width: 2.83rem;
    height: 0.16rem;
    margin: 0 auto;
}

.music-player{
    margin: 0.3rem 0;
}

.music-player img{
    margin: 0 0.15rem;
}

.icon-music-detail{
    width: 0.22rem;
    height: 0.15rem;
}

.icon-prev,.icon-music-play,.icon-music-pause,.icon-next{
    width: 0.41rem;
    height: 0.41rem;
}

.icon-sound{
    width: 0.2rem;
    height: 0.2rem;
    margin-left: 0.1rem;
}

.sound-open{
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/icon-sound-open.png) no-repeat;
    background-size: 100% 100%;
}

.sound-off{
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/pc/icon-sound-off.png) no-repeat;
    background-size: 100% 100%;
}

.bg-cover{
    width: 1.33rem;
    height: 1.33rem;
    margin: 0 0.3rem;
}

.bg-cover p{
    margin-top: 0.1rem;
    text-align: center;
    color: #fff;
}

/* 定义模糊阴影类 */
.bg-shadow {
    border-radius: 0.8rem;
    background-color: #86878d;
    filter: opacity(0.5);
}

.close-btn{
    width: 0.35rem;
    height: 0.1rem;
    position: absolute;
    top: -0.3rem;
    right: 0.1rem;
}

.music-list-popup{
    width: 5.88rem;
    height: 8.28rem;
    background: url(//cdn.htgames.net/gw/legendofheroes/static/image/wap/music-list-popup.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.music-list.active{
    opacity: 1;
    transform: translateX(0);
}

.music-list ul{
    width: 96%;
    height: 8rem;
    margin: 0.1rem auto 0;
    overflow: auto;
}

.music-list ul li{
    font-size: 0.25rem;
    padding: 0.2rem 0;
}

.music-list ul li:hover{
    background-color: #232d75;
    color: #4ddaf0;
}

.active-on{
    background-color: #232d75;
    color: #4ddaf0;
}