.runda_text_display4 {
  background: #f5f4f1;
  padding: var(--component-gap) 15px;
}

.display4_round_wrapper {
  width: fit-content;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.display4_round_btn {
  display: inline-block;
  margin-top: calc(var(--text-gap-sm) * 2);
}

.display4_round {
  position: relative;
  width: 579px;
  background: #eae8e2;
  border-radius: 50%;
  aspect-ratio: 1/1;
  /* 基准宽度，用于小屏等比例缩放 */
  --round-base-width: 579;
  max-width: min(100%, 579px);
}

.display4_round_title {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, -35px);
}

.display4_round_title_icon {
  width: 70px;
  height: 70px;
  display: inline-block;
}

.display4_round_title_icon svg {
  width: 100%;
  height: 100%;
}

.display4_round_title h2 {
  color: #A59967;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.96px;
}

.display4_round_list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.display4_round_list_item {
  position: absolute;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* 仅当有 item 被 hover 时：其他 item 变淡，当前 item 保持不透明 */
.display4_round_list:has(.display4_round_list_item:hover) .display4_round_list_item {
  opacity: 0.25;
}
.display4_round_list:has(.display4_round_list_item:hover) .display4_round_list_item:hover {
  opacity: 1;
}

.display4_round_list_item_text {
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -2px;
}

@media screen and (max-width: 609px) {
  .display4_round_wrapper {
    padding: 0;
    width: 100%;
    max-width: 579px;
  }

  /* 圆形容器作为尺寸参考，使内部字体/尺寸随宽度等比例缩放 */
  .display4_round {
    container-type: inline-size;
    container-name: display4-round;
    /* 1em = 圆实际宽度/579，用于标题和图标等比例缩放 */
    font-size: calc((100cqw - 30px) / var(--round-base-width));
  }

  /* item 字体随圆宽度等比例缩小 */
  .display4_round_list_item_text {
    font-size: calc(var(--item-size) * 1em) !important;
    letter-spacing: -0.06em;
  }

  /* 标题与图标用 em，随容器 font-size 等比例缩放 */
  .display4_round_title h2 {
    font-size: 28em;
  }

  .display4_round_title_icon {
    width: 70em;
    height: 70em;
  }

  .display4_round_title {
    width: 100%;
    transform: translate(-50%, -35em);
  }
}

@media screen and (max-width: 768px) {
    .display4_round_list_item:nth-child(3) .display4_round_list_item_text{
      font-size: 30px !important;
    }
    .display4_round_list_item:nth-child(5) .display4_round_list_item_text{
      font-size: 30px !important;
    }
}
@media screen and (max-width: 576px) {
    .display4_round_list_item:nth-child(3) .display4_round_list_item_text{
      font-size: 20px !important;
    }
    .display4_round_list_item:nth-child(5) .display4_round_list_item_text{
      font-size: 20px !important;
    }
}