.top-block-container {
    position: relative;
    background-color: transparent;
    z-index: 1;
    background-repeat: round;
    padding-left: 0;
    padding-right: 0;
}

.top-block-container::before {
    background-color: transparent;
}

/* 只影响作为 top-block-container 直接子元素的图片，而不会影响到 .top-content-box 中的图片布局 */
.top-block-container > img {
    display: block; /* 将图片转换为块级元素，使其可以应用 margin: auto */
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px; /* 与上方内容产生一定间距，视觉上更协调 */
    margin-bottom: 20px;
    max-width: 100%; /* 确保图片在任何情况下都不会超出其容器 */
}

/* TBD：整体放在block里还是title、block单独控制 */
.top-block-content {
    width: var(--xl-main-width);
    max-width: var(--xl-main-max-width);
    margin: 0 auto;
}

.top-block-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 28px;
    background-color: var(--appl-primary-color);
}

.top-block-title {
    position: relative;
    /* color: white; */
    color: #333;
    font-size: 26px;
    padding-left: var(--top-highlight-content-left);
    margin-bottom: 20px;
}

.top-block-detail {
    padding: 15px 0;
    font-size: 16px;
    color: #666;
}

.top-full-width-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-repeat: round;
    z-index: -1;
}

/* Tab 容器整体样式 */
.top-case-box .top-nav-tabs.nav-tabs {
    display: flex;
    padding-bottom: 8px;
    border-bottom: 1px solid #E6E5E5 !important; /* 底部长灰线 */
    font-size: 20px;
}

.top-case-box .top-nav-tabs  li {
    list-style-type: none !important;
    margin-left: 0;
}

/* Tab 链接样式 (<a>) */
.top-case-box .top-nav-tabs .nav-link {
    border: none !important; /* 移除Bootstrap的默认边框 */
    background-color: transparent !important;
    color: #4E4E4E; /* 未激活状态的文字颜色 */
    padding-top: 20px;
    padding-bottom: 8px;
    padding-left: 0px;
    margin-right: 30px;
    transition: color 0.3s ease;
    position: relative;
    white-space: nowrap;
}

/* 通过伪元素创建下划线，默认宽度为0 */
.top-case-box .top-nav-tabs .nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--appl-primary-color);
    transition: width .3s;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* 鼠标悬停在任意Tab上时，文字变蓝 */
.top-case-box .top-nav-tabs .nav-link:hover {
    color: var(--appl-primary-color);
}

/* 激活状态的Tab链接 */
.top-case-box .top-nav-tabs .nav-link.active,
.top-case-box .top-nav-tabs .nav-link.active:hover,
.top-case-box .top-nav-tabs .nav-link.active:focus {
    color: var(--appl-primary-color); /* 激活状态文字颜色 */
    border-color: transparent !important;
    background-color: transparent !important;
}

/* 激活状态的Tab显示下划线 */
.top-case-box .top-nav-tabs .nav-link.active::after {
    width: 100%; /* 下划线宽度撑满 */
}

/* Tab内容区域样式 */
.top-case-box .tab-content {
    margin-top: 30px; /* 内容区域与Tab导航的距离 */
    padding: 0; /* 移除可能存在的内边距 */
}

/* 确保 tab-pane 的背景和内边距由其内部的 .top-highlight-container 控制 */
.top-case-box .tab-content > .tab-pane {
    padding: 0; 
    background-color: transparent;
}

.top-tab-highlight-container {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

.top-tab-highlight-container.active {
  display: flex;
}

.top-content-box {
    display: flex;
    align-items: center; /* 子元素垂直居中 */
    gap: 40px; /* 在子元素之间创建 40px 的间距 */
    margin-top: 60px; /* 增加每个图文块之间的垂直间距 */
    margin-bottom: 60px;
}

/* 
  使用子选择器 (>) 确保只影响 .top-content-box 的直接子元素。
  使用通用选择器 (*) 使其对 img 和 .top-block-detail 都生效。
*/
.top-content-box > * {
    flex: 1; /* 让每个子元素平均占据可用空间，实现 50% 宽度效果 */
    min-width: 0; /* 防止子元素内容过长时撑破布局 */
}

/* 
   为 .top-content-box 内的 .top-block-detail 单独设置样式。
   这样可以覆盖全局的 .top-block-detail 样式，而不会影响其他地方的使用。
*/
.top-content-box > .top-block-detail {
    padding: 0; /* 移除该元素在 flex 布局中可能不需要的垂直内边距 */
}

/* 默认 5-5 比例 */
.top-content-box.ratio-5-5 > :first-child,
.top-content-box.ratio-5-5 > :last-child {
    flex: 1 1 0%; /* 等同于 flex: 1 */
}

/* 1-9 比例 */
.top-content-box.ratio-1-9 > :first-child { flex: 1 1 0%; }
.top-content-box.ratio-1-9 > :last-child  { flex: 9 1 0%; }

/* 2-8 比例 */
.top-content-box.ratio-2-8 > :first-child { flex: 2 1 0%; }
.top-content-box.ratio-2-8 > :last-child  { flex: 8 1 0%; }

/* 3-7 比例 */
.top-content-box.ratio-3-7 > :first-child { flex: 3 1 0%; }
.top-content-box.ratio-3-7 > :last-child  { flex: 7 1 0%; }

/* 4-6 比例 */
.top-content-box.ratio-4-6 > :first-child { flex: 4 1 0%; }
.top-content-box.ratio-4-6 > :last-child  { flex: 6 1 0%; }

/* 6-4 比例 */
.top-content-box.ratio-6-4 > :first-child { flex: 6 1 0%; }
.top-content-box.ratio-6-4 > :last-child  { flex: 4 1 0%; }

/* 7-3 比例 */
.top-content-box.ratio-7-3 > :first-child { flex: 7 1 0%; }
.top-content-box.ratio-7-3 > :last-child  { flex: 3 1 0%; }

/* 8-2 比例 */
.top-content-box.ratio-8-2 > :first-child { flex: 8 1 0%; }
.top-content-box.ratio-8-2 > :last-child  { flex: 2 1 0%; }

/* 9-1 比例 */
.top-content-box.ratio-9-1 > :first-child { flex: 9 1 0%; }
.top-content-box.ratio-9-1 > :last-child  { flex: 1 1 0%; }

@media (max-width: 991px) {
    .top-content-box {
        flex-direction: column; /* 在小屏幕上，将布局方向改为垂直堆叠 */
        gap: 20px; /* 调整垂直堆叠时的间距 */
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .top-block-container > img {
        width: 100% !important;  /* 在小屏幕上，保证图片宽度为100% */
        margin-top: 20px;
    }
}