/* margin */
.m0 {
  margin: 0;
}
.ml1 {
  margin-left: 1px;
}
.ml2 {
  margin-left: 2px;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}
.mr1 {
  margin-right: 1px;
}
.mr2 {
  margin-right: 2px;
}
.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.mt1 {
  margin-top: 1px;
}
.mt2 {
  margin-top: 2px;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt25 {
  margin-top: 25px;
}
.mt30 {
  margin-top: 30px;
}
.mb1 {
  margin-bottom: 1px;
}
.mb2 {
  margin-bottom: 2px;
}
.mb5 {
  margin-bottom: 5px;
}
.mb6 {
  margin-bottom: 6px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
} /* margin negative */
.ml-1 {
  margin-left: -1px;
}
.mr-1 {
  margin-right: -1px;
}
.mt-1 {
  margin-top: -1px;
}
.mb-1 {
  margin-bottom: -1px;
}
.ml-3 {
  margin-left: -3px;
}
.mr-3 {
  margin-right: -3px;
}
.mt-3 {
  margin-top: -3px;
}
.mb-3 {
  margin-bottom: -3px;
}
.ml-20 {
  margin-left: -20px;
}
.mr-20 {
  margin-right: -20px;
}
.mt-20 {
  margin-top: -20px;
}
.mb-20 {
  margin-bottom: -20px;
} /* padding */
.p0 {
  padding: 0;
}
.p1 {
  padding: 1px;
}
.pl1 {
  padding-left: 1px;
}
.pt1 {
  padding-top: 1px;
}
.pr1 {
  padding-right: 1px;
}
.pb1 {
  padding-bottom: 1px;
}
.p2 {
  padding: 2px;
}
.pl2 {
  padding-left: 2px;
}
.pt2 {
  padding-top: 2px;
}
.pr2 {
  padding-right: 2px;
}
.pb2 {
  padding-bottom: 2px;
}
.pl5 {
  padding-left: 5px;
}
.p5 {
  padding: 5px;
}
.pt5 {
  padding-top: 5px;
}
.pr5 {
  padding-right: 5px;
}
.pb5 {
  padding-bottom: 5px;
}
.p10 {
  padding: 10px;
}
.pl10 {
  padding-left: 10px;
}
.pt10 {
  padding-top: 10px;
}
.pr10 {
  padding-right: 10px;
}
.pb10 {
  padding-bottom: 10px;
}
.p15 {
  padding: 15px;
}
.pl15 {
  padding-left: 15px;
}
.pt15 {
  padding-top: 15px;
}
.pr15 {
  padding-right: 15px;
}
.pb15 {
  padding-bottom: 15px;
}
.p20 {
  padding: 20px;
}
.pl20 {
  padding-left: 20px;
}
.pt20 {
  padding-top: 20px;
}
.pr20 {
  padding-right: 20px;
}
.pb20 {
  padding-bottom: 20px;
}
.p30 {
  padding: 30px;
}
.pl30 {
  padding-left: 30px;
}
.pl60 {
  padding-left: 60px;
}
.pt30 {
  padding-top: 30px;
}
.pr30 {
  padding-right: 30px;
}
.pb30 {
  padding-bottom: 30px;
}
.p_02 {
  padding: 0 2%;
}
.p_2 {
  padding: 2%;
} /* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |->All colors are safe color*/
.bdc {
  border: 1px solid #ccc;
}
.blc {
  border-left: 1px solid #ccc;
}
.brc {
  border-right: 1px solid #ccc;
}
.btc {
  border-top: 1px solid #ccc;
}
.bbc {
  border-bottom: 1px solid #ccc;
}
.bdd {
  border: 1px solid #ddd;
}
.bld {
  border-left: 1px solid #ddd;
}
.brd {
  border-right: 1px solid #ddd;
}
.btd {
  border-top: 1px solid #ddd;
}
.bbd {
  border-bottom: 1px solid #ddd;
}
.bde {
  border: 1px solid #eee;
}
.ble {
  border-left: 1px solid #eee;
}
.bre {
  border-right: 1px solid #eee;
}
.bte {
  border-top: 1px solid #eee;
}
.bbe {
  border-bottom: 1px solid #eee;
}
.bdod {
  border-bottom: dotted 1px #ddd;
} /* background-color name rule: bg - (key word/Hex color) |->All colors are safe color */
.bgwh {
  background-color: #fff;
}
.bgfb {
  background-color: #fbfbfb;
}
.bgf5 {
  background-color: #f5f5f5;
}
.bgf0 {
  background-color: #f0f0f0;
}
.bgeb {
  background-color: #ebebeb;
}
.bge0 {
  background-color: #e0e0e0;
}
.bge04 {
  background-color: #ffe037;
} /* safe color */
.g0 {
  color: #000;
}
.g3 {
  color: #333;
}
.g6 {
  color: #666;
}
.g9 {
  color: #999;
}
.gc {
  color: #ccc;
}
.wh {
  color: white;
}
.gr {
  color: red;
}
.ge04 {
  color: #f00;
} /* display */
.dn {
  display: none;
}
.di {
  display: inline;
}
.db {
  display: block;
}
.dib {
  display: inline-block;
} /* if the element is block level(eg. div, li), using 'inline_any' instead */ /* percent width value */
.pct10 {
  width: 10%;
}
.pct15 {
  width: 15%;
}
.pct20 {
  width: 20%;
}
.pct25 {
  width: 25%;
}
.pct30 {
  width: 30%;
}
.pct33 {
  width: 33.3%;
}
.pct40 {
  width: 40%;
}
.pct50 {
  width: 50%;
}
.pct60 {
  width: 60%;
}
.pct66 {
  width: 66.6%;
}
.pct70 {
  width: 70%;
}
.pct75 {
  width: 75%;
}
.pct80 {
  width: 80%;
}
.pct90 {
  width: 90%;
}
.pct100 {
  width: 100%;
} /* font-style */
.n {
  font-weight: normal;
  font-style: normal;
}
.b {
  font-weight: bold;
}
.i {
  font-style: italic;
} /* text-align */
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.tl {
  text-align: left;
}
.tj {
  text-align: justify;
} /* vertical-align */
.vm {
  vertical-align: middle;
}
.vtb {
  vertical-align: text-bottom;
}
.vb {
  vertical-align: bottom;
}
.vt {
  vertical-align: top;
}
.vn {
  vertical-align: -2px;
} /* float */
.l {
  float: left;
}
.r {
  float: right;
} /* clear */
.cl {
  clear: both;
} /* position */
.rel {
  position: relative;
}
.abs {
  position: absolute;
} /* ------------------- multiply CSS ------------------ */ /* 块状元素水平居中 */
.auto {
  margin-left: auto;
  margin-right: auto;
} /* 清除浮 动*/
.fix {
  *zoom: 1;
}
.fix:after {
  display: table;
  content: "";
  clear: both;
} /*弹性布局*/
.dis_flex {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex; /* Safari */
  display: -moz-flex;
  display: flex;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -moz-justify-content: space-around;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}