@charset "UTF-8";
/* =============================================================================
 * home.css — 盛家房产 · 官网首页
 * 基准：蓝湖设计稿 1920 × 6990（内容栅格 1400px 居中，左右各 260）
 * 主色：主蓝 #01539C · 深蓝 #0562BC · 强调红 #CF0000 · 藏蓝 #101635
 * 依赖：sjfc-core.css（.sj-wrap / --sj-* 变量 / 页头页脚）
 * 断点：1440 / 1200 / 992 / 768 / 480
 * ========================================================================== */

.sj-home {
    --h-blue: #01539c;
    --h-blue-d: #001e65;
    --h-blue-n: #001a56;
    --h-ink: #333333;
    --h-gray: #666666;
    --h-red: #cf0000;
    --h-light: #eff2f7;
    --h-card: #f4f4f4;
    --h-tab: #f5f5f5;
    --h-tab-on: #0562bc;
    --h-line: #afafaf;
    --h-shadow: 0 7px 13px rgba(74, 74, 74, .6);
    /* 板块标题统一位移：首页所有板块的标题（标题三件套 / 图文并列标题）相对板块顶部上移的量
       —— 各板块用 calc(原值 - var(--sj-head-shift)) 引用，后续只改这一个值即可整体微调 */
    --sj-head-shift: 20px;
    /* 设计稿等比单位：1920 画布下 1px；小屏钳制下限，避免文字过小 */
    --u: max(0.05208vw, .58px);
    overflow-x: hidden;
}

/* =============================================================================
 * 通用元件（跨板块复用）
 * ========================================================================== */

/* 章节标题三件套：主标题 36px / 红色副标 24px / 短色条 48×6 */
.sj-sec__title {
    margin: 0;
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    color: var(--h-ink);
}

.sj-sec__sub {
    margin: 29px 0 0;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--h-red);
}

.sj-sec__bar {
    display: block;
    width: 48px;
    height: 6px;
    margin-top: 30px;
    background: var(--h-blue);
}

.sj-sec__bar--red {
    background: var(--h-red);
}

/* 胶囊按钮 152×40（文字 70 + 箭头 12，左内距 32） */
.sj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 152px;
    height: 40px;
    padding: 0 0 0 32px;
    border: 0;
    border-radius: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s var(--sj-ease), transform .2s var(--sj-ease);
}

.sj-btn--red {
    background: var(--h-red);
}

.sj-btn--gray {
    background: var(--h-gray);
}

.sj-btn--ghost {
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--h-red);
    color: var(--h-red);
}

.sj-btn:hover {
    filter: brightness(1.1);
}

.sj-btn__arrow {
    flex: none;
    width: 12px;
    height: 20px;
    margin-left: 14px;
    background: currentColor;
    -webkit-mask: url("../images/home/icon-arrow.png") center / contain no-repeat;
    mask: url("../images/home/icon-arrow.png") center / contain no-repeat;
}

.sj-btn--ghost .sj-btn__arrow {
    margin-left: 12px;
    color: var(--h-red);
}

/* 圆形箭头（列表卡片右下角 20×20） */
.sj-round {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.sj-round i {
    width: 9px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("../images/home/icon-arrow.png") center / contain no-repeat;
    mask: url("../images/home/icon-arrow.png") center / contain no-repeat;
}

/* =============================================================================
 * ① 首页 Banner —— 蓝湖 .image_2（1920×660）
 * 底图由后台「广告位 → 首页banner」提供，文字层由 广告名称 / 广告描述 / 广告内容
 * 三字段叠加而成，并带逐层上浮的展现动效
 * ========================================================================== */
.sj-banner {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}

/* 无白色阴影：底图自带明暗，文字靠左侧柔化遮罩保证可读 */
.sj-banner__track {
    display: flex;
    transition: transform .65s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.sj-banner__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    overflow: hidden;
}

.sj-banner__pic {
    display: block;
    width: 100%;
    height: auto;
}

.sj-banner__text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    z-index: 2;
    align-items: flex-start;
    pointer-events: none;
}

.sj-banner__box {
    width: 100%;
    padding-top: calc(102 * var(--u));
}

/* Banner 文字统一白边：底图明暗不可控，靠"白色描边 + 柔白晕"把文字从图里'抬'出来。
   paint-order:stroke fill 让描边落在字形下层，字号不会被吃掉；
   text-shadow 再补一圈柔光，让硬描边与照片自然过渡（比纯描边更不"贴纸"）。 */
.sj-banner__eyebrow,
.sj-banner__headline,
.sj-banner__desc {
    paint-order: stroke fill;
}

.sj-banner__eyebrow {
    margin: 0;
    font-size: calc(33 * var(--u));
    line-height: 1.2;
    font-weight: 700;
    color: #141414;
    letter-spacing: .5px;
    -webkit-text-stroke: calc(2 * var(--u)) #fff;
    text-shadow:
        0 0 calc(4 * var(--u)) rgba(255, 255, 255, .9),
        0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(255, 255, 255, .75);
}

.sj-banner__headline {
    margin: calc(12 * var(--u)) 0 0;
    max-width: calc(640 * var(--u));
    font-size: calc(64 * var(--u));
    line-height: 1.28;
    font-weight: 800;
    color: var(--h-blue-d);
    letter-spacing: .5px;
    -webkit-text-stroke: calc(3.5 * var(--u)) #fff;
    text-shadow:
        0 0 calc(6 * var(--u)) rgba(255, 255, 255, .95),
        0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(255, 255, 255, .8);
}

.sj-banner__desc {
    margin: calc(16 * var(--u)) 0 0;
    max-width: calc(900 * var(--u));
    font-size: calc(26 * var(--u));
    line-height: 1.5;
    font-weight: 400;
    color: var(--h-blue-n);
    -webkit-text-stroke: calc(2 * var(--u)) #fff;
    text-shadow:
        0 0 calc(5 * var(--u)) rgba(255, 255, 255, .9),
        0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(255, 255, 255, .7);
}

/* 左侧柔化遮罩：底图明暗不一（夜景/实景照），保证深色文字可读。
   用半透明到全透明渐变，不再是"白色阴影"式的硬覆盖 */


/* 文字展现动效：仅当前帧播放，逐层上浮淡入（幅度加大 + 轻微模糊收束，更明显） */
.sj-banner__slide [data-anim] {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    filter: blur(6px);
}

.sj-banner__slide.is-on [data-anim] {
    animation: sjBannerIn .95s cubic-bezier(.19, 1, .22, 1) forwards;
}

/* 三层依次入场：名称 → 主标题 → 描述 */
.sj-banner__slide.is-on [data-anim="1"] {
    animation-delay: .06s;
}

.sj-banner__slide.is-on [data-anim="2"] {
    animation-delay: .22s;
}

.sj-banner__slide.is-on [data-anim="3"] {
    animation-delay: .40s;
}

@keyframes sjBannerIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
        filter: blur(6px);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* 轮播控制：右下角横条（选中项用蓝色标识）+ 悬停出现的左右箭头 */
.sj-banner__dots {
    position: absolute;
    right: max(20px, calc((100% - 1440px) / 2 + 20px));
    bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sj-banner__dot {
    width: 26px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: width .3s cubic-bezier(.22, .61, .36, 1), background .25s;
}

.sj-banner__dot:hover {
    background: rgba(255, 255, 255, .85);
}

/* 选中态：主题蓝 + 加长，与全站主色一致 */
.sj-banner__dot.is-on {
    width: 44px;
    background: var(--h-blue);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* 单张广告时隐藏轮播控件 */
.sj-banner.is-single .sj-banner__dots {
    display: none;
}

/* =============================================================================
 * ② 了解盛家房产 —— 蓝湖 .section_8（1400×772）
 * 数据：单页「了解盛家房产」——promo_image 左图 / image 右图 / subtitle 红副标 /
 *      post_content 首段 + 三个 <strong> 卡片的「标题 + 说明」对
 * ========================================================================== */
.sj-about {
    margin-top: 100px;
}

.sj-about__row {
    display: flex;
    justify-content: space-between;
}

.sj-about__pic {
    position: relative;
    flex: none;
    width: 560px;
    height: 720px;
    border-radius: 24px 24px 24px 0;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(1, 30, 70, .16);
}

.sj-about__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 左下角斜切装饰：呼应"右小角"的圆角语言，让左图不呆板 */
.sj-about__pic::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 118px;
    height: 118px;
    background: linear-gradient(45deg, var(--h-blue) 0 50%, rgba(1, 83, 156, .12) 50% 100%);
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    pointer-events: none;
}

.sj-about__body {
    width: 736px;
    /* 标题相对板块上移（--sj-head-shift） */
    margin-top: calc(45px - var(--sj-head-shift));
}

.sj-about__head {
    position: relative;
}

/* ---- 主标题：大字 + 底部渐隐基准线，打破"标题浮在空白里"的松散感 ---- */
.sj-about__title {
    margin: 0;
    display: flex;
    align-items: baseline;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--h-ink);
    letter-spacing: 1px;
}

.sj-about__title-txt {
    flex: none;
    position: relative;
    padding-bottom: 14px;
}

/* 主标题下方渐隐细线：从实蓝收束到透明，给标题一个"托底" */
.sj-about__title-txt::after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 0;
    width: calc(100% + 18px);
    height: 2px;
    background: linear-gradient(90deg, var(--h-blue) 0%, rgba(1, 83, 156, .38) 46%, rgba(1, 83, 156, 0) 100%);
}

/* 右侧延伸横线，与主标题同基线收尾 */
.sj-about__title-line {
    flex: 1 1 auto;
    height: 1px;
    margin-left: 16px;
    background: linear-gradient(90deg, rgba(1, 83, 156, .22) 0%, rgba(1, 83, 156, 0) 100%);
}

/* ---- 副标：红字 + 蓝底描边标签，做成"主张 + 背书"的组合 ---- */
.sj-about__claim {
    display: flex;
    align-items: center;
    margin-top: 18px;
}

.sj-about__claim-txt {
    position: relative;
    padding-left: 19px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--h-red);
    letter-spacing: .5px;
}

/* 副标前的红色小方块，替代原先通用的整条色棒 */
.sj-about__claim-txt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: var(--h-red);
    transform: rotate(45deg);
}

.sj-about__claim-tag {
    flex: none;
    margin-left: 14px;
    padding: 4px 10px;
    border: 1px solid var(--h-blue);
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--h-blue);
    letter-spacing: 1px;
}

/* ---- 认证点阵：三地备案 / 门店 / 年限，用圆点分隔，替代散落小字 ---- */
.sj-about__metas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.sj-about__metas li {
    position: relative;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--h-gray);
}

.sj-about__metas li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--h-blue);
    opacity: .8;
}

.sj-about__metas li + li {
    margin-left: 22px;
}

.sj-about__intro {
    margin: 28px 0 0;
    font-size: 18px;
    line-height: 44px;
    font-weight: 700;
    color: var(--h-ink);
}

.sj-about__cards {
    display: flex;
    margin-top: 75px;
}

/* 卡片改为横向排布：左侧 01/02/03 序号 + 右侧标题与说明，左对齐更利落 */
.sj-about__card {
    display: flex;
    flex: none;
    align-items: center;
    width: 230px;
    height: 100px;
    padding: 0 14px 0 12px;
    border-radius: 13px;
    background: linear-gradient(150deg, var(--h-blue) 0%, #0167be 100%);
    box-shadow: 0 8px 18px rgba(1, 83, 156, .22);
    text-align: left;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}

.sj-about__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 24px rgba(1, 83, 156, .3);
}

.sj-about__card + .sj-about__card {
    margin-left: 22px;
}

.sj-about__card-no {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    font-family: Impact, "Arial Black", sans-serif;
    font-size: 15px;
    line-height: 1;
    color: #fff;
}

.sj-about__card-txt {
    min-width: 0;
}

.sj-about__card b {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.sj-about__card p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 19px;
    color: rgba(255, 255, 255, .9);
}

/* 底部操作区：按钮 + 一行服务提示，形成"转化位" */
.sj-about__foot {
    display: flex;
    align-items: center;
    margin-top: 66px;
}

.sj-about__more {
    flex: none;
}

.sj-about__tip {
    margin: 0 0 0 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--h-gray);
}

.sj-about__city {
    width: 684px;
    max-width: 100%;
    margin: 42px 0 0 52px;
}

.sj-about__city img {
    width: 100%;
    height: auto;
}

/* =============================================================================
 * ③ 首页核心数据 —— 蓝湖 .section_10（1400×560）
 * 数据：核心数据管理 →「首页核心数据」（value / unit / name）
 * ========================================================================== */
.sj-stats {
    margin-top: 28px;
}

.sj-stats__row {
    display: flex;
    justify-content: space-between;
}

.sj-stats__left {
    position: relative;
    flex: none;
    /* 不跟随右图拉伸：让栏高 = 内容高，竖线与菱形锚点的"中点"才落在同一处 */
    align-self: flex-start;
    width: 560px;
    margin-top: 88px;
    /* 两组数据之间的垂直间距，同时用于"把菱形锚点居中"的换算 */
    --stat-gap: 49px;
}

/* 两组数据之间的竖向分隔线：贯穿整栏、上下渐隐，替代原先贯穿整块的通栏灰线 */
.sj-stats__left::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -.5px;
    background: linear-gradient(180deg,
            rgba(1, 83, 156, 0) 0%,
            rgba(1, 83, 156, .20) 12%,
            rgba(1, 83, 156, .20) 88%,
            rgba(1, 83, 156, 0) 100%);
    pointer-events: none;
}

/* 每组 = 数字行 + 说明行 + 组内细分隔线 */
.sj-stats__group {
    position: relative;
}

.sj-stats__group--b {
    margin-top: var(--stat-gap);
}

/* 十字锚点：白心蓝边菱形，落在两组数据之间的垂直正中（随组间距自适应，不是死值） */
.sj-stats__group--b::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--stat-gap) / -2 - 3.5px);
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    background: #fff;
    border: 1px solid rgba(1, 83, 156, .45);
    transform: rotate(45deg);
    pointer-events: none;
}

/* 两组数据 = 等宽两列，每组在自己列里居中。
   中轴线（竖线与菱形锚点都挂在 left:50%）因此必然落在两列分界上 ——
   原先用「flex 居中 + 固定 gap」，只有两组宽度相同时 gap 中心才等于容器中点；
   实际上「5,000+」那组明显更宽，把 gap 中心顶偏，竖线正好压进数字里
   （375 视口实测偏 26px，客户看到的就是「5000 压在竖线上」）。 */
.sj-stats__nums {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    height: 60px;
}

/* 一组 = 数字 + 单位：在所属列内居中，宽度不同的两组互不影响中轴 */
.sj-stats__cell {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
}

.sj-stats__num {
    font-family: Impact, "Arial Black", "Microsoft YaHei", sans-serif;
    font-size: 72px;
    font-weight: 400;
    line-height: 51px;
    color: var(--h-blue);
    letter-spacing: 1px;
}

/* 数字滚动到位后轻微"脉冲"一下，呼应设计稿的闪动数字 */
.sj-stats__num.is-counted {
    animation: sjNumPulse .62s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes sjNumPulse {
    0% {
        transform: scale(1.18);
        text-shadow: 0 0 0 rgba(1, 83, 156, 0);
    }

    45% {
        transform: scale(1.06);
        text-shadow: 0 6px 18px rgba(1, 83, 156, .28);
    }

    100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(1, 83, 156, 0);
    }
}

/* 数字持续微呼吸：让"闪动"不止一瞬，静止后仍有活感 */
.sj-stats__num.is-live {
    animation: sjNumBreath 3.2s ease-in-out infinite;
}

@keyframes sjNumBreath {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .72;
    }
}

/* 未进入视口前先不显示，避免看到未滚动的初始值 */
.sj-stats__nums.is-waiting .sj-stats__num {
    opacity: 0;
}

.sj-stats__unit {
    align-self: flex-end;
    margin: 0 0 0 9px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--h-ink);
}

/* 分隔占位元素：等宽分栏后不再需要它撑间距（模板仍输出，留作结构标记） */
.sj-stats__gap {
    display: none;
}

.sj-stats__desc {
    display: flex;
    justify-content: space-between;
    width: 492px;
    margin: 37px auto 0;
}

.sj-stats__desc p {
    width: 215px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    color: var(--h-ink);
    text-align: center;
}

/* 组内分隔线：以中点为轴向两侧渐隐，把交叉点让给竖线 */
.sj-stats__rule {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    margin: 34px auto 0;
    background: linear-gradient(90deg,
            rgba(1, 83, 156, 0) 0%,
            rgba(1, 83, 156, .24) 12%,
            rgba(1, 83, 156, .24) 46%,
            rgba(1, 83, 156, 0) 48.6%,
            rgba(1, 83, 156, 0) 51.4%,
            rgba(1, 83, 156, .24) 54%,
            rgba(1, 83, 156, .24) 88%,
            rgba(1, 83, 156, 0) 100%);
}

/* 右图：与左图同族的圆角语言（左上大圆角 + 右下切角），加描边框与浮层标签 */
.sj-stats__pic {
    position: relative;
    flex: none;
    width: 779px;
    height: 560px;
    border-radius: 0 24px 24px 24px;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(1, 30, 70, .18);
}

.sj-stats__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.001);
    transition: transform .8s cubic-bezier(.22,.61,.36,1);
}

.sj-stats__pic:hover img {
    transform: scale(1.045);
}

/* 右下角斜切装饰：与左图左下角同形，两图对角呼应 */
.sj-stats__pic::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 118px;
    height: 118px;
    background: linear-gradient(225deg, var(--h-blue) 0 50%, rgba(1, 83, 156, .12) 50% 100%);
    -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    pointer-events: none;
}

/* 左上角描边线：强化取景框感，不遮挡主体 */
.sj-stats__pic::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 22px;
    z-index: 2;
    width: 92px;
    height: 92px;
    border-left: 3px solid rgba(255, 255, 255, .9);
    border-top: 3px solid rgba(255, 255, 255, .9);
    border-radius: 8px 0 0 0;
    pointer-events: none;
}

/* =============================================================================
 * ④ 热卖小区 —— 设计稿《盛家房产官网首页效果图》「热卖小区」模块
 * 分类背景图 + 白色蒙层作整块底 → 标题三件套 → 标签行（分类说明，居中 + 行尾查看更多）
 * → 6×2 图文卡片
 * 数据：图文管理 →「热卖小区」（分类 标题/品宣/描述/说明/背景图 + 图文条目）
 * ========================================================================== */
.sj-comm {
    position: relative;
    margin-top: 80px;
    /* 标题相对板块上移（--sj-head-shift）：原 padding-top 80px */
    padding: calc(80px - var(--sj-head-shift)) 0 80px;
    background-color: #f4f7fb;
    /* 图层 1 = 白色蒙层（上收口-中透-下收口，保证深色正文压在图上仍可读）
       图层 2 = 分类背景图（模板以 --sj-comm-bg 注入后台「背景图」URL，未设置时为 none） */
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .90) 0%, rgba(255, 255, 255, .72) 44%, rgba(255, 255, 255, .88) 100%),
        var(--sj-comm-bg, none);
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}

/* 正文压在蒙层之上（用 position 而非 z-index，避免与卡片 hover 的层叠打架） */
.sj-comm > .sj-wrap {
    position: relative;
    z-index: 1;
}

/* 标题区：眉标 → 主标题 → 色条 → 描述，整块居中，体量单向收敛。
   原先只有「36px 主标题 + 24px 红色大副标」两层，两者体量接近又都居中，
   读起来像两个标题打架；现在把分类品宣降级为眉标，层级才立得住。
   居中在此处一次声明，子元素（标题 / 色条 / 描述）统一继承。 */
.sj-comm__head {
    text-align: center;
}

/* 眉标（分类品宣）：小号 + 字距拉开 + 蓝灰，只做引导不抢主标题 */
.sj-comm__kicker {
    /* 字距走变量：text-indent 的补偿量 = 字距的一半，两处共用一个来源，
       将来调字距只改这一个值（否则会调了字距忘了补偿，居中会偏） */
    --sj-kicker-ls: .34em;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--sj-kicker-ls);
    /* 字距在末字之后也会加一份，整行因此视觉偏左（实测 1440 下偏 2.3px）——
       补一半字距即回正 */
    text-indent: calc(var(--sj-kicker-ls) / 2);
    color: #6f7e8e;
}

/* 眉标存在时才给主标题留出上间距（没有眉标时主标题仍贴板块顶部） */
.sj-comm__kicker + .sj-sec__title {
    margin-top: 18px;
}

/* 短色条：主标题与描述之间的分隔；居中（原为固定左对 48×6 色块），收细加圆角 */
.sj-comm .sj-comm__bar {
    width: 40px;
    height: 4px;
    margin: 22px auto 0;
    border-radius: 2px;
}

/* 描述（分类描述）：按句读切成短句、句间插细竖线 —— 一整句长文案居中会显得松散无结构。
   max-width 已限宽 + 左右 auto = 居中 */
.sj-comm__desc {
    max-width: 820px;
    margin: 20px auto 0;
    font-size: 16.5px;
    line-height: 1.95;
    color: #6b7785;
}

/* 描述句间的细竖线（分隔符本身不占文字位置，读屏与复制都拿不到多余字符） */
.sj-comm__desc-sep {
    display: inline-block;
    width: 1px;
    height: 13px;
    margin: 0 15px;
    background: rgba(1, 83, 156, .24);
    vertical-align: middle;
}

/* 标签行 + 查看更多：三栏栅格（左右各一等分栏）→ 中栏的标签自动落在整块中线上，
   查看更多贴行尾。相比原先「两侧预留 --sj-comm-side 固定宽度 + 按钮绝对定位」，
   这里不再依赖按钮的实际宽度，按钮改成红底加宽也不用同步调预留值 */
.sj-comm__tagline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0 24px;
    align-items: center;
    margin-top: 32px;
}

/* 标签行（分类说明）：浅底胶囊 + 红点，铺在网格上方 */
/* 标签行（分类说明）：浅底胶囊 + 红点，铺在网格上方。
   栅格第 2 栏（中栏）= 整块中线，标签因此恒定居中；按钮占第 3 栏贴右 */
.sj-comm__tags {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 16px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sj-comm__tags li {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    border: 1px solid #e4eaf1;
    border-radius: 19px;
    background: #f4f7fb;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--h-ink);
    transition: border-color .3s var(--sj-ease), background-color .3s var(--sj-ease),
                color .3s var(--sj-ease);
}

.sj-comm__tags li i {
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 9px;
    border-radius: 50%;
    background: var(--h-red);
}

.sj-comm__tags li:hover {
    border-color: rgba(1, 83, 156, .35);
    background: #fff;
    color: var(--h-blue);
}

/* 「查看更多」：与标签同一套胶囊语言（同高同圆角），实心红字反白 ——
   颜色与「盛家房产经纪人」板块的行尾按钮同主色（--h-red），全站动作按钮统一为红 */
.sj-comm__more {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--h-red);
    border-radius: 19px;
    background: var(--h-red);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .5px;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    transition: filter .25s var(--sj-ease);
}

.sj-comm__more .sj-btn__arrow {
    width: 9px;
    height: 14px;
    margin-left: 8px;
}

.sj-comm__more:hover,
.sj-comm__more:focus-visible {
    filter: brightness(.88);
}

/* 卡片墙：6 列自适应，卡片用 3/4 竖幅（与后台上传的 300×400 原图同比例，不裁不拉伸） */
.sj-comm__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
}

.sj-comm__card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 12px;
    background: #eef2f7;
    box-shadow: 0 8px 22px rgba(15, 47, 82, .10);
    transition: transform .4s var(--sj-ease), box-shadow .4s var(--sj-ease);
}

.sj-comm__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(15, 47, 82, .20);
}

.sj-comm__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    transition: transform .55s var(--sj-ease);
}

.sj-comm__card:hover img {
    transform: scale(1.07);
}

/* 底部渐隐层：文字压在照片上也要保证可读。
   高度按卡片比例给（44% ≈ 文字块 25% 再留一轮缓冲），不用固定 px，
   卡片随列宽缩放时渐隐层跟着缩放 */
.sj-comm__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44%;
    background: linear-gradient(180deg, rgba(4, 20, 40, 0), rgba(4, 20, 40, .86));
    pointer-events: none;
}

.sj-comm__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px 14px 13px;
}

.sj-comm__info b {
    display: block;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: .5px;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sj-comm__info span {
    display: block;
    overflow: hidden;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 17px;
    letter-spacing: .5px;
    color: #f3b77e;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =============================================================================
 * ⑤ 盛家房产经纪人 —— 蓝湖 .section_14（1823×1100）
 * 数据：图文管理 →「盛家房产经纪人」（3 条：法定代表人 + 2 名经纪人）
 * ========================================================================== */
.sj-agent {
    position: relative;
    /* 卡片行 top 330 + 卡片 600 = 930，下留 100 —— 与设计稿 1100 的底部节奏一致。
       （底部操作条由「呼叫条 + 红胶囊」压成一整行后卡片矮了 80px，此处同步回收） */
    min-height: 1030px;
    background: #f7f9fc;
    overflow: hidden;
    /* 建立层叠上下文，让 z-index:-1 的背景图层压在 section 底色之上、正文之下 */
    isolation: isolate;
}

/* 左侧建筑背景（设计稿 .block_6：556×1100，贴 x=0）
   z-index:-1 + isolation:isolate ⇒ 停在底色与正文之间，正文无需定位即可压住它 */
.sj-agent__bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 556px;
    height: 1100px;
    background: center top / cover no-repeat;
    pointer-events: none;
}

.sj-agent__title {
    color: var(--h-ink);
}

.sj-agent__sub {
    color: var(--h-red);
}

/* ≥1441px：1:1 还原设计稿绝对坐标（左列背景贴 x=0，内容栅格自 x=260 起） */
.sj-agent__head {
    position: absolute;
    left: 260px;
    /* 标题相对板块上移（--sj-head-shift）：原 100px */
    top: calc(100px - var(--sj-head-shift));
    width: 480px;
}

.sj-agent__note {
    position: absolute;
    left: 260px;
    top: 264px;
    /* 设计稿 .text_29 是 nowrap 单行（名义宽度 662 实际溢出到约 700），
       这里给足 .box_28 的 880 宽让它自然单行，文案变长时再换行 */
    width: 880px;
    max-width: 100%;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: var(--h-ink);
}

/* 查看更多：与说明行同一基线，右端对齐卡片行右缘（260+1360=1620） */
.sj-agent__topmore {
    position: absolute;
    left: 260px;
    top: 258px;
    width: 1360px;
    text-align: right;
}

/* 卡片行：三张等宽卡 400 + 2×80 间隙 = 1360，与设计稿 260 / 740 / 1220 三个
   绝对坐标等价；改 flex 后卡片数量变化也不会错位 */
.sj-agent__cards {
    position: absolute;
    left: 260px;
    top: 330px;
    display: flex;
    align-items: stretch;
    gap: 80px;
    width: 1360px;
}

.sj-agent__card {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    min-height: 600px;
    padding: 30px 30px 27px 29px;
    border-radius: 0 20px 0 20px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(1, 60, 120, .08), 0 8px 20px rgba(1, 40, 80, .05);
    color: var(--h-ink);
    transition: background-color .32s var(--sj-ease), color .32s var(--sj-ease),
                box-shadow .32s var(--sj-ease);
}

/* 高亮态（设计稿默认高亮第 1 张「法定代表人」）：
   悬停任意一张 → 该张切成这一套高亮，其余（含默认张）回到原状态；
   鼠标移出卡片行 → 恢复默认张（由 home.js 的 initHoverSwitch 驱动） */
.sj-agent__card.is-on {
    background: var(--h-blue);
    box-shadow: 0 16px 34px rgba(1, 40, 80, .22);
    color: #fff;
}

/* 姓名：左侧 4×22 竖标做锚点 */
.sj-agent__name {
    position: relative;
    margin: 0;
    padding-left: 15px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: inherit;
}

.sj-agent__name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 22px;
    margin-top: -11px;
    border-radius: 2px;
    background: var(--h-blue);
    transition: background-color .32s var(--sj-ease);
}

.sj-agent__card.is-on .sj-agent__name::before {
    background: #fff;
}

/* 职级：轻量两段式「公司主体 │ 角色」——主体弱色、角色主色加粗，中间 1px 细竖线。
   用元素画竖线而不是半角「|」字符：粗细 / 高度 / 上下居中都不受字体影响，
   主体过长时自动省略号收缩，右侧角色始终完整可见 */
.sj-agent__post {
    display: flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--h-blue);
}

.sj-agent__post-main {
    min-width: 0;
    overflow: hidden;
    color: var(--h-gray);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .32s var(--sj-ease);
}

.sj-agent__post-sep {
    flex: none;
    width: 1px;
    height: 11px;
    margin: 0 9px;
    background: rgba(1, 60, 120, .18);
    transition: background-color .32s var(--sj-ease);
}

.sj-agent__post-role {
    flex: none;
    font-weight: 700;
    white-space: nowrap;
}

/* 高亮卡是蓝底：角色不能沿用蓝色（会被底色吃掉），主体也降成一档弱白 */
.sj-agent__card.is-on .sj-agent__post-role {
    color: #fff;
}

.sj-agent__card.is-on .sj-agent__post-main {
    color: rgba(255, 255, 255, .66);
}

.sj-agent__card.is-on .sj-agent__post-sep {
    background: rgba(255, 255, 255, .30);
}

/* 简介：16/30 收一行行距、放宽到 4 行，减少半句截断；
   min-height 按 4 行占位 —— 简介只有 3 行的卡也不会把证书图提前，
   三张卡的「姓名 / 职级 / 简介 / 证书图 / 底部操作条」始终逐行齐平 */
.sj-agent__txt {
    display: -webkit-box;
    box-sizing: border-box;
    min-height: 120px;
    margin: 18px 0 0;
    overflow: hidden;
    font-size: 16px;
    line-height: 30px;
    color: var(--h-gray);
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    transition: color .32s var(--sj-ease);
}

.sj-agent__card.is-on .sj-agent__txt {
    color: rgba(255, 255, 255, .86);
}

/* 资格证书：统一 341:220 比例（随卡片宽度缩放）+ 圆角 + 细描边 */
.sj-agent__cert {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 341 / 220;
    margin-top: 20px;
    border-radius: 10px;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(1, 60, 120, .10);
    transition: box-shadow .32s var(--sj-ease);
}

.sj-agent__card.is-on .sj-agent__cert {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .38);
}

/* 底部操作条：电话（左）+ 查看详情（右），一条细分割线把正文与操作区分开。
   比原来「整块浅底呼叫条 + 152×40 大红胶囊」轻一档：号码降到 17/600，
   按钮换成「文字 + 描边圆箭头」，靠留白和层级而不是靠体量做重点 */
.sj-agent__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid rgba(1, 60, 120, .10);
    transition: border-color .32s var(--sj-ease);
}

.sj-agent__card.is-on .sj-agent__foot {
    border-top-color: rgba(255, 255, 255, .24);
}

/* 电话：图标 + 数字的轻量呼叫行，平时弱色，悬停整行转主色 */
.sj-agent__tel {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--h-gray);
    text-decoration: none;
    transition: color .2s var(--sj-ease);
}

.sj-agent__tel i {
    flex: none;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("../images/home/icon-phone.png") center / contain no-repeat;
    mask: url("../images/home/icon-phone.png") center / contain no-repeat;
}

.sj-agent__tel b {
    margin-left: 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sj-agent__tel:hover {
    color: var(--h-blue);
}

/* 高亮卡是蓝底：电话转白字，悬停再提亮一档（不再变蓝，否则与底色糊在一起） */
.sj-agent__card.is-on .sj-agent__tel {
    color: rgba(255, 255, 255, .80);
}

.sj-agent__card.is-on .sj-agent__tel:hover {
    color: #fff;
}

/* 查看详情：文字 + 描边圆箭头，悬停圆变实心 */
.sj-agent__more {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin-left: auto;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--h-blue);
    text-decoration: none;
    transition: color .2s var(--sj-ease);
}

.sj-agent__more .sj-round {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin-left: 9px;
    border: 1px solid rgba(1, 60, 120, .22);
    transition: background-color .2s var(--sj-ease), border-color .2s var(--sj-ease),
                color .2s var(--sj-ease);
}

.sj-agent__more .sj-round i {
    width: 8px;
    height: 13px;
}

.sj-agent__more:hover .sj-round {
    border-color: var(--h-blue);
    background: var(--h-blue);
    color: #fff;
}

.sj-agent__card.is-on .sj-agent__more {
    color: #fff;
}

.sj-agent__card.is-on .sj-agent__more .sj-round {
    border-color: rgba(255, 255, 255, .44);
}

.sj-agent__card.is-on .sj-agent__more:hover .sj-round {
    border-color: #fff;
    background: #fff;
    color: var(--h-blue);
}

/* 右侧装饰竖条（67×1074，设计稿 x=1756） */
.sj-agent__strip {
    position: absolute;
    left: 1756px;
    top: 20px;
    width: 67px;
    height: 1074px;
    background: url("../images/home/agent-strip.png") center top / 100% 100% no-repeat;
    pointer-events: none;
}

/* =============================================================================
 * ⑥ 五星级安全标准服务体系 —— 蓝湖 .box_9（1920×890）
 * 数据：图文管理 →「五星级安全标准服务体系」（分类 name/promo/note + 5 条图文）
 * ========================================================================== */
.sj-service {
    /* 标题相对板块上移（--sj-head-shift）：原 padding-top 100px */
    padding: calc(100px - var(--sj-head-shift)) 0 82px;
    background: #f7f9fc url("../images/home/sec-service-bg.jpg") center / cover no-repeat;
}

.sj-service__tagline {
    margin: 39px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    color: var(--h-ink);
}

.sj-service__list {
    display: flex;
    justify-content: space-between;
    /* 设计稿 .box_32 比内容栅格左右各外扩 15px：1920 下 =1400+30=1430，
       视口不足时随内容栅格收缩，避免最右侧卡片被裁 */
    width: calc(100% + 30px);
    margin: 24px 0 0 -15px;
    padding: 0;
    list-style: none;
}

.sj-service__item {
    position: relative;
    flex: none;
    width: 270px;
}

.sj-service__thumb {
    height: 330px;
    overflow: hidden;
    background: #dbe3ec;
}

.sj-service__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 序号圆：压在图片与卡片交界处（设计稿圆心正好落在卡片上边缘） */
.sj-service__no {
    position: absolute;
    left: 50%;
    top: 330px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 62px;
    height: 62px;
    border: 6px solid #fff;
    border-radius: 50%;
    background: #27282d;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    transform: translate(-50%, -50%);
    transition: background-color .3s var(--sj-ease), border-color .3s var(--sj-ease),
                color .3s var(--sj-ease);
}

.sj-service__card {
    box-sizing: border-box;
    height: 160px;
    padding: 43px 26px 0;
    border-radius: 0 20px 0 0;
    background: #fff;
    box-shadow: var(--h-shadow);
    text-align: center;
    transition: background-color .3s var(--sj-ease), box-shadow .3s var(--sj-ease);
}

.sj-service__card b {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--h-ink);
    transition: color .3s var(--sj-ease);
}

.sj-service__card p {
    margin: 17px 0 0;
    font-size: 18px;
    line-height: 28px;
    color: var(--h-ink);
    transition: color .3s var(--sj-ease);
}

/* 高亮态（设计稿默认高亮第 3 项「热情」）：
   悬停任意一项 → 该项切成这一套高亮，其余（含默认第 3 项）回到原状态；
   鼠标移出整组 → 恢复到默认项（由 home.js 的 initHoverSwitch 驱动） */
.sj-service__item.is-on .sj-service__no {
    border-color: var(--h-blue);
    background: #fff;
    color: var(--h-blue);
}

.sj-service__item.is-on .sj-service__card {
    background: var(--h-blue);
    box-shadow: 0 0 9px rgba(74, 74, 74, .6);
}

.sj-service__item.is-on .sj-service__card b,
.sj-service__item.is-on .sj-service__card p {
    color: #fff;
}

/* 真鼠标设备上再挂一层 :hover 兜底（JS 未生效时也能悬停高亮）；
   触屏排除，避免点击后 :hover 粘住不散 */
@media (hover: hover) {
    .sj-service__item:hover .sj-service__no {
        border-color: var(--h-blue);
        background: #fff;
        color: var(--h-blue);
    }

    .sj-service__item:hover .sj-service__card {
        background: var(--h-blue);
        box-shadow: 0 0 9px rgba(74, 74, 74, .6);
    }

    /* 悬停项与 is-on 项重合，其余项一律回到原状态 */
    .sj-service__item:hover .sj-service__card b,
    .sj-service__item:hover .sj-service__card p {
        color: #fff;
    }
}

/* =============================================================================
 * ⑦ 行业动态及政策 —— 蓝湖 .section_15 / 16 / 18 / .box_18
 * 数据：文章管理对应分类（行业关注 / 行业政策 / 地方动态），默认高亮「地方动态」
 * ========================================================================== */
.sj-news {
    margin-top: 90px;
}

/* --- 头部：左标题 / 右栏目切换 --- */
.sj-news__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    /* 标题相对板块上移（--sj-head-shift）：news 标题本就贴板块顶，用负位移实现上提 */
    margin-top: calc(-1 * var(--sj-head-shift));
}

.sj-news__lead {
    flex: none;
}

.sj-news__hr {
    display: block;
    width: 48px;
    height: 6px;
    margin-top: 14px;
    background: var(--h-blue);
}

.sj-news__side {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    padding-top: 8px;
}

.sj-news__tabs {
    display: flex;
    gap: 16px;
}

/* 栏目按钮：悬停切换内容，点击进入该栏目全部资讯 */
.sj-news__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 122px;
    height: 38px;
    padding: 0 20px;
    border: 1px solid transparent;
    background: var(--h-tab);
    color: var(--h-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .24s var(--sj-ease), color .24s, border-color .24s, box-shadow .24s;
}

.sj-news__tab:hover,
.sj-news__tab:focus-visible {
    z-index: 3;
    border-color: var(--h-blue);
    background: #fff;
    color: var(--h-blue);
    outline: none;
}

.sj-news__tab.is-on {
    border-color: var(--h-tab-on);
    background: var(--h-tab-on);
    color: #fff;
    box-shadow: 0 8px 18px rgba(5, 98, 188, .22);
}

/* 悬停气泡：告知「点击 = 查看该栏目全部」 */
.sj-news__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 4px;
    background: rgba(1, 26, 58, .94);
    color: #fff;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity .24s var(--sj-ease), transform .24s var(--sj-ease), visibility .24s;
    pointer-events: none;
}

.sj-news__tip i {
    display: block;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-left-color: #fff;
}

.sj-news__tip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: rgba(1, 26, 58, .94);
}

.sj-news__tab:hover .sj-news__tip,
.sj-news__tab:focus-visible .sj-news__tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* 常驻提示行 */
.sj-news__panel {
    display: none;
}

.sj-news__panel.is-on {
    display: block;
    animation: sjNewsIn .38s var(--sj-ease) both;
}

@keyframes sjNewsIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.sj-news__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 25px;
    margin-top: 34px;
}

/* 卡片：左图右文；悬停上浮 + 图片缓推 */
.sj-news__card {
    display: flex;
    flex: none;
    box-sizing: border-box;
    /* 设计稿 1400 栅格内 3 列 450 + 2×25 间隙；用公式而非定宽，
       避免视口略窄时掉成 2 列（1440 下 = (1385-50)/3 = 445） */
    width: calc((100% - 50px) / 3);
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(1, 60, 120, .10), 0 2px 6px rgba(1, 40, 80, .04);
    color: var(--h-ink);
    text-decoration: none;
    transition: transform .3s var(--sj-ease), box-shadow .3s var(--sj-ease);
}

.sj-news__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(1, 40, 80, .16), 0 0 0 1px rgba(1, 83, 156, .26);
}

/* 图在左，高度随卡片内容自动铺满 */
.sj-news__pic {
    position: relative;
    display: block;
    flex: none;
    width: 158px;
    overflow: hidden;
    background: #dbe3ec;
}

.sj-news__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--sj-ease);
}

.sj-news__card:hover .sj-news__pic img {
    transform: scale(1.06);
}

.sj-news__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 18px 20px;
}

/* 标题固定两行：短标题也占两行高，同排卡片正文起点一致 */
.sj-news__card h3 {
    display: -webkit-box;
    min-height: 2.8em;      /* = 2 行 × line-height 1.4 */
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color .24s;
}

.sj-news__card:hover h3 {
    color: var(--h-blue);
}

/* 摘要固定一行 */
.sj-news__card p {
    display: -webkit-box;
    margin: 8px 0 14px;
    overflow: hidden;
    font-size: 14px;
    line-height: 24px;
    color: var(--h-gray);
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.sj-news__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid #eef2f7;
    font-size: 14px;
    line-height: 1.4;
    color: #8b98a9;
    transition: color .24s;
}

.sj-news__card:hover .sj-news__foot {
    color: var(--h-blue);
}

.sj-news__date {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}

.sj-news__go {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    font-style: normal;
}

.sj-news__foot .sj-round {
    background: var(--h-light);
    color: var(--h-blue);
    transition: background .24s, color .24s, transform .24s;
}

.sj-news__card:hover .sj-news__foot .sj-round {
    background: var(--h-blue);
    color: #fff;
    transform: translateX(2px);
}

.sj-news__empty {
    padding: 40px 0;
    color: var(--h-gray);
    font-size: 16px;
    text-align: center;
}

/* =============================================================================
 * ⑧ 盛家最新动态 —— 蓝湖 .box_19（1918×581）
 * 数据：文章「盛家最新动态」分类；点击日期 / 标题切换左侧大图
 * ========================================================================== */
.sj-latest {
    min-height: 581px;
    margin-top: 81px;
    /* 标题相对板块上移（--sj-head-shift）：原 padding-top 60px */
    padding: calc(60px - var(--sj-head-shift)) 0 91px;
    background: #f2f6fb url("../images/home/sec-news-bg.jpg") center top / cover no-repeat;
}

.sj-latest__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* 「查看更多」由实心红改为描边红 —— 仍属品牌色，但不再抢画面重心 */
.sj-latest__head .sj-btn {
    margin-top: 17px;
    border: 1px solid rgba(207, 0, 0, .5);
    background: transparent;
    color: var(--h-red);
    transition: background .24s, border-color .24s, color .24s, box-shadow .24s;
}

.sj-latest__head .sj-btn:hover {
    filter: none;
    border-color: var(--h-red);
    background: var(--h-red);
    color: #fff;
    box-shadow: 0 8px 18px rgba(207, 0, 0, .2);
}

.sj-latest__row {
    display: flex;
    margin-top: 18px;
}

.sj-latest__media {
    position: relative;
    flex: none;
    width: 602px;
    height: 340px;
    overflow: hidden;
    border-radius: 3px;
    background: #dbe3ec;
    box-shadow: 0 8px 24px rgba(1, 35, 66, .1);
}

.sj-latest__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 字幕条：实心蓝条 → 向上渐隐的深蓝遮罩，文字真正压在图上 */
.sj-latest__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 30px 20px 15px;
    background: linear-gradient(to top,
        rgba(0, 26, 86, .94) 0%,
        rgba(0, 26, 86, .68) 44%,
        rgba(0, 26, 86, 0) 100%);
}

/* 图上说明（设计稿为单行截断） */
.sj-latest__cap {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 6px;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.4;
    color: #fff;
    letter-spacing: .2px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 切换点：20px 触控热区包 6px 圆点 —— 视觉做轻，热区不缩水 */
.sj-latest__dot {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0;
    cursor: pointer;
}

.sj-latest__dot::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    transition: background .22s, box-shadow .22s, transform .22s;
}

.sj-latest__dot:hover::before {
    background: rgba(255, 255, 255, .85);
}

.sj-latest__dot.is-on::before {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .24);
    transform: scale(1.1);
}

/* 日期轴：实心灰块 → 白底细描边卡片，选中整块转主蓝并上浮一层阴影 */
.sj-latest__dates {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: space-between;
    width: 112px;
    height: 340px;
    margin-left: 80px;
}

.sj-latest__date {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 112px;
    height: 90px;
    padding: 0;
    border: 1px solid rgba(1, 83, 156, .14);
    border-radius: 3px;
    background: #fff;
    color: var(--h-blue);
    cursor: pointer;
    text-align: center;
    transition: border-color .25s, background .25s, box-shadow .25s;
}

.sj-latest__date b {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.05;
    color: #001e65;
    font-variant-numeric: tabular-nums;
    transition: color .25s;
}

.sj-latest__date span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .6px;
    color: #8d9aab;
    transition: color .25s;
}

.sj-latest__date:hover {
    border-color: rgba(1, 83, 156, .38);
}

.sj-latest__date.is-on {
    border-color: var(--h-blue);
    background: var(--h-blue);
    box-shadow: 0 10px 22px rgba(1, 83, 156, .26);
}

.sj-latest__date.is-on b,
.sj-latest__date.is-on span {
    color: #fff;
}

.sj-latest__list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    height: 328px;
    margin: 7px 0 0 20px;
}

.sj-latest__item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 0 18px;
    border: 0;
    background: transparent;
    color: var(--h-ink);
    cursor: pointer;
    text-align: left;
}

/* 左缘细竖线：选中 / 悬停时点亮，替代色块式选中反馈 */
.sj-latest__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: rgba(1, 83, 156, .12);
    transition: background .22s;
}

.sj-latest__item:hover::before,
.sj-latest__item.is-on::before {
    background: var(--h-blue);
}

.sj-latest__item h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: #001e65;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: color .22s;
}

/* 摘要退到灰阶：与深蓝标题拉开层级，三栏高度才不显拥挤 */
.sj-latest__item p {
    display: -webkit-box;
    margin: 9px 0 0;
    overflow: hidden;
    font-size: 15px;
    line-height: 28px;
    color: #7c8798;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sj-latest__item:hover h3,
.sj-latest__item.is-on h3 {
    color: var(--h-blue);
}

/* =============================================================================
 * 响应式
 * ========================================================================== */

/* ≤1440：内容栅格收缩，经纪人板块退出绝对定位，改为等宽三栏 */
/* ≤1839：经纪人板块的设计稿坐标跨到 x=1823（右侧装饰竖条 1756..1823），
   视口不够 1840 时整块必须退出页面绝对定位，否则竖条与第 3 张卡会被 overflow 裁掉。
   退出后改用内容栅格 + 流式三栏，左侧背景图降为浅纹理避免压住正文。 */
@media screen and (max-width: 1839px) {
    .sj-agent {
        /* 与全站内容栅格（.sj-wrap：max-width 1400+2×gutter 居中）对齐，
           本板块没有 .sj-wrap 包裹，靠内边距复刻同一栅格 */
        --agent-pad: max(var(--sj-gutter), calc((100% - var(--sj-wrap) - var(--sj-gutter) * 2) / 2 + var(--sj-gutter)));
        min-height: 0;
        /* 此档起 head 退出绝对定位 → 标题上移改为从板块 padding-top 里扣（原 90px） */
        padding: calc(90px - var(--sj-head-shift)) var(--agent-pad);
    }

    .sj-agent__bg {
        width: 100%;
        height: 100%;
        opacity: .07;
    }

    .sj-agent__head,
    .sj-agent__note,
    .sj-agent__topmore,
    .sj-agent__cards,
    .sj-agent__card {
        position: static;
        width: auto;
    }

    .sj-agent__head {
        width: 480px;
        max-width: 100%;
    }

    .sj-agent__note {
        width: 880px;
        max-width: 100%;
        margin-top: 40px;
    }

    .sj-agent__topmore {
        margin: 0 0 20px;
        text-align: right;
    }

    .sj-agent__cards {
        display: flex;
        align-items: stretch;
        gap: 40px;
        margin-top: 40px;
    }

    .sj-agent__card {
        flex: 1 1 0;
        min-width: 0;
        /* 退出绝对定位后卡片由内容撑高（行内 stretch 保证三张等高），
           600 的固定下限只在宽屏还原设计稿坐标时才需要 */
        min-height: 0;
    }

    .sj-agent__txt {
        width: auto;
    }

    .sj-agent__cert {
        width: 100%;
        max-width: 340px;
        margin-left: 0;
    }

    .sj-agent__strip {
        display: none;
    }
}

/* ≤1440：卡片墙保持 6 列（设计稿在 1280 下同为 6 列 / 卡宽约 183），
   只收一档间距，避免卡片过早变窄 */
@media screen and (max-width: 1440px) {
    .sj-comm__grid {
        gap: 16px;
    }
}

/* ≤1200：整体缩放一档 */
@media screen and (max-width: 1200px) {
    .sj-sec__title,
    .sj-stats__title {
        font-size: 30px;
    }

    .sj-sec__sub {
        font-size: 20px;
    }

    .sj-about__title {
        font-size: 34px;
    }

    .sj-about__claim-txt {
        font-size: 21px;
    }

    .sj-about__metas li {
        font-size: 14px;
    }

    .sj-about__pic {
        width: 440px;
        height: 566px;
    }

    .sj-about__body {
        width: calc(100% - 480px);
    }

    /* 右栏变窄，三卡改两列折行，卡片内部仍保持"序号 + 文案"横向排布 */
    .sj-about__cards {
        margin-top: 40px;
        flex-wrap: wrap;
        gap: 14px;
    }

    .sj-about__card {
        flex: 1 1 calc((100% - 14px) / 2);
        width: auto;
        min-width: 210px;
    }

    .sj-about__card + .sj-about__card {
        margin-left: 0;
    }

    .sj-about__foot {
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 40px;
    }

    .sj-about__more {
        margin-top: 0;
    }

    .sj-about__tip {
        margin-left: 0;
        font-size: 14px;
    }

    .sj-about__intro {
        font-size: 17px;
    }

    /* 描述（分类描述）：比正文说明略小一号，别与上方主标题抢视线 */
    .sj-comm__desc {
        font-size: 16px;
    }

    /* 「标签正中 + 行尾查看更多」在 992~1200 会挤在一起（中栏标签铺满后，两侧等分栏
       已经容不下按钮，按钮会压到标签上）→ 此区间起改为上下堆叠：标签一行、按钮一行，
       两行各自居中。原先靠收窄 --sj-comm-side 预留值硬撑单行，预留值一旦小于按钮实际
       宽度就会出问题（按钮换个字号就崩），这里不再依赖预留值 */
    .sj-comm__tagline {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .sj-comm__tags,
    .sj-comm__more {
        grid-column: 1;
        justify-self: center;
    }

    .sj-comm__tags {
        gap: 12px 12px;
    }

    .sj-comm__tags li {
        height: 34px;
        padding: 0 15px;
        font-size: 13.5px;
        letter-spacing: .5px;
    }

    .sj-about__city {
        width: 100%;
        margin-left: 0;
    }

    .sj-stats__left {
        width: 46%;
    }

    .sj-stats__num {
        font-size: 60px;
        line-height: 44px;
    }

    .sj-stats__desc {
        width: 100%;
    }

    .sj-stats__desc p {
        width: 47%;
    }

    .sj-stats__rule {
        width: 84%;
    }

    .sj-stats__pic {
        width: 50%;
        height: auto;
        aspect-ratio: 779 / 560;
    }

    .sj-news__grid {
        gap: 22px 20px;
    }

    .sj-news__card {
        width: calc((100% - 40px) / 3);
    }

    .sj-news__pic {
        width: 138px;
    }

    .sj-service__list {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .sj-service__item {
        width: calc((100% - 80px) / 5);
    }

    .sj-latest__media {
        flex: 1 1 auto;
        width: auto;
        max-width: 602px;
    }

    .sj-latest__dates {
        margin-left: 40px;
    }
}

/* ≤992：单栏 / 双栏堆叠；服务与小区卡片折行 */
@media screen and (max-width: 992px) {
    .sj-about,
    .sj-stats,
    .sj-comm,
    .sj-news {
        margin-top: 60px;
    }

    .sj-about__row,
    .sj-stats__row {
        flex-direction: column;
    }

    .sj-about__pic {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 560 / 720;
    }

    .sj-about__pic img {
        width: 100%;
        height: 100%;
    }

    .sj-about__body {
        width: 100%;
        margin-top: 30px;
    }

    .sj-about__intro {
        line-height: 34px;
    }

    .sj-about__cards {
        margin-top: 34px;
        flex-wrap: wrap;
        gap: 16px;
    }

    .sj-about__card {
        flex: 1 1 calc((100% - 32px) / 3);
        width: auto;
        min-width: 200px;
    }

    .sj-about__card + .sj-about__card {
        margin-left: 0;
    }

    .sj-about__foot {
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 34px;
    }

    .sj-about__more {
        margin-top: 0;
    }

    .sj-about__tip {
        margin-left: 0;
    }

    .sj-about__city {
        margin: 30px 0 0;
    }

    .sj-stats__left {
        align-self: stretch;
        width: 100%;
        margin-top: 0;
    }

    .sj-stats__pic {
        width: 100%;
        height: auto;
        aspect-ratio: 779 / 560;
        margin-top: 40px;
    }

    .sj-comm {
        padding: calc(60px - var(--sj-head-shift)) 0;
    }

    .sj-comm__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 36px;
    }

    .sj-comm__tagline {
        margin-top: 26px;
    }

    /* 6 个胶囊一行已塞不下（标签栏本身已是居中一行）→ 固定 3 列两行，
       宽窄一致，不会出现 5+1 落单 */
    .sj-comm__tags {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        gap: 10px 12px;
    }

    .sj-agent {
        padding: calc(60px - var(--sj-head-shift)) var(--agent-pad);
    }

    .sj-agent__head {
        width: auto;
    }

    .sj-agent__cards {
        flex-direction: column;
        gap: 24px;
    }

    /* 竖排后卡片很宽（约 940），证书图仍按 340 宽左对齐会剩一大片空白 →
       卡片内部改「左文右证」两栏；必须同时退出 flex:1 1 0
       （basis:0 在竖排时作用在高度上，会把卡片高度塌成内边距） */
    .sj-agent__card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas:
            "name cert"
            "post cert"
            "txt  cert"
            "foot foot";
        flex: none;
        min-height: 0;
        column-gap: 30px;
    }

    .sj-agent__name {
        grid-area: name;
    }

    .sj-agent__post {
        grid-area: post;
        /* 网格里 justify-self 默认 stretch，会把胶囊拉满整列，必须收回内容宽 */
        justify-self: start;
    }

    .sj-agent__txt {
        grid-area: txt;
        line-height: 30px;
    }

    .sj-agent__cert {
        grid-area: cert;
        align-self: start;
        margin-top: 0;
    }

    /* 网格里 margin-top:auto 不再负责贴底，改用显式上边距控制与正文的间距 */
    .sj-agent__foot {
        grid-area: foot;
        margin-top: 24px;
    }

    .sj-service {
        padding: calc(60px - var(--sj-head-shift)) 0;
    }

    .sj-service__list {
        flex-wrap: wrap;
        gap: 40px 20px;
    }

    .sj-service__item {
        width: calc((100% - 20px) / 2);
    }

    .sj-service__thumb {
        height: 260px;
    }

    .sj-service__no {
        top: 260px;
    }

    .sj-news__head {
        flex-direction: column;
        gap: 18px;
    }

    .sj-news__side {
        justify-content: flex-start;
    }

    .sj-news__tabs {
        gap: 12px;
    }

    .sj-news__grid {
        gap: 22px 20px;
    }

    .sj-news__card {
        width: calc((100% - 20px) / 2);
    }

    .sj-news__pic {
        width: 170px;
    }

    .sj-latest {
        min-height: 0;
        padding: calc(50px - var(--sj-head-shift)) 0;
    }

    .sj-latest__row {
        flex-wrap: wrap;
        gap: 24px;
    }

    .sj-latest__media {
        width: 100%;
        max-width: none;
        height: 300px;
    }

    .sj-latest__dates {
        flex-direction: row;
        width: 100%;
        height: auto;
        margin-left: 0;
        gap: 12px;
    }

    .sj-latest__date {
        width: auto;
        flex: 1 1 0;
        height: 76px;
    }

    .sj-latest__list {
        height: auto;
        margin-left: 0;
        gap: 18px;
    }
}

/* ≤768：Banner 文字仍叠在图上（窄屏底图只有百来像素高，放不下三层文字，所以整块这样处理）
   ① 文字照常参与布局（position: relative）→ 由文字自然撑高整块，
      文案长短怎么变都不会溢出到图外，也不用写死高度；
   ② 图片绝对定位铺满、并从顶部放大 132% —— 把图底部自带的那条品牌波浪
      （含「服务热线」小字）推出可视区，免得与叠加文字打架；
   ③ 复一层 82%~94% 白雾，把底图压成淡背景：后台换图不可控，
      这样任何底图上深色文字都读得清；
   ④ 恢复文字入场动效（原先在此禁用却没清掉 data-anim 的 blur(6px)，文字一直糊着）。 */
@media screen and (max-width: 768px) {
    .sj-banner__pic {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        /* 以顶部中心为原点放大：顶端对齐、底部超出被裁（slide 自带 overflow:hidden） */
        transform-origin: center top;
        transform: scale(1.32);
    }

    .sj-banner__slide::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, .90) 0%,
                rgba(255, 255, 255, .82) 45%,
                rgba(255, 255, 255, .86) 78%,
                rgba(255, 255, 255, .94) 100%);
    }

    .sj-banner__text {
        position: relative;
        display: block;
        z-index: 2;
        background: none;
    }

    /* 底部留出轮播点的位置（点固定在整块右下角，底边距 12px） */
    .sj-banner__box {
        padding: 18px var(--sj-gutter) 28px;
    }

    /* 文字在图上 → 只留柔白晕，不用硬描边（小字号上描边会吃掉笔画） */
    .sj-banner__eyebrow,
    .sj-banner__headline,
    .sj-banner__desc {
        -webkit-text-stroke: 0;
    }

    .sj-banner__eyebrow {
        font-size: 13.5px;
        color: var(--h-blue);
        text-shadow: 0 1px 2px rgba(255, 255, 255, .92);
    }

    .sj-banner__headline {
        max-width: none;
        margin-top: 8px;
        font-size: 24px;
        line-height: 1.32;
        text-shadow:
            0 0 5px rgba(255, 255, 255, .95),
            0 1px 3px rgba(255, 255, 255, .85);
    }

    .sj-banner__desc {
        max-width: none;
        margin-top: 10px;
        font-size: 14.5px;
        line-height: 1.72;
        text-shadow: 0 1px 3px rgba(255, 255, 255, .9);
    }

    .sj-banner__dots {
        right: var(--sj-gutter);
        bottom: 12px;
    }

    .sj-sec__title {
        font-size: 24px;
    }

    .sj-sec__sub {
        margin-top: 14px;
        font-size: 17px;
    }

    .sj-sec__bar {
        margin-top: 14px;
        height: 5px;
    }

    /* 标题组小屏收敛：主标题降号、渐隐线保持，认证点阵折行 */
    .sj-about__title {
        font-size: 26px;
    }

    .sj-about__title-txt {
        padding-bottom: 10px;
    }

    .sj-about__title-line {
        display: none;
    }

    .sj-about__claim {
        margin-top: 14px;
    }

    .sj-about__claim-txt {
        font-size: 18px;
        padding-left: 13px;
    }

    .sj-about__claim-txt::before {
        width: 5px;
        height: 5px;
        margin-top: -2.5px;
    }

    .sj-about__claim-tag {
        margin-left: 10px;
        padding: 3px 8px;
        font-size: 12px;
    }

    .sj-about__metas {
        margin-top: 14px;
    }

    .sj-about__metas li {
        font-size: 13px;
    }

    .sj-about__metas li + li {
        margin-left: 16px;
    }

    .sj-about,
    .sj-stats,
    .sj-comm,
    .sj-news {
        margin-top: 44px;
    }

    .sj-comm {
        padding: calc(44px - var(--sj-head-shift)) 0;
    }

    /* 眉标：小屏再收一档字号，字距同步收窄（否则一行放不下会折行）；
       text-indent 的补偿量跟着 --sj-kicker-ls 自动走，不用重复写 */
    .sj-comm__kicker {
        --sj-kicker-ls: .26em;
        font-size: 12.5px;
    }

    .sj-comm__kicker + .sj-sec__title {
        margin-top: 14px;
    }

    .sj-comm .sj-comm__bar {
        margin-top: 18px;
    }

    .sj-comm__desc {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.9;
    }

    .sj-comm__desc-sep {
        height: 12px;
        margin: 0 11px;
    }

    /* 标签与查看更多在 ≤1200 起已是上下两行，这里只收间距 */
    .sj-comm__tagline {
        gap: 16px;
        margin-top: 22px;
    }

    .sj-comm__tags {
        gap: 10px 10px;
    }

    .sj-comm__tags li {
        height: 32px;
        padding: 0 14px;
        font-size: 13px;
        letter-spacing: .5px;
    }

    .sj-comm__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 28px;
    }

    .sj-comm__info {
        padding: 12px 12px 11px;
    }

    .sj-comm__info b {
        font-size: 15px;
        line-height: 20px;
    }

    .sj-comm__info span {
        margin-top: 5px;
        font-size: 12px;
        line-height: 16px;
    }

    .sj-about__body {
        margin-top: 24px;
    }

    .sj-about__intro {
        margin-top: 22px;
        font-size: 15px;
        line-height: 28px;
    }

    .sj-about__cards {
        margin-top: 24px;
        gap: 12px;
    }

    .sj-about__card {
        flex: 1 1 calc((100% - 12px) / 2);
        width: auto;
        height: auto;
        min-height: 96px;
        padding: 12px 14px;
    }

    .sj-about__card-no {
        width: 28px;
        height: 28px;
        margin-right: 10px;
        font-size: 13px;
    }

    .sj-about__card b {
        font-size: 16px;
    }

    .sj-about__card p {
        font-size: 14px;
        line-height: 22px;
    }

    .sj-about__more {
        margin-top: 0;
    }

    .sj-about__city {
        margin-top: 24px;
    }

    /* 字号随视口收敛：320 这类超窄屏下「5,000 +」是一列里最宽的内容，
       定格 48px 会顶到中轴线上（数字由 JS 补千分位，比后台看到的多一位）。
       line-height 用比例，跟着字号一起缩，不会出现行高小于字号导致的挤叠。 */
    .sj-stats__num {
        font-size: clamp(38px, 12.8vw, 48px);
        line-height: .76;
    }

    .sj-stats__unit {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .sj-stats__nums {
        height: 44px;
    }

    /* 组间距收紧：改这一个变量，组间距与菱形锚点位置同步跟随 */
    .sj-stats__left {
        --stat-gap: 30px;
    }

    .sj-stats__desc {
        margin-top: 20px;
        gap: 12px;
    }

    .sj-stats__desc p {
        width: auto;
        flex: 1 1 0;
        font-size: 14px;
        line-height: 22px;
    }

    .sj-stats__rule {
        width: 88%;
        margin-top: 24px;
    }

    .sj-stats__pic {
        height: auto;
        aspect-ratio: 779 / 560;
        margin-top: 30px;
    }

    .sj-agent {
        padding: calc(44px - var(--sj-head-shift)) var(--agent-pad);
    }

    .sj-agent__note {
        margin-top: 20px;
        font-size: 15px;
        line-height: 24px;
    }

    .sj-agent__name {
        font-size: 24px;
    }

    .sj-agent__post {
        margin-top: 12px;
        font-size: 15px;
    }

    .sj-agent__txt {
        min-height: 104px;
        margin-top: 12px;
        font-size: 15px;
        line-height: 26px;
    }

    .sj-agent__card {
        padding: 20px 20px 22px;
        /* ≤992 的两栏（左文右证）收窄证书列，768 下左栏仍有 420 宽 */
        grid-template-columns: minmax(0, 1fr) 220px;
        column-gap: 24px;
    }

    .sj-agent__cert {
        max-width: 340px;
        margin-top: 0;
    }

    .sj-service {
        padding: calc(44px - var(--sj-head-shift)) 0;
    }

    .sj-service__tagline {
        margin-top: 16px;
        font-size: 15px;
    }

    .sj-service__list {
        margin-top: 24px;
        gap: 28px 12px;
    }

    .sj-service__item {
        width: calc((100% - 12px) / 2);
    }

    .sj-service__thumb {
        height: 190px;
    }

    .sj-service__no {
        top: 190px;
        width: 52px;
        height: 52px;
        border-width: 5px;
        font-size: 20px;
    }

    .sj-service__card {
        height: auto;
        min-height: 130px;
        padding: 28px 14px 18px;
    }

    .sj-service__card b {
        font-size: 20px;
    }

    .sj-service__card p {
        margin-top: 8px;
        font-size: 14px;
        line-height: 22px;
    }

    .sj-news__tabs {
        gap: 10px;
    }

    .sj-news__tab {
        min-width: 0;
        height: 34px;
        padding: 0 14px;
        font-size: 15px;
    }

    /* 触屏无悬停：气泡提示收起 */
    .sj-news__tip {
        display: none;
    }

    .sj-news__grid {
        margin-top: 24px;
        gap: 16px;
    }

    .sj-news__card {
        width: 100%;
    }

    .sj-news__pic {
        width: 160px;
        max-width: 34%;
        min-width: 120px;
    }

    .sj-news__body {
        padding: 14px 16px;
    }

    .sj-news__card h3 {
        font-size: 16px;
    }

    .sj-news__card p {
        margin: 6px 0 10px;
        font-size: 13px;
        line-height: 22px;
    }

    .sj-news__foot {
        padding-top: 11px;
        font-size: 13px;
    }

    .sj-latest {
        padding: calc(40px - var(--sj-head-shift)) 0;
    }

    .sj-latest__row {
        margin-top: 22px;
    }

    .sj-latest__media {
        height: 220px;
    }

    /* 图变矮后收一档遮罩高度，避免字幕条吃掉画面 */
    .sj-latest__bar {
        padding: 18px 16px 12px;
    }

    .sj-latest__item h3 {
        font-size: 16px;
    }

    .sj-latest__item p {
        font-size: 14px;
        line-height: 24px;
    }
}

/* ≤480：单列到底 */
@media screen and (max-width: 480px) {
    .sj-btn {
        width: 138px;
        height: 38px;
        padding-left: 26px;
        font-size: 16px;
    }

    /* 热卖小区卡片墙：手机上两栏（12 张 = 6 行），字号与胶囊同步收一档 */
    .sj-comm {
        padding: calc(40px - var(--sj-head-shift)) 0;
    }

    /* 描述：手机上「两段并列 + 中间竖线」会被折得七零八落 →
       竖线隐去，两段各占一行（段落下方的居中由 .sj-comm__head 继承） */
    .sj-comm__desc {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.9;
    }

    .sj-comm__desc span {
        display: block;
    }

    .sj-comm__desc-sep {
        display: none;
    }

    .sj-comm__tagline {
        gap: 14px;
        margin-top: 18px;
    }

    .sj-comm__tags {
        gap: 8px;
    }

    .sj-comm__tags li {
        height: 30px;
        padding: 0 12px;
        font-size: 12.5px;
        letter-spacing: 0;
    }

    .sj-comm__tags li i {
        width: 5px;
        height: 5px;
        margin-right: 7px;
    }

    .sj-comm__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 22px;
    }

    .sj-comm__info {
        padding: 10px 10px 9px;
    }

    .sj-comm__info b {
        font-size: 14px;
        line-height: 19px;
    }

    .sj-comm__info span {
        margin-top: 4px;
        font-size: 11.5px;
        line-height: 15px;
    }

    /* 经纪人卡：两栏在手机宽度放不下，回到单列，证书图撑满卡片宽度 */
    .sj-agent__card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "name"
            "post"
            "txt"
            "cert"
            "foot";
        column-gap: 0;
    }

    .sj-agent__cert {
        max-width: 100%;
        margin-top: 16px;
    }

    .sj-about__card {
        flex: 1 1 100%;
        width: 100%;
    }

    .sj-service__item {
        width: 100%;
    }

    .sj-service__thumb {
        height: 230px;
    }

    .sj-service__no {
        top: 230px;
    }

    .sj-latest__dot {
        width: 18px;
        height: 18px;
    }

    .sj-stats__pic {
        border-radius: 0 16px 16px 16px;
    }

    .sj-stats__pic::before {
        width: 68px;
        height: 68px;
    }

    .sj-stats__pic::after {
        left: 14px;
        top: 14px;
        width: 58px;
        height: 58px;
        border-left-width: 2px;
        border-top-width: 2px;
    }
}

/* 尊重系统「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    .sj-home *,
    .sj-home *::before,
    .sj-home *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    .sj-banner__slide [data-anim] {
        opacity: 1;
        transform: none;
        filter: none;
    }

    /* 无动效偏好：核心数据直接显示终值，不做滚动与脉冲 */
    .sj-stats__nums.is-waiting .sj-stats__num {
        opacity: 1;
    }

    .sj-stats__num.is-counted,
    .sj-stats__num.is-live {
        animation: none;
    }

    .sj-about__card:hover {
        transform: none;
    }

    .sj-stats__pic img,
    .sj-stats__pic:hover img {
        transform: none;
        transition: none;
    }

    .sj-news__card:hover {
        transform: none;
    }

    .sj-news__card:hover .sj-news__pic img {
        transform: none;
    }
}