/* 메인 배너 링 페이저 (mukoom.com main_swiper.css 배너 페이징 이식, bxSlider용) */
.banner-swiper-fraction {
	display: none;
}
.banner-ring-host {
	position: relative;
}
.banner-ring-host .banner-swiper-fraction {
	position: absolute;
	left: 20px;
	bottom: 18px;
	right: auto;
	width: max-content;
	max-width: calc(100% - 32px);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	z-index: 20;
	pointer-events: none;
	white-space: nowrap;
	font-size: clamp(12px, 2.4vw, 15px);
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	box-sizing: border-box;
}
.banner-ring-host .banner-swiper-fraction.banner-swiper-fraction--down {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}
.banner-ring-host .banner-swiper-fraction__num {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-width: 2ch;
	flex: 0 0 auto;
	cursor: pointer;
	pointer-events: auto;
	color: rgba(255, 255, 255, 0.42);
	text-align: center;
	text-shadow: inherit;
}
.banner-ring-host .banner-swiper-fraction__num--active {
	color: #fff;
}
.banner-ring-host .banner-swiper-fraction.banner-swiper-fraction--indicator-use-true.banner-swiper-fraction--indicator-ring {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	gap: 30px;
}
.banner-ring-host .banner-swiper-fraction.banner-swiper-fraction--indicator-use-true.banner-swiper-fraction--indicator-ring .banner-swiper-fraction__num {
	width: 6px;
	height: 6px;
	min-width: 6px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	overflow: visible;
	position: relative;
	opacity: 1;
}
.banner-ring-host .banner-swiper-fraction.banner-swiper-fraction--indicator-use-true.banner-swiper-fraction--indicator-ring .banner-swiper-ring-progress {
	position: absolute;
	inset: -8px;
	width: calc(100% + 16px);
	height: calc(100% + 16px);
	overflow: visible;
	pointer-events: none;
	transform: rotate(-90deg);
}
.banner-ring-host .banner-swiper-fraction.banner-swiper-fraction--indicator-use-true.banner-swiper-fraction--indicator-ring .banner-swiper-ring-progress__arc {
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	transition: stroke-dashoffset 80ms linear;
}
.banner-ring-host .banner-swiper-fraction.banner-swiper-fraction--indicator-use-true.banner-swiper-fraction--indicator-ring.banner-swiper-fraction--thick .banner-swiper-ring-progress__arc {
	stroke-width: 3.4;
}

/* 모바일 배너: 이미지 하단 CTA와 겹치지 않도록 배너 아래에 배치 */
.max768 .banner-ring-host .banner-swiper-fraction.banner-swiper-fraction--indicator-use-true.banner-swiper-fraction--indicator-ring {
	position: relative;
	left: auto;
	bottom: auto;
	transform: none;
	margin: 16px auto 16px;
}

@media screen and (max-width: 480px) {
	.banner-ring-host .banner-swiper-fraction {
		left: 14px;
		bottom: 14px;
		font-size: 13px;
		gap: 10px;
	}
	.banner-ring-host .banner-swiper-fraction.banner-swiper-fraction--down {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}
}