.btn {
  --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.42);

  --sk-button-color: rgb(255, 255, 255);
  --sk-button-color-hover: var(--sk-button-color);
  --sk-button-color-active: var(--sk-button-color-hover);

  --sk-button-bg: rgba(197, 0, 1, 1);
  --sk-button-bg-hover: rgba(197, 0, 1, 0.8);
  --sk-button-bg-active: var(--sk-button-bg-hover);
  --sk-button-gradient: linear-gradient(
    141.87deg,
    rgba(251, 19, 20, 1),
    rgba(171.89732360839844, 33.598114013671875, 34.19419479370117, 1) 100%
  );

  --sk-button-border-color: transparent;
  --sk-button-border-color-hover: var(--sk-button-border-color);
  --sk-button-border-color-active: var(--sk-button-border-color-hover);
  --sk-button-border-color-disabled: #d9d9d9;

  --sk-button-border-radius: 0.06rem;
  --sk-button-border-radius-lg: 0.08rem;
  --sk-button-border-radius-sm: 0.04rem;

  --sk-button-height: 0.48rem;
  --sk-button-height-lg: 0.6rem;
  --sk-button-height-sm: 0.36rem;

  --sk-button-padding-inline: 0.2rem;
  --sk-button-padding-inline-lg: 0.48rem;
  --sk-button-padding-inline-sm: 0.16rem;

  --sk-button-font-size: 0.16rem;
  --sk-button-font-size-lg: 0.18rem;
  --sk-button-font-size-sm: 0.14rem;
}

.btn {
  box-sizing: border-box;
  outline: none;
  position: relative;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  gap: 0.12rem;
  border: 1px solid var(--sk-button-border-color);
  color: var(--sk-button-color);
  background: var(--sk-button-bg);
}

.btn span {
  position: relative;
  line-height: 22px;
}

.btn i {
  position: relative;
}

.btn:hover {
  color: var(--sk-button-color-hover);
  background: var(--sk-button-bg-hover);
  border-color: var(--sk-button-border-color-hover);
}

.btn:active {
  outline: none;
  color: var(--sk-button-color-active);
  background: var(--sk-button-bg-active);
  border-color: var(--sk-button-border-color-active);
}

.btn:focus-visible {
  outline: 2px solid var(--sk-focus-color, #0071e3);
  outline-offset: var(--sk-focus-offset-container, 3px);
}

/* 按钮尺寸 */
.btn {
  font-size: var(--sk-button-font-size);
  height: var(--sk-button-height);
  padding: 0px var(--sk-button-padding-inline);
  border-radius: var(--sk-button-border-radius);
}

.btn-lg {
  font-size: var(--sk-button-font-size-lg);
  height: var(--sk-button-height-lg);
  padding: 0px var(--sk-button-padding-inline-lg);
  border-radius: var(--sk-button-border-radius-lg);
}

.btn-sm {
  font-size: var(--sk-button-font-size-sm);
  height: var(--sk-button-height-sm);
  padding: 0px var(--sk-button-padding-inline-sm);
  border-radius: var(--sk-button-border-radius-sm);
}

.btn.block {
  width: 100% !important;
}

/* 圆角按钮 */
.btn.btn-round {
  border-radius: 980px;
}

/* Block 按钮 */
.btn.btn-block {
  width: 100%;
}

/* 颜色和变体 */

.btn.btn-dashed {
  border-style: dashed;
}

.btn.btn-outlined,
.btn.btn-dashed {
  --sk-button-bg: #fff;
  --sk-button-bg-hover: #fff;

  --sk-button-color: rgba(0, 0, 0, 0.88);
  --sk-button-color-hover: var(--primary-color);

  --sk-button-border-color: #d9d9d9;
  --sk-button-border-color-hover: var(--primary-color);
}

.btn.btn-primary {
  box-shadow: -8px 8px 28px 0px rgba(0, 0, 0, 0.06);
}

.btn-primary.btn-outlined,
.btn-primary.btn-dashed {
  --sk-button-bg: #fff;
  --sk-button-bg-hover: #fff;

  --sk-button-color: var(--main-color);
  --sk-button-color-hover: var(--primary-color);

  --sk-button-border-color: var(--main-color);
  --sk-button-border-color-hover: var(--primary-color);
}

.btn.disabled,
.btn:disabled {
  pointer-events: none;
  opacity: var(--sk-button-disabled-opacity);
}

/* 渐变按钮 */
.btn.btn-linear-gradient::before,
.btn-default.btn-ghost:before {
  content: "";
  box-shadow: -0.08rem 0.08rem 0.28rem 0px rgba(0, 0, 0, 0.06);
  background: var(--sk-button-gradient);
  position: absolute;
  inset: -1px;
  opacity: 1;
  transition: all 0.3s;
  border-radius: inherit;
}

.btn.btn-linear-gradient:hover::before {
  opacity: 0;
}

/* 幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上 */
.btn-default.btn-ghost {
  --sk-button-color: #232323;
  --sk-button-color-hover: #fff;
  --sk-button-border-color: #8b8b8b;
  --sk-button-border-color-hover: var(--primary-color);

  background: var(--sk-button-ghost-bg);
  box-shadow: none;
}

.btn-default.btn-ghost::before {
  opacity: 0;
}

.btn-default.btn-ghost:hover::before {
  opacity: 1;
}

.btn-primary.btn-ghost {
  color: var(--primary-color);
  background: var(--sk-button-ghost-bg);
  border-color: var(--primary-color);
  box-shadow: none;
}

@media only screen and (max-width: 767px) {
  .btn {
    --sk-button-border-radius: 6px;
    --sk-button-border-radius-lg: 8px;
    --sk-button-border-radius-sm: 4px;

    --sk-button-height: 36px;
    --sk-button-height-lg: 40px;
    --sk-button-height-sm: 28px;

    --sk-button-padding-inline: 16px;
    --sk-button-padding-inline-lg: 20px;
    --sk-button-padding-inline-sm: 12px;

    --sk-button-font-size: 14px;
    --sk-button-font-size-lg: 16px;
    --sk-button-font-size-sm: 12px;
  }
}

/* 字体大小 */

:root {
  --font72: 0.72rem;
  --font60: 0.6rem;
  --font48: 0.48rem;
  --font44: 0.44rem;
  --font42: 0.42rem;
  --font40: 0.4rem;
  --font36: 0.36rem;
  --font32: 0.32rem;
  --font30: 0.3rem;
  --font28: 0.28rem;
  --font26: 0.26rem;
  --font24: 0.24rem;
  --font22: 0.22rem;
  --font20: 0.2rem;
  --font18: 0.18rem;
  --font16: 0.16rem;
  --font14: 0.14rem;

  --padding8: 0.08rem;
  --padding12: 0.12rem;
  --padding16: 0.16rem;
  --padding20: 0.2rem;
  --padding24: 0.24rem;
  --padding28: 0.28rem;
  --padding32: 0.32rem;
  --padding36: 0.36rem;
  --padding40: 0.4rem;
  --padding48: 0.48rem;
  --padding52: 0.52rem;
  --padding56: 0.56rem;
  --padding60: 0.6rem;
  --padding64: 0.64rem;
  --padding68: 0.68rem;
  --padding72: 0.72rem;
  --padding80: 0.8rem;
  --padding88: 0.88rem;
  --padding92: 0.92rem;
  --padding96: 0.96rem;
  --padding100: 1rem;
  --padding112: 1.12rem;

  --icon66: 0.66rem;
  --icon60: 0.6rem;
  --icon48: 0.48rem;
  --icon32: 0.32rem;
  --icon28: 0.28rem;
}

@media screen and (max-width: 767px) {
  :root {
    --font72: 24px;
    --font60: 24px;
    --font48: 20px;
    --font44: 20px;
    --font42: 20px;
    --font40: 20px;
    --font36: 18px;
    --font32: 16px;
    --font30: 16px;
    --font28: 14px;
    --font26: 14px;
    --font24: 14px;
    --font22: 14px;
    --font20: 14px;
    --font18: 14px;
    --font16: 14px;
    --font14: 12px;

    --padding8: 4px;
    --padding12: 4px;
    --padding16: 8px;
    --padding20: 8px;
    --padding24: 12px;
    --padding28: 12px;
    --padding32: 12px;
    --padding36: 12px;
    --padding40: 20px;
    --padding48: 20px;
    --padding52: 20px;
    --padding56: 20px;
    --padding60: 24px;
    --padding64: 24px;
    --padding68: 24px;
    --padding72: 24px;
    --padding80: 24px;
    --padding88: 24px;
    --padding92: 24px;
    --padding96: 24px;
    --padding100: 24px;
    --padding112: 28px;

    --icon66: 28px;
    --icon60: 24px;
    --icon48: 24px;
    --icon32: 24px;
    --icon28: 24px;
  }
}

/* flex list */

.flex-list {
  --gap: 12px;
  --item-margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
  .flex-list {
    --gap: 0.2rem;
    --item-margin-bottom: 0.4rem;
  }
}

.flex-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--gap) * -1);
}

.flex-list > li {
  display: block;
  box-sizing: border-box;
  padding: 0 var(--gap);
  margin-bottom: var(--item-margin-bottom);
}

.flex-list.col-3 > li {
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.flex-list.col-4 > li {
  flex: 0 0 16.666666666666664%;
  max-width: 16.666666666666664%;
}

.flex-list.col-6 > li {
  flex: 0 0 25%;
  max-width: 25%;
}

.flex-list.col-8 > li {
  flex: 0 0 33.33333333333333%;
  max-width: 33.33333333333333%;
}

.flex-list.col-12 > li {
  flex: 0 0 50%;
  max-width: 50%;
}

@media only screen and (max-width: 767px) {
  .flex-list {
  }

  .flex-list > li {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .flex-list > li:last-child {
    margin-bottom: 0;
  }
}