/* ============================================================
   common.css — 全站公共样式
   ============================================================ */

/* ---------- 通用 ---------- */
html { scroll-behavior: smooth; }
body { background: #ffffff; }

.section { padding: .8rem 0; }
.section-gray { background: #f7f5f9; }

/* 章节标题 */
.sec-tit {
	position: relative;
	font-size: .36rem;
	line-height: 1.4;
	font-weight: 700;
	color: #303133;
	display: inline-block;
}
.sec-tit em { color: var(--primary-color); font-style: normal; }
.sec-sub {
	margin-top: .08rem;
	font-size: .16rem;
	color: #909399;
	letter-spacing: .02rem;
}

.text-center { text-align: center; }
.box-hd { margin-bottom: .36rem; }
.box-hd.text-center .sec-tit { padding: 0 .2rem; }
.box-hd.text-center .sec-tit::before { display: none; }
.box-hd.text-center .sec-tit::after {
	content: '';
	display: block;
	width: .5rem;
	height: .04rem;
	border-radius: .02rem;
	background: var(--primary-color);
	margin: .12rem auto 0;
}

.box-ft { text-align: center; margin-top: .36rem; }
.box-ft .hd-more {
	display: inline-block;
	padding: .1rem .36rem;
	font-size: .16rem;
	color: #606266;
	border: 1px solid #dcdfe6;
	border-radius: 2rem;
	transition: all .3s;
}
.box-ft .hd-more:hover {
	color: var(--primary-color);
	border-color: var(--primary-color);
}
.hd-more { font-size: .16rem; color: #606266; transition: color .3s; }
.hd-more:hover { color: var(--primary-color); }

/* 按钮 */
.btn {
	display: inline-block;
	padding: .12rem .32rem;
	font-size: .16rem;
	border-radius: .04rem;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all .3s;
}
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { background: #7c22a0; color: #fff; box-shadow: 0 .06rem .16rem rgba(103, 20, 130, .35); }
.btn-ghost { border-color: rgba(255, 255, 255, .8); color: #fff; background: rgba(255, 255, 255, .08); }
.btn-ghost:hover { background: #fff; color: var(--primary-color); }

/* ============================================================
   Header（首页用）
   ============================================================ */
.header {
	width: 100%;
	height: 3.2rem;
	position: relative;
	padding-top: .8rem;
}
.header:before {
	position: absolute;
	content: '';
	width: 42%;
	height: 100%;
	top: 0; left: 0;
	background: repeating-linear-gradient(45deg, #2d0085, #781e84, #c53197);
	clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% 3.2rem, 100% 100%, 0 100%);
	z-index: -1;

	transform-origin: left center; /* 以左侧为轴 */
	transform: rotateY(0deg);
	transition: transform 0.8s;
	backface-visibility: hidden; /* 隐藏背面 */
}
.header:after {
	position: absolute;
	content: '';
	width: calc(58% + .8rem);
	height: calc(100% - 5px);
	top: 0; right: 0;
	background: url("../images/header-bg2.jpg") left top no-repeat;
	background-size: cover;
	z-index: -10;
	border-bottom: 5px solid #efe8f3;

}
.header .logo { height: 1.65rem; }

/* ============================================================
   Footer（全站共用）
   左：logo；右：友情链接（标题靠左，链接一排三个均分）
   ============================================================ */
.footer {
	background: linear-gradient(135deg, #2b0a3e 0%, #3b0f56 60%, #4a0d64 100%);
	color: rgba(255, 255, 255, .75);
}
.footer-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem 0;
}

/* 左：logo */
.footer-brand {
	flex-shrink: 0;
}
.footer-logo {
	height: 1rem;
	display: block;
}

/* 右：友情链接 */
.footer-links-wrap {
	flex: 1;
	max-width: 8rem;     /* 控制整体宽度，避免链接拉太长 */
	text-align: left;
}
.footer-links-tit {
	font-size: .15rem;
	color: #fff;
	font-weight: 600;
	margin-bottom: .18rem;
	padding-left: .12rem;
	position: relative;
	letter-spacing: .04rem;
}
.footer-links-tit::before {
	content: '';
	position: absolute;
	left: 0; top: 50%;
	width: .04rem; height: .14rem;
	background: #d9a65c;
	border-radius: .02rem;
	transform: translateY(-50%);
}

/* 一排三个，宽度均分 */
.footer-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);   /* 三等分 */
	gap: .2rem .4rem;
}
.footer-links li { min-width: 0; }
.footer-links li a {
	position: relative;
	display: inline-block;
	padding: .04rem 0;
	font-size: .15rem;
	color: rgba(255, 255, 255, .7);
	transition: color .3s;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.footer-links li a::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: #d9a65c;
	transition: width .3s;
}
.footer-links li a:hover { color: #d9a65c; }
.footer-links li a:hover::after { width: 100%; }

.footer-copy {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: .18rem 0;
	font-size: .13rem;
	color: rgba(255, 255, 255, .5);
	text-align: center;
}

/* ============================================================
   返回顶部
   ============================================================ */
.backtop {
	position: fixed;
	right: .3rem; bottom: .5rem;
	z-index: 99;
	width: .44rem; height: .44rem;
	border: none;
	border-radius: 50%;
	background: var(--primary-color);
	color: #fff;
	font-size: .2rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(.2rem);
	transition: all .3s;
	box-shadow: 0 .06rem .16rem rgba(103, 20, 130, .35);
}
.backtop.show { opacity: 1; visibility: visible; transform: translateY(0); }
.backtop:hover { background: #7c22a0; }

/* ============================================================
   下载列表（模版下载）
   ============================================================ */
.dl-tabs {
	display: flex;
	justify-content: center;
	gap: .12rem;
	margin-bottom: .32rem;
}
.dl-tabs button {
	padding: .08rem .22rem;
	font-size: .15rem;
	color: #606266;
	background: #fff;
	border: 1px solid #dcdfe6;
	border-radius: 2rem;
	cursor: pointer;
	transition: all .3s;
}
.dl-tabs button:hover { color: var(--primary-color); border-color: var(--primary-color); }
.dl-tabs button.on {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.dl-list { width: 100%; }
.dl-list ul li { width: calc(25% - .5rem); margin-right: .5rem; }
.dl-list ul li a .txt { padding: .2rem; }
.dl-list ul li a .txt h3 { font-size: .2rem; color: #303133; }