/* ============ 51SOLE 跨境易 站点自定义样式 ============ */

/* ---------- 顶部 Logo（图片） ---------- */
/* 头部 80px 高，让 Logo 直接撑满高度做上下居中 */
.header .brand-logo.img-logo {
    display: inline-flex;
    align-items: center;
    height: 80px;
    padding: 0 18px 0 0;
    text-decoration: none;
}

.header .brand-logo.img-logo img {
    display: block;
    width: auto;
    height: 56px;
}

/* ---------- 顶部导航：丝绒深蓝渐变 + 香槟金细线 ---------- */
/* 配色依据（都取自站点自身的设计变量，不是凭空配的）：
   · 首屏 Banner 实测底色 #000830 ~ #001252（极深夜蓝）
   · 原站 .header 原本就是 --color-blue-1(#14182a)，金色系为 --color-golden-1/2/3
     (#f9e4ca / #f7e0c6 / #e1b588)
   之前的橙色渐变(#a32f00→#d1520a→#f4761a)与下面的深蓝 Banner 冷暖打架，
   这里改回同一色族的「深蓝底 + 香槟金点缀」：
   底为 102° 斜向渐变，中段留一道微亮蓝光带（模拟柔光），底部压 1px 金线，
   同时在顶部加一道极淡的内高光，做出丝绒/拉丝金属的层次。 */
body .header,
body.home-page .header,
body.rights-page .header,
body.realtime-page .header,
body.case-page .header {
    background-color: #0b1226 !important;
    background-image: linear-gradient(102deg,
        #070c1c 0%,
        #0d1633 26%,
        #17264f 50%,
        #0d1734 72%,
        #060a18 100%) !important;
    border-bottom: 1px solid rgba(247, 224, 198, 0.26) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body .header.js-header.scrolled,
body.home-page .header.js-header.scrolled,
body.rights-page .header.js-header.scrolled,
body.realtime-page .header.js-header.scrolled,
body.case-page .header.js-header.scrolled {
    background-image: linear-gradient(102deg,
        #040816 0%,
        #090f26 30%,
        #101b3e 54%,
        #080e24 76%,
        #03050e 100%) !important;
    box-shadow: 0 10px 30px rgba(2, 6, 24, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body .header .header-nav li > a {
    color: rgba(255, 255, 255, 0.9) !important;
}
/* 导航下划线改为香槟金渐变（原站此处用 --color-orange-8 米金色，呼应金色描边） */
body .header .header-nav li:hover > a::after,
body .header .header-nav .current > a::after {
    background-color: #e8c08a !important;
    background-image: linear-gradient(90deg, #f9e4ca 0%, #e1b588 100%) !important;
    box-shadow: 0 0 10px rgba(232, 192, 138, 0.5);
}
body .header .contact-box .contact-us {
    border-color: rgba(247, 224, 198, 0.62) !important;
}
body .header .contact-box .contact-us > .phone {
    color: #f7e0c6 !important;
    letter-spacing: 0.5px;
}
body .header .contact-box .contact-us > .icon-phone {
    background-position: 0 0 !important;
}
body .header .platform-slogan {
    color: #ffd89e;
    border-left: 0;
}

/* ---------- 首屏 Banner 标题文字（替代原“全球通”金艺术图） ---------- */
.banner .banner-title-text,
.brand-wrap .banner-title-text {
    display: inline-block;
    font-size: 60px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(180deg, #ffe69a 0%, #f5a623 55%, #c97b1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
    margin-right: 18px;
}
@media (max-width: 1440px) {
    .banner .banner-title-text,
    .brand-wrap .banner-title-text {
        font-size: 50px;
    }
}

/* LOGO 右侧标语：加大加粗 + 香槟金，在深蓝底上更醒目（原 14px/400/白 85%）
   注意：这里**不要**再加 border-left —— LOGO 与标语之间不加竖线（用户要求，2026-09-12）。 */
.header .platform-slogan {
    display: inline-flex;
    align-items: center;
    margin-left: 15px;
    padding-left: 0;
    color: #ffd89e;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 199, 120, .22);
    white-space: nowrap;
}

/* ---------- 页脚（照搬 51sole.com 活动页页脚） ---------- */
/* 来源：https://www.51sole.com/activity/service/slzqgeo.aspx
   对应样式表：/activity/service/geo/css/style.css —— 下面的数值全部原样搬过来，
   只把类名加上 .site-footer 前缀做作用域隔离（原站叫 .footer / .footer_lj /
   .footerTxt / .bottom_img，太通用，容易和 res.goldsupplier.com 的样式打架），
   颜色与尺寸一字未改：白底 + 顶部 2px 橙色分隔线（#FF4E00）。 */
.site-footer {
    position: relative;
    clear: both;
    background: #fff;
    border-top: 2px solid #FF4E00;
    padding-top: 10px;
    overflow: hidden;
    text-align: center;
    /* 原站 body 基准字号是 12px，我们站点是 16px，这里显式钉成 12px 才和原页脚一致 */
    font: 12px/1.5 "Microsoft Yahei", "Hiragino Sans GB", arial, sans-serif;
    color: #333;
}

.site-footer a {
    color: #333;
    text-decoration: none;
}

.site-footer a:hover {
    color: #f50;
}

/* --- 第一行：友情链接 --- */
.site-footer .footer-links {
    height: 30px;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    margin: 0;
}

.site-footer .footer-links a {
    padding: 0 8px;
}

.site-footer .footer-links a:hover {
    text-decoration: underline;
}

/* 原站用的是 <font color="red">，已废弃标签，这里换成等效的类（视觉一致） */
.site-footer .footer-links .link-red {
    color: red;
}

/* --- 第二行：版权、备案、关注我们 --- */
.site-footer .footer-txt {
    width: 1200px;
    line-height: 25px;
    margin: 5px auto 20px;
    text-align: center;
}

.site-footer .footer-txt p {
    clear: both;
    width: 100%;
    margin: 0 auto;
    color: #999;
    text-align: center;
    line-height: 28px;
}

.site-footer .footer-txt p span {
    padding: 0 10px;
}

.site-footer .footer-txt p a {
    color: #555;
}

.site-footer .footer-txt p a:hover {
    color: #555;
    text-decoration: underline;
}

/* 新浪微博图标（原站背景图 ../images/f_wb.png） */
.site-footer .footer-txt .sina {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 0 -4px 10px;
    background: url('/assets/51sole.com/activity/service/geo/images/f_wb.png') no-repeat center;
}

/* 微信图标 + 悬停弹出二维码（原站背景图 ../images/f_wx.png） */
.site-footer .footer-txt .wxcode {
    display: inline-block;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0 0 -4px 10px;
    background: url('/assets/51sole.com/activity/service/geo/images/f_wx.png') no-repeat center;
    position: relative;
}

.site-footer .footer-txt .wxcode img {
    display: none;
    position: absolute;
    top: -5px;
    right: -100px;
    width: 100px;
    height: 100px;
    z-index: 9;
}

.site-footer .footer-txt .wxcode:hover img {
    display: block;
}

/* --- 第三行：资质图标（网络警察 / 实名认证 / 营业执照电子标识） --- */
.site-footer .bottom-img {
    width: 442px;
    margin: 10px auto 20px;
    height: 47px;
}

.site-footer .bottom-img ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .bottom-img ul li {
    float: left;
    margin: 0 10px;
    position: relative;
    height: 47px;
    line-height: 0;
    overflow: hidden;
}

.site-footer .bottom-img ul li img {
    border: 0;
}

/* ---------- 右侧悬浮菜单 ---------- */
.float-bar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.float-bar .float-btn {
    width: 56px;
    padding: 14px 10px;
    border: 0;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-radius: 8px 0 0 8px;
    transition: all .2s ease;
}

.float-bar .btn-apply {
    background: linear-gradient(180deg, #f7b955, #ee8f1d);
}

.float-bar .btn-scheme {
    background: linear-gradient(180deg, #4b8bf5, #2f6fdc);
}

.float-bar .float-btn:hover {
    filter: brightness(1.08);
    transform: translateX(-3px);
}

.float-bar .fb-icon {
    width: 20px;
    height: 20px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.float-bar .btn-apply .fb-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 11v6M9 14h6'/%3E%3C/svg%3E");
}

.float-bar .btn-scheme .fb-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
}

/* ---------- 弹窗 ---------- */
.apply-modal,
.result-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: auto;
}

.apply-modal.show {
    display: block;
}

.apply-modal .modal-dialog {
    position: relative;
    width: 520px;
    max-width: 92%;
    margin: 8vh auto;
    z-index: 1002;
}

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 20, 36, .62);
    z-index: 999;
}

/* 弹窗打开时给背景一点模糊，让视觉焦点集中到弹窗上（不支持的浏览器自动忽略） */
.modal-backdrop.show {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.modal-backdrop.show {
    display: block;
}

.result-wrap .title {
    padding: 20px 0 6px;
    color: #333;
}

.result-wrap .icon-success {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea44f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 通用补丁 ---------- */
/* 原站 common.min.css 里 body 是「宽屏 1580 + 视口 ≤1549px 时回退到 1360」两档。
   之前这里只写了一句全局 min-width:1580px，把那层媒体查询覆盖掉了，
   于是 1366 / 1440 / 1280 等常见屏宽下整页被撑到 1580px 出现横向滚动条：
   会员权益轮播固定 1220px 居中，用户横向滚动时只能看到其中 4 列。
   注意媒体查询判断的是「视口宽度」而不是 body 宽度，所以靠加大 min-width
   是挡不住 .content 变成 1200 的，只能按原站规则把回退补回来。 */
body {
    min-width: 1580px;
}

@media screen and (max-width: 1549px) {
    body {
        min-width: 1360px;
    }
}

.js-modal .err {
    min-height: 16px;
}

.hide {
    display: none !important;
}

/* ===== 会员权益页中部的「外贸服务报价」：3 张报价长图 + 并排 Tab =====
   原「saas建站&海外GEO服务明细」对比表已由 3 张 2880px 宽的报价长图取代
   （图源：外贸服务报价表项目），三个并排标签点击切换。
   Tab 交互复用 site.js 里 nav-tabs / js-nav 的通用逻辑（data-role="member-nav"），
   这里只负责外观；.js-tab-pane 默认 display:none 是为了 JS 未执行时也只露出第一张。 */
.rights-page .rights-container .quote-wrap {
    padding: 0 0 30px;
    border-radius: 6px;
    overflow: hidden;
    /* 与原表格一致的卡片投影（原规则在 .rights-container table 上） */
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}

/* --- 并排的三个标签 --- */
.rights-page .quote-tabs {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #e8ebf2;
}

.rights-page .quote-tabs > li {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.rights-page .quote-tabs > li + li {
    border-left: 1px solid #e8ebf2;
}

.rights-page .quote-tabs > li > a {
    display: block;
    padding: 22px 12px;
    font-size: 19px;
    line-height: 1.4;
    color: #6b7488;
    background-color: #fbfcfe;
    transition: color .2s, background-color .2s;
}

.rights-page .quote-tabs > li > a:hover {
    color: #16203a;
    background-color: #f4f7fd;
}

/* 选中态：白底 + 深色加粗 + 顶部金色渐变细条（与下方图片连成一张卡） */
.rights-page .quote-tabs > li.current > a,
.rights-page .quote-tabs > li.active > a {
    position: relative;
    color: #16203a;
    font-weight: 700;
    background-color: #fff;
}

.rights-page .quote-tabs > li.current > a::after,
.rights-page .quote-tabs > li.active > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-golden-1), var(--color-golden-3));
}

/* --- 图片面板：三张长图叠在同一位置，切换时只显示选中的那张 --- */
.rights-page .quote-body {
    background-color: #fff;
}

.rights-page .quote-body .js-tab-pane {
    display: none;
}

.rights-page .quote-body .js-tab-pane.active {
    display: block;
}

.rights-page .quote-img {
    display: block;
    cursor: zoom-in;
}

.rights-page .quote-img img {
    display: block;
    width: 100%;
    height: auto;
}

.rights-page .quote-tip {
    margin: 0;
    padding: 14px 22px 0;
    font-size: 13px;
    line-height: 1.7;
    color: #8b93a7;
    text-align: center;
    background-color: #fff;
}

/* 权益对比表 */
.rights-page .rights-container {
    padding: 40px 0 60px;
}

/* 全部权益一览区块的 .rights-container（同时有 .main-container）：
   原站 rights.min.css 里的 .rights-container{margin:-251px 0 41px 0;z-index:1}
   只应该作用于"权益对比表"让它上提压住 banner，第二个 .rights-container
   不应该再上提，否则会把权益卡片叠到下面的"底部申请条"背后整段被遮住。 */
.rights-page .rights-container.main-container {
    margin: 0;
    z-index: auto;
    position: relative;
    padding-top: 40px;
}

/* ===== 权益对比表：三层结构 =====
   「一级分类 / 二级分类 / 服务明细 / 服务内容 + 各套餐列」，
   内容与合并关系来自《外贸上网服务.xls》→「saas独立站优化」工作表。
   原站 rights.min.css 只定义了 .col-1/.col-2/.col-desc，这里补齐新列
   并覆盖 td 的 50px 行高（长文本会多行，50px 会把行撑得很高）。 */
.rights-page .rights-container table .col-l1 {
    width: 8%;
    padding: 12px 8px;
    text-align: center;
    vertical-align: middle;
}

.rights-page .rights-container table .col-l2 {
    width: 9%;
    padding: 12px 8px;
    text-align: center;
    vertical-align: middle;
}

.rights-page .rights-container table .col-l2 strong {
    display: inline-block;
    font-weight: 600;
    color: #3f4a63;
    line-height: 1.5;
}

.rights-page .rights-container table .col-name {
    width: 17%;
    padding: 12px 14px 12px 20px;
    text-align: left;
    vertical-align: top;
}

.rights-page .rights-container table .col-desc {
    padding: 12px 18px 12px 20px;
    text-align: left;
    vertical-align: top;
    color: #5a6379;
}

/* 内容区会换行，收紧行高让整张表不至于过高 */
.rights-page .rights-container table tbody td {
    line-height: 1.75;
}

.rights-page .rights-container table tbody td.col-l1,
.rights-page .rights-container table tbody td.col-3,
.rights-page .rights-container table tbody td.col-4,
.rights-page .rights-container table tbody td.col-5 {
    line-height: 1.5;
}

.rights-page .rights-container table .col-3,
.rights-page .rights-container table .col-4,
.rights-page .rights-container table .col-5 {
    width: 18%;
    text-align: center;
    vertical-align: middle;
}

/* 整行分节标题行（「“曝光引流”效果确保承诺」「GEO系统」「客户服务」…） */
.rights-page .rights-container table tr.section-row > td {
    padding: 15px 22px;
    line-height: 1.5;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    color: #16203a;
    background-color: #f2f5fb;
    border-top: 1px solid #e6eaf3;
}

/* 表尾注脚行 */
.rights-page .rights-container table tr.footer-row > td {
    padding: 13px 22px;
    line-height: 1.7;
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    color: #8b93a7;
    background-color: #fbfcfe;
}

/* 权益卡片的 80×80 雪碧图（在原站 index.min.css 定义，会员页未引入，
   这里补一份让图标正常显示）。背景图用本地已抓取的雪碧图。 */
.rights-page .rights-icon-sm {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('/assets/res.gys.cn/img/common/service/qqt/rights_icons_sm.png');
    background-repeat: no-repeat;
    background-size: 1120px auto;
}
.rights-page .rights-icon-sm.icon-x0y0  { background-position: 0 0; }
.rights-page .rights-icon-sm.icon-x0y1  { background-position: 0 -80px; }
.rights-page .rights-icon-sm.icon-x1y0  { background-position: -80px 0; }
.rights-page .rights-icon-sm.icon-x1y1  { background-position: -80px -80px; }
.rights-page .rights-icon-sm.icon-x2y0  { background-position: -160px 0; }
.rights-page .rights-icon-sm.icon-x2y1  { background-position: -160px -80px; }
.rights-page .rights-icon-sm.icon-x3y0  { background-position: -240px 0; }
.rights-page .rights-icon-sm.icon-x3y1  { background-position: -240px -80px; }
.rights-page .rights-icon-sm.icon-x4y0  { background-position: -320px 0; }
.rights-page .rights-icon-sm.icon-x4y1  { background-position: -320px -80px; }
.rights-page .rights-icon-sm.icon-x5y0  { background-position: -400px 0; }
.rights-page .rights-icon-sm.icon-x5y1  { background-position: -400px -80px; }
.rights-page .rights-icon-sm.icon-x6y0  { background-position: -480px 0; }
.rights-page .rights-icon-sm.icon-x6y1  { background-position: -480px -80px; }
.rights-page .rights-icon-sm.icon-x7y0  { background-position: -560px 0; }
.rights-page .rights-icon-sm.icon-x7y1  { background-position: -560px -80px; }
.rights-page .rights-icon-sm.icon-x8y0  { background-position: -640px 0; }
.rights-page .rights-icon-sm.icon-x8y1  { background-position: -640px -80px; }
.rights-page .rights-icon-sm.icon-x9y0  { background-position: -720px 0; }
.rights-page .rights-icon-sm.icon-x9y1  { background-position: -720px -80px; }
.rights-page .rights-icon-sm.icon-x10y0 { background-position: -800px 0; }
.rights-page .rights-icon-sm.icon-x10y1 { background-position: -800px -80px; }
.rights-page .rights-icon-sm.icon-x11y0 { background-position: -880px 0; }
.rights-page .rights-icon-sm.icon-x11y1 { background-position: -880px -80px; }
.rights-page .rights-icon-sm.icon-x12y0 { background-position: -960px 0; }
.rights-page .rights-icon-sm.icon-x12y1 { background-position: -960px -80px; }
.rights-page .rights-icon-sm.icon-x13y0 { background-position: -1040px 0; }
.rights-page .rights-icon-sm.icon-x13y1 { background-position: -1040px -80px; }

/* 权益卡片内容区：原 CSS 是 flex-1 + overflow-hidden，在一些场景下
   flex item 会塌成 0 高度把标题/副标题/按钮整段裁掉。这里强制
   min-height + 上下内边距，保证文字一定显示出来。 */
.rights-page .rights-card .relative.flex-1 {
    min-height: 110px;
    padding: 12px 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.rights-page .rights-card .card-title {
    color: var(--color-blue-2, #394365);
    font-weight: 700;
    line-height: 1.4;
}
.rights-page .rights-card .card-extra {
    color: #6b7894;
    line-height: 1.6;
    margin: 6px 0 12px;
    min-height: 50px;
}

/* 权益卡片的 80×80 雪碧图（在原站 index.min.css 定义，会员页未引入，
   这里补一份让图标正常显示）。背景图用本地已抓取的雪碧图。 */
.rights-page .rights-icon-sm {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('/assets/res.gys.cn/img/common/service/qqt/rights_icons_sm.png');
    background-repeat: no-repeat;
    background-size: 1120px auto;
}
.rights-page .rights-icon-sm.icon-x0y0  { background-position: 0 0; }
.rights-page .rights-icon-sm.icon-x0y1  { background-position: 0 -80px; }
.rights-page .rights-icon-sm.icon-x1y0  { background-position: -80px 0; }
.rights-page .rights-icon-sm.icon-x1y1  { background-position: -80px -80px; }
.rights-page .rights-icon-sm.icon-x2y0  { background-position: -160px 0; }
.rights-page .rights-icon-sm.icon-x2y1  { background-position: -160px -80px; }
.rights-page .rights-icon-sm.icon-x3y0  { background-position: -240px 0; }
.rights-page .rights-icon-sm.icon-x3y1  { background-position: -240px -80px; }
.rights-page .rights-icon-sm.icon-x4y0  { background-position: -320px 0; }
.rights-page .rights-icon-sm.icon-x4y1  { background-position: -320px -80px; }
.rights-page .rights-icon-sm.icon-x5y0  { background-position: -400px 0; }
.rights-page .rights-icon-sm.icon-x5y1  { background-position: -400px -80px; }
.rights-page .rights-icon-sm.icon-x6y0  { background-position: -480px 0; }
.rights-page .rights-icon-sm.icon-x6y1  { background-position: -480px -80px; }
.rights-page .rights-icon-sm.icon-x7y0  { background-position: -560px 0; }
.rights-page .rights-icon-sm.icon-x7y1  { background-position: -560px -80px; }
.rights-page .rights-icon-sm.icon-x8y0  { background-position: -640px 0; }
.rights-page .rights-icon-sm.icon-x8y1  { background-position: -640px -80px; }
.rights-page .rights-icon-sm.icon-x9y0  { background-position: -720px 0; }
.rights-page .rights-icon-sm.icon-x9y1  { background-position: -720px -80px; }
.rights-page .rights-icon-sm.icon-x10y0 { background-position: -800px 0; }
.rights-page .rights-icon-sm.icon-x10y1 { background-position: -800px -80px; }
.rights-page .rights-icon-sm.icon-x11y0 { background-position: -880px 0; }
.rights-page .rights-icon-sm.icon-x11y1 { background-position: -880px -80px; }
.rights-page .rights-icon-sm.icon-x12y0 { background-position: -960px 0; }
.rights-page .rights-icon-sm.icon-x12y1 { background-position: -960px -80px; }
.rights-page .rights-icon-sm.icon-x13y0 { background-position: -1040px 0; }
.rights-page .rights-icon-sm.icon-x13y1 { background-position: -1040px -80px; }

.rights-page table th,
.rights-page table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.rights-page table th {
    background: #f7f9fc;
}

.rights-page table td.col-1 {
    width: 100px;
    background: #fafbfd;
}

.rights-page table td.col-2 {
    text-align: left;
}

.rights-page .price {
    margin: 6px 0;
    color: #e4393c;
}

.rights-page .btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 0;
    color: #fff;
    background: #2f6fdc;
    cursor: pointer;
}

.rights-page .btn.free {
    background: #9aa5b1;
}

.rights-page .btn.super {
    background: #ee8f1d;
}

/* 实时数据 / 案例页 通用容器 */
.realtime-page .main-container,
.case-page .main-container {
    padding: 40px 0;
}

/* ---------- 客户案例页补丁 ---------- */
/* 原站顶部 header 是透明的，现在给了实底，76px 的标题上留白会显得空，收一点 */
body.case-page .example-container .content .title {
    padding-top: 40px;
}
/* 案例卡片区高度自适应，避免固定 1224px 在卡片增减后裁切或留白 */
body.case-page .example-container .case-wrapper.auto-height {
    height: auto;
}
body.case-page .example-container .case-wrapper > ul {
    justify-content: center;
}
/* 公司名称下方只保留「N Yrs」年限徽章（原金色认证徽章已按要求移除），改为与公司名称左对齐 */
body.case-page .example-container .pane .corp-info .member-wrap .yearMember,
body.case-page .feedback-container .swiper-slide .company-info .member-wrap .yearMember {
    margin-left: 0;
}
/* 没有 Logo 的评价卡：右侧信息块补满整行，公司名称/年限徽章与其它卡片右对齐一致 */
body.case-page .feedback-container .swiper-slide .company-info.no-logo .info-wrap {
    width: 100%;
}
/* 评价轮播必须初始化成功，否则 .feedback-wrap 一直 display:none */
body.case-page .feedback-container .swiper-slide-active .feedback-wrap,
body.case-page .feedback-container .js-feedback-swiper:not(.swiper-initialized) .swiper-slide:first-child .feedback-wrap,
body.case-page .feedback-container .swiper-init-failed .swiper-slide .feedback-wrap {
    display: block;
}
/* 评价图片：初始化失败时按大图展示，避免出现空白方块 */
body.case-page .feedback-container .swiper-init-failed .swiper-slide .img-wrap .adjust-box,
body.case-page .feedback-container .swiper-init-failed .swiper-slide .img-wrap img {
    width: 720px;
    height: 432px;
}
/* 客户 logo 墙：未初始化时至少平铺展示，不要空白 */
body.case-page .company-container .js-logo-swiper1:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* 聊天记录滚动区 */
body.case-page .customer-container .chat-history {
    scrollbar-width: none;
}

/* ---------- 常见问题板块加强 ---------- */
.questions-container {
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
    margin-top: 30px;
    padding: 30px 0 60px;
}
.questions-container .qa-content {
    padding: 40px 0 30px !important;
}
.questions-container .qa-pane {
    box-shadow: 0 4px 16px rgba(15, 36, 76, 0.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.questions-container .qa-pane:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 36, 76, 0.1);
}
.questions-container .question-name {
    color: #0b1b37 !important;
    margin-bottom: 10px;
}
.questions-container .answer-content {
    color: #4a5874 !important;
    line-height: 1.8;
}

/* ============ 会员权益页：从首页搬来的 Banner + 权益轮播 ============ */
/* 这两块原本属于首页，样式在 index.min.css 里，而会员权益页只加载 rights.min.css
   （2KB，只有表格样式），所以这里按原站声明复制一份，作用域限定在 body.rights-page。
   容器类用 .benefits-container 而不是 .rights-container —— 后者在会员页是权益对比表，
   直接复用会互相污染。 */
body.rights-page .join-us-container { height: 300px; margin-top: 100px; }
body.rights-page .join-us-container .feature {
    font-size: 40px;
    padding: 55px 0 0 0;
    background: linear-gradient(90deg, var(--color-golden-1), var(--color-golden-3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.rights-page .join-us-container .feature span { font-size: 50px; }
body.rights-page .join-us-container .oper-box { padding: 37px 0 73px 0; }
body.rights-page .join-us-container .oper-box .btn {
    width: 300px;
    height: 60px;
    font-size: 28px;
    line-height: 60px;
    font-weight: bold;
    border-radius: 30px;
}

body.rights-page .benefits-container { background-color: var(--color-gray-2); }
body.rights-page .benefits-container .title {
    font-size: 46px;
    padding-top: 86px;
    color: var(--color-blue-14);
}
body.rights-page .benefits-container .subtitle {
    width: auto;
    height: auto;
    background: none;
    line-height: 34px;
    margin-bottom: 46px;
    color: var(--color-blue-2);
}
body.rights-page .benefits-container .content-box { margin-bottom: 93px; padding-bottom: 0; }
/* 权益轮播固定「4 列 × 2 行」，宽度跟随父容器（.content = 1200px）并居中。
   ⚠️ 这里不能给 .swiper 写死比父容器更大的宽度：原著写的 1536px 比 .content
   的 1200px 还宽，而 margin:0 auto 在「子元素比父容器宽」时 auto 会退化成 0，
   于是整块从容器左边缘向右溢出 —— 1920 屏下左 360 / 右 1896，看起来就是「偏在
   一边」。改成 100% 后，任何屏宽下都是 4 列且水平居中。 */
body.rights-page .benefits-container .content-box .swiper {
    width: 100%;
    max-width: 1200px;
    height: 568px;   /* 两行：卡片 282×2 + margin 2×2 */
    margin: 0 auto;
}
body.rights-page .benefits-container .swiper-slide { height: fit-content; }
/* 卡片宽度跟着 slide 走（4 列时约 282px），间距由 Swiper 的 spaceBetween 控制，
   这样列宽永远等分、不会随屏宽变化而错位。 */
body.rights-page .benefits-container .rights-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 282px;
    margin-bottom: 2px;
}
body.rights-page .benefits-container .rights-card .card-bd {
    position: relative;
    width: 100%;
    height: 254px;
    border-radius: 10px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-3);
    transition: all .3s ease;
}
body.rights-page .benefits-container .rights-card .card-bd:before {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    border-radius: 8px;
    background-image: linear-gradient(0, #fff, #eef1f8);
}
body.rights-page .benefits-container .rights-card .card-bd:hover { height: 100%; }
body.rights-page .benefits-container .rights-card .rights-icon-sm {
    position: relative;
    margin-top: 42px;
    transition: all .3s ease 10ms;
}
body.rights-page .benefits-container .rights-card .card-bd:hover .rights-icon-sm { margin-top: 26px; }
body.rights-page .benefits-container .rights-card .rights-icon-sm + div { margin-top: -9px; }
body.rights-page .benefits-container .rights-card .card-title {
    color: var(--color-blue-2);
    margin-top: 20px;
}
body.rights-page .benefits-container .rights-card .card-extra {
    color: var(--color-blue-2);
    margin: 13px 0 16px 0;
}
body.rights-page .benefits-container .rights-card .btn-wrap {
    position: absolute;
    left: 0; right: 0; bottom: -36px;
    transition: all .3s ease 10ms;
}
body.rights-page .benefits-container .rights-card .card-bd:hover .btn-wrap { bottom: 32px; }
body.rights-page .benefits-container .rights-card .btn {
    width: 100px;
    line-height: 34px;
    font-size: 14px;
    border-radius: 17px;
}
body.rights-page .benefits-container .content-box .swiper-button-prev,
body.rights-page .benefits-container .content-box .swiper-button-next {
    opacity: 1;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    color: #8f98b5;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-3);
}
/* 箭头挪到内容区外侧的留白里（原站 .seo-container 也是 -70px 的写法）。
   卡片变宽后如果还压在 left:0/right:0，会盖住首/末列的卡片。 */
body.rights-page .benefits-container .content-box .swiper-button-prev { left: -70px; }
body.rights-page .benefits-container .content-box .swiper-button-next { right: -70px; }
body.rights-page .benefits-container .content-box .swiper-button-prev:after,
body.rights-page .benefits-container .content-box .swiper-button-next:after { font-size: 22px; }

/* ============ 会员权益页：权益对比表新增「服务内容」列 ============ */
/* 表格改成 5 列：分组 | 服务项目 | 服务内容 | 套餐1 | 套餐2。
   服务内容文字较长，单独一行高较小、左对齐，避免 50px 行高把表格撑得过高。 */
body.rights-page .rights-container table .col-desc {
    width: auto;
    text-align: left;
    line-height: 22px;
    font-size: 13px;
    color: #5b6478;
    padding: 14px 24px 14px 20px;
}
body.rights-page .rights-container table .col-2 { padding-left: 40px; }

/* ============ 弹窗关闭按钮：内联图标兜底 ============ */
/* 原样式依赖外部 CDN 图片（res.gys.cn），该域名对 http 请求返回空目标 301，
   导致「在线申请」等弹窗的关闭按钮不可见。这里改用内联 SVG，不再依赖任何外链。
   注意：common.min.css 的选择器是 :is(.apply-modal,...) .modal-header .closer（特异性 3 类），
   因此这里也必须用 .apply-modal .modal-header .closer 才能覆盖。 */
.apply-modal .modal-header .closer {
    width: 22px;
    height: 22px;
    min-width: 22px;
    display: block;
    border-radius: 50%;
    cursor: pointer;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%239aa1b0' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / 16px;
    transition: background-color 0.2s;
}
.apply-modal .modal-header .closer:hover {
    background-color: #f2f3f5;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%234a5060' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* ==========================================================================
   弹窗视觉升级（在线申请 / 推广方案 / 提交结果）
   —— 全部写在 site.css，靠后加载 + 同等或更高特异性覆盖 common.min.css，
      不改动原站样式文件。图标一律用内联 SVG，不依赖任何外链。
   ========================================================================== */

/* 遮罩只用 .modal-backdrop 一层；common.min.css 给 .apply-modal 自带的
   rgba(0,0,0,.5) 背景要清掉，否则两层叠加会发黑。 */
.apply-modal {
    background-color: transparent;
}

/* 弹窗居中：覆盖 common 的 flex 全屏布局 + site.css 旧的 520px 定宽 */
.apply-modal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 24px;
    z-index: 1002;
}

.apply-modal .modal-content {
    position: relative;
    width: 620px;
    max-width: 100%;
    min-height: 0;
    background-color: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(20, 24, 42, .30), 0 4px 16px rgba(20, 24, 42, .12);
    animation: jsModalPop .28s cubic-bezier(.2, .9, .3, 1.15);
}

@keyframes jsModalPop {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 头部：品牌橙渐变 + 装饰 ---------- */
.apply-modal .modal-header {
    position: relative;
    padding: 20px 26px;
    background-image: linear-gradient(120deg, #a32f00 0%, #d1520a 48%, #f4761a 100%);
    overflow: hidden;
}

/* 右上角装饰：两颗半透明圆 + 斜向光带 */
.apply-modal .modal-header::before {
    content: '';
    position: absolute;
    right: -46px;
    top: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    pointer-events: none;
}

.apply-modal .modal-header::after {
    content: '';
    position: absolute;
    right: 60px;
    bottom: -84px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

/* 标题左侧的图标徽章 */
.mh-badge {
    position: relative;
    z-index: 2;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

.mh-badge .mh-icon {
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.mh-icon.i-apply {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='10' cy='7' r='3.6'/%3E%3Cpath d='M19 8v6M16 11h6'/%3E%3C/svg%3E");
}

.mh-icon.i-scheme {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
}

.apply-modal .modal-header .modal-title {
    position: relative;
    z-index: 2;
    flex: 1;
    margin-left: 14px;
    font-size: 20px;
    line-height: 42px;
}

.apply-modal .modal-header .modal-title strong {
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
}

/* 头部在深色底上，关闭按钮改成白色系 */
.apply-modal .modal-header .closer {
    position: relative;
    z-index: 2;
    background-color: rgba(255, 255, 255, .14);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

.apply-modal .modal-header .closer:hover {
    background-color: rgba(255, 255, 255, .32);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* ---------- 主体 ---------- */
.apply-modal .modal-body {
    position: relative;
    padding: 24px 28px 24px;
    background-color: #fff;
    overflow: hidden;
}

/* 主体背景装饰：左上淡色圆环 + 右下暖色光晕 */
.apply-modal .modal-body::before {
    content: '';
    position: absolute;
    left: -58px;
    top: -58px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 18px solid rgba(244, 118, 26, .055);
    pointer-events: none;
}

.apply-modal .modal-body::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 118, 26, .15) 0%, rgba(244, 118, 26, 0) 70%);
    pointer-events: none;
}

/* 表单容器：清掉原站的定宽 / 左偏 / 内边距 */
.apply-modal .apply-container {
    position: relative;
    z-index: 1;
    width: auto;
    margin-left: 0;
    padding: 0;
    border-radius: 0;
}

.apply-modal .apply-container .row .col-1 {
    min-width: 92px;
    padding-right: 12px;
    line-height: 46px;
    font-size: 15px;
    font-weight: 600;
    color: #3f4661;
}

.apply-modal .apply-container .row .col-2 {
    position: relative;
    margin-bottom: 6px;
}

/* 输入框：白底圆角 + 左侧图标位 + 聚焦光晕 */
.apply-modal .apply-container .row input[type="text"] {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 42px;
    border: 1px solid #e3e6ee;
    border-radius: 10px;
    background-color: #f8fafc;
    font-size: 15px;
    color: #1f2436;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}

.apply-modal .apply-container .row input[type="text"]:focus {
    outline: none;
    border-color: #f4761a;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(244, 118, 26, .14);
}

.apply-modal .apply-container .row input[type="text"]::placeholder {
    color: #a9b0c0;
}

/* 输入框内左侧图标 */
.apply-modal .apply-container .row .col-2::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 23px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .8;
    pointer-events: none;
    z-index: 2;
}

.apply-modal .field-company .col-2::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4761a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M15 9h2a2 2 0 0 1 2 2v10'/%3E%3Cpath d='M9 7h2M9 11h2M9 15h2'/%3E%3C/svg%3E");
}

.apply-modal .field-name .col-2::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4761a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.apply-modal .field-phone .col-2::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4761a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.6'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}

/* 字段级错误提示：common.min.css 把 .col-3 设成 position:absolute + display:none，
   导致校验失败时错误文字根本看不见（用户表现为"点了没反应"），这里改回常规流并常显。 */
.apply-modal .apply-container .row .err {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    display: block;
    min-height: 18px;
    padding: 0 0 0 2px;
    font-size: 12px;
    line-height: 18px;
    white-space: normal;
    color: #e4393c;
}

/* 提交按钮的包裹层：清掉原站的内边距 + 阴影 + 微交互。
   ⚠️ 必须同时写 .row .btn-wrap 和 .row.btn-wrap 两种形式：
   - 方案弹窗结构是 `.row > .btn-wrap`（后代）
   - 申请弹窗结构是 `.row.btn-wrap`（同一个元素，<div class="... row btn-wrap">）
   漏掉后者的话，common.min.css 的 `.apply-container-3 .btn-wrap{padding:15px 0 0 148px}`
   会生效 —— 按钮右边距凭空多出 148px，看起来就是"没居中、偏右"（已实测踩过）。 */
.apply-modal .apply-container .row .btn-wrap,
.apply-modal .apply-container .row.btn-wrap {
    padding: 0;
}

/* 提交按钮：宽度收窄并在弹窗里居中（原来是 100% 通栏，太长）。
   display:block + margin:0 auto —— 申请弹窗的父级是 flex 列、方案弹窗的父级是
   普通块级 .btn-wrap，两种结构下都能居中。 */
.apply-modal .apply-container .row .btn {
    display: block;
    width: 240px;
    max-width: 100%;   /* 极窄屏（≤360）内宽不足 240 时自动收窄，避免顶出弹窗 */
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    padding: 0;
    border: 0;
    border-radius: 25px;
    background-image: linear-gradient(135deg, #ffc45e 0%, #f7a223 42%, #e0760d 100%);
    box-shadow: 0 10px 22px rgba(224, 118, 13, .30);
    font-weight: 700;
    transition: transform .15s, box-shadow .2s, filter .2s;
}

.apply-modal .apply-container .row .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(224, 118, 13, .40);
    filter: brightness(1.03);
}

.apply-modal .apply-container .row .btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(224, 118, 13, .30);
}

.apply-modal .apply-container .row .btn[disabled] {
    opacity: .72;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 6px 14px rgba(224, 118, 13, .22);
}

/* 方案弹窗的按钮是绿色系，保持原有语义但统一尺寸 */
.apply-modal .apply-container .row .btn.btn-green {
    background-image: linear-gradient(135deg, #63d98a 0%, #3ea75e 55%, #2f8c4c 100%);
    box-shadow: 0 10px 22px rgba(46, 140, 76, .28);
}

.apply-modal .apply-container .row .btn.btn-green:hover {
    box-shadow: 0 14px 28px rgba(46, 140, 76, .36);
}

/* 整体提交失败提示条 */
.apply-modal .form-alert {
    display: none;
    margin-top: 12px;
    padding: 10px 12px 10px 38px;
    border: 1px solid #ffd9d9;
    border-radius: 10px;
    background-color: #fff5f5;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9.5' stroke='%23d93025' stroke-width='1.8'/%3E%3Cpath d='M12 7.5v5.5M12 16.4h.01' stroke='%23d93025' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 17px;
    font-size: 13px;
    line-height: 20px;
    color: #d93025;
}

.apply-modal .form-alert.show {
    display: block;
}

/* 表单下方的说明文字：居中，别再左偏 */
.apply-modal .apply-container .tips {
    padding: 12px 0 0;
    text-align: center;
    white-space: normal;
    color: #98a0b3;
    font-size: 13px;
}

/* ---------- 结果弹窗 ---------- */
.result-modal .modal-content {
    width: 460px;
}

.result-modal .apply-container {
    width: auto;
}

.result-modal .result-wrap {
    text-align: center;
    padding: 6px 4px 2px;
}

.result-modal .result-wrap .title {
    flex-direction: column;
    padding: 0;
    color: #232838;
}

.result-modal .result-wrap .icon-success {
    display: block;
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background-color: #ecfaf1;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea44f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 36px;
    border: 1px solid #b7ecca;
    box-shadow: 0 12px 26px rgba(46, 164, 79, .18);
}

.result-modal .result-wrap .title strong {
    font-size: 16px;
    line-height: 26px;
    font-weight: 600;
    color: #232838;
}

.result-modal .result-wrap .btn-wrap {
    padding-top: 24px;
    /* 这里也带 .apply-container-3，原站的 `.apply-container-3 .btn-wrap{padding:15px 0 0 148px}`
       会给它加 148px 左内边距 → 「关闭」按钮明显偏右（实测左 182 / 右 34）。清掉。 */
    padding-left: 0;
    padding-right: 0;
}

.result-modal .result-wrap .btn {
    width: 180px;
    height: 46px;
    line-height: 46px;
    border-radius: 23px;
    border: 1px solid #3ea75e;
    color: #3ea75e;
    background: #fff;
    font-weight: 600;
    transition: background-color .18s, color .18s, transform .15s;
}

.result-modal .result-wrap .btn:hover {
    background-color: #3ea75e;
    color: #fff;
    transform: translateY(-1px);
}

/* 窄屏适配 */
@media screen and (max-width: 700px) {
    .apply-modal .modal-dialog { padding: 14px; }
    .apply-modal .modal-content { width: 100%; }
    .apply-modal .modal-body { padding: 18px 18px 18px; }
    .apply-modal .apply-container .row .col-1 { min-width: 74px; font-size: 14px; }
}

/* ==========================================================================
   首页首屏右侧媒体位：旋转地球视频 ⇄ 浮动插图，每 10 秒自动切换
   - 分工：图片与浮动动画全在 CSS（在 .content 上生成 ::before 图层），
     JS 只负责每 10 秒给 .video-box 切一个 is-image 类。
     好处是**不用改 CMS 里的 banner 内容**（home.banner.top），线上只换 css/js/图片
     三个文件即可，后台富文本万一被编辑也不会被覆盖。
   - 定位依据（实测 @1920 / .content 宽 1500、高 800）：
       motto/按钮 右边缘 = .content 左边 + 624   ← 插图不能压到文案
       白色申请表单 x = .content 右边 - 380，y = 190…580
       底部图标条 .features y = 680…800          ← 插图不能压到图标条
     所以插图 right:100px（对齐视频的 margin-right）、bottom:140px（底边 660，
     正好落在图标条上方），宽度按 .content 的 1500/1200 两档各给一版。
   - 720×484 = 720 × 494/734，与原图 banner-rightimg.png 等比；
     460×310 是窄屏档（≤1549px，此时 .content 只有 1200 宽）。
   ========================================================================== */
body.home-page .banner .video-box .content {
    position: relative;
}
body.home-page .banner .video-box .content::before {
    content: '';
    position: absolute;
    right: 100px;
    bottom: 140px;
    width: 720px;
    height: 484px;
    background: url('/assets/trade-express.cn/images/home/banner-rightimg.png') no-repeat center bottom;
    background-size: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s ease;
    animation: bannerFloat 6s ease-in-out infinite;
    pointer-events: none;
}
body.home-page .banner .video-box video {
    transition: opacity 0.9s ease, visibility 0.9s ease;
}
body.home-page .banner .video-box.is-image video {
    opacity: 0;
    visibility: hidden;
}
body.home-page .banner .video-box.is-image .content::before {
    opacity: 1;
    visibility: visible;
}
/* 轻轻上下浮动 */
@keyframes bannerFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -18px, 0); }
}
/* 窄屏档：.content 缩到 1200，插图同步缩小，避免压到左侧文案 */
@media screen and (max-width: 1549px) {
    body.home-page .banner .video-box .content::before {
        width: 460px;
        height: 310px;
    }
}
/* 系统开了「减少动态效果」：只关掉浮动与淡入淡出（改成瞬时切换），
   切换本身照常进行——图片/视频交替属于内容展示，不是装饰性动效。
   ⚠ 不要连切换一起停掉，否则这类系统上会永远停在第一张（曾踩过）。 */
@media (prefers-reduced-motion: reduce) {
    body.home-page .banner .video-box .content::before {
        animation: none;
        transition: none;
    }
    body.home-page .banner .video-box video {
        transition: none;
    }
}

/* ---------- 首页「供应商案例」补丁 ---------- */
/* 公司名称下方只保留「N Yrs」年限徽章（原金色 Verified Supplier 认证徽章已按要求移除，
   与客户案例页保持一致），并把徽章改为与公司名称左对齐。
   原站 index.min.css 里是 .member-wrap .yearMember{margin-left:13px}，
   那个 13px 是给认证徽章留的间距，徽章没了就该归零。 */
body.home-page .corp-container .corp-info .member-wrap .yearMember {
    margin-left: 0;
}