@charset "utf-8";

/* 基础重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 扩展字体栈 */
	font-size: 100%;
}
:target {
    scroll-margin-top: 100px; /* 根据导航栏实际高度调整 */
}
html {
  font-size: 100%; /* 新增：锁定基准字号为16px */
	  /* 新增：防止浏览器自动调整文字大小 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-size: 1rem; /* 新增：明确基础字号 */
  line-height: 1.6; /* 移动至此统一管理 */
	  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* 响应式容器 */
.container {
	width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
img {
	max-width: 100%;
	height: auto;
}
.payment {
	max-width: 200px;
}
/* 顶部横幅 */
.header-banner { /* 新增选择器 */
  width: 100%;
  display: block;
}
.header-banner img {
  width: 100%;
  max-height: 200px;    /* 最大高度限制 */
  display: block;
  object-fit: fill;     /* 允许变形填充容器 */
}

/* 导航栏 */
.navbar {
  background: #2c3e50;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}
.nav-item {
  position: relative;
}
.nav-link {
  color: #ecf0f1;
  padding: 1rem 1.5rem;
  text-decoration: none;
  display: block;
  transition: background 0.3s;
}
.nav-link:hover {
  background: #34495e;
}

/* 通用内容区域 */
.main-content {
    font-size: 1rem; /* 新增：显式声明 */
    padding: 2rem 15px;
    line-height: 1.6;
    color: #333;
    flex-grow: 1;
    text-align: justify;
	overflow-wrap: break-word;
}
.text-left {
        text-align:left;
}
/* 专家介绍模块 */
.speaker-card {
  display: flex;
  gap: 1rem;
  margin-bottom: 0rem;
  background: #f8f9fa;
  padding: 0.5rem;
  border-radius: 8px;
	align-items: center;
	flex-wrap: wrap;
	
}
.speaker-photo {
  flex: 0 0 100px;
	/* 新增以下属性强制垂直居中 */
  display: flex;
	
}
.speaker-photo img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}	
.speaker-photo-big {
  flex: 0 0 150px;
	/* 新增以下属性强制垂直居中 */
  display: flex;
	}
.speaker-photo-big img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}	
.speaker-info {
  flex: 1;
	padding-right: 0.5rem;
	min-width: 250px;     /* 设置最小宽度保证可读性 */
}
.qrcode {
  flex: 0 1 200px;
	/* 新增以下属性强制垂直居中 */

  display: flex;

	
}
.qrcode img {
  width: 100%;
  height: auto;
  border-radius: 4px;
/* 文字换行处理 */
	}

.speaker-info h3,
.speaker-info p {
  overflow-wrap: break-word;  /* 优先在单词间换行 */
  word-break: break-word;     /* 允许长单词换行 */
  hyphens: auto;              /* 自动添加连字符(需lang属性支持) */
  margin-bottom: 0.5rem;      /* 增加段落间距 */
	text-align: left;
}
/* 消除信息区域最后一个段落的底部外边距 */
.speaker-info p:last-child {
  margin-bottom: 0;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .nav-link {
    padding: 0.8rem 1rem;
    font-size: 0.9em;
  }
  
  .speaker-card {
    flex-direction: column;
  }
  .speaker-photo {
    flex: none;
    max-width: 150px;
    margin: 0 auto;
  }
	.speaker-photo-big {
    flex: none;
    max-width: 150px;
    margin: 0 auto;
  }
	.qrcode{
    max-width: 150px;        /* 限制图片最大宽度 */
   flex: 0 0 auto;       /* 覆盖原有flex设定 */
		margin: 0 auto;          /* 居中显示 */
  }
	.speaker-info {
    padding-right: 0; /* 小屏幕移除右侧内边距 */
    padding-left: 1rem; /* 添加左侧内边距保持平衡 */
    padding-bottom: 1rem;
  }
}
/* 响应式双列布局 */
@media (min-width: 768px) {
  .main-content-speaker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.5rem 15px;
  }
  .speaker-card {
    margin-bottom: 0;        /* 网格布局中不需要外边距 */
	 
  }
}
@media (max-width: 480px) {
 .header-banner img {
	 content: url("images/banner-narrow.jpg");
    height: auto; /* 移除固定高度限制 */
    max-height: 180px; /* 可选：限制最大高度但保持比例 */
  }

    /* 增强移动端容器内边距 */
  .container {
    padding: 0 15px;
  }
  
  /* 正文内容额外增加安全边距 */
  .main-content {
    padding-left: 15px;
    padding-right: 15px;
  }
  .nav-list {
    justify-content:space-between;
    overflow-x: auto;
    white-space: nowrap;
	row-gap: 0 !important;       /* 消除行间隙 */
    align-content: center;      /* 紧凑排列 */
  }
	 .nav-link {
    padding: 0rem 1rem !important; /* 减小上下内边距 */
  }
  .nav-item {
    margin: 2px 0 !important;   /* 缩小项间距 */
  }
	.speaker-card {
    flex-direction: column;  /* 纵向排列元素 */
    gap: 0.2rem;
		
	margin-bottom: -0.5rem;     /* 补偿可能的外边距 */
  }
	  .speaker-info {
    padding: 0.2rem 0.5rem !important; /* 压缩信息区域内边距 */
  }
/* 缩小文字元素间距 */
  .speaker-info h3,
  .speaker-info p {
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
	text-align: center;
  }
  .speaker-photo {
    max-width: 150px;        /* 限制图片最大宽度 */
    margin: 0 auto;          /* 居中显示 */
  }
	
}

/* 针对高分屏的适配 */
@media (-webkit-min-device-pixel-ratio: 1.25), 
       (min-resolution: 120dpi) {
  html {
    font-size: 112.5%; /* 将基准字号从16px提升到18px */
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5), 
       (min-resolution: 144dpi) {
  html {
    font-size: 125%; /* 将基准字号提升到20px */
  }
}

.footer {
    text-align: center;
	margin-top: auto; 
}
.important {
    color: #FF0000;
}
.highlight-blue {
	color:deepskyblue;
	font-weight: bold;
}
.img-center {
	text-align: center;
}

/* 新增表单容器样式 */
.form-container {
  width: 100%;
  max-width: 1200px; /* 控制最大宽度 */
  margin: 0 auto;
  min-height: 500px; /* 保证最小高度 */
}

.responsive-form {
  width: 100%;
  height: 50vh; /* 根据实际内容高度调整 */
  min-height: 500px; /* 桌面端最小高度 */
  border: none;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .form-container {
    min-height: 800px; /* 增加移动端高度 */
    padding: 0 10px;
  }
  
  .responsive-form {
    height: 180vh; /* 增加移动端显示高度 */
    min-height: 800px;
  }
}

@media (max-width: 480px) {
  .responsive-form {
    height: 200vh; /* 小屏幕手机适配 */
    min-height: 900px;
  }
}