.top_centent {

  display: flex;

  justify-content: start;

  gap: 1.5rem;

  margin-bottom: 2.5rem;

}



.img_swiper {

  width: 26.563rem;

}

.gallery-top {

  width: 100%;

  height: 21.875rem;

  border: solid 0.063rem #e5e5e5;

  margin-bottom: 1rem;

}

.swiper-slide {

  display: flex;

  align-items: center;

  justify-content: center;

}

.swiper-slide img {

  max-width: 100%;

  max-height: 100%;

}

.top_centent>.text_info {

  flex: 1;

}

.gallery_thumbs_box {

  width: 100%;

  height: 5.625rem;

  display: flex;

  gap: 0.28rem;

}

.swiper-btn-next,

.swiper-btn-prev {

  position: unset;

  width: 1.563rem;

  background-color: #eeeeee;

}

.swiper-btn-next::before,

.swiper-btn-prev::before {

  margin: 0;

  font-size: 1.5rem;

  font-weight: 600;

  color: #a0a0a0;

}

.gallery-thumbs {

  flex: 1;

}

.gallery-thumbs .swiper-wrapper {

  width: 100%;

}

.gallery-thumbs .swiper-slide>div {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  padding: 0.28rem;

  background-color: #ffffff;

  border: solid 0.063rem #e5e5e5;

}

.gallery-thumbs .swiper-slide>div img {

  max-width: 100%;

  max-height: 100%;

}

.gallery-thumbs .swiper-slide-thumb-active>div {

  border-color: var(--theme);

}

.text_info>h3 {

  font-size: 1.125rem;

  font-weight: 600;

  line-height: 2.813rem;

  letter-spacing: 0rem;

  color: #000000;

}



.detail {

  display: flex;

  gap: 4rem;

  font-size: 0.875rem;

  line-height: 1.875rem;

  letter-spacing: 0rem;

  color: #5f5f5f;

  padding-bottom: 1rem;

  overflow:hidden;
  
  overflow-x: auto;
}

.text_info>p {

  font-size: 0.875rem;

  font-weight: 600;

  line-height: 2rem;

  color: #000000;

}

.order_box {

  font-size: 0.875rem;

  height: 2rem;

  color: #5f5f5f;

  display: flex;

  gap: 1rem;

  padding: 1rem 0;

}

.order_box button {

  background: none;

  color: #5f5f5f;

}

.order_box .icon-shoucan::before {

  color: var(--theme2);

}

.order_box>span>.icon::before {

  margin: 0;

}

.order_box>span {

  display: flex;

  align-items: center;

  gap: 0.28rem;

}

.order_box .amount {

  height: 2rem;

  width: 7rem;

  text-align: center;

  line-height: 2rem;

  border: solid 0.063rem #e5e5e5;

}

.order_box>span>.icon {

  width: 2rem;

  height: 2rem;

  border: solid 0.063rem #e5e5e5;

}



.text_info .btns_box {

  display: flex;

  gap: 1rem;

  padding: 1rem 0;

}

.text_info .btns_box button {

  width: 11.875rem;

  height: 3rem;

  font-size: 1rem;

  font-weight: 600;

  color: #000000;

  background-color: #ffffff;

  border: solid 0.063rem #ff0000;

}

.text_info .btns_box button:first-child {

  background-color: #ff0000;

  color: #ffffff;

}

.price_info {

  width: 16.25rem;

  background-color: #ffffff;

  border: solid 0.063rem #e5e5e5;

}

.price_info .thead,
.price_info .tbody .item {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.price_info .tbody .item .price {

  color: #ff0000;

}

.price_info>div {

  /* display: flex;

    align-items: center;

    justify-content: space-between; */

}

.price_info>.thead {

  padding: 0 2rem 0 1.25rem;

  height: 3.438rem;

  font-size: 1rem;

  font-weight: 600;

  color: #000000;

  background-color: #eeeeee;

}

.price_info>.tbody {

  padding: 0 2rem 0 1.25rem;

  font-size: 0.875rem;

  line-height: 2.25rem;

  letter-spacing: 0rem;

  color: #5f5f5f;

}

.price_info>.tbody span:last-child {

  color: var(--theme2);

}





.nav_box {

  height: 3.125rem;

  background-color: #eeeeee;

  line-height: 3.125rem;

  display: flex;

}

.nav_box>li {

  padding: 0 1.25rem;

  cursor: pointer;

}

.nav_box .active {

  background-color: var(--theme);

}

.other_info {

  border: solid 0.063rem #e5e5e5;

  margin-bottom: 2.5rem;

}

.question {

  padding: 1.25rem;

}

.question>li {

  padding: 1rem 0;

}

.question>li>h4 {

  font-size: 1rem;

  line-height: 1.2rem;

  color: #000;

  padding-bottom: 0.5rem;

}

.question>li>p {

  font-size: 0.875rem;

  line-height: 1.2rem;

  white-space: pre-wrap;

  color: #5f5f5f;

}



table {

  width: 100%;

  overflow-x: auto;

  border-collapse: collapse;

  border-spacing: 0;

  font-size: 0.875rem;

  line-height: 1.5rem;

  letter-spacing: 0rem;

  color: #5f5f5f;

}



tr {

  border-bottom: solid 0.063rem #dcdcdc;

}



table tr:last-child {

  border: none;

}



thead {

  height: 3.75rem;

  background-color: #f3f3f3;

  border: solid 0.063rem #e5e5e5;

  width: 100%;

}



td {

  padding: 1rem;

}



table.relative_product td:first-child {

  width: 8rem;

}



td button {

  width: 9.063rem;

  height: 2.5rem;

  background-color: #0065ab;

  border-radius: 0.313rem;

  color: #ffffff;

  margin: 1rem 0;

}



.icon-shoucan::before {

  color: var(--theme2);

}



td img {

  width: 6.5rem;

  height: auto;

}



.price_box p {

  color: #ff0000;

  white-space: nowrap;

}



.price_box a {

  color: var(--theme);

}

.other_info .question {

  font-size: 0.875rem;

  line-height: 1.5rem;

  letter-spacing: 0rem;

  color: #5f5f5f;

}

.other_info .content,
.other_info .question {

  margin: 1.5rem 1rem;

}

.other_info .content,
.other_info .question,
.other_info .relative_product {

  display: none;

}

.other_info .content.on,
.other_info .question.on,
.other_info .relative_product.on {

  display: block;

}

@media screen and (max-width:768px) {

  .top_centent {

    flex-wrap: wrap;

  }

  .img_swiper {

    width: 100%;

  }

  .price_info {

    width: 100%;

  }

  .price_info>div {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 4rem;

  }

  .top_centent {

    margin-bottom: 2rem;

  }

  .price_info>div>span {

    width: 6rem;

  }

  table.relative_product {

    width: 50rem;

  }



  table.relative_product td:first-child {

    width: 6rem;

  }



  table.relative_product td:last-child {

    width: 6rem;

  }



  .relative_product {

    overflow-x: auto;

  }

}