.card-area {
    height: 5.86rem;
}

.current-time {
    font-size: .28rem;
    color: #000;
    text-align: center;
    margin: 1rem 0;
}

text {
    margin: 0 .2rem;
}

.swan-slider {
    margin: 0 18px;
    width: 2.1rem;
}

.btn-play {
    background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/pausing.png) no-repeat center;
    width: .83rem;
    height: .83rem;
    background-size: 100% 100%;
    margin: 0 auto;
}

.playing {
    padding: 0 .9rem;
    display: flex;
    justify-content: space-between;
}

.btn-stop {
    background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/recording.png) no-repeat center;
    width: .83rem;
    height: .83rem;
    background-size: 100% 100%;
}

.btn-pause {
    background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/playing.png) no-repeat center;
    width: .83rem;
    height: .83rem;
    background-size: 100% 100%;
}
.area {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
    text-align: center;
    border-radius: 8px 8px;
}

.button-circle {
    margin-bottom: .5rem;
}