/* 须在 customize.css 之后加载 — Block5/6 地球贯穿与遮罩 */

.tapss-block56 {
  position: relative;
  overflow: visible;
}

.Block5 {
  position: relative;
  z-index: 2 !important;
  overflow: visible !important;
}

.Block5 .container {
  overflow: visible;
  position: relative;
}

.Block5 .container h2,
.Block5 .container p,
.Block5 .container .itemList {
  position: relative;
  z-index: 2;
}

.Block5 .container .earth {
  display: block;
  position: absolute;
  z-index: 1;
  left: -80px;
  bottom: -140px;
  width: 450px;
  height: 460px;
  background: url("/images/Block5_bg.png") no-repeat 0 bottom;
  background-size: contain;
  pointer-events: none;
}

/* 外层纯白，避免 .Block 的 padding 条透出背景图 */
.Block6 {
  position: relative;
  z-index: 1 !important;
  margin-top: 0 !important;
  border-top: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: #fff !important;
  background-image: none !important;
  overflow: visible !important;
}

@media (min-width: 768px) {
  .tapss-block56 .Block5 .container {
    padding-bottom: 0;
  }

  .Block6 .container {
    position: relative;
    overflow: visible;
    min-height: 400px;
    padding-top: 1.25rem;
    padding-bottom: 1rem;
    padding-right: 0 !important;
    /* 斜切：右上 → 左下；切线略偏右，遮住背景树叶 */
    --block6-cut-top: 73%;
    --block6-cut-bottom: 43%;
    /* 左侧内容最大宽度：以斜切最窄处（底部）为准，避免文字/按钮被切 */
    --block6-left-safe: calc(var(--block6-cut-bottom) - 3%);
  }

  /* 左侧：纯白（与右侧图片区共用同一条斜切边，不互相覆盖） */
  .Block6 .container::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    background: #fff !important;
    transform: none !important;
    clip-path: polygon(
      0 0,
      var(--block6-cut-top) 0,
      var(--block6-cut-bottom) 100%,
      0 100%
    );
    pointer-events: none;
  }

  /* 右侧：书本背景贴死右边缘（延伸至视口） */
  .Block6 .container::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: calc(50% - 50vw);
    box-sizing: border-box;
    padding: 0 0 0 12px;
    background-color: #fff;
    background-image: url("/images/Block6_bg.jpg");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: right center;
    background-origin: border-box;
    background-clip: border-box;
    clip-path: polygon(
      var(--block6-cut-top) 0,
      100% 0,
      100% 100%,
      var(--block6-cut-bottom) 100%
    );
    pointer-events: none;
  }

  /* 标题区保持在切线左侧，横线不被斜切压住 */
  .Block6 .container h2 {
    width: 34% !important;
    max-width: 20rem !important;
    margin: 0 0 0.5em 8% !important;
    padding: 0 0.5rem 0.35em !important;
    text-align: center;
    box-sizing: border-box;
    overflow: visible;
    clip-path: none;
  }

  .Block6 .container h2 .secTitle {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    box-sizing: border-box;
    overflow: visible;
  }

  /* 左侧列表：宽度贴合白区安全范围，靠换行展开，不做 clip 裁切 */
  .Block6 .container .row > .col-sm-7 {
    width: var(--block6-left-safe) !important;
    max-width: var(--block6-left-safe) !important;
    float: none !important;
    padding-left: 2.5rem !important;
    padding-right: 1rem !important;
    overflow: visible !important;
    clip-path: none !important;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    z-index: 2;
  }

  .Block6 .container .row > .col-sm-7 ul,
  .Block6 .container .row > .col-sm-7 .more {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .Block6 .container .row {
    position: relative;
    min-height: 360px;
  }

  /* 右侧可用区：不裁切封面，在切线以右安全区内居中 */
  .Block6 .container .row > .col-sm-5 {
    position: absolute;
    top: 0;
    bottom: 0;
    /* 左缘取斜切最靠左处（底部）+ 留白，避免封面被斜线切到 */
    left: calc(var(--block6-cut-bottom) + 4%);
    right: calc(50% - 50vw);
    width: auto !important;
    float: none !important;
    clip-path: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
    z-index: 3;
  }

  .Block6 .container figure.bookIMG {
    width: 217px !important;
    height: 300px !important;
    margin: 0 !important;
    flex-shrink: 0;
    overflow: visible !important;
    position: relative;
    z-index: 3;
  }

  .Block6 .container ul {
    max-width: none !important;
    width: 100%;
    padding-right: 0;
    text-align: left;
  }

  .Block6 .container ul li {
    overflow: visible;
  }

  .Block6 .container ul li a {
    display: block;
    width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
  }

  .Block6 .container .more {
    display: inline-block;
    max-width: 100%;
    margin: 1.25rem 0 0 !important;
    box-sizing: border-box;
    white-space: normal;
  }

  .Block7 {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  .Block5 .container .earth {
    left: 0;
    bottom: -80px;
    width: 100%;
    max-width: 420px;
    max-height: 320px;
    margin: 0 auto;
    opacity: 0.22;
    background-position: center bottom;
  }
}