@charset "utf-8";
.language{ display: block;}
.clickMenu {
    display: none;
    cursor: pointer;
    padding: 10px;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.clickMenu img {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.clickMenu.rotated {
    transform: rotate(90deg);
}

.clickMenu.rotated img {
    transform: rotate(90deg);
}

button.btn-text{
    display:inline-block;
    padding:10px 40px;
    background:#f3a11c !important;
    color:#fff !important;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-size:16px;
}

.wapMenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    border-radius: 4px;
}

.wapMenu .menu-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wapMenu .menu-content ul li {
    position: relative;
    border-bottom: 1px solid #eee;
}

.wapMenu .menu-content ul li a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #333;
}

.wapMenu .menu-content ul li a:hover {
    background-color: #f5f5f5;
}

.wapMenu .menu-content ul li:last-child {
    border-bottom: none;
}

.wapMenu .menu-content .sub-menu {
    display: none;
    padding-left: 20px;
    background: #f9f9f9;
}

.wapMenu .menu-content .sub-menu.show {
    display: block;
}

.wapMenu .menu-content li.has-submenu > a {
    cursor: pointer;
}

.wapMenu .menu-content li.has-submenu > a .fa-angle-down {
    float: right;
    transition: transform 0.3s ease;
}

.header{ width:100%; height:150px; position:fixed; z-index: 2;}
.headerTop{ 
    width:100%; 
    height:40px; 
    background-color: var(--themeColor5);
    margin:0 auto;
}
.headerTop .serach{ width:78%; height:40px; float:left; }
.headerTop .serach .box{ width:20%; height:40px; line-height:40px; float:right; position:relative}
.headerTop .serach .box input{ width:100%; line-height:30px; height:30px; text-indent: 10px; margin:5px auto; border-radius: 5px; border:none; background:#fff;}
.headerTop .serach .box button{ width:80px; height:30px; line-height:30px; background:var(--Color2); border-radius: 0px 5px 5px 0; border:none; position:absolute; top:5px; right:0; color:#fff; font-size:16px; font-weight: 600;}
.headerTop .language{ width:21%; height:40px; line-height:40px; text-indent:10px; float:right; color:#fff;}
.headerMenu {
    width: 100%;
    height: 90px;
    position: relative;
}

.headerMenu.scrolled {
    background-color: #ffffff; /* 或其他实色背景 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 可选：添加阴影效果 */
}

.headerMenu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7); /* 半透明背景 */
    z-index: -1; /* 将伪元素置于内容下方 */
}

.headerMenu .logo {
    width: 23%;
    height:100%;
    line-height:normal;
    font-size:38px;
    float: left;
    opacity: 1; /* 确保子元素不透明 */
    text-align:right;
    position:relative
}
.headerMenu .logo img{ margin-top:5px; position:absolute; top:0; right:45%;}
.headerMenu .logo a{
    color:var(--Color2);
    font-weight:800;
    height:100%;
    display:inline-flex;
    align-items:center;
    line-height:1;
}

.headerMenu .nav {
    width: 77%;
    float: right;
    height: 100%;
    margin-top:0;
    position: relative;
    display: flex;
    align-items: center;
}

.headerMenu .nav>ul{ width:100%; margin:0; padding:0; height:100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; white-space: nowrap; position:relative; } 
.headerMenu .nav>ul li{ width:20%; margin-right:0; margin-left:0; display: inline-flex; justify-content: center; align-items: center; height:100%; font-size:24px; font-weight:600; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; position:relative; cursor: pointer; flex-shrink:0;}
.headerMenu .nav>ul li>a{ display:inline-flex; align-items:center; height:100%;}
.headerMenu .nav>ul li>a{ color:#000000;}
.headerMenu .nav>ul li.active>a,
.headerMenu .nav>ul li:hover>a{ color:#f5a400 !important; font-weight: var(--fontWeight600);}
.headerMenu .nav>ul li.active .downNav a{ color:#555!important;}
.headerMenu .nav>ul li svg{ font-size: 16px; margin-left: 10px; vertical-align: middle;}
.headerMenu .nav>ul li .downNav{
    position:absolute;
    top:100%;
    left:50%;
    display:none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color:#ffffff;
    min-width:260px;
    padding:8px 0;
    border-radius:10px;
    box-shadow:0 10px 28px rgba(0,0,0,0.16);
    border:1px solid #eceff3;
    overflow:hidden;
    z-index:99;
}
.headerMenu .nav>ul li .downNav.productMega{
    left:0;
    -webkit-transform:none;
    transform:none;
    min-width:0;
    width:auto;
    padding:14px 46px;
    border-radius:0 0 10px 10px;
    box-sizing:border-box;
}
.headerMenu .nav>ul li .downNav.productMega .mega-scroll{
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    scroll-behavior:smooth;
}
.headerMenu .nav>ul li .downNav.productMega .mega-item{
    width:240px;
    margin:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    flex-direction:column;
    text-decoration:none;
    vertical-align:top;
}
.headerMenu .nav>ul li .downNav.productMega .mega-item-img{
    width:200px;
    height:200px;
    margin-right:0;
    margin-bottom:8px;
    border:1px solid #eceff3;
    border-radius:6px;
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    flex-shrink:0;
}
.headerMenu .nav>ul li .downNav.productMega .mega-item-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.headerMenu .nav>ul li .downNav.productMega .mega-item-name{
    width:100%;
    max-width:200px;
    color:#303133;
    font-size:16px;
    font-weight:600;
    line-height:20px;
    text-align:center;
    white-space:normal;
    word-break:break-word;
}
.headerMenu .nav>ul li .downNav.productMega .mega-item:hover .mega-item-name{
    color:#f5a400;
}
.headerMenu .nav>ul li .downNav.productMega .mega-arrow{
    position:absolute;
    top:50%;
    width:30px;
    height:44px;
    margin-top:-22px;
    border:none;
    border-radius:6px;
    background:#f3f5f7;
    color:#606266;
    cursor:pointer;
    z-index:2;
}
.headerMenu .nav>ul li .downNav.productMega .mega-arrow.mega-prev{
    left:10px;
}
.headerMenu .nav>ul li .downNav.productMega .mega-arrow.mega-next{
    right:10px;
}
.headerMenu .nav>ul li .downNav.productMega .mega-arrow:hover{
    background:#e9edf2;
    color:#f5a400;
}
.headerMenu .nav>ul li .downNav.productMega .mega-arrow.is-disabled{
    opacity:.35;
    cursor:not-allowed;
}
.headerMenu .nav>ul li .downNav a{
    display:block;
    text-decoration:none;
}
.headerMenu .nav>ul li .downNav li{
    width:100%;
    height:48px;
    line-height:48px;
    display:block;
    text-align:center;
    font-size:18px;
    font-weight:600;
    color:#555;
    border-bottom:1px solid #f1f3f5;
    transition:all .2s ease;
}
.headerMenu .nav>ul li:hover .downNav{ display: block; animation: slideDown 0.3s ease-in-out;}
@keyframes slideDown {
    0% {
        opacity: 0;
    }
    100% { 
        opacity: 1;
    }
}
.headerMenu .nav>ul li .downNav li:last-child{ border-bottom:none;}
.headerMenu .nav>ul li .downNav a:hover li{
    background:#f8f9fb;
    color:#f5a400;
}
.banner {
    width: 100%;
    /*height: 625px;*/
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0;
}

.banner img {
    width: 100%;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    position: relative;
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -25%);*/
    object-fit: cover;
    display: block;
    z-index: 1;
   
}
.n150{ width:100%; height:130px; background:#fff;}
.nbanner{ width:100%; height:246px; background: url('../img/feature-bg-img.jpg') no-repeat center center; background-size: cover;}
.nbanner_about{ width:100%; height:246px; background: url('../img/page-title.jpg') no-repeat center center; background-size: cover;}
.nbanner_product{ width:100%; height:246px; background: url('../img/nbanner_Product.jpg') no-repeat center center; background-size: cover;}
.nbanner_news{ width:100%; height:246px; background: url('../img/slider1.jpg') no-repeat center center; background-size: cover;}

.aboutBox{
    width:100%;
    height:540px;
    background: url('../img/aboutBox.jpg') no-repeat center center;
    background-size:cover;
    padding:50px 0px;
    display: flex;
    flex-wrap: wrap;
}
.aboutBox .tit{ width:45%; height:100%;}
.aboutBox .tit .aboutTest{ width:80%; height:100%; float:right;}
.aboutTest .t1{ font-size:var(--titleFontSize); font-weight: var(--titleFontWeight); margin-top:50px;}
.aboutTest .t2{ font-size:18px; font-weight: 400; line-height:40px; margin-top:10px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; text-overflow: ellipsis;}
.aboutBox .conent{ width:55%; height:100%; display:flex; align-items:center; justify-content:flex-start;}
.aboutBox .conent .aboutImg{
    width:75%;
    margin-left:35px;
    height:100%;
    float:none;
    display:flex;
    align-items:center;
    justify-content:center;
}
.aboutBox .conent .aboutImg img{
    width:100%;
    height:auto;
}
.aboutBox .conent .aboutImg video{
    width:100%;
    height:auto;
    max-height:360px;
    object-fit:cover;
    display:block;
}
.advantageBox{ width:80%; padding:1% 10%; background:rgb(22, 22, 22);}
.advantageBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
.advantageBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
/*.advantageBox li{ width:23%; margin:1% 1%; min-height:340px; background:url('../img/ysbg.jpg') no-repeat top left; background-color:#fff; box-shadow:var(--boxShadowBorder)}*/
.advantageBox li .icon{ width:100%; height:100px; text-align:center; margin-top:50px; font-size:50px;}
.advantageBox li .title{ width:100%; height:100px; font-size:36px; text-align:center;}
.advantageBox li .desc{ width:100%; height:100px; text-align:center;}

.equipmentBox{ width:80%; padding:1% 10%;}
.equipmentBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
.equipmentBox ul{ display: flex; flex-wrap: wrap; margin:0 auto;  overflow:hidden; height:350px;}
.equipmentBox li{ width:23%; margin:1% 1%; max-height:330px; background-color:#fff;  box-shadow:var(--boxShadowBorder);}
.equipmentBox li img{ width:100%; height:100%; background-size:100%; border:1px solid #e9e9e9;}


.productBox{ width:80%; padding:1% 10%;}
.productBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
.productBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
.productBox li{ width:23%; margin:1% 1%; max-height:450px; background-color:#fff; position:relative; box-shadow:var(--boxShadowBorder);}
.productBox li img{ width:100%; height:100%; background-size:100%; border:1px solid #e9e9e9;}
.productBox li span{ position:absolute;  width:100%; height:50px; line-height:50px; font-size:var(--fontSzie20); color:#fff; text-align:center; bottom:0; left:0; background-color:rgba(0,0,0,0.5);}


.newsBox{ width:80%; padding:1% 10%;}
.newsBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
.newsBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
.newsBox li{ width:22.8%; margin:1% 1%; max-height:400px; background-color:#fff; border:1px solid #e9e9e9; box-shadow:var(--boxShadowBorder);}
.newsBox li .img{ width:100%; max-height:400px; }
.newsBox li .img img{ width:100%; max-height:400px; background-size:100%;}
.newsBox li .desc{ width:98%; max-height:60px; line-height:30px; font-size:24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-overflow: ellipsis; padding:1% 1%;}


/* 页脚：参考设计稿 — 统一深石板灰、四栏宽间距、大写标题、蓝灰表单 */
.footerBox { width:100%; max-width:100%; background:#2f333b; margin-top:70px; color:#fff; overflow-x:hidden; box-sizing:border-box;}
.footerBox .btMenu{ width:100%; max-width:100%; background:#2f333b; overflow-x:hidden; padding:56px 0 52px; box-sizing:border-box;}
.footerBox .btMenu ul.footer-cols,
.footerBox .btMenu ul{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.5fr) minmax(0,0.6fr) minmax(0,1.9fr); gap:36px min(48px,3vw); width:100%; max-width:min(1680px,100%); margin:0 auto; padding:0 clamp(12px,2%,32px); list-style:none; align-items:start; height:auto; box-sizing:border-box; min-width:0;}
.footerBox .btMenu ul li{ margin:0; height:auto; float:none; min-width:0;}
.footerBox .btMenu ul li.footerLogo{ width:auto; min-width:0;}
.footerLogo .box{ width:100%; max-width:520px; float:none;}
.footerLogo .box a{ width:100%; display:block;}
.footerLogo .box a img{ max-width:200px; height:auto; display:block;}
.footerLogo .box p{ width:100%; margin:18px 0 0; font-size:14px; line-height:1.75; color:rgba(255,255,255,0.88); overflow-wrap:break-word; word-break:break-word;}

.footer-col-title{ font-size:16px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#fff; margin:0 0 22px; padding:0;}
.footer-form-title{ text-align:center; margin-bottom:20px;}

.footerBox .btMenu ul li.footerProduct{ width:auto;}
.footer-product-list{ display:flex; flex-direction:column; gap:12px;}
.footer-product-list a{ color:rgba(255,255,255,0.95); font-size:14px; line-height:1.45; text-decoration:none; transition:color .2s;}
.footer-product-list a:hover{ color:#f39c12;}

.footerBox .btMenu ul li.footerUs{ width:auto;}
.footer-contact-lines{ display:flex; flex-direction:column; gap:12px;}
.footer-contact-line{ font-size:14px; line-height:1.6; color:rgba(255,255,255,0.92);}
.footer-contact-line a{ color:#fff; text-decoration:none; word-break:break-all;}
.footer-contact-line a:hover{ color:#f39c12;}

.footerBox .btMenu ul li.footerGuest{ width:auto; min-width:0;}

.footerBox .bt{ width:100%; min-height:44px; line-height:44px; text-align:center; background:#23262d; font-size:13px; color:rgba(255,255,255,0.72); padding:10px 2%;}


/* 联系我们样式 */
.contactBox{ width:80%; padding:1% 10%; background:#F8F8F8;}
.contactBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
.contactBox .st{ width:100%; height:50px; line-height:50px; text-align:center;}
.contactBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
.contactBox li{ width:31%; margin:1% 1%; min-height:380px; background-color:#fff; box-shadow:var(--boxShadowBorder); border-radius: 20px;}
.contactBox li:hover{ box-shadow:var(--boxShadowBorderRed); cursor: pointer;}


.contactBox li {
    transition: all 0.4s ease;
    cursor: pointer;
    transform: translateY(0);
}

/* 悬停效果 */
.contactBox li:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 45, 132, 0.3);
}

/* 点击效果 */
.contactBox li:active {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 45, 132, 0.4);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* 颜色变化 */
.contactBox li:hover .icon,
.contactBox li:hover .tit,
.contactBox li:hover .desc,
.contactBox li:active .icon,
.contactBox li:active .tit,
.contactBox li:active .desc {
    color: var(--Color2);
}
.contactBox li:active .icon,
.contactBox li:active .tit,
.contactBox li:active .desc {
    color: var(--Color2);
    transition: color 0.2s ease;
}

.contactBox li:hover .icon,
.contactBox li:hover .tit,
.contactBox li:hover .desc {
    color:var(--Color2);
}

.contactBox li span{ width:100%; display: block;}
.contactBox li .icon{ width:90%; height:90px; line-height:90px; margin:50px auto 20px; font-size:80px; font-weight: 600;}
.contactBox li .tit{ width:90%; margin:0 auto 20px; height:50px; line-height: 50px; font-size:24px; }
.contactBox li .desc{ width:90%; height:auot; line-height:40px; margin:0 auto; }

.serverBox{ width:80%; padding:1% 10%;}
.serverBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
.serverBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
.serverBox li{ width:23%; margin:1% 1%; max-height:300px; background-color:#fff; text-align:center;}
.serverBox li img{ width:220px; height:220px; background-size:100%; border:4px solid #e9e9e9; border-radius: 110px;}
.serverBox li span{ width:100%; height:30px; line-height: 30px; display: block;}
.serverBox li span.n{ margin:30px auto 10px; font-size:24px; font-weight: 600;}

.contactUsBox{ width:90%; margin:50px 5% 100px; background:#e9e9e9; overflow: hidden; display: flex; flex: wrap;}
.contactUsBox .tit{ width:50%; height:auto;}
.contactUsBox .tit .aboutTest{ width:70%; height:auto; float:right;}
.contactUsBox .t1{ font-size:var(--titleFontSize); font-weight: var(--titleFontWeight); margin-top:70px; margin-bottom:50px;}
.contactUsBox .t2{ font-size:18px; font-weight: 400; line-height:40px; margin-top:10px;}
.contactUsBox .conent{ width:50%; height:570px;}
.contactUsBox .conent .aboutImg{ width:50%; height:570px; float:left;}

.aboutTest .t2 .item{ width:100%; height:50px; line-height:50px; margin:20px auto; }
.aboutTest .t2 .item input{  width:100%; height:50px; line-height:50px; border:1px solid #e9e9e9; background:#fff; text-indent: 10px;}
.aboutTest .t2 .item textarea{ width:100%; height:100px; line-height:100px; border:1px solid #e9e9e9; text-indent: 10px; background:#fff;}
.aboutTest .t2 .item button{ padding:10px 30px; border:none; border-radius: 5px; background:var(--Color1); color:#fff;}

.conentMap{ width:80%; height:550px; margin-left:10%; margin-top:4%; background:#fff;}

.articleBox{
    width:100%;
    height:auto;
    background: url('../img/aboutBox.jpg') no-repeat center center;
    background-size:cover;
    padding:50px 0px;
    display: flex;
    flex-wrap: wrap;
}
.articleBox .articleMenu{ width:30%; height:auto;}
.articleBox .articleMenu ul{ width:55%; height:auto; float:right; margin-right:2%; margin-bottom:5%; display: block;}
.articleBox .articleMenu ul li:first-child{ width:100%; height:60px; line-height:60px; text-indent: 20px; text-align:left; font-size:24px; font-weight: 600; color:#fff; background:#f3a11c; border-bottom:none;}
.articleBox .articleMenu ul li{ line-height:60px; border-bottom:1px dashed #e9e9e9;}
.detailBox .detailMenu .goods-category-item{
    transition: color .2s ease;
}
.detailBox .detailMenu .goods-category-item.active{
    background:#f3a11c;
    color:#fff;
    font-weight:600;
}
.detailBox .detailMenu .goods-category-item:not(.active):hover{
    color:#f3a11c;
}
.articleBox .articleConent{ width:60%; height:auto;}
.artTr{ width:100%; height:auto; float:left;}
.artTr .artImg{ width:35%; height:auto; text-align:center; margin-right:1%; margin-bottom:20px; float:left;}
.artTr .artImg img{ width:80%; height:auto; margin:0 auto;}
.artTr .artText{ width:60%; height:auto; float:left; }
.artTr .artText h1{display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.artTr .artText h3{ margin:1% auto;}
.artTr .artText h2{display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis;}
.artTr .artText span{ padding:10px 50px; margin-top:4%; border-radius: 5px; display: inline-block; border:1px solid var(--themeColor1);}

.articleConent .artMain h1{ padding:10px 20px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.articleConent .artMain h3{ margin:1% auto; height:60px; line-height:60px; text-align: center; background:var(--themeColor7)}
.articleConent .artMain h2{ padding:10px 20px; border-radius: 5px; display: inline-block; font-weight: 500; font-size:14px; line-height:40px;}
.articleConent .artMain h2 img{ max-width:96%; margin:0 auto;}

.proBox{ width:90%; margin:0 5%;}
.proBox .proMenu,.proBox .proMenu ul, .proBox .proContent{ width:100%; display: flex; flex-wrap: wrap; margin-bottom:10px;}
.proBox .proMenu a{
    width:17.9%;
    margin:1% .9% .5%;
    background:#fff;
    border:1px solid #f3a11c;
    text-align:center;
    line-height:60px;
}
.proBox .proMenu li.active{
    background-color:#f3a11c;
    color:#fff;
}
.proBox .proMenu li:hover{
    background-color:#f3a11c;
    color:#fff;
    cursor: pointer;
    transition: all 0.5s;
}

.proBox .proTip{ width:98%; padding:1% 1%; margin:.5% auto; line-height:40px;}

.proContent .proTr{ width:48%; margin:0.5% 0.5%; padding:0.5% 0.5%; cursor: pointer; }
.proContent .proTr:hover{box-shadow:var(--boxShadowBorderPro); }
.proTr .proImg{ width:35%; height:auto; text-align:center; margin-right:1%; margin-bottom:8px; float:left;}
.proTr .proImg img{ width:90%; height:auto; margin:5% auto;}
.proTr .proText{ width:64%; height:auto; float:left; }
.proTr .proText h1{display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.proTr .proText h2{display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.proTr .proText h3{ line-height:40px;}
.proTr .proText span{ padding:10px 50px; margin-top:4%; border-radius: 5px; display: inline-block; border:1px solid var(--themeColor1);}


.proDetail{ width:100%; height:auto; background:red;}
.proDetail .proDetailPics{ width:40%; float:left;}
.proDetail .proDetailPics .proCoverImg{ width:96%; margin:0 auto;}
.proDetail .proDetailPics .proCoverImg img{ width:100%;}
.proDetail .proDetailPics .proCovers{ width:100%; margin:2% .5%; height:100px; position:relative}
.proCovers .left{ width:7%; height:60%; border-radius: 5px; background:#e9e9e9; position:absolute; left:0; }
.proCovers .right{ width:7%; height:60%; border-radius: 5px; background:#e9e9e9; position:absolute; right:0; }
.proDetail .proDetailPics .proCovers ul{ width:80%; height:100px; margin:0 10%; overflow: hidden;}
.proDetail .proDetailPics .proCovers ul li{ width:23%; margin:0 .5%; float:left;}

.proCovers .left{ line-height:60px; text-align:center; font-weight:600; font-size:24px;}
.proCovers .right{  line-height:60px; text-align:center; font-weight:600;font-size:24px;}

.proCovers ul li img{ width:100%; margin-top: 3px;}
.proDetailSpace{ width:58%; float:right;}
.proDetailSpace h1{ width:100%; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom:1%; overflow: hidden; text-overflow: ellipsis;}
.proDetailSpace h3{ width:100%; margin:1% auto; line-height:40px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis;}
.proDetailSpace span{padding:10px 50px; margin-top:4%; border-radius: 5px; display: inline-block; border:none; background:var(--Color1); color:#fff; font-size:var(--fontSzie20);}

.proDetailMax{ width:100%;}
.proDetailMax .tit{ width:100%; height:60px; line-height:60px; background:var(--themeColor7); text-indent: 20px;}
.proDetailMax .details{ width:98%; padding:1% 1%;}
.proDetailMax .details img{ max-width:100%;}

.proDetailSimilar{ width:100%; margin:0 auto;}
.proDetailSimilar .tit{ width:80%; height:60px; line-height:60px; margin:0 10% 1%; font-size:var(--fontSzie20); background:var(--themeColor7); text-indent: 20px;}
.proDetailSimilar ul{ width:80%; margin:0 10%; display:flex;}
.proDetailSimilar ul li{ width:24%; margin:0 .5%; border:1px dashed #e9e9e9; text-align:center;}
.proDetailSimilar ul li img{ width:90%; height:90%; padding:5% 5%;}

.proDetailContactUs{ width:80%; margin:1% 10%;}
.proDetailContactUs .tit{ width:100%; height:60px; line-height:60px; font-size:var(--fontSzie20); background:var(--themeColor7); text-indent: 20px;}
.proDetailContactUs .contactUs{ width:100%; }
.proDetailContactUs .contactUs .item{ width:100%; padding:.5% 0%; height:50px; line-height:50px; }
.proDetailContactUs .contactUs .item input{ width:100%; height:50px; line-height:50px; border:1px solid #e9e9e9; text-indent: 20px;}
.proDetailContactUs .contactUs .item textarea{ width:100%; min-height:200px; line-height:50px; border:1px solid #e9e9e9; text-indent: 20px; }
.proDetailContactUs .contactUs .item button{ width:100%; height:50px; line-height:50px; background:var(--themeColor5); border:none; color:#fff; font-size: var(--fontSzie20);}

/* 页脚留言表单：栏宽约半屏；输入框高度与多行区约 1:3；底色 #6c757d（对齐设计稿） */
.footerGuest form{ width:100%; max-width:100%;}
.footerGuest .footer-form-row{ display:flex; gap:14px; margin-bottom:14px; width:100%;}
.footerGuest .footer-form-row input{ flex:1; min-width:0; height:44px; line-height:44px; padding:0 14px; border:none; border-radius:4px; background:#6c757d; color:#fff; font-size:14px; box-sizing:border-box; outline:none;}
.footerGuest .footer-form-row input::placeholder{ color:#d1d5db;}
.footerGuest .footer-form-row input:focus{ box-shadow:0 0 0 2px rgba(243,156,18,0.35);}
.footerGuest .footer-form-row--full{ display:block; margin-bottom:16px;}
.footerGuest .footer-form-row--full textarea{ width:100%; min-height:132px; padding:12px 14px; border:none; border-radius:4px; background:#6c757d; color:#fff; font-size:14px; line-height:1.55; resize:vertical; box-sizing:border-box; outline:none;}
.footerGuest .footer-form-row--full textarea::placeholder{ color:#d1d5db;}
.footerGuest .footer-form-row--full textarea:focus{ box-shadow:0 0 0 2px rgba(243,156,18,0.35);}
.footerGuest .footer-form-submit{ text-align:left; margin-top:6px;}
.footerGuest .footer-submit-btn{ padding:13px 40px; border:none; border-radius:3px; background:#f39c12; color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:filter .2s, box-shadow .2s;}
.footerGuest .footer-submit-btn:hover{ filter:brightness(1.06); box-shadow:0 4px 14px rgba(243,156,18,0.35);}
/* 兼容旧结构 .item（其他页面若仍使用） */
.footerGuest .item{ width:100%; min-height:50px; line-height:50px; margin:20px auto; color:rgba(216, 216, 216, 1) }
.footerGuest .item input{  width:48%; height:50px; line-height:50px; margin:1% 2% 1% 0px; border:none;  background:rgba(255, 255, 255, 0.26); text-indent: 10px; float:left; color:rgba(216, 216, 216, 1) }
.footerGuest .item textarea{ width:98%; height:100px; line-height:100px; border:none; text-indent: 10px; background:rgba(255, 255, 255, 0.26); color:rgba(216, 216, 216, 1) }
.footerGuest .item button{ padding:10px 30px; border:none; border-radius: 5px; background:var(--Color1); color:rgba(216, 216, 216, 1) }

.aboutMain{ width:80%; margin:1% 10%; line-height:50px;}
.aboutMain img{ width:100%; }
/* 分页 */
.pagination {text-align: center; padding: 20px 0; display: block;}

.pagination li {
	margin: 2px;
	vertical-align: top;
	display: inline-block;
}
.pagination li a {
	background: #f5f7fa;
	height: 35px;
	width: 35px;
	display: inline-block;
	line-height: 35px;
	text-align: center;
    transition: ease all 0.4s;
    -webkit-transition: ease all 0.4s;
    -moz-transition: ease all 0.4s;
    -o-transition: ease all 0.4s;
}
.pagination  li.pageinfo {
	background: #f5f7fa;
	line-height: 35px;
	text-align: center;
	padding: 0 15px;
}
.pagination li.active{
	background: #292929;
	color: #fff;
	height: 35px;
	width: 35px;
	display: inline-block;
	line-height: 35px;
	text-align: center;
}
.pagination li.disabled{
	background: #f5f7fa;
	height: 35px;
	width: 35px;
	display: inline-block;
	line-height: 35px;
	text-align: center;
}
.pagination li a i{
	vertical-align: middle;
	font-weight: bold;
}
.pagination li a:hover{ color: #fff; background: #f31244;}
.pagination li:first-child a {
	font-size: 20px;
    color: #333;
    text-decoration: none;
}
.pagination li:last-child a { 
	font-size: 20px;
    color: #333;
    text-decoration: none;
}

@media (max-width: 768px) {
    .headerTop .serach .box {
        width: 80%;
        height: 40px;
        line-height: 40px;
        float: right;
        position: relative;
    }
    .headerMenu {
        width: 100%;
        height: 60px;
        position: relative;
    }
    .headerMenu .logo {
        width: 26%;
        height:100%;
        line-height:normal;
        font-size:36px;
        float: left;
        opacity: 1; /* 确保子元素不透明 */
        text-align:right;
        position:relative
    }
    .headerMenu .logo img{ margin-top:5px; width:50%; position:absolute; top:0; left:3%;}
    .headerMenu .logo a{
        color:var(--Color2);
        font-size:18px;
        font-weight:800;
        height:100%;
        display:inline-flex;
        align-items:center;
        line-height:1;
        width:100%;
        justify-content:center;
        /* img 在这里是 absolute 脱标的，需要给文本留出图片占位空间，避免压到图片 */
        padding-left:60%;
        box-sizing:border-box;
    }
    .headerMenu .logo a span{
        font-size:18px !important;
        line-height:1 !important;
        white-space:nowrap;
        flex:1;
        display:block;
        text-align:center;
        position:relative;
        z-index:2;
    }
    .headerMenu .nav {
        width: 67%;
        float: right;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
    }
    .headerMenu .nav>ul{ width:100%; margin:0; padding:0; height:100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; white-space: nowrap; } 
    .headerMenu .nav>ul li{ width:20%; margin-right:0; margin-left:0; display: inline-flex; justify-content: center; align-items: center; height:100%; font-size:20px; font-weight:600; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; position:relative; cursor: pointer; flex-shrink:0;}
    .headerMenu .nav>ul li>a{ display:inline-flex; align-items:center; height:100%;}
    .headerMenu .nav>ul li>a{ color:#000000;}
    .headerMenu .nav>ul li.active>a,
    .headerMenu .nav>ul li:hover>a{ color:#f5a400 !important; font-weight: var(--fontWeight600);}
    .headerMenu .nav>ul li svg{ font-size: 16px; margin-left: 10px; vertical-align: middle;}
    .headerMenu .nav>ul li .downNav{
        position:absolute;
        top:100%;
        left:50%;
        display:none;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color:#ffffff;
        min-width:240px;
        padding:8px 0;
        border-radius:10px;
        box-shadow:0 10px 28px rgba(0,0,0,0.16);
        border:1px solid #eceff3;
        overflow:hidden;
        z-index:99;
    }
    .headerMenu .nav>ul li .downNav.productMega{
        min-width:0;
        width:auto;
        padding:12px 42px;
    }
    .headerMenu .nav>ul li .downNav.productMega .mega-item{
        width:220px;
        margin:0 8px;
    }
    .headerMenu .nav>ul li .downNav.productMega .mega-item-img{
        width:200px;
        height:200px;
    }
    .headerMenu .nav>ul li .downNav.productMega .mega-item-name{
        font-size:14px;
        line-height:18px;
        max-width:200px;
    }
    .headerMenu .nav>ul li .downNav a{
        display:block;
        text-decoration:none;
    }
    .headerMenu .nav>ul li .downNav li{
        width:100%;
        height:44px;
        line-height:44px;
        display:block;
        text-align:center;
        font-size:16px;
        font-weight:600;
        color:#555;
        border-bottom:1px solid #f1f3f5;
        transition:all .2s ease;
    }
    .headerMenu .nav>ul li:hover .downNav{ display: block; animation: slideDown 0.3s ease-in-out;}
    @keyframes slideDown {
        0% {
            opacity: 0;
        }
        100% { 
            opacity: 1;
        }
    }
    .headerMenu .nav>ul li .downNav li:last-child{ border-bottom:none;}
    .headerMenu .nav>ul li .downNav a:hover li{
        background:#f8f9fb;
        color:#f5a400;
    }
    .banner {
        width: 100%;
        /*height: 625px;*/
        overflow: hidden;
        position: relative;
        background-color: #f0f0f0;
    }

    .aboutBox{
        width:100%;
        height:auto;
        background: url('../img/aboutBox.jpg') no-repeat center center;
        background-size:cover;
        padding:20px 0px;
        display: flex;
        flex-wrap: wrap;
    }
    .aboutBox .tit{ width:50%; height:auto;}
    .aboutBox .tit .aboutTest{ width:90%; height:auto; float:right;}
    .aboutTest .t1{ font-size:var(--titleFontSize); font-weight: var(--titleFontWeight); margin-top:0px;}
    .aboutTest .t2{ font-size:18px; font-weight: 400; line-height:40px; margin-top:10px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; text-overflow: ellipsis;}
    .aboutBox .conent{ width:50%; height:auto;}
    .aboutBox .conent .aboutImg{ width:90%; height:auto; float:left; display:flex; align-items:center; justify-content:center;}
    .aboutBox .conent .aboutImg img{ width:100%; height:100%; margin-top: 20%;}
    .aboutBox .conent .aboutImg video{ width:100%; height:auto; max-height:100%; object-fit:contain; margin-top: 0;}

    .advantageBox{ width:90%; padding:1% 5% 5%; background:rgb(22, 22, 22);}
    .advantageBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
    .advantageBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
    .advantageBox li{ width:48%; margin:1% 1%; min-height:340px; background:url('../img/ysbg.jpg') no-repeat top left; background-color:#fff; box-shadow:var(--boxShadowBorder)}
    .advantageBox li .icon{ width:100%; height:100px; text-align:center; margin-top:50px; font-size:50px;}
    .advantageBox li .title{ width:100%; height:100px; font-size:36px; text-align:center;}
    .advantageBox li .desc{ width:100%; height:100px; text-align:center;}
    /* advantage 横幅：手机端按需隐藏（首页/about 专用类） */
    .advantageBox.advantageBox--indexHomeMobileHide,
    .advantageBox.advantageBox--mobileHide{ display:none !important; }

    .equipmentBox{ width:90%; padding:1% 5%;}
    .equipmentBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
    .equipmentBox ul{ display: flex; flex-wrap: wrap; margin:0 auto;  overflow:hidden; height:auto;}
    .equipmentBox li{ width:48%; margin:1% 1%; max-height:330px; background-color:#fff;  box-shadow:var(--boxShadowBorder);}
    .equipmentBox li img{ width:100%; height:100%; background-size:100%; border:1px solid #e9e9e9;}


    .productBox{ width:90%; padding:1% 5%;}
    .productBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
    .productBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
    .productBox li{ width:48%; margin:1% 1%; max-height:450px; background-color:#fff; position:relative; box-shadow:var(--boxShadowBorder);}
    .productBox li img{ width:100%; height:100%; background-size:100%; border:1px solid #e9e9e9;}
    .productBox li span{ position:absolute;  width:100%; height:50px; line-height:50px; color:#fff; text-align:center; bottom:0; left:0; background-color:rgba(0,0,0,0.5);}

    .newsBox{ width:90%; padding:1% 5%;}
    .newsBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
    .newsBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
    .newsBox li{ width:47.5%; margin:1% 1%; max-height:330px; background-color:#fff; border:1px solid #e9e9e9; box-shadow:var(--boxShadowBorder);}
    .newsBox li .img{ width:100%; height:270px; }
    .newsBox li .img img{ width:100%; height:270px; background-size:100%;}
    .newsBox li .desc{ width:98%; min-height:60px; line-height:30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-overflow: ellipsis; background:#e9e9e9; padding:0 1%; text-align: center;}


    .footerBox { width:100%; margin-top:20px; color:#fff;}
    .footerBox .btMenu{ padding:40px 0 32px;}
    .footerBox .btMenu ul.footer-cols,
    .footerBox .btMenu ul{ grid-template-columns:1fr 1fr; gap:36px 44px; padding:0 4%;}
    .footerBox .btMenu ul li.footerLogo{ grid-column:1 / -1;}
    .footerBox .btMenu ul li.footerGuest{ grid-column:1 / -1;}
    .footer-form-title{ text-align:center;}

    .footerBox .bt{ line-height:1.6; padding:12px;}
    .n150{ height:100px;}
    .proBox{ width:96%; margin:0 2%;}
    .proBox .proMenu,.proBox .proMenu ul, .proBox .proContent{ width:100%; display: flex; flex-wrap: wrap; margin-bottom:10px;}
    .proBox .proMenu a{ width:17.9%; margin:1% .9% .5%; background:#fff; border:1px solid var(--Color1); text-align:center; line-height:40px; border-radius: 5px;}
    .proBox .proMenu li.active{ background-color:var(--Color1); color:#fff;}
    .proBox .proMenu li:hover{ background-color:var(--Color1); color:#fff; cursor: pointer; transition: all 0.5s;}
    .proBox .proTip{ width:98%; padding:1% 1%; margin:.5% auto; line-height:40px;}

    .proContent .proTr{ width:96%; margin:0.5% 2%; padding:0.5% 0.5% 2.5%; border-bottom:1px solid #e9e9e9; cursor: pointer; }
    .proContent .proTr{box-shadow:var(--boxShadowBorderPro); }
    .proTr .proImg{ width:35%; height:auto; text-align:center; margin-right:1%; margin-bottom:8px; float:left;}
    .proTr .proImg img{ width:90%; height:auto; margin:5% auto; border-radius: 5px;}
    .proTr .proText{ width:64%; height:auto; float:left; }
    .proTr .proText h1{ font-size:20px; max-height:60px; line-height:30px; margin-top:1.5%; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
    .proTr .proText h2{ font-size:18px; max-height:90px; line-height:30px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
    .proTr .proText h3{ line-height:40px;}
    .proTr .proText span{ padding:8px 40px; margin-top:2%; border-radius: 5px; display: inline-block; border:1px solid var(--themeColor1);}

    .articleBox{width:100%; height:auto; padding:20px 0px; display: flex; flex-wrap: wrap;}
    .articleBox .articleMenu{ width:35%; height:auto;}
    .articleBox .articleMenu ul{ width:90%; height:auto; float:right; margin-right:5%; margin-bottom:5%; display: block;}
    .articleBox .articleMenu ul li:first-child{ width:100%; height:60px; line-height:60px; text-indent: 20px; text-align:left; font-size:24px; font-weight: 600; color:#fff; background:#f3a11c; border-bottom:none;}
    .articleBox .articleMenu ul li{ line-height:60px; border-bottom:1px dashed #e9e9e9;}
    .articleBox .articleConent{ width:65%; height:auto;}
    .artTr{ width:98%; height:auto; margin-bottom:3%; border-radius: 5px; box-shadow:var(--boxShadowBorderPro);}
    .artTr .artImg{ width:35%; height:auto; text-align:center; margin-right:1%; margin-bottom:20px; float:left;}
    .artTr .artImg img{ width:80%; height:auto; margin:0 auto;}
    .artTr .artText{ width:60%; height:auto; float:left; }
    .artTr .artText h1{  font-size:18px; margin:1% 0; line-height:40px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}
    .artTr .artText h3{ font-size:14px; margin:1% auto;}
    .artTr .artText h2{ font-size:14px; max-height:60px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
    .artTr .artText span{ padding:3px 10px; margin-top:2%; border-radius: 5px; display: inline-block; border:1px solid var(--themeColor1);}

    .articleConent .artMain h1{ font-size:20px; padding:10px 20px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
    .articleConent .artMain h3{ margin:1% auto; height:60px; line-height:60px; text-align: center; background:var(--themeColor7)}
    .articleConent .artMain h2{ padding:10px 20px; border-radius: 5px; display: inline-block; font-weight: 500; font-size:14px; line-height:40px;}
    .articleConent .artMain h2 img{ max-width:96%; margin:0 auto;}

    /* 联系我们样式 */
    .contactBox{ width:96%; padding:1% 2%; background:#F8F8F8;}
    .contactBox .t{ height:60px; line-height:60px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
    .contactBox .st{ width:100%; height:30px; line-height:30px; margin-bottom:2%; text-align:center;}
    .contactBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
    .contactBox li{ width:31.6%; margin:1% .8%; min-height:380px; background-color:#fff; box-shadow:var(--boxShadowBorder); border-radius: 20px;}
    .contactBox li:hover{ box-shadow:var(--boxShadowBorderRed); cursor: pointer;}
    .contactBox li { transition: all 0.4s ease; cursor: pointer; transform: translateY(0);}
    /* 悬停效果 */
    .contactBox li:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 45, 132, 0.3);}

    /* 点击效果 */
    .contactBox li:active {transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 45, 132, 0.4); transition: transform 0.1s ease, box-shadow 0.1s ease;}

    /* 颜色变化 */
    .contactBox li:hover .icon,
    .contactBox li:hover .tit,
    .contactBox li:hover .desc,
    .contactBox li:active .icon,
    .contactBox li:active .tit,
    .contactBox li:active .desc {
        color: var(--Color2);
    }
    .contactBox li:active .icon,
    .contactBox li:active .tit,
    .contactBox li:active .desc {
        color: var(--Color2);
        transition: color 0.2s ease;
    }

    .contactBox li:hover .icon,
    .contactBox li:hover .tit,
    .contactBox li:hover .desc {
        color:var(--Color2);
    }

    .contactBox li span{ width:100%; display: block;}
    .contactBox li .icon{ width:96%; height:90px; line-height:90px; margin:50px auto 20px; font-size:50px; font-weight: 600; text-align:center;}
    .contactBox li .tit{ width:96%;  padding:2% 2% 0%; height:auto; line-height: 50px; font-size:14px; }
    .contactBox li .desc{ width:96%; height:auot; line-height:40px; margin:0 auto; }


    .serverBox{ width:96%; padding:1% 5%;}
    .serverBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
    .serverBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
    .serverBox li{ width:20%; margin:1% 2%; background-color:#fff; text-align:center;}
    .serverBox li img{ width:90%; height:100%; background-size:100%; border:4px solid #e9e9e9; border-radius: 50%;}
    .serverBox li span{ width:100%; height:30px; line-height: 30px; font-size:12px; display: block;}
    .serverBox li span.n{ margin:30px auto 10px; font-size:16px; font-weight: 600;}

    .contactUsBox{ width:90%; margin:130px 5% 20px; background:#e9e9e9; overflow: hidden; display: flex; flex: wrap;}
    .contactUsBox .tit{ width:50%; height:auto;}
    .contactUsBox .tit .aboutTest{ width:96%; height:auto; float:right;}
    .contactUsBox .t1{ font-size:var(--titleFontSize); font-weight: var(--titleFontWeight); font-size:16px; margin-top:10px; margin-bottom:10px;}
    .contactUsBox .t2{ font-size:18px; font-weight: 400; line-height:40px; margin-top:10px;}
    .contactUsBox .conent{ width:50%; height:auto; overflow: hidden;}

    .aboutTest .t2 .item{ width:100%; height:50px; line-height:50px; margin:20px auto; }
    .aboutTest .t2 .item input{  width:100%; height:50px; line-height:50px; border:1px solid #e9e9e9; background:#fff; text-indent: 10px;}
    .aboutTest .t2 .item textarea{ width:100%; height:100px; line-height:100px; border:1px solid #e9e9e9; text-indent: 10px; background:#fff;}
    .aboutTest .t2 .item button{ padding:10px 30px; border:none; border-radius: 5px; background:var(--Color1); color:#fff;}

    .conentMap{ width:80%; height:400px; margin-left:10%; margin-top:10%; background:#ffffff;}

    .detailMenu{ display: none;}
    .detailConent{ width:96%!important; margin:0 2%; background:none;}
    .proDetailSimilar{ width:96%!important; margin:0 2%;}
    .proDetailSimilar .tit{ width:100%; height:60px; line-height:60px; margin:0 0%; font-size:var(--fontSzie20); background:var(--themeColor7); text-indent: 20px;}
    .proDetailSimilar ul{ width:100%; margin:0 10%; display:flex;}
    .proDetailSimilar ul li{ width:24%; margin:1% .5%; border:1px dashed #e9e9e9; text-align:center;}
    .proDetailSimilar ul li img{ width:90%; height:90%; padding:5% 5%;}

    .proDetailContactUs{ width:80%; margin:1% 10% 0; display: none;}
    .proDetailContactUs .tit{ width:100%; height:60px; line-height:60px; font-size:var(--fontSzie20); background:var(--themeColor7); text-indent: 20px;}
    .proDetailContactUs .contactUs{ width:100%; }
    .proDetailContactUs .contactUs .item{ width:100%; padding:.5% 0%; height:50px; line-height:50px; }
    .proDetailContactUs .contactUs .item input{ width:100%; height:50px; line-height:50px; border:1px solid #e9e9e9; text-indent: 20px;}
    .proDetailContactUs .contactUs .item textarea{ width:100%; min-height:200px; line-height:50px; border:1px solid #e9e9e9; text-indent: 20px; }
    .proDetailContactUs .contactUs .item button{ width:100%; height:50px; line-height:50px; background:var(--themeColor5); border:none; color:#fff; font-size: var(--fontSzie20);}

    .proDetailSpace{ width:58%; float:right;}
    .proDetailSpace h1{ width:100%; font-size:18px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom:1%; overflow: hidden; text-overflow: ellipsis;}
    .proDetailSpace h3{ width:100%; margin:1% auto; line-height:40px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis;}
    .proDetailSpace span{padding:10px 50px; margin-top:4%; margin-bottom:5%; border-radius: 5px; display: inline-block; border:none; background:var(--Color1); color:#fff; font-size:var(--fontSzie20);}

    .detailBox{ background:none; }
    .proDetail{ width:100%; height:auto;}
    .proDetail .proDetailPics{ width:40%; float:left;}
    .proDetail .proDetailPics .proCoverImg{ width:96%; margin:0 auto;}
    .proDetail .proDetailPics .proCoverImg img{ width:100%;}
    .proDetail .proDetailPics .proCovers{ width:100%; margin:2% .5%; height:60px; position:relative}
    .proCovers .left{ width:7%; height:60%; border-radius: 5px; background:#e9e9e9; position:absolute; left:0; }
    .proCovers .right{ width:7%; height:60%; border-radius: 5px; background:#e9e9e9; position:absolute; right:0; }
    .proDetail .proDetailPics .proCovers ul{ width:80%; height:60px; margin:0 10%; overflow: hidden;}
    .proDetail .proDetailPics .proCovers ul li{ width:23%; margin:0 .5%; float:left;}

    .proCovers .left{ line-height:60px; text-align:center; font-weight:600; font-size:24px;}
    .proCovers .right{  line-height:60px; text-align:center; font-weight:600;font-size:24px;}
}

@media (max-width: 430px) {
    .headerTop .serach .box{ width:98%;}
    .headerTop .serach{ width:98%; margin:0 auto;}
    .language{ display: none;}
    .clickMenu{ float:right; display: block; margin-right:10px; margin-top:5px;}
    .clickMenu img{ width:30px; height:30px; }
    .headerMenu .nav {
        display: none !important;
    }
    .headerMenu .logo {
        width: 40%;
        line-height:60px;
        font-size:36px;
        float: left;
        opacity: 1; /* 确保子元素不透明 */
        text-align:right;
        position:relative
    }
    .headerMenu .logo img {
        margin-top: 5px;
        width: 50%;
        position: absolute;
        top: 0;
        left: 1%;
    }
    .headerMenu .logo a{
        width:100%;
        justify-content:center;
        padding-left:60%;
        box-sizing:border-box;
    }
    .headerMenu .logo a span{
        font-size:16px !important;
        line-height:1 !important;
        white-space:nowrap;
        flex:1;
        display:block;
        text-align:center;
        position:relative;
        z-index:2;
    }
    .wapMenu .menu-content ul li a .svg-inline--fa{ margin-left:20px;}
    .clickMenu {
        display: block;
    }
    
    .headerMenu .nav {
        display: none;
    }
    
    .wapMenu {
        display: block;
    }
     .aboutBox{
        width:100%;
        height:auto;
        background: url('../img/aboutBox.jpg') no-repeat center center;
        background-size:cover;
        padding:20px 0px;
        display: flex;
        flex-wrap: wrap;
    }
    .aboutBox .tit{ width:100%; height:auto;}
    .aboutBox .tit .aboutTest{ width:90%; height:auto;  margin:0 5%!important;}
    .aboutTest .t1{ font-size:var(--fontSzie16); font-weight: var(--titleFontWeight); margin-top:0px; text-align:center;}
    .aboutTest .t2{ font-size:var(--fontSzie14); font-weight: 400; line-height:40px; margin-top:10px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; text-overflow: ellipsis;}
    .aboutBox .conent{ width:50%; height:auto; display: none;}
    .aboutBox .conent .aboutImg{ width:90%; height:auto; float:left; display:flex; align-items:center; justify-content:center;}
    .aboutBox .conent .aboutImg img{ width:100%; height:100%; margin-top: 20%;}
    .aboutBox .conent .aboutImg video{ width:100%; height:auto; max-height:100%; object-fit:contain; margin-top: 0;}

    .advantageBox{ width:90%; padding:1% 5% 5%; background:rgb(22, 22, 22);}
    .advantageBox .t{ height:60px; line-height:60px; width:100%; color:#fff; text-align:center;  font-size:var(--fontSzie16); font-weight:var(--titleFontWeight);}
    .advantageBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
    .advantageBox li{ width:48%; margin:1% 1%; min-height:240px; background:url('../img/ysbg.jpg') no-repeat top left; background-size:80% 10%; background-color:#fff; box-shadow:var(--boxShadowBorder)}
    .advantageBox li .icon{ width:100%; height:60px; text-align:center; margin-top:40px; font-size:50px;}
    .advantageBox li .title{ width:100%; height:40px; line-height:40px; font-size:var(--fontSzie16); text-align:center;}
    .advantageBox li .desc{ width:100%; height:100px; text-align:center; font-size:var(--fontSzie14)}

    .equipmentBox{display: none;}


    .productBox{ width:90%; padding:1% 5%;}
    .productBox .t{ height:60px; line-height:60px; width:100%; text-align:center; font-size:var(--fontSzie16); font-weight:var(--titleFontWeight);}
    .productBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
    .productBox li{ width:48%; margin:1% 1%; max-height:450px; background-color:#fff; position:relative; box-shadow:var(--boxShadowBorder);}
    .productBox li img{ width:100%; height:100%; background-size:100%; border:1px solid #e9e9e9;}
    .productBox li span{ position:absolute;  width:100%; height:50px; line-height:50px; font-size:var(--fontSzie16); color:#fff; text-align:center; bottom:0; left:0; background-color:rgba(0,0,0,0.5);}


    .newsBox{ width:90%; padding:1% 5%;}
    .newsBox .t{ height:60px; line-height:60px; width:100%; text-align:center; font-size:var(--fontSzie16); font-weight:var(--titleFontWeight);}
    .newsBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
    .newsBox li{ width:47%; margin:1% 1%; max-height:330px; background-color:#fff; border:1px solid #e9e9e9; box-shadow:var(--boxShadowBorder);}
    .newsBox li .img{ width:100%; height:auto; }
    .newsBox li .img img{ width:100%; height:auto; background-size:100%;}
    .newsBox li .desc{ width:98%; height:auto; line-height:30px; font-size:var(--fontSzie16); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-overflow: ellipsis; background:#e9e9e9; padding:0 1%;}



    .footerBox { width:100%; margin-top:20px; color:#fff;}
    .footerBox .btMenu{ padding:32px 0 28px;}
    .footerBox .btMenu ul.footer-cols,
    .footerBox .btMenu ul{ display:grid!important; grid-template-columns:1fr; gap:32px; margin:0 auto; padding:0 5%; height:auto;}
    .footerBox .btMenu ul li{ margin:0;}
    .footerLogo .box{ width:100%;}
    .footerGuest .footer-form-row{ flex-direction:column;}
    .footerGuest .footer-form-row input{ width:100%; height:48px; line-height:48px;}
    .footerGuest .footer-form-row--full textarea{ min-height:144px;}

    .footerBox .bt{ line-height:1.6; padding:10px 12px;}

    .aboutMain{ width:90%; margin:0 auto!important;}

    .nbanner_about {
        width: 100%;
        height:100px;
        background: url(../img/page-title.jpg) no-repeat center center;
        background-size:  cover;
    }

    .nbanner_news {
        width: 100%;
        height: 100px;
        background: url(../img/slider1.jpg) no-repeat center center;
        background-size: cover;
    }

    .nbanner {
    width: 100%;
    height: 100px;
    background: url(../img/feature-bg-img.jpg) no-repeat center center;
    background-size: cover;
}
     /* 联系我们样式 */
    .contactBox{ width:96%; padding:1% 2%; background:#F8F8F8;}
    .contactBox .t{ height:50px; line-height:50px; width:100%; text-align:center; font-size:var(--fontSzie16); font-weight:var(--titleFontWeight);}
    .contactBox .st{ width:100%; height:30px; line-height:30px; margin-bottom:4%; text-align:center;}
    .contactBox ul{ display: block; flex-wrap: wrap; margin:0 auto; }
    .contactBox li{ width:99%; margin:1% .8%; min-height:180px; background-color:#fff; box-shadow:var(--boxShadowBorder); border-radius: 20px; overflow: hidden;}
    .contactBox li:hover{ box-shadow:var(--boxShadowBorderRed); cursor: pointer;}
    .contactBox li { transition: all 0.4s ease; cursor: pointer; transform: translateY(0);}
    /* 悬停效果 */
    .contactBox li:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 45, 132, 0.3);}

    /* 点击效果 */
    .contactBox li:active {transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 45, 132, 0.4); transition: transform 0.1s ease, box-shadow 0.1s ease;}

    /* 颜色变化 */
    .contactBox li:hover .icon,
    .contactBox li:hover .tit,
    .contactBox li:hover .desc,
    .contactBox li:active .icon,
    .contactBox li:active .tit,
    .contactBox li:active .desc {
        color: var(--Color2);
    }
    .contactBox li:active .icon,
    .contactBox li:active .tit,
    .contactBox li:active .desc {
        color: var(--Color2);
        transition: color 0.2s ease;
    }

    .contactBox li:hover .icon,
    .contactBox li:hover .tit,
    .contactBox li:hover .desc {
        color:var(--Color2);
    }

    .contactBox li span{ width:100%; display: block;}
    .contactBox li .icon{ width:96%; height:50px; line-height:50px; margin:10px auto 10px; font-size:50px; font-weight: 600; text-align:center;}
    .contactBox li .icon img{ margin-top:20px;}
    .contactBox li .tit{ width:96%;  padding:2% 2% 0%; height:auto; line-height: 30px; font-size:14px; }
    .contactBox li .desc{ width:96%; height:auot; line-height:40px; margin:0 auto; }

    .serverBox{ width:96%; padding:1% 5%; display: none;}
    .serverBox .t{ height:100px; line-height:100px; width:100%; text-align:center; font-size:var(--titleFontSize); font-weight:var(--titleFontWeight);}
    .serverBox ul{ display: flex; flex-wrap: wrap; margin:0 auto; }
    .serverBox li{ width:20%; margin:1% 2%; background-color:#fff; text-align:center;}
    .serverBox li img{ width:90%; height:100%; background-size:100%; border:4px solid #e9e9e9; border-radius: 50%;}
    .serverBox li span{ width:100%; height:30px; line-height: 30px; font-size:12px; display: block;}
    .serverBox li span.n{ margin:30px auto 10px; font-size:16px; font-weight: 600;}

    .contactUsBox{ width:90%; margin:30px 5% 20px; background:#e9e9e9; overflow: hidden; display: flex; flex: wrap;}
    .contactUsBox .tit{ width:50%; height:auto; display: none;}
    .contactUsBox .tit .aboutTest{ width:96%; height:auto; float:right;}
    .contactUsBox .t1{ font-size:var(--titleFontSize); font-weight: var(--titleFontWeight); font-size:16px; margin-top:10px; margin-bottom:10px;}
    .contactUsBox .t2{ font-size:18px; font-weight: 400; line-height:40px; margin-top:10px;}
    .contactUsBox .conent{ width:100%; height: 240px; overflow: hidden;}

    #mapContainer{ height:200px!important;}
    .conentMap{ width:100%; height:100%; margin:0px 0px; }
    .articleBox{ padding-top:5px;}
    .articleBox .articleMenu{ width:100%; }
    .articleBox .articleMenu ul:last-child{ display: none; }
    .articleBox .articleMenu ul {
        width: 100%;
        height: auto;
        margin:0 auto;
    }
    .articleBox .articleMenu ul li{ text-indent: 20px;  }
    .articleConent{ width:96%!important; margin:0 auto;}
    .artTr {
        width: 98%;
        height: auto;
        margin-bottom: 3%;
        border-radius: 5px;
        box-shadow: var(--boxShadowBorderPro);
    }



    .proBox .proMenu, .proBox .proMenu ul, .proBox .proContent {
        width: 100%;
        display: block;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
      .proBox .proMenu ul{
        margin:1% auto;
      }
        .proBox .proMenu a {
        width: 100%;
        margin: 1% .9% 1%;
        background: #fff;
        border: none!important;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
    }

    .proDetail .proDetailPics {
        width: 100%;
        float: left;
    }

    .proDetailSpace {
        width: 100%;
        text-align:center;
    }

 
}

/* Goods 详情页 Contact Us 按钮美化（与截图一致的橙底+酒红按钮风格） */
.contact-action-btns{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px 10px;
    width:100%;
    margin-top:12px;
}
.contact-action-btn{
    background:#f3a11c;
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:6px 6px;
    min-width:0;
    width:100%;
    flex:none;
    max-width:none;
    height:44px;
    border-radius:0;
    box-sizing:border-box;
}
.contact-action-btn i{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border-radius:3px;
    color:#fff;
    font-size:14px;
}
.contact-action-btn span{
    background:transparent;
    color:#fff;
    padding:0;
    border-radius:3px;
    font-size:16px;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

/* 右侧浮动客服（点击展开） */
.float-kefu{
    position: fixed;
    right: 18px;
    top: 80%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 每个按钮：橙色固定方块；hover 时只扩展 span 的灰色文字区（向左展开） */
.float-kefu-item{
    position: relative;
    width: 54px;
    height: 54px;
    background: #f5a400;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    overflow: visible;
    border-radius: 2px;
    font-size: 28px;
}

.float-kefu-item i{
    position: relative;
    z-index: 2; /* 确保图标盖在灰色展开背景上 */
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    line-height: 1;
}

.float-kefu-item span{
    position: absolute;
    right: 0; /* 从右边贴着图标向左展开 */
    top: 0;
    height: 54px;
    width: 0; /* 默认收起 */
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;

    z-index: 1;
    background: #666666; /* 参考图的灰色块 */
    color: #fff;
    font-size: 14px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 2px 0 0 2px;
    transition: width .18s ease, opacity .18s ease;
}

.float-kefu-item.is-open span{
    width: 210px; /* 展开文字区宽度 */
    opacity: 1;
}

/* grid 两列布局无需额外媒体查询 */

/* Swiper 翻页箭头：改成“灰色圆形 + 白色尖角”样式（适配你提供的图） */
.swiper-button-prev,
.swiper-button-next{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    border-radius:9999px !important;
    background:rgba(120, 130, 140, 0.75);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:none;
    padding:0 !important;
    line-height:44px !important;
}
.swiper-button-prev:after,
.swiper-button-next:after{
    /* 覆盖 swiper 默认 font-size/主题色 */
    font-size:26px !important;
    font-weight:700;
    color:#fff !important;
}