.heat-info {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 16px;
    }

    .progress-container {
        width: 80px;
        height: 6px;
        background: #ebebeb;
        border-radius: 3px;
    }

    .progress-container .progress-bar {
        height: 100%;
        width: 30%;
        /* 进度条宽度为30% */
        background-color: #ff4438;
        /* 进度颜色 */
        border-radius: 3px;
    }

    .price-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        margin-top: 24px;
    }

    .price-container .button {
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        outline: none;
        transition: background 0.3s;
    }

    .price-container .left {
        display: flex;
        align-items: center;
    }

    .price-container .left-button {
        margin-left: 16px;
        background: linear-gradient(90deg, #fe1767 0%, #ff770e 100%);
        border-radius: 24px;
    }

    .price-container .right-button {
        background: linear-gradient(90deg, #fe1767 0%, #ff770e 100%);
        border-radius: 24px;
    }

    .banner-tab {
        width: 1200px;
        margin: auto;
        border-bottom: 1px solid #e8e8e8;
    }

    .banner-tab .tab-catalogue {
      
        display: flex;
        align-items: center;
        font-weight: 600;
    }

    .tab-catalogue .box-right {
        margin-left: 64px;
    }

    .tab-catalogue .underline-box {
        color: #ff4438;
        border-bottom: 2px solid #ff4438;
    }

    .banner-details {
        width: 1200px;
        margin: auto;
    }
    .container-one {
        position: relative;
    }

    .container-one .red-dot {
        margin-top: 2px;
    }

    .container-one .container-two {
        height: 56px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f7f9fa;
        margin-left: 23px;
    }

    .container-one .container-two .left-box {
        color: #17233d;
        font-weight: 600;
        padding-left: 16px;
    }

    .container-one .container-two .collapse-button {
        margin-left: 12px;
        color: #ff4438;
        cursor: pointer;
        /* 设置收起文字颜色 */
    }

    .container-three {
        height: 52px;
        border: 1px solid #f7f9fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 23px;
    }

    .container-three .left-box {
        color: #ff4438;
        /* 左侧文字颜色为 #FF4438 */
    }

    .container-three .right-box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .container-three .right-box .study {
        width: 68px;
        height: 25px;
        background-color: rgba(255, 68, 56, 0.1);
        color: red !important;
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        border-radius: 13px;
        margin-right: 16px;
    }

    .doubleheadedarrow {
        transform: scaleX(-1) scaleY(-1);
        width: 14px;
        height: 14px;
        margin-right: 16px;
    }

    .container-four {
        height: 52px;
        border: 1px solid #f7f9fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 23px;
    }

    .container-five {
        /* height: 52px; */
        /* width: 1177px; */
        /* border-bottom: 1px solid #f7f9fa;
        border-left: 1px solid #f7f9fa;
        border-right: 1px solid #f7f9fa; */
        display: flex;
        align-items: center;
        margin-left: 23px;
        margin-top: 2px;
    }

    .container-five .loading-circle {
        position: relative;
        width: 10px;
        height: 10px;
        margin-left: 18px;
    }
container-five
    .container-five .loading-circle:before,
    .loading-circle:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid #9ea7b4;
        /* 圆圈颜色 */
        border-top-color: transparent;
        /* 透明顶部，形成旋转效果 */
        animation: rotate 1.5s linear infinite;
        /* 旋转动画，持续时间为1.5秒，线性无限循环 */
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
/**播放*/
    .play-list{
        width: 320px;
        height: 580px;
        background: #1B2127;
        border-radius: 0px 0px 14px 0px;
        overflow: auto;
    }
    .top-play{
        height: 59px;
        background: #1B2127;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        border-bottom: 0.5px solid #2b2b2b;
    }
    .top-play .top-title{
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
    }
    .bottom-play{
        /* padding: 0 24px; */
        background: #0F1419;
       
       
    }
    .bottom-title{
        padding: 12px 24px;
        border-bottom: 0.5px solid #2b2b2b;
        cursor: pointer;
    }
    .play-no{
        font-size: 14px;
        font-weight: 400;
        color: #2B75F2;
    }