body{
    background-color: RGBA(247, 249, 250, 1);
}

.news-section {
    padding: 17px 0 84px;
}

/* --- 顶部主推荐卡片样式 --- */
.news-section .news-main-card {
  display: flex;
  background-color: #ffffff;
}

.news-section .news-main-card__thumb {
  width:50%;
  border-radius: 10px;
  overflow:hidden;
}

.news-section .news-main-card__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.news-section .news-main-card__content {
  flex: 1;
  padding: 43px;
  position: relative;
}

.news-section .news-main-card__title {
  color: #222222;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  transition: all .6s;
}
.news-section .news-main-card:hover .news-main-card__title{
    color: #0078FF;
}
.news-section .news-main-card__desc {
  margin-top: 20px;
  font-weight: 400;
font-size: 16px;
color: #666666;
line-height: 30px;
   display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.news-section .news-main-card__footer {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-section .news-main-card__date {
  font-size: 24px;
color: #0078FF;
}

.news-section .news-main-card__more-btn {
  height: 50px;
  border-radius: 25px;
  border: 1px solid #DEDEDE;
  display: flex;
  padding: 0 23px;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
font-size: 16px;
color: #999999;
  gap: 0 28px;
  transition: all .6s;
}
.news-section .news-main-card__more-btn:hover{
    background: #0078FF;
    color: #fff;
    border-color: #0078FF;
}
.news-section .news-main-card__more-btn .iconfont{
    font-size: 20px;
}

/* --- 下方网格列表样式 --- */
.news-section .news-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 50px 24px;
}

.news-section .news-grid-item__thumb {
  width: 100%;
  aspect-ratio: 450/250;
  border-radius: 10px;
}

.news-section .news-grid-item__img {
  width: 100%;
  height: auto;
  display: block;
}

.news-section .news-grid-item__title {
  margin-top: 25px;
  font-size: 18px;
  color: #222222;
  line-height: 30px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all .6s;
}
.news-section .news-grid-item:hover .news-grid-item__title{
  color:rgba(0, 120, 255, 1);
}
.news-section .news-grid-item__desc {
  margin-top: 12px;
  font-weight: 400;
font-size: 16px;
color: #999999;
line-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-section .news-grid-item__date {
  display:block;
  margin-top: 22px;
 font-weight: bold;
font-size: 16px;
color: #999999;
line-height: 1;
}
.news-list-section .pagination,
.news-section .pagination{
    margin-top: 60px;
}

.news-list-section {
  padding: 15px 0 130px;
}

.news-list-section .news-list-item {
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.news-list-section .news-list-item:not(:last-child){
  margin-bottom:10px;
}
.news-list-section .news-list-item__link {
  display: flex;
  align-items: center;
  padding: 35px;
  text-decoration: none;
}

.news-list-section .news-list-item__date-box {
  width: 88px;
  text-align: center;
}

.news-list-section .news-list-item__day {
  font-weight: bold;
font-size: 48px;
color: #0078FF;
  line-height: 1;
}

.news-list-section .news-list-item__year-month {
  margin-top: 4px;
  font-weight: bold;
font-size: 16px;
color: #0078FF;
  line-height:1;
}

/* --- 中间文本模块 --- */
.news-list-section .news-list-item__content {
  flex: 1;
  padding-left: 74px;
  padding-right: 30px;
}

.news-list-section .news-list-item__title {
 font-weight: 400;
 font-size: 24px;
 color: #222222;
 line-height: 30px;
 transition: color 0.3s ease;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1;
 overflow: hidden;
 text-overflow: ellipsis;
}

.news-list-section .news-list-item__desc {
  margin-top: 15px;
  font-weight: 400;
font-size: 16px;
color: #666666;
line-height: 30px;
  display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* --- 右侧圆形箭头按钮 --- */
.news-list-section .news-list-item__arrow-btn {
  width: 70px;
height: 70px;
background: #F7F9FA;
border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(153, 153, 153, 1);
  transition: all 0.3s ease;
}

.news-list-section .news-list-item__arrow-icon {
  font-size: 16px;
}

.news-list-section .news-list-item:hover,
.news-list-section .news-list-item--active {
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.08);
}

.news-list-section .news-list-item:hover .news-list-item__title,
.news-list-section .news-list-item--active .news-list-item__title {
  color: rgba(0, 120, 255, 1);
}


.news-list-section .news-list-item:hover .news-list-item__arrow-btn,
.news-list-section .news-list-item--active .news-list-item__arrow-btn {
  background-color: #0066ff;
}

.news-list-section .news-list-item:hover .news-list-item__arrow-icon,
.news-list-section .news-list-item--active .news-list-item__arrow-icon {
  color: #ffffff;
}


@media (max-width: 1199px) {
    /* 1. 分类与搜索栏适配 */
    .drone-tabs-section.news-tabs-section {
        margin-top: 15px;
        padding: 15px 0;
    }

    /* 2. 主推荐大卡片适配 */
    .news-section {
        padding: 15px 0 80px;
    }
    .news-section .news-main-card__content {
        padding: 30px;
    }
    .news-section .news-main-card__footer {
        margin-top: 50px; /* 缩减脚部间距 */
    }

    /* 3. 新闻网格排版 */
    .news-section .news-grid {
        margin-top: 40px;
        gap: 35px 20px;
    }

    /* 4. 新闻列表排版 */
    .news-list-section {
        padding: 15px 0 80px;
    }
    .news-list-section .news-list-item__link {
        padding: 25px;
    }
    .news-list-section .news-list-item__content {
        padding-left: 45px;
        padding-right: 20px;
    }
    .news-list-section .news-list-item__arrow-btn {
        width: 56px;
        height: 56px;
    }

    /* 5. 分页 */
    .news-list-section .pagination,
    .news-section .pagination {
        margin-top: 45px;
    }
}

@media (max-width: 1024px) {
    /* 1. 分类与搜索栏转换为上下堆叠 */
    .drone-tabs-section.news-tabs-section .drone-tabs-nav-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .drone-tabs-section.news-tabs-section form {
        width: 100%; /* 搜索框占满宽度 */
    }

    /* 2. 主推荐卡片左右转为上下结构 */
    .news-section .news-main-card {
        flex-direction: column;
    }
    .news-section .news-main-card__thumb {
        width: 100%;
        aspect-ratio: 16/9;
    }
    .news-section .news-main-card__content {
        padding: 25px 20px;
    }
    .news-section .news-main-card__footer {
        margin-top: 30px;
    }

    /* 3. 网格缩减为 2 列 */
    .news-section .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 20px;
    }

    /* 4. 列表间距微调 */
    .news-list-section {
        padding: 15px 0 70px;
    }
    .news-list-section .news-list-item__link {
        padding: 20px;
    }
    .news-list-section .news-list-item__content {
        padding-left: 30px;
    }
    .news-list-section .news-list-item__title {
        font-size: 20px;
    }

    /* 5. 分页 */
    .news-list-section .pagination,
    .news-section .pagination {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .news-section .news-main-card__date{
        font-size:22px;
    }
    .news-section {
        padding: 15px 0 60px;
    }
    .news-section .news-main-card__title {
        font-size: 22px;
    }
    .news-section .news-main-card__desc {
        font-size: 14px;
        line-height: 24px;
        margin-top: 12px;
    }
    .news-section .news-grid {
        gap: 20px 15px;
    }
    .news-section .news-grid-item__title {
        font-size: 16px;
        line-height: 24px;
        margin-top: 15px;
    }

    .news-list-section {
        padding: 15px 0 60px;
    }
    .news-list-section .news-list-item__link {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .news-list-section .news-list-item__date-box {
        width: auto;
        display: flex;
        align-items: baseline;
        gap: 10px;
        text-align: left;
    }
    .news-list-section .news-list-item__day {
        font-size: 36px;
    }
    .news-list-section .news-list-item__year-month {
        margin-top: 0;
    }
    .news-list-section .news-list-item__content {
        padding: 0;
        width: 100%;
    }
    .news-list-section .news-list-item__title {
        font-size: 18px;
        line-height: 24px;
    }
    .news-list-section .news-list-item__desc {
        margin-top: 10px;
        font-size: 14px;
        line-height: 22px;
    }
    .news-list-section .news-list-item__arrow-btn {
        display: none; 
    }

    .news-list-section .pagination,
    .news-section .pagination {
        margin-top: 30px;
    }
    .news-section .news-grid-item__date{
        margin-top:15px;
    }
}

@media (max-width: 500px) {
    .news-section .news-grid-item__desc{
        margin-top:5px;
    }
    .news-section .news-grid-item__date{
        margin-top:10px;
    }
    .news-section .news-main-card__date{
        font-size:20px;
    }
    .news-list-section .news-list-item__day{
        font-size:30px;
    }
    .news-section {
        padding: 15px 0 50px;
    }
    .news-section .news-main-card__title {
        font-size: 18px;
    }
    .news-section .news-main-card__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-top: 15px;
    }
    .news-section .news-main-card__more-btn {
        width: 100%;
        justify-content: center;
    }

    .news-section .news-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .news-list-section {
        padding: 15px 0 50px;
    }
    
    .news-list-section .pagination,
    .news-section .pagination {
        margin-top: 25px;
    }
}