@media screen and (max-width:1332px){
    .case ul{ gap:5%; }
    .case ul li{ width:250px; height:250px; }
    .banner .wrap{ left:0; margin:0;}
}



@media screen and (max-width:960px){
    .header .logo img{ height:30px; width:auto;}
    .header{ height:50px;}
    .header .nav{ display: none; }
    .mobile-nav{ display: block; transition: all .6s cubic-bezier(.7, 0, .2, 1); opacity: 0; transform: translateX(-100%); position: fixed; top:50px; bottom:0; background:#fff; width:220px; z-index:33;}
    .mobile-nav li { position: relative;}
    .mobile-nav li a{ display: block; padding:15px 20px; font-size:14px; font-weight: 600; border-bottom:1px solid #f8f8f8; }
    .mobile-nav li a:hover{ background:#f8f8f8; }
    .mobile-nav li span{ font-size:18px; position: absolute; right:0; top:0; width:50px; height:48px; transition: all 0.3s ease; }
    .mobile-nav li span.open{ transform: rotate(180deg); }
    .mobile-nav li .dropdown{ display: none;}
    .mobile-nav li .dropdown li a{ padding-left:30px; font-size:13px; }
    .mobile-nav.open{ opacity: 1; transform: translateX(0)}
    .menu-icon{ display: block; font-size:20px; }
    .topimg{ margin-top: 50px; height:200px; }
    .case-box{ display: block;}
    .case-box .cmenu{ width:100%;}
    .case-box .cmenu ul{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;}
    .case-box .cright{ margin-left:0; margin-top:12px; }
}

@media screen and (max-width:880px){
    .case ul li{ width:200px; height:200px; }
}

@media screen and (max-width:768px){
    .contact,.case,.case-detail, .service,.about,.inadv{ padding:30px 0;}
    .case-detail{ padding-top:0;}
    .contact .wrap{ grid-template-columns: repeat(1, 1fr); }
    .contact .wrap .fl li{ display: block; text-align: center; }
    .contact .wrap .fl li img{ margin-right:0; margin-bottom:5px; }
    .case ul{ grid-template-columns: repeat(2, 1fr); }
    .case ul li{ margin:0 auto;}
    .service .fr .title h2{ font-size: 22px; }
    .service .wrap{ display: block; }
    .service .fr{ margin-top: 20px; }
    .service .fr ul{ margin-left:0; margin-top:20px;}
    .title h2{ font-size: 25px;}
    .banner{ height:500px;}
    .banner .text{  transform: scale(0.8); transform-origin: left center; }
    .banner .img{ max-height:100%; display: block}
    .banner p img{max-width:100%; display:block; margin-top:20px;}
    .case-box .cright .cclist{ gap:10px; grid-template-columns: repeat(2, 1fr); }
    .case-box .cright .cclist li a{ height:220px;}
}

@media screen and (max-width:640px){
    .topimg { height:160px; }
    .topimg .text h1{ font-size:18px; }
    .topimg .text p{ font-size:14px; margin-top:5px; }
    .topimg .text p svg{ transform: scale(0.8) translateY(2px); transform-origin: center; }
    .contact .wrap .book ul{ display: block;}
    .contact .wrap .book ul li .intxt{ font-size:14px; padding:12px;}
    .contact .wrap .book .btn{ width:100%; }
    .case-box{ padding:10px 0;}
    .case ul li{  width:120px; height:120px; }
    .case-box .cright .cclist{ gap:10px; grid-template-columns: repeat(2, 1fr); }
    .case-box .cmenu li a{ font-size:12px;}
    .case-detail .case-item.between{ flex-direction: column; align-items: center; }
    .case-detail .case-item li{ display: block; text-align: center; padding:20px; width:100%; }
    .case-detail .case-item li img{ margin:0 auto; display: block;}
    .case-detail .case-item li .text h2{ margin-bottom:0; font-size: 16px; }
    .case-list{ gap:10px; grid-template-columns: repeat(2, 1fr); }
    .service .fr ul li h3{ font-size:18px; }
    .service .fr ul li .txt{ font-size: 15px; }
    .about .adv-list{ display: block; margin-top: 20px;  }
    .adv-list li{ width:100%; }
    .adv-list li{ padding:20px 12px;}
    .adv-list li .text h3{ font-size: 18px; }
    .title h2{ font-size: 22px; }
    .about .about-zl ul li{ font-size:15px; }
    .banner .text{ transform: scale(0.7); transform-origin: left center; }
    .in-scroll{ padding:12px; }
    .case-box .cright .cclist{ gap:10px; grid-template-columns: repeat(2, 1fr); }
    .case-box .cright .cclist li a{ height:150px; }
    .case-de-cate{ flex-wrap: wrap; padding:0;}
    .case-de-cate li{ width:calc(100% / 3 - 1px); padding:0; margin:1px 0 0 1px;}
    .case-de-cate li a{ font-size:14px; text-align: center; display: block; background:#f8f8f8; padding:10px 5px;}
    .case-de-cate li a.active{  background:var(--main-color); color:#fff;}

}