@charset "utf-8";
/* product-list.css 产品列表页面独立样式 */
.product-main{
    background:#fafafa;
}
/* banner 690px */
.product-banner{
    width:100%;
    height:690px;
    background:url("../img/xwbanner.jpg") center / cover no-repeat;
    position:relative;
}
.product-banner .banner-inner{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
}
.product-banner .banner-title{
    font-size:40px;
    font-weight:bold;
    color:#ffffff;
    padding-left:calc((100% - 1400px)/2);
}
.container{
    max-width:1400px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;
}
/* ========== 产品分类tab【修改：居中 + / 分隔符】 ========== */
.product-tab-wrap{
    margin-top:30px;
    text-align:center;
}
.tab-inner{
    display:inline-flex;
    align-items:center;
    gap:14px;
}
.product-tab-item{
    font-size:20px;
    font-weight:bold;
    color:#111;
    text-decoration:none;
    transition:0.25s;
}
.product-tab-item.active,
.product-tab-item:hover{
    color:#0081cc;
}
.tab-divider{
    font-size:20px;
    color:#999;
}
/* ========== 产品列表区域【修改：背景满屏 #f8f8f8】 ========== */
.product-list-wrap{
    margin-top:35px;
    width:100vw;
    margin-left:calc(-50vw + 50%);
    background-color:#f8f8f8;
    padding:40px 0;
}
.product-inner-1400{
    max-width:1400px;
    margin:0 auto;
    padding:0 20px;
}
.product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    column-gap:20px;
    row-gap:40px;
}
/* ========== 产品卡片 ========== */
.product-card{
    background-color:#ffffff;
    border-radius:12px;
    padding-left:30px;
    padding-right:30px;
    padding-top:45px;
    padding-bottom:30px; /* 底部内边距，给按钮留距离 */
}
.card-title{
    font-size:18px;
    font-weight:bold;
    color:#222;
    margin:0 0 20px 0;
}
.card-desc{
    font-size:16px;
    color:#666666;
    margin:0 0 60px 0;
}
.card-img img{
    width:100%;
    height:auto;
    display:block;
    border-radius:8px;
}
.card-img{
    margin-bottom:35px;
}
.card-btn-group{
    display:flex;
    gap:16px;
    /* 距离卡片底部靠 padding-bottom:30px 控制 */
}
/* ========== 按钮样式【按你要求修正默认样式】 ========== */
.btn-detail,
.btn-contact{
    flex:1;
    text-align:center;
    display:block;
    text-decoration:none;
    padding:12px 0;
    border-radius:999px;
    background-color:#ffffff;
    border:1px solid #ededed;
    font-size:16px;
    transition:0.25s;
}
.btn-detail:link ,
.btn-contact:link{
    color:#ccc;
}
.btn-detail:visited ,
.btn-contact:visited{
    color:#ccc;
}

/*查看详情hover：背景#0081cc，文字白色 */
.btn-detail:hover{
    background-color:#0081cc;
    color:#ffffff;
    border-color:#0081cc;
}
/*立即联系hover：边框#0081cc，文字#0081cc */
.btn-contact:hover{
    border-color:#0081cc;
    color:#0081cc;
}
/*分页 */
.pagination-wrap{
    margin-top:30px;
    display:flex;
    justify-content:center;
    gap:12px;
}
.page-item{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    border:1px solid #e4e4e4;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#333;
}
.page-item.active{
    background-color:#0081cc;
    color:#fff;
    border-color:#0081cc;
}
/*联系表单模块直接沿用common的样式 */
.contact-block{
    margin-top:30px;
}
.bottom-gap{
    height:80px;
}
/*联系我们模块*/
.contact-block {
    width:1400px;
    margin:10px auto 0;
    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:#000;
    color:#fff;
    border:none;
    border-radius:99px;
    cursor:pointer;
    font-size:16px;
}
.bai100{ width:100%; background-color:#fff;}

/*移动端适配，对齐case‑list.css */
@media(max-width:1440px){
    .contact-block{
        width:96%;
    }
    .product-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .form-row-four {
        grid-template-columns:repeat(2, 1fr);
    }
}
@media(max-width:768px){
    .product-banner .banner-title{
        font-size:30px;
        padding-left:20px;
    }
    .tab-inner{
        flex-wrap:wrap;
        justify-content:center;
        row-gap:8px;
    }
    .product-grid{
        grid-template-columns:1fr;
    }
    .product-card{
        padding-left:20px;
        padding-right:20px;
    }
    .form-row-four {
        grid-template-columns:1fr;
    }
}