/*
  * # 命名规则
  * 1. 只取首字母 `.db{ display:block; }`;
  * 2. 有数字直接连接 `.mb10{ margin-bottom:10px; }`;
  * 3. 百分号用 `\%` 表示 `.w100\%{ width:100%; }`;
  * 4. 小数点用 `\.` 表示 `.lh1\.2{ line-height:1.2}`;
  * 5. 有想要自定义的样式，用 `\:`分割  `.c\:fff{ color:#fff; }`
  * 6. hover 样式，用 `\:`分割  `.db\:h:hover{ display:block; }`
  */
.aic {
  align-items: center;
}
.aife {
  align-items: flex-end;
}
.aifs {
  align-items: flex-start;
}
.b0 {
  bottom: 0;
}
.bct {
  background-color: transparent;
}
.bn {
  border: none;
}
.br0 {
  border-radius: 0;
}
.br100\% {
  border-radius: 100%;
}
.bsbb {
  box-sizing: border-box;
}
.bc\:fff {
  background-color: #fff;
}
.c\:000 {
  color: #000;
}
.c\:fff {
  color: #fff;
}
.cb {
  clear: both;
}
.cp {
  cursor: pointer;
}
.db {
  display: block;
}
.df {
  display: flex;
}
.di {
  display: inline;
}
.dib {
  display: inline-block;
}
.dif {
  display: inline-flex;
}
.dn {
  display: none;
}
.dt {
  display: table;
}
.dtc {
  display: table-cell;
}
.f1 {
  flex: 1;
  min-width: 0;
}
.fa {
  flex: auto;
}
.fdc {
  flex-direction: column;
}
.fdr {
  flex-direction: row;
}
.fi {
  font: inherit;
}
.fl {
  float: left;
  *display: inline;
}
.fr {
  float: right;
}
.fs0 {
  font-size: 0;
}
.fs1 {
  flex-shrink: 1;
}
.fsi {
  font-style: italic;
}
.fsn {
  font-style: normal;
}
.fvsc {
  font-variant: small-caps;
  text-transform: lowercase;
}
.fw400 {
  font-weight: 400;
}
.fw700 {
  font-weight: 700;
}
.fwn {
  font-weight: normal;
}
/* 重名所以忽略掉不常用的 */
//.fwn { flex-wrap: nowrap; }
.fww {
  flex-wrap: wrap;
}
.h100\% {
  height: 100%;
}
.jcc {
  justify-content: center;
}
.jcfe {
  justify-content: flex-end;
}
.jcsa {
  justify-content: space-around;
}
.jcsb {
  justify-content: space-between;
}
.l0 {
  left: 0;
}
.l100\% {
  left: 100%;
}
.l50\% {
  left: 50%;
}
.lh1 {
  line-height: 1;
}
.lh1\.2 {
  line-height: 1.2;
}
.lh1\.5 {
  line-height: 1.5;
}
.lh1\.8 {
  line-height: 1.8;
}
.lsn {
  list-style: none;
}
.m0 {
  margin: 0;
}
.mla {
  margin-left: auto;
}
.mra {
  margin-right: auto;
}
.mta {
  margin-top: auto;
}
.mba {
  margin-bottom: auto;
}
.o0 {
  opacity: 0;
}
.oa {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.oh {
  overflow: hidden;
}
.p0 {
  padding: 0;
}
.pa {
  position: absolute;
}
.pen {
  pointer-events: none;
}
.pf {
  position: fixed;
}
.pr {
  position: relative;
}
.pt100\% {
  padding-top: 100%;
}
.r0 {
  right: 0;
}
.r100\% {
  right: 100%;
}
.t0 {
  top: 0;
}
.t100\% {
  top: 100%;
}
.t50\% {
  top: 50%;
}
.tac {
  text-align: center;
}
.taj {
  text-align: justify;
}
.tal {
  text-align: left;
}
.tar {
  text-align: right;
}
.tdn {
  text-decoration: none;
}
.tlf {
  table-layout: fixed;
}
.ttc {
  text-transform: capitalize;
}
.ttl {
  text-transform: lowercase;
}
.ttn {
  text-transform: none;
}
.ttu {
  text-transform: uppercase;
}
.usn {
  user-select: none;
}
.vam {
  vertical-align: middle;
}
.vat {
  vertical-align: top;
}
.vh {
  visibility: hidden;
}
.w100\% {
  width: 100%;
}
.wan {
  -webkit-appearance: none;
}
.wsn {
  white-space: nowrap;
}
.wwbw {
  word-wrap: break-word;
  word-break: break-all;
}
.zi1 {
  z-index: 1;
}