.header-sidebar{ display:none; }
/*侧边导航菜单*/
@media (max-width: 767px) {
    .overlay-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        z-index: 3; }
    .overlay-sidebar.show {
        opacity: 1;
        visibility: visible;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease; }

    .header-sidebar {
        display: block;
        position: fixed;
        left: -750px;
        top: 0;
        background-color: #ffffff;
        width: 100%;
        height: 100vh;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        z-index: 999;
        overflow: auto; }
    [dir="rtl"] .header-sidebar {
        left: unset;
        right: -320px; }
    .header-sidebar.show {
        left: 0;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease; }
    [dir="rtl"] .header-sidebar.show {
        left: unset;
        right: 0; }
    .header-sidebar .user-panel {
        padding: 16px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: rgba(237, 239, 244, 0.25); }
    .header-sidebar .user-panel .user-img {
        width: 45px;
        height: 45px;
        border-radius: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        margin-right: 16px; }
    [dir="rtl"] .header-sidebar .user-panel .user-img {
        margin-right: 0;
        margin-left: 16px; }
    .header-sidebar .user-panel .icli {
        margin-left: 2px;
        font-size: 16px;
        color: #222222;
        margin-bottom: -1px; }
    .header-sidebar .user-panel span {
        display: inline-block;
        color: #222222;
        font-size: 14px;
        font-weight: 700; }
    @media (max-width: 750px) {
        .header-sidebar {width: 100%; } 
    }

    .side-logo{padding:20px 10px 0px 10px; width: 100%; display: flex; justify-content: space-between;}
    .side-logo .logo{ width:50%; }
    .side-logo .close{
        width: 24px;
        height: 24px;
        margin-top: 20px;
    }
    .side-seach{width: 100%;padding: 30px 0px 25px 0px;border-bottom: 1px solid #ECECEC;}
    .side-seach input{width: calc(100% - 0px);height: 44px;border: 1px solid rgba(0,0,0,0.2);border-radius: 20px;padding: 0px 50px;
    background: url("../images/seach.png") no-repeat 15px 10px; background-size: 24px; outline: none;font-size: 13px;color: #8C8C8C;}

    .nav-list{padding: 20px 10px;}
    .side-st{width: 100%; border-bottom: 1px solid #ECECEC; line-height: 60px; font-size: 16px; font-weight: bold; color: #1F1F1F; position: relative;}
    .side-st a{color: #1F1F1F; }
    .side-st .new-add{position: absolute; right: 0px; top: 17px; width: 24px; height: 24px; background: url("../images/add2.png") no-repeat 0px 0px;}

    /**/
    .side-vshow{ display: none; }
    .side-btns{margin: 20px 0px;background: #f00;color: #fff;font-size: 16px;font-weight: bold;text-align: center;height: 44px;line-height: 44px;}
    .side-btns a{ color: #fff; }

    .side-st.active{}
    .side-st.active .new-add{
        background: url("../images/close.png") no-repeat 0px 0px; background-size: 24px 24px; transition: all .3s;
    }
    .side-st.active .side-vshow{
        display: block; transition: all .3s;
    }

    .sm-list {line-height: 50px;border-bottom: 1px solid #ECECEC;padding:10px 0px;}
    .sm-list img{width: 66px;height: 50px;margin-right: 15px;}
    .sm-list label{font-size: 14px;color: #1F1F1F;}
    .side-vshow ul{ overflow: hidden; padding: 0 10px; }
    .side-vshow li{ width: 100%; float: left; }
    .side-vshow li h4{ margin-bottom: 10px; }
    .side-vshow li h4 a{ font-weight: bold; }
    .side-vshow li a{ display: block; font-weight: 100; line-height: 40px; }
}