.com-menu{
    height: 70px;
    background-color: #f5faf8;
    display: flex;
    align-items: center;
    font-size: calc(var(--my-fontsize) + 1) ;
}

:root{
    --com-left:120px
}
.com-menu a{
    color: black;
    margin-left: var(--com-left);
    text-decoration: none;
}

.com-select {
    background-color: #33b389;
    width: 65px;
    height: 2px;
    position: relative;
    /* top: 514px; */
    top: 24px;
}

.com-menu-item1{
    color: black;
}
.com-select1{
    display: none;
    left: var(--com-left);
}

.com-menu-item1:hover .com-select1{
    display: block;
}

.com-menu-item2{
    color: black;
}
.com-select2{
    display: none;
    left:  var(--com-left);
}

.com-menu-item2:hover .com-select2{
    display: block;
}


.com-menu-item3{
    color: black;
}
.com-select3{
    display: none;
    left:  var(--com-left);
}

.com-menu-item3:hover .com-select3{
    display: block;
}

.com-menu-item4{
    color: black;
}
.com-select4{
    display: none;
    left:  var(--com-left);
}

.com-menu-item4:hover .com-select4{
    display: block;
}

.com-menu-item5{
    color: black;
}
.com-select5{
    display: none;
    left:  var(--com-left);
}

.com-menu-item5:hover .com-select5{
    display: block;
}