/* Hero layout — xk-sport.com light theme */

.site.site--xk-layout {
	position: relative;
	background: var(--body-bg-color);
}

.site.site--xk-layout .site-bg {
	position: relative;
	z-index: 2;
	background-image: var(--banner_1);
	background-size: cover;
	background-position: center 18%;
	background-repeat: no-repeat;
	padding-bottom: 36px;
}

.site.site--xk-layout .site-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(243, 250, 255, 0.96) 0%,
		rgba(243, 250, 255, 0.82) 42%,
		rgba(243, 250, 255, 0.35) 68%,
		rgba(243, 250, 255, 0.08) 100%
	);
	pointer-events: none;
	z-index: 0;
}

.site.site--xk-layout .site-bg .site-container {
	width: 1200px;
	max-width: calc(100% - 48px);
	height: 470px;
	margin: 0 auto;
	padding: 75px 0 10px;
	display: flex;
	position: relative;
	z-index: 1;
}

.site.site--xk-layout .site-bg .site-container .site-info {
	width: 594px;
	max-width: 52%;
	padding-right: 30px;
}

.site.site--xk-layout .site-bg .site-container .site-info .site-title {
	color: var(--banner-title-gradient);
	font-weight: 700;
	font-size: 56px;
	line-height: 1.25;
	margin: 0;
	word-break: normal;
	overflow-wrap: break-word;
	background: none;
	-webkit-text-fill-color: currentColor;
}

.site.site--xk-layout .site-bg .site-container .site-info .site-line {
	margin-top: 16px;
	width: 52px;
	height: 4px;
	border-radius: 999px;
	background: var(--primary-color);
}

.site.site--xk-layout .site-bg .site-container .site-info .site-desc {
	margin-top: 16px;
	max-width: 450px;
}

.site.site--xk-layout .site-bg .site-container .site-info .site-desc__intro {
	display: none;
}

.site.site--xk-layout .site-bg .site-container .site-info .site-desc p,
.site.site--xk-layout .site-bg .site-container .site-info .site-desc__intro {
	word-break: normal;
	overflow-wrap: break-word;
}

.site.site--xk-layout .site-bg .site-container .site-info .site-desc p {
	position: relative;
	margin: 0 0 6px 14px;
	font-size: 15px;
	line-height: 26px;
	color: var(--title-color);
}

.site.site--xk-layout .site-bg .site-container .site-info .site-desc p::before {
	content: "";
	position: absolute;
	left: -14px;
	top: 11px;
	width: 5px;
	height: 5px;
	background: var(--primary-color);
	border-radius: 1px;
}

.site.site--xk-layout .site-bg .site-container .site-info .site-tips {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	min-width: 270px;
	height: 24px;
	padding: 0 10px 0 25px;
	border-radius: 15px;
	font-size: 12px;
	background: var(--button-bg);
	color: var(--button-color);
	position: relative;
}

.site.site--xk-layout .site-bg .site-container .site-info .site-tips::before {
	content: "";
	position: absolute;
	left: 8px;
	width: 14px;
	height: 14px;
	background: center / cover var(--tips);
}

.site.site--xk-layout .site-bg .site-container .site-info .site-sponser {
	width: 100%;
	margin-top: 14px;
}

.site.site--xk-layout .site-bg .site-container .site-info .site-sponser img {
	max-width: 500px;
	width: auto;
	height: 55px;
	max-height: 55px;
}

.site.site--xk-layout .site-bg .site-container .site-main {
	position: absolute;
	right: -15px;
	bottom: 0;
	padding-left: 1%;
}

.site.site--xk-layout .site-bg .site-container .site-main img {
	width: 622px;
	max-width: 52vw;
	height: auto;
	object-fit: contain;
}

@media screen and (max-width: 1200px) {
	.page-main {
		padding-bottom: 0.8rem;
	}

	.site.site--xk-layout {
		padding-bottom: 0;
		background-image: var(--banner_1);
		background-size: cover;
		background-position: center top;
	}

	.site.site--xk-layout::after {
		content: "";
		display: block;
		bottom: 0;
		left: 0;
		right: 0;
		position: absolute;
		z-index: 1;
		height: 4rem;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), var(--body-bg-color));
		backdrop-filter: blur(2px);
	}

	.site.site--xk-layout .site-bg::before {
		background: linear-gradient(
			180deg,
			rgba(243, 250, 255, 0.92) 0%,
			rgba(243, 250, 255, 0.55) 55%,
			rgba(243, 250, 255, 0.15) 100%
		);
	}

	.site.site--xk-layout .site-bg::after {
		display: none;
	}

	.site.site--xk-layout .site-bg {
		padding-bottom: 0;
		background: transparent;
	}

	.site.site--xk-layout .site-bg .site-container {
		width: 100%;
		max-width: none;
		display: block;
		height: auto;
		min-height: 0;
		margin-inline: 0;
		padding: 0;
	}

	.site.site--xk-layout .site-bg .site-container .site-info {
		width: 100%;
		max-width: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-title {
		width: 100%;
		padding: min(45px, 8vw) min(30px, 5.33vw) 0;
		font-size: clamp(27px, 9.6vw, 54px);
		line-height: 1.36;
		text-align: center;
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-line {
		width: min(48px, 8.5vw);
		height: min(3px, 0.53vw);
		margin-top: min(6px, 1.07vw);
		margin-inline: auto;
		align-self: center;
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-desc {
		width: 100%;
		max-width: none;
		margin-top: min(10px, 2.67vw);
		padding-inline: min(30px, 5.33vw);
		text-align: justify;
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-desc__intro {
		display: block;
		margin: 0;
		font-size: clamp(13px, 3.47vw, 14px);
		font-weight: 500;
		line-height: 1.45;
		color: var(--title-color);
		text-align: justify;
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-desc__list {
		display: none;
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-desc p {
		margin: 0 0 min(8px, 1.6vw);
		margin-left: 0;
		font-size: clamp(13px, 3.47vw, 14px);
		line-height: 1.45;
		color: var(--title-color);
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-desc p::before {
		display: none;
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-tips {
		display: none;
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-sponser {
		width: 100%;
		margin-top: min(18px, 3.2vw);
		padding: 0;
		text-align: center;
	}

	.site.site--xk-layout .site-bg .site-container .site-info .site-sponser img {
		display: inline-block;
		width: auto;
		max-width: 95%;
		height: auto;
		max-height: min(48px, 12.8vw);
		margin-inline: auto;
	}

	.site.site--xk-layout .site-bg .site-container .site-main {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		padding: 0;
		margin: 0;
		text-align: center;
	}

	.site.site--xk-layout .site-bg .site-container .site-main img {
		display: block;
		width: 100%;
		height: min(264px, 70.4vw);
		max-width: 100%;
		max-height: none;
		margin-inline: auto;
		object-fit: contain;
		object-position: center center;
	}
}