@charset "utf-8";
/* CSS Document */
/* 第一屏大图banner */
.case-banner {
    width:100%;
    height:690px;
    background:#444;
    background-size:cover;
    background-position:center;
    position:relative;
}
.banner-inner {
    width:1400px;
    margin:0 auto;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.banner-title {
    font-size:40px;
    color:#ffffff;
    font-weight:bold;
}
/* ✅ 面包屑单独一行，靠左 */
.banner-bread {
    width:1400px;
    margin:24px auto 0;
    font-size:14px;
}
.banner-bread .bread-gray {
    color:#999;
}
.banner-bread .bread-active {
    color:#0081cc;
}

/*筛选标签*/
.filter-wrap {
    width:1400px;
    margin:24px auto 0;
}
.filter-links {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
}
.filter-links a {
    font-size:18px;
    color:#333;
    padding:0 12px;
}
.filter-links a.active {
    color:#0081cc;
}
.filter-links .split {
    color:#ccc;
}
.line-gray {
    width:100%;
    height:1px;
    background:#eeeeee;
    margin-top:20px;
}

/*案例列表区域*/
.case-list-wrap {
    width:1400px;
    margin:0 auto;
    margin-top:40px;
}
.case-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    column-gap:30px;  /*列间隔30px */
    row-gap:45px;     /*行间隔45px */
}
.case-card {
    background:#f8f8f8;
    border-radius:12px;
    padding:35px 25px;
}
.card-title {
    font-size:18px;
    font-weight:bold;
    color:#111;
}
.card-desc {
    margin-top:20px;
    font-size:16px;
    color:#cccccc;
}
.card-divider {
    margin-top:20px;
    height:1px;
    background:#eef0f5;
}
.card-img-wrap {
    margin-top:40px;
    width:100%;
    border-radius:10px;
    overflow:hidden;
    position:relative;
}
.card-img-wrap img {
    width:100%;
    display:block;
    transition:0.3s;
}
.card-mask {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:0.3s;
}
.card-mask-btn {
    background:#0081cc;
    color:#fff;
    padding:10px 26px;
    border-radius:99px;
}
a.card-mask-btn{ color:#fff;}
.card-img-wrap:hover .card-mask {
    opacity:1;
}
/* ✅ 遮罩按钮背景 #0081cc，白色文字 */
.card-mask-btn {
    background:#0081cc;
    color:#fff;
    padding:10px 26px;
    border-radius:99px;
}
.card-mask-btn:visited {
    color:#fff;
}
.card-img-wrap:hover .card-mask {
    opacity:1;
}

/* ✅ 分页：圆形描边，匹配截图 */
.pagination-wrap {
    width:1400px;
    margin:60px auto 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
}
.pagination-wrap .page-item {
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid #dde3ec;
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    transition:0.25s;
}
.pagination-wrap .page-item.active {
    background:#0081cc;
    border-color:#0081cc;
    color:#fff;
}
.pagination-wrap .page-item:hover {
    border-color:#0081cc;
    color:#0081cc;
}
.pagination-wrap .page-item.active:hover {
    color:#fff;
}

/*联系我们模块*/
.contact-block {
    width:1400px;
    margin:70px auto 0;
    background:#f8f8f8;
    border-radius:12px;
    padding:60px 40px;
}
.contact-head {
    text-align:center;
}
.contact-block h2 {
    font-size:28px;
    font-weight:bold;
    color:#222;
}
.contact-desc {
    margin-top:12px;
    font-size:14px;
    color:#999;
}
.contact-form {
    margin-top:40px;
}
/* ✅ 第一行四栏 */
.form-row-four {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
    margin-bottom:24px;
}
.form-row-full {
    margin-bottom:30px;
}
.form-label {
    display:block;
    font-size:14px;
    color:#222;
    margin-bottom:8px;
    text-align:left;
}
.form-item input,
.form-item select {
    width:100%;
    height:46px;
    border:1px solid #dde3ec;
    border-radius:6px;
    padding:0 14px;
    font-size:14px;
    background:#fff;
}
.form-textarea {
    width:100%;
    min-height:140px;
    border:1px solid #dde3ec;
    border-radius:6px;
    padding:14px;
    resize:none;
    font-size:14px;
    background:#fff;
}
.form-btn-wrap {
    text-align:center;
}
.btn-submit {
    padding:14px 48px;
    background:#0081cc;
    color:#fff;
    border:none;
    border-radius:99px;
    cursor:pointer;
    font-size:16px;
}

.bottom-gap {
    height:80px;
}

/*移动端适配*/
@media(max-width:1440px){
    .banner-inner,.banner-bread,.filter-wrap,.case-list-wrap,.pagination-wrap,.contact-block{
        width:96%;
    }
    .case-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .form-row-four {
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:768px){
    .case-grid {
        grid-template-columns:1fr;
    }
    .form-row-four {
        grid-template-columns:1fr;
    }
}

/* ==========案例详情｜严格匹配设计稿样式 ========== */
.detail-wrap {
    margin-top: 60px;
}
.detail-container {
    width: 1400px;
    margin: 0 auto;
}
.detail-page-title {
    font-size: 42px;
    color: #222;
    font-weight: bold;
    margin-bottom: 36px;
}
.detail-main-row {
    display: grid;
    grid-template-columns: 48% 50%;
    gap: 4%;
    align-items: flex-start;
}
.detail-left-img img {
    width: 100%;
    border-radius: 12px;
    display: block;
}
.detail-paragraph {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
}
.detail-feature-title {
    font-size: 24px;
    color: #222;
    font-weight: bold;
    margin-bottom: 24px;
}
.detail-feature-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.detail-feature-list li {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #444;
    margin-bottom: 20px;
    gap: 10px;
}
.blue-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #0088dd;
    flex-shrink: 0;
    position: relative;
}
.blue-dot::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.detail-nav-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 60px;
}
.detail-nav-bottom a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    text-decoration: none;
    font-size: 16px;
}
.arrow-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.left-arrow {
    background-color: #0088dd;
    border-color: #0088dd;
}
.left-arrow::after {
    content: "";
    width: 10px;
    height: 10px;
    border: solid #fff;
    border-width: 2px 0 0 2px;
    transform: rotate(-45deg);
}
.right-arrow::after {
    content: "";
    width: 10px;
    height: 10px;
    border: solid #888;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}
.split-line {
    color: #ccc;
}
/* 响应式适配 */
@media (max-width:1440px) {
    .detail-container {
        width: 96%;
    }
}
@media (max-width: 768px) {
    .detail-main-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .detail-page-title {
        font-size: 28px;
    }
}
.feat-label{
    color:#0088dd;
}