/*---xxxxxxxxx css for navigatestyle xxxxxxxxx---*/

/*---xxxxxxxxx  navigate style start   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/

.navigate {                  /*定义navigate盒子的大小以及位置*/
           position: fixed; /*粘性定位，让导航栏一直在TOP*/
           top: 50px;           /*position sticky一定要配合top,bottom,left,right一起使用才有效*/
           left: 0;
           right: 0;
           z-index: 1999;     /*因为banner做了定位，挡住了下拉菜单，故调一下层级，header层为1000*/
           width: 100%;
           min-height: 50px;
           margin-top: 0;
           background-color: #3366cc;
           overflow: visible;       /* 允许下拉菜单显示在外部 */
           }
.link {
        display: flex;                /* 都是AI写的，这一截 */
        flex-wrap: nowrap;            /* 始终横排，不换行 */
        justify-content: flex-start;
        padding-left: 0;              /* 去掉固定的70px，避免小屏挤爆 */
        margin: 0;
        list-style: none;
        gap: clamp(10px, 3vw, 50px);   /*  用 gap 控制标签间距,最小10px，最大40px */
       }
.link li {
          position: relative; /*相对定位,让下拉菜单与其保持位置一致*/
          flex: 0 0 auto;     /* 子项宽度自适应，不强制平分 */
             }

.navigate li a {                                     /*设计a的样式*/
                display: block;
                text-align: center;
                flex: 0 0 auto;                      /* 标签宽度随内容，不固定 */
                padding: 0 clamp(8px, 2vw, 20px);    /* 内边距限制 */
                height: 50px;                        /*每个下拉菜单的高度*/
                line-height: 50px;                   /* 保证标文字垂直居中 */
                color: #ffffff;                      /*文字颜色*/
                border: none;                        /*去除标签边框，之前写的1px solid #fff*/
                background: #3366cc;                 /*与导航背景一致*/
                font-size: clamp(12px, 1.8vw, 20px); /* 字体限制：不小于12px，不大于20px */
                white-space: nowrap;                 /* 避免文字换行 */
               }

.navigate ul li a:hover {                       /*伪类标签，鼠标移动变色*/
                          color: #00bfa5;
                          background: #264d99;  /* hover时统一颜色 */
                          }
.navigate ul li ul {                   /*将下拉菜单隐藏*/
                    display: none;
                    list-style: none;
                    padding: 0;
                    margin: 0;
                   }
.navigate ul li:hover ul {                                         /*将下拉菜单显示*/
                          display: block;
                          position: absolute;                      /*绝对定位*/
                          top:50px;                                /*第一个下拉块的距离*/
                          left: 0;
                          min-width: clamp(150px, 15vw, 220px);    /* 下拉菜单的宽度控制 */
                          background: #f9f9f9;
                         }

.navigate ul li:hover ul li a {                                      /*定义下拉菜单a标签*/
                               display: block;
                               height: 40px;
                               line-height: 40px;
                               background-color: #f9f9f9;            /*改变下拉菜单颜色*/
                               color: #333333;
                               padding: 0 clamp(6px, 1vw, 12px);     /* 内边距限制 */
                               text-align: left;                     /* 下拉菜单文字靠左 */
                               font-size: clamp(12px, 1.6vw, 18px);  /* 字体限制 */
                               }

.navigate ul li:hover ul li a:hover{                     /*伪类标签，鼠标移动变色*/
                                    background: #3366cc; /*下拉菜单块的颜色*/
                                    color: #ffffff;         /*下拉菜单字体颜色*/
                                    }

/*---xxxxxxxxx  navigate style end   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx---*/