.flex,
.row {
  display: flex;
  flex-wrap: wrap;
}
.flex > .col,
.flex > .col-0,
.flex > .col-1,
.flex > .col-2,
.flex > .col-3,
.flex > .col-4,
.flex > .col-5,
.flex > .col-6,
.flex > .col-7,
.flex > .col-8,
.flex > .col-9,
.flex > .col-10,
.flex > .col-11,
.flex > .col-12,
.flex > .col-auto,
.flex > .col-grow,
.flex > .col-shrink,
.flex > .col-xs,
.flex > .col-xs-0,
.flex > .col-xs-1,
.flex > .col-xs-2,
.flex > .col-xs-3,
.flex > .col-xs-4,
.flex > .col-xs-5,
.flex > .col-xs-6,
.flex > .col-xs-7,
.flex > .col-xs-8,
.flex > .col-xs-9,
.flex > .col-xs-10,
.flex > .col-xs-11,
.flex > .col-xs-12,
.flex > .col-xs-auto,
.flex > .col-xs-grow,
.flex > .col-xs-shrink,
.row > .col,
.row > .col-0,
.row > .col-1,
.row > .col-2,
.row > .col-3,
.row > .col-4,
.row > .col-5,
.row > .col-6,
.row > .col-7,
.row > .col-8,
.row > .col-9,
.row > .col-10,
.row > .col-11,
.row > .col-12,
.row > .col-auto,
.row > .col-grow,
.row > .col-shrink,
.row > .col-xs,
.row > .col-xs-0,
.row > .col-xs-1,
.row > .col-xs-2,
.row > .col-xs-3,
.row > .col-xs-4,
.row > .col-xs-5,
.row > .col-xs-6,
.row > .col-xs-7,
.row > .col-xs-8,
.row > .col-xs-9,
.row > .col-xs-10,
.row > .col-xs-11,
.row > .col-xs-12,
.row > .col-xs-auto,
.row > .col-xs-grow,
.row > .col-xs-shrink {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.flex > .col,
.flex > .col-0,
.flex > .col-1,
.flex > .col-2,
.flex > .col-3,
.flex > .col-4,
.flex > .col-5,
.flex > .col-6,
.flex > .col-7,
.flex > .col-8,
.flex > .col-9,
.flex > .col-10,
.flex > .col-11,
.flex > .col-12,
.flex > .col-auto,
.flex > .col-grow,
.flex > .col-shrink,
.flex > .col-xs,
.flex > .col-xs-0,
.flex > .col-xs-1,
.flex > .col-xs-2,
.flex > .col-xs-3,
.flex > .col-xs-4,
.flex > .col-xs-5,
.flex > .col-xs-6,
.flex > .col-xs-7,
.flex > .col-xs-8,
.flex > .col-xs-9,
.flex > .col-xs-10,
.flex > .col-xs-11,
.flex > .col-xs-12,
.flex > .col-xs-auto,
.flex > .col-xs-grow,
.flex > .col-xs-shrink {
  height: auto;
  min-height: 0;
  max-height: 100%;
}
.col,
.col-xs {
  flex: 10000 1 0%;
}
.col-0,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-auto,
.col-xs-0,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-auto {
  flex: 0 0 auto;
}
.col-grow,
.col-xs-grow {
  flex: 1 0 auto;
}
.col-shrink,
.col-xs-shrink {
  flex: 0 1 auto;
}
.row > .col-0,
.row > .col-xs-0 {
  height: auto;
  width: 0%;
}
.row > .offset-0,
.row > .offset-xs-0 {
  margin-left: 0%;
}
.row > .col-1,
.row > .col-xs-1 {
  height: auto;
  width: 8.3333%;
}
.row > .offset-1,
.row > .offset-xs-1 {
  margin-left: 8.3333%;
}
.row > .col-2,
.row > .col-xs-2 {
  height: auto;
  width: 16.6667%;
}
.row > .offset-2,
.row > .offset-xs-2 {
  margin-left: 16.6667%;
}
.row > .col-3,
.row > .col-xs-3 {
  height: auto;
  width: 25%;
}
.row > .offset-3,
.row > .offset-xs-3 {
  margin-left: 25%;
}
.row > .col-4,
.row > .col-xs-4 {
  height: auto;
  width: 33.3333%;
}
.row > .offset-4,
.row > .offset-xs-4 {
  margin-left: 33.3333%;
}
.row > .col-5,
.row > .col-xs-5 {
  height: auto;
  width: 41.6667%;
}
.row > .offset-5,
.row > .offset-xs-5 {
  margin-left: 41.6667%;
}
.row > .col-6,
.row > .col-xs-6 {
  height: auto;
  width: 50%;
}
.row > .offset-6,
.row > .offset-xs-6 {
  margin-left: 50%;
}
.row > .col-7,
.row > .col-xs-7 {
  height: auto;
  width: 58.3333%;
}
.row > .offset-7,
.row > .offset-xs-7 {
  margin-left: 58.3333%;
}
.row > .col-8,
.row > .col-xs-8 {
  height: auto;
  width: 66.6667%;
}
.row > .offset-8,
.row > .offset-xs-8 {
  margin-left: 66.6667%;
}
.row > .col-9,
.row > .col-xs-9 {
  height: auto;
  width: 75%;
}
.row > .offset-9,
.row > .offset-xs-9 {
  margin-left: 75%;
}
.row > .col-10,
.row > .col-xs-10 {
  height: auto;
  width: 83.3333%;
}
.row > .offset-10,
.row > .offset-xs-10 {
  margin-left: 83.3333%;
}
.row > .col-11,
.row > .col-xs-11 {
  height: auto;
  width: 91.6667%;
}
.row > .offset-11,
.row > .offset-xs-11 {
  margin-left: 91.6667%;
}
.row > .col-12,
.row > .col-xs-12 {
  height: auto;
  width: 100%;
}
.row > .offset-12,
.row > .offset-xs-12 {
  margin-left: 100%;
}
.row > .col-all {
  height: auto;
  flex: 0 0 100%;
}
.cursor {
  cursor: pointer;
}

.link-cursor {
  cursor: pointer;
  text-decoration: underline;
  color: #027be3;
}

.bg-grey {
  background: #c7bfbf !important;
}

.bg-primary {
  background-color: #3aace8 !important;
}

.bg-danger {
  background-color: #ef136e;
}
.bg-231 {
  background-color: #e7e7e7;
}
.bg-blue {
  background: #2196f3 !important;
}
.h-100 {
  height: 100vh;
}
.w-100 {
  width: 100vw;
}
.height-100 {
  height: 100%;
}
.width-100 {
  width: 100%;
}
.fl-page-width {
  max-width: 1200px;
  margin: auto;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-auto {
  overflow: auto;
}
/*下三角*/
.tip-bottom {
  position: relative;
  /*设置圆角*/
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.tip-bottom:after {
  content: "";
  display: block;
  border-width: 25px;
  position: absolute;
  bottom: -30px;
  left: 50px;
  border-style: solid dashed dashed solid;
  border-color: rgb(255, 255, 255) transparent transparent transparent;
  font-size: 0;
  line-height: 0;
  transform: rotate(224deg);
}

.tip-bottom:after {
  bottom: -20px;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.text-left {
  text-align: left !important;
}
.align-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}
.column {
  flex-direction: column;
}
.items-start {
  align-items: flex-start !important;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}

.fl-pa-sm {
  padding: 8px !important;
}
.fl-pb-xs {
  padding-bottom: 4px !important;
}
.fl-mx-xs {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.fl-my-xs {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.fl-ml-xs {
  margin-left: 4px !important;
}
.fl-mt-xs {
  margin-top: 4px !important;
}
.fl-pt-xs {
  padding-top: 4px !important;
}
.fl-pl-xs {
  padding-left: 4px !important;
}
.fl-pl-sm {
  padding-left: 8px !important;
}

.fl-pr-sm {
  padding-right: 8px !important;
}

.fl-pt-sm {
  padding-top: 8px !important;
}

.fl-pb-sm {
  padding-bottom: 8px !important;
}

.fl-px-sm {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.fl-px-xs {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.fl-py-sm {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.fl-pa-md {
  padding: 16px !important;
}
.fl-pl-md {
  padding-left: 16px !important;
}

.fl-pr-md {
  padding-right: 16px !important;
}

.fl-pt-md {
  padding-top: 16px !important;
}

.fl-pb-md {
  padding-bottom: 16px !important;
}

.fl-px-md {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.fl-py-md {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.fl-pa-lg {
  padding: 24px !important;
}
.fl-pl-lg {
  padding-left: 24px !important;
}

.fl-pr-lg {
  padding-right: 24px !important;
}

.fl-pt-lg {
  padding-top: 24px !important;
}

.fl-pb-lg {
  padding-bottom: 24px !important;
}

.fl-px-lg {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.fl-py-lg {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.fl-ma-sm {
  margin: 8px !important;
}
.fl-ma-xs {
  margin: 4px !important;
}
.fl-ml-sm {
  margin-left: 8px !important;
}

.fl-mr-sm {
  margin-right: 8px !important;
}

.fl-mt-sm {
  margin-top: 8px !important;
}

.fl-mb-sm {
  margin-bottom: 8px !important;
}

.fl-mx-sm {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.fl-my-sm {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.fl-ma-md {
  margin: 16px !important;
}
.fl-ml-md {
  margin-left: 16px !important;
}

.fl-mr-md {
  margin-right: 16px !important;
}

.fl-mt-md {
  margin-top: 16px !important;
}

.fl-mb-md {
  margin-bottom: 16px !important;
}

.fl-mx-md {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.fl-my-md {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.fl-ma-lg {
  margin: 24px !important;
}
.fl-ml-lg {
  margin-left: 24px !important;
}

.fl-mr-lg {
  margin-right: 24px !important;
}

.fl-mt-lg {
  margin-top: 24px !important;
}

.fl-mb-lg {
  margin-bottom: 24px !important;
}

.fl-mx-lg {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.fl-my-lg {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center,
.flex-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center,
.flex-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}

.box-border {
  box-sizing: border-box;
}
.box-content {
  box-sizing: content-box;
}
.width-140 {
  width: 280rpx;
}
.width-300 {
  width: 600rpx;
}
.no-shadow {
  box-shadow: none !important;
}
.border-20 {
  border-radius: 20rpx;
}

.fl-link {
  cursor: pointer;
  text-decoration: underline;
  color: #027be3;
}
.border-radius-4 {
  border-radius: 4px !important;
}

.border-radius-8 {
  border-radius: 8px !important;
}

.border-radius-16 {
  border-radius: 16px !important;
}

.margin-auto {
  margin: auto;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.font-12 {
  font-size: 24rpx;
}
.font-14 {
  font-size: 28rpx;
}
.font-16 {
  font-size: 32rpx;
}
.font-18 {
  font-size: 36rpx;
}
.font-20 {
  font-size: 40rpx;
}
.font-bold {
  font-weight: bold;
}
