.effects-title-shiting[data-v-afcc8186] {
    display: inline-block;
    width: .8rem;
    height: .32rem;
    border-radius: .18rem;
    color: #fe4a3b;
    background: #ffe3e5;
    font-size: .24rem;
    text-align: center;
    line-height: .38rem;
    margin-left: .1rem
}

.content-list[data-v-afcc8186] {
    width: 100%;
    padding: 0 .48rem;
    box-sizing: border-box
}

.list-item[data-v-afcc8186] {
    width: 100%;
    height: .98rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    position: relative
}

.list-item.current[data-v-afcc8186] {
    height: 1.3rem;
    position: relative
}

.music-content-box[data-v-afcc8186] {
    width: 100%;
    height: .4rem;
    display: flex;
    align-items: center
}

.music-control-box[data-v-afcc8186] {
    width: 100%;
    height: .04rem;
    border-radius: .04rem;
    background: #ffdfdd;
    margin-top: .28rem
}

.list-item.current[data-v-afcc8186]:after {
    content: "";
    width: 7.5rem;
    height: 100%;
    position: absolute;
    left: -.48rem;
    background: linear-gradient(270deg,hsla(0,0%,100%,0),rgba(255,96,84,.12));
    z-index: 0
}

.progress-bar-wrapper[data-v-afcc8186] {
    width: 0;
    height: 100%;
    background: #ff6154
}

.list-item-icon[data-v-afcc8186] {
    width: .4rem;
    height: .4rem;
    position: relative;
    z-index: 1
}

.list-item-name[data-v-afcc8186] {
    font-size: .3rem;
    font-weight: 500;
    color: #070e25;
    flex: 1;
    margin: 0 .1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.list-item-down[data-v-afcc8186] {
    width: .4rem;
    height: .4rem;
    position: relative;
    z-index: 1
}

.open-app[data-v-afcc8186] {
    width: 4.82rem;
    height: .8rem;
    line-height: .8rem;
    border-radius: .4rem;
    font-size: .32rem;
    font-weight: 500;
    color: #fe4a3b;
    text-align: center;
    border: .02rem solid #fe4a3b;
    margin: .64rem 0 0 .86rem
}

.music-controller-box[data-v-dabab978] {
    width: 100%;
    padding: 0 .48rem;
    box-sizing: border-box;
    display: flex;
    height: .58rem;
    justify-content: center;
    align-items: center;
    margin-top: .32rem;
    margin-bottom: .32rem;
    z-index: 1
}

.music-forward-icon[data-v-dabab978] {
    width: .58rem;
    height: .58rem
}

.music-controller[data-v-dabab978] {
    width: 0;
    flex: 1;
    height: .04rem;
    background: #fff;
    border-radius: .08rem;
    position: relative;
    margin: 0 .32rem
}

.music-controller-current[data-v-dabab978] {
    font-size: .24rem;
    font-weight: 500;
    color: #fff;
    position: absolute;
    bottom: -.44rem;
    left: 0
}

.music-controller-total[data-v-dabab978] {
    font-size: .24rem;
    font-weight: 500;
    color: #fff;
    position: absolute;
    bottom: -.44rem;
    right: 0
}

.progress-bar-wrapper[data-v-dabab978] {
    width: 0;
    height: 100%;
    background: #fa626c
}

.touch-wrapper[data-v-dabab978] {
    background: hsla(0,0%,100%,.6);
    width: .2rem;
    height: .2rem;
    position: absolute;
    top: -.08rem;
    border-radius: 50%
}

.touch-wrapper[data-v-dabab978]:after {
    content: "";
    position: absolute;
    width: .12rem;
    height: .12rem;
    background: #fff;
    left: .04rem;
    top: .04rem;
    border-radius: 50%
}

@keyframes rotate-data-v-dabab978 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}