* {
  font-family: Source Han Sans CN, Microsoft YaHei, SimHei, SimSun!important;
  box-sizing: border-box;
}

/* 宽高 */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

/* flex */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-x-center {
  display: flex;
  justify-content: center;
}

.flex-y-center {
  display: flex;
  align-items: center;
}

.flex-y-start {
  display: flex;
  align-items: start;
}

.flex-x-end {
  display: flex;
  justify-content: flex-end;
}

.flex-x-between {
  display: flex;
  justify-content: space-between;
}

.flex-x-around {
  display: flex;
  justify-content: space-around;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-direction-column {
  display: flex;
  flex-direction: column;
}

/* 常用边距 */
.mr-4 {
  margin-right: 4px;
}

.pt-8 {
  padding-top: 8px;
}

.pl-8 {
  padding-left: 8px;
}

.pb-8 {
  padding-bottom: 8px;
}

.mt-8 {
  margin-top: 8px;
}

.mr-8 {
  margin-right: 8px;
}

.mb-8 {
  margin-bottom: 8px;
}

.pl-10 {
  padding-left: 10px;
}

.mt-10 {
  margin-top: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.pt-12 {
  padding-top: 12px;
}

.pr-12 {
  padding-right: 12px;
}

.pb-12 {
  padding-bottom: 12px;
}

.mr-12 {
  margin-right: 12px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mb-14 {
  margin-bottom: 14px;
}

.pt-16 {
  padding-top: 16px;
}

.pr-16 {
  padding-right: 16px;
}

.pb-16 {
  padding-bottom: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.mr-16 {
  margin-right: 16px;
}

.ml-16 {
  margin-left: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.pr-20 {
  padding-right: 20px;
}

.pt-20 {
  padding-top: 20px;
}

.pb-20 {
  padding-bottom: 20px;
}

.mr-20 {
  margin-right: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.pl-24 {
  padding-left: 24px;
}

.pr-24 {
  padding-right: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mr-24 {
  margin-right: 24px;
}

.mr-32 {
  margin-right: 32px;
}

.ml-40 {
  margin-left: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

/* 边距1 */
/* 8 */
.m-8 {
  margin: 8px;
}

.m-tb-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.m-lr-8 {
  margin-left: 8px;
  margin-right: 8px;
}

.p-8 {
  padding: 8px;
}

.p-tb-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.p-lr-8 {
  padding-left: 8px;
  padding-right: 8px;
}

/* 10 */
.m-10 {
  margin: 10px;
}

.m-tb-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.m-lr-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.p-10 {
  padding: 10px;
}

.p-tb-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.p-lr-10 {
  padding-left: 10px;
  padding-right: 10px;
}

/* 12 */
.m-12 {
  margin: 12px;
}

.m-tb-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}

.m-lr-12 {
  margin-left: 12px;
  margin-right: 12px;
}

.p-12 {
  padding: 12px;
}

.p-tb-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.p-lr-12 {
  padding-left: 12px;
  padding-right: 12px;
}

/* 16 */
.m-16 {
  margin: 16px;
}

.m-tb-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.m-lr-16 {
  margin-left: 16px;
  margin-right: 16px;
}

.p-16 {
  padding: 16px;
}

.p-tb-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.p-lr-16 {
  padding-left: 16px;
  padding-right: 16px;
}

/* 20 */
.m-20 {
  margin: 20px;
}

.m-tb-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.m-lr-20 {
  margin-left: 20px;
  margin-right: 20px;
}

.p-20 {
  padding: 20px;
}

.p-tb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.p-lr-20 {
  padding-left: 20px;
  padding-right: 20px;
}

/* 24 */
.m-24 {
  margin: 24px;
}

.m-tb-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.m-lr-24 {
  margin-left: 24px;
  margin-right: 24px;
}

.p-24 {
  padding: 24px;
}

.p-tb-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.p-lr-24 {
  padding-left: 24px;
  padding-right: 24px;
}

/* 边距2 */
.p-20 {
  padding: 20px;
}

/* 字体 */
.fs-10 {
  font-size: 10px;
}

.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-24 {
  font-size: 24px;
}

.fs-28 {
  font-size: 28px;
}

.fs-32 {
  font-size: 32px;
}

.fs-48 {
  font-size: 48px;
}

.fw-500 {
  font-weight: 500;
}

.fw-700 {
  font-weight: 700;
}

.fc-grey {
  color: #6e6e73;
}

.f-tag {
  height: 28px;
  border-radius: 24px;
  color: #6e6e73;
  background: #f4f4f4ff;
  padding: 4px 12px;
}

/* 颜色 */
.cl-white {
  color: #ffffff;
}

.cl-danger {
  color: #bc4741;
}

.cl-warning {
  color: #ffb800;
}

.cl-success {
  color: #27995c;
}

.cl-red {
  color: #e04035;
}

.cl-yellow {
  color: #ffbd3e;
}

.cl-green {
  color: #3A8D98;
}

.cl-blue {
  color: #45a0ff;
}

.cl-grey {
  color: #6b6b6b;
}

.bg-white {
  background-color: #ffffff;
}

.bg-danger {
  background: #bc4741;
}

.bg-warning {
  background: #ffb800;
}

.bg-success {
  background: #27995c;
}

.bg-red {
  background: #ff5656;
}

.bg-green {
  background-color: #5bce7b;
}

.bg-blue {
  background-color: #69a5ff;
}

.bg-grey {
  background-color: #f5f7fa;
}

.bg-transparent {
  background-color: transparent;
}

/* 图片 */
.img-14 {
  width: 14px;
  height: 14px;
}

.img-16 {
  width: 16px;
  height: 16px;
}

.img-20 {
  width: 20px;
  height: 20px;
}

.img-24 {
  width: 24px;
  height: 24px;
}

.img-30 {
  width: 30px;
  height: 30px;
}

.img-32 {
  width: 32px;
  height: 32px;
}

.img-40 {
  width: 40px;
  height: 40px;
}

.img-48 {
  width: 48px;
  height: 48px;
}

.img-100 {
  width: 100px;
  height: 100px;
}

/* 文本省略 */

/* （单行） */
.line-text-space {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  -webkit-line-clamp: 1;
}

/* （两行） */
.two-line-text-space {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

/* （三行） */
.thr-line-text-space {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

/* overflow */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

/* position */
.position-relative {
  position: relative;
}