:root {
  --c-overlay: 32, 125, 214;
  --c-text-light: #999999;
  --c-green-dark: #249640;

  --fs-menu: calc(17 * var(--vmin));
  --fs-card-title: calc(18 * var(--vmin));
  --fs-card-sub: calc(13 * var(--vmin));

  --section-gap: calc(130 * var(--vmin));
}

.btn-pill {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-block;
  padding: calc(11 * var(--vmin)) calc(30 * var(--vmin));
  border: 1px solid var(--c-green);
  border-radius: var(--radius-pill);
  font-size: calc(14 * var(--vmin));
  color: var(--c-green);
  background: var(--c-white);
  transition: color 0.4s ease;
}

.btn-pill::before,
.btn-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-green);
  z-index: -1;
  transition: transform 0.45s ease;
}

.btn-pill::before {
  transform: translateX(-100%);
}

.btn-pill::after {
  transform: translateX(100%);
}

.btn-pill:hover {
  color: var(--c-white);
}

.btn-pill:hover::before {
  transform: translateX(-49%);
}

.btn-pill:hover::after {
  transform: translateX(49%);
}

.btn-pill--white {
  background: var(--c-white);
  border-color: var(--c-white);
}

.btn-pill--white:hover {
  color: var(--c-white);
}

.btn-pill--sm {
  padding: calc(8 * var(--vmin)) calc(24 * var(--vmin));
  font-size: calc(13 * var(--vmin));
}

.hero {
  height: clamp(calc(480 * var(--vmin)), 100vh, calc(1080 * var(--vmin)));
  overflow: hidden;
}

.hero-swiper {
  width: 100%;
  height: 100%;
}

.hero-swiper .swiper-slide img,
.hero-swiper .swiper-slide video,
.hero-swiper .swiper-slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-swiper .swiper-slide iframe {
  display: block;
  border: 0;
}

.hero-swiper .swiper-slide--top1 {
  container-type: size;
}

.hero-swiper .swiper-slide--top1 iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100cqw, calc(100cqh * (16 / 9)));
  height: max(100cqh, calc(100cqw * (9 / 16)));
}

.hero-swiper__pagination {
  --swiper-pagination-bullet-width: calc(42 * var(--vmin));
  --swiper-pagination-bullet-height: calc(4 * var(--vmin));
  --swiper-pagination-bullet-border-radius: calc(2 * var(--vmin));
  --swiper-pagination-color: var(--c-white);
  --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0.5);
  --swiper-pagination-bullet-inactive-opacity: 1;
  bottom: calc(28 * var(--vmin)) !important;
}

.hero .hero-swiper__arrow {
  width: calc(52 * var(--vmin));
  height: calc(52 * var(--vmin));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 calc(10 * var(--vmin)) calc(24 * var(--vmin)) rgba(0, 0, 0, 0.15);
  transition: background 0.3s, border-color 0.3s;
}

.hero .hero-swiper__arrow::after {
  content: "";
  width: calc(14 * var(--vmin));
  height: calc(14 * var(--vmin));
  border-top: calc(2.5 * var(--vmin)) solid var(--c-text-dark);
  border-left: calc(2.5 * var(--vmin)) solid var(--c-text-dark);
  opacity: 1;
}

.hero .hero-swiper__arrow--prev::after {
  transform: rotate(-45deg);
  margin-left: calc(4 * var(--vmin));
}

.hero .hero-swiper__arrow--next::after {
  transform: rotate(135deg);
  margin-right: calc(4 * var(--vmin));
}

.hero .hero-swiper__arrow:hover {
  background: var(--c-green);
  border-color: var(--c-green);
}

.hero .hero-swiper__arrow:hover::after {
  border-color: var(--c-white);
}

.hero .hero-swiper__arrow--prev {
  left: calc(40 * var(--vmin));
}

.hero .hero-swiper__arrow--next {
  right: calc(40 * var(--vmin));
}

.bleed-right {
  padding-left: max(var(--container-pad), calc((100% - var(--container-w)) / 2));
  padding-right: 0;
}

.sidebar-menu {
  margin-top: calc(34 * var(--vmin));
  border-bottom: 1px solid var(--c-border);
}

.sidebar-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(13 * var(--vmin)) 0;
  font-size: var(--fs-menu);
  color: var(--c-text-dark);
  cursor: pointer;
  transition: color 0.25s;
}

.sidebar-menu__item .icon-arrow {
  color: var(--c-green);
  font-style: normal;
  font-size: calc(15 * var(--vmin));
  transition: transform 0.25s;
}

.sidebar-menu__item:hover,
.sidebar-menu__item.is-active {
  color: var(--c-green);
}

.sidebar-menu__item:hover .icon-arrow {
  transform: translateX(calc(4 * var(--vmin)));
}

.sidebar-info {
  margin-top: calc(30 * var(--vmin));
}

.sidebar-info__title {
  font-size: calc(16 * var(--vmin));
  font-weight: bold;
  color: var(--c-text-dark);
}

.sidebar-info__desc {
  margin-top: calc(8 * var(--vmin));
  font-size: calc(12 * var(--vmin));
  color: var(--c-text-light);
  line-height: 1.6;
}

.slider-arrows {
  display: flex;
  gap: calc(22 * var(--vmin));
  margin-top: calc(26 * var(--vmin));
}

.slider-arrows button {
  font-size: calc(18 * var(--vmin));
  color: #b5b5b5;
  transition: color 0.25s;
}

.slider-arrows button:hover {
  color: var(--c-text-dark);
}

.slider-arrows button:disabled {
  color: #dddddd;
  cursor: default;
}

.sidebar-more {
  margin-top: calc(40 * var(--vmin));
}

.card-section {
  padding-top: calc(120 * var(--vmin));
}

.card-section__layout {
  display: grid;
  grid-template-columns: calc(415 * var(--vmin)) minmax(0, 1fr);
  gap: calc(90 * var(--vmin));
  align-items: start;
}

.card-section__sidebar {
  position: sticky;
  top: calc(var(--header-h) + calc(20 * var(--vmin)));
}

.card-slider {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: calc(30 * var(--vmin));
}

.card-slider::-webkit-scrollbar {
  display: none;
}

.card-slider__track {
  display: flex;
  gap: calc(30 * var(--vmin));
  width: max-content;
}

.card-slider__track > li {
  scroll-snap-align: start;
}

.product-card {
  position: relative;
  width: calc(356 * var(--vmin));
  height: calc(520 * var(--vmin));
  overflow: hidden;
  cursor: pointer;
}

.product-card__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.product-card__link .thumb {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.product-card__info {
  position: absolute;
  inset: auto 0 0 0;
  padding: calc(60 * var(--vmin)) calc(24 * var(--vmin)) calc(20 * var(--vmin));
  background: linear-gradient(
    to top,
    rgba(var(--c-overlay), 0.96) 0%,
    rgba(var(--c-overlay), 0.78) calc(46 * var(--vmin)),
    rgba(var(--c-overlay), 0) 100%
  );
  color: var(--c-white);
}

.product-card__info h3 {
  font-size: var(--fs-card-title);
  font-weight: bold;
  text-align: left;
}

.product-card__info p {
  margin-top: calc(6 * var(--vmin));
  font-size: var(--fs-card-sub);
  text-align: center;
  opacity: 0.92;
}

.cooperation {
  height: calc(640 * var(--vmin));
  margin-top: var(--section-gap);
  background: url("../img/与我们合作.png?v=e1fd2812") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cooperation__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(38 * var(--vmin));
  padding: 0 calc(20 * var(--vmin));
}

.cooperation__title {
  font-size: calc(30 * var(--vmin));
  font-weight: bold;
  color: var(--c-white);
  text-align: center;
  text-shadow: 0 calc(2 * var(--vmin)) calc(12 * var(--vmin)) rgba(0, 0, 0, 0.25);
}

.news {
  margin-top: var(--section-gap);
}

.news .section-title {
  margin-bottom: calc(46 * var(--vmin));
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 * var(--vmin));
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(30 * var(--vmin)) calc(32 * var(--vmin)) calc(34 * var(--vmin));
  border: 1px solid var(--c-border);
  background: var(--c-white);
  transition: box-shadow 0.3s, transform 0.3s;
}

.news-card:hover {
  box-shadow: 0 calc(10 * var(--vmin)) calc(30 * var(--vmin)) rgba(0, 0, 0, 0.08);
  transform: translateY(calc(-4 * var(--vmin)));
}

.news-card::before,
.news-card::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
}

.news-card::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--c-green);
  border-left: 1px solid var(--c-green);
}

.news-card::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid var(--c-green);
  border-right: 1px solid var(--c-green);
}

.news-card:hover::before,
.news-card:hover::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
}

.news-card__date {
  font-size: calc(13 * var(--vmin));
  color: var(--c-text-light);
}

.news-card__title {
  margin-top: calc(14 * var(--vmin));
  font-size: calc(20 * var(--vmin));
  font-weight: bold;
  color: var(--c-text-dark);
  line-height: 1.5;
}

.news-card__more {
  align-self: flex-start;
  margin-top: calc(26 * var(--vmin));
  padding-bottom: calc(2 * var(--vmin));
  font-size: calc(14 * var(--vmin));
  color: var(--c-green);
  transition: color 0.25s, background-size 0.4s ease;
  background-image: linear-gradient(var(--c-green), var(--c-green));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% calc(2 * var(--vmin));
}

.news-card__more:hover {
  color: var(--c-green-dark);
  background-size: 100% calc(2 * var(--vmin));
}

.news-card {
  cursor: pointer;
}

.news-card__more::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news__more {
  margin-top: calc(52 * var(--vmin));
}

.contact {
  margin-top: var(--section-gap);
  padding-bottom: calc(150 * var(--vmin));
}

.contact .section-title {
  margin-bottom: calc(46 * var(--vmin));
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 * var(--vmin));
}

.contact-card {
  position: relative;
  cursor: pointer;
}

.contact-card .thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.contact-card__title {
  margin-top: calc(26 * var(--vmin));
  font-size: calc(15 * var(--vmin));
  font-weight: bold;
  color: var(--c-text-dark);
}

.contact-card .btn-pill {
  margin-top: calc(18 * var(--vmin));
}

.product-card .thumb img,
.contact-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease, opacity 500ms ease, filter 500ms ease;
}

.product-card .thumb img:first-child,
.contact-card .thumb img:first-child {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}

.product-card:hover .thumb img:first-child,
.contact-card:hover .thumb img:first-child {
  transform: translateX(0) scaleX(1);
  opacity: 1;
  filter: blur(0);
}

.product-card:hover .thumb img:nth-child(2),
.contact-card:hover .thumb img:nth-child(2) {
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}

.product-card__link:focus-visible {
  outline: calc(2 * var(--vmin)) solid var(--c-green);
  outline-offset: calc(-2 * var(--vmin));
}

.product-card__link:focus-visible .thumb img:first-child {
  transform: translateX(0) scaleX(1);
  opacity: 1;
  filter: blur(0);
}

.product-card__link:focus-visible .thumb img:nth-child(2) {
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  filter: blur(10px);
}

@media (max-width: 1400px) {
  :root {
    --section-gap: calc(100 * var(--vmin));
  }

  .card-section__layout {
    grid-template-columns: calc(340 * var(--vmin)) minmax(0, 1fr);
    gap: calc(50 * var(--vmin));
  }

  .product-card {
    width: calc(320 * var(--vmin));
    height: calc(468 * var(--vmin));
  }
}

@media (max-width: 1200px) {
  .card-section {
    padding-top: calc(80 * var(--vmin));
  }

  .card-section__layout {
    grid-template-columns: 1fr;
    gap: calc(44 * var(--vmin));
  }

  .card-section__sidebar {
    position: static;
    padding-right: var(--container-pad);
  }

  .sidebar-menu {
    display: flex;
    gap: calc(12 * var(--vmin));
    margin-top: calc(24 * var(--vmin));
    border-bottom: none;
  }

  .sidebar-menu__item {
    flex: 1;
    justify-content: center;
    padding: calc(10 * var(--vmin)) 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    font-size: calc(14 * var(--vmin));
  }

  .sidebar-menu__item.is-active {
    border-color: var(--c-green);
    background: rgba(45, 174, 74, 0.08);
  }

  .sidebar-menu__item .icon-arrow {
    display: none;
  }

  .slider-arrows {
    display: none;
  }

  .sidebar-more {
    margin-top: calc(24 * var(--vmin));
  }

  .card-slider__track {
    gap: calc(20 * var(--vmin));
    padding-right: var(--container-pad);
  }

  .product-card {
    width: calc(280 * var(--vmin));
    height: calc(410 * var(--vmin));
  }

  .cooperation {
    height: calc(420 * var(--vmin));
    margin-top: calc(80 * var(--vmin));
  }

  .cooperation__title {
    font-size: calc(24 * var(--vmin));
  }

  .news,
  .contact {
    margin-top: calc(80 * var(--vmin));
  }

  .news__grid,
  .contact__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(20 * var(--vmin));
  }

  .news-card {
    padding: calc(22 * var(--vmin));
  }

  .news-card__title {
    font-size: calc(16 * var(--vmin));
  }
}

@media (max-width: 768px) {
  .card-section {
    padding-top: calc(60 * var(--vmin));
  }

  .hero {
    height: calc(430 * var(--vmin));
  }

  .hero .hero-swiper__arrow {
    display: none;
  }

  .hero-swiper__pagination {
    --swiper-pagination-bullet-width: calc(20 * var(--vmin));
    --swiper-pagination-bullet-height: calc(3 * var(--vmin));
    bottom: calc(16 * var(--vmin)) !important;
  }

  .cooperation {
    height: calc(320 * var(--vmin));
    margin-top: calc(60 * var(--vmin));
  }

  .cooperation__title {
    font-size: calc(19 * var(--vmin));
  }

  .news,
  .contact {
    margin-top: calc(60 * var(--vmin));
  }

  .contact {
    padding-bottom: calc(80 * var(--vmin));
  }

  .news .section-title,
  .contact .section-title {
    margin-bottom: calc(28 * var(--vmin));
  }

  .news__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .news__more {
    margin-top: calc(30 * var(--vmin));
  }
}