.common_header {
    margin-bottom: 30px;
}
.common_header .top_header_wrap {
    max-width: 1800px;
    margin: auto;
}
.common_header .top_header .logo {
    margin: 20px 15px 20px 0;
    float: left;
}
.common_header .logo a {
    background: url(http://mtg.bigmagic.net/img/logo.png) 0 0 no-repeat;
    width: 184px;
    height: 56px;
    background-size: 100% auto;
    text-indent: -9999px;
    display: block;
}
.common_header .top_header .header_add {
    float: left;
    width: 360px;
}
.common_header .nav_wrap {
    background: #000;
}
.common_header .navbar, .common_header .navbar-nav, .common_header .navbar-nav .li, .common_header .navbar-nav ul {
    background-color: #000;
    color: #fff;
}
@media (max-width: 767px) {
    .top_header {
        padding: 5px;
    }
    .common_header .top_header .logo {
        width: 105px;
        height: 39px;
        margin: auto;
    }
    .common_header .top_header .logo a {
        width: 100%;
        background-position: 0 4px;
    }
    .common_header .top_header_wrap img {
        height: 40px;
    }
    .common_header .navbar {
        padding: 0;
        border: none;
        margin: 0;
    }
    header .nav_wrap {
        background: none;
    }
    header .nav_wrap.-fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
    }
    .common_header .navbar .nav li {
        height: auto;
    }
    header .navbar .nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100%;
    }
    header .navbar .nav li {
        width: 25%;
        border-left: 1px solid #999;
    }
    header .navbar .nav li:first-child,
    header .navbar .nav li:nth-child(5){
        border-left: none;
    }
    .common_header .navbar .nav li:last-child {
        border-right: none;
    }
    header .navbar .nav a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        padding: 5px 0;
        font-size: 10px;
        font-weight: normal;
        line-height: 1.2;
        height: 38px;
        vertical-align: middle;
        text-align: center;
        background: #000;
        color: #fff;
        border-bottom: 3px solid #333;
    }
    header .navbar .nav li.active a {
        border-bottom: 3px solid #fef236;
    }
    .common_header .navbar .nav .active a, .common_header .navbar .nav a:hover, .common_header .navbar .nav a:active, .common_header .navbar .nav a:active:focus, .common_header .navbar .nav a:focus {
        border-bottom: 3px solid #fef236;
    }
    header .navbar {
        min-height: inherit;
        background: #000;
    }
    header .navbar .nav {
        margin: 0 0 0 0;
        background-color: #000;
        border: none;
    }
    .common_header .nav:before, .common_header .nav:after, .common_header .navbar:before, .common_header .navbar:after {
        display: none;
    }
    header .navbar .br_sp {
        display: block;
    }
    .common_header .top_header .header_add {
        display: none;
    }
}
@media (min-width: 768px) {
    .common_header .top_header_wrap {
        padding: 0 15px 0 20px;
    }
    .common_header .navbar {
        max-width: 1800px;
        margin: auto;
        padding: 0 15px;
        border-radius: 0;
    }
    .common_header .navbar {
        position: relative;
        min-height: 50px;
        border: 1px solid transparent;
    }
    .common_header .navbar-nav {
        float: left;
        margin: 0;
    }
    .common_header .navbar-nav>li {
        float: left;
    }
    .common_header .nav>li {
        position: relative;
        display: block;
    }
    .common_header .navbar-nav>li>a {
        padding: 15px 5px;
    }
    .common_header .navbar .nav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
    }
    .common_header .navbar .nav li {
        width: 100%;
        height: 50px;
        border-left: 1px solid #999;
        text-align: center;
    }
    .common_header .navbar .nav a {
        border-bottom: 3px solid #000;
    }
    .common_header .navbar .nav a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: center;
        height: 100%;
        font-size: 16px;
        color: #fff;
        font-weight: normal;
    }
    .common_header .navbar .nav .active a, .common_header .navbar .nav a:hover, .common_header .navbar .nav a:active, .common_header .navbar .nav a:active:focus, .common_header .navbar .nav a:focus {
        background: #000;
        border-bottom: 3px solid #fef236;
        color: #fff;
    }
    .common_header .navbar-nav>li>a {
        line-height: 20px;
    }
}