/* ========================================
   About.css - 关于金雷 Page Styles
   ======================================== */

/* ---------- Banner (#nyBan) ---------- */
/* “高度由内容决定、永不裁字”的通用规则在 style.css（#nyBan）；
   本页只需声明文字块的垂直锚点：中心落在 65vh（全站默认 72.5%），
   因为本页正文比其它内页长。 */
#nyBan {
    --nyban-anchor: 0.65;
}

/* 矮屏（1366×768、1600×800 这类笔记本）把锚点上移一点 + 收紧行距，
   让整段文字尽量落在首屏内；万一仍放不下，整段会自然增高，但绝不裁切。 */
@media screen and (max-height: 820px) {
    #nyBan { --nyban-anchor: 0.60; }
    #nyBan .p_miao { line-height: 1.7; }
    #nyBan .p_list.mt_50 { margin-top: 34px; }
    #nyBan .p_miao.mt_60 { margin-top: 38px; }
}

.p_list { color: #fff; }
.p_s { color: #fff; line-height: 1.2; }
.p_b { color: #fff; line-height: 1; }
.p_list { display: flex; }
.p_miao {
    color: #fff;
    line-height: 1.8;
    width: 86%;
    font-weight: normal; /* 显式去掉加粗（防止任何继承/默认加粗） */
    font-family: 'Alibaba-PuHuiTi-Regular', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; /* 普惠体 Regular，字形更细 */
}
.list_item { margin-right: 60px; }
.list_d { margin-left: 10px; }

/* ---------- 分子公司 (mkBox1) ---------- */
.mkBox1 {
    position: relative;
    width: 100%;
    height: 100%;
}
.mk_z { color: #fff; }
.mk_t { color: #fff; }
.mk_item {
    position: relative;
    width: 100%;
    transition: all 1s;
}
.mk_item img {
    width: 100%;
    height: 100%;
    height: 130px;
    object-fit: cover;
}
.mk_bt {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.mk_button {
    display: block;
    line-height: 50px;
    text-align: center;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
}
.mk_button:hover { background: #164F8F; }
.mk_button:hover .icon path { fill: #fff !important; }
.mk_f {
    color: #fff;
    padding: 0 34%;
    line-height: 100px;
}
.mk_left {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(22, 79, 143, .8);
    width: 160px;
    height: 100%;
    z-index: 5;
    display: flex;
    align-items: center;
}
/* 文字区左边界：必须恒定让出左侧蓝色竖栏（.mk_left）+ 16px 间距。
   ↓ 原实现靠 `.wh1600 { width:75%; margin:0 auto }` 居中——视口一窄，
     左右留白就小于 160px，文字被竖栏压住（1280 时 2px、1152 时 18px）。
     这里改成「左边距取 竖栏宽+16 与 居中余量 的较大值」，
     宽屏仍是原来的居中位置，窄屏则被钳在竖栏右侧，任何屏宽都不会重叠。 */
.mkBox1 .mk_bt .wh1600 {
    --mk_bar: 160px;                     /* 左侧竖栏宽度，随断点调整 */
    --mk_gutter: calc(var(--mk_bar) + 16px);
    width: auto !important;
    max-width: 1440px;
    margin-left: max(var(--mk_gutter), calc((100% - 1440px) / 2)) !important;
    margin-right: max(var(--mk_gutter), calc((100% - 1440px) / 2)) !important;
    box-sizing: border-box;
}

.mk_item .mk_btn { display: none; }
.mk_item .mk_z { display: none; }
.mk_item .mk_t { font-size: 28px; }
.mk_active img {
    width: 100%;
    height: 100%;
    height: 430px;
    object-fit: cover;
}
.mk_active .mk_bt { padding: 118px 0 155px 0px; }
.mk_active .mk_btn { display: block; }
.mk_item .mk_t { margin-top: 0; line-height: 130px; }
.mk_active .mk_t { margin-top: 10px; line-height: normal; }
.mk_active .mk_btn { margin-top: 20px; }
.mk_active .mk_z { display: block; }
.mk_active .mk_t { font-size: 40px; }
.mk_mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 3;
}
.mk_active .mk_mask { display: none; }
.mk_active .mk_t { font-size: 30px; }

/* 子公司 badge */
.mk_badge {
    display: inline-block;
    background: #164F8F;
    color: #fff;
    font-size: 14px;
    padding: 2px 10px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
    line-height: 1.5;
}

/* ---------- 经营理念 (brandBox) ---------- */
.brandBox {
    position: relative;
    width: 100%;
    /* ↓↓↓ 模块高度（唯一控制参数）↓↓↓
       内置背景图 img/About/bg_img1.webp 为 1920×1080；
       宽屏下 1000px 高度几乎能完整呈现该图（仅上下各裁 ~36px），
       原值 800px 会裁掉上下各约 136px。 */
    height: 1000px;
    overflow: hidden;
}
.brandBox .brand_bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.brand_content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 80px;
    text-align: center;
}
.brand_title {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 20px;
}
.brand_subtitle {
    color: #fff;
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 40px;
}
.brand_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #164F8F;
    font-size: 18px;
    padding: 14px 36px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}
.brand_btn:hover {
    background: #e8f0f8;
    color: #164F8F;
}
.brand_btn svg {
    margin-left: 8px;
    width: 14px;
    height: 14px;
}
.brand_btn:hover svg path {
    fill: #fff;
}

/* ---------- 荣誉奖项 (honorBox) ---------- */
.honorBox {
    position: relative;
    width: 100%;
    overflow-x: clip; /* 裁掉荣誉墙轮播平铺溢出的远端部分，消除横向滚动条（保留两侧露边效果） */
}
.honorBox .honor_bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.honor_content {
    position: absolute;
    left: 0;
    top: 192px;
    width: 100%;
}
.honor_header {
    text-align: center;
    color: #222;
}
.honor_header_bottom {
    text-align: center;
    color: #222;
}
.honor_h_title {
    font-size: 42px;
    color: #222;
    font-weight: bold;
    margin-bottom: 28px;
}
.honor_h_sub {
    font-size: 32px;
    color: #222;
}
.honor_carousel {
    position: relative;
    margin-top: 140px;
    overflow: visible !important;
    width: 100%;
}
.honor_carousel .swiper-container {
    overflow: visible !important;
}
.honor_carousel .swiper-wrapper {
    overflow: visible !important;
}
.honor_carousel .swiper-slide {
    width: 12.5%; /* 随容器等比缩放：1440px 容器下 = 180px，窗口缩放时轮播图跟随变化 */
    height: auto;
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: 300ms;
    transform: scale(0.7);
    transform-origin: center bottom;
}
.honor_carousel .box_image {
    width: 100%;
}
.honor_carousel .box_image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: scale(1.8);
    transform-origin: center center;
}

/* Swiper navigation buttons */
.honor_prev,
.honor_next {
    position: absolute;
    top: 67%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s;
}
.honor_prev { left: 0; }
.honor_next { right: 0; }
.honor_prev svg,
.honor_next svg {
    width: 14px;
    height: auto;
    fill: #164F8F;
}
.honor_prev:hover,
.honor_next:hover {
    background-color: #164F8F;
}
.honor_prev:hover svg,
.honor_next:hover svg {
    fill: #fff;
}

/* Swiper container */
.honor_swiper {
    overflow: visible !important;
}

/* Pagination */
.honor_pagination {
    text-align: center;
    margin-top: 30px;
}
.honor_pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s;
}
.honor_pagination .swiper-pagination-bullet-active {
    background-color: #164F8F;
    width: 24px;
    border-radius: 5px;
}

/* ========================================
   Responsive Breakpoints
   ======================================== */

@media screen and (max-width: 1780px) {
    .wh1600 {
        width: 75% !important;
        margin: 0 auto !important;
    }
}

@media screen and (max-width: 1600px) {
    .wh1600 {
        width: 75% !important;
        margin: 0 auto !important;
    }
    .honor_prev { left: -30px; }
    .honor_next { right: -30px; }
    .brand_content { }
}

@media screen and (max-width: 1200px) {
    .brand_subtitle { font-size: 36px; }
    .honor_h_sub { font-size: 36px; }
}

@media screen and (max-width: 1024px) {
    .wh1600 {
        width: 60% !important;
    }
    .honor_content { top: 40px; }
    .honor_carousel { margin-top: 30px; }
    .honor_carousel .box_image img { height: 90%; }
    .brand_subtitle { font-size: 28px; }
    .brand_btn { font-size: 16px; padding: 10px 30px; }
    .honor_h_sub { font-size: 28px; }
}

@media screen and (max-width: 768px) {
    .p_miao { display: none; }
    .p_list { display: none; }
    .mk_left { width: 80px; }
    /* 竖栏变窄 → 文字区左边界同步收窄（右侧留 16px，避免行宽过窄导致换行） */
    .mkBox1 .mk_bt .wh1600 {
        --mk_bar: 80px;
        margin-left: 96px !important;
        margin-right: 16px !important;
    }
    .mk_active .mk_bt { padding: 30px 0; }
    .mk_item img { height: 80px; }
    .mk_item .mk_t { font-size: 20px; line-height: 80px; }
    .mk_active .mk_t { font-size: 20px; line-height: normal; white-space: nowrap; }
    .mk_active img { height: 180px; }
    .mk_button { width: 35px; height: 35px; line-height: 35px; }
    .wh1600 {
        width: 55% !important;
        margin: 0 auto !important;
    }

    .brand_subtitle { font-size: 22px; margin-bottom: 20px; }
    .brand_title { font-size: 16px; margin-bottom: 10px; }
    .brand_btn { font-size: 14px; padding: 8px 24px; }
    /* 手机上要看到整张照片：区块高度跟着图片比例走（1920×1080 → 16:9），
       不再用固定 800px + cover 把图裁成中间一条（原来只剩船的一部分）。
       文字也从"压在图上"改成"排在图片下方"的蓝色条：
       该图整体是中蓝色（实测底部 RGB≈32,118,169），白字直接压上去对比度太低。
       蓝条底色用户指定为 #1F74A7（rgb 31,116,167）。 */
    .brandBox {
        height: auto;
        overflow: visible;
    }

    .brand_bg {
        height: auto;
        object-fit: contain;
    }

    .brand_content {
        position: static;
        padding: 24px 0 28px;
        background: #1F74A7;
    }

    .honor_content { top: 30px; }
    .honor_h_sub { font-size: 22px; margin-top: 8px; }
    .honor_h_title { font-size: 16px; }
    .honor_carousel { margin-top: 20px; }
    .honor_carousel .swiper-slide { width: 45%; } /* 移动端放大单张，避免 12.5% 过小 */
    .honor_carousel .box_image { height: 200px; }
    .honor_carousel .box_image img { height: 80%; }
    .honorBox { min-height: 360px; }
    .honor_bg { min-height: 360px; }
    .honor_prev,
    .honor_next { display: none; }
    .honor_pagination { display: block; margin-top: 15px; }
}

@media screen and (max-width: 500px) {
    .brand_subtitle { font-size: 18px; }
    .brand_btn { font-size: 13px; padding: 6px 20px; }
    .honor_h_sub { font-size: 18px; }
}

/* 小屏手机：子公司全名在 360~400px 宽下会超出（≤768 段是 nowrap），
   这里缩小字号让它整行放得下，避免尾部被裁掉 */
@media screen and (max-width: 400px) {
    .mk_active .mk_t { font-size: 17px; }
}