/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html {
	height: 100%;
	margin: 0;
	padding-top: 45px; /* 整个页面下移 */
}

body,a{
  font-family: Google Sans,-apple-system,sans-serif,BlinkMacSystemFont,"SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial";color: #1D1D1D;
}


/* ********************************* General  ************************************** */
/* bgContainer 样式 */
.bgContainer {
	width: 100%;
	min-height: 100vh; /* 最小高度占满屏幕 */
	background-size: 100% auto; /* 背景图宽度占满容器，高度按比例缩放 */
	background-repeat: no-repeat; /* 背景图不重复 */
	background-position: top center; /* 背景图位于顶部居中 */
	display: flex;
	flex-direction: column; /* 子元素上下排列 */
	align-items: center; /* 子元素水平居中 */
	
}

/* 页面1专属背景 */
.bg_hospital {
	background-image: url('../images/bg_hospital.png');
}
.bg_docDetail {
	background-image: url('../images/bg_docDetail.png');
}
.bg_about1 {
	background-image: url('../images/aboutBG1.jpg');
}
.bg_about2 {
	background-image: url('../images/aboutBG2.jpg');
}


/* 通用间距设置 */
.gnrCnt {
	padding: 10px 6px; 
	box-sizing: border-box;
}
		
.gnrCnt {
	width: 100%;
	max-width: 1400px; /* 可根据需要调整最大宽度 */
	margin: 20px auto;
}

.gnrCnt .title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}

.gnrCnt p {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 10px;
}

/* url 独有样式*/

ul.spot {
	list-style: none; /* 移除默认的列表样式 */
	padding: 20px 10px 10px 10px;
	margin: 0;
	font-size: 14px;
}

ul.spot li {
	position: relative;
	padding-left: 20px; /* 为圆点预留空间 */
	margin-bottom: 1.2em; /* 设置行间距 */
	line-height: 1.6;
}

ul.spot li::before {
	content: "•";
	color: #3ca970;
	position: absolute;
	left: 0;
	top: 0;
}

ul.spot li .sgLine {
	display: block; /* 独占一行 */
	margin: 10px 0; /* 可根据需要调整间距 */
}

ul.spot li .sgLine a {
	text-decoration: none; /* 可根据需要调整链接样式 */
}

/* url 独有样式*/		
ul.frameSpot {
	list-style: none; /* 移除默认的列表样式 */
	margin: 12px 0;
	font-size: 14px;
	padding: 20px 10px 10px 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

ul.frameSpot li {
	position: relative;
	padding-left: 20px; /* 为圆点预留空间 */
	margin-bottom: 1.2em; /* 设置行间距 */
	line-height: 1.6;
}

ul.frameSpot li::before {
	content: "•";
	color: #3ca970;
	position: absolute;
	left: 0;
	top: 0;
}

ul.frameSpot li .sgLine {
	display: block; /* 独占一行 */
	margin: 10px 0; /* 可根据需要调整间距 */
}

ul.frameSpot li .sgLine a {
	text-decoration: none; /* 可根据需要调整链接样式 */
}


/* url 独有样式*/		
ul.frameClrList {
	list-style: none; /* 移除默认的列表样式 */            
	margin: 12px 0;
	font-size: 14px;
	padding: 20px 10px 10px 15px;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


ul.frameClrList li {
	position: relative;
	line-height: 1.6;
	margin-bottom: 1.2em; /* 设置行间距 */
}


ul.frameClrList li .sgLine {
	display: block; /* 独占一行 */
	margin: 10px 0; /* 可根据需要调整间距 */
}

ul.frameClrList li .sgLine a {
	text-decoration: none; /* 可根据需要调整链接样式 */
}

.grnBG {
	background-color: #e3f1f8;
}


		
/* 主容器样式 */
.gnrSimple {
    max-width: 1400px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px; /* 控制两栏间距 */
}


/* 文字内容区域 */
.gnrBrief {
    width: 60%;
    padding-right: 20px; /* 增加右内边距 */
    box-sizing: border-box;
	
}

.gnrIntro {
    text-align: left;	
	display: flex;
	flex-direction: column;
	gap: 16px; /* 控制 p 之间的间距 */
	
}

/* 医生姓名 */
.gnrDocName {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 2px;
    line-height: 2.2;
    color: #333;
}
.gnrDocDes {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.6;
    color: #737373;
}

.gnrProfile {
    border-left: 5px solid #90EE90; 
	padding: 10px 20px; /* 添加内边距 */
	display: flex; /* 使用flex布局 */
	flex-direction: column; /* 子元素上下排列 */
	align-items: flex-start; /* 子元素在交叉轴上起始对齐 */
	gap: 5px; /* 子元素之间的间距 */
	background-color: #f9f9f9; /* 背景颜色 */
      
}

.gnrProfileLn1 {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 10px;
    line-height: 1.2;
    color: #737373;
	
    margin-right: 20px; 
}
.gnrProfileLn2 {
    font-size: 16px;
    font-weight: bold;
    color: #737373;
}

/* 标题样式 */
.gnrTitle {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.4;
    color: #333;
}

.gnrTitleFull {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.4;
    color: #333;
	flex-basis: 100%; /* 强制占满整行 */
}

/* 段落样式 */
.gnrIntro p {
	margin-bottom: 2px; 
	line-height: 1.6; /* 保持行高不变 */
    font-size: 16px;    
    color: #555;
    padding-left: 0; /* 移除原有左padding */
	
}

/* 图片区域 */
.gnrImg {
    width: 40%;
    display: flex;
    justify-content: flex-end; /* 确保图片右对齐 */
    align-items: flex-start;
}

.gnrImg img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* 可选：添加圆角 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 可选：添加轻微阴影 */
}


.gnrBGImgTxt, .gnrBGTxtImg {
    max-width: 1400px;
    margin: 30px auto;
	padding:40px 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px; 
	background-color: #e3f1f8;
	border-radius: 10px;
	
}

.gnrBGImgTxt .gnrBrief {
    width: 50%;
}
.gnrBGImgTxt .gnrImg {
    width: 50%;
}
.gnrBGTxtImg .gnrBrief {
    width: 50%;
}
.gnrBGTxtImg .gnrImg {
    width: 50%;
}


/* 电脑端反转 flex 子元素顺序 */
@media (min-width: 992px) {
    .gnrBGImgTxt {
        flex-direction: row-reverse; 
    }
}


.gnrBG3Mix {
	background-color: #e3f1f8;  
	border-radius: 10px; /* 圆角 */
	max-width: 1400px; /* 最大宽度 */
	margin: 0 auto; /* 居中 */
	padding: 40px 30px; /* 内边距 */
	box-sizing: border-box; /* 防止 padding 影响宽度 */
}

.gnrBG3Mix .gnrBrief {
    width: 100%;
}
/* 电脑端：图片水平排列 */
.gnrBG3Mix .gnr3Img {
	display: flex;
	gap: 0; /* 移除图片之间的间隙 */
	justify-content: space-between; /* 让图片均匀分布并贴紧边缘 */
	width: 100%; /* 确保容器占满父元素宽度 */
	margin: 0; /* 移除默认外边距 */
	margin-top: 30px;
	padding: 0; /* 移除默认内边距 */

}

.gnrBG3Mix .gnrImg {
	flex: 1; /* 等宽分布 */
	max-width: calc(33.33% - 20px); /* 3 张图片均分宽度 */
}

.gnrBG3Mix .gnrImg img {
	width: 100%; /* 图片自适应容器 */
	border-radius: 8px; /* 图片圆角 */
	height: auto; /* 保持比例 */
	object-fit: cover; /* 防止图片变形 */
}



.gnrRXMix {
  display: flex;
  gap: 30px; /* 列间距 */
  max-width: 1400px;
  margin: 20px auto;
}

/* 每列样式 */
.gnrRXCol {
  flex: 1; /* 等宽分布 */
  display: flex;
  flex-direction: column; /* 内部元素垂直排列 */
}

/* 固定 16:9 的图片容器 */
.gnrRXCol .gnrImg {
  width: 100%;
  aspect-ratio: 16/9; /* 核心代码 */
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 10px;
}

.gnrRXCol .gnrImg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 核心代码 */
  display: block;
}


/* 日期样式 - 水平排列 + 12px字号 */
.gnrRXCol .gnrNote {
  font-size: 12px;
  display: flex; /* 启用flex布局 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 8px;
}


.gnrIMG2 {
    max-width: 1400px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 20px;
    box-sizing: border-box;
}

.gnrIMG2 .gnrImgCol {
    flex: 1 1 calc(50% - 15px); /* 2 columns with gap */
    min-width: 0; /* Prevent flex item overflow */
}
/* 固定 16:9 的图片容器 */
.gnrIMG2 .gnrImg {
  width: 100%;
  aspect-ratio: 16/9; /* 核心代码 */
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 10px;
}

.gnrIMG2 .gnrImg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 核心代码 */
  display: block;
}




.gnrIMG3H {
    max-width: 1400px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 20px;
    box-sizing: border-box;
}

/* 每行3列布局 - 精确计算宽度 */
.gnrIMG3H .gnrImgCol {
    flex: 0 0 calc(33.333% - 20px); /* 精确计算，考虑30px间隙 */
    min-width: 0;
    box-sizing: border-box;
}

/* 3:4 图片容器 - 优化版 */
.gnrIMG3H .gnrImg {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background: #f5f5f5; /* 添加加载背景色 */
}

.gnrIMG3H .gnrImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease; /* 添加悬停效果 */
}




/* 4列正方形图片网格 */
.gnrIMG4S {
    max-width: 1400px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 比3列布局间隙稍小 */
    padding: 20px;
    box-sizing: border-box;
}

/* 每行4列布局 - 精确计算 */
.gnrIMG4S .gnrImgCol {
    flex: 0 0 calc(25% - 15px); /* 4列布局，考虑20px间隙 */
    min-width: 0;
    box-sizing: border-box;
}

/* 1:1 正方形图片容器 */
.gnrIMG4S .gnrImg {
    width: 100%;
    aspect-ratio: 1/1; /* 关键修改：改为1:1比例 */
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background: #f5f5f5;
}

.gnrIMG4S .gnrImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}



/* 核心布局容器 */
.gnrLRsection {
	width: 100%;
	max-width: 1400px;
	display: flex;
	margin: 20px 0;
	gap: 30px; /* 固定间隔 */
}

/* 左右容器基础样式 */
.gnrLsec, .gnrRsec {
	min-height: 50px; /* 最小高度确保背景可见 */
}

/* 比例控制系统 */
.gnrLRsection.S55 > .gnrLsec { flex: 0 0 calc(50% - 15px); }
.gnrLRsection.S55 > .gnrRsec { flex: 0 0 calc(50% - 15px); }

.gnrLRsection.S64 > .gnrLsec { flex: 0 0 calc(60% - 15px); }
.gnrLRsection.S64 > .gnrRsec { flex: 0 0 calc(40% - 15px); }

.gnrLRsection.S73 > .gnrLsec { flex: 0 0 calc(70% - 15px); }
.gnrLRsection.S73 > .gnrRsec { flex: 0 0 calc(30% - 15px); }

.gnrLRsection.S46 > .gnrLsec { flex: 0 0 calc(40% - 15px); }
.gnrLRsection.S46 > .gnrRsec { flex: 0 0 calc(60% - 15px); }

.gnrLRsection.S37 > .gnrLsec { flex: 0 0 calc(30% - 15px); }
.gnrLRsection.S37 > .gnrRsec { flex: 0 0 calc(70% - 15px); }


/* 图片容器 */
.secImg {
	width: 100%;
	height: 100%;
}
.secImg img {
	width: 100%;
	height: auto;
	display: block;
}



		
/* 表格区域样式 */
.tableArea {
    max-width: 1400px;
    margin: 0 auto;
    overflow: auto; /* 确保在小屏幕上可以滚动 */
}

/* 表格基础样式 */
.dfTable {
    width: 100%;
	table-layout: fixed; /* 关键属性：强制平均分配列宽 */
    border-collapse: collapse;
    margin: 20px 0;
}

/* 表格单元格样式 */
.dfTable td {	
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
	font-size: 14px;
}

/* 表头样式 */
.dfTable tr.tbHead td {
    background-color: #e3f1f8; 
    font-weight: bold;
}

/* 间隔底色 */
.dfTable tr:nth-child(even) {
    background-color: #f9f9f9; /* 间隔底色 */
}

/* 奇数行底色 */
.dfTable tr:nth-child(odd) {
    background-color: #ffffff; /* 默认白色 */
}	



.backArea {
  width: 100%; /* 独占整行 */
  max-width: 1400px;
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 水平起始对齐 */
  padding: 10px; /* 添加内边距 */
  box-sizing: border-box; /* 确保内边距不增加容器宽度 */
}

.gobackLink {
  display: inline-block; /* 使容器可以设置内边距和圆角 */
  background-color: rgba(247, 247, 247, 0.5); /* 浅灰色半透明背景色 */
  border-radius: 5px; /* 圆角 */
  padding: 15px 20px; /* 内边距 */  
  text-decoration: none; /* 移除默认的下划线 */
}

/* 定义 gobackLink 内的 a 标签样式 */
.gobackLink a {
  color: #333; /* 文字颜色 */
  text-decoration: none; /* 移除默认的下划线 */
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 35px; /* 文字和箭头之间的间距 */
}

/* 定义向左的箭头 */
.gobackLink a::before {
  content: "←"; /* 向左的箭头符号 */
  font-weight: bold; /* 箭头加粗 */
}

/* 鼠标悬停时的样式 */
.gobackLink a:hover {
  color: #007BFF; /* 鼠标悬停时文字变色 */
}
	

/* 响应式设计 */
@media (max-width: 992px) {	
  
.gnrDocName {
    font-size: 24px;
}
  
  
	.gnrCnt {
		padding: 0 15px;
    }
	.gnrCnt .title {
		font-size: 22px;
	}

	.gnrCnt p {
		font-size: 14px;
	}

	
	ul.spot {
		font-size: 13px;
	}
	ul.frameSpot {
		font-size: 13px;
	}
	ul.frameClrList {
		font-size: 13px;
	}
	
	.gnrSimple, .gnrBGImgTxt, .gnrBGTxtImg  {
        flex-direction: column;
		padding: 20px 15px;
		border-radius: 0;
    }
    
    .gnrBrief, .gnrImg {
        width: 100%;
    }
    
	.gnrBGImgTxt .gnrBrief {
		width: 100%;
	}
	.gnrBGImgTxt .gnrImg {
		width: 100%;
	}
	.gnrBGTxtImg .gnrBrief {
		width: 100%;
	}
	.gnrBGTxtImg .gnrImg {
		width: 100%;
	}
	
    .gnrImg {
        order: -1;
        margin-bottom: 20px;
        justify-content: center; /* 移动端居中显示 */
    }
    
    .gnrBrief {
        padding-right: 0;
    }
	
	
	.gnrBGImgTxt {
		flex-direction: column; /* 改为垂直排列 */
		align-items: center;		
	}
	
	
	
	.gnrBG3Mix {
		margin: 0 10px; /* 两侧 12px 间距 */
		
		padding: 20px 10px; /* 内边距 */
		border-radius: 4px;
	}
	
	.gnrBG3Mix .gnrBrief {
        margin: 0;
		padding: 10px 0; /* 内边距 */
    }
	
	.gnrBG3Mix {
		margin: 0 12px;
		padding: 12px; /* 可选：调整内边距 */
	}
	
	.gnrBG3Mix .gnr3Img {
		flex-direction: column; /* 垂直排列 */
		gap: 15px; /* 图片间距 */
		width: 100%;
	}

	.gnrBG3Mix .gnrImg {
		width: 100%; /* 关键修复 */
		max-width: 100%;
	}

	.gnrBG3Mix.gnrImg img {
		width: 100%; /* 确保图片撑满 */
	}
	
	.gnrRXMix {
		flex-direction: column;
		gap: 30px; /* 增加垂直间距 */
		padding: 0 12px; /* 两侧留白减少 */
	}

	.gnrRXCol {
		width: 100%;
	}
	
	/* 描述文字样式 */
	.gnrRXCol .gnrDesc {
	  font-size: 14px;
	  line-height: 1.5;
	}
	
	
	.gnrIMG2 .gnrImgCol {
        flex: 0 0 100%; /* 移动端1列 */
    }
	.gnrIMG3H .gnrImgCol {
        flex: 0 0 100%; /* 移动端1列 */
    }
	.gnrIMG4S .gnrImgCol {
        flex: 0 0 100%; /* 移动端1列 */
    }
	
	
	.gnrLRsection {
        flex-direction: column; /* 在移动端上下排列 */
        padding: 0 12px; /* 屏幕两侧各留12px */
    }

    .gnrLRsection > .gnrLsec, .gnrLRsection > .gnrRsec {
        width: 100%; /* 在移动端占满整个宽度 */
        margin: 0; /* 移除间隔 */
    }

    .gnrLRsection > .gnrLsec {
        margin-bottom: 10px; /* 在移动端为左侧部分添加底部间隔 */
    }
	
	.tableArea {		
		margin: 10px;
	}
	
	.dfTable {
		table-layout: auto; /* 小屏恢复自动宽度 */
	 }
}






		
		
.generalSection {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}

.secTitle h2 {
	margin: 60px 0 30px 0;
    font-size: 36px;    
}



.secMore {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
}


/* More 按钮样式 */
/* More 按钮容器（div） */
.moreBTN {
    display: inline-block; /* 保持行内块级布局 */
    position: relative;   /* 为伪元素箭头定位 */
    font-size: 1em;       /* 继承字体大小 */
}

/* More 按钮的链接（a 标签） */
.moreBTN a {
    display: inline-block;                  /* 避免换行问题 */
    background-color: #fff;
    color: #003316;
    padding: 12px 32px 12px 20px;          /* 控制按钮尺寸 */
    border-radius: 5px;
    border: 1px solid #ccc;
    text-decoration: none;
    transition: background-color 0.3s ease; /* 悬停动画 */
    cursor: pointer;
    width: 100%;                           /* 撑满父容器 */
    box-sizing: border-box;                 /* 防止 padding 影响宽度 */
}

/* More 按钮上的箭头（伪元素） */
.moreBTN::after {
    content: '';
    position: absolute;
    right: 10px;                           /* 距离右侧的间距 */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #003316;        /* 箭头颜色 */
    transition: transform 0.3s ease;       /* 悬停动画 */
}

/* 鼠标悬停时的效果 */
.moreBTN:hover a {
    color: #fff;
    background-color: #307fc0;
}

.moreBTN:hover::after {
    border-left-color: #fff;               /* 悬停时箭头变白 */
    transform: translateY(-50%) translateX(2px); /* 箭头向右微移 */
}


/* ********************************* Home Page  ************************************** */

/* Header 样式 */
.header {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease;
	
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 15px 100px; /* 左右各100px间距 */
}
.header-container1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 15px 100px; /* 左右各50px间距 */
}

/* Logo 样式 */
.logo img {
    max-height: 60px;
    width: auto;
}

/* 导航菜单样式 */
.nav-menu {
    display: flex;
}

.nav-list {
    display: flex;
    list-style: none;
    align-items: center;
}

.nav-list li {
    margin-left: 25px;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-list li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 5px 0;
}

.nav-list li a:hover {
    color: #007bff;
}

/* 下拉菜单样式 - 电脑端 */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 0;
    min-width: 180px;
    display: none;
    z-index: 1001;
}

.dropdown.active .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    margin: 0;
    padding: 8px 20px;
}

.dropdown-menu li a {
    font-size: 14px;
    white-space: nowrap;
    padding: 0;
}

/* 下拉箭头样式 */
.dropdown-arrow {
    display: inline-block;
    margin-left: 5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    transition: transform 0.3s ease;
}

.dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* 预约按钮样式 */
.menuApmt {
    <!-- background-color: #00ffff; /* 背景颜色 */ -->
    color: #fff; 
    padding: 12px 20px; /* 增加内边距 */
    border-radius: 4px; /* 圆角 */
    display: inline-block; /* 确保 padding 生效 */
    text-align: center; /* 文字居中（可选） */
}

.menuApmt a {
    color: #fff; /* 链接文字颜色 */
    text-decoration: none; /* 去掉下划线 */
    display: block; /* 确保链接占据整个 <li> 的空间 */
    width: 100%; /* 让链接宽度与 <li> 一致 */
    height: 100%; /* 让链接高度与 <li> 一致 */
}

.nav-list li.menuApmt {
    background: linear-gradient(to right, #3ca970, #7bb568); /* 从左到右的渐变背景 */
}

.nav-list li.menuApmt a {
    color: #fff;
}


/* 移动端菜单按钮样式 */
.mobile-menu-toggle {
    display: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.mobile-menu-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #333;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.mobile-menu-toggle span:nth-child(1) {
    top: 6px;
}

.mobile-menu-toggle span:nth-child(2) {
    top: 12px;
}

.mobile-menu-toggle span:nth-child(3) {
    top: 18px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    top: 12px;
    transform: rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    top: 12px;
    transform: rotate(-45deg);
}

/* 响应式设计 - 移动端 */
@media (max-width: 992px) {
    .header-container {
        padding: 15px 20px; /* 移动端减少左右间距 */
    }
    
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .nav-menu.active {
        max-height: 100vh;
        padding: 10px 0 20px;
    }
    
    .nav-list {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        padding-left: 20px;
		padding-right: 20px;
    }
    
    .nav-list li {
        margin: 8px 0;
        width: 100%; /* 确保每个一级菜单项占据整行 */
        display: block; /* 确保每个一级菜单项占据整行 */
    }
    
    .nav-list li a {
        display: block;
        padding: 10px;
        width: 100%; /* 确保链接占据整行 */
    }
	
	.nav-list li.menuApmt {
		max-width:160px;
		padding: 6px 8px;
	}
    
    /* 移动端下拉菜单样式 - 改为垂直排列 */
    .dropdown-menu {
        position: static;
        box-shadow: none;
        display: none;
        width: 100%;
        padding-left: 20px; /* 子菜单缩进 */
		padding-right: 20px;
		
        background-color: #f8f9fa; /* 子菜单背景色区分 */
        margin-top: 5px;
        border-radius: 0;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    .dropdown-menu li {
        padding: 8px 0;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
	
	

	.secTitle h2 {		
		font-size: 26px;    
	}


}

/* ********************************* Header - CrossBanner  ************************************** */


.crossArea {
    position: relative;
    width: 100%;
}

.crossBanner {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 770px; 
    max-height: 770px;
    background: #f5f5f5; /* 添加背景色方便调试 */
}

.cbImgArea {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.cbImgArea.active {
    opacity: 1;
}

.cbImg {
    width: 100%;
    height: 100%; /* 改为100%填满容器 */
    object-fit: cover; /* 保持图片比例填满容器 */
    position: absolute;
    top: 0;
    left: 0;
}

.speColorBG {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    height: 85%; /* 控制高度在60%-70%之间 */
    background: rgba(45, 121, 200, 0.6); /* 60%透明度 */ 
	/* background: linear-gradient(to top, rgba(30, 44, 136, 0.8), rgba(30, 44, 136, 0.4)); */
    z-index: 1; /* 介于图片(0)和文字(2)之间 */
}


.homeBanner_box {
    position: absolute;
    top: 40%; /* 垂直 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 精确居中 */
    width: 100%;
    max-width: 1360px; /* 最大宽度限制 */
    padding: 0 20px; /* 左右留白 */
    box-sizing: border-box;
    z-index: 2; /* 确保在图片上方 */
}
.homeBanner_box .des {
    max-width: 720px;      /* 最大宽度限制 */
    white-space: normal;   /* 确保文字可以换行（默认值，可省略） */
    word-wrap: break-word; /* 长单词或URL强制换行 */
}
/* 标题样式 */
.homeBanner_box .tit {
	max-width: 720px; 
	font-size: 36px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 15px;
	line-height: 1.3;
}

/* 描述样式 */
.homeBanner_box .des {
	font-size: 22px;
	font-weight: normal;
	color: #fff;
	margin-bottom: 25px;
	line-height: 1.5;
}

.vertAdjust{
	top: 50%; /* 垂直 */
}


/* icon4card 容器样式 */
.icon4card {
    position: absolute; /* 改为绝对定位 */
    bottom: 50px; /* 距离底部50px */
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    z-index: 10; /* 确保在轮播图上方 */
    
}

/* sgCard 样式 */
.sgCard {
    display: flex;
    width: 23%; /* 电脑端每行显示 4 个 */
    padding: 10px;
    box-sizing: border-box;
	
	background-color: rgba(255, 255, 255, 0.9); /* 添加半透明背景更好看 */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border-radius: 8px; /* 圆角 */
	padding:20px;
	margin-right:20px;
	
}

/* cardImg 和 cardTxt 样式 */
.cardImg, .cardTxt {
    display: flex;
    align-items: center;
}


.cardImg {
    width: 45px; /* 固定图片容器宽度 */
    min-width: 45px; /* 防止被压缩 */
}

.cardImg img {
    max-width: 100%; /* 图片最大宽度不超过容器 */
    height: auto; /* 高度自适应 */
    display: block; /* 消除图片底部间隙 */
}

.cardTxt {
    flex-direction: column;
    margin-left: 16px; /* 与图片的间距 */
	font-size: 14px;
}

.cardTxt a {
    text-decoration: none;
    color: #333;
}

.cardTxt h3 {
    font-size: 1.2em;
    margin: 0;
}

.cardTxt p {
    font-size: 1em;
    margin: 5px 0 0;
}


/* 响应式设计 - 移动端 */
@media (max-width: 992px) {
    .crossBanner {
        min-height: 240px; 
		max-height: 280px;
    }
	
	.homeBanner_box {		
		top: 50%; /* 垂直 */		
	}
	
	.speColorBG {		
		bottom: 10%;		
		height: 95%; 
	}

	
	.homeBanner_box .tit {	
		font-size: 16px;
		font-weight: bold;		
		margin-bottom: 15px;
		line-height: 1.2;
	}

	/* 描述样式 */
	.homeBanner_box .des {
		font-size: 12px;		
		line-height: 1.3;
	}

	
	.icon4card {
        position: relative; /* 移动端改为相对定位 */
        bottom: auto;
				
        margin-top: -30px; /* 向上移动30px */
		margin-left: 12px;
		margin-right: 12px;
		
        padding: 5px;
		
    }

.cardImg {
    width: 30px; /* 固定图片容器宽度 */
    min-width: 30px; /* 防止被压缩 */
}
.cardImg img {
    max-width: 80%; /* 图片最大宽度不超过容器 */
}

    .sgCard {	
	
        width: 100%; /* 移动端每行显示 个 */
		
		margin: 0 auto;
		
		margin-bottom:10px;
    }
}




/* ********************************* CrossBanner - Why us ************************************** */

/* whyChoos 容器样式 */
.whyChoos {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

/* wcTitle 样式 */
.wcTitle {
    width: 100%;
    margin-bottom: 20px;
	margin: 0 0 50px;	
}



/* wc4col 样式 */
.wc4col {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px; /* 间距 */
	margin: 0 0 30px;
}

/* wcCard 样式 */
.wcCard {
    width: calc(25% - 30px); /* 电脑端每行4个，考虑间距 */
    border: 1px solid #ccc;
    padding: 15px;
    transition: box-shadow 0.3s ease, color 0.3s ease;
	border-radius: 12px; /* 圆角 */
    text-align: center; /* 文本居中 */
}

.wcCard:hover {    
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}

.wcCard:hover h3 {
    color: green;
}

/* wcImg 样式 */
.wcImg {
    display: flex;
    justify-content: center; /* 图片居中 */
    margin: 50px 0 35px 0;
}

.wcImg img {
    max-width: 80px; /* 图片最大宽度 */
    height: auto;
    display: block;
}

/* 标题和段落样式 */
.wcCard h3 {
    font-size: 1.2em;
    margin: 0 0 25px;
}

.wcCard p {
    font-size: 1em;
    margin: 0;
    text-align: left; /* 段落左对齐 */
	padding: 0 20px 20px; /* 增加左右间距 */
}

/* wcMore 样式 */
.wcMore {
    width: 100%;
    margin-top: 20px;
}





/* 响应式设计 - 移动端 */
@media (max-width: 992px) {
	.whyChoos {
        padding: 20px 10px; /* 移动端左右间距设置为10px */
    }
	
	.wcTitle h2 {
		font-size: 2.2em;
		margin: 0;
	}

    .wc4col {
        gap: 12px; /* 保持卡片之间的间距 */
    }

    .wcCard {
        width: calc(50% - 14px); /* 移动端每行2个，考虑间距 */
    }
	
	.wcCard h3 {
		font-size: 16px;
	}
	
	.wcCard p {
		font-size: 12px;
		margin: 0;
		text-align: left; /* 段落左对齐 */
		padding: 0;
	}
	
	.wcImg {
		margin: 30px 0 20px 0;
	}
}



/* *********************************  Why us -  Case (two layout) ************************************** */


        /* 主容器 */
        .caseShow, .caseShowSec {
            width: 100%;
			max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 标题 */
        .wcTitle {
            text-align: center;
            margin-bottom: 20px;
        }
        .wcTitle h2 {
            font-size: 2em;
        }

        /* 标签容器 */
        .caseGalTab {
            position: relative;
            margin-bottom: 20px;
        }

        /* 标签滚动区域 */
        .tabContainer {
            overflow-x: auto;
            scroll-behavior: smooth;
            -ms-overflow-style: none;
            scrollbar-width: none;
            margin: 0 40px; /* 给按钮留空间 */
        }
        .tabContainer::-webkit-scrollbar {
            display: none;
        }

        /* 标签列表 */
        .navTabs {
            display: flex;
            gap: 10px;
            padding: 5px 0;
            width: max-content; /* 允许横向扩展 */
        }

        /* 单个标签 */
        .navTabs > div {
            flex-shrink: 0;
            width: 200px;
            height: 60px;
        }
        .navTabs a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            border-radius: 5px;
            text-decoration: none;
            color: #333;
			font-size: 14px;
			text-align: center; /* 确保文本居中 */
			padding: 5px; /* 增加内边距，避免文字紧贴边框 */
			word-break: break-word; /* 允许长单词换行 */
			white-space: normal; /* 覆盖默认的 nowrap，允许换行 */
        }
        .navTabs a.active {
            background-color: #307fc0;
            color: white;
        }

        /* 滚动按钮 */
        .scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 16px;
            cursor: pointer;
            z-index: 2;
        }
        .scroll-btn.left {
            left: 0;
        }
        .scroll-btn.right {
            right: 0;
        }
        .scroll-btn.hidden {
            display: none;
        }

        /* 案例卡片区域 */
        .caseArea {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .caseCard {
            width: calc(25% - 15px);
            padding: 10px;
            display: none;
			transition: box-shadow 0.3s ease;			
        }
		.caseCard:hover {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}

        .caseCard.active {
            display: block;
        }
        .caseImg img {
            width: 100%;
            border-radius: 8px;
        }
        .caseDes {
            margin-top: 10px;
            font-size: 14px;
        }


		/* 确保 caseDes 在链接中不会变色或出现下划线 */
		.caseCard a {
			text-decoration: none; /* 确保链接没有下划线 */
			color: inherit; /* 确保链接颜色继承自父元素 */
		}



/* 移动端适配 */
@media (max-width: 992px) {
	.caseCard {
		width: calc(50% - 10px);
		margin:0;
		padding:0;
	}
		
	
		
	.navTabs > div {
		width: 160px;
	}
}


/* 第二种布局样式 - 仅在大屏幕上应用 */
@media (min-width: 993px) {
	.caseShowSec {
		display: flex;
		gap: 30px;
	}
	
	.caseShowSec .caseGalTab {
		flex: 0 0 250px;
		margin-bottom: 0;
	}
	
	.caseShowSec .tabContainer {
		margin: 0;
		overflow-x: visible;
	}
	
	.caseShowSec .navTabs {
		flex-direction: column;
		width: 100%;
	}
	
	.caseShowSec .navTabs > div {
		width: 100%;
	}
	
	.caseShowSec .scroll-btn {
		display: none;
	}
	
	.caseShowSec .caseArea {
		flex: 1;
	}
	
	.caseShowSec .caseCard {
		width: calc(33.33% - 14px);
	}
}

		


/* *********************************  Left Right ************************************** */


/* Welfare 容器样式 */
.Welfare {
    display: flex;
    width: 100%;
    overflow: hidden;
}

/* leftStatic 样式 */
.leftStatic {
    width: 50%;	
    background-color: #e2eef5;
    padding: 30px 30px 30px 0; /* 右侧padding 30px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* 内容靠右对齐 */
}

.lsCnt {
    max-width: 700px;
    width: calc(100% - 30px); /* 减去右侧间隔 */
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
}

/* 新增：设置statColTop文字颜色  */
.statColTop {
    font-size: 2em;
    margin-bottom: 10px;
    color: #95c24b; 
	font-weight: bold;
}


.leftStatic .lsCnt h2 {
    font-size: 34px;
    margin-bottom: 50px;
	text-align: left;
}

.leftStatic .lsCnt p {
    font-size: 16px;
    margin-bottom: 50px;
	text-align: left;
    width: 100%; 
}


/* statArea 样式 */
.statArea {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

/* statCol 样式 */
.statCol {
    text-align: left;
    width: 30%;
}

.statColTop {
    font-size: 2em;
    margin-bottom: 10px;
}

.statColBtm {
    font-size: 1em;
}


/* rightSwiper 样式 */
.rightSwiper {
    width: 50%;
    background: linear-gradient(to right, #397cac, #3ca6cb);
    overflow: hidden; /* 隐藏水平滚动条 */
    position: relative;
    padding: 60px 0; /* 上下间距 30px */
}

/* wfCardContainer 样式 */
.wfCardContainer {
    display: flex;
    overflow-x: auto; /* 允许内容滚动 */
    scroll-behavior: smooth;
    margin-left: 80px; /* 左侧间距 */
    padding-bottom: 30px; /* 底部间距 */
    white-space: nowrap; /* 确保卡片水平排列 */
    height: 100%; /* 确保高度占满父容器 */
}

/* 隐藏滚动条的样式 */
.wfCardContainer::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条的样式（针对非Webkit浏览器） */
.wfCardContainer {
    -ms-overflow-style: none; /* IE和Edge */
    scrollbar-width: none; /* Firefox */
}

/* 轮播指示器样式 */
.swiper-indicators {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    <!-- background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */ -->
}

.swiper-indicators span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #ccc; /* 灰色小圆点 */
    border-radius: 50%;
    cursor: pointer;
}

.swiper-indicators span.active {
    background-color: #007bff; /* 活动状态的小圆点 */
}

/* wfCard 样式 */
.wfCard {
    min-width: 300px; /* 每个卡片的最小宽度 */
    max-width: 450px; /* 每个卡片的最大宽度 */
    margin-right: 20px; /* 卡片之间的间距 */
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* 确保高度占满父容器 */
    overflow: hidden; /* 防止内容溢出 */
}

.wfImg img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* wfTitle 样式 */
.wfTitle {
    font-size: 1.2em;
    margin: 10px 10px;
    width: 100%; /* 确保宽度占满容器 */
    word-wrap: break-word; /* 允许在单词内换行 */
    overflow-wrap: break-word; /* 允许在单词内换行 */
    overflow: hidden; /* 防止内容溢出 */
    text-overflow: ellipsis; /* 显示省略号 */
    white-space: normal; /* 允许正常换行 */
}

/* wfDes 样式 */
.wfDes {
    font-size: 1em;
    margin: 10px 10px;
    width: 100%; /* 确保宽度占满容器 */
    word-wrap: break-word; /* 允许在单词内换行 */
    overflow-wrap: break-word; /* 允许在单词内换行 */
    overflow: hidden; /* 防止内容溢出 */
    text-overflow: ellipsis; /* 显示省略号 */
    white-space: normal; /* 允许正常换行 */
}




/* 响应式设计 - 移动端 */
@media (max-width: 992px) {
    .Welfare {
        flex-direction: column; /* 上下排列 */
    }

    .leftStatic {
        width: 100%; /* 占满整个屏幕宽度 */
    }

    .rightSwiper {
        width: 100%; /* 占满整个屏幕宽度 */
    }

    .statArea {
        flex-direction: column; /* 上下排列 */
        align-items: center; /* 水平居中 */
    }

    .statCol {
        width: 100%; /* 占满整个屏幕宽度 */
        margin-bottom: 20px; /* 卡片之间的间距 */
    }
	
	.lsCnt {		
		padding: 10px;
	}

	.leftStatic .lsCnt h2 {
		font-size: 22px;
		margin-bottom: 20px;
		text-align: left;
	}

	.leftStatic .lsCnt p {
		font-size: 14px;
		line-height: 1.5em;
		margin-bottom: 30px;
		text-align: left;
		width: 100%; 
	}
	
	.wfCardContainer {		
		margin-left: 50px; /* 左侧间距 */
		padding-bottom: 15px; /* 底部间距 */
		
	}

}



/* *********************************  Avatar ************************************** */

        .avatarArea {
            position: relative;
            max-width: 1400px;
            margin: 30px auto;
            overflow: hidden;
        }
        
.avatarColContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 或 space-between 根据需求 */
  gap: 0px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
}

/* 单个项目 - 电脑端3列 */
.avatarCol {
  flex: 0 0 calc(33.333% - 14px); /* 关键调整：减去gap的2/3 */
  max-width: calc(33.333% - 14px); /* 保持与flex一致 */
  padding: 0 20px;
  box-sizing: border-box; /* 确保padding不增加宽度 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
  margin-bottom: 20px; /* 替代gap的底部间距 */
}

		
		
/* 链接容器样式 */
.avatarCol-link {
  display: block; /* 使a标签可以包含块级元素 */
  text-decoration: none; /* 移除下划线 */
  color: inherit; /* 继承文字颜色 */
}

/* 鼠标悬停效果 */
.avatarCol-link:hover .avatarCol {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
  opacity: 0.85; /* 轻微透明效果 */
  border-radius: 8px; /* 圆角效果 */
}

/* 点击时的反馈效果 */
.avatarCol-link:active .avatarCol {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

        
        .avatarImg {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        
        .avatarImg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .avatarFrame {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 70px 20px 20px;
            margin-top: -50px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            min-height: 200px;
        }
        
        .avatarName {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
        }
        
		.avatarDesc {
			padding: 20px 30px;
			text-align:left;
			font-size: 14px;
			color: #555;    
			height: 220px; /* 限制高度 */
			overflow: hidden; /* 隐藏超出部分 */
			text-overflow: ellipsis; /* 显示省略号 */
			display: -webkit-box;
			-webkit-box-orient: vertical;
		} 
		.avatarDesc1 {
			padding: 20px 30px;
			text-align:left;
			font-size: 14px;
			color: #555;    
			height: 400px; /* 限制高度 */
			overflow: hidden; /* 隐藏超出部分 */
			text-overflow: ellipsis; /* 显示省略号 */
			display: -webkit-box;
			-webkit-box-orient: vertical;
		} 


        .swiper-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 10;
            user-select: none;
            border: none;
            outline: none;
        }
        
        .swiper-button-left {
            left: 10px;
        }
        
        .swiper-button-right {
            right: 10px;
        }
        
        .swiper-indicators {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .swiper-indicators span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .swiper-indicators span.active {
            background-color: #333;
        }
        
        /* 桌面端样式 */
        @media (min-width: 992px) {
            .avatarArea {
                padding: 0 60px;
            }
            
            .avatarCol {
                flex: 0 0 calc(33.333% - 20px);
                margin: 0 10px;
                max-width: none;
            }
            
            .avatarColContainer {
                justify-content: flex-start;
                margin: 0 -10px;
                width: calc(100% + 20px);
            }
            
            .swiper-button {
                top: 40%;
            }
        }
        
        /* 移动端样式 */
@media (max-width: 992px) {
	.avatarArea {
		padding: 0 40px;
	}
	
	.swiper-button {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}
	
	.avatarCol {
		flex: 0 0 100%; /* 移动端单列 */
		width: 100%;
		max-width: 100%;
		
	}
	
	
	.avatarCol {
		
		padding: 0 16px;
		min-width: 340px;
		margin: 20px 0 0 -10px;			
		height: 580px; /* 固定高度 */
		
		
	}



	.avatarFrame {           
		padding: 50px 10px 20px;
	   
	}
			
	.avatarDesc {
		padding: 20px 16px;
		
	} 


}



/* *********************************  ContactForm ************************************** */

        /* contactRow 容器样式 */
        .contactRow {
            width: 100%;
            background: linear-gradient(to right, #3ca970, #7bb568);
            padding: 30px 0;
			margin: 30px auto;
        }

        /* contactCNT 容器样式 */
        .contactCNT {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }

        /* ctAreaA 样式 */
        .ctAreaA {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ctAreaA .title {
            font-size: 24px;
            font-weight: bold;
            color: white;
        }

        .ctAreaA .desc {
            font-size: 16px;
            color: white;
        }

        /* ctAreaB 样式 */
        .ctAreaB {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ctAreaB .contactForm {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .ctAreaB .contactForm input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            max-width: 300px; /* 限制输入框的最大宽度 */
        }

        .ctAreaB .contactForm button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            max-width: 150px; /* 限制按钮的最大宽度 */
        }

        .ctAreaB .contactForm button:hover {
            background-color: #0069d9;
        }

        /* 响应式设计 - 移动端 */
        @media (max-width: 992px) {
            .ctAreaA, .ctAreaB {
                flex: 100%;
            }

            .ctAreaB .contactForm {
                flex-direction: column;
            }

            .ctAreaB .contactForm input, .ctAreaB .contactForm button {
                width: 100%; /* 在移动端，输入框和按钮占满整个宽度 */
                margin-bottom: 10px; /* 添加底部间距 */
            }
        }




/* *********************************  Inquiry ************************************** */


/* inqueryRow 容器样式 */
.inqueryRow {
    max-width: 1400px;
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 40px 50px; /* 上下内边距 40px，左右内边距 100px */
    background-color: white; /* 背景色 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15); 
}

/* iqAreaA 样式 */
.iqAreaA {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iqAreaA .title {
    font-size: 24px;
    font-weight: bold;
}

.iqAreaA .desc {
    font-size: 16px;
    color: #555;
}

/* iqAreaB 样式 */
.iqAreaB {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end; /* 对齐到右侧 */
}

.iqAreaB .iqBTN1 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 6px;
     background: linear-gradient(to right, #3ca970, #7bb568); /* 从左到右的渐变背景 */
    width: 260px; /* 固定宽度 */
    text-decoration: none; /* 去掉超链接下划线 */
	justify-content: center; /* 水平居中 */
    color: #fff; /* 文字颜色 */
	font-size: 14px;
    transition: background-color 0.3s ease; /* 鼠标悬停效果 */
}
.iqAreaB .iqBTN2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 6px;
    background-color: #e0f7fa; /* 浅绿色背景 */
    width: 260px; /* 固定宽度 */
    text-decoration: none; /* 去掉超链接下划线 */
	justify-content: center; /* 水平居中 */
    color: black; /* 文字颜色 */
	font-size: 14px;
    transition: background-color 0.3s ease; /* 鼠标悬停效果 */
}

.iqAreaB .iqBTN1:hover, .iqAreaB .iqBTN2:hover {
    background-color: #d0f2fe; /* 鼠标悬停时的背景色 */
}

.iqAreaB .iqBTN1 img, .iqAreaB .iqBTN2 img {
    width: 20px; /* 图标大小 */
    height: 20px;
	margin-right: 10px; /* 设置图片与文字之间的间距 */
}


/* 响应式设计 - 移动端 */
@media (max-width: 992px) {
    .inqueryRow {
        padding: 40px 20px; /* 调整内边距 */
    }

    .iqAreaA, .iqAreaB {
        flex: 100%;
    }

    .iqAreaB {
        flex-direction: column;
        justify-content: flex-start; /* 在移动端，按钮对齐到顶部 */
    }

    .iqAreaB .iqBTN1, .iqAreaB .iqBTN2 {
        width: 100%; /* 在移动端占满整个宽度 */
        margin-bottom: 10px; /* 添加底部间距 */
    }
}



/* *********************************  Form Style ************************************** */


#thxformContainer { display: none; position: fixed; left: 50%; top: 50%;transform: translate(-50%, -50%);z-index: 1002; }
.thxformContainer {	
}
.thxrespForm {
  
  padding: 30px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75);  
  
  background-color:#eff7fc;
  width:260px;
}

.thxInfo {
  color: rgb(77, 75, 75);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 30px;
}

.thxDes {
  display: flex;
  margin-bottom: 30px;
  align-items: center;
  width:150px;
  font-size: 14px;
  text-align:center;
}

	
.thxcloseBTN {
  width: 50%; 
  padding: 10px; 
  padding-bottom:10px;
  border-radius: 5px; 
  color: white; 
  background-color: #1586c6; 
  border: none; 
  cursor: pointer; 
}



/* *********************************  Footer ************************************** */

        /* footer 容器样式 */
        .footer {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 40px 20px;
            background-color: white; /* 背景色 */
        }

        /* ftAreaA 样式 */
        .ftAreaA {
            flex: 0 0 30%; /* 占据容器的 30% */
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-start; /* 左对齐 */
        }

        .ftAreaA .ftlogo img {
            max-width: 200px; /* 图标最大宽度 */
            height: auto;
            margin-bottom: 40px; /* 图标底部间距 */
        }

        .ftAreaA .desc {
            font-size: 14px;
            color: #555;
        }

        /* ftAreaB 样式 */
        .ftAreaB {
            flex: 1; /* 占据剩余空间 */
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: flex-start; /* 左对齐 */
        }

        .ftCol {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ftCol .headline {
            font-size: 16px;
            font-weight: bold;
        }

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

        .ftCol ul li {
            font-size: 14px;
            color: #555;
            line-height: 2.2em; /* 行高 */
        }

        .ftCol ul li a {
            text-decoration: none; /* 去掉超链接下划线 */
            color: inherit; /* 继承父元素的颜色 */
        }

        /* 响应式设计 - 移动端 */
@media (max-width: 992px) {
    .footer {
        flex-direction: column;
    }

    .ftAreaA {
        flex: 100%;
    }

    .ftAreaB {
        flex: 100%;
        flex-wrap: wrap;
    }

    .ftCol {
        flex: 0 0 45%; /* 每行显示 2 个 ftCol */
        max-width: 45%; /* 确保每个 ftCol 最大宽度为 50% */
    }
}



/* ********************************* Hospital   ************************************** */

/* 内部 div 样式 */
.hospSection {
	
	padding: 20px;
	margin: 10px 0;                   
	text-align: center;
	width:100%;
	max-width: 1400px;
}
.hospSection h2 {
	font-size: 36px;
	margin: 100px 0 30px 0;
}

.hospSection p {
	font-size: 16px;
	line-height: 1.6;
	color: #555;
}


/* hospTab 容器样式 */
.hospTab {
	background-color: #f8f8f8;
	border-radius: 8px;
	padding: 20px;
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 50px auto;
	width:100%;
	max-width: 1400px;
}

/* 文字块样式 */
.hospTab a {
	text-decoration: none;
	color: #333;
	font-size: 16px;            
	padding: 10px 30px;
	border-radius: 4px;           
	transition: background-color 0.3s ease;
}		
		
.hospTab a.active {
	color: #7bb568; 
	<!-- text-decoration: underline;  -->
}

.hospTab a:hover {           
	
	color: #e0e0e0;
}


/* hospInfo 容器样式 */
.hospInfo {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0;
	width:100%;
	max-width: 1400px;
}

/* hinfoTitle 样式 */
.hinfoTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 30px 0;
}

.hinfoTitle .hTitleTxt {
	font-size: 36px;
	font-weight: bold;
}

.hinfoTitle .hTitleStat {
	display: flex;
	gap: 20px;
}

.hinfoTitle .hTitleStat .statCol {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width:120px;
}

.hinfoTitle .hTitleStat .statCol .statNumber {
	font-size: 30px;
	font-weight: bold;
	color: #3ca970; /* 浅绿色 */
}

.hinfoTitle .hTitleStat .statCol .statIndic {
	font-size: 12px;
	color: #666;
}


/* hinfoDesc 样式 */
.hinfoDesc {
	margin-bottom: 20px;
	text-align: justify;
	line-height: 1.6; /* 增加行间距 */
	color: #555; /* 设置字体颜色为深灰色 */
	font-size: 14px;
}


/* hinfoImg 样式 */
.hinfoImg {
	display: flex;
	gap: 20px;
	width: 100%;
}

.hinfoImg .img-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hinfoImg img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}



/* 响应式设计 - 移动端 */
@media (max-width: 992px) {
	
	 /* 添加这个规则确保所有主要容器都有12px的边距 */
    .hospSection,
    .hospTab,
    .hospInfo {
        padding-left: 12px;
        padding-right: 12px;
        width: calc(100% - 24px); /* 确保总宽度减去两边的padding */
    }
    
    
    
    /* 确保hospContainer的内边距不会叠加 */
    .hospContainer {
        padding: 0;
    }
	
	
	.hospTab {
        flex-direction: column; /* 在移动端上下排列 */
		margin: 0;
    }

    .hospTab a {
        font-size: 14px; /* 减小字体大小 */
		background-color: #d5e6b9;
        padding: 12px 10px; /* 减小内边距 */
		margin-bottom: -10px;
		
    }
	
	
	.hospInfo {
		margin: 0 12px;		
	}

	
	.hinfoTitle {
        flex-direction: column; /* 在移动端上下排列 */
        align-items: flex-start; /* 对齐方式调整为居左 */
		
		padding: 0 12px; /* 为整个标题区域添加左右内边距 */		
    }
	
	.hinfoTitle .hTitleStat {
		gap: 12px;
		justify-content: flex-start; /* 在移动端将内容居左排列 */
	}

	.hinfoTitle .hTitleStat .statCol {		
		min-width:110px;
	}
	
    .hinfoTitle .hTitleTxt {
	
		width: 100%; /* 确保宽度占满父容器 */
		margin: 0; /* 移除外边距，让父容器的内边距控制间距 */	
		font-size: 24px;        
    }

    .hinfoTitle .hTitleStat {
        flex-direction: row; /* 在移动端左右排列 */
        justify-content: center; /* 居中对齐 */
        width: 100%; /* 确保宽度占满父容器 */
		margin: 12px;
    }
	.hinfoTitle .hTitleStat .statCol .statNumber {
		font-size: 18px;
	}
	
	
	/* hinfoDesc 样式 */
        .hinfoDesc {
            text-align: left;
			font-size: 14px;
			line-height: 1.4; /* 增加行间距 */
			color: #555; /* 设置字体颜色为深灰色 */
			
			max-height: 300px; /* 设置最大高度 */
			overflow: hidden; /* 隐藏超出部分 */
			position: relative; /* 用于定位展开链接 */
	
        }
		
		.hinfoDesc.expanded {
			max-height: none; /* 展开时移除高度限制 */
		}
		
		.hinfoDesc::after {
			content: "Unfold";
			position: absolute;
			bottom: 0;
			left: 80%; /* 水平偏右 */
			transform: translateX(-50%); /* 水平居中 */
			width: 30%; /* 设置宽度为 30% */
			height: 50px;
			background: rgba(200, 255, 255, 0.5); /* 半透明背景 */
			text-align: center;
			line-height: 50px;
			cursor: pointer;
			color: #333;
			font-weight: bold; /* 加粗字体 */
			
			border-radius: 8px; /* 添加圆角 */
			transition: background-color 0.3s ease; /* 平滑背景颜色变化 */
		}
		
		/* 可选：展开时修改按钮文字 */
		.hinfoDesc.expanded::after {
			content: "Fold";
		}
	
	/* hinfoImg 样式调整 */
    .hinfoImg {
        flex-direction: column; /* 在移动端上下排列 */
    }

    .hinfoImg .img-group {
        flex-direction: row; /* 在移动端水平排列 */
        flex-wrap: wrap; /* 允许换行 */
        justify-content: space-between; /* 图片之间有适当的间距 */
    }

    .hinfoImg .img-group img {
        width: 46%; /* 每张图片占容器宽度的 48%，留出一些间距 */
        margin-bottom: 20px; /* 添加一些间距 */
    }
	
}



/* ********************************* Doctor Professor  ************************************** */

/* 容器样式 */
.proInfoContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 默认居中对齐 */
    max-width: 1400px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    gap: 60px; /* 直接控制间距（上下+左右） */	
}

/* 每个 proInfo 的样式 */
.proInfo {
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 水平居中对齐 */
    width: calc(33.333% - 40px); /* 每行显示3个，减去间距 */
    
    box-sizing: border-box; /* 包含内边距和边框 */
    position: relative; /* 设置相对定位，用于子元素的绝对定位 */
	
}

.proImg {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute; /* 绝对定位 */
    top: -20px; /* 向上偏移，使30%的图片超出背景色 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 精确水平居中 */
    z-index: 1; /* 确保图片在背景色上方 */
	border: 3px solid white; /* 白色边框 */
}

.proImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proFrame {
    width: 100%; /* 宽度占满父容器 */
    height: 330px; /* 固定高度 */
    background-color: #eaf2f9; /* 浅蓝色背景 */
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    justify-content: center; /* 垂直居中对齐 */
    align-items: center; /* 水平居中对齐 */
    padding: 10px; /* 内边距 */
    box-sizing: border-box; /* 包含内边距和边框 */
	border-radius: 8px;
    position: relative; /* 设置相对定位 */
    margin-top: 20px; /* 为背景色留出空间 */
}



/* 医生姓名样式 */
.proName {
    margin: 50px 0 2px 0;
    text-align: center;
    width: 100%;
    font-weight: bold; /* 粗体 */
    font-size: 28px; /* 字号 28px */
    line-height: 2.8; /* 固定行高（可调整） */
}
/* 团队下方文字 */
.proName1 {
    margin: 0px 0 2px 0;
    text-align: center;
    width: 100%;
    font-weight: bold; /* 粗体 */
    font-size: 28px; /* 字号 28px */
    line-height: 2.8; /* 固定行高（可调整） */
}
/* 医生描述样式 */
.proDesc {	
	width: calc(100% - 40px); /* 左右各留20px间距 */
    margin: 2px 20px; /* 左右间距20px */
    font-size: 16px;
    line-height: 1.4;
    height: 80px; /* 固定高度（按需调整） */
    overflow: hidden; /* 隐藏溢出内容 */
    text-align: center; /* 左对齐（或center按需） */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制显示3行（根据高度调整） */
    -webkit-box-orient: vertical;
    word-break: break-word; /* 允许单词换行 */
	
}
/* 团队下方文字1 */
.proDesc1 {	
	width: calc(100% - 40px); /* 左右各留20px间距 */
    margin: 0px 0px 80px 0px; /* 左右间距20px */
    font-size: 16px;
    line-height: 1.4;
    height: 120px; /* 固定高度（按需调整） */
    overflow: hidden; /* 隐藏溢出内容 */
    text-align: center; /* 左对齐（或center按需） */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制显示3行（根据高度调整） */
    -webkit-box-orient: vertical;
    word-break: break-word; /* 允许单词换行 */
	
}




/* 分类卡片底色 */
.proInfo.cmnBlue .proFrame {
    background-color: #eaf2f9;
}
.proInfo.cmnGreen .proFrame {
    background-color: #f2f8ed;
}
.proInfo.cmnGrape .proFrame {
    background-color: #efeff6;
}

/* 特定卡片的渐变色样式 */
.proInfo.speBlue .proFrame {
	color: #fff;
    background: linear-gradient(to bottom, #307fc0, #3ca6cc);
}
.proInfo.speGreen .proFrame {
    color: #fff;
	background: linear-gradient(to bottom, #43b357, #6cba51);
}
.proInfo.speGrape .proFrame {
    color: #fff;
	background: linear-gradient(to bottom, #22258f, #383caa);
}



/* 移动端布局（每行显示2个） */
@media (max-width: 992px) {
	
	.proInfoContainer {
        gap: 20px;
        padding: 0 12px; /* 添加左右12px的padding */
        width: 100%; /* 确保宽度占满 */
        box-sizing: border-box; /* 包含padding */
    }
    
    .proInfo {
        width: calc(50% - 10px); /* 计算时考虑gap */
        margin-bottom: 30px;
    }
	
	.proImg {
		width: 100px;
		height: 100px;
	}

	.proFrame {
		
		height: 250px; /* 固定高度 */
		
	}

	
	.proName {
		font-weight: bold; /* 粗体 */
		font-size: 16px; /* 字号 28px */
		line-height: 1.8; /* 固定行高（可调整） */
	}
	/* 医生描述样式 */
	.proDesc {
		margin: 2px 10px; /* 左右间距20px */
		font-size: 12px;
		line-height: 1.4;
		height: 60px; /* 固定高度（按需调整） */	
		
	}
	
	.proInfoContainer {
        justify-content: flex-start; /* 不足3个时使用 flex-start 排列 */
    }

}


/* ********************************* Doctor/Professor Detail  ************************************** */


/* 通用间距设置 */
.proDetail, .gnrCnt {
	padding: 0 12px; /* 所有独占一行的div左右间隔12px */
	box-sizing: border-box;
}


.proDetail {
	max-width: 1400px;
	margin: 15px auto; /* 居中 */
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.pdBrief {
	width: 55%;
}

.pdbIntro {
	text-align: left;
}

.pdbTitle {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 15px;
}

.padSubtitle {
	font-size: 18px;
	color: #666;
	margin-bottom: 25px;
}

.pdbDesc {
	border-left: 4px solid lightgreen; /* 左侧边缘为浅绿色 */
	padding-left: 10px;
	margin-bottom: 15px;
}

.pdbL1 {
	margin: 5px 0;
	color: #666;
	font-size: 16px;
}
.pdbL2 {
	margin: 5px 0;
	font-size: 18px;
}

.pdbImg {
	width: 45%;
	text-align: right;
}

.pdbImg img {
	max-width: 100%;
	height: auto;
}
	

/* 移动端样式（小于992px） */
@media (max-width: 992px) {
	.proDetail {
		flex-direction: column; /* 改为垂直排列 */
		align-items: center;
	}
	
	.pdBrief, .pdbImg {
		width: 100%; /* 宽度占满 */
		padding: 0 12px; /* 添加12px间距 */
		box-sizing: border-box;
	}
	
	.pdbImg {
		order: -1; /* 图片移到最前面 */
		text-align: center; /* 图片居中 */
		margin-bottom: 20px; /* 图片和文字之间添加间距 */
	}
	
	.pdbImg img {
		max-width: 100%; /* 图片宽度适当缩小 */
	}
	
	/* 调整字体大小 */
	.pdbTitle {
		font-size: 28px;
	}
	
	.pdbSubtitle {
		font-size: 16px;
	}
	
	.pdbL1 {
		font-size: 14px;
	}
	.pdbL2 {
		font-size: 14px;
	}

}


/* *********************************  Service ************************************** */

/* Tab Container */
.servTab {
	max-width: 1400px;
	width: 100%;
	margin: 0 auto 30px;
	display: flex;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid #ddd;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	height: 80px;
	align-items: center;
	padding: 2px;
	overflow-x: auto; /* 允许水平滚动 */
	scroll-behavior: smooth; /* 平滑滚动 */
}

/* Individual Tabs */
.servTab > div {
	position: relative;
	flex: 1;
	text-align: center;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 30px; /* 添加左右间隔 */
}

.servTab > div:first-child {
	margin-left: 0; /* 第一个子元素的左边距 */
	margin-right: auto; /* 第一个子元素的右边距自动 */
}

.servTab > div:last-child {
	margin-left: auto; /* 最后一个子元素的左边距自动 */
	margin-right: 0; /* 最后一个子元素的右边距 */
}


/* 分隔符 > */
.servTab > div:not(:last-child)::after {
	content: ">";
	position: absolute;
	right: -20px; /* 调整位置，避免与Tab内容重叠 */
	top: 50%;
	transform: translateY(-50%);
	color: #aaa;
	font-weight: bold;
	pointer-events: none;
	z-index: 1;
}

.servTab a {
	display: flex;
	padding: 0 20px;
	text-decoration: none;
	color: #333;
	font-weight: bold;
	border-radius: 2px;
	transition: all 0.3s ease;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom, #fff, #f5f5f5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.servTab a.active {
	background: linear-gradient(to right, #3ca970, #7bb568);
	color: #fff;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.servTab a:not(.active):hover {
	background: linear-gradient(to bottom, #e0f7fa, #d0e7f0);
}



/* Cards Area */
.servArea {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.servCard {
    display: none;
	
    width: 100%;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
   
    align-items: center; /* 垂直居中 */
}



.servCard.active {
    display: flex; /* 确保活动卡片显示为水平排列 */
}

.servCardImg {
    width: 60px;
    height: 60px;
    margin: 0 50px 0 20px; /* 与文本之间的间隔 */
}

.servCardImg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片填满整个区域 */
}


.servCardII {
	display: flex;
    width: 100%;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
   
    align-items: center; /* 垂直居中 */
}

.servCardII.active {
    display: flex; /* 确保活动卡片显示为水平排列 */
}

.servCardRound {
    width: 100px;
    height: 100px;
    margin: 0 50px 0 2px;
    border: 2px solid #ccc; /* 灰色圆圈 */
    border-radius: 50%; /* 圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.servCardRound img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}



.servCardTxt {
    flex: 1; /* 占据剩余空间 */
}

.servCardTxt h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px; /* 与段落之间的间隔 */
}

.servCardTxt p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}



/* Responsive */
@media (max-width: 992px) {
	.servTab {
		flex-direction: row;
		justify-content: flex-start;
		overflow-x: auto;
		height: 70px;
		padding: 5px 0;
		gap: 0;
		background: #f5f5f5;
		border-radius: 0;
	}

	.servTab > div {
		width: 170px !important;
		flex: none !important;
		margin: 0 !important;
		height: 100%;
		display: flex;
		border-right: 1px solid #ddd;
	}

	.servTab > div:last-child {
		border-right: none;
	}

	.servTab a {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0 20px;
		border-radius: 0;
		box-shadow: none;
	}

	.servTab a.active {
		box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
	}
	
	
	.servCard {
		
		align-items: flex-start; /* 使图片和文本顶端对齐 */
		padding: 20px 10px; /* 屏幕两边各留10px间距 */
		width:100%;
		margin: 0 10px; /* 确保没有额外的外边距 */
	}

	.servCardImg {
		width: 40px; /* 图片宽度 */
		height: 40px; /* 图片高度 */
		margin-left: 0; 
		margin-right: 10px; /* 图片和文本之间的间距 */			
		margin-top: 8px;
	}

	.servCardImg img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* 确保图片填满整个区域 */
	}
	
	.servCardRound {
		width: 40px;
		height: 40px;
		margin: 0 10px 0 2px;
		border: 1px solid #ccc; /* 灰色圆圈 */
		
	}

	.servCardRound img {
		width: 25px;
		height: 25px;
		object-fit: cover;
	}


	.servCardTxt {
		flex: 1; /* 文本占据剩余空间 */
	}

	.servCardTxt h3 {
		font-size: 22px;
		font-weight: bold;
		margin-bottom: 10px; /* 标题和段落之间的间距 */
	}

	.servCardTxt p {
		font-size: 16px;
		line-height: 1.6;
		color: #666;
	}

}


/* *********************************  FAQ ************************************** */

	.faq-container {
		max-width: 1400px;
		width: 100%;
		margin: 0 auto;
		padding: 20px;
		font-family: Arial, sans-serif;
		counter-reset: faq-counter;
	}
	
	.faq-item {
		border-bottom: 1px solid #e0e0e0;
		margin: 10px 0;
		position: relative;
		padding-left: 40px;
	}
	
	.faq-question {
		position: relative;
		padding: 18px 40px 18px 0;
		font-size: 18px; /* 电脑端字号 */
		color: #333;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.faq-question::before {
		counter-increment: faq-counter;
		content: counter(faq-counter) ". ";
		position: absolute;
		left: -40px;
		top: 18px;
		color: #666;
		font-weight: bold;
		font-size: 18px; /* 电脑端编号字号 */
	}
	
	.faq-question::after {
		content: '+';
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 20px; /* 电脑端图标字号 */
		color: #999;
		transition: all 0.3s ease;
	}
	
	.faq-item.active .faq-question {
		font-weight: bold;
		color: #4CAF50;
	}
	
	.faq-item.active .faq-question::after {
		content: '-';
		color: #4CAF50;
	}
	
	.faq-answer {
		padding: 0 20px 20px 0;
		line-height: 1.6;
		font-size: 16px; /* 电脑端答案字号 */
		display: none;
	}
	
	.faq-item.active .faq-answer {
		display: block;
	}
	
	.faq-item:first-child {
		border-top: 1px solid #e0e0e0;
		margin-top: 10px;
	}

	/* 移动端适配（≤768px） */
	@media (max-width: 768px) {
		.faq-question {
			font-size: 16px; /* 18px→16px（缩小2px） */
			padding: 15px 35px 15px 0; /* 调整间距适应小字号 */
		}
		
		.faq-question::before {
			font-size: 16px; /* 编号缩小2px */
			left: -35px; /* 调整编号位置 */
			top: 15px;
		}
		
		.faq-question::after {
			font-size: 18px; /* 图标缩小2px */
			right: 10px;
		}
		
		.faq-answer {
			font-size: 14px; /* 16px→14px（缩小2px） */
			padding-right: 15px;
		}
		
		.faq-container {
			padding: 15px; /* 容器间距调整 */
		}
		
		.faq-item {
			padding-left: 35px; /* 调整编号区域 */
		}
	}


/* ********************************* Form  ************************************** */


/* 页面标题样式 */
.page-title {
	text-align: center;
	margin: 30px 0;
	font-size: 36px;
	color: #fff;
	font-weight: normal;
	background: none; /* 确保无背景 */
}



/* 表单专用样式 */
.form-container {
	width: 1000px;
	max-width: calc(100% - 40px); /* 两侧各留20px间距 */
	background: white;
	border-radius: 10px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	padding: 30px 80px ;
	margin: 20px auto; /* 保持自动居中 */
}

.form-group input,
.form-group select {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 16px;
	transition: border 0.3s;
	background-color: #f5f5f5; /* 新增浅灰色背景 */
}

/* 聚焦状态保持原有样式 */
.form-group input:focus,
.form-group select:focus {
	outline: none;
	border-color: #4CAF50;
	background-color: white; /* 聚焦时恢复白色背景 */
}


.form-title {
	text-align: center;
	margin: 30px 0;
	color: #333;
	font-size: 20px;
}

.form-row {
	display: flex;
	margin-bottom: 20px;
	gap: 30px;
}

.form-group {
	flex: 1;
	position: relative;
}

.form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #555;
}

.form-group label.required::after {
	content: '*';
	color: red;
	margin-left: 4px;
}

.form-group input,
.form-group select {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 16px;
	transition: border 0.3s;
}

.form-group input:focus,
.form-group select:focus {
	outline: none;
	border-color: #4CAF50;
}

.submit-btn {
	display: block;
	margin: 50px auto 0;
	padding: 12px 80px;
	background: linear-gradient(135deg, #4CAF50, #2E7D32);
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
}

.submit-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
	.form-container {
		padding: 20px;
	}

	.form-row {
		flex-direction: column;
		gap: 15px;
	}
}



/* ********************************* More ...  ************************************** */

/* *********************************  Treatment Method ************************************** */


		/* gradTitle 样式 */
		.gradTitle {
			max-width: 1400px;
			width: 100%;
			margin: 20px auto;
			padding: 20px;
			background-color: #f5f5f5; /* 浅灰色背景 */
			border-radius: 8px; /* 圆角 */
			text-align: center;
			line-height: 1.6;
		}

		.gradTitle h2 {
			font-size: 28px; /* 桌面端字号 */    
			margin: 0;
			line-height: 1.3;
			font-weight: 600;
			color: #fff;
		}
		.gradClrBlue{
			background: linear-gradient(to right, #2f7ec9, #49a2d0);
		}
		.gradClrGreen{
			background: linear-gradient(to right, #3ca970, #7bb568);
		}
		

/* 标签容器 */
.otrCntTab {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
	
	position: relative;
	margin-bottom: 20px;
}

/* 内容容器 */
.otrCntArea {
	max-width: 1400px;	
	margin: 0 auto;
	padding: 20px;
}

/* 标签滚动区域 */
.tabBox {
	overflow-x: auto;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
	margin: 0 40px; /* 给按钮留空间 */
	-webkit-overflow-scrolling: touch; /* 优化移动端滚动 */
}
.tabBox::-webkit-scrollbar {
	display: none;
}

/* 标签列表 */
.navigTabs {
	display: flex;
	gap: 10px;
	padding: 5px 0;
	width: max-content; /* 允许横向扩展 */
}

/* 单个标签 */
.navigTabs > div {
	flex-shrink: 0;
	width: 300px;
	height: 80px;
}
.navigTabs a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-decoration: none;
	color: #333;
	font-size: 14px;
	text-align: center; /* 确保文本居中 */
    padding: 5px; /* 增加内边距，避免文字紧贴边框 */
    word-break: break-word; /* 允许长单词换行 */
    white-space: normal; /* 覆盖默认的 nowrap，允许换行 */
	
}
.navigTabs a.active {
	background-color: #307fc0;
	color: white;
}

/* 滚动按钮 */
.scroBtn {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background: rgba(0,0,0,0.5);
	color: white;
	border: none;
	border-radius: 50%;
	font-size: 16px;
	cursor: pointer;
	z-index: 20;
}
.scroBtn.left {
	left: 0;
}
.scroBtn.right {
	right: 0;
}
.scroBtn.hidden {
	display: none;
}

/* 区域 */
.otrArea {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.tabBlock {
	width: 100%;
	padding: 10px;
	display: none;
	transition: box-shadow 0.3s ease;			
}
.tabBlock:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tabBlock.active {
	display: block;
}
.caseImg img {
	width: 100%;
	border-radius: 8px;
}
.caseDes {
	margin-top: 10px;
	font-size: 14px;
}


/* 确保 caseDes 在链接中不会变色或出现下划线 */
.tabBlock a {
	text-decoration: none; /* 确保链接没有下划线 */
	color: inherit; /* 确保链接颜色继承自父元素 */
}



/* 移动端适配 */
@media (max-width: 992px) {
	.gradTitle {
		width: calc(100% - 24px); /* 移动端两侧各12px */
		margin: 15px auto;
		padding: 15px;
		border-radius: 6px;
	}
	
	.gradTitle h2 {
		font-size: 16px;
		font-weight: normal;
		line-height: 1.4;
		padding: 0 5px; /* 防止文字贴边 */
	}
	
	.navigTabs > div {
		width: 160px;
	}
	
	.scroBtn {
        width: 30px;
        height: 30px;
        background: rgba(0,0,0,0.5); /* 更显眼 */
    }
    .tabBox {
        margin: 0 20px; /* 减少边距，适应小屏幕 */
    }
	
	.otrCntTab {
		
		max-width: 100%; /* 确保不超出屏幕 */
		overflow: hidden; /* 隐藏溢出的内容 */
		position: relative;
		
	}
	.scroBtn.left {
		left: 10px;
	}
	.scroBtn.right {
		right: 10px;
	}
	
}



/* ********************************* Listing ...  ************************************** */


/* Banner容器 */
.banner {
	
	max-width: 1400px;
	margin: 20px auto;
	position: relative;
	overflow: hidden;
	background: #f5f5f5; /* 图片加载前的背景色 */
}

/* 图片样式 */
.banner img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	border-radius: 10px;
}

/* 文字内容容器 */
.banner_box {
	position: absolute;
	top: 80px;
	left: 50px;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	max-width: 800px; /* 限制文字区域宽度 */
}

/* 标题样式 */
.banner_box .tit {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 15px;
	line-height: 1.2;
}

/* 描述样式 */
.banner_box .des {
	font-size: 26px;
	margin-bottom: 25px;
	line-height: 1.5;
}

/* 按钮样式 */
.banner_box .btn a {
	display: inline-block;
	margin-top: 25px;
	padding: 12px 30px;
	background: rgba(255,255,255,0.9);
	color: #333;
	text-decoration: none;
	font-weight: bold;
	border-radius: 4px;
	transition: all 0.3s ease;
	text-shadow:none;
}

.banner_box .btn a:hover {
	background: #fff;
}



/* 响应式调整 */
@media (max-width: 992px) {
	.banner_box {
		top: 20px;
		left: 20px;
		right: 10px;
		max-width: none;
	}
	
	.banner_box .tit {
		font-size: 12px;
		margin-bottom: 2px;
	}
	
	.banner_box .des {
		font-size: 12px;
		margin-bottom: 2px;
	}
	
	.banner_box .btn a {
		font-size: 10px;
		margin-top: 5px;
		padding: 6px 12px;
		font-weight: normal;
	}
}



/* ********************************* 通用文章 ...  ************************************** */

/* 外层容器样式 */
.gnrEssay {
  max-width: 1400px;    /* 最大宽度1400px */
  margin: 0 auto;       /* 水平居中 */
  padding: 10px;        /* 可选内边距 */
  box-sizing: border-box; /* 包含padding在宽度内 */
  position: relative;   /* 为标题定位提供参照 */
}

/* 标题右对齐样式 */
.gnrSubTitle {
  text-align: right;    /* 文字右对齐 */
  padding-right: 10px;  /* 右边距 */
  
   display: block;          /* 确保独占一行 */
 
  padding-bottom: 10px;   /* 底部内边距 */
  margin-bottom: 15px;    /* 与内容间距 */
  border-bottom: 1px solid #F2F3F4;  /* 浅灰色1px底纹 */
  font-size: 1.2em;       /* 适当放大字体 */
  color: #333;            /* 深灰色文字 */
  
}

/* 文章内容容器样式 */
.gnrPara {
  padding: 10px;        /* 内边距10px */
  line-height: 1.6;     /* 文字行距1.6 */
}

/* 图片样式 - 靠左对齐 */
.gnrPara img {
  max-width: 100%;      /* 图片最大宽度不超过容器 */
  height: auto;         /* 高度自适应 */
  display: block;       /* 避免图片下方出现空隙 */
  margin: 10px 0;       /* 图片上下边距 */
  float: left;          /* 图片左浮动 */
  clear: left;          /* 确保每张图片从新行开始 */
}

/* 段落样式 */
.gnrPara p {
  margin: 0 0 1em 0;    /* 段落间距 */
  overflow: hidden;     /* 清除浮动影响 */
}

/* 清除浮动（可选，如果需要） */
.gnrPara:after {
  content: "";
  display: table;
  clear: both;
}

/* ********************************* More ...  ************************************** */



/* ********************************* More ...  ************************************** */



/* ********************************* More ...  ************************************** */



/* ********************************* 覆盖样式  ************************************** */

/* 电脑端 高度间隔 */
@media (min-width: 992px) {	
	.gnrSimple, .gnrBGImgTxt, .gnrBGTxtImg, .gnrBG3Mix, .gnrRXMix, .gnrIMG2, .gnrIMG3H, .gnrIMG4S  {
        margin: 30px auto;
    }
}

/* 移动端 高度间隔 */
@media (max-width: 992px) {	
	.gnrSimple, .gnrBGImgTxt, .gnrBGTxtImg, .gnrBG3Mix, .gnrRXMix, .gnrIMG2, .gnrIMG3H, .gnrIMG4S  {
        margin: 15px 12px;
    }
}



/* ********************************* 补充  ************************************** */

/* 确保 infoRow 使用 Flex 布局，子元素横向排列 */
.infoRow {
    display: flex;          /* 启用 Flexbox */
   
    margin-bottom: 8px;    /* 行间距 */
}

/* 固定 infoLabel 宽度 */
.infoLabel {
    width: 280px;          /* 固定宽度 */
    min-width: 220px;      /* 防止被压缩 */
    font-weight: bold;     /* 加粗标签 */
    white-space: nowrap;   /* 防止换行 */
}

/* infoValue 自动填充剩余空间 */
.infoValue {
    flex: 1;               /* 占据剩余宽度 */
}

@media (max-width: 992px) {	
	.infoLabel {
		width: 200px;          /* 固定宽度 */
	}
}


.responsive-spacer {
  /* 移动端默认高度 */
  height: var(--mobile-height, 10px);
  
  /* 电脑端覆盖高度 */
  @media (min-width: 992px) {
    height: var(--desktop-height, 80px);
  }
}