* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.fl-left {
    float: left;
}

.fl-right {
    float: right;
}

.cl-clear {
    clear: both;
}

.display-ib {
    display: inline-block;
}



.banner-ai-new {
    width: 100%;
    height: 750px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        url(/images/2026s/ai-new/img-banner.jpg) no-repeat center center;
    background-size: 70px 70px, 70px 70px, cover;
    background-position: center, center, center;
    text-align: center;
}

.banner-ai-new h3 {
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    padding-top: 75px;
    margin-top: 0;
}

.banner-ai-new h1 {
    font-size: 48px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    margin-top: 14px;
}

.banner-ai-new ul.adv-banner-ai-new {
    display: inline-flex;
    /* 改用 flex，方便换行 */
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    text-align: center;
    margin-top: 55px;
    font-size: 0;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* 由 ul 统一提供左边 + 顶边 */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.banner-ai-new ul.adv-banner-ai-new li {
    width: 285px;
    font-size: 24px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    line-height: 60px;
    background: rgba(255, 255, 255, 0.04);

    /* 每个 li 只负责右边 + 底边 */
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    /* 去掉原来的负 margin */
}

.banner-ai-new ul li span {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    margin-left: 10px;
}

div.btn-group {
    display: inline-block;
    margin-top: 55px;
}

.btn-group button {
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    margin:0 30px;
    padding: 15px 60px;
}

button.red-btn-group {
    background: #d80e17;
    border: 0;
    color: #fff;
}

.btn-group button:hover {
    filter: brightness(1.2);  /* 1 是原色，1.2 亮 20% */
    transition: filter 0.2s;
}

.deta-banner-ai {
    width: 100%;
    height: 255px;
    margin-top: 77px;
    background: linear-gradient(45deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
    background-size: cover;
}

ul.inner-deta-banner-ai {
    display: inline-block;
    margin-top: 80px;
    border: 0;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

ul.inner-deta-banner-ai li{
    width: 285px;
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #fff;
    text-align: center;
}
ul.inner-deta-banner-ai li:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.num-deta-banner-ai {
    font-size: 40px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}
.num-deta-banner-ai span.innernum-deta {
    font-size: 18px;
    font-weight: normal;
    color: #d80e17;
    margin-left: 5px;
}

.sc-ai-new {
    width: 100%;
    height: auto;
    text-align: center;
    background: url(/images/2026s/ai-new/img-bg-sc.jpg) no-repeat center center;
    background-size: cover;
    padding: 60px 0 100px 0;
    margin: 0;
}

.sc-ai-new h3 {
    font-size: 14px;
    font-weight: bold;
    color: #d80e17;
    text-align: center;
    margin: 0;
}
.sc-ai-new h2 {
    font-size: 40px;
    font-weight: normal;
    color: #333;
    margin: 10px 0;
}

.sc-ai-new p {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #333;
    margin: 40px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.sc-ai-new-list {
    width: 1600px;
    margin: 50px auto 0 auto;
    display: flex;
    gap: 20px;
}

.sc-ai-new-list li {
    flex: 1;
    height: auto;
    font-size: 24px;
    font-weight: normal;
    color: #333;
    text-align: left;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
}

.inner-sc-ai-new-list {
    width: 100%;
    margin: 0;
    padding: 30px 30px;
}
.sc-ai-new-list li p {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #333;
    margin: 20px 0 0 0;
}

.sc-ai-new-list li img {
    display: inline-block;
    border-radius: 0 0 10px 10px;
}


.ser-ai-new {
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #fff;
    background-size: cover;
    padding: 60px 0 100px 0;
    margin: 0;
}

.ser-ai-new h3 {
    font-size: 14px;
    font-weight: bold;
    color: #d80e17;
    text-align: center;
    margin: 0;
}
.ser-ai-new h2 {
    font-size: 40px;
    font-weight: normal;
    color: #333;
    margin: 10px 0;
}

.ser-ai-new p {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #333;
    margin: 40px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
h4.h4-ser-ai-new {
    margin: 5px 0 0 0;
}

.ser-ai-new-list {
    width: 1600px;
    margin: 50px auto 0 auto;
    display: flex;
    gap: 20px;
    color: #333;
}

.ser-ai-new-list li {
    flex: 1;
    height: auto;
    font-size: 24px;
    font-weight: normal;
    color: #fff;
    text-align: left;
    border-radius: 10px;
    overflow: hidden;
}
.inner-ser-ai-new-list {
    width: 470px;
    height: 365px;
    padding: 40px 50px;
    background: linear-gradient(120deg, #333, #7f352e);
}
.inner-ser-ai-new-list p {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #fff;
    margin: 30px 0 0 0;
}
.line-inner-ser {
    width: 100%;
    height: 1px;
    margin-top: 35px;
    background-color: rgba(255, 255, 255, 0.1);
}
.tag-inner-ser {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}
.tag-inner-ser li {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tag-inner-ser li:hover {
    filter: brightness(1.2);
    transition: filter 0.2s;
}

.process-ai-new {
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #f5f5f5;
    background-size: cover;
    padding: 60px 0 100px 0;
    margin: 0;
}

.process-ai-new h3 {
    font-size: 14px;
    font-weight: bold;
    color: #d80e17;
    text-align: center;
    margin: 0;
}
.process-ai-new h2 {
    font-size: 40px;
    font-weight: normal;
    color: #333;
    margin: 10px 0;
}

.process-ai-new p {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #333;
    margin: 40px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.process-ai-new-list {
    width: 1600px;
    padding: 0 20px;
    margin: 50px auto 0 auto;
    display: flex;
    gap: 180px;
    /* 新增以下两行 */
    position: relative; /* 作为背景直线绝对定位的“基准框” */
    z-index: 1;         /* 创建独立的层级上下文，防止直线跑到最底层大背景后面 */
}

/* --- 2. 核心：画出那条贯穿的直线 --- */
.process-ai-new-list::before {
    content: "";
    position: absolute;
    /* 高度定位：因为你的圆形 height 是 168px，一半就是 84px。这样线刚好穿过圆心 */
    top: 84px;          
    left: 20px;         /* 配合你容器的 padding: 0 20px，让线条从真正的两端开始 */
    right: 20px;        /* 限制线的右边距，使其不超出内容区 */
    height: 1px;        /* 直线的粗细，你可以改为 1px 或更粗 */
    background-color: #ddd; /* 直线的颜色，我用了和你边框一样的颜色，可按需修改 */
    /* 关键属性：将这条直线推到步骤元素的“后面” */
    z-index: -1;        
}

.process-ai-new-list li {
    flex: 1;
    height: auto;
    font-size: 40px;
    font-weight: normal;
    color: #d80e17;
    text-align: left;
    text-align: center;
}

.num-process-ai {
    height: 168px;
    border-radius: 168px;
    padding-top: 40px;
    background-color: #fff; /* 极其重要：正是这个白色背景挡住了背后的直线！ */
    text-align: center;
    position: relative; 
    margin-right: 5px; 
    margin-bottom: 5px; 
    
    /* 新增：明确告诉浏览器，圆圈必须在直线的上方 */
    z-index: 2;
}

/* --- 创建偏移的边框 --- */
.num-process-ai::after {
    /* 之前的代码... */
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    border: 1px solid #ddd;
    pointer-events: none;
    box-sizing: border-box;
    z-index: -1; /* 确保偏移边框也在圆圈内容层之下，但在直线之上或同层均可 */
}
.num-process-ai span {
    font-size: 14px;
    line-height: 40px;
    font-weight: normal;
    color: #666;
}


.process-ai-new-list li h4 {
    margin-top: 50px;
    color: #333;
}

.process-ai-new-list li h5 {
    margin-top: 0;
    color: #333;
    font-weight: normal;
}
li p.con-num-pro {
    color: #333;
    margin: 30px 0 0 0;
    text-align: justify;
}




.datepage-ai-new {
    width: 100%;
    height: 190px;
    background: url(../images/2026s/ai-new/img-bg-datepage.jpg) no-repeat center center;
    background-size: cover;
    background-color: #181818;
    display: flex;
    gap: 0;
    color: #333;
    margin: 0;
    padding: 55px 150px;
}
.datepage-ai-new li {
    padding: 12px 0;
    flex: 1;
    height: auto;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    border-right: 1px solid #333;
}

.datepage-ai-new li:last-child {
    border-right: none;
}

.datepage-ai-new li span {
    font-size: 40px;
    font-weight: normal;
    color: #fff;
}

.datepage-ai-new li span.red-datepage {
    color: #d80e17;
    font-size: 18px;
}

.why-ai-new {
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #f5f5f5;
    background-size: cover;
    padding: 60px 0 100px 0;
    margin: 0;
}
.why-ai-new h3 {
    font-size: 14px;
    font-weight: bold;
    color: #d80e17;
    text-align: center;
    margin: 0;
}
.why-ai-new h2 {
    font-size: 40px;
    font-weight: normal;
    color: #333;
    margin: 10px 0;
}
.why-ai-new p {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #333;
    margin: 40px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.why-ai-new-list {
    width: 1600px;
    margin: 50px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.why-ai-new-list li {
    width: calc(33.33% - 20px);
    height: auto;
    flex: 0 0 calc(33.33% - 20px);
    background-color: #fff;
    padding: 50px 0px;
    border-radius: 10px;
    border: 2px solid #eee;
    font-size: 40px;
    font-weight: normal;
    color: #d80e17;
    text-align: center;
}

.why-ai-new-list li:hover {
    border-top: 2px solid #d80e17;
    transition: all 0.3s ease-in-out;
}

.why-ai-new-list li h4 {
    font-size: 40px;
    font-weight: normal;
    margin: 0;
    color: #ccc;
}
.why-ai-new-list li h5 {
    margin-top: 30px;
    color: #333;
    font-weight: normal;
    font-weight: bold;
}
.why-ai-new-list li p {
    margin: 30px 0 0 0;
    color: #333;
    font-weight: normal;
}
.why-ai-new-list li h4 span {
    margin: 0;
    color: #d80e17;
}

.case-ai-new {
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #fff;
    background-size: cover;
    padding: 60px 0 100px 0;
    margin: 0;
}

.case-ai-new h3 {
    font-size: 14px;
    font-weight: bold;
    color: #d80e17;
    text-align: center;
    margin: 0;
}

.case-ai-new h2 {
    font-size: 40px;
    font-weight: normal;
    color: #333;
    margin: 10px 0;
}
.case-ai-new p {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #333;
    margin: 40px 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.case-ai-new-list {
    width: 1600px;
    margin: 50px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.case-ai-new-list li {
    width: calc(50% - 20px);
    height: auto;
    flex: 0 0 calc(50% - 20px);
    background-color: #fff;
    border-radius: 10px;
    font-size: 40px;
    font-weight: normal;
    color: #d80e17;
    text-align: center;
}

.case-ai-new-content {
    padding: 50px 50px;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-radius: 0 0 10px 10px;
}
.case-ai-new-img{
    position: relative;
    width: 100%;
    height: 280px;
    border-radius: 10px 10px 0 0;
}
.case-ai-new-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}
.inner-case-ai-new-img {
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
    padding: 230px 50px 0 50px;
}

.inner-case-ai-new-img {
    font-weight: normal;
    color: #fff;
}

.inner-case-ai-new-img h5 {
    font-weight: normal;
    margin-top: 12px;
    font-size: 14px;
}
.case-ai-new-content p {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    color: #333;
    margin: 0;
}
p.rev-case-ai-new {
    width: 100%;
    height: auto;
    padding: 20px 0;
    background: #f5f5f5;
    border-left: 2px solid #d80e17;
    margin-top: 30px;
    font-style: italic;
    color: #999;
}

.contact-ai-new {
    width: 100%;
    height: auto;
    background-color: #181818;
    background-size: cover;
    padding: 60px 0;
    margin: 0;
}
.inner-contact-ai {
    width: 1600px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}

.inner-contact-ai p {
    font-size: 20px;
    line-height: 40px;
    font-weight: normal;
    color: #fff;
    margin: 0;
}
.inner-contact-ai p.title-contact {
    font-size: 40px;
    line-height: 60px;
    font-weight: normal;
}
.cont-inner-contact {
    width: 50%;
    height: auto;
}
/* 将 a 和 button 放在一起写，保持样式完全一致 */
.contact-ai-new-btn a,
.contact-ai-new-btn button {
    display: inline-block;
    font-size: 20px;
    line-height: 40px;
    font-weight: normal;
    color: #fff;
    padding: 15px 70px;
    border: 1px solid #333;
    margin: 12px 0 0 20px;
    border-radius: 0;
    text-decoration: none; /* 确保链接没有下划线 */
    
    /* 针对 button 新增的重置样式 */
    background: transparent; /* 去除按钮默认背景 */
    cursor: pointer;         /* 鼠标放上去显示小手图标 */
    outline: none;           /* 去除点击时的轮廓线 */
}

a.red-contact-ai-new-btn {
    background-color: #d80e17;
    border: 1px solid #d80e17;
}

/* 悬浮效果同时应用于两者 */
.contact-ai-new-btn a:hover,
.contact-ai-new-btn button:hover {
    filter: brightness(1.2);  
    transition: filter 0.2s;
}

/* ========================================================
   移动端与平板响应式适配 (Responsive Design)
   注意：必须放在 CSS 文件的最底部！
======================================================== */

/* --- 1. 基础容器流式改造：打破 1600px 的硬限制 --- */
.sc-ai-new-list, 
.ser-ai-new-list, 
.process-ai-new-list, 
.why-ai-new-list, 
.case-ai-new-list, 
.inner-contact-ai {
    width: 100% !important; /* 强制覆盖前面的固定宽度 */
    max-width: 1600px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box; /* 确保内边距不会撑破屏幕 */
}

/* --- 2. 平板端适配 (屏幕宽度小于等于 1440px 时生效) --- */
@media screen and (max-width: 1440px) {
    /* 缩小各个模块块之间的间距，让内容更紧凑 */
    .sc-ai-new-list, .why-ai-new-list, .case-ai-new-list {
        gap: 20px;
        flex-wrap: wrap; /* 允许换行 */
    }
    
    /* 合作流程：缩小横向间距 */
    .process-ai-new-list { gap: 40px; }
    
    /* 顶部 Banner 区微调 */
    .banner-ai-new h1 { font-size: 38px; }
    .banner-ai-new ul.adv-banner-ai-new li { width: 220px; font-size: 20px; }
    
    /* Why Us 区域：从一行3个变成一行2个 */
    .why-ai-new-list li {
        width: calc(50% - 15px);
        flex: 0 0 calc(50% - 15px);
    }
    
    /* 服务模式：调整左图右文的比例 */
    .ser-ai-new-list li img { width: 40%; height: auto; }
    .inner-ser-ai-new-list { width: 60%; height: auto; padding: 30px; }
}

/* --- 3. 手机端与小尺寸平板适配 (屏幕宽度小于等于 1000px 时生效) --- */
@media screen and (max-width: 1000px) {
    /* 全局标题和文字缩小，防止在手机上显得太突兀 */
    h2 { font-size: 28px !important; }
    p { font-size: 14px; padding: 0 10px; }
    
    /* 首屏 Banner 区：高度自适应，数据换行 */
    .banner-ai-new { height: auto; padding-bottom: 60px; }
    .banner-ai-new h1 { font-size: 28px; line-height: 40px; padding: 0 15px; }
    .banner-ai-new ul.adv-banner-ai-new li { width: 50%; border-right: none; }
    
    /* Banner 按钮：垂直排列 */
    div.btn-group { display: flex; flex-direction: column; gap: 15px; width: 80%; margin: 40px auto 0; }
    .btn-group button { margin: 0; width: 100%; }

    /* 黑底数据横幅区：一行两个 */
    .deta-banner-ai { height: auto; padding-bottom: 40px; }
    ul.inner-deta-banner-ai { margin-top: 40px; display: flex; flex-wrap: wrap; }
    ul.inner-deta-banner-ai li { width: 50%; margin-bottom: 30px; border-right: none !important; }

    /* 核心改造：所有原本横向排列的列表，全部改为垂直堆叠 (上下结构) */
    .sc-ai-new-list, 
    .ser-ai-new-list, 
    .process-ai-new-list, 
    .why-ai-new-list, 
    .case-ai-new-list {
        flex-direction: column; /* 把 Flex 盒子从横向变成纵向 */
        gap: 30px;
    }
    
    /* Why Us & 案例区域：变成一行一个，填满屏幕宽度 */
    .why-ai-new-list li, .case-ai-new-list li {
        width: 100%;
        flex: 0 0 100%;
    }
    
    /* 服务模式：图片在上面，文字在下面 */
    .ser-ai-new-list li img { width: 100%; display: block; float: none; border-radius: 10px 10px 0 0; }
    .inner-ser-ai-new-list { width: 100%; display: block; float: none; height: auto; padding: 30px; border-radius: 0 0 10px 10px; }
    
    /* 合作流程：隐藏贯穿的背景直线，让圆形居中 */
    .process-ai-new-list::before { display: none; } /* 手机上直线容易穿帮，直接隐藏最优雅 */
    .num-process-ai { margin: 0 auto 20px auto; }
    .process-ai-new-list li p { text-align: center !important; }
    
    /* 黑底数据块：变成上下堆叠 */
    .datepage-ai-new { flex-direction: column; height: auto; padding: 40px 20px; }
    .datepage-ai-new li { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 20px 0; }
    .datepage-ai-new li:last-child { border-bottom: none; }
    
    /* 底部联系我们：文字居中，按钮撑满 */
    .cont-inner-contact { width: 100%; text-align: center; float: none; }
    .contact-ai-new-btn { width: 100%; text-align: center; float: none; height: auto; margin-top: 30px; }
    .contact-ai-new-btn button { display: block; width: 100%; margin: 15px 0 0 0; }
}


/* ========================================================
   修复：“两种交付模式” 浮动错位问题 (使用 Flexbox 升级)
======================================================== */

/* 1. 将列表项改为 Flex 容器，强制子元素并排 */
.ser-ai-new-list li {
    display: flex !important; 
    align-items: stretch; /* 让左边图片和右边文字框始终等高 */
}

/* 2. 改造图片：按比例自适应，取消浮动 */
.ser-ai-new-list li img {
    width: 40% !important;    /* 覆盖 HTML 中写死的 320px */
    height: auto !important;  /* 覆盖 HTML 中写死的 365px */
    object-fit: cover;        /* 保证图片按比例缩放不拉伸 */
    float: none !important;   /* 彻底清除左浮动 */
}

/* 3. 改造文字框：按比例自适应，取消浮动 */
.inner-ser-ai-new-list {
    width: 60% !important;    /* 覆盖原本写死的 470px */
    height: auto !important;
    float: none !important;   /* 彻底清除右浮动 */
    
    /* 让内部的文字无论高度怎么变化，都保持垂直居中，视觉更美观 */
    display: flex;
    flex-direction: column;
    justify-content: center;  
}

/* 4. 确保在手机端 (小于 1000px) 时，它们能正确变成上下堆叠 */
@media screen and (max-width: 1000px) {
    .ser-ai-new-list li {
        flex-direction: column !important; /* 手机上改为纵向排列 */
    }
    .ser-ai-new-list li img,
    .inner-ser-ai-new-list {
        width: 100% !important; /* 手机上各自撑满整行 */
    }
}

/* ========================================================
   修复：“AI应用场景” 卡片文字高度不同导致图片无法底部对齐
======================================================== */

/* 1. 把卡片本身也变成一个“纵向”的弹性盒子 */
.sc-ai-new-list li {
    display: flex !important;
    flex-direction: column; /* 内部元素从上到下排列 */
}

/* 2. 核心魔法：让文字容器变成海绵，吸收所有多余空间 */
.inner-sc-ai-new-list {
    flex: 1; /* 贪婪模式：我不管别人，剩下的空间全归我 */
}

/* 3. 图片双重保险优化 */
.sc-ai-new-list li img {
    margin-top: auto; /* 强制将图片推到最底部 */
    display: block;   /* 消除 HTML img 标签自带的底部几像素“幽灵空白间隙” */
}


/* ========================================================
   修复升级：“两种交付模式” 文本高度差异导致的底部不对齐
======================================================== */

/* 1. 确保包含这两张卡片的大外框强制等高 */
.ser-ai-new-list {
    align-items: stretch !important;
}

/* 2. 取消之前的整体垂直居中，改为从上往下自然排列 */
.inner-ser-ai-new-list {
    justify-content: flex-start !important; 
}

/* 3. 终极排版魔法：利用 auto 的上边距，将横线和下方的标签强行推到最底部 */
.inner-ser-ai-new-list .line-inner-ser {
    margin-top: auto !important; 
}
/* ========================================================
   修复：确保文本和下方横线之间永远保持最小安全距离
======================================================== */
.inner-ser-ai-new-list p {
    /* 强制在文字下方保留至少 40px 的空白，防止横线被挤压贴紧文字 */
    margin-bottom: 40px !important; 
}

/* ========================================================
   修复：“客户案例” 文字高度不一致导致底部引用框不对齐
======================================================== */

/* 1. 让卡片本身成为纵向排列的 Flex 盒子 */
.case-ai-new-list li {
    display: flex !important;
    flex-direction: column;
}

/* 2. 让文字内容区域自动撑满剩余高度，并成为 Flex 容器 */
.case-ai-new-content {
    flex: 1; /* 占据卡片剩下的所有高度 */
    display: flex;
    flex-direction: column;
}

/* 3. 终极推力：利用 auto 外边距，把灰色的引用框狠狠推到最底部 */
p.rev-case-ai-new {
    margin-top: auto !important; 
}

/* ========================================================
   修复：确保“客户案例”的正文与底部灰色引用框之间保持安全距离
======================================================== */
.case-ai-new-content p:not(.rev-case-ai-new) {
    /* 给普通的正文段落底部加上“安全气囊”，防止弹簧被压到0 */
    margin-bottom: 40px !important; 
}


/* ========================================================
   修复：“客户案例” 底部灰色引用框高度不统一的问题
======================================================== */
p.rev-case-ai-new {
    /* 1. 设定一个统一的“保底高度”，以字数最多的那张卡片为准 */
    /* (我预估 130px 刚好能包住 3 行字，如果不够你可以改为 140px) */
    min-height: 130px; 
    
    /* 2. 施展居中魔法：让灰色框内部也变成 Flex 容器 */
    display: flex !important;
    flex-direction: column;
    justify-content: center; /* 让 2 行字的卡片，文字自动上下居中，不留大块空白 */
}

/* ========================================================
   修复：缩放浏览器时“合作流程”的圆形图标被挤压变形
======================================================== */
.num-process-ai {
    width: 168px !important;    /* 核心1：强制设定固定宽度，使其始终与 168px 的高度保持一致 */
    margin: 0 auto 20px auto !important; /* 核心2：让固定大小的圆在变窄的 li 容器中始终保持水平居中 */
}

/* ========================================================
   修复：缩放浏览器时“合作流程”第5项消失（拆除固定硬间距）
======================================================== */

/* 1. 拆除原本 180px 的硬性间距，让 flex:1 自然分配空间 */
.process-ai-new-list {
    gap: 0 !important; 
}

/* 2. 给每个步骤卡片稍微加上一点左右内边距，防止极度压缩时底部文字互相粘连 */
.process-ai-new-list li {
    padding: 0 15px !important;
}


/* ========================================================
   修复：步骤横线两端露头 & 底部文字排版拥挤问题
======================================================== */

/* 1. 精准控制背景线：让线条两端永远刚好停在第1个和第5个圆心上 */
.process-ai-new-list::before {
    left: 10% !important;   /* 从左侧 10% 的位置开始（即第一个圆心） */
    right: 10% !important;  /* 在右侧 10% 的位置结束（即第五个圆心） */
}

/* 2. 拓宽列间距：加大左右内边距，给文字更多的留白呼吸空间 */
.process-ai-new-list li {
    padding: 0 35px !important; /* 从之前的 15px 加大到 35px，你可以根据喜好微调这个数值 */
}

/* ========================================================
   修复：首屏 Banner 区模块折行、边框丢失与黑底溢出问题
======================================================== */

/* --- 1. 修复高度溢出与背景分离 (解决图二、图三) --- */
.banner-ai-new {
    height: auto !important;     /* 允许大背景随内容自然撑高 */
    min-height: 750px;           /* 保持电脑端的初始大气高度 */
    padding-bottom: 0 !important; /* 确保黑底模块能完全贴紧最下边缘 */
}

.deta-banner-ai {
    height: auto !important;     /* 废除写死的 255px 高度，让折行文字撑开 */
    min-height: 255px;
    padding-bottom: 50px !important; /* 给折行后的下排文字留出底部安全空间 */
    margin-top: 80px !important; /* 保持与上方按钮的间距 */
}


/* --- 2. 屏幕缩小到 1200px 以下时，强制接管并执行 2x2 完美折行 --- */
@media screen and (max-width: 1200px) {
    
    /* 【修复图一、图二：顶部 4 个数据块的排版与边框】 */
    .banner-ai-new ul.adv-banner-ai-new {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 80% !important;       /* 控制整体宽度，居中显示 */
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .banner-ai-new ul.adv-banner-ai-new li {
        width: 50% !important;       /* 强制一行只放两个，形成 2x2 */
        flex: 0 0 50% !important;
        padding: 10px 0 !important;  /* 增加内边距让格子更饱满 */
        
        /* 恢复十字边框：给每个元素都加上右边和下边框，外框则由 ul 补齐 */
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    /* 【修复图二、图三：底部黑底 4 个数据块的排版】 */
    ul.inner-deta-banner-ai {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        margin-top: 50px !important;
    }

    ul.inner-deta-banner-ai li {
        width: 50% !important;       /* 同样强制 2x2 */
        flex: 0 0 50% !important;
        margin-bottom: 40px !important; /* 拉开上下两行的间距 */
    }

    /* 为底部数据块绘制完美的中线：单数个右边有线，双数个最靠边不需要线 */
    ul.inner-deta-banner-ai li:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    ul.inner-deta-banner-ai li:nth-child(even) {
        border-right: none !important; 
    }
}

/* --- 3. 手机屏幕微调 --- */
@media screen and (max-width: 768px) {
    .banner-ai-new ul.adv-banner-ai-new {
        width: 95% !important; /* 手机上放宽一点，防止文字挤压 */
    }
}

/* ========================================================
   终极修复：首屏黑底数据块包裹不全、文字溢出与错位问题
======================================================== */

/* 1. 外层大图背景：建立结界，强制包裹内部所有内容 */
.banner-ai-new {
    height: auto !important;
    min-height: auto !important;
    display: flow-root !important; 
    padding-bottom: 0 !important;
}

/* 2. 黑底渐变数据块：彻底解除高度封印，强制包裹文字，并垫上安全气囊 */
.deta-banner-ai {
    height: auto !important;
    min-height: auto !important;
    display: flow-root !important;   /* 核心：阻断外边距塌陷，强制背景色撑开 */
    padding-top: 50px !important;    /* 顶部留出黑底空间 */
    padding-bottom: 60px !important; /* 底部留出充足的黑底“安全气囊”，防止文字贴边 */
    margin-top: 60px !important;
    margin-bottom: 0 !important;
}

/* 3. 内部数据列表：去掉外边距，完全交由父元素的 padding 来控制背景大小 */
ul.inner-deta-banner-ai {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 4. 给每个具体的数据块稍微加一点内部底边距，让排版更舒展 */
ul.inner-deta-banner-ai li {
    padding-bottom: 15px !important;
}

/* ========================================================
   修复：恢复底部“免费预约咨询”按钮的红色主视觉（提升优先级）
======================================================== */
.contact-ai-new-btn button.red-contact-ai-new-btn {
    background-color: #d80e17 !important;  /* 强行覆盖透明背景 */
    border: 1px solid #d80e17 !important;  /* 强行覆盖黑色边框 */
    color: #fff !important;
}

/* 确保 hover 时依然有提亮效果 */
.contact-ai-new-btn button.red-contact-ai-new-btn:hover {
    filter: brightness(1.2);
    transition: filter 0.2s;
}