body{
  background-color: #F5F2F2;
}
.sec1 {
  padding: 70px 0 150px 0;
}

.sec1 .wrap{
  width: 1440px;
  margin: auto;
}

.sec1 .wrap .title{
  margin: 0 0 90px;
}
.sec1 .wrap .title h1{
  font-weight: 500;
  font-size: 36px;
  color: #111111;
  margin: 0 0 38px;
}
.sec1 .wrap .title p{
  font-weight: 400;
  font-size: 18px;
  color: #444444;
  line-height: 36px;
}
.sec1 .wrap .content{
  display: flex;
  flex-wrap: wrap;
  gap: 60px 40px;
}
.sec1 .wrap .content .item{
  width: 453px;
}
.sec1 .wrap .content .item.big1{
  width: 100%;
}
.sec1 .wrap .content .item.big1 .img{
  height: 540px;
}
.sec1 .wrap .content .item.big2{
  width: 700px;
}
.sec1 .wrap .content .item.big2 .img{
  height: 400px;
}
.sec1 .wrap .content .item .img{
  width: 100%;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
}
.sec1 .wrap .content .item .img:hover img{
  transform: scale(1.05);
}
.sec1 .wrap .content .item .img img{
  width: 100%;
  height: 100%;
  transition: 2s;
}
.sec1 .wrap .content .item .dis{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 0 0;
}

.sec1 .wrap .content .item .dis .p1{
  font-weight: 500;
  font-size: 18px;
  color: #111111;
}
.sec1 .wrap .content .item .dis .p2{
  font-weight: 400;
  font-size: 14px;
  color: #999999;
}
@media screen and (max-width: 1920px) {
  .sec1 {
    padding: 3.64583333vw 0 7.8125vw 0;
  }
  .sec1 .wrap {
    width: 75vw;
  }
  .sec1 .wrap .title {
    margin: 0 0 4.6875vw;
  }
  .sec1 .wrap .title h1 {
    font-size: 1.875vw;
    margin: 0 0 1.97916667vw;
  }
  .sec1 .wrap .title p {
    font-size: 0.9375vw;
    line-height: 1.875vw;
  }
  .sec1 .wrap .content {
    gap: 3.125vw 2.08333333vw;
  }
  .sec1 .wrap .content .item {
    width: 23.59375vw;
  }
  .sec1 .wrap .content .item.big1 .img {
    height: 28.125vw;
  }
  .sec1 .wrap .content .item.big2 {
    width: 36.45833333vw;
  }
  .sec1 .wrap .content .item.big2 .img {
    height: 20.83333333vw;
  }
  .sec1 .wrap .content .item .img {
    height: 15.625vw;
  }
  .sec1 .wrap .content .item .dis {
    margin: 1.04166667vw 0 0 0;
  }
  .sec1 .wrap .content .item .dis .p1 {
    font-size: 0.9375vw;
  }
  .sec1 .wrap .content .item .dis .p2 {
    font-size: 0.72916667vw;
  }
  
}

@media screen and (max-width: 1024px) {
  .sec1 .wrap{
    width: 90%;
  }
  .sec1 .wrap .title{
    margin-bottom: 30px;
  }
  .sec1 .wrap .title h1{
    font-size: 18px;
    margin-bottom: 20px;
  }
  .sec1 .wrap .title p{
    font-size: 14px;
    line-height: 1.6;
  }
  .sec1 .wrap .content .item .dis .p1{
    font-size: 12px;
  }
  .sec1 .wrap .content .item.big1 .img{
    height: auto;
  }
  .sec1 .wrap .content .item.big2{
    width: 49%;
  }
  .sec1 .wrap .content{
    gap: 30px 2%;
  }
  .sec1 .wrap .content .item{
    width: 32%;
  }
  .sec1 .wrap .content .item.big2 .img {
    height: 23.833333vw;
  }
  .sec1 .wrap .content .item .img {
    height: 16.625vw;
  }
  .sec1 .wrap .content .item .dis {
    margin-top: 10px;
  }
}

@media screen and (max-width: 540px) {
  .sec1 .wrap .content .item,
  .sec1 .wrap .content .item.big2 {
    width: 100%;
  }
  .sec1 .wrap .content .item .img{
    height: auto;
  }
  .sec1 .wrap .content{
    gap: 30px 4%;
  }
  .sec1{
    padding: 40px 0;
  }
  .sec1 .wrap .content .item.big2 .img {
    height: auto;
  }
}