@charset "utf-8";
/**
 * 人才招聘页（page-zhaopin.php）专用样式 · 方案 A：岗位卡主栏 + 右侧联系人卡 · 2026-10-16
 * ------------------------------------------------------------------
 * 复用 bc-about.css 的 Banner / 吸顶胶囊条 / 区块标题 / 数据带 / 收尾横幅；
 * 本文件只新增：.jb-cols（两栏）、.jb-card（岗位卡）、.jb-contact（联系人卡）、.jb-flow（应聘流程）、.jb-tip（提示气泡）。
 * 配色/圆角/边框/字号沿用站内规范：#023793 / #f7c433 / #e6ebf3 / radius 8。
 */

/* ---------------- 两栏 ---------------- */
.jb-cols {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.jb-main { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.jb-side { -webkit-box-flex: 0; -ms-flex: 0 0 336px; flex: 0 0 336px; width: 336px; }

/* ---------------- 岗位卡 ---------------- */
.jb-card {
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    padding: 24px 26px 22px;
    margin-bottom: 20px;
    -webkit-transition: all .22s;
    transition: all .22s;
}
.jb-card:last-child { margin-bottom: 0; }
.jb-card:hover {
    border-color: #c9d9f2;
    -webkit-box-shadow: 0 8px 20px rgba(2, 55, 147, .09);
    box-shadow: 0 8px 20px rgba(2, 55, 147, .09);
}
.jb-hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-align-items: center;
    align-items: center;
    gap: 16px;
}
.jb-ic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 46px;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: #eaf1fc;
    border: 1px solid #d5e2f6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.jb-ic svg { width: 22px; height: 22px; fill: none; stroke: #023793; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jb-nm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-align-items: center; align-items: center; gap: 12px; }
.jb-nm h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: #17243c;
    letter-spacing: 1.5px;
}
.jb-nm .num {
    display: inline-block;
    font-size: 13px;
    line-height: 26px;
    padding: 0 13px;
    border-radius: 20px;
    background: #023793;
    color: #fff;
    letter-spacing: .5px;
    white-space: nowrap;
}
.jb-ops {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-align-items: center;
    align-items: center;
    gap: 10px;
}
.jb-ops a {
    display: inline-block;
    font-size: 13.5px;
    line-height: 38px;
    height: 38px;
    padding: 0 20px;
    border-radius: 6px;
    letter-spacing: .5px;
    white-space: nowrap;
    -webkit-transition: all .18s;
    transition: all .18s;
}
.jb-ops .pri { background: #023793; color: #fff; }
.jb-ops .pri:hover { background: #022a6e; }
.jb-ops .wx { border: 1px solid #cdd6e3; color: #4c5b73; }
.jb-ops .wx:hover { border-color: #023793; color: #023793; }
.jb-ops .msg { color: #7d8999; padding: 0 6px; }
.jb-ops .msg:hover { color: #023793; }
.jb-tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed #eef2f7;
}
.jb-tags i {
    font-style: normal;
    font-size: 13px;
    color: #5a6a85;
    background: #f4f7fb;
    border: 1px solid #e3eaf5;
    border-radius: 4px;
    padding: 6px 13px;
    letter-spacing: .3px;
}

/* ---------------- 右侧联系人卡 ---------------- */
.jb-contact {
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    padding: 20px 22px 22px;
    position: -webkit-sticky;
    position: sticky;
    top: 116px;
}
.jb-contact .ct-hd {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    color: #17243c;
    letter-spacing: 1px;
    padding-bottom: 11px;
    border-bottom: 1px solid #eef2f7;
}
.jb-contact .ct-hd span {
    float: right;
    font-size: 10.5px;
    font-weight: 400;
    color: #b6bfcd;
    letter-spacing: 2px;
    line-height: 22px;
}
.ct-list { margin-top: 4px; }
.ct-list li {
    padding: 13px 0;
    border-bottom: 1px dashed #eef2f7;
}
.ct-list li b {
    display: inline-block;
    min-width: 62px;
    font-size: 14.5px;
    color: #17243c;
    letter-spacing: .5px;
}
.ct-list li a {
    font-size: 16px;
    font-weight: 600;
    color: #023793;
    letter-spacing: .5px;
}
.ct-list li a:hover { color: #022a6e; }
.ct-list li em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 12px;
    color: #98a4b4;
    padding-left: 62px;
}
.ct-addr {
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.9;
    color: #7d8999;
}
.ct-addr span {
    display: inline-block;
    margin-right: 8px;
    font-size: 11.5px;
    color: #023793;
    background: #eaf1fc;
    border-radius: 3px;
    padding: 1px 8px;
}
.ct-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.ct-btns a {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center;
    font-size: 14px;
    line-height: 42px;
    height: 42px;
    border-radius: 6px;
    -webkit-transition: all .18s;
    transition: all .18s;
}
.ct-btns .ask { background: #023793; color: #fff; }
.ct-btns .ask:hover { background: #022a6e; }
.ct-btns .tel { border: 1px solid #cdd6e3; color: #4c5b73; }
.ct-btns .tel:hover { border-color: #023793; color: #023793; }

/* ---------------- 应聘流程 ---------------- */
.jb-flow {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(var(--jb-n, 4), minmax(0, 1fr));
    gap: 20px;
    counter-reset: none;
    /* 重置 ol 浏览器默认 padding-left:40px / 标记（2026-10-24）——
       不重置会导致整块卡片右移，左侧空出 40px、右侧贴边 */
    margin: 0;
    padding: 0;
    list-style: none;
}
.jb-flow li {
    position: relative;
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    padding: 22px 22px 20px;
    -webkit-transition: all .22s;
    transition: all .22s;
}
.jb-flow li:hover {
    border-color: #c9d9f2;
    -webkit-box-shadow: 0 8px 18px rgba(2, 55, 147, .08);
    box-shadow: 0 8px 18px rgba(2, 55, 147, .08);
}
.jb-flow li:after {
    content: "";
    position: absolute;
    right: -13px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: 2px solid #cdd6e3;
    border-right: 2px solid #cdd6e3;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.jb-flow li:last-child:after { display: none; }
.jb-flow li b {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #dbe4f2;
    letter-spacing: 1px;
}
.jb-flow li h4 {
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #17243c;
    letter-spacing: .5px;
}
.jb-flow li p {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: #7d8999;
}

/* ---------------- 复制提示气泡 ---------------- */
.jb-tip {
    position: fixed;
    left: 50%;
    bottom: 60px;
    z-index: 1000000;   /* 高于右侧 53kf 浮窗（z 999999） */
    -webkit-transform: translateX(-50%) translateY(14px);
    -ms-transform: translateX(-50%) translateY(14px);
    transform: translateX(-50%) translateY(14px);
    background: #023793;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    padding: 14px 24px;
    border-radius: 8px;
    -webkit-box-shadow: 0 12px 30px rgba(2, 32, 86, .3);
    box-shadow: 0 12px 30px rgba(2, 32, 86, .3);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .25s;
    transition: all .25s;
    text-align: center;
    max-width: 88vw;
}
.jb-tip.on {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(-50%) translateY(0);
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
}
.jb-tip b { color: #f7c433; letter-spacing: 1px; }
.jb-tip span { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .72); }

/* ---------------- 响应式 ---------------- */
@media screen and (max-width: 1024px) {
    .jb-cols { gap: 22px; }
    .jb-side { -webkit-box-flex: 0; -ms-flex: 0 0 300px; flex: 0 0 300px; width: 300px; }
    .jb-flow { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .jb-flow li:nth-child(2):after { display: none; }
}

@media screen and (max-width: 767px) {
    .jb-cols {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 18px;
    }
    .jb-side { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; }
    .jb-contact { position: static; }
    .jb-card { padding: 16px 16px 15px; border-radius: 7px; margin-bottom: 14px; }
    .jb-hd { -webkit-box-align: start; -ms-align-items: flex-start; align-items: flex-start; gap: 12px; }
    .jb-ic { -webkit-box-flex: 0; -ms-flex: 0 0 38px; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 8px; }
    .jb-ic svg { width: 19px; height: 19px; }
    .jb-nm { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-align-items: flex-start; align-items: flex-start; gap: 6px; }
    .jb-nm h3 { font-size: 16.5px; letter-spacing: 1px; }
    .jb-nm .num { font-size: 12px; line-height: 23px; padding: 0 11px; }
    .jb-ops {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        margin-left: 0;
        margin-top: 14px;
    }
    .jb-hd { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .jb-ops a { font-size: 13px; height: 36px; line-height: 36px; padding: 0 14px; }
    .jb-ops .msg { padding: 0 4px; }
    .jb-tags { margin-top: 14px; padding-top: 14px; gap: 6px; }
    .jb-tags i { font-size: 12px; padding: 5px 10px; }
    .jb-contact { padding: 16px 16px 17px; border-radius: 7px; }
    .ct-list li b { min-width: 58px; font-size: 14px; }
    .ct-list li a { font-size: 15px; }
    .ct-list li em { padding-left: 58px; }
    /* 应聘流程：4 步由竖排单列改为「两排 ×2」（2026-10-24）——
       网格列数由模板内联 --jb-n 提供，此前内联 grid-template-columns 直接压死了断点，手机端仍是 4 列窄条 */
    .jb-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .jb-flow li { padding: 14px 13px 13px; border-radius: 7px; }
    .jb-flow li:after { display: none; }
    .jb-flow li b {                        /* 编号挪到右上角做水印，标题独占整行 */
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 15px;
        line-height: 1;
        letter-spacing: 0;
    }
    .jb-flow li h4 { font-size: 14px; margin-top: 0; padding-right: 24px; letter-spacing: 0; }
    .jb-flow li p { margin-top: 7px; font-size: 12px; line-height: 1.7; }
}

/* ---------------- 列表页：岗位名链接 + 查看详情按钮（2026-10-16 岗位详情内页） ---------------- */
.jb-nm h3 a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: color .18s;
    transition: color .18s;
}
.jb-nm h3 a:hover { color: #023793; }
.jb-ops .more {
    color: #023793;
    padding: 0 6px;
    font-weight: 600;
}
.jb-ops .more u { font-style: normal; }
.jb-ops .more u::after { content: '\203A'; margin-left: 4px; font-size: 15px; }
.jb-ops .more:hover { text-decoration: underline; }

/* ---------------- 详情页：职责 / 要求 / 应聘方式（page-job.php） ---------------- */
.jd-main { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.jd-sec {
    margin-bottom: 18px;
    padding: 24px 26px 26px;
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 10px;
}
.jd-sec:last-child { margin-bottom: 0; }
.jd-hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-align-items: center;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #eef2f7;
}
.jd-hd .ic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #e8f1f8;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.jd-hd .ic svg { width: 20px; height: 20px; fill: none; stroke: #023793; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jd-hd h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #17243c;
    letter-spacing: 1px;
}
.jd-hd > span {
    margin-left: auto;
    font-size: 11px;
    color: #b7c2d2;
    letter-spacing: 2px;
    white-space: nowrap;
}
.jd-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.jd-list li {
    position: relative;
    margin-top: 12px;
    padding: 0 0 0 22px;
    font-size: 14.5px;
    line-height: 1.9;
    color: #44526b;
}
.jd-list li:first-child { margin-top: 0; }
.jd-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .8em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #f7c433;
}
.jd-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-align-items: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #eef2f7;
}
.jd-btns a {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    padding: 0 26px;
    border-radius: 6px;
    font-size: 14.5px;
    letter-spacing: .5px;
    text-decoration: none;
    -webkit-transition: all .18s;
    transition: all .18s;
}
.jd-btns .pri { background: #023793; color: #fff; }
.jd-btns .pri:hover { background: #022a6e; }
.jd-btns .wx { border: 1px solid #cdd6e3; color: #4c5b73; }
.jd-btns .wx:hover { border-color: #023793; color: #023793; }
.jd-btns .msg { padding: 0 6px; color: #7d8999; }
.jd-btns .msg:hover { color: #023793; }

/* ---------------- 详情页：其他在招岗位 ---------------- */
.jd-others {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.jd-other {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-align-items: center;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 10px;
    text-decoration: none;
    -webkit-transition: all .18s;
    transition: all .18s;
}
.jd-other:hover {
    border-color: #9db8d4;
    background: #fff;
    -webkit-box-shadow: 0 8px 22px rgba(2, 55, 147, .08);
    box-shadow: 0 8px 22px rgba(2, 55, 147, .08);
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}
.jd-other .nm {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16.5px;
    font-weight: 600;
    color: #17243c;
    letter-spacing: 1px;
}
.jd-other .nm i {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 14px;
    background: #e8f1f8;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0;
    color: #023793;
    vertical-align: 2px;
}
.jd-other .go { font-size: 13px; color: #7d8999; white-space: nowrap; }
.jd-other:hover .go { color: #023793; }

@media (max-width: 767px) {
    .jd-sec { padding: 18px 16px 20px; }
    .jd-list li { font-size: 13.5px; }
    .jd-btns { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .jd-others { grid-template-columns: 1fr; gap: 12px; }
}