/*=============================================
=          页面公共部分样式 (Public)           =
=============================================*/

/* 自定义滚动条：美化浏览器默认滚动条 */
::-webkit-scrollbar {
	width: 8px;
	/* 滚动条宽度 */
}

/* 滚动条轨道：滚动条背景区域 */
::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

/* 滚动条滑块：可拖动的部分，使用品牌红色渐变 */
::-webkit-scrollbar-thumb {
	background: linear-gradient(to bottom, #d2242a, #b51e23);
	border-radius: 4px;
}

/* 滚动条滑块悬停效果：鼠标悬停时颜色加深 */
::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to bottom, #b51e23, #991b1b);
}

/* 页面包装容器 */
.wrapper {
	width: 100%;
	margin: 0 auto;
}

/* 主容器：限制最大宽度并居中显示，用于整个页面的内容包装 */
.public-container {
	max-width: 1200px;
	/* 最大宽度限制，在大屏幕上不会过宽 */
	width: 100%;
	/* 小屏幕上100%宽度 */
	margin: 0 auto;
	/* 水平居中 */
	padding: 0 15px;
	/* 左右内边距，避免内容贴边 */
	position: relative;
	display: flex;
	justify-content: space-between;
	/* 子元素两端对齐 */
	align-items: center;
	/* 子元素垂直居中 */
	height: 100%;
	box-sizing: border-box;
	/* 内边距和边框包含在宽度内 */
}

/* 主内容容器：设置最大宽度和居中，添加内边距 */
.page-container {
	max-width: 1200px;
	/* 最大宽度限制，在大屏幕上不会过宽 */
	margin: 0 auto;
	/* 水平居中 */
	padding: 20px;
	/* 20px内边距 */
}



/*=============================================
=            页面公共顶部样式 (Top)           =
=============================================*/

/* 顶部条容器：固定在页面顶部的宣传栏 */
.publictop-wrapper {
	height: 48px;
	/* 固定高度 */
	background-color: #3d3d3d;
	/* 深灰色背景 */
	overflow: hidden;
	/* 防止内容溢出 */
}

/* 顶部宣传文本：显示公司宣传语 */
.publictop-text {
	white-space: nowrap;
	/* 禁止换行 */
	overflow: hidden;
	/* 溢出隐藏 */
	text-overflow: ellipsis;
	/* 溢出显示省略号 */
	flex: 1;
	/* 弹性布局，占满剩余空间 */
	max-width: calc(100% - 200px);
	/* 最大宽度计算，给右侧电话留空间 */
}

/* 宣传文本内容样式 */
.publictop-text p {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 48px;
	/* 行高与容器高度相同，垂直居中 */
	color: #fff;
	/* 白色文字 */
}

/* 联系方式区域：包含电话图标、号码和申请按钮 */
.publictop-tel {
	display: flex;
	align-items: center;
	white-space: nowrap;
	/* 禁止换行 */
}

/* 电话图标样式 */
.publictop-tel i {
	margin-right: 10px;
	/* 图标与文字间距 */
	color: #fff;
}

/* 电话号码样式：特殊字体，加粗显示 */
.publictop-tel span {
	font-family: Georgia;
	/* 使用Georgia字体，类似印刷体 */
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	color: #fff;
	font-weight: 700;
	/* 加粗 */
}

/* 申请试用按钮：主要行动按钮 */
.publictop-btn {
	margin-left: 20px;
	/* 与电话号码的间距 */
	padding: 0 16px;
	/* 左右内边距 */
	width: auto;
	min-width: 80px;
	/* 最小宽度，避免按钮过窄 */
	height: 32px;
	/* 固定高度 */
	border: none;
	border-radius: 5px;
	/* 圆角 */
	background: linear-gradient(to right, #d2242a, #d2242a);
	/* 红色渐变背景 */
	background-size: 200% auto;
	/* 背景大小，用于悬停动画 */
	box-shadow: 0 2px 5px rgba(210, 36, 42, 0.3);
	/* 轻微阴影 */
	color: white;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	transition: all 0.3s ease;
	/* 所有属性过渡动画 */
}

/* 按钮悬停效果：背景渐变移动，阴影加深，轻微上移 */
.publictop-btn:hover {
	background-position: right center;
	/* 背景位置变化，产生动画效果 */
	background-image: linear-gradient(to right, #d2242a, #b91c1c);
	/* 颜色加深 */
	box-shadow: 0 4px 8px rgba(210, 36, 42, 0.4);
	/* 阴影加深 */
	transform: translateY(-1px);
	/* 轻微上移 */
}

/* 按钮点击效果：颜色更深，阴影减小，轻微下移 */
.publictop-btn:active {
	background-color: #991b1b;
	box-shadow: 0 1px 3px rgba(210, 36, 42, 0.3);
	transform: translateY(1px);
}

/* 按钮禁用状态：灰色背景，无交互效果 */
.publictop-btn:disabled {
	background-color: #fecaca;
	color: #999;
	cursor: not-allowed;
	/* 禁用光标 */
	opacity: 0.7;
	box-shadow: none;
	transform: none;
}

/* ===== 弹窗样式 (Modal) ===== */

/* 弹窗遮罩层：半透明黑色背景，覆盖整个屏幕 */
.publictop-modal {
	display: none;
	/* 默认隐藏 */
	position: fixed;
	/* 固定定位，不随滚动移动 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	/* 半透明黑色 */
	z-index: 10000;
	/* 高z-index，确保在最上层 */
	justify-content: center;
	/* 水平居中 */
	align-items: center;
	/* 垂直居中 */
	animation: publictop-fadeIn 0.3s ease;
	/* 淡入动画 */
	padding: 15px;
	/* 内边距，避免在小屏幕上贴边 */
}

/* 弹窗内容区域：白色背景，圆角，阴影 */
.publictop-modal-content {
	background: white;
	border-radius: 10px;
	/* 圆角 */
	width: 90%;
	/* 相对宽度，在小屏幕上不会太宽 */
	max-width: 550px;
	/* 最大宽度限制 */
	max-height: 90vh;
	/* 最大高度限制，避免过高 */
	overflow-y: auto;
	/* 垂直滚动，内容过多时可滚动 */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	/* 阴影效果，增强层次感 */
	animation: publictop-slideIn 0.3s ease;
	/* 滑入动画 */
	position: relative;
	z-index: 10001;
	/* 比遮罩层更高 */
}

/* 弹窗头部：渐变色背景，包含标题和关闭按钮 */
.publictop-modal-header {
	background: linear-gradient(135deg, #d2242a 0%, #b91c1c 50%, #991b1b 100%);
	/* 红色渐变 */
	color: white;
	padding: 35px 20px 20px;
	/* 上边距较大，为标题留出空间 */
	text-align: center;
	position: relative;
	border-radius: 10px 10px 0 0;
	/* 只有上边圆角 */
}

/* 弹窗标题样式 */
.publictop-modal-header h2 {
	font-size: 24px;
	margin: 0 0 8px 0;
	font-weight: 600;
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
	/* 中文字体优化 */
}

/* 弹窗副标题：辅助说明文字 */
.publictop-modal-subtitle {
	font-size: 14px;
	margin: 0;
	opacity: 0.9;
	/* 轻微透明 */
	font-weight: 400;
	line-height: 1.4;
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 弹窗关闭按钮：位于右上角 */
.publictop-close-btn {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 24px;
	cursor: pointer;
	color: white;
	background: none;
	border: none;
	transition: transform 0.2s;
	/* 缩放动画 */
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* 圆形按钮 */
}

/* 关闭按钮悬停效果：轻微放大，添加背景 */
.publictop-close-btn:hover {
	transform: scale(1.2);
	/* 放大1.2倍 */
	background-color: rgba(255, 255, 255, 0.1);
	/* 半透明白色背景 */
}

/* 弹窗主体内容区域：表单容器 */
.publictop-modal-body {
	padding: 30px;
	/* 内边距，使内容不贴边 */
}

/* ===== 表单基础样式 (Form) ===== */

/* 表单组容器：每个表单字段的包装器 */
.publictop-form-group {
	margin-bottom: 20px;
	/* 表单组之间的间距 */
	text-align: left;
	/* 文本左对齐 */
}

/* 表单标签：字段名称 */
.publictop-form-group label {
	display: block;
	/* 块级显示，独占一行 */
	margin-bottom: 8px;
	/* 标签与输入框的间距 */
	font-weight: 600;
	/* 加粗 */
	color: #2d3748;
	/* 深灰色文字 */
	font-size: 15px;
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 必填字段标识：红色星号 */
.publictop-required::after {
	content: " *";
	/* 添加星号 */
	color: #d2242a;
	/* 品牌红色 */
}

/* 可选字段标识：灰色提示文字 */
.publictop-optional::after {
	content: " (可选)";
	color: #888;
	font-weight: normal;
}

/* 输入框基础样式：统一所有输入框、选择框、文本域的外观 */
.publictop-form-group input,
.publictop-form-group select,
.publictop-form-group textarea {
	width: 100%;
	/* 占满父容器宽度 */
	padding: 12px 15px;
	/* 内边距，使文字不贴边 */
	border: 2px solid #e1e5e9;
	/* 边框，比默认粗一些 */
	border-radius: 8px;
	/* 圆角 */
	font-size: 16px;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	/* 自定义缓动函数，更自然的动画 */
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
	background-color: #fff;
	color: #333;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	/* 轻微阴影，增强层次感 */
}

/* 占位符文本样式：灰色提示文字 */
.publictop-form-group input::placeholder,
.publictop-form-group textarea::placeholder {
	color: #a0aec0;
	/* 浅灰色 */
	font-size: 14px;
	font-weight: 400;
}

/* 输入框聚焦状态：用户点击或Tab键聚焦时的样式 */
.publictop-form-group input:focus,
.publictop-form-group select:focus,
.publictop-form-group textarea:focus {
	border-color: #d2242a;
	/* 品牌红色边框 */
	outline: none;
	/* 移除默认轮廓线 */
	box-shadow: 0 0 0 3px rgba(210, 36, 42, 0.15);
	/* 红色发光效果 */
	transform: translateY(-1px);
	/* 轻微上移，提升交互感 */
}

/* ===== 表单验证状态样式 ===== */

/* 错误状态：用户输入无效时的视觉反馈 */
.publictop-form-group.error input,
.publictop-form-group.error select,
.publictop-form-group.error textarea {
	border-color: #e53e3e;
	/* 红色边框 */
	background-color: #fff5f5;
	/* 浅红色背景 */
	box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
	/* 红色发光 */
	color: #c53030;
	/* 深红色文字 */
}

/* 成功状态：用户输入有效时的视觉反馈 */
.publictop-form-group.success input,
.publictop-form-group.success select,
.publictop-form-group.success textarea {
	border-color: #38a169;
	/* 绿色边框 */
	background-color: #f0fff4;
	/* 浅绿色背景 */
	box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.1);
	/* 绿色发光 */
	color: #276749;
	/* 深绿色文字 */
}

/* 错误提示消息：显示具体的错误信息 */
.publictop-error-msg {
	color: #e53e3e;
	/* 红色文字 */
	font-size: 13px;
	/* 较小字号 */
	margin-top: 6px;
	/* 与输入框的间距 */
	display: none;
	/* 默认隐藏 */
	font-weight: 500;
	padding-left: 4px;
	/* 左内边距，与输入框对齐 */
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 成功提示消息：显示验证成功信息 */
.publictop-success-msg {
	color: #38a169;
	/* 绿色文字 */
	font-size: 13px;
	margin-top: 6px;
	display: none;
	/* 默认隐藏 */
	font-weight: 500;
	padding-left: 4px;
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 显示错误消息：当表单组有error类时显示 */
.publictop-form-group.error .publictop-error-msg {
	display: block;
}

/* 显示成功消息：当表单组有success类时显示 */
.publictop-form-group.success .publictop-success-msg {
	display: block;
}

/* ===== 表单布局样式 ===== */

/* 表单行布局：将多个表单字段放在一行显示 */
.publictop-form-row {
	display: flex;
	/* 弹性布局 */
	gap: 15px;
	/* 子元素之间的间距 */
}

/* 行内表单组：等分父容器宽度 */
.publictop-form-row .publictop-form-group {
	flex: 1;
	/* 等分剩余空间 */
}

/* 全宽表单行：某些字段需要独占一行 */
.publictop-full-row .publictop-form-group {
	width: 100%;
}

/* 表单提示文本：辅助说明文字 */
.publictop-hint {
	font-size: 14px;
	color: #666;
	/* 灰色文字 */
	margin-top: 5px;
	/* 与输入框的间距 */
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* ===== 用户数量输入区域 ===== */

/* 用户数量容器：输入框和单位文本的组合 */
.publictop-user-count {
	display: flex;
	align-items: center;
	/* 垂直居中 */
	gap: 10px;
	/* 输入框和单位的间距 */
}

/* 用户数量输入框：右侧留出空间给单位文本 */
.publictop-user-count input {
	flex: 1;
	/* 占满剩余空间 */
	padding-right: 20px;
	/* 右侧内边距，避免文字与单位重叠 */
}

/* 用户数量单位文本："个邮箱账号" */
.publictop-user-count span {
	white-space: nowrap;
	/* 禁止换行 */
	color: #718096;
	/* 灰色文字 */
	font-size: 14px;
	font-weight: 500;
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
	min-width: 80px;
	/* 最小宽度，避免单位文本换行 */
}

/* ===== 验证码区域样式 ===== */

/* 验证码容器：输入框、图片和刷新按钮的组合 */
.publictop-captcha-group {
	display: flex;
	align-items: stretch;
	/* 子元素等高 */
	gap: 12px;
	/* 子元素之间的间距 */
}

/* 验证码输入框：固定宽度，特殊字体样式 */
.publictop-captcha-input {
	flex: 0 0 180px;
	/* 固定宽度，不伸缩 */
	width: 180px;
	padding: 12px 15px;
	transition: all 0.3s ease;
	font-family: monospace, "Microsoft YaHei", sans-serif;
	/* 等宽字体 */
	letter-spacing: 2px;
	/* 字母间距，便于阅读 */
	font-weight: 600;
	text-transform: uppercase;
	/* 自动转大写 */
}

/* 验证码图片：点击可刷新 */
.publictop-captcha-img {
	height: 50px;
	/* 固定高度 */
	flex: 0 0 180px;
	/* 固定宽度，与输入框对齐 */
	border-radius: 8px;
	border: 2px solid #e1e5e9;
	cursor: pointer;
	/* 手型光标，提示可点击 */
	transition: all 0.3s ease;
	background-color: #f8fafc;
	/* 浅灰色背景 */
	object-fit: cover;
	/* 图片填充方式，保持比例 */
}

/* 验证码图片悬停效果：透明度变化和边框颜色变化 */
.publictop-captcha-img:hover {
	opacity: 0.9;
	/* 轻微透明 */
	border-color: #d2242a;
	/* 红色边框 */
}

/* 刷新验证码按钮：图标按钮 */
.publictop-refresh-captcha {
	background: #f8fafc;
	border: 2px solid #e1e5e9;
	border-radius: 8px;
	padding: 10px 15px;
	cursor: pointer;
	color: #718096;
	/* 灰色图标 */
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	/* 最小宽度 */
}

/* 刷新按钮悬停效果：背景色和边框颜色变化 */
.publictop-refresh-captcha:hover {
	background: #edf2f7;
	/* 背景色加深 */
	border-color: #d2242a;
	/* 红色边框 */
	color: #d2242a;
	/* 红色图标 */
}

/* ===== 提交按钮样式 ===== */

/* 表单提交按钮：主要行动按钮，位于表单底部 */
.publictop-submit-btn {
	width: 100%;
	/* 占满父容器宽度 */
	padding: 16px;
	/* 较大的内边距，使按钮更醒目 */
	background: linear-gradient(to right, #d2242a, #b91c1c);
	/* 红色渐变 */
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 18px;
	/* 较大字号 */
	font-weight: 600;
	/* 加粗 */
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 15px;
	/* 与上方内容的间距 */
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 15px rgba(210, 36, 42, 0.3);
	/* 红色阴影 */
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 提交按钮悬停效果：渐变颜色变化，阴影加深，轻微上移 */
.publictop-submit-btn:hover {
	background: linear-gradient(to right, #b91c1c, #991b1b);
	/* 颜色加深 */
	box-shadow: 0 6px 20px rgba(210, 36, 42, 0.4);
	/* 阴影加深 */
	transform: translateY(-2px);
	/* 上移2像素 */
}

/* 提交按钮激活状态（点击时）：恢复原位，阴影减小 */
.publictop-submit-btn:active {
	transform: translateY(0);
	/* 恢复原位 */
	box-shadow: 0 2px 10px rgba(210, 36, 42, 0.3);
	/* 阴影减小 */
}

/* 提交按钮禁用状态：提交过程中或表单无效时 */
.publictop-submit-btn:disabled {
	background: #cccccc;
	/* 灰色背景 */
	color: #666666;
	/* 灰色文字 */
	cursor: not-allowed;
	/* 禁用光标 */
	transform: none;
	/* 无变换效果 */
	box-shadow: none;
	/* 无阴影 */
}

/* 加载动画：提交过程中显示旋转动画 */
.publictop-loading {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	/* 半透明白色边框 */
	border-radius: 50%;
	/* 圆形 */
	border-top-color: #fff;
	/* 顶部边框为白色，产生旋转效果 */
	animation: publictop-spin 1s ease-in-out infinite;
	/* 无限旋转动画 */
	margin-right: 10px;
	/* 与文字的间距 */
}

/* 旋转动画关键帧：从0度旋转到360度 */
@keyframes publictop-spin {
	to {
		transform: rotate(360deg);
		/* 360度旋转 */
	}
}

/* ===== 成功提示框样式 ===== */

/* 提交成功提示框：表单提交成功后显示 */
.publictop-success-box {
	display: none;
	/* 默认隐藏 */
	text-align: center;
	/* 文本居中 */
	padding: 30px;
	/* 内边距 */
}

/* 成功图标：绿色对勾图标 */
.publictop-success-box i {
	font-size: 50px;
	/* 大图标 */
	color: #4CAF50;
	/* 绿色 */
	margin-bottom: 20px;
	/* 与下方内容的间距 */
}

/* 成功标题 */
.publictop-success-box h3 {
	color: #4CAF50;
	/* 绿色文字 */
	margin-bottom: 15px;
	/* 与下方内容的间距 */
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 成功提示文本 */
.publictop-success-box p {
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
	margin-bottom: 10px;
	/* 段落间距 */
}

/* ===== PbootCMS表单令牌样式 ===== */

/* 隐藏表单令牌：PbootCMS需要但不需要显示的表单安全令牌 */
.publictop-form-token {
	display: none !important;
	/* 强制隐藏 */
}

/* ===== 弹窗动画 ===== */

/* 淡入动画：弹窗遮罩层的显示效果 */
@keyframes publictop-fadeIn {
	from {
		opacity: 0;
	}

	/* 开始：完全透明 */
	to {
		opacity: 1;
	}

	/* 结束：完全不透明 */
}

/* 从上方滑入动画：弹窗内容的显示效果 */
@keyframes publictop-slideIn {
	from {
		transform: translateY(-50px);
		/* 开始：上方50像素位置 */
		opacity: 0;
		/* 透明 */
	}

	to {
		transform: translateY(0);
		/* 结束：原始位置 */
		opacity: 1;
		/* 不透明 */
	}
}

/* ===== 响应式设计 ===== */

/* 平板及以下设备样式：屏幕宽度小于768px时生效 */
@media (max-width: 768px) {

	/* 移动端隐藏试用按钮：在小屏幕上节省空间 */
	.publictop-btn {
		display: none !important;
		/* 强制隐藏 */
	}

	/* 移动端调整顶部文本大小：更小的字号 */
	.publictop-text p {
		font-size: 12px;
	}

	/* 移动端调整电话号码大小 */
	.publictop-tel span {
		font-size: 14px;
	}

	/* 移动端调整容器内边距：更小的内边距 */
	.publictop-container {
		padding: 0 10px;
	}

	/* 移动端调整文本区域最大宽度：给电话留更多空间 */
	.publictop-text {
		max-width: calc(100% - 120px);
	}

	/* 移动端调整弹窗内容宽度：更宽的弹窗，充分利用屏幕空间 */
	.publictop-modal-content {
		width: 95%;
		margin: 0 auto;
	}

	/* 移动端调整弹窗主体内边距：较小的内边距 */
	.publictop-modal-body {
		padding: 20px;
	}

	/* 移动端表单行改为垂直布局：小屏幕上一列显示更合适 */
	.publictop-form-row {
		flex-direction: column;
		/* 垂直排列 */
		gap: 0;
		/* 无间距，由表单组的margin-bottom控制间距 */
	}

	/* 移动端调整顶部条高度：更矮的顶部条 */
	.publictop-bar-wrapper {
		height: 44px;
	}

	/* 移动端调整顶部文本行高：与高度匹配 */
	.publictop-text p {
		line-height: 44px;
	}

	/* 移动端弹窗优化：从顶部开始显示，避免键盘遮挡 */
	.publictop-modal {
		padding: 10px;
		align-items: flex-start;
		/* 从顶部开始对齐 */
		padding-top: 30px;
		/* 顶部内边距 */
	}

	/* 移动端调整弹窗内容最大高度：避免弹窗过高 */
	.publictop-modal-content {
		max-height: 85vh;
	}

	/* 移动端调整弹窗头部内边距：较小的内边距 */
	.publictop-modal-header {
		padding: 30px 15px 15px;
	}

	/* 移动端调整弹窗标题大小：较小的字号 */
	.publictop-modal-header h2 {
		font-size: 20px;
	}

	/* 移动端调整弹窗副标题大小 */
	.publictop-modal-subtitle {
		font-size: 13px;
	}

	/* 移动端调整关闭按钮位置和大小：更小，位置更合适 */
	.publictop-close-btn {
		top: 10px;
		right: 15px;
		width: 25px;
		height: 25px;
		font-size: 20px;
	}

	/* 移动端调整提交按钮样式：较小的内边距和字号 */
	.publictop-submit-btn {
		padding: 14px;
		font-size: 16px;
	}

	/* 移动端输入框样式优化：较大的内边距便于触摸操作 */
	.publictop-form-group input,
	.publictop-form-group select,
	.publictop-form-group textarea {
		padding: 14px 12px;
		font-size: 16px;
		/* 保持较大字号便于阅读 */
	}

	/* 移动端验证码区域布局优化：垂直排列 */
	.publictop-captcha-group {
		flex-direction: column;
		/* 垂直排列 */
		align-items: stretch;
		/* 拉伸子元素宽度 */
		gap: 10px;
	}

	/* 移动端验证码输入框和图片宽度优化：占满宽度 */
	.publictop-captcha-input,
	.publictop-captcha-img {
		flex: 1;
		/* 占满剩余空间 */
		width: 100%;
		/* 100%宽度 */
	}

	/* 移动端验证码输入框调整：取消固定宽度 */
	.publictop-captcha-input {
		flex: none;
		/* 取消固定伸缩 */
		width: 100%;
		padding: 14px 12px;
	}

	/* 移动端验证码图片调整：占满宽度，较高便于点击 */
	.publictop-captcha-img {
		flex: none;
		width: 100%;
		height: 55px;
		/* 稍高的高度，便于触摸点击 */
	}

	/* 移动端刷新按钮调整：占满宽度 */
	.publictop-refresh-captcha {
		width: 100%;
		padding: 12px;
	}

	/* 移动端用户数量区域优化：垂直排列 */
	.publictop-user-count {
		flex-direction: column;
		/* 垂直排列 */
		align-items: stretch;
		/* 拉伸子元素宽度 */
		gap: 8px;
	}

	/* 移动端用户数量单位文本优化：右对齐 */
	.publictop-user-count span {
		align-self: flex-end;
		/* 右对齐 */
		font-size: 13px;
		/* 较小字号 */
		min-width: auto;
		/* 取消最小宽度限制 */
	}

	/* 移动端标签字体优化：较大字号便于阅读 */
	.publictop-form-group label {
		font-size: 16px;
		margin-bottom: 10px;
		/* 较大的间距 */
	}
}

/* 小屏幕手机样式：屏幕宽度小于375px时生效 */
@media (max-width: 375px) {

	/* 小屏幕调整顶部文本大小：更小的字号 */
	.publictop-text p {
		font-size: 11px;
	}

	/* 小屏幕调整电话号码大小 */
	.publictop-tel span {
		font-size: 13px;
	}

	/* 小屏幕调整弹窗标题大小 */
	.publictop-modal-header h2 {
		font-size: 18px;
	}

	/* 小屏幕调整弹窗副标题大小 */
	.publictop-modal-subtitle {
		font-size: 12px;
	}

	/* 小屏幕调整表单元素大小和内边距：较小的内边距和字号 */
	.publictop-form-group input,
	.publictop-form-group select,
	.publictop-form-group textarea {
		font-size: 14px;
		padding: 10px 12px;
	}

	/* 小屏幕调整弹窗主体内边距：较小的内边距 */
	.publictop-modal-body {
		padding: 15px;
	}
}



/*=============================================
=           页面公共头部样式 (Header)          =
=============================================*/

/* ===== 头部导航栏样式 ===== */

/* 头部导航栏容器：白色背景，底部阴影，100px高度 */
.publicnav-header {
	width: 100%;
	height: 100px;
	/* 初始高度 */
	padding: 0;
	border: none;
	background-color: #fff;
	/* 白色背景 */
	box-shadow: 0 2px 5px rgba(16, 16, 16, 0.08);
	/* 底部阴影，轻微浮起效果 */
	transition: all 0.3s ease;
	/* 所有属性0.3秒缓动过渡 */
	position: relative;
	z-index: 1000;
	/* 较高的z-index，确保导航栏位于其他内容之上 */
}

/* 固定导航栏样式：当页面滚动时固定到顶部 */
.publicnav-header.publicnav-fixed {
	position: fixed;
	/* 固定定位，不随页面滚动 */
	top: 0;
	left: 0;
	z-index: 9999;
	/* 更高的z-index，确保在最顶层 */
	animation: publicnav-slideDown 0.3s ease;
	/* 下滑动画 */
	height: 80px;
	/* 固定后高度变小，节省空间 */
}

/* 固定导航栏下滑动画关键帧 */
@keyframes publicnav-slideDown {
	from {
		transform: translateY(-100%);
		/* 从上方滑入 */
	}

	to {
		transform: translateY(0);
		/* 滑到原始位置 */
	}
}

/* ===== 网站LOGO样式 ===== */

/* Logo容器：左浮动，垂直居中 */
.publicnav-logo {
	float: left;
	height: 100%;
	display: flex;
	align-items: center;
	/* 垂直居中 */
}

/* Logo链接样式：移除下划线 */
.publicnav-logo a {
	display: block;
	color: #F23313;
	/* 红色文字 */
	text-decoration: none;
	/* 移除下划线 */
}

/* Logo图片样式 */
.publicnav-logo img {
	display: block;
	height: 53px;
	/* 初始高度 */
	border: none;
	transition: height 0.3s ease;
	/* 高度变化过渡动画 */
}

/* 固定导航栏时Logo变小：节省空间，更紧凑 */
.publicnav-header.publicnav-fixed .publicnav-logo img {
	height: 45px;
	/* 变小后的高度 */
}

/* ===== 导航菜单样式 ===== */

/* 导航菜单容器：右浮动，与Logo水平排列 */
.publicnav-nav {
	float: right;
	margin-left: 40px;
	/* 与Logo的间距 */
	height: 100%;
}

/* 导航菜单列表：使用Flexbox水平排列 */
.publicnav-nav ul {
	display: flex;
	height: 100%;
	align-items: center;
	/* 垂直居中 */
	margin: 0;
	padding: 0;
	list-style: none;
	/* 移除默认列表样式（圆点） */
}

/* 导航菜单项：相对定位，为子元素定位做准备 */
.publicnav-nav ul li {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}

/* 导航链接基础样式 */
.publicnav-nav ul li a {
	position: relative;
	display: block;
	padding: 0 16px;
	/* 左右内边距 */
	color: #333333;
	/* 深灰色文字 */
	font-size: 1.1rem;
	/* 相对字体大小 */
	font-weight: 700;
	/* 加粗 */
	line-height: 100px;
	/* 行高等于容器高度，实现垂直居中 */
	background: none;
	text-decoration: none;
	/* 移除下划线 */
	transition: all 0.3s ease;
	/* 所有属性过渡动画 */
}

/* 固定导航栏时链接行高调整：与变小的高度匹配 */
.publicnav-header.publicnav-fixed .publicnav-nav ul li a {
	line-height: 80px;
	/* 变小后的行高 */
}

/* 导航链接底部指示器（伪元素）：悬停时显示的红色线条 */
.publicnav-nav ul li a::after {
	content: '';
	/* 伪元素必须有content属性 */
	position: absolute;
	bottom: 0;
	left: 50%;
	/* 从中心开始 */
	width: 0;
	/* 初始宽度为0 */
	height: 3px;
	/* 线条高度 */
	background: #d2242a;
	/* 品牌红色 */
	transition: all 0.3s ease;
	/* 过渡动画 */
	transform: translateX(-50%);
	/* 水平居中 */
	opacity: 0.6;
	/* 半透明 */
	border-radius: 2px 2px 0 0;
	/* 上圆角，下直角 */
}

/* 导航链接悬停时：显示底部指示器 */
.publicnav-nav ul li a:hover::after {
	width: 80%;
	/* 扩展到80%宽度 */
	opacity: 0.8;
	/* 更不透明 */
}

/* 导航链接悬停时：改变文字颜色 */
.publicnav-nav ul li a:hover {
	color: #d2242a;
	/* 品牌红色 */
}

/* 当前选中导航链接样式：表示用户当前所在页面 */
.publicnav-nav ul li a.publicnav-current {
	color: #d2242a;
	font-weight: 700;
}

/* 当前选中导航链接底部指示器样式：完全显示 */
.publicnav-nav ul li a.publicnav-current::after {
	width: 100%;
	/* 完全宽度 */
	background: #d2242a;
	opacity: 1;
	/* 完全不透明 */
	box-shadow: 0 2px 4px rgba(210, 36, 42, 0.3);
	/* 添加阴影增强效果 */
}

/* 导航链接点击效果：轻微下移模拟按钮点击 */
.publicnav-nav ul li a:active {
	transform: translateY(1px);
	/* 向下移动1像素 */
}

/* ===== 移动端导航切换按钮 ===== */

/* 移动端导航切换按钮：默认在桌面端隐藏 */
.publicnav-toggle {
	display: none;
	/* 默认隐藏 */
	width: 50px;
	height: 50px;
	border: none;
	background: transparent;
	/* 透明背景 */
	cursor: pointer;
	/* 手型光标 */
	position: relative;
	z-index: 10000;
	/* 最高的z-index，确保按钮位于最上层 */
	border-radius: 50%;
	/* 圆形按钮 */
	transition: all 0.3s ease;
	/* 过渡动画 */
}

/* 使用Font Awesome图标的样式 */
.publicnav-toggle i {
	font-size: 24px;
	/* 图标大小 */
	color: #333;
	/* 图标颜色 */
	transition: all 0.3s ease;
	/* 过渡动画 */
}

/* 激活状态下的按钮样式：菜单打开时 */
.publicnav-toggle.publicnav-active {
	background-color: #f5f5f5;
	/* 浅灰色背景 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	/* 阴影效果 */
}

/* 激活状态下的图标颜色和大小变化 */
.publicnav-toggle.publicnav-active i {
	color: #d2242a;
	/* 品牌红色 */
	transform: scale(1.1);
	/* 轻微放大 */
}

/* ===== 移动端响应式样式 ===== */

/* 平板和手机屏幕样式：屏幕宽度小于等于992px时生效 */
@media (max-width: 992px) {

	/* 移动端导航栏高度变小 */
	.publicnav-header {
		height: 80px;
	}

	/* 显示移动端切换按钮 */
	.publicnav-toggle {
		display: flex;
		/* 使用flex布局使图标居中 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	/* 移动端导航菜单：默认隐藏，点击后显示 */
	.publicnav-nav {
		display: none;
		/* 默认隐藏 */
		position: fixed;
		/* 固定定位覆盖全屏 */
		top: 0;
		right: 0;
		width: 280px;
		/* 侧边菜单宽度 */
		height: 100vh;
		/* 全屏高度 */
		margin-left: 0;
		background-color: #fff;
		/* 白色背景 */
		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
		/* 左侧阴影 */
		z-index: 9998;
		/* 较高的z-index，在按钮之下 */
		padding-top: 90px;
		/* 顶部内边距，为Logo和按钮留出空间 */
		overflow-y: auto;
		/* 允许垂直滚动，防止内容溢出 */
	}

	/* 显示移动端导航菜单 */
	.publicnav-nav.publicnav-show {
		display: block;
		/* 显示菜单 */
		animation: publicnav-slideInRight 0.3s ease;
		/* 从右侧滑入动画 */
	}

	/* 从右侧滑入动画关键帧 */
	@keyframes publicnav-slideInRight {
		from {
			transform: translateX(100%);
			/* 从右侧滑入 */
		}

		to {
			transform: translateX(0);
			/* 滑到原始位置 */
		}
	}

	/* 移动端导航菜单列表：改为垂直布局 */
	.publicnav-nav ul {
		display: block;
		/* 块级显示，垂直排列 */
		height: auto;
		/* 自动高度 */
	}

	/* 移动端导航菜单项：添加底部边框作为分割线 */
	.publicnav-nav ul li {
		float: none;
		/* 取消浮动 */
		border-bottom: 1px solid #f5f5f5;
		/* 浅灰色分割线 */
	}

	/* 移动端导航链接：调整内边距和行高 */
	.publicnav-nav ul li a {
		line-height: 56px;
		/* 合适的行高 */
		padding: 0 20px;
		/* 左右内边距 */
		font-size: 16px;
		/* 合适的字体大小 */
		border-bottom: none;
		/* 移除可能存在的底部边框 */
	}

	/* 移动端当前页面导航项高亮样式 */
	.publicnav-nav ul li a.publicnav-current {
		color: #d2242a;
		border-left: 3px solid #d2242a;
		/* 左侧红色边框高亮 */
		border-bottom: none;
		background-color: #fafafa;
		/* 浅色背景突出显示 */
	}

	/* 移动端导航链接悬停和当前页样式统一 */
	.publicnav-nav ul li a:hover,
	.publicnav-nav ul li a.publicnav-current {
		color: #d2242a;
		border-left: 3px solid #d2242a;
		border-bottom: none;
		background-color: #fafafa;
	}

	/* 移动端移除桌面端的::after效果（底部指示器） */
	.publicnav-nav ul li a::after {
		display: none;
		/* 隐藏伪元素 */
	}

	/* 移动端固定导航栏高度调整 */
	.publicnav-header.publicnav-fixed {
		height: 70px;
		/* 更小的高度 */
	}

	/* 移动端固定导航栏Logo调整 */
	.publicnav-header.publicnav-fixed .publicnav-logo img {
		height: 40px;
		/* 更小的Logo */
	}
}

/* 超小屏适配（375px以下）：针对小屏幕手机进一步优化 */
@media (max-width: 375px) {

	/* 移动端导航菜单全屏宽度 */
	.publicnav-nav {
		width: 100%;
		/* 占满全屏 */
	}

	/* 超小屏Logo调整 */
	.publicnav-logo img {
		height: 45px;
		/* 更小的Logo */
	}

	/* 超小屏切换按钮调整 */
	.publicnav-toggle {
		width: 44px;
		height: 44px;
		/* 更小的按钮 */
	}

	/* 超小屏切换按钮图标调整 */
	.publicnav-toggle i {
		font-size: 22px;
		/* 更小的图标 */
	}
}

/* 禁止滚动类：用于移动端菜单打开时防止背景内容滚动 */
.publicnav-no-scroll {
	overflow: hidden;
	/* 隐藏溢出内容，禁止滚动 */
}



/*=============================================
=           页面公共页脚样式 (Footer)          =
=============================================*/

/* 页脚包装容器：深色背景，提供视觉层次感 */
.publicfooter-wrapper {
	background: #2c3e50;
	/* 深蓝色背景 */
	color: #ecf0f1;
	/* 浅灰色文字 */
	padding: 40px 0 10px;
	/* 上边距40px，下边距10px */
	position: relative;
	overflow: hidden;
	/* 防止内容溢出 */
}

/* 页脚内容容器：使用CSS Grid布局，四列响应式设计 */
.publicfooter-container {
	max-width: 1200px;
	/* 最大宽度限制 */
	margin: 0 auto;
	/* 水平居中 */
	padding: 0 20px;
	/* 左右内边距 */
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.5fr;
	/* 四列不等宽布局 */
	gap: 40px;
	/* 列间距 */
	position: relative;
	z-index: 1;
	/* 确保在背景之上 */
}

/* ===== Logo区域样式 ===== */

/* Logo图片样式 */
.publicfooter-logo img {
	height: 60px;
	/* 固定高度 */
	margin-bottom: 10px;
	/* 与下方文字的间距 */
}

/* Logo描述文字样式 */
.publicfooter-logo p {
	margin-bottom: 20px;
	/* 与社交图标的间距 */
	line-height: 1.6;
	/* 行高，提高可读性 */
	color: #bdc3c7;
	/* 浅灰色文字 */
	max-width: 300px;
	/* 最大宽度限制 */
}

/* 高亮文字样式：用于突出显示重要信息（品牌红色） */
.publicfooter-highlight {
	color: #d2242a;
	font-weight: bold;
}

/* ===== 社交图标区域样式 ===== */

/* 社交图标容器：包装所有社交图标 */
.publicfooter-social {
	margin-top: 20px;
	/* 与上方内容的间距 */
}

/* 社交图标列表：使用flex布局水平排列 */
.publicfooter-social-icons {
	display: flex;
	gap: 10px;
	/* 图标间距 */
}

/* 单个社交图标样式：圆形按钮设计 */
.publicfooter-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/* 圆形 */
	background: rgba(255, 255, 255, 0.1);
	/* 半透明白色背景 */
	color: #fff;
	/* 白色图标 */
	font-size: 18px;
	/* 图标大小 */
	transition: all 0.3s ease;
	/* 平滑过渡效果 */
	text-decoration: none;
	/* 移除下划线 */
	position: relative;
	/* 为子元素定位做准备 */
}

/* 社交图标悬停效果：轻微上浮和阴影 */
.publicfooter-social-icon:hover {
	transform: translateY(-5px);
	/* 向上移动5px */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	/* 阴影效果 */
	color: #fff;
	/* 保持白色 */
}

/* 各平台图标悬停颜色 - 微信绿色 */
.publicfooter-social-icon.publicfooter-wechat:hover {
	background-color: #09b83e;
	/* 微信品牌绿色 */
}

/* 微博红色 */
.publicfooter-social-icon.publicfooter-weibo:hover {
	background-color: #e6162d;
	/* 微博品牌红色 */
}

/* QQ蓝色 */
.publicfooter-social-icon.publicfooter-qq:hover {
	background-color: #12b7f5;
	/* QQ品牌蓝色 */
}

/* 抖音黑色 */
.publicfooter-social-icon.publicfooter-douyin:hover {
	background-color: #000;
	/* 抖音品牌黑色 */
}

/* 知乎蓝色 */
.publicfooter-social-icon.publicfooter-zhihu:hover {
	background-color: #0084ff;
	/* 知乎品牌蓝色 */
}

/* 二维码弹窗通用样式：绝对定位在图标上方 */
.publicfooter-qrcode {
	position: absolute;
	bottom: 100%;
	/* 在图标上方 */
	left: 50%;
	transform: translateX(-50%);
	/* 水平居中 */
	background: white;
	/* 白色背景 */
	padding: 15px;
	border-radius: 8px;
	/* 圆角 */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	/* 阴影效果 */
	opacity: 0;
	/* 初始不可见 */
	visibility: hidden;
	/* 初始隐藏 */
	transition: all 0.3s ease;
	/* 平滑过渡 */
	z-index: 100;
	/* 确保在最上层 */
	width: 160px;
	/* 固定宽度 */
	text-align: center;
	/* 内容居中 */
}

/* 二维码图片样式 */
.publicfooter-qrcode img {
	width: 130px;
	height: 130px;
	margin-bottom: 8px;
	/* 与下方文字的间距 */
}

/* 二维码描述文字 */
.publicfooter-qrcode p {
	font-size: 12px;
	/* 较小字号 */
	color: #333;
	/* 深灰色文字 */
	margin: 0;
	/* 移除默认边距 */
}

/* 图标悬停时显示二维码：适用于微信、抖音、知乎 */
.publicfooter-social-icon.publicfooter-wechat:hover .publicfooter-qrcode,
.publicfooter-social-icon.publicfooter-douyin:hover .publicfooter-qrcode,
.publicfooter-social-icon.publicfooter-zhihu:hover .publicfooter-qrcode {
	opacity: 1;
	/* 显示 */
	visibility: visible;
	/* 可见 */
	bottom: calc(100% + 10px);
	/* 在图标上方10px处 */
}

/* ===== 页脚链接区域样式 ===== */

/* 链接区域标题样式 */
.publicfooter-links h4 {
	font-size: 1.3rem;
	/* 相对字体大小 */
	margin-bottom: 20px;
	/* 与下方列表的间距 */
	position: relative;
	/* 为下划线定位做准备 */
	padding-bottom: 10px;
	/* 为下划线留出空间 */
	display: inline-block;
	/* 只包裹文字 */
}

/* 链接区域标题下划线：红色装饰线 */
.publicfooter-links h4::after {
	content: '';
	/* 伪元素内容 */
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	/* 初始宽度 */
	height: 2px;
	/* 线的高度 */
	background: #d2242a;
	/* 品牌红色 */
	transition: width 0.3s;
	/* 宽度变化动画 */
}

/* 链接区域悬停时下划线扩展：动画效果 */
.publicfooter-links:hover h4::after {
	width: 100%;
	/* 扩展到100%宽度 */
}

/* 链接列表样式 */
.publicfooter-links ul {
	list-style: none;
	/* 移除默认列表样式 */
	padding: 0;
	/* 移除内边距 */
	margin: 0;
	/* 移除外边距 */
}

/* 链接列表项样式 */
.publicfooter-links li {
	margin-bottom: 12px;
	/* 列表项间距 */
	position: relative;
	/* 为链接效果做准备 */
}

/* 链接样式 */
.publicfooter-links a {
	color: #bdc3c7;
	/* 浅灰色文字 */
	text-decoration: none;
	/* 移除下划线 */
	transition: all 0.3s;
	/* 所有属性过渡 */
	display: flex;
	/* 使用flex布局 */
	align-items: center;
	/* 垂直居中 */
}

/* 链接前箭头图标：使用伪元素创建 */
.publicfooter-links a::before {
	content: '›';
	/* 右箭头字符 */
	margin-right: 8px;
	/* 与文字的间距 */
	color: #d2242a;
	/* 品牌红色 */
	transition: transform 0.3s;
	/* 移动动画 */
}

/* 链接悬停效果：文字颜色变化和左内边距 */
.publicfooter-links a:hover {
	color: #ecf0f1;
	/* 更亮的白色 */
	padding-left: 5px;
	/* 向右移动5px */
}

/* 链接悬停时箭头移动效果 */
.publicfooter-links a:hover::before {
	transform: translateX(3px);
	/* 向右移动3px */
}

/* ===== 联系信息区域样式 ===== */

/* 联系信息区域标题样式 */
.publicfooter-contact h4 {
	font-size: 1.3rem;
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 10px;
	display: inline-block;
}

/* 联系信息区域标题下划线 */
.publicfooter-contact h4::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: #d2242a;
	transition: width 0.3s;
}

/* 联系信息区域悬停时下划线扩展 */
.publicfooter-contact:hover h4::after {
	width: 100%;
}

/* 联系信息段落样式 */
.publicfooter-contact p {
	margin-bottom: 15px;
	/* 段落间距 */
	display: flex;
	/* 使用flex布局 */
	align-items: flex-start;
	/* 顶部对齐 */
	color: #bdc3c7;
	/* 浅灰色文字 */
	transition: color 0.3s;
	/* 颜色变化过渡 */
	line-height: 1.5;
	/* 行高 */
}

/* 联系信息悬停效果 */
.publicfooter-contact p:hover {
	color: #ecf0f1;
	/* 更亮的白色 */
}

/* 联系信息图标样式 */
.publicfooter-contact i {
	margin-right: 10px;
	/* 图标与文字的间距 */
	color: #fff;
	/* 白色图标 */
	width: 20px;
	/* 固定宽度 */
	text-align: center;
	/* 图标居中 */
	flex-shrink: 0;
	/* 防止图标被压缩 */
	margin-top: 2px;
	/* 微调垂直位置 */
}

/* 联系信息点击效果：可点击的联系信息 */
.publicfooter-contact-clickable {
	cursor: pointer;
	/* 手型光标 */
	transition: all 0.3s;
	/* 所有属性过渡 */
}

/* 联系信息点击悬停效果 */
.publicfooter-contact-clickable:hover {
	color: #d2242a;
	/* 品牌红色 */
}

/* ===== 页脚底部版权信息样式 ===== */

/* 页脚底部容器：顶部边框和居中 */
.publicfooter-bottom {
	max-width: 1200px;
	margin: 30px auto 0;
	/* 上边距30px，左右自动，下边距0 */
	padding: 20px;
	/* 内边距 */
	text-align: center;
	/* 文本居中 */
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	/* 半透明白色上边框 */
	font-size: 0.9rem;
	/* 较小字号 */
	color: #bdc3c7;
	/* 浅灰色文字 */
	position: relative;
	z-index: 1;
}

/* 页脚底部链接样式 */
.publicfooter-bottom a {
	color: #bdc3c7;
	/* 浅灰色文字 */
	text-decoration: none;
	/* 移除下划线 */
	transition: color 0.3s;
	/* 颜色变化过渡 */
}

/* 页脚底部链接悬停效果 */
.publicfooter-bottom a:hover {
	color: #d2242a;
	/* 品牌红色 */
}

/* 备案图标样式 */
.publicfooter-icon-beian {
	width: 16px;
	/* 固定宽度 */
	height: 16px;
	/* 固定高度 */
	margin-right: 5px;
	/* 与文字的间距 */
	border-radius: 2px;
	/* 轻微圆角 */
	vertical-align: middle;
	/* 垂直居中 */
	object-fit: contain;
	/* 保持图片比例 */
}

/* 页脚底部段落样式：使用flex布局居中 */
.publicfooter-bottom p {
	display: flex;
	align-items: center;
	/* 垂直居中 */
	justify-content: center;
	/* 水平居中 */
	flex-wrap: wrap;
	/* 允许换行 */
	gap: 5px;
	/* 子元素间距 */
	margin: 0;
	/* 移除默认边距 */
}

/* 备案信息容器 */
.publicfooter-beian-info {
	display: flex;
	align-items: center;
	/* 垂直居中 */
}

/* 分隔符样式 */
.publicfooter-separator {
	display: inline-block;
	/* 行内块元素 */
}

/* ===== 移动端响应式样式 ===== */

/* 平板和手机屏幕样式：屏幕宽度小于768px时生效 */
@media (max-width: 768px) {

	/* 页脚包装容器移动端调整 */
	.publicfooter-wrapper {
		padding: 30px 0 10px;
		/* 减少上下内边距 */
	}

	/* 页脚内容容器移动端单列布局 */
	.publicfooter-container {
		grid-template-columns: 1fr;
		/* 单列布局 */
		gap: 30px;
		/* 减少间距 */
		padding: 0 15px;
		/* 减少左右内边距 */
	}

	/* 移动端隐藏所有非Logo和版权信息的内容 */
	.publicfooter-social,
	.publicfooter-links,
	.publicfooter-contact {
		display: none !important;
		/* 强制隐藏 */
	}

	/* 移动端只显示Logo区域 */
	.publicfooter-logo {
		display: block;
		/* 确保显示 */
		text-align: center;
		/* 内容居中 */
		margin-bottom: 20px;
		/* 底部间距 */
	}

	/* Logo描述文字移动端调整 */
	.publicfooter-logo p {
		max-width: 100%;
		/* 占满可用宽度 */
		display: block;
		/* 块级显示 */
		margin-bottom: 15px;
		/* 底部间距 */
		line-height: 1.5;
		/* 调整行高 */
	}

	/* 页脚底部移动端调整 */
	.publicfooter-bottom {
		margin-top: 20px;
		/* 减少上边距 */
		padding: 15px;
		/* 减少内边距 */
	}

	/* 页脚底部段落移动端垂直排列 */
	.publicfooter-bottom p {
		flex-direction: column;
		/* 垂直排列 */
		gap: 8px;
		/* 增加间距 */
	}

	/* 备案信息移动端居中显示 */
	.publicfooter-beian-info {
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		/* 不换行 */
		flex-wrap: nowrap;
		/* 不换行 */
	}

	/* 移动端隐藏分隔符 */
	.publicfooter-separator {
		display: none;
		/* 隐藏分隔符 */
	}
}

/* 小屏幕设备进一步优化：屏幕宽度小于480px时生效 */
@media (max-width: 480px) {

	/* 页脚包装容器小屏幕调整 */
	.publicfooter-wrapper {
		padding: 20px 0 5px;
		/* 进一步减少内边距 */
	}

	/* 页脚内容容器小屏幕调整 */
	.publicfooter-container {
		gap: 20px;
		/* 进一步减少间距 */
	}

	/* Logo图片小屏幕调整 */
	.publicfooter-logo img {
		height: 50px;
		/* 更小的Logo */
	}

	/* 页脚底部小屏幕调整 */
	.publicfooter-bottom {
		margin-top: 15px;
		/* 进一步减少上边距 */
		font-size: 0.8rem;
		/* 更小的字体 */
		padding: 10px 15px;
		/* 进一步减少内边距 */
	}

	/* 备案信息小屏幕字体调整 */
	.publicfooter-beian-info {
		font-size: 0.75rem;
		/* 更小的备案字体 */
	}

	/* 进一步优化移动端页脚描述文字间距 */
	.publicfooter-logo p {
		margin-bottom: 10px;
		/* 减少底部间距 */
	}
}

/* ===== 动画效果 ===== */

/* 淡入上浮动画：用于页脚元素入场效果 */
@keyframes publicfooter-fadeInUp {
	from {
		opacity: 0;
		/* 完全透明 */
		transform: translateY(20px);
		/* 下方20px位置 */
	}

	to {
		opacity: 1;
		/* 完全不透明 */
		transform: translateY(0);
		/* 原始位置 */
	}
}

/* 应用动画到页脚各区域 */
.publicfooter-logo,
.publicfooter-links,
.publicfooter-contact {
	animation: publicfooter-fadeInUp 0.5s ease forwards;
	/* 0.5秒淡入上浮动画 */
}

/* 链接区域动画延迟：0.1秒后开始 */
.publicfooter-links {
	animation-delay: 0.1s;
}

/* 联系信息区域动画延迟：0.2秒后开始 */
.publicfooter-contact {
	animation-delay: 0.2s;
}

/* ===== 工具提示样式 ===== */

/* 工具提示样式：用于社交图标悬停提示 */
.publicfooter-tooltip {
	position: absolute;
	bottom: 100%;
	/* 在图标上方 */
	left: 50%;
	transform: translateX(-50%);
	/* 水平居中 */
	background: #333;
	/* 深灰色背景 */
	color: white;
	/* 白色文字 */
	padding: 5px 10px;
	/* 内边距 */
	border-radius: 4px;
	/* 圆角 */
	font-size: 12px;
	/* 小字体 */
	white-space: nowrap;
	/* 不换行 */
	opacity: 0;
	/* 初始不可见 */
	visibility: hidden;
	/* 初始隐藏 */
	transition: all 0.3s ease;
	/* 平滑过渡 */
	margin-bottom: 8px;
	/* 与图标的间距 */
}

/* 工具提示箭头：使用边框创建三角形 */
.publicfooter-tooltip::after {
	content: '';
	/* 伪元素内容 */
	position: absolute;
	top: 100%;
	/* 在工具提示下方 */
	left: 50%;
	transform: translateX(-50%);
	/* 水平居中 */
	border: 5px solid transparent;
	/* 透明边框 */
	border-top-color: #333;
	/* 上边框为深灰色，形成三角形 */
}

/* 社交图标悬停时显示工具提示 */
.publicfooter-social-icon:hover .publicfooter-tooltip {
	opacity: 1;
	/* 显示 */
	visibility: visible;
	/* 可见 */
}