* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.tab-wrap {
margin: 0px auto;
max-width: 800px;
width: 100%;
 position: fixed; /* 固定定位 */
top: 0; /* 贴紧顶部 */
z-index: 999; /* 确保在最上层，不被其他内容覆盖 */
}

.tab-nav {
display: flex;
height: 60px;
line-height: 60px;
font-weight: bold;
font-size: 32px;
list-style: none;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
  .tab-nav li {
width: 50%;
}

.tab-item {
width: 100%;
text-align: center;
cursor: pointer;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background-color 0.2s;
}

.tab-item.unselected {
background-color: #eee;
color: #666;
}
.tab-item.unselected .icon {
color: #666;
}

.tab-item.selected {
background-color: #df0000;
color: #fff;
}
.tab-item.selected .icon {
color: #fff;
}

.tab-content {
margin-top: 155px;
padding: 0px;
border-radius: 4px;
}
.hide {
display: none;
}
.dingbu{
position: fixed;
height: 50px;
background: rgba(95, 82, 82, 0.178);
width: 50px;
right: 10px;
bottom: 25px;
border-radius: 50%;
}
.dingbu p{
font-size: 14px;
color:#FFFFFF;
padding: 5px 10px;
font-weight: bold;
}
.dingbu:hover{background:rgb(90, 76, 76);}
.dingbu a {
text-decoration: none;
}
@media screen and (max-width: 420px){
.tab-nav{
  font-size: 28px;
  }
@media screen and (max-width: 380px){
.tab-nav{
  font-size: 24px;
  }
@media screen and (max-width: 330px){
.tab-nav{
  font-size: 20px;
  }