@media screen and (max-width: 768px) {
  .main-void {
    width: 100%;
    height: 10px;
  }

  .mainbox {
    height: 100%;
  }

  #sider {
    display: none;
  }
  
  #sider-btn {
    display: block;
    position: absolute;
    top: .8rem;
    left: .75rem; 
    font-size: 1.5rem;
  }

  .login {
    position: absolute;
    top: 10%;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    width: 100%;
    background-color: rgba(255,255,255,0);
  }

  .login-logo {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 10rem;
    margin-left: -6rem;
  }

  .login-img { width: 12rem; }

  .login-sub {
    position: absolute;
    top: 17.5%;
    left: 0;
    height: 5rem;
    width: 100%;
    text-align: center;
    color: #073562;
    font: bolder 1.8rem/5rem 'Microsoft YaHei';
  }
  
  .login-form {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .login-input {
    width: 100%;
  }

  .navibar { 
    display: none;
  }

  .index-head-text {
    display: none;
  }

  .index-panel{
    box-sizing: border-box;
    border-top: none;
  }

  .index-date-picker {
    display: none;
  }

  .index-date-picker-mobile {
    display: block;
  }

  .index-panel-stats {
    padding: 1rem;
    background-color: #fff;
    margin-bottom: 1rem;
  }

  .index-panel-stats-sub {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    background: rgba(0,0,0,0);
    border-radius: 0;
    box-shadow: none;
  }

  .index-panel-item-sub {
    flex-wrap: wrap;
  }

  .index-stats {
    flex: 0 0 100%;
  }

  .index-stats-body {
    width: 100%;
    display: flex;
    padding-right: 0;
    justify-content: space-between;
  }

  .index-stats-item {
    flex: 0 0 48%;
    margin-bottom: .75rem;
  }

  .index-stats-alt {
    flex: 0 0 50%;
  }

  .index-panel-devices {
    background-color: #fff;
    flex-wrap: wrap;
    height: 100%;
    padding: 0;
  }

  .index-panel-void {
    display: block;
    width: 100%;
    height: 1rem;
    background-color: #f5f5f9;
  }
  
  .index-devices {
    height: 60vh;
    box-shadow: none;
    background: #fff;
    padding: 1rem;
    border-radius: 0;
  }

  .index-devices-follow { flex: 0 0 100%; }
  .index-devices-alarm { flex: 0 0 100%; }

  .index-item {
    flex: 0 0 50%;
  }

  .user-search-mobile {
    display: block;
    line-height: 3.5rem;
    margin-bottom: .5rem;
  }

  .header-big {
    display: none;
  }

  .search-box {
    border-top: 1px solid #ddf;
    line-height: 3rem;
  }

  .user-table {
    display: none;
  }

  .user-table-mobile {
    display: block;
  }

  .chartInfo-item {
    flex: 0 0 50%; 
    padding-left: .5rem;
  }

  .chartInfo-value {
    font: bolder 1rem "Microsoft YaHei";
  }

  .main {
    margin: .5rem 0;
  }

  .mobile-style {
    display: block;
  }

  .normal-style {
    display: none;
  }

  .ant-drawer-close {
    color: #fff;
  }

  .chartInfo-item-mobile {
    padding-left: .5rem;
    font: .9rem/1.5rem "Microsoft YaHei";
  }

  .chartInfo-box {
    margin: .5rem 0;
    padding: .5rem;
    background: #F1F0F5;
  }

  .chartInfo-box-alt {
    display: flex;
    margin: .2rem 0;
    background: #fbfbfb;
  }

  .test-form {
    display: none;
  }

  html, body {
    font-size: 14px;
  }
  
  .test-label {
    font: bolder 1rem/2rem "Microsoft YaHei";
    text-align: left;
    margin-left: 8.25%;
  }

  .test-main {
    border: none;
  }

  .ant-dropdown-link {
    font: 1.1rem/2.25rem "Microsoft YaHei";
  }

  .device-operate {
    width: 49.5%;
    float: left;
  }

  .template {
    right: 0;
    top: 0;
    box-shadow: .1rem .1rem .1rem .1rem #dde;
  }

  .import-input {
    display: block;
    margin-top: 3rem;
  }

  .edit-form {
    position: relative;
    padding: 3rem 0 2rem;
    box-shadow: none;
  }



  .ant-table-tbody>tr>td, .ant-table-thead>tr>th {
    padding: 10px;
  }

  .search-box-bar {
    justify-content: flex-start;
  }

  .device-alarm {
    width: 100%;
  }

  .real-head {
    height: 7.75rem;
    display: flex;
    margin: .5rem .5rem;
    padding: 0 .5rem;
    border-radius: .5rem;
    box-shadow: 0 0 .35rem 0 #cdf;
    flex-wrap: wrap;
  }

  .real-head-item-1 {
    flex: 0 0 100%;
    height: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .real-head-item-2 {
    flex: 0 0 100%;
    height: 2rem;
    flex-direction: row;
  }

  .real-mac {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
  }
  
  .real-mac-num {
    flex: 0 0 45%;
    height: 2rem;
    color: #232637;
    font: bolder 1rem/2rem "Microsoft YaHei";
    margin-top: 0;
    cursor: pointer;
  }
  
  .real-mac-type {
    flex: 0 0 45%;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
  }

  .real-info-bar {
    flex: 0 0 100%;
    flex-wrap: wrap;
  }

  .bar-1 { 
    flex:0 0 45%; 

  }
  .bar-2 { flex:0 0 45%; }
  .bar-3 { 
    flex: 0 0 45%; 
    color: #999; 
  }
  .bar-4 {
    flex: 0 0 46.25%;
    justify-content: flex-start;
    align-items: center;
    height: 2rem;
    box-sizing: border-box;
    padding-left: 1rem;
  }
  .bar-5 {
    height: 2rem;
    line-height: 2rem;
    justify-content: flex-start; 
    align-items: center;
    color: #999; 
    flex: 0 0 53.75%;
    box-sizing: border-box;
    padding-left: 1rem;
    overflow: hidden;
  }

  .real-direction-sub {
    width: 3.5rem;
    font: bold .8rem/1.5rem "Microsoft YaHei";
    padding-left: 0;
    margin-left: 0;
  }

  .rd-sub {
    margin-left: 1rem;
  }

  .real-direction-icon {
    display: none;
  }
  
  .real-direction-info {
    display: none;
  }

  .realtime {
    padding: 0 .5rem .5rem;
    height: 18rem;
  }

  .real {
    width: 100%;
    padding: 0;
    align-items: center;
    display: block;
  }
  
  .real-infobox {
    width: 100%;
    height: 2rem;
    overflow: hidden;
    background: rgba(238,248,255,.75);
    border-radius: .25rem;
    display: flex;
  }

  .real-infobox-sub {
    width: 100%;
    text-align: center;
    display: flex;
  }

  .ri-sub-1 { height: 2rem; }
  .ri-sub-2 { 
    height: 2rem;
    margin-top: 0; 
  }

  .real-rate-chart {
    display: flex;
    flex: 0 0 100%;
  }

  .real-rate-chart-sub {
    padding: 0 .25rem; 
    height: 220px;
  }

  .real-infobox-type {
    width: 5rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    margin-left: .5rem;
    margin-top: 0;
    text-align: center;
  }

  .real-infobox-sub-type {
    width: 5rem;
    height: 2rem;
    line-height: 2rem; 
    font-size: .9rem;
    margin-left: .5rem;
    margin-top: 0;
    text-align: center;
  }

  .rist-1 {
    margin-top: 0;
    width: auto;
  }

  .real-rate {
    margin-top: 0;
    width: 4.5rem;
    height: 2rem;
    font: bolder 1.5rem/2rem "Microsoft YaHei";
  }

  .real-rate-sub {
    margin-bottom: 0;
    width: 4.5rem;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.5rem;
  }

  .rr-sub-1 {
    font-size: 1.5rem;
  }

  .real-rate-unit {
    margin-top: 0;
    width: 4rem;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
  }

  .real-rate-unit-sub {
    width: 4rem;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    font-size: .8rem;
    font-weight: bolder;
    color: #232637;
  }

  .real-split {
    display: none;
  }
  
  .real-infobox-foot, .real-infobox-sub-foot {
    display: none;
  }

  .rt-footer {
    margin-top: .5rem;
  }

}