.yjsj-ring-builder-note {
	margin-top: 4px;
	color: #696e76;
	font-size: 11px;
	line-height: 1.35;
}

.yjsj-ring-showroom {
	--yjsj-ring-height: 720px;
	position: relative;
	width: 100%;
	height: var(--yjsj-ring-height);
	min-height: 420px;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(ellipse at 50% 38%, rgba(25, 70, 124, .48), transparent 43%),
		radial-gradient(ellipse at 50% 76%, rgba(20, 54, 103, .38), transparent 44%),
		#030609;
	color: #fff;
}

.yjsj-ring-showroom--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.yjsj-ring-backdrop {
	position: absolute;
	left: 50%;
	top: 51%;
	z-index: 0;
	width: 72vw;
	height: 34vw;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(61, 139, 255, .18), transparent 65%);
	transform: translate(-50%, -50%);
	filter: blur(22px);
	pointer-events: none;
}

.yjsj-ring-heading {
	position: absolute;
	top: 5%;
	left: 50%;
	z-index: 3;
	text-align: center;
	transform: translateX(-50%);
	pointer-events: none;
}

.yjsj-ring-heading span {
	display: block;
	color: #70c7ff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .28em;
}

.yjsj-ring-heading strong {
	display: block;
	margin-top: 9px;
	font-size: clamp(32px, 4vw, 62px);
	font-weight: 300;
	letter-spacing: .08em;
}

.yjsj-ring-stage {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: 1;
	width: 100%;
	cursor: grab;
	touch-action: pan-y pinch-zoom;
	outline: none;
	transform: translateX(-50%);
}

.yjsj-ring-stage.is-dragging {
	cursor: grabbing;
}

.yjsj-ring-stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.yjsj-ring-meta {
	position: absolute;
	left: 28px;
	bottom: 24px;
	z-index: 4;
	min-width: 250px;
	padding: 12px 16px;
	border-left: 2px solid #72c8ff;
	background: rgba(3, 8, 15, .58);
	pointer-events: none;
	backdrop-filter: blur(10px);
}

.yjsj-ring-meta small {
	color: #73c9ff;
	font-size: 9px;
	letter-spacing: .24em;
}

.yjsj-ring-meta h3 {
	margin: 7px 0 0;
	font-size: clamp(17px, 1.35vw, 23px);
	font-weight: 500;
}

.yjsj-ring-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 46px;
	height: 66px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(5, 12, 22, .58);
	color: #fff;
	font: 38px/1 Georgia, serif;
	cursor: pointer;
	backdrop-filter: blur(12px);
	transform: translateY(-50%);
}

.yjsj-ring-prev {
	left: 20px;
}

.yjsj-ring-next {
	right: 20px;
}

.yjsj-ring-hint {
	position: absolute;
	right: 22px;
	bottom: 20px;
	z-index: 4;
	margin: 0;
	color: rgba(255, 255, 255, .38);
	font-size: 10px;
	letter-spacing: .08em;
	pointer-events: none;
}

.yjsj-ring-showroom--images {
	background: transparent;
}

.yjsj-ring-showroom--images .yjsj-ring-backdrop,
.yjsj-ring-showroom--images .yjsj-ring-heading,
.yjsj-ring-showroom--images .yjsj-ring-meta,
.yjsj-ring-showroom--images .yjsj-ring-arrow,
.yjsj-ring-showroom--images .yjsj-ring-hint {
	display: none;
}

@media (max-width: 767px) {
	.yjsj-ring-showroom {
		height: min(var(--yjsj-ring-height), 72vh);
		min-height: 430px;
	}

	.yjsj-ring-showroom--full {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
	}

	.yjsj-ring-stage {
		width: 100%;
	}

	.yjsj-ring-heading {
		top: 4%;
	}

	.yjsj-ring-meta {
		left: 14px;
		right: 14px;
		bottom: 42px;
		min-width: 0;
	}

	.yjsj-ring-arrow {
		display: none;
	}

	.yjsj-ring-hint {
		right: 14px;
		bottom: 16px;
		left: 14px;
		text-align: right;
	}
}