@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 992px) {
}

@media screen and (max-width: 768px) {
    .wap_nav {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        z-index: 7777;
    }

    .wap_nav .logo {
        float: left;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .wap_nav .logo img {
        height: 24px;
        margin-top: 13px;
        margin-left: 10px;
    }

    body {
        padding-top: 50px;
    }

    .pc {
        display: none;
    }

    .wap {
        display: block;
    }

    /* ================= Header (Fixed) ================= */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(99 / 768 * 100vw);
        /* 假设高度 */
        background-color: rgba(0,0,0,0.8);
        /* 半透明黑底 */
        z-index: 1000;
    }

    .header-inner {
        width: calc(768 / 768 * 100vw);
        /* 核心内容宽度 */
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo img {
        height: calc(32/ 768 * 100vw);
    }

    .nav > ul {
        display: flex;
        gap: calc(60 / 768 * 100vw);
        margin-left: calc(150 / 768 * 100vw);
    }

    .nav > ul > li {
        position: relative;
    }

    .nav > ul > li:hover ul {
        visibility: visible;
        opacity: 1;
        z-index: 5;
        top: calc(22/ 768 * 100vw)
    }

    .nav > ul > li ul {
        position: absolute;
        width: 100%;
        padding: calc(10/ 768 * 100vw) 0;
        background: rgb(221 221 221 / 40%);
        left: 0;
        top: calc(30/ 768 * 100vw);
        width: 131%;
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        -webkit-transition: all 0.2s;
        -o-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        transition: all 0.2s;
    }

    .nav > ul > li ul li {
    }

    .nav > ul > li ul li a {
        display: block;
        line-height: 2;
        padding-left: calc(6/ 768 * 100vw);
        font-size: calc(14 / 768 * 100vw);
        color: #fff;
    }

    .nav a {
        color: #CACACA;
        font-size: calc(18 / 768 * 100vw);
        transition: 0.3s;
    }

    .nav > ul > li.active > a,.nav a:hover {
        color: #FF0038;
        /* 品牌红 */
    }

    .header-contact {
        display: flex;
        align-items: center;
        gap: calc(14 / 768 * 100vw);
        color: #CACACA;
        font-size: calc(30 / 768 * 100vw);
        font-weight: bold;
    }

    .icon-phone {
        width: calc(52/ 768 * 100vw);
    }

    .icon-phone img {
        width: 100%;
    }

    /* ================= Banner ================= */
    .banner img {
        width: 100%;
    }

    .banner {
        position: relative;
        width: 100%;
        /* 根据设计图目测高度 */
        overflow: hidden;
    }

    .banner-bg {
        width: 100%;
        height: 100%;
        background: url('images/banner.jpg') no-repeat center center;
        background-size: cover;
    }

    /* 黑色渐变遮罩，让文字更清晰 */
    .banner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 60%);
        z-index: 1;
    }

    .banner-content {
        position: absolute;
        top: 30%;
        /* 垂直位置 */
        left: calc(160 / 768 * 100vw);
        /* 左侧间距 */
        z-index: 2;
        color: #fff;
    }

    .sub-title {
        font-size: calc(48 / 768 * 100vw);
        font-weight: normal;
        margin-bottom: calc(20 / 768 * 100vw);
        opacity: 0.9;
    }

    .main-title {
        font-size: calc(60 / 768 * 100vw);
        font-weight: bold;
        margin-bottom: calc(20 / 768 * 100vw);
    }

    .desc {
        font-size: calc(20 / 768 * 100vw);
        color: #aaa;
        letter-spacing: calc(2 / 768 * 100vw);
    }

    .banner .swiper-pagination {
        bottom: calc(50 / 768 * 100vw);
        gap: calc(15 / 768 * 100vw);
        z-index: 3;
    }

    .banner .swiper-pagination * {
        width: calc(12 / 768 * 100vw);
        height: calc(12 / 768 * 100vw);
        border-radius: 50%;
        background: #fff;
        opacity: 0.5;
        cursor: pointer;
    }

    .banner .swiper-pagination *.swiper-pagination-bullet-active {
        background: #c30d23;
        opacity: 1;
    }

    /* ================= Stats Section ================= */
    .stats-section {
        background-color: #000;
        padding: calc(132 / 768 * 100vw) 0;
        color: #fff;
        padding-bottom: calc(100/ 768 * 100vw);
    }

    .stats-header {
        text-align: center;
        margin-bottom: calc(88 / 768 * 100vw);
    }

    .stats-header h2 {
        font-size: calc(42/ 768 * 100vw);
        font-weight: normal;
        color: #CACACA;
    }

    .stats-grid {
        width: calc(768 / 768 * 100vw);
        /* 与头部对齐 */
        margin: 0 auto;
        padding: 0px 5vw;
    }

    .stats-row {
        display: flex;
        justify-content: space-between;
        border: 1px solid #2e2e2e;
        border-left: none;
        border-right: none;
        display: block;
        zoom: 1;
        overflow: hidden;
    }

    .stats-item {
        width: 50% !important;
        /* 四等分 */
        /* border-left:1px solid rgba(255,255,255,0.1);*/
        /* 竖线分割，可选 */
        /* padding-left:calc(30 / 768 * 100vw);*/
        padding-top: calc(32 / 768 * 100vw);
        padding-bottom: calc(32 / 768 * 100vw);
        float: left !important;
    }

    /* 去掉第一个的左边框 */
    .stats-item:first-child {
        border-left: none;
        padding-left: 0;
    }

    .stats-item .label {
        display: block;
        color: #CACACA;
        font-size: calc(21/ 768 * 100vw);
        margin-bottom: calc(20 / 768 * 100vw);
    }

    .number-box {
        display: flex;
        align-items: baseline;
        color: #CACACA;
    }

    .num {
        font-size: calc(44/ 768 * 100vw);
        /* 超大数字 */
        font-weight: bold;
        line-height: 1;
        font-family: Arial,sans-serif;
    }

    .unit {
        font-size: calc(20/ 768 * 100vw);
        margin-left: calc(10 / 768 * 100vw);
    }

    .stats-divider {
        width: 100%;
        height: 1px;
        background-color: rgba(255,255,255,0.2);
        margin: calc(60 / 768 * 100vw) 0;
        display: none;
    }

    /* ================= Certifications Section ================= */
    .cert-section {
        background-color: #000;
        /* 保持黑底 */
        /* padding-bottom:calc(50 / 768 * 100vw);*/
        color: #fff;
        position: relative;
    }

    .cert-inner {
        width: calc(768 / 768 * 100vw);
        /* 与上方内容对齐 */
        margin: 0 auto;
        padding: 0px 5vw;
    }

    .cert-header {
        text-align: center;
        margin-bottom: calc(70/ 768 * 100vw);
    }

    .cert-header h2 {
        font-size: calc(42/ 768 * 100vw);
        font-weight: normal;
        letter-spacing: calc(2 / 768 * 100vw);
        color: #CACACA;
    }

    /* 证书列表容器 */
    .cert-list.type {
        display: block;
    }

    .cert-list.type .cert-item {
        width: 100% !important;
    }

    .cert-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /* 两端对齐，自动计算间距 */
        row-gap: calc(30 / 768 * 100vw);
        /* 上下行间距 */
    }

    .cert-item {
        /* 默认样式，会被下方的 nth-child 覆盖 */
        box-sizing: border-box;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    /* 鼠标悬停微小放大效果，增加交互感 */
    .cert-item:hover {
        transform: translateY(calc(-10 / 768 * 100vw));
        z-index: 2;
        /* 防止放大被遮挡 */
    }

    /* --- 核心布局逻辑 --- */
    /* 前 4 个元素：一行放 4 个 */
    .cert-list .cert-item:nth-child(-n+4) {
        width: calc(24%);
        /* (100% / 4) 稍微留一点缝隙容错 */
        /* 或者精确计算间距：width:calc((100% - 3 * (20 / 768 * 100vw)) / 4);*/
    }

    /* 从第 5 个元素开始：一行放 5 个 */
    .cert-list .cert-item:nth-child(n+5) {
        width: calc(19%);
        /* (100% / 5) 稍微留一点缝隙容错 */
    }

    /* 图片容器 */
    .cert-img-box {
        width: 100%;
        /* 保持宽高比或让图片自适应 */
        /* 证书通常有白底，防透明图穿帮 */
        /* 模拟证书边框留白 */
        box-sizing: border-box;
        border: 1px solid #333;
        /* 暗色描边 */
    }

    .cert-img-box img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 底部细线 */
    .cert-bottom-line {
        width: calc(768 / 768 * 100vw);
        height: 1px;
        margin: auto;
        background-color: rgba(255,255,255,0.45);
        margin-top: calc(90 / 768 * 100vw);
    }

    /* ================= Case Studies Section ================= */
    .case-section {
        background-color: #000;
        padding-top: calc(100 / 768 * 100vw);
        color: #fff;
        position: relative;
    }

    .case-inner {
        width: calc(768 / 768 * 100vw);
        margin: 0 auto;
        padding: 0px 5vw;
    }

    .case-header {
        text-align: center;
        margin-bottom: calc(90 / 768 * 100vw);
    }

    .case-header h2 {
        font-size: calc(42/ 768 * 100vw);
        font-weight: normal;
        letter-spacing: calc(2 / 768 * 100vw);
        color: #CACACA;
    }

    /* 列表容器 */
    .case-list {
        display: flex;
        flex-wrap: wrap;
        /* 设置列间距：30px (根据设计图调整) */
        column-gap: calc(23/ 768 * 100vw);
        /* 设置行间距：50px */
        row-gap: calc(99/ 768 * 100vw);
    }

    .case-item {
        /* 计算宽度：(总宽100% - 2个间距) / 3列 */
        width: calc((100% - 1 * (30 / 768 * 100vw)) / 2);
    }

    .case-link {
        display: block;
        /* 用于hover整体变色或做交互 */
    }

    /* 图片容器：设置固定宽高比，防止图片尺寸不一导致布局错乱 */
    .case-img-box {
        width: 100%;
        /* 设置图片比例，比如 16:9， padding-bottom:56.25% */
        /* 根据设计图看起来像 530x300 左右，约等于 56% */
        height: calc(210 / 768 * 100vw);
        overflow: hidden;
        position: relative;
        margin-bottom: calc(20 / 768 * 100vw);
    }

    .case-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* 裁剪模式，填满容器 */
        transition: transform 0.5s ease;
    }

    /* 鼠标悬停图片放大效果 */
    .case-link:hover .case-img-box img {
        transform: scale(1.05);
    }

    .case-info {
        text-align: left;
    }

    .case-title {
        font-size: calc(23/ 768 * 100vw);
        font-weight: normal;
        color: #eee;
        margin-bottom: calc(8 / 768 * 100vw);
        /* 标题超出一行省略 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.3s;
    }

    /* 悬停时标题变红 */
    .case-link:hover .case-title {
        color: #c30d23;
    }

    .case-en {
        font-size: calc(18/ 768 * 100vw);
        color: #888;
        line-height: 1.4;
        /* 英文超出一行省略 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 查看更多按钮 */
    .case-more-box {
        text-align: center;
        margin-top: calc(80 / 768 * 100vw);
    }

    .btn-view-more {
        display: inline-block;
        font-size: calc(18 / 768 * 100vw);
        color: #ccc;
        transition: color 0.3s;
    }

    .btn-view-more:hover {
        color: #fff;
        text-decoration: underline;
        /* 可选：加下划线 */
    }

    /* 底部细线 */
    .case-bottom-line {
        width: calc(1800/ 768 * 100vw);
        height: 1px;
        background-color: rgba(255,255,255,0.25);
        margin: auto;
        margin-top: calc(60 / 768 * 100vw);
        max-width: 90%;
    }

    /* ================= Clients Section ================= */
    .clients-section {
        background-color: #000;
        padding-top: calc(100 / 768 * 100vw);
        /* padding-bottom:calc(100 / 768 * 100vw);*/
        color: #fff;
    }

    .clients-inner {
        width: calc(768 / 768 * 100vw);
        margin: 0 auto;
        padding: 0px 5vw;
    }

    .clients-header {
        text-align: center;
        margin-bottom: calc(60 / 768 * 100vw);
    }

    .clients-header h2 {
        font-size: calc(42 / 768 * 100vw);
        font-weight: normal;
        color: #CACACA;
        /* 浅灰色小标题 */
        margin-bottom: calc(10 / 768 * 100vw);
    }

    .clients-header p {
        font-size: calc(42/ 768 * 100vw);
        color: #CACACA;
        /* 大标题 */
        letter-spacing: calc(2 / 768 * 100vw);
    }

    /* 列表容器 */
    .clients-list {
        display: flex;
        flex-wrap: wrap;
        /* 自动换行 */
        width: 100%;
        /* 核心技巧：容器加 左边框 和 上边框 */
        box-sizing: border-box;
        border-top: 1px solid rgba(255,255,255,0.15);
    }

    .client-item:nth-child(6n) {
        border-right: none;
    }

    .client-item {
        /* 一行 6 个：100% / 6 = 16.6666% */
        width: 33.333%;
        height: calc(180 / 768 * 100vw);
        /* 固定高度，确保网格整齐 */
        /* 核心技巧：子项加 右边框 和 下边框 */
        border-right: 1px solid rgba(255,255,255,0.15);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    .client-item:hover {
        background-color: rgba(255,255,255,0.05);
        /* 悬停微亮背景 */
    }

    .client-logo-box {
        width: 80%;
        /* 图片宽度限制，留出呼吸空间 */
        height: 60%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 如果没有图片，文字居中样式 */
        color: #666;
        font-size: calc(14 / 768 * 100vw);
    }

    .client-logo-box img {
        max-width: 100%;
        max-height: 100%;
        display: block;
        /* 如果 Logo 原图是黑色的，可以用滤镜反转成白色 */
        /* filter:grayscale(100%) brightness(1000%);*/
        opacity: 0.9;
        transition: opacity 0.3s;
    }

    .client-item:hover img {
        opacity: 1;
    }

    /* ================= Footer Section ================= */
    .footer {
        background-color: #000;
        padding-top: calc(149/ 768 * 100vw);
        padding-bottom: calc(98/ 768 * 100vw);
        color: #999;
        /* 默认文字颜色为灰色 */
        /* border-top:1px solid rgba(255,255,255,0.1);*/
        /* 可选：顶部加一条微弱的分割线 */
    }

    .footer-inner {
        width: calc(768/ 768 * 100vw);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        /* 左右两端对齐 */
        align-items: flex-end;
        /* 底部对齐，让版权信息沉在下面 */
        padding: 0px 5vw;
        zoom: 1;
        overflow: hidden;
        display: block;
    }

    /* --- 左侧组合 --- */
    .footer-left {
        display: flex;
        align-items: center;
        /* 垂直居中对齐二维码和文字 */
        gap: calc(60/ 768 * 100vw);
        /* 二维码和文字的间距 */
    }

    /* 二维码容器 */
    .footer-qr {
        width: calc(180/ 768 * 100vw);
        height: calc(180/ 768 * 100vw);
        background-color: #fff;
        /* 白边 */
        box-sizing: border-box;
    }

    .footer-qr img {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* 联系文字信息 */
    .footer-contact {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .company-name {
        font-size: calc(32/ 768 * 100vw);
        color: #CACACA;
        /* 比正文稍亮 */
        font-weight: normal;
        margin-bottom: calc(18/ 768 * 100vw);
    }

    .contact-details p:last-child {
        color: #CACACA;
        font-size: calc(32/ 768 * 100vw);
        padding-top: calc(17/ 768 * 100vw);
    }

    .contact-details p {
        font-size: calc(21/ 768 * 100vw);
        line-height: 1.2;
        color: #ABABAB;
    }

    /* 邮箱字体稍微大一点，或者保持一致看设计图，这里单独给个类方便调整 */
    .email-text {
        font-size: calc(16 / 768 * 100vw);
        margin-top: calc(5 / 768 * 100vw);
        color: #aaa;
    }

    /* --- 右侧版权 --- */
    .footer-right p:nth-child(1) a {
        display: none !important;
    }

    .footer-right {
        text-align: right;
        font-size: calc(20/ 768 * 100vw);
        line-height: 1.2;
        color: #ABABAB;
        text-align: center;
        padding-bottom: calc(56/ 768 * 100vw);
        padding-top: 6vw;
        line-height: 2;
        padding-right: 0;
    }

    .footer-right a {
        color: #CACACA;
    }

    .footer-right a:hover {
        color: #fff;
    }

    
/* ================= Main Container ================= */
.main-container {
    background-color: #000;
    color: #fff;
    /* padding-top: calc(90 / 768 * 100vw); */
    /* 避开 Fixed Header */
    /* padding-bottom:calc(100 / 768 * 100vw);*/
}

/* 核心宽度控制类：1800px */
.inner-1800 {
    width: calc(1800 / 768 * 100vw);
    margin: 0 auto;
    padding: 0px 5vw;
}

/* ================= Breadcrumb (面包屑) ================= */
.breadcrumb a {
    color: inherit;
}

.breadcrumb {
    padding: calc(29/ 768 * 100vw) 0;
    color: #CACACA;
    font-size: calc(18 / 768 * 100vw);
    padding-bottom: calc(66/ 768 * 100vw);
    padding-left: 5vw;
    padding-right: 5vw;
}

/* ================= Category Section ================= */
.cate-section:last-child {
    margin-bottom: 0px;
}

.cate-section {
    /* margin-bottom:calc(40 / 768 * 100vw);*/
    border-bottom: 1px solid #808080;
    margin-bottom: calc(123/ 768 * 100vw);
}

.cate-header {
    text-align: center;
    margin-bottom: calc(103 / 768 * 100vw);
}

.cate-header h2 {
    font-size: calc(42/ 768 * 100vw);
    font-weight: normal;
    color: #CACACA;
    letter-spacing: calc(2 / 768 * 100vw);
}

/* ================= Case Grid (3列) ================= */
.cate-list {
    display: flex;
    /* 两端对齐，中间留空 */
    /* 1800px 宽度下放3个，每个大约 32% ~ 32.5% */
    flex-wrap: wrap;
    column-gap: calc(23 / 768 * 100vw);
    row-gap: calc(99 / 768 * 100vw);
    /* border-bottom:1px solid #808080;*/
    padding-bottom: calc(58/ 768 * 100vw);
}

.cate-item {
    /* 稍微留点缝隙 (100% - 32.5%*3) / 2 = 1.25% 间距 */
    width: calc((100% - 2 * (12 / 768 * 100vw)) / 2);
}

.cate-link {
    display: block;
    text-decoration: none;
}

/* 图片容器 */
.cate-img {
    width: 100%;
    /* 按照图示比例，大概是 16:8 左右，或者更扁 */
    height: calc(210/ 768 * 100vw);
    overflow: hidden;
    margin-bottom: calc(15 / 768 * 100vw);
}

.cate-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* 悬停放大 */
.cate-link:hover .cate-img img {
    transform: scale(1.05);
}

/* 文字信息 */
.cate-info h3 {
    font-size: calc(23/ 768 * 100vw);
    color: #CACACA;
    font-weight: normal;
    margin-bottom: calc(5 / 768 * 100vw);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.cate-info p {
    font-size: calc(18/ 768 * 100vw);
    /* 英文小一点 */
    color: #ABABAB;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 悬停标题变红 */
.cate-link:hover .cate-info h3 {
    color: #c30d23;
}

/* ================= Footer & Divider ================= */
.cate-footer {
    text-align: right;
    /* 靠右对齐 */
    /* margin-top:calc(20 / 768 * 100vw);*/
    /* margin-bottom:calc(40 / 768 * 100vw);*/
    padding-bottom: calc(30/ 768 * 100vw);
}

.btn-more-sm {
    font-size: calc(22/ 768 * 100vw);
    color: #999;
    transition: color 0.3s;
}

.btn-more-sm:hover {
    color: #fff;
}

.cate-divider {
    width: 100%;
    height: 1px;
    /* 极细的灰线 */
}

/* 最后一个板块去掉底线 */
.cate-section:last-child .cate-divider {
    display: none;
}

/* ================= Case Detail Page ================= */
.case-detail-page {
    background-color: #0d0d0d;
    /* 稍微深一点的黑 */
    padding-top: 0;
    /* 留出头部空间 */
    color: #fff;
}

/* --- Top Info Section --- */
.case-info-wrapper {
    display: block;
    justify-content: space-between;
    margin-bottom: calc(80 / 768 * 100vw);
}

/* 左侧信息块 */
.info-left {
    width: 100%;
}

.project-title {
    font-size: calc(48 / 768 * 100vw);
    font-weight: bold;
    margin-bottom: calc(60 / 768 * 100vw);
    line-height: 1.2;
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0 / 768 * 100vw);
}

.meta-item {
    width: 50%;
    /* 默认一行两个 */
    margin-bottom: calc(20 / 768 * 100vw);
}

.meta-item.full-width {
    width: 100%;
    /* 单独占一行 */
}

.meta-item .label {
    display: block;
    font-size: calc(24/ 768 * 100vw);
    color: #666;
    /* 灰色标签 */
    margin-bottom: calc(10 / 768 * 100vw);
}

.meta-item .value {
    display: block;
    font-size: calc(31/ 768 * 100vw);
    color: #ccc;
    line-height: 1.2;
}

/* 右侧简介块 */
.info-right {
    width: 100%;
    padding-top: 10vw;
    /* 稍微下沉一点对齐 */
}

.project-desc p {
    font-size: calc(24 / 768 * 100vw);
    line-height: 2;
    color: #ddd;
    margin-bottom: calc(30 / 768 * 100vw);
    text-align: justify;
    /* 两端对齐让文字块更方正 */
}

/* --- Content Gallery (核心图片网格) --- */
/* 使用 CSS Grid 实现复杂的拼贴效果 */
.gallery-grid {
    /* display:grid; */
    /* 定义两列，中间间距 20px */
    grid-template-columns: repeat(2,1fr);
    gap: calc(20 / 768 * 100vw);
}

.gallery-item {
    width: 100%;
    position: relative;
    /* 默认高度自适应，或者指定高度 */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 特殊布局处理（如果你想还原图中的大小不一） */
/* 其实最简单的做法是全部 50% 宽，让图片高度自己决定 */
/* 下面是一些辅助类，如果后台编辑器没办法排版，可以用 CSS 强行控制 */
/* 比如有些图片特别宽，想跨两列 (虽然设计图好像都是两列布局) */
.item-full {
    grid-column: span 2;
}

/* 如果是内容详情页直接输出图片，通常是一张张图堆叠 */
/* 为了让 CMS 内容区的图片也保持这种两列布局，可以给 .case-content img 设置样式 */
.case-content img {
    max-width: 100%;
    height: auto;
    /* margin-bottom:calc(20 / 768 * 100vw); */
}






/* ================= About Page Styles ================= */.about-page {/* background-color:#0d0d0d;*/ /* 纯黑背景 */    color:#fff;padding-top:calc(150 / 768 * 100vw);/* 顶部留白 */    /* padding-bottom:calc(100 / 768 * 100vw);*/}
/* --- 1. Intro Section --- */.about-intro {display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:calc(152/ 768 * 100vw);position: relative;display: block;}
.intro-left {width: 100%;}
.about-intro .main-title {font-size: calc(48 / 768 * 100vw);font-weight:normal;margin-bottom:calc(10 / 768 * 100vw);line-height:1.2;}
.about-intro .sub-title {font-size: calc(48/ 768 * 100vw);font-weight:normal;color:#CACACA;margin-bottom:calc(61/ 768 * 100vw);padding-right: 13vw;line-height: 1.2;}
.intro-desc p {max-width: 100%;/* 限制文字宽度，增加可读性 */width:calc(1809/ 768 * 100vw);font-family:Noto Sans SC;font-weight:400;font-size: calc(24/ 768 * 100vw);color:#CACACA;line-height: 1.65;}
/* CSS 绘制右上角大箭头 */.intro-right {width:20%;display:flex;justify-content:flex-end;position: absolute;right: 3vw;top: 0;}
.big-arrow-icon {width:calc(80 / 768 * 100vw);height:calc(80 / 768 * 100vw);/* 利用边框绘制 L 形 */    border-top:2px solid #fff;border-right:2px solid #fff;/* 绘制斜线 */    position:relative;transform:rotate(180deg);transform-origin:center center;}
.big-arrow-icon::after {content:'';position:absolute;top:0;right:0;width:126%;/* 斜线长度 */    height:1px;/* 斜线粗细 */    background-color:#fff;transform:rotate(-45deg);/* 旋转45度 */    transform-origin:top right;/* 以右上角为轴旋转 */}
/* --- 2. Culture Section (三列) --- */.about-culture {border-top:1px solid rgba(255,255,255,0.4);border-bottom:1px solid rgba(255,255,255,0.4);margin-bottom:calc(150/ 768 * 100vw);}
.culture-grid {display: block;height: auto;/* 固定高度 */}
.culture-item:nth-child(1) {padding-left:0px;}
.culture-item {flex: auto;/* 三等分 */border-right:1px solid rgba(255,255,255,0.4);/* 右侧分割线 */display:flex;flex-direction:column;/* justify-content:center;*/padding-top:calc(129 / 768 * 100vw);padding-left:calc(66 / 768 * 100vw);height: calc(400 / 768 * 100vw);height: auto;padding: 6vw 0vw !important;}
/* 去掉最后一个的右边框 */.culture-item:last-child {border-right:none;}
.culture-label {font-size:calc(42/ 768 * 100vw);color:#FF0038;/* 品牌红 */    font-weight:normal;line-height:1.2;}
.culture-text {font-size:calc(42/ 768 * 100vw);/* 大字体 */    color:#CACACA;line-height:1.2;}
/* --- 3. Map Section --- */.about-map {display: block;align-items:center;/* 垂直居中 */justify-content:space-between;position:relative;padding-bottom: 0;border-bottom:1px solid #646464;padding-top: 52vw;padding-bottom: 7vw;}
.map-info {width: 100%;padding-top:calc(50/ 768 * 100vw);}
.info-group:last-child {margin:0px;}
.info-group {margin-bottom:calc(114/ 768 * 100vw);position:relative;padding-left:calc(80 / 768 * 100vw);}
.group-title {display:flex;align-items:center;gap:calc(10 / 768 * 100vw);margin-bottom:calc(5 / 768 * 100vw);}
.red-pin {font-size:calc(24 / 768 * 100vw);color:#c30d23;width:calc(21 / 768 * 100vw);height:calc(30/ 768 * 100vw);background:url(../images/dot.png) no-repeat center center;background-size:100%;position:absolute;left:calc(30 / 768 * 100vw);top:0;}
.group-title h3 {font-size:calc(36/ 768 * 100vw);font-weight:bold;color:#CACACA;}
.group-sub {font-size:calc(18 / 768 * 100vw);color:#ABABAB;margin-bottom:calc(37/ 768 * 100vw);padding-top:calc(5/ 768 * 100vw);/* 对齐文字，避开图标 */}
.city-list {/* padding-left:calc(34 / 768 * 100vw);*/}
.city-list p {font-size:calc(30/ 768 * 100vw);color:#CACACA;margin-bottom:calc(6/ 768 * 100vw);line-height:1.2;}
.en-city {display:block;font-size:calc(18/ 768 * 100vw);color:#ABABAB;line-height:1.4;}
.map-image-box {width: 100%;position:absolute;right:0;top:0px;height: 54vw;}
.map-image-box img {width: 87%;height: 100%;display:block;opacity:0.8;/* 图片稍微暗一点 */object-fit: contain;position: absolute;top: 50%;left: 50%;-o-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
/* ================= Common Section Styles ================= *//* 复用之前的 inner-1800 和背景色 */.qual-section,.news-section {padding-top:calc(100/ 768 * 100vw);}
/* 标题样式：左中文，右英文 */.sec-header {display:flex;justify-content:space-between;align-items:baseline;/* 基线对齐 */    margin-bottom:calc(70 / 768 * 100vw);/* 标题下可能有细线，看设计图不明显，可加可不加 */}
.sec-header .zh-title {font-size:calc(42/ 768 * 100vw);color:#CACACA;font-weight:normal;}
.sec-header .en-title {font-size:calc(24/ 768 * 100vw);color:#ABABAB;text-transform:uppercase;}
.sec-divider {width:100%;height:1px;background-color:rgba(255,255,255,0.2);margin-top:calc(60 / 768 * 100vw);}
/* ================= Qualification List (4上 6下) ================= */.qual-list {display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:calc(20 / 768 * 100vw);/* 上下间距 */}
.qual-item {/* 默认样式 */    box-sizing:border-box;background:#fff;/* 证书通常有白底 */    padding:calc(5 / 768 * 100vw);/* 白边框 */    transition:transform 0.3s;}
.qual-item:hover {transform:translateY(-5px);}
/* --- 核心布局算法 --- *//* 前4个：一行4个 -> (100% - 3*间距) / 4 */.qual-list .qual-item:nth-child(-n+4) {width:24%;/* 简单写法，或者 calc((100% - 60px)/4) */}
/* 第5个及以后：一行6个 -> (100% - 5*间距) / 6 */.qual-list .qual-item:nth-child(n+5) {width:15.6%;/* 简单写法 */}
.qual-img img {width:100%;height:auto;display:block;}
/* ================= Industry News ================= */.news-list {display:flex;justify-content: inherit;gap:calc(30 / 768 * 100vw);flex-wrap: wrap;column-gap: calc(23 / 768 * 100vw);row-gap: calc(99 / 768 * 100vw);}
.news-item {width: calc((100% - 1 * (30 / 768 * 100vw)) / 2);/* 三等分 */}
.news-link {display:block;text-decoration:none;color:#fff;}
/* 新闻图片 */.news-img-box {width:100%;height: calc(210/ 768 * 100vw);background-color:#333;overflow:hidden;margin-bottom:calc(34 / 768 * 100vw);}
.news-img-box img {width:100%;height:100%;object-fit:cover;transition:transform 0.5s;}
.news-link:hover .news-img-box img {transform:scale(1.05);}
/* 红色标签行 */.news-tag-row {display:flex;justify-content:flex-end;/* 靠右对齐 */    margin-bottom:calc(40 / 768 * 100vw);}
.red-tag {color:#900011;/* 品牌红 */    font-size:calc(14 / 768 * 100vw);font-weight:bold;}
/* 标题与简介 */.news-title {font-size: calc(23/ 768 * 100vw);color:#CACACA;font-weight:normal;margin-bottom:calc(10 / 768 * 100vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.news-desc {font-size: calc(18/ 768 * 100vw);color:#888;line-height:1.6;/* 多行省略 (webkit) */display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;/* 显示2行 */overflow:hidden;}
/* 底部查看更多 */.news-footer {text-align:right;margin-top:calc(50 / 768 * 100vw);}
.btn-more-text {font-size: calc(22/ 768 * 100vw);color:#CACACA;transition:color 0.3s;}
.btn-more-text:hover {color:#fff;}




/* --- Header --- */
.news-header {
    text-align: center;
    margin-bottom: calc(0 / 768 * 100vw); /* 紧贴列表，因为列表自带上padding */
}

.news-header h1 {
    font-size: calc(48 / 768 * 100vw);
    font-weight: normal;
    color: #eee;
    margin-bottom: calc(20 / 768 * 100vw);
}

.news-header p {
    font-size: calc(22/ 768 * 100vw);
    color: #888;
    line-height: 1.8;
    margin-bottom: calc(60 / 768 * 100vw);
}

.news-list.type2 .news-item:after {
    content: "";
    position: absolute;
    width: calc(353 / 768 * 100vw);
    height: 1px;
    background: #fff;
    left: 0;
    bottom: 0;
    opacity: .2;
}
.news-page{
    padding-top: 0;
}





/* ================= News Detail Styles ================= */
.news-detail-page {
    /* background-color: #0d0d0d; */
    padding-top: calc(100/ 768 * 100vw);
    padding-bottom: 0;
    color: #fff;
}

/* --- Header --- */
.article-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: calc(94/ 768 * 100vw);
}

.article-title {
    font-size: calc(68 / 768 * 100vw);
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: calc(20 / 768 * 100vw);
    width: 80%; /* 防止标题太长撞到箭头 */
    color: #CACACA;
}

.article-meta {
    font-size: calc(24 / 768 * 100vw);
    color: #CACACA;
    display: flex;
    gap: calc(40 / 768 * 100vw);
}

/* 复用 About 页面的箭头样式，如果没有引入about.css，这里需要再写一遍 */



.header-left{
    
width: calc(983/ 768 * 100vw);
}

/* --- Intro (摘要) --- */
.article-intro {
    font-size: calc(24/ 768 * 100vw);
    color: #CACACA;
    line-height: 1.8;
    margin-bottom: calc(99/ 768 * 100vw);
    max-width: 100%;
}

.article-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin-bottom: 0;
}

/* --- Content (正文 - 核心样式) --- */
/* 这里专门针对编辑器生成的标签进行样式覆盖 */
.article-content {
    line-height: 1.8;
    font-size: calc(30/ 768 * 100vw);
    color: #CACACA;
}

/* 正文段落 */
.article-content p {
    margin-bottom: calc(34 / 768 * 100vw);
    text-align: justify; /* 两端对齐 */
}

/* 正文标题 (类似图中的 1.明亮的色彩) */
.article-content h1,
.article-content h2,
.article-content h3 {
    font-size: calc(48/ 768 * 100vw);
    font-weight: bold;
    color: #CACACA;
    margin-top: calc(60 / 768 * 100vw); /* 标题上方多留白 */
    margin-bottom: calc(20 / 768 * 100vw);
}

/* 正文图片 */
.article-content img {
    max-width: 100% !important; /* 强制图片宽度不超过容器 */
    height: auto !important;    /* 高度自适应 */
    display: block;
    margin: calc(40 / 768 * 100vw) 0; /* 图片上下间距 */
    /* 模拟设计图中的灰色占位背景 */
    background-color: #333;
    width: 100%;
}

/* --- Prev/Next (翻页) --- */
.article-nav {
    margin-top: calc(100 / 768 * 100vw);
    padding-top: calc(40 / 768 * 100vw);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    font-size: calc(16 / 768 * 100vw);
    color: #888;
}

.article-nav a {
    color: #fff;
    margin-left: 10px;
    transition: color 0.3s;
}
.article-nav a:hover {
    color: #c30d23;
}


}
