.product_banner {
  isolation: isolate;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.product_banner.img_bg > img {
  left: 2.4rem;
  width: calc(100% - 4.8rem);
  height: 68.08rem;
  border-radius: 3.46rem;
  background-color: #041030;
}
.product_banner .banner {
  position: relative;
  height: 68.08rem;
  margin: 0px 2.4rem;
  border-radius: 3.46rem;
  overflow: hidden;
}
.product_banner .banner::before {
  content: '';
  position: absolute;
  inset: 0px;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(4, 16, 48, 0.9) 0%, rgba(4, 16, 48, 0.88) 3.9%, rgba(4, 16, 48, 0.53) 28.8%, rgba(4, 16, 48, 0) 55.8%);
}
.product_banner .banner .content {
  height: 100%;
  padding-top: 13.2rem;
}
.product_banner .tcon h1 {
  color: #fff;
  font-weight: 520;
  font-size: 6.4rem;
  line-height: 8rem;
}
.product_banner .tcon h3 {
  margin-top: 1.92rem;
  color: #fff;
  font-weight: 450;
  font-size: 2.6rem;
  line-height: 3.4rem;
}
.product_banner .tcon p {
  margin-top: 3.28rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 305;
  font-size: 2.2rem;
  line-height: 3.5rem;
}
.product_banner .btns {
  display: flex;
  gap: 1.96rem;
  margin-top: 3.95rem;
}
.product_banner .btn {
  min-width: 16.39rem;
  padding: 0px 3.1rem;
}
.product_banner .btn_white {
  min-width: 17.09rem;
}
.product_banner .btn_white:hover {
  box-shadow: none;
}
.product_banner .highlights {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 14.6rem;
  padding: 0px 15.86rem;
}
.product_banner .highlights li {
  display: flex;
  align-items: center;
  gap: 2.99rem;
}
.product_banner .highlights .icon {
  flex-shrink: 0;
  display: block;
  width: 7.8rem;
  height: 7.8rem;
  margin-top: -0.4rem;
  border-radius: 1.6rem;
  transition: transform 0.4s;
  background-color: var(--primary);
  box-shadow: 0px 0.8rem 1.6rem rgba(232, 199, 167, 0.45);
}
.product_banner .highlights li:hover .icon {
  transform: translateY(-0.4rem);
}
.product_banner .highlights .icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.product_banner .highlights p {
  color: var(--title);
  font-weight: 450;
  font-size: 2.4rem;
  line-height: 3rem;
  white-space: nowrap;
}

@media screen and (min-width: 769px) and (max-width: 1220px) {
  .product_banner .highlights {
    padding: 0px;
  }
}

@media screen and (max-width: 1024px) {
  .product_banner.img_bg > img {
    object-position: 60% center;
  }
}

@media screen and (max-width: 768px) {
  .product_banner.img_bg > img {
    left: 10px;
    width: calc(100% - 20px);
    height: 440px;
    border-radius: 16px;
    object-position: 62% center;
  }
  .product_banner .banner {
    height: 440px;
    margin: 0px 10px;
    border-radius: 16px;
  }
  .product_banner .banner::before {
    background-image: linear-gradient(90deg, rgba(4, 16, 48, 0.85) 0%, rgba(4, 16, 48, 0.45) 100%);
  }
  .product_banner .banner .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0px;
  }
  .product_banner .tcon h1 {
    font-size: 32px;
    line-height: 1.3;
  }
  .product_banner .tcon h3 {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.5;
  }
  .product_banner .tcon p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.7;
  }
  .product_banner .btns {
    gap: 10px;
    margin-top: 24px;
  }
  .product_banner .btn,
  .product_banner .btn_white {
    min-width: 0px;
    padding: 0px 22px;
  }
  .product_banner .highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 20px 12px;
    height: auto;
    padding: 24px 0px;
  }
  .product_banner .highlights li {
    gap: 12px;
  }
  .product_banner .highlights .icon {
    width: 46px;
    height: 46px;
    margin-top: 0px;
    border-radius: 10px;
  }
  .product_banner .highlights p {
    font-size: 15px;
    line-height: 1.4;
  }
}

.product_guarantee {
  position: relative;
  z-index: 1;
  padding: 15.97rem 0px 18.3rem;
  background: #fff url(../img/guarantee-bg.webp) no-repeat center top / 100% 100%;
}
.product_guarantee .tag {
  border-color: rgba(34, 29, 21, 0.3);
}
.product_guarantee .tcon .tag + h2 {
  margin-top: 2.18rem;
}
.product_guarantee .guarantee_tabs {
  display: flex;
  justify-content: space-between;
  margin-top: 6.36rem;
}
.product_guarantee .guarantee_tabs li {
  position: relative;
  width: 30.5rem;
  cursor: pointer;
}
.product_guarantee .guarantee_tabs .bar {
  display: block;
  position: relative;
  height: 0.3rem;
  overflow: hidden;
  background-color: rgba(18, 32, 51, 0.22);
}
.product_guarantee .guarantee_tabs .bar b {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0%;
  height: 100%;
  background-color: #142447;
}
.product_guarantee .guarantee_tabs li:hover .bar b {
  width: 12%;
  transition: width 0.4s;
}
.product_guarantee .guarantee_tabs li.active .bar b {
  width: 100%;
  animation: product_guarantee_progress 6s linear;
}
.product_guarantee.paused .guarantee_tabs li.active .bar b {
  animation-play-state: paused;
}
@keyframes product_guarantee_progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.product_guarantee .guarantee_tabs .icon {
  display: block;
  width: 6.8rem;
  height: 6.8rem;
  margin-top: 4.6rem;
  border-radius: 1.6rem;
  transition: transform 0.4s, box-shadow 0.4s;
  background-color: var(--primary);
}
.product_guarantee .guarantee_tabs li.active .icon {
  box-shadow: 0px 0.8rem 1.6rem rgba(232, 199, 167, 0.45);
}
.product_guarantee .guarantee_tabs li:hover .icon {
  transform: translateY(-0.4rem);
}
.product_guarantee .guarantee_tabs .icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.product_guarantee .guarantee_tabs h3 {
  margin-top: 2.85rem;
  color: var(--dark);
  font-weight: 450;
  font-size: 2.8rem;
  line-height: 3.7rem;
  transition: color 0.3s;
}
.product_guarantee .guarantee_tabs li:hover h3 {
  color: var(--primary);
}
.product_guarantee .guarantee_tabs p {
  display: flex;
  align-items: center;
  margin-top: 1.93rem;
  color: var(--text);
  font-weight: 380;
  font-size: 1.6rem;
  line-height: 2.2rem;
  white-space: nowrap;
}
.product_guarantee .guarantee_tabs p u {
  color: var(--primary);
  text-underline-offset: 0.3rem;
}
.product_guarantee .tip_icon {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 1.27rem;
  cursor: help;
}
.product_guarantee .tip_icon i {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background: url("../img/icon-tip.svg") no-repeat center / 35% rgba(255, 255, 255, 0.18);
}
.product_guarantee .tip_icon .tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.6rem);
  z-index: 5;
  width: max-content;
  max-width: 46.2rem;
  padding: 3.27rem 3.4rem 3.6rem;
  border-radius: 1.74rem;
  color: var(--text);
  font-weight: 330;
  font-size: 1.8rem;
  line-height: 3.2rem;
  font-family: 'MiSans', sans-serif;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s;
  transform: translate(-50%, 1rem);
  border: 2px solid var(--primary);
  background-color: #fff;
  box-shadow: 0px 1.4rem 3rem rgba(240, 131, 0, 0.15);
}
.product_guarantee .tip_icon .tip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 3.1rem;
  height: 1.4rem;
  transform: translateX(-50%);
  background: url("../img/tip-bot.svg") no-repeat center top / contain;
}
.product_guarantee .tip_icon .tip b,
.product_guarantee .tip_icon .tip strong {
  color: var(--title);
  font-weight: 380;
}
.product_guarantee .tip_icon:hover .tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0px);
}
.product_guarantee .guarantee_panels {
  display: grid;
  margin-top: 9.71rem;
}
.product_guarantee .panel {
  grid-area: 1 / 1;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s;
}
.product_guarantee .panel.active {
  opacity: 1;
  visibility: visible;
}
.product_guarantee .panel li {
  width: 53.5rem;
  height: 38.05rem;
  border-radius: 1.6rem;
  transform: translateY(2rem);
  transition: transform 0.6s;
}
.product_guarantee .panel.active li {
  transform: translateY(0px);
}
.product_guarantee .panel.active li:nth-child(2) {
  transition-delay: 0.08s;
}
.product_guarantee .panel.active li:nth-child(3) {
  transition-delay: 0.16s;
}
.product_guarantee .panel li:hover img {
  transform: scale(1.05);
}

@media screen and (min-width: 769px) and (max-width: 1220px) {
  .product_guarantee .guarantee_tabs {
    gap: 2rem;
  }
  .product_guarantee .guarantee_tabs li {
    flex: 1;
    width: auto;
  }
  .product_guarantee .guarantee_tabs p {
    flex-wrap: wrap;
    white-space: normal;
  }
  .product_guarantee .panel {
    gap: 2rem;
  }
  .product_guarantee .panel li {
    flex: 1;
    width: auto;
    height: auto;
    aspect-ratio: 535 / 380;
  }
}

@media screen and (max-width: 1024px) {
  .product_guarantee .tip_icon .tip {
    left: auto;
    right: -2rem;
    transform: translate(0px, 1rem);
  }
  .product_guarantee .tip_icon:hover .tip {
    transform: translate(0px, 0px);
  }
  .product_guarantee .tip_icon .tip::after {
    left: auto;
    right: 1.7rem;
    transform: none;
  }
}

@media screen and (max-width: 768px) {
  .product_guarantee {
    padding: 50px 0px 60px;
  }
  .product_guarantee .guarantee_tabs {
    flex-wrap: nowrap;
    gap: 0px 16px;
    margin: 24px -20px 0px;
    padding: 0px 20px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .product_guarantee .guarantee_tabs::-webkit-scrollbar {
    display: none;
  }
  .product_guarantee .guarantee_tabs li {
    flex-shrink: 0;
    width: 150px;
  }
  .product_guarantee .guarantee_tabs .icon {
    width: 40px;
    height: 40px;
    margin-top: 16px;
    border-radius: 10px;
  }
  .product_guarantee .guarantee_tabs h3 {
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.4;
  }
  .product_guarantee .guarantee_tabs p {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    white-space: normal;
  }
  .product_guarantee .tip_icon {
    display: none;
  }
  .product_guarantee .guarantee_panels {
    margin-top: 24px;
  }
  .product_guarantee .panel {
    flex-direction: column;
    gap: 10px;
  }
  .product_guarantee .panel li {
    width: 100%;
    height: auto;
    border-radius: 12px;
    aspect-ratio: 535 / 300;
  }
  .product_guarantee .panel li + li {
    display: none;
  }
}

.product_process {
  position: relative;
  z-index: 2;
  margin-top: -2.3rem;
  padding: 15.98rem 0px 16rem;
  overflow: hidden;
  border-radius: 2.3rem;
  color: #fff;
  background: #010e30 url(../img/process-bg.webp) no-repeat center / 100% 100%;
}
.product_process .tag {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.product_process .tcon .tag + h2 {
  margin-top: 2.18rem;
}
.product_process .tcon h2 {
  color: #fff;
}
.product_process .routes {
  display: flex;
  gap: 3.06rem;
  margin-top: 3.59rem;
}
.product_process .routes li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3.12rem;
  height: 12rem;
  padding: 0px 2rem 0.2rem 4.05rem;
  border-radius: 1.89rem;
  transition: border-color 0.3s, background-color 0.3s;
  border: 2px solid rgba(255, 255, 255, 0.21);
  background-color: rgba(35, 49, 79, 0.93);
}
.product_process .routes li:hover {
  border-color: rgba(240, 131, 0, 0.8);
  background-color: rgba(44, 58, 90, 0.95);
}
.product_process .routes .icon {
  flex-shrink: 0;
  display: block;
  width: 3.51rem;
  height: 4.2rem;
}
.product_process .routes .icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.product_process .routes p {
  font-weight: 450;
  font-size: 2.4rem;
  line-height: 3.2rem;
}
.product_process .note {
  margin-top: 2.79rem;
}
.product_process .note p {
  color: rgba(255, 255, 255, 0.74);
  font-weight: 330;
  font-size: 1.5rem;
  line-height: 2rem;
}
.product_process .flow {
  margin-top: 7.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.product_process .flow .title h3 {
  font-weight: 450;
  font-size: 4.4rem;
  line-height: 5.8rem;
}
.product_process .flow_box {
  position: relative;
  min-height: 30.2rem;
  margin-top: 7.3rem;
}
.product_process .flow_box::before {
  content: '';
  position: absolute;
  left: 0px;
  right: 0px;
  top: 8.2rem;
  height: 0.2rem;
  opacity: 0.25;
  background: radial-gradient(circle, #fff 0.1rem, rgba(255, 255, 255, 0) 0.11rem) repeat-x left center / 1.6rem 0.2rem;
}
.product_process .steps {
  position: relative;
  z-index: 1;
  display: flex;
  margin: 0px -1.69rem;
}
.product_process .steps li {
  width: 14.2857%;
  text-align: center;
}
.product_process .steps h4 {
  font-weight: 520;
  font-size: 2.5rem;
  line-height: 3.3rem;
  white-space: nowrap;
}
.product_process .steps .icon {
  display: block;
  width: 6.3rem;
  height: 6.3rem;
  margin: 1.63rem auto 0px;
  border-radius: 1.2rem;
  transition: transform 0.4s, box-shadow 0.4s;
  background-color: var(--primary);
}
.product_process .steps li:hover .icon {
  transform: translateY(-0.5rem);
  box-shadow: 0px 1rem 2rem rgba(240, 131, 0, 0.35);
}
.product_process .steps .icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.product_process .steps p {
  margin-top: 2.56rem;
  color: rgba(255, 255, 255, 0.74);
  font-weight: 330;
  font-size: 1.5rem;
  line-height: 2.4rem;
  white-space: nowrap;
}
.product_process .check {
  position: absolute;
  left: 20.89%;
  top: 20rem;
  width: 43.74%;
  height: 10.15rem;
  padding-top: 2.8rem;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  border-top: none;
}
.product_process .check::before,
.product_process .check::after {
  content: '';
  position: absolute;
  top: -0.63rem;
  width: 1.27rem;
  height: 1.27rem;
  border-radius: 50%;
  background-color: #fff;
}
.product_process .check::before {
  left: -0.68rem;
}
.product_process .check::after {
  right: -0.68rem;
}
.product_process .check p {
  font-weight: 330;
  font-size: 1.8rem;
  line-height: 3rem;
}

@media screen and (min-width: 769px) and (max-width: 1220px) {
  .product_process .steps p {
    font-size: 1.3rem;
    white-space: normal;
  }
  .product_process .steps h4 {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 1024px) {
  .product_process .routes p {
    font-size: 2rem;
  }
  .product_process .flow_box {
    min-height: 0px;
  }
  .product_process .flow_box::before {
    display: none;
  }
  .product_process .steps {
    flex-wrap: wrap;
    gap: 3rem 0px;
    margin: 0px;
  }
  .product_process .steps li {
    width: 25%;
  }
  .product_process .check {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 4rem;
    padding: 2rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
    border-radius: 1.2rem;
  }
  .product_process .check::before,
  .product_process .check::after {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .product_process {
    margin-top: -16px;
    padding: 50px 0px 56px;
    border-radius: 16px;
  }
  .product_process .routes {
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }
  .product_process .routes li {
    flex: none;
    gap: 14px;
    height: 60px;
    padding: 0px 18px;
    border-width: 1px;
    border-radius: 12px;
  }
  .product_process .routes .icon {
    width: 20px;
    height: 24px;
  }
  .product_process .routes p {
    font-size: 16px;
    line-height: 1.4;
  }
  .product_process .note {
    margin-top: 14px;
  }
  .product_process .note p {
    font-size: 12px;
    line-height: 1.7;
  }
  .product_process .flow {
    margin-top: 36px;
    padding-top: 30px;
  }
  .product_process .flow .title h3 {
    font-size: 22px;
    line-height: 1.4;
  }
  .product_process .flow_box {
    margin-top: 24px;
  }
  .product_process .steps {
    gap: 24px 10px;
  }
  .product_process .steps li {
    width: calc(50% - 5px);
  }
  .product_process .steps h4 {
    font-size: 16px;
    line-height: 1.4;
  }
  .product_process .steps .icon {
    width: 44px;
    height: 44px;
    margin-top: 10px;
    border-radius: 10px;
  }
  .product_process .steps p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    white-space: normal;
  }
  .product_process .steps p br {
    display: none;
  }
  .product_process .check {
    margin-top: 28px;
    padding: 14px;
  }
  .product_process .check p {
    font-size: 13px;
    line-height: 1.7;
  }
}

.product_value {
  position: relative;
  z-index: 1;
  padding: 16.14rem 0px 16rem;
  background: #fff url(../img/value-bg.webp) no-repeat center / 100% 100%;
}
.product_value .tag {
  border-color: rgba(34, 29, 21, 0.3);
}
.product_value .tcon .tag + h2 {
  margin-top: 2.18rem;
}
.product_value .value_box {
  display: flex;
  justify-content: space-between;
  margin-top: 6.31rem;
}
.product_value .img {
  position: relative;
  flex-shrink: 0;
  width: 64rem;
  height: 44.05rem;
  border-radius: 2.41rem;
}
.product_value .img::after {
  content: '';
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 34.5%;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(0deg, #04102f 0%, rgba(4, 16, 47, 0.88) 11%, rgba(4, 16, 47, 0) 100%);
}
.product_value .img:hover img {
  transform: scale(1.04);
}
.product_value .value_list {
  width: 85.41rem;
  padding: 0px 4.4rem 0px 4.4rem;
  border-radius: 2.33rem;
  background-color: rgba(255, 255, 255, 0.64);
  box-shadow: 0px 0.8rem 1.6rem rgba(175, 189, 198, 0.4);
}
.product_value .value_list li {
  display: flex;
  align-items: center;
  height: 14.67rem;
}
.product_value .value_list li + li {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.product_value .name {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.92rem;
  width: 29.8rem;
}
.product_value .name .icon {
  flex-shrink: 0;
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  transition: transform 0.4s;
}
.product_value .value_list li:hover .icon {
  transform: translateY(-0.4rem);
}
.product_value .name .icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.product_value .name h3 {
  color: var(--dark);
  font-weight: 450;
  font-size: 3.8rem;
  line-height: 5.1rem;
}
.product_value .desc p {
  color: var(--text);
  font-weight: 380;
  font-size: 1.6rem;
  line-height: 2.6rem;
}
.product_value .tip_icon {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0px 0.8rem;
  vertical-align: -0.5rem;
  cursor: help;
}
.product_value .tip_icon i {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background: url("../img/icon-tip.svg") no-repeat center / 35% rgba(255, 255, 255, 0.18);
}
.product_value .tip_icon .tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.6rem);
  z-index: 5;
  width: max-content;
  max-width: 46.2rem;
  padding: 3.27rem 3.4rem 3.6rem;
  border-radius: 1.74rem;
  color: var(--text);
  font-weight: 330;
  font-size: 1.8rem;
  line-height: 3.2rem;
  font-family: 'MiSans', sans-serif;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s;
  transform: translate(-50%, 1rem);
  border: 2px solid var(--primary);
  background-color: #fff;
  box-shadow: 0px 1.4rem 3rem rgba(240, 131, 0, 0.15);
}
.product_value .tip_icon .tip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 3.1rem;
  height: 1.4rem;
  transform: translateX(-50%);
  background: url("../img/tip-bot.svg") no-repeat center top / contain;
}
.product_value .tip_icon .tip b,
.product_value .tip_icon .tip strong {
  color: var(--title);
  font-weight: 380;
}
.product_value .tip_icon:hover .tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0px);
}

@media screen and (min-width: 769px) and (max-width: 1220px) {
  .product_value .value_box {
    gap: 3rem;
  }
  .product_value .img {
    flex: 1;
    width: auto;
    height: auto;
    aspect-ratio: 640 / 440;
  }
  .product_value .value_list {
    width: 55%;
    padding: 0px 3rem;
  }
  .product_value .name {
    width: 22rem;
  }
}

@media screen and (max-width: 1024px) {
  .product_value .value_box {
    flex-direction: column;
    gap: 3rem;
  }
  .product_value .img,
  .product_value .value_list {
    width: 100%;
  }
  .product_value .value_list li {
    height: auto;
    padding: 3rem 0px;
  }
}

@media screen and (max-width: 768px) {
  .product_value {
    padding: 50px 0px 56px;
  }
  .product_value .value_box {
    gap: 20px;
    margin-top: 24px;
  }
  .product_value .img {
    height: auto;
    border-radius: 14px;
    aspect-ratio: 640 / 400;
  }
  .product_value .value_list {
    padding: 0px 18px;
    border-radius: 14px;
  }
  .product_value .value_list li {
    display: block;
    padding: 20px 0px;
  }
  .product_value .name {
    gap: 12px;
    width: auto;
  }
  .product_value .name .icon {
    width: 32px;
    height: 32px;
  }
  .product_value .name h3 {
    font-size: 22px;
    line-height: 1.4;
  }
  .product_value .desc {
    margin-top: 10px;
  }
  .product_value .desc p {
    font-size: 13px;
    line-height: 1.8;
  }
  .product_value .desc p br {
    display: none;
  }
  .product_value .tip_icon {
    width: 18px;
    height: 18px;
    margin: 0px 4px;
    vertical-align: -4px;
  }
  .product_value .tip_icon i {
    width: 18px;
    height: 18px;
  }
  .product_value .tip_icon .tip {
    left: auto;
    right: -20px;
    max-width: 260px;
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.8;
    transform: translate(0px, 10px);
  }
  .product_value .tip_icon:hover .tip {
    transform: translate(0px, 0px);
  }
  .product_value .tip_icon .tip::after {
    left: auto;
    right: 14px;
    width: 31px;
    height: 14px;
    transform: none;
  }
}

.product_grades {
  position: relative;
  z-index: 1;
  padding: 16.02rem 0px 16rem;
  background-color: #fff;
}
.product_grades .tag {
  border-color: rgba(34, 29, 21, 0.3);
}
.product_grades .tcon .tag + h2 {
  margin-top: 2.18rem;
}
.product_grades .head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.product_grades .swiper_btns {
  margin-bottom: 0.45rem;
}
.product_grades .grades_swiper {
  margin: 6.51rem -2rem -2rem;
  padding: 0px 2rem 2rem;
}
.product_grades .swiper-slide {
  width: 52.86rem;
}
.product_grades .card {
  height: 67.14rem;
  border-radius: 1.6rem;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
  border: 1px solid #e4e8ee;
  background-color: #fff;
}
.product_grades .swiper-slide.active .card {
  border-color: var(--primary);
  box-shadow: 0px 0px 0px 1px var(--primary), 0px 1rem 2rem rgba(226, 216, 207, 0.55);
}
.product_grades .card .img {
  height: 32.44rem;
  border-radius: 1.5rem 1.5rem 0px 0px;
}
.product_grades .card:hover .img img {
  transform: scale(1.05);
}
.product_grades .info {
  padding: 0px 3.35rem;
}
.product_grades .info h3 {
  margin-top: 3.89rem;
  color: var(--dark);
  font-weight: 450;
  font-size: 2.8rem;
  line-height: 3.7rem;
}
.product_grades .info > .syedittext p {
  margin-top: 1.9rem;
  color: var(--text);
  font-weight: 380;
  font-size: 1.6rem;
  line-height: 2.2rem;
}
.product_grades .info dl {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 4.05rem;
  padding: 1.25rem 0px 1.26rem;
  border-top: 1px dashed #e4e8ee;
  border-bottom: 1px dashed #e4e8ee;
}
.product_grades .info dt {
  flex-shrink: 0;
  color: var(--text);
  font-weight: 380;
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.product_grades .info dd {
  color: var(--dark);
  font-weight: 520;
  font-size: 1.6rem;
  line-height: 2.4rem;
  text-align: right;
}
.product_grades .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 4.64rem;
}
.product_grades .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.99rem;
}
.product_grades .tags span {
  display: flex;
  align-items: center;
  height: 3.53rem;
  padding: 0px 1.03rem;
  border-radius: 1.77rem;
  color: var(--primary);
  font-weight: 520;
  font-size: 1.4rem;
  white-space: nowrap;
  background-color: #fff5eb;
}
.product_grades .more {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.78rem;
  color: var(--title);
  font-weight: 450;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.product_grades .more i {
  display: block;
  width: 3.34rem;
  height: 3.34rem;
  border-radius: 50%;
  transition: 0.3s;
  background-color: var(--dark);
  -webkit-mask: none;
}
.product_grades .more i::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M13.2 20.8 20.8 13.2M14.5 13.2h6.3v6.3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M13.2 20.8 20.8 13.2M14.5 13.2h6.3v6.3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.product_grades .swiper-slide.active .more i {
  background-color: var(--primary);
}
.product_grades .swiper-slide.active .more i::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M11.8 17h10.4M18.4 13.1 22.2 17l-3.8 3.9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M11.8 17h10.4M18.4 13.1 22.2 17l-3.8 3.9'/%3E%3C/svg%3E");
}
.product_grades .more:hover i {
  transform: translateX(0.4rem);
}

@media screen and (min-width: 769px) and (max-width: 1220px) {
  .product_grades .swiper-slide {
    width: 46rem;
  }
  .product_grades .card {
    height: 70rem;
  }
}

@media screen and (max-width: 1024px) {
  .product_grades .swiper-slide {
    width: 44rem;
  }
  .product_grades .card {
    height: 72rem;
  }
  .product_grades .info {
    padding: 0px 2.4rem;
  }
}

@media screen and (max-width: 768px) {
  .product_grades {
    padding: 50px 0px 56px;
  }
  .product_grades .head {
    display: block;
  }
  .product_grades .swiper_btns {
    margin: 22px 0px 0px;
  }
  .product_grades .grades_swiper {
    margin: 22px -20px -10px;
    padding: 0px 20px 10px;
  }
  .product_grades .swiper-slide {
    width: 280px;
  }
  .product_grades .card {
    height: 430px;
    border-radius: 12px;
  }
  .product_grades .card .img {
    height: 172px;
    border-radius: 11px 11px 0px 0px;
  }
  .product_grades .info {
    padding: 0px 16px;
  }
  .product_grades .info h3 {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.4;
  }
  .product_grades .info > .syedittext p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
  }
  .product_grades .info dl {
    margin-top: 14px;
    padding: 8px 0px;
    gap: 10px;
  }
  .product_grades .info dt,
  .product_grades .info dd {
    font-size: 12px;
    line-height: 1.6;
  }
  .product_grades .bottom {
    display: block;
    margin-top: 14px;
  }
  .product_grades .tags {
    gap: 6px;
  }
  .product_grades .tags span {
    height: 26px;
    padding: 0px 8px;
    font-size: 11px;
  }
  .product_grades .more {
    gap: 10px;
    margin-top: 14px;
    font-size: 13px;
  }
  .product_grades .more i {
    width: 26px;
    height: 26px;
  }
}

.product_honor {
  position: relative;
  z-index: 1;
  padding: 9.95rem 0px 10rem;
}
.product_honor::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 3.03rem;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.76);
  background: radial-gradient(98rem 46rem at 50% 33%, rgba(201, 227, 244, 0.42) 0%, rgba(230, 243, 251, 0.32) 32%, rgba(255, 255, 255, 0) 84%), linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, #fff 11%, #fff 83%, rgba(255, 255, 255, 0.8) 100%);
}
.product_honor .tag {
  border-color: rgba(34, 29, 21, 0.3);
}
.product_honor .tcon .tag + h2 {
  margin-top: 2.17rem;
}
.product_honor .tcon h2 + p {
  margin-top: 2.31rem;
  font-weight: 330;
}
.product_honor .head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.product_honor .btn_box {
  margin-bottom: 0.81rem;
}
.product_honor .honor_list {
  display: flex;
  gap: 2.62rem;
  margin-top: 7rem;
}
.product_honor .honor_list > li {
  position: relative;
  flex: 1;
  min-height: 38.09rem;
  padding: 2.72rem 3.05rem 6rem;
  border-radius: 2.4rem;
  transition: transform 0.4s, box-shadow 0.4s;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.64);
  box-shadow: 0px 0.8rem 1.6rem rgba(175, 189, 198, 0.3);
}
.product_honor .honor_list > li:hover {
  transform: translateY(-0.6rem);
  box-shadow: 0px 1.6rem 3.2rem rgba(175, 189, 198, 0.45);
}
.product_honor .honor_list h3 {
  color: var(--dark);
  font-weight: 450;
  font-size: 3.6rem;
  line-height: 4.8rem;
}
.product_honor .rows {
  margin-top: 2.95rem;
}
.product_honor .rows > li {
  position: relative;
  padding-left: 1.41rem;
  color: var(--text);
  font-weight: 380;
  font-size: 1.6rem;
  line-height: 3.2rem;
}
.product_honor .rows > li + li {
  margin-top: 0.8rem;
}
.product_honor .rows > li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 1.35rem;
  width: 0.53rem;
  height: 0.53rem;
  border-radius: 50%;
  background-color: var(--primary);
}
.product_honor .rows .note {
  display: block;
  margin-top: 0.2rem;
  color: rgba(112, 112, 112, 0.9);
  font-weight: 330;
  font-size: 1.4rem;
  line-height: 2.6rem;
}
.product_honor .num {
  position: absolute;
  right: 1.95rem;
  bottom: 1.96rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  color: #fff;
  font-weight: 520;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  background-color: var(--primary);
}

@media screen and (min-width: 769px) and (max-width: 1220px) {
  .product_honor .rows > li {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 1024px) {
  .product_honor .honor_list {
    flex-wrap: wrap;
  }
  .product_honor .honor_list > li {
    flex: none;
    width: 100%;
    min-height: 0px;
  }
}

@media screen and (max-width: 768px) {
  .product_honor {
    padding: 50px 0px 56px;
  }
  .product_honor::before {
    border-radius: 16px;
  }
  .product_honor .head {
    display: block;
  }
  .product_honor .btn_box {
    margin: 20px 0px 0px;
  }
  .product_honor .honor_list {
    gap: 12px;
    margin-top: 24px;
  }
  .product_honor .honor_list > li {
    padding: 18px 18px 40px;
    border-radius: 14px;
  }
  .product_honor .honor_list h3 {
    font-size: 20px;
    line-height: 1.4;
  }
  .product_honor .rows {
    margin-top: 12px;
  }
  .product_honor .rows > li {
    padding-left: 12px;
    font-size: 13px;
    line-height: 2;
  }
  .product_honor .rows > li::before {
    top: 10px;
    width: 5px;
    height: 5px;
  }
  .product_honor .rows .note {
    font-size: 12px;
    line-height: 1.8;
  }
  .product_honor .rows .note br {
    display: none;
  }
  .product_honor .num {
    right: 14px;
    bottom: 14px;
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
}