body,html {
  margin: 0px;
  padding: 0px;
  width : 100%;
  height: 100%;
  font-size: 14px;
}
body,html,ul,li,a,input,p,span,button{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  border: none;
  outline: none;
  box-sizing: border-box;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}

input::-ms-clear,input::-ms-reveal{
  display:none
}

.text-left{ text-align: left !important; }
.text-center{ text-align: center !important; }
.text-right{ text-align: right !important; }

.float-left { float: left; }
.float-right { float: right; }

.m-1{ margin:5px !important }
.m-2{ margin:10px !important }
.m-3{ margin:15px !important }
.m-4{ margin:30px !important }
.m-5{ margin:70px !important }
.m-auto{ margin:auto !important }

.mt-1{ margin-top:5px !important }
.mt-2{ margin-top:10px !important }
.mt-3{ margin-top:15px !important }
.mt-4{ margin-top:30px !important }
.mt-5{ margin-top:70px !important }
.mt-auto{ margin-top:auto !important }

.ml-1{ margin-left:5px !important }
.ml-2{ margin-left:10px !important }
.ml-3{ margin-left:15px !important }
.ml-4{ margin-left:30px !important }
.ml-5{ margin-left:70px !important }
.ml-auto{ margin-left:auto !important }

.mr-1{ margin-right:5px !important }
.mr-2{ margin-right:10px !important }
.mr-3{ margin-right:15px !important }
.mr-4{ margin-right:30px !important }
.mr-5{ margin-right:70px !important }
.mr-auto{ margin-right:auto !important }

.mb-1{ margin-bottom:5px !important }
.mb-2{ margin-bottom:10px !important }
.mb-3{ margin-bottom:15px !important }
.mb-4{ margin-bottom:30px !important }
.mb-5{ margin-bottom:70px !important }
.mb-auto{ margin-bottom:auto !important }

.mx-1{ margin-left:5px !important; margin-right:5px !important }
.mx-2{ margin-left:10px !important; margin-right:10px !important }
.mx-3{ margin-left:15px !important; margin-right:15px !important }
.mx-4{ margin-left:30px !important; margin-right:30px !important }
.mx-5{ margin-left:70px !important; margin-right:70px !important }

.my-1{ margin-top:5px !important; margin-bottom:5px !important }
.my-2{ margin-top:10px !important; margin-bottom:10px !important }
.my-3{ margin-top:15px !important; margin-bottom:15px !important }
.my-4{ margin-top:30px !important; margin-bottom:30px !important }
.my-5{ margin-top:70px !important; margin-bottom:70px !important }

.p-1{ padding:5px !important }
.p-2{ padding:10px !important }
.p-3{ padding:15px !important }
.p-4{ padding:20px !important }
.p-5{ padding:70px !important }
.p-auto{ padding:auto !important }

.pt-1{ padding-top:5px !important }
.pt-2{ padding-top:10px !important }
.pt-3{ padding-top:15px !important }
.pt-4{ padding-top:30px !important }
.pt-5{ padding-top:70px !important }
.pt-7{ padding-top:4px !important }
.pt-auto{ padding-top:auto !important }

.pl-1{ padding-left:5px !important }
.pl-2{ padding-left:10px !important }
.pl-3{ padding-left:15px !important }
.pl-4{ padding-left:30px !important }
.pl-5{ padding-left:70px !important }
.pl-auto{ padding-left:auto !important }

.pr-1{ padding-right:5px !important }
.pr-2{ padding-right:10px !important }
.pr-3{ padding-right:15px !important }
.pr-4{ padding-right:30px !important }
.pr-5{ padding-right:70px !important }
.pr-auto{ padding-right:auto !important }

.pb-1{ padding-bottom:5px !important }
.pb-2{ padding-bottom:10px !important }
.pb-3{ padding-bottom:15px !important }
.pb-4{ padding-bottom:30px !important }
.pb-5{ padding-bottom:70px !important }
.pb-auto{ padding-bottom:auto !important }

.px-1{ padding-left:5px !important; padding-right:5px !important }
.px-2{ padding-left:10px !important; padding-right:10px !important }
.px-2-3{ padding-left:30px !important; padding-right:30px !important }
.px-3{ padding-left:15px !important; padding-right:15px !important }
.px-4{ padding-left:30px !important; padding-right:30px !important }
.px-5{ padding-left:70px !important; padding-right:70px !important }

.py-1{ padding-top:5px !important; padding-bottom:5px !important }
.py-2{ padding-top:10px !important; padding-bottom:10px !important }
.py-3{ padding-top:15px !important; padding-bottom:15px !important }
.py-4{ padding-top:20px !important; padding-bottom:20px !important }
.py-5{ padding-top:70px !important; padding-bottom:70px !important }

.m-auto {
  margin: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}

.d-block { /** 转换为块状 */
  display: block;
}

.d-flex {
  /* display: -flexbox !important; */
  display: flex !important; 
	flex-direction: row !important;
}

.flex-column { /**d-flex 竖排*/
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse { /**d-flex 从右往左排布*/
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}
.flex-fill { /**flex-fill 类强制设置各个弹性子元素的宽度是一样的:*/
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}
.flex-grow-1 { /**.flex-grow-1 用于设置子元素使用剩下的空间。*/
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

/**=========弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。==========*/
.flex-wrap {  /**多行自动正序排列*/
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap { /**单行排列*/
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse { /**多行自动倒叙排列*/
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center { /**d-flex item垂直居中*/
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-content-start {
  -ms-flex-line-pack: start !important;
  align-content: flex-start !important;
}

.align-content-end {
  -ms-flex-line-pack: end !important;
  align-content: flex-end !important;
}

.align-content-center {
  -ms-flex-line-pack: center !important;
  align-content: center !important;
}

.align-content-between {
  -ms-flex-line-pack: justify !important;
  align-content: space-between !important;
}

.align-content-around {
  -ms-flex-line-pack: distribute !important;
  align-content: space-around !important;
}

.align-content-stretch {
  -ms-flex-line-pack: stretch !important;
  align-content: stretch !important;
}

/**
 *d-flex 内容排列
 * --- --- ---
*/
.justify-content-start {  
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}
/**
 *d-flex 内容排列
 *                     --- --- ---
*/
.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}
/**
 *d-flex 内容排列
 *       --- --- ---
*/
.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
/**
 *d-flex 内容排列
 * ---       ---      ---
*/
.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
/**
 *d-flex 内容排列
 *   ---     ---    ---
*/
.justify-content-around {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}