/**
 * @version 1.0.0
 * @author LEE
 */

@charset "utf-8";

[v-cloak] {
  display: none;
}

/* 定位 */
.f-pr {
  position: relative;
}

.f-pa {
  position: absolute;
}

/* 文本对齐 */
.f-tal {
  text-align: left;
}

.f-tac {
  text-align: center;
}

.f-tar {
  text-align: right;
}

.f-ofh {
  overflow: hidden;
}

/* 文本溢出 */
.f-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 20px;
}

.f-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.f-ellipsis-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 文字渐变 */
.f-text-linear {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* 宽度和高度 */
.f-wh100 {
  width: 100%;
  height: 100%;
}

.f-wauto {
  width: auto;
}

.f-w100 {
  width: 100%;
}

.f-w80 {
  width: 90%;
}

.f-w80 {
  width: 80%;
}

.f-w75 {
  width: 75%;
}

.f-w70 {
  width: 70%;
}

.f-w60 {
  width: 60%;
}

.f-w50 {
  width: 50%;
}

.f-w49 {
  width: 49%;
}

.f-w40 {
  width: 40%;
}

.f-w45 {
  width: 45%;
}

.f-w33 {
  width: 33.3333%;
}

.f-w30 {
  width: 30%;
}

.f-w25 {
  width: 25%;
}

.f-w22 {
  width: 22%;
}

.f-w20 {
  width: 20%;
}

.f-w10 {
  width: 10%;
}

.f-hauto {
  height: auto;
}

.f-h100 {
  height: 100%;
}

.f-h90 {
  height: 90%;
}

.f-h80 {
  height: 80%;
}

.f-h75 {
  height: 75%;
}

.f-h70 {
  height: 70%;
}

.f-h60 {
  height: 60%;
}

.f-h55 {
  height: 55%;
}

.f-h50 {
  height: 50%;
}

.f-h45 {
  height: 45%;
}

.f-h40 {
  height: 40%;
}

.f-h33 {
  height: 33.3333%;
}

.f-h30 {
  height: 30%;
}

.f-h25 {
  height: 25%;
}

.f-h20 {
  height: 20%;
}

.f-mb20 {
  margin-bottom: 20px;
}

/* ====================== */
/* Flex布局工具类 */
/* 命名规则说明： */
/* 1. 基础类: .flex */
/* 2. 方向类: .flex-[方向] */
/* 3. 对齐类: .flex-[轴]-[对齐方式] */
/*    - jc: justify-content (主轴) */
/*    - ai: align-items (交叉轴) */
/*    - ac: align-content (多行) */
/*    - as: align-self (子元素) */
/* 4. 伸缩类: .flex-[属性]-[值] */
/*    - g: grow, s: shrink, b: basis */
/* ====================== */

.flex {
  display: flex;
  /* 基础flex容器 */
}

/* 主轴方向类 */
.flex-col {
  flex-direction: column;
  /* 垂直方向 */
}

.flex-row {
  flex-direction: row;
  /* 水平方向(默认) */
}

/* 多行控制类 */
.flex-wrap {
  flex-wrap: wrap;
  /* 允许换行 */
}

.flex-wrap-n {
  flex-wrap: nowrap;
  /* 不换行 */
}

.flex-wrap-wr {
  flex-wrap: wrap-reverse;
  /* 反向换行 */
}

/* 主轴对齐类 (jc = justify-content) */
.flex-jc-fs {
  justify-content: flex-start;
}

/* 起始端对齐 */
.flex-jc-fe {
  justify-content: flex-end;
}

/* 末尾端对齐 */
.flex-jc-c {
  justify-content: center;
}

/* 居中对齐 */
.flex-jc-sb {
  justify-content: space-between;
}

/* 两端对齐 */
.flex-jc-sa {
  justify-content: space-around;
}

/* 均匀分布 */
.flex-jc-se {
  justify-content: space-evenly;
}

/* 完全均匀 */

/* 交叉轴对齐类 (ai = align-items) */
.flex-ai-fs {
  align-items: flex-start;
}

/* 起始端对齐 */
.flex-ai-fe {
  align-items: flex-end;
}

/* 末尾端对齐 */
.flex-ai-c {
  align-items: center;
}

/* 居中对齐 */
.flex-ai-s {
  align-items: stretch;
}

/* 拉伸填充 */
.flex-ai-b {
  align-items: baseline;
}

/* 基线对齐 */

/* 多行对齐类 (ac = align-content) */
.flex-ac-fs {
  align-content: flex-start;
}

.flex-ac-fe {
  align-content: flex-end;
}

.flex-ac-c {
  align-content: center;
}

.flex-ac-sb {
  align-content: space-between;
}

.flex-ac-sa {
  align-content: space-around;
}

.flex-ac-s {
  align-content: stretch;
}

/* 子元素对齐类 (as = align-self) */
.flex-as-fs {
  align-self: flex-start;
}

.flex-as-fe {
  align-self: flex-end;
}

.flex-as-c {
  align-self: center;
}

.flex-as-s {
  align-self: stretch;
}

.flex-as-b {
  align-self: baseline;
}

.flex-as-a {
  align-self: auto;
}

/* 默认值 */

/* 子元素伸缩属性 */
.flex-g-0 {
  flex-grow: 0;
}

/* 不扩展 */
.flex-g-1 {
  flex-grow: 1;
}

/* 扩展剩余空间 */
.flex-s-0 {
  flex-shrink: 0;
}

/* 不收缩 */
.flex-s-1 {
  flex-shrink: 1;
}

/* 允许收缩 */
.flex-b-auto {
  flex-basis: auto;
}

/* 自动计算基准值 */
.flex-b-full {
  flex-basis: 100%;
}

/* 基准值100% */
.flex-auto {
  flex: auto;
}

/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */

/* 子元素排序 */
.flex-order-1 {
  order: 1;
}

/* 排序优先级1 */
.flex-order-2 {
  order: 2;
}

/* 排序优先级2 */
.flex-order-3 {
  order: 3;
}

/* 排序优先级3 */

/* 组合类说明： */
/* 命名格式: .flex-[方向]-[主轴对齐]-[交叉轴对齐] */
/* r = row, c = column */
/* c = center, fs = flex-start, fe = flex-end */
/* sb = space-between, sa = space-around */

/* 水平+垂直居中 */
.flex-r-c-c {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 水平居中 */
.flex-r-c {
  display: flex;
  justify-content: center;
}

/* 水平两端对齐 */
.flex-r-sb {
  display: flex;
  justify-content: space-between;
}

/* 水平均匀分布 */
.flex-r-sa {
  display: flex;
  justify-content: space-around;
}

/* 水平左对齐 */
.flex-r-fs {
  display: flex;
  justify-content: flex-start;
}

/* 水平右对齐 */
.flex-r-fe {
  display: flex;
  justify-content: flex-end;
}

/* 垂直居中 */
.flex-c-c {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 垂直两端对齐 */
.flex-c-sb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 垂直均匀分布 */
.flex-c-sa {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* 垂直左对齐 */
.flex-c-fs {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 垂直右对齐 */
.flex-c-fe {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}