.c-subnav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 11px 0;
    width: 100%;
    background-color: #ededed;
    border-top: 2px solid #bdc7da
}

    .c-subnav ul[data-sn-link="1"] {
        padding-left: 10%
    }

    .c-subnav ul[data-sn-link="2"] {
        padding-left: 40%
    }

    .c-subnav ul[data-sn-link="4"] {
        padding-left: 72%
    }

@media screen and (min-width:1367px) {
    .c-subnav ul[data-sn-link="1"] {
        padding-left: 10%
    }

    .c-subnav ul[data-sn-link="2"] {
        padding-left: 27%
    }

    .c-subnav ul[data-sn-link="4"] {
        padding-left: 50%
    }
}

.c-subnav ul li {
    display: inline-block;
    position: relative;
    padding: 0 20px
}

    .c-subnav ul li::after {
        content: ' ';
        display: block;
        width: 1px;
        height: 14px;
        background-color: #e44926;
        position: absolute;
        top: 3px;
        right: 0
    }

    .c-subnav ul li:last-of-type::after {
        display: none
    }

    .c-subnav ul li a {
        font-family: NotoSansRegular,sans-serif;
        font-weight: 400;
        font-size: 12px;
        color: #e44926;
        text-decoration: none;
        -webkit-transition: color .3s ease;
        -o-transition: color .3s ease;
        transition: color .3s ease
    }

        .c-subnav ul li a:hover {
            color: #bf3718
        }

        .c-subnav ul li a.active {
            color: #8f99bc
        }

            .c-subnav ul li a.active:hover {
                color: #6f7ca9
            }

@media screen and (max-width:768px) {
    .c-subnav {
        display: none !important
    }
}