@charset "utf-8";
/**
 * 联系博克（/zaixianliuyan/）新版页面样式 · 2026-10-16
 * ------------------------------------------------------
 * 仅新增 lx- 前缀组件（联系方式 4 卡 + 留言容器）；
 * Banner / 区块标题 / 收尾横幅复用 bc-about.css（ab-banner / ab-head /
 * ab-body / ab-close），不影响站内其他页面。
 * 版本：v20261016f（微信二维码悬停弹出；地址卡接入高德地图导航；留言卡铺满 1400 且加大内边距与字段间距，大气版）
 */

/* ==================== 联系方式 4 卡 ==================== */
.lx-cards { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; }
.lx-card {
    -webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    text-align: center;
    padding: 34px 22px 26px;
    background: #fff;
    border: 1px solid #e3e8f2;
    border-radius: 10px;
    -webkit-transition: -webkit-transform .25s, box-shadow .25s, border-color .25s;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.lx-card:hover {
    -webkit-transform: translateY(-4px); transform: translateY(-4px);
    border-color: #bcd0f5;
    box-shadow: 0 10px 26px rgba(2, 55, 147, .12);
}
.lx-card .ic {
    width: 52px; height: 52px;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    border-radius: 50%;
    background: #eef3fc;
    margin-bottom: 16px;
    -webkit-transition: background .25s;
    transition: background .25s;
}
.lx-card .ic svg { width: 24px; height: 24px; fill: #023793; }
.lx-card:hover .ic { background: #023793; }
.lx-card:hover .ic svg { fill: #fff; }
.lx-card b { font-size: 14px; font-weight: 400; color: #8b93a5; letter-spacing: 2px; margin-bottom: 8px; }
.lx-card strong { font-size: 19px; font-weight: 700; color: #17233d; line-height: 1.4; word-break: break-all; }
.lx-card i {
    font-style: normal;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #a4adbf;
    max-width: 100%;
}
a.lx-card i { color: #3a76d2; }
a.lx-card:hover i { color: #023793; }

/* 地址卡：地图导航胶囊 */
.lx-card .nav {
    display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    margin-top: 13px;
    padding: 5px 13px;
    border-radius: 999px;
    background: #eef3fc;
    color: #023793;
    font-size: 12.5px;
    -webkit-transition: background .25s, color .25s;
    transition: background .25s, color .25s;
}
.lx-card .nav svg { width: 13px; height: 13px; margin-left: 3px; fill: #023793; -webkit-transition: fill .25s; transition: fill .25s; }
.lx-card:hover .nav { background: #023793; color: #fff; }
.lx-card:hover .nav svg { fill: #fff; }

/* 微信卡：鼠标悬停弹出二维码浮层 */
.lx-card--ewm { position: relative; cursor: default; }
.lx-card--ewm .hint { color: #a4adbf; }
.lx-card--ewm .ewm {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 12px);
    display: block;
    padding: 8px;
    background: #fff;
    border: 1px solid #dde4f0;
    border-radius: 10px;
    line-height: 0;
    box-shadow: 0 14px 34px rgba(2, 55, 147, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 30;
    -webkit-transform: translate(-50%, 8px) scale(.96);
    transform: translate(-50%, 8px) scale(.96);
    -webkit-transition: opacity .22s, visibility .22s, -webkit-transform .22s;
    transition: opacity .22s, visibility .22s, transform .22s;
}
.lx-card--ewm .ewm:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px; height: 12px;
    margin-left: -6px;
    background: #fff;
    border-right: 1px solid #dde4f0;
    border-bottom: 1px solid #dde4f0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.lx-card--ewm .ewm img { width: 118px; height: 118px; }
.lx-card--ewm:hover,
.lx-card--ewm:focus-within { -webkit-transform: translateY(-4px); transform: translateY(-4px); border-color: #bcd0f5; box-shadow: 0 10px 26px rgba(2, 55, 147, .12); }
.lx-card--ewm:hover .ewm,
.lx-card--ewm:focus-within .ewm {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 0) scale(1);
    transform: translate(-50%, 0) scale(1);
}
.lx-card--ewm:hover .ic,
.lx-card--ewm:focus-within .ic { background: #023793; }
.lx-card--ewm:hover .ic svg,
.lx-card--ewm:focus-within .ic svg { fill: #fff; }

/* 触屏设备（无 hover）：二维码直接平铺显示 */
@media (hover: none) {
    .lx-card--ewm { cursor: pointer; }
    .lx-card--ewm .hint { display: none; }
    .lx-card--ewm .ewm {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        margin-top: 12px;
        box-shadow: none;
        border-color: #e3e8f2;
        -webkit-transform: none;
        transform: none;
    }
    .lx-card--ewm .ewm:after { display: none; }
    .lx-card--ewm .ewm img { width: 96px; height: 96px; }
}

/* ==================== 在线留言容器（铺满 1400 有效宽度 · 大呼吸感） ==================== */
.lx-formbox .bc-lx { margin: 0 auto; max-width: none; }
.lx-formbox .bc-lx__info { padding: 58px 54px 42px; }
.lx-formbox .bc-lx__form { padding: 56px 64px 42px; }
.lx-formbox .bc-lx__brand { font-size: 24px; }
.lx-formbox .bc-lx__list li { margin-bottom: 30px; }
.lx-formbox .bc-lx__ico { width: 42px; height: 42px; margin-right: 16px; }
.lx-formbox .bc-lx__ico svg { width: 20px; height: 20px; }
.lx-formbox .bc-lx__txt { font-size: 15px; line-height: 1.7; }
.lx-formbox .bc-lx__promise { padding-top: 24px; gap: 26px; margin-top: 12px; }
.lx-formbox .bc-lx__promise p { font-size: 13px; }
.lx-formbox .bc-msg__head { margin-bottom: 30px; }
.lx-formbox .bc-msg__head h3 { font-size: 24px; }
.lx-formbox .bc-msg__head p { margin-top: 12px; }
.lx-formbox .bc-msg__grid { gap: 0 28px; }
.lx-formbox .bc-msg__field { margin-bottom: 20px; }
.lx-formbox .bc-msg__field > span { font-size: 15px; margin-bottom: 10px; }
.lx-formbox .bc-msg__field input[type=text],
.lx-formbox .bc-msg__field input[type=email] { height: 47px; line-height: 47px; padding: 0 16px; }
.lx-formbox .bc-msg__field textarea { height: 158px; padding: 13px 16px; }
.lx-formbox .bc-msg__actions { margin-top: 10px; }
.lx-formbox .bc-msg__submit { height: 54px; font-size: 17px; letter-spacing: 4px; }

@media (max-width: 860px) {
    .lx-formbox .bc-lx__info { padding: 32px 24px 26px; }
    .lx-formbox .bc-lx__form { padding: 28px 22px 22px; }
    .lx-formbox .bc-lx__list li { margin-bottom: 22px; }
    .lx-formbox .bc-msg__grid { gap: 0 18px; }
    .lx-formbox .bc-msg__field { margin-bottom: 16px; }
    .lx-formbox .bc-msg__field input[type=text],
    .lx-formbox .bc-msg__field input[type=email] { height: 42px; line-height: 42px; }
    .lx-formbox .bc-msg__field textarea { height: 124px; }
}

/* ==================== 响应式 ==================== */
@media (max-width: 1024px) {
    .lx-cards { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .lx-card { -ms-flex-preferred-size: calc(50% - 10px); flex-basis: calc(50% - 10px); }
}
@media (max-width: 767px) {
    /* 在线留言：移动端保留表单（2026-10-24 二次调整）
       - 收起左侧深蓝信息卡：电话/邮箱/网址/地址与上方 4 张联系卡完全重复
       - 收起表单内重复标题「联系博克」：区块标题已够，省一屏高度
       - 表单卡自身去掉外阴影/圆角/外边距，直接融进白卡 */
    .lx-page .lx-msgblock { display: block !important; }
    .lx-page .lx-msgblock .bc-lx { display: block; margin: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
    .lx-page .lx-msgblock .bc-lx__info { display: none !important; }
    .lx-page .lx-msgblock .bc-lx__form { padding: 0; background: transparent; }
    .lx-page .lx-msgblock .bc-msg__head { display: none !important; }
    /* 表单本身做成一张白卡：插件默认 padding:0 时输入框会贴着卡片边缘 */
    .lx-page .lx-msgblock .bc-msg { background: #fff; border-radius: 12px; padding: 16px 14px 16px; box-shadow: 0 4px 16px rgba(2, 55, 147, .06); }
    .lx-page .lx-msgblock .bc-msg__field textarea { height: 108px; }
    /* 收尾横幅的「在线留言」按钮仍隐藏：表单在本区块、横幅在其下方，锚点只会往回跳，无意义 */
    .lx-page .ab-close .ask { display: none !important; }
    .lx-page .lx-msgblock .bc-msg__submit { height: 46px; font-size: 15px; letter-spacing: 2px; }
    /* 联系方式 4 卡：单列大卡 → 两排 ×2（2026-10-24），缩短首屏高度 */
    /* 在线留言表单：姓名/手机/公司/邮箱四个短字段一排两个（2×2），留言内容仍通栏（2026-10-24）
       注：表单基础样式由 bokcoil-message 插件内联输出，这里用 .lx-formbox 前缀提高特异性覆盖其 <=700 单列规则 */
    .lx-formbox .bc-msg__grid { grid-template-columns: 1fr 1fr; gap: 0 12px; }
    .lx-formbox .bc-msg__field { margin-bottom: 14px; }
    .lx-formbox .bc-msg__field > span { font-size: 13px; margin-bottom: 6px; }
    .lx-formbox .bc-msg__field input[type=text],
    .lx-formbox .bc-msg__field input[type=email] { height: 40px; line-height: 40px; padding: 0 11px; font-size: 13.5px; }
    .lx-formbox .bc-msg__field textarea { font-size: 13.5px; padding: 10px 11px; }
    /* 微信卡：内嵌二维码取消（手指点卡片会触发 :hover，transform:translate(-50%) 会把二维码拽到左边，
       卡片同时上抬）→ 改为点击弹出独立弹窗（2026-10-24） */
    .lx-page .lx-card--ewm { cursor: pointer; }
    .lx-page .lx-card--ewm .hint { display: none !important; }
    .lx-page .lx-card--ewm .ewm { display: none !important; }
    .lx-page .lx-card--ewm:hover,
    .lx-page .lx-card--ewm:focus,
    .lx-page .lx-card--ewm:focus-within {
        -webkit-transform: none;
        transform: none;
        border-color: #e3e8f2;
        box-shadow: none;
    }
    .lx-page .lx-card--ewm::after {
        content: "点击查看二维码";
        display: inline-block;
        margin-top: 9px;
        padding: 4px 10px;
        border-radius: 20px;
        background: #eef3fd;
        color: #3a76d2;
        font-size: 11.5px;
        line-height: 1.5;
    }
    .lx-cards { gap: 10px; }
    .lx-card {
        -ms-flex-preferred-size: calc(50% - 5px);
        -ms-flex: 0 0 calc(50% - 5px);
        flex: 0 0 calc(50% - 5px);
        padding: 17px 10px 15px;
        border-radius: 9px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .lx-card .ic { width: 40px; height: 40px; margin-bottom: 9px; }
    .lx-card .ic svg { width: 20px; height: 20px; }
    .lx-card b { font-size: 12px; letter-spacing: 1px; margin-bottom: 5px; }
    .lx-card strong { font-size: 15px; line-height: 1.35; }
    .lx-card i { margin-top: 7px; font-size: 11.5px; line-height: 1.6; }
    .lx-card .nav { margin-top: 9px; padding: 4px 10px; font-size: 11.5px; }
    .lx-card .nav svg { width: 12px; height: 12px; }
    /* 微信卡：两列里二维码收小，避免把整行撑高 */
    .lx-card--ewm .ewm { margin-top: 8px; padding: 5px; border-radius: 8px; }
    .lx-card--ewm .ewm img { width: 82px; height: 82px; }
}

/* 超窄屏（<=359，320 老机型）：两列里邮箱/导航胶囊仍要单行，避免单词被 break-all 撕断、胶囊变形 */
@media (max-width: 359px) {
    .lx-card strong { font-size: 12.5px; }
    .lx-card .nav { padding: 5px 8px; font-size: 10.5px; white-space: nowrap; }
    .lx-card .nav svg { width: 11px; height: 11px; margin-left: 2px; }
}

/* ==================== 微信二维码弹窗（移动端点击联系卡「微信咨询」打开 · 2026-10-24） ==================== */
body.lx-qr-open { overflow: hidden; }
.lx-qr { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99999; display: none; }
.lx-qr.is-open { display: block; }
.lx-qr__mask {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(6, 20, 46, .62);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.lx-qr__box {
    position: absolute; left: 50%; top: 50%;
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    width: 292px; max-width: calc(100vw - 48px);
    padding: 22px 20px 20px;
    background: #fff; border-radius: 16px; text-align: center;
    box-shadow: 0 18px 48px rgba(2, 55, 147, .3);
    -webkit-animation: lxqrIn .22s ease-out; animation: lxqrIn .22s ease-out;
}
@-webkit-keyframes lxqrIn { from { opacity: 0; -webkit-transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); } }
@keyframes lxqrIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.lx-qr__x {
    position: absolute; right: 6px; top: 6px;
    width: 36px; height: 36px; padding: 0; border: 0;
    background: none; color: #96a0b3; font-size: 18px; line-height: 36px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lx-qr__box h3 { margin: 0; font-size: 17px; font-weight: 700; color: #17233d; letter-spacing: 1px; }
.lx-qr__box p { margin: 7px 0 14px; font-size: 12.5px; color: #8b93a5; line-height: 1.6; }
.lx-qr__img { display: inline-block; padding: 8px; border: 1px solid #e3e8f2; border-radius: 12px; line-height: 0; }
.lx-qr__img img { display: block; width: 200px; height: 200px; }
.lx-qr__tip { display: block; margin-top: 12px; font-size: 11.5px; color: #a4adbf; }
@media (max-width: 359px) {
    .lx-qr__box { padding: 18px 16px 16px; }
    .lx-qr__img img { width: 168px; height: 168px; }
}