@charset "UTF-8";
@import "./common/var.css";

.w-col-1, .w-col-2, .w-col-3, .w-col-4, .w-col-5, .w-col-6, .w-col-7, .w-col-8, .w-col-9, .w-col-10, .w-col-11, .w-col-12, .w-col-13, .w-col-14, .w-col-15, .w-col-16, .w-col-17, .w-col-18, .w-col-19, .w-col-20, .w-col-21, .w-col-22, .w-col-23, .w-col-24 {
  float: left;
  box-sizing: border-box;
}
.w-col-0 {
  width: 0;
}

@for $i from 0 to 24 {
  .w-col-$i {
    width: calc(1 / 24 * $(i) * 100)%;
  }
  .w-col-offset-$i {
    margin-left: calc(1 / 24 * $(i) * 100)%;
  }
  .w-col-pull-$i {
    position: relative;
    right: calc(1 / 24 * $(i) * 100)%;
  }
  .w-col-push-$i {
    position: relative;
    left: calc(1 / 24 * $(i) * 100)%;
  }
}

@media (max-width: 768px) {
  @for $i from 0 to 24 {
    .w-col-xs-$i {
      width: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-xs-offset-$i {
      margin-left: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-xs-pull-$i {
      position: relative;
      right: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-xs-push-$i {
      position: relative;
      left: calc(1 / 24 * $(i) * 100)%;
    }
  }
}

@media (min-width: 768px) {
  @for $i from 0 to 24 {
    .w-col-sm-$i {
      width: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-sm-offset-$i {
      margin-left: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-sm-pull-$i {
      position: relative;
      right: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-sm-push-$i {
      position: relative;
      left: calc(1 / 24 * $(i) * 100)%;
    }
  }
}
@media (min-width: 992px) {
  @for $i from 0 to 24 {
    .w-col-md-$i {
      width: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-md-offset-$i {
      margin-left: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-md-pull-$i {
      position: relative;
      right: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-md-push-$i {
      position: relative;
      left: calc(1 / 24 * $(i) * 100)%;
    }
  }
}
@media (min-width: 1200px) {
  @for $i from 0 to 24 {
    .w-col-lg-$i {
      width: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-lg-offset-$i {
      margin-left: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-lg-pull-$i {
      position: relative;
      right: calc(1 / 24 * $(i) * 100)%;
    }
    .w-col-lg-push-$i {
      position: relative;
      left: calc(1 / 24 * $(i) * 100)%;
    }
  }
}