/* 专题一组四个图滚动 */

.scroll-wrap {
  display: flex;
  position: absolute;
  left: 0;
  transition: left 0.5s ease; /* 动画速度 */
   text-align: justify;
}

.scroll-wrap::after {
  width: 100%;
  overflow: hidden;
  height: 0;
  content: '';
  display: inline-block;
}

.scroll-wrap>a {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.scroll-wrap>a img {
  transition: .3s linear;
}

.scroll-wrap>a span {
  position: absolute;
  font-size: 18px;
  left: 22px;
  top: 22px;
  width: 20px;
  color: white;
  text-shadow: 0 0 5px #00000065;
}

.scroll-wrap>a:hover img {
  transform: scale(1.2);
}


.xyyl-box {
  width: 1170px;    /* 显示区域宽度 = 4个标签总宽度 */
  height: 522px;
  overflow: hidden;
  position: relative;
}

  /* 图片 - 242x522px */
  .xyyl-box a img {
    width: 242px;
    height: 522px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
  }
  
 /* 每个a标签 - 分散对齐（292.5px = 1170/4） */
  .xyyl-box a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 242px;
    height: 100%;
    text-decoration: none;
    color: #333;
    flex-shrink: 0;
	margin-right: 60px;
  }

.zhuanti {
  height: 714px;
  margin-top: 0px; /* 平板默认样式（768px-1023px） */
}


/* ========== 大屏幕（≥1024px）========== */
@media (min-width: 1024px) {
  .zhuanti {
    height: 714px;
    margin-top: 90px;
  }
}

/* ========== 移动端样式（≤768px） ========== */
  @media (max-width: 767px) {

  .zhuanti {
    margin-top: 50px;
    height: 500px;
}

    .xyyl-box {
      width: 390px;    /* 2个图片宽度 + 间距 */
      height: 1160px;  /* 2个图片高度 + 文字 */
    }
    
    .scroll-wrap {
      flex-wrap: wrap; /* 允许换行形成2×2网格 */
      width: 200%;     /* 宽度加倍，容纳4个图片（2×2） */
    }
    
    .xyyl-box a {
      width: 22.7%;      /* 每行显示2个 */
      height: 50%;     /* 两行显示 */
     margin-right: 10px;
	 margin-bottom: 10px;
    }
    
    .xyyl-box a img {
      width: 174px;    /* 移动端缩小图片 */
      height: 376px;
    }
  }

  /* 中等屏幕（平板，768px - 1023px）：显示3个 */
  @media (min-width: 768px) and (max-width: 1024px) {

    .xyyl-box {
      width: 100%;    /* 2个图片宽度 + 间距 */
      height: 600px;  /* 2个图片高度 + 文字 */
    }

    .xyyl-box a {

	     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 242px;
    height: 100%;
    text-decoration: none;
    color: #333;
    flex-shrink: 0;
	margin-right:70px;
    }

    .xyyl-box a img {
      width: 220px;
      height: 490px;
    }
  }

/* 专题一组四个图滚动 */