PC端常用公共样式

因为使用的单位均是px，所以不适用于H5（只使用于PC）

@charset "UTF-8";

/* 格式化样式 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
body,
div,
form,
input,
button,
th,
td,
ol,
ul,
dl,
li,
dd,
dt {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
img {
  vertical-align: middle;
  border: 0;
}
a {
  text-decoration: none;
  color: #000;
}
a:hover {
  color: #31ccff;
}
input {
  outline: 0;
}
/* 超出隐藏 */
.dn {
  display: none;
}
.otw {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}
/* 文字排版 */
.f12 {
  font-size: 12px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.f18 {
  font-size: 18px;
}
.f20 {
  font-size: 20px;
}
.ti2 {
  text-indent: 2em;
}
/* 版心 */
.contaiter {
  width: 1200px;
  margin: 0 auto;
}
/* 盒子模式 */
.bs {
  box-sizing: border-box;
}
/* 宽高  */
.w100 {
  width: 100%;
}
.h100 {
  height: 100%;
}
.p20 {
  padding: 20px;
}
.p30 {
  padding: 30px;
}
.p40 {
  padding: 40px;
}

.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}

.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}

.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}

.mtb20 {
  margin: 20px 0;
}
.mtb40 {
  margin: 40px 0;
}

.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb40 {
  margin-bottom: 40px;
}

/* 颜色 */
.bg-fff {
  background: #fff;
}
.bg-f6 {
  background: #f6f6f6;
}
.col-fff {
  color: #fff;
}
.col-2b {
  color: #2d2d2d;
}

/* 定位 */
.pr {
  position: relative;
}
.pf {
  position: fixed;
}
.pa {
  position: absolute;
}
.pac {
  position: absolute;
  top: 50%;
  bottom: 50%;
  transform: translate(50% 50%);
}
.tac {
  text-align: center;
}
.tal {
  text-align: left;
}
.tar {
  text-align: right;
}
/* 弹性布局 */
.df {
  display: flex;
}
.jcc {
  justify-content: center;
}
.aic {
  align-items: center;
}
.jcsb {
  justify-content: space-between;
}
.jcsa {
  justify-content: space-around;
}
.jcfe {
  justify-content: flex-end;
}
.fww {
  flex-wrap: wrap;
}
.jcl {
  justify-content: left;
}
.jcr {
  justify-content: right;
}
.fdc {
  flex-direction: column;
}
.aifs {
  align-items: flex-start;
}
.aife {
  align-items: flex-end;
}
.dis_sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dis_cc {
  display: flex;
  justify-content: center;
  align-items: center;
}