/* 重置默认样式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

li {
	list-style: none;
}

:root {
	--vw: 100vw / 750;
	/* 750设计稿1px = calc(1 * var(--vw)) */
}

/* 核心：整屏不可滑动 */
html,
body {
	height: 100vh;
	overflow: hidden;
	font-size: 16px;
	font-family: "Microsoft Yahei", sans-serif;
}

/* 页面容器：基于750px设计稿等比适配 */
.page-container {
	width: 100vw;
	height: 100vh;
	position: relative;
	aspect-ratio: 750 / 1334;
	margin: 0 auto;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.page {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	flex-direction: column;
	align-items: center;
	display: none;
	width: 100vw;
	height: 100vh;
	z-index: 99;
}

.djjr {
	margin-top: 50vh;
	width: calc(275 * var(--vw));
	height: calc(82 * var(--vw));
	background: url(../images/i-btn.png) 0 0 / 100% 100% no-repeat;
}

.page0 img,
.page1 img,
.page2 img,
.page3 img,
.page4 img {
	width: 100vw;
	height: 100vh;
	position: absolute;
	z-index: -1;
	object-fit: cover;
}

/* 旋转动画：播放时生效 */
@keyframes musicRotate {
	0% {
		transform: rotate(0deg);
	}

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

/* 播放状态：添加旋转动画 */
.music.playing {
	animation: musicRotate 3s linear infinite;
}

/* 标题：设计稿中字体48px，距顶部150px */
.title {
	margin-top: calc(40 * var(--vw));
	width: calc(523 * var(--vw));
	height: calc(34 * var(--vw));
	background: url(../images/load-txt.png) 0 0 / 100% 100% no-repeat;
}

/* 进度条容器：设计稿中宽度600px，高度40px，圆角20px */
.progress-container {
	position: relative;
	display: flex;
	align-items: center;
	height: calc(40 * var(--vw));
	width: calc(575 * var(--vw));
	/* overflow: hidden; */
	background: #F26000;
	position: relative;
	background-size: 100% 100%;
	border-radius: calc(40 * var(--vw));
	overflow: hidden;
}

.progress-box {
	margin-top: 50vh;
	position: relative;
	height: calc(40 * var(--vw));
	width: calc(575 * var(--vw));
}

.progress-box::after {
	position: absolute;
	right: calc(-45 * var(--vw));
	top: calc(-30 * var(--vw));
	content: '';
	width: calc(112 * var(--vw));
	height: calc(111 * var(--vw));
	background: url(../images/pt4.png) 0 0 / 100% 100% no-repeat;
	z-index: 10;
}

.progress-bar {
	position: relative;
	margin: 0 calc(5 * var(--vw));
	height: calc(30 * var(--vw));
	width: 0;
	/* 初始宽度为0，通过JS动态更新 */
	transition: width 0.3s linear;
	/* 平滑过渡 */
}

.jdt {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	height: 100%;
	width: 100%;
	border-radius: calc(40 * var(--vw));
	background: linear-gradient(to bottom, #ffff60, #ffff4e, #fff81a, #fff81a, #fff81a, #fff81a, #fff81a);
	transition: linear 0.5s ease;
	background-size: 100% 100%;
	box-shadow: 0 0 calc(10 * var(--vw)) #E5D8BA;
	z-index: 2;
}

.progress-bar::after {
	position: absolute;
	content: '';
	margin-left: calc(10 * var(--vw));
	top: calc(5 * var(--vw));
	width: 80%;
	height: calc(10 * var(--vw));
	background: rgba(255, 255, 255, .7);
	border-radius: calc(40 * var(--vw));
	z-index: 4;
}

.progress-bar::before {
	position: absolute;
	content: '';
	top: 50%;
	right: calc(-23 * var(--vw));
	transform: translate(0, -50%);
	width: calc(73 * var(--vw));
	height: calc(74 * var(--vw));
	background: url(../images/round.png) 0 0 / 100% 100% no-repeat;
	z-index: 1;
}

/* 进度文本：显示当前进度百分比 */
.progress-text {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/dj.jpg) 0 0 / 100% 100% no-repeat;
	opacity: .15;
	z-index: 3;
}

/* page2 */
.page2 .dlpt {
	position: absolute;
	left: 50%;
	/* 合并居中位移+动画缩放，解决transform属性冲突，保证居中且动画生效 */
	transform: translate(-50%, 0) scale(.88);
	bottom: 14%;
	width: calc(331 * var(--vw));
	height: calc(120 * var(--vw));
	background: url(../images/dlpt.png) 0 0 / 100% 100% no-repeat;
	z-index: 10;
	animation: dlptBreath 1.5s ease-in-out infinite alternate;
}

@keyframes dlptBreath {
	0% {
		transform: translate(-50%, 0) scale(.9);
	}

	100% {
		transform: translate(-50%, 0) scale(1.05);
	}
}

.page0 .logo,
.page1 .logo,
.page2 .logo {
	position: absolute;
	left: 50%;
	top: calc(110 * var(--vw));
	transform: translate(-50%, 0);
	width: calc(578 * var(--vw));
	height: calc(219 * var(--vw));
	background: url(../images/logo.png) 0 0 / 100% 100% no-repeat;
	z-index: 10;
}

.music {
	position: absolute;
	width: calc(50 * var(--vw));
	height: calc(64 * var(--vw));
	z-index: 999;
	right: calc(20 * var(--vw));
	top: calc(40 * var(--vw));
	background: url(../images/music.png) 0 0 / 100% 100% no-repeat;
}

.page2 .hdgz {
	position: absolute;
	right: 0;
	top: 46.2%;
	width: calc(172 * var(--vw));
	height: calc(148 * var(--vw));
	background: url(../images/hdgz.png) 0 0 / 100% 100% no-repeat;
}

.hdgz_detail,
.pop {
	display: none;
	position: absolute;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, .6);
	z-index: 1000;
}

.hdgz_box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(675 * var(--vw));
	height: calc(1031 * var(--vw));
	background: url(../images/hdgz_box.png) 0 0 / 100% 100% no-repeat;
	opacity: 0;
}

.hdgz_box .close {
	position: absolute;
	top: calc(-30 * var(--vw));
	right: calc(-30 * var(--vw));
	width: calc(119 * var(--vw));
	height: calc(119 * var(--vw));
	background: url(../images/close.png) 0 0 / 100% 100% no-repeat;
}

.hdgz_box .pt1 {
	position: absolute;
	top: calc(-50 * var(--vw));
	left: calc(-10 * var(--vw));
	width: calc(144 * var(--vw));
	height: calc(145 * var(--vw));
	background: url(../images/pt1.png) 0 0 / 100% 100% no-repeat;
}

.hdgz_box .pt2 {
	position: absolute;
	bottom: calc(-50 * var(--vw));
	right: calc(-30 * var(--vw));
	width: calc(258 * var(--vw));
	height: calc(195 * var(--vw));
	background: url(../images/pt2.png) 0 0 / 100% 100% no-repeat;
}

.hdgz_box p {
	margin: calc(220 * var(--vw)) auto 0;
	width: calc(551 * var(--vw));
	height: calc(700 * var(--vw));
	text-align: justify;
	font-size: calc(27 * var(--vw));
	color: #C52622;
	overflow-y: auto;
	line-height: calc(40 * var(--vw));
}

.hdgz_box p span {
	display: block;
	margin-bottom: calc(20 * var(--vw));
}

/* 第三屏 */
.page3 .hdgz2 {
	position: absolute;
	right: calc(70 * var(--vw));
	top: calc(30 * var(--vw));
	width: calc(219 * var(--vw));
	height: calc(87 * var(--vw));
	background: url(../images/hdgz2.png) 0 0 / 100% 100% no-repeat;
}

.page3 .back_box {
	position: absolute;
	left: calc(20 * var(--vw));
	top: calc(20 * var(--vw));
	color: #E21D25;

}

.page3 .back {
	width: calc(126 * var(--vw));
	height: calc(124 * var(--vw));
	background: url(../images/back.png) 0 0 / 100% 100% no-repeat;
}

.page3 .back_box p {
	margin-top: calc(-15 * var(--vw));
	margin-left: calc(26 * var(--vw));
	font-size: calc(24 * var(--vw));
}

.page3 .page3_msg {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.page3 .page3_msg .tit {
	width: calc(705 * var(--vw));
	height: calc(78 * var(--vw));
	background: url(../images/tit2.png) 0 0 / 100% 100% no-repeat;
}

.page3 .page3_msg .jd {
	margin-top: calc(-10 * var(--vw));
	width: calc(502 * var(--vw));
	height: calc(112 * var(--vw));
	background: url(../images/jd.png) 0 0 / 100% 100% no-repeat;
}

.logo2 {
	margin-top: calc(10 * var(--vw));
	margin-bottom: calc(20 * var(--vw));
	width: calc(314 * var(--vw));
	height: calc(23 * var(--vw));
	background: url(../images/logo2.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box {
	margin-bottom: calc(60 * var(--vw));
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	width: calc(651 * var(--vw));
	height: calc(972 * var(--vw));
}

.page3 .pt_box::after {
	position: absolute;
	top: 0;
	content: '';
	top: calc(-5 * var(--vw));
	left: calc(-16 * var(--vw));
	width: calc(692 * var(--vw));
	height: calc(1030 * var(--vw));
	background: url(../images/shadow.png) 0 0 / 100% 100% no-repeat;
}

.page3_content {
	padding-top: calc(123 * var(--vw));
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.page3 .pt_box div {
	position: relative;
	margin-right: calc(-40 * var(--vw));
	z-index: 1;
}

.page3 .pt_box div:nth-child(3n - 1) {
	z-index: 2;
}

.page3 .pt_box div:nth-child(3n) {
	z-index: 3;
}

.page3 .pt_box .nn {
	width: calc(240 * var(--vw));
	height: calc(196 * var(--vw));
	background: url(../images/nn.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .nn.active {
	background: url(../images/nn_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .lz {
	width: calc(240 * var(--vw));
	height: calc(196 * var(--vw));
	background: url(../images/lz.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .lz.active {
	background: url(../images/lz_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .gl {
	width: calc(240 * var(--vw));
	height: calc(196 * var(--vw));
	background: url(../images/gl.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .gl.active {
	background: url(../images/gl_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .wz {
	margin-top: calc(-35 * var(--vw));
	width: calc(240 * var(--vw));
	height: calc(196 * var(--vw));
	background: url(../images/wz.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .wz.active {
	background: url(../images/wz_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .yqp {
	margin-top: calc(-35 * var(--vw));
	width: calc(244 * var(--vw));
	height: calc(178 * var(--vw));
	background: url(../images/yqp1.png) 0 0 / 100% 100% no-repeat;
	z-index: 4 !important;
}



.page3 .pt_box .bh {
	margin-top: calc(-35 * var(--vw));
	width: calc(240 * var(--vw));
	height: calc(196 * var(--vw));
	background: url(../images/bh.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .bh.active {
	background: url(../images/bh_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .qz {
	margin-top: calc(-35 * var(--vw));
	width: calc(243 * var(--vw));
	height: calc(196 * var(--vw));
	background: url(../images/qz.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .qz.active {
	background: url(../images/qz_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .yqp2 {
	margin-top: calc(-18 * var(--vw));
	width: calc(244 * var(--vw));
	height: calc(178 * var(--vw));
	background: url(../images/yqp2.png) 0 0 / 100% 100% no-repeat;
	z-index: 4 !important;
}

.page3 .pt_box .yqp2.active {
	background: url(../images/yqp2_active.png) 0 0 / 100% 100% no-repeat;
	z-index: 4 !important;
}

.page3 .pt_box .fcg {
	margin-top: calc(-35 * var(--vw));
	width: calc(240 * var(--vw));
	height: calc(197 * var(--vw));
	background: url(../images/fcg.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .fcg.active {
	background: url(../images/fcg_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .gg {
	margin-top: calc(-35 * var(--vw));
	width: calc(247 * var(--vw));
	height: calc(197 * var(--vw));
	background: url(../images/gg.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .gg.active {
	background: url(../images/gg_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .yl {
	margin-top: calc(-35 * var(--vw));
	width: calc(240 * var(--vw));
	height: calc(197 * var(--vw));
	background: url(../images/yl.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .yl.active {
	background: url(../images/yl_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .bs {
	margin-top: calc(-35 * var(--vw));
	width: calc(247 * var(--vw));
	height: calc(197 * var(--vw));
	background: url(../images/bs.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .bs.active {
	background: url(../images/bs_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .hz {
	margin-top: calc(-35 * var(--vw));
	width: calc(240 * var(--vw));
	height: calc(197 * var(--vw));
	background: url(../images/hz.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .hz.active {
	background: url(../images/hz_active.png) 0 0 / 100% 100% no-repeat;
	transform-origin: top center;
	transition: transform 0.1s ease;
}

/* 补充剩余拼图的.active样式（dzq1/dzq2/hc/lb/cz） */
.page3 .pt_box .dzq1 {
	margin-top: calc(-35 * var(--vw));
	width: calc(240 * var(--vw));
	height: calc(178 * var(--vw));
	background: url(../images/dzq1.png) 0 0 / 100% 100% no-repeat;
	z-index: 5 !important;
}

.page3 .pt_box .dzq1.active {
	background: url(../images/dzq1_active.png) 0 0 / 100% 100% no-repeat;
	z-index: 4 !important;
}

.page3 .pt_box .dzq2 {
	margin-top: calc(-20 * var(--vw));
	width: calc(240 * var(--vw));
	height: calc(178 * var(--vw));
	background: url(../images/dzq2.png) 0 0 / 100% 100% no-repeat;
	z-index: 5 !important;
}

.page3 .pt_box .dzq2.active {
	background: url(../images/dzq2_active.png) 0 0 / 100% 100% no-repeat;
	z-index: 4 !important;
}

.page3 .pt_box .hc {
	margin-top: calc(-35 * var(--vw));
	width: calc(245 * var(--vw));
	height: calc(197 * var(--vw));
	background: url(../images/hc.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .hc.active {
	background: url(../images/hc_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .lb {
	margin-top: calc(-35 * var(--vw));
	width: calc(245 * var(--vw));
	height: calc(197 * var(--vw));
	background: url(../images/lb.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .lb.active {
	background: url(../images/lb_active.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .cz {
	margin-top: calc(-35 * var(--vw));
	width: calc(240 * var(--vw));
	height: calc(197 * var(--vw));
	background: url(../images/cz.png) 0 0 / 100% 100% no-repeat;
}

.page3 .pt_box .cz.active {
	background: url(../images/cz_active.png) 0 0 / 100% 100% no-repeat;
}

/* 定义左右摇晃的关键帧动画 */
@keyframes shakeTop {
	0% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(-5deg);
	}

	/* 向左微摇2度 */
	50% {
		transform: rotate(0deg);
	}

	75% {
		transform: rotate(5deg);
	}

	/* 向右微摇2度 */
	100% {
		transform: rotate(0deg);
	}
}

/* 摇晃动画类 - 点击时添加 */
.hz-shake {
	animation: shakeTop 0.5s ease-in-out 1;
	/* 动画时长0.5s，执行1次 */
}







.pop_box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(636 * var(--vw));
	height: calc(1255 * var(--vw));
	/* background: url(../images/pop.png) 0 0 / 100% 100% no-repeat; */
	opacity: 0;
	/* 初始透明，配合动画渐显 */
}

/* 2. 新增动画激活类，触发时添加 */
.pop_box.animate-pop {
	animation: pop 0.5s linear forwards;
	/* linear线性动画，forwards保留最终状态 */
}

.animate-pop {
	animation: pop 0.5s linear forwards;
}

@keyframes pop {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.8);
		/* 加上translate，保证居中 */
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.pop .close2 {
	position: absolute;
	top: calc(-25 * var(--vw));
	left: calc(-25 * var(--vw));
	width: calc(74 * var(--vw));
	height: calc(74 * var(--vw));
	background: url(../images/close2.png) 0 0 / 100% 100% no-repeat;
	z-index: 3;
}

.pop img {
	width: calc(614 * var(--vw));
	height: calc(1093 * var(--vw));
	object-fit: cover;
}

.pop .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: calc(10 * var(--vw));
	border: calc(14 * var(--vw)) solid #fff;
	overflow: hidden;
}

.pop .swiper {
	/* margin: calc(100 * var(--vw)) auto 0; */
	width: calc(642 * var(--vw));
	height: calc(1121 * var(--vw));
	overflow: hidden;
	box-shadow: calc(25 * var(--vw)) calc(25 * var(--vw)) calc(25 * var(--vw)) rgba(0, 0, 0, .4);
}

.pop .popbtn {
	width: calc(302 * var(--vw));
	height: calc(128 * var(--vw));
	background: url(../images/btn.png) 0 0 / 100% 100% no-repeat;
}

.pop .btn_box {
	margin: calc(40 * var(--vw)) auto 0;
	width: 95%;
	display: flex;
	justify-content: space-between;
}

.pop .btn_box .zf {
	margin-right: calc(10 * var(--vw));
	width: calc(61 * var(--vw));
	height: calc(62 * var(--vw));
	background: url(../images/zf.png) 0 0 / 100% 100% no-repeat;
}

.pop .btn_box .popbtn {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(25.32 * var(--vw));
	color: #26b4bb;
	padding-bottom: calc(5 * var(--vw));
}

.pop .btn_box .popbtn span {
	color: #dd5830;
}

.pop .arrow_l {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -80%) rotate(180deg);
	width: calc(94 * var(--vw));
	height: calc(125 * var(--vw));
	background: url(../images/arrow.png) 0 0 / 100% 100% no-repeat;
	z-index: 10;
}

.pop .arrow_r {
	position: absolute;
	top: 50%;
	transform: translate(0, -80%);
	right: 0;
	width: calc(94 * var(--vw));
	height: calc(125 * var(--vw));
	background: url(../images/arrow.png) 0 0 / 100% 100% no-repeat;
	z-index: 10;
}

.pop .fishBtn1,
.pop .fishBtn3 {
	margin: calc(10 * var(--vw)) auto 0;
	width: calc(304 * var(--vw));
	height: calc(113 * var(--vw));
	background: url(../images/xzhb.png) 0 0 / 100% 100% no-repeat;
	display: none;
}

.pop .fishBtn2,
.pop .fishBtn4 {
	margin: calc(10 * var(--vw)) auto 0;
	width: calc(304 * var(--vw));
	height: calc(113 * var(--vw));
	background: url(../images/zfpyq.png) 0 0 / 100% 100% no-repeat;
	display: none;
}

/* 打卡记录区 */
.dk_tit {
	margin: calc(20 * var(--vw)) auto 0;
	width: calc(539 * var(--vw));
	height: calc(238 * var(--vw));
	background: url(../images/dk_tit.png) 0 0 / 100% 100% no-repeat;
}

.page4 .dk_content {
	margin-top: calc(-80 * var(--vw));
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	border: calc(10 * var(--vw)) solid #FFE0B3;
	width: calc(692 * var(--vw));
	height: calc(354 * var(--vw));
	border-radius: calc(30 * var(--vw));
	background: #fff;
}

.page4 .dk_content::after {
	position: absolute;
	bottom: calc(-26 * var(--vw));
	right: calc(-26 * var(--vw));
	width: calc(96 * var(--vw));
	height: calc(97 * var(--vw));
	background: url(../images/pt3.png) 0 0 / 100% 100% no-repeat;
	content: '';
	z-index: 10;
}

.page4 .dk_content .jd_box {
	margin-top: calc(34 * var(--vw));
	display: flex;
	align-items: center;
	padding: 0 calc(18 * var(--vw));
	justify-content: space-between;
	width: calc(644 * var(--vw));
	height: calc(97 * var(--vw));
	border-radius: calc(10 * var(--vw));
	border: calc(5 * var(--vw)) solid #F24B19;
}

.page4 .dk_content .jd_box li {
	width: calc(27 * var(--vw));
	height: calc(65 * var(--vw));
	background: #DFD3D1;
}

.page4 .dk_content .jd_box .active {
	background: #F24B19;
}

.page4 .dk_content .day {
	margin-top: calc(38 * var(--vw));
	position: relative;
	width: calc(548 * var(--vw));
	height: calc(62 * var(--vw));
	background: url(../images/day.png) 0 0 / 100% 100% no-repeat;
	color: #5c9ce4;
}

.page4 .dk_content p {
	position: absolute;
	bottom: calc(-10 * var(--vw));
	font-size: calc(74.29 * var(--vw));
	font-weight: 700;
}

.page4 .dk_content .pt {
	margin-top: calc(20 * var(--vw));
	position: relative;
	width: calc(411 * var(--vw));
	height: calc(62 * var(--vw));
	background: url(../images/days.png) 0 0 / 100% 100% no-repeat;
	color: #FFA328;
}

.page4 .dk_content .day p {
	width: calc(92 * var(--vw));
	left: calc(400 * var(--vw));
	text-align: center;
}

.page4 .dk_content .pt p {
	width: calc(92 * var(--vw));
	left: calc(187 * var(--vw));
	bottom: calc(-13 * var(--vw));
	text-align: center;
}

.page4 .zsq_tit {
	margin-top: calc(40 * var(--vw));
	width: calc(530 * var(--vw));
	height: calc(85 * var(--vw));
	background: url(../images/zsq.png) 0 0 / 100% 100% no-repeat;
}

.page4 .hz {
	margin-top: calc(30 * var(--vw));
	width: calc(350 * var(--vw));
	height: calc(505 * var(--vw));
	background: url(../images/dzhz.png) 0 0 / 100% 100% no-repeat;
}

.page4 .hz.active {
	background: url(../images/dzhz_active.png) 0 0 / 100% 100% no-repeat;
}

.page4 .back2 {
	margin-top: calc(0 * var(--vw));
	width: calc(329 * var(--vw));
	height: calc(121 * var(--vw));
	background: url(../images/back2.png) 0 0 / 100% 100% no-repeat;
}

.page4_box {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100vw;
	height: 100vh;
	z-index: 99;
}

/* 登录提示 */
/* .page1 {
	display: flex;
}
 */
/* 粒子样式基础 */
.particle {
	border-radius: 50%;
	pointer-events: none;
	/* 防止粒子阻挡鼠标事件 */
	opacity: 1;
	z-index: 9999;
	transition: opacity 0.2s ease-out;
	background-size: 100% 100%;
	/* 加快透明度过渡 */
	position: fixed;
	pointer-events: none;
	background-size: contain;
	background-repeat: no-repeat;
}

/*  */
.custom-tip {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 12px 24px;
	border-radius: 6px;
	color: white;
	z-index: 99999;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	background: #f53f3f
}

.custom-tip {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 12px 20px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 8px;
	z-index: 9999;
	opacity: 1;
	transition: opacity 0.3s ease;
}

/* 粒子 */
/* 粒子样式 */
/* .particle-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
} */

.particle2 {
	position: absolute;
	animation: goldenBreath 3s infinite ease-in-out;
}

/* 金色待点亮呼吸动画（微弱、缓慢，符合待点亮逻辑） */
@keyframes goldenBreath {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0.1;
		/* 初始极弱亮度 */
	}

	50% {
		transform: translate(var(--x-move), var(--y-move)) scale(1.8);
		opacity: 0.8;
		/* 中等亮度，未完全点亮 */
	}

	100% {
		transform: translate(var(--x-move-end), var(--y-move-end)) scale(1);
		opacity: 0.1;
	}
}

#pop2 {
	display: none;
}

/* .page3 .pt_box .clickable .particle-container {
	position: absolute;
	top: 5%;
	left: 0;
	height: calc(196 * var(--vw));
	right: calc(60 * var(--vw));
	bottom: 0;
	background: radial-gradient(circle, #ff3333 0%, #ffffff 30%, transparent 60%);
	opacity: 0;
	transition: opacity 1.5s linear;
	transform: translate(0, -50%);
	z-index: 2;
	pointer-events: none;
	animation: redWhiteBreath 2s ease-in-out infinite alternate;
}

.page3 .pt_box .dzq1 .particle-container {
	top: 56%;
	z-index: 100 !important;
} */

/* 定义红白呼吸动画关键帧 */
@keyframes redWhiteBreath {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	100% {
		opacity: 0.6;
		transform: scale(1.2);
	}
}

/* .pt_box .clickable .particle-container {
	position: absolute;
	z-index: 9;
	width: 100%;
	height: 100%;
	animation: scaleBreath 2s linear infinite alternate;
	transform: translateZ(0);
	pointer-events: none;
} */

/* .nn .particle-container {
	background: url(../images/nn.png) 0 0 / 100% 100% no-repeat;
}

.lz .particle-container {
	background: url(../images/lz.png) 0 0 / 100% 100% no-repeat;
}

.gl .particle-container {
	background: url(../images/gl.png) 0 0 / 100% 100% no-repeat;
}

.wz .particle-container {
	background: url(../images/wz.png) 0 0 / 100% 100% no-repeat;
}

.bh .particle-container {
	background: url(../images/bh.png) 0 0 / 100% 100% no-repeat;
}

.fcg .particle-container {
	background: url(../images/fcg.png) 0 0 / 100% 100% no-repeat;
}

.qz .particle-container {
	background: url(../images/qz.png) 0 0 / 100% 100% no-repeat;
}

.gg .particle-container {
	background: url(../images/gg.png) 0 0 / 100% 100% no-repeat;
}

.yl .particle-container {
	background: url(../images/yl.png) 0 0 / 100% 100% no-repeat;
}

.bs .particle-container {
	background: url(../images/bs.png) 0 0 / 100% 100% no-repeat;
}

.hz .particle-container {
	background: url(../images/hz.png) 0 0 / 100% 100% no-repeat;
}

.hc .particle-container {
	background: url(../images/hc.png) 0 0 / 100% 100% no-repeat;
}

.lb .particle-container {
	background: url(../images/lb.png) 0 0 / 100% 100% no-repeat;
}

.cz .particle-container {
	background: url(../images/cz.png) 0 0 / 100% 100% no-repeat;
}

.pt_box .dzq1.clickable .particle-container {
	width: calc(243 * var(--vw));
	height: calc(345 * var(--vw));
	background: url(../images/dzq.png) 0 0 / 100% 100% no-repeat;
	animation: scaleBreath2 2s linear infinite alternate;
	transform: translateZ(0);
} */

.pt_box .dzq1.active .particle-container {
	display: none;
}

.page3 .pt_box .bgNone {
	background: none;
}

.page3 .pt_box .yqp_active .particle-container {
	margin-top: calc(5 * var(--vw));
	width: calc(255 * var(--vw));
	height: calc(345 * var(--vw));
	background: url(../images/dlgx.png) 0 0 / 100% 100% no-repeat;
	animation: scaleBreath2 2s linear infinite alternate;
	transform: translateZ(0);
}

.page3 .pt_box .yqp_active {
	background: none;
}

/* .dzq2 .particle-container {
	background: url(../images/dzq2.png) 0 0 / 100% 100% no-repeat;
} */
/* .page3 .pt_box .clickable {
	background: none !important;
} */

@keyframes scaleBreath2 {
	0% {
		transform: scale(.95);
	}

	100% {
		transform: scale(1.05);
	}
}

/* 定义放大缩小动画关键帧 */
@keyframes scaleBreath {
	0% {
		transform: scale(.88);
	}

	100% {
		transform: scale(1.05);
	}
}

.pop .arrow_r,
.pop .arrow_l {
	display: none;
}

.hd_img {
	display: none;
	position: absolute;
	left: 50%;
	top: 30vh;
	transform: translate(-50%, 0%);
	width: calc(300 * var(--vw)) !important;
	height: calc(227 * var(--vw)) !important;
	background: url(../images/hd.gif) 0 0 / 100% 100% no-repeat !important;
	z-index: 3;
}