body {
  background-color: #F7F7F9;
}

.section1 {
  background-color: #fff;
}

.section1 .wrap {
  padding-top: 60px;
  width: 1560px;
  margin: 0 auto;
}

.section1 .wrap .commonTitle {
  justify-content: center;
  margin-bottom: 20px;
}

.section1 .wrap .commonTitle h3 {
  margin-left: 0;
}

.section1 .wrap .text {
  text-align: center;
}

.section1 .wrap .text p {
  color: #777;
  font-size: 18px;
}

.section1 .wrap .bottom {
  margin-top: 40px;
  position: relative;
  border-radius: 5px;
}

.section1 .wrap .bottom .content {
  width: 1200px;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
}

.section2 .wrap .item {
  padding: 120px 0;
}

.section2 .wrap .item .flex {
  width: 1560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 80px;
}

.section2 .wrap .item .flex .img {
  width: 780px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.section2 .wrap .item .flex .img .play {
  width: 54px;
  height: 54px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.6s;
}

.section2 .wrap .item .flex .img .play:hover {
  background-color: #0D4082;
}

.section2 .wrap .item .flex .img .play:hover span {
  filter: brightness(0) invert(1);
}

.section2 .wrap .item .flex .img .play span {
  font-size: 20px;
  background: linear-gradient(90deg, #23528E 0%, #5AB3C1 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  transition: all 0.6s;
}

.section2 .wrap .item .flex .text {
  flex: 1;
}

.section2 .wrap .item .flex .text h3 {
  color: #111;
  font-size: 24px;
  margin-bottom: 10px;
}

.section2 .wrap .item .flex .text p {
  font-size: 19px;
  line-height: 40px;
}

.section2 .wrap .item:nth-child(2n-1) {
  background-color: #fff;
}

.section2 .wrap .item:nth-child(2n) .flex {
  flex-direction: row-reverse;
}

.section3 .wrap {
  position: relative;
}

.section3 .wrap .bg img {
  width: 100%;
}

.section3 .wrap .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
}

.section3 .wrap .content .commonTitle {
  justify-content: center;
  margin-bottom: 20px;
}

.section3 .wrap .content .commonTitle h3 {
  margin-left: 0;
  color: #fff;
}

.section3 .wrap .content .commonTitle h3 span {
  background: linear-gradient(90deg, #218DE7 0%, #59B6C5 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.section3 .wrap .content .text {
  color: #fff;
  font-size: 19px;
  line-height: 40px;
  text-align: center;
}

.section4 {
  background-color: #fff;
}

.section4 .wrap {
  padding-top: 110px;
  padding-bottom: 160px;
  width: 1560px;
  margin: 0 auto;
}

.section4 .wrap .title {
  text-align: center;
}

.section4 .wrap .title h3 {
  font-size: 36px;
}

.section4 .wrap .title h3 span {
  font-weight: 400;
}

.section4 .wrap .main {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}

.section5 .wrap {
  padding-top: 140px;
  padding-bottom: 170px;
  width: 1560px;
  margin: 0 auto;
}

.section5 .wrap .commonTitle {
  justify-content: center;
}

.section5 .wrap .commonTitle h3 {
  margin-left: 0;
}

.section5 .wrap .commonTitle h3:first-child {
  margin-right: 24px;
}

.section5 .wrap .text {
  width: 1150px;
  margin: 20px auto 0;
  text-align: center;
}

.section5 .wrap .text p {
  color: #111;
  font-size: 19px;
  line-height: 36px;
}

.section5 .wrap .list {
  display: flex;
  gap: 30px;
  margin-top: 100px;
}

.section5 .wrap .list .item {
  flex: 1;
  text-align: center;
}

.section5 .wrap .list .item .icon {
  margin-bottom: 30px;
}

.section5 .wrap .list .item h4 {
  color: #111;
  font-size: 24px;
  margin-bottom: 40px;
}

.section5 .wrap .list .item:nth-child(2) .content .trem:nth-child(2) span {
  font-size: 20px;
}

.section5 .wrap .list .item .content .trem h5 {
  background: linear-gradient(90deg, #23528E 0%, #5AB3C1 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 20px;
  width: fit-content;
  margin: 0 auto 5px;
}

.section5 .wrap .list .item .content .trem:not(:last-child) {
  margin-bottom: 15px;
}

.section5 .wrap .list .item .content .trem .t {
  height: 52px;
}

.section5 .wrap .list .item .content .trem p {
  color: #111;
  font-size: 16px;
  line-height: 26px;
}

.section5 .wrap .list .item .content .trem p span {
  background: linear-gradient(90deg, #23528E 0%, #5AB3C1 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: 700;
}

.section5 .wrap .list .item .content .quality {
  display: flex;
  justify-content: center;
  gap: 25px;
  font-size: 18px;
  font-weight: 700;
}
.section5 .wrap .list .item .icon{
  width: 116px;
  margin: 0 auto;
}
@media screen and (max-width: 1919px) {
  .section5 .wrap .list .item .icon{
    width: 6.04166666vw;
  }
  .section1 .wrap {
    padding-top: 3.125vw;
    width: 81.25vw;
  }

  .section1 .wrap .commonTitle {
    margin-bottom: 1.0416666667vw;
  }

  .section1 .wrap .text p {
    font-size: 0.9375vw;
  }

  .section1 .wrap .bottom {
    margin-top: 2.0833333333vw;
    border-radius: 0.2604166667vw;
  }

  .section1 .wrap .bottom .content {
    width: 62.5vw;
    font-size: 1.25vw;
    line-height: 2.0833333333vw;
  }

  .section2 .wrap .item {
    padding: 6.25vw 0px;
  }

  .section2 .wrap .item .flex {
    width: 81.25vw;
    gap: 4.1666666667vw;
  }

  .section2 .wrap .item .flex .img {
    width: 40.625vw;
    border-radius: 0.5208333333vw;
  }

  .section2 .wrap .item .flex .img .play {
    width: 2.8125vw;
    height: 2.8125vw;
  }

  .section2 .wrap .item .flex .img .play span {
    font-size: 1.0416666667vw;
  }

  .section2 .wrap .item .flex .text h3 {
    font-size: 1.25vw;
    margin-bottom: 0.5208333333vw;
  }

  .section2 .wrap .item .flex .text p {
    font-size: 0.989583333vw;
    line-height: 2.0833333333vw;
  }

  .section3 .wrap .content {
    width: 62.5vw;
  }

  .section3 .wrap .content .commonTitle {
    margin-bottom: 1.0416666667vw;
  }

  .section3 .wrap .content .text {
    font-size: 0.98958333vw;
    line-height: 2.0833333333vw;
  }

  .section4 .wrap {
    padding-top: 5.7291666667vw;
    padding-bottom: 8.3333333333vw;
    width: 81.25vw;
  }

  .section4 .wrap .title h3 {
    font-size: 1.875vw;
  }

  .section4 .wrap .main {
    margin-top: 4.1666666667vw;
  }

  .section5 .wrap {
    padding-top: 7.2916666667vw;
    padding-bottom: 8.8541666667vw;
    width: 81.25vw;
  }

  .section5 .wrap .commonTitle h3:first-child {
    margin-right: 1.25vw;
  }

  .section5 .wrap .text {
    width: 59.8958333333vw;
    margin: 1.0416666667vw auto 0px;
  }

  .section5 .wrap .text p {
    font-size: 0.98958333vw;
    line-height: 1.875vw;
  }

  .section5 .wrap .list {
    gap: 1.5625vw;
    margin-top: 5.2083333333vw;
  }

  .section5 .wrap .list .item .icon {
    margin-bottom: 1.5625vw;
  }

  .section5 .wrap .list .item h4 {
    font-size: 1.25vw;
    margin-bottom: 2.0833333333vw;
  }

  .section5 .wrap .list .item:nth-child(2) .content .trem:nth-child(2) span {
    font-size: 1.0416666667vw;
  }

  .section5 .wrap .list .item .content .trem h5 {
    font-size: 1.0416666667vw;
    margin: 0px auto 0.2604166667vw;
  }

  .section5 .wrap .list .item .content .trem:not(:last-child) {
    margin-bottom: 0.78125vw;
  }

  .section5 .wrap .list .item .content .trem .t {
    height: 2.7083333333vw;
  }

  .section5 .wrap .list .item .content .trem p {
    font-size: 0.8333333333vw;
    line-height: 1.3541666667vw;
  }

  .section5 .wrap .list .item .content .quality {
    gap: 1.3020833333vw;
    font-size: 0.9375vw;
  }
}
@media screen and (max-width: 1024px) {
  .section5 .wrap .list .item .icon{
    width: 100px;
  }
  .section1 .wrap{
    padding-top: 60px;
    width: 90%;
  }
  .section1 .wrap .text p{
    font-size: 14px;
  }
  .section1 .wrap .commonTitle{
    margin-bottom: 10px;
  }
  .section1 .wrap .bottom{
    margin-top: 30px;
  }
  .section1 .wrap .bottom .content{
    font-size: 14px;
    width: 90%;
    line-height: 2;
  }
  .section2 .wrap .item{
    padding: 40px 0;
  }
  .section2 .wrap .item .flex{
    width: 90%;
    gap:20px;
  }
  .section2 .wrap .item .flex .img .play{
    width: 40px;
    height: 40px;
  }
  .section2 .wrap .item .flex .img .play span{
    font-size: 16px;
  }
  .section2 .wrap .item .flex .text h3{
    font-size: 18px;
    margin-bottom: 10px;
  }
  .section2 .wrap .item .flex .text p{
    font-size: 14px;
    line-height: 2;
  }
  .section1 .wrap .bottom{
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
  }
  .section1 .wrap .bottom .img,
  .section1 .wrap .bottom .img img{
    height: 100%;
    width: 100%;
  }
  .section3 .wrap .bg{
    height: 400px;
  }
  .section3 .wrap .bg img{
    height: 100%;
  }
  .section3 .wrap .content{
    width: 90%;
  }
  .section3 .wrap .content .commonTitle{
    margin-bottom: 10px;
  }
  .section3 .wrap .content .text{
    font-size: 14px;
    line-height: 2;
  }
  .section4 .wrap .title h3{
    font-size: 24px;
  }
  .section4 .wrap{
    width: 90%;
    padding: 60px 0;
  }
  .section4 .wrap .main{
    margin-top: 30px;
  }
  .section5 .wrap{
    width: 90%;
    padding: 60px 0;
  }
  .section5 .wrap .text p{
    font-size: 14px;
    line-height: 2;
  }
  .section5 .wrap .text{
    width: 100%;
    margin: 20px auto 0;
  }
  .section5 .wrap .list .item h4{
    font-size: 18px;
  }
  .section5 .wrap .list .item .content .trem h5{
    font-size: 16px;
    margin: 0 auto 10px;
  }
  .section5 .wrap .list .item .content .trem p{
    font-size: 14px;
    line-height: 2;
  }
  .section5 .wrap .list{
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
  }
  .section5 .wrap .list .item{
    width: calc(50% - 10px);
    flex: none;
  }
  .section5 .wrap .list .item .content .trem .t {
    height: 56px;
  }
  .section5 .wrap .list .item .content .quality{
    font-size: 14px;
    gap: 20px;
  }
  .section5 .wrap .commonTitle h3:first-child{
    margin-right: 0;
  }
  .section5 .wrap .list .item .icon{
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 820px) {
  .section2 .wrap .item .flex,
  .section2 .wrap .item:nth-child(2n) .flex{
    flex-direction: column;
  }
  .section2 .wrap .item .flex .img{
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .section4 .wrap .title h3 {
    font-size: 20px;
  }
  .section4 .wrap{
    padding:50px 0;
  }
  .section5 .wrap .list .item{
    width: 100%;
  }
  .section5 .wrap .list .item .content .trem .t{
    height: auto;
  }
  .section5 .wrap{
    padding: 50px 0;
  }
}