/* From Uiverse.io by 00Kubi */
.radio-inputs {
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	border-radius: 1rem;
	background: var(--radio-bg);
	box-sizing: border-box;
	box-shadow: var(--radio-shadow)
		/* 5px 5px 15px rgba(0, 0, 0, 0.15),
    -5px -5px 15px rgba(255, 255, 255, 0.8) */
	;
	padding: 0.5rem;
	width: 300px;
	font-size: 14px;
	gap: 0.5rem;
}

.radio-inputs .radio {
	flex: 1 1 auto;
	text-align: center;
	position: relative;
}

.radio-inputs .radio input {
	display: none;
}

.radio-inputs .radio .name {
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 0.7rem;
	border: none;
	padding: 0.7rem 0;
	color: var(--radio-text);
	font-weight: 500;
	background: var(--radio-item-bg);
	box-shadow: var(--radio-item-shadow);
	/*  box-shadow:
    3px 3px 6px rgba(0, 0, 0, 0.1),
    -3px -3px 6px rgba(255, 255, 255, 0.7); */
	transition: all 0.2s ease;
	overflow: hidden;
}

.radio-inputs .radio input:checked+.name {
	background: linear-gradient(145deg, var(--bs-danger), var(--bs-pink));
	color: #ffc424;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow:
		inset 2px 2px 5px rgba(0, 0, 0, 0.2),
		inset -2px -2px 5px rgba(255, 255, 255, 0.1),
		3px 3px 8px rgba(220, 53, 69, 0.3);
	transform: translateY(2px);
}

/* Hover effect */
.radio-inputs .radio:hover .name {
	background: var(--radio-hover-bg);
	transform: translateY(-1px);
	box-shadow: var(--radio-hover-shadow);
}

.radio-inputs .radio:hover input:checked+.name {
	transform: translateY(1px);
}

/* Animation */
.radio-inputs .radio input:checked+.name {
	animation: select 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Particles */
.radio-inputs .radio .name::before,
.radio-inputs .radio .name::after {
	content: "";
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.radio-inputs .radio input:checked+.name::before,
.radio-inputs .radio input:checked+.name::after {
	animation: particles 0.8s ease-out forwards;
}

.radio-inputs .radio .name::before {
	background: var(--bs-danger);
	box-shadow: 0 0 6px var(--bs-danger);
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
}

.radio-inputs .radio .name::after {
	background: var(--bs-pink);
	box-shadow: 0 0 8px var(--bs-pink);
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
}

/* Sparkles */
.radio-inputs .radio .name::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
			rgba(220, 53, 69, 0.3) 0%,
			transparent 50%);
	opacity: 0;
	transition: opacity 0.3s;
}

.radio-inputs .radio input:checked+.name::after {
	opacity: 1;
	animation: sparkle-bg 1s ease-out forwards;
}

/* Multiple particles */
.radio-inputs .radio input:checked+.name {
	overflow: visible;
}

.radio-inputs .radio input:checked+.name::before {
	box-shadow:
		0 0 6px var(--bs-danger),
		10px -10px 0 var(--bs-danger),
		-10px -10px 0 var(--bs-danger);
	animation: multi-particles-top 0.8s ease-out forwards;
}

.radio-inputs .radio input:checked+.name::after {
	box-shadow:
		0 0 8px var(--bs-pink),
		10px 10px 0 var(--bs-pink),
		-10px 10px 0 var(--bs-pink);
	animation: multi-particles-bottom 0.8s ease-out forwards;
}

@keyframes select {
	0% {
		transform: scale(0.95) translateY(2px);
	}

	50% {
		transform: scale(1.05) translateY(-1px);
	}

	100% {
		transform: scale(1) translateY(2px);
	}
}

@keyframes multi-particles-top {
	0% {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}

	40% {
		opacity: 0.8;
	}

	100% {
		opacity: 0;
		transform: translateX(-50%) translateY(-20px) scale(0);
		box-shadow:
			0 0 6px transparent,
			20px -20px 0 transparent,
			-20px -20px 0 transparent;
	}
}

@keyframes multi-particles-bottom {
	0% {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}

	40% {
		opacity: 0.8;
	}

	100% {
		opacity: 0;
		transform: translateX(-50%) translateY(20px) scale(0);
		box-shadow:
			0 0 8px transparent,
			20px 20px 0 transparent,
			-20px 20px 0 transparent;
	}
}

@keyframes sparkle-bg {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(2);
	}
}

/* Ripple effect */
.radio-inputs .radio .name::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
			rgba(255, 255, 255, 0.5) 0%,
			transparent 50%);
	opacity: 0;
	transition: opacity 0.3s;
}

.radio-inputs .radio input:checked+.name::before {
	animation: ripple 0.8s ease-out;
}

@keyframes ripple {
	0% {
		opacity: 1;
		transform: scale(0.2);
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 0;
		transform: scale(2.5);
	}
}

/* Glowing border */
.radio-inputs .radio input:checked+.name {
	position: relative;
}

.radio-inputs .radio input:checked+.name::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: linear-gradient(45deg,
			rgba(220, 53, 69, 0.5),
			rgba(220, 53, 69, 0.5));
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: border-glow 1.5s ease-in-out infinite alternate;
}

@keyframes border-glow {
	0% {
		opacity: 0.5;
	}

	100% {
		opacity: 1;
	}
}

.name {
	font-family: 'douying';
}

table {
	border-radius: 1.25rem;
	!important
}

.thh {
	padding: 30px 0;
	!important
}

thead {
	width: 100%;
}

.card-img-top {
	height: auto;
	width: 120px;
}
.card{
	text-decoration: none;
	color: var(--bs-body-color);
}
.card:hover{
	text-decoration: none;
	color: var(--bs-danger);
}

.img-fluid{
	animation:roll-in-blurred-left .65s cubic-bezier(.23,1.000,.32,1.000) both
}
@keyframes roll-in-blurred-left{0%{transform:translateX(-1000px) rotate(-720deg);filter:blur(50px);opacity:0}100%{transform:translateX(0) rotate(0deg);filter:blur(0);opacity:1}}
@keyframes tracking-in-contract-bck-bottom{0%{letter-spacing:1em;transform:translateZ(400px) translateY(300px);opacity:0}40%{opacity:.6}100%{transform:translateZ(0) translateY(0);opacity:1}}
h1,h4,.radio-inputs,.card{
	animation:tracking-in-contract-bck-bottom 1s cubic-bezier(.77,0.000,.175,1.000) both
}