ul, li {
    margin:0;
    padding:0;
    list-style:none;
}

img {
    border:0;
}

a {
    text-decoration:none;
}

#submn {
    position:relative;
    width:100%;
    bottom:2px;
    left:0;
    clear:both;
    height:60px;
    text-align:center;
    animation:submnFadeUp .55s ease both;
}

#submn ul {
    width:100%;
    max-width:1280px;
    margin:0 auto;
    list-style:none;
    font-size:12pt;
    padding:0;
    display:inline-block;
    *display:inline;
}

#submn li {
    float:left;
    list-style:none;
    line-height:60px;
    height:60px;
    background:#fff;
    margin-left:-2px !important;
    padding:0;
    border:1px solid #d7d7d7;
    box-shadow:0 -2px 3px rgba(0,0,0,0.1),
               inset 0 -1px 0 #e0e0e0;
    transition:all .3s ease-in-out;
}

#submn a {
    display:inline-block;
    width:100%;
    height:100%;
    text-decoration:none;
    font-size:1.1em;
    color:#393939;
    font-weight:600;
    transition:all .3s ease-in-out;
}

#submn a:hover {
    color:#0b3b82;
    font-size:1.2em;
}

#submn li:hover {
    cursor:pointer;
    background:#f0f4f8;
    border:1px solid #0b3b82;
    box-shadow:0 4px 6px rgba(0,0,0,0.2),
               inset 0 -2px 0 #c0c0c0;
}

#submn li:hover a {
    color:#0b3b82 !important;
    font-size:1.2em;
}

#submn li:hover + li {
    border-left-color:#0b3b82;
}

#submn li.on,
#submn li.on:hover {
    background:#0b3b82;
    border:1px solid #0b3b82;
    box-shadow:0 2px 5px rgba(0,0,0,0.3),
               inset 0 -2px 0 #00468b;
}

#submn li.on a,
#submn li.on a:hover {
    color:#fff !important;
    font-size:1.2em;
}

#submn ul.col-2 li {width:49%;}
#submn ul.col-3 li {width:33%;}
#submn ul.col-4 li {width:24.9%;}
#submn ul.col-5 li {width:19.9%;}
#submn ul.col-6 li {width:16.5%;}
#submn ul.col-7 li {width:14.2%;}
#submn ul.col-8 li {width:12%;}
#submn ul.col-9 li {width:11.1%;}

/* PC µÕ±Ù ¸ð¼­¸® */
#submn li:first-child {
    border-top-left-radius:15px;
}

#submn li:last-child {
    border-top-right-radius:15px;
}

#submn li:first-child:hover {
    border-top-left-radius:15px;
}

#submn li:last-child:hover {
    border-top-right-radius:15px;
}

#submn li.on:first-child,
#submn li.on:first-child:hover {
    border-top-left-radius:15px;
}

#submn li.on:last-child,
#submn li.on:last-child:hover {
    border-top-right-radius:15px;
}

/* µîÀå ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes submnFadeUp {
    from {
        opacity:0;
        transform:translateY(14px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   MOBILE
========================= */
@media all and (max-width:767px) {

    #submn {
        width:100%;
        height:auto;
        min-height:46px;
        margin-top:0 !important;
        bottom:0;
        overflow:hidden;
        white-space:normal;
        text-align:center;
        animation:submnFadeUp .45s ease both;
    }

    #submn ul {
        width:100%;
        min-width:100%;
        max-width:100%;
        display:flex;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:space-between;
        margin:0;
        padding:0;
        font-size:13px;
    }

    #submn li {
        float:none;
        flex:1 1 0;
        width:100% !important;
        height:46px;
        line-height:46px;
        margin-left:0 !important;
        padding:0;
        background:#fff;
        border:0;
        border-right:1px solid #e5e5e5;
        box-shadow:none;
        border-radius:0 !important;
    }

    #submn li:last-child {
        border-right:0;
    }

    /* ¸ð¹ÙÀÏ¿¡¼­´Â µÕ±Ù ³×¸ð Á¦°Å */
    #submn li:first-child,
    #submn li:last-child,
    #submn li:first-child:hover,
    #submn li:last-child:hover,
    #submn li.on:first-child,
    #submn li.on:first-child:hover,
    #submn li.on:last-child,
    #submn li.on:last-child:hover {
        border-radius:0 !important;
    }

    #submn a {
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:46px;
        line-height:1.2;
        padding:0 4px;
        font-size:13px !important;
        font-weight:500;
        color:#333;
        white-space:nowrap;
        text-align:center;
    }

    #submn a:hover,
    #submn li:hover a {
        font-size:13px !important;
        color:#0b3b82 !important;
    }

    #submn li:hover {
        background:#f5f8ff;
        border:0;
        border-right:1px solid #e5e5e5;
        box-shadow:none;
    }

    #submn li.on,
    #submn li.on:hover {
        background:#0b3b82;
        border:0;
        border-right:1px solid #0b3b82;
        box-shadow:none;
        border-radius:0 !important;
    }

    #submn li.on a,
    #submn li.on a:hover {
        color:#fff !important;
        font-size:13px !important;
    }
}

/* ÀÛÀº ¸ð¹ÙÀÏ */
@media all and (max-width:420px) {

    #submn li {
        height:42px;
        line-height:42px;
    }

    #submn a {
        height:42px;
        font-size:12px !important;
        padding:0 2px;
        letter-spacing:-0.3px;
    }

    #submn a:hover,
    #submn li:hover a,
    #submn li.on a,
    #submn li.on a:hover {
        font-size:12px !important;
    }
}