/* ---------- menu set ---------- */
/* ------ font ------ */
@font-face 
{
    font-family: menuFont;
	src: url(../../font/archivo.ttf);
}


/* ------ variables ------ */
:root
{ 
    /* default font size */
    --font-menu-size: 12px;
    
    /* color set */
    --menu-button-bg: #a8a9ad;
    --menu-button-bg-hover: #ef3e37;
    --submenu-button-bg: #ffffff;
    --submenu-button-bg-hover: #ef6c67;
    --submenu-button-text: #404041;
    --menu-button-text: #ffffff;
    --menu-button-text-hover: #ffffff;
    --submenu-border: #ef3e37;
}

/* ------ set ------ */
menu
{
    width:100%;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    font-size: var(--font-menu-size);
    font-family: menuFont, sans-serif;
}

.menu-line
{
    width:30%;
    margin-left: 1%;
    height: 5px;
    background-color: var(--menu-button-bg);
}

#menu
{
    margin:0;
    padding:0;
    list-style-type:none;
}

#menu:after
{
    content:'';
    display:block;
    clear:both;
}

#menu > li
{
    float: left;
    margin: 0px 10px 0px 10px;
    font-size: var(--font-menu-size);
}

#menu > li > a, #menu > li > div
{
    display: block;
    text-decoration: none;
    padding: 10px 10px 0px 10px;
    font-size: 1.8em;
    font-family: webFont;
    background-color: var(--menu-button-bg);
    color: var(--menu-button-text);
    transition: 0.1s linear;
}

#menu > li > a:hover, #menu > li > div:hover
{
    background-color: var(--menu-button-bg-hover);
    color: var(--menu-button-text-hover);
}

#menu > li > ul
{
    display: none;
    z-index: 1003;
    list-style-type: none;
    position: absolute;
    padding: 0px;
    margin: 0px;
}

#menu > li:hover > ul
{
    display:block;
}

#menu > li > ul > li > a 
{ 
    display: block;
    text-decoration: none;
    padding: 7px 10px 2px 10px;
    font-family: webFont;
    font-size: 1.8em;
    background-color: var(--submenu-button-bg);
    border-bottom: 2px solid var(--submenu-border);
    color: var(--submenu-button-text);
    transition: 0.1s linear;
}

#menu > li > ul > li > a:hover 
{ 
    background-color: var(--menu-button-bg-hover);
    color: var(--menu-button-text-hover);
    border-bottom: 2px solid var(--submenu-border);
}

#menu-first
{
    margin-left: 0px !important;
}

#menu-last
{
    margin-right: 0px !important;
}

.menu-active
{
    background-color: var(--menu-button-bg-hover) !important;
    color: var(--menu-button-text-hover) !important;
}

.submenu-active
{
    background-color: var(--submenu-button-bg-hover) !important;
    color: var(--menu-button-text-hover) !important;
}


/* ------ mobile  --------- */
#mobile
{
    display: none;
    margin-left: 0px !important;
}

@media screen and (max-width: 935px)
{
    .menu-line
    {
        width:25%;
    }    
}

@media screen and (max-width: 800px)
{
    .menu-line
    {
        width:20%;
    }
    
    #menu > li > a, #menu > li > div
    {
        padding: 10px 10px 0px 10px;
        font-size: 1.6em;
    }
    
    #menu > li > ul > li > a 
    { 
        padding: 7px 10px 2px 10px;
        font-size: 1.6em;
    }
}

@media screen and (max-width:630px)
{
    .menu-line
    {
        width:15%;
    } 
}

@media screen and (max-width:600px)
{
    #menu > li > a, #menu > li > div
    {
        padding: 8px 10px 0px 10px;
        font-size: 1.4em;
    }
    
    #menu > li > ul > li > a 
    { 
        padding: 7px 10px 2px 10px;
        font-size: 1.4em;
    }
}

@media screen and (max-width:600px)
{
    .menu-line
    {
        width:10%;
    } 
}

@media screen and (max-width: 490px)
{
    
    .menu-line
    {
        width:20%;
    } 
    
    #mobile
    {
        display: block;
    }
    
    #m-desk, .m-desk
    {
        display: none;
    }
    
       #menu > li > ul > li > a 
    { 
        padding: 9px 20px 4px 20px;
        font-size: 1.4em;
    }
}