/* CSS Document */

*{margin:0px;padding:0px;border:0px;box-sizing:border-box;}

a:link,a:visited{color:#FFFFFF;text-decoration:none;}   a:hover,a:active{color:#CCCCCC;text-decoration: underline;} 

html,body{
font-family:"arial","Verdana","Times New Roman";
font-size:16px;
color:#000000;
background-color:#FFFFFF;
width: 100%;
height: 100%;
margin: auto;
padding: 0px;
}



/* 重构 header - Flex 布局（替换原有 #header 全部样式） */
#header {
    width:100%;
    background-color:#000000;
    margin:0px;
    text-align:left;
    display: flex;
    justify-content: space-between; /* LOGO左、菜单右 */
    align-items: center;
    padding: 1px 50px 1px 30px; /* 核心修改 */
    flex-wrap: wrap; /* 移动端自动换行 */
    height: auto; /* 取消固定高度165px */
}

#header img {
    height:120px;
    padding-left:0px;
    float:none;
    max-height: 120px;
    max-width: 100%;
}

/* 重构 menu - 靠右对齐（替换原有 .menu 全部样式） */
.menu {
    width:auto;
    background-color:#000000;
    margin:0 0 0 auto; /* 强制菜单靠右 */
    z-index:10000;
    position: static; /* 取消绝对定位 */
    text-align:right;
    height: auto; /* 取消固定高度45px */
}

.menu ul {
    list-style:none;
    display:flex; /* Flex横向排列菜单项 */
    zoom:1;
    height:45px;
    gap: 40px; /* 替代margin-right控制间距 */
    padding: 0;
    margin: 0;
}

.menu ul li {
    line-height:45px;
    height:45px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    position:relative;
    color:#FFFFFF;
    margin:0; /* 清空原有margin-right */
    float: none; /* 取消浮动 */
    white-space: nowrap; /* 防止文字换行 */
}

.menu ul li+li {
    margin-right:0; /* 清空原有margin-right */
}

.menu ul li a {}

/* 新增移动端适配（追加到 .menu 样式后） */
@media (max-width: 768px) {
    #header {
        padding: 10px 10px;
    }
    #header img {
        max-height: 80px;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    .menu ul {
        gap: 15px;
        width: 100%;
        justify-content: flex-end; /* 移动端菜单仍靠右 */
    }
    .menu ul li {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .menu ul {
        gap: 8px;
    }
    .menu ul li {
        font-size: 11px;
        padding: 0 2px;
    }
}




#main                                       /*主体内容*/
{width:100%;
background-color:#FFFFFF;
margin:auto;
padding:0px;
}



                             /*主体内容之滑动图片导航*/

/* BANNER 轮播核心样式 */
.banner-slider-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 轮播图片列表容器 */
.banner-slider {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

/* 单张轮播图样式 */
.banner-slide {
    min-width: 100%;
}

/* 图片链接样式（去除下划线，确保图片占满容器） */
.banner-slide a {
    display: block;
    text-decoration: none;
}

.banner-slide img {
    width: 100%;
    height: auto;
    display: block; /* 去除图片底部空白 */
    cursor: pointer; /* 鼠标移到图片上显示手型，提示可点击 */
}

/* 箭头通用样式 */
.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(240,240,240,0.8);
    color: white;
    border: none;
    padding: 15px 10px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s;
    box-sizing: border-box;
}

/* 左箭头位置 */
.banner-arrow-prev {
    left: 20px;
}

/* 右箭头位置 */
.banner-arrow-next {
    right: 20px;
}

/* 箭头悬浮效果 */
.banner-arrow:hover {
    background-color: rgba(220,220,220,0.9);
}

/* 响应式适配（手机端箭头缩小） */
@media (max-width: 768px) {
    .banner-arrow {
        font-size: 18px;
        padding: 10px 7px;
    }
}



#categories         /*四种产品图片导航*/
 {width:100%;
  overflow:hidden;
  }

#letters          /*文字Product Categories*/
 {width:100%;
 text-align:left;
  overflow:hidden;
  margin-top:50px;
  margin-left:50px;
  margin-bottom:30px;
  font-size:30px;}

#fourimages             /*四种产品导航图片*/
  {width:100%;
  text-align:center;
  overflow:hidden;}
  #fourimages img
  {width:22%;
  margin:0 15px;
  transition:all 0.3s ease;}   /* 核心：加过渡动画，让浮动更丝滑（只加这1行） */

@media (max-width: 768px) {
  #fourimages img {
    width: 45%; /* 移动端2列显示 */
    margin: 0 5px 10px;
  }
}
@media (max-width: 480px) {
  #fourimages img {
    width: 90%; /* 小屏1列显示 */
  }
}

/* 鼠标悬浮效果（只加这几行） */
    #fourimages img:hover {
            /* 向上浮动8px（数值可改，比如5px/10px） */
            transform: translateY(-8px);
            /* 可选：加阴影增强浮动感，更立体 */
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        }





.customization            /*定制说明*/
{width:85%;
height:50px;
margin-top:30px;
margin-bottom:0px;
font:arial;
font-size:30px;
color:#000000;
text-align:left;
padding-left:60px; }

  #customizedcolors       /*定制颜色图片*/
 {
width:85%;
 text-align:center;
  overflow:hidden;
  margin:auto;
	 
 }
#customizedcolors img{width:100%;}

  #customizedlogo       /*定制LOGO图片*/
 {
width:85%;
 text-align:center;
  overflow:hidden;
  margin:auto;
	 
 }
 #customizedlogo img{width:100%;}

 #certifications       /*证书*/
 {
width:90%;
 text-align:center;
  overflow:hidden;
  margin:auto;
	 
 }
 #certifications img{width:100%;}

 #logistics       /*物流*/
 {
width:85%;
 text-align:center;
  overflow:hidden;
  margin:auto;
	 
 }
 #logistics img{width:100%;}


 


.hot                    /*主体内容之hot products图片导航*/                
{width:100%;
height:200px;
background-color:#ffffff;
border-top:2px solid #CCCCCC;
border-bottom:2px solid #CCCCCC;
margin:20px auto;
padding:20px 0px;}
.hot p
{font-size:22px;
font-weight:bold;
margin:auto;
text-align:center;}
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
width: 90%; 
margin:auto;
height:170px;
} 
#demo img { 
border: 3px solid #F2F2F2; 
height:150px;width:120px;
} 
#indemo { 
float: left; 
width: 800%; 
} 
#demo1 { 
float: left; 
} 
#demo2 { 
float: left; 
} 

.box-container {
            display: flex; /* 开启Flex并排 */
            gap: 10px; /* 块之间间隔10px（不影响百分比宽度） */        
            margin: 0 auto; /* 容器居中 */
            background-color:#f5f5f5;
            width: 100%; }

 .box1 {flex-basis: 30%; 
  display: flex;
  justify-content: center; /* 左右居中 */
  align-items: center;     /* 上下居中 */
  height: 250px; /* 必须给容器高度 */}

 .box1 img{ width: 150px;height: auto;}
  
      
 #title
     { font-size:22px;font-weight:bold;color:#222222}

.box2 { flex-basis: 30%;  padding-left: 60px; padding-top: 30px; height: 250px;
        font-size:18px;line-height:40px;
}
.box2 a {
  color: #222222;
  text-decoration: none;
}
.box2 a:hover {
  color: #666666;
}
       
  .box3 { flex-basis: 30%; 
padding-top: 30px;
 height: 250px;
  display: flex;
  justify-content: center; /* 整块左右居中 */
  font-family: Arial, sans-serif;
  line-height: 1.8;
  font-size: 16px;
color:#222222}

.contact-info {
  text-align: left; /* 文字左对齐 */

}

.contact-title {

  font-size: 24px;
  font-weight: bold;
  margin: 0 0 8px 0;
}
#bottom
{
width:100%;
height:40px;
background-color:#000000;
border-top:2px solid #CCCCCC;
font-size:14px;
color:#f0f0f0;
}

#copyright
{display: flex;
  justify-content: center; /* 左右居中 */
  align-items: center;     /* 上下居中 */
  height: 40px;           /* 必须给高度 */
}