page {
	background-color: rgba(247, 249, 252, 1);
	padding-bottom: 160rpx;
}

.header {
	background: var(--background);
	color: white;
	padding: 30rpx;

	.h-1 {
		display: flex;
		gap: 30rpx;

		.left {
			flex: 1;

			.t-1 {
				font-size: 60rpx;
				font-weight: 700;
			}

			.t-2 {
				font-size: 28rpx;

			}
		}

		.right {
			width: 140rpx;
			aspect-ratio: 1;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 20rpx;

			.d {
				font-weight: 700;
				font-size: 60rpx;
			}

			.c {
				font-size: 24rpx;
			}
		}
	}

	.h-2 {
		margin-top: 30rpx;
		background-color: rgba(255, 255, 255, 0.15);
		padding: 30rpx;
		border-radius: 30rpx;

		.title {
			margin-bottom: 20rpx;
		}

		.num {
			font-weight: 700;
		}
	}
}

.list {
	padding: 30rpx;

	.item {
		background-color: white;
		box-shadow: 0 4rpx 8rpx rgba(11, 27, 61, 0.04);
		border-radius: 20rpx;
		padding: 30rpx;
		--color: rgba(0, 106, 106, 0.1);
		align-items: flex-start;
		gap: 30rpx;

		&+.item {
			margin-top: 30rpx;
		}

		.icon {
			width: 90rpx;
			aspect-ratio: 1;
			border-radius: 20rpx;
			background-color: var(--back);
			color: rgba(99, 63, 0, 1);
		}

		.content {
			flex: 1;
			--td-tag-default-light-color: var(--back);
			--td-tag-default-font-color: var(--color);

			.time {
				margin-left: 20rpx;
				color: rgba(69, 70, 78, 1);
				font-size: 28rpx;
			}

			.title {
				font-weight: 700;
				margin-top: 10rpx;
			}

			.desc {
				color: rgb(154, 156, 158);
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}

		.btn {
			width: fit-content;
			font-size: 28rpx;
			margin: 20rpx 0 0;
			background-color: rgba(242, 244, 247, 1);
			color: rgba(0, 106, 106, 1);

			&.active {
				opacity: 0.7;
				background-color: rgba(232, 245, 233, 1);
				color: rgba(46, 139, 87, 1);
			}
		}
	}
}

.tip {
	margin: 0 30rpx;
	padding: 30rpx;
	background-color: rgba(0, 106, 106, 0.08);
	border-radius: 30rpx;
	color: rgba(0, 106, 106, 1);
	font-size: 28rpx;
}