.sec1 .wrap {
  padding-top: 100px;
  padding-bottom: 170px;
}
.sec1 .wrap .top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 100px;
  border-bottom: 1px solid #DFE4ED;
}
.sec1 .wrap .top .left .title h4 {
  color: #666;
  font-size: 40px;
}
.sec1 .wrap .top .right {
  width: 720px;
}
.sec1 .wrap .top .right p {
  color: #b3b3b3;
  font-size: 16px;
  line-height: 1.6;
}
.sec1 .wrap .bottom {
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.sec1 .wrap .bottom .item{
   justify-content: space-between;
  display: flex;
}
.sec1 .wrap .bottom .item:nth-child(2n){
  flex-direction: row-reverse;
}
.sec1 .wrap .bottom .left {
  width: 700px;
  border-radius: 20px;
  overflow: hidden;
}
.sec1 .wrap .bottom .right {
  width: 530px;
  padding-top: 70px;
}
.sec1 .wrap .bottom .right .common_title {
  text-align: left;
}
.sec1 .wrap .bottom .right .text {
  margin-top: 40px;
}
.sec1 .wrap .bottom .right .text p {
  color: #111;
  font-size: 18px;
  line-height: 32px;
}
.sec2 {
  background-color: #F5F5F5;
}
.sec2 .wrap {
  display: flex;
  padding-top: 115px;
  padding-bottom: 180px;
  justify-content: space-between;
}
.sec2 .wrap .list {
  width: 1000px;
  display: flex;
  gap: 20px;
}
.sec2 .wrap .list .item {
  width: 480px;
  height: 490px;
  padding: 50px 40px;
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.6s;
}
.sec2 .wrap .list .item:nth-child(n+3){
  display: none;
}
.sec2 .wrap .list .item:hover {
  background-color: #FF6E11;
}
.sec2 .wrap .list .item:hover .icon img:nth-child(1) {
  opacity: 1;
}
.sec2 .wrap .list .item:hover .icon img:nth-child(2) {
  opacity: 0;
}
.sec2 .wrap .list .item:hover .text h4 {
  color: #FFf;
}
.sec2 .wrap .list .item:hover .text p {
  color: #fff;
}
.sec2 .wrap .list .item .icon {
  height: 60px;
  position: relative;
  margin-bottom: 40px;
}
.sec2 .wrap .list .item .icon img {
  height: 100%;
  transition: all 0.6s;
}
.sec2 .wrap .list .item .icon img:nth-child(1) {
  filter: brightness(0) invert(1);
  position: absolute;
  opacity: 0;
}
.sec2 .wrap .list .item .text h4 {
  font-size: 18px;
  margin-bottom: 15px;
  transition: all 0.6s;
  color: #111;
}
.sec2 .wrap .list .item .text p {
  color: #555;
  transition: all 0.6s;
  font-size: 16px;
  line-height: 26px;
}
.sec3 .wrap {
  padding-top: 118px;
  padding-bottom: 124px;
}
.sec3 .wrap .list .item {
  border-radius: 30px;
  /* background: linear-gradient(180deg, #F2F4F7 0%, rgba(242, 244, 247, 0.1) 100%); */
  background-color: #F4F4F4;
  padding: 18px;
  display: flex;
  gap: 30px;
}
.sec3 .wrap .list .item:not(:last-child) {
  margin-bottom: 40px;
}
.sec3 .wrap .list .item:nth-child(2n) {
  flex-direction: row-reverse;
}
.sec3 .wrap .list .item .img {
  border-radius: 12px;
  overflow: hidden;
  width: 680px;
  height: 580px;
}
.sec3 .wrap .list .item .img img{
  width: 100%;
  height: 100%;
}
.sec3 .wrap .list .item .content {
  padding: 50px 80px 50px;
  flex: 1;
}
.sec3 .wrap .list .item .content .title{
  margin-bottom: 30px;
}
.sec3 .wrap .list .item .content .title h3 {
  color: #1a1a1a;
  font-size: 32px;
}
.sec3 .wrap .list .item .content .flex .trem:not(:last-child){
  border-bottom: 1px solid #D9D9D9;
}
.sec3 .wrap .list .item .content .flex .trem .head{
  padding: 20px 0;
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
}
.sec3 .wrap .list .item .content .flex .trem .body{
  display: none;
  height: 140px;
}
.sec3 .wrap .list .item .content .flex .trem .body p{
  font-size: 16px;
  line-height: 2;
}
.sec3 .wrap .list .item .content .flex .trem.active .head p{
  color: #FF6E11;
}
.sec3 .wrap .list .item .content .flex .trem.active .head .add::after,
.sec3 .wrap .list .item .content .flex .trem.active .head .add::before{
  background-color: #FF6E11;
}
.sec3 .wrap .list .item .content .flex .trem.active .head .add::before{
  transform: rotate(360deg);
}
.sec3 .wrap .list .item .content .flex .trem .head p{
  color: rgba(0, 0, 0, 0.2); 
  font-size: 20px;
  transition: all .6s;
  font-weight: 700;
}
.sec3 .wrap .list .item .content .flex .trem .head .add::before,
.sec3 .wrap .list .item .content .flex .trem .head .add::after{
  width: 14px;
  height: 2px;
  display: block;
  content: "";
  transition: all .6s;

  background-color: #555;
}
.sec3 .wrap .list .item .content .flex .trem .head .add::before{
  position: absolute;
  transform: rotate(90deg);
}
/* .sec3 .wrap .list .item .content .icon {
  margin-bottom: 20px;
  height: 52px;
}
.sec3 .wrap .list .item .content .common_title {
  text-align: left;
}
.sec3 .wrap .list .item .content .text {
  margin-top: 40px;
}
.sec3 .wrap .list .item .content .text p {
  color: #111;
  font-size: 18px;
  line-height: 32px;
} */

/* .sec1 .wrap .top .left .title h4{
  font-size: 40px;
}
.sec1 .wrap .top .right p{
  font-size: 24px;
}
.sec1 .wrap .top .right {
    width: 720px;
} */
.sec3 .wrap .list .item .content .text p,
.sec1 .wrap .bottom .right .text p{
  font-size: 16px;
}
.sec2 .wrap .list .item .text h4 {
    font-size: 24px;
}




@media screen and (max-width: 1919px) {
.sec1 .wrap{
padding-top: 5.2083333333vw;
 padding-bottom: 8.8541666667vw;
}
.sec1 .wrap .top{
padding-bottom: 5.2083333333vw;
}

.sec1 .wrap .top .left .title h4{
font-size: 2.0833333333vw;
}
.sec1 .wrap .top .right{
width: 37.5vw;
}
.sec1 .wrap .top .right p{
font-size: 0.8333333333vw;
}

.sec1 .wrap .bottom{
padding-top: 4.1666666667vw;
 gap: 2.6041666667vw;
}
.sec1 .wrap .bottom .left{
width: 36.4583333333vw;
border-radius: 1.04166666vw;
}
.sec1 .wrap .bottom .right{
width: 27.6041666667vw;
 padding-top: 3.6458333333vw;
}
.sec1 .wrap .bottom .right .text{
margin-top: 2.0833333333vw;
}
.sec1 .wrap .bottom .right .text p{
font-size: 0.9375vw;
 line-height: 1.6666666667vw;
}
.sec2 .wrap{
padding-top: 5.9895833333vw;
 padding-bottom: 9.375vw;
}
.sec2 .wrap .list{
width: 52.0833333333vw;
 gap: 1.0416666667vw;
}
.sec2 .wrap .list .item{
width: 25vw;
 height: 25.5208333333vw;
 padding: 2.6041666667vw 2.0833333333vw;
 border-radius: 0.5208333333vw;
}
.sec2 .wrap .list .item .icon{
height: 3.125vw;
 margin-bottom: 2.0833333333vw;
}
.sec2 .wrap .list .item .text h4{
font-size: 0.9375vw;
 margin-bottom: 0.78125vw;
}
.sec2 .wrap .list .item .text p{
font-size: 0.8333333333vw;
 line-height: 1.3541666667vw;
}

.sec3 .wrap{
padding-top: 6.1458333333vw;
 padding-bottom: 6.4583333333vw;
}
.sec3 .wrap .list .item{
border-radius: 1.5625vw;
 padding: 0.9375vw;
 gap: 1.5625vw;
}
.sec3 .wrap .list .item:not(:last-child){
margin-bottom: 2.0833333333vw;
}
.sec3 .wrap .list .item .img{
border-radius: 0.625vw;
 width: 35.4166666667vw;
 height: 30.2083333333vw;
}
.sec3 .wrap .list .item .content{
padding: 2.6041666667vw 4.1666666667vw;
}
.sec3 .wrap .list .item .content .title{
margin-bottom: 1.5625vw;
}
.sec3 .wrap .list .item .content .title h3{
font-size: 1.6666666667vw;
}
.sec3 .wrap .list .item .content .flex .trem .head{
padding: 1.0416666667vw 0px;
}
.sec3 .wrap .list .item .content .flex .trem .body{
height: 7.2916666667vw;
}
.sec3 .wrap .list .item .content .flex .trem .body p{
font-size: 0.8333333333vw;
}
.sec3 .wrap .list .item .content .flex .trem .head p{
font-size: 1.0416666667vw;
}
.sec3 .wrap .list .item .content .flex .trem .head .add::before, .sec3 .wrap .list .item .content .flex .trem .head .add::after{
width: 0.7291666667vw;
 height: 0.1041666667vw;
}

.sec2 .wrap .list .item .text h4{
font-size: 1.25vw;
}



}
@media screen and (max-width: 1024px) {
  .sec1 .wrap{
    padding: 50px 0;
  }
  .sec1 .wrap .top{
    padding-bottom: 30px;
    flex-direction: column;
  }
  .sec1 .wrap .top .left{
    margin-bottom: 20px;
  }
  .sec1 .wrap .top .left .title h4{
    font-size: 24px;
  }
  .sec1 .wrap .top .right{
    width: 100%;
  }
  .sec1 .wrap .top .right p{
    font-size: 14px;
  }
  .sec1 .wrap .bottom{
    padding-top: 30px;
    flex-wrap: wrap;
    flex-direction: row;
    /* padding-bottom: 30px; */
    gap: 20px;
  }
  .sec1 .wrap .bottom .item{
    width: calc(50% - 10px);
  }
  .sec1 .wrap .bottom .item:nth-child(2n),
  .sec1 .wrap .bottom .item{
    flex-direction: column;
  }
  .sec1 .wrap .bottom .left{
    width: 100%;
  }
  .sec1 .wrap .bottom .right .common_title h3{
    font-size: 20px;
  }
  .sec1 .wrap .bottom .right{
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .sec1 .wrap .bottom .right .text{
    margin-top: 10px;
  }
  .sec1 .wrap .bottom .right .text p{
    font-size: 14px;
    line-height: 2;
  }
  .sec2 .wrap{
    flex-direction: column;
  }
  .sec2 .wrap .common_title{
    text-align: left;
    margin-bottom: 30px;
  }
  .sec2 .wrap .list{
    gap: 20px;
    width: 100%;
  }
  .sec2 .wrap .list .item{
    width: calc(50% - 10px);
    height: auto;
    padding: 30px 20px;

  }
  .sec2 .wrap .list .item .icon{
    height: 36px;
    margin-bottom: 20px;
  }
  .sec2 .wrap .list .item .text h4{
    font-size: 18px;
    margin-bottom: 10px;
  }
  .sec2 .wrap .list .item .text p{
    font-size: 14px;
    line-height: 2;
  }
  .sec2 .wrap{
    padding: 50px 0;
  }
  .sec3 .wrap{
    padding: 50px 0;
  }
  .sec3 .wrap .list .item:nth-child(2n),
  .sec3 .wrap .list .item{
    flex-direction: column;
  }
  .sec3 .wrap .list .item{
    padding: 20px;
    gap: 0;
    background-color: #F2F4F7;
    border-radius: 20px;
  }
  .sec3 .wrap .list .item .img{
    width: 100%;
    border-radius: 10px;
  }
  .sec3 .wrap .list .item .img img{
    width: 100%;
  }
  .sec3 .wrap .list .item .img{
    height: auto;
  }

  .sec3 .wrap .list .item .content{
    padding: 30px 0;
  }
  .sec3 .wrap .list .item .content .title h3{
    font-size: 20px;
  }
  .sec3 .wrap .list .item .content .flex .trem .head p{
    font-size: 16px;
  }
  .sec3 .wrap .list .item .content .flex .trem .head .add::before, 
  .sec3 .wrap .list .item .content .flex .trem .head .add::after{
    width: 12px;
    height: 2px;
  }
  .sec3 .wrap .list .item .content .flex .trem .body p{
    font-size: 14px;
  }
  .sec3 .wrap .list .item .content .flex .trem .body{
    height: auto;
    padding-bottom: 20px;
  }
  .sec3 .wrap .list .item .content .flex .trem .head{
    padding: 15px 0;
  }
  .sec3 .wrap .list .item:not(:last-child){
    margin-bottom: 20px;
  }
  /* .sec3 .wrap .list .item .content .icon{
    height: 30px;
    margin-bottom: 20px;
  }
  .sec3 .wrap .list .item .content .text{
    margin-top: 20px;
  }
  .sec3 .wrap .list .item .content .text p{
    font-size: 14px;
    line-height: 2;
  }
  .sec3 .wrap .list .item:not(:last-child){
    margin-bottom: 20px;
  } */
  .sec1 .wrap .bottom .left{
    border-radius: 10px;
  }
}
@media screen and (max-width: 767px) {
      /* .sec1 .wrap .top .right p {
        font-size: 16px;
    } */
        /* .sec1 .wrap .top .left .title h4 {
        font-size: 20px;
    } */
  .sec1 .wrap .bottom{
    flex-direction: column;
  }
    .sec1 .wrap .bottom .item{
    width: 100%;
  }
   .sec2 .wrap .list{
    flex-wrap: wrap;
   }
  .sec2 .wrap .list .item{
    width: 100%;
  }
}