/* =================================客户案例页面,浅色科技工业风================================= */

/* ===============================Banner================================= */
.case-banner {
    height:500px;
    display:flex;
    align-items:center;
    background:
    linear-gradient(
        120deg,
        #ffffff 0%,
        #f3f8ff 55%,
        #eaf3ff 100%
    );
    color:#111827;
    position:relative;
    overflow:hidden;
}

.case-banner::after {
    content:"";
    position:absolute;
    right:80px;
    top:80px;
    width:260px;
    height:260px;
    background-image:
    linear-gradient(
        #dbeafe 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        #dbeafe 1px,
        transparent 1px
    );
    background-size:30px 30px;
    opacity:.8;
}

.banner-content {
    max-width:720px;
}

.banner-content span {
    display:block;
    font-size:14px;
    letter-spacing:6px;
    color:#006cff;
    margin-bottom:25px;
}

.banner-content h1 {
    font-size:52px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:25px;
}

.banner-content p {
    font-size:20px;
    line-height:1.8;
    color:#64748b;
}

/* ===============================项目案例================================= */

.case-project {
    padding:80px 0;
}

.project-item {
    display:flex;
    align-items:center;
    gap:80px;
    margin-bottom:130px;
}

.project-item.reverse {
    flex-direction:row-reverse;
}

.project-text {
    flex:1;
}

.number {
    font-size:80px;
    font-weight:800;
    color:#e5f0ff;
    line-height:1;
    margin-bottom:20px;
}

.project-text h3 {
    font-size:34px;
    line-height:1.5;
    font-weight:700;
    color:#111827;
    margin-bottom:25px;
}

.project-text p {
    font-size:17px;
    line-height:2;
    color:#64748b;
}

/* 项目成果 */

.project-result {
    display:flex;
    gap:60px;
    margin:35px 0;
}

.project-result div {
    display:flex;
    flex-direction:column;
}

.project-result strong {
    font-size:40px;
    color:#006cff;
    line-height:1;
}

.project-result span {
    margin-top:10px;
    color:#64748b;
}

.tag {
    display:inline-block;
    padding:8px 20px;
    border-radius:30px;
    background:#edf5ff;
    color:#006cff;
    font-size:14px;
}

/* 图片 */

.project-image {
    flex:1;
    overflow:hidden;
    border-radius:20px;
   box-shadow:
    0 20px 50px rgba(0,90,200,.12);
}

.project-image img {
    width:100%;
    height:420px;
    object-fit:cover;
    transition:.5s;
}

.project-image:hover img {
    transform:scale(1.05);
}


/* =============================== 数据成果 ================================= */

.case-data {
    padding:100px 0;
    background:white;
}

.data-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    text-align:center;
}

.data-grid strong {
    display:block;
    font-size:52px;
    font-weight:800;
    color:#006cff;
}

.data-grid p {
    margin-top:15px;
    color:#64748b;
    font-size:17px;
}


/* =============================== 响应式 ================================= */

@media(max-width:992px){
    .case-banner{
        height:360px;
    }
    .banner-content h1{
        font-size:38px;
    }
    .project-item,
    .project-item.reverse {
        flex-direction:column;
        gap:40px;
    }
    .project-image img {
        height:300px;
    }
    .data-grid {
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }
    .process-line {
        flex-direction:column;
        gap:30px;
    }

}