.sidenav {
    display: none;
}
@media screen and (max-width: 767px)  {
    .wrap {
        max-width: 767px
    }
    .content .banner{
        display: none;
    }
    .header .btn-course {
        display: block;
    }
    .header{
        top:0;
        height:60px;
        position:fixed;
        background:url("../img/logo.png") no-repeat center #32475d;
        background-size:106px 32px;
        box-shadow:0 3px 3px #888888;
    }
    .header .logo {
        display: none;
    }
    .sidenav {
        margin-left:auto;
        top: 0;
        left: 0;
        width: 256px;
        font-size: 16px;
        height: 100%;
        position: fixed;
        overflow: auto;
        display: block;
        z-index: 9999999;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, .3);
        transform: translate(-262px, 0);
        transition: transform .3s;
    }
    .sidenav.show {
        transform: translate(0, 0)
    }
    .sidenav-overlay {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: none;
        z-index: 9999;
        overflow:hidden;
        position: fixed;
        background: rgba(0, 0, 0, .8);
    }
    .sidenav{
        background:#232323;
    }
    .sidenav h2{
        background:#232323;
        border-bottom:1px solid #141414;
    }
    .sidenav h2 a{
        display:block;
    }
    .sidenav ul{
        margin-top:0;
    }
    .sidenav ul li{
        margin:0;
        height:38px;
        text-align:center;
        line-height:38px;
        box-sizing:border-box;
        border-bottom:1px solid #141414;
    }
    .sidenav ul li:nth-last-of-type(odd){
        border-right:1px solid  #141414;
    }
    .sidenav ul li a{
        display:block;
    }
    .sidenav .m-link {
        display:block;
    }
    .col-xs-12 {
        float: none;
    }

    .article_list a {
        float: none;
    }
    .m_nav {
        display: block;
    }

}