.news-middle-body{
    width: 100%;
    height: 620px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding-top: 20px;
}

.news-bottom-body{
    display: flex;
    gap: 20px
}

.middle-title{
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: black;
}

.news-index-top{
    width: 100%;
    display: flex;
    gap: 20px;
}

.news-main-slider{
    width: 634px;
    height: 358px;
    background: #23252B;
    border-radius: 8px;
}

.news-middle-content{
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 9; /* 避免被其他元素遮挡 */
}

.new-middle-list{
    display: flex;
    gap: 10px;
    width: 80%;
    height: 400px;
    overflow: hidden;
    align-items: center;
}

.news-top-right{
    flex: 1;
}

.news-slider-item-contain{

    width: 634px;
    height: 358px;
    overflow: hidden;
    border-radius: 8px;
}

.new-gift-list{
    display: grid;               /* 开启 Grid 网格布局 */
    grid-template-columns: repeat(2, 1fr);  /* 关键：2列均分，1fr 表示占满剩余空间 */
    gap: 16px;                   /* 列表项水平+垂直间距，与 Flex 一致 */
    padding: 0;
    margin: 0;
    list-style: none;            /* 清除默认列表符号 */
}

.top-new-big-list-item{
    flex: 0 0 auto; /* 关键：禁止item拉伸/收缩，保持固定宽度 */
    border-radius: 8px;
    width: 302px;

}

.new-tj-icon{
    width: 302px;
    height: 170px;
    border-radius: 8px;
    overflow: hidden;
}

.new-tj-des{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;

    /* 省略核心属性（缺一不可） */
    overflow: hidden;         /* 隐藏超出内容 */
    text-overflow: ellipsis;  /* 超出部分显示省略号 */
    display: -webkit-box;     /* 开启webkit弹性盒模型，为多行省略做基础 */
    -webkit-line-clamp: 2;    /* 控制显示行数，2=仅显示2行，超出隐藏 */
    -webkit-box-orient: vertical; /* 弹性盒垂直排列，配合line-clamp截断 */
    /* 关键：必须设置宽度/最大宽度，否则div随文字无限拉伸，永不触发省略 */
}



.new-tj-big-des{
    width: 100%;
    font-size: 16px;
    padding: 5px;
    color: #777C8F;
    font-weight: bold;
    box-sizing: border-box;
    /* 省略核心属性（缺一不可） */
    overflow: hidden;         /* 隐藏超出内容 */
    text-overflow: ellipsis;  /* 超出部分显示省略号 */
    display: -webkit-box;     /* 开启webkit弹性盒模型，为多行省略做基础 */
    -webkit-line-clamp: 5;    /* 控制显示行数，2=仅显示2行，超出隐藏 */
    -webkit-box-orient: vertical; /* 弹性盒垂直排列，配合line-clamp截断 */
    /* 关键：必须设置宽度/最大宽度，否则div随文字无限拉伸，永不触发省略 */
}



.top-new-list-item{
    display: flex;
    gap: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
}

.filter-icon{
    width:278px;
    height: 70px;
}

.bottom-filter-list{
    width: 100%;
    display: flex;
    gap: 20px;
}


.left-news-root{
    width: 100%; /* 容器宽度，可改100%占满父级 */
    display: grid; /* 启用Grid布局 */
    padding: 20px 0;
    grid-template-columns: repeat(2, 1fr); /* 核心：固定2列，宽度均分 */
    gap: 20px; /* 子元素之间的「水平+垂直间距」，替代margin，极简 */
}

.left-news-item{
    padding: 5px 10px;
    border-radius: 16px;
    background: #23252B;
}

.left-news-item.active{
    background: #FF2D78;
}

.right-hot-item{
    display: flex;
    gap: 10px;
}

.right-hot-item-img{
    width:200px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
}

.right-hot-item-des{
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    flex: 1;

    /* 必须设置：开启弹性盒模型，配合line-clamp生效 */
    display: -webkit-box;
    /* 必须设置：溢出内容隐藏 */
    overflow: hidden;
    /* 必须设置：文字换行方式，避免单行挤压 */
    word-break: break-all;
    /* 核心属性：限制显示行数为4行（webkit内核专属，主流浏览器均支持） */
    -webkit-line-clamp: 5;
    /* 必须设置：弹性盒内文字的排列方向为垂直 */
    -webkit-box-orient: vertical;
}

.no-data-contain{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.no-data-contain.show{
    display: flex;
}

.shop-no-data-contain{
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}


.empty-text{
    font-size: 14px;
    color: #AEAEB2;
}


.bottom-news-item{
    width: 396px;
    height: 455px;
    border-radius: 8px;
    overflow: hidden;
    background: #23252B;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bottom-news-icon{
    width: 396px;
    height: 200px;
    overflow: hidden;
}

.bottom-tj-title{
    font-weight: bold;
    font-size: 16px;
    color: white;

}


.bottom-filter-con{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom-left{
    flex: 1;
}

.news-title-span{
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
}

.news-hot-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.bottom-right{
    flex: 0 0 450px; /* 固定宽度300px，不伸缩 */
    position: sticky;
    bottom: 20px;  /* 距离视口顶部20px固定 */
    align-self: flex-end; /* 配合sticky生效，避免拉伸 */
    margin-top: 0;
    overflow: hidden;
    min-height: 500px;

}

.new-bottle-title{
    width: 100%;
    font-size: 16px;
    padding: 5px;
    color: #777C8F;
    font-weight: bold;
    box-sizing: border-box;
    /* 省略核心属性（缺一不可） */
    overflow: hidden;         /* 隐藏超出内容 */
    text-overflow: ellipsis;  /* 超出部分显示省略号 */
    display: -webkit-box;     /* 开启webkit弹性盒模型，为多行省略做基础 */
    -webkit-line-clamp: 2;    /* 控制显示行数，2=仅显示2行，超出隐藏 */
    -webkit-box-orient: vertical; /* 弹性盒垂直排列，配合line-clamp截断 */
    /* 关键：必须设置宽度/最大宽度，否则div随文字无限拉伸，永不触发省略 */
}

.new-bottom-des{
    width: 100%;
    font-size: 14px;
    padding: 5px;
    color: #777C8F;
    box-sizing: border-box;
    /* 省略核心属性（缺一不可） */
    overflow: hidden;         /* 隐藏超出内容 */
    text-overflow: ellipsis;  /* 超出部分显示省略号 */
    display: -webkit-box;     /* 开启webkit弹性盒模型，为多行省略做基础 */
    -webkit-line-clamp: 5;    /* 控制显示行数，2=仅显示2行，超出隐藏 */
    -webkit-box-orient: vertical; /* 弹性盒垂直排列，配合line-clamp截断 */
    /* 关键：必须设置宽度/最大宽度，否则div随文字无限拉伸，永不触发省略 */

    flex: 1;
}

.new-bottom-time{
    display: flex;
    width: 100%;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    box-sizing: border-box;
}

.news-player-icon{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
}

.news-player-info{
    display: flex;
    gap: 5px;
    align-items: center;
}

.news-body-base-no-top{
    width: 1280px;
    margin: 0 auto;
}

.news-detail-left{
    flex: 1;
    position: sticky;
    bottom: 20px;  /* 距离视口顶部20px固定 */
    align-self: flex-start; /* 配合sticky生效，避免拉伸 */
    margin-top: 0;
}

.news-item-bg{
    background: #23252B;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
}

.news-title{
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.news-author{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-like-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-author-root{
    display: flex;
    gap:10px;
    align-items: center;
    margin-bottom: 20px;
}

.news-author-attention{
    display: flex;
    gap: 5px;
    align-items: center;
}

.news-detail-content{
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.news-detail-right{
    flex: 0 0 350px; /* 固定宽度300px，不伸缩 */
    position: sticky;
    bottom: 20px;  /* 距离视口顶部20px固定 */
    align-self: flex-end; /* 配合sticky生效，避免拉伸 */
    margin-top: 0;
    overflow: hidden;
}