* {
	margin: 0;
	padding: 0;
}

body {
	width: 100vw;
	overflow: scroll;
}

.container {
	position: relative;
	font-size: 0;
}

.container img.bg {
	width: 100vw;
}

.content {
	position: absolute;
	padding-bottom: 16px;
	width: 100%;
	bottom: 0;
	display: flex;
	flex-direction: column;
}

.content div {
	display: flex;
	justify-content: center;
	align-items: center;
}

.content .text {
	padding-bottom: 30px;
	padding-top: 14px;
}

.content .text img {
	width: 59px;
}

.content .footer {
	padding: 0 30px;
}

.content .footer img {
	width: 100%;
}

.content .music {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	overflow: hidden; /* 隐藏超出部分 */
}

.container .play {
	width: 31px;
	height: 31px;
	cursor: pointer;
	background: transparent;
	outline: none;
	border: none;
	-webkit-tap-highlight-color: transparent;
	padding: 0; /* 移除默认padding */
	margin: 0; /* 移除默认margin */
	position: relative; /* 确保位置稳定 */
	vertical-align: top; /* 防止基线对齐问题 */
	user-select: none; /* 禁止文本选择 */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.container .play img {
	width: 100%;
	height: 100%;
	display: block; /* 移除图片默认的inline行为 */
}

/* 禁用播放按钮的所有默认点击效果 */
.container .play:active,
.container .play:focus,
.container .play:hover {
	outline: none;
	border: none;
	background: transparent;
	transform: none; /* 禁用任何变换 */
	box-shadow: none; /* 禁用阴影 */
}

.container .play:active img,
.container .play:focus img,
.container .play:hover img {
	transform: none; /* 确保图片不发生变换 */
}

.music-left,
.music-right {
	width: 20%;
	overflow: hidden;
}

.music-left {
	position: relative; /* 设置相对定位 */
}

.music-left > div {
	display: flex; /* 让两张图片并排显示 */
	width: 400%; /* 设置容器宽度为200%以容纳两张100%的图片 */
	transform: translateX(0%); /* 设置初始位置与动画0%状态一致 */
	animation: slideLeft 4s linear infinite; /* 无限循环向左平移 */
	animation-play-state: paused; /* 初始状态暂停 */
}

.music-left img {
	width: 200%; /* 每张图片100%宽度，相对于200%的内层div */
	flex-shrink: 0; /* 防止图片被压缩 */
}

.music-left.playing > div {
	animation-play-state: running; /* 播放时启动动画 */
}

/* 右侧音乐图片样式 */
.music-right {
	position: relative; /* 设置相对定位 */
}

.music-right > div {
	display: flex; /* 让两张图片并排显示 */
	width: 400%; /* 设置容器宽度为400%以容纳两张200%的图片 */
	transform: translateX(-100%); /* 设置初始位置与动画0%状态一致 */
	animation: slideRight 4s linear infinite; /* 无限循环向右平移 */
	animation-play-state: paused; /* 初始状态暂停 */
}

.music-right img {
	width: 200%; /* 每张图片200%宽度，相对于400%的内层div */
	flex-shrink: 0; /* 防止图片被压缩 */
}

.music-right.playing > div {
	animation-play-state: running; /* 播放时启动动画 */
}

/* 定义向左循环平移动画 */
@keyframes slideLeft {
	0% {
		transform: translateX(0%); /* 从正常位置开始 */
	}
	100% {
		transform: translateX(-100%); /* 移动100%实现无缝循环 */
	}
}

/* 定义向右循环平移动画 */
@keyframes slideRight {
	0% {
		transform: translateX(-100%); /* 从左侧位置开始，实现对称效果 */
	}
	100% {
		transform: translateX(0%); /* 向右移动到正常位置，形成循环 */
	}
}