@media (max-width: 767px) {
    .show-sid #body_sidebar {
        width: 220px;
    }

    .show-sid #body_content {
        margin-left: 0;
    }

        .show-sid #body_content .content-header {
            left: 0;
        }

    .show-sid .body-sidebar-fix {
        display: block;
    }

    .hide-sid #body_sidebar {
        width: 0;
    }

    .hide-sid #body_content {
        margin-left: 0;
    }

        .hide-sid #body_content .content-header {
            left: 0;
        }

    .hide-sid .body-sidebar-fix {
        display: none;
    }

    .hide-sid .menu-t {
        display: none;
    }

    .hide-sid #body_sidebar .sidebar-logo .tit {
        display: none;
    }

    .query-mod .query-mod-body {
        width: 90%;
        margin-left: -45%;
    }
}

@media (min-width: 768px) {
    .show-sid #body_sidebar {
        width: 220px;
    }

    .show-sid #body_content {
        margin-left: 220px;
    }

        .show-sid #body_content .content-header {
            left: 220px;
        }

        .show-sid #body_content .header-sid-btn svg .line--1 {
            --length: 12.602325267
        }

        .show-sid #body_content .header-sid-btn svg .line--3 {
            --length: 12.602325267
        }

    .hide-sid #body_sidebar {
        width: 60px;
    }

    .hide-sid #body_content {
        margin-left: 60px;
    }

        .hide-sid #body_content .content-header {
            left: 60px;
        }

    #body_sidebar .sidebar-logo {
        line-height: 5rem;
        height: 5rem;
    }

    #body_content .content-header-inner {
        line-height: 5rem;
        height: 5rem;
    }

    #body_content .header-sid-btn svg {
        height: 5rem;
        width: 5rem;
    }

    #body_content .content-main {
        margin-top: 5rem;
    }

    .hide-sid .menu-t {
        display: none;
    }

    .hide-sid #body_sidebar .sidebar-logo .tit {
        display: none;
    }

    .ele-card {
        max-width: 50%;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }
}

@media (min-width:992px) {
    .ele-card {
        max-width: 33.333333%;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
    }
}

@media (min-width:1200px) {
    .ele-card {
        max-width: 20%;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
    }
}
