
.drb-oss{
	position:relative;
	width:100%;
	min-height:900px;
	background:#000;
	color:#fff;
	overflow:hidden;
	--drb-oss-dot-ring-size:10px;
}
.drb-oss *{box-sizing:border-box}
.drb-oss-orbit-view{
	position:relative;
	min-height:900px;
	display:none;
}
.drb-oss-orbit-view.is-active{display:block}
.drb-oss-orbit-ring{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:72%;
	height:72%;
	border:1px solid rgba(255,255,255,.16);
	border-radius:50%;
	pointer-events:none;
}
.drb-oss-center-wrap{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	z-index:2;
}
.drb-oss-center-card{
	width:280px;
	height:380px;
	border:10px solid #9aa0a6;
	border-radius:28px;
	background:#222;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.drb-oss-center-card img{
	width:40%;
	height:40%;
	object-fit:contain;
	display:block;
}
.drb-oss-hotspot{
	position:absolute;
	width:22px;
	height:22px;
	border:none;
	border-radius:50%;
	background:#fff;
	box-shadow:0 0 0 var(--drb-oss-dot-ring-size,10px) rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.2);
	cursor:pointer;
	z-index:4;
	padding:0;
	appearance:none;
	transition:transform .2s ease, background-color .2s ease;
}
.drb-oss-hotspot:hover,
.drb-oss-hotspot.is-active{transform:scale(1.08)}
.drb-oss-hotspot-top{
	left:50%;
	top:12%;
	transform:translateX(-50%) translate(var(--drb-hotspot-offset-x, 0), var(--drb-hotspot-offset-y, 0));
}
.drb-oss-hotspot-right{
	right:12%;
	top:50%;
	transform:translateY(-50%) translate(var(--drb-hotspot-offset-x, 0), var(--drb-hotspot-offset-y, 0));
}
.drb-oss-hotspot-bottom{
	left:50%;
	bottom:12%;
	transform:translateX(-50%) translate(var(--drb-hotspot-offset-x, 0), var(--drb-hotspot-offset-y, 0));
}
.drb-oss-hotspot-left{
	left:12%;
	top:50%;
	transform:translateY(-50%) translate(var(--drb-hotspot-offset-x, 0), var(--drb-hotspot-offset-y, 0));
}
.drb-oss-preview-card{
	position:absolute;
	display:flex;
	align-items:center;
	gap:12px;
	background:transparent;
	border:none;
	padding:0;
	cursor:pointer;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .24s ease, visibility .24s ease;
	z-index:8;
	text-align:left;
	--drb-preview-offset-x: 0px;
	--drb-preview-offset-y: 0px;
}
.drb-oss-preview-card.is-visible{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}
.drb-oss-preview-card.is-active .drb-oss-preview-icon{
	transform:scale(1.03);
}
.drb-oss-preview-icon{
	width:80px;
	height:80px;
	border-radius:50%;
	background:#5b3d88;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:34px;
	line-height:1;
	flex:0 0 auto;
	transition:background-color .2s ease, transform .2s ease;
}
.drb-oss-preview-icon i,
.drb-oss-preview-icon svg{
	width:1em;
	height:1em;
}
.drb-oss-preview-content{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}
.drb-oss-preview-title{
	font-size:32px;
	font-weight:500;
	line-height:1.15;
	max-width:240px;
}
.drb-oss-preview-subtext{
	font-size:12px;
	color:rgba(255,255,255,.66);
	margin-top:4px;
	display:none;
}
.drb-oss-preview-card[data-position="top"]{
	left:50%;
	top:12%;
	transform:translate(-50%,-50%);
	margin-left:var(--drb-preview-offset-x);
	margin-top:var(--drb-preview-offset-y);
}
.drb-oss-preview-card[data-position="right"]{
	left:88%;
	right:auto;
	top:50%;
	transform:translate(0,-50%);
	margin-left:var(--drb-preview-offset-x);
	margin-top:var(--drb-preview-offset-y);
}
.drb-oss-preview-card[data-position="bottom"]{
	left:50%;
	bottom:12%;
	top:auto;
	transform:translate(-50%,50%);
	margin-left:var(--drb-preview-offset-x);
	margin-bottom:calc(var(--drb-preview-offset-y) * -1);
}
.drb-oss-preview-card[data-position="left"]{
	left:12%;
	top:50%;
	transform:translate(-100%,-50%);
	margin-left:var(--drb-preview-offset-x);
	margin-top:var(--drb-preview-offset-y);
}
.drb-oss-preview-card[data-position="left"] .drb-oss-preview-content{
	order:1;
	align-items:flex-start;
}
.drb-oss-preview-card[data-position="left"] .drb-oss-preview-icon{
	order:0;
}
.drb-oss-carousel-view{
	display:none;
	padding:36px 60px 40px;
}
.drb-oss-carousel-view.is-active{
	display:block;
}
.drb-oss-carousel-topbar{
	display:flex;
	align-items:center;
	gap:18px;
	margin-bottom:40px;
}
.drb-oss-back-button{
	width:34px;
	height:56px;
	border:1px solid #ff2a2a;
	background:transparent;
	color:#fff;
	font-size:36px;
	line-height:1;
	cursor:pointer;
	padding:0;
}
.drb-oss-progress-wrap{
	position:relative;
	flex:1 1 auto;
	height:46px;
	border:1px solid #ff2a2a;
}
.drb-oss-progress-line,
.drb-oss-progress-fill{
	position:absolute;
	left:12px;
	right:12px;
	top:50%;
	height:4px;
	transform:translateY(-50%);
}
.drb-oss-progress-line{
	background:#1c2331;
}
.drb-oss-progress-fill{
	background:#6a4b8d;
	right:auto;
	width:25%;
	transition:width .25s ease;
}
.drb-oss-slide-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:26px;
	align-items:stretch;
}
.drb-oss-slide-content{
	position:relative;
	min-height:460px;
	padding:80px 24px 24px;
}
.drb-oss-year-watermark{
	position:absolute;
	left:10px;
	top:35px;
	font-size:190px;
	font-weight:700;
	line-height:.9;
	color:rgba(84,95,120,.23);
	pointer-events:none;
	white-space:nowrap;
}
.drb-oss-year-label{
	position:relative;
	z-index:2;
	font-size:54px;
	font-weight:700;
	margin-bottom:18px;
}
.drb-oss-slide-title{
	position:relative;
	z-index:2;
	margin:0 0 18px;
	font-size:34px;
}
.drb-oss-slide-description{
	position:relative;
	z-index:2;
	font-size:24px;
	line-height:1.6;
}
.drb-oss-slide-description p{margin:0 0 22px}
.drb-oss-slide-image{
	min-height:460px;
	background:#2b2b2b;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.drb-oss-slide-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.drb-oss-carousel-dots{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:14px;
	margin-top:28px;
}
.drb-oss-carousel-dot{
	width:10px;
	height:10px;
	border:none;
	border-radius:50%;
	background:#666;
	cursor:pointer;
	padding:0;
}
.drb-oss-carousel-dot.is-active{background:#6a4b8d}

@media (max-width: 1024px){
	.drb-oss,
	.drb-oss-orbit-view{min-height:760px}
	.drb-oss-preview-title{font-size:24px;max-width:200px}
	.drb-oss-slide-grid{grid-template-columns:1fr}
	.drb-oss-slide-content{min-height:auto}
	.drb-oss-slide-image{min-height:360px}
	.drb-oss-year-watermark{font-size:140px}
}
@media (max-width: 767px){
	.drb-oss-preview-card[data-position="top"]{
		left:50%;
		top:11%;
		transform:translate(-50%,-50%);
	}
	.drb-oss-preview-card[data-position="right"]{
		left:94%;
		right:auto;
		top:50%;
		transform:translate(0,-50%);
	}
	.drb-oss-preview-card[data-position="bottom"]{
		left:50%;
		bottom:11%;
		top:auto;
		transform:translate(-50%,50%);
	}
	.drb-oss-preview-card[data-position="left"]{
		left:6%;
		top:50%;
		transform:translate(-100%,-50%);
	}
	.drb-oss,
	.drb-oss-orbit-view{min-height:640px}
	.drb-oss-orbit-ring{
		width:92vw;
		height:92vw;
		max-width:320px;
		max-height:320px;
	}
	.drb-oss-center-card{
		width:170px;
		height:230px;
		border-width:6px;
		border-radius:20px;
	}
	.drb-oss-hotspot{
		width:16px;
		height:16px;
		box-shadow:0 0 0 8px rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.2);
	}
	.drb-oss-hotspot-top{top:11%}
	.drb-oss-hotspot-right{right:6%}
	.drb-oss-hotspot-bottom{bottom:11%}
	.drb-oss-hotspot-left{left:6%}
	.drb-oss-preview-card{
		width:calc(100% - 32px);
		max-width:320px;
		gap:14px;
	}
	.drb-oss-preview-icon{
		width:58px;
		height:58px;
		font-size:28px;
	}
	.drb-oss-preview-title{
		font-size:20px;
		max-width:180px;
	}
	.drb-oss-preview-subtext{display:block}
	.drb-oss-carousel-view{padding:18px 16px 26px}
	.drb-oss-carousel-topbar{gap:10px;margin-bottom:18px}
	.drb-oss-back-button{
		width:32px;
		height:48px;
		font-size:28px;
		flex:0 0 32px;
	}
	.drb-oss-progress-wrap{height:18px}
	.drb-oss-progress-line,
	.drb-oss-progress-fill{
		height:3px;
		left:0;
		right:0;
	}
	.drb-oss-slide-grid{
		grid-template-columns:1fr;
		gap:18px;
	}
	.drb-oss-slide-content{
		min-height:auto;
		padding:20px 14px 8px;
		text-align:center;
	}
	.drb-oss-slide-image{min-height:240px}
	.drb-oss-year-watermark{
		left:50%;
		top:58px;
		transform:translateX(-50%);
		font-size:110px;
	}
	.drb-oss-year-label{font-size:28px;margin-bottom:16px}
	.drb-oss-slide-title{font-size:24px;margin-bottom:14px}
	.drb-oss-slide-description{font-size:16px;line-height:1.55}
	.drb-oss-slide-description p{margin:0 0 16px}
	.drb-oss-carousel-dots{gap:10px;margin-top:18px}
	.drb-oss-carousel-dot{width:9px;height:9px}
}

.drb-oss-hotspot.is-active{opacity:0;pointer-events:none;}
