.xyxhnpz-component,
.xyxhnpz-component * {
  box-sizing: border-box;
}

.xyxhnpz-component {
  position: relative;
  margin-block: var(--margin_tb, 0rem);
  color: #0f172a;
  background-color: var(--background-color, transparent);
  background-image: var(--background-image, none);
  background-position: var(--background-position, center);
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  overflow: hidden;
}

.xyxhnpz-component__section {
  position: relative;
  min-height: 100vh;
  padding: 85px 0 95px;
  overflow: hidden;
  background: linear-gradient(rgb(248, 250, 252) 0%, rgb(241, 245, 249) 50%, rgb(226, 232, 240) 100%);
  border-top: 1px solid rgb(226, 232, 240);
  border-bottom: 1px solid rgb(226, 232, 240);
}

.xyxhnpz-component__inner {
  width: 100%;
  max-width: var(--custom-content-max-width);
  margin-inline: auto;
  padding-top: var(--padding_tb);
  padding-right: var(--padding_lr);
  padding-bottom: var(--padding_tb);
  padding-left: var(--padding_lr);
}

.xyxhnpz-component__header {
  width: min(820px, 90%);
  margin: 0 auto 36px;
  text-align: center;
}

.xyxhnpz-component__kicker,
.xyxhnpz-component__title,
.xyxhnpz-component__title-highlight,
.xyxhnpz-component__description {
  margin: 0;
}

.xyxhnpz-component__kicker {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 8px;
  color: var(--kicker-color);
  font-family: var(--kicker-font-family, inherit);
  font-size: var(--kicker-font-size);
  font-weight: var(--kicker-font-weight);
  font-style: var(--kicker-font-style);
  line-height: var(--kicker-line-height, 1.5);
  letter-spacing: var(--kicker-letter-spacing, .14em);
  text-decoration: var(--kicker-text-decoration);
  text-transform: var(--kicker-text-transform, uppercase);
}

.xyxhnpz-component__title,
.xyxhnpz-component__title-highlight {
  display: inline;
}

.xyxhnpz-component__title {
  color: var(--main-title-color);
  font-family: var(--main-title-font-family, inherit);
  font-size: var(--main-title-font-size, 32px);
  font-weight: var(--main-title-font-weight, 700);
  font-style: var(--main-title-font-style, normal);
  line-height: var(--main-title-line-height, 1.5);
  letter-spacing: var(--main-title-letter-spacing, .02em);
  text-decoration: var(--main-title-text-decoration, none);
  text-transform: var(--main-title-text-transform, uppercase);
}

.xyxhnpz-component__title::after {
  content: " ";
}

.xyxhnpz-component__title-highlight {
  color: var(--highlight-color);
  font-family: var(--highlight-font-family, inherit);
  font-size: var(--highlight-font-size, 32px);
  font-weight: var(--highlight-font-weight, 700);
  font-style: var(--highlight-font-style, normal);
  line-height: var(--highlight-line-height, 1.5);
  letter-spacing: var(--highlight-letter-spacing, .02em);
  text-decoration: var(--highlight-text-decoration, none);
  text-transform: var(--highlight-text-transform, uppercase);
}

.xyxhnpz-component__description {
  max-width: 760px;
  margin: 12px auto 0;
  color: var(--description-color);
  font-family: var(--description-font-family, inherit);
  font-size: var(--description-font-size);
  font-weight: var(--description-font-weight);
  font-style: var(--description-font-style);
  line-height: var(--description-line-height, 1.6);
  letter-spacing: var(--description-letter-spacing, 0);
  text-decoration: var(--description-text-decoration);
  text-transform: var(--description-text-transform, none);
}

@media (hover: hover) and (pointer: fine) {
.xyxhnpz-component__kicker:hover { color: var(--kicker-hover-color); font-family: var(--kicker-hover-font-family, var(--kicker-font-family, inherit)); font-size: var(--kicker-hover-font-size, var(--kicker-font-size)); }
.xyxhnpz-component__title:hover { color: var(--main-title-hover-color); font-family: var(--main-title-hover-font-family, var(--main-title-font-family, inherit)); font-size: var(--main-title-hover-font-size, var(--main-title-font-size)); }
.xyxhnpz-component__title-highlight:hover { color: var(--highlight-hover-color); font-family: var(--highlight-hover-font-family, var(--highlight-font-family, inherit)); font-size: var(--highlight-hover-font-size, var(--highlight-font-size)); }
.xyxhnpz-component__description:hover { color: var(--description-hover-color); font-family: var(--description-hover-font-family, var(--description-font-family, inherit)); font-size: var(--description-hover-font-size, var(--description-font-size)); }
}

.xyxhnpz-component__carousel {
  position: relative;
  width: 100%;
  min-height: 620px;
  margin: 20px auto 0;
}

.xyxhnpz-component__viewport {
  position: relative;
  display: flex;
  width: 100%;
  height: 480px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  perspective: 1300px;
  overflow: visible;
}

.xyxhnpz-component__track {
  position: relative;
  width: 320px;
  height: 440px;
  margin: 0 auto;
  transform-style: preserve-3d;
}

.xyxhnpz-component__item {
  position: absolute;
  inset: 0;
  width: 320px;
  height: 440px;
  transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
  transform-origin: center;
  transform-style: preserve-3d;
  opacity: 1;
  transition: transform 550ms cubic-bezier(.25, 1, .5, 1), opacity 550ms, filter 550ms;
  will-change: transform, opacity;
  cursor: pointer;
  border-radius: 14px;
  user-select: none;
  z-index: 10;
}

.xyxhnpz-component__item[aria-hidden="true"] {
  pointer-events: none;
}

.xyxhnpz-component__frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 14px;
  overflow: hidden;
  background: #fff;
  border: 8px solid rgb(154, 107, 62);
  border-radius: 14px;
  outline: 2px solid rgb(234, 179, 8);
  box-shadow: rgba(15, 23, 42, .22) 0 20px 48px, rgba(0, 0, 0, .08) 0 4px 14px;
  transition: 350ms;
}

.xyxhnpz-component__item.is-active .xyxhnpz-component__frame {
  border-color: var(--item-border-color, rgb(120, 53, 15));
  outline-color: var(--item-outline-color, rgb(250, 204, 21));
  box-shadow: rgba(15, 23, 42, .32) 0 28px 65px, var(--item-shadow-color, rgba(132, 204, 22, .5)) 0 0 30px;
}

.xyxhnpz-component__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--image-ratio);
  object-fit: var(--image-fit);
  border-radius: var(--image-shape);
  background: #fff;
}

.xyxhnpz-component__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  background: rgba(15, 23, 42, .65);
  border-radius: 6px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.xyxhnpz-component__item.is-active:hover .xyxhnpz-component__zoom {
  opacity: 1;
  pointer-events: auto;
}

.xyxhnpz-component .zoom-glyph {
  position: relative;
  width: 30px;
  height: 30px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.xyxhnpz-component .zoom-glyph::after {
  position: absolute;
  right: -9px;
  bottom: -5px;
  width: 12px;
  height: 3px;
  background: currentColor;
  border-radius: 4px;
  content: "";
  transform: rotate(45deg);
}

.xyxhnpz-component__nav {
  position: absolute;
  top: 220px;
  z-index: 20;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #0f172a;
  font: inherit;
  font-size: 34px;
  line-height: 1;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  cursor: pointer;
  transform: translateY(-50%);
}

.xyxhnpz-component__nav--previous { left: 40px; }
.xyxhnpz-component__nav--next { right: 40px; }
.xyxhnpz-component__nav .yiyingbaoicon { font-family: yiyingbao; font-size: 16px; font-style: normal; line-height: 1; }

.xyxhnpz-component__info {
  max-width: 680px;
  min-height: 90px;
  margin: 36px auto 0;
  text-align: center;
}

.xyxhnpz-component__badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 14px;
  color: var(--tag-color);
  font-family: var(--tag-font-family, inherit);
  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
  font-style: var(--tag-font-style);
  line-height: var(--tag-line-height, 1.5);
  letter-spacing: var(--tag-letter-spacing, .12em);
  text-decoration: var(--tag-text-decoration);
  text-transform: var(--tag-text-transform, uppercase);
  background: rgb(220, 252, 231);
  border-radius: 9999px;
}

.xyxhnpz-component__item-title {
  margin: 0;
  color: var(--item-title-color);
  font-family: var(--item-title-font-family, inherit);
  font-size: var(--item-title-font-size);
  font-weight: var(--item-title-font-weight);
  font-style: var(--item-title-font-style);
  line-height: var(--item-title-line-height, 1.5);
  letter-spacing: var(--item-title-letter-spacing, 0);
  text-decoration: var(--item-title-text-decoration);
  text-transform: var(--item-title-text-transform, none);
}

.xyxhnpz-component__item-description {
  max-width: 620px;
  margin: 7px auto 0;
  color: var(--item-description-color);
  font-family: var(--item-description-font-family, inherit);
  font-size: var(--item-description-font-size);
  font-weight: var(--item-description-font-weight);
  font-style: var(--item-description-font-style);
  line-height: var(--item-description-line-height, 1.6);
  letter-spacing: var(--item-description-letter-spacing, 0);
  text-decoration: var(--item-description-text-decoration);
  text-transform: var(--item-description-text-transform, none);
}

@media (hover: hover) and (pointer: fine) {
.xyxhnpz-component__info:hover .xyxhnpz-component__badge { color: var(--tag-hover-color); font-family: var(--tag-hover-font-family, var(--tag-font-family, inherit)); font-size: var(--tag-hover-font-size, var(--tag-font-size)); }
.xyxhnpz-component__info:hover .xyxhnpz-component__item-title { color: var(--item-title-hover-color); font-family: var(--item-title-hover-font-family, var(--item-title-font-family, inherit)); font-size: var(--item-title-hover-font-size, var(--item-title-font-size)); }
.xyxhnpz-component__info:hover .xyxhnpz-component__item-description { color: var(--item-description-hover-color); font-family: var(--item-description-hover-font-family, var(--item-description-font-family, inherit)); font-size: var(--item-description-hover-font-size, var(--item-description-font-size)); }
}

.xyxhnpz-component__pagination {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px auto 0;
}

.xyxhnpz-component__dot {
  width: 14px;
  height: 6px;
  padding: 0;
  background: rgb(148, 163, 184);
  border: 0;
  border-radius: 35px;
  opacity: .35;
  cursor: pointer;
  transition: 400ms;
}

.xyxhnpz-component__dot.is-active {
  width: 36px;
  background: var(--pagination-active-background-color, var(--themeColor1));
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .xyxhnpz-component__dot:not(.is-active):hover {
    background: var(--pagination-hover-background-color, var(--themeColor1));
    opacity: 1;
  }
}

.xyxhnpz-component__lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .88);
  backdrop-filter: blur(10px);
}

.xyxhnpz-component__lightbox.is-open { display: flex; }

.xyxhnpz-component__lightbox-content {
  position: relative;
  display: flex;
  max-width: 860px;
  max-height: 90vh;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: rgba(0, 0, 0, .6) 0 25px 60px;
  opacity: 0;
  transform: scale(.94);
  transition: opacity 300ms cubic-bezier(.16, 1, .3, 1), transform 300ms cubic-bezier(.16, 1, .3, 1);
}

.xyxhnpz-component__lightbox.is-open .xyxhnpz-component__lightbox-content {
  opacity: 1;
  transform: scale(1);
}

.xyxhnpz-component__lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 8px;
}

.xyxhnpz-component__lightbox-title {
  margin: 14px 0 0;
  color: rgb(15, 23, 42);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.xyxhnpz-component__lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgb(15, 23, 42);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  background: var(--themeColor1, rgb(34, 197, 94));
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, .3) 0 4px 14px;
  transition: transform 200ms;
}

.xyxhnpz-component__lightbox-close:hover { transform: rotate(90deg); }

@media (max-width: 959px) {
  .xyxhnpz-component__section { min-height: auto; padding: 56px 0 64px; }
  .xyxhnpz-component__inner { padding-left: 1rem; padding-right: 1rem; }
  .xyxhnpz-component__header { width: 100%; margin-bottom: 40px; }
  .xyxhnpz-component__kicker { font-size: var(--kicker-mo-font-size); }
  .xyxhnpz-component__title { font-size: var(--main-title-mo-font-size); }
  .xyxhnpz-component__title-highlight { font-size: var(--highlight-mo-font-size); }
  .xyxhnpz-component__description { font-size: var(--description-mo-font-size); }
  .xyxhnpz-component__carousel { width: 100%; min-height: 620px; }
  .xyxhnpz-component__viewport { height: 480px; }
  .xyxhnpz-component__nav { top: 220px; width: 44px; height: 44px; font-size: 30px; }
  .xyxhnpz-component__nav--previous { left: 0; }
  .xyxhnpz-component__nav--next { right: 0; }
  .xyxhnpz-component__badge { font-size: var(--tag-mo-font-size); }
  .xyxhnpz-component__item-title { font-size: var(--item-title-mo-font-size); }
  .xyxhnpz-component__item-description { font-size: var(--item-description-mo-font-size); }
  .xyxhnpz-component__zoom { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xyxhnpz-component__item,
  .xyxhnpz-component__zoom,
  .xyxhnpz-component__dot,
  .xyxhnpz-component__lightbox-content { transition-duration: 0.01ms; }
}