@charset "UTF-8";


nav {
    display: block;
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    overflow: hidden;
}



/* NAV1(4x2)
========================================================================== */

nav.nav1 ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
nav.nav1 li {
    width: 25%;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid #CCC;
    background-color: #ef76ae;
    box-sizing: border-box;
}
nav.nav1 li a {
    display: block;
    width: 100%;
    border-bottom: 1px dotted #ddd;
    text-decoration: none;
    padding: 10px 0;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    box-sizing: border-box;
}
p.submenu {
    color: #FFE686;
    font-size: 10px;
    letter-spacing: 1px;
    margin: 0px;
}

/* NAV2(3x3)
========================================================================== */

nav.nav2 ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
nav.nav2 li {
    width: 33.3%;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid #CCC;
    background-color: #63a5ff;
    box-sizing: border-box;
}
nav.nav2 li.active{
    background-color: #63a5ff;
}
nav.nav2 li a {
    display: block;
    width: 100%;
    border-bottom: 1px dotted #ddd;
    text-decoration: none;
    padding: 5px 0;
    color: #FFF;
    text-align: center;
    font-weight: 700;
    box-sizing: border-box;
}
p.submenu {
    color: #fff586;
    font-size: 10px;
    letter-spacing: 1px;
    margin: 0px;
}