/* nav */
.nav-menu,.nav-menu ul,.nav-menu li,.nav-menu a { margin: 0; padding: 0; line-height: normal; list-style: none; display: block; position: relative; }
.nav-menu ul { opacity: 0; position: absolute; top: 100%; left: -9999px; z-index: 999; -webkit-transition: opacity .3s; transition: opacity .3s; }
.nav-menu li:hover > ul { left: -13px; opacity: 1; z-index: 1000; }
.nav-menu ul li:hover > ul { top: 0; left: 100%; }
.nav-menu li { cursor: default; float: left; white-space: nowrap; }
.nav-menu ul li { float: none; }

/* sub width */
.nav-menu ul { min-width: 10em; 
  padding: 0px 0px; background: #fafafa; box-shadow: 0 0 20px rgb(0 0 0 / 10%);
}

/* root */
.nav-menu a {
  padding: 0px 25px 0px 25px;
  color: #fff;
  line-height: 43px;
  text-decoration: none;
}

/* root: active */
.nav-menu > li > .nav-active { }

/* root: hover/persistence */
.nav-menu a:hover,.nav-menu a:focus,.nav-menu li:hover a {
  color: var(--color-c01);
}
.nav-menu > li:hover > a{
    background:#4b2a22;   /* 深咖色 */

    -webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

/* 2 */
.nav-menu li ul{ text-align: left; padding: 15px 0px;}
.nav-menu li li a, .nav-menu li:hover li a {
  padding: 8px 40px;
  color: #666;
  font-size:15px;
  line-height: normal;
}


/* 2: hover/persistence */
.nav-menu li:hover li a:hover,.nav-menu li:hover li a:focus,.nav-menu li:hover li:hover a {
  color: var(--color-c02);
}

/* 3 */
.nav-menu li ul li ul{ margin-top: -15px;
}
.nav-menu li:hover li:hover li a {
  color: #666;
}

/* 3: hover/persistence */
.nav-menu li:hover li:hover li a:hover,.nav-menu li:hover li:hover li a:focus,.nav-menu li:hover li:hover li:hover a {
  color: var(--color-c01);
}

/* 4 */
.nav-menu li:hover li:hover li:hover li a {
  background: #333;
}

/* 4: hover */
.nav-menu li:hover li:hover li:hover li a:hover,.nav-menu li:hover li:hover li:hover li a:focus {
  background: #222;
}


/* mega menu */
.nav-menu .mega-menu{
    position: static;
}

/* 取消原本 dropdown */
.nav-menu .mega-menu > ul{
    display:none;
}

.nav-menu .mega-menu .mega-content{
    opacity:0;
    visibility:hidden;

    position:fixed;      /* 改 */
    left:0;
    top:110px;           /* header高度 */

    width:100%;
    padding:60px 60px;

    background:#f5f5f5;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

    display:flex;
    flex-wrap:wrap;      /* 新增 */
    justify-content:center;
    gap:120px;

    transition:.3s;
    z-index:9999;
}

.nav-menu .mega-menu:hover .mega-content{
    opacity:1;
    visibility:visible;
}

.mega-col{
}

.mega-col h4{
    margin:0 0 15px;
    color:var(--color-c03);
    font-size:16px;
}
.mega-col h4 a{
    color:var(--color-c03) !important;
    font-size:16px;
}

.mega-col a{
    display:block;
    padding:6px 0;
    color:#666 !important;
    font-size:15px;
    line-height:1;
}

.mega-col a:hover{
    color:var(--color-c02) !important;
}

@media (max-width:1400px){

    .mega-content{

        display:grid !important;

        grid-template-columns:
        repeat(4,minmax(0,1fr));

        gap:30px 40px;
    }

    .mega-col{
        width:auto;
        min-width:0;
    }

}
@media (max-width:1100px){

    .mega-content{
        grid-template-columns:
        repeat(3,minmax(0,1fr));
    }

}