html{
/* 为滚动过程添加过渡效果,如目录导航框、name=abc等地方 */
    scroll-behavior: smooth;
}


body{
    margin: 0;
    padding: 0;
    font: 12px/150% Verdana, Arial, Helvetica, sans-serif;
    color: #333;
	
/* div#four始终靠下之1/2步：  body 设置为 flex 布局：通过 flex-direction: column; 将页面布局设置为垂直方向，并通过 min-height: 100vh; 确保页面至少占满整个视口高度。 */
    display: flex;  
    flex-direction: column;  
    min-height: 100vh; 
}



@media screen and (max-device-width: 768px) {
body {
    font-size: 1em;/*注，这是移动端布局的全局的基础字体，这个变大一倍，其它所有字体在原基础上变大一倍，*/
}
}

#one{
    margin: 0px auto;
	width:100%;
    height:auto;
	text-align: center;
}
@media screen and (max-device-width: 768px) {
#one{
  	width:98%;	
}
}
#two{
    margin: 0px auto;
	width: 1260px;	
}
@media screen and (max-device-width: 768px) {
#two{
	width: 98%;
}
}

/* a链接的样式 */
a:link {
    color:#0066CC; 
    text-decoration: none;
}

a:hover {
    color: #c00; 
    text-decoration: underline;
    background-color: rgba(173, 216, 230, 0.3);
    padding: 3px 0 3px 0; 
    border-radius: 5px;
}

a:active {
    color: #0099CC;
}

a:visited {
    color: #000099;        /* 已点击过的链接的颜色 */
   
}

a img {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
	border-radius: 0; /* 初始状态无圆角 */
  }

a img:hover {
    transform: scale(1); /* 图片放大效果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 更明显的阴影效果 */
	border-radius: 6px; /* 添加圆角效果，可以根据需要调整圆角大小 */
  }


#logo{
	float: left;
	height: 210px;
	width: 1260px;

}
@media screen and (max-device-width: 768px) {
#logo{
	/*float: left;*/
	height: auto;
	width: 100%;
}
}

/*1260宽度的图片轮播,注意transition-1s是没有意义的，可以删除。由于图片张数变化这里也要改，为了适应所有页面，这里将来改为默认10张图，6秒换一张共60秒，图片不够10张就重复几张 另外那个百分比是调切换时间的，但是可能会影响图片跳动问题*/
.slider {
  width: 1260px;
  height: 210px;
  position: relative;
  overflow: hidden;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slider img:first-child {
  opacity: 1;
}
.slider img.active {
  opacity: 1;
}
@keyframes slide {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.slider img:nth-child(1) {
  animation: slide 60s infinite 0s;
}

.slider img:nth-child(2) {
  animation: slide 60s infinite 6s;
}

.slider img:nth-child(3) {
  animation: slide 60s infinite 12s;
}

.slider img:nth-child(4) {
  animation: slide 60s infinite 18s;
}

.slider img:nth-child(5) {
  animation: slide 60s infinite 24s;
}

.slider img:nth-child(6) {
  animation: slide 60s infinite 30s;
}

.slider img:nth-child(7) {
  animation: slide 60s infinite 36s;
}

.slider img:nth-child(8) {
  animation: slide 60s infinite 42s;
}

.slider img:nth-child(9) {
  animation: slide 60s infinite 48s;
}

.slider img:nth-child(10) {
  animation: slide 60s infinite 54s;
}

@media screen and (max-device-width: 768px) {
.slider {
  width:100%;
  height:160px;

}
.slider img {
  width: 100%;
 
}
}

/* 首页的大图*/

.sliderindex {
  width: 1040px;
  height: 520px;
  position: relative;
  overflow: hidden;
}
.sliderindex img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.sliderindex img:first-child {
  opacity: 1;
}
.sliderindex img.active {
  opacity: 1;
}
@keyframes slide {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.sliderindex img:nth-child(1) {
  animation: slide 30s infinite 0s;
}

.sliderindex img:nth-child(2) {
  animation: slide 30s infinite 3s;
}

.sliderindex img:nth-child(3) {
  animation: slide 30s infinite 6s;
}

.sliderindex img:nth-child(4) {
  animation: slide 30s infinite 9s;
}

.sliderindex img:nth-child(5) {
  animation: slide 30s infinite 12s;
}

.sliderindex img:nth-child(6) {
  animation: slide 30s infinite 15s;
}

.sliderindex img:nth-child(7) {
  animation: slide 30s infinite 18s;
}

.sliderindex img:nth-child(8) {
  animation: slide 30s infinite 21s;
}

.sliderindex img:nth-child(9) {
  animation: slide 30s infinite 24s;
}

.sliderindex img:nth-child(10) {
  animation: slide 30s infinite 27s;
}

@media screen and (max-device-width: 768px) {
.sliderindex {
  width: 100%;
}
}

/*返回顶部*/
#scrollToTop {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 20px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 2s;
}
#scrollToTop img{
opacity: 0.6;
}

@media screen and (max-device-width: 768px) {

#scrollToTop {
    right: 100px;
    bottom: 100px;
}

#scrollToTop img{
width:100px;
height:100px;
opacity: 0.3;

}
}

/* 购买搜索框 */
#search-form {
			  display: flex;
			  width:30%;
            gap: 10px;
			padding-left:80px;
			padding-top:4px;
}

#search-input {


            flex: 1;
            padding: 6px 6px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            transition: all 0.3s ease;
          
			box-shadow: 0 2px 5px rgba(0,123,255,.2); /* 轻微阴影效果 */

}

        #search-input:focus {
            outline: none;
            border-color: #4a90e2;
            background-color: white;
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
        }
        
        #search-input::placeholder {
            color: #aaa;
        }
        
        #search-form input[type="submit"],
        #reset-all {
            padding: 6px 6px;
            border: none;
            border-radius: 6px;
        
            cursor: pointer;
            transition: all 0.3s ease;
         
        }
        
        #search-form input[type="submit"] {
            background-color: #4a90e2;
            color: white;
        }
        
        #search-form input[type="submit"]:hover {
            background-color: #3a7bc8;
            transform: translateY(-1px);
        }
        
        #reset-all {
            background-color: #f5f5f5;
            color: #666;
            border: 1px solid #e0e0e0;
        }
        
        #reset-all:hover {
            background-color: #e9e9e9;
            transform: translateY(-1px);
        }


@media screen and (max-device-width: 768px) {

#search-form {
  display: flex;
  flex-wrap: wrap; /* 开启自动换行 */
  justify-content: left;
  align-items: center;
}


#search-input {
  padding: 0px 0px 0px 10px;
  border: 1px solid #ccc;
  font-size:1em;
  border-radius: 10px;
  width: 800px; /* 宽度设置为100% */
  height:80px;
  margin-bottom: 10px; /* 下方留一些距离 */
  margin-top: 10px;
}


  #search-form input[type="submit"],
    #reset-all {
        font-size: 1em;
        padding: 4px 6px;
        height: 2em;
        flex: 1;
        min-width: 100px;
		border-radius: 10px;
    }
    
    #search-form input[type="submit"] {
        margin-bottom: 10px;
    }
    
    #reset-all {
        margin-bottom: 10px;
    }
}

/* 位于产品列表下方的站内搜索框 */

.search-form-all input[type="text"] {
float:left;
    width:160px;
    padding: 7px;
    margin-right: 3px;
	margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,123,255,.2); /* 轻微阴影效果 */
	transition: all 0.3s ease; /* 添加过渡效果 */
}


  /* 添加聚焦状态样式 */
        .search-form-all input[type="text"]:focus {
            outline: none;
            border-color: #4a90e2;
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
        }

.search-form-all input[type="image"] {
    margin-top: 15px; /* 使图片按钮垂直居中 */

}

@media screen and (max-device-width: 768px) {
    .search-form-all input[type="text"] {
        width: 50%; /* 增加宽度以充满更多屏幕空间 */
        padding: 30px; /* 增加填充以便于点击 */
		margin-top: 50px; /* 增加外边距以改善布局 */
		margin-bottom:50px;
        font-size: 36px; /* 增加字体大小以提高可读性 */
		border: 1px solid  #0099FF;
		 border-radius: 20px;
		}

    .search-form-all input[type="image"] {
        width: 60px; /* 增加图片按钮的尺寸 */
        height: 60px; /* 指定高度以确保按钮大小适中 */
        margin: 70px 20px 30px 20px; /* 如果需要，可以调整外边距以改善布局 */

    }
}

/*光标经过跳出文字,用于在线订购中标准号的弹出中文解释*/
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: rgba(79, 156, 238, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  margin: -50px 0 0 0px;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}


@media screen and (max-device-width: 768px) {
.tooltip .tooltiptext{margin: -4em 0 0 0px;
width:200px;

}
}

/*用于弹出正文中的需要解释的大段文字*/

.tooltip .tooltiptext-big {
  visibility: hidden;
  width: 460px;
  background-color: rgba(79, 156, 238, 0.85);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  white-space: normal; 
}

.tooltip:hover .tooltiptext-big {
  visibility: visible;
}

@media screen and (max-device-width: 768px) {

.tooltip img {
  width: 50px;
  height: 50px;
}


.tooltip .tooltiptext-big{ 
    width:400px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal; 
	font-size:1.5em;
	line-height:1.5em;

}
}

/*勾选框的大小在移动端的定义 */
@media screen and (max-device-width: 768px) {
input[type="checkbox"] {
  width:36px;
  height:36px;
}
}

#gongsi{
	background-image: url(../pic/black-1260.jpg);/*tpa=http://www.finesz.com/pic/black.jpg*/
	height: 37px;
	clear:both;/*清除上面的FLOAT*/
	font-size: 13px;
	font-weight: bold;
	padding-left: 0px;
}
@media screen and (max-device-width: 768px) {
#gongsi{
    background-image: none;/*tpa=http://www.finesz.com/pic/black.jpg*/
	height: none;
	clear:none;/*清除上面的FLOAT*/
	font-size: 2.3em;
	font-weight: normal;
	padding-left: 0;  
}
}
.zhansi{
	width: 140px;
	float: left;
	text-align: center;
	line-height: 37px;
	white-space: nowrap;
}

@media screen and (max-device-width: 768px) {
.zhansi{
	width: 33.3%;
	line-height: 2em;
    background-color: #62C0FF;
	white-space:normal; 
}
}
.zhansi a:link{color:#993333;text-decoration:none;} 
.zhansi a:visited {color:#993333;text-decoration:none;}
.zhansi a:hover {color: #FF6633; text-decoration: underline;}

#three{
clear:both;/*清除上面的FLOAT*/
    margin: 0px auto;
	width: 1260px;
	height: auto;
	
/* div#four始终靠下之2/2步：让内容区域占满剩余空间  */
flex-grow: 1; 

}
@media screen and (max-device-width: 768px) {
#three{
	width: 98%;
	padding-top: 5px;
	clear:both;/*清除上面的FLOAT*/
	padding-top: 5px;
}
}
#left{

	margin: 0px auto;
	width: 220px;
	float: left;
	margin-bottom: 2px;/*将表格3与4隔开一下，搞了三处是为了应对多种浏览器 */
	
}
@media screen and (max-device-width: 768px) {
#left{
	width:98%;
	float: none;
	margin-bottom: none;/*将表格3与4隔开一下，搞了三处是为了应对多种浏览器 */
	clear:both;
}
}
#right{

	width: 1040px;
	float: right;
	padding-left: 0px;
	text-align: left;
	line-height: 18px;
	padding-top: 8px;
	font-size: 13px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-right: 0px;
	margin-bottom: 2px;/*将表格3与4隔开一下，搞了三处是为了应对多种浏览器 */
}
@media screen and (max-device-width: 768px) {
#right{
	width: 98%;
	float: none;
	padding-left:none;
	margin: 0px auto;
	/*text-align: left;*/
	line-height: normal;
	padding-top: 0.1em;
	font-size: 2.2em;
	/*color: #000000;*/
	/*font-family: Verdana, Arial, Helvetica, sans-serif; */
	/*padding-right: 0px;*/
	margin-bottom: 0.5em;/*将表格3与4隔开一下，搞了三处是为了应对多种浏览器 */
}
}
#right a:link {color:#0066CC;} 
#right a:visited {color:#0066CC;} 
#right a:hover {color:#FF0000;}
#four{
    min-width:1260px;
    width:100%;
    margin: 0px auto;
	background:#333333;
	clear:both; /*FF浏览器自由下滑，注上面的left边距要去掉 */
	line-height: 13px;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	padding-top: 4px;
	margin-top: 2px;/*将表格3与4隔开一下，搞了三处是为了应对多种浏览器 */
	display: flex;
    justify-content: center;
    align-items: center;
	}
#four a:link{color:#666666;} 
#four a:visited{color:#666666;} 
#four a:hover {color:#FF0000;}	
	
@media screen and (max-device-width: 768px) {
#four{
display: none; /* 在手机端隐藏 #four 元素 */ 
}
}

#foot{
	margin: 0px auto;
}

.daohang{
	text-align: left;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #CC3300;
	background-position: left;
	vertical-align: middle;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	padding-bottom: 2px;
	margin-bottom: 3px;
}

/* 首页产品分类调用的下划线 */
.daohang-1{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color:  rgba(204, 204, 204, 0.8);
	margin-left:80px;
	margin-right:10px;
}


.daohang-2{
	border-bottom-width: 1px;
	border-bottom-style:  dashed;
	border-bottom-color: #999999;
	padding-bottom: 1px;
	margin-bottom: 1px;
	margin-left:90px;
}
.daohang-3{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color:  rgba(204, 204, 204, 0.8);
	margin-right:10px;
}


@media screen and (max-device-width: 768px) {
.daohang-1{
   margin-left:2em;
	border-bottom: 1px solid #CCCCCC;  
	padding-bottom: 1px;
	margin-bottom: 1px;

}
}

@media screen and (max-device-width: 768px) {
.daohang{
	font-size: 1em;
	font-weight:normal;
	padding-bottom: 0;
	margin-bottom: 0.3em;
}
}

.xian{border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #E7E7E7;
	margin-bottom:10px;
	margin-top:10px;
	width:100%;
}

/*右侧导航条*/
.fenge{
	height: 1px;
	width: 50%;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #A8A8D5;
	margin-left: 30px;
}
@media screen and (max-device-width: 768px) {
.fenge{
	width: 68%;
	border-bottom-style: solid;
	border-bottom-color: #b7b7b7;
	margin-left: 100px;
	margin-top:2px;
	margin-bottom:0;
}
}


/*这是用于鼠标划过弹出的*/
tiaotiao{color: #0066CC;

}




.nei{
	border: 1px solid #CCCCCC;
	width: 1038px;
	overflow: auto;/*主框高度相对于子框自动溢位*/
    display: table;/*将该DIV变一个TABLE一样的东东，接下面它里面的pic w则可以变成TABLE-CELL即TR TD一样的东东，这样以利于该TD垂直居中 20190829*/  	
}
@media screen and (max-device-width: 768px) {
.nei{
    border: 1px solid #0066CC;
	border-radius:10px;
	width: 100%;
	background:#F5F5F5;
	margin-top:0.5em;
	margin-bottom:0.5em;
	display: block;
}
}
.rong{
    width: 1038px;
	overflow: auto;/*主框高度相对于子框自动溢位*/
    display: table;/*将该DIV变一个TABLE一样的东东，接下面它里面的pic w则可以变成TABLE-CELL即TR TD一样的东东，这样以利于该TD垂直居中 20190829*/  
    border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
@media screen and (max-device-width: 768px) {
.rong{
    border: 1px solid #0066CC;
	border-radius:10px;
	width: 100%;
	background:#F5F5F5;
	margin-bottom:0.5em;
	display: block;
}
}
.kong{
	width: 1038px;
	overflow: auto;/*主框高度相对于子框自动溢位*/
    display: table;/*将该DIV变一个TABLE一样的东东，接下面它里面的pic w则可以变成TABLE-CELL即TR TD一样的东东，这样以利于该TD垂直居中 20190829*/  
}
@media screen and (max-device-width: 768px) {
.kong{
    border: 1px solid #0066CC;
	border-radius:10px;
	width: 100%;
	background:#F5F5F5;
	margin-top:0.5em;
	margin-bottom:0.5em;
	display: block;
}
}

/*kong10到kong100的，用于将<div class=biaosi>置于这些DIV里，从而使表格总宽度看上去占据页面的百分之多少且居中 */
.kong10,.kong20,.kong30,.kong40,.kong50,.kong60,.kong70,.kong80,.kong90,.kong100{height:auto;margin:0 auto;padding:5px 0px 5px 0px;
}

.kong10 { width: 10%; }
.kong20 { width: 20%; }
.kong30 { width: 30%; }
.kong40 { width: 40%; }
.kong50 { width: 50%; }
.kong60 { width: 60%; }
.kong70 { width: 70%; }
.kong80 { width: 80%; }
.kong90 { width: 90%; }
.kong100 { width: 100%; }

@media screen and (max-device-width: 768px) {
.kong10,.kong20,.kong30,.kong40,.kong50,.kong60,.kong70,.kong80,.kong90{
width: 100%;
}
}


.biaosi{
    text-align:left;
    width:fit-content;/*DIV宽度跟据文字的宽度自适应*/
    margin:0 auto;
	padding:8px;
}

/*产品图纸。自动居中，手机端放大且不超出父DIV*/

.tuzhi {  
    display: block; /* 使图像为块级元素，以便能居中 */  
    margin: 0 auto; /* 水平居中 */  
    max-width: 100%; /* 限制宽度不超出父容器 */  
    height: auto; /* 高度自适应 */  
	padding:0px 0px 5px 0px;
}  
@media screen and (max-device-width: 768px) {  
    .tuzhi {  
        width: 70%;      
    }  
} 
@media screen and (max-device-width: 600px) {  
    .tuzhi {  
        width: 80%;      
    }  
} 
@media screen and (max-device-width: 500px) {  
    .tuzhi {  
        width: 90%;      
    }  
} 



/*宽度240PX的小图 */
.pic{
	float: left;
	border-right-width: 0px;
	border-right-style: solid;
	border-right-color: #CCCCCC;
	margin-right: 2px;
}
@media screen and (max-device-width: 768px) {
.pic{
    width:40%;
	border-right-width: none;
	border-right-style: none;
    margin-right: 0.2em;
}
}


  /*450px以下的屏幕 pic picinkong图片放大到50%*/
@media screen and (max-device-width: 450px) {
.pic{
    width:50%;
	border-right-width: none;
	border-right-style: none;
    margin-right: 0.2em;
}
}
.picinkong{
	float: left;
	margin-right: 2px;
}

@media screen and (max-device-width: 768px) {
.picinkong{
    width:40%;
	margin-right: 0.2em;
}
}
  /*450px以下的屏幕 pic picinkong图片放大到50%*/
@media screen and (max-device-width: 450px) {
.picinkong{
    width:50%;
	margin-right: 0.2em;
}
}
.w{
	position: relative;
	width: 100%;/*之前是auto,而DISPLAY的属性改为TABLE-CELL后，AUTO会自动缩小靠右故改为100% 20190829*/
	right: 0px;/*以上三条相对定位：相对主框右侧边距为0且，宽度自动*/
	display: table-cell;/*将该DIV变为里面的TR或TD一样的样式,请注意上面的nei rong等父框已变为TABLE了。这里是利于下面一行的垂直居中 20190829*/
	vertical-align: middle;/*垂直居中 20190829*/
}
@media screen and (max-device-width: 768px) {
.w{
	width: auto;
	display: block;
	vertical-align:	top;
}
}
.flash{	
    width:1038px;/*这如写100%或740，因border=1，DW显示将left菜单栏撑到下面，但不影响浏览器显示，出于强迫症改成738了*/
	height:auto;
	
	padding-top: 5px;
	padding-bottom:5px;
	text-align: center;	
}
@media screen and (max-device-width: 768px) {
.flash{
    width:100%;
	padding-top: 0.6em;
	padding-bottom:0.6em;
	border-radius:10px;
}
}




.tm{
     width: 1260px;
	padding-left: 0px;
	padding-top:4px;
	padding-bottom:6px;

   
	
}
@media screen and (max-device-width: 768px) {
 .tm{   padding-left: 5px;
 font-size:0.6em;
 line-height:1em;
}
}

.show {
    width: 100%;
    /* 移除text-align: center，避免子元素居中 */
    display: flex; /* 使用flex布局 */
    flex-wrap: wrap; /* 允许自动换行 */
    justify-content: flex-start; /* 子元素靠左排列 */
    background-color: #EFEFEF;
    padding: 5px 0; /* 增加上下内边距，避免边缘产品贴边 */
}

.zs {
    width: auto;
    height: auto;
    margin: 5px 5px 5px 20px; 
    border: 1px solid #8EC7FF;
    display: inline-block;
  text-align: center; /* 新增：使容器内文字居中*/
  border-radius: 6px;
}
/*  由于上面的a img:hover统一图片属性是border-radius: 6px;所以此处也不得不加这个 */
.zs:hover {
    border-radius: 4px;
}
.zs img{
 border-radius: 6px;
}

.zs img:hover{
 border-radius: 4px;
}
@media screen and (max-device-width: 768px) {

.zs {
    width: 33%;
	height:auto;
    margin: 0px;
    float: left;
    border: 1px solid #8EC7FF;
	font-size:1em;
	line-height: 1.5;/* 中英文本的高度不一样导致float:left显示异常，加上行高使文本高度一样 */
  }
  
  .zs img {
    width: 100%; /* 增加图片的宽度 */
    height: auto; /* 让高度自适应，保持图片比例 */
  }
}


.b{
	font-size: 16px;
	font-weight: bold;
	color: #FF3300;
	line-height: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
@media screen and (max-device-width: 768px) {
.b{
	font-size:1em;
	font-weight: bold;
	}
}
.bzm{
	font-size: 30px;
	color: #FF3300;
	line-height: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
@media screen and (max-device-width: 768px) {

.bzm{
	font-size: 2em;
	color: #FF3300;
}
}

.qingchu{clear:both;/*首页的分类筛选器有调用这个*/

}

/*筛选框*/

.yiji-1{
 overflow: auto; /* 就是这个讨厌的属性，阻止了图片弹出，导致没法做一个整体的框把筛选框包住，所以，只能将本DIV做成水平线了 */
 margin-top: 3px;
 margin-bottom:3px;
  margin-left:36px;
 height: 1px; /* 线的厚度，可以根据需要调整 */
 background-color: rgba(79, 156, 238, 0.8);

}

.biaozun{ 
width:69px; 
float: left; 
text-align: right;
margin-right: 5px;
}

.befor-product{
margin-left:80px;

}

.product{
display: flex; 
flex-wrap: wrap; 
align-items: baseline; 
}

.product label {
  margin-right: 5px; /* 调整这个值以减少或增加距离 */
  margin-left: 0px; /* 调整这个值以减少或增加距离 */
  display: flex;
  align-items: center; /* 确保复选框和文字垂直居中 */
    border-radius: 3px; /* 如果你喜欢圆角的话，可以添加这个属性 */
}
.product label:hover{
background-color:#CCCCCC; /* 添加浅色背景 */
}
.product input[type="checkbox"] {
  margin-right: 0px; /* 这个值用于调整复选框和文字之间的具体距离 */
  margin-left: 0px; /* 这个值用于调整复选框和文字之间的具体距离 */
}

@media screen and (max-device-width: 768px) {
.biaozun{ width: 100%; float: none;  text-align: left; color: red; }

.yiji-1{
margin-left:0px;
}

.product{ padding-top: 10px;
 }

.product label {
margin-right: 10px; /* 调整这个值以减少或增加距离 */
}
}





/* 内容居中 */
.neirongjuzhong{
	width:100%;
	text-align: center;
	padding-bottom:8px;
}

/* 标题或表格的表名居中 */
.biaotijuzhong{
	width:100%;
	text-align: center;
	margin-top:12px;
	margin-bottom:4px;
	
}
.biaotijuzhong span {  
    color: rgba(51, 51, 51, 0.8); /* 字体颜色，透明度80% */     
    font-weight: bold; /* 字体加粗 */  
    background-color:rgba(30, 144, 255, 0.1); /* 背景颜色 */  
    border-radius: 5px; /* 边框圆角 */
	padding:3px; 
	padding-left:4px;
	padding-right:4px;
	
}  



@media screen and (max-device-width: 768px) {
.neirongjuzhong{
	padding-bottom:0.5em;
}}

/* 首页最下面一行的6张图片的样式 */
.index-botton{
    float:left;
	width:160px;
	padding-left:11.5px;
	padding-bottom:2px;
	
}
@media screen and (max-device-width: 768px) {
.index-botton{
    width:31%;
	padding-left:2%;
}
.index-botton img{
width:100%;
height:100%;

}

}


/* 分页文字居中与大小 */
.pagination { text-align: center;
margin-bottom:10px;
margin-top:10px;


 }
.pagination a, .pagination span { font-size: 14px; 
margin-right: 8px; }



/* 让表格第隔一行背景变为灰色,主要用于商品展示下单 */
.pro tr:nth-child(2n+1) {
  background-color: #ccc;
}
tr {
  border-bottom: 1px solid #ccc;
}

td {
  border-bottom: 0px solid #ccc;
  word-wrap: break-word;
  word-break: break-all;
}


@media screen and (max-device-width: 768px) {
 table.pro {
        width: 1800px;
		font-size:0.9em;
    }
td {
 
  /* 添加列之间的淡色线 */
  border-right: 1px solid rgba(0, 0, 0, 0.15); /* 使用 RGBA 颜色格式来设置透明度 */
}

}


/* 加入购物车的数字框的样式 */

.jiarugouwuche{ 
text-align:right;
}

.input-1{
width:65px;
border-radius: 4px;
 border: 1px solid #cccccc; /* 添加蓝色边框 */

}

.input-1:focus {
        outline: none;
        border-color: #4a90e2;
        background-color: white;
		 transition: all 0.3s ease;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
    }
@media screen and (max-device-width: 768px) {

.jiarugouwuche{ 
width:338px;
}

.input-1{
width:100px;
height:50px;
font-size:1em;
float:left;
}


.input-2{
width:200px;
height:50px;
font-size:1em;
float:right;
text-align: center;
}

.input-3{
width:100px;
height:50px;
font-size:1em;
text-align: center;
}

} 


.xuxian-4{
 border-bottom: 1px dashed #000;
 width: 40%;
 margin-left:18px;
}
@media screen and (max-device-width: 768px) {

.xuxian-4{
 border-bottom: 1px dashed #000;
 width: 25%;
 margin-left:6em;
}

}
/* 产品属性表格 */

.xuxian tr {
  border-bottom: 1px dashed #cccccc; /* 设置单元格边框 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: center; /* 设置文本居中 */
  line-height: 28px;
}
.xuxian tr:hover {
  background-color: transparent;/*将鼠标悬停时的背景颜色设置为透明色,因为本CSS有一个统一的tr的hover特效，而本处不想要这个特效*/
}

.xuxian td {
  text-align: left;
}

/* 文字加粗灰色，螺丝页面的产品属性用 */
.xuxian-word{
    width:60px;
    padding-left:30px;
    color:#999;
	float:left;
	font-weight: bold;
}

/* 目录导航 */

      .mulu-container {  
            display: flex; /* 使用flexbox */  
            border-top: 1px solid lightgray; /* 上边框 */  
            border-bottom: 1px solid lightgray; /* 下边框 */  
            padding: 0px 0; /* 上下内边距 */  
			width:56%;
			margin: 20px; 
			
        }  
        .mulu-sidebar {  
            flex: 0 0 85px; /* 固定宽度 */  
            margin-right: 1px; /* 右侧间隔 */  
			margin-left: 30px; /* 右侧间隔 */  
			border-right:1px solid lightgray; 
        }  
        .mulu-catalogue {  
            display: grid; /* 使用Grid来整理章节 */  
            
            gap: 10px; /* 每列之间的间隔 */  
            list-style-type: none; /* 去掉默认的列表样式 */  
            padding: 20px; /* 去掉内边距 */  
        }  
        .mulu-catalogue li {  
            margin-left: 20px; /* 每个项的间距 */  
            font-size: 16px; /* 项的字体大小 */  
        }   


@media screen and (max-device-width: 768px) {

.mulu-container { width:98%;}
    .mulu-catalogue {  
        display: block; /* 改为使用block布局 */  
    }  
    .mulu-catalogue li {  
        margin-left: 0; /* 移除左侧间距 */  
        margin-bottom: 10px; /* 为每个项添加底部间距 */  
        font-size: 1em; /* 项的字体大小 */  
    }  
}

/* 以下样式由这个调用：<div class="zhongjian"><span>大图赏析</span></div>，原文字中间风格有备份。2023/9后转换为文字靠左风格 */
.zhongjian {
  display: flex;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 14px;

}

.zhongjian span {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  font-weight: 800;
  color: #333333;
  white-space: nowrap;
  white-space: normal;
 
}

.zhongjian span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 24px;
  background-color: #4F9CEE;
}

.zhongjian::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #4F9CEE;
  margin-left: 10px;
}

@media screen and (max-device-width: 768px) {
  .zhongjian span {
    font-size: 1.2em;
	padding-left: 0.8em;
  }
  .zhongjian span::before {
    width: 0.6em;
	height: 1.2em;
  }
  .zhongjian::after {
    background-color: ##BFDFFF;
  }
}



/* 蓝色圆点 实心1----------------------从dian 到dian_6 对应段落内的层次布局 */
.dian {   
    padding-top:5px;   
    padding-bottom:2px;  
	padding-left:10px; 
    position: relative; 
	 margin-left: 5px;
	 
}   
.dian::before {   
    content: "";   
    width: 8px;   
    height: 8px;   
    border-radius: 50%;   
    background-color: #4F9CEE;   
    position: absolute;  
    left: 0;   
    top: 7px;  
    transform: translateY(3px);  
}
 .dian span { font-weight: bold; font-size:15px;color: #333333;} 
@media screen and (max-device-width: 768px) {

.dian {   
	padding-left:0.8em;
	margin-left: 0.3em;      
}
 .dian::before { 
     width: 0.6em; 
	 height:0.6em; 
	 border-radius: 50%;
	transform: translateY(0.36em); 
	   } 
 .dian span {font-size:0.9em;
 	margin-top: 1em;
    margin-bottom: 1em;
 } 
}


/* 蓝色圆点 实心2 */
.dian_2 {   
    padding-top:3px;   
    padding-bottom:2px;  
	padding-left:8px; 
    position: relative;  
	 /* 添加 10px 的左边距 */
    margin-left: 15px;
}   
.dian_2::before {   
    content: "";   
    width: 6px;   
    height: 6px;   
    border-radius: 50%;   
    background-color: #4F9CEE;   
    position: absolute;  
    left: 0;   
    top: 7px;  
    transform: translateY(3px);  
}
 .dian_2 span { font-weight: bold; font-size:14px;color: #333333;} 
@media screen and (max-device-width: 768px) {

.dian_2 {   
	padding-left:0.5em;  
	margin-left: 1em;  
}
 .dian_2::before { 
     width: 0.4em; 
	 height:0.4em; 
	 border-radius: 50%;
	transform: translateY(0.45em); 
	   } 
 .dian_2 span {font-size:0.8em;
 	margin-top: 1em;
    margin-bottom: 1em;
 } 
}


/* 蓝色圆点 实心3 */
.dian_3 {   
    padding-top:3px;   
    padding-bottom:2px;  
	padding-left:6px; 
    position: relative;  
	 /* 添加 10px 的左边距 */
    margin-left: 25px;
}   
.dian_3::before {   
    content: "";   
    width: 4px;   
    height: 4px;   
    border-radius: 50%;   
    background-color: #4F9CEE;   
    position: absolute;  
    left: 0;   
    top: 8px;  
    transform: translateY(3px);  
}
 .dian_3 span { font-weight: bold; color: #333333;} 
@media screen and (max-device-width: 768px) {

.dian_3 {   
	padding-left:0.3em;  
	margin-left: 1.5em;  
}
 .dian_3::before { 
     width: 0.2em; 
	 height:0.2em; 
	 border-radius: 50%;
	transform: translateY(0.5em); 
	   } 
 .dian_3 span {font-size:0.7em;
 	margin-top: 1em;
    margin-bottom: 1em;
 } 
}

/* 蓝色圆点 空心4*/
.dian_4 {   
    padding-top:5px;   
    padding-bottom:2px;  
	padding-left:10px; 
    position: relative; 
 margin-left: 35px;
	 
}   
.dian_4::before {   
    content: "";   
    width: 7px;   
    height: 7px;   
    border-radius: 50%;   
    background-color: transparent; /* 设置背景为透明 */
    border: 1px solid #4F9CEE; /* 添加边框，颜色为蓝色 */ 
    position: absolute;  
    left: 0;   
    top: 7px;  
    transform: translateY(3px);  
}
 .dian_4 span { font-weight: bold; color: #333333;} 
@media screen and (max-device-width: 768px) {

.dian_4 {   
	padding-left:0.7em;  
	margin-left: 2em;      
}
 .dian_4::before { 
     width: 0.55em; 
	 height:0.55em; 
	 border-radius: 50%;
	transform: translateY(0.4em); 
	   } 
 .dian_4 span {font-size:0.6em;
 	 	margin-top: 1em;
    margin-bottom: 1em;
    
 } 
}


/* 蓝色圆点 空心5*/
.dian_5 {   
    padding-top:5px;   
    padding-bottom:2px;  
	padding-left:8px; 
    position: relative; 
 margin-left: 45px;
	 
}   
.dian_5::before {   
    content: "";   
    width: 5px;   
    height: 5px;   
    border-radius: 50%;   
    background-color: transparent; /* 设置背景为透明 */
    border: 1px solid #4F9CEE; /* 添加边框，颜色为蓝色 */ 
    position: absolute;  
    left: 0;   
    top: 8px;  
    transform: translateY(3px);  
}
 .dian_5 span { font-weight: bold; color: #333333;} 
@media screen and (max-device-width: 768px) {

.dian_5 {   
	padding-left:0.5em;  
	margin-left: 2.6em;      
}
 .dian_5::before { 
     width: 0.35em; 
	 height:0.35em; 
	 border-radius: 50%;
	transform: translateY(0.5em); 
	   } 
 .dian_5 span {font-size:0.6em;
  	margin-top: 1em;
    margin-bottom: 1em;
 } 
}


/* 蓝色圆点 空心6*/
.dian_6 {   
    padding-top:5px;   
    padding-bottom:2px;  
	padding-left:6px; 
    position: relative; 
 margin-left: 55px;
	 
}   
.dian_6::before {   
    content: "";   
    width: 3px;   
    height: 3px;   
    border-radius: 50%;   
    background-color: transparent; /* 设置背景为透明 */
    border: 1px solid #4F9CEE; /* 添加边框，颜色为蓝色 */ 
    position: absolute;  
    left: 0;   
    top: 9px;  
    transform: translateY(3px);  
}
 .dian_6 span { font-weight: bold; color: #333333;} 
@media screen and (max-device-width: 768px) {

.dian_6 {   
	padding-left:0.3em;  
	margin-left: 3.1em;      
}
 .dian_6::before { 
     width: 0.15em; 
	 height:0.15em; 
	 border-radius: 50%;
	transform: translateY(0.6em); 
	   } 
 .dian_6 span {font-size:0.6em;
 	margin-top: 1em;
    margin-bottom: 1em;
 } 
}



/* 光标经过每行背景色变;为红色 */
tr:hover {
  background-color: #BFDFFF;
}

/* 基础表格样式 */

table{
    border-collapse:collapse; 
    width:100%;
}
@media screen and (max-device-width: 768px) {
table{
     font-size:0.6em;
}

}

@media screen and (max-device-width: 768px) {
table.taiman{ font-size:0.55em;
}
}

th{text-align:center;
}

td{
	text-align:center;
	margin: 0px;
	padding: 0px;
}



/*常用的规格表里的背景颜色及tagble的背景LOGO*/
table.biaoge{
             background-image: url(../pic/biaoge-1260.png);
             background-repeat: no-repeat;
			 background-position: center 22px; 
			 
			 }
col.biaoge{background-color:rgba(51,153,255,0.15);}
col.biaoge2{background-color:rgba(51,153,255,0.2);}
col.biaoge3{background-color:rgba(51,153,255,0.2);}
tr.biaoge{background-color:rgba(51,153,255,0.1);}

table.biaoge td{
  line-height: 22px; 
  border: 1px solid #999999;
}

@media screen and (max-device-width: 768px) {
table.biaoge{
font-size:0.9em;
}
table.biaoge td{
line-height:1.2em;
}

}





/*很宽的表格用的 弹性布局 、水平滚动条、大表格的样式 */
.luosi{
      display: flex;
	 
}


.lianxing {
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #006DA2 #F0F0F0; /* 滚动条颜色和轨道颜色 Firefox */
    cursor: pointer;
}

/* Webkit Browsers (Chrome, Safari) */
.lianxing::-webkit-scrollbar {
    height: 10px; /* 更精致的高度 */
}

.lianxing::-webkit-scrollbar-track {
    background: #F0F0F0; /* 更柔和的灰色 */
    border-radius: 6px; /* 圆角轨道 */
    border: 1px solid #E0E0E0; /* 细边框增加层次感 */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* 内阴影增加深度 */
    background-clip: content-box; /* 防止背景覆盖边框 */
}

.lianxing::-webkit-scrollbar-thumb {
    background-color: #006DA2;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2); /* 半透明白色边框增加立体感 */
    background-clip: padding-box; /* 防止背景覆盖边框 */
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.2), /* 顶部高光 */
        inset 0 -1px 0 rgba(0,0,0,0.1); /* 底部阴影 */
}

.lianxing::-webkit-scrollbar-thumb:hover {
    background-color: #4F9CEE;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.15);
}
  
  
  
  
 
/*大表格*/
table.dabiaoge{
 white-space: nowrap; /* 设置不换行 */
 background-image:url(../pic/finesz_logo.png);
 background-repeat:no-repeat;
background-position:150px 80px;

}

table.dabiaoge td{
  line-height: 22px; /* 设置行高为30px，否则在手机端两个表格的高度不一样哦 */
  border: 1px solid #999999;
  
}



@media screen and (max-device-width: 768px) {
table.dabiaoge{
font-size:0.9em;
background-image:url(../pic/huadong.png);
background-repeat:no-repeat;
background-position:300px 200px;
}




table.dabiaoge td, table.dabiaoge th {
  line-height: 1.5em; /* 设置行高为30px，否则在手机端两个表格的高度不一样哦 */
  padding:0 5px 0 5px;
  border:1px solid #3366cc;
  
}
}


/* 二表格与上面唯的不同是加了背景LOGO*/
table.erbiaoge{
   background-image: url(../pic/biaoge-1260.png);
  background-repeat: no-repeat;
  background-position: center 22px; 
}

table.erbiaoge td{
   line-height: 22px; 
  border: 1px solid #999999;
  
}
@media screen and (max-device-width: 768px) {
table.erbiaoge{
 white-space: nowrap; /* 设置不换行 */
font-size:0.9em;
background-image:url(../pic/huadong.png);
background-repeat:no-repeat;
background-position:400px bottom;
}

table.erbiaoge td, table.erbiaoge th {
  line-height: 1.5em; /* 设置行高为30px，否则在手机端两个表格的高度不一样哦 */
  padding:4px;
  border:1px solid #3366cc;
  
}
}


/*标准的全实线表格*/
.standard td{
  border: 1px solid #999999;
  line-height: 22px;

}



/*华丽的分割线*/
p{
	text-indent:2em;
	margin-top: 5px;
    margin-bottom: 5px;
}
@media screen and (max-device-width: 768px) {
p{
	text-indent:0em;
	margin-top: 1em;
    margin-bottom: 1em;
}
}

img{
	border: 0;
}

.xi {
  display: block;
  margin:1px;
}

img.xi{
border-radius:5px;
}

@media screen and (max-device-width: 768px) {
img.xi{border-radius:10px;
       width:100%;
	   height:auto;	
}
}
@media screen and (max-device-width: 768px) {
img.da{border-radius:20px;	
       width:100%;
       height:auto;   
}
}
@media screen and (max-device-width: 768px) {
img.bi{
    width:100%;
    height:auto;
}
}

/* 鼠标悬停弹出图片容器 */
.hover-img {
position: relative;
  display: inline; /* 改为inline而不是inline-block */
  cursor: pointer; /* 鼠标指针变为手型 */


}

/* 图片样式 */
.hover-img img {
  display: none; /* 初始隐藏 */
  position: absolute;
  bottom: 100%; /* 位于容器上方 */
  left: 50%; /* 水平居中 */
  transform: translate(-60%, -20px); /* 调整位置 */
  width: auto;
  height: auto;

  border:1px solid #4F9CEE; /* 边框样式 */
  border-radius: 10px; /* 圆角边框 */
}

/* 鼠标悬停时显示图片 */
.hover-img:hover img {
  display: block;
}


@media screen and (max-device-width: 768px) {
.hover-img img {

 transform: translate(-50%, -40px); /* 调整位置 */
  }  
}

/* PHP留言展示区域的样式 */
#messages {
  margin: 20px 0;
  padding: 0;
  list-style: none;
 
}



.message-attachment{
 padding-left: 46px;
  color: gray; 
}

.yonghu{
float:left;
background:#EEEEEE;
padding-right:5px;


}


.message-item {
  padding: 10px;
  border-top: 1px solid #e1e1e1;
  position: relative;
  

}

.message-item:last-child {
  border-bottom: none;
}

.message-number {
float:left;
 top: 10px;
  color:#000000;
  padding-right:10px;
  color:#808080; 
}


.message-number:after {
  content: "\00B7"; /* 使用Unicode编码表示圆点 */
  padding-left: 0px; /* 调整间距 */
  color: #4F9CEE; /* 圆点颜色 */
}



.message-info {
  font-size: 0.9em;
  color: #333;
  margin-bottom: 5px;


}

.message-content {
  margin-bottom: 5px;
  line-height: 1.4;
  margin-left:20px;
  text-indent: 2em; /* 添加这一行 */
  word-break: break-word; /* 允许在长单词或网址中换行 */  
  overflow-wrap: break-word; /* 确保长单词能够换行 */
	
	
	}


.message-reply-link {
  font-size: 0.8em;
 
}

.message-reply-link a {
 
  text-decoration: none;
    margin-left:46px;
}

.message-reply-link a:hover {
  text-decoration: underline;
}

/*PHP留言提交框 */
.form-liuyan{
  margin: 10px 0 10px 0;
  padding: 10px 30px 10px 10px;
  border: 1px solid #ccc;
  background: #f9f9f9;
}
 
.form-liuyan label {
  display: block;
  margin-bottom: 5px;
}

.form-liuyan input[type="text"],
.form-liuyan input[type="email"],
.form-liuyan textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-liuyan textarea {
height:120px;

}


.form-liuyan button {
  display: block;
  background: #0066CC;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
}

.form-liuyan button:hover {
  background: #0055A0;
}

.form-liuyan .name-email {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  
}



.form-liuyan .name-email .input-group {
  display: flex;
  align-items: center;
  margin-right: 20px;
}


.form-liuyan .name-email label {
  margin-right: 10px;
  width:45px;
}



.form-liuyan #name {
  width: 150px;
  margin-right: 20px;
}

.form-liuyan #email {
  flex: 1;
 width: 280px; 
 
}

.form-liuyan #captcha {
  flex: 1;
 
  max-width: 90px;
  margin-right:10px;

}

.yanzhengma-error{
color:#FF0000;
font-size:20px;
}

@media screen and (max-device-width: 768px) {
  .form-liuyan {
    padding: 10px;
  }
  
  .form-liuyan input[type="text"],
  .form-liuyan input[type="email"],
  .form-liuyan textarea {
    padding: 5px;
    margin-bottom: 5px;
	font-size:1em;
	
	}
	.form-liuyan textarea {
	width:98%;
	height:5em;
	}
	
   .form-liuyan button {
    padding: 10px 10px 30px 10px; /* 增加填充以使按钮变大 */
    width: 200px; 
	height:70px;
	margin-top:30px;
	margin-bottom:30px;
	border-radius: 10px;
	font-size:1em;
  }
  
  .form-liuyan .name-email label{
     width: auto; 
	  } 

.form-liuyan #name {
    width: 318px; /* 调整昵称输入框的宽度 */
    margin-right: 10px;
  }
  
 
   .form-liuyan #captcha {
    width: 150px; /* 或者你可以指定一个具体的宽度，比如 150px */
    max-width: 150px; /* 移除最大宽度限制 */
  }
 
  
  .form-liuyan img{
     width:120px;
} 


 .form-liuyan   input[type="file"] {
      width:500px;
        font-size: 1em;
    }
}


/**/

h1{
    margin: 0 0 10px 10px;
    color: #333333;
    display: inline;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 400;
    vertical-align: sub;
    word-break: break-all;
    position: relative;
    z-index: 2;
}
h4{
    font-size: 24px;
	color: #444444;
	font-weight: 400;
}
@media screen and (max-device-width: 768px) {
h1{
   font-size: 1.5em;
}

h4{
    font-size: 1.2em;
	color: #444444;
	font-weight: 600;
}

}

h2 { 
font-size: 14px; 
font-weight: bold; 
margin-top: 2px; 
margin-bottom: 4px; }
@media screen and (max-device-width: 768px) {
h2{
font-size:1.2em; 
}
}


/*以下首页产品向左滚动所需的CSS*/

#demo {
	overflow:hidden;
	border: 0px dashed #CCC;
	width: 100%;
}
#demo img {
border: 0px solid #F2F2F2;
}
#indemo {
float: left;
width:800%;
}
#demo1 {
float: left;
}

#demo2 {
float: left;
}
@media screen and (max-device-width: 768px) {
#demo2 {
   margin-left:0.2em;
}

}
.g125{
	width: 125px;
	float: left;
	text-indent:2em;
}
@media screen and (max-device-width: 768px) {
.g125{
	width: 250px;
    margin-left:0.12em;
	padding-left:0.3em;
	text-indent:0em;
	font-size:0.8em;
}
#demo img {
width:250px;
}
}

/* 右侧弹出的导航条 */


.floating-nav {  
    position: fixed;  
    top: 150px;  
    right: 0;  
    width: 100px;  
    padding: 10px 5px 2px 10px;  
    border-radius: 6px;  
    background-color: rgba(255, 255, 255, 0.8);  
    border: 1px solid #ccc;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    z-index: 1000;  
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;  
    transform: translateX(100%);  
    opacity: 0;  
}  

.floating-nav.show {  
    transform: translateX(0);  
    opacity: 1;  
}  

.floating-nav.collapsed {  
    transform: translateX(100%); /* 收起时完全向右移出视口 */  
}  

.floating-nav ul {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
}  

.floating-nav ul li {  
    margin-bottom: 1px;  
}  

.floating-nav ul li a {  
    color: #333;  
    text-decoration: none; 
	    display: block; /* 使链接占据整个li的宽度 */  
    padding: 2px; /* 添加一些内边距使链接更友好 */   
}  

.floating-nav ul li a:hover {  
    text-decoration: underline;  
}  

.floating-nav ul li a.active {  
    background-color: rgba(47,79,79, 0.2); /* 设置高亮背景色 */  
    border-radius: 2px; /* 圆角 */  
}  

.toggle-button {  
    background-color: transparent;  
    border: none;  
    cursor: pointer;  
    position: absolute;  
    top: 9px;  
    right: 20px; /* 调整按钮的位置 */  
    width: 20px; /* 控制按钮的大小 */  
    height: 20px; /* 控制按钮的大小 */  
    display: flex;  
    justify-content: center;  
    align-items: center;  
}  

/* 使用伪元素创建向右箭头 */  
.toggle-button::after {  
    content: '';  
    display: block;  
    width: 0;  
    height: 0;  
    border-top: 6px solid transparent; /* 上边框透明 */  
    border-bottom: 6px solid transparent; /* 下边框透明 */  
    border-left: 10px solid   #CCCCCC; /* 左边框颜色（箭头） */  
}  
@media screen and (max-device-width: 768px) {  
    .floating-nav {  
        display: none;  
    }  
}   



/*以下左侧产品列表所需的CSS之一*/ 
 

h3 {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
	font-size: 14px;
}

ul {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
	list-style-type: none;
}

li {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
}


@media screen and (max-device-width: 768px) {
h3 {
	font-size: 1.5em;/*2.5EM会导致手机端字体太大了，不过目前没有调用过H3 20230525*/
}
}

.m {
    overflow: hidden;
    display: flow-root; /* 替代 zoom: 1 来触发 BFC，兼容性更好 */
}

/*以下左侧产品列表所需的CSS之二*/

.liebiao{
	color: #EFEFEF;
	background-color: #CE0000;
	height: 20px;
	font-family: verdana, arial, helvetica, sans-serif;
	padding-top: 5px;
	font-size: 13px;
	font-weight: bold;
	width: 190px;
	padding-left: 20px;
}
@media screen and (max-device-width: 768px) {
.liebiao{
    height: 1.5em;
	font-size: 3em;
	width: 97%;
	padding-top: 0px;	
	line-height: 1.5em;	
	padding-left:30px;}
}

.left {
    float: left;
    width: 210px;
}
@media screen and (max-device-width: 768px) {
.left{
    width:100%;
}
}


#sortlist {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ddd;
	border-right-color: #ddd;
	border-bottom-color: #ddd;
	border-left-color: #ddd;
}

#sortlist .mt {
    padding-right: 8px;
    display: none;
    padding-left: 8px;
    padding-bottom: 3px;
    line-height: 24px;
    padding-top: 3px;
    height: 24px;
}


@media screen and (max-device-width: 768px) {
#sortlist .mt{    
    line-height:4em;
}
}

#sortlist h2 {
    color: #fff;
}

#sortlist .mc {
    margin-top: -1px;
    background: #fff;
    width: 208px;
}

@media screen and (max-device-width: 768px) {
#sortlist .mc{
    width:100%;
}
}

#sortlist h3 {
    padding-right: 7px;
    border-top: 1px solid #ddd;
    padding-left: 10px;
    padding-bottom: 0px;
    font: 14px/30px verdana;
    cursor: pointer;
    padding-top: 0px;
    height: 30px;
    background-color: #f7f7f7;
}
@media screen and (max-device-width: 768px) {
#sortlist H3{
	padding-left:0.5em;
	height:2.5em;
    font-size:3em;
	line-height:2.5em
}
}

#sortlist .fore h3 {
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
}

#sortlist dalei {
    float: left;
    margin: 7px 8px 0px 0px;
    overflow: hidden;
    width: 16px;
    cursor: pointer;
    height: 16px;
    background-image: url(../pic/beijing.png);
    background-repeat: no-repeat;
    background-position: -20px 0px;
}
@media screen and (max-device-width: 768px) {
#sortlist dalei {
    float: left;
    margin: 0.8em 0.2em 0em 0em;
    overflow: hidden;
    width: 1em;
    cursor: pointer;
    height: 1em;
    background-image: url(../pic/80.jpg);
    background-repeat: no-repeat;
    background-position: 0px -5px;
}
}

#sortlist ul {
    padding-right: 0px;
    border-top: 1px solid #ddd;
    display: none;
    padding-left: 0px;
    padding-bottom: 6px;
    overflow: hidden;
    padding-top: 6px;
    zoom: 1;
}

#sortlist li {
    margin-left:2px;
    padding: 3px 2px 3px 22px;
    overflow: hidden;
    width: 159px;
    height: 16px;
   background: url(../pic/93.png) no-repeat;
     background-position: 16px center
}





/* 以下CSS并未在页面源码中直接调用，而用通过product-link.js替代掉源码中的class="link", 即将link替代为produ */
.product-link {
  background-color: rgba(255,165,0, 0.5);
  border-radius: 4px;
  padding: 0px 5px 0px 0px;
  animation: blink 1.2s infinite;
}

@keyframes blink {
  0%, 100% { border: 1px solid transparent; }
  50% { border: 1px solid #778899; }
}

@media screen and (max-device-width: 768px) {
    #sortlist li {
        padding-right: 15px;
        padding-left: 100px;
        padding-bottom: 3px;
        overflow: hidden;
        width: 100%;
        padding-top: 15px;
        height: 1.2em;
        font-size: 2em;
        list-style: square inside url(../pic/81.jpg);
    }
}

#sortlist .curr a {
    font-weight: bold;
    color: #e4393c;
}

#sortlist .current dalei {
    background: url(../pic/beijing.png) no-repeat -37px 0px;
}

@media screen and (max-device-width: 768px) {
    #sortlist .current dalei {
        background: url(../pic/80.jpg) no-repeat -40px -5px;
    }
}

#sortlist .current ul {
    display: block;
}


@media screen and (max-device-width: 768px) {

.pic94{
 width: 28px; 
}

}

/* 20250712 弹出多级菜单 ，产品列表调用，css/open-menu-index.js可能调用 */
.p2{
  margin:1px 2px 1px 16px;
  padding:4px;
  background: #EFEFEF;
  border-radius:4px;
  display: none; /* 默认隐藏二级菜单（p1的子目录会被JS强制显示） */
}



.p4{
  margin:1px 2px 1px 18px;
  padding:1px;
  
  
  background: #E8E8E8;
   border-radius:4px;
  display: none; /* 默认隐藏三级菜单（p1的子目录会被JS强制显示） */
}


.current > ul, .current > .p2, .current > .p4 {
  display: block;
}

/* 可添加p1展开状态的样式，增强视觉反馈 */
li.p1.current {
  background-color: #E3E3E3; /* 示例：展开时的背景色 */
  
}



/* 光标I变为箭头，争对没有链接但有弹出功能*/
#sortlist li:not(:has(a.link))  /* 所有不含链接的li（兜底匹配） */
{
  cursor: default; /* 显示小箭头 */
}


/* li.p5 文字划过弹出图片 初始隐藏弹出图片 */
.popup-image {
  display: none;
  position: absolute;
  width: 120px; /* 根据需要调整 */
  height: auto;
  z-index: 100;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transform: translateY(-100%) translateX(80px); /* 在文字右上方 */
}

/* 鼠标悬停时显示图片 */
.p5:hover .popup-image {
  display: block;
}
li:hover .popup-image {
  display: block;
}

@media screen and (max-device-width: 768px) {
.popup-image {
transform: translateY(-100%) translateX(260px); /* 在文字右上方 */
}

}


/* 鼠标经过h3时背景渐进变灰效果20250731 */
#sortlist h3 {
    /* 添加过渡效果，使背景色变化平滑 */
    transition: background-color 0.2s ease;
}

#sortlist h3:hover {
    background-color: #e0e0e0; /* 比原来的#f7f7f7更深的灰色 */
}

/* 鼠标经过li时背景渐进变灰效果 */
#sortlist li {
    /* 添加过渡效果，使背景色变化平滑 */
    transition: background-color 0.2s ease;
}

#sortlist li:hover {
    background-color: #e8e8e8; /* 比默认背景更深的灰色 */
}

/* 已展开状态的li在鼠标经过时也有渐变效果，且颜色区分 */
#sortlist li.current:hover {
    background-color: #d9d9d9; /* 比.current的背景色更深一点 */
}

/* 针对不同层级的li微调效果，保持一致性 */
#sortlist li.p1:hover,
#sortlist li.p3:hover {
    transition: background-color 0.2s ease;
}

#sortlist li.p1:hover {
    background-color: #e0e0e0;
}

#sortlist li.p3:hover {
    background-color: #e5e5e5;
}