/* 超小设备（手机，小于 768px） */
@media (min-width: 0) {
  .xs-0 {
    width: 0;
  }
  .xs-none {
    display: none;
  }
  .xs-12 {
    width: 100%;
  }
  .xs-6 {
    width: 50%;
  }
  .xs-4 {
    width: 33.33333333%;
  }
  .container {
    padding: 0 15px;
  }
  .nav .button-bar > div {
    padding: 28px 0 28px 6px;
  }
  .nav .button-bar > div span:before {
    left: -15px;
    right: -15px;
  }
}
@media (min-width: 576px) {
  .container {
    width: 540px;
  }
}
@media (max-width: 767px) {
  .nav-xs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .c-menu {
    display: block;
  }
  .nav {
    display: none;
  }
}
/* 小型设备（平板电脑，768px 起） */
@media (min-width: 768px) {
  .nav-xs {
    display: none;
  }
  .nav {
    display: block;
  }
  .c-menu {
    display: none;
  }
  .sm-6 {
    width: 50%;
  }
  .sm-12 {
    width: 100%;
  }
  .sm-5 {
    width: 41.66666667%;
  }
  .sm-4 {
    width: 33.33333333333333333%;
  }
  .sm-3 {
    width: 25%;
  }
  .sm-ml1 {
    margin-left: 8.33333333%;
  }
  .sm-mr1 {
    margin-left: 8.33333333%;
  }
  .container {
    width: 746px;
  }
}
/* 中型设备（台式电脑，992px 起） */
@media (min-width: 992px) {
  .md-block {
    display: block;
  }
  .md-4 {
    width: 33.33333333%;
  }
  .md-6 {
    width: 50%;
  }
  .md-5 {
    width: 41.66666667%;
  }
  .md-2 {
    width: 16.66666667%;
  }
  .md-3 {
    width: 25%;
  }
  .container {
    width: 960px;
  }
  .nav .button-bar > div {
    padding: 28px 0 28px 20px;
  }
  .nav .button-bar > div span:before {
    left: -20px;
    right: -20px;
  }
}
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: 1200px) {
  .container {
    width: 1168px;
  }
  .lg-3 {
    width: 25%;
  }
  .lg-4 {
    width: 33.33333333%;
  }
}