@charset "utf-8";
/* CSS Document */

/* 吸顶核心样式 */
.tab-header-wrap {
  width: 100%;
  background: #f5f5f5;
  z-index: 99;
  /* 过渡优化，切换不生硬 */
  transition: box-shadow 0.2s;
}
/* 吸顶激活类，JS滚动时添加 */
.tab-header-wrap.fixed-top {
  position: fixed;
  top: 100px;
  left: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 给外层占位，防止吸顶后下方内容往上跳空 */
.tab-wrapper {
  --tab-height: 80px; /* 和tab-header-wrap高度保持一致 */
}
.tab-header-wrap.fixed-top + .tab-panels {
  margin-top: var(--tab-height);
}

/* 原有Tab样式不变，只放这里参考 */
.tab-header {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  position: relative;
  /*gap: 200px;*/
  padding: 26px 200px 0;
  /*justify-content: center;*/
  height: var(--tab-height);
  box-sizing: border-box;
}
.tab-item {
  width: calc((100% - 8rem) / 4);
  margin: 0 1rem;
/*  background: #f00;*/
  font-size: 1.125rem;
  line-height: 76px;
  text-align: center;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
  font-weight: 500
}
.tab-item.active {
  color: #000;
  border-bottom: 2px solid #003399
}
/*.tab-line {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: #003399;
  transition: all 0.3s ease;
}*/
.tab-panel {
  display: none;
  padding: 20px 0;
}
.tab-panel {
  scroll-margin-top: 180px;
}
.tab-panel.active {
  display: block;
}
.tab-panel-content{
 padding: 20px 0 20px
}
@media screen and (max-width:800px) {
.tab-wrapper {
  --tab-height: 45px;
}
.tab-header-wrap.fixed-top{
   top: 52px;
}
.tab-header{
  padding: 0 10px;
}
.tab-item {
  padding-top: 10px;
  width: calc((100% - 6rem) / 4);
  margin: 0 0.75rem;
  font-size: 0.875rem;
  line-height: 45px;
  text-align: center;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
  font-weight: 500
}
}
@media screen and (max-width:576px) {
.tab-wrapper {
  --tab-height: 90px;
}
.tab-item {
  padding-top: 10px;
  width: calc((100% - 3rem) / 2);
}
.tab-item:nth-child(2n) {
  margin-right: 0;
}
.tab-panel-content{
 padding: 20px 0 20px
}
}