/*---xxxxxxxxx css for subpage xxxxxxxxx---*/

/*---xxxxxxxxx  sub page left side content css start   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/

.subpage {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              width: 95%;                     /* 整个页面内容区域的总宽度，决定左右整体离浏览器边缘的距离 */
              margin: 20px auto;              /*  auto 表示居中，左右边距由这个控制 */
             }
.sidecontent {
              flex: 0 0 20%;               /* 左侧占总宽度的 20%，这个决定它的大小 */
              max-width: 250px;             /* 限制左侧最大宽度，避免太宽 */
              border: 1px solid #dddddd;
              box-sizing: border-box;       /* 包含边框在宽度计算中 */
             }
.sidelink dt {
              font-size: clamp(16px, 2vw, 20px);
              color: white;
              padding-left: 15px;
              background-color: #3366cc;
              line-height: 40px;              /* 保持垂直居中 */
              margin: 0;                      /* 去掉默认 margin */
              padding-top: 6px;               /* 与 dd 保持一致的上下间距 */
              padding-bottom: 6px;

             }
.sidelink dl dd {
                  font-size: clamp(12px, 1.5vw, 16px);
                  color: #333333;
                  padding-left: 8px;
                  border-bottom: 1px dashed #cccccc;
                  line-height: 25px;                  /* 相对行高，避免重叠 */
                  height: auto;                      /* 高度随内容变化 */
                  word-break: break-word;            /* 长词自动换行 */
                  margin: 0;
                  padding-top: 5px;
                  padding-bottom: 5px;
                 }
              
.sidecontact {
              margin-top: 10px;
             }

.sidecontact dt {
                 font-size: clamp(16px, 2vw, 20px);
                 color: white;
                 padding-left: 15px;
                 background-color: #3366cc;
                 line-height: 50px;         /* 保持垂直居中 */
                }

.sidecontact dl dd {
                    font-size: clamp(12px, 1.5vw, 16px);
                    color: #333333;
                    padding-left: 8px;
                    margin-bottom: 8px;
                    line-height: 1.5;
                    height: auto;
                    word-break: break-all;               /* 长邮箱自动换行 */
                    }

.sidecontact img {
                  width: 20px;
                  height: auto;
                 }

.subpageleftsidecontactusqrcode ul {
                                    display: flex;          /* 横向排列 */
                                    gap: 10px;              /* 每个二维码之间的间距 */
                                    list-style: none;       /* 去掉默认的点 */
                                    padding: 0;
                                    margin: 0;
                                    justify-content: center; /* 整体居中 */
                                   }

.subpageleftsidecontactusqrcode ul li {
                                      text-align: center;     /* 图片和文字居中 */
                                      width: 100px;           /* 每个块固定宽度 */
                                      }

.subpageleftsidecontactusqrcode ul li img {
                                            width: 50px;
                                            height: 50px;
                                            display: block;
                                            margin: 0 auto 5px;     /* 图片居中，底部留间距 */
                                            border: 1px solid #dddddd;
                                            object-fit: cover;      /* 保持比例裁剪，避免拉伸 */
                                          }

.subpageleftsidecontactusqrcode ul li p {
                                         font-size: 10px;
                                         color: #333333;
                                         margin: 0;
                                        }


/* --- 响应式优化 --- */

/* 中屏幕（≤1024px）：左侧缩小到 20%，字体缩小一点 */
@media (max-width: 1024px) {
  .sidecontent {
    width: 20%;
  }
  .sidelink dt,
  .sidecontact dt {
    font-size: 18px;
  }
  .sidelink dl dd,
  .sidecontact dl dd {
    font-size: 14px;
  }
}

/* 小屏幕（≤768px）：左侧导航改为整行显示（在内容上方或下方） */
@media (max-width: 768px) {
  .sidecontent {
    float: none;                /* 不再浮动，改为块级元素 */
    width: 100%;                /* 占满整行 */
    margin-bottom: 20px;        /* 与右侧内容留间距 */
  }
  .sidelink dt,
  .sidecontact dt {
    font-size: 16px;
    line-height: 40px;
  }
  .sidelink dl dd,
  .sidecontact dl dd {
    font-size: 13px;
  }
}     

/*---xxxxxxxxx  sub page left side content css end   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/

/*---xxxxxxxxx  sub page right product content css start  （application的图片也在这控制因为这是后来复制过去的） xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/

.subcontent {                     /* 这个参数控制了所有subpage的大容器，因为第1个calss所有页面都取名为subcontent */
             flex: 1;             /* 自动填充剩余空间，右侧会随着左侧缩小而扩张 */
             margin-left: 25px;   /* 左右留间距 */
             margin-bottom: 30px;
             }

                                                       /* 图片列表容器 */
.subcontent ul {
                display: grid;
                grid-template-columns: repeat(3, 1fr); /* 每行三列 */
                gap: 25px;                             /* 图片左右间距 */
                padding: 0;
                margin: 20px 0 0;
                list-style: none;
               }

                                               /* 每个图片项 */
.subcontent ul li {
                    /*background-color: #ffffff;  可选：给图片块加背景色 */
                    /*border: 1px solid #dddddd;  去掉边框 */
                    background-color: transparent; /* 去掉LI背景 */
                    border: none;                  /* 去掉LI的边框 */
                  }

                                           /* 图片样式 */
.subcontent ul li img {
                       width: auto;                   /* 改成自动宽度，不强制拉满容器 */
                       max-width: 100%;               /* 保证不会溢出容器 */
                       height: auto;                  /* 保持比例 */
                       max-height: 200px;             /* 限制最大高度 */
                       /*object-fit: cover;   保持比例裁剪，避免变形 */
                       display: block;
                       margin: 0 auto;                /* 居中显示 */
                       border: 1px solid #dddddd;
                       border-radius: 15px;           /* 图片四个角增加R角 */
                      }

                                        /* 标题样式 */
.subcontent h2 {
                 margin: 20px 0 20px;   /* 上下间距更大，避免贴太近 */
                 font-size: 24px;
                 color: #3366cc;
                }

/* 响应式优化 */
@media (max-width: 1024px) {
  .subcontent ul {
    grid-template-columns: repeat(2, 1fr); /* 中屏时两列 */
  }
}

@media (max-width: 768px) {
  .pagecontent {
    flex-direction: colum;       /* 保持左右排列 */
  }
  .sidecontent {
    flex: 0 0 30%;             /* 左侧占 30%（比大屏稍微宽一点） */
    max-width: none;           /* 不限制最大宽度 */
    margin-bottom: 0;          /* 不要额外的下间距 */
  }
  .subcontent {
    flex: 1;                         /* 右侧自动填充剩余空间 */
    margin-left: 15px;               /* 左右留一点间距 */
    width: auto;                     /* 不要强制 100% */
  }
}

/*---xxxxxxxxx  sub page right product content css end  （application的图片也在这控制因为这是后来复制过去的）    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/


/*---xxxxxxxxx  sub page application css start   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/

/* 工艺流程整体容器 */
.workprocess {
              flex: 1;                   /* 自动填充剩余空间 */
              margin-left: 0;            /* 左侧距离继承subcontent的margin-left */
             }

/* 标题样式 */
.workprocess h2 {
                 margin-bottom: 20px;
                 color: #3366cc;              /* 标题改成主色蓝 */
                }

/* 每一行流程容器：用 flex 横排 */
.workprocess .row {
                   display: flex;                /* 横向排列子元素 */
                   flex-wrap: nowrap;              /* 不允许换行，保证一行就是 4 个流程 + 3 个箭头 */
                   justify-content: space-between; /* 子元素之间自动分散对齐 */
                   align-items: flex-start;      /* 顶部对齐 */
                   margin-bottom: 30px;          /* 每行之间留间距 */
                  }

/* 流程块样式 */
.workprocess .process {
                       flex: 0 0 20%;                /* 每个流程块占大约 22% 宽度（四个流程块刚好一行） */
                       text-align: center;           /* 内容居中 */
                       margin-bottom: 0 5px;          /*  左右留少量间距，避免贴太紧 */
                      }

/* 第一行额外加上顶部间距 */
.workprocess .row:first-of-type {
                                 margin-top: 20px;    /* 第一行和 <hr> 拉开距离 */
}

.workprocess .process img {
                           width: 100%;                  /* 图片宽度自适应容器 */
                           height: auto;                 /* 高度按比例缩放 */
                           margin-bottom: 15px;          /* 图片和文字之间留间距 */
                          }

/* 箭头块样式 */
.workprocess .arrow {
                     flex: 0 0 5%;                 /* 箭头占小比例宽度 */
                     text-align: center;           /* 箭头居中 */
                     margin: 0 2px;                /* 箭头左右留一点间距 */
                    }

.workprocess .arrow img {
                         width: 80%;                   /* 箭头图片缩放到容器宽度的 80% */
                         height: auto;                 /* 高度按比例缩放 */
                         margin: 20px auto;            /* 上下留空，让箭头居中 */
                        }

/* 流程标题样式 */
.workprocess h4 {
                 text-align: center;
                 margin-bottom: 10px;
                 color: #3366cc;               /* 深蓝色标题 */
                 font-size: 16px;
                }

/* 流程描述文字样式 */
.workprocess p {
                line-height: 1.5;             /* 行高，避免文字挤在一起 */
                margin-bottom: 15px;
                font-size: 14px;
                color: #333000;                  /* 字体颜色 */
}

/* --- 响应式优化 --- */

/* 中屏幕（≤1024px）：流程块两列，箭头隐藏 */
@media (max-width: 1024px) {
  .workprocess .row {
    flex-wrap: wrap;            /* 允许换行 */
  }
  .workprocess .process {
    flex: 0 0 45%;              /* 每个流程块占 45%，一行放两个 */
    margin-bottom: 20px;
  }
  .workprocess .arrow {
    display: none;              /* 隐藏箭头，避免拥挤 */
  }
}

/* 小屏幕（≤768px）：流程块一列 */
@media (max-width: 768px) {
  .workprocess .process {
    flex: 0 0 100%;             /* 每个流程块占满整行 */
  }
}

/*---xxxxxxxxx  sub page application css end   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/


/*---xxxxxxxxx  sub page capability css start   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/

.subcapability p {
                  line-height: 1.8;
                  font-size: 16px;
                  text-indent: 32px;
                  margin-top: 20px;
                  margin-bottom: 20px;
                  color: #333333;
                 }
.subcapability h4 {
                   margin-top: 20px;
                   font-size: 20px;
                                               color: #3366cc;    /* 标题改成主色蓝 */
                  }
.subcapability img {
                    width: 100%;            /* 在小屏保持自适应 */
                    max-width: 400px;       /* 限制最大宽度，避免太大 */
                    height: auto;           /* 保持比例 */
                    display: block;         /* 让图片成为块级元素 */
                    margin: 5px auto;       /* 左右自动，居中显示 */
                    border-radius: 200px;   /* 可选：轻微圆角，提高观感,宽400，200的R则成圆*/
                   }

/* --- 响应式优化 --- */

/* 中屏幕（≤1024px）：文字稍微缩小，图片保持自适应 */
@media (max-width: 1024px) {
  .subcapability p {
    font-size: 15px;
  }
  .subcapability h4 {
    font-size: 18px;
  }
}

/* 小屏幕（≤768px）：文字再缩小，图片仍然自适应 */
@media (max-width: 768px) {
  .subcapability p {
    font-size: 14px;
    text-indent: 24px;          /* 缩进稍微减小，避免过宽 */
  }
  .subcapability h4 {
    font-size: 16px;
  }

}

/*---xxxxxxxxx  sub page capability css end   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/


/*---xxxxxxxxx  sub page news css start   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/

.subpagenews {
              margin-bottom: 20px;             /* 和正文段落留间距 */
              padding: 10px;                   /* 内边距内容不贴边 */
              background-color: #f9f9f9;       /* 可选：浅灰背景区分 */
              border-left: 4px solid #3366cc;  /* 左侧加一和蓝色线条 */
             }

.subpagenews h2 {
                 font-size: 22px;
                 color: #3366cc;
                 margin: 0 0 10px;
                }

.subpagenews hr {
                 border: none;
                 border-top: 1px solid #cccccc;
                 margin: 0;
                }

/*---xxxxxxxxx  sub page news css start   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/


/*---xxxxxxxxx  sub page contact us css start   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/

.subpagecontact {
              margin-bottom: 20px;             /* 和正文段落留间距 */
              padding: 1px 5px;                   /* 内边距内容不贴边 */
              background-color: #f9f9f9;       /* 可选：浅灰背景区分 */
              border-left: 4px solid #3366cc;  /* 左侧加一和蓝色线条 */
             }


.subpagecontactinfor dl dt {
                       margin-top: 20px;
                       color: #3366cc; /* 标题改成主色蓝 */
                      }

.subpagecontactinfor dl dd {
                             display: flex;
                             align-items: center;
                             margin-bottom: 20px;
                             line-height: 1.5;
                             color: #333333;
                       }
.subpagecontactinfor dl dd img {
                           height: 30px;
                           margin-right: 15px;
                           flex-shrink: 0;      /* 防止图标被压缩 */
                          }

.subpagecontactQRcode {
                       margin-top: 15px;
                       margin-bottom: 15px;
                      }

.subpagecontactQRcode ul {
                          display: flex;
                          gap: 20px;          /* 每个二维码之间的间距 */
                          list-style: none;
                          padding: 0;
                          margin: 0;
                          margin-left: 30px;
                         }

.subpagecontactQRcode ul li {
                              text-align: center;
                              width: 100px;       /* 每个块宽度固定 */
                             }

.subpagecontactQRcode ul li img {
                                 width: 80px;
                                 height: 80px;       /* 固定高度，保证统一大小 */
                                 object-fit: cover;  /* 保持比例裁剪，避免拉伸 */
                                 border: 1px solid #dddddd;
                                 display: block;
                                 margin: 0 auto 5px;
                                }

.subpagecontactQRcode ul li p {
                                font-size: 14px;
                                color: #333333;
                                margin: 0;
                              }
                    
/*---xxxxxxxxx  sub page contact us map css start   xxxxxxxxxxxxxx---*/

.map-container {
                 margin-top: 50px;
                 width: 100%;
                 height: 300px;
                 border: 1px solid #dddddd; /* 浅灰边框 */
                 overflow: hidden;
                }

.map-container iframe {
                        width: 100%;
                        height: 100%;
                        border: none;
                       }

/*---xxxxxxxxx  sub page contact us css end   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/