* {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	width: 100%;
	height: 100%;
	font-size: 10px;
	-webkit-overflow-scrolling: touch;
	overflow: hidden;
}

body {
	font-family: "microsoft yahei";
}

img {
	display: block;
	position: absolute;
	font-size: 0;
	line-height: 0;
}

.poster {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 999;
}

/*.video {
	transform: rotate(90deg);
}*/

.save {
	opacity: 0;
}

.hudong1,
.hudong2,
.hudong3,
.hudong4,
.hudong5 {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.dragBox {
	position: absolute;
	width: 70%;
	height: 23vw;
	background-color: transparent;
	left: 9%;
	top: 33%;
	transform: rotate(43deg);
}

.p8-6 {
	width: 3.8%;
	left: 7.1%;
	top: 39.4%;
	animation: flash 2s 0s linear both infinite;
}

.p8-9 {
	width: 12.4%;
	left: 66.5%;
	top: 57.5%;
	opacity: 0;
	transform: scale(1.3);
}

.p8-5 {
	width: 32.4%;
	left: 30.5%;
	top: 68.9%;
	opacity: 0;
	transform: scale(1.3);
}

.p8-4 {
	width: 34%;
	left: 29.2%;
	top: 44.5%;
	opacity: 0;
	transform: scale(1.3);
}

.p8-3 {
	width: 24.1%;
	left: 35.8%;
	top: 18%;
	opacity: 0;
	transform: scale(1.3);
}

.p8-2 {
	width: 20.6%;
	left: 30.1%;
	top: 30.5%;
	animation: tada 2s 0s linear both infinite;
}

.p8-1 {
	width: 11.3%;
	left: 8.9%;
	top: 42.6%;
	animation: pulse 2s 0s linear both infinite;
}

.p7-7 {
	width: 11%;
	left: 42.2%;
	top: 32.5%;
	z-index: 0;
}

.p7-6 {
	width: 26%;
	left: 8.2%;
	top: 35.5%;
	animation: tada 2s 0s linear both infinite;
}

.p7-5 {
	width: 34.5%;
	left: 52.2%;
	top: 58.9%;
	cursor: move;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	/* z-index: 1; */
}

.p7-4 {
	width: 14.2%;
	left: 40.2%;
	top: 32.5%;
	z-index: 0;
}

.p7-3 {
	width: 6%;
	left: 51.1%;
	top: 73.2%;
	animation: flash 2s 0s linear both infinite;
}

.p7-2 {
	width: 13%;
	left: 56.2%;
	top: 57.7%;
	animation: flash 2s 0s linear both infinite;
}

.p7-1 {
	width: 11%;
	left: 11.2%;
	top: 43.1%;
	animation: pulse 2s 0s linear both infinite;
}

.p6-9 {
	width: 34.3%;
	left: 31.9%;
	top: 35.5%;
}

.p6-9-1 {
	width: 34.3%;
	left: 31.9%;
	top: 35.5%;
}

.p6-6 {
	width: 4%;
	left: 24.2%;
	top: 36.5%;
	animation: flash 2s 0s linear both infinite;
}

.p6-5 {
	width: 32.8%;
	left: 33.6%;
	top: 31.3%;
	/* 初始为从上到下完全隐藏（从顶部开始出现），配合 JS 逐渐“伸长” */
	/* clip-path: inset(0 0 100% 0); */
}

.p6-4 {
	position: absolute;
	width: 29.1%;
	height: 21vw;
	left: 3%;
	top: 4%;
	background: url('http://qiniu.cdjoie.com/2026/beizhuangjiaoxiang/img/scene/3/4.png?v=1.5');
	background-size: 100% 100%;
	/*background-color: red;*/
	transform: rotate(-43deg);
}


/*.p6-4 {
	width: 20.1%;
	left: 17.3%;
	top: 25.9%;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
}*/

.p6-3 {
	width: 25.6%;
	left: 41%;
	top: 1.1%;
	animation: tada 2s 0s linear both infinite;
}

.p6-2-1 {
	width: 19%;
	left: 49.6%;
	top: 7.7%;
	animation: tada 2s 0s linear both infinite;
}

.p6-2 {
	width: 24%;
	left: 49.6%;
	top: 7.7%;
	animation: tada 2s 0s linear both infinite;
}

.p6-1 {
	width: 11.2%;
	left: 9.1%;
	top: 42.6%;
	animation: pulse 2s 0s linear both infinite;
}

.p5-9 {
	width: 14%;
	left: 3%;
	top: 27.8%;
	animation: pulse 2s 0s linear both infinite;
}

.p5-8 {
	width: 76%;
	left: 9%;
	top: 57.5%;
}

.p5-7 {
	width: 76.1%;
	left: 8.8%;
	top: 31.7%;
}

.p5-6 {
	width: 75.1%;
	left: 9.6%;
	top: 9.1%;
}

.gift3 {
	position: absolute;
	width: 50%;
	height: 35vw;
	left: 20%;
	top: 66%;
	/*background-color: red;*/
}

.gift2 {
	position: absolute;
	width: 50%;
	height: 35vw;
	left: 20%;
	top: 40%;
	/*background-color: red;*/
}

.gift1 {
	position: absolute;
	width: 50%;
	height: 35vw;
	left: 20%;
	top: 17%;
	/*background-color: red;*/
}

.p5-5 {
	width: 19%;
	left: 64%;
	top: 48.8%;
	animation: tada 2s 0s linear both infinite;
	/*z-index: 10;*/
}

.p5-4 {
	width: 64%;
	left: 12%;
	top: 60.8%;
	animation: pulse 2s 0s linear both infinite;
}

.p5-3 {
	width: 64%;
	left: 12%;
	top: 35%;
	animation: pulse 2s 0s linear both infinite;
}

.p5-2 {
	width: 64%;
	left: 12%;
	top: 12%;
	animation: pulse 2s 0s linear both infinite;
}

.p5-1 {
	width: 11.2%;
	left: 3%;
	top: 41.3%;
	animation: pulse 2s 0s linear both infinite;
}

.p4-5 {
	height: 100%;
	left: 0%;
	top: 0%;
}

.p4-4 {
	width: 27%;
	left: 67%;
	top: 69%;
}

.p4-3 {
	width: 90%;
	left: 5%;
	top: 3%;
}

.p4-2 {
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
}

.musicBox2 {
	position: absolute;
	width: 41.5%;
	height: 41.3vw;
	left: 23.5%;
	top: 58.4%;
	animation: fadeInUp1 1s 0s linear both;
}

.musicBox1 {
	position: absolute;
	width: 41.5%;
	height: 41.3vw;
	left: 23.5%;
	top: 20.6%;
	animation: fadeInDown1 1s 0s linear both;
	/* background-color: red; */
}

.p4-1 {
	width: 11.6%;
	left: 8%;
	top: 40%;
	animation: pulse 2s 0s linear both infinite;
}

.p3-8 {
	width: 3.1%;
	left: 11%;
	top: 230px;
}

.p3-7 {
	width: 3.1%;
	left: 11.1%;
	top: 173px;
	animation: flash 2s 0s linear both infinite;
}
.hand5 {
	width: 11%;
	left: 53.5%;
	top: 9266px;
	animation: handPinch 1.2s ease-in-out infinite;
	transform-origin: 60% 20%; /* 以指尖附近为缩放中心，模拟“撮一撮” */
}
.p3-6 {
	width: 17.3%;
	left: 54.5%;
	top: 9302px;
	animation: pulse1 2s 0s linear both infinite;
}
.hand4 {
	width: 11%;
	left: 68.9%;
	top: 7680px;
	animation: handPinch 1.2s ease-in-out infinite;
	transform-origin: 60% 20%;
}
.p3-5 {
	width: 17.3%;
	left: 69.9%;
	top: 7714px;
	animation: pulse1 2s 0s linear both infinite;
}
.hand3 {
	width: 11%;
	left: 60%;
	top: 5967px;
	animation: handPinch 1.2s ease-in-out infinite;
	transform-origin: 60% 20%;
}
.p3-4 {
	width: 17.3%;
	left: 60.9%;
	top: 6001px;
	animation: pulse1 2s 0s linear both infinite;
}
.hand2 {
	width: 11%;
	left: 57.9%;
	top: 4790px;
	animation: handPinch 1.2s ease-in-out infinite;
	transform-origin: 60% 20%;
}
.p3-3 {
	width: 17.3%;
	left: 58.9%;
	top: 4826px;
	animation: pulse1 2s 0s linear both infinite;
}
.hand1 {
	width: 11%;
	left: 64.9%;
	top: 2546px;
	animation: handPinch 1.2s ease-in-out infinite;
	transform-origin: 60% 20%;
}
.p3-2 {
	width: 17.3%;
	left: 65.9%;
	top: 2582px;
	animation: pulse1 2s 0s linear both infinite;
}
.p3-1-1 {
	width: 7.5%;
	left: 71.1%;
	top: 408px;
}
.p3-1 {
	width: 66.6%;
	left: 15%;
	top: 196px;
	animation: slideInFromRight 8s linear forwards;
	clip-path: inset(0 0 0 100%);
}

.p3-0 {
	position: fixed;
	width: 7.4%;
	left: 5%;
	bottom: 15%;
	animation: slideInUp1 2s infinite linear both;
}

@-webkit-keyframes slideInUp1 {
	0% {
		-webkit-transform: translateY(500%);
		transform: translateY(500%);
		visibility: visible
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes slideInUp1 {
	0% {
		-webkit-transform: translateY(500%);
		-ms-transform: translateY(500%);
		transform: translateY(500%);
		visibility: visible
	}
	100% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0)
	}
}

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

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

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

.page3 {
	overflow-y: scroll !important;
}


/*.pagebg1 {
	width: 750px;
	height: 11432px;
}*/

.pagebg1,
.scrollBox {
	position: absolute;
	height: 11432px;
	width: 100%;
	left: 0;
	top: 0;
}

.p3-9 {
	position: fixed !important;
	width: 8%;
	right: 3%;
	bottom: 4%;
	z-index: 10;
}

.p2-2 {
	position: absolute;
	width: 8%;
	right: 12%;
	top: 14%;
	z-index: 10;
}

.p2-1,
.p4-6,
.p4-7,
.p5-10,
.p5-11,
.p6-7,
.p6-8,
.p7-8,
.p7-9,
.p8-7,
.p8-8 {
	position: absolute;
	width: 8%;
	right: 12%;
	bottom: 14%;
	z-index: 10;
}
.next{
	position: fixed !important;
	width: 8%;
	right: 4%;
	bottom: 4%;
	z-index: 10;
}
.p1-9 {
	position: fixed !important;
	width: 8%;
	right: 6%;
	bottom: 4%;
	z-index: 10;
}
.loadBox,
.page,
.pagebg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 1500px;
	overflow: hidden;
}

/*.video {
	position: absolute;
	height: 1500px;
	width: 842px;
	top: 0%;
	left: 50%;
	transform: translateX(-50%);
}*/
.video,.poster {
	position: absolute;
	height: 1151px;
	width: 646px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 35px;
}
.scene1-1,
.scene2-1,
.scene3-1,
.scene4-1,
.scene5-1{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: url("http://qiniu.cdjoie.com/2026/beizhuangjiaoxiang/img/videobg.jpg?v=1.2");
	background-size: 100% 100%;
}
.page2 {
	background: url("http://qiniu.cdjoie.com/2026/beizhuangjiaoxiang/img/videobg.jpg?v=1.2");
	background-size: 100% 100%;
}

.m20 {
	width: 7.2%;
	left: 80.2%;
	top: 9700px;
	animation: floatS 3.2s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.3s;
}

.m19 {
	width: 8.2%;
	left: 75.2%;
	top: 9449px;
	animation: floatS 3.6s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.5s;
}

.m18 {
	width: 7.2%;
	left: 75.2%;
	top: 10007px;
	animation: floatS 3.4s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.1s;
}

.m17 {
	width: 10.2%;
	left: 76.2%;
	top: 4665px;
	animation: floatS 3s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.7s;
}

.m16 {
	width: 7.2%;
	left: 78.2%;
	top: 9000px;
	animation: floatS 3.2s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.4s;
}

.m15 {
	width: 9.2%;
	left: 76.2%;
	top: 8349px;
	animation: floatS 3.6s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.2s;
}

.m14 {
	width: 8.2%;
	left: 73.2%;
	top: 7895px;
	animation: floatS 3.4s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.6s;
}

.m13 {
	width: 9.2%;
	left: 75.2%;
	top: 7355px;
	animation: floatS 3s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.3s;
}

.m12 {
	width: 7.2%;
	left: 79.2%;
	top: 6800px;
	animation: floatS 3.2s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.5s;
}

.m11 {
	width: 8.2%;
	left: 79.2%;
	top: 6449px;
	animation: floatS 3.6s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.1s;
}

.m10 {
	width: 8.2%;
	left: 74.2%;
	top: 5795px;
	animation: floatS 3.4s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.4s;
}

.m9 {
	width: 10.2%;
	left: 76.2%;
	top: 5561px;
	animation: floatS 3s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.7s;
}

.m8 {
	width: 7.2%;
	left: 78.2%;
	top: 5100px;
	animation: floatS 3.2s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.2s;
}

.m7 {
	width: 9.2%;
	left: 75.2%;
	top: 4249px;
	animation: floatS 3.6s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.6s;
}

.m6 {
	width: 9.2%;
	left: 78.2%;
	top: 3695px;
	animation: floatS 3.4s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.3s;
}

.m5 {
	width: 10.2%;
	left: 73.2%;
	top: 3156px;
	animation: floatS 3s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.5s;
}

.m4 {
	width: 7.2%;
	left: 81.2%;
	top: 2969px;
	animation: floatS 3.2s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.1s;
}

.m3 {
	width: 10.2%;
	left: 76.2%;
	top: 2249px;
	animation: floatS 3.6s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.4s;
}

.m2 {
	width: 9.2%;
	left: 77.2%;
	top: 1956px;
	animation: floatS 3.4s linear infinite;
	will-change: transform, opacity;
	animation-delay: 0.2s;
}

.m1 {
	width: 10.2%;
	left: 77.2%;
	top: 1800px;
	animation: floatS 3s linear infinite;
	will-change: transform, opacity;
}
.p1-8 {
	width: 66.6%;
	left: 15%;
	top: 196px;
	animation: slideInFromRight 8s linear forwards;
	clip-path: inset(0 0 0 100%);
}
.p1-6 {
	width: 7.2%;
	left: 1.2%;
	top: 37.9%;
	animation: fadeInLeft1 2.3s ease-in-out infinite;
}

.p1-7 {
	width: 7.2%;
	left: 67.2%;
	top: 80.9%;
	animation: fadeInLeft1 2.5s ease-in-out infinite;
}

.p1-5 {
	width: 7.2%;
	left: 43.2%;
	top: 91.9%;
	animation: fadeInLeft1 2.1s ease-in-out infinite;
}

.p1-4 {
	width: 10.2%;
	left: 24.2%;
	top: 86.9%;
	animation: fadeInLeft1 2.4s ease-in-out infinite;
}

.p1-3 {
	width: 9.2%;
	left: 21.2%;
	top: 83.9%;
	animation: fadeInLeft1 2.2s ease-in-out infinite;
}

.p1-2 {
	width: 12.2%;
	left: 12.2%;
	top: 43.9%;
	animation: fadeInLeft1 2s ease-in-out infinite;
}

.p1-1 {
	width: 10.2%;
	left: 13.2%;
	top: 13.9%;
	animation: pulse1 2s 0s linear both infinite;
}

@-webkit-keyframes slideInLeft1 {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		visibility: visible
	}
	100% {
		-webkit-transform: translateX(200%);
		transform: translateX(200%)
	}
}

@keyframes slideInLeft1 {
	0% {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
		visibility: visible
	}
	100% {
		-webkit-transform: translateX(200%);
		-ms-transform: translateX(200%);
		transform: translateX(200%)
	}
}

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

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

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

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


/* 气球飘动效果 - 真正流畅的S型飘动 */

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

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

.load2 {
	width: 7%;
	left: 74.3%;
	top: 23.6%;
}

.load1 {
	width: 61%;
	left: 29.3%;
	top: 5.9%;
}

.percentBox {
	position: absolute;
	width: 10px;
	height: 300px;
	left: 23.8%;
	top: 11.9%;
	background-color: #fff;
	border-radius: 10px;
}

.percentBoxInner {
	position: absolute;
	width: 100%;
	height: 0%;
	left: 0%;
	top: 0%;
	background-color: #53a583;
	border-radius: 10px;
}

.none {
	display: none;
}

.musicBtn,
.musicBtn1 {
	position: fixed !important;
	top: 2vh !important;
	right: 3% !important;
	width: 8% !important;
	z-index: 999 !important;
}

.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);
	}
}

.dialogue-tips {
	position: absolute;
	width: 70%;
	background: rgba(0, 0, 0, .6);
	border-radius: 20px;
	color: #fff;
	text-align: center;
	padding: 5%;
	font-size: 2rem;
	letter-spacing: 5px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

.dialogBox {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
	z-index: 999;
}

@-webkit-keyframes flash {
	0%,
	100%,
	50% {
		opacity: 1
	}
	25%,
	75% {
		opacity: 0
	}
}

@keyframes flash {
	0%,
	100%,
	50% {
		opacity: 1
	}
	25%,
	75% {
		opacity: 0
	}
}

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

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

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

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

@-webkit-keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
	50% {
		opacity: 1
	}
}

@keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		-ms-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
	50% {
		opacity: 1
	}
}

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

@-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
}

/* 手指撮一撮 动效：模拟连续两次轻点/捏合 */
@-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
}

.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 stamp {
	0% {
		opacity: 0;
		-webkit-transform: scale(1.3) translateY(-20px);
		transform: scale(1.3) translateY(-20px);
	}
	50% {
		opacity: 1;
		-webkit-transform: scale(0.95) translateY(5px);
		transform: scale(0.95) translateY(5px);
	}
	70% {
		-webkit-transform: scale(1.05) translateY(-2px);
		transform: scale(1.05) translateY(-2px);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0);
	}
}

@keyframes stamp {
	0% {
		opacity: 0;
		transform: scale(1.3) translateY(-20px);
		-ms-transform: scale(1.3) translateY(-20px);
		-webkit-transform: scale(1.3) translateY(-20px);
	}
	50% {
		opacity: 1;
		transform: scale(0.95) translateY(5px);
		-ms-transform: scale(0.95) translateY(5px);
		-webkit-transform: scale(0.95) translateY(5px);
	}
	70% {
		transform: scale(1.05) translateY(-2px);
		-ms-transform: scale(1.05) translateY(-2px);
		-webkit-transform: scale(1.05) translateY(-2px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
		-ms-transform: scale(1) translateY(0);
		-webkit-transform: scale(1) translateY(0);
	}
}

.stamp {
	-webkit-animation-name: stamp;
	animation-name: stamp;
	animation-duration: 0.6s;
	animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	animation-fill-mode: forwards;
}

@-webkit-keyframes floatRight {
	0% {
		-webkit-transform: translateX(0) rotate(0deg);
		transform: translateX(0) rotate(0deg);
	}
	25% {
		-webkit-transform: translateX(60px) rotate(3deg);
		transform: translateX(60px) rotate(3deg);
	}
	50% {
		-webkit-transform: translateX(120px) rotate(0deg);
		transform: translateX(120px) rotate(0deg);
	}
	75% {
		-webkit-transform: translateX(180px) rotate(-3deg);
		transform: translateX(180px) rotate(-3deg);
	}
	100% {
		-webkit-transform: translateX(240px) rotate(0deg);
		transform: translateX(240px) rotate(0deg);
	}
}

@keyframes floatRight {
	0% {
		transform: translateX(0) rotate(0deg);
		-ms-transform: translateX(0) rotate(0deg);
		-webkit-transform: translateX(0) rotate(0deg);
	}
	25% {
		transform: translateX(60px) rotate(3deg);
		-ms-transform: translateX(60px) rotate(3deg);
		-webkit-transform: translateX(60px) rotate(3deg);
	}
	50% {
		transform: translateX(120px) rotate(0deg);
		-ms-transform: translateX(120px) rotate(0deg);
		-webkit-transform: translateX(120px) rotate(0deg);
	}
	75% {
		transform: translateX(180px) rotate(-3deg);
		-ms-transform: translateX(180px) rotate(-3deg);
		-webkit-transform: translateX(180px) rotate(-3deg);
	}
	100% {
		transform: translateX(240px) rotate(0deg);
		-ms-transform: translateX(240px) rotate(0deg);
		-webkit-transform: translateX(240px) rotate(0deg);
	}
}