/* =========================================================
   리드앤톡 서브 메뉴 최종본
   - PC 최대 1280px
   - 보라색 계열
   - 활성 메뉴 전체 배경색 변경
   - 흰색 하단 바 제거
   - 모바일 자동 줄바꿈
   - 1개~10개 메뉴 대응
========================================================= */

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

img{
    border:0;
}

a{
    text-decoration:none;
}

#submn,
#submn *{
    box-sizing:border-box;
}

/* =========================================================
   공통
========================================================= */

#submn{
    position:relative;
    left:0;
    bottom:0;
    clear:both;
    width:100%;
    height:76px;
    margin:0;
    padding:0;
    background:#7168e8;
    text-align:center;
    overflow:visible;
}

#submn ul{
    display:flex;
    align-items:stretch;
    width:100%;
    max-width:1280px;
    height:76px;
    margin:0 auto;
    padding:0;
    font-size:0;
}

#submn li{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:76px;
    margin:0;
    padding:0;
    background:#7168e8;
    border-right:1px solid rgba(255,255,255,.18);
    transition:
        background-color .22s ease,
        color .22s ease,
        box-shadow .22s ease;
}

#submn li:first-child{
    border-left:1px solid rgba(255,255,255,.18);
}

#submn a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:0 12px;
    color:#fff;
    font-size:17px;
    font-weight:600;
    line-height:1.35;
    letter-spacing:-.4px;
    text-align:center;
    word-break:keep-all;
    text-decoration:none;
    transition:color .22s ease;
}

/* =========================================================
   상태 색상
========================================================= */

/* 기본 */
#submn li{
    background:#7168e8;
}

/* 마우스 오버 */
#submn li:hover{
    background:#6259da;
    cursor:pointer;
}

#submn li:hover a{
    color:#fff;
    text-decoration:none;
}

/* 활성 메뉴 전체 영역 강조 */
#submn li.on,
#submn li.on:hover{
    background:#4438ca;
    box-shadow:inset 0 -5px 0 rgba(45,31,175,.55);
}

#submn li.on a,
#submn li.on:hover a{
    color:#fff;
    font-weight:700;
}

/* 기존 흰색 하단 바 완전 제거 */
#submn li.on::after{
    content:none !important;
    display:none !important;
}

/* 키보드 포커스 */
#submn a:focus{
    outline:2px solid rgba(255,255,255,.75);
    outline-offset:-4px;
}

/* =========================================================
   PC 열 분할
========================================================= */

#submn ul.col-1 li{
    width:100%;
}

#submn ul.col-2 li{
    width:50%;
}

#submn ul.col-3 li{
    width:33.333333%;
}

#submn ul.col-4 li{
    width:25%;
}

#submn ul.col-5 li{
    width:20%;
}

#submn ul.col-6 li{
    width:16.666667%;
}

#submn ul.col-7 li{
    width:14.285714%;
}

#submn ul.col-8 li{
    width:12.5%;
}

#submn ul.col-9 li{
    width:11.111111%;
}

#submn ul.col-10 li{
    width:10%;
}

/* =========================================================
   PC
========================================================= */

@media (min-width:768px){

    #submn{
        background:#7168e8;
    }

    #submn ul{
        display:flex;
        flex-wrap:nowrap;
    }

    #submn li{
        flex:none;
    }

    #submn li:last-child{
        border-right:1px solid rgba(255,255,255,.18);
    }
}

/* =========================================================
   태블릿
========================================================= */

@media (min-width:768px) and (max-width:1100px){

    #submn a{
        padding:0 7px;
        font-size:15px;
        letter-spacing:-.7px;
    }
}

/* =========================================================
   모바일
========================================================= */

@media (max-width:767.98px){

    #submn{
        position:relative;
        float:none;
        width:100%;
        height:auto;
        min-height:45px;
        margin:0;
        padding:0;
        background:#7168e8;
        overflow:hidden;
    }

    #submn ul{
        display:flex;
        flex-wrap:wrap;
        align-items:stretch;
        width:100%;
        max-width:none;
        height:auto;
        margin:0;
        padding:0;
    }

    #submn li{
        flex:none;
        width:auto;
        height:46px;
        min-height:46px;
        margin:0;
        padding:0;
        background:#7168e8;
        border-right:1px solid rgba(255,255,255,.15);
        border-bottom:1px solid rgba(255,255,255,.15);
    }

    #submn li:first-child{
        border-left:0;
    }

    #submn a{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:100%;
        padding:0 8px;
        color:#fff;
        font-size:14px;
        font-weight:600;
        line-height:1.25;
        letter-spacing:-.5px;
        text-align:center;
        word-break:keep-all;
    }

    #submn li:hover{
        background:#6259da;
    }

    #submn li.on,
    #submn li.on:hover{
        background:#4438ca;
        box-shadow:inset 0 -4px 0 rgba(45,31,175,.55);
    }

    #submn li.on a,
    #submn li.on:hover a{
        color:#fff;
        font-weight:700;
    }

    #submn li.on::after{
        content:none !important;
        display:none !important;
    }

    /* 기본 안전값 */
    #submn ul[class*="col-"] li{
        flex:0 0 50%;
        width:50%;
    }

    /* 1개 */
    #submn ul.col-1 li{
        flex-basis:100%;
        width:100%;
    }

    /* 2개 */
    #submn ul.col-2 li{
        flex-basis:50%;
        width:50%;
    }

    /* 3개 */
    #submn ul.col-3 li{
        flex-basis:33.333333%;
        width:33.333333%;
    }

    /* 4개: 2 + 2 */
    #submn ul.col-4 li{
        flex-basis:50%;
        width:50%;
    }

    /* 5개: 3 + 2 */
    #submn ul.col-5 li{
        flex-basis:33.333333%;
        width:33.333333%;
    }

    #submn ul.col-5 li:nth-child(n+4){
        flex-basis:50%;
        width:50%;
    }

    /* 6개: 3 + 3 */
    #submn ul.col-6 li{
        flex-basis:33.333333%;
        width:33.333333%;
    }

    /* 7개: 4 + 3 */
    #submn ul.col-7 li{
        flex-basis:25%;
        width:25%;
    }

    #submn ul.col-7 li:nth-child(n+5){
        flex-basis:33.333333%;
        width:33.333333%;
    }

    /* 8개: 4 + 4 */
    #submn ul.col-8 li{
        flex-basis:25%;
        width:25%;
    }

    /* 9개: 3 + 3 + 3 */
    #submn ul.col-9 li{
        flex-basis:33.333333%;
        width:33.333333%;
    }

    /* 10개: 5 + 5 */
    #submn ul.col-10 li{
        flex-basis:20%;
        width:20%;
    }

    #submn ul.col-7 a,
    #submn ul.col-8 a,
    #submn ul.col-9 a,
    #submn ul.col-10 a{
        padding:0 4px;
        font-size:13px;
        letter-spacing:-.8px;
    }
}

/* =========================================================
   작은 모바일
========================================================= */

@media (max-width:480px){

    #submn li{
        height:44px;
        min-height:44px;
    }

    #submn a{
        padding:0 5px;
        font-size:13px;
        letter-spacing:-.7px;
    }

    /*
     * 10개 메뉴는 작은 화면에서 3열 구성
     */
    #submn ul.col-10 li{
        flex-basis:33.333333%;
        width:33.333333%;
    }

    #submn ul.col-10 li:nth-last-child(1){
        flex-basis:100%;
        width:100%;
    }
}