@charset "utf-8";
/* CSS Document */

.c-blue {
  color: #0398dd;
}

.c-red {
  color: #0398dd;
}

.c-green {
  color: #00e64d;
}

.c-grey {
  color: #8c8e92;
}

.c-orange {
  color: #ffb042;
}

.c-black {
  color: #2f2f34;
}

.c-white {
  color: #fff;
}

/*  背景 */
.bg-grey {
  background: #eff1f6;
}

.bg-blue {
  background: #3072ff;
}

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

/* 字号 */

  .f-12 {
    font-size:12px;
  }
 .f-14 {
    font-size:14px;
  }
.f-16 {
    font-size:16px;
  }
.f-18 {
    font-size:18px;
  }
.f-20 {
    font-size:20px;
  }
.f-22 {
    font-size:22px;
  }
.f-24 {
    font-size:24px;
  }
.f-26 {
    font-size:26px;
  }
.f-28 {
    font-size:28px;
  }
.f-30 {
    font-size:30px;
  }

/*// 加粗*/
.f-w {
  font-weight: bold;
}

.f-w4 {
  font-weight: 400;
}

.f-w5 {
  font-weight: 500;
}

.f-w6 {
  font-weight: 600;
}

.f-w7 {
  font-weight: 700;
}

/* 对齐方式 */
.ta-l {
  text-align: left;
}

.ta-c {
  text-align: center;
}

.ta-r {
  text-align: right;
}

.t-nowrap {
  white-space: nowrap;
}

/* 边框 */

.b-a {
  border: 1px solid  #e8eaec;
}

.b-r {
  border-right: 1px solid  #e8eaecr;
}

.b-l {
  border-left: 1px solid  #e8eaec;
}

.b-t {
  border-top: 1px solid  #e8eaec;
}

.b-b {
  border-bottom: 1px solid  #e8eaec;
}

/* 圆角 */
.br-8 {
  border-radius: 8px;
}

.br-16 {
  border-radius: 16px;
}

.br-50p {
  border-radius: 50%;
}

/* 阴影 */
.box-shadow {
  box-shadow: 0 0 12px 0 rgb(209 213 220 / 34%);
}

/* 其他 */
.border-box {
  box-sizing: border-box;
}

.c-pointer {
  cursor: pointer;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.ws-n {
  white-space: nowrap;
}

/* 一行超出省略号 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 超出2行省略号 */
.text-ellipsis-2 {
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 布局 */
.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

.full-box {
  height: 100%;
  width: 100%;
}

/* 定位垂直居中 */
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 绝对定位充满容器 */
.absolute-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* 多行 并自动换行 */
.flex-wrap {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

/* 一行 左右分布 */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-between-c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.flex-ai-c {
  display: flex;
  align-items: center;
}

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

.d-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-0 {
  flex: 0 0 auto;
}

.ai-c {
  align-items: center;
}

.jc-fs {
  justify-content: flex-start;
}

.jc-fe {
  justify-content: flex-end;
}

.jc-c {
  justify-content: center;
}

.jc-sa {
  justify-content: space-around;
}

.jc-sb {
  justify-content: space-between;
}

.jc-se {
  justify-content: space-evenly;
}

/* padding/margin
 尺寸：tiny mini s m l
 方向：p-a 所有方向，p-v 上下，p-h 左右， p-t 上，p-b 下，p-r 右，p-l 左 */


  .p-a-m {
    padding: 10px;
  }
  .p-v-m {
    padding: 10px 0;
  }
  .p-h-m {
    padding: 0 10px;
  }
  .p-l-m {
    padding-left: 10px;
  }
  .p-r-m {
    padding-right: 10px;
  }
  .p-t-m {
    padding-top: 10px;
  }
  .p-b-m {
    padding-bottom: 10px;
  }

.p-a-s {
    padding: 20px;
  }
  .p-v-s {
    padding: 20px 0;
  }
  .p-h-s {
    padding: 0 20px;
  }
  .p-l-s {
    padding-left: 20px;
  }
  .p-r-s {
    padding-right: 20px;
  }
  .p-t-s {
    padding-top: 20px;
  }
  .p-b-s {
    padding-bottom: 20px;
  }
.p-a-mm{padding: 20px 10px;}

  .m-a-m {
    margin: 10px;
  }
  .m-v-m {
    margin: 10px 0;
  }
  .m-h-m {
    margin: 0 10px;
  }
  .m-l-m {
    margin-left: 10px;
  }
  .m-r-m {
    margin-right: 10px;
  }
  .m-t-m {
    margin-top: 10px;
  }
  .m-b-m {
    margin-bottom: 10px;
  }

  .m-a-s {
    margin: 20px;
  }
  .m-v-s {
    margin: 20px 0;
  }
  .m-h-s {
    margin: 0 20px;
  }
  .m-l-s {
    margin-left: 20px;
  }
  .m-r-s {
    margin-right: 20px;
  }
  .m-t-s {
    margin-top: 20px;
  }
  .m-b-s {
    margin-bottom: 20px;
  }


.no-padding {
  padding: 0 !important;
}

.position-relative {
  position: relative;
}