.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 36px 2vw;
    justify-content: center;
}
.product-item {
    flex: 0 1 22%;
    max-width: 24%;
    min-width: 200px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    padding: 22px 16px 18px 16px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}
.product-item:hover {
    box-shadow: 0 8px 32px rgba(216,30,47,0.14);
    transform: translateY(-4px) scale(1.03);
}
.product-item .img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.product-item .img img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    transition: transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.product-item:hover .img img {
    transform: scale(1.08);
}
.product-item .title {
    font-size: 1.18rem;
    font-weight: 700;
    color: #222;
    margin: 14px 0 8px 0;
    text-align: center;
    letter-spacing: 1px;
}
.product-item .text {
    font-size: 0.98rem;
    color: #666;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.5;
}
.product-item .iconfont {
    color: #d81e2f;
    font-size: 1.2rem;
    margin-top: 4px;
}
@media (max-width: 900px) {
    .product-item {
        min-width: 120px;
        padding: 12px 6px 8px 6px;
        border-radius: 10px;
    }
    .home-product .product-list {
        position: relative;
        padding: 0 8px;
    }
    .product-item .img img {
        max-width: 100px;
        border-radius: 8px;
    }
    .product-item .title {
        font-size: 1rem;
        margin: 8px 0 4px 0;
    }
    .product-item .text {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
}
@media (max-width: 600px) {
    .product-grid {
        gap: 12px 1vw;
    }
    .product-item {
        flex: 0 1 48%;
        max-width: 48%;
        min-width: 80px;
        padding: 6px 2px 4px 2px;
        border-radius: 6px;
    }
    .product-item .img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 8px;
    }
    .product-item .img img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 6px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }
    .product-item .title {
        font-size: 0.85rem;
        margin: 4px 0 2px 0;
    }
    .product-item .text {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }
}
#service .service .soft {
    float: left;
    width: 1226px;
    height: 40px;
}
.slide-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    padding: 22px 16px 18px 16px;
    margin: 0 auto;
    min-width: 220px;
    max-width: 320px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}
.swiper-slide:hover .slide-card {
    box-shadow: 0 8px 32px rgba(216,30,47,0.14);
    transform: translateY(-4px) scale(1.03);
}
.slide-card .img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.slide-card .img img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    transition: transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.swiper-slide:hover .slide-card .img img {
    transform: scale(1.08);
}
.slide-card .title {
    font-size: 1.18rem;
    font-weight: 700;
    color: #222;
    margin: 14px 0 8px 0;
    text-align: center;
    letter-spacing: 1px;
}
.slide-card .text {
    font-size: 0.98rem;
    color: #666;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.5;
}
.slide-card .iconfont {
    color: #d81e2f;
    font-size: 1.2rem;
    margin-top: 4px;
}
@media (max-width: 900px) {
    .slide-card {
        min-width: 120px;
        padding: 12px 6px 8px 6px;
        border-radius: 10px;
    }
    .slide-card .img img {
        border-radius: 8px;
    }
    .slide-card .title {
        font-size: 1rem;
        margin: 8px 0 4px 0;
    }
    .slide-card .text {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
}
@media (max-width: 600px) {
    .slide-card {
        min-width: 80px;
        padding: 6px 2px 4px 2px;
        border-radius: 6px;
        max-width: 120px;
    }
    .slide-card .img img {
        max-width: 60px;
        border-radius: 4px;
    }
    .slide-card .title {
        font-size: 0.85rem;
        margin: 4px 0 2px 0;
    }
    .slide-card .text {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }
}
@media (max-width: 600px) {
    .home-honor .swiper-slide {
        width: 100% !important;
        max-width: 100vw;
        min-width: 0;
        box-sizing: border-box;
        padding: 0 8px;
    }
    .home-honor .slide-card {
        max-width: 100%;
        min-width: 0;
        border-radius: 10px;
        padding: 10px 4px;
    }
    .home-honor .slide-card .img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 8px;
    }
    .home-honor .slide-card .img img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }
    .home-about-new .swiper-slide {
        width: 100% !important;
        max-width: 100vw;
        min-width: 0;
        box-sizing: border-box;
        padding: 0 8px;
    }
    .home-about-new .slide-card {
        max-width: 100%;
        min-width: 0;
        border-radius: 10px;
        padding: 10px 4px;
    }
    .home-about-new .slide-card .img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 8px;
    }
    .home-about-new .slide-card .img img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }
    .home-about-new .honorwrap{
        margin-top: 50px;
    }
}
.home-cats .l-wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
.cat-list{
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 20px 0;
    margin: 0;
}
.cat-list li{margin:0;padding:0}
.cat-btn{
    display: inline-block;
    padding: 12px 20px;
    background: #ffffff;
    color: #0b6fae;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    text-decoration: none;
    font-weight: 600;
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.cat-btn:hover,.cat-btn:focus{
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(11,111,174,0.18);
    outline: none;
}
@media (max-width:900px){
    .cat-btn{padding:10px 14px;font-size:14px;border-radius:10px;}
    .cat-list{gap:10px}
}
@media (max-width:600px){
    .home-cats{padding:12px 0}
    .cat-list{justify-content:flex-start;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
    .cat-list li{flex:0 0 auto}
    .cat-btn{padding:8px 12px;font-size:13px;border-radius:8px}
    .l-wrap{padding:0 10px}
}

.home-news .newsImg {float:left; width:550px; height:350px; margin-right:20px; overflow:hidden}
.home-news .newsImg img {width:550px; height:260px}
.home-news .newsImg h1 {float:left; width:550px; height:260px}
.home-news .newsImg h2 {float:left; width:550px; height:30px; line-height:30px; text-align:right; font-size:14px; margin:5px 0}
.home-news .newsImg h2 a {float:left; width:450px; height:30px; text-align:left; font-size:22px; display:block; overflow:hidden; text-overflow:ellipsis}
.home-news /* ensure nobr inside news can wrap */ , .home-news .newsImg h2 nobr{white-space:normal}
.home-news .newsImg h3 {float:left; width:550px; height:auto; line-height:25px; font-size:14px; color:#999}
.home-news .newslist {float:left; width:810px; height:350px}
.home-news .newslist ul li {float:left; width:810px; height:100px; margin-bottom:26px; cursor:pointer; display:block}
.home-news .newslist ul li h1 {float:left; width:100px; height:100px; line-height:100px; text-align:center; color:#C8C8C8; background:#F5F5F5; font-size:55px; transition:all 0.3s; margin-right:20px}
.home-news .newslist ul li:hover h1 {border-radius:5px; background:#1195D3; color:#FFF; transition:all 0.3s}
.home-news .newslist ul li span {float:left; width:680px; height:100px}
.home-news .newslist ul li h2 {float:left; width:810px; height:80px; line-height:26px; text-align:right; font-size:14px}
.home-news .newslist ul li h2 a {float:left; width:800px; height:80px; text-align:left; font-size:22px; display:block; overflow:hidden; text-overflow:ellipsis; transition:all 0.3s}
.home-news .newslist nobr{white-space:normal}
.home-news .newslist ul li h3 {float:left; width:610px; height:68px; line-height:24px; font-size:14px; color:#999; transition:all 0.3s; overflow:hidden}
.home-news .newslist ul li:hover h3 {color:#333; transition:all 0.3s}
.home-news .newslist ul li:hover h2 a {color:#1195D3; font-style:normal; transition:all 0.3s}
/* Tablet adjustments: make featured block full-width and right list flow beneath it */
@media (max-width: 1440px) {
    .home-news .newsImg {float:left; width:450px; height:350px; margin-right:20px; overflow:hidden}
    .home-news .newsImg img {width:450px; height:260px}
    .home-news .newsImg h1 {float:left; width:450px; height:260px}
    .home-news .newsImg h2 {float:left; width:450px; height:30px; line-height:30px; text-align:right; font-size:14px; margin:5px 0}
    .home-news .newsImg h2 a {float:left; width:350px; height:30px; text-align:left; font-size:22px; display:block; overflow:hidden; text-overflow:ellipsis}
    .home-news /* ensure nobr inside news can wrap */ , .home-news .newsImg h2 nobr{white-space:normal}
    .home-news .newsImg h3 {float:left; width:450px; height:auto; line-height:25px; font-size:14px; color:#999}
    .home-news .newslist {float:left; width:630px; height:350px}
    .home-news .newslist ul li {float:left; width:680px; height:100px; margin-bottom:26px; cursor:pointer; display:block}
    .home-news .newslist ul li h1 {float:left; width:100px; height:100px; line-height:100px; text-align:center; color:#C8C8C8; background:#F5F5F5; font-size:55px; transition:all 0.3s; margin-right:20px}
    .home-news .newslist ul li:hover h1 {border-radius:5px; background:#1195D3; color:#FFF; transition:all 0.3s}
    .home-news .newslist ul li span {float:left;height:100px; width:560px; }
    .home-news .newslist ul li h2 {float:left; width:610px; height:80px; line-height:26px; text-align:right; font-size:14px}
    .home-news .newslist ul li h2 a {float:left; width:610px; height:80px; text-align:left; font-size:22px; display:block; overflow:hidden; text-overflow:ellipsis; transition:all 0.3s}
    .home-news .newslist nobr{white-space:normal}
    .home-news .newslist ul li h3 {float:left; width:610px; height:68px; line-height:24px; font-size:14px; color:#999; transition:all 0.3s; overflow:hidden}
    .home-news .newslist ul li:hover h3 {color:#333; transition:all 0.3s}
    .home-news .newslist ul li:hover h2 a {color:#1195D3; font-style:normal; transition:all 0.3s}
}
@media (max-width: 1280px) {
    .home-news .newsImg {float:left; width:450px; height:350px; margin-right:20px; overflow:hidden}
    .home-news .newsImg img {width:450px; height:260px}
    .home-news .newsImg h1 {float:left; width:450px; height:260px}
    .home-news .newsImg h2 {float:left; width:450px; height:30px; line-height:30px; text-align:right; font-size:14px; margin:5px 0}
    .home-news .newsImg h2 a {float:left; width:350px; height:30px; text-align:left; font-size:22px; display:block; overflow:hidden; text-overflow:ellipsis}
    .home-news /* ensure nobr inside news can wrap */ , .home-news .newsImg h2 nobr{white-space:normal}
    .home-news .newsImg h3 {float:left; width:450px; height:auto; line-height:25px; font-size:14px; color:#999}
    .home-news .newslist {float:left; width:530px; height:350px}
    .home-news .newslist ul li {float:left; width:680px; height:100px; margin-bottom:26px; cursor:pointer; display:block}
    .home-news .newslist ul li h1 {float:left; width:100px; height:100px; line-height:100px; text-align:center; color:#C8C8C8; background:#F5F5F5; font-size:55px; transition:all 0.3s; margin-right:20px}
    .home-news .newslist ul li:hover h1 {border-radius:5px; background:#1195D3; color:#FFF; transition:all 0.3s}
    .home-news .newslist ul li span {float:left;height:100px; width:560px; }
    .home-news .newslist ul li h2 {float:left; width:610px; height:80px; line-height:26px; text-align:right; font-size:14px}
    .home-news .newslist ul li h2 a {float:left; width:610px; height:80px; text-align:left; font-size:22px; display:block; overflow:hidden; text-overflow:ellipsis; transition:all 0.3s}
    .home-news .newslist nobr{white-space:normal}
    .home-news .newslist ul li h3 {float:left; width:610px; height:68px; line-height:24px; font-size:14px; color:#999; transition:all 0.3s; overflow:hidden}
    .home-news .newslist ul li:hover h3 {color:#333; transition:all 0.3s}
    .home-news .newslist ul li:hover h2 a {color:#1195D3; font-style:normal; transition:all 0.3s}
}
@media (max-width: 1024px) {
    .home-news .newsImg{float:none; width:100%; height:auto; margin:0 0 16px 0; overflow:visible}
    .home-news .newsImg img{width:100%; height:auto; max-height:420px; object-fit:cover}
    .home-news .newsImg h1{float:none; width:100%; height:auto}
    .home-news .newsImg h2{float:none; width:100%; height:auto; line-height:1.2; text-align:left; font-size:16px; margin:6px 0; display:flex; align-items:center}
    .home-news .newsImg h2 a{float:none; width:auto; height:auto; text-align:left; font-size:18px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; max-height: calc(1.25em * 2); flex:1}
    .home-news .newsImg h2 .date{flex:0 0 auto; margin-left:12px}
    .home-news .newsImg h3{float:none; width:100%; height:auto; line-height:1.6; font-size:14px; color:#999; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; max-height: calc(1.6em * 3)}
    .home-news .newslist{float:none; width:100%; height:auto; margin-top:8px}
    .home-news .newslist ul li{float:none; width:100%; height:auto; margin-bottom:16px; display:flex; align-items:center; padding:10px 0}
    .home-news .newslist ul li h1{float:none; width:56px; height:56px; line-height:56px; text-align:center; font-size:28px; margin-right:12px}
    .home-news .newslist ul li span{float:none; width:auto; height: 50px;}
    .home-news .newslist ul li h2{display:flex; align-items:center; width:auto;height: 30px;}
    .home-news .newslist ul li h2 a{float:none; height: 40px;width:auto; font-size:16px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; flex:1}
    .home-news .newslist ul li h2 .date{flex:0 0 auto; margin-left:8px}
}
@media (max-width:980px){
    .home-news .newsImg{float:none; width:100%; height:auto; margin:0 0 16px 0; overflow:visible}
    .home-news .newsImg img{width:100%; height:auto; max-height:420px; object-fit:cover}
    .home-news .newsImg h1{float:none; width:100%; height:auto}
    .home-news .newsImg h2{float:none; width:100%; height:auto; line-height:1.2; text-align:left; font-size:16px; margin:6px 0; display:flex; align-items:center}
    .home-news .newsImg h2 a{float:none; width:auto; height:auto; text-align:left; font-size:18px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; max-height: calc(1.25em * 2); flex:1}
    .home-news .newsImg h2 .date{flex:0 0 auto; margin-left:12px}
    .home-news .newsImg h3{float:none; width:100%; height:auto; line-height:1.6; font-size:14px; color:#999; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; max-height: calc(1.6em * 3)}
    .home-news .newslist{float:none; width:100%; height:auto; margin-top:8px}
    .home-news .newslist ul li{float:none; width:100%; height:auto; margin-bottom:16px; display:flex; align-items:center; padding:10px 0}
    .home-news .newslist ul li h1{float:none; width:56px; height:56px; line-height:56px; text-align:center; font-size:28px; margin-right:12px}
    .home-news .newslist ul li span{float:none; width:auto; height: 50px;}
    .home-news .newslist ul li h2{display:flex; align-items:center; width:auto;height: 30px;}
    .home-news .newslist ul li h2 a{float:none; height: 40px;width:auto; font-size:16px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; flex:1}
    .home-news .newslist ul li h2 .date{flex:0 0 auto; margin-left:8px}
}
/* Mobile adjustments: stack everything, hide large badges for compactness */
@media (max-width:700px){
    .home-news .newswrap{display:block}
    .home-news .newsImg{float:none; width:100%; margin-bottom:12px}
    .home-news .newsImg img{width:100%; height:auto; max-height:240px}
    .home-news .newsImg h2{display:block}
    .home-news .newsImg h2 a{font-size:18px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; max-height: calc(1.25em * 2)}
    .home-news .newsImg h2 .date{display:block;margin-top:6px}
    .home-news .newsImg h3{display:block; -webkit-line-clamp:4; line-clamp:4; max-height: calc(1.6em * 4); overflow:hidden}
    .home-news .newslist{float:none; width:100%; height:auto}
    .home-news .newslist ul li{float:none; width:100%; display:block; padding:10px 0; border-bottom:0px solid #f5f5f5}
    .home-news .newslist ul li h1{display:none}
    .home-news .newslist ul li h2{display:flex; align-items:flex-start;height: auto;}
    .home-news .newslist ul li h2 a{white-space:normal; display:block; flex:1; overflow:hidden;height: auto;}
    .home-news .newslist ul li h2 .date{flex:0 0 auto; margin-left:8px}
    .home-news .newslist ul li h3{display:none}
    .home-news .newslist ul li span {display:block; width:auto; height:auto}
}