.cpzx-page {
  background: #f5f5f5;
  color: #3f3f3f;
}

.cpzx-logo {
  min-width: 236px;
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cpzx-logo .cpzx-logo__mark {
  width: 58px;
  height: 58px;
  border: 2px solid rgba(228, 173, 47, 0.72);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jsy-gold);
  background: radial-gradient(circle, #fff9ea 0%, #ffffff 72%);
  font: 700 26px / 1 var(--jsy-font-kai);
}

.cpzx-logo .cpzx-logo__text {
  position: static;
  display: block;
  transform: none;
  color: var(--jsy-gold);
  font: 700 27px / 1.1 var(--jsy-font-kai);
  white-space: nowrap;
}

.cpzx-logo__text::after {
  content: "HUANGGUOSHU JIUYE";
  display: block;
  margin-top: 5px;
  color: rgba(228, 173, 47, 0.7);
  font: 700 8px / 1 var(--jsy-font-num);
  letter-spacing: 0.2em;
}

.cpzx-main {
  padding-top: 0;
}

.cpzx-banner {
  position: relative;
  height: 230px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 clamp(28px, 4.6vw, 90px) 34px;
  color: #fff7e7;
  background:
    linear-gradient(90deg, rgba(172, 0, 0, 0.98), rgba(118, 0, 0, 0.98)),
    radial-gradient(circle at 74% 6%, rgba(255, 218, 133, 0.22), transparent 32%);
}

.cpzx-banner::before,
.cpzx-banner::after,
.cpzx-banner__ribbon {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  pointer-events: none;
}

.cpzx-banner::before {
  top: 72px;
  height: 88px;
  transform: rotate(-2.4deg);
  background: repeating-linear-gradient(
    0deg,
    #ffd991 0,
    #ffd991 5px,
    #ad1105 5px,
    #ad1105 11px,
    #fff0bd 11px,
    #fff0bd 17px,
    #de7f37 17px,
    #de7f37 22px
  );
  box-shadow: 0 16px 28px rgba(83, 0, 0, 0.22);
}

.cpzx-banner::after {
  top: 104px;
  height: 64px;
  transform: rotate(1.8deg);
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 229, 163, 0.96) 0,
    rgba(255, 229, 163, 0.96) 4px,
    rgba(194, 25, 10, 0.82) 4px,
    rgba(194, 25, 10, 0.82) 9px,
    rgba(246, 167, 85, 0.9) 9px,
    rgba(246, 167, 85, 0.9) 14px
  );
  opacity: 0.92;
}

.cpzx-banner__ribbon {
  top: 62px;
  height: 1px;
  background: rgba(255, 232, 180, 0.55);
}

.cpzx-banner strong {
  position: relative;
  z-index: 1;
  font: 700 clamp(24px, 2.1vw, 36px) / 1.2 var(--jsy-font-song);
  text-shadow: 0 3px 8px rgba(68, 0, 0, 0.48);
}

.cpzx-shell {
  padding: 38px clamp(22px, 2.1vw, 44px) 72px;
  background: #f5f5f5;
}

.cpzx-navbox {
  width: 100%;
  min-height: 74px;
  margin: 0 auto 34px;
  padding: 0 clamp(62px, 3.9vw, 80px);
  display: flex;
  gap: 36px;
  justify-content: space-between;
  align-items: stretch;
  background: #ffffff;
}

.cpzx-breadcrumb {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #8e8e8e;
  font-size: 16px;
}

.cpzx-breadcrumb a {
  color: var(--jsy-gold);
  transition: color 160ms ease;
}

.cpzx-breadcrumb a:hover {
  color: var(--jsy-gold-600);
}

.cpzx-breadcrumb em {
  font-style: normal;
  color: #8e8e8e;
}

.cpzx-tabs {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  color: #333333;
  font-size: 18px;
  white-space: nowrap;
}

.cpzx-tabs a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /*min-width: 220px;*/
  height: 74px;
  padding: 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  background: #ffffff;
  font-weight: 700;
  text-align: center;
  transition: color 160ms ease;
}

.cpzx-tabs a:focus-visible {
  outline: 2px solid var(--jsy-gold);
  outline-offset: -2px;
}

.cpzx-tabs a.is-active {
  color: #ffffff;
  background: var(--jsy-gold);
}

.cpzx-tabs a.is-hovering {
  color: #ffffff;
}

.cpzx-tab__label {
  position: relative;
  z-index: 1;
}

.cpzx-tab__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--jsy-gold);
  opacity: 0;
  visibility: hidden;
  transform: scaleX(0);
  transform-origin: center center;
  will-change: transform;
}

.cpzx-tabs a.is-active .cpzx-tab__fill {
  opacity: 1;
  visibility: visible;
  transform: scaleX(1);
}

.cpzx-panel {
  width: 100%;
  margin: 0 auto;
  padding: clamp(36px, 3.6vw, 58px) clamp(28px, 3.6vw, 58px) 46px;
  background: #ffffff;
}

.cpzx-panel__head {
  min-height: 82px;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cpzx-panel__head h1 {
  margin: 0;
  color: #333333;
  font: 700 clamp(26px, 2vw, 34px) / 1.35 var(--jsy-font-song);
}

.cpzx-panel__head span {
  color: rgba(90, 90, 90, 0.28);
  font: 700 clamp(26px, 2.4vw, 42px) / 1 var(--jsy-font-kai);
  white-space: nowrap;
}

.cpzx-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.cpzx-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: block;
  border: 1px solid #eeeeee;
  background: #ffffff;
}

.cpzx-card__visual,
.cpzx-card__photo {
  position: relative;
  height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #fafafa 100%);
}

.cpzx-card__photo {
  background: url("../origin/img/7MgcTZsJRZqrTEVVUWhOvw.jpg") center / cover no-repeat;
}

.cpzx-card__photo--craft {
  background-image: url("../origin/img/hgsbg4.jpg");
}

.cpzx-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02));
}

.cpzx-card__name {
  height: 58px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  color: #555555;
  background: #f5f5f5;
  font-size: 18px;
  font-weight: 700;
}

.cpzx-card__mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 54px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: #ffffff;
  background: rgba(232, 176, 47, 0.82);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

.cpzx-card__mask span {
  width: min(88%, 390px);
  height: 2px;
  margin-bottom: 30px;
  display: block;
  background: rgba(255, 255, 255, 0.86);
}

.cpzx-card__mask strong {
  margin-bottom: 28px;
  font: 700 clamp(18px, 1.4vw, 24px) / 1.45 var(--jsy-font-song);
}

.cpzx-card__mask i {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.cpzx-pack {
  position: relative;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.1));
}

.cpzx-pack::before {
  content: "黄果树";
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translateX(-50%);
  color: #c3861e;
  font: 700 24px / 1 var(--jsy-font-kai);
  white-space: nowrap;
}

.cpzx-pack::after {
  content: "JIUYE";
  position: absolute;
  left: 50%;
  top: calc(32% + 30px);
  transform: translateX(-50%);
  color: rgba(125, 91, 46, 0.56);
  font: 700 8px / 1 var(--jsy-font-num);
  letter-spacing: 0.22em;
}

.cpzx-pack--box {
  width: 146px;
  height: 186px;
  margin-right: 14px;
  border: 6px solid #c6b19c;
  background: #f4f1ed;
}

.cpzx-pack--bottle {
  width: 72px;
  height: 150px;
  margin-top: 36px;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(90deg, #ded8d1, #ffffff 46%, #ece7df);
}

.cpzx-pack--bottle::before,
.cpzx-pack--flask::before,
.cpzx-pack--darkbottle::before,
.cpzx-pack--slimbottle::before,
.cpzx-pack--short::before,
.cpzx-pack--whitebottle::before {
  top: 46%;
  font-size: 18px;
}

.cpzx-pack--bottle::after,
.cpzx-pack--flask::after,
.cpzx-pack--darkbottle::after,
.cpzx-pack--slimbottle::after,
.cpzx-pack--short::after,
.cpzx-pack--whitebottle::after {
  top: calc(46% + 23px);
}

.cpzx-pack--bottle {
  border-top: 22px solid #d5d0ca;
}

.cpzx-pack--tall {
  width: 160px;
  height: 250px;
  margin-right: 28px;
  background: #cfece8;
}

.cpzx-pack--flask {
  width: 106px;
  height: 164px;
  margin-top: 80px;
  border-radius: 5px;
  background: linear-gradient(180deg, #c59f78 0 34%, #ecf6f3 34% 100%);
}

.cpzx-pack--darkbox {
  width: 160px;
  height: 242px;
  margin-right: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 40%),
    #191919;
}

.cpzx-pack--darkbox::before,
.cpzx-pack--darkbottle::before {
  color: #b9822b;
}

.cpzx-pack--darkbox::after,
.cpzx-pack--darkbottle::after {
  color: rgba(220, 170, 80, 0.48);
}

.cpzx-pack--darkbottle {
  width: 104px;
  height: 174px;
  margin-top: 72px;
  background: #552323;
}

.cpzx-pack--flatbox {
  width: 150px;
  height: 180px;
  margin-right: 20px;
  background: linear-gradient(180deg, #e7f0f5 0 46%, #b9d0e4 46% 100%);
}

.cpzx-pack--slimbottle {
  width: 70px;
  height: 156px;
  margin-top: 52px;
  background: linear-gradient(180deg, #e5eef8 0 25%, #c4dbeb 25% 100%);
}

.cpzx-pack--square {
  width: 156px;
  height: 192px;
  margin-right: 26px;
  background: linear-gradient(180deg, #9c611f, #7f4918);
}

.cpzx-pack--square::before,
.cpzx-pack--short::before {
  color: #e8b44a;
}

.cpzx-pack--short {
  width: 90px;
  height: 150px;
  margin-top: 54px;
  background: #9b6638;
}

.cpzx-pack--whitebox {
  width: 168px;
  height: 218px;
  margin-right: 18px;
  border-left: 9px solid #ded6c9;
  background: #f7f6f1;
}

.cpzx-pack--whitebottle {
  width: 78px;
  height: 164px;
  margin-top: 58px;
  background: linear-gradient(90deg, #efefef, #ffffff 52%, #e7e7e7);
}

.cpzx-pages {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cpzx-pages a {
  width: 38px;
  height: 38px;
  border: 1px solid #bdbdbd;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  background: #ffffff;
  font-size: 16px;
}

.cpzx-pages a.is-current {
  border-color: #df0d2b;
  color: #ffffff;
  background: #df0d2b;
}

.cpzx-pages a.is-disabled {
  border-color: #d8d8d8;
  color: #b6b6b6;
  background: #ededed;
  pointer-events: none;
}

.cpzx-footer-brand {
  display: block;
  color: var(--jsy-gold);
  font: 700 24px / 58px var(--jsy-font-kai);
  text-align: right;
}

@media (hover: hover) {
  .cpzx-card:hover .cpzx-card__mask {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1600px) {
  .cpzx-products {
    gap: 22px;
  }

  .cpzx-card__visual,
  .cpzx-card__photo {
    height: 330px;
  }
}

@media (max-width: 1199px) {
  .cpzx-navbox {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 22px;
  }

  .cpzx-tabs {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0;
  }

  .cpzx-tabs a {
    flex: 0 0 190px;
    min-width: 190px;
  }

  .cpzx-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .cpzx-logo {
    min-width: 190px;
    flex-basis: 190px;
  }

  .cpzx-logo__mark {
    width: 46px;
    height: 46px;
    font-size: 21px;
  }

  .cpzx-logo .cpzx-logo__text {
    color: var(--jsy-gold);
    font-size: 22px;
  }

  .cpzx-page .jsy-nav > ul > li > a {
    color: #ffffff;
  }

  .cpzx-banner {
    height: 170px;
  }

  .cpzx-breadcrumb {
    min-height: 0;
  }

  .cpzx-tabs a {
    font-size: 16px;
  }

  .cpzx-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cpzx-panel__head span {
    display: none;
  }
}

@media (max-width: 767px) {
  .cpzx-shell {
    padding: 24px 16px 48px;
  }

  .cpzx-banner {
    height: 140px;
    padding-bottom: 24px;
  }

  .cpzx-banner::before {
    top: 58px;
  }

  .cpzx-banner::after {
    top: 86px;
  }

  .cpzx-tabs {
    font-size: 16px;
  }

  .cpzx-navbox {
    margin-bottom: 22px;
    padding: 18px;
  }

  .cpzx-breadcrumb {
    font-size: 14px;
  }

  .cpzx-tabs a {
    flex-basis: 50%;
    min-width: 150px;
    height: 54px;
    padding: 0 18px;
  }

  .cpzx-panel {
    padding: 28px 14px 34px;
  }

  .cpzx-products {
    gap: 14px;
  }

  .cpzx-card__visual,
  .cpzx-card__photo {
    height: 260px;
  }

  .cpzx-card__name {
    height: 52px;
    font-size: 15px;
  }

  .cpzx-card__mask {
    padding: 34px 24px;
  }

  .cpzx-card__mask span {
    margin-bottom: 22px;
  }

  .cpzx-pack {
    transform: scale(0.78);
    transform-origin: center bottom;
  }
}

@media (max-width: 560px) {
  .cpzx-logo {
    min-width: 158px;
    flex-basis: 158px;
    gap: 8px;
  }

  .cpzx-logo__mark {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .cpzx-logo .cpzx-logo__text {
    font-size: 18px;
  }

  .cpzx-logo__text::after {
    display: none;
  }

  .cpzx-products {
    grid-template-columns: 1fr;
  }

  .cpzx-card__visual,
  .cpzx-card__photo {
    height: 300px;
  }

  .cpzx-footer-brand {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpzx-tabs a,
  .cpzx-tab__fill,
  .cpzx-breadcrumb a {
    transition: none;
  }
}

.cpzx-navbox,
.cpzx-breadcrumb {
  min-height: 60px;
}

.cpzx-breadcrumb {
  font-size: 14px;
}

.cpzx-breadcrumb .is-active {
  color: var(--jsy-gold);
  font-weight: 400;
}

.cpzx-tabs {
  font-size: 16px;
}

.cpzx-tabs a {
  height: 60px;
  font-size: 16px;
  font-weight: 400;
}