/* 
    Editor: zhao
    Time: 2018.10.18

    Less compilation
    > npm install -g less
    > lessc style.less style.css
    */

// Global style in here, change it
@main: #31af9a;
@main2: #bad618;
@black: #333;
@font: "微软雅黑";
@a: "Arial";
@en: "BEBAS";

@min-xs: (min-width: 576px);
@min-sm: (min-width: 768px);
@min-md: (min-width: 992px);
@min-lg: (min-width: 1200px);
@min-bg: (min-width: 1441px);
@min-gg: (min-width: 1711px);

@max-gg: (max-width: 1710px);
@max-bg: (max-width: 1440px);
@max-lg: (max-width: 1199px);
@max-md: (max-width: 991px);
@max-sm: (max-width: 767px);
@max-xs: (max-width: 575px);

@keyframes rise {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateY(10px);
  }
}
@keyframes scalemap
{
  0%{
    transform: scale(0.2);
    opacity: 1;
  }
  100%{
    transform: scale(1.5);
    opacity: 0;
  }
}

@-moz-keyframes scalemap
{
  0%{
    transform: scale(0.2);
    opacity: 1;
  }
  100%{
    transform: scale(1.5);
    opacity: 0;
  }
}

@-webkit-keyframes scalemap
{
  0%{
    transform: scale(0.2);
    opacity: 1;
  }
  100%{
    transform: scale(1.5);
    opacity: 0;
  }
}

@-o-keyframes scalemap
{
  0%{
    transform: scale(0.2);
    opacity: 1;
  }
  100%{
    transform: scale(1.5);
    opacity: 0;
  }
}

// setting body
.resetStyle{
  font-family: @font;
  color: @black;
  a{
    text-decoration: none;
    color: @black;
  }
  ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  p{
    margin: 0;
  }
}
.ie-warning{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  padding: 50px 0;
  h1{
    margin: 0 0 30px;
  }
  p{
    font-size: 16px;
  }
  .ie-container {
    min-width: 1024px;
    width: 100%;
    height: 200px;
    background: #fff;
    margin: 60px 0;
  }
  .ie-download{
    list-style: none;
    padding: 30px 0;
    margin: 0 auto;
    width: 720px;
    > li > a {
      display: block;
      color: #000;
      width: 140px;
      font-size: 15px;
      padding: 15px 0;
      margin: 0 auto;
      > div {
        margin-top: 10px;
      }
      &:hover {
        background-color: #eee;
      }
    }
  }
}

// bootstrap container Based on PSD
.container {
  padding: 0;
  @media @min-bg{
    width: 88%;
  }
  @media @max-lg{
    padding-right: 15px;
    padding-left: 15px;
  }
}

#backtop{
  position: fixed;
  right: 49px;
  bottom: 20px;
  z-index: 100;
  opacity: 0;
  transition: 0.3s;
  ul li {
    width: 54px;
    height: 54px;
    float: left;
    position: relative;
    line-height: 54px;
    text-align: center;
    margin-bottom: 3px;
    list-style: none;
  }
  ul li .inner {
    position: absolute;
    right: 70px;
    top: 0;
    background: #fff;
    border: 1px solid #ddd;
    line-height: normal;
    padding: 15px;
    transform: scale(0);
    transform-origin: top right;
    transition: 0.3s;
  }
  ul li .inner p {
    font-size: 12px;
  }
  ul li:hover .inner {
    transform: scale(1);
  }
  ul li .sidebox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    transition: all 0.3s;
    background: #fff;
    border: 1px solid #ddd;
    color: #fff;
    font: 14px/54px @font;
    overflow: hidden;
    background-position: center;
    background-size: inherit;
    background-repeat: no-repeat;
  }
  &.on {
    opacity: 1;
  }
  ul li .sidetop {
    width: 100%;
    height: 100%;
    line-height: 54px;
    display: inline-block;
    opacity: 0.6;
    filter: alpha(opacity=80);
    transition: all 0.3s;
    border: 1px solid #eef4f7;
    background: #eee url(../images/side_icon.png) center / cover no-repeat;
  }
  @media @min-sm {
    ul li .sidetop:hover {
      opacity: 1;
      filter: alpha(opacity=100);
      background: @main url(../images/side_icon-w.png) center / cover no-repeat;
    }
  }
  @media @max-sm {
    right: 10px;
    bottom: 10px;
    ul li{
      width: 40px;
      height: 40px;
      line-height: 40px;
    }
  }
}

// header include Three level navigation, enjoy your coding
.home{
  &-header{
    width: 100%;
    background: @main;
    position: relative;
    @media @max-xs {
      background: #fff;
    }
    &:before{
      content: "";
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      width: 5px;
      height: 100%;
      background: @main2;
      @media @max-xs {
        background: #fff;
      }
    }
    .flexbox{
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      @media @max-md {
        height: 80px;
        position: relative;
      }
      @media @max-sm {
        height: 60px;
        position: static;
      }
    }
    .logo{
      position: relative;
      flex: 0 0 400px;
      min-width: 400px;
      display: flex;
      align-items: center;
      height: 100%;
      background: #fff;
      @media @max-gg {
        flex: 0 0 325px;
        min-width: 325px;
      }
      @media @max-bg {
        flex: 0 0 280px;
        min-width: 280px;
      }
      @media @max-bg {
        flex: inherit;
        min-width: inherit;
        padding: 0 15px 0 0;
      }
      &:before{
        content: "";
        position: absolute;
        right: 100%;
        top: 0;
        width: 1000vh;
        height: 100%;
        background: #fff;
      }
      h1{
        position: relative;
        z-index: 1;
        width: 284px;
        margin: 0;
        @media @max-bg {
          width: 250px;
        }
        @media @max-sm {
          width: 170px;
        }
        a{
          display: flex;
          align-items: center;
        }
        img{
          width: 100%;
        }
      }
    }
    .rightbox{
      display: flex;
      align-items: center;
      @media @max-xs {
        position: absolute;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .navmenu{
      margin: 0 108px 0 0;
      display: flex;
      @media (max-width: 1840px) {
        margin: 0 25px 0 0;
      }
      @media @max-md {
        display: block;
        position: absolute;
        z-index: 999;
        right: 0;
        top: 65px;
        background: #fff;
        margin: 0;
        padding: 10px 0;
        border-radius: 5px;
        box-shadow: 0 2px 7px -2px #757575;
        transition: .3s;
        transform: scale(0);
        transform-origin: top right;
        &.on{
          transform: scale(1);
        }
      }
      @media @max-sm {
        left: 15px;
        right: 15px;
        margin: auto;
        top: 100%;
      }
      > li{
        position: relative;
        margin: 0 68px 0 0;
        @media @max-gg {
          margin: 0 50px 0 0;
        }
        @media @max-bg {
          margin: 0 30px 0 0;
        }
        @media @max-md {
          margin: 0;
        }
        &:before{
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 0;
          height: 6px;
          background: @main2;
          transition: .3s;
          @media @max-md {
            display: none;
          }
        }
        &:after{
          content: "/";
          position: absolute;
          right: -35px;
          top: 0;
          color: #8dd3c7;
          font-size: 16px;
          @media @max-gg {
            right: -28px;
          }
          @media @max-bg {
            display: none;
          }
        }
        &:last-child{
          margin: 0;
          &:after{
            display: none;
          }
        }
        &.active, &:hover{
          &:before{
            left: -16px;
            width: 33px;
          }
          a{
            @media @max-md {
              color: @main;
            }
          }
        }
        > a{
          position: relative;
          z-index: 1;
          font-size: 16px;
          color: #fff;
          @media @max-md {
            color: #333;
            display: block;
            padding: 5px 20px;
            &:hover{
              background: #eee;
            }
          }
          @media @max-xs {
            font-size: 14px;
          }
        }
      }
    }
    .searchbox{
      position: relative;
      form{
        width: 260px;
        height: 40px;
        background: #fff;
        border-radius: 20px;
        display: flex;
        align-items: stretch;
        overflow: hidden;
        @media (max-width: 1600px) {
          width: 175px;
        }
        @media @max-lg {
          width: 260px;
          display: none;
          position: absolute;
          z-index: 1;
          right: -18px;
          top: -9px;
        }
        @media @max-md {
          display: flex;
          position: static;
        }
        @media @max-xs {
          display: none;
        }
      }
      input{
        flex: 1;
        min-width: 100px;
        height: 100%;
        font-size: 14px;
        color: #333;
        padding: 0 0 0 24px;
        border: 0;
        background: transparent;
        outline: none;
      }
      button{
        flex: 0 0 55px;
        min-width: 55px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        border: 0;
        background: transparent;
        padding: 0;
      }
      .app-search{
        cursor: pointer;
        display: none;
        @media @max-lg {
          display: block;
        }
        @media @max-md {
          display: none;
        }
        @media @max-xs {
          display: flex;
          background: #fff;
          border-radius: 50%;
          width: 25px;
          height: 25px;
          padding: 10px;
          justify-content: center;
          align-items: center;
          box-sizing: content-box;
        }
        img{
          @media @max-xs {
            filter: grayscale(1) brightness(0);
          }
        }
      }
      &:hover{
        @media @min-xs {
          form{
            display: flex;
          }
        }
      }
    }
    .app-navmenu-btn{
      display: none;
      width: 25px;
      cursor: pointer;
      margin: 0 0 0 30px;
      @media @max-md {
        display: block;
        background: #fff;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        padding: 8px;
        margin: 0 0 0 20px;
        box-sizing: content-box;
      }
      @media @max-xs {
        padding: 10px;
        margin: 0 5px 0 0;
      }
      img{
        width: 100%;
        @media @max-xs {
          filter: grayscale(1) brightness(0);
        }
      }
    }
    #app-top-search {
      position: absolute;
      top: -65px;    
      left: 0;
      width: 100%;
      height: 64px;
      background: #fff;
      -webkit-transition: all;
      transition: all;
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
      opacity: 0;    
      filter: alpha(opacity=0);
      z-index: 10;
      box-shadow: 0 -1px 5px 0 #757575;
      &.on{
        top: 0 !important;
        opacity: 1 !important;
      }
      .tsw-inner {
        position: relative;
        padding: 12px;
        max-width: 700px;
        display: block;
        margin: 0 auto;
      }
      .top-search-btn{
        position: absolute;
        top: 12px;
        font-size: 23px;
        font-style: normal;
        color: #aaa;
        width: 45px;
        text-align: center;
        border-radius: 2px 0px 0px 2px;
        cursor: pointer;
        right: 12px;
        height: 40px;
        background: transparent;
        border: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        outline: none;
        border-left: 1px solid #fff;
        img{
          filter: grayscale(1) brightness(0.5);
        }
      }
      .top-search-btn:hover {
        background-color: #e3e3e3;
      }
      .tsw-inner input{
        border: 0;
        height: 40px;
        padding: 0 55px 0 10px;
        font-size: 14px;
        width: 500px;
        border-radius: 2px;
        background-color: #efefef;
        width: 100%;
        outline: none;
        font-weight: normal;
      }
    }
  }
  &-header-fixed{
    @media @max-xs {
      position: relative;
      z-index: 999;
      width: 100%;
      height: 60px;
      .home-header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 -1px 5px 0 #757575;
      }
    }
  }
  &-section1{
    position: relative;
    display: flex;
    &-leftsec{
      flex: 0 0 6%;
      min-width: 6%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      padding: 0 8px 150px 0;
      @media (max-width: 1700px) {
        padding: 0 8px 30px 0;
      }
      @media @max-bg {
        display: none;
      }
      .text{
        position: relative;
        writing-mode: tb-rl;
        font-size: 12px;
        letter-spacing: 3px;
        color: #ccc;
        margin: 0 4px 70px 0;
        &:before{
          content: "";
          position: absolute;
          width: 1px;
          height: 70px;
          background: #dadada;
          left: 0;
          right: 0;
          margin: auto;
          top: -90px;
        }
      }
      .share{
        li{
          margin: 0 0 35px;
          &:last-child{
            margin: 0;
          }
          a{
            img{
              transition: .3s;
            }
            &:hover{
              img{
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
    &-swiper{
      flex: 0 0 94%;
      min-width: 94%;
      @media @max-bg {
        flex: 1;
      }
      @media @max-sm {
        height: 300px;
      }
      @media @max-xs {
        height: 270px;
      }
      .swiper-wrapper, .swiper-slide{
        @media @max-sm {
          height: 100%;
        }
      }
      .swiper-slide{
        position: relative;
        .bannerbg{
          width: 100%;
          @media @max-sm {
            height: 100%;
            object-fit: cover;
          }
        }
        .mask{
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 110px 0 0 140px;
          @media @max-bg {
            padding: 0 0 0 9%;
          }
          @media @max-xs {
            padding: 0 15px;
            align-items: center;
          }
          .logo-w{
            width: 543px;
            @media @max-bg {
              width: 410px;
              margin: 0 0 10px;
            }
            @media @max-lg {
              width: 350px;
            }
            @media @max-sm {
              width: 220px;
              margin: 0 0 5px;
            }
            img{
              width: 100%;
            }
          }
          .des{
            font-size: 48px;
            font-weight: 100;
            letter-spacing: 20px;
            margin: 0 0 50px;
            color: #fff;
            @media @max-bg {
              font-size: 40px;
            }
            @media @max-lg {
              font-size: 25px;
              margin: 0 0 30px;
            }
            @media @max-sm {
              font-size: 16px;
              margin: 0 0 15px;
            }
            @media @max-xs {
              letter-spacing: 10px;
              font-weight: normal;
            }
          }
          .more{
            width: 135px;
            height: 37px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000;
            font-size: 18px;
            margin: 0 0 140px;
            background: @main2;
            img{
              margin: 0 0 0 12px;
            }
            @media @max-bg {
              margin: 0 0 70px;
            }
            @media @max-lg {
              margin: 0 0 50px;
              font-size: 16px;
            }
            @media @max-sm {
              width: 115px;
              height: 35px;
              font-size: 12px;
              margin: 0 0 30px;
              img{
                width: 20px;
                margin: 0 0 0 8px;
              }
            }
            @media @max-xs {
              margin: 0 0 15px;
            }
          }
          .smdes{
            font-size: 12px;
            color: rgba(255,255,255,.5);
            line-height: 2;
            max-width: 430px;
            @media @max-sm {
              line-height: 1.5;
            }
            @media @max-xs {
              text-align: center;
            }
          }
        }
      }
      .swiper-pagination{
        display: flex;
        flex-direction: column;
        left: auto;
        right: 6%;
        width: auto;
        height: 100%;
        bottom: 0;
        justify-content: center;
        @media @max-xs {
          flex-direction: row;
          width: 100%;
          height: auto;
          right: 0;
          left: 0;
          bottom: 15px;
        }
        .swiper-pagination-bullet{
          position: relative;
          width: 10px;
          height: 10px;
          opacity: 1;
          background: #c9c9cb;
          border-radius: 50%;
          border: 2px solid #c9c9cb;
          transition: .3s;
          margin: 15px 0;
          @media @max-sm {
            width: 8px;
            height: 8px;
            margin: 5px 0;
          }
          @media @max-xs {
            margin: 0 5px;
          }
          &:after{
            content: attr(data-content);
            position: absolute;
            font-size: 24px;
            right: -40px;
            color: #fff;
            font-family: @en;
            top: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            align-items: center;
            opacity: 0;
            transition: .3s;
            @media @max-sm {
              display: none;
            }
          }
          &-active{
            border: 2px solid #fff;
            background: transparent;
            &:after{
              opacity: 1;
            }
          }
        }
      }
    }
    .mouse {
      position: absolute;
      z-index: 1;
      bottom: 30px;
      left: 0;
      right: 0;
      text-align: center;
      animation: rise 0.6s linear infinite alternate;
      cursor: pointer;
      @media @max-xs {
        display: none;
      }
    }
  }
  &-section2{
    padding: 150px 0 130px;
    @media @max-bg {
      padding: 80px 0;
    }
    @media @max-lg {
      padding: 60px 0;
    }
    @media @max-sm {
      padding: 40px 0;
    }
    @media @max-xs {
      padding: 30px 0;
    }
    .flexbox{
      display: flex;
      align-items: center;
      @media @max-sm {
        flex-direction: column-reverse;
      }
      .img-box{
        flex: 0 0 50%;
        min-width: 50%;
        height: 590px;
        @media @max-bg {
          height: 410px;
        }
        @media @max-sm {
          height: 300px;
        }
        @media @max-xs {
          height: 200px;
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .rightbox{
        flex: 0 0 50%;
        min-width: 50%;
        padding: 0 0 0 80px;
        @media @max-lg {
          padding: 0 0 0 60px;
        }
        @media @max-md {
          padding: 0 0 0 40px;
        }
        @media @max-sm {
          padding: 0;
        }
        h2{
          font-size: 72px;
          color: @main;
          font-family: @en;
          margin: 0 0 15px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
          }
        }
        .tit{
          font-size: 36px;
          color: #333;
          margin: 0 0 40px;
          @media @max-bg {
            font-size: 25px;
            margin: 0 0 30px;
          }
          @media @max-sm {
            margin: 0 0 20px;
          }
          @media @max-xs {
            font-size: 18px;
            margin: 0 0 10px;
            text-align: center;
          }
        }
        .des{
          font-size: 14px;
          color: #666;
          margin: 0 0 90px;
          line-height: 1.8;
          @media @max-bg {
            margin: 0 0 60px;
          }
          @media @max-sm {
            margin: 0 0 30px;
          }
          @media @max-xs {
            margin: 0 0 20px;
            text-align: center;
          }
        }
        .more{
          font-size: 18px;
          color: @main2;
          font-family: @en;
          display: flex;
          align-items: center;
          transition: .3s;
          @media @max-sm {
            display: none;
          }
          img{
            margin: 0 0 0 12px;
            transition: .3s;
          }
          &:hover{
            color: @main;
            img{
              margin: 0 0 0 20px;
            }
          }
        }
      }
    }
  }
  &-section3{
    width: 100%;
    overflow: hidden;
    .flexbox{
      display: flex;
      @media @max-sm {
        flex-direction: column;
      }
      .leftbox{
        flex: 0 0 32%;
        min-width: 32%;
        h2{
          font-size: 72px;
          color: @main;
          font-family: @en;
          margin: 0 0 20px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-sm {
            margin: 0 0 15px;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
          }
        }
        .tit{
          font-size: 36px;
          color: #333;
          margin: 0 0 120px;
          @media @max-bg {
            font-size: 25px;
            margin: 0 0 80px;
          }
          @media @max-sm {
            margin: 0 0 20px;
          }
          @media @max-xs {
            font-size: 18px;
            text-align: center;
          }
        }
        .img-box{
          width: 100%;
          height: 650px;
          @media @max-bg {
            height: 400px;
          }
          @media @max-lg {
            height: 320px;
          }
          @media @max-md {
            height: 299px;
          }
          @media @max-sm {
            display: none;
          }
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .rightbox{
        flex: 0 0 68%;
        min-width: 68%;
        padding: 0 0 0 60px;
        @media @max-sm {
          flex: inherit;
          min-width: inherit;
          padding: 0;
        }
      }
    }
    .top-swiper{
      position: relative;
      &:after{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 1000vh;
        height: 100%;
        background: #f6f6f6;
        @media @max-md {
          width: 100%;
        }
      }
    }
    &-top{
      margin: 0 0 40px;
      @media @max-lg {
        margin: 0 0 20px;
      }
      @media @max-md {
        margin: 0 0 15px;
      }
      .swiper-slide{
        position: relative;
        z-index: 1;
        .item{
          position: relative;
          .itemimg{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 450px;
            height: 100%;
            background: rgba(49,175,154,.9) url(../images/sec3bg.png) center right no-repeat;
            padding: 90px 50px 0 50px;
            @media @max-gg {
              padding: 0 50px;
              display: flex;
              justify-content: center;
              flex-direction: column;
            }
            @media @max-bg {
              padding: 0 30px;
              width: 300px;
            }
            @media @max-md {
              position: static;
              width: 100%;
              height: auto;
              padding: 20px;
            }
            h4{
              font-size: 40px;
              color: #fff;
              margin: 0 0 15px;
              @media @max-bg {
                font-size: 25px;
              }
              @media @max-md {
                font-size: 18px;
              }
            }
            .tips{
              width: 100%;
              min-height: 43px;
              background: @main2;
              display: flex;
              align-items: center;
              font-size: 20px;
              color: #353535;
              padding: 0 0 0 22px;
              margin: 0 0 90px;
              position: relative;
              @media @max-bg {
                margin: 0 0 20px;
                font-size: 16px;
                min-height: 35px;
              }
              @media @max-md {
                font-size: 14px;
                margin: 0 0 15px;
              }
              &:after{
                content: "";
                position: absolute;
                left: 0;
                bottom: -70px;
                width: 1px;
                height: 44px;
                background: rgba(255,255,255,.5);
                @media @max-bg {
                  display: none;
                }
              }
            }
            .des{
              font-size: 14px;
              color: #fff;
              line-height: 1.8;
              margin: 0 0 110px;
              @media @max-gg {
                margin: 0 0 40px;
              }
              @media @max-bg {
                margin: 0 0 20px;
              }
              @media @max-md {
                margin: 0 0 15px;
              }
            }
            .more{
              font-size: 18px;
              color: #fff;
              display: flex;
              align-items: center;
              font-family: @en;
              img{
                margin: 0 0 0 12px;
              }
            }
          }
        }
      }
    }
    &-thumbs{
      .swiper-slide{
        .item{
          height: 128px;
          cursor: pointer;
          border: 3px solid transparent;
          transition: .3s;
          @media @max-lg {
            height: 100px;
          }
          @media @max-md {
            height: 55px;
          }
          @media @max-sm {
            height: 90px;
          }
          @media @max-xs {
            height: 46px;
          }
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          &.more{
            background: #f6f6f6;
            a{
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
            img{
              width: auto;
              height: auto;
              object-fit: inherit;
              margin: 0 0 8px;
              @media @max-lg {
                width: 22px;
              }
              @media @max-md {
                width: 18px;
                margin: 0 0 5px;
              }
            }
            p{
              font-size: 18px;
              color: @main;
              @media @max-lg {
                font-size: 14px;
              }
              @media @max-md {
                font-size: 12px;
              }
            }
          }
        }
      }
      .swiper-slide-thumb-active {
        .item{
          border: 3px solid @main2;
        }
      }
    }
  }
  &-section4{
    position: relative;
    padding: 206px 0 0;
    @media @max-bg {
      padding: 100px 0 0;
    }
    @media @max-md {
      margin: 60px 0 0;
    }
    @media @max-sm {
      margin: 50px 0 0;
    }
    > .container{
      position: relative;
    }
    .flexbox{
      position: absolute;
      top: -206px;
      width: 100%;
      z-index: 10;
      display: flex;
      justify-content: flex-end;
      @media @max-bg {
        top: -100px;
      }
      @media @max-lg {
        left: 0;
        right: 0;
        margin: auto;
        padding: 0 15px;
      }
      .rightbox{
        flex: 0 0 50%;
        min-width: 50%;
        @media @max-md {
          flex: 0 0 100%;
          min-width: 100%;
        }
        .head{
          padding: 65px 80px 60px;
          background: rgba(49, 175, 154, 0.9) url(../images/sec3bg.png) center right no-repeat;
          @media @max-bg {
            padding: 40px;
          }
          @media @max-sm {
            padding: 30px;
          }
          @media @max-xs {
            padding: 15px;
          }
          h2{
            font-size: 60px;
            color: #fff;
            font-family: @en;
            margin: 0 0 15px;
            line-height: 1;
            @media @max-bg {
              font-size: 50px;
            }
            @media @max-xs {
              font-size: 25px;
              text-align: center;
            }
          }
          .tit{
            font-size: 30px;
            color: #fff;
            @media @max-bg {
              font-size: 25px;
            }
            @media @max-xs {
              font-size: 18px;
              text-align: center;
            }
          }
        }
      }
    }
    .swiper-box{
      position: relative;
      background: #fff;
      padding: 70px 60px 70px 80px;
      @media @max-bg {
        padding: 40px;
      }
      @media @max-sm {
        padding: 30px;
      }
      @media @max-xs {
        padding: 30px 15px;
      }
    }
    &-swiper{
      margin: 0 0 70px;
      @media @max-md {
        margin: 0 0 30px;
      }
      @media @max-sm {
        margin: 0 0 15px;
      }
      .item{
        h4{
          font-size: 36px;
          color: #333;
          font-weight: bold;
          margin: 0 0 30px;
          @media @max-md {
            font-size: 30px;
            margin: 0 0 20px;
          }
          @media @max-sm {
            font-size: 24px;
            margin: 0 0 10px;
          }
          @media @max-xs {
            font-size: 18px;
            text-align: center;
          }
        }
        .des{
          line-height: 1.8;
          font-size: 14px;
          color: #666;
          @media @max-xs {
            text-align: center;
          }
        }
      }
    }
    .swiper-bottom-operate{
      -webkit-user-select: none;
      user-select: none;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .left-sec{
        display: flex;
        padding: 0 0 0 8px;
        .swiper-button-prev, .swiper-button-next{
          position: relative;
          left: auto;
          right: auto;
          top: auto;
          bottom: auto;
          width: 14px;
          height: 25px;
          margin: 0 105px 0 0;
          outline: none;
          -webkit-user-select: none;
          user-select: none;
          background: transparent;
          transition: .3s;
          @media @max-xs {
            margin: 0 60px 0 0;
          }
          &:before{
            content: "";
            display: block;
            position: relative;
            z-index: 1;
            width: 14px;
            height: 25px;
            background: url(../images/left.png) center / contain no-repeat;
          }
          &:after{
            content: "";
            position: absolute;
            width: 12px;
            height: 43px;
            top: 0;
            bottom: 0;
            left: -8px;
            margin: auto;
            transition: .3s;
            @media @max-xs {
              width: 8px;
              height: 30px;
            }
          }
          &:hover{
            &:before{
              background: url(../images/left-h.png) center / contain no-repeat;
            }
            &:after{
              background: @main2;
            }
          }
        }
        .swiper-button-next{
          &:before{
            content: "";
            display: block;
            background: url(../images/right.png) center / contain no-repeat;
          }
          &:after{
            left: auto;
            right: -8px;
          }
          margin: 0;
          &:hover{
            &:before{
              background: url(../images/right-h.png) center / contain no-repeat;
            }
          }
        }
      }
      .right-sec{
        .swiper-pagination{
          position: static;
          font-size: 36px;
          color: #d6d6d6;
          font-family: @en;
          line-height: 1;
          -webkit-user-select: none;
          user-select: none;
          @media @max-sm {
            font-size: 24px;
          }
          @media @max-xs {
            font-size: 18px;
          }
          &-current{
            font-size: 72px;
            color: @main2;
            @media @max-sm {
              font-size: 50px;
            }
            @media @max-xs {
              font-size: 30px;
            }
          }
        }
      }
    }
    .secbg{
      width: 100%;
      height: 700px;
      @media @max-lg {
        height: 600px;
      }
      @media @max-md {
        height: 500px;
      }
      @media @max-sm {
        height: 400px;
      }
      @media @max-xs {
        height: 280px;
      }
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  &-section5{
    padding: 180px 0 140px;
    @media @max-bg {
      padding: 80px 0;
    }
    @media @max-lg {
      padding: 60px 0;
    }
    @media @max-sm {
      padding: 40px 0;
    }
    @media @max-xs {
      padding: 30px 0;
    }
    .flexbox{
      display: flex;
      align-items: center;
      @media @max-sm {
        flex-direction: column;
        align-items: flex-start;
      }
      .leftbox{
        flex: 0 0 555px;
        min-width: 555px;
        @media @max-gg {
          flex: 0 0 470px;
          min-width: 470px;
        }
        @media @max-bg {
          flex: 0 0 410px;
          min-width: 410px;
        }
        @media @max-lg {
          flex: 0 0 315px;
          min-width: 315px;
        }
        @media @max-sm {
          flex: inherit;
          min-width: inherit;
          width: 100%;
          margin: 0 0 40px;
        }
        @media @max-xs {
          margin: 0 0 20px;
        }
        h2{
          font-size: 72px;
          color: @main;
          font-family: @en;
          margin: 0 0 20px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-sm {
            margin: 0 0 15px;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
          }
        }
        .tit{
          font-size: 36px;
          color: #333;
          margin: 0 0 35px;
          @media @max-bg {
            font-size: 25px;
          }
          @media @max-sm {
            margin: 0 0 20px;
          }
          @media @max-xs {
            font-size: 18px;
            text-align: center;
            margin: 0 0 10px;
          }
        }
        .des{
          font-size: 18px;
          color: #666;
          @media @max-xs {
            font-size: 14px;
            text-align: center;
          }
        }
      }
      .rightbox{
        flex: 1;
        .bussiness-map{
          position: relative;
          width: 100%;
          max-width: 994px;
          margin: 0 0 0 auto;
          img{
            width: 100%;
          }
          .appoint{
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: @main;
            display: flex;
            justify-content: center;
            align-items: center;
            .i{
              flex: 0 0 40px;
              min-width: 40px;
              height: 40px;
              border-radius: 50%;
              background: rgba(49, 175, 154, 0.4);
              border: 1px solid @main;
              animation: scalemap 2s linear infinite;
              -moz-animation: scalemap 2s linear infinite;
              -webkit-animation: scalemap 2s linear infinite;
            }
            &.a1{top: 20%;left: 15%;}
            &.a2{top: 40.1%;left: 13.3%;}
            &.a3{top: 33.5%;left: 16.7%;}
            &.a4{top: 30.2%;left: 20.8%;}
            &.a5{top: 42.1%;left: 24.3%;}
            &.a6{top: 37%;left: 27.6%;}
            &.a7{top: 58.7%;left: 27.6%;}
            &.a8{top: 65.5%;left: 32.7%;}
            &.a9{top: 52%;left: 46.8%;}
            &.a10{top: 28.5%;left: 50.9%;}
            &.a11{top: 48.5%;left: 50.1%;}
            &.a12{top: 68.7%;left: 50.9%;}
            &.a13{top: 25%;left: 58.5%;}
            &.a14{top: 47.2%;left: 61%;}
            &.a15{top: 26.7%;left: 69.3%;}
            &.a16{top: 53.7%;left: 69.4%;}
            &.a17{top: 31.7%;left: 71%;}
            &.a18{top: 25%;left: 72.8%;}
            &.a19{top: 29.9%;left: 73.6%;}
            &.a20{top: 45.1%;left: 73.7%;}
            &.a21{top: 53.7%;left: 76.1%;}
            &.a22{top: 43.6%;left: 79.5%;}
            &.a23{top: 63.7%;left: 79.4%;}
            &.a24{top: 82.3%;left: 81.1%;}
          }
        }
      }
    }
  }
  &-section6{
    .secbg{
      width: 100%;
      height: 370px;
      background: url(../images/sec6bg.jpg) center / cover no-repeat;
      background-attachment: fixed;
      font-size: 30px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 100;
      letter-spacing: 5px;
      @media @max-lg {
        height: 260px;
        font-size: 24px;
      }
      @media @max-xs {
        height: 150px;
        font-size: 14px;
        font-weight: normal;
        background-attachment: inherit;
      }
    }
  }
  &-section7{
    padding: 150px 0;
    @media @max-bg {
      padding: 80px 0;
    }
    @media @max-lg {
      padding: 60px 0;
    }
    @media @max-sm {
      padding: 40px 0;
    }
    @media @max-xs {
      padding: 30px 0;
    }
    .flexbox{
      display: flex;
      @media @max-sm {
        flex-direction: column;
      }
      .leftbox{
        flex: 0 0 288px;
        min-width: 288px;
        margin: 0 80px 0 0;
        @media @max-bg {
          margin: 0 40px 0 0;
          flex: 0 0 250px;
          min-width: 250px;
        }
        @media @max-md {
          margin: 0 30px 0 0;
          flex: 0 0 220px;
          min-width: 220px;
        }
        @media @max-sm {
          flex: inherit;
          min-width: inherit;
          margin: 0;
        }
        h2{
          font-size: 72px;
          color: @main;
          font-family: @en;
          margin: 0 0 20px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-sm {
            margin: 0 0 15px;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
          }
        }
        .tit{
          font-size: 36px;
          color: #333;
          margin: 0 0 35px;
          @media @max-bg {
            font-size: 25px;
          }
          @media @max-sm {
            margin: 0 0 20px;
          }
          @media @max-xs {
            font-size: 18px;
            text-align: center;
            margin: 0 0 10px;
          }
        }
      }
      .rightbox{
        flex: 1;
        overflow: hidden;
      }
    }
    &-tabs{
      @media @max-sm {
        display: flex;
      }
      a{
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 15px;
        background: #e5e5e5;
        color: #333;
        font-size: 24px;
        transition: .3s;
        @media @max-md {
          height: 50px;
          font-size: 16px;
        }
        @media @max-sm {
          flex: 1;
          margin: 0;
        }
        @media @max-xs {
          font-size: 14px;
          height: 40px;
        }
        &:last-child{
          margin: 0;
        }
        &.active{
          background: @main2;
          color: #fff;
        }
      }
    }
    &-swiper{
      width: 100%;
      .slideflex{
        display: flex;
        align-items: stretch;
        .img-box{
          flex: 0 0 42%;
          min-width: 42%;
          height: auto;
          padding: 0 80px 0 0;
          @media @max-bg {
            flex: 0 0 35%;
            min-width: 35%;
            padding: 0 30px 0 0;
          }
          @media @max-lg {
            display: none;
          }
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .newsList{
          overflow: hidden;
          .item{
            a{
              display: flex;
              align-items: center;
              padding: 40px 45px;
              border-bottom: 1px solid #eee;
              transition: .3s;
              @media @max-gg {
                padding: 20px 30px;
              }
              @media @max-md {
                padding: 20px;
              }
              @media @max-xs {
                padding: 15px 0;
              }
            }
            .date{
              margin: 0 40px 0 0;
              @media @max-bg {
                margin: 0 20px 0 0;
              }
              @media @max-xs {
                margin: 0 15px 0 0;
              }
              .day{
                font-size: 60px;
                color: #666;
                margin: 0 0 3px;
                line-height: 1;
                text-align: center;
                font-family: @en;
                transition: .3s;
                @media @max-bg {
                  font-size: 45px;
                }
                @media @max-md {
                  font-size: 35px;
                }
                @media @max-xs {
                  font-size: 30px;
                }
              }
              .time{
                font-size: 16px;
                color: #666;
                text-align: center;
                font-family: @en;
                transition: .3s;
                @media @max-md {
                  font-size: 14px;
                }
                @media @max-xs {
                  font-size: 12px;
                }
              }
            }
            .info{
              flex: 1;
              overflow: hidden;
              h4{
                font-size: 20px;
                color: #333;
                margin: 0 0 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                transition: .3s;
                @media @max-bg {
                  font-size: 18px;
                  margin: 0 0 8px;
                }
                @media @max-md {
                  font-size: 16px;
                  margin: 0 0 5px;
                }
              }
              .des{
                font-size: 14px;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: 1.8;
                max-height: 50px;
                @media @max-xs {
                  line-height: 1.5;
                  color: #999;
                  max-height: 41px;
                }
              }
            }
            a:hover{
              background: #f7f7f7;
              .date{
                .day, .time{
                  color: @main;
                }
              }
              .info{
                h4{
                  color: #000;
                }
              }
            }
          }
        }
      }
    }
  }
  &-footer{
    padding: 95px 0 50px;
    background: url(../images/fbg.jpg) center / cover no-repeat;
    @media @max-md {
      padding: 60px 0;
    }
    @media @max-xs {
      padding: 30px 0;
    }
    .flogo{
      width: 380px;
      margin: 0 auto 35px;
      @media @max-xs {
        width: 260px;
        margin: 0 auto 30px;
      }
      img{
        width: 100%;
      }
    }
    .fnavmenu{
      display: flex;
      justify-content: center;
      margin: 0 0 60px;
      @media @max-md {
        margin: 0 0 40px;
      }
      @media @max-sm {
        flex-wrap: wrap;
      }
      @media @max-xs {
        margin: 0 0 30px;
      }
      li{
        position: relative;
        margin: 0 37px 0 0;
        @media @max-lg {
          margin: 0 20px 0 0;
        }
        @media @max-sm {
          margin: 0 30px 20px 0;
        }
        &:after{
          content: "/";
          color: rgba(255,255,255,.5);
          font-size: 18px;
          margin: 0 0 0 37px;
          @media @max-lg {
            margin: 0 0 0 20px;
          }
          @media @max-md {
            font-size: 14px;
          }
          @media @max-sm {
            display: none;
          }
        }
        &:last-child{
          margin: 0;
          &:after{
            display: none;
          }
        }
        a{
          font-size: 18px;
          color: #fff;
          transition: .3s;
          &:hover{
            color: @main2;
          }
          @media @max-md {
            font-size: 14px;
          }
        }
      }
    }
    .eweima{
      width: 125px;
      margin: 0 auto 60px;
      @media @max-md {
        margin: 0 auto 40px;
      }
      @media @max-xs {
        margin: 0 auto 20px;
      }
      img{
        width: 100%;
        margin: 0 0 10px;
      }
      p{
        text-align: center;
        font-size: 16px;
        color: rgba(255,255,255,.5);
        @media @max-xs {
          font-size: 14px;
        }
      }
    }
    .copyright{
      font-size: 14px;
      color: #fff;
      text-align: center;
      @media @max-xs {
        line-height: 1.8;
      }
      a{
        color: #fff;
        transition: .3s;
        &:hover{
          color: @main2;
        }
      }
    }
  }
}
.news{
  &-section1{
    .swiper-container{
      @media @max-sm {
        height: 200px;
      }
    }
    .swiper-slide .mask{
      padding-top: 0; 
      @media @max-sm {
        padding: 0 15px; 
      }
    }
    h2{
      font-size: 72px;
      color: #fff;
      font-family: @en;
      line-height: 1;
      margin: 0 0 5px;
      @media @max-bg {
        font-size: 50px;
      }
      @media @max-sm {
        font-size: 30px;
        text-align: center;
      }
      @media @max-xs {
        font-size: 18px;
        text-align: center;
      }
    }
    .banner-text{
      font-size: 42px;
      color: #fff;
      font-weight: 100;
      letter-spacing: 3px;
      @media @max-bg {
        font-size: 30px;
      }
      @media @max-sm {
        font-size: 24px;
        text-align: center;
      }
      @media @max-xs {
        font-size: 14px;
        font-weight: normal;
      }
    }
    .swiper-slide .mask.text-black{
      h2, .banner-text{
        color: #333;
        @media @max-sm {
          color: #fff;
        }
      }
    }
  }
  &-section2{
    &-tabs{
      height: 85px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      @media @max-sm {
        height: 60px;
        overflow: auto;
        -webkit-overflow-scrolling:touch;
      }
      a{
        position: relative;
        padding: 0 0 0 20px;
        margin: 0 55px 0 0;
        font-size: 18px;
        color: #333;
        @media @max-lg {
          font-size: 16px;
          margin: 0 30px 0 0;
        }
        @media @max-sm {
          font-size: 14px;
          white-space: nowrap;
          text-align: center;
        }
        @media @max-xs {
          padding: 0 0 0 10px;
        }
        &:before{
          content: "";
          position: absolute;
          width: 0;
          height: 6px;
          background: @main2;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          transition: .3s;
          @media @max-xs {
            height: 3px;
          }
        }
        span{
          position: relative;
          z-index: 1;
        }
        &:last-child{
          margin: 0;
        }
        &.active, &:hover{
          @media @max-sm {
            color: @main2;
          }
          &:before{
            width: 56px;
            @media @max-sm {
              display: none;
            }
          }
        }
      }
    }
  }
  &-section3{
    padding: 125px 0 0;
    @media @max-bg {
      padding: 80px 0 0;
    }
    @media @max-lg {
      padding: 60px 0 0;
    }
    @media @max-sm {
      padding: 40px 0 0;
    }
    @media @max-xs {
      padding: 30px 0 0;
    }
    .news-list{
      margin: 0 0 105px;
      @media @max-bg {
        margin: 0 0 80px;
      }
      @media @max-lg {
        margin: 0 0 60px;
      }
      @media @max-sm {
        margin: 0 0 40px;
      }
      @media @max-xs {
        margin: 0 0 30px;
      }
      .item{
        margin: 0 0 80px;
        @media @max-bg {
          margin: 0 0 60px;
        }
        @media @max-md {
          margin: 0 0 40px;
        }
        @media @max-xs {
          margin: 0 0 15px;
        }
        &:last-child{
          margin: 0;
        }
        a{
          display: flex;
          align-items: center;
        }
        .img-box{
          flex: 0 0 800px;
          min-width: 800px;
          height: 300px;
          margin: 0 60px 0 0;
          overflow: hidden;
          @media @max-gg {
            flex: 0 0 550px;
            min-width: 550px;
          }
          @media @max-lg {
            flex: 0 0 400px;
            min-width: 400px;
            height: 210px;
            margin: 0 40px 0 0;
          }
          @media @max-md {
            flex: 0 0 260px;
            min-width: 260px;
            height: 160px;
            margin: 0 30px 0 0;
          }
          @media @max-xs {
            flex: 0 0 100px;
            min-width: 100px;
            height: 105px;
            margin: 0 15px 0 0;
          }
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .3s;
          }
        }
        .info{
          flex: 1;
          overflow: hidden;
          h4{
            font-size: 24px;
            color: #333;
            margin: 0 0 36px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            @media @max-lg {
              font-size: 20px;
              margin: 0 0 20px;
            }
            @media @max-md {
              margin: 0 0 15px;
            }
            @media @max-xs {
              font-size: 16px;
              margin: 0 0 8px;
              max-height: 38px;
            }
          }
          .des{
            font-size: 14px;
            color: #666;
            line-height: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            max-height: 56px;
            margin: 0 0 40px;
            @media @max-lg {
              margin: 0 0 30px;
            }
            @media @max-md {
              margin: 0 0 15px;
            }
            @media @max-xs {
              margin: 0 0 10px;
              line-height: 1.4;
            }
          }
          .bottom{
            padding: 45px 0 0;
            border-top: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: .3s;
            @media @max-lg {
              padding: 30px 0 0;
            }
            @media @max-md {
              padding: 15px 0 0;
            }
            @media @max-xs {
              padding: 8px 0 0;
              border-top: 1px solid #eee;
            }
            .date{
              font-size: 36px;
              color: #666;
              font-family: @en;
              line-height: 1;
              transition: .3s;
              @media @max-lg {
                font-size: 30px;
              }
              @media @max-md {
                font-size: 25px;
              }
              @media @max-xs {
                font-size: 14px;
              }
            }
            .more{
              font-size: 14px;
              font-family: @en;
              color: @main;
              transition: .3s;
            }
          }
        }
        a:hover{
          .img-box{
            img{
              transform: scale(1.1);
            }
          }
          .info{
            .bottom{
              border-top: 1px solid @main2;
              .date{
                color: @main;
              }
              .more{
                color: @main2;
              }
            }
          }
        }
      }
    }
  }
  &-section4{
    border-top: 1px solid #eaeaea;
    padding: 25px 0 110px;
    @media @max-bg {
      padding: 25px 0 80px;
    }
    @media @max-xs {
      padding: 20px 0 40px;
    }
    .flexbox{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .list-pagination{
        font-family: @en;
        font-size: 24px;
        color: rgba(102,102,102,.5);
        @media @max-xs {
          font-size: 16px;
        }
        span{
          font-size: 48px;
          color: @main2;
          @media @max-xs {
            font-size: 30px;
          }
        }
      }
      .prev-next{
        display: flex;
        a{
          display: block;
          flex: 0 0 110px;
          min-width: 110px;
          height: 37px;
          background: #ccc url(../images/left.png) center / auto no-repeat;
          -webkit-user-select: none;
          user-select: none;
          margin: 0 12px 0 0;
          transition: .3s;
          @media @max-xs {
            flex: 0 0 60px;
            min-width: 60px;
            height: 30px;
          }
          &.next{
            background: #ccc url(../images/right.png) center / auto no-repeat;
          }
          &:last-child{
            margin: 0;
          }
          &.prev:hover{
            background: @main2 url(../images/left-h.png) center / auto no-repeat;
          }
          &.next:hover{
            background: @main2 url(../images/right-h.png) center / auto no-repeat;
          }
        }
      }
    }
  }
}
.newsView{
  &-section1{
    padding: 125px 0 80px;
    @media @max-bg {
      padding: 80px 0;
    }
    @media @max-lg {
      padding: 60px 0;
    }
    @media @max-sm {
      padding: 40px 0;
    }
    @media @max-xs {
      padding: 30px 0;
    }
    .flexbox{
      display: flex;
      @media @max-sm {
        flex-direction: column-reverse;
      }
      .leftbox{
        flex: 0 0 31.5%;
        min-width: 31.5%;
        padding: 0 80px 0 0;
        @media @max-lg {
          padding: 0 40px 0 0;
        }
        @media @max-md {
          flex: 0 0 40%;
          min-width: 40%;
          padding: 0 30px 0 0;
        }
        @media @max-sm {
          padding: 0;
          flex: inherit;
          min-width: inherit;
          margin: 30px 0 0;
        }
        .head{
          width: 100%;
          height: 60px;
          font-size: 24px;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          background: @main;
          @media @max-md {
            height: 50px;
            font-size: 18px;
          }
          @media @max-xs {
            height: 40px;
            font-size: 16px;
          }
        }
        .infobox{
          padding: 22px;
          background: #f6f6f6;
          @media @max-md {
            padding: 15px;
          }
          @media @max-sm {
            padding: 30px;
          }
          @media @max-xs {
            background: #fff;
            padding: 10px 0 0;
          }
          .img-box{
            width: 100%;
            overflow: hidden;
            margin: 0 0 10px;
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: .3s;
            }
            &:hover{
              img{
                transform: scale(1.1);
              }
            }
          }
          ul{
            li{
              a{
                display: block;
                width: 100%;
                height: 50px;
                line-height: 50px;
                font-size: 14px;
                color: #333;
                border-bottom: 1px solid #eaeaea;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                transition: .3s;
                @media @max-bg {
                  height: 40px;
                  line-height: 40px;
                }
                &:hover{
                  color: @main;
                }
              }
              &:last-child{
                a{
                  border: 0;
                }
              }
            }
          }
        }
      }
      .rightbox{
        flex: 1;
        h4{
          font-size: 30px;
          color: #333;
          margin: 0 0 12px;
          @media @max-md {
            font-size: 24px;
          }
          @media @max-xs {
            font-size: 18px;
            margin: 0 0 8px;
          }
        }
        .time{
          font-size: 14px;
          color: #666;
          margin: 0 0 50px;
          @media @max-md {
            margin: 0 0 30px;
          }
        }
        .markdown-text{
          p{
            line-height: 1.8;
            font-size: 14px;
            color: #666;
            margin: 0 0 40px;
            @media @max-md {
              margin: 0 0 20px;
            }
          }
          img{
            width: 100%;
            margin: 0 0 40px;
            @media @max-md {
              margin: 0 0 20px;
            }
          }
        }
      }
    }
  }
  &-section2{
    .bottom-operate{
      padding: 35px 0 125px;
      border-top: 2px solid #ebebeb;
      display: flex;
      align-items: center;
      justify-content: space-between;
      @media @max-bg {
        padding: 35 0 80px;
      }
      @media @max-lg {
        padding: 35px 0 60px;
      }
      @media @max-sm {
        padding: 35px 0 40px;
      }
      @media @max-xs {
        padding: 20px 0;
        flex-direction: column-reverse;
      }
      .backList{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 240px;
        height: 52px;
        color: #333;
        font-size: 16px;
        background: @main2;
        @media @max-xs {
          width: 120px;
          height: 40px;
          color: #333;
          font-size: 14px;
        }
      }
      .prev-next{
        width: 230px;
        @media @max-xs {
          width: 100%;
          margin: 0 0 20px;
        }
        a{
          width: 100%;
          font-size: 14px;
          color: #999;
          display: block;
          transition: .3s;
          margin: 0 0 6px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          &:last-child{
            margin: 0;
          }
          &:hover{
            color: #333;
          }
        }
      }
    }
  }
}
.product{
  &-section1{
    padding: 125px 0 80px;
    @media @max-bg {
      padding: 80px 0;
    }
    @media @max-lg {
      padding: 60px 0;
    }
    @media @max-sm {
      padding: 40px 0;
    }
    @media @max-xs {
      padding: 30px 0;
    }
    .flexbox{
      overflow: hidden;
      .box-row{
        margin: 0 -10px;
        display: flex;
        flex-wrap: wrap;
        @media @max-sm {
          margin: 0 -8px;
        }
      }
      .box-col{
        flex: 0 0 33.33%;
        min-width: 33.33%;
        padding: 0 10px;
        margin: 0 0 20px;
        @media @max-md {
          flex: 0 0 50%;
          min-width: 50%;
        }
        @media @max-sm {
          padding: 0 8px;
          margin: 0 0 15px;
        }
      }
      .item{
        a{
          display: block;
          width: 100%;
          height: 100%;
        }
        .img-box{
          background: #f7f7f7;
          width: 100%;
          height: 370px;
          overflow: hidden;
          @media @max-bg {
            height: 250px;
          }
          @media @max-lg {
            height: 200px;
          }
          @media @max-xs {
            height: 110px;
          }
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .3s;
          }
        }
        .infobox{
          display: flex;
          align-items: center;
          padding: 20px 30px;
          border: 1px solid #f7f7f7;
          background: #fff;
          transition: .3s;
          @media @max-bg {
            padding: 15px;
          }
          @media @max-xs {
            padding: 10px 0 0;
            border: 0;
          }
          .left{
            flex: 1;
            padding: 0 20px 0 0;
            overflow: hidden;
            h4{
              font-size: 24px;
              color: #333;
              margin: 0 0 3px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              transition: .3s;
              @media @max-bg {
                font-size: 20px;
              }
              @media @max-lg {
                font-size: 16px;
              }
            }
            .des{
              font-size: 14px;
              color: #333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              transition: .3s;
              @media @max-lg {
                font-size: 12px;
              }
            }
          }
          .right{
            flex: 0 0 132px;
            min-width: 132px;
            height: 44px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: @main;
            font-family: @en;
            background: #ececec;
            transition: .3s;
            @media @max-bg {
              flex: 0 0 100px;
              min-width: 100px;
              height: 40px;
              font-size: 14px;
            }
            @media @max-lg {
              flex: 0 0 80px;
              min-width: 80px;
              height: 35px;
            }
            @media @max-sm {
              display: none;
            }
          }
        }
        &:hover{
          .img-box{
            img{
              transform: scale(1.1);
            }
          }
          .infobox{
            border: 1px solid @main;
            background: @main;
            .left{
              h4, .des{
                color: #fff;
              }
            }
            .right{
              color: #fff;
              background: @main2;
            }
          }
        }
      }
    }
  }
}
.productView{
  &-section1{
    padding: 125px 0 80px;
    @media @max-bg {
      padding: 80px 0 70px;
    }
    @media @max-lg {
      padding: 60px 0 50px;
    }
    @media @max-md {
      max-width: 768px;
      width: 100%;
      margin: auto;
    }
    @media @max-sm {
      padding: 40px 0 30px;
    }
    @media @max-xs {
      padding: 30px 0 20px;
    }
    .flexbox{
      display: flex;
      @media @max-bg {
        align-items: center;
      }
      @media @max-md {
        width: 100%;
        flex-direction: column;
      }
      .leftbox{
        flex: 0 0 50%;
        min-width: 50%;
        @media @max-md {
          flex: inherit;
          min-width: inherit;
          width: 100%;
        }
      }
      .rightbox{
        flex: 0 0 50%;
        min-width: 50%;
        padding: 0 0 0 80px;
        @media @max-bg {
          padding: 0 0 0 40px;
        }
        @media @max-md {
          flex: inherit;
          min-width: inherit;
          padding: 0;
          text-align: center;
        }
        h3{
          font-size: 48px;
          font-family: @en;
          margin: 0 0 12px;
          color: @main;
          @media @max-bg {
            font-size: 40px;
          }
          @media @max-lg {
            font-size: 35px;
          }
          @media @max-md {
            font-size: 30px;
          }
          @media @max-xs {
            font-size: 25px;
          }
        }
        h4{
          font-size: 30px;
          color: #333;
          margin: 0 0 20px;
          @media @max-lg {
            font-size: 24px;
          }
          @media @max-xs {
            font-size: 18px;
          }
        }
        .tips{
          font-size: 18px;
          color: #353535;
          background: @main2;
          padding: 10px 36px;
          margin: 0 0 40px;
          display: inline-block;
          @media @max-bg {
            margin: 0 0 30px;
          }
          @media @max-xs {
            font-size: 14px;
            padding: 5px 20px;
            margin: 0 0 20px;
          }
        }
        .des{
          font-size: 14px;
          color: #666;
          line-height: 2;
          margin: 0 0 95px;
          @media @max-bg {
            margin: 0 0 40px;
          }
          @media @max-lg {
            margin: 0 0 30px;
          }
          @media @max-xs {
            margin: 0 0 20px;
            line-height: 1.8;
          }
        }
        .listbox{
          .box-row{
            margin: 0 -30px;
            display: flex;
            flex-wrap: wrap;
            @media @max-gg {
              margin: 0 -15px;
            }
            @media @max-bg {
              margin: 0 -5px;
            }
            @media @max-lg {
              margin: 0 -10px;
            }
          }
          .box-col{
            flex: 0 0 20%;
            min-width: 20%;
            padding: 0 30px;
            @media @max-gg {
              padding: 0 15px;
            }
            @media @max-bg {
              padding: 0 5px;
            }
            @media @max-lg {
              flex: 0 0 33.33%;
              min-width: 33.33%;
              padding: 0 10px;
              margin: 0 0 20px;
            }
          }
          .numbox{
            width: 100%;
            text-align: center;
            padding: 20px 0;
            margin: 0 0 10px;
            border: 1px solid #cbcbcb;
            border-radius: 20px;
            .incrementing{
              font-size: 40px;
              font-family: @en;
              color: @main;
              line-height: 1;
              vertical-align: text-top;
              @media @max-xs {
                font-size: 30px;
              }
            }
            .symbol{
              font-size: 18px;
              font-family: @en;
              color: @main;
              vertical-align: text-top;
              @media @max-xs {
                font-size: 14px;
              }
            }
            .last-symbol{
              font-size: 12px;
              writing-mode: tb-rl;
              transform: scale(.8);
            }
          }
          .txt{
            text-align: center;
            font-size: 14px;
            color: #666;
            @media @max-bg {
              font-size: 12px;
            }
          }
        }
      }
    }
    &-swiper{
      height: 530px;
      background: #f6f6f6;
      @media @max-bg {
        height: 390px;
      }
      @media @max-md {
        width: 100%;
        margin: 0 0 30px;
      }
      @media @max-xs {
        height: 240px;
        margin: 0 0 20px;
      }
      .swiper-slide{
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .swiper-button-prev, .swiper-button-next{
        width: 14px;
        height: 25px;
        margin: 0 105px 0 0;
        outline: none;
        -webkit-user-select: none;
        user-select: none;
        background: transparent;
        transition: .3s;
        @media @max-xs {
          margin: 0 60px 0 0;
        }
        &:before{
          content: "";
          display: block;
          position: relative;
          z-index: 1;
          width: 14px;
          height: 25px;
          background: url(../images/left.png) center / contain no-repeat;
        }
        &:after{
          content: "";
          position: absolute;
          width: 12px;
          height: 43px;
          top: 0;
          bottom: 0;
          left: -8px;
          margin: auto;
          transition: .3s;
          @media @max-xs {
            width: 8px;
            height: 30px;
          }
        }
        &:hover{
          &:before{
            background: url(../images/left-h.png) center / contain no-repeat;
          }
          &:after{
            background: @main2;
          }
        }
      }
      .swiper-button-next{
        &:before{
          content: "";
          display: block;
          background: url(../images/right.png) center / contain no-repeat;
        }
        &:after{
          left: auto;
          right: -8px;
        }
        margin: 0;
        &:hover{
          &:before{
            background: url(../images/right-h.png) center / contain no-repeat;
          }
        }
      }
    }
  }
  &-section2{
    margin: 0 0 70px;
    @media @max-sm {
      margin: 0 0 40px;
    }
    .head{
      padding: 0 0 15px;
      border-bottom: 2px solid #ccc;
      font-size: 36px;
      color: #333;
      margin: 0 0 100px;
      font-family: @en;
      @media @max-bg {
        margin: 0 0 80px;
      }
      @media @max-lg {
        margin: 0 0 60px;
      }
      @media @max-sm {
        margin: 0 0 40px;
        font-size: 24px;
      }
      @media @max-xs {
        margin: 0 0 30px;
        font-size: 18px;
      }
      span{
        font-size: 36px;
        color: @main;
        position: relative;
        margin: 0 42px 0 0;
        @media @max-sm {
          font-size: 24px;
        }
        @media @max-xs {
          font-size: 18px;
        }
        &:after{
          content: "";
          position: absolute;
          width: 1px;
          height: 32px;
          background: #999;
          top: 10px;
          right: -22px;
          @media @max-sm {
            top: 8px;
            height: 22px;
          }
          @media @max-xs {
            top: 6px;
            height: 16px;
          }
        }
      }
    }
    .flexbox{
      display: flex;
      align-items: center;
      @media @max-md {
        flex-direction: column-reverse;
      }
      .leftbox{
        flex: 0 0 50%;
        min-width: 50%;
        padding: 0 90px 0 0;
        @media @max-bg {
          padding: 0 40px 0 0;
        }
        @media @max-md {
          padding: 0;
        }
        h4{
          font-size: 24px;
          color: @main;
          margin: 0 0 22px;
          @media @max-md {
            text-align: center;
          }
          @media @max-xs {
            font-size: 18px;
          }
          span{
            font-size: 48px;
            font-family: @en;
            margin: 0 10px 0 0;
            @media @max-md {
              font-size: 24px;
            }
            @media @max-xs {
              font-size: 18px;
            }
          }
        }
        ul{
          li{
            padding: 0 0 0 12px;
            line-height: 2.2;
            font-size: 14px;
            color: #666;
            position: relative;
            @media @max-xs {
              line-height: 2;
            }
            &:before{
              content: "";
              position: absolute;
              width: 5px;
              height: 5px;
              left: 0;
              top: 12px;
              margin: auto;
              border-radius: 50%;
              background: @main2;
            }
          }
        }
      }
      .rightbox{
        flex: 0 0 50%;
        min-width: 50%;
        height: 416px;
        @media @max-md {
          height: 300px;
          margin: 0 0 30px;
        }
        @media @max-xs {
          height: 175px;
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  &-section3{
    @media @max-md {
      background: url(../images/proview-sec3bg.jpg) center / cover no-repeat;
    }
    .flexbox{
      padding: 75px 0;
      flex-direction: row-reverse;
      background: url(../images/proview-sec3bg.jpg) center / cover no-repeat;
      @media @max-lg {
        padding: 0;
      }
      @media @max-md {
        padding: 40px 0;
        flex-direction: column-reverse;
        background: transparent;
      }
      @media @max-xs {
        padding: 30px 0;
      }
      .leftbox{
        h4{
          color: #fff;
        }
        ul{
          li{
            color: #fff;
          }
        }
      }
      .rightbox{
        display: flex;
        @media @max-md {
          height: auto;
        }
        .img-box{
          width: 400px;
          margin: auto;
          @media @max-lg {
            width: 300px;
          }
          @media @max-md {
            width: 240px;
          }
          @media @max-xs {
            width: 190px;
          }
          img{
            object-fit: contain;
          }
        }
      }
    }
  }
  &-section4{
    .flexbox{
      .rightbox{
        height: auto;
      }
    }
    .imgflexbox{
      overflow: hidden;
      .box-row{
        margin: 0 -9px;
        display: flex;
        flex-wrap: wrap;
        @media @max-xs {
          margin: 0 -5px;
        }
      }
      .box-col{
        flex: 0 0 50%;
        min-width: 50%;
        padding: 0 9px;
        @media @max-xs {
          padding: 0 5px;
        }
      }
      .img-box{
        width: 100%;
        height: 450px;
        overflow: hidden;
        @media @max-lg {
          height: 350px;
        }
        @media @max-xs {
          height: 190px;
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  &-section5{
    margin: 0 0 100px;
    @media @max-bg {
      margin: 0 0 80px;
    }
    @media @max-md {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 40px;
    }
    @media @max-xs {
      margin: 0 0 25px;
    }
    .flexbox{
      overflow: hidden;
      .box-row{
        margin: 0 -9px;
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
      }
      .box-col{
        flex: 0 0 25%;
        min-width: 25%;
        padding: 0 9px;
        display: flex;
        @media @max-lg {
          flex: 0 0 50%;
          min-width: 50%;
          margin: 0 0 15px;
        }
      }
      .item{
        width: 100%;
        height: auto;
        padding: 40px 36px;
        background: #f8f8f8;
        @media @max-bg {
          padding: 20px;
        }
        @media @max-xs {
          padding: 20px 15px;
        }
        .head{
          display: flex;
          align-items: center;
          margin: 0 0 20px;
          @media @max-xs {
            flex-direction: column;
            margin: 0 0 10px;
          }
          .ico{
            flex: 0 0 70px;
            min-width: 70px;
            margin: 0 20px 0 0;
            @media @max-bg {
              flex: 0 0 60px;
              min-width: 60px;
            }
            @media @max-xs {
              margin: 0 0 10px;
            }
            img{
              width: 100%;
            }
          }
          .info{
            .num{
              font-size: 30px;
              color: @main;
              margin: 0 0 5px;
              font-family: @en;
              line-height: 1;
              @media @max-md {
                font-size: 24px;
              }
              @media @max-xs {
                font-size: 16px;
                text-align: center;                
              }
            }
            .tit{
              color: @main;
              font-size: 18px;
              @media @max-bg {
                font-size: 16px;
              }
              @media @max-xs {
                text-align: center;
              }
            }
          }
        }
        .des{
          color: #333;
          font-size: 14px;
        }
      }
    }
  }
  &-section6{
    .head{
      padding: 0 0 15px;
      border-bottom: 2px solid #ccc;
      font-size: 36px;
      color: #333;
      margin: 0 0 100px;
      font-family: @en;
      @media @max-bg {
        margin: 0 0 80px;
      }
      @media @max-lg {
        margin: 0 0 60px;
      }
      @media @max-sm {
        margin: 0 0 40px;
        font-size: 24px;
      }
      @media @max-xs {
        margin: 0 0 30px;
        font-size: 18px;
      }
      span{
        font-size: 36px;
        color: @main;
        position: relative;
        margin: 0 42px 0 0;
        @media @max-sm {
          font-size: 24px;
        }
        @media @max-xs {
          font-size: 18px;
        }
        &:after{
          content: "";
          position: absolute;
          width: 1px;
          height: 32px;
          background: #999;
          top: 10px;
          right: -22px;
          @media @max-sm {
            top: 8px;
            height: 22px;
          }
          @media @max-xs {
            top: 6px;
            height: 16px;
          }
        }
      }
    }
    .parameter-box{
      width: 100%;
      margin: 0 0 120px;
      @media @max-lg {
        margin: 0 0 80px;
        height: 260px;
        padding: 0 0 15px;
        overflow: auto;
        -webkit-overflow-scrolling:touch;
      }
      @media @max-md {
        margin: 0 0 60px;
      }
      @media @max-sm {
        margin: 0 0 30px;
      }
      img{
        width: 100%;
        @media @max-lg {
          width: auto;
          height: 100%;
        }
      }
    }
  }
}
.contact{
  &-section1{
    padding: 125px 0 80px;
    @media @max-bg {
      padding: 80px 0;
    }
    @media @max-lg {
      padding: 60px 0;
    }
    @media @max-sm {
      padding: 40px 0;
    }
    @media @max-xs {
      padding: 30px 0;
    }
    .flexbox{
      display: flex;
      justify-content: space-between;
      @media @max-md {
        flex-direction: column;
      }
      .leftbox{
        @media @max-lg {
          margin: 0 40px 0 0;
        }
        @media @max-md {
          margin: 0;
        }
        h2{
          font-size: 72px;
          color: @main;
          font-family: @en;
          margin: 0 0 20px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-sm {
            margin: 0 0 15px;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
          }
        }
        .tit{
          position: relative;
          font-size: 36px;
          color: #333;
          margin: 0 0 120px;
          @media @max-bg {
            font-size: 25px;
            margin: 0 0 80px;
          }
          @media @max-sm {
            margin: 0 0 20px;
          }
          @media @max-xs {
            font-size: 18px;
            text-align: center;
          }
          &:after{
            content: "";
            position: absolute;
            width: 40px;
            height: 3px;
            background: @main;
            left: 0;
            bottom: -50px;
            @media @max-sm {
              display: none;
            }
          }
        }
      }
      .rightbox{
        flex: 0 0 1100px;
        min-width: 1100px;
        @media @max-gg {
          flex: 0 0 900px;
          min-width: 900px;
        }
        @media @max-lg {
          flex: 1;
          min-width: inherit;
        }
        .cflexbox{
          .box-row{
            margin: 0 -30px;
            display: flex;
            flex-wrap: wrap;
            @media @max-lg {
              margin: 0 -15px;
            }
          }
          .box-col{
            flex: 0 0 50%;
            min-width: 50%;
            padding: 0 30px;
            @media @max-lg {
              padding: 0 15px;
            }
            @media @max-sm {
              flex: 0 0 100%;
              min-width: 100%;
            }
          }
          .item{
            background: #f5f5f5;
            padding: 55px;
            @media @max-gg {
              padding: 30px;
            }
            @media @max-lg {
              padding: 30px 15px;
            }
            @media @max-sm {
              padding: 15px;
            }
            h4{
              position: relative;
              font-size: 24px;
              color: #333;
              font-weight: bold;
              margin: 0 0 35px;
              height: 45px;
              line-height: 45px;
              @media @max-lg {
                font-size: 20px;
                height: 40px;
                line-height: 40px;
                margin: 0 0 20px;
              }
              @media @max-xs {
                font-size: 16px;
                height: 30px;
                line-height: 30px;
                margin: 0 0 15px;
              }
              span{
                position: relative;
                z-index: 1;
              }
              &:before{
                content: "";
                position: absolute;
                left: -68px;
                top: 0;
                width: 210px;
                height: 100%;
                background: @main2;
                border-radius: 10px;
                @media @max-gg {
                  left: -40px;
                  width: 180px;
                }
                @media @max-lg {
                  left: -25px;
                  width: 156px;
                }
              }
            }
            ul{
              margin: 0 0 50px;
              @media @max-lg {
                margin: 0 0 30px;
              }
              @media @max-xs {
                margin: 0 0 15px;
              }
              li{
                font-size: 16px;
                color: #666;
                margin: 0 0 20px;
                @media @max-lg {
                  margin: 0 0 15px;
                }
                @media @max-xs {
                  margin: 0 0 10px;
                  font-size: 14px;
                }
                &:last-child{
                  margin: 0;
                }
                .phone{
                  font-size: 24px;
                  color: @main;
                  font-family: @en;
                  @media @max-xs {
                    font-size: 20px;
                  }
                }
              }
            }
            .eweima-box{
              display: flex;
              .eweima{
                flex: 0 0 111px;
                min-width: 111px;
                margin: 0 30px 0 0;
                &:last-child{
                  margin: 0;
                }
                img{
                  width: 100%;
                  margin: 0 0 8px;
                  border: 1px solid #ccc;
                }
                p{
                  text-align: center;
                  font-size: 14px;
                  color: #666;
                }
              }
            }
          }
        }
      }
    }
  }
  &-section2{
    margin: 0 0 120px;
    @media @max-bg {
      margin: 0 0 80px;
    }
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 40px;
    }
    @media @max-xs {
      margin: 0 0 30px;
    }
    .mapbox{
      width: 100%;
      height: 550px;
      @media @max-bg {
        height: 450px;
      }
      @media @max-md {
        height: 300px;
      }
      @media @max-xs {
        height: 250px;
      }
    }
  }
  &-section3{
    margin: 0 0 110px;
    @media @max-bg {
      margin: 0 0 80px;
    }
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 40px;
    }
    @media @max-xs {
      margin: 0 0 30px;
    }
    .head{
      margin: 0 0 70px;
      @media @max-md {
        margin: 0 0 40px;
      }
      @media @max-xs {
        margin: 0 0 30px;
      }
      h2{
        margin: 0 0 20px;
        font-size: 60px;
        text-align: center;
        font-family: @en;
        color: @main;
        @media @max-bg {
          font-size: 50px;
        }
        @media @max-md {
          font-size: 35px;
        }
        @media @max-xs {
          font-size: 25px;
        }
      }
      p{
        text-align: center;
        font-size: 30px;
        color: #333;
        @media @max-bg {
          font-size: 25px;
        }
        @media @max-md {
          font-size: 22px;
        }
        @media @max-xs {
          font-size: 16px;
        }
      }
    }
    .flexbox{
      overflow: hidden;
      .box-row{
        margin: 0 -20px;
        display: flex;
        flex-wrap: wrap;
        @media @max-lg {
          display: block;
        }
      }
      .box-col{
        flex: 0 0 50%;
        min-width: 50%;
        padding: 0 20px;
      }
    }
    .show-location{
      @media @max-lg {
        display: none;
      }
      .lhead{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 54px;
        padding: 0 20px;
        background: @main;
        span{
          font-size: 16px;
          color: #fff;
          @media @max-bg {
            font-size: 14px;
          }
        }
      }
      .lbody{
        padding: 30px 20px;
        border: 1px solid #e1e1e1;
        border-top: 0;
        .markdown-text{
          margin: 0 0 32px;
          p{
            font-size: 14px;
            color: #666;
            line-height: 1.8;
          }
          .tit{
            color: @main;
          }
        }
        .send-resume{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 205px;
          height: 44px;
          background: @main2;
          color: #333;
          font-size: 14px;
          transition: .3s;
          &:hover{
            box-shadow: 0 2px 5px -2px #757575;
          }
        }
      }
    }
    .location-list{
      .item{
        margin: 0 0 10px;
        &:last-child{
          margin: 0;
        }
        .lhead{
          a{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 54px;
            padding: 0 20px;
            background: #ececec;
            transition: .3;
          }
          span{
            font-size: 16px;
            color: #333;
            transition: .3;
            @media @max-bg {
              font-size: 14px;
            }
          }
          .toggle{
            font-weight: bold;
            font-size: 24px;
          }
        }
        .lbody{
          display: none;
          padding: 30px 20px;
          border: 1px solid #e1e1e1;
          border-top: 0;
          @media @min-lg {
            display: none !important;
          }
          .app-info{
            margin: 0 0 15px;
            span{
              margin: 0 20px 0 0;
              color: @main;
              &:last-child{
                margin: 0;
              }
            }
            @media @min-sm {
              display: none;
            }
          }
          .markdown-text{
            margin: 0 0 32px;
            p{
              font-size: 14px;
              color: #666;
              line-height: 1.8;
            }
            .tit{
              color: @main;
            }
          }
          .send-resume{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 205px;
            height: 44px;
            background: @main2;
            color: #333;
            font-size: 14px;
          }
        }
        &:nth-child(even){
          .lhead{
            a{
              background: #fdfdfd;
            }
          }
        }
        &.on{
          @media @max-lg {
            .lhead{
              a{
                background: @main;
                span{
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
.case{
  &-section1{
    padding: 125px 0 60px;
    @media @max-bg {
      padding: 80px 0 60px;
    }
    @media @max-lg {
      padding: 60px 0;
    }
    @media @max-sm {
      padding: 40px 0;
    }
    @media @max-xs {
      padding: 30px 0 20px;
    }
    .flexbox{
      overflow: hidden;
      .box-row{
        margin: 0 -15px;
        display: flex;
        flex-wrap: wrap;
        @media @max-sm {
          margin: 0 -8px;
        }
      }
      .box-col{
        flex: 0 0 50%;
        min-width: 50%;
        padding: 0 15px;
        margin: 0 0 30px;
        @media @max-sm {
          padding: 0 8px;
          margin: 0 0 15px;
        }
      }
      .item{
        a{
          display: flex;
          width: 100%;
          height: 100%;
          @media @max-md {
            flex-direction: column-reverse;
          }
        }
        .info-box{
          overflow: hidden;
          flex: 1;
          padding: 30px;
          background: #f6f6f6;
          display: flex;
          flex-direction: column;
          justify-content: center;
          transition: .3s;
          @media @max-md {
            padding: 20px;
          }
          @media @max-xs {
            padding: 15px 10px;
          }
          h4{
            font-size: 18px;
            color: #333;
            border-bottom: 1px solid #c5c5c5;
            padding: 0 0 12px;
            margin: 0 0 30px;
            transition: .3s;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            @media @max-bg {
              margin: 0 0 15px;
            }
            @media @max-xs {
              font-size: 14px;
              border: 0;
              padding: 0;
              margin: 0;
            }
          }
          ul{
            margin: 0 0 75px;
            @media @max-bg {
              margin: 0 0 40px;
            }
            @media @max-md {
              margin: 0 0 20px;
            }
            @media @max-sm {
              display: none;
            }
            li{
              margin: 0 0 10px;
              font-size: 14px;
              color: #333;
              transition: .3s;
              @media @max-md {
                margin: 0 0 3px;
              }
              &:last-child{
                margin: 0;
              }
            }
          }
          .more{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 117px;
            height: 35px;
            background: @main;
            color: #fff;
            font-size: 14px;
            transition: .3s;
            @media @max-xs {
              display: none;
            }
          }
        }
        .img-box{
          flex: 0 0 56%;
          min-width: 56%;
          height: 435px;
          overflow: hidden;
          @media @max-bg {
            flex: 0 0 50%;
            min-width: 50%;
            height: 380px;
          }
          @media @max-md {
            flex: inherit;
            min-width: inherit;
            height: 220px;
          }
          @media @max-xs {
            height: 120px;
          }
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .3s;
          }
        }
        &:hover{
          .info-box{
            background: @main;
            h4{
              color: #fff;
            }
            ul{
              li{
                color: #fff;
              }
            }
            .more{
              background: @main2;
            }
          }
          .img-box{
            img{
              transform: scale(1.1);
            }
          }
        }
      }
    }
  }
}
.caseView{
  &-section1{
    .excellent-case{
      padding: 30px;
      border: 1px solid #e5e5e5;
      border-top: 0;
      margin: 0 0 45px;
      @media @max-bg {
        padding: 20px;
      }
      @media @max-xs {
        padding: 15px;
        margin: 0 0 30px;
      }
      .item{
        margin: 0 0 30px;
        &:last-child{
          margin: 0;
        }
        a{
          display: block;
          width: 100%;
          height: 100%;
        }
        .img-box{
          width: 100%;
          height: 200px;
          overflow: hidden;
          margin: 0 0 14px;
          @media @max-bg {
            height: 120px;
          }
          @media @max-sm {
            height: 200px;
          }
          @media @max-xs {
            height: 120px;
          }
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .3s;
          }
        }
        p{
          text-align: center;
          font-size: 16px;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          transition: .3s;
          @media @max-bg {
            font-size: 14px;
          }
        }
        &:hover{
          .img-box{
            img{
              transform: scale(1.1);
            }
          }
          p{
            color: @main;
          }
        }
      }
    }
    .flexbox .rightbox .time{
      margin: 0 0 35px;
    }
  }
  &-classify{
    width: 100%;
    margin: 0 0 55px;
    @media @max-md {
      display: flex;
      margin: 0 0 30px;
    }
    .tr{
      display: flex;
      @media @max-md {
        display: block;
        flex: 1;
      }
      .th{
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        flex: 1;
        background: @main;
        @media @max-md {
          height: 40px;
          font-size: 14px;
          font-weight: normal;
        }
        &:nth-child(even){
          background: #666;
        }
      }
      .td{
        font-size: 14px;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        flex: 1;
        background: #fff;
        &:nth-child(even){
          background: #f5f5f5;
        }
      }
    }
  }
}
.solution{
  &-section1{
    padding: 125px 0 0;
    margin: 0 0 105px;
    @media @max-bg {
      padding: 80px 0 0;
      margin: 0 0 80px;
    }
    @media @max-lg {
      padding: 60px 0 0;
      margin: 0 0 60px;
    }
    @media @max-sm {
      padding: 40px 0 0;
      margin: 0 0 40px;
    }
    @media @max-xs {
      padding: 30px 0 0;
    }
    h2{
      font-size: 72px;
      color: @main;
      font-family: @en;
      margin: 0 0 20px;
      line-height: 1;
      @media @max-bg {
        font-size: 50px;
      }
      @media @max-sm {
        margin: 0 0 15px;
      }
      @media @max-xs {
        font-size: 25px;
        text-align: center;
      }
    }
    .tit{
      font-size: 36px;
      color: #333;
      margin: 0 0 70px;
      @media @max-bg {
        font-size: 25px;
      }
      @media @max-sm {
        margin: 0 0 40px;
      }
      @media @max-xs {
        font-size: 18px;
        text-align: center;
        margin: 0 0 30px;
      }
    }
    .secbanner{
      position: relative;
      @media @max-sm {
        height: 280px;
        overflow: hidden;
      }
      @media @max-xs {
        height: 250px;
      }
      .itembanner{
        width: 100%;
        @media @max-sm {
          width: auto;
          height: 100%;
          // object-fit: cover;
        }
      }
      .info{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 0 0 0 95px;
        @media @max-lg {
          padding: 0 0 0 50px;
        }
        @media @max-sm {
          padding: 0 0 0 30px;
        }
      }
      h4{
        font-size: 60px;
        color: @main;
        font-weight: bold;
        margin: 0 0 3px;
        @media @max-lg {
          font-size: 40px;
        }
        @media @max-sm {
          font-size: 25px;
        }
      }
      .des{
        position: relative;
        font-size: 48px;
        color: #333;
        margin: 0 0 78px;
        @media @max-lg {
          font-size: 30px;
          margin: 0 0 50px;
        }
        @media @max-sm {
          font-size: 20px;
        }
        &:after{
          content: "";
          position: absolute;
          width: 56px;
          height: 4px;
          background: @main;
          left: 0;
          bottom: -40px;
          @media @max-lg {
            width: 40px;
            height: 3px;
            bottom: -25px;
          }
        }
      }
      .checksec{
        display: flex;
        margin: 0 0 45px;
        @media @max-lg {
          margin: 0 0 30px;
        }
        @media @max-md {
          margin: 0 0 15px;
        }
        .item{
          display: flex;
          align-items: center;
          margin: 0 20px 0 0;
          img{
            width: 23px;
            margin: 0 6px 0 0;
          }
          span{
            font-size: 20px;
            color: #333;
            @media @max-sm {
              font-size: 16px;
            }
          }
        }
      }
      .smdes{
        font-size: 14px;
        color: rgba(51,51,51,.5);
      }
    }
  }
  &-section2{
    margin: 0 0 80px;
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 30px;
    }
    .secflex{
      display: flex;
      justify-content: space-between;
      @media @max-md {
        flex-direction: column;
      }
      .leftbox{
        h2{
          font-size: 72px;
          color: @main;
          font-family: @en;
          margin: 0 0 20px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-sm {
            margin: 0 0 15px;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
          }
        }
        .tit{
          font-size: 36px;
          color: #333;
          margin: 0 0 70px;
          @media @max-bg {
            font-size: 25px;
          }
          @media @max-md {
            margin: 0 0 40px;
          }
          @media @max-xs {
            font-size: 18px;
            text-align: center;
            margin: 0 0 20px;
          }
        }
      }
      .rightbox{
        flex: 0 0 1014px;
        min-width: 1014px;
        @media @max-gg {
          flex: 0 0 800px;
          min-width: 800px;
        }
        @media @max-lg {
          flex: 0 0 540px;
          min-width: 540px;
        }
        @media @max-md {
          flex: inherit;
          min-width: inherit;
        }
        .des{
          font-size: 16px;
          color: #666;
          line-height: 1.8;
          margin: 0 0 110px;
          @media @max-gg {
            margin: 0 0 60px;
          }
          @media @max-lg {
            margin: 0 0 40px;
          }
          @media @max-xs {
            margin: 0 0 20px;
          }
        }
        .icoflexbox{
          overflow: hidden;
          .box-row{
            margin: 0 -27px;
            display: flex;
            flex-wrap: wrap;
            @media @max-gg {
              margin: 0 -15px;
            }
            @media @max-lg {
              margin: 0 -5px;
            }
          }
          .box-col{
            flex: 0 0 14.28%;
            min-width: 14.28%;
            padding: 0 27px;
            @media @max-gg {
              padding: 0 15px;
            }
            @media @max-lg {
              padding: 0 5px;
            }
            @media @max-xs {
              flex: 0 0 25%;
              min-width: 25%;
              margin: 0 0 15px;
            }
          }
          .itemico{
            width: 100%;
            height: 85px;
            border-radius: 10px;
            border: 1px solid #c8c8c8;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 0 12px;
            @media @max-lg {
              height: 65px;
              margin: 0 0 8px;
            }
            img{
              @media @max-gg {
                width: 40%;
              }
            }
          }
          .tit{
            font-size: 18px;
            color: #333;
            text-align: center;
            @media @max-gg {
              font-size: 16px;
            }
            @media @max-xs {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  &-section3{
    margin: 0 0 90px;
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 30px;
    }
    .flexbox{
      overflow: hidden;
      .box-row{
        margin: 0 -6px;
        display: flex;
        flex-wrap: wrap;
      }
      .box-col{
        flex: 0 0 50%;
        min-width: 50%;
        padding: 0 6px;
        margin: 0;
      }
      .out-col{
        margin: 0 0 12px;
        @media @max-xs {
          flex: 0 0 100%;
          min-width: 100%;
        }
      }
      .item{
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: .3s;
        }
        &:hover{
          img{
            transform: scale(1.1);
          }
        }
      }
    }
  }
  &-section4{
    margin: 0 0 80px;
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 30px;
    }
    > .container{
      position: relative;
    }
    .head{
      position: absolute;
      left: 0;
      top: 0;
      padding: 75px 38px;
      background: @main;
      @media @max-gg {
        padding: 40px 20px;
      }
      @media @max-lg {
        position: static;
        background: #fff;
        padding: 0;
      }
    }
    h2{
      font-size: 60px;
      color: #fff;
      font-family: @en;
      margin: 0 0 20px;
      line-height: 1;
      @media @max-gg {
        font-size: 45px;
      }
      @media @max-lg {
        color: @main;
        text-align: center;
      }
      @media @max-sm {
        margin: 0 0 15px;
      }
      @media @max-xs {
        font-size: 25px;
        text-align: center;
      }
    }
    .tit{
      font-size: 30px;
      color: #fff;
      // margin: 0 0 70px;
      @media @max-gg {
        font-size: 25px;
      }
      @media @max-lg {
        color: #333;
        margin: 0 0 40px;
        text-align: center;
      }
      @media @max-xs {
        font-size: 18px;
        text-align: center;
        margin: 0 0 30px;
      }
    }
    .secprocess{
      margin: 0 0 0 auto;
      width: 1290px;
      @media @max-gg {
        width: 1100px;
      }
      @media @max-lg {
        width: 100%;
      }
      img{
        width: 100%;
      }
    }
  }
  &-section5{
    &-tabs{
      display: flex;
      a{
        flex: 1;
        background: #f2f2f2;
        transition: .3s;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #333;
        @media @max-lg {
          font-size: 20px;
        }
        @media @max-md {
          font-size: 16px;
          height: 50px;
        }
        @media @max-sm {
          flex: auto;
          font-size: 14px;
        }
        @media @max-xs {
          font-size: 12px;
          height: 40px;
        }
        &.active{
          background: @main;
          color: #fff;
        }
      }
    }
    &-swiper{
      .item{
        display: flex;
        align-items: center;
        padding: 75px 0;
        @media @max-lg {
          padding: 60px 0;
        }
        @media @max-sm {
          padding: 30px 0;
        }
        @media @max-md {
          flex-direction: column;
        }
        .img-box{
          flex: 1;
          @media @max-md {
            max-width: 550px;
            flex: inherit;
            margin: 0 0 30px;
          }
          img{
            width: 100%;
          }
        }
        .info{
          flex: 1;
          padding: 0 0 0 80px;
          @media @max-lg {
            padding: 0 0 0 40px;
          }
          @media @max-md {
            padding: 0;
          }
          h2{
            font-size: 60px;
            color: @main;
            font-family: @en;
            margin: 0 0 28px;
            line-height: 1;
            @media @max-bg {
              font-size: 50px;
              margin: 0 0 20px;
            }
            @media @max-md {
              margin: 0 0 15px;
              font-size: 40px;
              text-align: center;
            }
            @media @max-xs {
              font-size: 25px;
            }
          }
          .tit{
            font-size: 30px;
            color: #333;
            margin: 0 0 70px;
            @media @max-bg {
              font-size: 25px;
              margin: 0 0 30px;
            }
            @media @max-md {
              font-size: 20px;
              text-align: center;
              margin: 0 0 20px;
            }
            @media @max-xs {
              font-size: 18px;
              margin: 0 0 20px;
            }
          }
          .des{
            font-size: 14px;
            color: #666;
            line-height: 1.8;
            @media @max-md {
              text-align: center;
            }
          }
        }
      }
    }
  }
  &-section6{
    padding: 95px 0;
    margin: 0 0 105px;
    background: #fbfbfb;
    @media @max-bg {
      padding: 80px 0;
      margin: 0 0 80px;
    }
    @media @max-lg {
      padding: 60px 0;
      margin: 0 0 60px;
    }
    @media @max-sm {
      padding: 40px 0;
      margin: 0 0 40px;
    }
    @media @max-xs {
      padding: 30px 0;
    }
    .secflexbox{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .leftbox{
        flex: 1;
        max-width: 935px;
        @media @max-bg {
          max-width: 810px;
        }
        @media @max-lg {
          max-width: inherit;
        }
        h2{
          font-size: 60px;
          color: @main;
          font-family: @en;
          margin: 0 0 28px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
            margin: 0 0 20px;
          }
          @media @max-md {
            margin: 0 0 15px;
            font-size: 40px;
            text-align: center;
          }
          @media @max-xs {
            font-size: 25px;
          }
        }
        .tit{
          font-size: 30px;
          color: #333;
          margin: 0 0 90px;
          @media @max-bg {
            font-size: 25px;
            margin: 0 0 60px;
          }
          @media @max-md {
            font-size: 20px;
            text-align: center;
            margin: 0 0 40px;
          }
          @media @max-xs {
            font-size: 18px;
            margin: 0 0 30px;
          }
        }
        .flexbox{
          overflow: hidden;
          .box-row{
            margin: 0 -33px;
            display: flex;
            flex-wrap: wrap;
            @media @max-gg {
              margin: 0 -15px;
            }
          }
          .box-col{
            flex: 0 0 50%;
            min-width: 50%;
            padding: 0 33px;
            margin: 0 0 60px;
            @media @max-gg {
              padding: 0 15px;
              margin: 0 0 30px;
            }
            @media @max-xs {
              flex: 0 0 100%;
              min-width: 100%;
            }
          }
          .item{
            display: flex;
            .ico{
              flex: 0 0 73px;
              min-width: 73px;
              height: 64px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 10px;
              border: 1px solid #c8c8c8;
              margin: 0 24px 0 0;
              @media @max-xs {
                margin: 0 15px 0 0;
              }
            }
            .info{
              h4{
                font-size: 18px;
                color: @main;
                margin: 0 0 16px;
                @media @max-xs {
                  font-size: 16px;
                  margin: 0 0 12px;
                }
              }
              .des{
                font-size: 14px;
                color: #666;
                line-height: 1.8;
                @media @max-gg {
                  line-height: 1.5;
                }
              }
            }
          }
        }
      }
      .rightbox{
        flex: 0 0 554px;
        min-width: 554px;
        @media @max-gg {
          flex: 0 0 390px;
          min-width: 390px;
          margin: 0 0 0 40px;
        }
        @media @max-bg {
          flex: 0 0 300px;
          min-width: 300px;
          height: 470px;
          margin: 0;
        }
        @media @max-lg {
          display: none;
        }
        img{
          width: 100%;
          @media @max-bg {
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
  &-section7{
    .head{
      border: 0;
      padding: 0;
      margin: 0 0 40px;
      @media @max-sm {
        margin: 0 0 30px;
      }
    }
    .parameter-box{
      margin: 0 0 100px;
      @media @max-lg {
        margin: 0 0 80px;
        height: 260px;
        padding: 0 0 15px;
        overflow: auto;
        -webkit-overflow-scrolling:touch;
      }
      &.app-view{
        @media @max-lg {
          height: 225px;
        }
      }
      @media @max-md {
        margin: 0 0 60px;
      }
      @media @max-sm {
        margin: 0 0 30px;
      }
    }
  }
}
.about{
  &-appoint{
    position: absolute;
    top: 0;
    left: 0;
  }
  &-section1{
    position: relative;
    .about-appoint{
      @media @max-xs {
        top: -60px;
      }
    }
    .flexbox{
      @media @max-sm {
        flex-direction: column;
      }
    }
    .img-box{
      @media @max-sm {
        margin: 0 0 30px;
      }
      @media @max-xs {
        margin: 0 0 15px;
      }
    }
    .rightbox{
      .group{
        margin: 0 0 40px;
        @media @max-xs {
          margin: 0 0 20px;
        }
        .smtit{
          font-size: 20px;
          color: @main;
          margin: 0 0 6px;
          @media @max-xs {
            font-size: 16px;
          }
        }
        .text{
          font-size: 14px;
          color: #5f5f5f;
          line-height: 1.8;
        }
        &:last-child{
          margin: 0;
          @media @max-xs {
            margin: 0 0 20px;
          }
        }
      }
    }
  }
  &-section2{
    margin: 0 0 110px;
    @media @max-bg {
      margin: 0 0 80px;
    }
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 40px;
    }
    @media @max-xs {
      margin: 0 0 30px;
    }
    .flexbox{
      display: flex;
      align-items: center;
      @media @max-sm {
        flex-direction: column-reverse;
      }
      .infobox{
        position: relative;
        z-index: 1;
        padding: 0 170px 0 0;
        @media @max-bg {
          padding: 0 80px 0 0;
        }
        @media @max-lg {
          padding: 0 60px 0 0;
        }
        @media @max-md {
          padding: 0 40px 0 0;
        }
        @media @max-sm {
          padding: 0;
        }
        h2{
          font-size: 60px;
          color: @main;
          font-family: @en;
          margin: 0 0 15px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
          }
        }
        .tit{
          position: relative;
          font-size: 30px;
          color: #333;
          margin: 0 0 70px;
          @media @max-xs {
            margin: 0 0 30px;
          }
          &:after{
            content: "";
            position: absolute;
            width: 40px;
            height: 2px;
            background: @main;
            left: 0;
            bottom: -35px;
            @media @max-xs {
              right: 0;
              margin: auto;
              bottom: -15px;
            }
          }
          @media @max-bg {
            font-size: 25px;
          }
          @media @max-xs {
            font-size: 18px;
            text-align: center;
          }
        }
        .des{
          font-size: 14px;
          color: #666;
          line-height: 1.8;
          @media @max-xs {
            text-align: center;
          }
        }
      }
      .img-box{
        position: relative;
        flex: 0 0 50%;
        min-width: 50%;
        height: 420px;
        @media @max-sm {
          height: 300px;
          margin: 0 0 30px;
        }
        @media @max-xs {
          height: 200px;
          margin: 0 0 15px;
        }
        &:before{
          content: "";
          position: absolute;
          right: 100%;
          width: 440px;
          height: 100%;
          background: #f7f7f7;
          @media @max-md {
            display: none;
          }
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  &-section3{
    position: relative;
    margin: 0 0 150px;
    @media @max-bg {
      margin: 0 0 80px;
    }
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 40px;
    }
    @media @max-xs {
      margin: 0 0 30px;
    }
    .about-appoint{
      top: -110px;
      @media @max-xs {
        top: -100px;
      }
    }
    &-swiper{
      .item{
        position: relative;
        height: 620px;
        @media @max-bg {
          height: 490px;
        }
        @media @max-lg {
          height: 420px;
        }
        @media @max-md {
          height: 360px;
        }
        a{
          display: block;
          width: 100%;
          height: 100%;
        }
        .itemimg{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .default-mask{
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 60px;
          left: 0;
          bottom: 0;
          background: rgba(0,0,0,.7);
          padding: 0 38px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: .3s;
          @media @max-lg {
            padding: 0 20px;
          }
          @media @max-md {
            height: 50px;
            padding: 0 15px;
          }
          .name{
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            @media @max-lg {
              font-size: 18px;
            }
            @media @max-md {
              font-size: 14px;
            }
          }
          .loc{
            font-size: 16px;
            color: #fff;
            @media @max-md {
              font-size: 14px;
            }
          }
        }
        .hover-mask{
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background: rgba(49,175,154,.8);
          padding: 0 60px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          opacity: 0;
          transform: translateY(20px);
          transition: .3s;
          @media @max-lg {
            padding: 0 20px;
          }
          @media @max-md {
            padding: 0 15px;
          }
          h4{
            font-size: 44px;
            color: #fff;
            margin: 0 0 5px;
            font-family: @en;
            @media @max-lg {
              font-size: 30px;
            }
          }
          .loc{
            margin: 0 0 78px;
            font-size: 26px;
            color: #fff;
            @media @max-bg {
              margin: 0 0 40px;
            }
            @media @max-lg {
              font-size: 20px;
            }
            @media @max-md {
              margin: 0 0 20px;
            }
          }
          .name{
            font-size: 20px;
            color: #fff;
            margin: 0 0 24px;
            @media @max-lg {
              font-size: 18px;
            }
            @media @max-md {
              margin: 0 0 20px;
            }
          }
          ul{
            li{
              font-size: 14px;
              color: #fff;
              margin: 0 0 6px;
              @media @max-md {
                font-size: 12px;
              }
              &:last-child{
                margin: 0;
              }
            }
          }
        }
        &:hover{
          @media @min-sm {
            .default-mask{
              opacity: 0;
              transform: translateY(20px);
            }
            .hover-mask{
              opacity: 1;
              transform: translateY(0);
            }
          }
        }
      }
    }
    &-pagination{
      margin: 15px 0 0;
      position: static;
      text-align: center;
      .swiper-pagination-bullet{
        margin: 0 4px;
        &-active{
          background: @main;
        }
      }
    }
  }
  &-section4{
    position: relative;
    margin: 0 0 100px;
    @media @max-bg {
      margin: 0 0 80px;
    }
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 40px;
    }
    @media @max-xs {
      margin: 0 0 30px;
    }
    .about-appoint{
      top: -150px;
      @media @max-xs {
        top: -80px;
      }
    }
    .flexbox{
      display: flex;
      align-items: center;
      background: #f8f8f8;
      @media @max-sm {
        flex-direction: column;
        align-items: flex-start;
        background: transparent;
      }
      .img-box{
        flex: 0 0 50%;
        min-width: 50%;
        height: 520px;
        @media @max-lg {
          height: 375px;
        }
        @media @max-sm {
          margin: 0 0 30px;
        }
        @media @max-xs {
          height: 260px;
          margin: 0 0 15px;
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .infobox{
        padding: 0 0 0 80px;
        @media @max-lg {
          padding: 0 30px 0 40px;
        }
        @media @max-sm {
          padding: 0;
          width: 100%;
        }
        h2{
          font-size: 60px;
          color: @main;
          font-family: @en;
          margin: 0 0 15px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
          }
        }
        .tit{
          position: relative;
          font-size: 30px;
          color: #333;
          margin: 0 0 45px;
          @media @max-bg {
            font-size: 25px;
          }
          @media @max-lg {
            margin: 0 0 30px;
          }
          @media @max-xs {
            margin: 0 0 10px;
            font-size: 18px;
            text-align: center;
          }
        }
        .des{
          color: #333;
          font-size: 14px;
          line-height: 2;
          @media @max-md {
            font-size: 16px;
          }
          @media @max-xs {
            font-size: 14px;
          }
          span{
            font-size: 18px;
            color: @main;
            font-weight: bold;
            @media @max-xs {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
  &-section5{
    margin: 0 0 100px;
    @media @max-bg {
      margin: 0 0 80px;
    }
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 40px;
    }
    @media @max-xs {
      margin: 0 0 30px;
    }
    .flexbox{
      display: flex;
      align-items: center;
      @media @max-sm {
        flex-direction: column-reverse;
      }
      .leftbox{
        padding: 0 70px 0 0;
        @media @max-lg {
          padding: 0 40px 0 0;
        }
        @media @max-sm {
          padding: 0;
        }
        .group{
          margin: 0 0 60px;
          @media @max-lg {
            margin: 0 0 30px;
          }
          @media @max-sm {
            text-align: center;
            margin: 0 0 20px;
          }
          h4{
            font-size: 30px;
            color: #333;
            margin: 0 0 22px;
            @media @max-lg {
              font-size: 20px;
              margin: 0 0 10px;
            }
            @media @max-xs {
              font-size: 16px;
            }
          }
          p{
            font-size: 14px;
            color: #666;
            line-height: 2;
            @media @max-xs {
              line-height: 1.6
            }
          }
        }
        .group2{
          margin: 0 0 40px;
          @media @max-lg {
            margin: 0 0 30px;
          }
          @media @max-sm {
            text-align: center;
            margin: 0 0 20px;
          }
          &:last-child{
            margin: 0;
          }
          h4{
            font-size: 18px;
            color: #fff;
            display: inline-block;
            border-radius: 30px;
            background: @main;
            margin: 0 0 12px;
            padding: 8px 18px;
            @media @max-lg {
              margin: 0 0 10px;
            }
            @media @max-xs {
              font-size: 16px;
            }
          }
          p{
            font-size: 14px;
            color: #666;
            line-height: 2;
            @media @max-xs {
              line-height: 1.6
            }
          }
        }
      }
      .rightbox{
        flex: 0 0 50%;
        min-width: 50%;
        height: 580px;
        @media @max-sm {
          height: 360px;
          margin: 0 0 30px;
        }
        @media @max-xs {
          height: 260px;
          margin: 0 0 15px;
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  &-section6{
    position: relative;
    background: #f8f8f8;
    padding: 100px 0;
    margin: 0 0 100px;
    @media @max-bg {
      padding: 80px 0;
      margin: 0 0 80px;
    }
    @media @max-lg {
      padding: 60px 0;
      margin: 0 0 60px;
    }
    @media @max-sm {
      padding: 40px 0;
      margin: 0 0 40px;
    }
    @media @max-xs {
      padding: 30px 0;
      margin: 0 0 30px;
    }
    .about-appoint{
      @media @max-xs {
        top: -60px;
      }
    }
    .head{
      h2{
        font-size: 48px;
        text-align: center;
        font-family: @en;
        color: @main;
        margin: 0 0 20px;
        @media @max-xs {
          font-size: 25px;
          margin: 0 0 5px;
        }
      }
      .tit{
        font-size: 30px;
        color: #333;
        text-align: center;
        margin: 0 0 125px;
        @media @max-bg {
          margin: 0 0 80px;
        }
        @media @max-lg {
          margin: 0 0 60px;
        }
        @media @max-sm {
          margin: 0 0 40px;
        }
        @media @max-xs {
          margin: 0 0 30px;
          font-size: 18px;
        }
      }
    }
    .swiper-box{
      position: relative;
      &:after{
        content: "";
        position: absolute;
        width: 100%;
        height: 4px;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: @main;
        @media @max-sm {
          top: auto;
          bottom: 6px;
        }
      }
    }
    &-swiper{
      @media @max-sm {
        margin: 0 30px;
      }
      .swiper-slide{
        .item{
          position: relative;
          display: flex;
          height: 370px;
          @media @max-sm {
            height: auto;
          }
          .ic-left{
            position: relative;
            flex: 0 0 17px;
            @media @max-sm {
              padding: 0 0 25px;
            }
            i{
              position: absolute;
              display: block;
              width: 1px;
              height: 185px;
              background: @main;
              left: 0;
              right: 0;
              margin: auto;
              @media @max-sm {
                height: 100%;
              }
            }
            &:before{
              content: "";
              position: absolute;
              width: 17px;
              height: 17px;
              background: @main;
              border-radius: 50%;
              left: 0;
              top: 0;
              bottom: 0;
              margin: auto;
              @media @max-sm {
                top: auto;
              }
            }
          }
          .ic-right{
            position: absolute;
            width: 415px;
            height: 100%;
            padding: 0 0 0 20px;
            display: flex;
            @media @max-sm {
              position: static;
              padding: 0 0 25px;
              width: 100%;
            }
            .inner{
              display: flex;
              @media @max-xs {
                flex-direction: column;
                align-items: flex-start;
              }
            }
            .img-box{
              flex: 0 0 164px;
              min-width: 164px;
              height: 89px;
              overflow: hidden;
              margin: 0 18px 0 0;
              @media @max-xs {
                flex: inherit;
                min-width: inherit;
                margin: 0 0 10px;
              }
              img{
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .info{
              .time{
                font-size: 30px;
                color: @main;
                font-family: @en;
                margin: 0 0 10px;
                @media @max-xs {
                  font-size: 24px;
                  margin: 0 0 8px;
                }
              }
              .des{
                line-height: 1.8;
                font-size: 14px;
                color: #5f5f5f;
              }
            }
          }
        }
        &:nth-child(even){
          .item{
            .ic-left{
              i{
                bottom: 0;
                @media @max-sm {
                  top: 0;
                  bottom: auto;
                }
              }
            }
            .ic-right{
              .inner{
                align-items: flex-end;
                @media @max-sm {
                  align-items: flex-start;
                }
              }
            }
          }
        }
        &:last-child{
          .item{
            .ic-right{
              width: 100%;
            }
          }
        }
      }
    }
    .swiper-button-prev, .swiper-button-next{
      left: 50px;
      cursor: pointer;
      width: 24px;
      height: 42px;
      outline: none;
      -webkit-user-select: none;
      user-select: none;
      background: transparent;
      transition: .3s;
      @media @max-sm {
        left: 15px;
        width: 15px;
        height: 29px;
      }
      &:before{
        content: "";
        display: block;
        position: relative;
        z-index: 1;
        width: 24px;
        height: 42px;
        background: url(../images/left.png) center / contain no-repeat;
        @media @max-sm {
          width: 15px;
          height: 29px;
        }
      }
      &:after{
        content: "";
        position: absolute;
        width: 12px;
        height: 43px;
        top: 0;
        bottom: 0;
        left: -8px;
        margin: auto;
        transition: .3s;
        @media @max-xs {
          width: 8px;
          height: 30px;
        }
      }
      &:hover{
        &:before{
          background: url(../images/left-h.png) center / contain no-repeat;
        }
        &:after{
          background: @main2;
        }
      }
    }
    .swiper-button-next{
      left: auto;
      right: 50px;
      @media @max-sm {
        right: 15px;
      }
      &:before{
        content: "";
        display: block;
        background: url(../images/right.png) center / contain no-repeat;
      }
      &:after{
        left: auto;
        right: -8px;
      }
      &:hover{
        &:before{
          background: url(../images/right-h.png) center / contain no-repeat;
        }
      }
    }
  }
  &-section7{
    position: relative;
    overflow: hidden;
    margin: 0 0 115px;
    @media @max-bg {
      margin: 0 0 80px;
    }
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 40px;
    }
    @media @max-xs {
      margin: 0 0 30px;
    }
    .about-appoint{
      top: -100px;
      @media @max-xs {
        top: -80px;
      }
    }
    .flexbox{
      display: flex;
      align-items: center;
      justify-content: space-between;
      @media @max-lg {
        flex-direction: column;
      }
      .leftbox{
        h2{
          font-size: 72px;
          color: @main;
          font-family: @en;
          margin: 0 0 15px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-lg {
            text-align: center;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
            margin: 0 0 5px;
          }
        }
        .tit{
          font-size: 36px;
          color: #333;
          @media @max-bg {
            font-size: 25px;
          }
          @media @max-lg {
            text-align: center;
            margin: 0 0 40px;
          }
          @media @max-sm {
            margin: 0 0 30px;
          }
          @media @max-xs {
            font-size: 18px;
            text-align: center;
          }
        }
      }
      .rightbox{
        background: @main;
        @media @max-lg {
          width: 100%;
        }
        .swiper-box{
          position: relative;
          width: 1055px;
          padding: 90px 0 90px 100px;
          @media @max-gg {
            width: 830px;
          }
          @media @max-bg {
            padding: 60px 0 60px 80px;
          }
          @media @max-lg {
            width: 100%;
            padding: 60px 0;
          }
          @media @max-xs {
            padding: 30px 0;
          }
          &:before{
            @media @max-lg {
              content: "";
              position: absolute;
              right: 100%;
              top: 0;
              width: 10000vh;
              height: 100%;
              background: @main;
            }
          }
          &:after{
            content: "";
            position: absolute;
            left: 100%;
            top: 0;
            width: 10000vh;
            height: 100%;
            background: @main;
          }
        }
      }
    }
    &-swiper{
      .item{
        .img-box{
          background: #fff;
          margin: 0 0 10px;
          padding: 35px 40px;
          @media @max-bg {
            padding: 30px;
          }
          @media @max-xs {
            padding: 15px;
          }
          img{
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: .3s;
          }
          &:hover{
            img{
              transform: scale(1.1);
            }
          }
        }
        p{
          text-align: center;
          font-size: 16px;
          color: #fff;
        }
      }
    }
    &-pagination{
      margin: 40px 0 0;
      display: none;
      position: static;
      text-align: center;
      @media @max-lg {
        display: block;
      }
      @media @max-sm {
        margin: 30px 0 0;
      }
      @media @max-xs {
        margin: 15px 0 0;
      }
      .swiper-pagination-bullet{
        position: static;
        width: 10px;
        height: 10px;
        background: #fafafa;
        transition: .3s;
        margin: 0 5px;
        @media @max-xs {
          width: 8px;
          height: 8px;
          margin: 0 4px;
        }
        &-active{
          background: #fff;
        }
      }
    }
    .prev-next{
      position: absolute;
      left: -40px;
      top: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      @media @max-lg {
        display: none;
      }
      .swiper-button-prev, .swiper-button-next{
        width: 107px;
        height: 60px;
        background: transparent;
        margin: 0;
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        -webkit-user-select: none;
        user-select: none;
        transition: .3s;
        @media @max-bg {
          width: 95px;
          height: 55px;
        }
        &:hover{
          background: @main2;
        }
        img{
          margin: 0 0 0 15px;
        }
      }
    }
  }
  &-section8{
    position: relative;
    margin: 0 0 125px;
    @media @max-bg {
      margin: 0 0 80px;
    }
    @media @max-lg {
      margin: 0 0 60px;
    }
    @media @max-sm {
      margin: 0 0 40px;
    }
    @media @max-xs {
      margin: 0 0 30px;
    }
    .about-appoint{
      top: -115px;
      @media @max-xs {
        top: -80px;
      }
    }
    .flexbox{
      display: flex;
      align-items: center;
      @media @max-sm {
        flex-direction: column;
      }
      .leftbox{
        flex: 0 0 50%;
        min-width: 50%;
        height: 576px;
        @media @max-bg {
          height: 410px;
        }
        @media @max-sm {
          height: 350px;
          margin: 0 0 30px;
        }
        @media @max-xs {
          height: 250px;
          margin: 0 0 15px;
        }
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .rightbox{
        padding: 0 0 0 80px;
        @media @max-bg {
          padding: 0 0 0 40px;
        }
        @media @max-sm {
          padding: 0;
        }
        h2{
          font-size: 60px;
          color: @main;
          font-family: @en;
          margin: 0 0 15px;
          line-height: 1;
          @media @max-bg {
            font-size: 50px;
          }
          @media @max-xs {
            font-size: 25px;
            text-align: center;
          }
        }
        .tit{
          position: relative;
          font-size: 30px;
          color: #333;
          margin: 0 0 45px;
          @media @max-bg {
            font-size: 25px;
          }
          @media @max-lg {
            margin: 0 0 30px;
          }
          @media @max-xs {
            margin: 0 0 10px;
            font-size: 18px;
            text-align: center;
          }
        }
        .cflexbox{
          overflow: hidden;
          .box-row{
            margin: 0 -4px;
            display: flex;
            flex-wrap: wrap;
          }
          .box-col{
            flex: 0 0 33.33%;
            min-width: 33.33%;
            padding: 0 4px;
            margin: 0 0 8px;
            @media @max-md {
              flex: 0 0 50%;
              min-width: 50%;
            }
            @media @max-sm {
              flex: 0 0 33.33%;
              min-width: 33.33%;
            }
            @media @max-xs {
              flex: 0 0 50%;
              min-width: 50%;
            }
          }
          .item{
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
              object-fit: contain;
              transition: .3s;
            }
            &:hover{
              img{
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }
}