body {
  background: #fff;
}

.pageBody {
  /* background: #f6f6f6; */
  padding: 0.38rem 0 1rem;
}

.layout {
  display: flex;
  gap: 0.36rem;
  align-items: flex-start;
}

.listBox {
  flex: 1;
}

.productList {
  /* flex: 1; */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.26rem;
}

.productCard {
  height: 2.93rem;
}

.productCard .imgBox {
  height: 1.94rem;
}

.productCard .txt {
  padding: .16rem;
}

.productCard h3 {
  font-weight: 500;
  font-size: 0.18rem;
  color: #000000;
  margin-bottom: .16rem;
}

.productCard p {
  font-weight: 400;
  font-size: 0.16rem;
  color: #797979;
}

.productDetailTop {
  display: grid;
  grid-template-columns: 1fr 7.69rem;
  gap: 1.36rem;
  padding: 0.72rem 0;
  border-bottom: 0.01rem solid #C9C9C9;
}

.productDetailTop>div{
    height: 5.33rem;
    
    position: relative;
}

.productDetailTop h1 {
  color: var(--blue);
  font-weight: 500;
  font-size: 0.45rem;
  margin-bottom: 0.4rem;
  margin-top: .13rem;
}

.productDetailTop article {
  width: 6.5rem;
  margin-bottom: 1.27rem;
}

.productDetailTop article p {
  color: #505050;
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.35rem;
}

.thumbs {
  /*display: flex;*/
  /*gap: 0.25rem;*/
  /*margin-top: 0.28rem;*/
  /*position: absolute;*/
  width: 6.5rem;
  bottom: 0;
  left: 0;
  height: 1.05rem;
}

/*.thumbs span {*/
/*  width: 1.5rem;*/
/*  height: 1.05rem;*/
/*  border: 0.01rem solid #ddd;*/
/*  background: #fff;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/

.thumbs .swiper-slide{
  border: 0.01rem solid #ddd;
  background: #fff;
}

.thumbs .swiper-slide.active {
  border-color: var(--orange);
}

.thumbs img,
.bigProduct img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bigProduct img {
  display: none;
}

.bigProduct img.active {
  display: block;
}

.bigProduct {
  height: 5.23rem;
  border: 0.01rem solid var(--orange);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detailSection {
  padding: 1rem 0;
  border-bottom: 0.01rem solid #ddd;
}

.detailSection:last-child {
  border-bottom: 0;
}

.detailSection h2 {
  color: var(--blue);
  font-weight: 500;
  font-size: 0.35rem;
  margin-bottom: .4rem;
}

.detailSection article {
  font-weight: 400;
  font-size: 0.18rem;
  color: #7C7C7C;
  line-height: 0.35rem;
}

.featureGrid,
.detailText {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.32rem;
}

.featureGrid .item {
  background: #fff;
  padding: .3rem 0.23rem;
  min-height: 2rem;
}

.featureGrid .item:hover {
  background: var(--orange);
}

.featureGrid h3 {
  font-weight: bold;
  font-size: 0.2rem;
  color: #000000;
  margin-bottom: 0.25rem;
}

.featureGrid p,
.serviceList p {
  font-weight: 400;
  font-size: 0.16rem;
  color: #7C7C7C;
  line-height: 0.3rem;
}

.featureGrid .item:hover h3,
.featureGrid .item:hover p {
  color: #fff;
}

.detailText .item {
  padding-left: .22rem;
  position: relative;
}

.detailText .item::after,
.detailText .item::before {
  content: '';
  position: absolute;
  width: .15rem;
  height: .15rem;
  transform: rotate(45deg);
  box-sizing: border-box;
  left: 0;
  top: .05rem;
}

.detailText .item::after {
  border: 0.01rem solid var(--orange);
}

.detailText .item::before {
  background: var(--orange);
  border: .05rem solid transparent;
  background-clip: content-box;
  z-index: 1;
  transition: all 0.3s linear;
}

.detailText .item:hover::before {
  border: 0rem solid transparent;
}

.detailText .item .txt h3{
    font-weight: bold;
    font-size: 0.2rem;
    color: #000000;
    margin-bottom: .1rem;
}

.detailText .item .txt p{
    font-weight: 400;
    font-size: 0.18rem;
    color: #7C7C7C;
}

.detailText .item:hover .txt h3,
.detailText .item:hover .txt p{
    color: var(--blue);
}

.appGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.appGrid .item {
  /*min-height: 3.23rem;*/
  text-align: center;
}

.appGrid .item p{
    font-weight: 400;
    font-size: 0.18rem;
    color: #7C7C7C;
}

.appGrid .item:hover p {
  color: var(--blue);
}

.appGrid .imgBox {
  height: 2.84rem;
  background: #e9edf3;
  margin-bottom: 0.2rem;
}

.appGrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serviceList .item {
  min-height: 0.9rem;
  background: #fff;
  margin-bottom: 0.2rem;
  padding: 0.25rem 0.17rem;
  display: flex;
  align-items: center;
  gap: .2rem;
}

.serviceList .item:hover {
  background: var(--orange);
  border-left-color: var(--orange);
}

.serviceList .item .num {
  width: .39rem;
  height: .39rem;
  transform: rotate(45deg);
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .05rem;
}

.serviceList .item:hover .num {
  background: #fff;
}

.serviceList .item .num:after {
  content: '';
  position: absolute;
  width: .39rem;
  height: .39rem;
  /* transform: rotate(45deg); */
  box-sizing: border-box;
  border-radius: .05rem;
  border: 0.01rem solid var(--blue);
  left: -.03rem;
  top: .03rem;
}

.serviceList .item:hover .num:after {
  display: none;
}

.serviceList .item .num span {
  font-weight: 600;
  font-size: 0.14rem;
  color: #FFFFFF;
  transform: rotate(-45deg);
}

.serviceList .item:hover .num span {
  color: var(--orange);
}

.serviceList .item:hover .num {
  color: #fff;
}

.serviceList .item:hover p {
  color: #fff;
}

.dataGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .35rem 0.2rem;
}

.dataGrid img {
  width: 100%;
  height: 2.53rem;
  object-fit: cover;
  background: #fff;
}

.quickContact {
  background: #FAFAFA;
}

@media (max-width: 1024px) {
  .pageBody {
    padding: 0.42rem 0 0.72rem;
  }

  .layout {
    flex-direction: column;
    gap: 0.32rem;
  }

  .listBox {
    width: 100%;
  }

  .productList {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.24rem;
  }

  .productCard {
    height: auto;
  }

  .productCard .imgBox {
    height: 2.28rem;
  }

  .productCard .txt {
    padding: 0.22rem;
  }

  .productCard h3,
  .productCard p {
    font-size: 0.22rem;
  }

  .productDetailTop {
    display: flex;
    flex-direction: column;
    gap: 0.36rem;
    padding: 0.5rem 0;
  }

  .productDetailTop > div {
    height: auto;
  }

  .productDetailTop h1 {
    font-size: 0.42rem;
    margin: 0 0 0.24rem;
  }

  .productDetailTop article {
    width: 100%;
    margin-bottom: 0.32rem;
  }

  .productDetailTop article p {
    font-size: 0.22rem;
    line-height: 0.36rem;
  }

  .thumbs {
    width: 100%;
    height: 1.15rem;
    position: static;
  }

  .bigProduct {
    height: 4.5rem;
  }

  .detailSection {
    padding: 0.58rem 0;
  }

  .detailSection h2 {
    font-size: 0.34rem;
    margin-bottom: 0.28rem;
  }

  .detailSection article {
    font-size: 0.22rem;
    line-height: 0.36rem;
  }

  .featureGrid,
  .detailText {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.24rem;
  }

  .featureGrid .item {
    min-height: 0;
  }

  .featureGrid h3,
  .detailText .item .txt h3 {
    font-size: 0.24rem;
  }

  .featureGrid p,
  .serviceList p,
  .detailText .item .txt p {
    font-size: 0.2rem;
    line-height: 0.32rem;
  }

  .appGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.28rem;
  }

  .appGrid .imgBox {
    height: 2.5rem;
  }

  .appGrid .item p {
    font-size: 0.2rem;
  }

  .serviceList .item {
    align-items: flex-start;
  }

  .dataGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.24rem;
  }

  .dataGrid img {
    height: 2.8rem;
  }
}

@media (max-width: 560px) {
  .productList,
  .featureGrid,
  .detailText,
  .appGrid,
  .dataGrid {
    /*grid-template-columns: 1fr;*/
  }

  .bigProduct {
    height: 3.7rem;
  }
}