.xn-container {
	width: 6.8rem;
	margin: 0 auto;
	box-sizing: border-box;
}

/* 图片容器样式（核心） */
.xn-image-section {
	overflow: hidden;
	border-radius: 0.16rem;
	background: #0d0c10;
	border: 1px solid #3f3f45;
	width: 6.8rem;
}

.zoom-image {
	width: 100%;
	height: auto;
	display: block;
	/* 调整transform过渡时间为2s，opacity为1.5s，可按需修改 */
	transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.5s ease;
	transform: scale(0.8);
	/* 初始缩放比例 */
	opacity: 0.9;
	/* 初始透明度（略暗，放大后变亮） */
}

/* 滚动触发后的放大状态 */
.zoom-image.active {
	transform: scale(1.1);
	/* 放大5%（官网常用比例，不夸张） */
	opacity: 1;
}
.xn-t {
	font-size: 0.48rem;
	color: #fff;
	text-align: center;
	margin-top: 1.5rem;
	margin-bottom: 0.6rem;
    
}
.xn-p {
	padding-top: 0.6rem;
	font-size: 0.16rem;
    margin-left: 0.47rem;
}
.xn-p p {
    width: 5.84rem;
	color: #cbcfd8;
	line-height: 1.5;
    /* 核心：左内边距控制第二行缩进量 */
    padding-left: 0.8rem;
    /* 首行向左偏移，抵消左内边距，实现第二行缩进 */
    text-indent: -0.8rem;
    /* 确保p标签是块级，且换行正常 */
    display: block;
    word-wrap: break-word;
    white-space: nowrap;
    /* 2. 超出元素宽度的内容隐藏 */
    overflow: hidden;
    /* 3. 将超出的文本替换为省略号... */
    text-overflow: ellipsis;
    /* 可选：给元素设置一个固定宽度（确保省略效果生效） */
}