:root {
       --primary-color: #333;
       --nav-pink: #000000;
       --bg-white: #ffffff;
       --top-red: #ff4444;
   }

   .yesbgc {
       background-color: rgb(41 151 247);
       color: #f5f6f7;
       padding: 6px;
       border-radius: 4px;
   }

   .bgc {

       background: (--sizeColor);
   }

   /* 头部容器 */
   .header-container {
       background: var(--bg-white);
       padding: 10px 10px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

       position: sticky;
       top: 0;
       z-index: 99999;
   }

   /* 导航主体 */
   .nav-main { 
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   /* 网站品牌 */
   .site-brand { 
        width:98.5px; 
       height: 35px;
   }
   .site-brand img{ 
       width: 100%;
       height: 100%;
       object-fit: cover;
   }
   /* 导航菜单 */
   .nav-menu {
       display: flex;
       gap: 35px;
       list-style: none;
   }

   .nav-item {
       position: relative;
   }

   .nav-link {
       color: var(--nav-pink);
       text-decoration: none;
       transition: opacity 0.3s;
       display: flex;
       align-items: center;
       font-size: 14px;
       gap: 5px;
   }

   .nav-item::before {
       content: "";
       position: absolute;
       left: 0;
       bottom: -10px;
       width: 0%;
       height: 3px;
       -webkit-transition: all 0.5s;
       background-color: var(--sizeColor);
   }

   .nav-link:hover {
       color: var(--sizeColor);
       transition: all 0.3s ease-in;
   }

   .nav-item:hover::before {
       width: 100%;
   }

   /* 二级菜单 */
   .sub-menu {
       position: absolute;
       top: 100%;
       margin-top: 20px;
       left: -30px;
       background: var(--bg-white);
       box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
       min-width: 160px;
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease-out;
   }

   .nav-item:hover .sub-menu {
       max-height: 500px;
   }

   /* 二级菜单的子级 */
   .nav-item .sub-menu li a:hover{
    color: #fff;
       background-color: var(--sizeColor);
       display: block;
   }

   .sub-menu .nav-link {
       color: var(--primary-color);
       padding: 12px 15px;
   }

   /* 右侧区域 */
   .nav-right {
       display: flex;
       align-items: center;
       gap: 25px;
   }



   /* 移动端样式 */
   .mobile-toggle {
       display: none;
       background: none;
       border: none;
       font-size: 24px;
       color: var(--primary-color);
       cursor: pointer;
   }

   /* 响应式按钮 */
   .menu-button .line-box {
       width: 20px;
       height: 20px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       cursor: pointer;
       transition: transform 0.3s ease-out;
   }

   /* 菜单按钮图标（三条杠） */
   .menu-button .line {
       background-color: rgba(0, 0, 0, 0.93); 
       width: 100%;
       height: 2px;
       transition: top .25s, background-color .5s, transform .25s;
       border-radius: 2px;
   }

   /* 前后两条短，中间的长 */
   .menu-button .line:first-child {
       width: 50%;
       /* 设置变换的基点 */
       transform-origin: right;
       /* 过渡效果 */
       transition: transform 0.3s ease-in-out;
   }

   .menu-button .line:last-child {
       width: 50%;
       align-self: flex-end;
       transform-origin: left;
       transition: transform 0.3s ease-in-out;
   }

   /* 菜单列表 */

   /* 活动态下的部分样式变化 */
   /* 三条杠的变化 */
   .sactive .line-box {
       transform: rotate(-45deg);
   }

   .sactive .line-box .line:first-child {
       transform: rotate(-90deg) translateX(1px);
   }

   .sactive .line-box .line:last-child {
       transform: rotate(-90deg) translateX(-1px);
   }

   /* 定义动画 */
   @keyframes fade-in-item {
       100% {
           transform: translateX(0);
           opacity: 1;
       }
   }

   @media (max-width: 992px) {


       .nav-menu {
           position: fixed;
           top: 60px;
           right: -100%;
           width: 70%;
           height: calc(100vh - 60px);
           background: var(--bg-white);
           flex-direction: column;
           padding: 20px;
           transition: right 0.3s;
           z-index: 100;
       }

       .nav-menu.active {
           right: 0;
       }

       .mobile-toggle {
           display: block;
       }

       .nav-right {
           display: none;
       }

       /* 移动端二级菜单 */
       .sub-menu {
           position: static;
           box-shadow: none;
           background: #f8f8f8;
           max-height: 0;
           padding-left: 15px;
       }

       .nav-item.active .sub-menu {
           max-height: 500px;
       }
   }



   /* 蒙层 */
   .block {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       background: rgba(0, 0, 0, 0.6);
       z-index: 999;
       transition: all 0.8s ease-in-out;
   }










   /* 默认隐藏移动端元素 */
   .move {
       display: none;
   }

   /* 移动端样式（屏幕宽度 ≤ 768px） */
   @media screen and (max-width: 768px) {
       .move {
           display: block;
           width: 100%;
           height: 60px;
           /* 建议增加高度 */
           z-index: 99999;
           background-color: #fff;
           position: fixed;
           bottom: 0;
           box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
           /* 推荐添加顶部阴影 */
           padding: 12px 16px;
           /* 增加内容内边距 */
       }

       /* 防止内容被遮挡的间距 */
       body {
           padding-bottom: 80px !important;
       }
   }





   .move .ul-bar {
       justify-content: space-between;
       align-items: center;
   }

   .move .ul-bar li {
       flex: 1;

   }

   .move .ul-bar li .item-list {
       display: block;
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-wrap: wrap;
       min-height: 49px;
       padding: 3px 0;
       color: var(--muted-color);

   }

   .move .ul-bar li .item-list img {
       width: 35px;
       line-height: 35px;
   }