/* 字体·颜色 */
.color-primary{
  color: #ff6700;
}

.color-primary2{
  color: #ff6710;
}

.color-ff{
  color: #fff;
}

.color-f0{
  color: #f0f0f0;
}

.color-f2{
  color: #f2f2f2;
}

.color-f8{
  color: #f8f8f8;
}

.color-ee{
  color: #eee;
}

.color-88{
  color: #888;
}

.color-5b{
  color: #5b5f85;
}

.color-c0{
  color: #c0c1c7;
}

.color-99{
  color: #999;
}

.color-b8{
  color: #b8b9c0;
}

/* 背景·颜色 */

.bgcolor-primary{
  background-color: #ff6710;
}

.bgcolor-12{
  background-color: #121324;
}



/* 字体·大小 */
.size-14{
  font-size: 0.7rem;
}

.size-16{
  font-size: 0.8rem;
}

.size-18{
  font-size: 0.9rem;
}

.size-20{
  font-size: 1rem;
}

.size-26{
  font-size: 1.3rem;
}

.size-28{
  font-size: 1.4rem;
}

.size-36{
  font-size: 1.8rem;
}

.size-48{
  font-size: 2.4rem;
}

.size-56{
  font-size: 2.8rem;
}

/* 字体·行高 */
.line-18{
  line-height: 0.9rem;
}

.line-20{
  line-height: 1rem;
}

.line-22{
  line-height: 1.1rem;
}

.line-24{
  line-height: 1.2rem;
}

.line-30{
  line-height: 1.5rem;
}

.line-32{
  line-height: 1.6rem;
}

.line-34{
  line-height: 1.7rem;
}

.line-36{
  line-height: 1.8rem;
}

.line-48{
  line-height: 2.4rem;
}

.line-56{
  line-height: 2.8rem;
}

/* 字体·间距 */
.letter-1{
  letter-spacing: 1px;
}

/* 下边距 */
.mb-4{
  margin-bottom: .2rem;
}

.mb-8{
  margin-bottom: .4rem;
}

.mb-12{
  margin-bottom: .6rem;
}

.mb-15{
  margin-bottom: .75rem;
}

.mb-16{
  margin-bottom: .8rem;
}

.mb-18{
  margin-bottom: .9rem;
}

.mb-20{
  margin-bottom: 1rem;
}

.mb-24{
  margin-bottom: 1.2rem;
}

.mb-32{
  margin-bottom: 1.6rem;
}

.mb-40{
  margin-bottom: 2rem;
}

.mb-56{
  margin-bottom: 2.8rem;
}

.mb-80{
  margin-bottom: 4rem;
}

.mb-86{
  margin-bottom: 4.3rem;
}

.mb-88{
  margin-bottom: 4.4rem;
}

.mb-100{
  margin-bottom: 5rem;
}

.mb-110{
  margin-bottom: 5.5rem;
}

.mb-140{
  margin-bottom: 7rem;
}

.mb-160{
  margin-bottom: 8rem;
}
/* 其他 */
.flex-b{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

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

.center-container{
  width: 59rem;
  margin: 0 auto;
  position: relative;
  height: 100%;
}

.a-flex{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.align-l{
  text-align: left;
}

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

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

.divide-line-l{
  position: relative;
  height: 0.3rem;
}

.divide-line-l::after{
  content: "";
  display: block;
  width: 2rem;
  height: .3rem;
  background-color: #ff6710;
  position: absolute;
  top: 0;
  left: 0;
}

.divide-line-r{
  position: relative;
  height: 0.3rem;
}

.divide-line-r::after{
  content: "";
  display: block;
  width: 2rem;
  height: .3rem;
  background-color: #ff6710;
  position: absolute;
  top: 0;
  right: 0;
}

.dot-line{
  height: 1.6rem;
  width: 2rem;
  position: relative;
  margin: 0 .6rem;
}

.dot-line::after{
  content: "";
  display: block;
  width: 100%;
  border-top: .05rem dotted #5b5f85;
  position: absolute;
  top: calc(50% - 0.05rem);
  left: 0;
}

.inline-block{
  display: inline-block;
}

.image img{
  display: block;
  width: 100%;
  height: 100%;
}

.nowrap{
  white-space: nowrap;
}

.lighter{
  font-weight: lighter;
}

.start{
  font-size: inherit;
  line-height: inherit;
  position: relative;
}
.start::after{
  content:"";
  display: block;
  height: 1rem;
  width: 5.8rem;
  position: absolute;
  top: calc(50% - .5rem);
  left: 0;
  background-image: ;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-phont{
  font-size: inherit;
  line-height: inherit;
  position: relative;
  margin-right: 1rem;
}
.icon-phont::after{
  content:"";
  display: block;
  height: 0.7rem;
  width: 0.7rem;
  position: absolute;
  top: calc(50% - .3rem);
  left: 0;
  background-image: ;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}