@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap');

:root {
	--primary: #2c3f2f;
	--accent: #d97706;
}

body {
	font-family: "Noto Serif SC", "Microsoft YaHei", "PingFang SC", serif;
	color: #44403c;
	line-height: 1.7;
}

.sysd_list .background {
	content: "";
	width: 100%;
	height: 100%;
	z-index: -1;
	position: fixed;
	margin: 0;
	padding: 0;
	/*background: #f9f5eb;*/

	/*background-image: linear-gradient(rgba(245, 240, 232, 0.3), rgba(245, 240, 232, 0.3)), url(https://www.transparenttextures.com/patterns/embossed-paper.png);*/
	background-color: rgba(245, 240, 232, 1);
	background-image: url("https://www.transparenttextures.com/patterns/white-paperboard.png");

	/*background-size: cover, 400px;*/
}

.rec_bg {
	background-image: url(/_upload/tpl/02/10/528/template528/images/1/sysd/maple_leaf.jpg);
	background-size: cover;
	background-position: center;
	content: "";
	width: 100%;
	height: 950px;
	z-index: -1;
	position: absolute;
	opacity: 0.5;
}

.recommendation {
	margin: 60px auto 140px;
	max-width: 960px;
	position: relative;
	z-index: 0;
}

.paper-card {
	background: #f9f5eb;
	background-image:
		linear-gradient(#e8d9c0 1px, transparent 1px),
		linear-gradient(90deg, #e8d9c0 1px, transparent 1px);
	background-size: 26px 26px;
	box-shadow: 0 0 60px rgba(139, 69, 19, 0.15);
	border: 1px solid rgba(146, 64, 14, 0.1);
	border-radius: 24px;
	padding: 64px 60px;
	position: relative;
	opacity: 0.95;
}

.word-card {
	text-align: left;
	line-height: 1.85;
	font-size: 1.08rem;
	color: #3f2e1e;
	padding: 0 10px;
}

.word-value {
	font-family: 'Ma Shan Zheng', cursive;
	font-size: 1.5rem;
	color: #433f37;
	text-indent: 2em;
	text-align: justify;
	/* margin-bottom: 0.35em; */
}

.word-value.word-title {
	font-size: 2.2rem;
	text-indent: unset;
	text-align: center;
	margin-bottom: 0.5em;
	letter-spacing: 0.2em;
}

.word-value.word-tail {
	text-align: right;
	font-family: 'Noto Serif SC';
	margin-top: 32px;
	font-size: 1.4rem;
}

.book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
	gap: 32px;
	max-width: 90%;
	margin: 0 auto;
	/*padding: 0 32px*/
	;
}

.book-card {

	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(146, 64, 14, 0.1);
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	/*background-image: linear-gradient(rgba(252, 249, 242, 0.3), rgba(252, 249, 242, 0.3)), url(https://www.transparenttextures.com/patterns/white-paperboard.png);*/
	background-color: rgba(253, 252, 248, 1);
	background-image: url("https://www.transparenttextures.com/patterns/groovepaper.png");
	background-size: cover, 300px;
}

.book-card:hover {
	transform: translateY(-12px) scale(1.03);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.book-cover {
	aspect-ratio: 3 / 3.7;
	width: 100%;
	background: linear-gradient(135deg, #fef3c7 0%, #f5e8d3 100%);
	/*display: flex;
            align-items: center;
            justify-content: center;*/
	position: relative;
	/*border-bottom: 1px solid rgba(146, 64, 14, 0.1);*/
}

.book-cover img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	zoom: 100;
}

.book-cover-icon {
	font-size: 5.5rem;
	transition: transform 0.5s ease;
}

.book-card:hover .book-cover-icon {
	transform: scale(1.12);
}

.book-tag {
	display: inline-block;
	padding: 4px 16px;
	background: #ecfdf5;
	color: #065f46;
	font-size: 0.9rem;
	border-radius: 9999px;
	text-align: center;
}

.book-info {
	/*text-align: center;*/
	aspect-ratio: 3 / 1.3;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}

.book-title {
	font-family: "ZCOOL XiaoWei", "Microsoft YaHei", serif;
	font-size: 1.3rem;
	line-height: 1.35rem;
	color: #44403c;
	margin-bottom: 12px;
	margin-top: 8%;
	transition: color 0.3s;
	text-align: center;
}

.book-card:hover .book-title {
	color: var(--primary);
}

.ink-line {
	height: 2px;
	width: 48px;
	margin: 24px auto 0;
	background: linear-gradient(to right, transparent, #4a3f2f, transparent);
}

.section-title {
	text-align: center;
	font-size: 2rem;
	color: var(--primary);
	margin-bottom: 12px;
}

.section-subtitle {
	text-align: center;
	color: #78716c;
	font-size: 1.1rem;
	margin-bottom: 60px;
}

.col_news_head {
	display: none;
}


div#wp_paging_w61 {
	display: none;
}

#l-container .inner {
	padding: 0px !important;
}


@media screen and (max-width: 1500px) {
.rec_bg {
height: 755px;
}
}

@media screen and (max-width: 999px) {
.rec_bg {
top: 0px;
height: 860px;
}
}



@media screen and (max-width: 1023px) {
	.book-grid {
		grid-template-columns: repeat(auto-fit, minmax(28%, 1fr));
	}

	.l-banner {
		height: 880px;
	}


	.word-value {
		font-size: 1.4rem;
	}

	.word-value.word-tail {
		font-size: 1.3rem;
	}

	.book-title {
		font-size: 1.1rem;
	}

	.book-tag {
		font-size: 0.8rem;
	}

}

@media screen and (max-width: 767px) {


	.paper-card {
		padding: 48px 36px;
	}

.rec_bg {
 display: none;
}

.recommendation::before {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/_upload/tpl/02/10/528/template528/images/1/sysd/maple_leaf.jpg');
  background-size: cover;      /* 或 contain、repeat 等 */
  background-position: center;
  opacity: 0.5;                /* 只控制背景透明度 */
  z-index: -1;                 /* 让背景在内容下面 */
  pointer-events: none;        /* 可选，避免遮挡点击 */
}

.recommendation {
padding: 80px 30px;
margin: 0px auto 60px;
}

}

@media screen and (max-width: 450px) {
	.book-grid {
		grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
		gap: 20px 5%;
	}


	.paper-card {
		background: #f9f5eb;
		background-image: linear-gradient(#e8d9c0 1px, transparent 1px), linear-gradient(90deg, #e8d9c0 1px, transparent 1px);
		background-size: 26px 26px;
		/* box-shadow: 0 0 60px rgba(139, 69, 19, 0.15); */
		/* border: 1px solid rgba(146, 64, 14, 0.1); */
		border-radius: 16px;
		padding: 30px 15px;
		position: relative;
		opacity: 0.95;
	}


.recommendation {
padding: 50px 15px;
margin: 0px auto 40px;
}

   
}


}