body .home .container {
  padding: 0 8.33333vw
}

body .home .container .t {
  text-align: center;
  text-transform: capitalize;
  line-height: 1.2;
  margin-bottom: 3.125vw
}

body .home .container .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25vw
}

body .home .container .list a {
  width: 100%
}

body .home .container .list a .pic {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 17.70833vw;
  position: relative;
  padding: 2.39583vw 1.92708vw;
  /* border: 1px solid #C3C3C3; */
  background: #FFF;
  transition: all 600ms
}

body .home .container .list a .pic .pro {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden
}

body .home .container .list a .pic .pro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 600ms
}

body .home .container .list a .pic .pro .b_t {
  position: absolute;
  left: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  height: 2.70833vw;
  width: 100%;
  z-index: 10;
  top: 0
}

body .home .container .list a .pic .pro .b_l {
  position: absolute;
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  height: 100%;
  width: 2.70833vw;
  z-index: 10;
  top: 0
}

body .home .container .list a .pic .pro .b_r {
  position: absolute;
  right: 0;
  background: linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  height: 100%;
  width: 2.70833vw;
  z-index: 10;
  top: 0
}

body .home .container .list a .pic .pro .b_b {
  position: absolute;
  left: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  height: 2.70833vw;
  transform: rotate(180deg);
  width: 100%;
  z-index: 10;
  bottom: -1px
}

body .home .container .list a p {
  margin-top: 1.25vw;
  font-weight: 600;
  line-height: 1.5;
  height: 3.33333vw;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden
}

body .home .container .list a:hover .pic {
  /* border-color: #002FFF */
  border: none;
}

body .home .container .list a:hover .pic .pro img {
  transform: scale(1.05)
}

body .home .container .pager {
  display: flex;
  justify-content: center;
  margin: 4.16667vw 0 6.25vw 0;
  gap: .625vw
}

body .home .container .pager .btn {
  width: 2.60417vw;
  height: 2.60417vw;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 600ms
}

body .home .container .pager .btn img {
  transition: all 600ms;
  width: 1.5625vw
}

body .home .container .pager .btn:hover {
  background: #002FFF;
  border-color: #002FFF
}

body .home .container .pager .btn:hover img {
  filter: invert(1)
}

body .home .container .pager a {
  width: 2.60417vw;
  height: 2.60417vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600
}

body .home .container .pager a.on {
  background: #002FFF;
  color: #fff
}

@media screen and (max-width: 768px) {
  body .home .container {
    padding: 0 5%
  }

  body .home .container .t {
    margin-bottom: 30px
  }

  body .home .container .list {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px
  }

  body .home .container .list a .pic {
    height: 220px;
    padding: 20px
  }

  body .home .container .list a .pic .pro .b_t,
  body .home .container .list a .pic .pro .b_b {
    height: 50px
  }

  body .home .container .list a .pic .pro .b_l,
  body .home .container .list a .pic .pro .b_r {
    width: 50px
  }

  body .home .container .list a p {
    height: auto;
    margin-top: 12px
  }

  body .home .container .pager {
    margin: 30px 0 60px 0;
    gap: 10px
  }

  body .home .container .pager .btn {
    width: 25px;
    height: 25px
  }

  body .home .container .pager .btn img {
    width: 15px
  }

  body .home .container .pager a {
    width: 25px;
    height: 25px
  }
}