/* 公共样式 */
/** 透明度 */
.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* === 对齐 === */
/** 文本对齐 */
.text-center, .tc {
  text-align: center !important;
}

.text-left, .tl {
  text-align: left !important;
}

.text-right, .tr {
  text-align: right !important;
}

.text-top, .tt {
  vertical-align: top !important;
}

.text-bottom, .tb {
  vertical-align: bottom !important;
}

.text-middle, .tm {
  vertical-align: middle !important;
}

/** 浮动对齐 */
.float-left, .fl {
  float: left !important;
}

.float-right, .fr {
  float: right !important;
}

.float-none, .fn {
  float: none !important;
}

.float-auto, .fa {
  float: auto !important;
}

.float-center, .fc {
  margin: 0 auto !important;
}

/** 清除对齐 */
.clear-both, .cb {
  clear: both;
}
.clear-left, .cl {
  clear: left;
}
.clear-right, .cr {
  clear: right;
}

/** 位置对齐 */
.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

/** 水品居中 */
.position-center {
  left: 50%;
  transform: translateX(-50%) !important;
}

/** 垂直居中 */
.position-middle {
  top: 50%;
  transform: translateY(-50%) !important;
}

.center {
  margin: 0 auto !important;
  text-align: center !important;
  vertical-align: middle !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
}

/* === 填充 === */
/* 全部填充 */
.padding_all,
.pa {
  padding: var(--spacing_base) !important;
}

.padding_all-none,
.pa-none {
  padding: 0 !important;
}

.padding_all-sm,
.pa-sm {
  padding: var(--spacing_sm) !important;
}

.padding_all-md,
.pa-md {
  padding: var(--spacing_md) !important;
}

.padding_all-lg,
.pa-lg {
  padding: var(--spacing_lg) !important;
}

.padding_all-xl,
.pa-xl {
  padding: var(--spacing_xl) !important;
}

/* 左侧填充 */
.padding_left,
.pl {
  padding-left: var(--spacing_base) !important;
}

.padding_left-none,
.pl-none {
  padding-left: 0 !important;
}

.padding_left-sm,
.pl-sm {
  padding-left: var(--spacing_sm) !important;
}

.padding_left-md,
.pl-md {
  padding-left: var(--spacing_md) !important;
}

.padding_left-lg,
.pl-lg {
  padding-left: var(--spacing_lg) !important;
}

.padding_left-xl,
.pl-xl {
  padding-left: var(--spacing_xl) !important;
}

/* 右侧填充 */
.padding_right,
.pr {
  padding-right: var(--spacing_base) !important;
}

.padding_right-none,
.pr-none {
  padding-right: 0 !important;
}

.padding_right-sm,
.pr-sm {
  padding-right: var(--spacing_sm) !important;
}

.padding_right-md,
.pr-md {
  padding-right: var(--spacing_md) !important;
}

.padding_right-lg,
.pr-lg {
  padding-right: var(--spacing_lg) !important;
}

.padding_right-xl,
.pr-xl {
  padding-right: var(--spacing_xl) !important;
}

/* 顶部填充 */
.padding_top,
.pt {
  padding-top: var(--spacing_base) !important;
}

.padding_top-none,
.pt-none {
  padding-top: 0 !important;
}

.padding_top-sm,
.pt-sm {
  padding-top: var(--spacing_sm) !important;
}

.padding_top-md,
.pt-md {
  padding-top: var(--spacing_md) !important;
}

.padding_top-lg,
.pt-lg {
  padding-top: var(--spacing_lg) !important;
}

.padding_top-xl,
.pt-xl {
  padding-top: var(--spacing_xl) !important;
}

/* 底部填充 */
.padding_bottom,
.pb {
  padding-bottom: var(--spacing_base) !important;
}

.padding_bottom-none,
.pb-none {
  padding-bottom: 0 !important;
}

.padding_bottom-sm,
.pb-sm {
  padding-bottom: var(--spacing_sm) !important;
}

.padding_bottom-md,
.pb-md {
  padding-bottom: var(--spacing_md) !important;
}

.padding_bottom-lg,
.pb-lg {
  padding-bottom: var(--spacing_lg) !important;
}

.padding_bottom-xl,
.pb-xl {
  padding-bottom: var(--spacing_xl) !important;
}


/* === 间距 === */
/* 全部间距 */
.margin_all,
.ma {
  margin: var(--spacing_base) !important;
}

.margin_all-none,
.ma-none {
  margin: 0 !important;
}

.margin_all-sm,
.ma-sm {
  margin: var(--spacing_sm) !important;
}

.margin_all-md,
.ma-md {
  margin: var(--spacing_md) !important;
}

.margin_all-lg,
.ma-lg {
  margin: var(--spacing_lg) !important;
}

.margin_all-xl,
.ma-xl {
  margin: var(--spacing_xl) !important;
}

.margin_all-auto,
.ma-auto {
  margin: auto !important;
}

/* 左侧间距 */
.margin_left,
.ml {
  margin-left: var(--spacing_base) !important;
}

.margin_left-none,
.ml-none {
  margin-left: 0 !important;
}

.margin_left-sm,
.ml-sm {
  margin-left: var(--spacing_sm) !important;
}

.margin_left-md,
.ml-md {
  margin-left: var(--spacing_md) !important;
}

.margin_left-lg,
.ml-lg {
  margin-left: var(--spacing_lg) !important;
}

.margin_left-xl,
.ml-xl {
  margin-left: var(--spacing_xl) !important;
}

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

/* 右侧间距 */
.margin_right,
.mr {
  margin-right: var(--spacing_base) !important;
}

.margin_right-none,
.mr-none {
  margin-right: 0 !important;
}

.margin_right-sm,
.mr-sm {
  margin-right: var(--spacing_sm) !important;
}

.margin_right-md,
.mr-md {
  margin-right: var(--spacing_md) !important;
}

.margin_right-lg,
.mr-lg {
  margin-right: var(--spacing_lg) !important;
}

.margin_right-xl,
.mr-xl {
  margin-right: var(--spacing_xl) !important;
}

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

/* 顶部间距 */
.margin_top,
.mt {
  margin-top: var(--spacing_base) !important;
}

.margin_top-none,
.mt-none {
  margin-top: 0 !important;
}

.margin_top-sm,
.mt-sm {
  margin-top: var(--spacing_sm) !important;
}

.margin_top-md,
.mt-md {
  margin-top: var(--spacing_md) !important;
}

.margin_top-lg,
.mt-lg {
  margin-top: var(--spacing_lg) !important;
}

.margin_top-xl,
.mt-xl {
  margin-top: var(--spacing_xl) !important;
}

.margin_top-auto,
.mt-auto {
  margin-top: auto !important;
}

/* 底部间距 */
.margin_bottom,
.mb {
  margin-bottom: var(--spacing_base) !important;
}

.margin_bottom-none,
.mb-none {
  margin-bottom: 0 !important;
}

.margin_bottom-sm,
.mb-sm {
  margin-bottom: var(--spacing_sm) !important;
}

.margin_bottom-md,
.mb-md {
  margin-bottom: var(--spacing_md) !important;
}

.margin_bottom-lg,
.mb-lg {
  margin-bottom: var(--spacing_lg) !important;
}

.margin_bottom-xl,
.mb-xl {
  margin-bottom: var(--spacing_xl) !important;
}

.margin_bottom-auto,
.mb-auto {
  margin-bottom: auto !important;
}

/* === 边框 === */
/* 全部边框 */
.border_all,
.ba {
  border-width: var(--spacing_base) !important;
}

.border_all-none,
.ba-none {
  border-width: 0 !important;
}

.border_all-sm,
.ba-sm {
  border-width: var(--spacing_sm) !important;
}

.border_all-md,
.ba-md {
  border-width: var(--spacing_md) !important;
}

.border_all-lg,
.ba-lg {
  border-width: var(--spacing_lg) !important;
}

.border_all-xl,
.ba-xl {
  border-width: var(--spacing_xl) !important;
}

/* 左侧边框 */
.border_left,
.bl {
  border-left: var(--spacing_base) !important;
}

.border_left-none,
.bl-none {
  border-left: 0 !important;
}

.border_left-sm,
.bl-sm {
  border-left: var(--spacing_sm) !important;
}

.border_left-md,
.bl-md {
  border-left: var(--spacing_md) !important;
}

.border_left-lg,
.bl-lg {
  border-left: var(--spacing_lg) !important;
}

.border_left-xl,
.bl-xl {
  border-left: var(--spacing_xl) !important;
}

/* 右侧边框 */
.border_right,
.br {
  border-right: var(--spacing_base) !important;
}

.border_right-none,
.br-none {
  border-right: 0 !important;
}

.border_right-sm,
.br-sm {
  border-right: var(--spacing_sm) !important;
}

.border_right-md,
.br-md {
  border-right: var(--spacing_md) !important;
}

.border_right-lg,
.br-lg {
  border-right: var(--spacing_lg) !important;
}

.border_right-xl,
.br-xl {
  border-right: var(--spacing_xl) !important;
}

/* 顶部边框 */
.border_top,
.bt {
  border-top: var(--spacing_base) !important;
}

.border_top-none,
.bt-none {
  border-top: 0 !important;
}

.border_top-sm,
.bt-sm {
  border-top: var(--spacing_sm) !important;
}

.border_top-md,
.bt-md {
  border-top: var(--spacing_md) !important;
}

.border_top-lg,
.bt-lg {
  border-top: var(--spacing_lg) !important;
}

.border_top-xl,
.bt-xl {
  border-top: var(--spacing_xl) !important;
}

/* 底部边框 */
.border_bottom,
.bb {
  border-bottom: var(--spacing_base) !important;
}

.border_bottom-none,
.bb-none {
  border-bottom: 0 !important;
}

.border_bottom-sm,
.bb-sm {
  border-bottom: var(--spacing_sm) !important;
}

.border_bottom-md,
.bb-md {
  border-bottom: var(--spacing_md) !important;
}

.border_bottom-lg,
.bb-lg {
  border-bottom: var(--spacing_lg) !important;
}

.border_bottom-xl,
.bb-xl {
  border-bottom: var(--spacing_xl) !important;
}

/* === 圆角 === */
/* 全部圆角 */
.radius_all,
.ra {
  border-radius: var(--radius_base) !important;
}

.radius_all-none,
.ra-none {
  border-radius: 0 !important;
}

.radius_all-sm,
.ra-sm {
  border-radius: var(--radius_sm) !important;
}

.radius_all-md,
.ra-md {
  border-radius: var(--radius_md) !important;
}

.radius_all-lg,
.ra-lg {
  border-radius: var(--radius_lg) !important;
}

.radius_all-xl,
.ra-xl {
  border-radius: var(--radius_lg) !important;
}

.radius_all-xl,
.ra-xl {
  border-radius: var(--radius_xl) !important;
}

.radius_all-round,
.ra-round {
  border-radius: 50% !important;
}

/* 左侧圆角 */
.radius_left,
.rl {
  border-top-left-radius: var(--radius_base) !important;
  border-bottom-left-radius: var(--radius_base) !important;
}

.radius_left-none,
.rl-none {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.radius_left-sm,
.rl-sm {
  border-top-left-radius: var(--radius_sm) !important;
  border-bottom-left-radius: var(--radius_sm) !important;
}

.radius_left-md,
.rl-md {
  border-top-left-radius: var(--radius_md) !important;
  border-bottom-left-radius: var(--radius_md) !important;
}

.radius_left-lg,
.rl-lg {
  border-top-left-radius: var(--radius_lg) !important;
  border-bottom-left-radius: var(--radius_lg) !important;
}

.radius_left-xl,
.rl-xl {
  border-top-left-radius: var(--radius_lg) !important;
  border-bottom-left-radius: var(--radius_lg) !important;
}

.radius_left-xl,
.rl-xl {
  border-top-left-radius: var(--radius_xl) !important;
  border-bottom-left-radius: var(--radius_xl) !important;
}

.radius_left-round,
.rl-round {
  border-top-left-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}

/** 右侧圆角 **/
.radius_right,
.rr {
  border-top-right-radius: var(--radius_base) !important;
  border-bottom-right-radius: var(--radius_base) !important;
}

.radius_right-none,
.rr-none {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.radius_right-sm,
.rr-sm {
  border-top-right-radius: var(--radius_sm) !important;
  border-bottom-right-radius: var(--radius_sm) !important;
}

.radius_right-md,
.rr-md {
  border-top-right-radius: var(--radius_md) !important;
  border-bottom-right-radius: var(--radius_md) !important;
}

.radius_right-lg,
.rr-lg {
  border-top-right-radius: var(--radius_lg) !important;
  border-bottom-right-radius: var(--radius_lg) !important;
}

.radius_right-xl,
.rr-xl {
  border-top-right-radius: var(--radius_lg) !important;
  border-bottom-right-radius: var(--radius_lg) !important;
}

.radius_right-xl,
.rr-xl {
  border-top-right-radius: var(--radius_xl) !important;
  border-bottom-right-radius: var(--radius_xl) !important;
}

.radius_right-round,
.rr-round {
  border-top-right-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}

/* 顶部左侧圆角 */
.radius_top_left-none,
.rtl-none {
  border-top-left-radius: 0 !important;
}

.radius_top_left-sm,
.rtl-sm {
  border-top-left-radius: var(--radius_sm) !important;
}

.radius_top_left-md,
.rtl-md {
  border-top-left-radius: var(--radius_md) !important;
}

.radius_top_left-lg,
.rtl-lg {
  border-top-left-radius: var(--radius_lg) !important;
}

.radius_top_left-xl,
.rtl-xl {
  border-top-left-radius: var(--radius_xl) !important;
}

.radius_top_left-round,
.rtl-round {
  border-top-left-radius: 50% !important;
}

/* 顶部右侧圆角 */
.radius_top_right-none,
.rtr-none {
  border-top-right-radius: 0 !important;
}

.radius_top_right-sm,
.rtr-sm {
  border-top-right-radius: var(--radius_sm) !important;
}

.radius_top_right-md,
.rtr-md {
  border-top-right-radius: var(--radius_md) !important;
}

.radius_top_right-lg,
.rtr-lg {
  border-top-right-radius: var(--radius_lg) !important;
}

.radius_top_right-xl,
.rtr-xl {
  border-top-right-radius: var(--radius_xl) !important;
}

.radius_top_right-round,
.rtr-round {
  border-top-right-radius: 50% !important;
}

/* 底部左侧圆角 */
.radius_bottom_left-none,
.rbl-none {
  border-bottom-left-radius: 0 !important;
}

.radius_bottom_left-sm,
.rbl-sm {
  border-bottom-left-radius: var(--radius_sm) !important;
}

.radius_bottom_left-md,
.rbl-md {
  border-bottom-left-radius: var(--radius_md) !important;
}

.radius_bottom_left-lg,
.rbl-lg {
  border-bottom-left-radius: var(--radius_lg) !important;
}

.radius_bottom_left-xl,
.rbl-xl {
  border-bottom-left-radius: var(--radius_xl) !important;
}

.radius_bottom_left-round,
.rbl-round {
  border-bottom-left-radius: 50% !important;
}

/* 底部右侧圆角 */
.radius_bottom_right-none,
.rbr-none {
  border-bottom-right-radius: 0 !important;
}

.radius_bottom_right-sm,
.rbr-sm {
  border-bottom-right-radius: var(--radius_sm) !important;
}

.radius_bottom_right-md,
.rbr-md {
  border-bottom-right-radius: var(--radius_md) !important;
}

.radius_bottom_right-lg,
.rbr-lg {
  border-bottom-right-radius: var(--radius_lg) !important;
}

.radius_bottom_right-xl,
.rbr-xl {
  border-bottom-right-radius: var(--radius_xl) !important;
}

.radius_bottom_right-round,
.rbr-round {
  border-bottom-right-radius: var(--radius_round) !important;
}

/* === 尺寸 === */
/* 方形*/
.square {
  width: var(--img_size_base);
  height: var(--img_size_base);
}

.square-sm {
  width: var(--img_size_sm);
  height: var(--img_size_sm);
}

.square-md {
  width: var(--img_size_md);
  height: var(--img_size_md);
}

.square-lg {
  width: var(--img_size_lg);
  height: var(--img_size_lg);
}

.square-xl {
  width: var(--img_size_xl);
  height: var(--img_size_xl);
}

.square-xxl {
  width: var(--img_size_xxl);
  height: var(--img_size_xxl);
}

.square-auto {
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
}

/* 长方形垂直 */
.rect34 {
  aspect-ratio: 4/3;
  width: var(--img_size_base);
  height: auto;
}

.rect34-sm {
  aspect-ratio: 3/4;
  width: var(--img_size_sm);
  height: auto;
}

.rect34-md {
  aspect-ratio: 3/4;
  width: var(--img_size_md);
  height: auto;
}

.rect34-lg {
  aspect-ratio: 3/4;
  width: var(--img_size_lg);
  height: auto;
}

.rect34-xl {
  aspect-ratio: 3/4;
  width: var(--img_size_xl);
  height: auto;
}

.rect34-xxl {
  aspect-ratio: 3/4;
  width: var(--img_size_xxl);
  height: auto;
}

.rect34-auto {
  aspect-ratio: 3/4;
  width: 100%;
  height: auto;
}

.rect916 {
  aspect-ratio: 9/16;
  width: var(--img_size_base);
  height: auto;
}

.rect916-sm {
  aspect-ratio: 9/16;
  width: var(--img_size_sm);
  height: auto;
}

.rect916-md {
  aspect-ratio: 9/16;
  width: var(--img_size_md);
  height: auto;
}

.rect916-lg {
  aspect-ratio: 9/16;
  width: var(--img_size_lg);
  height: auto;
}

.rect916-xl {
  aspect-ratio: 9/16;
  width: var(--img_size_xl);
  height: auto;
}

.rect916-xxl {
  aspect-ratio: 9/16;
  width: var(--img_size_xxxl);
  height: auto;
}

.rect916-auto {
  aspect-ratio: 9/16;
  width: 100%;
  height: auto;
}


/* 长方形水平 */
.rect43 {
  aspect-ratio: 4/3;
  width: var(--img_size_base);
  height: auto;
}

.rect43-sm {
  aspect-ratio: 4/3;
  width: var(--img_size_sm);
  height: auto;
}

.rect43-md {
  aspect-ratio: 4/3;
  width: var(--img_size_md);
  height: auto;
}

.rect43-lg {
  aspect-ratio: 4/3;
  width: var(--img_size_lg);
  height: auto;
}

.rect43-xl {
  aspect-ratio: 4/3;
  width: var(--img_size_xl);
  height: auto;
}

.rect43-xxl {
  aspect-ratio: 4/3;
  width: var(--img_size_xxl);
  height: auto;
}

.ract43-auto {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
}

.rect169 {
  aspect-ratio: 16/9;
  width: var(--img_size_base);
  height: auto;
}

.rect169-sm {
  aspect-ratio: 16/9;
  width: var(--img_size_sm);
  height: auto;
}

.rect169-md {
  aspect-ratio: 16/9;
  width: var(--img_size_md);
  height: auto;
}

.rect169-lg {
  aspect-ratio: 16/9;
  width: var(--img_size_lg);
  height: auto;
}

.rect169-xl {
  aspect-ratio: 16/9;
  width: var(--img_size_xl);
  height: auto;
}

.rect169-xxl {
  aspect-ratio: 16/9;
  width: var(--img_size_xxxl);
  height: auto;
}

.rect169-auto {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}