@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@8..144,300..700&display=swap');

html.secondary-battery-materials-page,
.secondary-battery-materials-page {
	overflow-x: hidden;
}

.secondary-battery-materials-page {
	--sbm-bg: #000000;
	--sbm-text: #FFFFFF;
	--sbm-text-sub: #E6EAF0;
	--sbm-text-muted: #A4A8AB;
	--sbm-accent: #FF4E1C;
	--sbm-blue-glow: #5576A2;
	--sbm-glass-bg: rgba(255,255,255,0.08);
	--sbm-glass-border: rgba(255,255,255,0.1);
	--sbm-bar-bg: rgba(0,0,0,0.6);
	background: var(--sbm-bg);
	color: var(--sbm-text);
}

.sbm-section {
	position: relative;
	width: 100%;
}

.sbm-glass-card {
	background: var(--sbm-glass-bg);
	border: 1px solid var(--sbm-glass-border);
	backdrop-filter: blur(60px);
	-webkit-backdrop-filter: blur(60px);
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
	border-radius: 20px;
	overflow: hidden;
}

/* Intro (base styles in common-intro.css) */
.sbm-intro {
	background: #fff;
	--intro-title-color: #171B1E;
	--intro-subtitle-color: #171B1E;
}

.sbm-intro__title {
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	letter-spacing: -2px;
	color: var(--intro-title-color, #171B1E);
}

.sbm-intro__subtitle {
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	letter-spacing: -0.48px;
	color: var(--intro-subtitle-color, #171B1E);
}

.sbm-intro__scroll-cta {
	line-height: 140%;
	z-index: 1;
}

.sbm-intro__blur {
	position: absolute;
	inset: 0;
	background: rgba(0, 15, 39, 0.5);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	opacity: 0;
	z-index: 4;
	pointer-events: none;
	will-change: opacity;
}

/* con01 layer */
.sbm-con01-layer {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 5;
	pointer-events: none;
	padding: 60px 0;
	visibility: hidden;
	opacity: 0;
}

/* con01 text mask — 단일 마스크로 title+desc 함께 등장 */
.sbm-con01__text-mask {
	overflow: hidden;
}

.sbm-con01__text-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sbm-con01__title {
	margin: 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 56px;
	font-weight: 600;
	line-height: 150%;
	letter-spacing: -1.12px;
	color: var(--sbm-text);
	text-align: center;
}

.sbm-con01__desc {
	margin: 14px 0 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 150%;
	letter-spacing: -0.48px;
	color: #E6EAEE;
	text-align: center;
}

.sbm-con01__diagram {
	position: relative;
	width: min(1464px, calc(100vw - 140px));
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sbm-con01__lines {
	position: relative;
	z-index: 2;
	width: 860px;
	max-width: 100%;
	height: auto;
}

.sbm-con01__cards {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: -3px;
}

.sbm-con01__card {
	position: relative;
	width: 260px;
	height: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px;
	padding-top: 72px;
	border-radius: 0;
	background: radial-gradient(closest-side, rgba(255,255,255,0.024), rgba(255,255,255,0.04));
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	overflow: visible;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.3s ease, padding 0.3s ease;
}

/* Gradient border overlay (Figma: linear-gradient, opacity 0.5, 좌상→우하) */
.sbm-con01__card::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	background: linear-gradient(to bottom right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 51%, rgba(255,255,255,0.5) 100%) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.sbm-con01__card-title {
	margin: 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.48px;
	text-align: center;
	color: var(--sbm-text);
	transition: color 0.3s ease;
}

.sbm-con01__card-chevron {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 10px;
	color: var(--sbm-text);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.sbm-con01__card-arrow {
	display: none;
	width: 24px;
	height: 24px;
	margin-top: 10px;
	flex-shrink: 0;
}

.sbm-br-tablet {
	display: none;
}

.sbm-br-mobile {
	display: none;
}

.sbm-app-swiper {
	display: none;
}

@media (hover: hover) {
	.sbm-con01__card:hover {
		background: #fff;
		padding-top: 40px;
	}

	.sbm-con01__card:hover::before {
		opacity: 0;
	}

	.sbm-con01__card:hover .sbm-con01__card-title {
		color: #FF4E1C;
	}

	.sbm-con01__card:hover .sbm-con01__card-chevron {
		opacity: 1;
		transform: translateY(0);
		color: #FF4E1C;
	}
}

@media (hover: none) {
	.sbm-con01__card:active {
		opacity: 0.6;
	}
}

/* Con02 pin/wrapper — 커튼업 ScrollTrigger용 (pin ≠ tween 분리) */
.sbm-con02-pin {
	position: relative;
	width: 100%;
	z-index: 20;
}
.sbm-con02-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Sticky Bar */
.sbm-sticky-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 45;
	height: 80px;
	transform: translateY(-100%);
	visibility: hidden;
	transition: top 0.3s ease 0.2s, transform 0.3s ease 0.2s, visibility 0s linear 0.5s;
	background: rgba(0, 0, 0, 0.60);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(226, 226, 226, 0.20);
}
.sbm-sticky-bar.is-visible {
	transform: translateY(0);
	visibility: visible;
	transition: top 0.3s ease 0.2s, transform 0.3s ease 0.2s, visibility 0s linear 0s;
}

.sbm-sticky-bar__inner {
	height: 100%;
	width: min(1440px, calc(100vw - 120px));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.sbm-sticky-bar__title {
	font-family: 'Google Sans Flex', sans-serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.sbm-sticky-bar__tabs {
	display: flex;
	align-items: center;
	gap: 40px;
}

.sbm-sticky-bar__tab {
	position: relative;
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--sbm-text-muted);
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	padding: 0;
	transition: color 0.35s ease;
	cursor: pointer;
	white-space: nowrap;
}

.sbm-sticky-bar__tab.is-active {
	color: #fff;
}

.sbm-sticky-bar__toggle {
	display: none;
}

.sbm-sticky-bar__toggle-label {
	display: none;
}

.sbm-sticky-bar__dropdown {
	display: none;
}

/* Product sections */
.sbm-products {
	background: transparent;
}

.sbm-product {
	position: relative;
	display: none;
	background-color: #000;
}

.sbm-product.is-active {
	display: block;
}

.sbm-product__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index: 0;
}

.sbm-product__hero {
	position: relative;
	z-index: 1;
	min-height: 74vh;
	display: flex;
	align-items: center;
	padding: 120px 0;
	padding-top: 200px;
}


.sbm-product__hero-inner {
	width: min(1440px, calc(100vw - 120px));
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.sbm-product__hero-mask {
	visibility: hidden;
}

.sbm-product__title {
	margin: 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: clamp(44px, 4.2vw, 80px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -1.6px;
}

.sbm-product__subtitle {
	margin: 40px auto 0;
	max-width: 920px;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: -0.48px;
	color: var(--Text-Light-Gray, #E6EAEE);
	text-align: center;
}

.sbm-product__section {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 100%;
	padding: 74px max(60px, calc((100vw - 1464px) / 2)) 120px;
	background-color: #000;
}

.sbm-product__technology {
	padding-top: 0;
	padding-bottom: 0;
	overflow: visible;
	background: linear-gradient(to bottom, transparent 30%, #000 70%);
}

.sbm-product__technology .sbm-section-heading,
.sbm-product__technology .sbm-tech-layout {
	position: relative;
	z-index: 3;
}

/* Glow: 각 섹션 내부에 position: absolute로 배치
   sbm-tech-glow → .sbm-product__technology 내부, top 기준 위로 N px
   sbm-features-glow → .sbm-product__features 내부, top 기준 아래로 N px */
.sbm-tech-glow,
.sbm-features-glow {
	position: absolute;
	border-radius: 50%;
	background: rgba(85, 118, 162, 0.4);
	filter: blur(250px);
	pointer-events: none;
	z-index: 2;
}

.sbm-tech-glow {
	width: 691px;
	height: 691px;
	top: 112px;
	right: -264px;
}

.sbm-features-glow {
	width: 995px;
	height: 995px;
	top: -265px;
	left: -465px;
}

#product-battery-additive .sbm-tech-glow,
#product-battery-additive .sbm-features-glow { background: rgba(72, 101, 119, 0.5); }
#product-thermal-control .sbm-tech-glow,
#product-thermal-control .sbm-features-glow { background: rgba(76, 47, 48, 0.5); }
#product-electrical-infra .sbm-tech-glow,
#product-electrical-infra .sbm-features-glow { background: rgba(85, 117, 135, 0.5); }

.sbm-section-heading {
	margin: 0 0 40px;
	font-family: 'Google Sans Flex', sans-serif;
	font-size: 56px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}

/* Technology */
.sbm-tech-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.sbm-tech-layout__img-wrap,
.sbm-tech-layout__cards {
	opacity: 0;
	visibility: hidden;
}

.sbm-tech-layout--has-extra {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

.sbm-tech-layout--has-extra .sbm-tech-layout__img-wrap {
	/* sticky는 부모 overflow:hidden으로 동작 불가 — ScrollTrigger pin 사용 */
}

.sbm-product__technology--has-extra > .sbm-section-heading {
	position: sticky;
	top: 100px;
	z-index: 2;
}

.sbm-tech-layout__img-wrap {
	overflow: hidden;
}

.sbm-tech-layout__img {
	width: 100%;
	height: 500px;
	overflow: hidden;
	background: #1a1a1a;
}

.sbm-tech-layout__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sbm-tech-layout__cards {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sbm-tech-card {
	flex: 0 0 240px;
	height: 240px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	padding: 32px 40px 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sbm-tech-card__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbm-tech-card__num {
	font-family: var(--Family-Google-Sans-Flex, 'Google Sans Flex'), sans-serif;
	font-size: var(--Size-P1, 20px);
	font-weight: 500;
	line-height: 140%;
	color: var(--Text-Territary, #A4A8AB);
}

.sbm-tech-card__title {
	margin: 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 130%;
	letter-spacing: -0.48px;
	color: var(--black-white-white, #FFF);
}

.sbm-tech-card__desc {
	margin: 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.4px;
	color: #E6EAEE;
}

/* Features */
.sbm-product__features {
	padding-top: 200px;
	padding-bottom: 200px;
	overflow: visible;
	background: linear-gradient(to bottom, transparent 0%, #000 15%);
}

.sbm-product__features .sbm-section-heading,
.sbm-product__features .sbm-feature-row {
	position: relative;
	z-index: 3;
}

.sbm-feature-row {
	display: flex;
	gap: 30px;
}

.sbm-feature-card {
	flex: 1;
	min-width: 0;
	height: 380px;
	background: rgba(255, 255, 255, 0.08);
	padding: 48px 48px 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-top: 1px solid transparent;
	border-image: linear-gradient(to left, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.05) 100%) 1;
	border-image-slice: 1 0 0 0;
	opacity: 0;
	visibility: hidden;
}

.sbm-feature-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.sbm-feature-card__title {
	margin: 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.48px;
}

.sbm-feature-card__icon {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
}

.sbm-feature-card__icon-placeholder {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;

}

.sbm-feature-card__desc {
	margin: 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.4px;
	color: #E6EAEE;
}

/* Application */
.sbm-product__application {
	position: relative;
	padding-top: 148px;
	padding-bottom: 268px;
}

.sbm-product__application .sbm-section-heading {
	position: relative;
	z-index: 1;
}

.sbm-app-wrapper {
	position: relative;
	z-index: 1;
}

.sbm-app-bg {
	position: absolute;
	top: -200px;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center;
	transition: background-image 0.5s ease;
}

.sbm-app-bg__overlay {
	position: absolute;
	top: -200px;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 20%, #000 50%, rgba(0, 0, 0, 0.70) 82.39%, rgba(0, 0, 0, 0.00) 100%);
}

.sbm-app-bg__blur {
	position: absolute;
	top: -200px;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
}

.sbm-app-accordion {
	position: relative;
	display: flex;
	gap: 20px;
	height: 540px;
}

.sbm-app-accordion__item {
	position: relative;
	flex: 0 0 120px;
	overflow: hidden;
	cursor: pointer;
	transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sbm-app-accordion__item.is-expanded {
	flex: 1;
	cursor: default;
}

.sbm-app-accordion__thumb {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


.sbm-app-accordion__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 60px 60px 70px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

.sbm-app-accordion__item.is-expanded .sbm-app-accordion__content {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
	pointer-events: auto;
}

.sbm-app-accordion__title {
	margin: 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.64px;
}

.sbm-app-accordion__desc {
	margin: 0;
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.48px;
	color: #E6EAEE;
}

.sbm-app-accordion__collapsed-label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.sbm-app-accordion__item.is-expanded .sbm-app-accordion__collapsed-label {
	opacity: 0;
	pointer-events: none;
}

.sbm-app-accordion__collapsed-label span {
	font-family: var(--Family-Pretendard, Pretendard), sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 140%;
	letter-spacing: -0.4px;
	text-align: center;
}

.sbm-app-accordion__plus {
	flex-shrink: 0;
	transition: transform 0.6s cubic-bezier(0.42, 0, 0.58, 1);
}

.sbm-app-accordion__item.is-expanded .sbm-app-accordion__plus {
	transform: rotate(90deg);
}

/* curtain backdrop — position: static 유지 (offsetTop 정상 계산용) */

@media (max-width: 1024px) {

	/* ── Intro ── */
	.sbm-intro__bg-wrapper {
		width: 512px;
		height: 500px;
	}

	.sbm-intro__title {
		font-size: 48px;
	}

	.sbm-intro__subtitle {
		font-size: 20px;
	}

	.sbm-intro__content {
		top: calc(var(--header-h, 90px) + 10vh);
	}

	.sbm-intro__scroll-cta {
		font-size: 16px;
	}

	.sbm-con01-layer {
		padding: 40px 0;
	}

	.sbm-con01__title {
		font-size: 36px;
		letter-spacing: -0.72px;
	}

	.sbm-con01__desc {
		font-size: 20px;
		margin-top: 10px;
	}

	.sbm-br-tablet {
		display: block;
	}

	.sbm-con01__diagram {
		width: calc(100% - 128px);
		margin-top: 40px;
	}

	.sbm-con01__lines {
		display: none;
	}

	.sbm-con01__cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		margin-top: 0;
	}

	.sbm-con01__card {
		width: 200px;
		height: 200px;
		padding: 30px;
		transition: none;
	}

	.sbm-con01__card:hover {
		background: radial-gradient(72.53% 72.53% at 50% 50%, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.04) 100%);
	}

	.sbm-con01__card:hover::before {
		opacity: 1;
	}

	.sbm-con01__card:hover .sbm-con01__card-title {
		color: var(--sbm-text);
	}

	.sbm-con01__card:hover .sbm-con01__card-chevron {
		opacity: 0;
		transform: translateY(8px);
	}

	.sbm-con01__card:active {
		opacity: 0.6;
	}

	.sbm-con01__card-title {
		font-size: 20px;
	}

	.sbm-con01__card-chevron {
		display: none;
	}

	.sbm-con01__card-arrow {
		display: block;
		opacity: 1;
	}

	.sbm-sticky-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 60px;
		min-height: 60px;
		border-bottom: none;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		overflow: visible;
	}

	.sbm-sticky-bar::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: var(--bar-total-h, 60px);
		background: rgba(0, 0, 0, 0.60);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		z-index: -1;
	}

	.sbm-sticky-bar__inner {
		width: calc(100% - 80px);
		min-height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.sbm-sticky-bar__title {
		font-family: var(--Family-Pretendard, Pretendard), sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: -0.32px;
		color: #fff;
	}

	.sbm-sticky-bar__tabs {
		display: none;
	}

	.sbm-sticky-bar__toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		appearance: none;
		border: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
		padding: 0;
	}

	.sbm-sticky-bar__toggle-label {
		display: block;
		font-family: var(--Family-Pretendard, Pretendard), sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 140%;
		letter-spacing: -0.32px;
		color: #fff;
	}

	.sbm-sticky-bar__toggle-arrow {
		transition: transform 0.3s ease;
	}

	.sbm-sticky-bar__toggle[aria-expanded="true"] .sbm-sticky-bar__toggle-arrow {
		transform: rotate(180deg);
	}

	.sbm-sticky-bar__dropdown {
		display: none;
		position: absolute;
		right: 0;
		left: 0;
		top: 60px;
		width: 100%;
		margin: 0;
		padding: 0 0 12px;
		background: transparent;
		border-radius: 0;
		z-index: 10;
	}

	.sbm-sticky-bar__dropdown.is-open {
		display: block;
	}

	.sbm-sticky-bar__dropdown-item {
		display: block;
		width: 100%;
		appearance: none;
		border: 0;
		background: transparent;
		color: var(--sbm-text-muted);
		font-family: var(--Family-Pretendard, Pretendard), sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: -0.32px;
		padding: 10px 72px;
		text-align: right;
		cursor: pointer;
		transition: color 0.2s ease;
	}

	.sbm-sticky-bar__dropdown-item:first-child {
		padding-top: 0;
	}

	.sbm-sticky-bar__dropdown-item.is-active {
		color: #fff;
		font-weight: 400;
	}

	.sbm-product__hero {
		min-height: 50vh;
		padding: 100px 0 80px;
	}

	.sbm-product__hero-inner {
		width: calc(100% - 80px);
	}

	.sbm-product__title {
		font-size: 40px;
		letter-spacing: -0.8px;
	}

	.sbm-product__subtitle {
		font-size: 20px;
		max-width: 520px;
		margin-top: 20px;
	}

	.sbm-product__section {
		padding: 60px 40px 80px;
	}

	.sbm-product__technology {
		padding-top: 0;
		padding-bottom: 0;
	}

	.sbm-section-heading {
		font-family: var(--Family-Google-Sans-Flex, "Google Sans Flex"), sans-serif;
		font-size: 34px;
		font-weight: 500;
		line-height: 150%;
		margin-bottom: 20px;
	}

	.sbm-tech-layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 20px;
	}

	.sbm-tech-layout__img {
		flex: none;
		width: 100%;
		aspect-ratio: 335 / 232;
		align-self: auto;
		grid-row: 1;
		grid-column: 1;
	}

	.sbm-tech-layout__cards {
		display: contents;
	}

	.sbm-tech-card:nth-child(1) {
		grid-row: 1;
		grid-column: 2;
	}

	.sbm-tech-card:nth-child(2) {
		grid-row: 2;
		grid-column: 2;
	}

	.sbm-tech-layout--has-extra {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		gap: 20px;
	}

	.sbm-tech-layout--has-extra .sbm-tech-layout__img {
		grid-row: 1;
		grid-column: 1;
		height: auto;
		aspect-ratio: 335 / 232;
	}

	.sbm-tech-layout--has-extra .sbm-tech-layout__cards {
		grid-column: 2;
		grid-row: 1 / -1;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.sbm-tech-layout--has-extra .sbm-tech-card {
		aspect-ratio: unset;
	}

	.sbm-tech-card {
		flex: none;
		height: auto;
		padding: 30px 20px;
		aspect-ratio: 335 / 232;
	}

	.sbm-tech-card__num {
		font-family: var(--Family-Google-Sans-Flex, "Google Sans Flex"), sans-serif;
		font-size: 18px;
		font-weight: 500;
		line-height: 140%;
		color: var(--Text-Territary, #A4A8AB);
	}

	.sbm-tech-card__title {
		font-family: var(--Family-Pretendard, Pretendard), sans-serif;
		font-size: 20px;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.4px;
		color: #fff;
	}

	.sbm-tech-card__desc {
		font-family: var(--Family-Pretendard, Pretendard), sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: -0.32px;
		color: var(--Text-Light-Gray, #E6EAEE);
	}

	.sbm-product__features {
		padding-top: 100px;
		padding-bottom: 0;
	}

	.sbm-feature-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.sbm-feature-card {
		padding: 30px 20px 40px;
		height: auto;
		aspect-ratio: 335 / 226;
	}

	.sbm-feature-card__title {
		font-size: 20px;
	}

	.sbm-feature-card__desc {
		font-size: 16px;
	}

	.sbm-feature-card__icon {
		width: 60px;
		height: 60px;
	}

	.sbm-product__application {
		padding-top: 100px;
		padding-bottom: 140px;
	}

	.sbm-product__bg {
		height: 69vw !important;
	}

	.sbm-app-bg {
		display: none;
	}

	.sbm-app-accordion {
		height: auto;
		aspect-ratio: 688 / 280;
		gap: 18px;
	}

	.sbm-app-accordion__item {
		flex: 0 0 80px;
	}

	.sbm-app-accordion__item.is-expanded {
		flex: 1;
	}

	.sbm-app-accordion__content {
		padding: 18px;
		gap: 6px;
	}

	.sbm-app-accordion__title {
		font-size: 20px;
	}

	.sbm-app-accordion__desc {
		font-size: 16px;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: -0.32px;
	}

	.sbm-app-accordion__collapsed-label span {
		font-size: 16px;
		font-weight: 600;
		line-height: 140%;
		letter-spacing: -0.32px;
	}

	.sbm-tech-glow,
	.sbm-features-glow {
		filter: blur(180px);
	}

	.sbm-tech-glow {
		width: 273px;
		height: 273px;
		top: -35px;
		right: -136px;
	}

	.sbm-features-glow {
		width: 562px;
		height: 562px;
		top: -145px;
		left: -282px;
	}

	.anniversary-sub-banner__item {
		padding: 50px 0 40px;
	}

	.anniversary-sub-banner__text {
		font-size: 20px;
		line-height: 150%;
		letter-spacing: -0.4px;
	}

	.anniversary-sub-banner__go-btn {
		width: 40px;
		height: 40px;
	}

	.anniversary-sub-banner__go-btn-circle {
		width: 40px;
		height: 40px;
	}

	.anniversary-sub-banner__go-btn-arrows {
		width: 16px;
		height: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.anniversary-sub-banner__go-btn-arrow svg {
		width: 16px;
		height: 16px;
	}

	.anniversary-sub-banner__go-btn-arrow {
		position: relative;
	}

	.anniversary-sub-banner__go-btn-arrow--hover {
		display: none;
	}

	.anniversary-sub-banner__go-btn-arrow--default {
		transform: none;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.sbm-tech-layout,
	.sbm-tech-layout--has-extra {
		grid-template-columns: 1fr 1fr;
	}

	.sbm-tech-layout__img {
		height: auto;
		aspect-ratio: 335 / 232;
		min-height: 232px;
	}

	.sbm-tech-layout--has-extra .sbm-tech-layout__img {
		height: auto;
		aspect-ratio: 335 / 232;
		min-height: 232px;
	}

	.sbm-tech-layout__cards {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.sbm-tech-card {
		aspect-ratio: unset;
		height: auto;
		min-height: 232px;
	}

	.sbm-tech-card:nth-child(1),
	.sbm-tech-card:nth-child(2) {
		grid-row: auto;
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	.sbm-br-tablet {
		display: none;
	}

	.sbm-br-mobile {
		display: block;
	}

	.sbm-con01-layer {
		padding: 20px 0;
	}

	.sbm-con01__title {
		font-size: 34px;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.68px;
	}

	.sbm-con01__desc {
		font-size: 18px;
		font-weight: 400;
		margin-top: 8px;
		line-height: 140%;
		letter-spacing: -0.36px;
		color: var(--Text-Light-Gray, #E6EAEE);
	}

	.sbm-con01__diagram {
		width: calc(100% - 40px);
		margin-top: 34px;
	}

	.sbm-con01__lines {
		display: none;
	}

	.sbm-con01__cards {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 0;
		width: 100%;
	}

	.sbm-con01__card {
		width: 100%;
		height: 60px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px 0 25px;
		padding-top: 0;
		border-radius: 0;
		background: radial-gradient(72.53% 72.53% at 50% 50%, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.04) 100%);
		border: none;
		transition: none;
	}

	.sbm-con01__card:hover {
		background: radial-gradient(72.53% 72.53% at 50% 50%, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0.04) 100%);
		padding-top: 0;
	}

	.sbm-con01__card:hover::before {
		opacity: 1;
	}

	.sbm-con01__card:hover .sbm-con01__card-title {
		color: var(--sbm-text);
	}

	.sbm-con01__card:active {
		opacity: 0.6;
	}

	.sbm-con01__card::before {
		display: block;
		inset: 0;
		border: 1px solid transparent;
		background: linear-gradient(to bottom right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 51%, rgba(255,255,255,0.5) 100%) border-box;
		-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		opacity: 0.5;
	}

	.sbm-con01__card-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 150%;
		letter-spacing: -0.4px;
		text-align: left;
	}

	.sbm-con01__card-title br {
		display: none;
	}

	.sbm-con01__card-chevron {
		display: none;
	}

	.sbm-con01__card-arrow {
		display: block;
		margin-top: 0;
	}

	.sbm-sticky-bar {
		height: 60px;
		min-height: 60px;
		margin-bottom: -60px;
		border-bottom: none;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.sbm-sticky-bar::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: var(--bar-total-h, 60px);
		background: rgba(0, 0, 0, 0.60);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		z-index: -1;
	}

	.sbm-sticky-bar__inner {
		width: calc(100% - 40px);
	}

	.sbm-sticky-bar__title {
		display: none;
	}

	.sbm-sticky-bar__tabs {
		display: none;
	}

	.sbm-sticky-bar__toggle {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.sbm-sticky-bar__toggle-label {
		font-family: var(--Family-Pretendard, Pretendard), sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 140%;
		letter-spacing: -0.32px;
		color: var(--Text-White, #FFF);
	}

	.sbm-sticky-bar__dropdown-item {
		color: var(--Text-Territary, #A4A8AB);
		text-align: left;
		font-family: var(--Family-Pretendard, Pretendard), sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: -0.32px;
		padding: 10px 20px;
	}

	.sbm-sticky-bar__dropdown {
		left: 0;
		right: 0;
		top: 60px;
		width: 100%;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.sbm-product__bg {
		height: 141.33vw !important;
		max-height: 100vh;
	}

	.sbm-product__hero {
		min-height: calc(100vh - 130px);
		padding: 0;
	}

	.sbm-product__hero-inner {
		width: calc(100% - 40px);
		text-align: center;
	}

	.sbm-product__title {
		font-size: 44px;
		font-weight: 600;
		letter-spacing: 0;
		line-height: 120%;
	}

	.sbm-product__subtitle {
		font-size: 20px;
		margin-top: 20px;
		max-width: 335px;
		line-height: 130%;
		letter-spacing: -0.4px;
	}

	.sbm-product__section {
		padding: 40px 20px 0;
	}

	.sbm-section-heading {
		font-size: 34px;
		margin-bottom: 20px;
		line-height: 150%;
	}

	.sbm-tech-layout {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.sbm-tech-layout__img {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 335 / 232;
		align-self: auto;
	}

	.sbm-tech-layout__cards {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sbm-tech-layout--has-extra {
		flex-direction: column;
		gap: 10px;
	}

	.sbm-tech-layout--has-extra .sbm-tech-layout__cards {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sbm-tech-card {
		flex: none;
		height: auto;
		padding: 30px 20px 30px;
		aspect-ratio: 335 / 209;
	}

	.sbm-tech-card__num {
		font-size: 18px;
	}

	.sbm-tech-card__title {
		font-size: 20px;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.4px;
	}

	.sbm-tech-card__desc {
		font-size: 16px;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: -0.32px;
	}

	.sbm-product__technology {
		padding-top: 0;
	}

	.sbm-product__features {
		padding-top: 100px;
		padding-bottom: 0;
	}

	.sbm-feature-row {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sbm-feature-card {
		padding: 30px 20px 40px;
		height: auto;
		aspect-ratio: 335 / 226;
	}

	.sbm-feature-card__header {
		flex-direction: row;
	}

	.sbm-feature-card__title {
		font-size: 20px;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.4px;
		color: #fff;
	}

	.sbm-feature-card__desc {
		font-size: 16px;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: -0.32px;
	}

	.sbm-feature-card__icon {
		width: 48px;
		height: 48px;
	}

	.sbm-product__application {
		padding-top: 100px;
		padding-bottom: 120px;
	}

	.sbm-app-accordion {
		display: none;
	}

	.sbm-app-swiper {
		display: block;
		width: 100%;
		overflow: hidden;
		border-radius: 0;
	}

	.sbm-app-swiper__track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 20px;
	}

	.sbm-app-swiper__track::-webkit-scrollbar {
		display: none;
	}

	.sbm-app-swiper__slide {
		flex: 0 0 100%;
		width: 100%;
		aspect-ratio: 335 / 360;
		border-radius: 0;
		overflow: hidden;
		position: relative;
		scroll-snap-align: start;
	}

	.sbm-app-swiper__thumb {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
		border-radius: 0;
	}

	.sbm-app-swiper__gradient {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 130px;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
	}

	.sbm-app-swiper__content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 20px 20px;
		z-index: 1;
	}

	.sbm-app-swiper__title {
		font-family: var(--Family-Pretendard, Pretendard), sans-serif;
		font-size: 20px;
		font-weight: 600;
		line-height: 150%;
		letter-spacing: -0.4px;
		color: #fff;
	}

	.sbm-app-swiper__desc {
		font-family: var(--Family-Pretendard, Pretendard), sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: -0.32px;
		color: #fff;
		margin-top: 4px;
	}

	.sbm-app-swiper-dots {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 20px;
	}

	.sbm-app-swiper-dots:empty {
		display: none;
	}

	.sbm-app-swiper-dots__dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: 0;
		padding: 0;
		background: #C5C9CC;
		cursor: pointer;
	}

	.sbm-app-swiper-dots__dot.is-active {
		background: #FF4E1C;
	}

	.sbm-tech-glow,
	.sbm-features-glow {
		filter: blur(120px);
	}

	.sbm-tech-glow {
		width: 273px;
		height: 273px;
		top: 126px;
		right: -136px;
	}

	.sbm-features-glow {
		width: 562px;
		height: 562px;
		top: -189px;
		left: -282px;
	}

	.anniversary-sub-banner__inner {
		flex-direction: column;
	}

	.anniversary-sub-banner__item {
		padding: 50px 0 40px;
		border-bottom: 1px solid #666A6D;
	}

	.anniversary-sub-banner__divider {
		display: none;
	}

	.anniversary-sub-banner__text {
		font-size: 20px;
		line-height: 150%;
		letter-spacing: -0.4px;
	}

	.anniversary-sub-banner__go-btn {
		width: 40px;
		height: 40px;
	}

	.anniversary-sub-banner__go-btn-circle {
		width: 40px;
		height: 40px;
	}

	.anniversary-sub-banner__go-btn-arrows {
		width: 16px;
		height: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.anniversary-sub-banner__go-btn-arrow svg {
		width: 16px;
		height: 16px;
	}

	.anniversary-sub-banner__go-btn-arrow {
		position: relative;
	}

	.anniversary-sub-banner__go-btn-arrow--default,
	.anniversary-sub-banner__go-btn-arrow--hover {
		transition: none;
	}

	.anniversary-sub-banner__go-btn-arrow--hover {
		display: none;
	}

	.anniversary-sub-banner__go-btn-arrow--default {
		transform: none;
	}

	.anniversary-sub-banner__go-btn-circle {
		transition: none;
	}
}