@media (min-width: 375px) and (max-width: 500px) {
    .kr-layout .kr-layout-main .main-left {
      display: none;
    }
    .kr-sider {
      display: none;
    }
    .kr-channel-nav .channel-item .child {
      display: none;
    }
    .kr-channel-nav .channel-item span {
      display: none;
    }
  }
  .kr-layout .kr-layout-main.active {
    width: calc(100% + 120px);
    margin-left: -120px;
  }
  .kr-layout .kr-layout-main.active .main-left {
    background: #eee;
    width: 220px;
    margin: 20px 0px 0px 0px;
    text-indent: -30px;
  }
  .kr-layout .kr-layout-main.active .kr-sider {
    width: 100%;
  }
  .kr-layout .kr-layout-main.active .kr-channel-nav .channel-item .sub-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
  }
  .kr-layout .kr-layout-main.active .kr-channel-nav .channel-item {
    height: 40px;
    margin: 0px 0px;
    font-size: 16px;
  }
  @media (min-width: 720px) and (max-width: 799px) {
    .kr-layout .kr-layout-main.active .main-left {
      width: 200px;
    }
  }
  @media (min-width: 320px) and (max-width: 500px) {
    .kr-layout .kr-layout-main.active {
      width: 100% !important;
      margin-left: 0px !important;
    }
  }