/* --- 移动端适配 (Mobile Adaptation) --- */

/* 1. 针对大屏幕但小于固定宽度的设备 (如笔记本) */
@media screen and (max-width: 1500px) {
  .first-box .main_banner,
  .third-box,
  .fourth-box,
  .fifth-box .section-container,
  .fifth-box .cards-container,
  .fifth-box .section-header {
    width: 100%;
    max-width: 100%;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    box-sizing: border-box;
  }

  .second-box .second-box-content .content-end-title,
  .second-box .second-box-list,
  .middle-behind-row,
  .sixth-box,
  .sixth-box .section-container {
    width: 100%;
    max-width: 100%;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    box-sizing: border-box;
  }
  
  .first-box .main_banner {
      height: auto; /* 让高度自适应 */
      margin-top: 0; /* 调整负边距 */
  }
}

/* 2. 针对平板和手机 (小于 992px) */
@media screen and (max-width: 992px) {
  .Home {
    padding-top: 0.8rem;
  }

  /* First Box */
  .first-box {
    padding-left: 0;
    align-items: center;
  }

  .first-box .text_content {
    font-size: 0.4rem;
    padding: 0 0.2rem;
    align-items: center;
    text-align: center;
  }

  .first-box .text_content .top-title-row {
    justify-content: center;
  }
  
  .first-box .text_content .index-top-title,
  .first-box .text_content .index-second-title {
      font-size: 0.32rem;
      line-height: 1.4;
  }

  .first-box .main_banner {
    margin-top: 0.2rem;
    width: 100%;
    height: auto;
  }

  /* Second Box */
  .second-box .second-box-content .content-top-title {
    font-size: 0.28rem;
    height: auto;
    line-height: 1.4;
    padding: 0 0.1rem;
  }

  .second-box .second-box-content .content-end-title {
    font-size: 0.16rem;
    margin-top: 0.2rem;
    width: 100%;
    padding: 0 0.2rem;
  }

  .second-box .second-box-list {
    flex-direction: column;
    height: auto;
    margin-top: 0.4rem;
    gap: 0.3rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .second-box .second-box-list .divider-line {
    display: none; /* 隐藏竖线 */
  }
  
  .second-box .banner-middle img {
      width: 100%;
      height: auto;
  }
  
  .middle-behind-row {
      height: auto;
      margin-top: 0.4rem;
  }
  
  .middle-behind-row .first-row {
      font-size: 0.24rem;
      line-height: 1.4;
      height: auto;
      text-align: center;
  }

  /* Third Box */
  .third-box {
    flex-direction: column;
    margin-top: 0.4rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .third-box .sidebar,
  .third-box .content {
    width: 100%;
    border-right: none;
  }
  
  .third-box .sidebar {
      flex-direction: row;
      overflow-x: auto;
      gap: 0.2rem;
      padding: 0.15rem;
  }
  
  .third-box .sidebar .section {
      min-width: 2rem; /* 确保横向滚动时有足够宽度 */
  }

  /* Fourth Box */
  .fourth-box {
    margin-top: 0.6rem;
  }
  
  .fourth-box .first-row {
      font-size: 0.24rem;
      padding: 0 0.2rem;
      line-height: 1.4;
  }

  .fourth-box .layout-wrapper {
    flex-direction: column;
    gap: 0.4rem;
  }

  /* 隐藏两侧的装饰矩形，避免在移动端占据空间 */
  .fourth-box .layout-wrapper > div:first-child,
  .fourth-box .layout-wrapper > div:last-child {
    display: none;
  }
  
  .fourth-box .image-container {
      width: 100%;
      height: 3rem; /* 给视频区域一个固定高度 */
  }

  /* Fifth Box */
  .fifth-box .section-header h2 {
    font-size: 0.28rem;
  }
  
  .fifth-box .section-header p {
      font-size: 0.16rem;
      padding: 0 0.2rem;
  }

  .fifth-box .cards-container {
    flex-direction: column;
  }

  /* Sixth Box */
  .sixth-box .section-header h2 {
    font-size: 0.28rem;
  }
  
  .sixth-box .section-header p {
      font-size: 0.16rem;
      padding: 0 0.2rem;
  }

  .sixth-box .roles-container {
    grid-template-columns: 1fr;
  }
  
  .sixth-box .role-card {
      flex-direction: column;
      text-align: center;
  }
  
  .sixth-box .role-content {
      align-items: center;
  }
  
  .sixth-box .role-image {
      margin-top: 0.2rem;
  }
}

/* 3. 针对小屏手机 (小于 600px) */
@media screen and (max-width: 600px) {
    .first-box .text_content {
        font-size: 0.28rem;
    }
    
    .third-box .grid {
        grid-template-columns: 1fr; /* 单列 */
    }
    
    .fourth-box .image-container {
        height: 2rem;
    }
}