section,
section div {
	position: relative;
}

#s1_tabs {
	display: flex;
	margin-top: 100px;
}
#s1_tabs > div {
	width: 15rem;
	height: 3.125rem;
	line-height: 3.125rem;
	text-align: center;
	font-size: 1.125rem;
	border: 1px solid white;
	color: white;
	border-right: none;
	cursor: pointer;
}
#s1_tabs > div:first-of-type {
	border-radius: 10px 0 0 10px;
}
#s1_tabs > div:last-of-type {
	border-radius: 0 10px 10px 0;
	border-right: 1px solid white;
}
#s1_tabs > [checked="true"] {
	background: white;
	color: #333;
	font-weight: bold;
}
.s1_swiper .swiper-slide {
	visibility: hidden;
	opacity: 0.8;
}
.s1_swiper .swiper-slide-active {
	opacity: 1;
}
.s1_swiper :is(.swiper-slide-active, .swiper-slide-next, .swiper-slide-prev) {
	visibility: visible;
}

::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-thumb {
	background: #002c61;
	border-radius: 5px;
}
::-webkit-scrollbar-track {
	background: transparent;
}

/*  */
@keyframes l-r {
	from {
		transform: translateX(-30%);
		opacity: 0.3;
	}
	to {
		transform: translateX(0%);
		opacity: 1;
	}
}
@keyframes r-l {
	from {
		transform: translateX(30%);
		opacity: 0.3;
	}
	to {
		transform: translateX(0%);
		opacity: 1;
	}
}
.place_content {
	visibility: hidden;
	position: absolute;
	inset: 0;
	width: 100%;
	height:100%;
}

.show {
	visibility: visible;
	position: relative;
}
.show > div {
	animation: r-l 1s ease-in-out both;
	animation-delay: calc(var(--delay, 0) * 1s);
	position: relative;
}
.show > div:first-of-type {
	animation: l-r 1s ease-in-out both;
}
.show > div:nth-of-type(3) {
	--delay: 0.2;
}
.show > div:nth-of-type(4) {
	--delay: 0.4;
}
.show > div:nth-of-type(5) {
	--delay: 0.6;
}


/*  */
/* ========== 容器 ========== */
.card-group {
    display: flex;
    flex-direction: column;
    gap: 90px;
}

/* ========== 卡片容器（直接子 div） ========== */
.card-group > div {
    display: flex;
    flex-direction: column;
    width: 332px;
    position: relative;
}

/* 第一个卡片上边距 */
.card-group > div:first-child {
    margin-top: 25px;
}

/* ========== 卡片头部（每个卡片的第一个子 div） ========== */
.card-group > div > div:first-child {
    font-size: 20px;
    color: white;
    font-weight: bold;
    padding: 8px 19px;
}

/* 第一个卡片的头部背景 */
.card-group > div:nth-child(1) > div:first-child {
    background: linear-gradient(to right, #2E69B4, #ECF3FD);
}

/* 第二个卡片的头部背景 */
.card-group > div:nth-child(2) > div:first-child {
    background: linear-gradient(to right, #044695, #ECF3FD);
}

/* ========== 卡片内容（每个卡片的第二个子 div） ========== */
.card-group > div > div:nth-child(2) {
    font-size: 14px;
    color: #333;
    background-color: #ECF3FD;
    padding: 19px;
    line-height: 1.6;
}

/* ========== 图标（每个卡片的 img） ========== */
.card-group > div > img {
    position: absolute;
    top: 20px;
    z-index: 1;
}

/* 第一个卡片的图标 */
.card-group > div:nth-child(1) > img {
    right: -180px;
    width: 169px;
    height: 98px;
}

/* 第二个卡片的图标 */
.card-group > div:nth-child(2) > img {
    right: -154px;
    width: 143px;
    height: 43px;
}
/* ========== 容器 ========== */
.card-group-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ========== 卡片容器（直接子 div） ========== */
.card-group-right > div {
    display: flex;
    flex-direction: column;
    width: 332px;
    position: relative;
}

/* ========== 卡片头部（每个卡片的第一个子 div） ========== */
.card-group-right > div > div:first-child {
    font-size: 20px;
    color: white;
    font-weight: bold;
    padding: 8px 19px;
}

/* 第1个卡片头部 */
.card-group-right > div:nth-child(1) > div:first-child {
    background: linear-gradient(to right, #2F53BC, #ECF3FD);
}

/* 第2个卡片头部 */
.card-group-right > div:nth-child(2) > div:first-child {
    background: linear-gradient(to right, #044695, #ECF3FD);
}

/* 第3个卡片头部 */
.card-group-right > div:nth-child(3) > div:first-child {
    background: linear-gradient(to right, #4D8FB9, #ECF3FD);
}

/* ========== 卡片内容（每个卡片的第二个子 div） ========== */
.card-group-right > div > div:nth-child(2) {
    font-size: 14px;
    color: #333;
    background-color: #ECF3FD;
    padding: 19px;
    line-height: 1.6;
}

/* ========== 图标（每个卡片的 img） ========== */
.card-group-right > div > img {
    position: absolute;
    top: 20px;
    z-index: 1;
}

/* 第1个卡片图标 */
.card-group-right > div:nth-child(1) > img {
    left: -185px;
    top: 20px;
    width: 170px;
    height: 97px;
}

/* 第2个卡片图标 */
.card-group-right > div:nth-child(2) > img {
    left: -144px;
    top: 20px;
    width: 129px;
    height: 56px;
}

/* 第3个卡片图标（top 值不同） */
.card-group-right > div:nth-child(3) > img {
    left: -190px;
    top: -40px;
    width: 175px;
    height: 60px;
}
.num:after {
	content: attr(data-num);
	position: absolute;
	top: 1.25rem;
	right: 1rem;
	font-size: 4.5rem;
	color: #0c64c8;
	font-weight: bold;
	opacity: 0.15;
	font-style: italic;
	transform: translateY(50%);
}