/* 产品脊柱页 pro_jizhu */

/* ===== 第一屏（从 proyx.css 抽取，独立存储） ===== */
.proyx .item .text-cont {
	padding: 6rem 0;
	background: #f1f3f7;
}
.proyx .item .rt {
	position: relative;
	width: 100%;
	max-width: 40rem;
	padding: 0 3rem;
}
.proyx .item .text-cont .swiper {
	height: auto;
	aspect-ratio: 647/487;
}
.proyx .item .lt {
	width: 100%;
	max-width: 35rem;
}
.proyx .item .lt .tt {
	font-size: var(--f48);
	line-height: 1.3;
}
.proyx .item .lt .ar_article {
	margin-top: 1.2rem;
}
.proyx .item .lt .pub-btn {
	margin-top: 3.8rem;
}
.proyx .item .text-cont .swiper-button {
	--swiper-navigation-sides-offset: 0;
}
.proyx .item .text-cont .swiper-button::after {
	display: none;
}
.proyx .item .text-cont .swiper-button i {
	font-size: var(--f28);
	color: #a3a5a9;
}

/* ===== 区块标题（从 sipunai base.css 抽取） ===== */
.pro-zhead .subt {
	background: var(--themeColor);
	border-radius: 20rem;
	color: #fff;
	font-size: var(--f18);
	/* padding: .4rem 1.5rem; */
	padding: .4rem 0;
	width: 10em;
	text-align: center;
	display: inline-block;
}

.pro-zhead .tt {
	font-size: var(--f36);
	margin-top: .8rem;
}

.just-center .pro-zhead {
	text-align: center;
}

/* 悬停导航 */
.xuanting {
	position: sticky;
	top: calc(var(--headerHeight) + 2rem);
}

/* ===== 特点（从 sipunai index.css 抽取） ===== */
.s-ys {
	background-size: 60% auto;
	background-repeat: no-repeat;
	background-position: 180% 0%;
}

.s-ys .szgd {
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.s-ys .szgd .li .num {
	margin: 0 auto;
	background: url(../images/liubianxing.png) no-repeat center/contain;
	height: auto;
	aspect-ratio: 234/259;
	width: 60%;
	align-items: center;
	justify-content: center;
	margin-top: 5.1rem;
}

.s-ys .szgd .li .num span {
	color: #fff;
	font-family: 'dingtalkj-font';
	font-weight: 500;
	font-size: var(--f54);
}

.s-ys .szgd .li .num em {
	color: #fff;
	font-family: 'dingtalkj-font';
	font-size: var(--f32);
	margin: 0;
}

.s-ys .szgd .li .p {
	width: 78%;
	margin: 0 auto;
	margin-top: 6rem;
}

.s-ys .szgd .li .txt {
	margin-top: .4rem;
}

.s-ys .szgd .li .txt h5 {
	font-size: var(--f30);
	text-align: center;
	font-weight: 400;
}

.s-ys .szgd .li .txt p {
	margin-top: .6rem;
	font-size: var(--f17);
	color: #262626;
	font-weight: 300;
	line-height: 1.9;
}

.s-ys .szgd .li .p .d .dian {
	display: block;
	border: 1px solid var(--themeColor);
	border-radius: 100%;
	height: auto;
	aspect-ratio: 1/1;
	width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.s-ys .szgd .li .p .d .dian span {
	width: 50%;
	height: auto;
	aspect-ratio: 1/1;
	border-radius: 100%;
	background: var(--themeColor);
}

.s-ys .szgd .li .p .d .line {
	margin: 0 auto;
	margin-top: .2rem;
	height: 3rem;
	width: 1px;
	background: linear-gradient(to bottom, var(--themeColor), transparent);
}

/* ===== 产品功能（从 sipunai prodet.css 抽取） ===== */
.prodet-gn-nav {
	text-align: center;
	background: #fff;
	z-index: 9;
	top: 0rem;
}

.prodet-gn-nav .tt {
	font-size: var(--f48);
}

.prodet-gn-nav .top-nav-list {
	display: flex;
	justify-content: center;
	gap: 1.8rem;
	border-bottom: 1px solid #e7ecee;
}

.prodet-gn-nav .top-nav-list .li {
	padding-bottom: 2rem;
	position: relative;
}

.prodet-gn-nav .top-nav-list .li::before {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) translateY(50%);
	border-radius: 20rem;
	content: '';
	display: block;
	height: auto;
	aspect-ratio: 1/1;
	width: .6rem;
	background: var(--themeColor);
	opacity: 0;
}

.prodet-gn-nav .top-nav-list .li.on::before,
.prodet-gn-nav .top-nav-list .li:hover::before {
	opacity: 1;
}

.prodet-gn-nav .top-nav-list .li a {
	font-size: var(--f18);
	display: block;
	text-align: center;
	width: 10em;
	padding: .6rem 0;
	color: var(--themeColor);
	border-radius: 30rem;
	border: 2px solid var(--themeColor);
	transition: all .5s;
}

.prodet-gn-nav .top-nav-list .li:hover a,
.prodet-gn-nav .top-nav-list .li.on a {
	background: var(--themeColor);
	color: #fff;
}

/* ===== ai测量 / 视频（从 sipunai prodet.css 抽取） ===== */
.pro-video .img {
	position: relative;
	height: auto;
	aspect-ratio: 785/450;
	overflow: hidden;
	border-radius: .6rem;
}

.pro-video img {
	width: 100%;
	height: 100%;
}

.pro-video .player {
	position: absolute;
	left: 50%;
	top: 50%;
	height: auto;
	aspect-ratio: 1 / 1;
	width: 5rem;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(182, 204, 217, .4);
	border-radius: 30rem;
	backdrop-filter: blur(5px);
	transition: all .5s;
}

.pro-video .player svg {
	width: 60%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.prodet-aicl .videos {
	gap: 2rem;
}

/* 解剖部位：蓝色标题条 + tbody 每行 4 个图片 */
.prodet-aicl .aicl-tit {
	background: var(--themeColor);
	color: #fff;
	font-size: var(--f22);
	border-radius: .8rem;
	padding: .8rem 0;
	text-align: center;
	font-weight: 400;
	width: 100%;
	box-sizing: border-box;
}

.prodet-aicl table {
	width: 100%;
	border-collapse: collapse;
}

.prodet-aicl table tbody {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	margin-top: 2rem;
}

.prodet-aicl table tbody tr {
	display: block;
	text-align: center;
}

.prodet-aicl table tbody td {
	display: block;
	border: none;
	padding: 0;
	text-align: center;
}

.prodet-aicl table tbody td p.img {
	margin: 0 auto;
	width: 100%;
}

.prodet-aicl table tbody td p.img img {
	margin: 0 auto;
}

.prodet-aicl table tbody td p.name {
	margin-top: .8rem;
	margin-bottom: 0;
	font-size: var(--f18);
	color: #000;
	font-weight: 400;
	text-align: center;
}

.prodet-aicl table tbody img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: .8rem;
	border: 1px solid #d9e2e7;
	display: block;
}

/* ===== 数据库（从 sipunai prodet.css 抽取） ===== */
.prodet-sjk .cont {
	height: 24rem;
}

.prodet-sjk .lt {
	width: 100%;
	max-width: 33.5rem;
	height: 100%;
}

.prodet-sjk .rt {
	width: 100%;
	max-width: 40rem;
}

.prodet-sjk .swiper-hd .swiper-slide {
	height: auto;
}

/* swiper-hd 取消 swiper 实例化后，wrapper 强制纵向排列（4 项全部显示） */
.prodet-sjk .swiper-hd .swiper-wrapper {
	display: flex;
	flex-direction: column;
	transform: none !important;
	transition: none !important;
	width: 100%;
}

.prodet-sjk .swiper-hd {
	overflow: visible;
}

.prodet-sjk .swiper-hd .item {
	padding-bottom: 1.5rem;
	position: relative;
	padding-left: 2.2rem;
	cursor: pointer;
}

.prodet-sjk .swiper-hd .item .tt {
	font-size: var(--f24);
	line-height: 1;
	transition: all .5s;
}

.prodet-sjk .swiper-hd .item .ar_article {
	font-size: var(--f16);
	color: rgba(0, 0, 0, .6);
	margin-top: .6rem;
	transition: all .5s;
}

.prodet-sjk .swiper-hd .item .dian {
	display: flex;
	position: absolute;
	flex-direction: column;
	height: 100%;
	top: 0;
	transition: all .5s;
	left: 0;
}

.prodet-sjk .swiper-hd .item .dian::before {
	content: '';
	display: block;
	width: .58rem;
	height: auto;
	aspect-ratio: 1/1;
	background: var(--themeColor2);
	border-radius: 50%;
	transition: all .5s;
}

.prodet-sjk .swiper-hd .item .dian::after {
	margin-left: 50%;
	transform: translateX(-50%);
	display: block;
	content: '';
	width: 1px;
	background: var(--themeColor2);
	/* flex: 1; */
	margin-top: -.2rem;
	transition: all .5s;
	height: 100%;
}

.prodet-sjk .swiper-hd .swiper-slide-active .item .dian::before,
.prodet-sjk .swiper-hd .swiper-slide-active .item .dian::after {
	background: var(--themeColor);
}

/* 当前项圆点放大，强化切换的视觉反馈 */
.prodet-sjk .swiper-hd .swiper-slide-active .item .dian::before {
	transform: scale(1.35);
}

.prodet-sjk .swiper-hd .swiper-slide-active .item .tt,
.prodet-sjk .swiper-hd .swiper-slide-active .item .ar_article {
	color: var(--themeColor);
}

.prodet-sjk .swiper-bd {
	height: auto;
}

/* fade 过渡缓动，避免线性淡入淡出显得生硬 */
.prodet-sjk .swiper-bd .swiper-slide {
	transition-timing-function: cubic-bezier(.25, .1, .25, 1);
}

.prodet-sjk .swiper-bd .img {
	height: auto;
	aspect-ratio: 800/445;
	border-radius: .6rem;
	width: 100%;
	overflow: hidden;
}

.prodet-sjk .swiper-bd .img img {
	width: 100%;
	height: 100%;
	/* 非当前图微放大，切换时缓缓回正，形成呼吸式过渡 */
	transform: scale(1.08);
	transition: transform 1.6s cubic-bezier(.25, .1, .25, 1);
}

.prodet-sjk .swiper-bd .swiper-slide-active .img img {
	transform: scale(1);
}

.prodet-sjk .sjk-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .8rem;
	height: 4px;
}

.prodet-sjk .sjk-pager .dot {
	width: 2.2rem;
	height: 4px;
	background: #cfd6dd;
	border-radius: 0;
	cursor: pointer;
	transition: all .3s;
}

.prodet-sjk .sjk-pager .dot.active {
	background: var(--themeColor);
}

/* ===== 手术规划（从 sipunai prodet.css 抽取） ===== */
.prodet-ssgh .pro-video .img {
	aspect-ratio: 550/370;
}

.prodet-ssgh .pro-video .tt {
	font-size: var(--f18);
	text-align: center;
	margin-top: .6rem;
}

.prodet-ssgh .pro-video .player {
	width: 4rem;
	height: 4rem;
}

.prodet-ssgh .swiper {
	overflow: unset;
}

.prodet-ssgh .swiper-tool {
	gap: 1rem;
	margin-top: 3rem;
}

.prodet-ssgh .swiper-scrollbar {
	position: static;
	--swiper-scrollbar-size: 2px;
	--swiper-scrollbar-drag-bg-color: var(--themeColor);
}

.prodet-ssgh .swiper-button {
	background: var(--themeColor2);
	border: none !important;
}

.prodet-ssgh .swiper-button i {
	color: #fff;
}

/* ===== 移动端覆盖（从 sipunai mobile.css 抽取） ===== */
@media (max-width: 750px) {
	.proyx .item .lt .tt {
		font-size: var(--f24);
	}
	.proyx .item .lt .pub-btn {
		margin-top: 1rem;
	}
	.proyx .item .rt {
		margin-top: 2rem;
	}

	.s-ys .szgd {
		background-image: unset !important;
	}
	.s-ys .szgd .grid {
		gap: 2rem;
	}
	.s-ys .szgd .li .num {
		width: 100%;
		margin: 0;
	}
	.s-ys .szgd .li .num span {
		font-size: var(--f32);
	}
	.s-ys .szgd .li .num em {
		font-size: var(--f18);
	}
	.s-ys .szgd .li .p {
		width: 100%;
		margin-top: 1rem;
	}
	.s-ys .szgd .li .p .d {
		display: none;
	}
	.s-ys .szgd .li .txt h5 {
		font-size: var(--f24);
	}
	.s-ys .szgd .li .txt p {
		font-size: var(--f14);
	}

	.prodet-gn-nav .top-nav-list {
		display: none;
	}
	.pro-zhead .tt {
		font-size: var(--f24);
	}
	.pro-zhead .subt {
		font-size: var(--f16);
	}
	.prodet-sjk .cont {
		height: auto;
	}

	/* 解剖部位表格：移动端每行 2 个 */
	.prodet-aicl .aicl-table tbody {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 手术规划：移动端滚动条与按钮同行，横线限制最大宽度、按钮固定在右侧，避免重叠 */
	.prodet-ssgh .swiper-tool {
		gap: 1rem;
		margin-top: 2rem;
	}
	.prodet-ssgh .swiper-scrollbar {
		max-width: calc(100% - 8rem);
	}
	.prodet-ssgh .swiper-btn {
		flex: none;
	}
}