@font-face {
	font-family: "Zpix";
	src: url("../../font/zpix.woff2") format("woff2");
	font-display: swap;
}

* {
	margin: 0;
	padding: 0;
	user-select: none;
}

html {
	height: 100%;
	background: linear-gradient(to top, #ffffff, #A2A2A2);
}

.qc {
	width: 65%;
	height: auto;
	max-width: 300px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 提高层级，避免被云朵盖住 */
	z-index: 99;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

#box {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	/* 云朵放在底层 */
	z-index: 1;
	/* 开启硬件加速容器 */
	transform: translateZ(0);
}

#box ul {
	/* 用flex替代float，避免浮动间隙问题 */
	display: flex;
	width: 2000px;
	height: 100%;
	animation: yd 6s linear infinite;
	/* 开启硬件加速，减少PC端闪烁 */
	will-change: transform;
	transform: translateZ(0);
}

#box ul li {
	list-style: none;
	/* 收缩不缩放，保证每张图占满1000px */
	flex-shrink: 0;
}

/* 修正类名：image → images */
.images {
	/* 块级元素，消除底部行内间隙 */
	display: block;
	width: 100%;
	height: 100%;
}

@keyframes yd {
	to {
		/* 平移距离 = 单张云朵宽度，正好让第二张图衔接第一张的位置 */
		transform: translateX(-1000px);
	}
}

.hint {
	font-family: 'Zpix';
	position: fixed;
	bottom: 30px;
	left: 30px;
	font-size: 12px;
	color: #999999;
	z-index: 99;
	border-radius: 99px;
}

.title {
	font-family: 'Zpix';
	position: fixed;
	top: 30px;
	left: 30px;
	font-size: 12px;
	background: rgba(255, 255, 255, .2);
	padding: 5px 10px;
	color: #666666;
	z-index: 99;
	border-radius: 99px;
}

.footer {
	font-family: 'Zpix';
	font-size: 12px;
	color: #999999;
	position: fixed;
	right: 30px;
	bottom: 30px;
}

/* 移动端适配 */
@media (max-width: 900px) {
	.hint {
		bottom: 20px;
		left: 20px;
	}

	.title {
		top: 20px;
		left: 20px;
	}

	.footer {
		bottom: 20px;
		right: 20px;
	}
}