body {
    height: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    font-size: 14px;
    overflow-x: hidden;
  }
  
  
  html {
    height: 100%;
    box-sizing: border-box;
  }
  
  #app {
    height: 100%;
  }
  
  * {
    margin: 0px;
    padding: 0px;
    list-style: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  *,
  *:after,
  *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .no-padding {
    padding: 0px !important;
  }
  
  .padding-content {
    padding: 4px 0;
  }
  
  a:focus,
  a:active {
    outline: none;
  }
  
  a,
  a:focus,
  a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
  }
  
  div:focus {
    outline: none;
  }
  
  .w100 {
    width: 100%;
  }
  
  .w30 {
    width: 30%;
  }
  
  .w10 {
    width: 10%;
  }
  
  .w20 {
    width: 20%;
  }
  
  .w25 {
    width: 25%;
  }
  
  .w40 {
    width: 40%;
  }
  
  .w50 {
    width: 50%;
  }
  
  .w60 {
    width: 60%;
  }
  
  .w70 {
    width: 70%;
  }
  
  .w90 {
    width: 90%;
  }
  
  .w15 {
    width: 15%;
  }
  
  .w5 {
    width: 5%;
  }
  
  .h100 {
    height: 100%;
  }
  
  .fr {
    float: right;
  }
  
  .fl {
    float: left;
  }
  
  .pr-5 {
    padding-right: 5px;
  }
  
  .pl-5 {
    padding-left: 5px;
  }
  
  .block {
    display: block;
  }
  
  .none {
    display: none;
  }
  
  .red {
    color: red;
  }
  
  .pointer {
    cursor: pointer;
  }
  
  .inlineBlock {
    display: block;
  }
  
  
  .multiselect {
    line-height: 16px;
  }
  
  .multiselect--active {
    z-index: 1000 !important;
  }
  
  .credit-card {
    background: #fff;
    border-radius: 5px;
    padding: 15px;
  }
  
  .mr0 {
    margin-right: 0;
  }
  
  .padding0 {
    padding: 0;
  }
  
  .paddtop {
    padding-top: 0;
  }
  
  .paddbtm {
    padding-bottom: 0;
  }
  
  .paddbtm15 {
    padding-bottom: 15px;
  }
  
  .paddleft {
    padding-left: 0;
  }
  
  .paddright {
    padding-right: 0;
  }
  
  .rad5 {
    border-radius: 5px;
  }
  
  .bg-white {
    background: #fff;
  }
  
  .f12 {
    font-size: 12px;
  }
  
  .f14 {
    font-size: 14px;
  }
  
  .f15 {
    font-size: 15px;
  }
  
  .f16 {
    font-size: 16px;
  }
  
  .f18 {
    font-size: 18px;
  }
  
  .f20 {
    font-size: 20px;
  }
  
  .f24 {
    font-size: 24px;
  }
  
  .f28 {
    font-size: 28px;
  }
  
  .f30 {
    font-size: 30px;
  }
  
  .f42 {
    font-size: 42px;
  }
  
  .f50 {
    font-size: 50px;
  }
  
  .fwb {
    font-weight: bold;
  }
  
  .fw7 {
    font-weight: 700;
  }
  
  .fw5 {
    font-weight: 500;
  }
  
  .center {
    text-align: center;
  }
  
  .radius-0 {
    border-radius: 0;
  }
  
  .radius-xs {
    border-radius: 5px;
  }
  
  .radius-sm {
    border-radius: 10px;
  }
  
  .radius {
    border-radius: 15px;
  }
  
  .radius-lg {
    border-radius: 20px;
  }
  
  /*背景 */
  .bg-red {
    background-color: #e54d42;
    color: #ffffff;
  }
  
  .bg-orange {
    background-color: #f37b1d;
    color: #ffffff;
  }
  
  .bg-yellow {
    background-color: #fbbd08;
    color: #333333;
  }
  
  .bg-olive {
    background-color: #8dc63f;
    color: #ffffff;
  }
  
  .bg-green {
    background-color: #39b54a;
    color: #ffffff;
  }
  
  .bg-cyan {
    background-color: #1cbbb4;
    color: #ffffff;
  }
  
  .bg-blue {
    background-color: #0081ff;
    color: #ffffff;
  }
  
  .bg-purple {
    background-color: #6739b6;
    color: #ffffff;
  }
  
  .bg-mauve {
    background-color: #9c26b0;
    color: #ffffff;
  }
  
  .bg-pink {
    background-color: #e03997;
    color: #ffffff;
  }
  
  .bg-brown {
    background-color: #a5673f;
    color: #ffffff;
  }
  
  .bg-grey {
    background-color: #8799a3;
    color: #ffffff;
  }
  
  .bg-gray {
    background-color: #f0f0f0;
    color: #333333;
  }
  
  .bg-black {
    background-color: #333333;
    color: #ffffff;
  }
  
  .bg-white {
    background-color: #ffffff;
  }
  
  .bg-shadeTop {
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
    color: #ffffff;
  }
  
  .bg-shadeBottom {
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
    color: #ffffff;
  }
  
  .bg-red.light {
    color: #e54d42;
    background-color: #fadbd9;
  }
  
  .bg-orange.light {
    color: #f37b1d;
    background-color: #fde6d2;
  }
  
  .bg-yellow.light {
    color: #fbbd08;
    background-color: #fef2ced2;
  }
  
  .bg-olive.light {
    color: #8dc63f;
    background-color: #e8f4d9;
  }
  
  .bg-green.light {
    color: #39b54a;
    background-color: #d7f0dbff;
  }
  
  .bg-cyan.light {
    color: #1cbbb4;
    background-color: #d2f1f0;
  }
  
  .bg-blue.light {
    color: #0081ff;
    background-color: #cce6ff;
  }
  
  .bg-purple.light {
    color: #6739b6;
    background-color: #e1d7f0;
  }
  
  .bg-mauve.light {
    color: #9c26b0;
    background-color: #ebd4ef;
  }
  
  .bg-pink.light {
    color: #e03997;
    background-color: #f9d7ea;
  }
  
  .bg-brown.light {
    color: #a5673f;
    background-color: #ede1d9;
  }
  
  .bg-grey.light {
    color: #8799a3;
    background-color: #e7ebed;
  }
  
  .bg-gradual-red {
    background-image: linear-gradient(45deg, #f43f3b, #ec008c);
    color: #ffffff;
  }
  
  .bg-gradual-orange {
    background-image: linear-gradient(45deg, #ff9700, #ed1c24);
    color: #ffffff;
  }
  
  .bg-gradual-green {
    background-image: linear-gradient(45deg, #39b54a, #8dc63f);
    color: #ffffff;
  }
  
  .bg-gradual-purple {
    background-image: linear-gradient(45deg, #9000ff, #5e00ff);
    color: #ffffff;
  }
  
  .bg-gradual-pink {
    background-image: linear-gradient(45deg, #ec008c, #6739b6);
    color: #ffffff;
  }
  
  .bg-gradual-blue {
    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
    color: #ffffff;
  }
  
  /* -- 实线 -- */
  .solid,
  .solid-top,
  .solid-right,
  .solid-bottom,
  .solid-left,
  .solids,
  .solids-top,
  .solids-right,
  .solids-bottom,
  .solids-left,
  .dashed,
  .dashed-top,
  .dashed-right,
  .dashed-bottom,
  .dashed-left {
    position: relative;
  }
  
  .solid::after,
  .solid-top::after,
  .solid-right::after,
  .solid-bottom::after,
  .solid-left::after,
  .solids::after,
  .solids-top::after,
  .solids-right::after,
  .solids-bottom::after,
  .solids-left::after,
  .dashed::after,
  .dashed-top::after,
  .dashed-right::after,
  .dashed-bottom::after,
  .dashed-left::after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
  }
  
  .solid::after {
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solid-top::after {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solid-right::after {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solid-bottom::after {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solid-left::after {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .solids::after {
    border: 8px solid #eee;
  }
  
  .solids-top::after {
    border-top: 8px solid #eee;
  }
  
  .solids-right::after {
    border-right: 8px solid #eee;
  }
  
  .solids-bottom::after {
    border-bottom: 8px solid #eee;
  }
  
  .solids-left::after {
    border-left: 8px solid #eee;
  }
  
  /* -- 虚线 -- */
  
  .dashed::after {
    border: 1px dashed #ddd;
  }
  
  .dashed-top::after {
    border-top: 1px dashed #ddd;
  }
  
  .dashed-right::after {
    border-right: 1px dashed #ddd;
  }
  
  .dashed-bottom::after {
    border-bottom: 1px dashed #ddd;
  }
  
  .dashed-left::after {
    border-left: 1px dashed #ddd;
  }
  
  /* // 文本 */
  .text-xs {
    font-size: 10px;
  }
  
  .text-sm {
    font-size: 12px;
  }
  
  .text-df {
    font-size: 14px;
  }
  
  .text-lg {
    font-size: 16px;
  }
  
  .text-xl {
    font-size: 18px;
  }
  
  .text-xxl {
    font-size: 22px;
  }
  
  .text-sl {
    font-size: 40px;
  }
  
  .text-xsl {
    font-size: 60px;
  }
  
  .text-Abc {
    text-transform: Capitalize;
  }
  
  .text-ABC {
    text-transform: Uppercase;
  }
  
  .text-abc {
    text-transform: Lowercase;
  }
  
  .text-price::before {
    content: "¥";
    font-size: 80%;
    margin-right: 4px;
  }
  
  .text-bold {
    font-weight: bold;
  }
  
  .text-content {
    line-height: 1.6;
  }
  
  .text-left {
    text-align: left;
  }
  
  .text-right {
    text-align: right;
  }
  
  .text-center {
    text-align: center
  }
  
  .text-indent {
    text-indent: 2em;
  }
  
  .ellips {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wsn{
    white-space: nowrap;
  }
  
  .text-red {
    color: #e54d42;
  }
  
  .text-orange {
    color: #f37b1d;
  }
  
  .text-yellow {
    color: #fbbd08;
  }
  
  .pm-yellow {
    color: #f7e94d;
  }
  
  .text-gold {
    color: #fff449;
  }
  
  .text-olive {
    color: #8dc63f;
  }
  
  .text-green {
    color: #39b54a;
  }
  
  .text-qing {
    color: #2ced47;
  }
  
  .text-cyan {
    color: #1cbbb4;
  }
  
  .text-blue {
    color: #0081ff;
  }
  
  .text-purple {
    color: #6739b6;
  }
  
  .text-mauve {
    color: #9c26b0;
  }
  
  .text-pink {
    color: #e03997;
  }
  
  .text-brown {
    color: #a5673f;
  }
  
  .text-grey {
    color: #8799a3;
  }
  
  .text-gray {
    color: #aaaaaa;
  }
  
  .text-black {
    color: #333333;
  }
  
  .text-white {
    color: #ffffff;
  }
  
  .text-opca-fff {
    color: rgba(252, 252, 252, 0.6);
  }
  
  /* // flex布局 */
  .flex {
    display: flex;
  }
  
  .inline-flex {
    display: inline-flex;
  }
  
  .flex1 {
    flex: 1;
  }
  
  .flex2 {
    flex: 2;
  }
  
  .flex3 {
    flex: 3;
  }
  
  .fxd-r {
    flex-direction: row;
  }
  
  .fxd-rr {
    flex-direction: row-reverse;
  }
  
  .fxd-c {
    flex-direction: column;
  }
  
  .fxd-cr {
    flex-direction: column-reverse;
  }
  
  .fxw-n {
    flex-wrap: nowrap;
  }
  
  .fxw-w {
    flex-wrap: wrap;
  }
  
  .jc-fs {
    justify-content: flex-start;
  }
  
  .jc-fe {
    justify-content: flex-end;
  }
  
  .jc-c {
    justify-content: center;
  }
  
  .jc-sb {
    justify-content: space-between;
  }
  
  .jc-sa {
    justify-content: space-around;
  }
  
  .ai-fs {
    align-items: flex-start;
  }
  
  .ai-fe {
    align-items: flex-end;
  }
  
  .ai-c {
    align-items: center;
  }
  
  .ai-b {
    align-items: baseline;
  }
  
  .ai-s {
    align-items: stretch;
  }
  
  /* // 内外边距 */
  .margin-0 {
    margin: 0;
  }
  
  .margin-xs {
    margin: 5px;
  }
  
  .margin-sm {
    margin: 10px;
  }
  
  .margin {
    margin: 15px;
  }
  
  .margin-lg {
    margin: 20px;
  }
  
  .margin-xl {
    margin: 25px;
  }
  
  .margin-top-xs {
    margin-top: 5px;
  }
  
  .margin-top-sm {
    margin-top: 10px;
  }
  
  .margin-top {
    margin-top: 15px;
  }
  
  .margin-top-lg {
    margin-top: 20px;
  }
  
  .margin-top-xl {
    margin-top: 25px;
  }
  
  .margin-right-xs {
    margin-right: 5px;
  }
  
  .margin-right-sm {
    margin-right: 10px;
  }
  
  .margin-right {
    margin-right: 15px;
  }
  
  .margin-right-lg {
    margin-right: 20px;
  }
  
  .margin-right-xl {
    margin-right: 25px;
  }
  
  .margin-right30 {
    margin-right: 30px;
  }
  
  .margin-bottom-xs {
    margin-bottom: 5px;
  }
  
  .margin-bottom-sm {
    margin-bottom: 10px;
  }
  
  .margin-bottom {
    margin-bottom: 15px;
  }
  
  .margin-bottom-lg {
    margin-bottom: 20px;
  }
  
  .margin-bottom-xl {
    margin-bottom: 25px;
  }
  
  .margin-bottom30 {
    margin-bottom: 30px;
  }
  
  .margin-bottom40 {
    margin-bottom: 40px;
  }
  
  .margin-left-xs {
    margin-left: 5px;
  }
  
  .margin-left-sm {
    margin-left: 10px;
  }
  
  .margin-left {
    margin-left: 15px;
  }
  
  .margin-left-lg {
    margin-left: 20px;
  }
  
  .margin-left-xl {
    margin-left: 25px;
  }
  
  .margin-lr-xs {
    margin-left: 5px;
    margin-right: 5px;
  }
  
  .margin-lr-sm {
    margin-left: 10px;
    margin-right: 10px;
  }
  
  .margin-lr {
    margin-left: 15px;
    margin-right: 15px;
  }
  
  .margin-lr-lg {
    margin-left: 20px;
    margin-right: 20px;
  }
  
  .margin-lr-xl {
    margin-left: 25px;
    margin-right: 25px;
  }
  
  .margin-tb-xs {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  .margin-tb-sm {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .margin-tb {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  
  .margin-t10b20 {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  
  .margin-tb-lg {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .margin-tb-xl {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  
  .padding-0 {
    padding: 0;
  }
  
  .padding-xs {
    padding: 5px;
  }
  
  .padding-sm {
    padding: 10px;
  }
  
  .padding {
    padding: 15px;
  }
  
  .padding-lg {
    padding: 20px;
  }
  
  .padding-xl {
    padding: 25px;
  }
  
  .padding-top-xs {
    padding-top: 5px;
  }
  
  .padding-top-sm {
    padding-top: 10px;
  }
  
  .padding-top {
    padding-top: 15px;
  }
  
  .padding-top-lg {
    padding-top: 20px;
  }
  
  .padding-top-xl {
    padding-top: 25px;
  }
  
  .padding-right-xs {
    padding-right: 5px;
  }
  
  .padding-right-sm {
    padding-right: 10px;
  }
  
  .padding-right {
    padding-right: 15px;
  }
  
  .padding-right-lg {
    padding-right: 20px;
  }
  
  .padding-right-xl {
    padding-right: 25px;
  }
  
  .padding-right100 {
    padding-right: 100px;
  }
  
  .padding-bottom-xs {
    padding-bottom: 5px;
  }
  
  .padding-bottom-sm {
    padding-bottom: 10px;
  }
  
  .padding-bottom {
    padding-bottom: 15px;
  }
  
  .padding-bottom-lg {
    padding-bottom: 20px;
  }
  
  .padding-bottom-xl {
    padding-bottom: 25px;
  }
  
  .padding-left-xs {
    padding-left: 5px;
  }
  
  .padding-left-sm {
    padding-left: 10px;
  }
  
  .padding-left {
    padding-left: 15px;
  }
  
  .padding-left-lg {
    padding-left: 20px;
  }
  
  .padding-left-xl {
    padding-left: 25px;
  }
  
  .padding-left30 {
    padding-left: 30px;
  }
  
  .padding-lr-xs {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .padding-lr-sm {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .padding-lr {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .padding-lr-lg {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .padding-lr-xl {
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .padding-tb-xs {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .padding-tb-sm {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .padding-tb {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .padding-tb-lg {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .padding-tb-xl {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  
  /* // 阴影 */
  .shadow {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
  }
  
  .bg-opacity {
    background: transparent;
    padding-left: 0;
  }
  
  .page-title {
    color: #fff;
    font-size: 26px;
    margin-bottom: 20px;
  }
  
  
  
  .cyan {
    color: #18bef4;
  }
  
  .box-s-6c {
    box-shadow: 10px 10px 0 0px rgb(101 122 1623 / 15%);
    border: solid 1px #6c7fb3;
  
  }
  
  
  .w-450p {
    width: 440px;
    min-height: 220px;
    margin-right: 25px;
    margin-bottom: 25px;
  }
  
  .w-900p {
    width: 905px;
    min-height: 300px;
  }
  
  .w-950p {
    width: 950px;
    min-height: 300px;
  }
  
  .w-1350p {
    width: 1350px;
    min-height: 300px;
  }
  
  .min-h120 {
    min-height: 120px;
  }
  
  .flex-title {
    height: 60px;
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
  }
  
  .line-h {
    line-height: 30px;
  }
  
  .err-tips {
    color: rgb(255, 203, 61);
    margin: 10px 0;
  }
  
  .posi-re {
    position: relative;
  }
  
  .posi-ab {
    position: absolute;
  }
  
  .line {
    border-bottom: solid 1px;
    border-color: #cccccc;
  }
  
  .ys-green {
    color: rgb(17, 197, 164);
  }
  
  
  .bg-op-fff {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .text-decoration-bot {
    text-decoration: underline;
  }
  
  .el-loading-mask {
    background: rgba(255, 255, 255, 0);
  }
  
  .no-content {
    text-align: center;
    padding: 60px 0;
  }
  
  
  
  
  
  @media screen and (max-width: 768px) {
    .w-450p {
      width: 100%;
      min-height: 220px;
      margin-right: 0px;
      margin-bottom: 25px;
    }
  
    .w-900p {
      width: 100%;
    }
  
    .el-card__body {
      padding: 10px;
    }
  
    .m-hide {
      display: none;
    }
  
    .m-w35 {
      width: 35%;
    }
  
    .m-w25 {
      width: 25%;
    }
  }