/* 整个轮播区域：标题和轮播使用同一个背景 */
.swiper-section {
	width: 100%;
	background: transparent;
}

/*
 * 单独控制轮播外层，防止项目中已有的 .app 样式
 * 导致轮播宽度和其他模块不一致。
 */
.swiper-section .swiper-app {
	width: min(1480px, 94%);
	max-width: none;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	background: transparent;
	background: rgba(244,212,173,0.13);
}

/* 整个轮播卡片 */
.simple-swiper-container {
	--swiper-duration: 700ms;
	--swiper-easing  : ease;

	position: relative;

	display       : flex;
	flex-direction: column;

	width : 100%;
	height: 710px;
	margin: 0;
	padding: 28px 34px 52px;

	/* 防止 width:100% 加 padding 后宽度超出父元素 */
	box-sizing: border-box;

	overflow: hidden;

	/* 使用外层页面的背景色，不再单独显示一块浅色背景 */
	background: transparent;

	outline: none;

	/*
	 * 允许页面正常上下滚动。
	 * 左右方向交给轮播处理。
	 */
	touch-action         : pan-y;
	overscroll-behavior-x: contain;

	cursor: grab;

	-webkit-touch-callout: none;
	-webkit-user-select  : none;
	-moz-user-select     : none;
	-ms-user-select      : none;
	user-select          : none;
}

.simple-swiper-container.is-pointer-down,
.simple-swiper-container.is-dragging {
	cursor: grabbing;
}

/* 顶部步骤区域 */
.jump-buttons {
	position: relative;
	z-index : 20;

	display        : flex;
	align-items    : center;
	justify-content: flex-start;

	flex-shrink: 0;

	width    : fit-content;
	max-width: 100%;
	margin   : 0 0 20px;
	padding  : 0;

	/* overflow-x: auto; */

	border-radius   : 999px;
	background-color: #FFFFFF;

	scrollbar-width: none;
}

.jump-buttons::-webkit-scrollbar {
	display: none;
}

/* Step 按钮 */
.jump-button {
	flex-shrink: 0;

	min-width: auto;
	padding  : 9px 20px;

	border       : 0;
	border-radius: 999px;

	background-color: transparent;
	color           : #101010;

	font-size  : 18px;
	font-weight: 400;
	line-height: 1.2;

	cursor: pointer;

	transition:
		color 0.25s ease,
		background-color 0.25s ease;
}

.jump-button:hover {
	color: #101010;
}

/* 当前步骤 */
.jump-button.active {
	background-color: #101010;
	color           : #fff;
}
.jump-button.active .step-dot{
	font-size: 0;
}

/* 拖拽轮播时，顶部 Step 按钮关闭过渡 */
/*
 * 手指或鼠标正在拖拽时，
 * 顶部 Step 按钮关闭所有过渡。
 */
 .jump-buttons.jump-buttons-no-transition .jump-button {
	transition: none !important;
}
/* Step 中间圆点 */
.step-dot {
	flex-shrink: 0;

	margin: 0 1px;

	color: #59667b;

	font-size  : 17px;
	line-height: 1;
}

/* 轮播内容区域 */
.swiper-stage {
	position: relative;
	background: transparent;
	flex      : 1;
	min-height: 0;

	width: 100%;

	overflow: hidden;
}

/* 每一个轮播页面 */
.swiper-items {
	position: absolute;
	inset   : 0;
	z-index : 1;

	display       : flex;
	flex-direction: column;

	width : 100%;
	height: 100%;

	opacity       : 0;
	pointer-events: none;

	transform: scale(1.015);

	transition:
		opacity var(--swiper-duration) var(--swiper-easing),
		transform var(--swiper-duration) var(--swiper-easing);
}

/* 当前页面 */
.swiper-items-active {
	z-index: 2;

	opacity       : 1;
	pointer-events: auto;

	transform: scale(1);
}

/* 上方文字区域 */
.swiper-content {
	position: relative;
	z-index : 2;

	flex-shrink: 0;

	width  : 100%;
	margin : 0;
	padding: 0 0 8px;

	color: #17243a;
}

/* 可选的小标题 */
.swiper-subtitle {
	margin: 0 0 8px;

	color: #66738a;

	font-size     : 14px;
	font-weight   : 600;
	letter-spacing: 1.5px;
}

/* 主标题 */
.swiper-title {
	margin: 0 0 14px;

	color: #101010;

	font-size     : 18px;
	font-weight   :500;
	line-height   : 1.25;
	letter-spacing: -0.3px;
}

/* 描述文字 */
.swiper-description {
	max-width: 100%;
	margin   : 0;

	color: #101010;

	font-size  : 20px;
	font-weight: 400;
	line-height: 1.38;
}

/* 下方图片区域 */
.swiper-media {
	position: relative;
	
	display        : flex;
	align-items    : center;
	justify-content: center;

	flex      : 1;
	min-height: 0;

	width     : 100%;
	margin-top: 8px;

	/* overflow: hidden;上 */

	/* 防止图片区域出现另一块底色 */
	background: transparent;
}

/* 图片 */
.swiper-image {
	display: block;

	width : 100%;
	height:270px;

	/* 原来是 #FFF，会让 contain 留白区域显示白色 */
	background-color: transparent;

	object-fit     : contain;
	object-position: center;

	pointer-events: none;

	-webkit-user-drag: none;
	user-select      : none;
}



/* 左右箭头，截图中没有，所以默认隐藏 */
.swiper-arrow {
	display: none;

	position: absolute;
	top     : 50%;
	z-index : 30;

	width  : 42px;
	height : 42px;
	padding: 0;

	border       : 0;
	border-radius: 50%;

	background-color: rgba(23, 36, 58, 0.75);

	cursor: pointer;

	transform: translateY(-50%);
}

.swiper-arrow::before {
	content: "";

	position: absolute;
	top     : 50%;
	left    : 50%;

	width : 10px;
	height: 10px;

	border-top  : 2px solid #fff;
	border-right: 2px solid #fff;
}

.swiper-arrow-prev {
	left: 10px;
}

.swiper-arrow-prev::before {
	transform:
		translate(-35%, -50%) rotate(-135deg);
}

.swiper-arrow-next {
	right: 10px;
}

.swiper-arrow-next::before {
	transform:
		translate(-65%, -50%) rotate(45deg);
}

/* 底部长条分页器 */
.pagination {
	position: absolute;
	left    : 50%;
	bottom  : 14px;
	z-index : 30;

	width  : 78px;
	height : 24px;
	padding: 9px 0;

	box-sizing: border-box;
	cursor    : pointer;

	transform: translateX(-50%);
}

/* 分页器底部轨道 */
.pagination-track {
	position: relative;

	width : 100%;
	height: 6px;

	overflow: hidden;

	border-radius: 999px;

	background-color: #E5E5E5;
}

/* 深色滑块 */
.pagination-thumb {
	position: absolute;
	top     : 0;
	left    : 0;

	height: 100%;

	border-radius: 999px;

	background-color: #17243a;

	transition:
		transform var(--swiper-duration) var(--swiper-easing);
}

/*
 * 手指或鼠标拖拽时，
 * 分页滑块不使用过渡，直接移动。
 */
.pagination-thumb.pagination-thumb-no-transition {
	transition: none !important;
}

/* 拖动时防止误点链接和按钮 */
.no-click a,
.no-click button {
	pointer-events: none !important;
}

/* 平板 */
@media screen and (max-width: 768px) {
	body {
		padding: 0;
	}

	.swiper-section .swiper-app {
		width    : 100%;
		max-width: none;
		padding  : 0 20px;
	}

	.simple-swiper-container {
		padding: 28px 26px 52px;
	}
}

/* 手机 */
@media screen and (max-width: 480px) {
	body {
		padding: 0;
	}

	.swiper-section .swiper-app {
		width    : 100%;
		max-width: none;
		padding  : 0;
	}

	.simple-swiper-container {
		width     : 100%;
		height: 502px;

		padding: 28px 20px 52px;
	}

	.jump-buttons {
		margin-bottom: 20px;
	}

	.jump-button {
		padding: 8px 24px;

		font-size: 16px;
	}
	
	.step-dot {
		font-size: 15px;
	}

	.swiper-title {
		margin-bottom: 14px;
	}

	.swiper-description {
		font-size  : 16px;
		line-height: 1.42;
	}

	.swiper-media {
		/* margin-top: 0; */
	}

	.pagination {
		bottom: 14px;
		width : 78px;
	}
}

/* 很窄的手机 */
@media screen and (max-width: 360px) {
	.simple-swiper-container {
		padding: 24px 16px 48px;
	}

	.jump-button {
		padding  : 8px 12px;
		font-size: 15px;
	}

	.swiper-title {
		font-size: 22px;
	}

	.swiper-description {
		font-size: 16px;
	}
}