/*
  布局辅助类
 */

// @import './_vars.scss';
@import './function/px_function.scss';

/* 宽度高度动画过渡 */
.M-all-transition {
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
}
/* 背景图片 */
.M-image-background {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.M-display-none {
  display: none!important;
}
.M-display-block {
  display: block;
}
.M-display-inline-block {
  display: inline-block;
}

/* 常用流布局 */
.M-box {
  display: -webkit-box;
}

/*  #ifndef rn */
.M-flexbox-vertical {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-flow: column;
  flex-flow: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.M-flexbox-horizontal {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-flow: row;
  flex-flow: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.M-flexbox-vertical-important {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-flex-flow: column !important;
  flex-flow: column !important;
  height: 100%;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
}
.M-flexbox-horizontal-important {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-flex-flow: row !important;
  flex-flow: row !important;
  width: 100%;
  -webkit-flex-direction: row !important;
  flex-direction: row !important;
  box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
}
.M-flex-item {
  /*! autoprefixer: off */
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.M-flex-flow-row-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-flow: row;
  flex-flow: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
}
.M-flex-flow-row-nowrap {
  flex-direction: row;
  flex-wrap: nowrap;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: nowrap;
}
.M-flex-row-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-flow: row;
  flex-flow: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
}
.M-flex-row-nowrap {
  flex-direction: row;
  flex-wrap: nowrap;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: nowrap;
}
.M-flexbox-between {
  justify-content: space-between;
}
/*  #endif  */

/*  #ifdef rn */
.M-flexbox-vertical {
  flex-direction: column;
}
.M-flexbox-horizontal {
  flex-direction: row;
}
.M-flexbox-between {
  justify-content: space-between;
}
.M-flebox-around {
  justify-content: space-around;
}
.M-flex-flow-row-wrap {
  flex-direction: row;
  flex-wrap: wrap;
}
.M-flex-row-wrap {
  flex-direction: row;
  flex-wrap: wrap;
}
.M-flex-flow-row-nowrap {
  flex-direction: row;
  flex-wrap: nowrap;
}
.M-flex-row-nowrap {
  flex-direction: row;
  flex-wrap: nowrap;
}
.M-flex-item {
  flex: 1;
}
.M-horizontal-left {
  flex-direction: row;
  justify-content: flex-start;
}
.M-horizontal-right {
  flex-direction: row;
  justify-content: flex-end;
}
.M-horizontal-center {
  flex-direction: row;
  justify-content: center;
}
.M-vertical-top {
  flex-direction: row;
  align-items: flex-start;
}
.M-vertical-bottom {
  flex-direction: row;
  align-items: flex-end;
}
.M-vertical-middle {
  flex-direction: row;
  align-items: center;
}
.M-center-all {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
/*  #endif  */

/* 文本对齐 */
.M-text-align-center {
  text-align: center;
}
.M-text-align-left {
  text-align: left;
}
.M-text-align-right {
  text-align: right;
}

/*块元素垂直对齐*/
.M-vertical-align-middle {
  vertical-align: middle;
}
.M-vertical-align-top {
  vertical-align: top;
}
.M-vertical-align-bottom {
  vertical-align: bottom;
}

/* 行块元素水平对齐 */
.M-horizontal-center {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  box-orient: horizontal;
  box-pack: center;
}
.M-horizontal-left {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: start;
  box-orient: horizontal;
  box-pack: start;
}
.M-horizontal-right {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: end;
  box-orient: horizontal;
  box-pack: end;
}
/*定位元素水平居中*/
.M-position-horizontal-center {
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}

/* 行块元素垂直对齐 */
.M-vertical-middle {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  box-orient: horizontal;
  box-align: center;
}
.M-vertical-top {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: start;
  box-orient: horizontal;
  box-align: start;
}
.M-vertical-bottom {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: end;
  box-orient: horizontal;
  box-align: end;
}
/*定位元素垂直居中*/
.M-position-vertical-middle {
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}

/* 行块元素水平垂直对齐 */
.M-center-all {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}
/*定位元素水平垂直居中*/
.M-position-center-all {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/*让元素水平排布*/
.M-block-horizontal {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
}
.M-block-item {
  -webkit-box-align: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/*常用边线*/
.M-outline-none {
  outline-width: 0;
}
.M-border-none {
  border-width: 0;
  outline-width: 0;
}

/*
  简写边框
*/
.M-bd-v-b,
.M-bd-t,
.M-bd-b,
.M-bd-h-b,
.M-bd-l,
.M-bd-r,
.M-bd-v-m-10,
.M-bd-t-m-l-10:after,
.M-bd-t-m-r-10 .M-bd-b-m-l-10,
.M-bd-b-m-r-10,
.M-bd-h-b-m-10,
.M-bd-l-m-t-10,
.M-bd-l-m-b-10,
.M-bd-r-m-t-10,
.M-bd-r-m-b-10,
.M-bd-t-m-b-10,
.M-bd-b-m-b-10,
.M-bd-l-n-b-10,
.M-bd-r-m-b-10,
.M-bd-all {
  position: relative;
  overflow: hidden;
}

.M-bd-v:after,
.M-bd-t:after,
.M-bd-b:after,
.M-bd-h:after,
.M-bd-l:after,
.M-bd-r:after,
.M-bd-b-m-10:after,
.M-bd-t-m-l-10:after,
.M-bd-t-m-r-10:after,
.M-bd-b-m-l-10:after,
.M-bd-b-m-r-10:after,
.M-bd-h-m-10:after,
.M-bd-l-m-t-10:after,
.M-bd-l-m-n-10:after,
.M-bd-r-m-t-10:after,
.M-bd-r-m-b-10:after,
.M-bd-t-m-b-10:after,
.M-bd-b-m-b-10:after,
.M-bd-l-m-b-10:after,
.M-bd-r-m-b-10:after,
.M-bd-all:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: 0 0;
  transform: scale(1);
  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(1);
  pointer-events: none;
}
/*垂直方向*/
.M-bd-v-white {
  border-top: px(1) solid white;
  border-bottom: px(1) solid white;
}
.M-bd-v:after,
.M-bd-b-m-10:after {
  border-top: px(1) solid #e6e6e6;
  border-bottom: px(1) solid #e6e6e6;
}
.M-bd-t-white {
  border-top: px(1) solid white;
}
.M-bd-t:after,
.M-bd-t-m-l-10:after,
.M-bd-t-m-r-10:after,
.M-bd-t-m-b-10:after {
  border-top: px(1) solid #e6e6e6;
}
.M-bd-b-white {
  border-bottom: px(1) solid white;
}
.M-bd-b:after,
.M-bd-b-m-l-10:after,
.M-bd-b-m-r-10:after,
.M-bd-b-m-b-10:after {
  border-bottom: px(1) solid #e6e6e6;
}
.M-bd-b-m-10:after {
  margin-left: px(20);
  margin-right: px(20);
}
.M-bd-t-m-b-10:after {
  margin-left: px(20);
  margin-right: px(20);
}
.M-bd-t-m-l-10:after {
  margin-left: px(20);
}
.M-bd-t-m-r-10:after {
  margin-right: px(20);
}
.M-bd-b-m-b-10:after {
  margin-left: px(20);
  margin-right: px(20);
}
.M-bd-b-m-l-10:after {
  margin-left: px(20);
}
.M-bd-b-m-r-10:after {
  margin-right: px(20);
}
/*水平方向*/
.M-bd-h-white {
  border-left: px(1) solid white;
  border-right: px(1) solid white;
}
.M-bd-h:after,
.M-bd-h-m-10:after {
  border-left: px(1) solid #e6e6e6;
  border-right: px(1) solid #e6e6e6;
}
.M-bd-l-white {
  border-left: px(1) solid white;
}
.M-bd-l:after,
.M-bd-l-m-t-10:after,
.M-bd-l-m-n-10:after,
.M-bd-l-m-b-10:after {
  border-left: 1px solid #e6e6e6;
}
.M-bd-r-white {
  border-right: px(1) solid white;
}
.M-bd-r:after,
.M-bd-r-m-t-10:after,
.M-bd-r-m-b-10:after,
.M-bd-r-m-b-10:after {
  border-right: 1px solid #e6e6e6;
}
.M-bd-h-m-10:after {
  margin-top: px(20);
  margin-bottom: px(20);
}
.M-bd-l-m-b-10:after {
  margin-top: px(20);
  margin-bottom: px(20);
}
.M-bd-l-m-t-10:after {
  margin-top: px(20);
}
.M-bd-l-m-n-10:after {
  margin-bottom: px(20);
}
.M-bd-r-m-b-10:after {
  margin-top: px(20);
  margin-bottom: px(20);
}
.M-bd-r-m-t-10:after {
  margin-top: px(20);
}
.M-bd-r-m-b-10:after {
  margin-bottom: px(20);
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .M-bd-v:after,
  .M-bd-t:after,
  .M-bd-b:after,
  .M-bd-h:after,
  .M-bd-l:after,
  .M-bd-r:after,
  .M-bd-b-m-10:after,
  .M-bd-t-m-l-10:after,
  .M-bd-t-m-r-10:after,
  .M-bd-t-m-r-10:after,
  .M-bd-b-m-l-10:after,
  .M-bd-b-m-r-10:after,
  .M-bd-h-m-10:after,
  .M-bd-l-m-t-10:after,
  .M-bd-l-m-n-10:after,
  .M-bd-r-m-t-10:after,
  .M-bd-r-m-b-10:after,
  .M-bd-t-m-b-10:after,
  .M-bd-b-m-b-10:after,
  .M-bd-l-m-b-10:after,
  .M-bd-r-m-b-10:after,
  .M-bd-all:after {
    right: -100%;
    bottom: -99%;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  .M-bd-t-m-b-10:after {
    margin-left: px(20);
    margin-right: px(60);
  }
  .M-bd-b-m-b-10:after {
    margin-left: px(20);
    margin-right: px(60);
  }
  .M-bd-l-m-b-10:after {
    margin-top: px(20);
    margin-bottom: px(60);
  }
  .M-bd-r-m-b-10:after {
    margin-top: px(20);
    margin-bottom: px(60);
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .M-bd-v:after,
  .M-bd-t:after,
  .M-bd-b:after,
  .M-bd-h:after,
  .M-bd-l:after,
  .M-bd-r:after,
  .M-bd-b-m-10:after,
  .M-bd-t-m-l-10:after,
  .M-bd-t-m-r-10:after,
  .M-bd-t-m-r-10:after,
  .M-bd-b-m-l-10:after,
  .M-bd-b-m-r-10:after,
  .M-bd-h-m-10:after,
  .M-bd-l-m-t-10:after,
  .M-bd-l-m-n-10:after,
  .M-bd-r-m-t-10:after,
  .M-bd-r-m-b-10:after,
  .M-bd-t-m-b-10:after,
  .M-bd-b-m-b-10:after,
  .M-bd-l-m-b-10:after,
  .M-bd-r-m-b-10:after,
  .M-bd-all:after {
    right: -100%;
    bottom: -100%;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
}

/*边线样式*/
.M-border-style-solid {
  border-style: solid;
}
.M-border-style-dotted {
  border-style: dotted;
}
.M-border-style-double {
  border-style: double;
}
.M-border-style-dashed {
  border-style: dashed;
}
.M-border-style-hidden {
  border-style: hidden;
}
.M-border-style-solid-after:after {
  border-style: solid;
}
.M-border-style-dotted-after:after {
  border-style: dotted;
}
.M-border-style-double-after:after {
  border-style: double;
}
.M-border-style-dashed-after:after {
  border-style: dashed;
}
.M-border-style-hidden-after:after {
  border-style: hidden;
}
.M-border-top-style-solid {
  border-top-style: solid;
}
.M-border-top-style-dotted {
  border-top-style: dotted;
}
.M-border-top-style-double {
  border-top-style: double;
}
.M-border-top-style-dashed {
  border-top-style: dashed;
}
.M-border-top-style-hidden {
  border-top-style: hidden;
}
.M-border-top-style-solid-after:after {
  border-top-style: solid;
}
.M-border-top-style-dotted-after:after {
  border-top-style: dotted;
}
.M-border-top-style-double-after:after {
  border-top-style: double;
}
.M-border-top-style-dashed-after:after {
  border-top-style: dashed;
}
.M-border-top-style-hidden-after:after {
  border-top-style: hidden;
}
.M-border-bottom-style-solid {
  border-bottom-style: solid;
}
.M-border-bottom-style-dotted {
  border-bottom-style: dotted;
}
.M-border-bottom-style-double {
  border-bottom-style: double;
}
.M-border-bottom-style-dashed {
  border-bottom-style: dashed;
}
.M-border-bottom-style-hidden {
  border-bottom-style: hidden;
}
.M-border-bottom-style-solid-after:after {
  border-bottom-style: solid;
}
.M-border-bottom-style-dotted-after:after {
  border-bottom-style: dotted;
}
.M-border-bottom-style-double-after:after {
  border-bottom-style: double;
}
.M-border-bottom-style-dashed-after:after {
  border-bottom-style: dashed;
}
.M-border-bottom-style-hidden-after:after {
  border-bottom-style: hidden;
}
.M-border-left-style-solid {
  border-left-style: solid;
}
.M-border-left-style-dotted {
  border-left-style: dotted;
}
.M-border-left-style-double {
  border-left-style: double;
}
.M-border-left-style-dashed {
  border-left-style: dashed;
}
.M-border-left-style-hidden {
  border-left-style: hidden;
}
.M-border-left-style-solid-after:after {
  border-left-style: solid;
}
.M-border-left-style-dotted-after:after {
  border-left-style: dotted;
}
.M-border-left-style-double-after:after {
  border-left-style: double;
}
.M-border-left-style-dashed-after:after {
  border-left-style: dashed;
}
.M-border-left-style-hidden-after:after {
  border-left-style: hidden;
}
.M-border-right-style-solid {
  border-right-style: solid;
}
.M-border-right-style-dotted {
  border-right-style: dotted;
}
.M-border-right-style-double {
  border-right-style: double;
}
.M-border-right-style-dashed {
  border-right-style: dashed;
}
.M-border-right-style-hidden {
  border-right-style: hidden;
}
.M-border-right-style-solid-after:after {
  border-right-style: solid;
}
.M-border-right-style-dotted-after:after {
  border-right-style: dotted;
}
.M-border-right-style-double-after:after {
  border-right-style: double;
}
.M-border-right-style-dashed-after:after {
  border-right-style: dashed;
}
.M-border-right-style-hidden-after:after {
  border-right-style: hidden;
}

/* 常用圆角 */
.M-r-10 {
  border-radius: px(20);
}
.M-r-15 {
  border-radius: px(30);
}

/* 常用高度 */
.M-height-p-100 {
  height: 100%;
}
.M-height-fill {
  height: -webkit-fill-available;
}
.M-height-30 {
  height: px(60);
}
.M-height-35 {
  height: px(70);
}
.M-height-40 {
  height: px(80);
}
.M-height-44 {
  height: px(88);
}
.M-height-50 {
  height: px(100);
}
.M-height-55 {
  height: px(110);
}
.M-height-60 {
  height: px(120);
}
.M-height-70 {
  height: px(140);
}
.M-height-80 {
  height: px(160);
}
.M-w-0 {
  width: 0;
}
/* 常用宽度 */
.M-width-p-100 {
  width: 100%;
}

/* 常用边距 */

.M-p-h-10 {
  padding: 0px px(20);
}
.M-p-v-10 {
  padding: px(20) 0px;
}
.M-p-t-10 {
  padding-top: px(20);
}
.M-p-b-10 {
  padding-bottom: px(20);
}
.M-p-l-10 {
  padding-left: px(20);
}
.M-p-r-10 {
  padding-right: px(20);
}

.M-f-s-0 {
  font-size: 0;
}
.M-f-s-8 {
  font-size: px(16);
}
.M-f-s-10 {
  font-size: px(20);
}
.M-f-s-11 {
  font-size: px(22);
}
.M-f-s-12 {
  font-size: px(24);
}
.M-f-s-13 {
  font-size: px(26);
}
.M-f-s-14 {
  font-size: px(28);
}
.M-f-s-15 {
  font-size: px(30);
}
.M-f-s-16 {
  font-size: px(32);
}
.M-f-s-18 {
  font-size: px(36);
}
.M-f-s-20 {
  font-size: px(40);
}
.M-f-s-22 {
  font-size: px(44);
}
.M-f-s-24 {
  font-size: px(48);
}
.M-f-s-26 {
  font-size: px(52);
}
.M-f-s-28 {
  font-size: px(56);
}
.M-f-s-30 {
  font-size: px(60);
}

.M-f-w-b {
  font-weight: bold;
}

/* 扁平化主题字体颜色 */
.M-f-c-0 {
  color: #000;
}
.M-f-c-w {
  color: #ffffff;
}
.M-f-c-1 {
  color: #4883ff;
}
.M-f-c-2 {
  color: #ff7f8a;
}
.M-f-c-3 {
  color: #3c4146;
}
.M-f-c-4 {
  color: #ffa977;
}
.M-f-c-5 {
  color: #4db7ad;
}
.M-f-c-6 {
  color: #337ab7;
}
.M-f-c-7 {
  color: #d9534f;
}
.M-f-c-8 {
  color: #f0ad4e;
}
.M-f-c-9 {
  color: #5cb85c;
}
.M-f-c-333 {
  color: #333;
}
.M-f-c-666 {
  color: #666;
}
.M-f-c-999 {
  color: #999;
}
.M-f-c-fff {
  color: #fff;
}
// .M-f-c-red { color: red; }
.M-f-c-green {
  color: green;
}
.M-f-c-yellow {
  color: #ffa940;
}
.M-f-c-red {
  color: #fa541c;
}
.M-f-c-h {
  color: #747474;
}
/* 扁平化主题字背景颜色 */
.M-b-c-w {
  background-color: white;
}
.M-b-c-e {
  background-color: #eee;
}
.M-b-c-c {
  background-color: #ccc;
}
.M-b-c-1 {
  background-color: #4883ff;
}
.M-b-c-2 {
  background-color: #ff7f8a;
}
.M-b-c-3 {
  background-color: #3c4146;
}
.M-b-c-4 {
  background-color: #ffa977;
}
.M-b-c-5 {
  background-color: #4db7ad;
}
.M-b-c-6 {
  background-color: #337ab7;
}
.M-b-c-7 {
  background-color: #d9534f;
}
.M-b-c-8 {
  background-color: #f0ad4e;
}
.M-b-c-9 {
  background-color: #5cb85c;
}
.M-b-c-b {
  background-color: #1a1a1a;
}

/*常用边距*/
.M-p-0 {
  padding: 0;
}
.M-p-2 {
  padding: px(4);
}
.M-p-3 {
  padding: px(6);
}
.M-p-5 {
  padding: px(10);
}
.M-p-8 {
  padding: px(16);
}
.M-p-10 {
  padding: px(20);
}
.M-p-12 {
  padding: px(24);
}
.M-p-15 {
  padding: px(30);
}
.M-p-20 {
  padding: px(40);
}
.M-p-25 {
  padding: px(50);
}
.M-m-0 {
  margin: 0;
}
.M-m-h-auto {
  margin-left: auto;
  margin-right: auto;
}
.M-m-2 {
  margin: px(4);
}
.M-m-3 {
  margin: px(6);
}
.M-m-5 {
  margin: px(10);
}
.M-m-8 {
  margin: px(16);
}
.M-m-10 {
  margin: px(20);
}
.M-m-12 {
  margin: px(24);
}
.M-m-15 {
  margin: px(30);
}
.M-m-20 {
  margin: px(40);
}
.M-m-25 {
  margin: px(50);
}

/*垂直方向*/
.M-p-v-b-0 {
  padding-top: 0;
  padding-bottom: 0;
}
.M-p-t-0 {
  padding-top: 0;
}
.M-p-b-0 {
  padding-bottom: 0;
}
.M-p-v-b-2 {
  padding-top: px(4);
  padding-bottom: px(4);
}
.M-p-t-2 {
  padding-top: px(4);
}
.M-p-b-2 {
  padding-bottom: px(4);
}
.M-p-v-b-3 {
  padding-top: px(6);
  padding-bottom: px(6);
}
.M-p-t-3 {
  padding-top: px(6);
}
.M-p-b-3 {
  padding-bottom: px(6);
}
.M-p-v-b-5 {
  padding-top: px(10);
  padding-bottom: px(10);
}
.M-p-t-5 {
  padding-top: px(10);
}
.M-p-b-5 {
  padding-bottom: px(10);
}
.M-p-v-b-8 {
  padding-top: px(16);
  padding-bottom: px(16);
}
.M-p-t-8 {
  padding-top: px(16);
}
.M-p-b-8 {
  padding-bottom: px(16);
}
.M-p-v-b-10 {
  padding-top: px(20);
  padding-bottom: px(20);
}
.M-p-t-10 {
  padding-top: px(20);
}
.M-p-b-10 {
  padding-bottom: px(20);
}
.M-p-v-b-12 {
  padding-top: px(24);
  padding-bottom: px(24);
}
.M-p-t-12 {
  padding-top: px(24);
}
.M-p-b-12 {
  padding-bottom: px(24);
}
.M-p-v-b-15 {
  padding-top: px(30);
  padding-bottom: px(30);
}
.M-p-t-15 {
  padding-top: px(30);
}
.M-p-b-15 {
  padding-bottom: px(30);
}
.M-p-v-b-20 {
  padding-top: px(40);
  padding-bottom: px(40);
}
.M-p-t-20 {
  padding-top: px(40);
}
.M-p-b-20 {
  padding-bottom: px(40);
}
.M-p-v-b-25 {
  padding-top: px(50);
  padding-bottom: px(50);
}
.M-p-t-25 {
  padding-top: px(50);
}
.M-p-b-25 {
  padding-bottom: px(50);
}
.M-m-v-b-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.M-m-t-0 {
  margin-top: 0;
}
.M-m-b-0 {
  margin-bottom: 0;
}
.M-m-v-b-2 {
  margin-top: px(4);
  margin-bottom: px(4);
}
.M-m-t-2 {
  margin-top: px(4);
}
.M-m-b-2 {
  margin-bottom: px(4);
}
.M-m-v-b-3 {
  margin-top: px(6);
  margin-bottom: px(6);
}
.M-m-t-3 {
  margin-top: px(6);
}
.M-m-b-3 {
  margin-bottom: px(6);
}
.M-m-v-b-5 {
  margin-top: px(10);
  margin-bottom: px(10);
}
.M-m-t-5 {
  margin-top: px(10);
}
.M-m-b-5 {
  margin-bottom: px(10);
}
.M-m-v-b-8 {
  margin-top: px(16);
  margin-bottom: px(16);
}
.M-m-t-8 {
  margin-top: px(16);
}
.M-m-b-8 {
  margin-bottom: px(16);
}
.M-m-v-b-10 {
  margin-top: px(20);
  margin-bottom: px(20);
}
.M-m-t-10 {
  margin-top: px(20);
}
.M-m-b-10 {
  margin-bottom: px(20);
}
.M-m-v-b-12 {
  margin-top: px(24);
  margin-bottom: px(24);
}
.M-m-t-12 {
  margin-top: px(24);
}
.M-m-b-12 {
  margin-bottom: px(24);
}
.M-m-v-b-15 {
  margin-top: px(30);
  margin-bottom: px(30);
}
.M-m-t-15 {
  margin-top: px(30);
}
.M-m-b-15 {
  margin-bottom: px(30);
}
.M-m-v-b-20 {
  margin-top: px(40);
  margin-bottom: px(40);
}
.M-m-t-20 {
  margin-top: px(40);
}
.M-m-b-20 {
  margin-bottom: px(40);
}
.M-m-v-b-25 {
  margin-top: px(50);
  margin-bottom: px(50);
}
.M-m-t-25 {
  margin-top: px(50);
}
.M-m-b-25 {
  margin-bottom: px(50);
}
/*水平方向*/
.M-p-h-b-0 {
  padding-left: 0;
  padding-right: 0;
}
.M-p-l-0 {
  padding-left: 0;
}
.M-p-r-0 {
  padding-right: 0;
}
.M-p-h-b-2 {
  padding-left: px(4);
  padding-right: px(4);
}
.M-p-l-2 {
  padding-left: px(4);
}
.M-p-r-2 {
  padding-right: px(4);
}
.M-p-h-b-3 {
  padding-left: px(6);
  padding-right: px(6);
}
.M-p-l-3 {
  padding-left: px(6);
}
.M-p-r-3 {
  padding-right: px(6);
}
.M-p-h-b-5 {
  padding-left: px(10);
  padding-right: px(10);
}
.M-p-l-5 {
  padding-left: px(10);
}
.M-p-r-5 {
  padding-right: px(10);
}
.M-p-h-b-8 {
  padding-left: px(16);
  padding-right: px(16);
}
.M-p-l-8 {
  padding-left: px(16);
}
.M-p-r-8 {
  padding-right: px(16);
}
.M-p-h-b-10 {
  padding-left: px(20);
  padding-right: px(20);
}
.M-p-l-10 {
  padding-left: px(20);
}
.M-p-r-10 {
  padding-right: px(20);
}
.M-p-h-b-12 {
  padding-left: px(24);
  padding-right: px(24);
}
.M-p-l-12 {
  padding-left: px(24);
}
.M-p-r-12 {
  padding-right: px(24);
}
.M-p-h-b-15 {
  padding-left: px(30);
  padding-right: px(30);
}
.M-p-l-15 {
  padding-left: px(30);
}
.M-p-r-15 {
  padding-right: px(30);
}
.M-p-h-b-20 {
  padding-left: px(40);
  padding-right: px(40);
}
.M-p-l-20 {
  padding-left: px(40);
}
.M-p-r-20 {
  padding-right: px(40);
}
.M-p-h-b-25 {
  padding-left: px(50);
  padding-right: px(50);
}
.M-p-l-25 {
  padding-left: px(50);
}
.M-p-r-25 {
  padding-right: px(50);
}
.M-m-h-b-0 {
  margin-left: 0;
  margin-right: 0;
}
.M-m-l-0 {
  margin-left: 0;
}
.M-m-r-0 {
  margin-right: 0;
}
.M-m-h-b-3 {
  margin-left: px(6);
  margin-right: px(6);
}
.M-m-l-3 {
  margin-left: px(6);
}
.M-m-r-3 {
  margin-right: px(6);
}
.M-m-h-b-2 {
  margin-left: px(4);
  margin-right: px(4);
}
.M-m-l-2 {
  margin-left: px(4);
}
.M-m-r-2 {
  margin-right: px(4);
}
.M-m-h-b-5 {
  margin-left: px(10);
  margin-right: px(10);
}
.M-m-l-5 {
  margin-left: px(10);
}
.M-m-r-5 {
  margin-right: px(10);
}
.M-m-h-b-8 {
  margin-left: px(16);
  margin-right: px(16);
}
.M-m-l-8 {
  margin-left: px(16);
}
.M-m-r-8 {
  margin-right: px(16);
}
.M-m-h-b-10 {
  margin-left: px(20);
  margin-right: px(20);
}
.M-m-l-10 {
  margin-left: px(20);
}
.M-m-r-10 {
  margin-right: px(20);
}
.M-m-h-b-12 {
  margin-left: px(24);
  margin-right: px(24);
}
.M-m-l-12 {
  margin-left: px(24);
}
.M-m-r-12 {
  margin-right: px(24);
}
.M-m-h-b-15 {
  margin-left: px(30);
  margin-right: px(30);
}
.M-m-l-15 {
  margin-left: px(30);
}
.M-m-r-15 {
  margin-right: px(30);
}
.M-m-h-b-20 {
  margin-left: px(40);
  margin-right: px(40);
}
.M-m-l-20 {
  margin-left: px(40);
}
.M-m-r-20 {
  margin-right: px(40);
}
.M-m-h-b-25 {
  margin-left: px(50);
  margin-right: px(50);
}
.M-m-l-25 {
  margin-left: px(50);
}
.M-m-r-25 {
  margin-right: px(50);
}

/* 设置文字显示多少行 */
.M-text-show-row-1,
.M-text-show-row-2,
.M-text-show-row-3,
.M-text-show-row-4,
.M-text-show-row-5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-wrap: break-word;
  white-space: normal !important;
  box-orient: vertical;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
}
.M-text-show-row-1 {
  line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-line-clamp: 1;
}
.M-text-show-row-2 {
  line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
}
.M-text-show-row-3 {
  line-clamp: 3;
  -webkit-line-clamp: 3;
}
.M-text-show-row-4 {
  line-clamp: 4;
  -webkit-line-clamp: 4;
}
.M-text-show-row-5 {
  line-clamp: 5;
  -webkit-line-clamp: 5;
}

/*改写滚动条为全部透明*/
// ::-webkit-scrollbar /*整体部分*/ { width: 0; height: 0; }
// ::-webkit-scrollbar-track /*滑动轨道*/ { background: rgba(0,0,0,0); }
// ::-webkit-scrollbar-thumb /*滑块*/ { background: rgba(0,0,0,0.0); }
// ::-webkit-scrollbar-thumb:hover /*滑块效果*/ { background: rgba(0,0,0,0); }
.M-overflow-hidden {
  overflow: hidden;
}
.M-overflow-y-scroll {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar /*整体部分*/ {
    width: 0;
    height: 0;
  }
  &::-webkit-scrollbar-track /*滑动轨道*/ {
    background: rgba(0, 0, 0, 0);
  }
  &::-webkit-scrollbar-thumb /*滑块*/ {
    background: rgba(0, 0, 0, 0);
  }
  &::-webkit-scrollbar-thumb:hover /*滑块效果*/ {
    background: rgba(0, 0, 0, 0);
  }
}

/* 点击高亮 */
.M-touch-active {
}
.M-touch-active:active {
  opacity: 0.8;
}

// 行高
.M-line-height-1 {
  line-height: 1;
}
.M-line-height-13 {
  line-height: 1.3;
}
.M-line-height-15 {
  line-height: 1.5;
}
.M-line-height-20 {
  line-height: 2;
}
/* 光标 */
.M-gb-click {
  cursor: pointer;
}

/* 文字可选 */
.M-text-select-none {
  user-select: none;
}

/* 清除浮动 */
.M-clear-fix {
  &:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    clear: both;
  }
}

/* 换行 */
.M-white-space-no-wrap {
  white-space: nowrap;
}

/* 阴影 */
.M-boxshadow-1 {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}
.M-boxshadow-2 {
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
}
.M-boxshadow-3 {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}
.M-boxshadow-4 {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}
.M-boxshadow-5 {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/*
  page
 */
.mt-page {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10rem;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  justify-content: center;
  align-items: flex-start;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}
.mt-page--transparent {
  background: none !important;
}
.mt-page-content {
  width: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-y: scroll;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background: #eee;
}
.mt-page-content::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}