.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.m-0 {
  margin: 0 !important;
}
.m-extra-small {
  margin: 8rpx;
}
.m-small {
  margin: 16rpx;
}
.m-base {
  margin: 28rpx;
}
.m-medium {
  margin: 40rpx;
}
.m-large {
  margin: 60rpx;
}
.m-extra-large {
  margin: 100rpx;
}
.m-extra-small-0 {
  margin: 8rpx 0;
}
.m-0-extra-small {
  margin: 0 8rpx;
}
.m-small-0 {
  margin: 16rpx 0;
}
.m-0-small {
  margin: 0 16rpx;
}
.m-base-0 {
  margin: 28rpx 0;
}
.m-0-base {
  margin: 0 28rpx;
}
.m-medium-0 {
  margin: 40rpx 0;
}
.m-0-medium {
  margin: 0 40rpx;
}
.m-large-0 {
  margin: 60rpx 0;
}
.m-0-large {
  margin: 0 60rpx;
}
.m-extra-large-0 {
  margin: 100rpx 0;
}
.m-0-extra-large {
  margin: 0 100rpx;
}
.m-t-extra-small {
  margin-top: 8rpx;
}
.m-t-small {
  margin-top: 16rpx;
}
.m-t-base {
  margin-top: 28rpx;
}
.m-t-medium {
  margin-top: 40rpx;
}
.m-t-large {
  margin-top: 60rpx;
}
.m-t-extra-large {
  margin-top: 100rpx;
}
.m-b-extra-small {
  margin-bottom: 8rpx;
}
.m-b-small {
  margin-bottom: 16rpx;
}
.m-b-base {
  margin-bottom: 28rpx;
}
.m-b-medium {
  margin-bottom: 40rpx;
}
.m-b-large {
  margin-bottom: 60rpx;
}
.m-b-extra-large {
  margin-bottom: 100rpx;
}
.m-l-extra-small {
  margin-left: 8rpx;
}
.m-l-small {
  margin-left: 16rpx;
}
.m-l-base {
  margin-left: 28rpx;
}
.m-l-medium {
  margin-left: 40rpx;
}
.m-l-large {
  margin-left: 60rpx;
}
.m-l-extra-large {
  margin-left: 100rpx;
}
.m-r-extra-small {
  margin-right: 8rpx;
}
.m-r-small {
  margin-right: 16rpx;
}
.m-r-base {
  margin-right: 28rpx;
}
.m-r-medium {
  margin-right: 40rpx;
}
.m-r-large {
  margin-right: 60rpx;
}
.m-r-extra-large {
  margin-right: 100rpx;
}
.m-t-0 {
  margin-top: 0 !important;
}
.m-b-0 {
  margin-bottom: 0 !important;
}
.m-l-0 {
  margin-left: 0 !important;
}
.m-r-0 {
  margin-right: 0 !important;
}

.p-0 {
  padding: 0 !important;
}
.p-extra-small {
  padding: 8rpx;
}
.p-small {
  padding: 16rpx;
}
.p-base {
  padding: 28rpx;
}
.p-medium {
  padding: 40rpx;
}
.p-large {
  padding: 60rpx;
}
.p-extra-large {
  padding: 100rpx;
}
.p-extra-small-0 {
  padding: 8rpx 0;
}
.p-0-extra-small {
  padding: 0 8rpx;
}
.p-small-0 {
  padding: 16rpx 0;
}
.p-0-small {
  padding: 0 16rpx;
}
.p-base-0 {
  padding: 28rpx 0;
}
.p-0-base {
  padding: 0 28rpx;
}
.p-medium-0 {
  padding: 40rpx 0;
}
.p-0-medium {
  padding: 0 40rpx;
}
.p-large-0 {
  padding: 60rpx 0;
}
.p-0-large {
  padding: 0 60rpx;
}
.p-extra-large-0 {
  padding: 100rpx 0;
}
.p-0-extra-large {
  padding: 0 100rpx;
}
.p-t-extra-small {
  padding-top: 8rpx;
}
.p-t-small {
  padding-top: 16rpx;
}
.p-t-base {
  padding-top: 28rpx;
}
.p-t-medium {
  padding-top: 40rpx;
}
.p-t-large {
  padding-top: 60rpx;
}
.p-t-extra-large {
  padding-top: 100rpx;
}
.p-b-extra-small {
  padding-bottom: 8rpx;
}
.p-b-small {
  padding-bottom: 16rpx;
}
.p-b-base {
  padding-bottom: 28rpx;
}
.p-b-medium {
  padding-bottom: 40rpx;
}
.p-b-large {
  padding-bottom: 60rpx;
}
.p-b-extra-large {
  padding-bottom: 100rpx;
}
.p-l-extra-small {
  padding-left: 8rpx;
}
.p-l-small {
  padding-left: 16rpx;
}
.p-l-base {
  padding-left: 28rpx;
}
.p-l-medium {
  padding-left: 40rpx;
}
.p-l-large {
  padding-left: 60rpx;
}
.p-l-extra-large {
  padding-left: 100rpx;
}
.p-r-extra-small {
  padding-right: 8rpx;
}
.p-r-small {
  padding-right: 16rpx;
}
.p-r-base {
  padding-right: 28rpx;
}
.p-r-medium {
  padding-right: 40rpx;
}
.p-r-large {
  padding-right: 60rpx;
}
.p-r-extra-large {
  padding-right: 100rpx;
}
.p-t-0 {
  padding-top: 0 !important;
}
.p-b-0 {
  padding-bottom: 0 !important;
}
.p-l-0 {
  padding-left: 0 !important;
}
.p-r-0 {
  padding-right: 0 !important;
}

.m-t--1 {
  margin-top: -1px;
}

.p-t-1 {
  padding-top: 1px;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.pos-center {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.pos-x-center {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.pos-y-center {
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.border-box {
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box;
}

.over-scroll {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.over-hidden {
  overflow: hidden;
}

.over-visible {
  overflow: visible;
}

.radius, .radius-base {
  border-radius: 8rpx;
}

.radius-small {
  border-radius: 4rpx;
}

.radius-large {
  border-radius: 24rpx;
}

.radius-circle {
  border-radius: 50%;
}

.shadow, .shadow-base {
  box-shadow: 0 0 6rpx 2rpx rgba(0, 0, 0, 0.05);
}

.shadow-small {
  box-shadow: 0 0 4rpx 2rpx rgba(0, 0, 0, 0.05);
}

.shadow-extra {
  box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.1);
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
  align-content: center;
}

.flex-x-center {
  justify-content: center;
}

.flex-x-between {
  justify-content: space-between;
}

.flex-x-evenly {
  justify-content: space-evenly;
}

.flex-x-around {
  justify-content: space-around;
}

.flex-x-end {
  justify-content: flex-end;
}

.flex-y-start {
  align-items: flex-start;
}

.flex-y-center {
  align-items: center;
}

.flex-y-end {
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-basis-100 {
  flex-basis: 100%;
}

.flex-basis-50 {
  flex-basis: 50%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.f-extra-small {
  font-size: 24rpx;
}
.f-small {
  font-size: 28rpx;
}
.f-base {
  font-size: 32rpx;
}
.f-medium {
  font-size: 36rpx;
}
.f-large {
  font-size: 40rpx;
}
.f-extra-large {
  font-size: 44rpx;
}

.t-center {
  text-align: center;
}

.t-justify {
  text-align: justify;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

.t-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

.t-ellipsis-line2 {
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.t-line-through {
  text-decoration: line-through;
}

.line-h1 {
  line-height: 100%;
}

.line-h1_2 {
  line-height: 1.2;
}

.line-h1_4 {
  line-height: 1.4;
}

.line-h1_6 {
  line-height: 1.6;
}

.line-h1_8 {
  line-height: 1.8;
}

.line-h2 {
  line-height: 2;
}

.line-h3 {
  line-height: 3;
}

.bold {
  font-weight: bold;
}

.clickable {
  cursor: pointer;
}
.clickable:active {
  opacity: 0.8;
}