@charset "UTF-8";
body {
  background: #fff;
}

.news-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.news-container .container-main {
  flex: 1;
  padding-bottom: 2.5rem;
}

.news-container .container-main .main-title .title {
  color: #333;
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.8125rem;
}

.news-container .container-main .main-title .subtitle {
  color: #999;
  font-size: 1rem;
  line-height: 1.375rem;
  text-transform: uppercase;
  margin-top: .25rem;
}

.news-container .container-main .main-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: .375rem;
  background: var(--main-color);
  margin-top: .25rem;
}

.news-container .container-main .main-screen {
  background: #F8F8F8;
}

.news-container .container-main .main-screen .screen-box {
  overflow: auto;
  white-space: nowrap;
  text-align: center;
}

.news-container .container-main .main-screen .screen-box .item {
  display: inline-block;
  padding: 0.8rem 1.3rem 0;
  cursor: pointer;
  text-align: center;
  color: #333;
  font-size: 1rem;
  line-height: 1.375rem;
  word-break: keep-all;
  transition: color .3s;
}

.news-container .container-main .main-screen .screen-box .item::after {
  content: "";
  display: block;
  width: 100%;
  height: .25rem;
  background: transparent;
  margin: 0.5625rem auto 0;
  transition: background .3s;
}

.news-container .container-main .main-screen .screen-box .item.active, .news-container .container-main .main-screen .screen-box .item:hover {
  color: var(--main-color);
}

.news-container .container-main .main-screen .screen-box .item.active::after, .news-container .container-main .main-screen .screen-box .item:hover::after {
  background: var(--main-color);
}

@media (min-width: 767px) {
  .news-container .container-main .main-screen .screen-box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: auto;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: .5rem;
  }
  .news-container .container-main .main-screen .screen-box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: .625rem;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #ccc;
  }
  .news-container .container-main .main-screen .screen-box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: .625rem;
    background: #ededed;
  }
}

.news-container .container-main .main-content {
  //margin-top: 2.5rem;
}

.news-container .container-main .main-content .column-cont .cont-item {
  padding: 1rem 0;
  border-bottom: 1px solid #E6E6E6;
  text-decoration: none;
}

.news-container .container-main .main-content .column-cont .cont-item .title {
  color: #333;
  font-size: 1.175rem;
  font-weight: 600;
  line-height: 1.25rem;
  margin-right: .75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .3s;
}

.news-container .container-main .main-content .column-cont .cont-item .date {
  color: #909090;
  font-size: .875rem;
  line-height: 1.25rem;
  transition: color .3s;
}

.news-container .container-main .main-content .column-cont .cont-item:last-child {
  border: none;
}

.news-container .container-main .main-content .column-cont .cont-item:hover .title {
  color: var(--main-color);
}

.news-container .container-main .main-content .column-cont .cont-item:hover .date {
  color: var(--main-color);
}

@media screen and (max-width: 767px) {
  .news-container .container-main .main-screen .screen-box .item {
    padding: 1rem 1rem 0;
    font-size: .875rem;
  }
  .news-container .container-main .main-screen .screen-box .item::after {
    margin-top: .75rem;
  }
  .news-container .container-main .main-content .column-cont {
    padding-bottom: 1.875rem;
  }
}

@media (min-width: 992px) {
      .offset-lg-1-5 {
        margin-left: 16.666667%;

      }
    }

    .main-head {
      display: flex;
      gap: 20px;
      padding: 20px 0;
    }

    .main-head .col-8,
    .main-head .col-4 {
      flex-shrink: 0;
    }

    .main-head .col-8 {
      flex: 0 0 65.8%;
      max-width: 65.8%;
    }

    .main-head .col-4 {
      flex: 0 0 32%;
      max-width: 32%;
    }

    /* 轮播图基本样式 */
    .carousel-inner img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }


    .ad-badge {
      position: absolute;
      bottom: 5px;
      /* 距离底部5px */
      right: 5px;
      /* 距离右边5px */
      background-color: rgba(0, 0, 0, 0.7);
      /* 半透明黑色背景 */
      color: white;
      /* 白色文字 */
      font-size: 12px;
      /* 字体大小 */
      padding: 2px 5px;
      /* 内边距 */
      border-radius: 2px;
      /* 圆角 */
      z-index: 1;
      /* 确保在图片上方显示 */
    }

    /* 四宫格图片基本样式 */
    .grid-item {
      position: relative;
      display: block;
      padding: 5px;
    }

    .grid-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 1 / 1;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: rgba(0, 0, 0, 0.7);
    }

    .grid-item:hover .overlay {
      opacity: 1;
    }

    .text {
      color: white;
      font-size: 14px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    /* 手机端响应式适配 */
    @media (max-width: 767px) {
        .main-head {
          flex-direction: column;
        }

        .main-head .col-8,
        .main-head .col-4 {
          flex: 0 0 100%;
          max-width: 100%;
          width: 100%;
        }

        .main-head .col-4 {
          margin-top: 0;
      }
      
      .grid-item .text {
          font-size: 12px;
          padding: 3px;
      }
      
      .grid-item .ad-badge {
          font-size: 8px;
          height: 16px;
          padding: 1px 3px;
          top: 3px;
          right: 3px;
      }

      .news-grid {
        padding: 0 10px;
      }
    }

    /* 超小屏幕适配 */
    @media (max-width: 575px) {
        .grid-item .text {
            font-size: 10px;
        }
        
        .banner-col {
            padding: 1px;
        }
    }

    /* 其他原有样式 */
    .banner-col {
      padding-left: 0;
      padding-right: 0;
    }

    .cont-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .news-image {
      width: 216px;
      /* 根据需要调整图片宽度 */
      height: 144px;
      /* 根据需要调整图片高度 */
      object-fit: cover;
      margin-right: 10px;
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 124px;
      flex: 1;
    }

    .title {
      font-size: 16px;
      margin-bottom: 5px;
    }

    .sub-title {
      font-size: 14px;
      color: #666;
      margin-bottom: auto;
      flex: 1;
      margin-top: 12px;
    }

    .bottom-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .release {
      font-size: 12px;
      color: #999;
    }

    .date {
      font-size: 12px;
      color: #999;
    }

    .news-container .container-main .main-content .column-cont .cont-item {
      padding: 1rem 0;
      border-bottom: 1px solid #E6E6E6;
      text-decoration: none;
    }

    .news-container .container-main .main-content .column-cont .cont-item .news-image {
      transition: transform .3s ease;
      overflow: hidden;
    }

    .news-container .container-main .main-content .column-cont .cont-item:hover .news-image {
      transform: scale(1.02);
    }

    .news-container .container-main .main-content .column-cont .cont-item .title {
      color: #333;
      font-size: 1.175rem;
      font-weight: 600;
      line-height: 1.25rem;
      margin-right: .75rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: color .3s;
    }

    /* 音频播放器样式 */
    .audio-player-container {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      width: 100%;
      margin: 20px 0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .audio-player {
      margin-top: -20px;
    }

    .audio-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .audio-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #333;
      flex-grow: 1;
      text-align: left;
    }

    .audio-controls {
      display: flex;
      flex-direction: column;
    }

    .audio-main-controls {
      display: flex;
      align-items: center;
      justify-content: start;
      gap: 15px;
      margin-bottom: 15px;
    }

    .audio-btn {
      background: #007bff;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
    }

    .audio-btn:hover {
      background: #0056b3;
      transform: scale(1.05);
    }

    .audio-btn i {
      color: white;
      font-size: 13px;
    }

    .audio-progress-container {
      flex-grow: 1;
    }

    .audio-progress-bar {
      height: 5px;
      background: #e0e0e0;
      border-radius: 3px;
      position: relative;
      cursor: pointer;
      margin-bottom: 10px;
    }

    .audio-progress {
      height: 100%;
      background: #007bff;
      border-radius: 3px;
      width: 0%;
    }

    .audio-progress-handle {
      position: absolute;
      width: 12px;
      height: 12px;
      background: #007bff;
      border-radius: 50%;
      top: 50%;
      left: 0%;
      transform: translate(-50%, -50%);
      cursor: pointer;
    }

    .audio-time {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #666;
    }

    @media (max-width: 767px) {

      .main-screen, .main-content, .audio-player {
        margin-left: 0;
        margin-right: 0;
      }

      .audio-player-container {
        padding: 15px;
      }

      .audio-title {
        font-size: 16px;
      }

      .audio-btn {
        width: 36px;
        height: 36px;
      }

      .audio-main-controls {
        gap: 10px;
      }
    }