.super-card {
	display: flex;
	/* justify-content: center; */
	width: 100%;
	height: calc(100% - 400rpx);

	.scroll-x {
		height: 100%;
		width: 100%;
	}

	.right-cards {
		width: 465rpx;
		height: 1190rpx;
		/* border-radius: 20rpx; */
		border: 2rpx solid #fff;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		.scroll-box {
			width: 100%;
			height: 290rpx;

			.right-box {
				height: 350rpx;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-content: flex-start;

				.right-box-item {
					margin: 10rpx 0 0 10rpx;
					width: 120rpx;
					height: 128rpx;
					border-radius: 20rpx;
					background-color: #fff;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.right-box-img {
						width: 55rpx;
						height: 55rpx;
					}

					.right-box-font {
						font-size: 20rpx;
						margin-top: -10rpx;
					}

					.right-box-items {
						display: flex;
						justify-content: space-around;
						align-items: center;

						.right-box-items-button {
							width: 25rpx;
							height: 25rpx;
							margin: 0 3rpx;
						}
					}
				}

				.title-time-button {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					width: 50rpx;
					height: 45rpx;
				}

				.title-time-font {
					position: absolute;
					top: 5rpx;
					right: 3rpx;
					font-size: 17rpx;
					color: #fff;
				}
			}
		}
	}

	.time-father {
		border-radius: 20rpx;
		height: 97%;
		width: 95%;
		margin-top: 6%;
		margin-left: 6%;
		background-color: rgba(255, 255, 255, 0.3);

		.time-button {
			width: 140rpx;
			height: 60rpx;
			margin-top: 30rpx;
			margin-left: 30rpx;
			border-radius: 20rpx;
			background-color: rgb(54, 159, 239);
			border: 5rpx solid rgb(54, 159, 239);
			display: flex;

			.time-button-month {
				width: 50%;
				height: 100%;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.time-button-month-target {
				width: 50%;
				height: 100%;
				background-color: #fff;
				color: rgb(54, 159, 239);
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom-left-radius: 15rpx;
				border-top-left-radius: 15rpx;
			}

			.time-button-week-target {
				width: 50%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
			}

			.time-button-week {
				width: 50%;
				height: 100%;
				color: rgb(54, 159, 239);
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				border-bottom-right-radius: 15rpx;
				border-top-right-radius: 15rpx;
			}
		}
	}

	.under-button {
		width: 440rpx;
		height: 95rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		border-radius: 20rpx;
		background-color: rgb(229, 233, 249);
		display: flex;
		align-items: center;

		.white-circle-click-father {
			position: relative;
			margin-left: 20rpx;
			color: white;
			margin-top: 10rpx;

			.white-circle-click {
				width: 170rpx;
				height: 70rpx;
			}

			.white-circle-font {
				position: absolute;
				top: 15rpx;
				left: 60rpx;
			}
		}

		.white-circle {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin-left: 10rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

			.white-circle-img {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.middle-box {
		width: 100%;
		height: 780rpx;
		/* background-color: red; */
		display: flex;
		overflow: hidden;

		/* 小容器 */
		.bad-circle-up {
			position: absolute;
			top: -20rpx;
			left: 15rpx;
			width: 20rpx;
			height: 20rpx;
			background-color: rgb(229, 233, 249);
			-webkit-mask-image: radial-gradient(circle farthest-side at 100% 0, transparent calc(100% - 1px), black 100%);
			mask-image: radial-gradient(circle farthest-side at 100% 0, transparent calc(100% - 1px), black 100%);
		}

		.bad-circle-down {
			position: absolute;
			bottom: -20rpx;
			left: 15rpx;
			width: 20rpx;
			height: 20rpx;
			background-color: rgb(229, 233, 249);
			-webkit-mask-image: radial-gradient(circle farthest-side at 100% 100%, transparent calc(100% - 1px), black 100%);
			mask-image: radial-gradient(circle farthest-side at 100% 100%, transparent calc(100% - 1px), black 100%);
		}

		.middle-left-box {
			margin-left: 10rpx;
			width: 340rpx;
			height: 782rpx;
			border-radius: 20rpx;
			background-color: rgb(229, 233, 249);
			display: flex;

			.first-contant {
				height: 100%;
				width: 210rpx;

				.right-box-item {
					margin: 10rpx 0 0 10rpx;
					width: 190rpx;
					height: 128rpx;
					border-radius: 20rpx;
					background-color: rgba(255, 255, 255, 0.3);
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					box-shadow: 1rpx 1rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);
					overflow: hidden;

					.right-box-img {
						width: 55rpx;
						height: 55rpx;
					}

					.title-time-button {
						position: absolute;
						top: -3rpx;
						right: -3rpx;
						width: 50rpx;
						height: 45rpx;

					}

					.right-box-font {
						font-size: 23rpx;
						/* margin-top: -10rpx; */
					}

					.title-time-zhejiao {
						position: absolute;
						top: 0rpx;
						left: 5rpx;
						width: 40rpx;
						height: 40rpx;
					}

					.title-time-font {
						position: absolute;
						top: 3rpx;
						right: 5rpx;
						font-size: 20rpx;
						color: #fff;
					}

					.right-box-items {
						display: flex;
						justify-content: space-around;
						align-items: center;

						.right-box-items-button {
							width: 25rpx;
							height: 25rpx;
							margin: 0 3rpx;
						}
					}
				}
			}

			.second-contant {
				height: 100%;
				width: 140rpx;

				.downList-box-target {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #fff;
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
					flex-direction: column;
					box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(54, 159, 239, 0.1);
					border: 2rpx solid rgb(54, 159, 239);

					.downList-box-img {
						height: 50rpx;
						width: 50rpx;
					}

					.downList-box-text {
						font-size: 20rpx;
						color: rgb(54, 159, 239);
					}
				}

				.downList-box {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(255, 255, 255, 0.3);
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
					flex-direction: column;
					box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.1);

					.downList-box-img {
						height: 50rpx;
						width: 50rpx;
					}

					.downList-box-text {
						font-size: 20rpx;
					}
				}
			}
		}

		.middle-right-box {
			height: 780rpx;
			width: 90rpx;

			/* overflow-y: hidden; */
			.doctorsay-container-card {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: rgb(229, 233, 249);
				width: 90rpx;
				height: 122rpx;
				margin: 0 18rpx 10rpx 0rpx;
				border-radius: 20rpx;
				border: 2rpx solid rgb(221, 234, 250);
				box-shadow: 5px 5px 10px rgba(105, 129, 178, 0.2);
				margin-left: 10rpx;

				/* 右下角阴影 */
				.doctorsay-container-card-img {
					width: 55rpx;
					height: 55rpx;
				}

				.doctorsay-container-card-font {
					font-size: 25rpx;
					margin-top: 0rpx;
				}

			}

			.doctorsay-container-card-target {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background: linear-gradient(to left, #fff, rgb(229, 233, 249));
				width: 115rpx;
				height: 122rpx;
				margin: 0 18rpx 10rpx 0rpx;
				/* margin-left: -15rpx; */
				/* border: 2rpx solid #fff; */
				/* box-shadow: 5px 5px 10px rgba(105, 129, 178,0.2); */
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				/* border-radius: 20rpx; */
				margin-left: -15rpx;

				/* 右下角阴影 */
				.doctorsay-container-card-img {
					width: 55rpx;
					height: 55rpx;
					margin-left: 25rpx;
				}


				.doctorsay-container-card-font-dark {
					font-size: 25rpx;
					color: rgb(54, 159, 239);
					margin-left: 25rpx;
					margin-top: 0rpx;
				}
			}

			/* background-color: rgb(229,233,249); */
		}
	}

	.super-card-container {
		/* 设置背景图和白色背景 */
		background: url("/static/index/whitemountain.png") center/cover, rgba(255, 255, 255, 0.5);
		/* 使用 screen 混合模式，让图像与白色混合变淡 */
		background-blend-mode: screen;
		isolation: isolate;
		overflow: hidden;
		margin-left: 120rpx;
		width: 1405rpx;
		height: 1190rpx;
		/* border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx; */
		border: 2rpx solid #fff;
		border-left: 0;
		box-shadow: 10rpx 10rpx 20px rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.super-card-time {
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: rgb(233, 239, 257);
		height: 80rpx;
		width: 234rpx;
		border-right: 1rpx solid transparent;
		border-image: repeating-linear-gradient(180deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
		font-weight: 700;
		z-index: -1;
	}

	.super-card-time-und {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 234rpx;
		flex-direction: column;
		border-right: 1rpx solid transparent;
		border-image: repeating-linear-gradient(180deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
	}

	.super-card-time-card {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 209rpx;
		width: calc(100%);
		transition: all 0.8s;
		border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
		flex-direction: column;
		position: relative;
	}
}

.right-container {
	width: calc(100% - 235rpx);
	height: 100vh;
	transition: opacity 1s ease;
	position: relative;

	.joystick {
		position: absolute;
		bottom: 200rpx;
		left: 20rpx;
		width: 300rpx;
		height: 300rpx;
		z-index: 9999;
	}

	.outer-circle {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: rgba(127, 127, 127, 0.1);
		position: relative;
	}

	.inner-circle {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: rgba(127, 127, 127, 0.3);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.doctorsay-container-view {
		width: 100%;
		height: 1220rpx;
		display: flex;

		.doctorsay-container-container {
			border: 2rpx solid #fff;
			width: 2050rpx;
			height: 1340rpx;
			/* 设置背景图和白色背景 */
			background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.3);
			backdrop-filter: blur(20rpx);
			/* 使用 screen 混合模式，让图像与白色混合变淡 */
			background-blend-mode: screen;
			border-radius: 30rpx;
			box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
			/* 右下角阴影 */
			overflow: hidden;

			.doctorsay-container-title {
				width: 100%;
				height: 105rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.doctorsay-container-right {
					height: 100%;
					display: flex;
					align-items: center;
					margin-right: 50rpx;
					/* width: 550rpx; */

					.doctorsay-container-juzhen {
						background: linear-gradient(to right bottom, #00c9ff, #0076ff);
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						font-size: 27rpx;
						margin-right: 10rpx;
					}

					.doctorsay-container-button-father {
						display: flex;

						.doctorsay-container-button-target {
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #3FA9F5;
							color: #fff;
							width: 140rpx;
							height: 60rpx;
							margin-right: 20rpx;
							font-size: 28rpx;
							border-radius: 10rpx;
						}

						.doctorsay-container-button {
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #fff;
							width: 140rpx;
							height: 60rpx;
							margin-right: 20rpx;
							font-size: 28rpx;
							border-radius: 10rpx;
						}
					}

					.doctorsay-container-right-kuai-cheng {
						background-color: #FFDBA1;
						height: 35rpx;
						width: 35rpx;
						border-radius: 7rpx;
					}

					.doctorsay-container-right-kuai-zi {
						background-color: #7B61FF;
						height: 35rpx;
						width: 35rpx;
						border-radius: 7rpx;
					}

					.doctorsay-container-kuai-font {
						font-size: 32rpx;
						margin-left: 10rpx;
						margin-right: 25rpx;
					}
				}

				.doctorsay-container-left {
					display: flex;

					.doctorsay-container-share {
						background: linear-gradient(to right bottom, #00c9ff, #0076ff);
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						font-size: 27rpx;
						margin-left: 20rpx;
						margin-top: -3rpx;
					}

					.doctorsay-container-left-gun {
						margin-top: 7rpx;
						margin-left: 40rpx;
						margin-right: 20rpx;
						width: 13rpx;
						height: 40rpx;
						background: linear-gradient(to bottom, #04BCED, #0160CE);
						border-radius: 10rpx;
					}

					.doctorsay-container-left-font {
						font-size: 38rpx;
						font-weight: 700;
					}
				}
			}

		}
	}

	.right-container-title-nav {
		margin-top: 75rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;

		.right-icons {
			display: flex;
			align-items: center;
			float: right;
			height: 70rpx;
			margin-right: 40rpx;

			.right-icons-font {
				margin-left: 10rpx;
				margin-right: 10rpx;
				font-size: 35rpx;
				margin-top: -30rpx;
			}

			.right-icons-font-dark {
				color: #fff;
				margin-left: 10rpx;
				margin-right: 10rpx;
				font-size: 35rpx;
				margin-top: -30rpx;
			}

			.right-icons-img {
				width: 80rpx;
				height: 80rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
				margin-top: -40rpx;

			}

			.right-icons-img-icon {
				width: 60rpx;
				height: 80rpx;
				margin-top: -10rpx;
				margin-left: 8rpx;
			}
		}

		.right-container-title-no {
			font-size: 35rpx;
			margin-right: 20rpx;
		}

		.right-container-title-no-dark {
			font-size: 35rpx;
			background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
			-webkit-background-clip: text;
			color: transparent;
			margin-right: 20rpx;
		}

		.right-container-title-class {
			font-size: 35rpx;
			font-weight: 800;
			margin-left: 20rpx;
		}

		.right-container-title-class-dark {
			font-size: 35rpx;
			font-weight: 800;
			margin-left: 20rpx;
			background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
			-webkit-background-clip: text;
			color: transparent;
		}

		.right-container-title-class-anhei-button-wrong {
			float: right;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
			margin-right: 15rpx;
			width: 200rpx;
			height: 50rpx;
			background-color: #fff;
			/* border: 2rpx solid; */

			.right-container-title-class-anhei {
				font-size: 30rpx;
				font-weight: 800;
				/* color: white; */
			}
		}

		.right-container-title-class-anhei-button {
			float: right;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
			margin-right: 20rpx;
			width: 200rpx;
			height: 50rpx;
			background: linear-gradient(to right bottom, #00c9ff, #0076ff);
			/* border: 2rpx solid; */

			.right-container-title-class-anhei {
				font-size: 30rpx;
				font-weight: 800;
				color: white;
			}
		}
	}
}

.title-time-delete {
	width: 55rpx;
	height: 55rpx;
	border-radius: 50%;
	display: flex;
	background-color: #fff;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0rpx;
	right: 0rpx;
	z-index: 10;
	background-color: #02abfe;
	color: #fff;
	z-index: 999;
	font-size: 50rpx;
}

.title-time-blue {
	position: absolute;
	top: 0rpx;
	left: 0rpx;
	z-index: 10;

	.title-time-blue-img {
		height: 209rpx;
		width: 230rpx;
	}
}

.title-time {
	display: flex;
	width: 100%;
	position: relative;

	.title-time-time {
		font-size: 32rpx;
		margin-left: 10rpx;
		margin-top: 12rpx;
	}

	.title-time-button {
		position: absolute;
		top: -6rpx;
		right: -4rpx;
		width: 65rpx;
		height: 60rpx;
	}

	.title-time-zhejiao {
		position: absolute;
		top: 0rpx;
		left: 5rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.title-time-font {
		position: absolute;
		top: 3rpx;
		right: 5rpx;
		font-size: 20rpx;
		color: #fff;
	}
}

.popup-say {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(1rpx);
	background-color: rgba(89, 109, 154, 0.4);
	/* 添加毛玻璃效果 */
	z-index: 999;

	.popup-say-content {
		position: absolute;
		right: 105rpx;
		bottom: 200rpx;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		width: 450rpx;
		height: 600rpx;
		background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
		background-blend-mode: screen;
		border: 2rpx solid #fff;
		/* 使用 screen 混合模式，让图像与白色混合变淡 */
		border-radius: 30rpx;
		box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: opacity 0.4s ease;
		.tags-father{
			display: flex;
			margin-left: 40rpx;
			margin-top: 15rpx;
			align-items: center;
			width: 180rpx;
			.tags-img{
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
			.tags-font{
				
			}
		}
		.popup-say-content-flex{
			display: flex;
			margin-top: 7rpx;
			margin-bottom: 10rpx;
			.popup-say-content-gun {
				margin-left: 40rpx;
				margin-right: 20rpx;
				width: 13rpx;
				height: 35rpx;
				background: linear-gradient(to bottom, #04BCED, #0160CE);
				border-radius: 10rpx;
			}
			
			.popup-say-content-font {
				font-size: 30rpx;
				font-weight: 700;
			}
		}
	

		.popup-say-three {
			position: absolute;
			left: 180rpx;
			bottom: -40rpx;
			/* 元素本身不占任何宽高 */
			width: 0;
			height: 0;

			/* 左右边框透明，宽度各 50px */
			border-left: 25rpx solid transparent;
			border-right: 25rpx solid transparent;

			/* 上边框实色（高度 100px），形成向下的“倒三角” */
			border-top: 40rpx solid rgba(255, 255, 255, 1);
		}
	}
}

.popup-delete {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(1rpx);
	background-color: rgba(89, 109, 154, 0.4);
	/* 添加毛玻璃效果 */
	z-index: 999;

	.popup-delete-content {
		position: absolute;
		right: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 800rpx;
		height: 500rpx;
		background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
		background-blend-mode: screen;
		border: 2rpx solid #fff;
		/* 使用 screen 混合模式，让图像与白色混合变淡 */
		border-radius: 30rpx;
		box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: opacity 0.4s ease;

		.popup-delete-img {
			width: 250rpx;
			height: 230rpx;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}

		.popup-delete-text {
			font-size: 30rpx;
			color: #42474E;
		}

		.popup-delete-button {
			display: flex;
			justify-content: space-around;
			height: 90rpx;
			margin-top: 30rpx;

			.popup-delete-button-left {
				background-color: rgb(2, 171, 254);
				width: 200rpx;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				margin: 0 10rpx;
			}

			.popup-delete-button-right {
				background-color: #ced9e8;
				width: 200rpx;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 10rpx;
			}
		}
	}
}

.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 添加毛玻璃效果 */
	z-index: 999;

	.popup-overlay-content {
		position: absolute;
		display: flex;
		// justify-content: center;
		align-items: center;
		width: 800rpx;
		height: 390rpx;
		background-color: #fff;
		border-radius: 30rpx;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
		opacity: 0;
		transition: opacity 0.4s ease;

		.popup-overlay-content-left {
			// background-color: red;
			height: 100%;
			width: 350rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.popup-overlay-content-left-img {
				width: 280rpx;
				height: 180rpx;
				margin-top: -30rpx;
			}

			.popup-overlay-content-left-font {
				// margin-top: 20rpx;
				font-size: 30rpx;
			}
		}

		.popup-overlay-content-right {
			height: 100%;
			width: 450rpx;
			position: relative;

			.time-font {
				font-size: 50rpx;
				margin-top: 100rpx;
				margin-bottom: 10rpx;
				font-weight: 700;
				background: linear-gradient(to bottom, #7080A1, #263556);
				-webkit-background-clip: text;
				color: transparent;
			}

			.time-text {
				margin-left: 10rpx;
				font-size: 30rpx;
				// font-weight: 700;
				width: 380rpx;
				margin-bottom: 50rpx;
				line-height: 35rpx;

			}

			.right-richang {
				background-color: #FFC363;
				position: absolute;
				top: 108rpx;
				right: 50rpx;
				padding: 5rpx;
				border-radius: 10rpx;
			}

			.right-richangnot {
				background-color: #7B61FF;
				position: absolute;
				top: 108rpx;
				right: 50rpx;
				padding: 5rpx;
				border-radius: 10rpx;
				color: #fff;
			}

			.right-crush {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 70rpx;
				height: 70rpx;
				animation: shake 0.5s 3;
			}
		}
	}
}

.popup-song {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(1rpx);
	background-color: rgba(89, 109, 154, 0.4);
	/* 添加毛玻璃效果 */
	z-index: 999;

	.popup-song-contain {
		position: absolute;
		right: 450rpx;
		width: 1296rpx;
		background: url("/static/index/clearmountain.png") center/cover, rgba(255, 255, 255, 0.7);
		/* 使用 screen 混合模式，让图像与白色混合变淡 */
		background-blend-mode: screen;
		border: 2rpx solid #fff;
		/* 使用 screen 混合模式，让图像与白色混合变淡 */
		background-blend-mode: screen;
		border-radius: 40rpx;
		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
		opacity: 0;
		transition: opacity 0.4s ease;

		.shu-container-left {
			display: flex;
			margin-top: 70rpx;
			margin-bottom: 20rpx;

			.shu-container-left-gun {
				margin-top: 5rpx;
				margin-left: 40rpx;
				margin-right: 20rpx;
				width: 13rpx;
				height: 35rpx;
				background: linear-gradient(to bottom, #04BCED, #0160CE);
				border-radius: 10rpx;
			}

			.shu-container-left-font {
				font-size: 35rpx;
				font-weight: 700;
			}
		}
	}
}

.popup-song-father {
	position: relative;

	.shu-up-img {
		position: absolute;
		top: -70rpx;
		left: 305rpx;
		width: 700rpx;
		height: 80rpx;
	}

	.shu-up-font {
		position: absolute;
		top: -50rpx;
		left: 390rpx;
		display: flex;
		color: rgb(255, 90, 0);
	}

	.arrayindex {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		// height: 200rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 60rpx;

		.arrayindex-one {
			width: 285rpx;
			height: 100rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			background-color: rgb(241, 245, 252);
			border-radius: 20rpx;
			border: 1rpx solid rgb(109, 131, 179);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 29rpx;
		}

		.arrayindex-one-target {
			width: 285rpx;
			height: 100rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			background: linear-gradient(to right, #00c9ff, #0076ff);
			color: #fff;
			border-radius: 20rpx;
			border: 1rpx solid rgb(2, 171, 254);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 29rpx;
		}
	}

	.secondarrayindex {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		// height: 200rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 60rpx;

		.arrayindex-one {
			width: 380rpx;
			height: 100rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			background-color: rgb(241, 245, 252);
			border-radius: 20rpx;
			border: 1rpx solid rgb(109, 131, 179);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 29rpx;
		}

		.arrayindex-one-target {
			width: 380rpx;
			height: 100rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			background: linear-gradient(to right, #00c9ff, #0076ff);
			color: #fff;
			border-radius: 20rpx;
			border: 1rpx solid rgb(2, 171, 254);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 29rpx;
		}
	}
}

.ri-img {
	position: absolute;
	top: -4rpx;
	right: -4rpx;
	width: 60rpx;
	height: 60rpx;
}

.time-father {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	margin-left: 30rpx;
	margin-right: 30rpx;

	.time-one {
		width: 100rpx;
		height: 100rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background-color: rgb(241, 245, 252);
		border-radius: 20rpx;
		border: 1rpx solid rgb(109, 131, 179);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 29rpx;
		box-shadow: 5rpx 5rpx 10rpx rgba(105, 129, 178, 0.4)
	}

	.time-one-target {
		width: 100rpx;
		height: 100rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background: linear-gradient(to right, #00c9ff, #0076ff);
		color: #fff;
		border-radius: 20rpx;
		border: 1rpx solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 29rpx;
		box-shadow: 5rpx 5rpx 10rpx rgba(105, 129, 178, 0.4)
	}

	.time-one-hui {
		width: 100rpx;
		height: 100rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background-color: #c2c9d3;
		// color: #fff;
		border-radius: 20rpx;
		border: 1rpx solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 29rpx;
		box-shadow: 5rpx 5rpx 10rpx rgba(105, 129, 178, 0.4)
	}
}

.items-card {
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.items-card-target {
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgb(54, 159, 239);
	background: linear-gradient(to right,
			rgba(54, 159, 239, 0) 0%,
			rgba(54, 159, 239, 0.5) 50%,
			rgba(54, 159, 239, 0) 100%);
}

.button-father {
	height: 200rpx;
	width: calc(100%-80rpx);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 40rpx;
	margin-right: 40rpx;
	margin-top: 20rpx;
	border-top: 1rpx solid rgb(230, 230, 230);

	.button-father-right {
		background: linear-gradient(to right, #00c9ff, #0076ff);
		width: 200rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;

	}

	.button-father-wrong {
		background-color: #c2c9d3;
		width: 200rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}
}

.month-father {
	display: flex;
	width: calc(100% - 60rpx);
	flex-wrap: wrap;
	margin-left: 30rpx;
	margin-right: 30rpx;
	margin-top: 20rpx;
	margin-bottom: 30rpx;

	.month-one {
		width: 75rpx;
		height: 75rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background-color: rgb(241, 245, 252);
		border-radius: 20rpx;
		border: 1rpx solid rgb(109, 131, 179);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 29rpx;
	}

	.month-one-target {
		width: 75rpx;
		height: 75rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background: linear-gradient(to right, #00c9ff, #0076ff);
		color: #fff;
		border-radius: 20rpx;
		border: 1rpx solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 29rpx;
	}
}

.week-father {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	margin-left: 30rpx;
	margin-right: 30rpx;
	margin-top: 20rpx;
	margin-bottom: 30rpx;

	.week-one {
		width: 200rpx;
		height: 100rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background-color: rgb(241, 245, 252);
		border-radius: 20rpx;
		border: 1rpx solid rgb(109, 131, 179);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 29rpx;
	}

	.week-one-target {
		width: 200rpx;
		height: 100rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background: linear-gradient(to right, #00c9ff, #0076ff);
		color: #fff;
		border-radius: 20rpx;
		border: 1rpx solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 29rpx;
	}
}

.radio-father {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	margin-left: 75rpx;
	margin-right: 30rpx;
	/* margin-bottom: 30rpx; */

	.radio-circle {
		margin-top: 2rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx solid black;
		background-color: transparent;
	}

	.radio-circle-target {
		position: relative;
		margin-top: 2rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx solid rgb(2, 171, 254);
		background-color: transparent;
	}

	.radio-circle-target::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 20rpx;
		height: 20rpx;
		background-color: rgb(2, 171, 254);
		border-radius: 50%;
	}

	.radio-font {
		margin-left: 15rpx;
		margin-right: 60rpx;
		font-size: 29rpx;
	}

	.radio-font-target {
		color: rgb(2, 171, 254);
		;
		margin-left: 15rpx;
		margin-right: 60rpx;
		font-size: 29rpx;
	}
}

.title-time-border {
	margin-top: 4rpx;
	margin-left: 4rpx;
	// border: 1rpx solid black;
	width: calc(100% - 8rpx);
	height: calc(100% - 8rpx);
	border-radius: 20rpx;
	display: flex;
	// justify-content: center;
	align-items: center;
	flex-direction: column;
}

.title-time-border-red {
	background-color: #dae8fa;
	width: calc(100%);
	height: calc(100%);
	display: flex;
	align-items: center;
	flex-direction: column;
	/* 调整 box-shadow 使其向下投影 */
	box-shadow: 0px 20rpx 40rpx #dae8fa;

	background:
		linear-gradient(to right, red, red) top left / 60rpx 8rpx no-repeat,
		/* 左上角垂直 */
		linear-gradient(to bottom, red, red) top left / 8rpx 60rpx no-repeat,
		/* 右上角水平 */
		linear-gradient(to left, red, red) top right / 60rpx 8rpx no-repeat,
		/* 右上角垂直 */
		linear-gradient(to bottom, red, red) top right / 8rpx 60rpx no-repeat,
		/* 左下角水平 */
		linear-gradient(to right, red, red) bottom left / 60rpx 8rpx no-repeat,
		/* 左下角垂直 */
		linear-gradient(to top, red, red) bottom left / 8rpx 60rpx no-repeat,
		/* 右下角水平 */
		linear-gradient(to left, red, red) bottom right / 60rpx 8rpx no-repeat,
		/* 右下角垂直 */
		linear-gradient(to top, red, red) bottom right / 8rpx 60rpx no-repeat;
}

.title-time-border-big {
	transform: scale(1.5);
	transform-origin: top;
	/* 将页面内容放大1.2倍 */
	border-top: 0rpx solid #fff;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 209rpx;
	width: calc(100%);
	border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
	flex-direction: column;
	position: relative;
}

.title-time-border-big-top {
	transform: scale(1.5);
	transform-origin: top;
	/* 将页面内容放大1.2倍 */
	border-top: 0rpx solid #fff;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 209rpx;
	width: calc(100%);
	border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
	flex-direction: column;
	position: relative;
}

.title-time-border-blue {
	background-color: #dae8fa;
	width: calc(100%);
	height: calc(100%);
	display: flex;
	align-items: center;
	flex-direction: column;
	/* 调整 box-shadow 使其向下投影 */
	box-shadow: 0px 20rpx 40rpx #dae8fa;
	background:
		/* 左上角水平 */
		linear-gradient(to right, #0184db, #0184db) top left / 60rpx 8rpx no-repeat,
		/* 左上角垂直 */
		linear-gradient(to bottom, #0184db, #0184db) top left / 8rpx 60rpx no-repeat,
		/* 右上角水平 */
		linear-gradient(to left, #0184db, #0184db) top right / 60rpx 8rpx no-repeat,
		/* 右上角垂直 */
		linear-gradient(to bottom, #0184db, #0184db) top right / 8rpx 60rpx no-repeat,
		/* 左下角水平 */
		linear-gradient(to right, #0184db, #0184db) bottom left / 60rpx 8rpx no-repeat,
		/* 左下角垂直 */
		linear-gradient(to top, #0184db, #0184db) bottom left / 8rpx 60rpx no-repeat,
		/* 右下角水平 */
		linear-gradient(to left, #0184db, #0184db) bottom right / 60rpx 8rpx no-repeat,
		/* 右下角垂直 */
		linear-gradient(to top, #0184db, #0184db) bottom right / 8rpx 60rpx no-repeat;
}


.title-time-border-yellow {
	margin: 10rpx;
	border: 2rpx solid #d0d8e0;
	background: linear-gradient(to bottom, #fff1db, #ffe2b2);
	width: calc(100% - 20rpx);
	height: calc(100% - 20rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	box-shadow: 8rpx 8rpx 16rpx rgba(255, 138, 0, 0.7);
}

.title-time-border-yellow-active-transparent {
	margin: 10rpx;
	border: 4rpx dashed rgb(255, 138, 0);
	background: linear-gradient(to bottom, #fff1db, #ffe2b2);
	width: calc(100% - 26rpx);
	height: calc(100% - 26rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	opacity: 0.3;
	box-shadow: 8rpx 8rpx 16rpx rgba(255, 138, 0, 0.7);
}

.title-time-border-yellow-active {
	margin: 10rpx;
	border: 1rpx solid #dae8fa;
	background: linear-gradient(to bottom, #fff1db, #ffe2b2);
	width: calc(100% - 20rpx);
	height: calc(100% - 20rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	animation: shakesmall 0.8s infinite;
	box-shadow: 8rpx 8rpx 16rpx rgba(255, 138, 0, 0.7);
}

.title-time-border-pouple-active-transparent {
	margin: 10rpx;
	border: 4rpx dashed #7B61FF;
	background: linear-gradient(to bottom, #f1eeff, #e3deff);
	width: calc(100% - 26rpx);
	height: calc(100% - 26rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	opacity: 0.3;
	box-shadow: 8rpx 8rpx 16rpx rgba(123, 97, 255, 0.7);
}

.title-time-border-pouple {
	margin: 10rpx;
	border: 1rpx solid #dae8fa;
	background: linear-gradient(to bottom, #f1eeff, #e3deff);
	width: calc(100% - 20rpx);
	height: calc(100% - 20rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	box-shadow: 8rpx 8rpx 16rpx rgba(123, 97, 255, 0.7);
}

.title-time-border-pouple-active {
	margin: 10rpx;
	border: 1rpx solid #dae8fa;
	background: linear-gradient(to bottom, #f1eeff, #e3deff);
	width: calc(100% - 20rpx);
	height: calc(100% - 20rpx);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	animation: shakesmall 1s infinite;
	box-shadow: 8rpx 8rpx 16rpx rgba(123, 97, 255, 0.7);
}

.down-icons {
	margin-top: 17rpx;
	width: 100%;
	height: 60rpx;
	background-color: rgb(255, 216, 126);
	display: flex;
	justify-content: center;
	align-items: center;

	.icon {
		margin: 0 5rpx;
		font-size: 20rpx;
		padding: 5rpx 10rpx;
		background-color: rgb(255, 138, 0);
		color: #fff;
		border-radius: 5rpx;
	}
}

.super-end-items-img-father {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.super-end-items-img-father-active {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: shake 0.5s infinite;
}

@keyframes shake {
	0% {
		transform: rotate(-10deg);
	}

	25% {
		transform: rotate(10deg);
	}

	50% {
		transform: rotate(-10deg);
	}

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

	100% {
		transform: rotate(-10deg);
	}
}

.super-end-items-father-close-father {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	display: flex;
	background-color: #0184db;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0rpx;
	right: 0rpx;
	z-index: 10;
	color: #fff;
}

@keyframes shakesmall {
	0% {
		transform: rotate(-2deg);
	}

	25% {
		transform: rotate(2deg);
	}

	50% {
		transform: rotate(-2deg);
	}

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

	100% {
		transform: rotate(-2deg);
	}
}

.boom-title {
	position: absolute;
	top: 105rpx;
	left: 60rpx;
	width: 60rpx;
	height: 80rpx;
	background-color: #c4dbf4;
	border-left: 2rpx #fff solid;
	border-top: 2rpx #fff solid;
	border-top-left-radius: 20rpx;
	background: linear-gradient(to top right,
			transparent calc(50% - 1px),
			#0184db calc(50% - 1px),
			#0184db calc(50% + 1px),
			transparent calc(50% + 1px));

	.boom-title-left {
		position: absolute;
		top: 40rpx;
		left: 6rpx;
		font-size: 25rpx;
		font-weight: 700;
	}

	.boom-title-right {
		position: absolute;
		top: 5rpx;
		left: 30rpx;
		font-size: 25rpx;
		font-weight: 700;
	}
}

.boom-father {
	position: absolute;
	top: 186rpx;
	left: 60rpx;
	width: 60rpx;
	height: 1110rpx;
	background: linear-gradient(to bottom, #c4dbf4, #c9c2ef, #c6dcf3);
	border-bottom: 2rpx solid #fff;
	border-left: 2rpx solid #fff;
	border-bottom-left-radius: 20rpx;
}

.scroll-bottom-bgc {

	width: 1400rpx;
	height: 270rpx;
	margin-top: 0rpx;
	margin-left: 130rpx;
	background: url("/static/index/keyimg/bgc.png") center/contain;
	background-repeat: no-repeat;
}

.boom {
	height: 839rpx;
	display: flex;
	flex-direction: column;
	/* // justify-content: center; */
	/* align-items: center; */
	overflow: hidden;
	z-index: 10;


	.boom-son {
		height: 209rpx;
		width: 60rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 10;
		font-weight: 700;
		border-top: 1rpx solid transparent;
		border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
	}

	.boom-son-target {
		height: 209rpx;
		width: 120rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 10;
		font-weight: 700;
		border-bottom: 1rpx solid transparent;
		border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1;
		/* 确保文字在容器内居中 */
		background: linear-gradient(to bottom, #ff8a00, #eceaff);
		/* border-bottom-right-radius: 40rpx;
			border-top-right-radius: 40rpx; */
	}
}

.popup-share {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(1rpx);
	background-color: rgba(89, 109, 154, 0.4);
	/* 添加毛玻璃效果 */
	z-index: 999;

	.popup-share-content {
		position: absolute;
		right: 515rpx;
		display: flex;
		// justify-content: center;
		flex-direction: column;
		// align-items: center;
		width: 800rpx;
		height: 380rpx;
		background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.7);
		background-blend-mode: screen;
		border: 2rpx solid #fff;
		/* 使用 screen 混合模式，让图像与白色混合变淡 */
		border-radius: 30rpx;
		box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: opacity 0.4s ease;

		.popup-share-title {
			margin: 30rpx 30rpx;
			font-size: 40rpx;
			position: relative;

			.popup-share-img {
				position: absolute;
				top: 0;
				right: 0;
				width: 200rpx;
				height: 200rpx;
			}
		}

		.popup-share-upcontent {
			margin: 0 30rpx;
			display: flex;
			justify-content: space-between;

			.popup-share-font {
				font-size: 35rpx;
				color: gray;
			}

		}

		.popup-share-gray {
			background-color: #D3D3D3;
			width: calc(100% - 60rpx);
			height: 2rpx;
			margin: 110rpx 30rpx 0 30rpx;
		}

		.popup-share-downcontent {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100%;
			margin: 0 30rpx;

			.popup-downcontent-img {
				width: 70rpx;
				height: 70rpx;
			}

			.popup-downcontent-font {
				font-size: 27rpx;
				margin-left: 20rpx;
			}

			.popup-share-downcontent-left {
				display: flex;
				align-items: center;
			}

			.popup-share-downcontent-button {
				background: linear-gradient(to right bottom, #00c9ff, #0076ff);
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 15rpx 30rpx;
				border-radius: 20rpx;
				font-size: 32rpx;
			}
		}

	}
}