/*---xxxxxxxxx css for bodystyle xxxxxxxxx---*/

/*---xxxxxxxxx  header css start   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/
.header {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         z-index: 2000;               /* 从5改为1000，提高层级，navigates层为1000 */
         width: 100%;
         height: auto;                /* 高度由内容撑开 */
         background-color: #ffffff; /*与背景色一致*/
         margin: 0;                   /*--10px auto上下margin=10,左右=auto--*/        
         display: flex;               /*---xxxx 以下AI新增用于自适应：让子项在大屏也能更稳定居中对齐 xxxx---*/
         align-items: center;         /* 允许子项换行 */
         align-items: center;
         padding: 0 15px;             /* 用 padding 替代大 margin-left，避免小屏挤爆 */
         }

.header-logo {
               height: 50px;
               display: flex;
               align-items: center;
               margin: 0;
              }
.header-logo img {
                   max-height: 50px;   /* 限制图片最大高度为容器高度 */
                   height: auto;       /* 保持比例缩放 */
                   width: 100%;        /* 避免被拉伸  */
                   max-width: 150px;   /* 限制最大宽度，避免过大 */
                 }

.companyname {
              margin-left: 20px;              /* 和 logo 保持间距 */
              white-space: nowrap;            /* 不允许换行 */
              flex: 1;                        /* 占据剩余空间，避免挤压 logo */
             }

.companyname h2 {
                 font-family: "Montserrat", Arial, sans-serif;  /* 简洁现代的字体 */
                 font-size: clamp(15px, 2vw, 22px);             /* 字体大小随屏幕缩放，最小18px，最大28px */
                 font-weight: 600;                              /* 半粗，突出公司名 */
                 color: #3366cc;                              /* 主色调蓝，和导航栏统一 */
                 margin: 0;                                     /* 去掉默认外边距 */
                 line-height: 1.2;                              /* 保持紧凑 */
                 }

.header-mail {
               margin-left: auto;
               display: flex;
               align-items: center;
               gap: 10px;
               white-space: nowrap;                     /* 不允许换行 */
               font-size: clamp(12px, 1.2vw, 15px);     /* 字体最小12px，中间值1.2vm 最大15px */
               background-color: #f9f9f9;               /* 浅灰背景，区分内容块 */
             }
.header-mail img {
                   max-height: 15px;
                   height: auto;
                   width: auto;
                 }

.header-phone {
               display: flex;
               align-items: center;
               gap: 10px;
               margin-left: 20px;                        /* 给 phone 和 mail 留间距 */
               margin-bottom: 0;
               white-space: nowrap;                      /* 不允许换行 */
               font-size: clamp(12px, 1.2vw, 15px);      /* 字体最小12px，中间值1.2vm 最大15px */
               background-color: #f9f9f9;               /* 浅灰背景，区分内容块 */
             }
.header-phone img {
                   max-height: 15px;
                   height: auto;
                   width: auto;
                 }

/*---xxxxxxxxx  header css end   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/


/*---xxxxxxxxx  homepage about us and news css start  xxxxxxxxxxxxxxxxxxxxxxxxxx---*/
.homeus-news {
              width: 90%;
              /*height: 300px; 用内容撑大盒子*/
              /*background-color: #00aeae;*/
              margin: 20px auto;
              }
.homeus {
         float: left;
         width: 70%;
         text-indent: 35px; /*段落首行缩进*/
        }
.homeus h2 {
            text-align: center;
            margin-bottom: 15px;
            color: #3366cc; /* 标题改成主色蓝 */
           }
.homeus p {
           margin-bottom: 30px;
           line-height: 35px;
           font-size: 18px;
           color: #333333; /* 段落文字统一深灰 */
          }
.homenews {
           float: right;
           width: 25%;
          color: #333333; /* 新闻区文字深灰 */
           }
/*---xxxxxxxxx  homepage about us and news css end  xxxxxxxxxxxxxxxxxxxxxxxxxx---*/


/*---xxxxxxxxx  homepage product css start  xxxxxxxxxxxxxxxxxxxxxxxxxx---*/
.homeproduct {
              width: 90%;
              margin: 0 auto;
             }
.hp-header {                      /* 标题区域 */
            width: 100%;
            height: auto;         /* 不要固定高度，内容撑开 */
            margin-bottom: 15px;  /* 标题和产品区之间留间距 */
            /*background-color: #1afd9c; 背景极只是开始的时候方便查看*/
           }

.hp-header h1 {
               margin: 0;         /*去掉 h1 默认外边距 */
              }

.hp-header p {
              margin-top: 15px;
              line-height: 1.6;    /* 增加行高，避免文字挤压 */
              color: #333333;      /* 段落文字深灰 */
             }
.hp-body ul {
             list-style: none;     /* 去掉默认列表样式 */
             margin: 0;
             padding: 0;
             overflow: hidden;     /* 清除浮动，撑开父容器高度 */
            }

.hp-body ul li {
                float: left;
                width: 30%;
                margin: 25px calc(10%/6);
                box-sizing: border-box;   /* 可写也可不写：保证内边距不撑破布局 */
                background-color: #ffffff; /* 产品卡片背景白色 */
                border: 1px solid #dddddd; /* 浅灰边框，提升层次感 */
                }
.hp-body ul li img {
                    width: 100%;
                    height: auto;
                    max-height: 380px;
                    display: block;
                    margin-bottom: 10px;
                   }
.hp-body ul li h2 {
                   margin-bottom: 10px;
                   font-size: 25px;
                   font-weight: bold;
                   color: #5599ff;
                   text-align: center;
                   line-height: 1.4;
                  }

/* 响应式优化：小屏幕时每行一个产品 */
@media (max-width: 768px) {
  .hp-body ul li {
    width: 100%;
    margin: 15px 0;
  }
}

/*---xxxxxxxxx  homepage product css end  xxxxxxxxxxxxxxxxxxxxxxxxxx---*/

/*---xxxxxxxxx  how to cooperation css start  xxxxxxxxxxxxxxxxxxxxxxxxxx---*/
.cooperation {
              width: 90%;
              /*height: 500px;试试是否可以取消，用内容撑大*/
              margin: 80px auto 50px auto;
              /*background-color: red;*/
              }
.cooperation h1 {
                 text-align: center;
                 color: #3366cc; /* 标题改成主色蓝 */
                }
.weneed {
         float: left;
         width: 48%;
         margin-top: 20px;
         /*background-color: #625489;*/
        }
.weneed h2 {
            text-align: center;
            color: #3366cc; /*  子标题改成主色蓝 */
           }
.weneed p {
           line-height: 30px;
           margin-top: 15px;
           color: #333333;       /* 段落文字深灰 */
          }
.weprovide {
            float: right;
            width: 48%;
            margin-top: 20px;
            /*background-color: #625489;*/
           }
.weprovide h2 {
              text-align: center;
              color: #3366cc;      /*  子标题改成主色蓝 */
              }
.weprovide p {
              line-height: 30px;
              margin-top: 15px;
              color: #333333;      /* 段落文字深灰 */
             }


/*---xxxxxxxxx  how to cooperation css end  xxxxxxxxxxxxxxxxxxxxxxxxxx---*/

/*---xxxxxxxxx  homepage footer css start  xxxxxxxxxxxxxxxxxxxxxxxxxx---*/
.homefoot {
           width: 100%;
           background-color: #454545; /*这个颜色是要的*/
           margin-top: 50px;
          }
.footcenter {
             width: 90%;

             margin: 0 auto;
             display: flex;                  /* 父容器用flex布局 */
             justify-content: space-between; /* 左右分布 */
             align-items: flex-start;        /* 顶部对齐 */
             flex-wrap: wrap;                /* 小屏时允许换行 */
            }
.footlink {
           display: flex;                  /* 用flex替代float */
           justify-content: space-between; /* 三列均匀分布 */
           flex-wrap: wrap;                /* 小屏时允许换行 */
           flex: 0 0 65%;                  /* 左边占65% */
          }
.footcontact {

             flex: 30%;                     /* 右边占30%，避免被挤下去 */
            }

.footcontact img {
                width: 20px;
                margin-right: 10px;
               }
.footlink dl {
              flex: 1 1 clamp(150px, 30%, 300px); /* 最小150px，理想30%，最大300px */
              min-width: 200px;                   /* 每列最小宽度，避免太窄 */
              margin: 20px 20px 0 0;
             }
.footlink dl dt {
                 font-size: 25px;
                 color: #ffffff;                  /* 母标题保持白色 */
                 margin-bottom: 10px;
                }
.footlink dl dd a {
                  font-size: 16px;
                  color: #cccccc;                
                 }
.footlink dl dd {
                 margin-bottom: 8px; 
                }
.footcontact dl {
                margin-top: 20px;
               }
.footcontact dl dt {
                   font-size: 25px;
                   color: #ffffff;              /* 母标题保持白色 */
                   margin-bottom: 10px;
                  }
.footcontact dl dd {
                   margin-bottom: 8px;
                   font-size: 16px;
                   color: #cccccc; 
                  }
.footcontact ul {
                margin: 15px 20px;
                display: flex;          /* 横向排列 */
                gap: 25px;              /* 每个二维码之间的间距 */
                list-style: none;       /* 去掉默认的点 */
                padding: 0;

               }
.footcontact ul li {
                  text-align: center;   /* 图片和文字居中 */
                  width: 60px;          /* 给每个二维码块一个合适宽度 */
                  }
.footcontact ul li img {
                      width: 50px;         /* 图片固定大小 */
                      height: 50px;
                      display: block;
                      margin: 0 auto 5px;  /* 图片居中，底部留间距 */
                      }

.footcontact ul li p {
                       font-size: 14px;
                       color: #cccccc;
                       margin: 0;
                     }



@media (max-width: 1024px) {         /*不确定可用，先放这里用于小屏的代码*/
.footlink {
           flex: 1 1 100%;          /* 左边占满宽度 */
          }
.footcontact {
             flex: 1 1 100%;          /* 右边占满宽度 */
             margin-top: 20px;
             }
}

@media (max-width: 768px) {
.footlink {
           flex-direction: column;  /* 小屏改为纵向排列 */
           }
.footlink dl {
              flex: 1 1 100%;          /* 每列占满宽度 */
              min-width: auto;
              margin-right: 0;
             }
.footlink dl dd {
                 display: none;           /* 小屏时隐藏子标题 */
                }
}
/*---xxxxxxxxx  homepage footer css end  xxxxxxxxxxxxxxxxxxxxxxxxxx---*/