/*导航开始*/
.daohang {
	width:800px;
	height:50px;
	background: ;
	box-shadow:0 0px  0px #000;/*阴影*/
	padding-left:10px;
	padding-top:20px;
}
.dhlist{
	float:left;/*左浮动*/
	width:100px;
	line-height:40px;
	text-align:center;/*文字水平居中*/
	font-size:16px;
	position:relative;

}
.daohanglist a{
	color: #000;/*超链接字体为黑色*/
    display:block;/*以块模式显示*/
	
	
}
/*鼠标悬停时背景变色*/
.daohanglist a:hover{
	background:  #F0F0F0;/*浅灰#E6E6E6*/
}
.droplist{
	/*改变下拉列表颜色*/
	background:  #F0F0F0;/*深灰#AFAFAF;*/	
	display:none;
	width:100px;
	position:absolute;
	z-index:100000;
}
/*让鼠标移动到导航项时，下拉显示*/
.dhlist:hover .droplist{
	display:block;
}
/*导航结束*/


/*长轴泵特点*/
.tedian {
	overflow: hidden;
	width: 100%;
	height: 550px;
	background: url(../image/td_bg.jpg) no-repeat center top;
 	background-size: cover;  /* 移动端内边距，避免内容贴边 */
    padding: 10px 10px;
}

.tedian span {
	display: block;
	text-align: center;
	font-size: clamp(16px, 2vw, 24px);
	color: #fff000;
	margin-top: 5px;
	margin-bottom: 12px;
	position: relative; /* 开启层级控制，使z-index生效 */
}

.tedian .tdbox {
	overflow: hidden;
	width: 1024px;
	margin: 0 auto;
	height: 450px;
	position: relative
}

.tedian .tdbox img {
  display: block;
  margin: 0 auto;  /* 修复原代码多余的00px */
  margin-top: 0;  /* 图片响应式 */
  max-width: 50%;
  height: auto;
}

.tedian .wen {
	overflow: hidden;
	width: 450px;
	position: absolute;
}

.tedian h3 {
	font-size: 22px;
	color: #FF9900;
	margin-bottom: 12px;
}

.tedian .wen01 {
	padding-right: 155px;
	background: url(../image/td01.png) no-repeat right top;
	color: #FFF000; /* 字体颜色：黄色#fff000 */
	left: 0;
	top: 50px;
	padding-bottom: 45px;
}

.tedian .wen02 {
	padding-left: 150px;
	background: url(../image/td02.png) no-repeat left top;
	color: #FFF000; /* 字体颜色：黄色#fff000 */
	right: 0;
	top: 50px;
	padding-bottom: 45px;
}

.tedian .wen03 {
	padding-right: 155px;
	background: url(../image/td033.png) no-repeat right top;
	color: #FFF000; /* 字体颜色：黄色#fff000 */
	left: 0;
	top: 230px;
}

.tedian .wen04 {
	padding-left: 165px;
	background: url(../image/td044.png) no-repeat left top;
	color: #FFF000; /* 字体颜色：黄色#fff000 */
	right: 0;
	top: 230px;
}
/* 响应式样式：媒体查询 - 移动端适配（以768px为分界，可根据需求调整） */
@media (max-width: 768px) {
  .tedian .wen {
    max-width: calc(30% - 7.5px);
  }
  	/* 1. 隐藏wen01、wen02、wen03、wen04 */
	.tedian .wen01 p,
	.tedian .wen02 p,
	.tedian .wen03 p,
	.tedian .wen04 p {
	display: none;
	}
 /* 移动端隐藏背景小图标，避免排版混乱 */
  .tedian .wen01,
  .tedian .wen02,
  .tedian .wen03,
  .tedian .wen04 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: none !important;
  }
	/* 2. 调整tdbox：取消固定宽度，适配移动端屏幕，重置定位相关属性 */
	.tedian .tdbox {
		width: 100%; /* 占满父容器宽度 */
		height: auto; /* 高度自适应内容，不再固定450px */
		position: static; /* 取消相对定位，避免影响内容流 */
		margin: 0; /* 取消上下左右外边距 */
	}

	/* 3. 调整wen：重置定位和宽度，适配移动端 */
	.tedian .wen {
		width: calc(70% - 0px); /* 占满tdbox宽度 */
		position: static; /* 取消绝对定位，回归正常文档流 */
		margin: 0 auto; /* 水平居中 */
		padding: 0 5px; /* 轻微内边距，避免内容贴边 */
	}

	/* 4. 其他文字自上往下居中排列（水平居中+垂直顺排），并保持最上层 */
	.tedian {
		height: auto; /* 高度自适应内容，不再固定550px */
		text-align: center; /* 子元素行内/块级元素水平居中 */
		position: relative; /* 保留相对定位，确保文字z-index生效 */
	}
.tedian h3 {
		font-size: clamp(15px, 5vw, 22px); /* 响应式字体大小，适配移动端 */
		margin: 0 auto 12px; /* 水平居中，保留底部外边距 */
		display: block; /* 确保块级显示，自上往下排列 */
		position: relative; /* 保留层级控制 */
	}


	.tedian span {
		/* 保持原有水平居中，确保自上往下顺排 */
		margin: 5px auto 12px; /* 水平居中，上下外边距保留 */
		position: relative; /* 保留层级控制 */
	}
}
/* 平板端适配（768px-1024px） */
@media (max-width: 1024px) {
  .tedian .wen {
    max-width: calc(60% - 7.5px);
  }
  .tedian .wen01 {
    padding-right: 220px;
    background-size: 100px auto; /* 背景图等比缩小 */
  }
  .tedian .wen02 {
    padding-left: 130px;
    background-size: 100px auto;
  }
  .tedian .wen03 {
    padding-right: 220px;
    background-size: 100px auto;
  }
  .tedian .wen04 {
    padding-left: 130px;
    background-size: 100px auto;
  }
  /* 平板端隐藏背景小图标，避免排版混乱 */
  .tedian .wen01,
  .tedian .wen02,
  .tedian .wen03,
  .tedian .wen04 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: none !important;
  }
}


/*应用领域 - 响应式版*/
.yyly {
  overflow: hidden;
  width: 95%; /* 替换固定宽度，适配大部分屏幕 */
  max-width: 1110px; /* 最大宽度保留原设计 */
  margin: 0 auto; /* 简化 margin 写法 */
}

.yyly h2 {
  text-align: center;
  font-size: clamp(20px, 3vw, 24px); /* 响应式字体：最小20px，最大24px，随屏幕宽度自适应 */
  color: #333;
}

.yyly p {
  text-align: center;
  font-size: clamp(14px, 2vw, 16px); /* 响应式字体 */
  color: #999;
  margin-bottom: 20px;
  font-family: Arial;
}

.yyly ul {
  display: flex; /* 核心：Flex 布局实现自动换行 */
  flex-wrap: wrap; /* 自动换行 */
  justify-content: flex-start; /* 左对齐，保持原有排版逻辑 */
  gap: 15px; /* 替换 margin-right，更优雅的间距 */
  width: 100%; /* 取消 102% 宽度，避免溢出 */
  margin: 0 0 40px 0;
  padding: 0; /* 清除默认内边距 */
  list-style: none; /* 清除默认列表样式 */
}

.yyly li {
  overflow: hidden;
  position: relative;
  width: calc(25% - 11.25px); /* 适配4列布局，减去gap间距 */
  height: 330px;
  /* 取消 float，改用 flex 布局 */
  flex-shrink: 0; /* 防止元素被压缩 */
}

/* 适配平板（768px-1024px）：改为2列 */
@media (max-width: 1024px) {
  .yyly li {
    width: calc(50% - 7.5px); /* 2列布局，减去gap间距 */
    height: 300px; /* 适当缩小高度，适配平板 */
  }
}

/* 适配手机（768px以下）：改为1列 */
@media (max-width: 768px) {
  .yyly li {
    width: 100%;
    height: 280px; /* 进一步缩小高度，适配手机 */
  }
}

.yyly li img {
  display: block;
  width: 100%; /* 图片宽度自适应父容器 */
  height: 100%; /* 图片高度铺满容器 */
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}

.yyly li a {
  text-decoration: none;
  font-size: clamp(14px, 2vw, 16px); /* 响应式字体 */
  color: #fff;
  line-height: 55px;
  display: block;
  width: 100%;
  height: 55px; /* 修正原样式重复定义 height 的问题 */
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
}

.yyly li a img {
  display: none;
  margin: 110px auto 0;
  width: auto; /* 取消继承的100%宽度，保持图片原有尺寸 */
  height: auto; /* 取消继承的100%高度 */
}

.yyly .a01 {
  background: url(../image/hybg01.png) repeat center;
}

.yyly .a02 {
  background: url(../image/hybg02.png) repeat center;
}

.yyly .a03 {
  background: url(../image/hybg03.png) repeat center;
}

.yyly .a04 {
  background: url(../image/hybg04.png) repeat center;
}

.yyly li a em {
  display: block;
}

.yyly .zx {
  overflow: hidden;
  display: block;
  width: clamp(200px, 80%, 315px); /* 响应式宽度：最小200px，最大315px，中间随屏幕自适应 */
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: clamp(14px, 2vw, 16px); /* 响应式字体 */
  color: #fff;
  margin: 0 auto 40px;
  background-color: #1685e7;
  border-radius: 5px;
  box-shadow: 0 5px 10px #ccc; /* 优化阴影，适配小屏幕 */
  text-decoration: none; /* 清除链接默认样式 */
}

/* 手机端优化按钮阴影 */
@media (max-width: 768px) {
  .yyly .zx {
    box-shadow: 0 3px 8px #ccc;
  }
}
/*应用领域结束*/