@charset "utf-8";
@import "px2rem";

$designWidth: 1920;
.container {
  padding-top: 0;

  .header {
    background-color: transparent;
    transition: .3s all linear;
  }

  .hbc {
    background-color: #484848;
  }

  .swiper-container {
    position: relative;
    .swiper-pagination{
      //right: 10%;
      ////transform: translateX(-50%);
      bottom: 40px;
      z-index: 99;
      display: flex;
      justify-content: flex-end;
      box-sizing: border-box;
      padding-right: 13%;
      .swiper-pagination-bullet{
        width: 15px;
        height: 15px;
        box-sizing: border-box;
        background-color: transparent;
        border:2px solid #fff;
        transition: 0.3s all linear;
      }
      .swiper-pagination-bullet-active{
        width: 24px;
        background-color: #fff;
        border-radius: 10px;
      }
    }
    .pag_num{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 30px;
      display: flex;
      align-items: center;
      z-index: 99;
      color: #fff;
      span{
        font-size: 20px;
        padding: 0 15px;
        transition: 0.3s all ease;
        cursor: pointer;
      }
      .active{
        transform: scale(1.5);
      }
    }
    //pointer-events: none;
    .swiper-slide {
      img {
        display: block;
        width: 100%;
      }
      .app{
        display: none;
      }
    }

    @keyframes linears {
      from {
        width: 0%;
      }
      to {
        width: 100%;
      }
    }

    .a1 {
      animation-duration: 3s;
    }

    .a2 {
      animation-duration: 6s;
    }

    .a3 {
      animation-duration: 9s;
    }

    .a4 {
      animation-duration: 12s;
    }

    .a5 {
      animation-duration: 15s;
    }

    .a6 {
      animation-duration: 18s;
    }

    .a7 {
      animation-duration: 21s;
    }

    .a8 {
      animation-duration: 24s;
    }

    .a9 {
      animation-duration: 27s;
    }

    .a10 {
      animation-duration: 30s;
    }

    .linear {
      width: 1620px;
      margin: 0px auto 0;
      bottom: 60px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      z-index: 99;
      //&:after{
      //  content: '';
      //  position: absolute;
      //  bottom: 0;
      //  left: 0;
      //  background-color: #d31f3a;
      //  height: 3px;
      //  width: 0%;

      //  animation:25s linears linear infinite;
      //}
      .linearx {
        background-color: #d31f3a;
        height: 3px;
        width: 0%;
        position: absolute;
        left: 0;
        bottom: -1px;
        animation-iteration-count: infinite;
        animation-name: linears;
        animation-timing-function: linear;
        //animation: linears linear infinite;
      }

      .progress {
        width: 0%;
        height: 3px;
        background-color: #d31f3a;
        transform: translateY(-50%);
      }

      .go {
        width: 100%;
        //transition: 4.9s cubic-bezier(.61, .35, .77, 1.16) all;
        transition: 4.9s linear all;
        //  cubic-bezier(.61,.35,.77,1.16)
      }

      .goNo{
        width: 100%;
      }

      .item {
        flex: 1;

        .num {
          font-family: Bebas;
          font-size: 24px;
          font-weight: normal;
          font-stretch: normal;
          padding-bottom: 10px;
          letter-spacing: 0px;
          color: #ffffff;
          cursor: pointer;
          display: inline-block;
        }

        .linears {
          width: 100%;
          height: 1px;
          background-color: #8b8785;
        }
      }
    }
  }

  .section {
    padding: 120px 0 0;

    .box {
      width: 1620px;
      margin: 0 auto;
      padding-bottom: 55px;
      .con {
        display: flex;
        flex-wrap: wrap;
        width: 40%;
        justify-content: space-between;
        //margin-top: -80px;
        //position: relative;
        margin-top: -15%;
        //top: px2rem(-165);

        .item {
          width: 45%;
          display: flex;
          margin-top: px2rem(25);
          justify-content: space-between;

          .iteml {
            .item_info {
              font-family: MicrosoftYaHei;
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #505050;
            }

            .item_num {
              font-family: MicrosoftYaHei;
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #505050;
              display: flex;
              align-items: baseline;

              .num {
                font-family: Bebas;
                font-size: 64px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #1d1d1d;
                opacity: 0.96;
              }
            }
          }

          .itemr {
            img {
              //width: 50px;
            }
          }
        }
      }

      .s_box {
        display: flex;
        //align-items: center;
        .left {
          width: 48%;
          box-sizing: border-box;
          padding-right: 2%;

          .title {

          }

          .info {
            padding-top: 35px;

            p{
              font-family: MicrosoftYaHei;
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 31px;
              letter-spacing: 0px;
              color: #525252;
              overflow : hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }

          .lookmore {
            width: 176px;
            height: 58px;
            //background-image: linear-gradient(90deg,
            //        #00aa90 0%,
            //        #0065af 100%),
            //linear-gradient(
            //                #264274,
            //                #264274);
            //background-blend-mode: normal,
            //normal;
            background-color: #0d3267;
            border-radius: 29px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: MicrosoftYaHeiLight;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            margin-top: 30px;
          }
        }

        .right {
          width: 52%;
          flex-shrink: 0;
          min-height: 580px;

          img {
            display: block;
            width: 100%;
          }
        }
      }
    }
  }

  .section1 {
    background-color: #f9f9f9;
    padding: 120px 0;

    .box {
      width: 1620px;
      margin: 0 auto;

      .title {

      }

      .s1_con {
        display: flex;
        padding-top: 85px;

        .item {
          width: 25%;
          margin-right: 1.33333%;
          position: relative;
          //overflow: hidden;
          box-sizing: border-box;
          padding: 0 5px;
          &:hover {
            .bc {
              transform: scale(1.06);
            }

            .skew {
              opacity: 1;

              img {
                transform: scale(1.06);
              }
            }
          }

          &:last-child {
            margin-right: 0;
          }
          .item_box{
            position: relative;
          }
          .con {
            width: 90px;
            height: 90px;
            color: #fff;
            padding: 3px;
            border: 2px solid #f6f6f7;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 2;

            h3 {
              transition: 0.3s all linear;
              font-family: MicrosoftYaHei-Bold;
              font-size: 20px;
              text-align: center;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #ffffff;
              padding-top: 5px;
            }

            .small {
              position: relative;
              margin-top: 25px;
              font-family: NexaBold;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #ffffff;
              text-align: center;
            }

            .morex {
              margin-top: 15px;
            }
          }

          .bc {
            display: block;
            width: 100%;
            transition: all 0.6s linear;
          }

          .skew {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            -khtml-opacity: 0;

            transition: all 0.6s linear;

            img {
              display: block;
              width: 100%;
              height: 100%;
              transform: scale(1.1);
              transition: all 0.6s linear;
            }
          }
        }
      }
    }
  }

  .section2 {
    background-color: #fff;
    position: relative;
    width: 100%;
    //margin-top: 50px;

    .bcTxt {
      position: absolute;
      right: 10%;
      top: 0px;
      z-index: 99;
      width: 35%;
      transform: translateY(-50%);

      img {
        display: block;
        width: 100%;
      }
    }

    .swiper-display {
      width: 100%;
      overflow: hidden;

      .swiper-slide {
        img {
          display: block;
          width: 100%;
        }
      }

      .swiper-button-next, .swiper-button-prev {
        width: 50px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;
        box-sizing: border-box;
        padding: 5px;
        right: 50px;
      }

      .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
        font-size: 25px;
        color: #333;
      }
    }

    .con {
      position: absolute;
      z-index: 99;
      top: 0;
      width: 1620px;
      left: 50%;
      height: 100%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top {
        display: flex;
        align-content: center;
        justify-content: space-between;
        padding-top: 120px;

        .title {
          .english {
            color: #ffffff;
            opacity: 0.23;
          }

          .chinese {
            color: #ffffff;
          }
        }

        .num {
          font-family: Bebas;
          font-size: 30px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;

          .current {
            font-family: Bebas;
            font-size: 60px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }

          .count {

          }
        }
      }

      .bottom {
        display: flex;
        padding-bottom: 120px;

        .item {
          width: 25%;
          display: flex;
          align-content: center;
          justify-content: center;
          background-color: #fff;
          padding: 35px 0;
          cursor: pointer;

          &.active {
            background-color: #d31f3a;

            div, h3, p {
              color: #fff !important;
            }
          }

          .left {
            padding-right: 35px;

            .num {
              font-family: Bebas;
              font-size: 66px;
              font-weight: 700;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #1a1a1a;
            }
          }

          .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            padding-left: 35px;

            &:before {
              content: '';
              position: absolute;
              left: 0;
              top: 50%;
              background-color: #dbdbdb;
              transform: translateY(-50%);
              height: 60%;
              width: 1px;
            }

            h3 {
              font-family: MicrosoftYaHei-Bold;
              font-size: 26px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #1a1a1a;
            }

            p {
              font-family: MicrosoftYaHeiLight;
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #4a4a4a;
            }
          }
        }
      }
    }
  }

  .section3 {
    width: 1620px;
    margin: 0 auto;
    padding: 100px 0 90px;

    .more {
      font-family: MicrosoftYaHei;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 29px;
      letter-spacing: 0px;
      text-align: center;
      padding-top: 25px;

      a {
        color: #264274;
      }
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      //.title{
      //  flex: 1;
      //}
      .right {
        display: flex;
        align-content: center;

        .tab {
          //width: 109px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          font-weight: normal;
          letter-spacing: 0px;
          color: #000000;
          border-radius: 5px;
          transition: 0.3s ease all;
          cursor: pointer;
        }
        .lin{
          font-size: 16px;
          display: flex;
          align-items: center;
          margin: 0 10px;
        }

        .active {
          //background-image: linear-gradient(90deg,
          //        #00aa90 0%,
          //        #0065af 100%),
          //linear-gradient(
          //                #0066ae,
          //                #0066ae);
          //background-blend-mode: normal,
          //normal;
          //border-radius: 20px;
          //color: #fff;
          color: #0d3267;
          font-weight: 700;
        }
      }
    }

    .con {
      display: none;
      //border-top: 1px solid #e6e6e6;
      margin-top: 65px;

      .item {
        width: 33.333333%;
        box-sizing: border-box;
        padding: 20px 30px;
        background-size: 0;

        &:hover {
          transition: 0.3s ease all;
          //background-size: 100%;
          background-color: #294475;
          div, p, a, h2, h3 {
            transition: 0.3s ease all;
            color: #fff !important;
          }
        }

        .date {
          h3 {
            font-family: Bebas;
            font-size: 50px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #7a7a7a;
          }

          p {
            font-family: Bebas;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 29px;
            letter-spacing: 0px;
            color: #7a7a7a;
          }
        }

        .s_title {
          font-family: MicrosoftYaHei;
          font-size: 24px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 33px;
          letter-spacing: 0px;
          color: #3b3b3b;
          margin-top: 25px;
          margin-bottom: 25px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .info {
          font-family: MicrosoftYaHei;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 27px;
          letter-spacing: 0px;
          color: #737373;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        a {
          font-family: MicrosoftYaHei;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 29px;
          letter-spacing: 0px;
          color: #0067ae;
          padding-top: 45px;
          display: block;
        }
      }
    }

    .show {
      display: flex;
    }
  }

  .section4 {
    width: 100%;
    height: px2rem(900);
    background: url("../img/14.png") no-repeat center center;
    display: flex;
    align-items: center;
    justify-content: center;

    .box {
      //width: 697px;
      //height: 697px;
      width: px2rem(660);
      height: px2rem(660);
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;

      .mainImg {
        width: 95%;
        transition: 0.3s linear all;
        border-radius: 33%;

        &:hover {
          width: 100%;
        }
      }

      .s1 {
        box-sizing: border-box;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: px2rem(660);
        height: px2rem(660);
        border: solid 1px rgba(255, 255, 255, 0.2);
        position: relative;

        .info {
          position: absolute;
          cursor: pointer;
          transition: 0.3s all ease;

          &:hover {
            transform: translateY(-5px);
          }

          .txt {
            font-family: MicrosoftYaHeiLight;
            font-size: px2rem(22);
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            position: relative;
            opacity: 0.8;

            &:before {
              content: '';
              position: absolute;
              width: px2rem(6);
              height: px2rem(6);
              background-color: #fff;
              border-radius: 50%;
            }
          }
        }

        .one {
          top: px2rem(-40);
          left: px2rem(290);

          .txt {
            &:before {
              left: px2rem(40);
              bottom: px2rem(-13);
            }
          }
        }

        .two {
          top: px2rem(130);
          left: px2rem(-46);

          .txt {
            &:before {
              right: px2rem(-15);
              bottom: px2rem(10);
            }
          }
        }

        .three {
          bottom: px2rem(110);
          left: px2rem(-30);

          .txt {
            &:before {
              right: px2rem(-15);
              bottom: px2rem(10);
            }
          }
        }

        .four {
          bottom: px2rem(110);
          right: px2rem(-28);

          .txt {
            &:before {
              left: px2rem(-15);
              bottom: px2rem(10);
            }
          }
        }

        .five {
          top: px2rem(130);
          right: px2rem(-48);

          .txt {
            &:before {
              left: px2rem(-15);
              bottom: px2rem(10);
            }
          }
        }

        .s2 {
          border: solid 1px rgba(255, 255, 255, 0.4);
          display: flex;
          align-items: center;
          justify-content: center;
          width: px2rem(530);
          height: px2rem(530);
          border-radius: 50%;

          .s3 {
            border: solid 1px #ffffff;
            width: px2rem(410);
            height: px2rem(410);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: rgba(255, 255, 255, 0.05);

            img {
              width: px2rem(180);
            }

            .con {
              padding-top: 30px;

              .introduce {
                font-family: MicrosoftYaHeiLight;
                font-size: px2rem(16);
                font-weight: normal;
                font-stretch: normal;
                line-height: px2rem(30);
                letter-spacing: 0px;
                color: #ffffff;
                text-align: center;
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
    .app{
      display: none;
      width: 100%;
    }
  }

}
.jsmap-container .jsmap-svg-container svg{
  overflow: visible !important;
}
.jsmap-container {
  width: 100% !important;
  margin-top: px2rem(120);

  .jsmap-svg-container {
    width: 100% !important;

    svg {
      width: 100%;
      margin-left: 0 !important;
    }
  }
}

@media all and (max-width: 1620px) {
  .container .section .box .con{
    margin-top: -20%;
  }
  .container .section .box .s_box .left .info p{
    font-size: 12px;
  }
  .jsmap-container{
    padding-top: 25%;
  }
  .container .section3, .container .section2 .con, .container .section .box, .container .section1 .box {
    width: 86%;
  }
  .container {
    padding-top: 0;
  }
  .container .section1 .box .s1_con {
    padding-top: 55px;
  }
  .container .section1 {
    padding: 70px 0 90px;
  }
  .container .section2 .con .bottom .item .left .num {
    font-size: 50px;
  }
  .container .section2 .con .bottom .item .right h3 {
    font-size: 23px;
  }
  .container .section2 .con .bottom .item .right {
    padding-left: 20px;
  }
  .container .section2 .con .bottom .item .left {
    padding-right: 20px;
  }
  .container .section3 .con .item .s_title {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .container .section3 .con .item .info{
    font-size: 14px;
  }
  .container .section3 .con .item a {
    padding-top: 10px;
  }
  .container .section .box .con {
    width: 45%;
  }
  .container .section .box .con .item .iteml .item_num .num {
    font-size: 42px;
    margin-right: 5px;
  }
  .container .section .box .con .item .iteml .item_info {
    font-size: 14px;
  }
  .container .section .box .con .item .iteml .item_num {
    font-size: 14px;
  }
  .container .section .box .con .item {
    //margin-top: 30px;
  }
  .container .section .box .s_box .left .lookmore {
    width: 160px;
    height: 49px;
    font-size: 17px;
  }
  .container .swiper-container .linear {
    width: 90%;
  }
}
//@media all and (max-width: 1280px){
//  .container .section .box .con{
//    top: px2rem(-50);
//  }
//}

@media all and (max-width: 1250px) {
  .container .section1 .box .s1_con {
    flex-wrap: wrap;
  }
  .container .section1 .box .s1_con .item .con h3 {
    font-size: 24px;
  }
  .container .section1 .box .s1_con .item .con .small {
    font-size: 14px;
  }
  .container .section1 .box .s1_con .item {
    width: 48%;
    margin-bottom: 15px;
  }
  .container .section1 .box .s1_con .item .con{
    padding: 5px;
    width: auto;
    height: auto;
  }
}

@media all and (max-width: 1200px) {
  .container .section2 .con .bottom .item .left .num {
    font-size: 20px;
  }
  .container .section2 .con .bottom .item .right h3 {
    font-size: 18px;
  }
  .container .section2 .con .bottom .item .right p {
    font-size: 15px;
  }
}

@media all and (max-width: 1130px) {
  .container .section .box .con {
    width: 55%;
  }
}

@media all and (max-width: 940px) {
  .container .section .box .con {
    width: 80%;
  }
  .container .section2 .con .bottom {
    display: none;
  }
}

@media all and (max-width: 800px) {
  .container .section1 .box .s1_con .item {
    width: 48%;
    margin-bottom: 15px;
  }
  .container .section .box .con {
    margin-top: 0;
  }
}

@media all and (max-width: 775px) {
  .container .section4 {
    display: none;
  }
}

@media all and (max-width: 550px) {
  .container .section3 .top {
    flex-wrap: wrap;

    .right {
      width: 100%;
      margin-top: 25px;
    }
  }
  .container .section3 {
    padding-top: 30px;
    padding-bottom: 50px;
  }
  .container .section3 .con {
    margin-top: 30px;
  }
  .container .section3 .con {
    flex-wrap: wrap;

    .item {
      width: 100%;
    }
  }
  .container .section3 .con .item .date h3 {
    font-size: 30px;
  }
  .container .section3 .con .item .date p {
    font-size: 12px;
    line-height: 25px;
  }
  .container .section3 .con .item .s_title {
    font-size: 16px;
    line-height: 28px;
  }
  .container .section3 .con .item .info {
    font-size: 13px;
    line-height: 26px;
  }
  .container .section3 .con .item a{
    font-size: 14px;
  }
  .container .section3 .con .item {
    padding: 15px 12px;
  }
  .container .section .box .con {
    width: 100%;
  }
  .container .section .box .con .item {
    width: 50%;
    margin-left: 0%;
    margin-bottom: 20px;
  }
  .container .section .box .con .item .itemr{
    display: none;
  }
  .container .section .box .con .item .iteml .item_num .num {
    font-size: 26px;
  }
  .container .section .box{
    padding-bottom: 0;
  }
  .container .section .box .con .item {
    img {
      width: 35px;
    }
  }
  .container .section {
    padding-bottom: 22px;
  }
  .container .section1 .box .s1_con .item .con .small{
    display: none;
  }
  .container .section1 .box .s1_con .item .con{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .container .section1 .box .s1_con .item .skew{
    display: none;
  }
  .container .section1 .box .s1_con .item .con h3{
    font-size: 22px;
  }
  .container .section1 .box .s1_con .item .con{
    border: none;
  }
  .container .section .box .s_box .right {
    display: none;
  }
  .container .section .box .s_box .left {
    width: 100%;
    padding-right: 0;
  }
  .container .section {
    padding-top: 35px;
  }
  .container .section2 {
    //display: none;
  }
  .container .section1 {
    padding-bottom: 30px;
    padding-top: 35px;
  }
  .container .section2 .con .top{
    padding-top: 13px;
    align-items: center;
  }
  .container .section1 .box .s1_con{
    padding-top: 30px;
  }
  .container .swiper-container .linear {
    bottom: 15px;
  }
  .container .section2 .bcTxt{
    display: none;
  }
  .container .swiper-container .linear .item .num {
    font-size: 14px;
  }
  .container .section .box .con {
    top: 20px;
    position: relative;
    padding-bottom: 20px;
  }
  .container .section2 .con .top .title .english{
    font-size: 14px;
  }
  .container .title .chinese{
    font-size: 16px;
    margin-top: 4px;
  }
  .container .section2 .con .top .num{
    font-size: 15px;
    .current{
      font-size: 15px;
    }
  }
  .container .section2 .swiper-display .swiper-button-next, .container .section2 .swiper-display .swiper-button-prev{
    width: 30px;
    height: 30px;
  }
  .container .section2 .swiper-display .swiper-button-prev:after, .container .section2 .swiper-display .swiper-container-rtl .swiper-button-next:after, .container .section2 .swiper-display .swiper-button-next:after, .container .section2 .swiper-display .swiper-container-rtl .swiper-button-prev:after{
    font-size: 16px;
  }
  .swiper-button-next{
    right: 10px !important;
  }
  .container .section2 .con{
    height: 10%;
  }
  .container .section4{
    display: block;
    height: 300px;
  }
  .container .section4{
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    .box{
      width: 300px;
      height: 300px;
      .s1{
        width: 100%;
        height: 100%;
        .s2{
          width: 250px;
          height: 250px;
          .s3{
            width: 200px;
            height: 200px;
            .con{
              padding-top: 5px;
              .introduce{
                font-size: 12px;
                line-height: 20px;
                padding-left: 10px;
                padding-right: 10px;
              }
            }
            img{
              width: 90px;
            }
          }
        }
      }
    }
  }
  .container .section4 .box .s1 .info .txt:before{
    //display: none;
  }
  .container .section4 .box .s1 .three{
    bottom: px2rem(90);
  }
  .container .section .box .s_box .left .info{
    padding-top: 15px;
    .txt{
      font-size: 14px;
    }
  }
  .container .section .box .s_box .left .lookmore{
    margin-top: 20px;
  }
  .container .section .box .s_box .left .lookmore {
    width: 135px;
    height: 40px;
    font-size: 15px;
  }
  .container .swiper-container .pag_num{
    bottom: 15px;
    span{
      font-size: 15px;
    }
  }
  .container .swiper-container .swiper-pagination{
    justify-content: center;
    padding-right: 0px;
    bottom: 20px;
    .swiper-pagination-bullet{
      width: 8px;
      height: 8px;
    }
  }
  .container .swiper-container .swiper-slide .pc{
    display: none;
  }
  .container .swiper-container .swiper-slide .app{
    display: block;
  }
  .container .section4 .box .s1 .one{
    top: px2rem(- 100);
    left: px2rem(630);
    .txt{
      &:before{
        left: px2rem(100);
        bottom: px2rem(-30);
      }
    }
  }
  .container .section4 .box .s1 .info .txt:before{
    width: px2rem(25);
    height: px2rem(25);
  }
  .container .section4 .box .s1 .two{
    top: px2rem(170);
    left: px2rem(-65);
    .txt{
      &:before{
        right: px2rem(-45);
        bottom: px2rem(10);
      }
    }
  }
  .container .section4 .box .s1 .five {
    top: px2rem(170);
    right: px2rem(-65);

    .txt {
      &:before {
        left: px2rem(-45);
        bottom: px2rem(10);
      }
    }
  }
  .container .section4 .box .s1 .three {
    bottom: px2rem(120);
    left: px2rem(-30);

    .txt {
      &:before {
        right: px2rem(-40);
        bottom: px2rem(55);
      }
    }
  }
  .container .section4 .box .s1 .four{
    bottom: px2rem(120);
    right: px2rem(-30);
    .txt {
      &:before {
        left: px2rem(-40);
        bottom: px2rem(55);
      }
    }
  }
  .container .section4 {
    //background: none;
    box-sizing: border-box;
    padding: 0 7%;
    .box {
      display: none;
    }
    .app{
      display: block;
    }
  }
}