html,
body {
	margin: 0;
	padding: 0;
	font-family: '微软雅黑';
	background-color: #da0c15;
	font-size: min(2.6vw, 20px);
}
img {
	margin: 0;
	max-width: 100%;
	vertical-align: top;
}
a {
	color: inherit;
	text-decoration: none;
}
.red {
	color: #ff1313;
}
.orange {
	color: #ff3022;
	font-weight: bold;
}
.delete {
	text-decoration: line-through;
}

.banner {
	width: 100%;
}
.banner-img {
	width: 100%;
}
.footer {
	background: rgba(51, 51, 51, 1);
	color: #c1c2c3;
	padding: 1.25em;
	min-width: var(--width);
	box-sizing: border-box;
	text-align: center;
	font-size: 0.75em;
	line-height: 1.5;
}
.footer p {
	margin: 0;
}
.main {
	padding: 0 1em;
	max-width: 1000px;
	margin: auto;
}

.relative,
.relative > * {
	position: relative;
	z-index: 10;
}

.card1 {
	position: relative;
}
.card1 > * {
	position: relative;
	z-index: 10;
}
.card1:not(:last-child) {
	margin-bottom: 2em;
}
.card1-title {
	background-color: #f64112;
	color: #ab661d;
	border-top-right-radius: 1em;
	border-top-left-radius: 1em;
	text-align: center;
	width: 80%;
	margin: auto;
	line-height: 3;
	font-weight: bold;
	font-size: 1.2em;
	padding-top: 0.3em;
	z-index: 20;
}
.card1-title::after {
	position: absolute;
	content: '';
	width: calc(100%);
	height: calc(100% - 0.3em);
	top: 0.3em;
	left: 0;
	border-top-right-radius: 1em;
	border-top-left-radius: 1em;
	background-image: linear-gradient(to bottom, #fef8e4, #f3cd7a);
}
.card1-title::before {
	position: absolute;
	content: '';
	width: calc(100% + 1em);
	height: 0.3em;
	bottom: 0;
	left: -0.5em;
	border-radius: 0.3em;
	background-color: #d80c17;
}
.card1-content {
	background-color: #faa959;
	margin-top: -1.5em;
	padding: 1em;
	padding-top: 2em;
	border-radius: 1em;
}
.card1-content::before {
	position: absolute;
	content: '';
	width: calc(100% - 10px);
	top: 5px;
	height: calc(100% - 10px);
	left: 5px;
	border-radius: 1em;
	background-color: #fff;
}

.card2 {
	position: relative;
	margin-bottom: 2em;
}
.card2 > * {
	position: relative;
	z-index: 10;
}
.card2-title {
	background-color: #f64112;
	color: #f7f5d2;
	border-top-right-radius: 1em;
	border-top-left-radius: 1em;
	text-align: center;
	width: 80%;
	margin: auto;
	line-height: 3;
	font-weight: bold;
	font-size: 1.2em;
	padding-top: 0.3em;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
}
.card2-title::after {
	position: absolute;
	content: '';
	width: calc(100%);
	height: calc(100% - 0.3em);
	top: 0.3em;
	left: 0;
	border-top-right-radius: 1em;
	border-top-left-radius: 1em;
	background-image: linear-gradient(to bottom, #f2614e, #ff0f01);
	box-shadow: inset 0 0 0.5em 0.5em rgb(255, 136, 136, 0.5);
}
.card2-title::before {
	position: absolute;
	content: '';
	width: calc(100% + 1em);
	height: 0.3em;
	bottom: 0;
	left: -0.5em;
	border-radius: 0.3em;
	background-color: #d80c17;
}
.card2-title + .card2-content {
	margin-top: -1.5em;
	padding-top: 2em;
}
.card2-content {
	background-color: #fbaa58;
	padding: 1em;
	border-radius: 1em;
}
.card2-content::before {
	position: absolute;
	content: '';
	width: calc(100% - 10px);
	top: 5px;
	height: calc(100% - 10px);
	left: 5px;
	border-radius: 1em;
	background-color: #fff;
}
.card2-title .extra {
	color: #b72013;
	font-weight: bold;
	font-size: 0.8em;
	background-image: linear-gradient(to bottom, #fef8e4, #f3cd7a);
	line-height: 1;
	padding: 0.8em 1em;
	border-radius: 0.4em;
	margin-left: 1em;
}
.card2-content__img-title {
	width: 80%;
	margin: 1em 10%;
}

.card1-content:has(.box1) {
	display: flex;
	/* gap: 1em; */
	justify-content: space-around;
	grid-template-columns: repeat(4, 1fr);
}
.box1 {
	text-align: center;
	margin: 1em 0;
	padding-bottom: 1.4em;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background-image: url('../image/box1-bg2.png');
	background-size: 100% 100%;
	width: 11em;
	height: 11em;
}
.box1-title {
	flex: 0;
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 3;
}
.box1-content {
	/* padding: 1em 0.5em; */
	padding: 0em 0.5em 0em 0.5em;
	font-size: 0.85em;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
	gap: 2px;
}

.box2 {
	display: flex;
	flex-direction: column;
	background-image: url('../image/box2-bg.png');
	background-size: 100% 100%;
	margin: 1em 0;
	/*aspect-ratio: 1174 / 274;*/
	padding: 1em;
	box-sizing: border-box;
}
.box2-title {
	position: absolute;
	left: 3%;
	font-size: 1.2em;
	top: 7%;
	color: #fff;
	font-weight: bold;
}
.box2-type {
	padding-left: 30%;
	font-weight: bold;
}
.box2-content {
	margin-top: 3.5%;
	line-height: 1.5;
}

.title1 {
	color: #fd352d;
	text-align: center;
	font-size: 1.5em;
	width: auto;
	margin: 1em 0;
	font-weight: bold;
}
.title1 span {
	border-bottom: 0.1em solid #fd352d;
}
.title2 {
	font-size: 1.2em;
	text-align: center;
	margin: 1em 0;
	color: #ff3022;
	text-shadow: 0.08em 0.08em 0px rgb(152, 0, 8, 0.3);
}

.sub-title-1 {
	font-weight: bold;
	font-size: 0.9em;
	text-align: center;
	margin-bottom: 1em;
}
.sub-title-2 {
	font-weight: bold;
	font-size: 0.8em;
	text-align: center;
	margin: 1em 0;
}
.sub-title-3 {
	font-size: 0.8em;
	text-align: center;
}
.sub-title-3 span {
	border-bottom: 1px solid;
}

.grid1 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
	padding: 0 var(--gap);
}
.grid1-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}
.grid1.divider .grid1-item:not(:last-child) {
	border-right: 0.08em solid #f4e6d7;
}
.grid1-item__title {
	color: #fff;
	background-image: linear-gradient(to bottom, #ff3022, #b3050c);
	padding: 0 1em;
	line-height: 1.7;
	border-radius: 1.7em;
	flex: 0;
}
.grid1-item__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 0.8em;
}

.divider1 {
	width: 80%;
	margin: 0.8em 10%;
	height: 0.1em;
	background-color: #f4e6d7;
}
.grid2 {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 1em;
	padding: 0 1em;
}
.grid2-item {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid2-item__title {
	color: #fff;
	background-image: linear-gradient(to bottom, #ff3022, #b3050c);
	padding: 0.4em 0.7em;
	line-height: 1;
	border-radius: 0.8em;
	flex: 0 0 auto;
}
.grid2-item__content {
	margin-left: 1em;
	font-size: 0.8em;
}

.grid3 {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.grid3 img {
	width: 12em;
}

.grid4 {
	display: flex;
	gap: 1em;
	padding: 0 1em;
	justify-content: space-around;
}
.grid4-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 8em;
}
.grid4-item__img {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.grid4-item__title {
	flex: 0;
	font-size: 0.6em;
	font-weight: bold;
	margin-top: 0.5em;
}

.grid6 {
	display: flex;
	justify-content: center;
	align-items: center;
}

.grid6 img {
	max-width: 100%;
	min-width: 0;
	flex: 1 1 auto;
}

.grid5 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	padding: 0 2em;
}

table span {
	display: inline-block;
}
table {
	--gap: 0.5em;
	text-align: center;
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8em;
}
table th {
	background-color: #ff1313;
	color: #fff;
	border: 0.1em solid #ff1313;
}
table td {
	padding: 1em var(--gap);
	border: 0.1em solid #dadada;
}
table tr:first-child td {
	border-top: none;
}
.btn {
	color: #fff;
	background-color: #ff3022;
	padding: 0 0.8em;
	line-height: 2;
	display: inline-block;
	margin: 0.5em 0;
	border-radius: 1em;
	flex: 0 0 auto;
}
.table-inline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
}
.table-inline span {
	flex: 0 1 auto;
}
