h1,
h2,
h3,
h4,
h5,
h6,
.title1,
.title2,
.title3,
.title4,
.title5,
.title6 {
  font-family: var(--title-font);
  font-style: var(--title-font-style);
  font-weight: var(--title-font-weight, 700);
  letter-spacing: var(--title-letter-spacing);
  line-height: var(--title-line-height);
  margin-bottom: 0;
  margin-top: 0;
  word-break: break-word;
  text-transform: var(--title-text-transform);
}

h1,
.title1 {
  font-size: calc(var(--title-font-size) * 1);
}

h2,
.title2 {
  font-size: calc(var(--title-font-size) * 0.833333);
}

h3,
.title3 {
  font-size: calc(var(--title-font-size) * 0.733333);
}

h4,
.title4 {
  font-size: calc(var(--title-font-size) * 0.666667);
}

h5,
.title5 {
  font-size: calc(var(--title-font-size) * 0.6);
}

h6,
.title6 {
  font-size: calc(var(--title-font-size) * 0.6);
}

.body-font,
.body1,
.body2,
.body3,
.body4,
.body5,
.body6 {
  font-family: var(--body-font);
  font-style: var(--body-font-style);
  font-weight: var(--body-font-weight, 400);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  word-break: break-word;
}

.body1 {
  font-size: calc(var(--body-font-size) * 1.142857);
}

.body2 {
  font-size: calc(var(--body-font-size) * 1.071429);
}

.body3 {
  font-size: calc(var(--body-font-size) * 1);
}

.body4 {
  font-size: calc(var(--body-font-size) * 0.928571);
}

.body5 {
  font-size: calc(var(--body-font-size) * 0.857143);
}

.body6 {
  font-size: calc(var(--body-font-size) * 0.857143);
}

@media (min-width: 1024px) {

  h1,
  .title1 {
    font-size: calc(var(--title-font-size) * 2.333333);
  }

  h2,
  .title2 {
    font-size: calc(var(--title-font-size) * 1.666667);
  }

  h3,
  .title3 {
    font-size: calc(var(--title-font-size) * 1.2);
  }

  h4,
  .title4 {
    font-size: calc(var(--title-font-size) * 1);
  }

  h5,
  .title5 {
    font-size: calc(var(--title-font-size) * 0.833333);
  }

  h6,
  .title6 {
    font-size: calc(var(--title-font-size) * 0.666667);
  }

  .body1 {
    font-size: calc(var(--body-font-size) * 1.571429);
  }

  .body2 {
    font-size: calc(var(--body-font-size) * 1.285714);
  }

  .body3 {
    font-size: calc(var(--body-font-size) * 1.142857);
  }

  .body4 {
    font-size: calc(var(--body-font-size) * 1);
  }

  .body5 {
    font-size: calc(var(--body-font-size) * 0.928571);
  }

  .body6 {
    font-size: calc(var(--body-font-size) * 0.857143);
  }
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes modalFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

.button.primary {
  background-color: rgb(var(--color-button-background));
  color: rgb(var(--color-button-text)) !important;
}

.button.primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #fff;
  transition: opacity 0.3s ease-in-out;
}

.button.primary:hover::before {
  opacity: 0.2;
}

.button.secondary {
  background-color: rgb(var(--color-button-secondary-background));
  color: rgb(var(--color-button-secondary-text));
  border: var(--button-border-thickness) solid rgba(var(--color-button-secondary-border), var(--button-border-opacity));
  transition: all 0.3s ease-in-out;
}

.button.secondary:hover {
  background-color: rgb(var(--color-button-secondary-border));
  color: rgb(var(--color-button-secondary-background));
}

.button.xl {
  height: var(--button-height-xl);
  padding-left: var(--button-padding-x-xl);
  padding-right: var(--button-padding-x-xl);
  border-radius: var(--button-border-radius-xl);
  font-size: var(--button-font-size-xl);
}

.button.lg {
  height: var(--button-height-lg);
  padding-left: var(--button-padding-x-lg);
  padding-right: var(--button-padding-x-lg);
  border-radius: var(--button-border-radius-lg);
  font-size: var(--button-font-size-lg);
}

.button.md {
  height: var(--button-height-md);
  padding-left: var(--button-padding-x-md);
  padding-right: var(--button-padding-x-md);
  border-radius: var(--button-border-radius-md);
  font-size: var(--button-font-size-md);
}

.button.sm {
  height: var(--button-height-sm);
  padding-left: var(--button-padding-x-sm);
  padding-right: var(--button-padding-x-sm);
  border-radius: var(--button-border-radius-sm);
  font-size: var(--button-font-size-sm);
}

body>main {
  display: flex;
  flex-direction: column;
  gap: var(--section-vertical-gap);
}

.page-width {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  max-width: calc(var(--page-padding) * 2 + var(--page-width));
  width: 100%;
}

/* 栅格布局 */
.grid-content {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

@keyframes modalSlideInBottom {
  0% {
    opacity: 0;
    bottom: -50px;
  }

  100% {
    opacity: 1;
    bottom: 0px;
  }
}

@keyframes drawerFadeInLeft {
  0% {
    opacity: 0;
    left: -50px;
  }

  100% {
    opacity: 1;
    left: 0px;
  }
}

@keyframes drawerFadeInRight {
  0% {
    opacity: 0;
    right: -50px;
  }

  100% {
    opacity: 1;
    right: 0px;
  }
}

.image-property-position {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--border-radius);
  height: var(--image-height, 100%);
  width: var(--image-width, 100%);
  object-fit: var(--object-fit, cover);
}

[data-image-ratio] {
  width: var(--data-image-ratio, 100%);
  position: relative;
}

[data-image-ratio]::before {
  content: "";
  width: 100%;
  height: 0;
  display: block;
  padding-top: var(--image-padding-top, 100%);
  pointer-events: none;
}

@media screen and (max-width: 1023px) {
  .page-width {
    max-width: 100%;
    padding-left: var(--page-padding-mobile);
    padding-right: var(--page-padding-mobile);
  }
}

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype');
}

* {
  font-family: 'MyFont', sans-serif !important;
}