.reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.inherit {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}

/* flex */
.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-center {
  align-items: center;
  justify-content: center;
}
.flex-items-center {
  align-items: center;
}
.flex-items-start {
  align-items: flex-start;
}
.flex-items-end {
  align-items: flex-end;
}
.flex-justify-center {
  justify-content: center;
}
.flex-justify-end {
  justify-content: flex-end;
}
.flex-justify-between {
  justify-content: space-between;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-1 {
  flex: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
/* 位置 */
.top-left {
  align-items: flex-start;
  justify-content: flex-start;
}
.top-center {
  align-items: flex-start;
  justify-content: center;
}
.top-right {
  align-items: flex-start;
  justify-content: flex-end;
}
.center-left {
  align-items: center;
  justify-content: flex-start;
}
.center-center {
  align-items: center;
  justify-content: center;
}
.center-right {
  align-items: center;
  justify-content: flex-end;
}
.bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
}
.bottom-center {
  align-items: flex-end;
  justify-content: center;
}
.bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
}

.skt-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: rgba(var(--bg-color), var(--bg-alpha)) !important;
  border-color: rgba(var(--border-color), var(--border-alpha)) !important;
  color: var(--text-color, #fff) !important;
}
.sktButton,
.skt-button,
.sktButtonActive {
  --border-radius: 4px;
  outline: none;
  border: 1px solid;
  padding: 15px clamp(15px, 2vw, 24px);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--border-radius);
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: 0.5s ease;
  /* min-height: 40px !important; */
  cursor: pointer;
  overflow: hidden;
  background-color: var(--bg-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color, #fff) !important;
}
.sktButton,
.skt-button::after,
.sktButton.skt-button::before {
  content: none !important;
}
.sktButton:hover,
.skt-button:hover,
.sktButton.active,
.skt-button.active,
.sktButtonActive.active {
  background-color: var(--active-bg-color, transparent) !important;
  border-color: var(--active-border-color, transparent) !important;
  color: var(--active-text-color, #000) !important;
}

.sktButton-v1 {
  border: 1.5px solid;
  background-color: rgba(var(--bg-color), var(--bg-alpha));
  border-color: rgba(var(--border-color), var(--border-alpha));
  color: var(--text-color, #fff);
}
.sktButton-v1.active {
  background-color: var(--active-bg-color, transparent);
  border-color: var(--active-border-color, transparent);
  color: var(--active-text-color, #000);
}
.sktButtonV2 {
  border: 1.5px solid;
  background-color: rgba(var(--bg-color), var(--bg-alpha));
  border-color: rgba(var(--border-color), var(--border-alpha));
  color: var(--text-color, #fff);
}
.sktButtonV2:hover {
  background-color: var(--active-bg-color, transparent);
  border-color: var(--active-border-color, transparent);
  color: var(--active-text-color, #000);
}

.d-show {
  display: flex !important;
  opacity: 1;
  overflow: visible;
  visibility: visible;
}
.d-hide {
  display: none !important;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}

/* display */
.d-block {
  display: block;
}
.d-none {
  display: none;
}
.d-flex {
  display: flex;
}
.d-grid {
  display: grid;
}
.d-inline-flex {
  display: inline-flex;
}

/* flex */
.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-center {
  align-items: center;
  justify-content: center;
}
.flex-items-justify {
  align-items: center;
  justify-content: space-between;
}
.flex-items-center {
  align-items: center;
}
.flex-items-start {
  align-items: flex-start;
}
.flex-items-end {
  align-items: flex-end;
}
.flex-justify-center {
  justify-content: center;
}
.flex-justify-end {
  justify-content: flex-end;
}
.flex-justify-between {
  justify-content: space-between;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-1 {
  flex: 1;
}
.flex-shrink {
  flex-shrink: 0;
}

/* gird */
.d-row-8 {
  grid-template-columns: repeat(8, 1fr);
}
.d-row-7 {
  grid-template-columns: repeat(7, 1fr);
}
.d-row-6 {
  grid-template-columns: repeat(6, 1fr);
}
.d-row-5 {
  grid-template-columns: repeat(5, 1fr);
}
.d-row-4 {
  grid-template-columns: repeat(4, 1fr);
}
.d-row-3 {
  grid-template-columns: repeat(3, 1fr);
}
.d-row-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* width */
.w-auto {
  width: auto;
}
.w-max-100 {
  max-width: 100%;
}
.w-100 {
  width: 100%;
}
.w-70 {
  width: 70%;
}
.w-60 {
  width: 60%;
}
.w-55 {
  width: 55%;
}
.w-50 {
  width: 50%;
}
.w-45 {
  width: 45%;
}
.w-40 {
  width: 40%;
}
.w-35 {
  width: 35%;
}
.w-33 {
  width: 33.33%;
}
.w-30 {
  width: 30%;
}
.w-25 {
  width: 25%;
}
.w-20 {
  width: 20%;
}
.w-15 {
  width: 15%;
}

/* height */
.h-auto {
  height: auto;
}
.h-100 {
  height: 100%;
}

/* cursor */
.cursor-p {
  cursor: pointer;
}

/* text */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-decoration-none {
  text-decoration: none;
}
.content-inherit ul,
.content-inherit ol,
.content-inherit li,
.content-inherit a,
.content-inherit span,
.content-inherit div,
.content-inherit p {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  line-height: inherit;
}

.content-reset * {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.content-element-gap * {
  margin-bottom: var(--margin-bottom, 10px) !important;
}
.content-element-gap p:nth-last-child(1) {
  margin-bottom: 0 !important;
}
.color-inherit * {
  color: inherit !important;
}
.font-size-inherit * {
  font-size: inherit !important;
}
.line-height-inherit * {
  line-height: inherit !important;
}

/* position */
.relative,
.element-cover,
.target-cover,
.m-element-cover {
  position: relative;
}

.d-sticky {
  position: sticky;
  top: 0;
}

.absolute-100,
.m-absolute-100,
.element-cover::after,
.target-cover::after,
.skt-image-secondary,
.m-element-cover::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.element-cover::after,
.target-cover::after {
  content: " " !important;
}
/* index */
.index-min {
  z-index: -1;
}
.index-0 {
  z-index: 0;
}
.index-1 {
  z-index: 1;
}
.index-2 {
  z-index: 2;
}
.index-3 {
  z-index: 3;
}

/* image */
.fit-contain {
  object-fit: contain;
}
.fit-cover {
  object-fit: cover;
}
.fit-none {
  object-fit: none;
}

/* icon */
.skt-icon img,
.skt-icon svg {
  width: var(--icon-size) !important;
  height: auto !important;
  fill: currentColor !important;
  object-fit: contain !important;
}
.sktIcon svg {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  fill: currentColor !important;
  max-width: clamp(var(--mobile-size), var(--icon-ratio), var(--desktop-size));
}

/* overflow */
.overflow-hidden {
  overflow: hidden;
}

/* hover */
.hover-scale,
.hover-scale-el {
  --scale: 1.05;
}
.hover-translateY,
.hover-translateY-el {
  --y: -10px;
}

.hover-scale:hover {
  transform: scale(var(--scale));
}
.hover-translateY:hover {
  transform: translateY(var(-y));
}
.hover-scale-el:hover .hover-el {
  transform: scale(var(--scale));
}
.hover-translateY-el:hover .hover-el {
  transform: translateY(var(-y));
}

.hover-scale,
.hover-scale-el .hover-el,
.hover-translateY,
.hover-translateY-el .hover-el {
  transition: 0.3s;
}

@media only screen and (max-width: 1024px) {
  /* flex */
  .f-flex-d-column {
    flex-direction: column !important;
  }
  .f-flex-d-row {
    flex-direction: row !important;
  }

  .f-row-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .f-row-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .f-row-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* width */
  .f-width-100 {
    width: 100% !important;
  }
  .f-width-50 {
    width: 50% !important;
  }
  .f-width-33 {
    width: 33.33% !important;
  }

  .f-show {
    display: flex !important;
    opacity: 1;
    overflow: visible;
    visibility: visible;
  }
  .f-hide {
    display: none !important;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

@media only screen and (max-width: 767px) {
  .m-row-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .m-row-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .m-row-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  /*  */
  .m-show {
    display: block !important;
    opacity: 1;
    overflow: visible;
    visibility: visible;
  }
  .m-hide {
    display: none !important;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
  }
  .m-flex {
    display: flex !important;
  }

  /* flex */
  .m-flex-wrap {
    flex-wrap: wrap !important;
  }
  .m-flex-d-column {
    flex-direction: column !important;
  }
  .m-flex-d-row {
    flex-direction: row !important;
  }
  .m-items-center {
    align-items: center !important;
    justify-content: center !important;
  }
  .m-items-start {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .m-justify-center {
    justify-content: center !important;
  }
  .m-justify-end {
    justify-content: flex-end !important;
  }
  .m-justify-between {
    justify-content: space-between !important;
  }
  /* order */
  .m-order-1 {
    order: 1 !important;
  }
  .m-order-2 {
    order: 2 !important;
  }
  .m-order-3 {
    order: 3 !important;
  }

  /* width */
  .m-width-100 {
    width: 100% !important;
    max-width: 100% !important;
  }
  .m-width-50 {
    width: 50% !important;
  }
  .m-width-33 {
    width: 33.33% !important;
  }
  .m-max-width-100 {
    max-width: 100% !important;
  }

  /* position */
  .m-element-cover::after {
    content: " ";
  }

  /* image */
  .sktImageMinHeight {
    min-height: var(--image-height-mobile);
  }
  .sktImageAspectRatio {
    padding-bottom: var(--mo-image-aspect-ratio);
  }

  /* 位置方向 */
  .m-top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .m-top-center {
    align-items: flex-start;
    justify-content: center;
  }
  .m-top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }
  .m-center-left {
    align-items: center;
    justify-content: flex-start;
  }
  .m-center-center {
    align-items: center;
    justify-content: center;
  }
  .m-center-right {
    align-items: center;
    justify-content: flex-end;
  }
  .m-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }
  .m-bottom-center {
    align-items: flex-end;
    justify-content: center;
  }
  .m-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }

  /* text */
  .m-text-center {
    text-align: center;
  }
  .m-text-right {
    text-align: right;
  }
  .m-text-left {
    text-align: left;
  }
}

.skt-image[style*="--aspect-ratio"] {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.skt-image-secondary {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.skt-image:hover .skt-image-secondary {
  opacity: 1;
}
.skt-image[style*="--aspect-ratio"] img,
.skt-image[style*="--aspect-ratio"] video {
  backface-visibility: hidden;
  object-fit: var(--object-fit, cover);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.skt-image[style*="--aspect-ratio"]:before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(100% / (0 + var(--aspect-ratio, 1 / 1)));
}
@media only screen and (max-width: 767px) {
  .skt-image[style*="--aspect-ratio"]:before {
    padding-top: calc(100% / (0 + var(--mobile-aspect-ratio, 1 / 1)));
  }
}

@media only screen and (min-width: 767px) {
  /* hover */
  .hover-scale,
  .hover-scale-el {
    --scale: 1.05;
  }
  .hover-translateY,
  .hover-translateY-el {
    --y: -10px;
  }

  .hover-scale:hover {
    transform: scale(var(--scale));
  }
  .hover-translateY:hover {
    transform: translateY(var(-y));
  }

  .hover-scale-el:hover .hover-el {
    transform: scale(var(--scale));
  }
  .hover-translateY-el:hover .hover-el {
    transform: translateY(var(-y));
  }

  .hover-scale,
  .hover-scale-el .hover-el,
  .hover-translateY,
  .hover-translateY-el .hover-el {
    transition: 0.3s;
  }
}

.skt-cover-wrapper {
  background-color: var(--bg-color);
}

/* ==============================================重置============================================== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ============================================== 禁止 ============================================== */
.user-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* 标准语法 */
}

/* ============================================== swiper ============================================== */
.skt-swiper-pagination {
  position: static !important;
  margin-top: 20px;
}
.skt-swiper-pagination.line {
  --swiper-pagination-bullet-width: 25px;
  --swiper-pagination-bullet-height: 6px;
  --swiper-pagination-active-bullet-width: 25px;
}
.skt-swiper-pagination.line .swiper-pagination-bullet {
  border-radius: 0;
  transition: 0.3s;
}
.skt-swiper-pagination.line
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: var(--swiper-pagination-active-bullet-width);
}

.skt-swiper-button {
  --button-size: 40px;
  --bg-color: #000;
  --icon-size: 20px;
  --icon-color: #fff;
  --border-radius: 50%;
  width: var(--button-size) !important;
  height: var(--button-size) !important;
  background-color: var(--bg-color) !important;
  color: var(--icon-color) !important;
  border-radius: var(--border-radius) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: 0.3s;
  pointer-events: auto !important;
}
.swiper-hover-btn .skt-swiper-button.swiper-button-next {
  opacity: 0 !important;
  transform: translateX(20px);
}
.swiper-hover-btn .skt-swiper-button.swiper-button-prev {
  opacity: 0 !important;
  transform: translateX(-20px);
}

.swiper-hover-btn:hover .skt-swiper-button {
  transform: translateX(0);
  opacity: 1 !important;
}

.skt-swiper-button::after {
  content: none !important;
}
@media only screen and (max-width: 768px) {
  .swiper-hover-btn:hover .skt-swiper-button {
    opacity: 0;
  }
}

/* ==============================================标题,描述============================================== */
.skt-title {
  --font-size: clamp(20px, 2.5vw, 32px);
  font-size: var(--font-size);
  line-height: 1;
  margin-bottom: 20px;
  color: var(--desktop-color);
}
.skt-title.text-inherit-all {
  font-size: clamp(
    var(--mobile-font-size),
    var(--size-ratio),
    var(--desktop-font-size)
  );
}
.skt-desc {
  --font-size: clamp(14px, 1.5vw, 16px);
  font-size: var(--font-size);
  line-height: 1.4;
  color: var(--desktop-color);
}
@media only screen and (max-width: 768px) {
  .skt-title {
    color: var(--mobile-color);
  }
  .skt-desc {
    color: var(--mobile-color);
  }
}