/* 苏州园区不动产页面 - 图片与领证通知布局样式（最终优化版） */

/* 1. 外层容器：缩减与菜单栏间距 */
.gcjsBox {
  margin-top: -10px; /* 向上缩减与上方菜单栏空白，可按需微调 */
  padding: 0; /* 清除外层容器内边距，避免挤压内容 */
}

/* 2. 核心父容器：控制图片与领证通知左右布局+上下齐平 */
.notice-qrcode-container {
  display: flex;
  gap: 20px; /* 左右模块间距，PC端保持20px，移动端会调整 */
  align-items: stretch; /* 强制子模块高度一致，实现上下齐平 */
  margin-bottom: 20px;
  width: 100%;
  margin-top: 10px; /* 进一步减小与菜单栏的距离 */
  padding: 0; /* 清除父容器内边距，避免两侧留白 */
}

/* 3. 左侧图片模块（PC端样式） */
.qrcode-module {
  width: 40%;
  flex: 0 0 auto; /* 不拉伸宽度，保持图片原始比例 */
  display: flex;
  align-items: center; /* 图片垂直居中，避免高度不足导致留白 */
  justify-content: center; /* 图片水平居中 */
}
.qrcode-module .qrcode-banner {
  height: 100%; /* 跟随模块高度，实现与领证通知底部齐平 */
  width: auto; /* 宽度自适应，保持比例 */
  max-width: 100%; /* 防止PC端图片过宽溢出 */
  object-fit: contain; /* 完整显示图片，不裁剪 */
}

/* 4. 右侧领证通知模块（全端通用） */
.notice-module {
  flex: 1; /* 宽度自适应剩余空间，适配不同屏幕 */
  display: flex;
  flex-direction: column; /* 内部内容垂直排列 */
}
/* 缩减领证通知标题与内容间距 */
.notice-module .zcfgList {
  flex: 1; /* 容器高度跟随模块，与左侧图片同步 */
  display: flex;
  flex-direction: column;
  margin-top: -10px; /* 清除默认上边距 */
  padding: 0; /* 清除内边距 */
}
/* 优化标题栏紧凑度 */
.notice-module .zcfgTitle {
  margin-bottom: 15px; /* 减小标题与iframe的间距（原可能10px+） */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notice-module .zcfgTitle_wz {
  margin: 0; /* 清除标题默认外边距 */
  font-size: 16px; /* 保持标题清晰度，避免过小 */
}
/* 让iframe填满容器，实现底部齐平 */
.notice-module .zcfgList ul {
  flex: 1; /* 列表高度=通知容器高度 */
  margin: 0; /* 清除列表默认边距 */
  padding: 0; /* 清除列表默认内边距 */
}
.notice-module iframe {
  height: 100% !important; /* 覆盖原270px固定高度，与容器同步 */
  width: 100%; /* 宽度填满容器 */
  border: none; /* 清除iframe默认边框 */
}

/* 5. 移动端适配（屏幕≤768px） */
@media (max-width: 768px) {
  /* 切换为上下布局 */
  .notice-qrcode-container {
    flex-direction: column;
    gap: 10px; /* 缩减上下模块间距，更紧凑 */
  }
  /* 图片模块全屏无空白 */
  .qrcode-module {
    width: 100% !important; /* 强制占满屏幕宽度 */
    height: auto; /* 取消固定高度，由图片决定 */
    padding: 0; /* 清除内边距 */
    margin: 0; /* 清除外边距 */
  }
  .qrcode-module .qrcode-banner {
    width: 100% !important; /* 核心：图片全屏，消除两侧空白 */
    height: auto !important; /* 高度自适应，避免变形 */
    object-fit: cover; /* 图片填满容器（无空白，若需完整显示则改为contain） */
    max-width: none; /* 取消PC端最大宽度限制 */
  }
  /* 外层容器适配 */
  .warp {
    padding: 0 !important; /* 清除 warp 类默认内边距，避免图片被挤压 */
  }
  /* 标题栏进一步紧凑 */
  .notice-module .zcfgTitle {
    padding: 5px 0; /* 移动端标题栏更窄 */
  }
}