*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
/* 全局贴底结构 */
html, body{
	height:100%;
	font-family: "Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
body{
	background:#fff;
	color:#333;
	display:flex;
	flex-direction:column;
	min-height:100vh;
}
/* header */
header{
	background:#f8f9fa;
	padding:5px 0;
	box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.header-inner{
    width:100%;
    padding:0 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.header-left{
	display:flex;
	align-items:center;
}
header img{
	height:20px;
	margin-right:6px;
}
header span{
	font-size:18px;
}
.auth-text{
	font-size:13px;
	color:#333;
	text-decoration:none; /* 去掉下划线 */
	cursor:pointer;
	font-weight:normal;
}
/* hover 轻微变色，不做按钮效果 */
.auth-text:hover{
	color:#007bff;
	text-decoration:none;
}
/* 撑开主体 让footer贴底 */
.container{
	max-width:1300px;
	margin:auto;
	padding:40px 20px;
	text-align:center;

	flex:1;   /* 撑开中间区域 */
}
/* footer */
.site-footer{
	margin-top:auto; /* 推到底部 */
	padding:3px 3px;
	background:#f8f9fa;
	border-top:1px solid #e5e5e5;
	font-size:13px;
	color:#666;
	text-align:center;
}
.footer-inner{
	max-width:1300px;
	margin:auto;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px; /* 各项之间间距 */
	flex-wrap:wrap;
}
/* 所有文字一行样式 */
.footer-inner span{
	white-space:nowrap;
	line-height:1.6;
}
/* 页面主体容器 */
.container{
	width: 100%;
	max-width:1300px; /* 最大宽度 */
	margin:auto; /* 居中 */
	padding:40px 20px; /* 上下左右内边距 */
	text-align:center; /* 文本居中 */
}
/* Tab 标题区域 */
.header-titles{
	display:flex; /* flex布局 */
	justify-content:center; /* 居中 */
	flex-wrap:wrap; /* 小屏自动换行 */
	gap:25px; /* 间距 */
	margin-bottom:35px;
}
/* Tab 标题 */
.header-titles h2{
	cursor:pointer; /* 鼠标手型 */
	font-size:16px;
	padding:8px 4px;
	color:#666;
}
/* 激活状态 */
.header-titles h2.active{
	color:#007bff;
	border-bottom:2px solid #007bff;
}
/* 默认隐藏 */
.content{
	display:none;
}
/* 激活时显示 */
.content.active{
	display:block;
}
/* 卡片容器 */
.features{
	display:grid;
	grid-template-columns:repeat(auto-fit,200px); /* 自动适配布局 */
	justify-content:center;
	gap:10px; /* 设置固定的间距 */
	width:100%;
}
/* 单个卡片 */
.feature{
	width: 200px;       /* 固定宽度 */
	height: 249px;      /* 固定高度 */
	border:1px solid #e5e5e5;
	border-radius:10px;
	padding:20px; /* 减少内部间距 */
	background:#fff;
	transition:transform .2s, box-shadow .2s;
	display: flex;
	flex-direction: column; /* 保证内部元素竖直排列 */
	align-items: center;    /* 中心对齐内容 */
	justify-content: space-between; /* 内容均匀分布 */
}
/* hover 动效 */
.feature:hover{
	transform:translateY(-4px);
	box-shadow:0 6px 16px rgba(0,0,0,.06);
}
/* 卡片标题 */
.feature h3{
	margin-bottom:8px;
}
/* 卡片描述 */
.feature p{
	font-size:15px;
	color:#ff5c38;
	margin-top: 5px; /* 设置较小的间距 */
}
/* 画布容器，确保其为圆形 */
.circle-container {
	width: 140px;
	height: 140px;
	border-radius: 50%; /* 圆形 */
	border: 1px solid #e0e0e0; /* 灰色圆环 */
	overflow: hidden; /* 超出部分隐藏 */
	margin: 0 auto 15px; /* 居中并添加底部间距 */
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
}
/* 保持图片原始尺寸并居中 */
.circle-image {
	width: auto; /* 图片宽度自适应 */
	height: auto; /* 图片高度自适应 */
	max-width: 100%; /* 限制图片最大宽度为容器的宽度 */
	max-height: 100%; /* 限制图片最大高度为容器的高度 */
}
/* mobile */
@media (max-width:768px){
	.header-inner{
        padding:0 12px;
    }
	/* 页面边距缩小 */
	.container{
		padding:15px 10px;
	}
	.features{
        grid-template-columns: repeat(2, 1fr);
        gap:8px;
    }
	.feature{
        width:100%;
        height:auto;
        padding:15px;
    }
	/* 手机端标题缩小 */
	header span{
		font-size:15px;
	}
	/* Tab字体缩小 */
	.header-titles h2{
		font-size:13px;
	}
	.footer-inner{
        gap:6px;
        font-size:11px;
    }
}