.menu-line ul{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center;  }
.menu-line ul li{ position: relative;  }
.menu-line ul li a{ padding: 0 10px; display: block; font-size: 13px; position: relative}
.menu-line ul li.level-1 > a.active{}
.menu-line ul.level-1 li{ transition: all 0.3s linear; }


.menu-line ul.level-1 li a{ position: relative; z-index: 20;   }
header .menu-line ul.level-1 li:hover{  background:var(--color3) }

.menu-line ul.level-2{ display: block;  max-height: 0; opacity: 0;   position: absolute; top:100%;  overflow: hidden;  background:var(--color3);
    transition: opacity 0.3s linear;   z-index: 10; width: max-content; min-width: 180px;}

.menu-line ul.level-1 li:hover ul.level-2{  max-height:500px;opacity: 1;  }

.menu-line li.level-2{ display: block; margin: 5px 0; padding: 0 13px }


@media only screen and (min-width: 768px) {
    .menu-line ul li.level-1:hover > a:after{ display: block; content: ""; position: absolute; left: 0px; right: 0; top: auto;  bottom: -1px;  margin: auto;  height: 1px; }

    .menu-line li.level-1:hover ul.level-2 {opacity: 1; max-height: 500px;}
    .menu-line ul li a{ padding: 10px 15px}
}

@media only screen and (min-width: 1280px) {

    header .menu-line ul.level-1 li{ padding: 15px 0}
    header .menu-line ul li a{font-size: 14px;padding: 0 15px;}
}
@media only screen and (min-width: 1320px) {

    header .menu-line ul li a{font-size: 15px;padding: 0 20px;}

}