/* ===========================================================
   大型块自动设置为选项卡
   =========================================================== */

.pro-tabs {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.pro-tabs.active-tab {
  z-index: 2;
}

/* 共享切换条：放在所有 .pro-tabs 之前 */
.pro-tabs-switcher {
  position: relative;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  padding: 0 20px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: -61px;
}

.pro-tabs-switcher::-webkit-scrollbar {
  display: none;
}

@media (max-width: 549px) {
  .pro-tabs-switcher {
    /*background: rgba(0, 0, 0, 0.8);*/
  }
  .pro-tabs-switcher button {
    font-size: 10px !important;
    min-width: auto;
  }
}

/* 基础按钮样式 */
.pro-tabs-switcher button {
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  padding: 0 4px;
  line-height: 60px;
  white-space: nowrap;
  position: relative; /* 关键：用于定位下划线 */
   max-width: auto;
}

/* 默认线条：存在但宽度为 0 */
.pro-tabs-switcher button::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;         /* 你原本 margin-top:-2px，我换成 bottom 更稳 */
  height: 2px;
  width: 0;
  background: #fff;
  border-radius: 2px;
  transition: width 0.3s ease; /* 动画在这里 */
}

/* 激活 OR hover 都是白色文字 */
.pro-tabs-switcher button.active,
.pro-tabs-switcher button:hover {
  color: #fff;
}

/* 激活时：下划线从 0 → 100% 展开 */
.pro-tabs-switcher button.active::after {
  width: 100%;
}


/* 禁止内容块自身的动画，避免切换抖动 */
.pro-tabs,
.pro-tabs * {
  transition: none !important;
  animation: none !important;
}



@media (max-width: 768px) {
  .pro-tabs-switcher {
    justify-content: flex-start;   /* 不再强制居中 */
    padding: 0 16px;               /* 给左右留出可视区 */
    scroll-padding-left: 16px;     /* 滚动到最左时也保留内边距 */
   
  }

}


.pro-tabs {
  cursor: grab;
  user-select: none; /* Prevents text selection while dragging */
}

.pro-tabs:active {
  cursor: grabbing;
}

.pro-tabs-switcher button.active {

  color: #fff;
}

.pro-tabs-container {
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}
.pro-tabs-container:active {
    cursor: grabbing;
}
.setp1-0314 .title:before {
	content: "";
	width: 10px;
	height: 10px;
	border: 2px solid var(--fs-color-primary);
	display: block;
	margin: calc(0.5vw + 5px) auto;
	background: #fff;
	border-radius: 50%;
	position: relative;
	z-index: 2;
}

.setp1-0314 .title:after {
	content: "";
	top: 6px;
	width: calc(100% + 2vw + 33px);
	left: 50%;
	height: 1px;
	background: #ccc;
	position: absolute;
	z-index: 1;
}

.setp1-0314 .title {
	color: var(--fs-color-primary);
	position: relative;
	width: 100%:;
}

/* 默认画线 */
.setp1-0314 .title:after{
	content:"";
	top:6px;
	width:calc(100% + 2vw + 33px);
	left:50%;
	height:1px;
	background:#ccc;
	position:absolute;
	z-index:1;
}

/* 每行最后一个不画线 */
.setp1-0314 .item:nth-child(4n) .title:after{
	display:none;
}

@media (max-width: 549px) {
  .setp1-0314 .title:before,
  .setp1-0314 .title:after{
    display:none;
    content:none;
  }
}
.setp1-0314 .title:before {
	content: "";
	width: 10px;
	height: 10px;
	border: 2px solid var(--fs-color-primary);
	display: block;
	margin: calc(0.5vw + 5px) auto;
	background: #fff;
	border-radius: 50%;
	position: relative;
	z-index: 2;
}

.setp1-0314 .title:after {
	content: "";
	top: 6px;
	width: calc(100% + 2vw + 33px);
	left: 50%;
	height: 1px;
	background: #ccc;
	position: absolute;
	z-index: 1;
}

.setp1-0314 .title {
	color: var(--fs-color-primary);
	position: relative;
	width: 100%:;
}

/* 默认画线 */
.setp1-0314 .title:after{
	content:"";
	top:6px;
	width:calc(100% + 2vw + 33px);
	left:50%;
	height:1px;
	background:#ccc;
	position:absolute;
	z-index:1;
}

/* 每行最后一个不画线 */
.setp1-0314 .item:nth-child(4n) .title:after{
	display:none;
}

@media (max-width: 549px) {
  .setp1-0314 .title:before,
  .setp1-0314 .title:after{
    display:none;
    content:none;
  }
}