* {
    --theme-color: #165DFF; /* 主题色变量 */
    box-sizing: border-box; /* 新增：统一盒模型，避免尺寸溢出 */
}
#text_content{
    font-size: 1.8vw;
}
#primary_tile {
    font-size: 3vw;
    position: relative; /* 标题装饰定位基础 */
    padding: 0.5vw 1vw; /* 标题内边距，适配装饰 */
    display: inline-block; /* 标题宽度适配内容 */
}

/* 通用 SVG 装饰样式：设置装饰层的层级和定位 */
.layout-decor-top,
.layout-decor-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2vw; /* 装饰条高度 */
    z-index: 0; /* 装饰层在内容下方 */
}
.layout-decor-top {
    top: 0;
}
.layout-decor-bottom {
    bottom: 0;
}

/* 容器基础样式：添加相对定位，适配装饰层 */
.layout-center,
.layout-img-left,
.layout-text-top {
    position: relative;
    padding: 2vw; /* 内边距，避免内容与装饰重叠 */
    overflow: hidden; /* 隐藏溢出的装饰元素 */
}

/* 版式1：居中版式（layout-center）- 主题色：深蓝色系 */
.layout-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    background-color: #f0f7ff; /* 浅蓝色系浅色背景 */
}

/* 版式1 标题装饰：左侧小圆 + 底部渐变线条 */
.layout-center #primary_tile::before {
    content: '';
    position: absolute;
    left: -0.8vw;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2vw;
    height: 1.2vw;
    border-radius: 50%;
    background-color: var(--theme-color);
    z-index: 1;
}
.layout-center #primary_tile::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.2vw;
    background: linear-gradient(90deg, var(--theme-color), transparent);
    z-index: 1;
}

/* 版式1 顶部/底部 SVG 线性装饰：蓝色波浪线条 */
.layout-center::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2vw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%23165DFF20'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    z-index: 0;
}
.layout-center::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2vw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V6.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,13.84,512.34,35.07,583,53.45c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,26.71,1113,6.08,1200,52.47V0Z' fill='%23165DFF20'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    z-index: 0;
}

.layout-center #primary_tile {
    white-space: nowrap;
    color: var(--theme-color); /* 主标题用主题色 */
    font-weight: 700;
}

.layout-center #secondary {
    font-size: 2.5vw; /* 次级标题比例字号 */
    color: #4070f4; /* 浅一点的蓝色系 */
    margin: 1vw 0;
}

.layout-center img {
    max-height: 35%; /* 按容器高度比例限制 */
    max-width: 100%; /* 新增：不超出容器宽度 */
    width: 100%; /* 新增：适配容器宽度 */
    object-fit: cover; /* 新增：保持比例不变形（裁剪超出部分） */
    margin: 1.5vw 0; /* 比例化间距 */
    position: relative;
    z-index: 1; /* 图片在装饰层上方 */
}

/* 版式2：左图右文版式（layout-img-left）- 主题色：墨绿色系 */
.layout-img-left {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 等比例分栏 */
    gap: 1.5vw; /* 比例化间距 */
    align-items: flex-start;
    height: 100%;
    background-color: #f0f8f5; /* 墨绿色系浅色背景 */
    --theme-color: #0d8050; /* 版式2主题色 */
}

/* 版式2 标题装饰：右侧双线条 + 圆角矩形背景 */
.layout-img-left #primary_tile::before {
    content: '';
    position: absolute;
    right: -1vw;
    top: 20%;
    width: 0.2vw;
    height: 60%;
    background-color: var(--theme-color);
    box-shadow: 0.5vw 0 0 0 var(--theme-color);
    z-index: 1;
}
.layout-img-left #primary_tile::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0d805010;
    border-radius: 0.5vw;
    z-index: -1;
}

/* 版式2 顶部/底部 SVG 线性装饰：墨绿色斜线条 */
.layout-img-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2vw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V0C0,0,31,30,321.39,56.44Z' fill='%230d805020'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    z-index: 0;
}
.layout-img-left::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2vw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%230d805020'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    z-index: 0;
}

.layout-img-left #primary_tile {
    grid-column: 1 / 3;
    white-space: normal; /* 长标题自动换行 */
    color: var(--theme-color); /* 主标题用主题色 */
    font-weight: 700;
    margin-bottom: 1vw;
    z-index: 1;
}

.layout-img-left #secondary {
    grid-column: 1 / 3;
    white-space: normal;
    font-size: 2.2vw; /* 次级标题比例字号 */
    margin-bottom: 1.5vw;
    z-index: 1;
}

.layout-img-left img {
    max-width: 100%; /* 新增：不超出网格列宽度 */
    max-height: 80vh; /* 新增：不超出视口高度（可调整） */
    width: 100%; /* 新增：适配网格列宽度 */
    object-fit: cover; /* 新增：保持比例不变形 */
    margin-bottom: 0;
    z-index: 1; /* 图片在装饰层上方 */
}

.layout-img-left #text_content {
    color: #333; /* 正文基础色 */
    z-index: 1; /* 文本在装饰层上方 */
}

/* 版式3：上文下图版式（layout-text-top）- 主题色：橙红色系 */
.layout-text-top {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff5f0; /* 橙红色系浅色背景 */
    --theme-color: #e86830; /* 版式3主题色 */
}

/* 版式3 标题装饰：上下短线条 + 左侧半圆 */
.layout-text-top #primary_tile::before {
    content: '';
    position: absolute;
    left: -0.6vw;
    top: 0;
    width: 1.2vw;
    height: 100%;
    border-radius: 50% 0 0 50%;
    background-color: var(--theme-color);
    opacity: 0.2;
    z-index: 1;
}
.layout-text-top #primary_tile::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0.15vw;
    background-color: var(--theme-color);
    box-shadow: 0 calc(100% - 0.15vw) 0 0 var(--theme-color);
    z-index: 1;
}

/* 版式3 顶部/底部 SVG 线性装饰：橙红色波浪线条 */
.layout-text-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2vw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%23e8683020'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    z-index: 0;
}
.layout-text-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2vw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V0C0,0,31,30,321.39,56.44Z' fill='%23e8683020'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    z-index: 0;
}

.layout-text-top #primary_tile {
    color: var(--theme-color); /* 主标题用主题色 */
    font-weight: 700;
    margin-bottom: 0.8vw;
    z-index: 1;
}

.layout-text-top #secondary {
    font-size: 2.3vw; /* 次级标题比例字号 */
    margin-bottom: 1.2vw;
    z-index: 1;
}

.layout-text-top #text_content {
    font-size: 1.9vw; /* 正文比例字号 */
    color: #444; /* 正文基础色 */
    z-index: 1; /* 文本在装饰层上方 */
}

.layout-text-top img {
    max-width: 100%; /* 新增：不超出容器宽度 */
    max-height: 50vh; /* 新增：不超出视口高度（可调整） */
    width: 100%; /* 新增：适配容器宽度 */
    object-fit: cover; /* 新增：保持比例不变形 */
    margin: 0 auto;
    position: relative;
    z-index: 1; /* 图片在装饰层上方 */
}