.catalog {

  width: 100%;

  box-sizing: border-box;

  padding: 0 50px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin: 30px 0 0;

}





.catCont {

  width: calc(100% - 340px);

}



.route {

  display: flex;

  align-items: center;

  gap: 10px;

}



.route a {

  font-size: 18px;

  color: #333;

}



.route a:hover {

  color: #00B7FF;

}



.route hr {

  width: 1px;

  height: 20px;

  border: none;

  background: #333;

  transform: rotate(15deg);

}



.detail {

  max-width: 950px;

  margin: 0 0 0 100px;

}



.unveil {

  display: flex;

  margin: 50px 0;

  justify-content: space-between;

}



.unveil>div {

  width: 47%;

}



.unvMg {

  position: relative;

}



.mySwiper2 {

  height: 380px;

}



.xiaoSwiper {

  height: 80px;

}



.unvMg .swiper-slide img {

  width: auto;

  height: auto;

  max-width: 100%;

  max-height: 100%;

}



/* .xiaoSwiper .swiper-slide{

  box-sizing: border-box;

  border: 1px solid #333;

}



.xiaoSwiper .swiper-slide.swiper-slide-active{

  border-color: #0059A5;

} */



.xiaoSwiper .swiper-button-next:after,

.xiaoSwiper .swiper-button-prev:after {

  font-size: 26px;

  color: #333;

}



.unvTxt h3 {

  font-size: 30px;

  margin: 0 0 20px;

}



.unvTxt p {

  font-size: 18px;

  margin: 0 0 20px;

  line-height: 30px;

}



.unLink {

  display: flex;

  gap: 20px;

  margin: 40px 0 0;

}



.unLink a {

  width: 200px;

  height: 50px;

  border-radius: 24px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #FFBA00;

  box-shadow: -1px 4px 2px #E1E1E1;

  color: #fff;

  font-size: 20px;

}

.detaInfo h4 {
  /* text-align: center; */
  font-size: 28px;
  /* font-weight: normal; */
  margin: 0 0 20px;
}

.detaInfo p {
  margin: 20px 0;
  font-size: 16px;
  line-height: 30px;
}

.detaInfo img {
  display: block;
  max-width: 100%;
  /* margin: 20px auto; */
}



.suggest {

  margin: 60px 0;

}



.suggest h3 {

  font-size: 28px;

  font-weight: bold;

  margin: 0 0 30px;

}



.sugList {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}



.sugList li {

  transition: .4s;

}



.sugList li:hover {

  box-shadow: 0 3px 10px #ccc;

}



.sugMg {

  height: 130px;

  box-sizing: border-box;

  border: 1px solid #eee;

  padding: 5px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.sugMg img {

  display: block;

  max-width: 100%;

  max-height: 100%;

  transition: .4s;

}



li:hover .sugMg img {

  transform: scale(1.1);

}



.sugTxt h5 {

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;

}



.sugTxt {

  padding: 15px 5px;

}



.sugTxt h5 {

  font-size: 20px;

  font-weight: bold;

  margin: 0 0 15px;

}



.sugTxt a {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100px;

  height: 40px;

  background: #0059A5;

  color: #fff;

  font-size: 20px;

}



.productList {

  margin: 30px 0 200px;

  max-width: 1020px;

  box-sizing: border-box;

  /* padding: 20px;

  background: #F2F2F2; */

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 15px;

}





.productList li {

  box-sizing: border-box;

  border: 1px solid #eee;

  background: #fff;

  box-shadow: 0 0 1px #d4d4d4;

  border-radius: 2px;

}



.listMg {

  width: 100%;

  height: 210px;

  box-sizing: border-box;

  padding: 5px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.listMg {

  overflow: hidden;

}



.listMg img {

  display: block;

  max-width: 100%;

  max-height: 100%;

  transition: .4s;

}



a:hover .listMg img {

  transform: scale(1.1);

}



.productList h5 {

  width: 100%;

  box-sizing: border-box;

  padding: 25px 10px;

  text-align: center;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;

  font-weight: bold;

  font-size: 20px;

  color: #000;

}



.product {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 50px 30px;

  margin: 30px 0 200px;

}



.product a,

.product img {

  display: block;

  width: 100%;

  transition: .4s;

}



.product a {

  overflow: hidden;

}



.product a:hover img {

  transform: scale(1.1);

}



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



  .detail {

    margin: 0;

  }



}



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



  .catCont {

    width: calc(100% - 300px);

  }



  .product {

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

    margin: 30px 0 100px;

  }



  .unvTxt p {

    font-size: 16px;

    margin: 0 0 10px;

    line-height: 25px;

  }



  .sugTxt a {

    width: 100px;

    height: 35px;

    font-size: 18px;

  }



  .productList h5 {

    padding: 20px 10px;

    font-size: 18px;

  }







}



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



  .catCont {

    width: calc(100% - 250px);

  }



  .catalog {

    padding: 0 5%;

  }



  .unvTxt h3 {

    font-size: 26px;

    margin: 0 0 10px;

  }



  .unLink {

    gap: 20px;

    margin: 20px 0 0;

  }



  .unLink a {

    width: 200px;

    height: 40px;

    font-size: 17px;

  }



  .suggest h3 {

    font-size: 26px;

    margin: 0 0 15px;

  }



  .sugList {

    grid-template-columns: repeat(2, 1fr);

  }



  .sugMg {

    height: 180px;

  }



  .productList {

    margin: 30px 0 100px;

    grid-template-columns: repeat(3, 1fr);

  }



}



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



  .catCont {

    width: calc(100% - 200px);

  }



  .unveil {

    flex-wrap: wrap;

    gap: 30px;

  }



  .unveil>div {

    width: 100%;

  }



  .mySwiper2 {

    height: 300px;

  }



  .productList {

    margin: 30px 0 100px;

    grid-template-columns: repeat(2, 1fr);

  }



}





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



  .product {

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin: 10px 0 90px;

  }



  .mySwiper2 {

    height: auto;

  }



  .suggest h3 {

    font-size: 20px;

    margin: 0 0 15px;

  }



  .sugMg {

    height: auto;

  }



  .sugTxt h5 {

    font-size: 14px;

    font-weight: bold;

    margin: 0 0 10px;

  }



  .sugTxt a {

    width: 100px;

    height: 30px;

    font-size: 16px;

  }



  .productList h5 {

    margin: 10px 0;

    padding: 0;

    font-size: 12px;

  }



  .productList {

    margin: 20px 0 50px;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    padding: 10px;

  }



  .listMg {

    height: 150px;

  }


  .detaInfo p {
    margin: 10px 0;
    font-size: 15px;
    line-height: 25px;
  }


  .unveil .unvTxt {
    width: 90%;
    margin: 0 auto;
  }

  .unvTxt h3 {
    font-size: 20px;
  }

  .unvTxt p {
    font-size: 14px;
  }

  .xiaoSwiper {
    margin: 10px 0 0;
  }

  .detaInfo h4 {
    /* text-align: center; */
    font-size: 20px;
    margin: 0 0 10px;
  }


}