.save{
	opacity: 0;
}
.music {
	position: absolute;
	width: 4%;
	left: 2%;
	top: 2.5%;
}

.p8-8 {
	width: 25.7%;
	left: 35.7%;
	top: 88.8%;
	animation: flash 2s linear both infinite;
}

.p8-7 {
	width: 20.5%;
	left: 70.7%;
	top: 34%;
}

.p8-6 {
	width: 21.6%;
	left: 41.8%;
	top: 33.7%;
}

.p8-5 {
	width: 25.8%;
	left: 10.1%;
	top: 37.2%;
}

.p8-4 {
	width: 8.8%;
	left: 57.2%;
	top: 16.9%;
}

.p8-3 {
	width: 34.7%;
	left: 24.1%;
	top: 43.5%;
	animation: tada 2s linear both infinite;
}

.p8-2 {
	width: 14.2%;
	left: 42.8%;
	top: 71.1%;
	animation: pulse 2s linear both infinite;
}

.p7-8 {
	width: 36.6%;
	left: 31.7%;
	top: 65.6%;
	animation: tada 2s linear both infinite;
}

.p7-7 {
	width: 22.8%;
	left: 69.2%;
	top: 33.6%;
	animation: flash 2s linear both infinite;
}

.p7-6 {
	width: 7.7%;
	left: 51.2%;
	top: 28.7%;
	animation: flash 2s linear both infinite;
}

.p7-5 {
	width: 47.4%;
	left: 52.2%;
	top: 11.2%;
}

.p7-4 {
	width: 37.4%;
	left: 22.2%;
	top: 46.2%;
}

.p7-3 {
	width: 39.4%;
	left: 22.2%;
	top: 45.2%;
}

.p7-2 {
	width: 16.4%;
	left: 41.8%;
	top: 77.2%;
	animation: pulse 2s linear both infinite;
}

.p6-8 {
	width: 29.1%;
	left: 3.3%;
	top: 14.1%;
	animation: pulse 2s linear both infinite;
}

.dragBox {
	position: absolute;
	width: 36%;
	height: 24%;
	left: 16%;
	top: 44%;
	/*background-color: red;*/
	transform: rotate(-49deg);
}

.p6-7-1 {
	width: 34.1%;
	left: 32.3%;
	top: 31.1%;
}
.p6-7 {
	width: 32.1%;
	left: 2.3%;
	top: 12.1%;
	animation: tada 2s linear both infinite;
}
.p6-6 {
	width: 39.3%;
	left: 32.9%;
	top: 71.6%;
	animation: flash 2s linear both infinite;
}

.p6-5 {
	width: 32.3%;
	left: 1.8%;
	top: 8.5%;
	transform: rotate(49deg);
}

.p6-4 {
	width: 13.8%;
	left: 32.2%;
	top: 30.7%;
}

.p6-3 {
	width: 34.1%;
	left: 32.3%;
	top: 31.1%;
}

.p6-2 {
	width: 17.2%;
	left: 40.4%;
	top: 79.4%;
	animation: pulse 2s linear both infinite;
}

.p5-11 {
	width: 33%;
	left: 5.9%;
	top: 21.8%;
}

.p5-10 {
	width: 38%;
	left: 31%;
	top: 83.3%;
	animation: pulse 2s linear both infinite;
}

.p5-9 {
	width: 41%;
	left: 58.9%;
	top: 12.2%;
}

.p5-8 {
	width: 40.6%;
	left: 30.9%;
	top: 12.8%;
}

.p5-7 {
	width: 40.6%;
	left: 2.6%;
	top: 13.5%;
}

.p5-6 {
	width: 32.6%;
	left: 48.5%;
	top: 16.8%;
	animation: tada 2s linear both infinite;
}

.p5-5 {
	width: 33%;
	left: 60.2%;
	top: 21.8%;
	animation: pulse 2s linear both infinite;
}

.p5-4 {
	width: 33%;
	left: 30.9%;
	top: 21.8%;
	animation: pulse 2s linear both infinite;
}

.p5-3 {
	width: 33%;
	left: 5.9%;
	top: 21.8%;
	animation: pulse 2s linear both infinite;
}

.p5-2 {
	width: 16.2%;
	left: 40.1%;
	top: 85.8%;
	animation: pulse 2s linear both infinite;
}

.p4-12 {
	width: 8%;
	right: 2.1%;
	top: 2.6%;
}

.p4-11 {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}

.p4-10 {
	position: absolute;
	width: 21%;
	left: 69%;
	top: 5.3%;
}

.p4-9 {
	position: absolute;
	width: 90%;
	left: 5%;
	top: 6%;
}

.p4-8 {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.p4-7 {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}

.p4-6 {
	position: absolute;
	width: 21%;
	left: 69%;
	top: 5.3%;
}

.p4-5 {
	position: absolute;
	width: 90%;
	left: 5%;
	top: 6%;
}

.p4-4 {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.musicBox2 {
	position: absolute;
	width: 23.7%;
	height: 42%;
	right: 16.5%;
	top: 30.2%;
	/*background-color: red;*/
	animation: fadeInRight1 1s 0s linear both;
}

.musicBox1 {
	position: absolute;
	width: 23.7%;
	height: 42%;
	left: 16.5%;
	top: 30.2%;
	animation: fadeInLeft1 1s 0s linear both;
	/*background-color: red;*/
}

.p4-3 {
	width: 23.2%;
	left: 38.1%;
	bottom: 6.5%;
	animation: pulse 2s linear both infinite;
}

.p4-2 {
	width: 8%;
	left: 2.1%;
	top: 2.6%;
}

.p4-1,
.p5-1,
.p5-12,
.p6-9,
.p7-9,
.p8-9,
.p6-1,
.p7-1,
.p8-1 {
	width: 8%;
	right: 2.1%;
	top: 2.6%;
}
.m21 {
	width: 4%;
	left: 727.9%;
	top: 10.9%;
}
.m20 {
	width: 4%;
	left: 701.9%;
	top: 5.9%;
}
.m19 {
	width: 4%;
	left: 676.9%;
	top: 7.9%;
}
.m18 {
	width: 4%;
	left: 647.9%;
	top: 7.9%;
}
.m17 {
	width: 4%;
	left: 619.9%;
	top: 7.9%;
}
.m16 {
	width: 5%;
	left: 584.9%;
	top: 7.9%;
}
.m15 {
	width: 5%;
	left: 543.9%;
	top: 8.9%;
}
.m14 {
	width: 5%;
	left: 509.9%;
	top: 7.9%;
}
.m13 {
	width: 4%;
	left: 470.9%;
	top: 10.9%;
}
.m12 {
	width: 5%;
	left: 434.9%;
	top: 6.9%;
}
.m11 {
	width: 5%;
	left: 406.9%;
	top: 8.9%;
}
.m10 {
	width: 4%;
	left: 373.9%;
	top: 9.9%;
}
.m9 {
	width: 5%;
	left: 332.9%;
	top: 7.9%;
}
.m8 {
	width: 5%;
	left: 306.9%;
	top: 7.9%;
}
.m7 {
	width: 5%;
	left: 276.9%;
	top: 9.9%;
}
.m6 {
	width: 6%;
	left: 254.9%;
	top: 4.9%;
}
.m5 {
	width: 3%;
	left: 238.9%;
	top: 9.9%;
}
.m4 {
	width: 4%;
	left: 217.9%;
	top: 11.9%;
}
.m3 {
	width: 5%;
	left: 179.9%;
	top: 5.9%;
}

.m2 {
	width: 5%;
	left: 156.9%;
	top: 7.9%;
}
.m1 {
	width: 7%;
	left: 134.9%;
	top: 4.9%;
}

/* 乐符漂浮动画（m1~m21） */
.m1,
.m2,
.m3,
.m4,
.m5,
.m6,
.m7,
.m8,
.m9,
.m10,
.m11,
.m12,
.m13,
.m14,
.m15,
.m16,
.m17,
.m18,
.m19,
.m20,
.m21 {
	animation-name: floatS;
	animation-duration: 3.6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
}

/* 错峰延迟，避免同频：每个错开 0.2s 左右 */
.m1 { animation-delay: 0s; }
.m2 { animation-delay: 0.2s; }
.m3 { animation-delay: 0.4s; }
.m4 { animation-delay: 0.6s; }
.m5 { animation-delay: 0.8s; }
.m6 { animation-delay: 1s; }
.m7 { animation-delay: 1.2s; }
.m8 { animation-delay: 1.4s; }
.m9 { animation-delay: 1.6s; }
.m10 { animation-delay: 1.8s; }
.m11 { animation-delay: 2s; }
.m12 { animation-delay: 2.2s; }
.m13 { animation-delay: 2.4s; }
.m14 { animation-delay: 2.6s; }
.m15 { animation-delay: 2.8s; }
.m16 { animation-delay: 3s; }
.m17 { animation-delay: 3.2s; }
.m18 { animation-delay: 3.4s; }
.m19 { animation-delay: 3.6s; }
.m20 { animation-delay: 3.8s; }
.m21 { animation-delay: 4s; }
.hand5 {
	width: 7.5%;
	left: 676.9%;
	top: 35.9%;
}

.dot5 {
	width: 10%;
	left: 679.2%;
	top: 27.9%;
}

.hand4 {
	width: 7.5%;
	left: 560.4%;
	top: 20.5%;
}

.dot4 {
	width: 10%;
	left: 562.8%;
	top: 12.7%;
}

.hand3 {
	width: 7.5%;
	left: 434.7%;
	top: 29.8%;
}

.dot3 {
	width: 10%;
	left: 437.2%;
	top: 22.1%;
}

.hand2 {
	width: 7.5%;
	left: 349.3%;
	top: 31.5%;
}

.dot2 {
	width: 10%;
	left: 351.5%;
	top: 23.7%;
}

.hand1 {
	width: 7.5%;
	left: 187%;
	top: 24.5%;
}

.hand {
	animation: handPinch 1.2s ease-in-out infinite;
}
.dot{
	animation: pulse 2s linear both infinite;
}
.dot1 {
	width: 10%;
	left: 189.2%;
	top: 16.4%;
}
.p3-2-1 {
	width: 38.2%;
	left: 6.4%;
	top: 9.6%;
}
.p3-2 {
	width: 4.2%;
	left: 30.2%;
	top: 22.1%;
}
.p3-1 {
	width: 2.6%;
	left: 12.7%;
	top: 86%;
	animation: flash 2s 0s linear infinite;
}

.pagebgLong {
	height: 100%;
	left: 0%;
	top: 0%;
}

.page3 {
	overflow-x: scroll;
}

.p2-4 {
	width: 8%;
	left: 2.1%;
	top: 2.6%;
}

.p2-3 {
	width: 8%;
	right: 2.1%;
	top: 2.6%;
}

.p2-2 {
	width: 8%;
	right: 2%;
	top: 2.5%;
}

.p2-1 {
	width: 73.8%;
	left: 13.1%;
	top: 20.6%;
	animation: slideInFromBottom 8s linear forwards;
	clip-path: inset(0 0 100% 0);
}

@-webkit-keyframes slideInFromBottom {
	0% {
		clip-path: inset(0 0 100% 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes slideInFromBottom {
	0% {
		clip-path: inset(0 0 100% 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}

.load1 {
	width: 20%;
	left: 13%;
	top: 79%;
	animation: pulse1 2s 0s linear both infinite;
}

.load2 {
	width: 3.8%;
	left: 28.9%;
	top: 24.6%;
}

.page {
	position: absolute;
	width: calc(100vh * 1920 / 1080);
	height: 100vh;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.pagebg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: contain;
	object-position: center;
}

.percentBox {
	position: absolute;
	width: 20%;
	height: 3%;
	left: 13%;
	top: 82.5%;
	background-color: #FFFFFF;
	border-radius: 10px;
}

.percentBoxInner {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background-color: #53a583;
	border-radius: 10px;
	clip-path: inset(0 100% 0 0);
	animation: loadWidth 3s ease-in-out forwards;
}

/* 盖章：从大到小缩放出现 */
.stampZoom {
	transform-origin: center center;
	-webkit-animation: stampZoom 0.5s ease-out forwards;
	animation: stampZoom 0.5s ease-out forwards;
}

@-webkit-keyframes stampZoom {
	0% {
		-webkit-transform: scale3d(1.8, 1.8, 1);
		transform: scale3d(1.8, 1.8, 1);
		opacity: 0;
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
}

/* 漂浮动画 floatS（按你给的样式补全） */
@-webkit-keyframes floatS {
	0% {
		opacity: 0;
		/* 从下方开始，中间偏左 */
		-webkit-transform: translate3d(-15px, 25%, 0);
		transform: translate3d(-15px, 25%, 0);
	}
	25% {
		opacity: 1;
		/* 向上浮，向右摆动 */
		-webkit-transform: translate3d(15px, 12px, 0);
		transform: translate3d(15px, 12px, 0);
	}
	50% {
		opacity: 1;
		/* 再向上，向左摆动 */
		-webkit-transform: translate3d(-15px, -8px, 0);
		transform: translate3d(-15px, -8px, 0);
	}
	75% {
		opacity: 1;
		/* 接近最上方，向右摆动 */
		-webkit-transform: translate3d(15px, -20px, 0);
		transform: translate3d(15px, -20px, 0);
	}
	100% {
		opacity: 1;
		/* 到达更高处，向左摆动 */
		-webkit-transform: translate3d(-15px, -32px, 0);
		transform: translate3d(-15px, -32px, 0);
	}
}

@keyframes floatS {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-15px, 25%, 0);
		-ms-transform: translate3d(-15px, 25%, 0);
		transform: translate3d(-15px, 25%, 0);
	}
	25% {
		opacity: 1;
		-webkit-transform: translate3d(15px, 12px, 0);
		-ms-transform: translate3d(15px, 12px, 0);
		transform: translate3d(15px, 12px, 0);
	}
	50% {
		opacity: 1;
		-webkit-transform: translate3d(-15px, -8px, 0);
		-ms-transform: translate3d(-15px, -8px, 0);
		transform: translate3d(-15px, -8px, 0);
	}
	75% {
		opacity: 1;
		-webkit-transform: translate3d(15px, -20px, 0);
		-ms-transform: translate3d(15px, -20px, 0);
		transform: translate3d(15px, -20px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(-15px, -32px, 0);
		-ms-transform: translate3d(-15px, -32px, 0);
		transform: translate3d(-15px, -32px, 0);
	}
}

@keyframes stampZoom {
	0% {
		-webkit-transform: scale3d(1.8, 1.8, 1);
		transform: scale3d(1.8, 1.8, 1);
		opacity: 0;
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
}

@keyframes loadWidth {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0% 0 0);
	}
}

img {
	position: absolute;
}

.none {
	display: none;
}

@-webkit-keyframes pulse1 {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	50% {
		-webkit-transform: scale3d(1.2, 1.2, 1.2);
		transform: scale3d(1.2, 1.2, 1.2)
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes pulse1 {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	50% {
		-webkit-transform: scale3d(1.2, 1.2, 1.2);
		-ms-transform: scale3d(1.2, 1.2, 1.2);
		transform: scale3d(1.2, 1.2, 1.2)
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

.pulse1 {
	-webkit-animation-name: pulse1;
	animation-name: pulse1
}

.rotate {
	-webkit-animation: rotate 6s 0s linear both infinite;
	animation: rotate 6s 0s linear both infinite;
}

@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes tada {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	10%,
	20% {
		-webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -1.5deg);
		transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -1.5deg)
	}
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1.5deg);
		transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1.5deg)
	}
	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1.5deg);
		transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1.5deg)
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes tada {
	0% {
		transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		-webkit-transform: scale3d(1, 1, 1);
	}
	10%,
	20% {
		transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -1.5deg);
		-ms-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -1.5deg);
		-webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -1.5deg);
	}
	30%,
	50%,
	70%,
	90% {
		transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1.5deg);
		-ms-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1.5deg);
		-webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1.5deg);
	}
	40%,
	60%,
	80% {
		transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1.5deg);
		-ms-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1.5deg);
		-webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1.5deg);
	}
	100% {
		transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		-webkit-transform: scale3d(1, 1, 1);
	}
}

.tada {
	-webkit-animation-name: tada;
	animation-name: tada
}


/* 手指撮一撮 动效：模拟连续两次轻点/捏合 */

@-webkit-keyframes handPinch {
	0%,
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
	20% {
		-webkit-transform: translate3d(0, 6px, 0) scale3d(0.9, 0.9, 1);
	}
	30% {
		-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
	50% {
		-webkit-transform: translate3d(0, 6px, 0) scale3d(0.9, 0.9, 1);
	}
	60% {
		-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
}

@keyframes handPinch {
	0%,
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
	20% {
		transform: translate3d(0, 6px, 0) scale3d(0.9, 0.9, 1);
	}
	30% {
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
	50% {
		transform: translate3d(0, 6px, 0) scale3d(0.9, 0.9, 1);
	}
	60% {
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
}

@-webkit-keyframes fadeInDown1 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInDown1 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50%, 0);
		-ms-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInDown1 {
	-webkit-animation-name: fadeInDown1;
	animation-name: fadeInDown1
}

@-webkit-keyframes fadeInUp1 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 50%, 0);
		transform: translate3d(0, 50%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInUp1 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 50%, 0);
		-ms-transform: translate3d(0, 50%, 0);
		transform: translate3d(0, 50%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInUp1 {
	-webkit-animation-name: fadeInUp1;
	animation-name: fadeInUp1
}

@-webkit-keyframes fadeInLeft1 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInLeft1 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-50%, 0, 0);
		-ms-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInLeft1 {
	-webkit-animation-name: fadeInLeft1;
	animation-name: fadeInLeft1
}
@-webkit-keyframes fadeInRight1 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInRight1 {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(50%, 0, 0);
		-ms-transform: translate3d(50%, 0, 0);
		transform: translate3d(50%, 0, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInRight1 {
	-webkit-animation-name: fadeInRight1;
	animation-name: fadeInRight1
}