@import url(common.css);

/* =====================================================================
   4. 视频占位体系（.vid-ph）— 沿用首页：黄底墨黑三角播放钮
   ===================================================================== */
.vid-ph {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-dark-ink);
}

.vid-ph__bg {
    position: absolute;
    inset: 0;
    background: var(--color-dark-blue);
    transition: transform .6s ease;
}

.vid-ph--ink .vid-ph__bg {
    background: var(--color-dark-ink);
}

.vid-ph--cool .vid-ph__bg {
    background: var(--color-brand-blue);
}

.vid-ph--deep .vid-ph__bg {
    background: var(--color-brand-blue-deep);
}

.vid-ph--warm .vid-ph__bg {
    background: var(--color-brand-yellow);
}

.vid-ph__grid {
    position: absolute;
    inset: 0;
    opacity: .10;
    background-image: linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
    background-size: 44px 44px;
}

.vid-ph__shimmer {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, .18), transparent 60%);
    transition: opacity .4s ease;
}

.vid-ph.is-playing .vid-ph__shimmer {
    opacity: 1;
    animation: kenburns 9s ease-in-out infinite alternate;
}

.vid-ph.is-playing .vid-ph__bg {
    animation: kenburns 12s ease-in-out infinite alternate;
}

@keyframes kenburns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.08) translate(-2%, -2%);
    }
}

.vid-ph__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    transition: transform .2s ease, background .2s ease;
    box-shadow: var(--shadow-card);
    z-index: 2;
}

.vid-ph__play svg {
    width: 20px;
    height: 20px;
    fill: var(--color-on-yellow);
    margin-left: 3px;
}

.vid-ph.is-playing .vid-ph__play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
}

.vid-ph--warm .vid-ph__play {
    background: var(--color-white);
}

.vid-ph--warm .vid-ph__play svg {
    fill: var(--color-ink);
}

.vid-ph__pill {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(10, 10, 10, .7);
    color: #fff;
    font-size: .6875rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    z-index: 3;
    letter-spacing: .02em;
}

.vid-ph__tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    z-index: 3;
    opacity: .9;
    background: rgba(10, 10, 10, .6);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

/* 视频卡（.vcard） */
.vcard {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    cursor: pointer;
}

.vcard:hover {
    box-shadow: var(--shadow-float);
    border-color: var(--color-brand-yellow);
}

.vcard__media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.vcard__media .vid-ph__bg {
    transition: transform .4s ease;
}

.vcard:hover .vid-ph__bg {
    transform: scale(1.04);
}

.vcard:hover .vid-ph__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.vcard__body {
    padding: 12px 16px;
}

.vcard__body h4 {
    margin-bottom: 4px;
}

.vcard__body .small {
    color: var(--color-text-secondary);
}


/* =====================================================================
   V3 修改 ① .iconrail 5 列横排变体（M1 · 模块2 · 左 48-56px 圆图标片 + 右文字块）
   断点沿用：≥1024 五列 / 768-1023 三列 / <768 两列
   5 条映射：#profile / #knowus / #advantage / #campus / #contact（原画室环境锚点删除）
   ===================================================================== */
.iconrail {
    background: #fff;
    padding: 16px 0 20px;
    flex: 0 0 auto;
}

.iconrail__inner {
    max-width: 1320px;
    margin-inline: auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.iconrail__btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    min-width: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform .2s ease, background .2s ease;
}

.iconrail__btn:hover {
    transform: translateY(-2px);
}

.iconrail__circle {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-bg-soft);
    display: grid;
    place-items: center;
    border: 2px solid var(--color-border);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    color: var(--color-brand-blue);
}

.iconrail__btn:hover .iconrail__circle {
    border-color: var(--color-brand-yellow);
    background: #fff;
    box-shadow: 0 4px 14px rgba(245, 216, 0, .35);
}

.iconrail__circle svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.iconrail__txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.iconrail__zh {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.15;
    color: var(--color-ink);
    white-space: nowrap;
}

.iconrail__en {
    font-family: var(--font-english);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-brand-yellow-text);
    white-space: nowrap;
}

.iconrail__btn:hover .iconrail__zh {
    color: var(--color-text-heading);
}

.iconrail__btn:focus-visible {
    outline: 3px solid rgba(30, 64, 175, .35);
    outline-offset: 2px;
    border-radius: var(--radius-card-sm);
}

@media(min-width:768px) and (max-width:1023px) {
    .iconrail__inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media(max-width:767px) {
    .iconrail__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 12px;
    }

    .iconrail__circle {
        width: 48px;
        height: 48px;
    }

    .iconrail__circle svg {
        width: 24px;
        height: 24px;
    }

    .iconrail__zh {
        font-size: .875rem;
    }

    .iconrail__en {
        font-size: .56rem;
        letter-spacing: .08em;
    }
}

/* 极窄屏 ≤389px：英文副标缩小防溢出，胶囊 gap 收紧 */
@media(max-width:389px) {
    .iconrail__btn {
        gap: 8px;
    }

    .iconrail__en {
        font-size: .5rem;
        letter-spacing: .04em;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* =====================================================================
   模块3 学校简介 School profile（复刻 gxhyart list-61 · V3 改两栏：左文右图集 · V3.1 图集改单张大图轮播）
   ===================================================================== */
.profile {
    background: var(--color-white);
}

/* V3 #profile 两栏（M4b）：section-head 全宽在顶部，其下 .profile__grid（≥1024 左 1.1fr 文案 / 右 .9fr 图集） */
.profile__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: stretch;
}

@media(min-width:1024px) {
    .profile__grid {
        grid-template-columns: 1.1fr .9fr;
        gap: var(--space-6);
    }
}

/* 左栏：3 段真实品牌文案（连续段落 + 句首粗体 + 黄色短竖线视觉锚 · 原文逐字零篡改） */
.profile__intro {
    display: grid;
    gap: var(--space-5);
}


.profile__intro .body::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 4px;
    height: 1.25em;
    background: var(--color-brand-yellow);
    border-radius: 2px;
}

.profile__intro .body strong {
    color: var(--color-ink);
    font-weight: 800;
}

/* 右栏：单张大图轮播窗（V3.1 · 一次仅显示一张 · 左右箭头 + 圆点指示器 + 5s 自动播放 + hover 暂停 · 已取消原纵向滚动窗 max-height） */
.profile__gallery {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    justify-content: center;
    /* P2-6：≥1024 双栏下 4:3 舞台与左栏文案高差留白由两端下移至居中，视觉更稳 */
}

/* 舞台：4:3 大图占位区（slides 叠放，仅 .is-active 可见） */
.pgal__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-card-sm);
    overflow: hidden;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    touch-action: pan-y;
}

.pgal__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.015);
    pointer-events: none;
    background: var(--ph, var(--color-brand-blue-deep));
    transition: opacity .45s ease, transform .55s ease, visibility .45s;
}
.pgal__slide img{
    width: auto;
    height: 100%;
}

.pgal__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

/* 占位纹理：径向光斑 + 网格纹（沿用 .vid-ph__shimmer / .vid-ph__grid 既有语言，色值零新增） */
.pgal__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, .18), transparent 60%);
}

.pgal__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .10;
}

/* 图上序号角标（仿 .vid-ph__pill / .pano__hint 角标语言） */
.pgal__idx {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 3;
    font-family: var(--font-number);
    font-variant-numeric: tabular-nums;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-on-dark);
    background: rgba(10, 10, 10, .7);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

/* 图题浮层（图下缘 · 深色渐变 + on-dark 令牌组） */
.pgal__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-5) var(--space-4) var(--space-3);
    background: linear-gradient(to top, rgba(10, 10, 10, .85) 0%, rgba(10, 10, 10, .6) 55%, transparent 100%);
}

.pgal__cap-t {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.0625rem;
    line-height: 1.3;
    letter-spacing: .02em;
    color: var(--color-on-dark);
}

.pgal__cap-s {
    font-size: .75rem;
    line-height: 1.5;
    color: var(--color-on-dark-muted);
}

/* 左右箭头（仿首页 .fs__nav 圆钮：42px 白底墨色描边 · hover 黄底上浮） */
.pgal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-white);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pgal__nav:hover {
    background: var(--color-brand-yellow);
    transform: translateY(-50%) scale(1.06);
    box-shadow: var(--shadow-float);
}

.pgal__nav:focus-visible {
    outline: 3px solid rgba(30, 64, 175, .35);
    outline-offset: 2px;
}

.pgal__nav svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.6;
    fill: none;
}

.pgal__nav--prev {
    left: 12px;
}

.pgal__nav--next {
    right: 12px;
}

/* 底部条：提示语 + 圆点指示器（仿首页 .fs__slide__dots 圆点 · 激活黄底墨边） */
.pgal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* P0-1：--color-text-tertiary 落白底仅 2.56:1 未过 WCAG AA，改用 --color-text-secondary（4.83:1 过 AA） */
.pgal__hint {
    font-size: .75rem;
    color: var(--color-text-secondary);
}

.pgal__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pgal__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-brand-blue);
    background: transparent;
    opacity: .4;
    transition: opacity .2s ease, width .2s ease, background .2s ease, border-color .2s ease;
}

.pgal__dot:hover {
    opacity: .85;
}

.pgal__dot.is-active {
    width: 24px;
    opacity: 1;
    background: var(--color-brand-yellow);
    border-color: var(--color-ink);
}

.pgal__dot:focus-visible {
    outline: 3px solid rgba(30, 64, 175, .35);
    outline-offset: 2px;
}

@media(max-width:767px) {
    .pgal__cap {
        padding: var(--space-4) var(--space-3) var(--space-3);
    }

    .pgal__cap-t {
        font-size: .9375rem;
    }

    .pgal__cap-s {
        font-size: .6875rem;
    }

    .pgal__nav {
        width: 38px;
        height: 38px;
    }

    .pgal__nav--prev {
        left: 8px;
    }

    .pgal__nav--next {
        right: 8px;
    }

    .pgal__nav svg {
        width: 16px;
        height: 16px;
    }

    .pgal__bar {
        justify-content: center;
        gap: var(--space-2);
    }
}

/* 使命 / 愿景 / 价值观 —— grid 之下全宽三列白底卡片（黄顶条卡样式） */
.profile__mvp {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

@media(min-width:768px) {
    .profile__mvp {
        grid-template-columns: repeat(3, 1fr);
    }
}

.profile__mvp-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.profile__mvp-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-5);
    right: var(--space-5);
    height: 3px;
    background: var(--color-brand-yellow);
    border-radius: 0 0 3px 3px;
    opacity: .9;
}

.profile__mvp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float);
    border-color: var(--color-brand-yellow);
}

.profile__mvp-label {
    font-family: var(--font-english);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-brand-yellow-text);
}

.profile__mvp-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.125rem;
    line-height: 1.35;
    color: var(--color-ink);
    letter-spacing: .01em;
}

.profile__mvp-card .small {
    color: var(--color-text-secondary);
}

/* =====================================================================
   模块4 通过视频了解我们 Know us（复刻 gxhyart list-61 · V3 改 3 视频 M4a）
   ===================================================================== */
.knowus {
    background: var(--color-bg-soft);
}

/* 布局：≥1024 左 2fr 大图品牌视频 + 右 1fr 两卡竖排；768-1023 两卡并排；<768 单列 */
.knowus__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media(min-width:1024px) {
    .knowus__grid {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-5);
    }
}

.knowus__side {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media(min-width:768px) and (max-width:1023px) {
    .knowus__side {
        grid-template-columns: repeat(2, 1fr);
    }
}

.knowus__grid .vcard__body h4 {
    font-size: 1rem;
}

/* 左大图品牌视频：媒体填满左栏剩余高度（保底 16:9 区域） */
@media(min-width:1024px) {
    .knowus .vcard--feature {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .knowus .vcard--feature .vcard__media {
        flex: 1;
        min-height: 300px;
        aspect-ratio: auto;
    }
}

/* =====================================================================
   模块6 校区·环境 Campus（整段照抄首页 L783-851 · 不含 L852-859 candids 画廊）
   360 全景拖拽 + 右侧简介口号 + 下方 6 视频 3×2 + 预约参观 CTA
   ===================================================================== */
.campus {
    position: relative;
    background: var(--color-white);
}

.campus::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-yellow-campus);
    pointer-events: none;
}

.campus .container {
    position: relative;
    z-index: 1;
}


/* =====================================================================
   模块7 联系我们 Contact Us（V3 新增 M3 · 参考 gxhyart 页尾左地图右联系卡 · 禁外链 iframe）
   左=深蓝墨渐变地图占位（网格纹 + rgba(245,216,0,.2) 黄光斑 + 定位钉黄圆）+ 右=白底联系卡
   ===================================================================== */
.contactmap {
    background: var(--color-bg-soft);
}

.contactmap__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: stretch;
}

@media(min-width:1024px) {
    .contactmap__grid {
        grid-template-columns: 1.05fr .95fr;
        gap: var(--space-5);
    }
}

/* —— 左：深蓝墨渐变地图占位（on-dark 组 · 无外链图 / iframe · 待接入后替换） —— */
.contactmap__map {
    position: relative;
    min-height: 340px;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-dark-ink) 0%, var(--color-brand-blue-deep) 100%);
    color: var(--color-on-dark);
    border: 1px solid var(--color-dark-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contactmap__map::after {
    content: "";
    position: absolute;
    left: 16%;
    bottom: 8%;
    width: min(54%, 300px);
    height: min(54%, 300px);
    background: radial-gradient(circle, rgba(245, 216, 0, .2) 0%, transparent 70%);
    pointer-events: none;
}

.contactmap__map-grid {
    position: absolute;
    inset: 0;
    opacity: .10;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
    background-size: 44px 44px;
}

.contactmap__pin {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
}

.contactmap__pin-ico {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    display: grid;
    place-items: center;
    color: var(--color-on-yellow);
    box-shadow: 0 0 0 6px rgba(245, 216, 0, .2);
    animation: markpulse 2s infinite;
}

.contactmap__pin-ico svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contactmap__pin-city {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--color-on-dark);
    letter-spacing: .06em;
}

.contactmap__pin-sub {
    font-size: .75rem;
    color: var(--color-on-dark-muted);
}

/* —— 右：白底联系卡（卡头 h3 到访/咨询 + num 电话；3 行图标条目 + 二维码小卡占位） —— */
.contactmap__card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.contactmap__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
}

.contactmap__head h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.contactmap__head h3::before {
    content: "";
    width: 4px;
    height: 16px;
    background: var(--color-brand-yellow);
    border-radius: 2px;
    display: inline-block;
}

.contactmap__phone {
    font-family: var(--font-number);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--color-brand-blue);
    white-space: nowrap;
    letter-spacing: .01em;
}

.contactmap__rows {
    display: grid;
    gap: var(--space-4);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
}

.crow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.crow__ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-card-sm);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    color: var(--color-brand-blue);
}

.crow__ico svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crow__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crow__label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--color-brand-yellow-text);
}

.crow__value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1.4;
    word-break: break-all;
}

/* 二维码小卡占位（复用 footer 二维码 SVG · 对应客服微信 dyart-2027） */
.contactmap__qr {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-soft);
    padding: var(--space-3) var(--space-4);
}

.contactmap__qr-box {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 5px;
}

.contactmap__qr-box svg {
    width: 100%;
    height: 100%;
    display: block;
}

.contactmap__qr-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contactmap__qr-meta b {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .875rem;
    color: var(--color-ink);
}

.contactmap__qr-meta span {
    font-size: .75rem;
    color: var(--color-text-secondary);
}

@media(max-width:479px) {
    .contactmap__map {
        min-height: 280px;
    }

    .contactmap__card {
        padding: var(--space-5);
    }
}

/* 新增样式 */
.advantage__gallery {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    gap: var(--space-3);
}

.advantage__gallery .swiper-slide {
    width: 100%;
}

.advantage__gallery .swiper-slide img {
    width: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.advantage__mscroll {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    display: none;
}

.advantage__mscroll .swiper-slide {
    width: 100%;
}

.advantage__mscroll .swiper-slide img {
    border-radius: var(--radius-card);
    width: 100%;
}

@media(max-width:1023px) {
    .advantage__gallery {
        display: none;
    }

    .advantage__mscroll {
        display: block;
    }
    .iconrail__en{
        display: none;
    }
    .iconrail__inner{
        display: grid;
        gap: 0;
        padding: 0;
        grid-template-columns: repeat(4, 1fr);
        /* border: 2px solid #f0f0f0; */
        margin: 0px 5px;
        border-radius: var(--radius-card);
    }
    .iconrail__inner a.iconrail__btn:first-child{
        display: none;
    }
    .iconrail__btn{
        flex-direction: column;
        gap: 5px;
        border: .02rem solid #f0f0f0;
    }
    
    .iconrail__btn:nth-child(2){
        border-radius: var(--radius-card) 0 0 var(--radius-card);
    }
    .iconrail__btn:last-child{
        border-radius:0 var(--radius-card) var(--radius-card) 0;
    }
    .iconrail__circle{
        width: 45px;
        height: 45px;
        background: none;
        border: 0px;
    }
    .iconrail__zh{
        color: #909090;
        font-weight: initial;
        font-size: 14px;
    }
    a.iconrail__btn.is-active{
        background: var(--color-on-dark-yellow);
    }
    a.iconrail__btn.is-active .iconrail__zh{
        color: #333;
    }
}