.zch-col {
  box-sizing: border-box;
}
$class-prefix: zch-col-;
@for $n from 1 through 24 {
  .#{$class-prefix}#{$n} {
    width: ($n / 24) * 100%;
  }
}
$class-prefix: zch-col-offset-;
@for $n from 1 through 24 {
  .#{$class-prefix}#{$n} {
    margin-left: ($n / 24) * 100%;
  }
}
@media (max-width: 1920px) {
  $class-prefix: zch-col-widePc-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      width: ($n / 24) * 100%;
    }
  }
  $class-prefix: zch-col-widePc-offset-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      margin-left: ($n / 24) * 100%;
    }
  }
}
@media (max-width: 1200px) {
  $class-prefix: zch-col-pc-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      width: ($n / 24) * 100%;
    }
  }
  $class-prefix: zch-col-pc-offset-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      margin-left: ($n / 24) * 100%;
    }
  }
}
@media (max-width: 992px) {
  $class-prefix: zch-col-narrowPc-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      width: ($n / 24) * 100%;
    }
  }
  $class-prefix: zch-col-narrowPc-offset-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      margin-left: ($n / 24) * 100%;
    }
  }
}
@media (max-width: 768px) {
  $class-prefix: zch-col-pad-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      width: ($n / 24) * 100%;
    }
  }
  $class-prefix: zch-col-pad-offset-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      margin-left: ($n / 24) * 100%;
    }
  }
}
@media (max-width: 576px) {
  $class-prefix: zch-col-phone-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      width: ($n / 24) * 100%;
    }
  }
  $class-prefix: zch-col-phone-offset-;
  @for $n from 1 through 24 {
    .#{$class-prefix}#{$n} {
      margin-left: ($n / 24) * 100%;
    }
  }
}