/* 面包屑导航 效果*/ .cp-list-mianbaoxiaodhbj{background:#f5f5f7;height:60px;line-height:60px;font-size:16px; white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 显示省略号 */} .cp-list-mianbaoxiaodhbj a{text-decoration:none;color:#282828;} .cp-list-mianbaoxiaodhbj a:hover{text-decoration:underline;color:#282828;} /* 当屏幕宽度小于等于 414px 时,字体大小设置为 12px */ @media screen and (max-width: 414px) { .cp-list-mianbaoxiaodhbj{background:#f5f5f7;height:60px;line-height:60px;font-size:12px;} } /* 360度全景图 效果*/ /* 默认样式,适用于电脑端 */ .div-container-top { margin-top: 60px; } /* 当屏幕宽度小于768px时,适用于手机端 */ @media (max-width: 767px) { .div-container-top { margin-top: 30px; } } #viewer { width:100% height: auto; /* 自适应高度 */ background: #dbe2ea no-repeat center center; /* 背景图片居中且不重复 */ background-size: cover; /* 覆盖整个容器,保持图片比例 */ border-radius: 15px; /* 圆角矩形 */ overflow: hidden; /* 隐藏超出的部分 */ } /* 针对手机和小屏设备的媒体查询 */ @media (max-width: 768px) { /* 通常768px作为移动设备的宽度断点 */ #viewer { width:100%; /* 设置宽度为视口的100% */ } } .viewerwenzi { display: flex; align-items: center; justify-content: center; margin-top:18px; } .viewerwenzi i { font-size: 30px; font-weight: 600; margin-right: 5px; /* 调整图标与文字之间的间距 */ font-size: 28px; color:#ff0000; } .viewerwenzi span { font-size: 16px; line-height: 30px; /* 与图标的行高保持一致 */ color:#ff0000; font-weight:600; } .divtouwenzi h2 { font-size: 35px; color: #333333; } .divtouwenzi p { font-size: 16px; color: #666666; line-height:28px; } @media (max-width: 767px) { /* 小于等于 767px 时应用 */ .divtouwenzi h2 { font-size: 20px; } .divtouwenzi p { font-size: 16px; color: #666666; line-height:28px; } } .touwzhr { border: none; /* 移除默认边框 */ background-color: #eeeeee; /* 设置背景色 */ height: 1px; /* 设置高度 */ margin: 20px 0; /* 设置上下边距 */ } .maidian-grid-item { border: 1px solid #eeeeee; border-radius: 8px; text-align: center; padding-top:10px; padding-bottom:10px; margin-bottom: 15px; } .maidian-grid-icon { font-size: 30px; color: #00a3ff; margin-bottom: 10px; } .maidian-grid-icon i{ font-size: 38px; padding-top:10px; } .maidian-grid-title { font-size: 16px; color: #686666; margin-top: 0; font-weight:400; } /* Center vertically */ .maidian-flex-center { display: flex; justify-content: center; align-items: center; height: 100%; } @media (max-width: 767px) { /* 小于等于 767px 时应用 */ .maidian-grid-item { border: 1px solid #eeeeee; border-radius: 8px; text-align: center; padding-top:5px; padding-bottom:5px; margin-bottom: 5px; } .maidian-grid-title { font-size: 14px; color: #686666; margin-top: 0; font-weight:400; } } .maidian-custom-btn { background-color: #0188ff; border-radius: 50px; padding: 10px 22px; display: inline-block; } .maidian-custom-btn a { font-size: 20px; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block; line-height: 1; vertical-align: middle; /* 垂直居中对齐 */ } .maidian-custom-btn .glyphicon { margin-right: 10px; /* 图标与文字之间的间距 */ vertical-align: middle; /* 垂直居中对齐 */ font-size:30px; } .maidian-custom-btn a:hover { color: #ffffff; text-decoration: none; } /* 产品功能 效果*/ .cp-gn-full-screen-bg { background:url(../images/cp-gn-bg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:60px; } .cp-gn-full-screen-zlbg { background:url(../images/cp-gn-zlbg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:60px; } /* 电脑端 */ @media (min-width: 768px) { .cp-top-mp { margin-top: 60px; margin-bottom: 60px; } .cp-title-mp{ margin-top: 60px; margin-bottom: 60px; } .cp-row-mp{ margin-bottom: 20px;} } /* 手机端 */ @media (max-width: 767px) { .cp-top-mp { margin-top: 30px; margin-bottom: 30px; } .cp-title-mp { margin-top: 30px; margin-bottom: 30px; } .cp-row-mp{ margin-bottom: 30px;} } /*产品选项卡单页css避免代码冲突*/ .nav-tabs{border:0} /* 设置选项卡样式 */ .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background-color: #0188ff; /* 选中选项卡背景色 */ color: #ffffff; /* 选中选项卡文字色 */ font-size: 20px; /* 字体大小 */ font-weight: 600; /* 字体加粗 */ } .nav-tabs > li > a { background-color: #ffffff; /* 未选中选项卡背景色 */ color: #262626; /* 未选中选项卡文字色 */ font-size: 20px; /* 字体大小 */ font-weight: 200; /* 字体加粗 */ text-align: center; /* 文字居中对齐 */ padding: 25px 45px 25px 45px; /* 调整选项卡的内边距 */ border-top-left-radius: 18px; /* 左上角圆角 */ border-top-right-radius: 18px; /* 右上角圆角 */ } .tab-content { position: relative; /* 相对定位 */ margin-top: 0; /* 与选项卡之间的间距 */ background-color: #f8f9fb; /* tab-content 背景色 */ border-radius: 18px; /* 圆角矩形 */ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 阴影 */ padding: 20px; /* 内边距 */ margin-top:-9px; } .tab-pane { display: none; /* 默认隐藏所有标签页内容 */ } .tab-pane.active { display: block; /* 显示当前选中的标签页内容 */ } .tab-pane { padding:20px; } /* 自定义背景图样式 */ .custom-bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-K7bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-K7bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-K7bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-K7bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-K7bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-K7bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-K7bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-K7bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-k3bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-k3bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-k3bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-k3bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-k3bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-k3bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-k3bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-k3bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-v600bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-v600bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-v600bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-v600bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-v600bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-v600bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-v600bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-v600bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-H601bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-H601bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-H601bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-H601bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-H601bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-H601bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-H601bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-H601bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-H600bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-H600bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-H600bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-H600bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-H600bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-H600bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-H600bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-H600bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-h301bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-h301bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-h301bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-h301bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-h301bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-h301bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-h301bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-h301bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-h300bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-h300bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-h300bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-h300bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-h300bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-h300bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-h300bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-h300bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-etzlbg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etzlbg1.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ border-radius: 15px; /* 圆角半径为15像素 */ } .custom-etzlbg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etzlbg2.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ border-radius: 15px; /* 圆角半径为15像素 */ } .custom-etzlbg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etzlbg3.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ border-radius: 15px; /* 圆角半径为15像素 */ } .custom-etzlbg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etzlbg4.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ border-radius: 15px; /* 圆角半径为15像素 */ } .custom-etzylbg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etzylbg1.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ border-radius: 15px; /* 圆角半径为15像素 */ } .custom-etzylbg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etzylbg2.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ border-radius: 15px; /* 圆角半径为15像素 */ } .custom-etzylbg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etzylbg3.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ border-radius: 15px; /* 圆角半径为15像素 */ } .custom-etzylbg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etzylbg4.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ border-radius: 15px; /* 圆角半径为15像素 */ } .custom-etszbg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etszbg1.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-etszbg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etszbg2.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-etszbg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etszbg3.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-etszbg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background: url('../images/cp-custom-etszbg4.png') #ffffff; /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-Z800bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-Z800bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-Z800bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-Z800bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-Z800bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-Z800bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-Z800bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-Z800bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-xlbg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-xlbg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-xlbg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-xlbg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-xlbg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-xlbg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-xlbg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-xlbg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-jsbg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-jsbg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-jsbg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-jsbg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-jsbg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-jsbg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-jsbg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-jsbg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-K1bg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-k1bg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-K1bg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-K1bg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-K1bg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-K1bg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-K1bg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-K1bg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-gqbg1 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-gqbg1.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-gqbg2 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-gqbg2.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-gqbg3 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-gqbg3.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } .custom-gqbg4 { position: absolute; /* 绝对定位 */ top: 0; /* 位于顶部 */ left: 0; /* 位于左侧 */ width: 100%; /* 宽度填满父级 */ height: 100%; /* 高度填满父级 */ background-image: url('../images/cp-custom-gqbg4.png'); /* 您的背景图像 URL */ background-size: cover; /* 背景图像尺寸调整为覆盖整个 div */ background-position: center; /* 背景图像位置居中 */ } /* 在电脑端(屏幕宽度大于等于 768px)下 */ @media (min-width: 768px) { /* 设置选项卡居中对齐 */ .nav-tabs { display: flex; justify-content: center; } .nav-tabs > li { float: none; margin-left: 10px; /* 左外边距 */ margin-right: 10px; /* 右外边距 */ padding-left: 10px; /* 左内边距 */ padding-right: 10px; /* 右内边距 */ } .tab-title { font-size: 38px; /* 标题大小 */ font-weight: bold; /* 加粗 */ color: #0188ff; /* 颜色 */ margin-bottom: 10px; /* 底部边距 */ padding-top:80px; padding-left:50px; } .tab-content-text { font-size: 22px; /* 内容大小 */ font-weight:200; color: #252424; /* 颜色 */ width:60%; padding-left:50px; line-height:50px; } } /* 在手机端下 */ @media (max-width: 767px) { /* 设置选项卡容器为 Flex 布局,并使其内部项目水平排列 */ .nav-tabs { display: flex; flex-wrap: wrap; /* 如果选项卡过多,允许它们换行 */ justify-content: space-between; /* 平均分配剩余空间,使选项卡之间间距相等 */ } /* 设置选项卡列表项的宽度为50%,以便一行显示两个选项卡 */ .nav-tabs > li { width: 50%; /* 设置宽度为50%,减去一些间距以确保在一行内显示 */ max-width: 50%; /* 设置最大宽度,防止在缩放时溢出 */ margin-bottom: 10px; /* 添加一些底部间距,以便在行之间添加间隔 */ } .nav-tabs > li { float: none; margin-left: 0px; /* 左外边距 */ margin-right: 0px; /* 右外边距 */ padding-left: 5px; /* 左内边距 */ padding-right: 5px; /* 右内边距 */ } /* 设置选项卡样式 */ .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background-color: #0188ff; /* 选中选项卡背景色 */ color: #ffffff; /* 选中选项卡文字色 */ font-size: 16px; /* 字体大小 */ font-weight: 600; /* 字体加粗 */ } .nav-tabs > li > a { background-color: #ffffff; /* 未选中选项卡背景色 */ color: #262626; /* 未选中选项卡文字色 */ font-size: 16px; /* 字体大小 */ font-weight: 200; /* 字体加粗 */ text-align: center; /* 文字居中对齐 */ padding: 25px 2px; /* 调整选项卡的内边距 */ border-top-left-radius: 18px; /* 左上角圆角 */ border-top-right-radius: 18px; /* 右上角圆角 */ border-bottom-left-radius: 18px; /* 左上角圆角 */ border-bottom-right-radius: 18px; /* 右上角圆角 */ } .tab-title { font-size: 25px; /* 标题大小 */ font-weight: bold; /* 加粗 */ color: #0188ff; /* 颜色 */ margin-bottom: 10px; /* 底部边距 */ padding-top:40px; } .tab-content-text { font-size: 14px; /* 内容大小 */ font-weight:200; color: #252424; /* 颜色 */ width:100%; line-height:35px; white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ } } /* 产品细节 效果 */ .cp-xj-full-screen-bg { background:url(../images/cp-xj-bg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } .cp-xj-full-screen-k7bg { background:url(../images/cp-xj-bg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } .cp-xj-full-screen-v600bg { background:url(../images/cp-xj-v600bg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } .cp-xj-full-screen-etzhbg { background:url(../images/cp-xj-etzhbg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } .cp-xj-full-screen-etzh-xjbg{ background:url(../images/cp-xj-etzh-xj.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:50px; } .cp-xj-full-screen-Z800bg { background:url(../images/cp-xj-Z800bg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } .cp-xj-full-screen-k1bg { background:url(../images/cp-xj-k1bg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } .cp-xj-full-screen-gqbg { background:url(../images/cp-xj-gqbg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } /* 产品参数 效果 */ .cp-cs-bg{background:#dcdcdc;height:52px;line-height:52px;font-size:24px;color:#282828;font-weight:600;padding-left:50px;} .cp-cs-bg-bs{background:#ffffff;height:52px;line-height:52px;font-size:20px;color:#434242;font-weight:200;padding-left:50px;} /* 在手机端的样式 */ @media only screen and (max-width: 767px) { .cp-cs-bg { padding-left: 15px; padding-right: 15px; height:auto;line-height:52px; } .cp-cs-bg-bs { padding-left: 15px; padding-right: 15px; height:52px;line-height:50px; } .cp-cs-bg-bs1 { background:#ffffff;font-size:20px;color:#434242;font-weight:200; padding-left: 15px; padding-right: 15px; height:auto;line-height:52px; } } .cp-line-border-bottom { border-bottom: 1px solid #c9c9c9; } /* 多场景适用 效果 */ .fu-title-p{font-size:18px;margin-top:15px;margin-bottom:30px;} .thumbnail-container { position: relative; border-radius: 10px; overflow: hidden; /* 确保图片不会溢出容器 */ text-align: center; /* 水平居中对齐 */ margin-top:10px; margin-bottom:10px; } .thumbnail-container img { width: 100%; /* 图片占满容器 */ display: block; /* 去掉图片下方的空白 */ } .cp-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); /* 黑色透明度为 30% 的覆盖层 */ } .caption { position: absolute; bottom: 20px; left: 0; width: 100%; padding: 10px; /* 可根据需要调整 */ box-sizing: border-box; /* 确保 padding 不会影响宽度 */ } .caption h3 { font-size: 22px; font-weight: bold; color: #fff; margin: 0; /* 去掉标题的默认边距 */ } .caption p { font-size: 14px; color: #fff; margin: 5px 0 0; /* 调整段落的上边距 */ text-align: center; /* 水平居中对齐 */ } /* 在手机端的样式 */ @media only screen and (max-width: 767px) { .caption { position: absolute; bottom: 20px; left: 0; width: 100%; padding: 0px; /* 可根据需要调整 */ box-sizing: border-box; /* 确保 padding 不会影响宽度 */ } .caption h3 { font-size: 16px; font-weight: bold; color: #fff; margin: 0; /* 去掉标题的默认边距 */ } } /* 客户案例 效果 */ .cp-al-bg { background:url(../images/cp-al-bg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:60px; } #certify { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; } .swiper-container { padding-bottom: 60px; } .swiper-slide { display: flex; align-items: center; width: 100%; max-width: 78%; height: 348px; background: #fff; /* box-shadow: 0 8px 30px #ddd; */ padding: 20px; border-radius: 20px; /* 控制圆角大小 */ } .swiper-slide img { flex-shrink: 0; width: auto; height: 100%; margin-right: 20px; border-radius: 20px; /* 控制圆角大小 */ } .swiper-slide .content { flex-grow: 1; margin-bottom: 80px; /* 设置标题和段落之间的间距 */ padding:20px; } .swiper-slide h2 { font-size: 1.5em; margin-bottom: 10px; } .swiper-slide h2 a{text-decoration:none;color:#3f3f3f;} .swiper-slide h2 a:hover{text-decoration:none;color:#3f3f3f;} .swiper-slide p { line-height: 1.5; color: #636363; font-size: 0.9em; margin: 0; } .swiper-pagination { width: 100%; bottom: 20px; } .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; border: 3px solid #fff; background-color: #d5d5d5; width: 10px; height: 10px; opacity: 1; } .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 3px solid #00aadc; background-color: #fff; } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; background: url(../images/wm_button_icon.png) no-repeat; background-size: 100%; cursor: pointer; } .swiper-button-prev { left: -10px; background-position: 0 0; } .swiper-button-next { right: -30px; background-position: 0 -93px; } .swiper-button-prev:hover { background-position: 0 -46px; } .swiper-button-next:hover { background-position: 0 -139px; } /* 在小屏幕设备(如手机)下应用不同的样式 */ @media (max-width: 767px) { .image-container-cp-al { display: flex; flex-direction: column; align-items: center; } .title-cp-al { margin-top: 0px; /* 可选:设置标题与图片之间的间距 */ white-space: pre-line; /* 强制换行 */ text-align: center; /* 可选:设置标题居中 */ padding-top:5px; padding-bottom:5px; margin-bottom:5px; height:50px; font-size:16px; font-weight:600; } .title-cp-al a{text-decoration:none;color:#3f3f3f;} .title-cp-al a:hover{text-decoration:none;color:#3f3f3f;} } /*工厂实景 效果*/ .cp-gc-rounded-box { border-radius: 10px; /* 圆角矩形的圆角半径 */ border: 1px solid #ccc; /* 边框样式 */ padding: 0px; /* 内边距 */ margin-bottom: 20px; /* 底部外边距 */ } .cp-gc-image-container { overflow: hidden; /* 隐藏图片溢出的部分 */ border-radius: 8px; /* 图片容器的圆角半径 */ } .cp-gc-image-container img { width: 100%; /* 图片宽度100%,填充容器 */ display: block; /* 块级显示 */ } .cp-gc-top-line{margin-top:20px;} /* 证书 效果图 */ .cp-zs-full-screen-bg { background:url(../images/cp-zs-bg.jpg) #f4fafd ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ 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; } .cp-zs-swiper-button-next1{width:60px;height:60px; position: absolute; left: -70px; top: 45%; transform: translate(0, -50%); cursor: pointer; z-index:9999; color:#d5d5d5; } .cp-zs-swiper-button-next1 i{font-size:50px} .cp-zs-swiper-button-prev1 i{font-size:50px} .cp-zs-swiper-button-next1:hover { color:#0188ff; } .cp-zs-swiper-button-prev1{width:60px;height:60px; position: absolute; right: -80px; top: 45%; transform: translate(0, -50%); cursor: pointer; z-index:9999; color:#d5d5d5; } .cp-zs-swiper-button-prev1:hover { color:#0188ff; } .cp-zs-swiper .swiper-slide { height: 400px; /* 设置图片的高度为400px */ width: auto; /* 让宽度自适应保持宽高比 */ object-fit: cover; /* 图片填充方式,保持宽高比并覆盖整个容器 */ padding-top: 20px !important; /* 使用 !important 来确保样式生效 */ } .cp-zs-swiper .swiper-slide h3 { white-space: pre-line; /* 强制换行 */ text-align: center; /* 可选:设置标题居中 */ font-size:18px; font-weight:400; } .image-container-cp-zs { display: flex; flex-direction: column; align-items: center; } .cp-zs-swiper .swiper-slide img { height: 90%; /* 高度自适应,保持宽高比 */ padding-top:5%; } /* 小屏幕下图片自适应 */ @media only screen and (max-width: 767px) { .cp-zs-swiper .swiper-slide img { width: 100%; /* 图片宽度设置为100% */ height: auto; /* 高度自适应,保持宽高比 */ } .cp-zs-swiper .swiper-slide { height: 300px; /* 设置图片的高度为400px */ width: auto; /* 让宽度自适应保持宽高比 */ object-fit: cover; /* 图片填充方式,保持宽高比并覆盖整个容器 */ padding-top: 20px !important; /* 使用 !important 来确保样式生效 */ } } /* 电脑端 */ @media (min-width: 768px) { .cp-title-mp-k7{ margin-top: 60px; margin-bottom: 20px; } .cp-row-mp-k7{ margin-bottom:50px;} } /* 手机端 */ @media (max-width: 767px) { .cp-title-mp-k7 { margin-top: 30px; margin-bottom: 20px; } .cp-row-mp-k7{ margin-bottom: 20px;} } /* 功能细节02 效果 */ /* 默认样式 */ .gn02outer { margin-top: 60px; /* 默认上外边距 */ margin-bottom: 60px; /* 默认下外边距 */ } /* 媒体查询:手机端 */ @media only screen and (max-width: 768px) { .gn02outer { margin-top: 30px; /* 手机端上外边距 */ margin-bottom: 30px; /* 手机端下外边距 */ } } /* 自定义样式 */ .gradient-bg { background: linear-gradient(to right, #f1f4fb, #bbc8e0); border-radius: 10px; padding: 20px; margin-bottom: 20px; margin:0;padding:0; } .gn02title { font-size: 40px; color: #138aff; font-weight: bold; margin-bottom: 10px; } .subgn02title { font-size: 40px; color: #2c3e56; font-weight: bold; margin-bottom: 10px; } .gn02content { font-size: 20px; font-weight:200; color: #2c3e56; margin-bottom: 20px; } .gn02number { font-size: 44px; color: #138aff; font-weight: bold; display: inline; } .gn02fh{ font-size: 44px; color: #138aff; font-weight: bold; display: inline; } .scroll-gn02number { display: inline-block; margin-right: 30px; color:#138aff; font-size:20px; } .image-container { height: 450px; /* 容器高度,这里假设你希望容器高度为450px */ background-image: url('../images/cp-k7-gn02-xj.png'); background-repeat: no-repeat; /* 禁止背景图重复 */ background-position: center; /* 将背景图水平垂直居中 */ background-size: 100% auto; /* 高度100%填充,宽度自适应 */ } .image-containerK1 { height: 450px; /* 让容器高度充满整个屏幕 */ background-image: url('../images/cp-k1-gn02-xj.png'); background-repeat: no-repeat; /* 禁止背景图重复 */ background-position: center; /* 将背景图水平垂直居中 */ background-size: 100% auto; /* 高度100%填充,宽度自适应 */ } .image-containergq { height: 450px; /* 让容器高度充满整个屏幕 */ background-image: url('../images/cp-gq-gn02-xj.png'); background-repeat: no-repeat; /* 禁止背景图重复 */ background-position: center; /* 将背景图水平垂直居中 */ background-size: 100% auto; /* 高度100%填充,宽度自适应 */ } /* 大屏幕设备(电脑端) */ @media (min-width: 768px) { .cp-xj-pd { padding: 50px; } } /* 小屏幕设备(手机端) */ @media (max-width: 767px) { .cp-xj-pd { padding: 15px; padding-top:30px; padding-bottom:30px; } .gn02title { font-size: 25px; color: #138aff; font-weight: bold; margin-bottom: 10px; } .subgn02title { font-size: 25px; color: #2c3e56; font-weight: bold; margin-bottom: 10px; } .gn02content { font-size: 17px; font-weight:200; color: #2c3e56; margin-bottom: 10px; } .gn02number { font-size: 28px; color: #138aff; font-weight: bold; display: inline; } .gn02fh{ font-size: 28px; color: #138aff; font-weight: bold; display: inline; } .scroll-gn02number { display: inline-block; margin-right: 10px; color:#138aff; font-size:15px; } } /* 儿童综合 产品优势 效果 */ .cp-etzh-ys-bg{background:#fffdf2;} .cp-etzh-ys-custom-div { border: 1px solid #fff4c5; border-radius: 10px; position: relative; overflow: hidden; text-align: left; padding: 20px; color: #272727; font-family: Arial, sans-serif; display: flex; flex-direction: column; justify-content: flex-end; z-index: 1; /* 确保内容在背景之上 */ min-height:211px; max-width:396px; margin-bottom:35px; } .cp-etzh-ys-custom-div .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /* 背景图像位于底层 */ background-size: cover; background-position: center; border-radius: 10px; /* 与容器的圆角半径保持一致 */ } .cp-etzh-ys-custom-div .title { font-size: 29px; font-weight: bold; color: #444444; margin-bottom: 10px; display: inline-block; /* 让标题与横线同宽 */ position: relative; /* 相对定位用于伪元素 */ } .cp-etzh-ys-custom-div .content { font-size: 20px; padding-bottom:10px; } .cp-etzh-ys-custom-span { border-bottom: 1px solid #444444; /* 下划线样式 */ padding-bottom: 3px; /* 增加文本和下划线之间的间距 */ margin-bottom: 1px; /* 增加文本和下方内容之间的间距 */ display: inline-block; /* 让 span 元素可以设置宽度和高度 */ } /* 手机端(小于 768px 宽度) */ @media (max-width: 767px) { .cp-etzh-ys-custom-div { border: 1px solid #fff4c5; border-radius: 10px; position: relative; overflow: hidden; text-align: left; padding: 20px; color: #272727; font-family: Arial, sans-serif; display: flex; flex-direction: column; justify-content: flex-end; z-index: 1; /* 确保内容在背景之上 */ margin-bottom:20px; } .cp-etzh-ys-custom-div .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /* 背景图像位于底层 */ background-size: cover; background-position: center; border-radius: 10px; /* 与容器的圆角半径保持一致 */ } .cp-etzh-ys-custom-div .title { font-size: 25px; font-weight: bold; color: #444444; margin-bottom: 10px; display: inline-block; /* 让标题与横线同宽 */ position: relative; /* 相对定位用于伪元素 */ } .cp-etzh-ys-custom-div .content { font-size: 16px; padding-bottom:10px; } } .cp-ys-an-custom-button { display: inline-block; padding: 10px 30px; background-color: #ff9006; /* 背景颜色 */ border: none; border-bottom: 4px solid #ff7c00; /* 底部边框颜色 */ border-radius: 50px; /* 圆角 */ color: white; /* 文字颜色 */ font-size:25px; font-weight: bold; /* 文字加粗 */ text-align: center; text-decoration: none; position: relative; overflow: hidden; box-shadow: 0 8px 16px rgba(255, 234, 201, 0.7); /* 阴影效果 */ width:230px; } .cp-ys-an-custom-button::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-color: #fff125; /* 外发光颜色 */ border-radius: 10px; z-index: -1; transition: all 0.4s; transform: translate(-25%, -25%) rotate(45deg); } .cp-ys-an-custom-button:hover::before { transform: translate(-25%, -25%) rotate(45deg) scale(2); } .cp-ys-an-custom-button:hover{text-decoration:none;color:#ffffff; } /* 儿童综合 硬件配置 效果 */ .red-bg { background-color: #fffae5; /* 左侧格子背景颜色为红色 */ } .white-bg { background-color: white; /* 右侧格子背景颜色为白色 */ } /* 在电脑端(屏幕宽度大于等于 768px)下 */ @media (min-width: 768px) { .cp-yjpz-custom-grid-left{ border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .cp-yjpz-custom-grid-right{ border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .cp-yjpz-custom-grid { display: flex; /* 使用 Flexbox 布局 */ align-items: center; /* 垂直居中对齐 */ justify-content: flex-start; /* 水平左对齐 */ border: 1px solid #fffae5; box-shadow: 5px 5px 5px 5px rgba(255, 247, 230, 1); padding: 20px; border-radius: 20px; } .cp-yjpz-custom-grid-left, .cp-yjpz-custom-grid-right { display: flex; flex-direction: column; align-items: flex-start; /* 垂直居中对齐 */ } .cp-custom-yj-pztitle { font-size: 28px; font-weight: bold; color: #000000; text-align: left; /* 将标题文本水平左对齐 */ padding: 20px; padding-bottom:0; } .cp-custom-yj-pzcontent { font-size: 20px; color: #000000; text-align: left; /* 将内容文本水平左对齐 */ padding: 10px; padding-top:0; padding-bottom:0; } .cp-custom-yj-pzcontent .icon { font-size: 20px; color: #1c95d9; margin-right: 10px; } } /* 小屏幕设备(如手机端)的字体大小 */ @media only screen and (max-width: 768px) { .cp-yjpz-custom-grid-left{ border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .cp-yjpz-custom-grid-right{ border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .cp-yjpz-custom-grid { border: 1px solid #fffae5; box-shadow: 5px 5px 5px 5px rgba(255, 247, 230, 1); padding: 20px; border-radius: 20px; } .cp-yjpz-custom-grid-left, .cp-yjpz-custom-grid-right { } .cp-custom-yj-pztitle { font-size: 22px; font-weight: bold; color: #000000; text-align: left; /* 将标题文本水平左对齐 */ padding: 10px; padding-bottom:0; } .cp-custom-yj-pzcontent { font-size: 16px; color: #000000; text-align: left; /* 将内容文本水平左对齐 */ padding: 10px; padding-top:0; padding-bottom:0; } .cp-custom-yj-pzcontent .icon { font-size: 16px; color: #1c95d9; margin-right: 10px; } } /* 经典智力测验量表 效果 */ /* 电脑端 */ @media (min-width: 768px) { .etzl-lb-custom-col { position: relative; /* 设置相对定位 */ height: 322px; /* 最高div的高度,确保足够空间 */ margin:10px; padding:10px; } .etzl-lb-custom-div { background-color: #dbeef6; border-radius: 10px; text-align: center; padding: 10px; margin-bottom: 5px; position: absolute; bottom: 0; /* 从底部开始 */ width: 100%; } .etzl-lb-custom-div img { width: 100%; height: auto; border-bottom: 1px solid #ccc; padding-top:20px; } .etzl-lb-custom-div h2 { font-size: 29px; font-weight: bold; color: #1091da; margin-top: 10px; line-height:35px; } /* 递减高度设置 */ .etzl-lb-custom-div-1 { height: 322px; } .etzl-lb-custom-div-2 { height: 306px; } /* 10% less than div 1 */ .etzl-lb-custom-div-3 { height: 292px; } /* 10% less than div 2 */ .etzl-lb-custom-div-4 { height: 278px; } /* 10% less than div 3 */ .etzl-lb-custom-div-5 { height: 265px; } /* 10% less than div 4 */ } /* 在手机端(小于等于768px宽度)设置字体大小为 14px */ @media (max-width: 768px) { .etzl-lb-custom-col { width:90% margin:5%; } .etzl-lb-custom-div { background-color: #dbeef6; border-radius: 10px; text-align: center; padding: 10px; margin-bottom: 5px; width: 100%; margin-top:10px; } .etzl-lb-custom-div img { width: 100%; height: auto; border-bottom: 1px solid #ccc; padding-top:20px; } .etzl-lb-custom-div h2 { font-size: 20px; font-weight: bold; color: #1091da; margin-top: 10px; line-height:35px; } } /* 儿童智力 产品细节 背景图 效果*/ .etzl-cpxj-bg { background:url(../images/etzl-cpxj-bg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } /* 儿童注意力 产品细节 背景图 效果*/ .etzyl-cpxj-bg { background:url(../images/etzyl-cpxj-bg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } /* 儿童经典测评量表 效果 */ .cp-zyl-grid-cell { border: 1px solid #47b368; background-color: #fffdec; border-radius: 0 35px 0 35px; display: flex; flex-direction: column; align-items: center; height: 286px; position: relative; margin-top:10px; margin-bottom:10px; } .cp-zyl-icon { font-size: 60px; color: #f9b21f; margin-top:60px; } .cp-zyl-title-lb { background: linear-gradient(to right, #4ab27f, #9bdda3); width: 100%; height: 75px; border-radius: 0 35px 0 35px; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; border-top-right-radius: 10px; color:#ffffff; font-size:26px; font-weight:600; } .etzyl-circle-icon { width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom, #0fa466, #3dc88e); color: #fff; font-size: 24px; margin-top: 50px; } .etzyl-circle-icon i{font-size:40px;} @media (max-width: 767px) { .etzyl-circle-icon { width: 60px; height: 60px; font-size: 16px; margin-top: 50px; } .etzyl-circle-icon i{font-size:24px;} .col-xs-1-5 { width: 42%; float: left; } .cp-zyl-grid-cell { border: 1px solid #47b368; background-color: #fffdec; border-radius: 0 35px 0 35px; display: flex; flex-direction: column; align-items: center; height: 220px; position: relative; margin-top:10px; margin-bottom:10px; } .cp-zyl-title-lb { background: linear-gradient(to right, #4ab27f, #9bdda3); width: 100%; height: 55px; border-radius: 0 35px 0 35px; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; border-top-right-radius: 10px; color:#ffffff; font-size:18px; font-weight:600; } } /* 电脑端 */ @media (min-width: 768px) { /* 设置外部上下间距为60px */ .cp-etzyl-m-box { margin-top: 60px; margin-bottom: 60px; } } /* 手机端 */ @media (max-width: 767px) { /* 设置外部上下间距为30px */ .cp-etzyl-m-box { margin-top: 30px; margin-bottom: 30px; } } /* 产品优势 效果 */ .etzyl-cpys-custom-box { position: relative; /* 添加相对定位 */ border: 1px solid #26ac39; border-radius: 5px; padding: 10px; text-align: center; box-shadow: 0 2px 4px rgba(228, 249, 237, 0.1); /* 添加阴影效果 */ } .etzyl-cpys-square { background: linear-gradient(to bottom, #aed084, #219b48, #a6d473); border: 1px solid #26ac39; border-radius: 20px; padding: 15px; display: inline-block; position: absolute; /* 设置为绝对定位 */ top: -1px; /* 位置调整到etzyl-cpys-custom-box的顶部上方1像素位置 */ left: 50%; /* 水平居中 */ transform: translate(-50%, -50%); /* 水平和垂直居中对齐 */ z-index: 1; /* 确保位于最上层 */ padding-left:30px; padding-right:30px; } .etzyl-cpys-icon { color: #fff; font-size: 35px; } .etzyl-cpys-icon i{font-size: 35px;} .etzyl-cpys-title { font-size: 25px; font-weight: bold; color: #000; margin-top:60px; } .etzyl-cpys-content { font-size: 18px; color: #060001; margin-bottom:40px; } /* 电脑端 */ @media (min-width: 768px) { /* 设置外部上下间距为60px */ .cp-etzyl-ys-list-box { margin-top: 80px; margin-bottom: 30px; } } /* 手机端 */ @media (max-width: 767px) { /* 设置外部上下间距为30px */ .cp-etzyl-ys-list-box { margin-top: 80px; margin-bottom: 20px; } .etzyl-cpys-title { font-size: 20px; font-weight: bold; color: #000; margin-top:45px; } .etzyl-cpys-content { font-size: 14px; color: #060001; margin-bottom:40px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; /* 控制显示行数 */ line-height: 1.5; /* 文本行高,需要与实际文本内容的行高匹配 */ } .etzyl-cpys-custom-box { position: relative; /* 添加相对定位 */ border: 1px solid #26ac39; margin-bottom:60px; } } /* 儿童生长 功能 效果 */ .custom-etszdiv { padding: 20px; border-radius: 10px; text-align: center; transition: all 0.3s; } .selected-etszdiv { background-color: #fff29a; color: #ff7200; } .selected-etszdiv .title-etsz { color: #ff7200; /* 设置选中状态下标题的颜色为橙色 */ } .unselected-etszdiv { background-color: #e7f5ff; color: #5288f5; } .title-etsz { font-size: 23px; font-weight: bold; color: #282828; line-height: 28px; margin-top:15px; margin-bottom:15px; } .content-etsz { font-size: 17px; color: #212121; line-height: 28px; margin-bottom:20px; } .icon-etsz { font-size: 45px; margin-top:20px; } .unselected-etszdiv:hover { background-color: #fff29a; color: #ff7200; } .unselected-etszdiv:hover .title-etsz { color: #ff7200; } /* 手机端(宽度小于等于 767px) */ @media (max-width: 767px) { .custom-etszdiv { padding: 5px; border-radius: 10px; text-align: center; transition: all 0.3s; margin-top:10Px; } .selected-etszdiv { background-color: #fff29a; color: #ff7200; margin-top:10Px; } .title-etsz { font-size: 16px; font-weight: bold; color: #282828; line-height: 28px; margin-top:15px; margin-bottom:15px; } .content-etsz { font-size: 14px; color: #212121; line-height: 28px; margin-bottom:20px; } } /* 电脑端(宽度大于等于 768px) */ @media (min-width: 768px) { .row-m-etsz-top { margin-top:55px; margin-bottom:0; } } /* 手机端(宽度小于等于 767px) */ @media (max-width: 767px) { .row-m-etsz-top { margin-top:30px; margin-bottom:0; } } /* 电脑端(宽度大于等于 768px) */ @media (min-width: 768px) { .row-m-etsz { margin-top:50px; margin-bottom:0; } } /* 手机端(宽度小于等于 767px) */ @media (max-width: 767px) { .row-m-etsz { margin-top:30px; margin-bottom:0; } } /* 儿童生长 产品配置 效果 */ .custom-etsz-pz-divout { background-color: #e7f5ff; border-radius: 20px; padding: 20px; text-align: center; margin-bottom:20px; } .custom-etsz-pz-div { background-color: #e7f5ff; border-radius: 5px; padding: 20px; text-align: left; display: flex; align-items: center; } .custom-etsz-pz-title { font-size: 24px; font-weight: bold; color: #35c3ff; margin-left: 20px; } .custom-etsz-pz-badge { display: inline-block; border-radius: 50%; background-color: #ffffff; color: #29c0ff; font-size: 24px; font-weight: bold; padding: 5px 18px; } /* 效果通用 高度间距 效果*/ @media (min-width: 768px) { .tongyong-mp-custom-div { margin-top: 60px; margin-bottom: 60px; } } @media (max-width: 767px) { .tongyong-mp-custom-div { margin-top: 30px; margin-bottom: 30px; } } /* 小屋 政策背景 效果 */ .xw-zc-title { font-size: 31px; font-weight: bold; color: #000000; margin-bottom: 10px; text-align: left; } .xw-zc-content { font-size: 17px; color: #7e7e7e; line-height:28px; } .xw-zc-read-more { font-size: 22px; color: #4ca7fc; } .xw-zc-read-more a{ text-decoration:none; color: #4ca7fc; } /* 健康小屋简介 效果 */ .xw-jj-custom-div { background-image: url('../images/xw-jj-bg.jpg'); background-size: cover; padding: 20px; color: #ffffff; text-align: left; min-height:591px; position: relative; /* 设置位置为相对定位 */ } .xw-jj-title { font-size: 38px; font-weight: bold; margin-bottom: 10px; color:#ffffff; } .subxw-jj-title { font-size: 17px; margin-bottom: 10px; color:#ffffff; } .xw-jj-content { font-size: 17px; line-height: 28px; position: absolute; /* 设置位置为绝对定位 */ bottom:20px; /* 将内容置底 */ left: 20px; /* 可根据需要调整左边距 */ right:20px; } .custom-jj-gn-div { padding: 20px; text-align: center; position: relative; } .custom-jj-gn-icon { font-size: 50px; color: #ffffff; position: relative; z-index: 1; } .custom-jj-gn-icon span { background: linear-gradient(to bottom, #87e4ff, #129fff); -webkit-background-clip: text; color: transparent; display: inline-block; } .custom-jj-gn-icon span i{font-size:45px;} .custom-jj-gn-title { font-size: 28px; font-weight: bold; color: #000000; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } .subcustom-jj-gn-title { font-size: 8px; color: #000000; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; } .custom-jj-gn-icon-2 { font-size: 25px; color: #666666; margin-top:0; } .custom-jj-gn-content { font-size: 17px; color: #8e8e8e; text-align: left; } /* 手机端 */ @media (max-width: 767px) { .custom-jj-gn-title { font-size: 16px; font-weight: bold; color: #000000; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; /* 控制显示行数 */ line-height: 1.5; /* 文本行高,需要与实际文本内容的行高匹配 */ } .custom-jj-gn-content { font-size: 12px; color: #8e8e8e; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; /* 指定行数 */ } } /* 小屋 基层问题 效果 */ /* 电脑端(宽度大于等于 768px) */ @media (min-width: 768px) { .xw-jcwt-top { margin-top:100px; margin-bottom:0; } } /* 手机端(宽度小于等于 767px) */ @media (max-width: 767px) { .xw-jcwt-top { margin-top:30px; margin-bottom:30px; } } .cp-xj-full-screen-xw-cjwt-bg { background:#f3f4fa; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } .grid-xw-cjwt-item { padding: 15px; } .grid-xw-cjwt-item img { border: 8px solid #ffffff; border-radius: 10px; margin-bottom: 10px; /* 图片标题增加外部下间距 */ } .grid-xw-cjwt-item h2 { font-size: 25px; font-weight: bold; color: #101011; margin-top: 15px; /* 标题下间距 */ margin-bottom: 5px; /* 标题下间距 */ } .grid-xw-cjwt-item p { font-size: 17px; color: #828282; } /* 手机端 */ @media (max-width: 767px) { .grid-xw-cjwt-item { padding: 2px; } .grid-xw-cjwt-item img { border: 8px solid #ffffff; border-radius: 10px; margin-bottom: 10px; /* 图片标题增加外部下间距 */ } .grid-xw-cjwt-item h2 { font-size: 16px; font-weight: bold; color: #101011; margin-top: 15px; /* 标题下间距 */ margin-bottom: 5px; /* 标题下间距 */ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; /* 指定行数 */ } .grid-xw-cjwt-item p { font-size: 12px; color: #828282; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; /* 指定行数 */ } } /* 小屋 解决方案 效果 */ .cp-xj-full-screen-xwbg{ background:url(../images/cp-xj-full-screen-xwbg.jpg) ; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:30px; } .custom-xw-fa-div { background-color: #ffffff; border: 1px solid #98999a; border-radius: 10px; padding: 25px; display: flex; align-items: center; margin-top:10px; margin-bottom:10px; } .custom-xw-fa-div .icon { width: 50px; height: 50px; border-radius: 15px; background-color: #059aff; text-align: center; line-height: 50px; color: #ffffff; font-size: 20px; margin-right: 10px; } .custom-xw-fa-div .icon i{ font-size: 25px; } .custom-xw-fa-div .text { flex: 1; } .custom-xw-fa-div h2 { font-size: 22px; color: #060001; margin: 0; } .custom-xw-fa-div p { font-size: 12px; color: #7d7d7d; margin: 0; } /* 手机端 */ @media (max-width: 767px) { .custom-xw-fa-div h2 { font-size: 14px; color: #060001; margin: 0; clear:both; } .custom-xw-fa-div { background-color: #ffffff; border: 1px solid #98999a; border-radius: 10px; padding: 5px; display: flex; align-items: center; margin-top:10px; margin-bottom:10px; } } .custom-xw-fa-custom-d-div { text-align: center; margin: 10px 0; } .custom-xw-fa-icon-d { color: #81e3ff; font-size: 40px; font-weight: bold; } .custom-xw-fa-title-d { font-size: 20px; color: #000000; } .custom-xw-fa-line-d { height: 4px; width: 57px; background-color: #059aff; margin: 10px auto; } @media (min-width: 768px) { .xw-fa-w-top-custom-div { margin-top: 50px; /* 在电脑上设置外上部间距 */ } } @media (max-width: 767px) { .xw-fa-w-top-custom-div { margin-top: 30px; /* 在手机上设置外上部间距 */ } } /* 小屋 客户细分 配置服务 效果 */ .bordered-row { border: 1px solid #d8d9df; background-color: #ffffff; padding:20px; border-radius: 15px; /* 圆角半径 */ } .custom-xw-ptfw-div { display: flex; align-items: center; margin-bottom: 10px; } .xw-ptfw-icon-container { background-color: #059aff; /* 文字图标外圈矩形圆角背景颜色 */ border: 20px solid #f2f3f7; /* 文字图标外圈矩形描边8PX颜色 */ border-radius: 10px; /* 设置圆角半径 */ padding: 10px; margin-right: 8px; padding-top:2px; padding-bottom:2px; } .xw-ptfw-icon { color: #fff; font-size: 40px; font-weight: bold; } .xw-ptfw-icon i{ font-size: 40px; font-weight: bold; } .xw-ptfw-text-container { flex: 1; padding-left:10px; } .xw-ptfw-title { font-size: 28px; font-weight: bold; color: #000000; margin-bottom: 10px; } .xw-ptfw-content { font-size: 16px; color: #5a5a5a; } /* 手机端 */ @media (max-width: 767px) { .xw-ptfw-icon-container { background-color: #059aff; /* 文字图标外圈矩形圆角背景颜色 */ border: 15px solid #f2f3f7; /* 文字图标外圈矩形描边8PX颜色 */ border-radius: 10px; /* 设置圆角半径 */ padding: 6px; margin-right: 8px; padding-top:2px; padding-bottom:2px; } .xw-ptfw-icon { color: #fff; font-size: 30px; font-weight: bold; } .xw-ptfw-icon i{ font-size: 30px; font-weight: bold; } .xw-ptfw-title { font-size: 20px; font-weight: bold; color: #000000; margin-bottom: 10px; } .xw-ptfw-content { font-size: 14px; color: #5a5a5a; } } /* 小屋 优势 效果 */ .custom-ys-xw--div { border: 2px solid #f2f3f7; /* 设置边框样式 */ border-radius: 10px; /* 设置圆角矩形 */ padding: 20px; /* 设置内边距 */ text-align: center; /* 文字图标,标题居中对齐 */ margin-top:10px; } .icon-ys-xw { font-size: 50px; /* 设置文字图标大小 */ margin-bottom: 10px; /* 设置文字图标与标题之间的间距 */ background: linear-gradient(to bottom, #81e3ff, #059aff); -webkit-background-clip: text; background-clip: text; color: transparent; } .title-ys-xw { font-size: 25px; /* 设置标题大小 */ font-weight: bold; /* 加粗 */ color: #060001; /* 设置标题颜色 */ margin-bottom: 10px; /* 设置标题与内容之间的间距 */ } .content-ys-xw { font-size: 15px; /* 设置内容大小 */ color: #838383; /* 设置内容颜色 */ text-align: left; /* 内容左对齐 */ line-height:25px; } /* 手机端 */ @media (max-width: 767px) { .custom-ys-xw--div { border: 2px solid #f2f3f7; /* 设置边框样式 */ border-radius: 10px; /* 设置圆角矩形 */ padding: 10px; /* 设置内边距 */ text-align: center; /* 文字图标,标题居中对齐 */ margin-top:10px; } .icon-ys-xw { font-size: 35px; /* 设置文字图标大小 */ margin-bottom: 10px; /* 设置文字图标与标题之间的间距 */ background: linear-gradient(to bottom, #81e3ff, #059aff); -webkit-background-clip: text; background-clip: text; color: transparent; } .title-ys-xw { font-size: 16px; /* 设置标题大小 */ font-weight: bold; /* 加粗 */ color: #060001; /* 设置标题颜色 */ margin-bottom: 10px; /* 设置标题与内容之间的间距 */ } .content-ys-xw { font-size: 12px; /* 设置内容大小 */ color: #838383; /* 设置内容颜色 */ text-align: left; /* 内容左对齐 */ line-height:22px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; /* 控制显示行数 */ line-height: 1.5; /* 文本行高,需要与实际文本内容的行高匹配 */ } } /* 小屋 3d 效果 */ .xw-3dxg-custom-img { border-radius: 10px; } .xw-3dxg-content { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .xw-3dxg-content h4 { font-size:17px; color:#060001; font-weight:600; margin: 0; margin-top:15px; } .xw-3dxg-content h4 a{ text-decoration:none; color:#060001; } .xw-3dxg-p a{ text-decoration:none; color:#919191; } .xw-3dxg-text-icon { display: flex; align-items: center; } .xw-3dxg-p{ font-size:13px; color:#919191; margin-top:10px; } .xw-3dxg-text-icon span{ font-size:30px; } /* 手机端 */ @media (max-width: 767px) { .xw-3dxg-content h4 { font-size:16px; color:#060001; font-weight:400; margin: 0; margin-top:10px; line-height:25px; } } /* 随访箱K1 智能化健康管理 效果 */ .grid-k1-ys-item { background-color: #e7f5ff; padding: 20px; text-align: center; border-radius: 10px; margin-bottom: 15px; padding-top:60px; padding-bottom:60px; } .icon-wrapper-k1-ys { background-color: #45d575; width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 10px; display: flex; justify-content: center; align-items: center; } .icon-k1-ys { color: #fff; font-size: 35px; } .title-k1-ys { font-size: 24px; font-weight: bold; color: #1cb953; display: flex; justify-content: center; align-items: center; margin-top:25px; } /* 岗前 核心优势 效果 */ .gq-ys-custom-div { background-color: #fff7f1; padding: 20px; border-top-left-radius: 0; border-top-right-radius: 25px; border-bottom-left-radius: 25px; border-bottom-right-radius: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top:50px; padding-bottom:50px; } .gq-ys-custom-div i { font-size: 50px; font-weight: bold; color: #183efb; margin-top:20px; } .gq-ys-custom-div h1 { font-size: 26px; font-weight: bold; color: #303030; } .gq-ys-custom-div p { font-size: 18px; color: #303030; text-align: center; margin-bottom:30px; } @media (max-width: 767px) { .gq-ys-custom-div { background-color: #fff7f1; padding: 18px; border-top-left-radius: 0; border-top-right-radius: 25px; border-bottom-left-radius: 25px; border-bottom-right-radius: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top:20px; padding-bottom:20px; margin-bottom:20px; } .gq-ys-custom-div h1 { font-size: 20px; font-weight: bold; color: #303030; } .gq-ys-custom-div p { font-size: 16px; color: #303030; text-align: center; margin-bottom:15px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; /* 控制显示行数 */ line-height: 1.5; /* 文本行高,需要与实际文本内容的行高匹配 */ } } /* 手机端 功能细节图 */ /* 添加媒体查询,指定手机端不显示背景图 */ @media (max-width: 767px) { .custom-bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-K7bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-K7bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-K7bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-K7bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-k3bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-k3bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-k3bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-k3bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-v600bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-v600bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-v600bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-v600bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-H601bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-H601bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-H601bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-H601bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-H600bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-H600bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-H600bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-H600bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-h301bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-h301bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-h301bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-h301bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-h300bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-h300bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-h300bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-h300bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etzlbg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etzlbg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etzlbg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etzlbg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etzylbg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etzylbg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etzylbg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etzylbg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etszbg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etszbg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etszbg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-etszbg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-Z800bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-Z800bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-Z800bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-Z800bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-xlbg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-xlbg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-xlbg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-xlbg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-jsbg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-jsbg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-jsbg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-jsbg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-K1bg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-K1bg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-K1bg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-K1bg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-gqbg1 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-gqbg2 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-gqbg3 { background-image: none; /* 在手机屏幕上不显示背景图 */ } .custom-gqbg4 { background-image: none; /* 在手机屏幕上不显示背景图 */ } } /* 解决方案总页 效果 */ .fa-all-bg{background:#f3f3f3;padding-top:50px;padding-bottom:50px;} .faz-grid-item { background-color: white; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); padding: 0; position: relative; overflow:hidden; margin-top:15px; margin-bottom:15px; } .faz-grid-item:hover { background-color: #cae2fc; } .faz-grid-item img { width: 100%; height: auto; transition: transform 0.3s; object-fit: cover; /* 添加这行代码 */ } .faz-grid-item:hover img { transform: scale(1.1); } .faz-overlay { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; } .faz-overlay .faz-title { background-color: rgba(0, 0, 0, 0.3); padding: 20px; display: inline-block; position: relative; } .faz-overlay .faz-title .faz-text { position: relative; } .faz-overlay .faz-title .faz-text a{ text-decoration:none;color:#ffffff; font-size:22px;font-weight: 600; } .faz-overlay .faz-title .faz-text:after { content: ""; display: block; width: 100%; height: 2px; background-color: white; margin-top: 8px; } .faz-overlay .icon { font-size: 35px; } .faz-grid-item .subfaz-title { font-size: 20px; color: #222222; } .faz-grid-item .subfaz-title a{ text-decoration:none;color:#222222; font-size:20px; } .faz-grid-item .subfaz-title a:hover{ text-decoration:underline;color:#222222; font-size:20px; } .faz-grid-item p { font-size: 14px; color: #343434; margin-top:10px; line-height:22px; } .faz-grid-item i { font-size: 35px; color: #999999; margin-top:15px; } .faz-grid-item:hover i { color: #013e7d; } .faz-grid-item a { font-size: 18px; color: #686868; } .faz-gridimgall{overflow:hidden;} .subneirong{padding:18px;} .subneirong a{text-decoration:none;} .faz-Readmore{font-size:14px;margin-top:50px;padding-top:20px;} /* 在手机端(最大宽度为 768px)将字体大小设置为 14px */ @media only screen and (max-width: 768px) { .faz-overlay { position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; } .faz-overlay .faz-title { background-color: rgba(0, 0, 0, 0.3); font-weight: 200; padding: 6px; display: inline-block; position: relative; } .faz-overlay .faz-title .faz-text a{ text-decoration:none;color:#ffffff; font-size:14px; } .faz-overlay .faz-title .faz-text:after { content: ""; display: block; width: 100%; height: 1px; background-color: white; margin-top: 5px; } .faz-overlay .icon { font-size: 20px; } } /* 页面导航 */ .col-xs-1-7, .col-sm-1-7, .col-md-1-7, .col-lg-1-7 { width: 13.28%; /* 100% / 7 */ float: left; min-height: 1px; padding: 20px; position: relative; text-align: center; cursor: pointer; border-top-left-radius: 18px; /* 左上角圆角 */ border-top-right-radius: 18px; /* 右上角圆角 */ background-color: #ffffff; /* 未选中状态背景颜色 */ color: #6b6a6b; /* 未选中状态字体颜色 */ margin-right: 1%; /* 添加外边距 */ margin-top:10px; margin-bottom:10px; } .cp-pg-dh-selected { background-color: #0188ff !important; /* 选中状态背景颜色 */ } .cp-pg-dh-selected .cp-pg-dh-content { color: #ffffff; /* 选中状态字体颜色 */ font-weight: 600; /* 字体加粗 */ } .cp-pg-dh-content { font-size: 20px; font-weight: 200; display: flex; justify-content: center; align-items: center; } .cp-pg-dh-content a { text-decoration: none; color: inherit; } @media (max-width: 768px) { .col-xs-1-7, .col-sm-1-7 { width: 48%; /* 50% for two items per row */ padding: 20px; position: relative; text-align: center; cursor: pointer; border-top-left-radius: 18px; /* 左上角圆角 */ border-top-right-radius: 18px; /* 右上角圆角 */ background-color: #ffffff; /* 未选中状态背景颜色 */ color: #6b6a6b; /* 未选中状态字体颜色 */ margin-right: 1%; /* 添加外边距 */ margin-top:10px; margin-bottom:10px; } .cp-pg-dh-content { font-size: 18px; font-weight: 200; display: flex; justify-content: center; align-items: center; } } .cp-pg-dh a{text-decoration:none;color:#262626;font-weight:200;} .cp-pg-hr hr { border-top: 2px solid #e4e7ed; margin-top: 20px; } /* 案例中心 a超链效果 */ .al_dis-show a{text-decoration:none;color:#333333;} .pg-al-h2{ display: -webkit-box; /* 使用基于行的布局模型 */ -webkit-line-clamp: 2; /* 显示的行数 */ -webkit-box-orient: vertical; /* 垂直方向排列 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ max-height: 2.4em; /* 2行文字的高度,可根据需要调整 */ line-height: 1.2em; /* 行高,使文字能够垂直居中 */ } .pg-al-p{ display: -webkit-box; /* 使用基于行的布局模型 */ -webkit-line-clamp: 4; /* 显示的行数 */ -webkit-box-orient: vertical; /* 垂直方向排列 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ max-height: 5.2em; /* 2行文字的高度,可根据需要调整 */ line-height: 1.2em; /* 行高,使文字能够垂直居中 */ } /* 页面产品导航 间距 */ /* 默认样式,适用于电脑端 */ .cp-pg-dh-topjuli { margin-top: 60px; } /* 媒体查询,适用于小屏幕(手机端) */ @media (max-width: 768px) { .cp-pg-dh-topjuli { margin-top: 30px; } } /* 产品 页面 导航 上部间距 效果 */ /* 电脑端 */ @media (min-width: 768px) { .cp-gn-pg-dh-mp{margin-left:20px} } /* 产品页面 功能图文 效果*/ .cp-gn-custom-rounded-box { background-color: #f8f9fb; /* 背景颜色 */ border-radius: 20px; /* 圆角半径 */ padding: 40px; /* 内边距 */ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* 添加投影 */ overflow:hidden; } .cp-gn-wz-custom-box { padding: 20px; /* 增加内部间距 */ } .cp-gn-wz-custom-title { font-size: 35px; /* 标题大小 */ font-weight: 600; /* 加粗 */ color: #0188ff; /* 颜色 */ margin-bottom: 5px; /* 标题与内容之间的间距 */ margin-top:35px; padding-left:50px; } .cp-gn-wz-custom-content { font-size: 22px; /* 内容大小 */ color: #252424; /* 颜色 */ margin-bottom: 0; /* 去除默认的底部间距 */ font-weight: 200; line-height:45px; padding-left:50px; } /* 电脑端 */ @media (min-width: 768px) { .cp-gn-mp-img-jianju{margin:0;padding:0;} } /* 手机端 */ @media (max-width: 767px) { .cp-gn-custom-rounded-box { background-color: #f8f9fb; /* 背景颜色 */ border-radius: 20px; /* 圆角半径 */ padding: 10px; /* 内边距 */ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* 添加投影 */ overflow:hidden; } .cp-gn-wz-custom-box { padding: 10px; /* 增加内部间距 */ } .cp-gn-wz-custom-title { font-size: 20px; /* 标题大小 */ font-weight: 600; /* 加粗 */ color: #0188ff; /* 颜色 */ margin-bottom: 5px; /* 标题与内容之间的间距 */ margin-top:25px; padding-left:0; } .cp-gn-wz-custom-content { font-size: 16px; /* 内容大小 */ color: #252424; /* 颜色 */ margin-bottom: 0; /* 去除默认的底部间距 */ font-weight: 200; line-height:25px; padding-left:0; } } /* 电脑端 */ @media (min-width: 768px) { .div-class-cp-pg-gn-top { margin-top: 20px; /* 电脑端外上部高度为35px */ } } /* 手机端 */ @media (max-width: 767px) { .div-class-cp-pg-gn-top { margin-top: 10px; /* 手机端外上部高度为20px */ } } /* 解决方案 健康企业 痛点模块 */ .fangan-qy-td-bg01{ background:url(../images/fangan-qy-td-bg01.jpg) #f0f3f9; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:20px; } .fangan-qy-td-custom-box { background-color: #ffffff; border: 1px solid #dddddd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; margin-bottom: 20px; border-radius: 18px; /* 圆角矩形的圆角大小 */ } .fangan-qy-td-custom-box .icon i { font-size: 50px; color: #0040ec; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; margin-top:10px; } .fangan-qy-td-custom-box h3 { font-size: 20px; font-weight: bold; color: #060001; margin-bottom: 10px; } .fangan-qy-td-custom-box p { font-size: 15px; color: #848484; line-height: 25px; text-align: left; /* 文字图标内容左对齐 */ } /* 手机端 */ @media (max-width: 767px) { .fangan-qy-td-custom-box { padding: 15px; } .fangan-qy-td-custom-box h3 { font-size: 16px; font-weight: 600; color: #060001; margin-bottom: 10px; } .fangan-qy-td-custom-box p { font-size: 14px; color: #848484; line-height: 25px; text-align: left; /* 文字图标内容左对齐 */ overflow: hidden; text-overflow: ellipsis; /* 超出部分显示省略号 */ display: -webkit-box; -webkit-line-clamp: 5; /* 显示行数 */ -webkit-box-orient: vertical; } } /* 解决方案 健康企业 政策文件 效果 */ .fangan-qy-zc-bg{ background:url(../images/fangan-qy-zc-bg.jpg) #f2f6fa; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:20px; } /* 自定义的白色背景样式 */ .fangan-qy-white-background { background-color: #ffffff; /* 白色背景 */ /* 可选:添加其他样式,如边框、内边距等 */ padding: 10px; border: 1px solid #ccc; position: relative; /* 设置为相对定位,以便在其上面放置投影 */ z-index: 1; /* 设置z-index为1,使其在普通内容的列上方 */ bottom: -50px; /* 底部超出效果,向下移动50像素 */ } /* 添加投影效果 */ .fangan-qy-with-shadow { box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */ } /* 自定义的带上下边框样式 */ .fangan-qy-bordered-column { border-top: 2px solid #f2f2f2; /* 上边框 */ border-bottom: 2px solid #f2f2f2; /* 下边框 */ margin-top:35px; margin-bottom:35px; } /* 自定义盒子样式 */ .fangan-qy-zcwj-custom-box { text-align: left; /* 标题和内容左对齐 */ display: flex; flex-direction: column; justify-content: center; /* 内容垂直居中 */ align-items: flex-start; /* 内容左对齐 */ padding: 20px; /* 内边距 */ padding-top:30px; } /* 标题样式 */ .fangan-qy-zcwj-title { font-size: 30px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ color: #212121; /* 颜色 */ margin-bottom: 10px; /* 底部外边距 */ padding-left:35px; } /* 内容样式 */ .fangan-qy-zcwj-content { font-size: 17px; /* 字体大小 */ color: #000000; /* 颜色 */ line-height:25px; padding-left:35px; } .fangan-qy-zcwj-down-custom-box { text-align: left; /* 标题和内容左对齐 */ padding: 20px; /* 内边距 */ } /* 标题样式 */ .fangan-qy-zcwj-down-title { font-size: 20px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ color: #000000; /* 颜色 */ margin-bottom: 10px; /* 底部外边距 */ padding-left:35px; } /* 内容样式 */ .fangan-qy-zcwj-down-content { font-size: 18px; /* 字体大小 */ color: #848484; /* 颜色 */ padding-left:35px; } /* 自定义列样式 */ .fangan-qy-zcwj-san-custom-column { position: relative; /* 设置为相对定位 */ padding-right: 1px; /* 右内边距,为了给竖线留出空间 */ } /* 添加右侧竖线 */ .fangan-qy-zcwj-san-custom-column::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; /* 竖线宽度 */ background-color: #ccc; /* 竖线颜色 */ height:90%; } /* 自定义盒子样式 */ .fangan-qy-zcwj-sanyou-custom-box { text-align: left; /* 标题左对齐 */ display: flex; align-items: center; /* 垂直居中对齐 */ padding: 20px; /* 内边距 */ } /* 标题样式 */ .fangan-qy-zcwj-sanyou-title { font-size: 18px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ color: #000000; /* 颜色 */ margin: 0; /* 重置默认外边距 */ } /* 手机端 */ @media (max-width: 767px) { /* 自定义的带上下边框样式 */ .fangan-qy-bordered-column { border-top: 2px solid #f2f2f2; /* 上边框 */ border-bottom: 2px solid #f2f2f2; /* 下边框 */ margin-top:35px; margin-bottom:35px; } /* 自定义盒子样式 */ .fangan-qy-zcwj-custom-box { text-align: left; /* 标题和内容左对齐 */ padding: 10px; /* 内边距 */ padding-top:30px; } /* 标题样式 */ .fangan-qy-zcwj-title { font-size: 20px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ color: #212121; /* 颜色 */ margin-bottom: 10px; /* 底部外边距 */ padding-left:10px; line-height:25px; } /* 内容样式 */ .fangan-qy-zcwj-content { font-size: 17px; /* 字体大小 */ color: #000000; /* 颜色 */ line-height:25px; padding-left:10px; } .fangan-qy-zcwj-down-custom-box { text-align: left; /* 标题和内容左对齐 */ padding: 10px; /* 内边距 */ } /* 标题样式 */ .fangan-qy-zcwj-down-title { font-size: 18px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ color: #000000; /* 颜色 */ margin-bottom: 10px; /* 底部外边距 */ padding-left:10px; } /* 内容样式 */ .fangan-qy-zcwj-down-content { font-size: 16px; /* 字体大小 */ color: #848484; /* 颜色 */ padding-left:10px; } /* 自定义盒子样式 */ .fangan-qy-zcwj-sanyou-custom-box { text-align: left; /* 标题左对齐 */ display: flex; align-items: center; /* 垂直居中对齐 */ padding: 10px; /* 内边距 */ } /* 标题样式 */ .fangan-qy-zcwj-sanyou-title { font-size: 14px; /* 字体大小 */ line-height:35px; } } /* 解决方案 健康企业 解决方案 效果 */ .fangan-qy-jjfa-bg{ background:url(../images/fangan-qy-jjfa-bg.jpg) #1778fa; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:50px; margin-bottom:0; } .fangan-qy-fangan-list-custom-box p { font-size: 20px; padding-top:20px; line-height:35px; font-weight: 200; } /* 电脑端 */ @media (min-width: 768px) { .fangan-qy-fangan-list-custom-box { text-align: center; /* 文字居中 */ padding: 20px; margin-bottom: 20px; color: white; /* 白色文字 */ } .fangan-qy-fangan-list-custom-box .icon { font-size: 32px; display: inline; } .fangan-qy-fangan-list-custom-box h3 { font-size: 35px; font-weight: 600; margin-top: 0; display: inline; color:#ffffff; } } @media (max-width: 767px) { .fangan-qy-fangan-list-custom-box { text-align: center; /* 文字居中 */ padding: 2px; margin-bottom: 1px; color: white; /* 白色文字 */ } .fangan-qy-fangan-list-custom-box .icon { font-size: 35px; color:#ffffff; } .fangan-qy-fangan-list-custom-box h3 { font-size: 20px; font-weight: 400; margin-top: 0; color:#ffffff; } } .fangan-qy-jjfa-dots-container { width: 100%; text-align: center; position: relative; /* 设置相对定位 */ } .fangan-qy-jjfa-dot { display: inline-block; width: 10px; height: 10px; background-color: #8baef0; border-radius: 50%; margin: 0 4%; position: relative; /* 设置相对定位 */ z-index: 10; /* 提高圆点的堆叠顺序 */ } .fangan-qy-jjfa-line { width: 100%; height: 1px; background-color: #8baef0; position: absolute; /* 设置绝对定位 */ top: 50%; /* 上方偏移50% */ transform: translateY(-50%); /* 垂直居中 */ z-index: 1; /* 圆点之下 */ } /* 解决方案 健康企业 产品系列 效果 */ .fangan-qy-cpxl-bg{ background:#f2f6fa; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:50px; margin-top:25px; } /* 解决方案 产品list */ .fangan-qy-cplist-grid-item { background-color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 添加投影效果 */ padding: 20px; margin-bottom: 20px; /* 格子之间的间距 */ text-align: center; } .fangan-qy-cplist-grid-item img { max-width: 100%; /* 图片宽度最大100% */ height: auto; /* 保持图片高度自适应 */ display: block; /* 解决图片底部留白问题 */ margin: 0 auto; /* 图片水平居中 */ } .fangan-qy-cplist-grid-item h3 { font-size: 23px; color: #000000; margin-top: 10px; margin-bottom: 5px; } .fangan-qy-cplist-grid-item p { font-size: 12px; color: #101010; margin-bottom: 0; } .fangan-qy-cplist-grid-item h3 a{ color: #000000;text-decoration:none; } .fangan-qy-cplist-grid-item h3 a:hover{ color: #000000;text-decoration:underline; } /* 解决方案 健康企业 产品之 健康小屋 */ .fangan-qy-cp-xw-custom-row { background-color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 外边框投影效果 */ margin-bottom: 20px; /* 格子之间的间距 */ } .fangan-qy-cp-xw-grid-container { padding: 0; /* 内边距 */ margin:0; } .fangan-qy-cp-xw-grid-item img { max-width: 100%; /* 图片宽度最大100% */ height: auto; /* 保持图片高度自适应 */ display: block; /* 解决图片底部留白问题 */ margin: 0 auto; /* 图片水平居中 */ } .fangan-qy-cp-xw-grid-item h3 { font-size: 27px; font-weight: bold; color: #060001; margin-top: 30px; /* 标题内容上部间距 */ margin-bottom: 10px; /* 标题内容下部间距 */ } .fangan-qy-cp-xw-grid-item p { font-size: 21px; color: #6b6b6b; margin-bottom: 25px; margin-top:25px; line-height:40px; } .fangan-qy-cp-xw-grid-itemneibian{ padding:50px; } .custom-buttons-fangan-cp-xw .btn { background-color: #1763ff; /* 按钮背景颜色 */ color: #ffffff; /* 按钮文字颜色 */ font-size: 20px; /* 按钮文字大小 */ font-weight: 600; /* 按钮文字加粗 */ text-align: left; /* 按钮文字左对齐 */ display: block; /* 将按钮设置为块级元素 */ width: 140px; /* 按钮宽度100% */ height: 50px; /* 按钮高度100% */ text-align: center; /* 文字水平居中 */ line-height: 100%; /* 文字垂直居中 */ padding: 10px 15px; /* 按钮内边距 */ float:left; margin:10px; } /* 手机端 */ @media (max-width: 767px) { .fangan-qy-cp-xw-grid-itemneibian{ padding:10px; } .custom-buttons-fangan-cp-xw .btn { background-color: #1763ff; /* 按钮背景颜色 */ color: #ffffff; /* 按钮文字颜色 */ font-size: 18px; /* 按钮文字大小 */ font-weight: 600; /* 按钮文字加粗 */ text-align: left; /* 按钮文字左对齐 */ display: block; /* 将按钮设置为块级元素 */ width: 40%; /* 按钮宽度100% */ height: 50px; /* 按钮高度100% */ text-align: center; /* 文字水平居中 */ line-height: 100%; /* 文字垂直居中 */ padding: 10px 15px; /* 按钮内边距 */ float:left; margin:10px; } } /* 解决方案 健康企业 多场景解决方案展 效果 */ .fangan-qy-alfx-bg{background:#f2f6fa;padding-bottom:75px;} .fangan-qy-alfx-box { background-color: #fff; border-radius: 15px; box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 添加投影效果 */ overflow: hidden; /* 确保包含的元素不溢出 */ margin-top:10px; margin-bottom:10px; } .fangan-qy-alfx-zong-biaoti { display: inline-block; /* 让标题和副标题在同一行 */ } .fangan-qy-alfx-title { font-size: 21px; color: #060001; margin-bottom: 5px; } .fangan-qy-alfx-title a{ font-size: 21px; color: #060001; text-decoration:none; } .fangan-qy-alfx-title a:hover{ font-size: 21px; color: #060001; text-decoration:underline; } .fangan-qy-alfx-subtitle { font-size: 16px; color: #989898; /* 副标题颜色 */ } .fangan-qy-alfx-subtitle a{ font-size: 16px; color: #989898; /* 副标题颜色 */ text-decoration:none; } .fangan-qy-alfx-subtitle a:hover{ font-size: 16px; color: #989898; /* 副标题颜色 */ text-decoration:underline; } .fangan-qy-alfx-icon { font-size: 16px; color: #919191; float: right; /* 文字图标右对齐 */ margin-top: 10px; } .fangan-qy-alfx-icon i{font-size:40px} .fangan-qy-alfx-icon a{ color: #919191;text-decoration:none; } .fangan-qy-alfx-icon a:hover{ color: #919191;text-decoration:underline; } .fangan-qy-alfx-image-container { margin-bottom: 10px; /* 图片容器底部间距 */ } .fangan-qy-alfx-rounded-img { border-radius: 15px; /* 图片圆角 */ max-width: 100%; height: auto; } .fangan-qy-alfx-box-wz-tb{padding:20px;} .fangan-qy-alfx-bt-wzdx a{font-size:18px;} /* 二次定义 点击右侧 文字大小*/ .fangan-qy-alfx-bt-wzdx a:hover{font-size:18px;} /* 二次定义 点击右侧 文字大小*/ /* 图标样式 */ .fangan-qy-alfx-icon i { display: block; transition: transform 0.3s ease-in-out; /* 添加过渡效果 */ } /* 悬停时不停旋转 */ .fangan-qy-alfx-icon:hover i { animation: rotatexz 1s linear infinite; /* 使用动画使图标不停旋转 */ } /* 定义旋转动画 */ @keyframes rotatexz { from { transform: rotateY(0deg); /* 从0度开始旋转 */ } to { transform: rotateY(360deg); /* 旋转到360度 */ } } /* 手机端 */ @media (max-width: 767px) { .fangan-qy-alfx-icon { font-size: 16px; color: #919191; float: left; /* 文字图标左对齐 */ margin-top: 10px; margin-bottom: 10px; } .fangan-qy-alfx-icon a{font-size:14px;} .fangan-qy-alfx-icon a:hover{font-size:14px;} .fangan-qy-alfx-bt-shoujiduan a{font-size:14px;} .fangan-qy-alfx-bt-shoujiduan a:hover{font-size:14px;} } /* 解决方案 健康工会 guojiazhanlue 效果 */ .fangan-gh-zc1-box { border: 1px solid #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 20px; margin: 20px; } .fangan-gh-zc1-box h2 { font-size: 20px; font-weight: bold; color: #2c2c2c; margin-bottom: 10px; } .fangan-gh-zc1-box p { font-size: 16px; color: #707070; line-height: 1.5; } .fangan-gh-zc1-r--div { border: 2px solid #df2f1e; text-align: center; padding: 10px; margin-top: 20px; } .fangan-gh-zc1-r--div p { font-size: 19px; color: #000000; margin: 0; line-height: 1.5; vertical-align: middle; } /* 解决方案 健康工会 政策要求 效果 */ .fangan-gh-zcyq-bg{ background:url(../images/fangan-gh-zcyq-bg.jpg) #eceef1; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:60px; margin-top:35px; } .fangan-gh-zcyq-container { background-color: #ffffff; border: 1px solid #dfdfdf; border-radius: 8px; padding: 10px; } .fangan-gh-zcyq-box { border-radius: 8px; padding: 30px; } .fangan-gh-zcyq-box h2 { font-size: 23px; font-weight: bold; color: #ffffff; margin-bottom: 10px; } .fangan-gh-zcyq-box p { font-size: 16px; color: #ffffff; line-height: 1.5; } .fangan-gh-zcyq-box2 { position: relative; padding: 30px; } .fangan-gh-zcyq-box2 h2 { font-size: 23px; font-weight: bold; color: #000000; line-height:35px; } .fangan-gh-zcyq-box2 p { font-size: 16px; color: #868686; } .fangan-gh-zcyq-vertical-line { position: absolute; right: 0; top: 5%; bottom: 5%; border-right: 1px solid #cccccc; } .fangan-gh-zcyq-sanjiao { position: absolute; left: 48%; bottom: -20px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 20px solid #457cf4; } /* 解决方案 健康工会 现状分析 效果 */ .fangan-gh-xzfx-box { width: 100px; /* 设置宽度和高度相等,这样就是正方形了 */ height: 100px; background-color: #4c85f4; border-radius: 10px; text-align: center; padding: 15px; box-shadow: 0px 15px 11px 0px #e6edfd; /* 垂直偏移15px,模糊半径11px,扩散距离0px,颜色为#e6edfd */ margin: 10px auto; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } .fangan-gh-xzfx-line { width: 21px; height: 5px; background-color: #457cf4; margin: 10px auto; margin-top:35px; } .fangan-gh-xzfx-title { font-size: 23px; color: #060001; text-align: center; margin: 10px 0; margin-top:20px; } .fangan-gh-xzfx-content { font-size: 16px; color: #6b6b6b; line-height: 1.5; text-align: left; padding: 10px; } .fangan-gh-xzfx-box i{ color: white; font-size: 45px; } /* 手机端 */ @media (max-width: 767px) { .fangan-gh-xzfx-content { font-size: 14px; color: #6b6b6b; line-height:2.; text-align: left; padding: 5px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; /* 现代浏览器也开始支持这个不带前缀的版本 */ } .fangan-gh-xzfx-title { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; /* 控制显示行数 */ } } .fangan-gh-xzfx-jianju-box { /* 其他样式 */ margin-bottom: 60px; /* 默认的底部外边距为60px */ } /* 在手机端(小于等于767px宽度)设置底部外边距为30px */ @media (max-width: 767px) { .fangan-gh-xzfx-jianju-box{ margin-bottom: 30px; } } /* 解决方案 健康工会 解决方案 */ .fangan-gh-jjfa-bg { background:#fbfbfd; padding-bottom:50px; margin:0; } .fangan-gh-jjfa-grid { background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加投影效果 */ } .fangan-gh-jjfa-content { font-size: 20px; color: #605d5d; line-height: 2.5; /* 增加行间距 */ padding:25px; padding-top:70px; } .fangan-gh-jjfa-image { width: 100%; } /* 手机端 */ @media (max-width: 767px) { .fangan-gh-jjfa-content { font-size: 18px; color: #605d5d; line-height: 1.8; /* 增加行间距 */ padding:15px; padding-top:25px; } } .fangan-gh-jjfa-fwgn-grid { background-color: #ffffff; text-align: center; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加投影效果 */ margin: 15px; } .fangan-gh-jjfa-fwgn-icon { font-size: 50px; color: #0064ff; margin-bottom: 10px; } .fangan-gh-jjfa-fwgn-title { font-size: 20px; font-weight: bold; color: #2b2c2f; margin-bottom: 10px; } .fangan-gh-jjfa-fwgn-content { font-size: 16px; color: #434447; text-align: left; line-height: 1.5; /* 增加行间距 */ } /* 电脑端 */ @media (min-width: 768px) { .fangan-gh-jjfa-jianju-div { margin-top: 60px; /* 电脑端外上部间距60px */ margin-bottom: 60px; } } /* 手机端 */ @media (max-width: 767px) { .fangan-gh-jjfa-jianju-div { margin-top: 30px; /* 手机端外上部间距30px */ margin-bottom: 30px; } .fangan-gh-jjfa-fwgn-grid{margin:0;margin-top:10px;margin-bottom:10px;} .fangan-gh-jjfa-fwgn-title{font-size:16px;} .fangan-gh-jjfa-jianju-div div{padding:5px;} } /* 解决方案 健康工会 产品系列 */ .fangan-gh-cpxl-bg{ background:#f2f6fa; padding-bottom:80px; margin:0; } .fangan-gh-cpxl-grid { background-color: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; padding: 20px; margin-top:10px; margin-bottom:10px; } .fangan-gh-cpxl-icon { margin-bottom: 10px; } .fangan-gh-cpxl-title { font-size: 23px; font-weight: bold; color: #000000; margin-bottom: 10px; } .fangan-gh-cpxl-content { font-size: 13px; color: #404040; padding-bottom:20px; } .fangan-gh-cpxl-title a{text-decoration:none;color:#000000;} .fangan-gh-cpxl-title a:hover{text-decoration:underline;color:#000000;} /* 手机端 */ @media (max-width: 767px) { .fangan-gh-cpxl-title { font-size: 14px; font-weight: 400; color: #000000; margin-bottom: 10px; } } .fangan-gh-cpxl-d-two-row-bg{background:#ffffff;margin:0;} .fangan-gh-cpxl-d-two-left {margin:0;padding:0;} .fangan-gh-cpxl-d-two-left img { max-width: 100%; /* 图像宽度最大为父元素宽度 */ height: auto; /* 图像高度自适应 */ } .fangan-gh-cpxl-d-two-right { background-color: #ffffff; padding: 10px; padding-left: 15px; padding-right: 15px; } .fangan-gh-cpxl-d-two-title { font-size: 27px; font-weight: bold; color: #060001; text-align: left; margin-bottom:8px; margin-top:20px; } .fangan-gh-cpxl-d-two-content { font-size: 18px; color: #6b6b6b; line-height:28px; text-align: left; margin-bottom:18px; margin-top:10px; } .fangan-gh-cpxl-d-two-button { background-color: #1763ff; padding: 8px 18px; /* 增加内边距 */ text-align: center; vertical-align: middle; display: table-cell; margin:8px; } .fangan-gh-cpxl-d-two-button-text { font-size: 16px; font-weight: 400; color: #fff; } /* 在分辨率1410以上时应用的样式 */ @media screen and (min-width: 1410px) { .fangan-gh-cpxl-d-two-right { background-color: #ffffff; padding: 30px; } .fangan-gh-cpxl-d-two-content { line-height:35px; margin-top:20px; } } /* 在分辨率1920以上时应用的样式 */ @media screen and (min-width: 1920px) { .fangan-gh-cpxl-d-two-right { background-color: #ffffff; padding: 50px; } .fangan-gh-cpxl-d-two-content { line-height:35px; margin-top:35px; } } /* 手机端 */ @media (max-width: 767px) { .fangan-gh-cpxl-d-two-button { background-color: #1763ff; padding: 10px 18px; /* 增加内边距 */ text-align: center; vertical-align: middle; display: table-cell; margin:8px; } .fangan-gh-cpxl-d-two-button-text { font-size: 18px; font-weight: 400; color: #fff; } } /* 电脑端 */ @media (min-width: 768px) { .fangan-gh-cpxl-two-top-div { margin-top: 60px; /* 电脑端外上间距 */ } } /* 手机端 */ @media (max-width: 767px) { .fangan-gh-cpxl-two-top-div { margin-top: 30px; /* 手机端外上间距 */ } } /* 健康机关 解决方案 政策背景 */ .fangan-jg-zc1-box { border: 1px solid #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 30px; margin: 30px; } .fangan-jg-zc1-box h2 { font-size: 22px; font-weight: bold; color: #2c2c2c; margin-bottom: 20px; } .fangan-jg-zc1-box p { font-size: 16px; color: #707070; line-height: 1.7; } .fangan-jg-zc1-r--div { background:#f2f7ff; text-align: center; padding: 10px; margin-top: 20px; } .fangan-jg-zc1-r--div p { font-size: 16px; color: #000000; margin: 0; line-height: 1.5; vertical-align: middle; } /* 添加媒体查询1410一下 */ @media (max-width: 1410px) { .fangan-jg-zc1-box { border: 1px solid #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding:10px; margin: 10px; } .fangan-jg-zc1-box h2 { font-size: 20px; font-weight: bold; color: #2c2c2c; margin-bottom: 10px; } .fangan-jg-zc1-box p { font-size: 14px; color: #707070; line-height: 1.5; } } /* 方案 社区 政策解读 效果 */ .fangan-sq-grid-container { display: flex; } .fangan-sq-grid-item { flex: 1; border: 1px solid #efeff0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ padding: 20px; } .fangan-sq-item1 { } .fangan-sq-item2 { background-color: #f2f7ff; position: relative; } .fangan-sq-red-line { position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color: #ff0000; } .fangan-sq-title { font-size: 34px; font-weight: bold; color: #2b2c2f; } .subfangan-sq-title { font-size: 22px; font-weight: bold; color: #f55c4b; background-color: #fef0ef; padding:3px; padding-left:15px; max-width:220px; border-radius: 5px; /* 设置圆角半径 */ } .fangan-sq-content { font-size: 16px; color: #5b5c5f; line-height: 30px; } .second-fangan-sq-title { font-size: 18px; font-weight:400; color: #2b2c2f; line-height: 30px; } .fangan-sq-image { width: 100%; } .img-fangan-sq-title { background-color: #fbfbfd; font-size: 16px; color: #2b2c2f; text-align: center; } .fangan-sq-grid-item { flex: 1; padding: 30px; } .fangan-sq-item-jianju { padding-left:25px; font-size:22px; padding-top:10px; padding-bottom:5px; } .fangan-sq-item-jianju2 { padding-left:25px; padding-bottom:15px; } /* 方案 社区 痛点分析 效果 */ .fangan-sq-tdfx-bg{ background:url(../images/fangan-sq-tdfx-bg.jpg) #f7f7f8; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:80px; } .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { position: relative; min-height: 1px; margin-right: 10px; margin-left: 10px; } .col-xs-1-5 { width: 18%; float: left; } @media (min-width: 768px) { .col-sm-1-5 { width: 18%; float: left; } } @media (min-width: 992px) { .col-md-1-5 { width: 18%; float: left; } } @media (min-width: 1200px) { .col-lg-1-5 { width: 18%; float: left; } } .fangan-sq-selected { background-color: #4c85f4; border-radius: 10px; /* 设置圆角半径为10px */ padding:25px; } .fangan-sq-normal { background-color: #ffffff; border: 1px solid #b8b9bc; border-radius: 10px; /* 设置圆角半径为10px */ padding:25px; } .fangan-sq-icon { font-size: 65px; color: #ffffff; text-align: center; } .fangan-sq-tdfx-content { font-size: 16px; font-weight: 500; color: #ffffff; text-align: left; line-height:28px; margin-top:15px; } .fangan-sq-normal .fangan-sq-icon { color: #000000; } .fangan-sq-normal .fangan-sq-tdfx-content { color: #868686; } /*页面 保留 效果 */ /* 手机端 */ @media (max-width: 767px) { .col-xs-1-5{width:43%;float:left;} .fangan-sq-tdfx-content { font-size: 12px; font-weight: 200; color: #ffffff; text-align: left; line-height:20px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 7; /* 显示行数 */ line-clamp: 7; /* 显示行数 */ } .fangan-sq-selected{margin-bottom:10px;} .fangan-sq-normal{margin-bottom:10px;} .fangan-sq-icon{font-size:45px;} } /* 解决方案 社区 方案 */ .fangan-sq-jjfa-col-custom { position: relative; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-left: none; /* 默认无边框 */ margin-bottom:15px; } .fangan-sq-jjfa-col-custom-first-child { border-left: 3px solid #0064ff; /* 只为第一个格子添加蓝色边框 */ } .fangan-sq-jjfa-col-custom h2 { font-size: 23px; font-weight: bold; color: #2b2c2f; margin-bottom: 10px; } .fangan-sq-jjfa-col-custom p { font-size: 16px; color: #545558; line-height: 28px; } .fangan-sq-jjfa-col-custom-first-child h2{ font-size: 23px; font-weight: bold; color: #106eff; margin-bottom: 10px; } /* 方案 社区 方案配置 效果 */ .fangan-sq-pz-bg{ background: #f2f6fa; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:60px; } .fangan-sq-pz-white-bg { background-color: #ffffff; padding: 45px; display: flex; flex-direction: column; align-items: stretch; } .fangan-sq-pz-blue-bg { background-color: #eaf0fe; display: flex; align-items: stretch; } .fangan-sq-pz-white-bg1 { background-color: #ffffff; padding: 45px; display: flex; flex-direction: column; align-items: stretch; } .fangan-sq-pz-blue-bg1 { background-color: #eaf0fe; display: flex; align-items: stretch; } .fangan-sq-pz-white-bg2 { background-color: #ffffff; padding: 45px; display: flex; flex-direction: column; align-items: stretch; } .fangan-sq-pz-blue-bg2 { background-color: #eaf0fe; display: flex; align-items: stretch; } .fangan-sq-pz-white-bg3 { background-color: #ffffff; padding: 45px; display: flex; flex-direction: column; align-items: stretch; } .fangan-sq-pz-blue-bg3 { background-color: #eaf0fe; display: flex; align-items: stretch; } .fangan-sq-pz-square { width: 70px; height: 70px; background-color: #346ff4; text-align: center; display: flex; justify-content: center; align-items: center; } .fangan-sq-pz-square-number { font-size: 30px; font-weight: bold; color: #ffffff; } .fangan-sq-pz-title { font-size: 40px; font-weight: bold; color: #346ff4; margin-top:10px; } .fangan-sq-pz-content { font-size: 16px; color: #797979; line-height: 28px; margin-top: 10px; } .fangan-sq-pz-underline { width: 30px; height: 2px; background-color: #346ff4; } .fangan-sq-pz-img { max-width: 100%; height: auto; margin-top: 10px; margin-bottom: 10px; } /* 手机端 */ @media (max-width: 767px) { .fangan-sq-pz-white-bg { background-color: #ffffff; padding: 25px; display: flex; flex-direction: column; align-items: stretch; } .fangan-sq-pz-white-bg1 { background-color: #ffffff; padding: 25px; display: flex; flex-direction: column; align-items: stretch; } .fangan-sq-pz-white-bg2 { background-color: #ffffff; padding: 25px; display: flex; flex-direction: column; align-items: stretch; } .fangan-sq-pz-white-bg3 { background-color: #ffffff; padding: 25px; display: flex; flex-direction: column; align-items: stretch; } .fangan-sq-pz-title { font-size: 28px; font-weight: bold; color: #346ff4; margin-top:10px; } .fangan-sq-pz-content { font-size: 14px; color: #797979; line-height: 25px; margin-top: 10px; padding-bottom:10px; } } /* 解决方案 社区 方案流程图 效果 */ .fangan-sq-lct-circle { background-color: #346ff4; height: 66px; width: 66px; border-radius: 50%; text-align: center; vertical-align: middle; margin: 0 auto; margin-top: -50px; line-height: 66px; color: #fff; font-size:30px; } .fangan-sq-lct-title { font-size: 20px; font-weight: bold; color: #222326; text-align: center; margin-top:20px; } .fangan-sq-lct-content { font-size: 15px; color: #6a6a6b; line-height: 28px; } .fangan-sq-lct-circle-bg{background:#eaf0fe;margin: 10px; padding: 15px;border-radius: 15px;} .fangan-sq-lct-rounded-rectangle { position: relative; } .fangan-sq-lct-rounded-rectangle::after { content: ''; position: absolute; top: 50%; right: -30px; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #346ff4; } .fangan-sq-lct-rounded-rectangle1 { position: relative; } .fangan-sq-lct-rounded-rectangle1::before { content: ''; position: absolute; top: 50%; left: -30px; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #346ff4; } .fangan-sq-lct-rounded-rectangle2 { position: relative; } .fangan-sq-lct-rounded-rectangle2::after { content: ''; position: absolute; bottom: -20px; left: 50%; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #346ff4; } @media only screen and (min-width: 768px) { .wai-top-box { margin: 45px; /* 在电脑端设置外边距为60px */ } } @media only screen and (max-width: 767px) { .wai-top-box { margin:0; /* 在手机端设置外边距为30px */ margin-top:20px; margin-bottom:20px; } .fangan-sq-lct-rounded-rectangle::after { display: none; /* 在手机端隐藏箭头 */ } .fangan-sq-lct-rounded-rectangle1::before { display: none; /* 在手机端隐藏箭头 */ } .fangan-sq-lct-rounded-rectangle2::after { display: none; /* 在手机端隐藏箭头 */ } .fangan-sq-lct-circle-bg{background:#eaf0fe;margin:0; padding: 5px;border-radius: 15px;margin-bottom:50px; } .fangan-sq-lct-content{font-size:14px;min-height:145px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 5; /* 控制显示的行数 */ text-overflow: ellipsis; } .fangan-sq-colbianju{margin:0;padding-left:0;} } /* 方案 驿站 政策 效果 */ .fangan-yz-zc-custom-box { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ } .fangan-yz-zc-custom-box img { width: 100%; height: auto; } .fangan-yz-zc-custom-content { padding: 20px; } .fangan-yz-zc-custom-title { font-size: 23px; font-weight: bold; color: #282828; } .fangan-yz-zc-custom-text { font-size: 16px; color: #545558; margin-top: 10px; line-height:27px; } .fangan-yz-zc-custom-button { background-color: #0064ff; color: #fff; border-radius: 16px; text-align: center; padding: 8px 16px; display: inline-block; margin-top: 10px; } .fangan-yz-zc-custom-rectangle { background-color: #f2f7ff; padding: 20px; margin-top:15px; } .fangan-yz-zc-custom-rectangle p { font-size: 16px; line-height: 28px; color: #545558; margin-top: 10px; } .fangan-yz-zc-custom-box1 { border: 10px solid #f90101; /* 添加红色外边框 */ } .fangan-yz-zc-custom-box1 img { width: 100%; /* 图片宽度100% */ height: auto; } /* 方案 驿站 痛点分析 效果 */ .fangan-yz-tdfx-bg{ background:url(../images/fangan-yz-tdfx-bg.jpg) #ececed; background-size:100% 100%; background-repeat:repeat-y; padding-bottom:80px; } .fangan-yz-tdfx-custom-box { background: #ffffff; border: 1px solid #d8d9dc; border-radius: 10px; padding: 20px; margin: 10px; padding-top:40px; padding-bottom:40px; } .fangan-yz-tdfx-custom-icon { text-align: center; margin-top:15px; margin-bottom:15px; } .fangan-yz-tdfx-custom-icon .icon{ width:6.8em; height:6.8em; } .fangan-yz-tdfx-custom-title { font-size: 20px; font-weight: bold; color: #060001; text-align: center; margin-top:10px; margin-bottom:10px; } .fangan-yz-tdfx-custom-content { font-size: 16px; color: #848484; line-height: 25px; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; /* 控制显示的行数 */ } /* 手机端 */ @media (max-width: 767px) { .fangan-yz-tdfx-custom-box { margin: 0; margin-bottom:10px; } } /* 方案驿站 产品系列 效果 */ .fangan-yz-pz-bg{background:#f2f5fa;padding-bottom:70px;} .fangan-yz-cpxl-custom-box { background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ padding: 20px; margin: 10px; text-align: center; padding-top:40px; } .fangan-yz-cpxl-custom-title { font-size: 22px; font-weight: bold; color: #000; text-align: center; margin-top:15px; } .fangan-yz-cpxl-custom-description { font-size: 13px; color: #808080; text-align: center; padding-bottom:25px; } .fangan-yz-cpxl-custom-img { display: block; margin: 0 auto; } .fangan-yz-cpxl-custom-title a{text-decoration:none;color: #000;} .fangan-yz-cpxl-custom-title a:hover{text-decoration:underline;color: #000;} /* 方案 驿站 流程图 效果 */ .fangan-yz-lct-grid-img { margin-bottom: 20px; } /* 方案 驿站 多场景方案 效果 */ .fangan-gh-dcjfa-bg{background:#f2f6fa;padding-bottom:50px;} /* 解决方案 慢病 方案 效果 */ .fangan-mb-custom-box { background-color: #f2f7ff; padding: 25px; margin-bottom: 20px; /* 适当的增加格子内的间距 */ } .fangan-mb-custom-title { font-size: 24px; font-weight: bold; color: #2b2c2f; margin-bottom: 10px; /* 标题上下适当增加间距 */ text-align: left; /* 标题左对齐 */ } .fangan-mb-custom-content { font-size: 16px; color: #6f7174; line-height: 30px; /* 内容行间距为30px */ text-align: left; /* 内容左对齐 */ } .top-div-30{margin-top:30px;margin-bottom:30px;} .top-div-40{margin-top:40px;margin-bottom:40px;} .top-div-50{margin-top:50px;margin-bottom:50px;} /* 手机端 */ @media (max-width: 767px) { .top-div-30{margin-top:20px;margin-bottom:20px;} .top-div-40{margin-top:30px;margin-bottom:30px;} .top-div-50{margin-top:40px;margin-bottom:40px;} } .fangan-mb-jjfa-custom-box { background-color: #ffffff; border: 1px solid #f7f7f7; padding: 20px; margin-bottom: 20px; /* 适当的增加格子内的间距 */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加投影效果 */ padding-top:40px; padding-bottom:40px; padding-left:40px; padding-right:40px; } .fangan-mb-jjfa-custom-title { font-size: 24px; font-weight: bold; color: #2b2c2f; margin-bottom: 10px; /* 标题适当增加下间距 */ text-align: left; /* 标题左对齐 */ } .fangan-mb-jjfa-custom-content { font-size: 16px; color: #545558; line-height: 1.5; /* 默认行高 */ text-align: left; /* 内容左对齐 */ } .fangan-mb-jjfa-custom-icon { font-size: 60px; color: #4c85f4; /* 文字图标颜色 */ float: left; /* 左浮动使图标和文本在同一行 */ margin-right: 20px; /* 图标右侧留出一定间距 */ } .bottom-div-50{margin-bottom:50px;} /* 手机端 */ @media (max-width: 767px) { .bottom-div-50{margin-bottom:30px;} } /* 解决方案 慢病系列 产品 效果 */ .fangan-mb-cp-full-screen-bg { background-color: #f2f6fa; /* 设置背景颜色为 f2f6fa */ padding-bottom:60px; margin-bottom:50px; } .fangan-mb-cp-grid-box { padding: 20px; text-align: left; padding-top:0; } .fangan-mb-cp-grid-title { font-size: 22px; font-weight: bold; color: #2b2c2f; } .fangan-mb-cp-icon { font-size: 22px; color: #0064ff; margin-right: 10px; }