.w100{ width: 100%;}
.w95{ width : 95%;}
.w90{ width : 90%;}
.w85{ width: 85%;}
.w80{ width: 80%;}
.w75{ width: 75%;}
.w70{ width: 70%;}
.w65{ width: 65%;}
.w60{ width: 60%;}
.w55{ width: 55%;}
.w50{ width: 50%;}
.w45{ width: 45%;}
.w40{ width: 40%;}
.w35{ width: 35%;}
.w30{ width: 30%;}
.w25{ width: 25%;}
.w20{ width: 20%;}
.w15{ width: 15%;}
.w10{ width: 10%;}
.w5{ width: 5%;}
.h100{ height: 100%;}
.h95{ height: 95%;}
.h90{ height: 90%;}
.h85{ height: 85%;}
.h80{ height: 80%;}
.h75{ height: 75%;}
.h70{ height: 70%;}
.h65{ height: 65%;}
.h60{ height: 60%;}
.h55{ height: 55%;}
.h50{ height: 50%;}
.h45{ height: 45%;}
.h40{ height: 40%;}
.h35{ height: 35%;}
.h30{ height: 30%;}
.h25{ height: 25%;}
.h20{ height: 20%;}
.h15{ height: 15%;}
.h10{ height: 10%;}
.h5{ height: 5%;}
.hv100{ height: 100vh;}
.wv100{ width: 100vw; }
/* flex */
.flex{
  display: flex;
}
.flex_1{  flex: 1  }
.flex-wrap_wrap{ flex-wrap:wrap }
.flex_d_c{
  flex-direction: column
}
.flex_d_r{
  flex-direction: row
}
.flexCC{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex_C_SA{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex_C_SB{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex_a_fe{
  display: flex;
  align-items: flex-end;
}
.flex_ai_s{
  display: flex;
  align-items: flex-start;
}
.flex_ai_c{
  display: flex;
  align-items: center;
}
.flex_jc_c{
  display: flex;
  justify-content: center;
}
.flex_jc_sb{
  display: flex;
  justify-content: space-between;
}
.flex_jc_sa{
  display: flex;
  justify-content: space-around;
}
.flex_jc_fs{
  display: flex;
  justify-content: flex-start;
}
.flex_jc_fe{
  display: flex;
  justify-content: flex-end;
}

/* position */
.pos_rel{
  position: relative
}
.pos_abs{
  position: absolute
}
.top0{ top: 0;}
.bottom0{ bottom: 0;}
.left0{ left: 0;}
.right0{ right: 0;}
/* margin */
.margAuto{
  margin: 0 auto;
}
/* overflow */
.ovHi{
  overflow: hidden;
}
.ovAu{
  overflow:auto;
}
/* text */
.txt_c{ text-align: center; }
.txt_r{ text-align: right; }
.txt_l{ text-align: left; }
/* border-radius */
.br50{
  border-radius:50%
}
/* z-index */
.zIndex1{z-index: 1;}
.zIndex2{z-index: 2;}
.zIndex3{z-index: 3;}
.zIndex4{z-index: 4;}
.zIndex5{z-index: 5;}
/* opacity */
.opacity0{opacity: 0;}
.opacity1{opacity: 0.1;}
.opacity2{opacity: 0.2;}
.opacity3{opacity: 0.3;}
.opacity4{opacity: 0.4;}
.opacity5{opacity: 0.5;}
.opacity6{opacity: 0.6;}
.opacity7{opacity: 0.7;}
.opacity8{opacity: 0.8;}
.opacity9{opacity: 0.9;}
.opacity10{opacity: 1;}

/* 蒙层 */
.mask{
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
}
.icon{
  width: 50rpx;
  height: 50rpx;
}