@charset "utf-8";
@import "px2rem";
$designWidth: 1920;
.container{
  background-color: #f9f9f9;
  .content{
    width: 100%;
    padding-bottom: 0;
    .title_box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title{

      }
      .lookmore{
        a{
          width: 120px;
          height: 45px;
          //background-image: linear-gradient(90deg,
          //        #00aa90 0%,
          //        #0065af 100%),
          //linear-gradient(
          //                #d70739,
          //                #d70739);
          //background-blend-mode: normal,
          //normal;
          background-color: #0d3267;
          border-radius: 22px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }
    }
    .section{
      width: 1620px;
      margin: 0 auto;
      .bottom{
        display: flex;
        margin-top: 85px;
        margin-bottom: 100px;
        .left{
          width: 50%;
          img{
            display: block;
            width: 100%;
          }
        }
        .right{
          width: 54%;
          .swiper-container{
            width: 100%;
            position: relative;
            .swiper-slide{
              position: relative;
              img{
                display: block;
                width: 100%;
              }
              .info{
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                font-family: MicrosoftYaHeiLight;
                font-size: 26px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #ffffff;
                padding: 20px 0 20px 30px;
                background: rgba(0,0,0,0.6);
              }
            }
            .page{
              position: absolute;
              right: 20px;
              top: 20px;
              z-index: 99;
              font-family: Bebas;
              font-size: 30px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #ffffff;
            }
            .swiper-pagination{
              text-align: right;
              box-sizing: border-box;
              padding-right: 30px;
              height: 75px;
              bottom: 0;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              span{
                width: 18px;
                height: 18px;
                border: solid 2px #ffffff;
                background-color: transparent;
                opacity: 0.8;
              }
              .swiper-pagination-bullet-active{
                width: 37px;
                height: 17px;
                background-color: #d70739;
                border-radius: 8px;
                border:none;
                opacity: 1;
              }
            }
          }
        }
      }
    }
    .section1{
      background: url("../img/104.png") no-repeat center center;
      background-size: cover;
      padding-top: 80px;
      .box{
        width: 1620px;
        margin: 0 auto;
        .title_box{
          .title{
            .english{
              color: #ffffff;
              opacity: 0.1;
            }
            .chinese{
              color: #ffffff;
            }
          }
          .lookmore{
            a{

            }
          }
        }
        .middle{
          display: flex;
          align-items: center;
          border-bottom: 1px solid #8d8887;
          padding: 80px 0 60px;
          .item{
            display: flex;
            align-items: center;
            width: 25%;
            .left{
              flex-shrink: 0;
              img{
                display: block;
                width: 100px;
                height: 100px;
              }
            }
            .right{
              margin-left: 30px;
              .info{
                font-family: MicrosoftYaHei;
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                line-height:1;
                letter-spacing: 0px;
                color: #ffffff;
                padding-bottom: 10px;
              }
              .num{
                font-family: MicrosoftYaHei;
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #ffffff;
                span{
                  font-family: Bebas;
                  font-size: 64px;
                  font-weight: normal;
                  font-stretch: normal;
                  line-height: 1;
                  letter-spacing: 0px;
                  color: #ffffff;
                  opacity: 0.96;

                }
              }
            }
          }
        }
        .bottom{
          padding-bottom: 60px;
          padding-top: 20px;
          .info{
            font-family: MicrosoftYaHei;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 34px;
            letter-spacing: 0px;
            color: #ffffff;
            margin-top: 25px;
          }
        }
      }
    }
    .section2{
      display: flex;
      width: 1620px;
      margin: 0 auto;
      align-items: center;
      padding: 100px 0;
      .left{
        width: 25%;
        .title{

        }
        .s1{
          padding-left: 35px;
          position: relative;
          margin-top: px2rem(80);
          &:before{
            content: '';
            position: absolute;
            width: 10px;
            height: 65px;
            //background-image: linear-gradient(0deg,
            //        #00aa90 0%,
            //        #0065af 100%),
            //linear-gradient(
            //                #606060,
            //                #606060);
            //background-blend-mode: normal,
            //normal;
            background-color: #0d3267;
            left: 0;
          }
          h4{
            font-family: MicrosoftYaHei-Bold;
            font-size: 25px;
            font-weight: 700;
            font-stretch: normal;
            line-height: 33px;
            letter-spacing: 0px;
            color: #3c3c3c;
          }
          .txt{
            font-family: MicrosoftYaHei;
            font-size: 25px;
            font-weight: normal;
            letter-spacing: 0px;
            color: #3c3c3c;
          }
        }
        .s2{
          margin-top: px2rem(180);
          .info{
            font-family: MicrosoftYaHeiLight;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 27px;
            letter-spacing: 0px;
            color: #3c3c3c;
            padding-right: 105px;
          }
        }
        .sub{
          margin-top: px2rem(170);
          a{
            width: 176px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            //background-image: linear-gradient(90deg,
            //        #00aa90 0%,
            //        #0065af 100%),
            //linear-gradient(
            //                #264274,
            //                #264274);
            //background-blend-mode: normal,
            //normal;
            background-color: #0d3267;
            border-radius: 28px;
            font-family: MicrosoftYaHeiLight;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 58px;
            letter-spacing: 0px;
            color: #ffffff;
            img{
              margin-left: 15px;
              width: 35px;
            }
          }
        }
      }
      .middle{
        width: 55%;
        flex-shrink: 0;
        img{
          display: block;
          width: 100%;
        }
      }
      .right{
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .item{
          width: 60%;
          margin-left: 20%;
          padding: 30px 0;
          text-align: center;
          border-bottom: 1px solid #ececec;
          display: flex;
          flex-direction: column;
          img{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
            text-align: center;
          }
          h4{
            margin-top: 10px;
            font-family: MicrosoftYaHei-Bold;
            font-size: 22px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 27px;
            letter-spacing: 0px;
            color: #3c3c3c;
          }
        }
      }
    }
    .section3{
      background: url("../img/113.png") no-repeat center center;
      background-size: cover;
      text-align: center;
      padding: 185px 0;
      .s_core{
        font-family: MicrosoftYaHei-Bold;
        font-size: 44px;
        font-weight: 700;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: 0px;
        color: #ffffff;
      }
      .s_title{
        font-family: MicrosoftYaHei;
        font-size: 28px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 1;
        letter-spacing: 0px;
        color: #ffffff;
        margin-top: 25px;
        padding-bottom: 75px;
        position: relative;
        &:after{
          content: '';
          position: absolute;
          width: 36px;
          height: 7px;
          background-color: #ffffff;
          border: solid 1px #ffffff;
          left: 50%;
          transform: translateX(-50%);
          top: 60px;
        }
      }
      .info{
        .txt{
          font-family: MicrosoftYaHei;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 35px;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }
      .lookmore{
        width: 120px;
        height: 45px;
        margin: 45px auto 0;
        //background-image: linear-gradient(90deg,
        //        #00aa90 0%,
        //        #0065af 100%),
        //linear-gradient(
        //                #d70739,
        //                #d70739);
        //background-blend-mode: normal,
        //normal;
        background-color: #0d3267;
        border-radius: 22px;
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
@media all and (max-width: 1620px){
  .container .content{
    padding-left: 0;
    padding-right: 0;
  }
  .container .content .section2 .left .sub a img {
    margin-left: 8px;
    width: 22px;
  }
  .container .content .section{
    width: 100%;
  }
  .container .content .section .bottom{
    width: 90%;
    margin-left: 5%;
  }
  .container .content .title_box{
    width: 90%;
    margin-left: 5%;
  }
  .container .content .section .bottom .right .swiper-container .swiper-slide .info{
    font-size: 18px;
    padding: 15px 0 15px 30px;
  }
  .container .content .section .bottom .right .swiper-container .swiper-pagination{
    height: 56px;
  }
  .container .content .section .bottom .right .swiper-container .swiper-pagination span{
    width: 10px;
    height: 10px;
  }
  .container .content .section .bottom .right .swiper-container .swiper-pagination .swiper-pagination-bullet-active{
    width: 25px;
    height: 14px;
  }
  .container .content .title_box .lookmore a{
    width: 105px;
    height: 38px;
    font-size: 14px;
  }
  .container .content .section .bottom{
    margin-top: 60px;
    margin-bottom: 80px;
  }
  .container .content .section1 .box{
    width: 90%;
    margin-left: 5%;
    .title_box{
      width: 100%;
      margin-left: 0;
    }
  }
  .container .content .section1 .box .middle .item .left img{
    width: 80px;
    height: 80px;
  }
  .container .content .section1 .box .middle .item .right .info{
    font-size: 14px;
  }
  .container .content .section1 .box .middle .item .right .num span{
    font-size: 40px;
    margin-right: 3px;
  }
  .container .content .section1 .box .bottom .info{
    font-size: 16px;
    line-height: 32px;
    margin-top: 20px;
  }
  .container .content .section1 .box .middle .item .right{
    margin-left: 25px;
  }
  .container .content .section2{
    width: 90%;
    margin-left: 5%;
  }
  .container .content .section2 .right .item h4{
    //margin-top: 0px;
    font-size: 19px;
  }
  .container .content .section2 .right .item img{
    width: 25%;
  }
  .container .content .section2 .right .item{
    //padding: 0px 0 35px;
  }
  .container .content .section2 .middle img{
    width: 85%;
    margin: 0 auto;
  }
  .container .content .section2 .left .s2 .info{
    font-size: 16px;
  }
  .container .content .section2 .left .sub a{
    width: 135px;
    height: 43px;
    font-size: 16px;
  }
  .container .content .section2 .left .sub{
    //margin-top: 130px;
  }
  .container .content .section2 .left .s2{
    //margin-top: 140px;
  }
  .container .content .section2 .left .s1 .txt{
    font-size: 20px;
    margin-top: 5px;
  }
  .container .content .section2 .left{
    width: 29%;
  }
  .container .content .section3 .s_core{
    font-size: 32px;
  }
  .container .content .section3 .s_title{
    font-size: 20px;
  }
  .container .content .section3 .s_title:after{
    top: 33px;
    height: 3px;
  }
  .container .content .section3 .s_title{
    padding-bottom: 45px;
  }
  .container .content .section .bottom .right .swiper-container .page{
    font-size: 26px;
  }
  .container .content .section3 .lookmore{
    height: 40px;
    font-size: 15px;
  }
  .container .content .section3 .info .txt{
    font-size: 16px;
    line-height: 32px;
  }
}
@media all and (max-width: 1300px){
  .container .content .section1 .box .middle{
    padding: 25px 0 35px;
    flex-wrap: wrap;
    .item{
      width: 50%;
      margin-top: 30px;
    }
  }
  .container .content .section1 .box .bottom .info{
    font-size: 15px;
  }
  .container .content .section3{
    padding: 130px 0;
  }
}
@media all and (max-width: 1050px){
  .container .content .section2 .middle{
    display: none;
  }
  .container .content .section2{
    flex-wrap: wrap;
    padding-bottom: 50px;
  }
  .container .content .section2 .left{
    width: 100%;
  }
  .container .content .section2 .right{
    width: 100%;
  }
  .container .content .section2 .left .s1{
    margin-top: 55px;
  }
  .container .content .section2 .left .s2{
    margin-top: 40px;
  }
  .container .content .section2 .left .sub{
    margin-top: 35px;
  }
  .container .content .section2 .right{
    flex-direction: row;
    margin-top: 30px;
    .item{
      margin-left: 0;
      width: 33.3333%;
    }
  }
  .container .content .section2 .left .s2 .info{
    padding-right: 0;
  }
}
@media all and (max-width: 1000px){
  .container .content{
    padding-top: 65px;
  }
  .container .content .section .bottom{
    flex-wrap: wrap;
  }
  .container .content .section .bottom .left,.container .content .section .bottom .right{
    width: 100%;
  }

}
@media all and (max-width: 550px){
  .container .content{
    padding-top: 0;
  }
  .container .content .section{
    padding: 40px 7% 60px;
    box-sizing: border-box;
  }
  .container .content .title_box .lookmore a {
    width: 92px;
    height: 32px;
    font-size: 13px;
  }
  .container .content .title_box{
    width: 100%;
    margin-left: 0;
  }
  .container .content .section .bottom{
    width: 100%;
    margin: 40px 0 0;
  }
  .container .content .section .bottom .right .swiper-container .page{
    font-size: 18px;
  }
  .container .content .section .bottom .right .swiper-container .swiper-slide .info {
    font-size: 15px;
    padding: 12px 0 12px 15px;
  }
  .container .content .section .bottom .right .swiper-container .swiper-pagination{
    height: 44px;
  }
  .container .content .section .bottom .right .swiper-container .swiper-pagination span{
    width: 8px;
    height: 8px;
  }
  .container .content .section1 .box .middle .item{
    width: 50%;
    margin-top: 20px;
  }
  .container .content .section1 .box .middle .item .left img{
    width: 75px;
    height: 75px;
  }
  .container .content .section1 .box .middle .item .right .num span{
    font-size: 30px;
    margin-right: 5px;
  }
  .container .content .section1 .box .middle .item .right{
    margin-left: 13px;
  }
  .container .content .section1 .box .middle .item .right .num{
    font-size: 14px;
  }
  .container .content .section1{
    padding-top: 40px;
  }
  .container .content .section1 .box .bottom .info{
    font-size: 14px;
    margin-top: 10px;
  }
  .container .content .section3{
    padding: 40px 20px;
  }
  .container .content .section3 .info .txt{
    font-size: 14px;
  }
  .container .content .section3 .s_core{
    font-size: 30px;
  }
  .container .content .section3 .s_title{
    font-size: 18px;
    margin-top: 18px;
  }
  .container .content .section3 .s_title:after{
    top: 33px;
  }
  .container .content .section3 .s_title{
    padding-bottom: 45px;
  }
  .container .content .section3 .lookmore{
    width: 120px;
    height: 35px;
    font-size: 15px;
    margin-top: 25px;
  }
  .container .content .section1 .box .middle .item .left{
    display: none;
  }
  .container .content .section2{
    padding-top: 35px;
  }
  .container .content .section2 .left .s1{
    margin-top: 30px;
  }
  .container .content .section2 .left .s2{
    margin-top: 20px;
  }
  .container .content .section2 .right{
    margin-top: 0;
  }
  .container .content .section2 .right .item{
    border-bottom: 0;
  }
  .container .content .section2{
    padding-bottom: 15px;
  }
  .container .content .section2 .right .item h4{
    font-size: 15px;
    margin-top: 10px;
  }
  .container .content .section2 .left .sub{
    margin-top: 25px;
  }
  .container .content .section2 .left .s2 .info{
    font-size: 14px;
  }
}