body {
  background-color: #F2F3F6;
}
.section1 .wrap {
  padding-top: 100px;
  padding-bottom: 90px;
}
.section1 .wrap .list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.section1 .wrap .list .item {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
}
.section1 .wrap .list .item:nth-child(2n) {
  flex-direction: row-reverse;
}
.section1 .wrap .list .item .img {
  overflow: hidden;
  width: 720px;
}
.section1 .wrap .list .item .img img {
  transition: all 1s;
  width: 100%;
  height: 100%;
}
.section1 .wrap .list .item .right {
  flex: 1;
  background-color: #fff;
  padding: 100px 90px 30px;
  position: relative;
}
.section1 .wrap .list .item .right::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.6s;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 5.53%, #FFFFFF 36.83%, #C3DCF1 100%);
}
.section1 .wrap .list .item .right .icon {
  height: 42px;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}
.section1 .wrap .list .item .right .icon img {
  height: 100%;
}
.section1 .wrap .list .item .right .content {
  position: relative;
  z-index: 2;
}
.section1 .wrap .list .item .right .content .tit {
  margin-bottom: 24px;
}
.section1 .wrap .list .item .right .content .tit h4 {
  color: #000000;
  font-size: 30px;
}
.section1 .wrap .list .item .right .content .text h5 {
  color: #000;
  font-size: 18px;
  margin-bottom: 10px;
}
.section1 .wrap .list .item .right .content .text p {
  font-size: 16px;
  line-height: 30px;
  opacity: 0.6;
  color: #000;
}
.section1 .wrap .list .item:hover .img img {
  transform: scale(1.05);
}
.section1 .wrap .list .item:hover .right::after {
  opacity: 1;
}

.section1 .wrap .list .item .right .content .tit h4{
  font-size: 32px;
}
.section1 .wrap .list .item .right .content .text h5{
  font-size: 20px;
}
.section1 .wrap .list .item .right .content .text p{
  font-size: 18px;
  line-height: 32px;
}
@media screen and (max-width: 1919px) {
.section1 .wrap{
padding-top: 5.2083333333vw;
 padding-bottom: 4.6875vw;
}
.section1 .wrap .list{
gap: 2.0833333333vw;
}
.section1 .wrap .list .item{
border-radius: 0.5208333333vw;
}
.section1 .wrap .list .item .img{
width: 37.5vw;
}
.section1 .wrap .list .item .right{
padding: 5.2083333333vw 4.6875vw 1.5625vw;
}
.section1 .wrap .list .item .right .icon{
height: 2.1875vw;
 margin-bottom: 1.5625vw;
}
.section1 .wrap .list .item .right .content .tit{
margin-bottom: 1.25vw;
}
.section1 .wrap .list .item .right .content .tit h4{
font-size: 1.5625vw;
}
.section1 .wrap .list .item .right .content .text h5{
font-size: 0.9375vw;
 margin-bottom: 0.5208333333vw;
}
.section1 .wrap .list .item .right .content .text p{
font-size: 0.8333333333vw;
 line-height: 1.5625vw;
}

.section1 .wrap .list .item .right .content .tit h4{
font-size: 1.6666666667vw;
}
.section1 .wrap .list .item .right .content .text h5{
font-size: 1.0416666667vw;
}
.section1 .wrap .list .item .right .content .text p{
font-size: 0.9375vw;
 line-height: 1.6666666667vw;
}


}
@media screen and (max-width: 1024px) {
  .section1 .wrap .list .item:nth-child(2n),
    .section1 .wrap .list .item{
      flex-direction: column;
    }
    .section1 .wrap .list {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(2,1fr);
    }
    .section1 .wrap .list .item .img{
      width: 100%;
    }
    .section1 .wrap .list .item .img img{
      width: 100%;
    }
    .section1 .wrap .list .item{
      border-radius: 10px;
    }
    .section1 .wrap .list .item .right{
      padding: 30px 20px;
    }
    .section1 .wrap .list .item .right .icon{
      height: 24px;
      margin-bottom: 20px;
    }
    .section1 .wrap .list .item .right .content .tit h4{
      font-size: 18px;
    }
    .section1 .wrap .list .item .right .content .tit{
      margin-bottom: 20px;
    }
    .section1 .wrap .list .item .right .content .text h5{
      font-size: 16px;
      margin-bottom: 10px;
    }
    .section1 .wrap .list .item .right .content .text p{
      font-size: 14px;
      line-height: 2;
    }
    .section1 .wrap{
      padding: 50px 0;
    }
}
@media screen and (max-width: 767px) {
  .section1 .wrap .list{
    grid-template-columns: repeat(1,1fr);
  }
}