/*
KISSY CSS Reset
*/

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
   font-size: 16px;
}
#cp-page {
    background-color: #EBEDF3;
}
#cpxq1-page {
    background-color: #EBEDF3;
}
body， {
        min-width: 1200px; /* 可按需调整最小宽度 */
      }
 html, body {
		margin: 0;
		padding: 0;
		width: 100%;  /* 让 html 和 body 宽度占满视口 */
		overflow-x: hidden; /* 防止水平滚动 */
	}
/* 设置默认字体 */
body {
    font-family: system-ui, sans-serif;
}
h1 { font-size: 18px; line-height: 1.5; }
h2 { font-size: 16px;   line-height: 1.5;}
h3 { font-size: 14px; line-height: 1.5; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var, i { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; color: #333; }
a:hover { text-decoration: none; color: #cca60e; }
/* 重置表单元素 */
input,select,textarea,button{outline:medium;}
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
input {vertical-align:middle;border: none; background: none;outline:none;}\n

/* 注：optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; min-width: 320px;}
/*设置左右浮动*/
.fl{float: left;}


.fr{float: right;}
.clearfix:after{
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0;
}

/* 移除针对旧版 IE 的 hack 写法，若需要兼容旧版 IE 可保留 */
/* .clearfix{*zoom:1;} */

.mt20{ 
    margin-top: 20px;
}

/* 重置内外边距 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;  /* 让 html 和 body 宽度占满视口 */
}

/* 确保主要容器全屏显示 */
#header,
.container,
.top-bar {
    width: 100%;
    box-sizing: border-box; /* 让内边距和边框包含在元素尺寸内 */
}

/*网站头部样式*/

#header .top-bar {
    background: #ffffff;
    color: #000000;
    line-height: 40px;
    /* 如果需要显示 top-bar，将 display 设置为 block 或其他合适的值 */
    display: block; 
}

#header .nav-box {
    display: flex;
    align-items: center;
    height: 80px;
    background-color: #ffffff; /* 设置背景颜色为白色 */
    width: 100%; /* 让 nav-box 宽度左右撑满 */
    margin-right: 200px; /* 设置右边距为 200px，可按需调整 */
    
}

#header .top-bar.fixed,
#header .nav-box.fixed {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 1000; /* 确保元素显示在其他内容之上 */
}

#header .top-bar.fixed {
    top: 0;
}

#header .nav-box.fixed {
    top: 40px; /* 与 top-bar 高度一致 */
}

body {
    padding-top: 0;
}
#header .spaced-text{ padding-right: 0px;font-size: 13px;margin-left: 30px;}

#header .spaced-text:last-child{ padding-right: 0;}
#header .top-a a{ float: left; padding: 0 10px; color: #fff;}
#header .top-a a:hover,#header .top-a a:active{ color: #fff; background: #000;}

.nav-box {
    border-top: 1px solid #d9d9d9; /* 在 nav-box 上边缘添加 1px 高的横线 */
    width: 100%; /* 左右撑满 */
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.08); /* 添加阴影效果 */
}


.vertical-line {
    display: inline-block;
    height: 40px; /* 竖线高度，可按需调整 */
    width: 1px;
    background-color: #d9d9d9; /* 竖线颜色，可按需调整 */
    margin: 0 10px; /* 竖线左右外边距，可按需调整 */
    vertical-align: middle; /* 垂直居中对齐 */
}
#header .nav-box .fl a {
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 实现垂直居中 */
    height: 100%; /* 确保容器高度占满 nav 模块 */
}

#header .company-name-image {
    width: 391px; /* 固定宽度 */
    height: 64px; /* 固定高度 */
    margin-left: 20px; /* 左边距固定 20px */
}

.new-image {
    width: 236px; /* 新图片宽度 */
    height: 49px; /* 新图片高度 */
    margin-left: 20px; /* 图片左边距离细线 20px */
    align-self: center; /* 确保新图片自身垂直居中 */
}

#header .nav ul{ display: none;}
#header .nav i{ float: left; margin-left: 25px;}

.xs-nav{ height: 80%; background: #1a1a1a; position: fixed; right: -200px; top: 0; width: 200px; overflow: hidden; display: none;}
.xs-nav ul{ padding: 15px;}
.xs-nav a{ display: block; height: 40px; line-height: 70px; padding-left: 50px; color: #fff;}
.xs-nav a:active{ background: #000; color: #fff;}
.xs-nav li{    border-bottom: 1px solid #373a3d;}
#header .nav i img{ width: 26px; height: auto;}
#header img.logo{ margin: 10px; height: 60px;vertical-align: middle; }


@media (max-width: 768px) {
    /* 隐藏spaced-text元素、logo2和分隔线 */
    #header .top-bar .spaced-text,
    #header .new-image,
    #header .vertical-line,
    #header .separator-line {
        display: none;
    }
    
    .contact-uandme {
        display: none;
    }
    .shared-bg .first-line {
        display: none;
    }
    .shared-bg .second-line {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        cursor: pointer;
    }
    .product-list-categories {
        display: none;
    }
    .product-list-categories.active {
        display: block;
    }
    
    /* 调整nav-box为垂直布局并设置顶部内边距 */
    #header .nav-box {
        flex-direction: column;
        height: auto;
        padding: 50px 0 0; /* 微调以消除间隙 */
        margin-top: 0;
    }
    
    /* 居中并固定显示logo在顶部 */
    #header .nav-box .fl {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
        background-color: #fff;
        z-index: 1000;
    }
    
    /* 菜单横向排列并居中 */
    #header .nav {
        float: none;
        margin: 0 auto;
    }
    
    #header .company-name-image {
        margin: 0 auto;
    }
    
    #header .nav ul {
        display: flex;
        justify-content: center;
        padding: 0;
    }
    
    #header .nav ul li {
        margin: 0 10px;
    }
    
    .product-showcase {
        margin-top: 30px;
    }
    .contact-container {
        display: flex;
        flex-direction: column;
    }
    .text-container {
        order: -1;
        margin-bottom: 15px;
    }
    .map-container img {
        max-width: 100%;
        height: auto;
    }
}

/* 添加公司名样式 */
.company-name {
    display: inline-block; 
    vertical-align: middle; 
    margin-left: 10px; 
    font-size: 24px; 
    color: #fff; 
    font-weight: bold; 
    /* 垂直居中 */
    line-height: normal; 
}

.top-ban {width: 100%;height: 100%;}
 .swiper-slide{text-align: center;font-size: 18px;background: #fff; display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;
        -webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;
    }    
.swiper-slide img{ max-width: 100%;height: auto;}
#header .nav ul li{float: left;height: 80px; line-height: 80px;margin-right: 10px;}/* 导航栏背景高度以及标签文字高度以及标签文字间距 */
#header .nav ul li a{ display: block; padding: 0 8px; color: #333333;font-weight: bold; /* 文字加粗 */font-size: 16px; /* 设置字号为 18px */
}
#header .nav ul li a:hover,#header .nav ul li a:active,#header .nav ul li.active a{background: #000000; color: #ffffff;}
.nav {
    margin-right: 40px; /* 设置右边距为 200px，可按需调整 */
}
#t-ban {
    width: 100%;
}

#t-ban .swiper-slide img {
    width: 100%; /* 让图片宽度占满 Swiper 容器 */
    height: auto; /* 保持图片的宽高比 */
    object-fit: cover; /* 按比例缩放图片，覆盖整个容器 */
}
#t-ban {
    margin-bottom: 0px; /* 设置大图轮播模块的底部外边距为 40px */
}

.swiper-container {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.swiper-wrapper {
    margin: 0;
    padding: 0;
}

.full-width-svg {
    width: 100%;
    height: 100%;
}

@media (min-width: 768px) {
	#header .top-bar{ display: block;}
	#header .nav-box{border-bottom: 0px solid #ffcd11; padding: 0;}
	#header .nav ul{ display: block;}

	#header .nav i{ display: none;}
	#header .language-txt{ display: none;}
	.container{ padding: 0;}
}
@media (min-width: 992px) {
	.container{ padding: 0 15px;}
	#header .nav ul li a{  padding: 0 20px;}
	
}
@media (min-width:1000px) {
	
}
@media only screen and ( max-width:768px ) {
	.container{ padding: 0 10px;}
	#header img.logo{ height: 30px; margin: 0;}	
}

/*网站头部样式 结束*/

/*公司介绍样式*/
.gray-background {
    background-color: #F0F2F4; /* 灰色背景颜色 */
    width: 100%; /* 宽度撑满 */
    padding: 50px 0; /* 上下各 50px 内边距 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.custom-box {
    width: 100%; /* 宽度自适应 */
    background: #ffffff;
    max-width: 1568px; /* 最大宽度为 1568px */
    height: 358px; /* 高度不变 */
    flex-shrink: 0;
    box-shadow: 0px 0px 20px 10px rgba(37, 37, 46, 0.05);
    margin: 0 auto;
    position: relative; /* 相对定位，作为图片绝对定位的参考 */
    display: flex; /* 使用 Flexbox 布局 */
    box-sizing: border-box; /* 让内边距包含在元素尺寸内 */
    justify-content: space-between; /* 让图片和文案左右分布 */
    align-items: center; /* 垂直居中 */
	margin-bottom: 0px; /* 添加底部外边距 */
 gap: 30px; /* 设置图片和文案之间的间距为 60px */
}

.content-company-strength {
    flex-grow: 1; /* 让文案区域自适应剩余宽度 */
    max-width: calc(50% - 60px); /* 最大宽度为容器的 50% 减去间距 60px */
    background: #ffffff;
    margin-right: 60px;
}

.company-intro-title {
    color: #666666; /* 标题颜色 */
    font-size: 20px; /* 标题字体大小 */
    margin-left: 0px; /* 左边距 */
    margin-top: 0px; /* 上边距 */
    text-align: left; /* 居左对齐 */
    padding-bottom: 12px;
}


.company-intro-content {
    color: #666666; /* 内容颜色 */
    font-size: 14px; /* 内容字体大小 */
    line-height: 24px;
    text-align: left; /* 居左对齐 */
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6; /* 限制显示 6 行，可按需调整 */
    /* 添加标准属性 */
    display: box;
    box-orient: vertical;
    line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
}


.content-company-pic {
    flex-shrink: 0; /* 防止图片缩小 */
    max-width: 100%; /* 图片最大宽度为容器的 50% */
}

.content-company-pic .overlay-image {
    width: 100%; /* 图片宽度占满容器 */
    height: auto; /* 保持图片的宽高比 */
    object-fit: cover; /* 按比例缩放图片，覆盖整个容器 */
}

/* 确保内容不被图片覆盖 */
.custom-box .content {
    position: relative;
    z-index: 2;
    max-width: 50%; /* 内容最大宽度为容器的 50%，可按需调整 */
}

/* 小屏幕适配（768px 及以下） */
@media (max-width: 768px) {
    .gray-background {
        background-color: #F0F2F4;
        width: 100%;
        height: auto;
        padding: 30px 0; /* 减少上下内边距 */
        
        
    }

    .custom-box {
         display: flex;
          width: 100%; /* 宽度自适应 */
          height: auto; /* 高度不变 */
        flex-direction: column; /* 垂直排列 */
        align-items: center; /* 子元素水平居中 */
        background: #ffffff;
        padding: 20px;
        box-sizing: border-box; /* 让内边距包含在元素尺寸内 */
        margin:30px 30px; /* 添加底部外边距 */
    }

    .custom-box .overlay-image {
        position: relative; /* 改为相对定位 */
        max-width: 100%; /* 图片宽度撑满容器 */
         height: auto; /* 保持图片比例 */
        margin-bottom: 20px; /* 图片与内容添加间距 */
    }

    .content-company-strength {
        max-width: 100%; /* 内容宽度撑满容器 */
        margin: 0 40px; /* 水平居中，上下外边距为 0，左右外边距自动 */
    }

    .company-intro-title {
        margin-left: 0; /* 重置左边距 */
        margin-top: 0;
        text-align: left; /* 标题居中 */
    }

    .company-intro-content {
        margin-left: 0;
        margin-right: 0;
        text-align: left; /* 内容居中 */
        padding-bottom: 30px;
    }
}

/*公司介绍样式 结束*/

/*公司实力科普 开始*/
.company-strength {
    margin-top: 52px; /* 距离公司介绍模块 52px */
    text-align: center; /* 内容居中 */
}

.company-strength-title {
    font-size: 22px; /* 字号 24px */
    margin-bottom: 72px; /* 与图片间距 72px */
}

.company-strength-image {
    max-width: 1126px; /* 最大宽度 1126px */
    max-height: 163px; /* 最大高度 163px */
    width: 100%; /* 宽度随网页大小自适应 */
    height: auto; /* 高度保持比例自适应 */
}
.dual-module-container {
    display: flex;
    justify-content: space-between;
    margin-top: 80px; /* 可根据需要调整与上方模块的间距 */
    padding: 0 80px; /* 左右边距 80px */
}

.module-1 {
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(68, 67, 79, 0.10);
    width: calc(50% - 12px); /* 减去间隔的一半 */
    /* 将中文冒号替换为英文冒号 */
    height: auto;
    position: relative;
}

.module-1-image {
    max-width: 772px;
    width: 100%;
    display: block; /* 确保图片作为块级元素显示 */
    margin-left: 0; /* 移除原来的左外边距 */
}


.module-content {
    padding: 48px 32px 100px; /* 内边距，可根据需要调整 */
}

.module-title {
    font-size: 20px; /* 标题字号，可根据需要调整 */
    margin-bottom: 10px; /* 与正文间距，可根据需要调整 */
    text-align: left;
}

.module-text {
    font-size: 14px; /* 正文字号，可根据需要调整 */
    line-height: 22px;
    color: #666;
    text-align: left;
}

.module-2 {
	background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(68, 67, 79, 0.10);
    width: calc(50% - 12px); /* 减去间隔的一半 */
	max-height: 586px;
    margin-left: 24px; /* 与模块 1 间隔最小 24px */
}

/* 小屏幕适配（768px 及以下） */
@media (max-width: 768px) {
    .dual-module-container {
        flex-direction: column;
        padding: 0 20px;
    }

    .module-1,
    .module-2 {
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }

    .module-1-image {
        margin-left: 0;
    }

    .module-content {
        padding: 20px;
    }
}

/*公司实力科普 结束*/

/*产品展示 开始*/
.product-showcase-bg {
	margin-top: 80px; /* 距离公司介绍模块 52px */
    background-color: #EBEDF3; /* 设置灰色背景 */
    padding-top: 52px; /* 顶部与标题内间距 52px */
    padding-bottom: 100px; /* 底部与产品模块的内间距 100px */
}
.product-showcase {
    margin-top: 0px; /* 可根据需要调整与上方模块的间距 */

}

.section-title {
    font-size: 22px;
    text-align: center;
    margin-bottom: 60px;
}

.product-container {
    display: grid;
    /* 初始状态下每行显示 4 个产品项 */
    grid-template-columns: repeat(4, 1fr); 
    gap: 37px;
    padding: 0 80px;
}

/* 产品导航链接样式 */
.product-nav {
    text-align: center; /* 链接居中显示 */
    margin-top: 60px; /* 距离 title 60px */
    margin-bottom: 50px; /* 距离图片模块 50px */
}

.product-nav a {
    display: inline-block; /* 使链接并排显示 */
    font-size: 13px; /* 字号 14px */
    line-height: 34px;
    color: #333; /* 字色 #000000 */
    margin: 0 15px; /* 标题间距 50px（左右各 25px） */
    text-decoration: none; /* 去除下划线 */
}

.product-nav a:hover {
    color: #cca60e; /* 鼠标悬停颜色 */
}
/* 特殊按钮样式 */
.product-nav a.special-btn {
    background-color: #ffffff; /* 白色背景 */
    width: 102px; /* 按钮宽度 */
    height: 42px; /* 按钮高度 */
    border-radius: 99px; /* 圆角弧度 */
    line-height: 42px; /* 文字垂直居中 */
    text-align: center; /* 文字水平居中 */
}
.product-image {
    width: 100%;
    height: auto;
    display: block;
}

.product-content {
    padding: 26px;
}

.product-title {
    font-size: 15px;
	margin-top: 14px;
    margin-bottom: 10px;
    text-align: left;
}

.product-text {
    font-size: 13px;
    line-height: 19px;
    color: #666;
    text-align: left;
	margin-top: 12px;
	margin-bottom: 65px;
}

/* 产品幻灯片样式 */
.swiper-slide {
    flex-shrink: 0; /* 防止幻灯片收缩 */
    width: calc(25% - 22.5px); /* 每个幻灯片宽度，减去间距 */
    box-sizing: border-box;
}

/* 产品项样式 */


.product-item {
    background-color: #fff;
    max-width: 100%;
    /* 使用 flex 属性统一宽度适配 */
    flex: 1 1 calc((100% - 3 * 37px) / 4); 
    max-width: 364px;
    box-shadow: 0px 10px 8px 0px rgba(138, 126, 160, 0.1);
    /* 使用 flex 布局，让内容垂直排列 */
    display: flex; 
    flex-direction: column;
    /* 固定高度为 540px */
    height: 540px;
}
/* 翻页按钮样式 */
.swiper-button-prev.custom-prev-btn,
.swiper-button-next.custom-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    /* 让容器尺寸由图片决定 */
    width: auto;
    height: auto;
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
}


.swiper-button-prev.custom-prev-btn {
    left: 0;
}

.swiper-button-next.custom-next-btn {
    right: 0;
}

.swiper-button-prev.custom-prev-btn img,
.swiper-button-next.custom-next-btn img {
    width: 44px; /* 设置图片宽度为 109px */
    height: 109px; /* 设置图片高度为 44px */
    object-fit: cover; /* 按比例缩放图片，覆盖整个容器 */
}

@media only screen and ( max-width:480px ) {
	#footer .copy div.fr{ display: none;}
    .product-nav {
    text-align: center; /* 链接居中显示 */
    margin-top: 0px; /* 距离 title 60px */
    margin-bottom: 32px; /* 距离图片模块 50px */
    
}
.section-title {
    font-size: 22px;
    text-align: center;
    margin-bottom: 20px;
}
    
}

/*产品展示 结束*/

/*网页底部*/

#footer{ overflow:hidden; background-color:#F0F2F5; color:#666666;height: auto; padding-bottom: 0px;/* 设置 footer 高度 */
     padding-top: 40px; /* 设置顶部内边距 */
    box-sizing: border-box; /* 确保内边距包含在高度内 */
}
#footer .b-navbox{ padding: 20px 0; display: none;}
#footer .b-nav li{ float: left; width: 20%; color: #fff; margin-left: 5%;}
#footer .b-nav { width: 100%;}
#footer .b-nav li a{ display: block; color: #999; line-height: 30px;}
#footer .b-nav li h2{ height: 40px; line-height: 40px;}
#footer .rmw{ display: none; text-align: center; line-height: 40px; color: #999; margin-left: 170px}
#footer .rmw img{ width: 170px;margin-right: 170px;}
.copy {
    background-color: #EBEDF3; /* 设置背景颜色为白色 */
    margin-bottom: 0;
}


.copy .fl2 {
    font-size: 13px; /* 设置字号为 14px */
    line-height: 100px; /* 设置行高为 30px */
    padding: 0 20px;
    text-align: center; /* 让文字水平居中 */
    color: #999999;
}
/* 底部导航整体样式 */
.footer-nav-item > a:first-child {
    font-size: 16px; /* 字号设置为 18px */
    color: #000000; /* 颜色设置为黑色 */
    font-weight:400px; /* 字体加粗 */
    margin-bottom: 8px; /* 与下方 product-nav4 的间距 */
    display: block; /* 使其作为块级元素，方便设置外边距 */
}
.fl.footer-nav {
    display: flex;
    flex-direction: row; /* 确保元素横向排列 */
    align-items: flex-start;
}
.footer-nav {
    display: flex;
    gap: 4px; /* 横向间距 4px */
}

/* 底部导航每个项目样式 */
.footer-nav-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 250px;
    padding-left: 130px;
     margin-right: 40px; /* 右侧间距设置为 140px */
}


.footer-nav-item:last-child {
    margin-right: 0;
}


/* 设置子内容纵向排列 */
.product-nav4 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 设置子内容链接的样式 */
.product-nav4 a {
    margin-bottom: 0px; /* 子内容之间的间距，可按需调整 */
     font-size: 14px; /* 可按需调整字号 */
    color: #666666; /* 可按需调整颜色 */
    line-height: 30px;
}
/* 底部导航链接样式 */
.footer-nav-item a,
.footer-nav-item .product-nav a {
    font-size: 14px;
    color: #666666;
    line-height: 30px;
    text-decoration: none;
}

@media (min-width: 768px) {
	#footer .b-navbox{ display: block;}
}

@media (min-width: 992px) {
	#footer .b-nav { width: 80%;}
	#footer .rmw{ display: block;}
}
@media only screen and ( max-width:480px ) {
	#footer .copy div.fr{ display: none;}
}

/*网页底部-结束*/

/*产品列表-详细;*/

.full-width-image {
    width: 100%; /* 宽度撑满父容器 */
    height: auto; /* 高度自适应，保持图片比例 */
    display: block; /* 去除图片底部的空白间隙 */
}

.lbcxx-container-wrapper {
    display: flex; /* 使用 flex 布局实现左右并排 */
    justify-content: center; /* 整体居中 */
    padding-left: clamp(20px, 84px - (1728px - 100vw) * (84 - 20) / (1728 - 1385), 84px); /* 动态计算左边距 */
    padding-right: clamp(20px, 84px - (1728px - 100vw) * (84 - 20) / (1728 - 1385), 84px); /* 动态计算右边距 */
    gap: 30px; /* 两个容器之间的间距 */
    width: 100%; /* 确保父容器有宽度 */
    box-sizing: border-box; /* 让 padding 包含在元素尺寸内 */
}

.lbcxx-left-container {
    background-color: #EBEDF3;
    width: 300px;
    height: auto;
    margin-top: 32px;
    margin-bottom: 60px;
}
.product-list {
    background-color: #f9f9f9;
    width: 300px;
    height: auto;
    /* 确保相对容器上左右间距为 0 */
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.shared-bg {
    background-color: #F9F9F9; /* 设置背景颜色，可按需修改 */
    padding: 16px; /* 添加内边距，让文字与背景边缘有一定间距 */
}

.first-line {
    font-size: 18px; /* 设置第一行文字大小为 18px */
    margin-bottom: 6px; /* 设置两行文字间隔为 6px */
    padding-left: 40px;
    font-weight: medium;
}

.second-line {
    font-size: 28px; /* 设置第二行文字大小为 28px */
    font-weight: bold;
    padding-left: 40px;
     gap: 6px; 
   
}
.product-list-categories {
   background-color: #ffffff;
   padding-bottom: 30px;
}

.product-list-categories li {
    margin-bottom: 0px;
}

.category-item {
    display: block;
    width: 300px;
    line-height: 48px;
    padding-left: 40px;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s, color 0.3s;
    font-size: 17px; /* 设置文字大小为 20px */
}

.category-item.active {
    background-color: #000000;
    color: #ffffff;
    width:auto;
    font-weight: bold;
}
.uandme-text {
    font-size: 14px; /* 设置文字大小为 16px，可按需调整 */
    list-style-type: none;
}
.contact-uandme {
    height: 365px; /* 设置模块高度为 465px */
    box-sizing: border-box; /* 确保内边距和边框包含在高度内 */
    background-color: #ffffff;
    margin-top: 30px;
}
.product-list-contact-uandme {
    padding: 30px 20px 60px 20px; /* 按上、右、下、左的顺序设置内边距 */
}

.product-list-contact-uandme li {
    margin-top: 6px; /* 设置列表项顶部外边距为 30px */
}

.product-list-contact-uandme li:first-child {
    margin-top: 0; /* 第一个列表项顶部外边距为 0，避免多余间距 */
}
.lbcxx-right-container {
    background-color: #ffffff;
    width: auto;
    min-height: 1190px;
    flex-grow: 1; /* 让右边容器占据剩余空间 */
    height: fit-content;
    margin-top: 32px;
    padding-top: 100px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 60px;
    margin-bottom: 60px;
}

.lbcxx-right-container .product-item {
    background-color: #f6f7fb; /* 设置背景色为 #ffffff */
    height: 450px;
    box-shadow: none; /* 移除阴影 */
}

.lbcxx-right-container .product-container {
    display: grid;
    grid-template-columns: repeat(3, auto); /* 每行显示 3 列 */
    gap: 36px; /* 设置行间距和列间距为 36px */
    padding: 0; /* 确保左右内边距为 0 */
    direction: ltr; /* 从右到左排列 */
}

.lbcxx-right-container .product-link {
    min-width: 0; /* 防止 flex 项溢出 */
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

.lbcxx-right-container .product-text {

    text-align: center;
    color: #666666;
}

.lbcxx-right-container .product-title {

    text-align: center;
}
.product-list-categories .sub-category {
    list-style-type: none;
    padding-left: 0; /* 缩进 4 个字符 */
    padding: 20px;
    background-color: #FFFAF1; /* 设置背景色 */
}

.product-list-categories .sub-category li a:focus,
.product-list-categories > li > a.category-item:focus {
    outline: none;
}
.product-list-categories .sub-category li {
    font-size: 15px; /* 设置字号 */
    line-height: 40px; /* 设置行高 */
    margin: 0; /* 设置列表间距为 0 */
    width: 300px; /* 设置宽度为 300px */
    box-sizing: border-box; /* 让内边距和边框包含在元素尺寸内 */
    padding-left: 40px; /* 文字从左往右缩进 40px */
}

.product-list-categories .sub-category li a {
    text-decoration: none;
    text-align: left;
    color: #8F8F8F;

}

.product-list-categories .sub-category li a.selected {
    color: #F39801; /* 选中时颜色 */
    text-decoration: underline; /* 选中时添加下划线 */
}

/* 响应式设计，当屏幕变小时调整布局 */
@media (max-width: 768px) {
    .lbcxx-right-container .product-container {
        grid-template-columns: 1fr;
    }
     .product-showcase {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .lbcxx-right-container .product-container {
        grid-template-columns: 1fr;
    }
    .lbcxx-right-container {
    background-color: #ffffff;
    width: auto;
    min-height: 1190px;
    flex-grow: 1; /* 让右边容器占据剩余空间 */
    height: fit-content;
    margin-top: 0px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.category-item {
    display: block;
    width: 300px;
    line-height: 28px;
    padding-left: 40px;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s, color 0.3s;
    font-size: 14px; /* 设置文字大小为 20px */
}
.product-list {
    background-color: #f9f9f9;
    width: 300px;
    height: auto;
    /* 确保相对容器上左右间距为 0 */
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
}

.shared-bg {
    background-color: #F9F9F9; /* 设置背景颜色，可按需修改 */
    padding: 4px; /* 添加内边距，让文字与背景边缘有一定间距 */
}
.second-line {
    font-size: 16px; /* 设置第二行文字大小为 28px */
    color: #F39801;
    font-weight: bold;
    padding-left: 0px;
     gap: 6px; 
   
}
.lbcxx-left-container,
    .lbcxx-right-container {
        width: 100%; /* 让容器宽度自适应 */
        margin-bottom: 20px;
    }

.lbcxx-container-wrapper {
    display: flex;
  flex-direction: column;
  gap: 0px;
    }
    
}

@media (max-width: 996px) { /* 550 + 360 + 36 = 946 */
    .lbcxx-container-wrapper {
        flex-direction: column; /* 窗口宽度过小时，容器垂直排列 */
    }
}
/*产品列表-详细 结束*/

/*产品详情 开始*/

/* 确保整个右容器内容居中 */
/* 确保整个右容器内容居中 */
.cpxqlbcxx-right-container {
    max-width: auto;
    margin: 36px 0px;
    padding: 150px 120px;
    background-color: #ffffff;
    box-sizing: border-box;
    min-height: 100%;
    position: relative; /* 添加相对定位，作为 back-link 的定位参考 */
}

/* 返回链接样式 */
.back-link {
    position: absolute;
    top: 52px;
    left: 52px;
    padding-bottom: 80px;
    text-decoration: underline;
    font-size: 18px;
    color: #666666; /* 可根据需求修改链接颜色 */
}

/* 第一行标题居中 */
.cpxqlbcxx-right-container h1.cpxqdetail-title:first-of-type {
    text-align: center;
    padding-bottom: 60px;
    font-size: 28px;
}

/* 其他标题左对齐 */
.cpxqlbcxx-right-container h2.cpxqdetail-product-detail-title {
    text-align: left;
    font-size: 24px;
    padding-top: 80px;
}

/* 图片居中 */
.cpxqlbcxx-right-container img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* 正文左对齐 */
.cpxqlbcxx-right-container p,
.cpxqlbcxx-right-container ul {
    text-align: left;
}

/* 横线左对齐 */
.cpxqlbcxx-right-container .product-detail-divider {
    margin-left: 0;
}

.cpxqdetail-product-detail-title {
    margin-bottom: 12px; /* 文字和横线间距 12px */
}

.product-detail-divider {
    height: 1px; /* 横线高度 1px */
    background-color: #D8D8D8; /* 横线颜色 #D8D8D8 */
}

.cpxqdetail-product-detail-title {
    margin-bottom: 12px; /* 文字和横线间距 12px */
}

.product-parameter-image {
    padding-top: 24px; /* 图片与正文的上间距 12px */
    margin-bottom: 12px; /* 图片与下方元素的下间距 12px */
    display: block; /* 确保图片作为块级元素，方便设置外边距 */
    max-width: 100%; /* 保持图片响应式 */
    height: auto;
}

.product-detail-divider {
    height: 1px; /* 横线高度 1px */
    background-color: #D8D8D8; /* 横线颜色 #D8D8D8 */
    margin-bottom: 12px; /* 横线与正文间距 12px */
}

.product-detail-content {
    font-size: 16px; /* 正文字号 16px */
    padding-top: 8px;
    line-height: 34px; /* 正文行高 12px */
    color: #333; /* 正文颜色，可按需调整 */
}

.product-detail-content2 {
padding-top: 12px
}
.product-detail-content2 li {
    list-style-type: none; /* 移除默认列表样式 */
    position: relative;
    padding-left: 25px; /* 为图标腾出空间 */
    margin-bottom: 8px; /* 每个列表项底部添加间距 */
box-sizing: border-box; /* 让内边距包含在元素宽度内 */
}
.product-detail-content2 li::before {
    content: "•"; /* 使用圆点字符 */
    position: absolute;
    left: 0;
    color: #333; /* 圆点颜色 */
    font-size: 24px; /* 圆点大小 */
line-height: 1; /* 设置行高，确保圆点垂直居中 */
}

.product-detail-content3 li {
    font-size: 16px; /* 正文字号 16px */
    padding-top: 0px;
    padding-bottom: 36px;
    line-height: 30px; /* 正文行高 12px */
    color: #333; /* 正文颜色，可按需调整 */
}

@media (max-width: 480px) {
.cpxqlbcxx-right-container h1.cpxqdetail-title:first-of-type {
    text-align: center;
    padding-bottom: 40px;
    font-size: 20px;
}
.cpxqlbcxx-right-container h2.cpxqdetail-product-detail-title {
    text-align: left;
    font-size: 18px;
    padding-top: 80px;
}

}



/*售后服务-详细 开始*/
.after-sales-service-bg {
    width: 100%;
}

.after-sales-service {
    margin: 0 auto; /* 水平居中 */
    padding: 0 80px; /* 左右边距固定为 80px，且保持不变 */
}

.after-sales-service .section-title {
    /* 标题布局上下间距和产品中心一样 */
    margin-top: 52px; /* 需根据实际产品中心标题上边距调整 */
    margin-bottom: 60px; /* 需根据实际产品中心标题下边距调整 */
}

.service-container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px; /* 模块间距 32px */
    justify-content: center;
}

.service-item {
    background-color: #F6F7FB;
    width: 363px; /* 模块宽度固定为 363px */
    height: auto; /* 高度随内容自适应 */
    padding: 0; /* 重置内边距 */
    box-sizing: border-box; /* 让内边距包含在元素尺寸内 */
    text-align: center; /* 内容居中 */
}

.service-icon {
    width: 128px;
    height: 128px;
    margin-top: 36px; /* 图标上边距 36px */
    margin-bottom: 32px; /* 图标与标题间距 12px */
}

.service-title {
    font-size: 20px; /* 标题字号 20px */
    color: #666666; /* 标题颜色 #666666 */
    margin: 0 0 8px; /* 标题与正文间距 12px */
}

.service-text {
    font-size: 15px; /* 正文字号 16px */
    line-height: 25px;
    color: #666666; /* 正文颜色 #666666 */
    word-wrap: break-word; /* 文字换行自适应 */
    overflow-wrap: break-word; /* 文字换行自适应 */
    max-width: 302px; /* 正文最大宽度 302px */
    margin: 0 auto 40px; /* 正文上下间距 12px，下边距 40px */
    padding: 0 20px;
}


@media (max-width: 480px) {
    .back-link {
    display: none;
}
   .cpxqlbcxx-right-container {
    max-width: auto;
    margin: 0px 0px;
    padding: 40px 20px;
    background-color: #ffffff;
    box-sizing: border-box;
    min-height: 100%;
    position: relative; /* 添加相对定位，作为 back-link 的定位参考 */
}
}
@media (max-width: 1200px) {
    .service-item {
        flex: 1 1 calc(50% - 20px); /* 小屏幕下每行显示 2 个 */
    }
}
@media (max-width: 768px) {
    .after-sales-service {
        padding: 0 10px; /* 两边边距缩小到 10px */
    }

    .service-container {
        gap: 10px; /* 中间间距缩小到 10px */
    }

    .service-item {
        flex: 1 1 calc(50% - 10px); /* 小屏幕下每行显示 2 个 */
        padding: 10px;
    }
}
/*售后服务-详细 结束*/



/*合作案例-详细 开始*/
.cooperation-case-bg {
    background-color: #EBEDF3;
    width: 100%;
    height: auto;
    margin-top: 100px; /* 合作案例整个模块距离售后服务模块 100px */
}

.cooperation-case {
    /* 动态计算左右边距，最大 171px，最小 80px */
    margin: 0 calc(80px + (171 - 80) * ((100vw - 320px) / (1440 - 320)));
    padding: 80px 0 100px; /* 标题上间距 80px，图片距离合作案例模块底部 100px */
}

.cooperation-case .section-title {
    /* 标题布局上下间距和售后服务标题一样 */
    margin-top: 0; /* 重置标题默认上边距 */
    margin-bottom: 与售后服务标题相同的下边距;
}

.cooperation-case-image {
    max-width: 1386px;
    max-height: 666px;
    width: 100%;
    height: auto;
    object-fit: contain; /* 保持图片比例，完整显示在容器内 */
    display: block; /* 去除图片底部间隙 */
    margin: 0 auto; /* 图片水平居中 */
}

@media (max-width: 768px) {
    .cooperation-case {
        margin: 0 20px; /* 小屏幕时减小边距 */
    }
}
/*合作案例-详细 结束*/





/*联系我们*/
.contact-container {
    display: flex; /* 使用 flexbox 布局 */
    gap: 60px; /* 设置两个容器的间距为 60px */
    margin-left: 200px; /* 左边容器距页面左边 200px */
}

.map-container {
    flex: 1; /* 让图片容器占据一定比例的空间 */
    text-align: right; /* 图片靠右显示 */
    margin-top: 60px;
    margin-bottom: 60px;
}

.map-container img {
    max-width: 100%; /* 确保图片不会超出容器宽度 */
    height: auto; /* 保持图片比例 */
    width: auto;
}

.text-container {
    flex: 1; /* 让文字容器占据一定比例的空间 */
    text-align: left; /* 文字左对齐 */
     margin-top: 60px;
     margin-bottom: 60px;
     padding-top: 200px;
}

.text-container h1,
.text-container p {
    margin-top: 0;
    margin-bottom: 30px; /* 设置底部外边距为 30px */
     line-height: 32px;
}

@media (max-width: 480px) {
    .map-container img {
    max-width: 100%; /* 确保图片不会超出容器宽度 */
    height: auto; /* 保持图片比例 */
    width: auto;
    }
    .ab-ban{
     max-width: 100%; /* 确保图片不会超出容器宽度 */
    height: auto; /* 保持图片比例 */
    width: auto;
    }
    .contact-container {
    gap: 0px; /* 设置两个容器的间距为 60px */
    margin-left: 30px; /* 左边容器距页面左边 200px */
    margin-right: 30px;
}
.text-container {
    flex: 1; /* 让文字容器占据一定比例的空间 */
    text-align: left; /* 文字左对齐 */
     margin-top: 60px;
     margin-bottom: 30px;
     padding-top: 0px;
}
}


/*联系我们 结束*/