﻿        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }
        body {
            background-color: #f5f5f5;
            overflow-x: hidden;
        }

     
        .page-container {
            width: 750px;
            margin: 0 auto;
            background-color: #f5f5f5;
            min-height: 100vh;
            padding-bottom: 60px;
            position: relative;
        }
        @media (max-width: 750px) {
            .page-container {
                width: 100%;
                margin: 0;
                padding-bottom: 0;
            }
        }

       
.header {
    background: #fff;
    color: #333;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; /* 关键：固定定位 */
    top: 0; /* 固定在顶部 */
    z-index: 100; /* 确保在其他元素上方 */
    border-bottom: 1px solid #eee;
}
        .logo {
            width: 270px;
            height: 60px;
            background: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #333;
            cursor: pointer;
        }
        .search-box {
            width: 80px;
            height: 32px;
            border: 1px solid #f50f0f;
            border-radius: 16px;
            background: #f8f8f8;
            padding: 0 12px;
            color: #999;
            margin: 0 10px;
        }
        .more {
            font-size: 20px;
            cursor: pointer;
            padding: 8px;
            margin: -8px;
            position: relative;
            z-index: 101;
            color: #333;
        }


        .nav-bar {
            position: absolute;
            top: 100%;
            right: 10px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            width: 160px;
            display: none;
            z-index: 99;
            overflow: hidden;
        }
        .nav-bar.show { display: block; }

        .nav-item {
            padding: 12px 16px;
            color: #333;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
        }
        .nav-item i { margin-right: 8px; color: #e53935; width: 16px; text-align: center; }
        .nav-item:hover { background: #f5f5f5; padding-left: 20px; }

        .primary-nav { position: relative; }
        .nav-toggle {
            display: flex;
            align-items: center;
            background: #fff;
            border: 1px solid #ddd;
            padding: 12px 16px;
            cursor: pointer;
            width: 100%;
            text-align: left;
            color: #333;
            font-size: 14px;
            transition: all 0.3s;
        }
        .hamburger {
            width: 20px;
            height: 2px;
            background: #e53935;
            margin-right: 8px;
            position: relative;
        }
        .hamburger::before, .hamburger::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 2px;
            background: #e53935;
        }
        .hamburger::before { top: -6px; }
        .hamburger::after { top: 6px; }
        .arrow {
            margin-left: auto;
            color: #999;
            font-size: 16px;
            transition: transform 0.3s;
        }
        .primary-nav.active .arrow { transform: rotate(90deg); }
        .nav-toggle:hover { background: #f5f5f5; }

        .secondary-nav {
            position: static;
            background: #f8f9fa;
            width: 100%;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
            border-top: 1px solid #eee;
            display: none;
            padding: 0;
        }
        .primary-nav.active .secondary-nav { display: block; }
        .secondary-nav li {
            list-style: none;
            padding: 10px 16px 10px 32px;
            color: #333;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .secondary-nav li:hover { background: #f5f5f5; padding-left: 36px; }

      
        .nav-icons {
            background: #fff;
            display: flex;
            justify-content: space-evenly;
            padding: 15px 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .nav-item-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            font-size: 13px;
            color: #333;
        }
        .nav-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff; /* 图标白色 */
            font-size: 20px; /* 图标大小 */
        }
        .blue { background: #409eff; }
        .black { background: #333; }
        .red { background: #e53935; }
        .yellow { background: #f9a825; }
	
.banner {
  flex: 1;
  display: block;
  overflow: hidden;
}
.banner img {
  width: 100%;
  display: block;
  object-fit: cover;
}

        .banner.small { height: 75px; }
		.banner.sma { height: 100px; }
        .banner.large { height: 200px; } 
#swiper1 {
    width: 100% !important;
    margin: 0 auto;
    overflow: hidden;
	height:auto !important;
}
#swiper1 .swiper-slide {
    width: 100%;
}
#swiper1 img {
    width: 100% !important;
    height: auto !important; /* 高度自动等比 */
    display: block;
    object-fit: contain; /* 永远不裁切图片 */
}
     
        .swiper {
            width: 100%;
            height: 195px;
            position: relative;
            overflow: hidden;
            margin: 10px 0;
        }
        .swiper-wrapper {
            display: flex;
            transition: 0.5s;
            height: 100%;
        }
        .swiper-slide {
            min-width: 100%;
            background: linear-gradient(135deg, #e53935, #ff6b6b);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
        }
        .pagination {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
        }
        .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
        }
        .dot.active { background: #fff; }

       
.small-banners {
  display: flex;
  gap: 5px;       
  margin: 5px 0;   
  width: 100%;
  flex-wrap: nowrap;
}
        .small-banners .banner.small {
            margin: 0; 
        }

      
        .rank-section {
            background: #fff;
            margin: 10px;
            border-radius: 8px;
            overflow: hidden;
        }
        .section-title {
            padding: 2px 2px;
            font-size: 18px;
            font-weight: bold;
            color: #e53935;
            border-bottom: 1px solid #f0f0f0;
        }
        .slide-wrap{
            width:100%;
            max-width:800px;
            margin:10px auto;
            overflow:hidden;
            position:relative;
        }
        .slide-content{
            display:flex;
            gap:10px;
            transition:transform 0.5s;
        }
        .slide-item{
            width:140px;
            flex-shrink:0;
            text-align:center;
        }
        .slide-item .img-placeholder {
            width:100%;
            height:90px;
            background: #f5f5f5;
            border:1px solid #eee;
            border-radius:6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:28px;
            color:#333;
        }
        .slide-txt{
            margin-top:6px;
            font-size:13px;
            color:#666;
        }
        .dots{
            text-align:center;
            margin-top:10px;
        }
        .dots span{
            display:inline-block;
            width:8px;
            height:8px;
            border-radius:50%;
            background:#ccc;
            margin:0 4px;
            cursor:pointer;
        }
        .dots span.active{
            background:#e53935;
        }

      
        .large-banner {
            margin: 10px 0;
        }
        .large-banner .banner.large {
            margin: 0;
        }

        
        .notice-section {
            background: #fff;
            margin: 10px;
            border-radius: 8px;
            padding: 8px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .notice-title { color: #e53935; font-weight: bold; font-size: 16px; }
        .notice-scroll {
            flex: 1;
            margin: 0 15px;
            height: 24px;
            line-height: 24px;
            overflow: hidden;
        }
        .notice-more { color: #999; font-size: 14px; }

       
        .info-section {
            background: #fff;
            margin: 10px;
            border-radius: 8px;
            overflow: hidden;
        }
        .info-header {
            padding: 2px 2px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .info-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .info-title {
            flex: 1;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        .info-top {
            background: #e53935;
            color: #fff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .info-imgs {
            display: flex;
            gap: 1%;
            padding: 15px 10px;
        }
        .info-img-item {
            width: 32.6%;
            height: 120px;
            background: #f5f5f5;
            border: 1px solid #eee;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #333;
        }
        .info-desc {
            padding: 0 15px 15px;
            font-size: 16px;
            color: #333;
            line-height: 1.6;
        }
        .info-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px 15px;
            font-size: 14px;
            color: #999;
        }
        .info-phone {
            padding: 0 15px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .phone-btn {
            background: #e53935;
            color: #fff;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 14px;
        }

      
        .news-section {
            background: #fff;
            margin: 10px;
            border-radius: 8px;
            overflow: hidden;
        }
        .news-item {
            display: flex;
            padding: 15px;
            gap: 12px;
            border-bottom: 1px solid #f0f0f0;
        }
        .news-item:last-child { border-bottom: none; }
        .news-img {
            width: 100px;
            height: 80px;
            background: #f5f5f5;
            border: 1px solid #eee;
            border-radius: 8px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #333;
        }
        .news-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .news-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            line-height: 1.4;
        }
        .news-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin: 8px 0;
        }
        .news-meta {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: #999;
        }

        
        .bottom-menu {
            background: #eee;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
        }
        .menu-item {
            font-size: 14px;
            color: #333;
            padding: 4px 8px;
        }

        
        .footer {
            background: #fff;
            padding: 15px;
            text-align: center;
            font-size: 14px;
            color: #333;
            line-height: 1.8;
        }

       
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #eee;
            z-index: 999;
        }
		
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #999;
            text-decoration: none;
        }
        .tab-item.active { color: #e53935; }
        .tab-icon i{
            font-size: 30px; 
            color: inherit; 
        }
        .tab-ic i{
            font-size: 20px;
            color: inherit;
        }
        .tab-icai i{
            font-size: 50px;
            color: inherit; 
        }
        .tab-tui i{
            font-size: 36px;
            color: #e53935;
        }	
   .nav-icon {
  width: 45px;
  height: 45px;
}
.nav-icon i {
  font-size: 36px;
}
      
        .top-btn {
            position: fixed;
            bottom: 80px;
            right: 15px;
            width: 40px;
            height: 40px;
            background: #e53935;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
