body,html{
  font-family:"PingFang SC","Source Han Sans CN Light","Source Han Sans CN","Microsoft YaHei","Helvetica Neue", Helvetica,   "Hiragino Sans GB",sans-serif;
}
@font-face {
  font-family: 'beba';
  src: url("fonts/BEBAS.eot");
  src: url("fonts/BEBAS.eot") format("embedded-opentype"), url("fonts/BEBAS.woff") format("woff"), url("fonts/BEBAS.ttf") format("truetype"), url("fonts/BEBAS.svg#BEBAS") format("svg");
}
@font-face {
  font-family: 'din';
  src: url("fonts/DIN-Regular.eot");
  src: url("fonts/DIN-Regular.eot") format("embedded-opentype"), url("fonts/DIN-Regular.woff") format("woff"), url("fonts/DIN-Regular.ttf") format("truetype"), url("fonts/DIN-Regular.svg#DIN-Regular") format("svg");
}
.din{
  font-family: "din";
}
.ft80{
  font-size: 2rem;
}
.ft26{
  font-size: (26rem/40);
}
.ft28{
  font-size: (28rem/40);
}
.secwenk{
    opacity: 0;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: translateY(100px) scale(1.1);
    transform: translateY(100px) scale(1.1);
    transition: opacity 0.8s linear .1s, -webkit-filter 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s, -webkit-transform 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: opacity 0.8s linear .1s, filter 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s, transform 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: opacity 0.8s linear .1s, filter 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s, transform 1.3s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-filter 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s, -webkit-transform 1.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.secwen{
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translateY(60px);
    transition: .8s ease-in-out .4s;
}
.right-fixedbox .list .items-bot{
  background:#ffffff;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.secwen.nleft{
  transform: translateY(0);
  transform: translateX(-50px);
}
.secwen.animate{
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translateY(0);
    transition: .8s ease-in-out .4s;
}
.secwen.nleft.animate{
  transform: translateY(0);
  transform: translateX(0);
}

.secwenk.animate{
    opacity: 1;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
}
.animate.add1{
  transition-delay: .1s;
}
.animate.add2{
  transition-delay: .2s;
}
.animate.add3{
  transition-delay: .3s;
}
.animate.add4{
  transition-delay: .4s;
}
.animate.add5{
  transition-delay: .5s;
}
.animate.add6{
  transition-delay: .6s;
}
.animate.add7{
  transition-delay: .7s;
}
.animate.add8{
  transition-delay: .8s;
}
.animate.add9{
  transition-delay: .9s;
}
.animate.add10{
  transition-delay: 1.0s;
}
.animate.add11{
  transition-delay: 1.1s;
}
img{
  max-width: 100%;
}
 /*touch-acion:  pan-y ;*/
body{
  font-size: 14px;
  color:#666666;
  line-height: 1.7;
}

@mixin center($width){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $width;
  overflow: hidden;
}
@mixin absolute0{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
}
.pd100{
  padding:0 (100rem/40);
}

.mbox{
  display: none;
}
.pcbox{
  display: block;
}

.web-header .web-nav{
    transition:.5s ease-in-out;
  &.active{
    transform: translateY(-100%);
    transition:.5s ease-in-out;
  }
}
.web-header .s-box,
.web-header .web-nav{
  font-size: 0;

}

.about-bodybox{
  .web-header .header{
    &.fixed{
      position: relative;
    }
  }
  .m-header .w-header.fixed{
      position: relative;
  }
}
.web-header .header{
  &.fixed{
    position: fixed;
    width: 100%;
    top:0;
    left:0;
    background:#ffffff;
  }
}

.con-banner{
  position: relative;
  padding-top: (630rem/40);
  transition:1s cubic-bezier(0.25,0.46,0.45,0.94);
  overflow: hidden;
  .bgimgs{
    height: (630rem/40);
    position: absolute;
    width: 100%;
    left:0;
    top:0;
  }
  &.on{
    padding-top: 0;
    transition:1.6s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  &.casedetails-banner{
    padding-top: 0;
  }
  .words{
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    .tit{
      line-height: 1;
      padding-top: (225rem/40);
      .cn{
         font-size: (64rem/40);
         color:#333333;
         font-weight: bold;
      }
      .en{
        font-size: (27rem/40);
        color:#999999;
        margin-top: (15rem/40);
      }
    }
  }
}

.tittipbox{
  background:#fff;
  height: 100%;
}
.cases-box{
  padding-top: 45px;
  margin-top: -45px;
  padding-bottom: (100rem/40);
  box-sizing: border-box;
  background:#f9f9f9;
}
.con-tittip{
  height: 130px;
  margin-top: -65px;
  position: relative;
  z-index: 2;
   line-height: 65px;
   .right,.left{
   }
   .tittipbox {
    border-radius: 6px;
    overflow: hidden;
   }
  &.active{
      line-height: 130px;
  }
  &.on{
    line-height: 90px;
    height: 90px;
    margin-top: -45px;
  }
  .tittip-top{
    font-size: 0;
    padding:0 .75rem;
    .back{
      display: block;
      font-size: 14px;
      color:#999999;
      padding-right: 38px;
      box-sizing: border-box;
      position: relative;
      &:after{
        position:absolute;
        content:"";
        width: 15px;
        height: 15px;
        background:url(../img/c11.png) no-repeat center;
        background-size: 100%;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
      }
      &:hover{
        &:after{
        background:url(../img/c12.png) no-repeat center;
        background-size: 100%;
        }
      }
    }

    .span{
      width: 25px;
      height: 30px;
      background: url(../img/a4.png) no-repeat center;
      background-size: 100%;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      &.active{
      background: url(../img/a5.png) no-repeat center;
      background-size: 100%;
      }
    }
    a{
      color:#999999;
      font-size: 14px;
      transition:.5s ease-in-out;
      display: inline-block;
      vertical-align: middle;
      &:hover,&.active{
        color:#aacd06;
        transition:.5s ease-in-out;
      }
      &:nth-child(n+2){
        padding-left: 25px;
        margin-left: 25px;
        position: relative;
        &:after{
          width:10px;
          height: 10px;
          content:"";
          position: absolute;
          background:url(../img/a3.png) no-repeat center;
          background-size: 100%;
          left:0;
          top:0;
          bottom:0;
          margin: auto;
        }
      }
    }
    .home{
      width: 18px;
      height: 18px;
      display: inline-block;
      background:url(../img/a2.png) no-repeat center;
      background-size: 100%;
      &:hover{
          background:url(../img/a6.png) no-repeat center;
          background-size: 100%;
      }
    }

  }
  .tittip-bot{
    border-top: 1px solid #f2f2f2;
    .items{
      display: block;
      text-align: center;
      font-size: 16px;
      color:#666666;
      position: relative;
      transition: .5s ease-in-out;
      &:before{
        content:"";
        position: absolute;
        left:0;
        right:0;
        bottom:2px;
        width:0;
        height: 2px;
        margin: auto;
        background:#aacd06;
        transition:.5s ease-in-out;
      }
      &:hover,&.active{
        color:#aacd06;
        transition:.5s ease-in-out;
        &:before{
          width:100%;
          transition:.5s ease-in-out;
        }
      }
    }
  }
}
.con-tit{
  line-height: 1;
  color:#333333;
  .en{
    font-family: Tahoma;
    font-size: (50rem/40);
  }
  .cn{
     font-size: .75rem;
     font-weight: bold;
     margin-top: .5rem;
  }
}

.about-profile{
  background:#f9f9f9;
  margin-top: -65px;
  padding-top: 65px;
  .profile-top{
    padding-top: (85rem/40);
    position: relative;
    border-bottom: 1px solid #e8e8e8;
    .p{
      margin-top: (120rem/40);
      font-size: 16px;
      color:#333333;
      line-height: 40px;
      height: 240px;
      span{
        font-size: .9rem;
      }
    }
    .words{
      width: 725px;
      padding-bottom: 130px;
      position: relative;
      z-index: 3;
    }
    .images{
      position: absolute;
      right: 0;
      bottom: (0);
      width: (1120rem/40);
    }

  }
  .profile-bot{
    padding:(100rem/40) 0;
    .items{
      line-height: 1.2;
      color:#333333;
      .tit,.p{
         font-size: 16px;
         line-height: 20px;
         height: 20px;
      }
      .en{
        font-size: (50rem/40);
        line-height: (60rem/40);
        margin-top: .5rem;
        margin-bottom: .25rem;
      }


    }
  }
}
.jbox{
   .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background:#aacd06;
   }
   .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{
    background:#aacd06;
   }
   .mCSB_scrollTools .mCSB_draggerRail{
     background: #dcdcdc;
   }
   .mCSB_scrollTools{
    opacity: 1;
   }
}
.about-honor .items .img img{
  max-height: 80%;
}
.con-swiper{
  .swiper-button-prev,.swiper-button-next{
    position: static;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: inline-block;
    margin:auto;
    background-color: #eeeeee;
    transition:.5s ease-in-out;
    &:hover{
      background-color: #aacd06;
      transition:.5s ease-in-out;
    }
  }
  .swiper-button-prev{
      background-image:url(../img/prev1.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    &:hover{
      background-image:url(../img/prev.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  .swiper-button-next{
    background-image:url(../img/next1.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    &:hover{
      background-image:url(../img/next.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .buttons{
    font-size: 0;
    text-align: center;
  }

}


.about-honor{
  padding: (100rem/40);
  .buttons{
    margin-top: (50rem/40);
  }
  .swiper-button-prev,.swiper-button-next{
    margin:0 18px;
  }
  .con-tit{
    text-align: center;
  }
  .honor-swiper{
    padding: 0 20px;
    padding-top: 1.5rem;
    overflow-x: hidden;
  }
  .swiper-slide{
    padding-top: 20px;
  }
  .swiper-container{
    overflow: visible;
  }
  .items{
    display: block;
    background:#f6f6f6;
    font-size: 16px;
    color:#333333;
    padding:(25rem/40) 1rem;
    position: relative;
     transition:.5s ease-in-out;
    &:hover{
      background:#fff;
      transition:.5s ease-in-out;
      box-shadow: 0  0 8px 5px rgba(0,0,0,.1);
      transform: translateY(-20px);
      &:before{
        transition:.5s ease-in-out;
        width: 100%;
      }
    }
    &:before{
      content:"";
      position: absolute;
      width: 0;
      height: 4px;
      background:#aacd06;
      transition:.5s ease-in-out;
      left:0;
      right:0;
      bottom:0;
      margin: auto;
    }
    .words{
      padding-top: (16rem/40);
    }
    .img{
      height: 435px;
      line-height: 435px;
      border-bottom: 1px solid #dcdcdc;
      position: relative;
      text-align: center;
      padding:0 20px;
      &:after{
        content:"";
        position: absolute;
        width: 20px;
        height: 20px;
        bottom:.5rem;
        right: 0;
        background:url(../img/a9.png) no-repeat center;
        background-size: 100%;
      }
      img{
        display: inline-block;
      }
    }
    .tit{
       font-size: 24px;
       color:#333333;
       line-height: 30px;
       height: 30px;
       font-weight: bold;
    }
    .txt{
      line-height: 20px;
      height: 20px;
      @include center(1);
      margin-top: (15rem/40);
    }
  }

}
.tc{
  text-align: center;
}



.about-path{
   background:#f9f9f9;
   padding-top: (95rem/40);
   padding-bottom: (95rem/40);
   .con-tit{
    margin-bottom: (120rem/40);
   }
   .swiper-button-prev,.swiper-button-next{
    position: absolute;
    top: 0;
    bottom:0;
    margin: auto;
   }
   .path-swiper-top{
    text-align: center;
    line-height: 1;
    .num{
       font-size: (350rem/40);
       color:#f1f0f0;
       font-family: "beba";
       position: absolute;
       width: 100%;
       left:0;
       top:0;
       line-height: .8;
    }
    .words{
      width: 450px;
      display: inline-block;
      line-height: 1;
      position: relative;
      z-index: 3;
      background:#fff;
      max-height: 100%;
      padding: .75rem (45rem/40);
      text-align: left;
      font-size: 20px;
      color:#333333;
      font-weight: bold;
      line-height: 30px;
      vertical-align: middle;
      .tit{
        font-size: 24px;
        margin-bottom: .25rem;
        span{
          font-size: (60rem/40);
          font-family: "beba";
        }
      }
    }
    .items{
      position: relative;
      text-align: center;
      height: (350rem/40);
      line-height: (350rem/40);
    }
   }

   .path-swiper-bot{
    position: relative;
    margin-top: (60rem/40);
    &:before{
      position:absolute;
      width: 100%;
      height: 1px;
      background:#dae0e7;
      content:"";
      left:0;
      top:0;
      bottom:0;
      margin: auto;
    }
    .items{
      height: 25px;
      cursor: pointer;
      &:after{
        position:absolute;
        width: 25px;
        height: 25px;
        content:"";
        left:0;
        right:0;
        margin: auto;
        background:url(../img/a10.png) no-repeat center;
        background-size: 100%;
      }
    }
    .swiper-slide{
       padding: 35px 0 35px 0;
       box-sizing: border-box;
       position: relative;
       text-align: center;
       .num{
        line-height: 1;
         font-size: .75rem;
         color:#212d54;
         font-weight: bold;
         position: absolute;
         left:0;
         top:0;
         width: 100%;
         opacity: 0;
         transition:.5s ease-in-out;
       }
       &.swiper-slide-active .items,
       .items:hover,.items.active{
        &:after{
        background:url(../img/a11.png) no-repeat center;
        background-size: 100%;
        }
        .text{
          opacity: 0;
          transition:.5s ease-in-out;
        }
        .num{
          opacity: 1;
          transition:.5s ease-in-out;
          transition-delay: .3s;
        }
       }
       .text{
          font-size: 16px;
          line-height: 1;
          color:#999999;
          font-weight: bold;
          position: absolute;
          left:0;
          bottom:0;
          width: 100%;
          transition:.5s ease-in-out;
       }
    }
   }

}
.about-layout{
  .words,.images{
     height: (850rem/40);

  }
  .words{
    width: (595rem/40);
    font-size: 14px;
    color:#666666;
    padding: (95rem/40) (95rem/40) (90rem/40) (100rem/40);
  }
  .images{
    width: calc(100% - (595rem/40));
  }
  .map{
    width: 100%;
    height: 100%;
  }
  .selectbox{
    margin-top: (110rem/40);
    .sel-top{
      line-height: 30px;
      margin-bottom: (25px);
      padding-right: 70px;
      position: relative;
      .tit{
         font-size: 24px;
         color:#333333;
         font-weight: bold;
         height: 30px;
         @include center(1);
      }
      .txt{
         font-size: 16px;
         color:#666666;
         position: absolute;
         right:0;
         top:0;
         cursor: pointer;
      }
    }
    .list{
      margin-top: (50rem/40);
      height: (300rem/40);
      overflow-y:auto;
      padding-right: 20px;
      .items{
        border-bottom: 1px solid #ebebeb;
        padding: (25rem/40) 0;
        .p{
          line-height: 24px;
        }
        .tit{
          font-size: 22px;
          line-height: 32px;
          color:#333333;

        }
      }
    }
    .sel-bot{
      height: 50px;
      position: relative;
      select{
        border:none;
        background:none;
        outline: none;
        width: 100%;
        height: 100%;
        border:1px solid #eeeeee;
        border-radius: 5px;
      }
      input[type=text]{
        width: 100%;
        height: 100%;
        padding-left: 6px;
        padding-right: 60px;
        border:1px solid #eeeeee;
        border-radius: 5px;
      }
      input[type=submit]{
        border:none;
        cursor: pointer;
        outline: none;
        background:none;
        text-indent: -999px;
        width: 60px;
        height: 50px;
        right:0;
        top:0;
        position: absolute;
        background:url(../img/a12.png) no-repeat center;
        background-size: 20px 20px; 
      }
    }
  }
}

.about-institution{
  background:#f9f9f9;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  .list{
    margin-top: 2rem;
  }
  .buttons{
    margin-top: (65rem/40);
  }
  .items{
    float:left;
    width: 15%;
    margin-left: 2%;
    background:#fefefe;
    position: relative;
    margin-bottom: .75rem;
    cursor: pointer;
    &:hover{
      .i0{
        opacity:0;
      }
      .i1{
        opacity: 1;
      }
      img{
        transition:.5s ease-in-out;
      }
    }
    img{
      transition:.5s ease-in-out;
    }
    .i1{
      position: absolute;
      left:0;
      top:0;
      opacity: 0;
    }
    &:nth-child(6n+1){
      margin-left:0;
    }
  }

}

.list-swiper{
  .buttons{
    text-align: center;
    font-size: 0;
    position: relative;
    &:before{
      position:absolute;
      width: 1px;
      content:"";
      height: 10px;
      background:#bbbbbb;
      left:0;
      right:0;
      margin: auto;

    }
    .swiper-button-prev,.swiper-button-next{
      display: inline-block;
      vertical-align: middle;
      position: static;
      margin:0 (50rem/40);
      width: 25px;
      height: 15px;
      transition:.5s ease-in-out;
      &:hover{
        transition:.5s ease-in-out;
      }
    }
    .swiper-button-prev{
      background:url(../img/b0.png) no-repeat center;
      background-size: 100%;
      &:hover{
      background:url(../img/b1.png) no-repeat center;
      background-size: 100%;
      }
    }
    .swiper-button-next{
      background:url(../img/b2.png) no-repeat center;
      background-size: 100%;
      &:hover{
      background:url(../img/b3.png) no-repeat center;
      background-size: 100%;
      }
    }
  }

}


.contact-box{
  padding: 2.5rem 0;
  .imgmap{
    .map{
      height: (725rem/40);
    }
  }
  .words-bot{
    padding-top: (90rem/40);
    margin-bottom: (110rem/40);
    .items{
      float:left;
      width: 20%;
      text-align: center;
      position: relative;
      color:#666666;
      font-size: 16px;
      line-height: 1.2;
      &:hover{
        .img{
          transition:  0.6s cubic-bezier(0.25,0.46,0.45,0.94);
          transform: translateY(-20px);
        }
      }
      .cn{
        font-size: 20px;
        font-weight: bold;
        margin-top: (55rem/40);
        margin-bottom: (25rem/40);
      }
      .img{
        width: 45px;
        height: 45px;
        margin: 0 auto;
        transition:  0.6s cubic-bezier(0.25,0.46,0.45,0.94);
      }
      &:nth-child(n+2){
        &:before{
          content:"";
          position: absolute;
          background:#e0e0e0;
          width: 1px;
          height: (85rem/40);
          left:0;
          top:0;
          bottom:0;
          margin: auto;
        }
      }
    }
  }
  .words-top{
    padding-bottom: (85rem/40);
    border-bottom: 1px solid #e0e0e0;
      .text{
         font-size: 1rem;
         font-weight: bold;
         color:#333333;
         max-width: 50%;
         line-height: 1.5;
      }
      .add{
        .img{
          width: 150px;
          height: 150px;
          margin-left: .75rem;
        }
        .wo{
          text-align: right;
        }
        .t1{
          font-size: 16px;
          line-height: 30px;
        }
        .t0{
          font-weight: bold;
          font-size: 20px;
          line-height: 24px;
          margin-bottom: 10px;
        }
        .i{
           width: 35px;
           display: inline-block;
           margin-bottom: .5rem;

        }

      }

  }
}

.case-banner{
  .cnn,.txt,.enn{
     color:#333333;
  }
  .enn{
    margin-top:(25rem/40);
    margin-bottom: (48rem/40);
  }
  .txt,.enn{
    font-weight: bold;
  }
  .p{
    color:#666666;
    font-size: 16px;
    line-height: 20px;
    line-height: 20px;
    margin-top: (25rem/40);
     @include center(1);
  }

}
.pagination{
    text-align: center;
    height: 100px;
    line-height: 100px;
    background:#fff;
    font-size: 0;
    position: relative;
    padding:0 1rem;
    overflow: hidden;
  a{
    display: inline-block;
    vertical-align: middle;
    border:1px solid #dddddd;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color:#666666;
    overflow: hidden;
    transition:.5s ease-in-out;
    margin:0 15px;
    &:hover,&.active{
      transition:.5s ease-in-out;
      border-color:#aacd06;
      background:#aacd06;
      color:#fff;
    }
  }
  .prev,.next{
    width: auto;
    height: 100%;
    line-height: 100px;
    border:none;
    color:#999999;
    font-size: 16px;
    position: relative;
    margin:0;
    &:hover{
      background:transparent;
      color:#aacd06;
    }
    &:after{
      position: absolute;
      content:"";
      width: 20px;
      height: 12px;
      top:0;
      bottom:0;
      margin: auto;
    }
  }
  .prev{
    float:left;
    padding-left: 38px;
    box-sizing: border-box;
    &:after{
      left:0;
      background:url(../img/c0.png) no-repeat center;
      background-size: 100%;
      transition:.5s ease-in-out;
    }
    &:hover{
      &:after{
        left:0;
        background:url(../img/c2.png) no-repeat center;
        background-size: 100%;
        transition:.5s ease-in-out;
      }
    }
  }
  .next{
    float:right;
    padding-right: 38px;
    box-sizing: border-box;
    &:after{
      right:0;
      background:url(../img/c1.png) no-repeat center;
      background-size: 100%;
    }
    &:hover{
      &:after{
        right:0;
        background:url(../img/c3.png) no-repeat center;
        background-size: 100%;
        transition:.5s ease-in-out;
      }
    }
  }
}

.cases-box{
  .list {
    padding-top: (55rem/40);
  }
  .items{
    display: block;
    float:left;
    width: 23%;
    margin-left: (8%/3);
    margin-bottom: (50rem/40);
    .img{
      overflow: hidden;
      img{
        transition:.5s ease-in-out;
      }
    }
    &:hover{
      img{
        transition: .5s ease-in-out;
        transform:scale3d(1.05,1.05,1);
      }
    }
    &:nth-child(4n+1){
      margin-left:0;
    }
    .words{
      background:#fff;
      padding: (25rem/40) (30rem/40) (50rem/40) (30rem/40);
      .tit{
         font-size: (26rem/40);
         font-weight: bold;
         color:#333333;
         line-height: (36rem/40);
         height: (36rem/40);
         @include center(1);
      }
      .txt{
          font-size: 16px;
          color:#666666;
          line-height: 26px;
          height: 52px;
          @include center(2);
          margin-top: (15rem/40);
          margin-bottom: (35rem/40);
      }
      .more{
        font-size: 14px;
        line-height: 1;
        padding-right: 36px;
        position: relative;
        color:#999999;
        display: inline-block;
        &:after{
          width:20px;
          height: 8px;
          background:url(../img/c4.png) no-repeat center;
          background-size: 100%;
          content:"";
          position: absolute;
          right: 0;
          top: 0;
          bottom:0;
          margin: auto;
        }
      }
    }
  }

}

.case-banner{
  .words{
    padding-left: (100rem/40);
    padding-right: (75rem/40);
    .titbox-box{
      position: relative;
      height: 100%;
    }
    .bdfx{
      position: absolute;
      bottom:105px;
      right: (75rem/40);
      border-radius: 6px;
      overflow: hidden;
      background:#ffffff;
      a{
        display: block;
        float:none;
        width: 60px;
        height: 50px;
        padding:0;
        margin:0;
        background:transparent;
        transition:.5s ease-in-out;
        &:hover{
          transition:.5s ease-in-out;
        }
        &:nth-child(n+2){
          border-top:1px solid #eeeeee;
        }
      }
      .more{
        background:url(../img/c6.png) no-repeat center;
        background-size: 25px 25px;
        &:hover{
          background:url(../img/c5.png) no-repeat center;
          background-size: 25px 25px;
        }
      }
      .wb{
        background:url(../img/c8.png) no-repeat center;
        background-size: 25px 25px;
        &:hover{
          background:url(../img/c7.png) no-repeat center;
          background-size: 25px 25px;
        }
      }
      .wx{
        background:url(../img/c10.png) no-repeat center;
        background-size: 25px 25px;
        &:hover{
          background:url(../img/c9.png) no-repeat center;
          background-size: 25px 25px;
        }
      }

    }
    .titbox{
      position: absolute;
      left:0;
      bottom:0;
      padding-left: (100rem/40);
      padding-right: (75rem/40);
      padding-bottom: 85px;
      line-height: 1;
      font-size: 16px;
      color:#ffffff;
      width: 100%;
      .cases-details-tit{
        margin-bottom: (35rem/40);
        font-size: 1rem;
        font-weight: bold;
      }
    }

  }

}

.ee{
  background:#eef4fb;
}
.pd45{
  padding-top: 45px;
  margin-top: -45px;
}

.serves-box{
   background:#f9f9f9;
}

.casesdetails-box{
  padding-bottom: 2.5rem;
  .casesdetails{
    padding-top: (50rem/40);
  }
  .casesdetails-right,.wbox{
    background:#ffffff;
    border-radius: 6px;
    overflow: hidden;
  }
  .wbox{
    padding:(90rem/40) (100rem/40);
    font-size: 16px;
    color:#666;
    line-height: 36px;
  }
  .casesdetails-right{
    width: 400px;
    padding-top: 1rem;
    padding-bottom: (35rem/40);
    .list{
      padding:0 1rem;
      .items{
        display: block;
        .img{
          overflow: hidden;
          height: 200px;
          img{
            transition:.5s ease-in-out;
          }
        }
        &:hover{
          img{
            transition:.5s ease-in-out;
            transform:scale3d(1.05,1.05,1);
          }
        }
        .words{
          font-size: 14px;
          line-height: 26px;
          color:#999999;
          padding-top: (25rem/40);
          padding-bottom: (25rem/40);
          .p{
            height: 52px;
            @include center(2);
            margin-bottom: 10px;
          }
          .tit{
             font-size: 20px;
             font-weight: bold;
             line-height: 30px;
             height: 30px;
             @include center(1);
             color:#333333;
          }
        }

      }
    }
    .tittips{
       font-size: 26px;
       color:#333333;
       padding-left: 30px;
       position: relative;
       line-height: 1;
       margin-bottom: (45rem/40);
       &:after{
        content:"";
        position: absolute;
        height: 90%;
        top:0;
        bottom:0;
        left:0;
        width: 4px;
        background:#aacd06;
       }
    }
  }
  .casesdetails-left{
    width: calc(100% - 450px);
  }
  .w-bot{
    margin-top: (50rem/40);
    .back{
      width: 30px;
      height: 30px;
      background:url(../img/c13.png) no-repeat center;
      background-size: 100%;
      border-radius: 0;
      border:none;
      &:hover{
        background:url(../img/c14.png) no-repeat center;
        background-size: 100%;
      }
    }
  }
}
.lmore{
  display: inline-block;
  font-size: 16px;
  color:#ffffff;
  padding-right: 75px;
  box-sizing: border-box;
  line-height: 20px;
  height: 20px;
  position: relative;
  &:hover{
    color:#ffffff;
     &:after{
      transition:.5s ease-in-out;
      transform: translateX(10px);
     }
  }
  &:after{
    position:absolute;
    content: "";
    width:50px;
    height: 15px;
    background:url(../img/c18.png) no-repeat center;
    background-size: 100%;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
    transition:.5s ease-in-out;
  }
}

.products-list{
    .swiper-slide:nth-child(n+2){
      .items{
        border-left:1px solid #dddddd;
      }
    }
  .items{
    height: (960rem/40);
    position: relative;
    overflow: hidden;
    display: block;
    &:hover{
      .words{
        transition:  0.4s cubic-bezier(0.55,0.085,0.68,0.53) 0.35s;
        opacity: 0;
      }
    }
    &.active:hover{
      .words{
        opacity: 1;   
         transition:  0.4s cubic-bezier(0.55,0.085,0.68,0.53) 0.35s;
      }
    }

    .words{
      position: absolute;
      width: 100%;
      left:0;
      top:0;
      transition:.5s ease-in-out;
    }
    .lmore{
          margin-top: 0.375rem;
          margin-bottom: 20px;
    }
    .text{
      position: absolute;
      padding: 0 (20rem/40);
      padding-left: (60rem/40);
      left:0;
      bottom:(150rem/40);
      font-size: 15px;
      color:#666666;
      .tit{
        font-size: .75rem;
        line-height: 1rem;
        height: 1rem;
        overflow: hidden;
        color:#333333;
        font-weight: bold;
      }
      .txt{
        line-height: 20px;
        height: 40px;
        overflow: hidden;
        margin-top: (15rem/40);
      }
    }
    .images,.words,.img{
      height: 100%;
    }
    .images{
      display: block;
      .tit{
        color: #ffffff;
      }
    }
    .img{
      background-color:#ffffff!important;
    }
  }
}
.w1200{
  width: 1200px;
  margin:0 auto;
}

.productsdetails-top{
  min-height: (630rem/40);
  padding-top: (100rem/40);
  padding-bottom: 2rem;
  background:url(../img/c20.png) repeat left top;
  position: relative;
  &:after{
    position:absolute;
    width: 100%;
    height: (275rem/40);
    background:#f9f9f9;
    content:"";
    left:0;
    bottom:0;
  }
  .tit{
    text-align: center;
    font-size: 18px;
    color:#666666;
    width: 80%;
    margin:0 auto;
    .big{
      font-size: (50rem/40);
      color:#333333;
      font-weight: bold;
      line-height: 1.2;
    }
    .p{
      line-height: 24px;
      margin-top: (18rem/40);
    }
  }
  .prolist{
    width: 1195px;
    margin:0 auto;
    position: relative;
    margin-top: (.75rem);
    .swiper-button-prev,.swiper-button-next{
      position: absolute;
    }
    .img{
        width: 400px;
        height: 600px;
        margin:0 auto;
    }
  }
}

.productsdetails-center{
  line-height: (900rem/40);
  height: (900rem/40);
  position: relative;
  .words{
    position: absolute;
    width: 100%;
    left:0;
    top:0;
  }
  .images,.words{
    height: 100%;
    font-size: 0;
    text-align: center;
  }
  .wbox{
    display: inline-block;

    vertical-align: middle;
    max-height: 100%;
    overflow: hidden;
  }
  .img{
    width: 50px;
    height: 60px;
    margin:0 auto;
  }
  .t0{
     margin-top: .75rem;
  }

}
.conbox-text{
      font-size: 16px;
    line-height: 1;
    color:#ffffff;
    text-align: center;
  .t0{
     font-size: .9rem;
     color:#fff;
     line-height: 1rem;
     font-weight: bold;
    
  }
  .line{
     width: 50px;
     height: 4px;
     background:rgba(255,255,255,.5);
     margin:(25rem/40) auto;
  }
  .p{
    line-height: 30px;
  }
}
.productsdetails-bot{
    background:url(../img/a8.jpg) no-repeat center;
    background-size: cover;
    padding-top: (240rem/40);
    padding-bottom: (60rem/40);
    .pbot{
      margin-top: (170rem/40);
      font-size: 14px;
      line-height: 24px;
    }
}

.productsdetails-top{
  position: relative;
  .right-fixed-a{
    position: absolute;
    right: (100rem/40);
    height: (220rem/40);
    bottom:0;
    top:0;
    margin: auto;
    z-index: 2;
    a{
      display: block;
      width: (60rem/40);
      height: (60rem/40);
      border-radius: 50%;
      background-color:#cccccc;
      transition:.5s ease-in-out;
      &:nth-child(n+2){
        margin-top:.5rem;
      }
      &:hover{
        background-color:#aacd06;
        transition:.5s ease-in-out;
      }
      &.prev{
        background-image:url(../img/c22.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
      }
      &.next{
        background-image:url(../img/c24.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
      }
      &.back{
        background-image:url(../img/c23.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
      }
    }
  }
}



.serves-box{
  .serves-01{
    padding-top:2rem;
    padding-bottom:2rem;
    .list{
      margin-top: (50rem/40);
      .items{
        float:left;
        height: (750rem/40);
        position: relative;
        width: 12%;
        cursor: pointer;
        .t0{
          font-size: .75rem;
          font-weight: bold;
          line-height: 1.2;
        }
        .p{
          line-height: 30px;
        }
        &.active{
          width: 40%;
          .images{
            transition:.5s ease-in-out;
            position: relative;
            &:after{
              content:"";
              position:absolute;
              width: 100%;
              height: 100%;
              background: url(../img/nbg.png) no-repeat left bottom;
              left:0;
              bottom: 0;
              background-size: cover;
              transition:.5s ease-in-out .5s;
            }
          }
          .words{
            .p{
              opacity: 1;
              height: auto;
              margin-top: (15rem/40);
              transition:.3s ease-in-out;
            }
          }
        }
        .images{
          height: 100%;
          transition:.5s ease-in-out;
          &:after{
            transition:.5s ease-in-out;
          }
        }
        .p{
          opacity: 0;
          height: 0;
          overflow: hidden;
        }
        .words{
          position: absolute; padding:(35rem/40) 1rem;
          left:0;
          bottom:0;
          font-size: 16px;
          color:#f9f9f9;

        }

      }
    }

  }

}

.serves-02{
  background:#ffffff;
  padding: 2rem 0;
  .serves02-swiper{
     margin-top: (120rem/40);
     position: relative;
     min-height: (420rem/40);
     .swiper-slide{
      padding:10px;
      padding:  10px (70rem/40);
     }
     &:before{
      content:"";
      height: 100px;
      width: 100%;
      background:url(../img/c26.png) no-repeat center;
      background-size:cover;
      position: absolute;
      top: 46%;
      left: 0;
      margin-top: -4rem;
     }
     .items{
      text-align: center;
      padding: (90rem/40) .3rem;
      cursor: pointer;
      .tit,.txt{
        opacity: 0;
      }
      .tit{
        line-height: 1.2;
        font-size: .75rem;
        color:#333333;
        font-weight: bold;
        margin-top: (35rem/40);
      }
      .txt{
        line-height: 26px;
        font-size: 16px;
        color:#666666;
        margin-top: (15rem/40);
        height: 53px;
        @include center(2);
      }
      .img{
         width: 90px;
         height: 90px;
         border-radius: 50%;
         background:#f1f1f1;
         overflow: hidden;
         margin:0 auto;
      }
     }
    .swiper-slide.swiper-slide-active{
       .items{
            background:#fff;
            box-shadow: 0 0  8px 4px rgba(0,0,0,.06);
            .tit,.txt{
              opacity: 1;
            }
       }
    }
  }

  .buttons{
    margin-top: .75rem;
    .swiper-button-next,.swiper-button-prev{
          margin: 0 10px;
    }
  }
}


.serves-03{
   background:#f9f9f9;
   padding-top: (75rem/40);
   padding-bottom: (100rem/40);
   .list{
    font-size: 0;
    text-align: center;
    margin-top: 2rem;
   }
   .items{
    background:#ffffff;
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    color:#666666;
    width: 32%;
    margin-left: 2%;
    text-align: left;
    padding: (45rem/40) (50rem/40);
    &:nth-child(3n+1){
      margin-left:0;
    }
    &:hover{
      color:#aacd06;
      .img{
          .i1{
            opacity: 1;
          }
          .i0{
            opacity: 0;
          }
          img{
            transition:.5s ease-in-out;
          }
      }
      .tit,.p{
        color:#aacd06;
        transition:.5s ease-in-out;
      }
    }
    .tit{
       font-size: .75rem;
       color:#333333;
       font-weight: bold;
       line-height: 1.2;
       margin-top: .5rem;
       margin-bottom: (15rem/40);
    }
    .p{
      line-height: 28px;
      min-height: 56px;
    }
    .tit,.p{
      transition:.5s ease-in-out;
    }
    .img{
      position: relative;
      width: 60px;
      height: 50px;
      img{
        transition:.5s ease-in-out;
        display: block;
      }
      .i1{
        position: absolute;
        left:0;
        top:0;
        opacity: 0;
      }

    }
   }
}



.advantage-box{
   background:#f9f9f9;
}
.con-tit{
  .ten,.tcn{
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
  }
  .ten{
    font-family: "din";
    margin-top: .5rem;
  }
}

.advantage-01{
  padding-top: (115rem/40);
  padding-bottom: 2rem;
  border-bottom: 1px solid #e0e0e0;
}

.advantage-02{
  padding-top: (75rem/40);
  padding-bottom: (80rem/40);
  .list{
    font-size: 0;
    margin-top: (60rem/40);


    .items{
      display: inline-block;
      width: 48%;
      margin-left: 4%;
      position: relative;
      &:hover{
        .images{
          img{
            transition:.5s ease-in-out;
            transform:scale3d(1.05,1.05,1);
          }

        }
      }
      .span{
        position: absolute;
        left:0;
        bottom:0;
        font-size: 26px;
        color:#ffffff;
        line-height: 36px;
        height: 36px;
        overflow: hidden;
        bottom:(35rem/40);
        padding: 0 1rem;
      }
      .images{
        border-radius: 5px;
        overflow: hidden;
        img{
          transition:.5s ease-in-out;
        }
      }

      &:nth-child(2n+1){
        margin-left:0%;
      }


    }
  }

}

.right-fixedbox{
  position: fixed;
  right: 0;
  top: 0;
  bottom:0;
  margin: auto;
  width: 48px;
  height: 400px;
  z-index: 20;
  .list{
      border-radius: 96px;
      background:#fefefe;
      width: 96px;
      height: 100%;
      padding: 48px 0;
      box-shadow:  0 0  10px 3px rgba(0,0,0,.06);
     .items{
      width: 50%;
      height: 60px;
      line-height: 60px;
      text-align: center;
      position: relative;
      &:hover{
        .items-bot{
          right:48px;
          transition:.5s ease-in-out;
          opacity: 1;
          z-index: 0;
        }
      }
     }
     .items-top{
      width: 30px;
      height: 30px;
      display: inline-block;
      vertical-align: middle;
      margin:0 auto;
      cursor: pointer;
      position: relative;
      z-index: 5;
        img{
          transition:.5s ease-in-out;
        }
      &:hover{
        img{
          transition:.5s ease-in-out;
        }
        .i1{
          opacity:1;
        }
        .i0{
          opacity: 0;
        }
      }
     }
     .items-bot{
        position: absolute;
        right: -100px;
        top: 0;
        width: 100px;
        transition:.5s ease-in-out;
        z-index: -10;
        opacity: 0;
     }
     .items4{
       .items-bot{
          right: -200px;
          width: 200px;
       }
     }
  }

}














.erimgbox{
  position: absolute;
  top: .75rem;
  padding-top: 25px;
  width: 140px;
  left: -70px;
  font-size: 14px;
  text-align: center;
  color:#ffffff;
  display: none;
  box-sizing: border-box;
  .img{
        border-radius: 5px;
        border:1px solid #f1f1f1;
        background:#ffffff;
        padding:10px;
        position: relative;
        &:before{
          position:absolute;
          content:"";
          width: 13px;
          height: 10px;
          top: -10px;
          background:url(../img/mk05.png) no-repeat center;
          background-size: 100%;
          left:0;
          right:0;
          margin: auto;
        }
  }

}
        .lbox{
          width: 100%;
          height: 100%;
        }

.web-header{
  height: 110px;
  line-height: 108px;
  position: relative;
  z-index: 10;
  


  .header{
      padding:0 (88rem/40);
      border-bottom: 1px solid #e8e8e8;
  }
  &.active{
    .header{
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
    .nav-li{
    .nav-top{
        span{
          color:#fff;
        }
      &.active,&:hover{
        span{
          color:#aacd06;
        }
      }
    }
    }
      .s-box .i{

        &:hover{
        }

        &.i0{
              background:url(../img/g6.png) no-repeat center;
              background-size: 100%;
              &:hover{
                background:url(../img/g7.png) no-repeat center;
                background-size: 100%;
              }
        }
        &.i1{
          background:url(../img/g4.png) no-repeat center;
          background-size: 100%;
          &:hover{
          background:url(../img/g5.png) no-repeat center;
          background-size: 100%;
          }
        }
        &.i2{
          background:url(../img/g2.png) no-repeat center;
          background-size: 100%;
          &:hover{
          background:url(../img/g3.png) no-repeat center;
          background-size: 100%;
          }
        }
        &.i3{
          background:url(../img/g0.png) no-repeat center;
          background-size: 100%;
          &:hover{
          background:url(../img/g1.png) no-repeat center;
          background-size: 100%;
          }
        }
      }
  }
  .web-logo{
    width: 130px;
    position: relative;
    .i1{
      opacity: 0;
      display: none;
    }
  }
  .s-box .i{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    line-height: .75rem;
    cursor: pointer;
    transition:.5s ease-in-out;
    &:hover{
      transition:.5s ease-in-out;
    }
    &:nth-child(n+2){
      margin-left:(40rem/40);
    }
    &.i0{
          width:.75rem;
          height: .75rem;
          background:url(../img/k3.png) no-repeat center;
          background-size: 100%;
          &:hover,&.active{
          background:url(../img/g7.png) no-repeat center;
          background-size: 100%;
          }

    }
    &.i1{
      width: .75rem;
      height: .75rem;
      background:url(../img/k0.png) no-repeat center;
      background-size: 100%;
      &:hover{
      background:url(../img/g5.png) no-repeat center;
      background-size: 100%;
      }
    }
    &.i2{
      width: .75rem;
      height: .75rem;
      background:url(../img/k1.png) no-repeat center;
      background-size: 100%;
      &:hover{
      background:url(../img/g3.png) no-repeat center;
      background-size: 100%;
      }
    }
    &.i3{
      width: .75rem;
      height: .75rem;
      background:url(../img/k2.png) no-repeat center;
      background-size: 100%;
      &:hover{
      background:url(../img/g1.png) no-repeat center;
      background-size: 100%;
      }
    }
  }
  .head{
    position: relative;
  }
  .web-nav{
    text-align: center;
    padding-right: .75rem;
  }
  .nav-li{
    font-size: 16px;
    color:#000000;
    display: inline-block;
    position: relative;
    vertical-align: top;
    .nav-top{
      padding:0 (35rem/40);
      display: block;
        span{
          display: block;
          position: relative;
          color:#000;
          transition: .5s ease-in-out;
          &:before{
            position:absolute;
            width: 0;
            left:0;
            right: 0;
            top:0;
            margin: auto;
            content:"";
            height: 4px;
            background:#aacd06;
            transition:.5s ease-in-out;
          }
        }
      &.active,&:hover{
        span{
          color:#aacd06;
          transition: .5s ease-in-out;
          &:before{
            width:100%;
            transition:.5s ease-in-out;
          }
        }
        span:after{
          opacity:1;
          transition:.5s ease-in-out;
        }
      }
      span:after{
        position:absolute;
        content:"";
        left:0;
        width: 100%;
        height: 2px;
        background:#ffffff;
        bottom:0;
        opacity: 0;
        transition:.5s ease-in-out;
      }
    }
    .nav-bot{
      position: absolute;
      top: 110px;
      left:0;
      width: 100%;
      text-align: center;
      padding-top: 18px;
      width: 530px;
      left: 50%;
      margin-left: -265px;
      a{
        color:#666;
        &:hover,&.active{
        color:#c0ac88;
        transition:.5s ease-in-out;
        }
      }
    }
    a{
      color:#000000;
      transition:.5s ease-in-out;
      &:hover,&.active{
        color:#c0ac88;
        transition:.5s ease-in-out;
      }
    }
  }
  .nav-bot{
    display: none;
    .li{
      display: block;
      font-size: 14px;
      line-height: 2;
    }
  }
}


.web-footer{
   background:#333333;
   font-size: 14px;
   color:#666666;
   a{
    color:#666666;
     transition: .5s ease-in-out;
    &:hover{
      color:#ffffff;
      transition: .5s ease-in-out;
    }
   }

   .web-top{
    padding: 2rem 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    .left{
      .i0{
        width: 130px;
      }
    }
    .right{
      line-height: 1.2;
      padding-top: .5rem;
      font-size: 0;
      .li{
         font-size: 15px;
         color:#ececec;
         &:nth-child(n+2){
          margin-left:2.5rem;
         }
         &:hover{
          color:#aacd06;
         }
      }
    }

   }
   .web-center{
    padding-top: (70rem/40);
    padding-bottom: (38rem/40);
    border-bottom: 1px solid rgba(255,255,255,.1);
    .left{
      font-size: 0;
      .items{
        font-size: 14px;
        display: inline-block;
        vertical-align: top;
        line-height: 24px;
        font-family: "Source Han Sans CN","Source Han Sans CN Light";
        .span{
           font-size: 13px;
           color:#999999;
          text-align: center;
           margin-top: 13px;
        }
        .img{
          width: 140px;
          height: 140px;
          border:1px solid rgba(255,255,255,.05);
          padding: 15px;
        }
        .i{
           width: 50px;
           height: 50px;
           border-radius: 50%;
           border:1px solid rgba(255,255,255,.1);
           margin-bottom: 10px;
        }
        .p0{
          font-size: 13px;
          margin-top: 8px;
        }
        .num{
           font-size: .75rem;
           font-weight: bold;
           color:rgba(255,255,255,.5);
           font-family: "beba";
           line-height: 1;
           margin-top: 10px;
        }
        .p{
          margin-top: 15px;
        }
      }
      .items2{
        margin-left: 2rem;
      }
      .items3{
        margin-left: 2.5rem;
      }

    }
    .right{
      .top{
        font-size: 0;
        .li{
          display: inline-block;
          font-size: 14px;
          line-height: 1.2;
          &:nth-child(n+2){
            margin-left:(115rem/40);
          }
        }
      }
      .bot{
        margin-top: (75rem/40);
        padding-top: 30px;
        line-height: 1.2;
        position: relative;
        text-align: right;
        &:after{
          position:absolute;
          content:"";
          top:0;
          right:0;
          width: 20px;
          height: 20px;
          background: url(../img/peo.png) no-repeat center;
          background-size: 100%;
        }
      }

    }

   }

   .web-bot{
     height: 180px;
     line-height: 180px;
     .left{
        font-size: 0;
        .items{
          display: inline-block;
           font-size: 12px;
           vertical-align: middle;
        }
        .gw{
          margin-right: (50rem/40);
        }
        .i{
          width: .75rem;
          height: .75rem;
          margin-right: (35rem/40);
          &.i0{
            background:url(../img/g2.png) no-repeat center;
            background-size: 100%;
            &:hover{
            background:url(../img/g3.png) no-repeat center;
            background-size: 100%;
            }
          }
          &.i1{
            background:url(../img/g4.png) no-repeat center;
            background-size: 100%;
            &:hover{
            background:url(../img/g5.png) no-repeat center;
            background-size: 100%;
            }
          }

          &.i2{
            background:url(../img/g8.png) no-repeat center;
            background-size: 100%;
            &:hover{
            background:url(../img/g9.png) no-repeat center;
            background-size: 100%;
            }
          }
        }
        .gw{
           width: 120px;
           height: 38px;
           line-height: 38px;
           border:1px solid rgba(255,255,255,.1);
           border-radius: 38px;
           text-align: center;
           span{
            display: inline-block;
            vertical-align: middle;
            width: 18px;
            height: 18px;
            background:url(../img/gw.png) no-repeat center;
            background-size: 100%;
            margin-right: 10px;
           }

        }

     }

   }
}
.advantage-05{
  background:#ffffff;
  padding-top: (75rem/40);
  padding-bottom: (50rem/40);
  .advantage05-list{
    font-size: 0;
    margin-top: 2rem;
  }
  .items{
    display: inline-block;
    font-size: 16px;
    color:#666666;
    width: 23%;
    margin-left: (8%/3);
    background:#f1f1f1;
    margin-bottom: (50rem/40);
    vertical-align: top;
    border-radius: 5px;
    padding: .75rem;
    transition:.5s ease-in-out;
    &:hover{
      background:#aacd06;
      .tit{
         transition:.5s ease-in-out;
        color:#fff;
      }
      .txt{
         transition:.5s ease-in-out; color:#fff;
      }
      .num{
        color:rgba(255,255,255,.2);
        transition:.5s ease-in-out;
      }

    }
    .tit{
      font-size: 26px;
      line-height: 1.2;
      color:#333333;
      font-weight: bold;
      transition:.5s ease-in-out;
    }
    .txt{
       font-size: 16px;
       line-height: 26px;
      min-height: 78px;
       margin-bottom: (9rem/40);
       margin-top: (15rem/40);
       transition:.5s ease-in-out;
    }
    .num{
      font-size: .9rem;
      line-height: 1;
      font-family: "beba";
      color:rgba(51,51,51,.2);
      transition:.5s ease-in-out;
    }
    &:nth-child(4n+1){
      margin-left:0;
    }
  }
}

.advantage-03{
  background:#ffffff;
  padding: 2rem 0;
  .advantage03-swiper{
    margin-top: 2.5rem;
  }
  .buttons{
    margin-top: 2rem;
    .swiper-button-prev{
      margin-right: .5rem;
    }
  }
  .items{
     background:#f1f1f1;
     height: 220px;
     border-radius: 5px;
     overflow: hidden;
     padding:.75rem;
     position: relative;
     transition:.5s ease-in-out;
     .bot-box{
      position: absolute;
      bottom: .75rem;
      padding:0 .75rem;
      text-align: right;
        line-height: 1;
      width: 100%;
      left: 0;
      .num{
        position: absolute;
        left: .75rem;
        bottom: 0;
        font-size: .9rem;
        color:rgba(51,51,51,.2);
        font-family: "beba";
      }
      .tit{
        font-size: .9rem;
        font-weight: bold;
        color:#333333;
      }
      .txt{
        font-size: 22px;
        color:#333333;
        font-weight: bold;
        margin-top: 15px;
      }

     }
     &:hover{
       background:#aacd06;
       transition:.5s ease-in-out;

      .bot-box{
          .tit{
            color:#fff;
          }
          .txt{
            color:#fff;
          }
          .num{
            color:rgba(255,255,255,.2);
          }
       }
       .i{
        .i1{
          opacity: 1;
        }
        img{
          transition:.5s ease-in-out;
        }
        .i0{
          opacity: 0;
        }
       }
     }
     .i{
       width: 40px;
       height: 40px;
       overflow: hidden;
       position: relative;
       img{
         transition:.5s ease-in-out;
       }
       .i1{
        opacity: 0;
        position: absolute;
        left:0;
        top:0;
       }
     }
  }
}

.advantage-04{
  padding:2rem 0;
  padding-bottom: 2.4rem;
  .advantage04box{
    position: relative;
    margin-top: (70rem/40);
    .item{
      position: absolute;
      line-height: 1.2;
      font-size: 22px;
      color:#333333;
      font-weight: bold;
      .img{
        display: inline-block;
        width: 55px;
        height: 55px;
        margin-bottom: (35rem/40);
      }
    }
    .item1,.item3{
      left:0;
      text-align: left;
    }
    .item2,.item4{
      right:0;
      text-align: right;
    }
    .item3,.item4{
      bottom:(110rem/40);
    }
    .item1,.item2{
      top:(75rem/40);
    }

    .images{
       .img{
          width: 375px;
          height: 630px;
          margin:0 auto;
       }
       .span{
        text-align: center;
        line-height: 1.2;
        font-size: 20px;
        color:#333333;
        position: absolute;
        width: 100%;
        bottom: -20px;
       }

    }
  }
}

.advantage-04{
  position: relative;
  .lspan{
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    width: (1365rem/40);
    height: (690rem/40);
    background:url(../img/n0.png)  no-repeat center;
    background-size: 100%;
  }
}

.wel-more{
  display: block;
  font-size: 16px;
  color:#999999;
  height: 60px;
  line-height: 60px;
  width: 230px;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  padding-left: 10px;
  padding-right: 60px;
  box-sizing: border-box;
  transition:.5s ease-in-out;
  position: relative;
  &.active{
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff;
      color:#ffffff;
      &:before{
        background:#aacd06;
      }
      &:after{
        background:url(../img/m4.png) no-repeat center;
        background-size: 100%;
      }
      &:hover{
        border-top: 1px solid #aacd06;
        border-bottom: 1px solid #aacd06;
      }
  }
  span{
    position: relative;
    z-index: 3;
  }
  &:after,&:before{
    position:absolute;
    content:"";
    transition:.5s ease-in-out;
  }
  &:before{
    right:0;
    top:0;
    bottom:0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background:#999999;
    transform: scale3d(0,1,1);
  }
  &:after{
    right:10px;
    top:0;
    bottom:0;
    width: 50px;
    height: 15px;
    background:url(../img/m4.png) no-repeat center;
    background-size: 100%;
    margin: auto;
  }
  &:hover{
      transition:.5s ease-in-out;
    color:#fff;
    &:before{
      width:100%;
      transition:.5s ease-in-out;
      transform: scale3d(1,1,1);
    }
    &:after{
    background:url(../img/m5.png) no-repeat center;
    background-size: 100%;
    }
  }
}
.wel-banner{
  position: relative;
  br{
    display: none;
  }
  a{
    display: block;
  }
  &.on{
    .items{
      padding-top:0;
      transition:1s ease-in-out;
    }
    .buttons .spanbox .span{
          background: url(../img/a04.png) no-repeat center;
          background-size: 100%;
    }
  }
  .items{
    display: block;
    padding-top: (630rem/40);
    position: relative;
    transition:1s ease-in-out;
  }
  .items2{
    .items-bot{
      .imgs{
        height: (990rem/40);

      }
    }

  }
  .items-top{
    background:url(../img/a13.jpg) no-repeat bottom;
    background-size: 100%;
    height: (630rem/40);
    padding: (175rem/40) (100rem/40) (1rem) (100rem/40);
    line-height: 1.2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    .w-left{
      max-width: calc(100% - 300px);
    }
    .w-right{
      padding-top: (120rem/40);
    }
    .tit{
      font-size: (36rem/40);
      color:#333333;
    }
    .cn{
      font-size: (70rem/40);
      color:#333333;
      font-weight: bold;
      margin-top: (20rem/40);
      margin-bottom: (10rem/40);
    }
    .en{
       font-size: .75rem;
       color:#999999;
    }
  }
  .items-bot{
    /*position: relative;*/
    .words{
      position: absolute;
      left:0;
      bottom:0;
      width: 100%;
      height: 20rem;
      color:#ffffff;
      padding:(195rem/40) (100rem/40) 1rem (100rem/40);
    }
    .images{
      height: 20rem;
    }
    .imgs{
      width: 100%;
      position: absolute;
      left:0;
      bottom:0;
    }
    .btit{
      font-size: (36rem/40);
      line-height: 1.2;
    }
    .btxt{
      font-size: (64rem/40);
      line-height: 1.2;
      margin-top: .75rem;
    }


  }

  .buttons{
    .spanbox,.box{
      position: absolute;
      height: 120px;
      top:(530rem/40);
      margin: auto;
      z-index: 4;
      color:#999999;
      font-size: 16px;
    }
    .spanbox{
      left: 2.5rem;
      font-family: "beba";
      line-height: 1.2;
      padding-bottom: 80px;
      box-sizing: border-box;
      .span{
        width: 25px;
        height: 30px;
        background:url(../img/a4.png) no-repeat center;
        background-size: 100%;
        left:0;
        bottom:0;position: absolute;


      }
      .swiper-pagination-current{
        font-size: 1rem;
        color:#aacd06;
      }
    }
    .box{
      right:2.5rem;
      font-size: 0;
    }
    .swiper-pagination,.swiper-button-prev,.swiper-button-next{
      position: static;
      margin:0;
      display: inline-block;
      vertical-align: top;
    }
    .swiper-button-prev,.swiper-button-next{
      width: 20px;
      height: 36px;
      transition:.5s ease-in-out;
      &:hover{
        transition:.5s ease-in-out;
      }
    }
    .swiper-button-prev{
      background:url(../img/m6.png) no-repeat center;
      background-size: 100%;
      &:hover{
      background:url(../img/m7.png) no-repeat center;
      background-size: 100%;
      }
    }
    .swiper-button-next{
      background:url(../img/m8.png) no-repeat center;
      background-size: 100%;
      margin-left: (50rem/40);
      &:hover{
      background:url(../img/m9.png) no-repeat center;
      background-size: 100%;
      }

    }

  }
}

.wel-search{
   padding-top: (130rem/40);
   padding-bottom: (140rem/40);
   .search-top{
    font-size: 0;
    padding: 0 .75rem;
    padding-bottom: (105rem/40);
      .items{
        font-size: 16px;
        display: inline-block;
        vertical-align: top;
        width: 25%;
        text-align: center;
        padding:0 (110rem/40);
        font-size: 14px;
        line-height: 22px;
        color:#999999;
        vertical-align: top;
        &:hover{
          .img{
            img{
              transition:.5s ease-in-out;
            }
            .i1{
              opacity: 1;
            }
            .i0{
              opacity: 0;
            }
          }

        }
      }
      .tit{
        font-size: 20px;
        line-height: 30px;
        color:#333333;
        margin-bottom: 10px;
        margin-top: .75rem;
      }
      .img{
        position: relative;
        display: inline-block;
        width: 70px;
        height: 70px;
        img{
          transition:.5s ease-in-out;
          width: 100%;
        }
        .i1{
          position: absolute;
          left:0;
          top:0;
          opacity: 0;
        }
      }
   }
   .search-bottom{
    padding:0 (150rem/40);
    .searbox{
       border-top: 1px solid #efefef;
       padding-top: (110rem/40);
       .left{
          font-size: 0;
          
          color:#999999;
          padding-top: (25rem/40);
          .li{
            display: inline-block;
            color:#999999;font-size: 16px;
            &:nth-child(n+2){
              margin-left:(60rem/40);
            }
          }
          a{
            transition:.5s ease-in-out;
            &:hover{
              color:#aacd06;
              transition:.5s ease-in-out;
            }
          }
          div.li{
            color:#333333;
          }
       }
       .right{
        padding-left: 65px;
        position: relative;
        font-size: 15px;
        color:#999999;
        line-height: 1.2;
        .tit{
          font-weight: bold;
          font-size: .75rem;
          font-family: "beba";
          color:#333333;
          margin-bottom: 10px;
        }
         span{
          display: inline-block;
          width: 50px;
          height: 50px;
          background:url(../img/m18.png) no-repeat center;
          background-size: 100%;
          left:0;
          top:0;
          bottom:0;
          margin: auto;
          position: absolute;
         }
       }
    }
    .sear-tit{
        margin-bottom: 1rem;
    }
    .sear-search{
      .inputbox{
        border: 1px solid #e8e8e8;
        border-right: none;
        width: calc(100% - 280px);
        position: relative;
        input[type=text]{
          width: 100%;
          padding-left: 18px;
          padding-right: 48px;
        }
        input[type=submit]{
          width: 20px;
          height: 20px;
          position: absolute;
          padding:0;
          right: 30px;
          top:0;
          bottom:0;
          margin: auto;
          text-indent: -999px;
          overflow: hidden;
          color:#999999;
          background: url(../img/ser.png) no-repeat center;
          background-size: 100%;
        }
      }
      .button{
         width: 280px;
         input{
          width: 100%;
          background:#aacd06;
          font-size: 14px;
          color:#ffffff;
         }
      }
      input{
        border:none;
        outline: none;
        background:none;
        height: 60px;
      }

    }
   }
}


  .m768{
    display: none;
  }
  .pc768{
    display: block;
  }

.wel-tit{
  color:#f1f1f1;
  line-height: 1;
  .en{
     font-size: 2rem;
     font-family: "din";
  }
  .cn{
    font-size: (26rem/40);
    margin-top: .75rem;
  }
  &.active{
    color:#333333;
  }
}
.wel-products{
  position: relative;
  .wel-tit{
    padding:0 2.5rem;
    top: (95rem/40);
    position: absolute;
    z-index: 3;
  }
  .products-more{
    position: absolute;
    right: 2.5rem;
    top: 2.5rem;
    z-index: 3;
  }
  .items-left,.items-right{
    height: (1080rem/40);
    width: 50%;
    padding: 2.5rem;
    padding-top: (300rem/40);
  }
  .items-left{
    padding-right: 130px;
  }
  .items-right{
    padding-left: 130px;
  }

  .images{
    position: absolute;
    left:0;
    right:0;
    width: (225rem/40);
    height: (600rem/40);
    top: (250rem/40);
    margin: auto;
  }
  .swiper-button-prev,.swiper-button-next{
    width: 33px;
    height: 33px;
    top: 100px;
    transition: .5s ease-in-out;
    opacity: 1!important;
    &:hover{
      transition:.5s ease-in-out;
    }
  }
  .swiper-button-prev{
    left: 40px;
    background: url(../img/j0.png) no-repeat center;
    background-size: 20px 20px;
    &:hover{
      background: url(../img/j3.png) no-repeat center;
      background-size: 33px 33px;
    }
  }
  .swiper-button-next{
    right: 40px;
    background: url(../img/j1.png) no-repeat center;
    background-size: 20px 20px;
    &:hover{
      background: url(../img/j2.png) no-repeat center;
      background-size: 33px 33px;
    }

  }
  .buttons{
    width: 365px;
    height: (165px);
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    background: url(../img/m21.png) no-repeat center;
    background-size: 100%;
    z-index: 3;
    .but-img{
      width: 80px;
      height: 80px;
      position: absolute;
      left:0;
      right:0;
      top: 0;
      margin: auto;
      background:#ffffff;
      border-radius: 50%;
      .i{
        position: absolute;
        width: 100%;
        height: 100%;
        left:0;
        top:0;
        border-radius: 50%;
        z-index: 3;
        opacity: 0;
          &:after,&:before{
            content:"";
            height: 0;
            width: 100%;
            background:url(../img/m22.png) no-repeat left top;
            background-size: 100%;
            transition: 3s ease-in-out;
            position: absolute;
            opacity: 0;
          }
           &:after{
              left:0;
              top:0;
           }
          &:before{
            transform: rotate(180deg);
            right: 0;
            bottom: 0;
          }
        &.active{
          opacity: 1;
           &:after,&:before{
            height:100%;
             transition: 3s ease-in-out;
             opacity: 1;
           }
          &:after{
              
          }
          &:before{
            transition-delay: 1.45s;
          }
        }
      }
    }
  }
}
.wel-principle{
  padding-top: (95rem/40);
  padding-bottom: (100rem/40);
  .list{
    width: 980px;
    margin:0 auto;
    text-align: center;
    .items{
      display: none;
      font-size: 16px;
      line-height: 36px;
      color:#666666;
    }
    .images{
      max-width: 80%;
      margin:0 auto;
    }
    .words{
      padding-top: (50rem/40);
      padding-bottom: (50rem/40);
    }
    .tit{
       font-size: .75rem;
       line-height: 1.2;
       color:#333333;
       font-weight: bold;
       margin-bottom: .5rem;
    }
  }
  .list-bot{
    font-size: 0;
    height: 60px;
    line-height: 60px;
    border-radius: 60px;
    border:1px solid #aacd06;
    display: inline-block;
    overflow: hidden;
    .li{
      font-size: 16px;
      color:#aacd06;
      display: inline-block;
      width: 165px;
      transition:.5s ease-in-out;
      cursor: pointer;
      &:hover,&.active{
        color:#ffffff;
        background:#aacd06;
        transition:.5s ease-in-out;
      }

    }
  }

}

.wel-team{
  .swiper-pagination{
    position: static;
    width: auto;
  }
  .items{
    height: (1080rem/40);
    line-height: 1.2;
    .items-left,.items-right{
      height: 100%;
    }
    .items-right{
      width: (630rem/40);
      .bot{
          font-size: (24rem/40);
          color:#333333;
          padding: (50rem/40);
          padding-bottom: (10rem/40);
          .cn{
            margin-top: .5rem;
          }
          .en{
            color:#333333;
            font-size: 1rem;
            font-family: "Source Han Sans CN Light","Source Han Sans CN";
          }
      }
    }
    .items-left{
      width: calc(100% - (630rem/40));
      background:#fbfbfb;
      padding:(95rem/40) (100rem/40);
      overflow-y:auto;
    }
    .img{
       width: 270px;
       height: 90px;
       overflow: hidden;
       margin-top: (80rem/40);
       margin-bottom: 2.2rem;
    }
    .tit{
       font-size: 1rem;
       color:#000000;
       font-weight: bold;
    }
    .p{
       font-size: 16px;
       line-height: 35px;
       margin-top: .75rem;
       margin-bottom: 2.5rem;
    }

  }

  .buttons{
    position: absolute;
    width: (630rem/40);
    right:0;
    bottom:0;
    z-index: 5;
    padding:0 (50rem/40);
    padding-bottom: (95rem/40);
    .swiper-pagination{
      display: inline-block;
      font-size: 16px;
      font-family: "beba";
      line-height: .8;
      .swiper-pagination-current{
         font-size: (60rem/40);
         color:#aacd06;
      }
    }
    .spanbox{
      line-height: 1;
    }
    .swiper-button-prev,.swiper-button-next{
      margin: 0;
      display: inline-block;
      width: 55px;
      height: 36px;
      padding:0 35px;
      position: relative;
      &:after{
        position:absolute;
        width: 1px;
        height: 90%;
        content: "";
        background:#eeeeee;
        opacity: 0;
        top:0;
        bottom:0;
        margin: auto;
      }
    }
    .swiper-button-prev{
      left: 0;
      padding-left: 0;
      background:url(../img/m6.png) no-repeat left;
      background-size: 20px 36px;
      &:hover{
        background:url(../img/m7.png) no-repeat left;
        background-size: 20px 36px;
      }
    }
    .swiper-button-next{
      padding-right: 0;
      background:url(../img/m8.png) no-repeat right;
      background-size: 20px 36px;
      right: 0;
      &:after{
        left:0;
        opacity: 1;
      }
      &:hover{
        background:url(../img/m9.png) no-repeat right;
        background-size: 20px 36px;
      }
    }

  }
}

/*@keyframes myfirst{0%{transform:scale(.4);opacity:1}100%{transform:scale(1);opacity:0}}*/
.con-tittipbox{
  height: 130px;
  &.on{
    height: 65px;
  }
}
.con-tittip.fixed{
  position: fixed;
  width: 100%;
  left:0;
  top:0;
  z-index: 30;
}
.wel-system{
  background:url(../img/a18.jpg) repeat top left;
  padding-top: (150rem/40);
  position: relative;
  overflow: hidden;
  .principle-tit{
    position: absolute;
    padding: 0 (100rem/40);
    width: 100%;
    left: 0;
    top: (95rem/40);
  }
  .images{
    position: relative;
    img{
      display: block;
    }
    .i{
      position: relative;
      width: (990rem/40);
      height: (990rem/40);
      margin:0 auto;
      top: 15px;
      .i1{
        position: relative;
        z-index: 3;
      }
      .i0{
        /*position: absolute;*/
        left:0;
        top:0;
        /*animation: myfirst 2s infinite linear 1s;*/
        /*transform: scale(0);*/
      }
    }
    .items{
      position: absolute;
      min-height: 100px;
      line-height: 100px;
      box-sizing: border-box;
      font-size: 20px;
      color:#333333;
      transition:.5s ease-in-out;
      cursor: pointer;
      .tit{
         font-size: 32px;
         
         font-weight: bold;
         line-height: 40px;
      }
      .txt{
        line-height: 30px;
        margin-top: 10px;
      }
      .span{
        display: inline-block;
        vertical-align: middle;
      }
      .img{
         width: 100px;
         height: 100px;
         background:url(../img/j5.png) no-repeat center;
         background-size: 100%;
         transition:.5s ease-in-out;
         position: absolute;
         top:0;
         bottom:0;
         margin:auto;
         img{
          transition: .5s ease-in-out;
         }
         .i1{
            opacity: 0;
            position: absolute;
            left:0;
            top:0;
         }
      }
      &:hover,&.active{
        color:#aacd06;
        .img{
           background:url(../img/j6.png) no-repeat center;
           background-size: 100%;
          transition:.5s ease-in-out;
           img{
            transition: .5s ease-in-out;
           }
           .i1{
              opacity: 1;
           }
           .i0{
            opacity: 0;
           }

        }
      }
    }
    .items1,.items3,.items5{
      left:0;
      padding-left: 120px;
      text-align: left;
      .img{
        left:0;
      }
    }
    .items2,.items4,.items6{
      right:0;
      padding-right: 120px;
      text-align: right;
      .img{
        right:0;
      }

    }
    .items1,.items2{
      top: (210rem/40);
    }
    .items3,.items4{
      top: (440rem/40);
    }
    .items5,.items6{
      top: (665rem/40);
    }




    .items1{
      top: (210rem/40);
    }
  }


}

.wel-cases{
   background:#f5f5f5;
   padding-top: (95rem/40);
   padding-bottom: (120rem/40);
   .cases-swiper{
      margin-top: 2rem;
   }
   .items{
      display: block;
      background:#ffffff;
      font-size: 16px;
      color:#666666;
      .images{
        overflow: hidden;
        img{
          transition:.5s ease-in-out;
          width: 100%;
        }
      }
      .words{
        padding:.75rem;
      }
      .tit{
         font-size: (26rem/40);
         line-height: (32rem/40);
         height: (32rem/40);
         color:#333333;
         font-weight: bold;
      }
      .txt{
        line-height: 26px;
        height: 52px;
        @include center(2);
        margin-top: (15rem/40);
        margin-bottom: (25rem/40);
      }
      .more{
         font-size: 14px;
         color:#999999;
         display: inline-block;
         padding-right: 35px;
         box-sizing: border-box;
         line-height: 1;
         position: relative;
         vertical-align: top;
         &:after{
          content:"";
          position: absolute;
          background:url(../img/m24.png) no-repeat center;
          width: 20px;
          height: 7px;
          right:0;
          top:0;
          bottom:0;
          margin: auto;
         }
      }
      &:hover{
        .images{
          img{
            transition:.5s ease-in-out;
            transform:scale3d(1.05,1.05,1);
          }
        }
      }
   }
   .buttons{
     margin-top: 1rem;
     .swiper-button-prev{
        margin-right: (35rem/40);
     }
     .swiper-button-prev,.swiper-button-next{
      background-color:#ffffff;
       &:hover{
        background-color:#aacd06;
       }
     }
   }
}

.wel-layout{
  padding-top: (95rem/40);
  padding-bottom: (105rem/40);
  .principle-tit{
    margin-bottom: 60px;
  }
  }
    .layout-map{
      position: relative;
      .img{
        position: relative;
        width: 1200px;
        margin:0 auto;
      }
      .list{
        position: absolute;
        left:0;
        bottom:25px;
        font-size: 0;
        width: 190px;
        .li{
          font-size: 16px;
          color:#666666;
          line-height: 50px;
          display: inline-block;
          vertical-align: top;
          width: 50%;
          &.active{
            color:#abcd06;
          }
        }
      }
      .words{
        position: absolute;
        background:#ffffff;
        width: 380px;
        height: 200px;
        border-radius: 5px;
        left: 50%;
        top: 50%;
        box-shadow: 0 0 20px 8px rgba(0,0,0,.05);
        margin-left: 85px;
        margin-top: -90px;
        font-size: 16px;
        color:#666666;
        padding:.5rem;
        .tit{
           font-size: 22px;
           line-height: 30px;
           height: 30px;
           @include center(1);
           font-weight: bold;
        }
        .p{
          line-height: 20px;
          margin-top: 12px;margin-bottom: 15px;
        }
        .txt{
          text-underline-position: 1.2;
        }
        .num{
          font-size: 26px;
          font-family: "beba";
          color:#aacd06;
          line-height: 1;
          margin-top: 13px;
        }
        &:after{
          position:absolute;
          content:"";
          width: 18px;
          height: 15px;
          left:0;
          right: 0;
          bottom: -15px;
          background:url(../img/m26.png) no-repeat center;
          background-size: 100%;
          margin: auto;
        }
      }
    }

    .searbox-num{
        padding-left: 65px;
        position: relative;
        font-size: 15px;
        color:#999999;
        line-height: 1.2;
        text-align: left;
        .tit{
          font-weight: bold;
          font-size: .75rem;
          font-family: "beba";
          color:#333333;
          margin-bottom: 10px;
        }
         span{
          display: inline-block;
          width: 50px;
          height: 50px;
          background:url(../img/m18.png) no-repeat center;
          background-size: 100%;
          left:0;
          top:0;
          bottom:0;
          margin: auto;
          position: absolute;
         }

    }

    .wel-institution.about-institution{
          padding-top: 2.5rem;
        padding-bottom: (200rem/40);
        .list{
          margin-top: (190rem/40);
        }
    }

    .wel-protection{
      height: 1080px;
      padding-top: (100rem/40);
      padding-bottom: (100rem/40);
      .list{
        margin-top: 80px;
        font-size: 0;
        text-align: center;
        .img{
          width: 60px;
          height: 60px;
          position: relative;
          margin: auto;
          display: inline-block;
          img{
            transition:.5s ease-in-out;
          }
          .i1{
            position: absolute;
            left:0;
            top:0;
            opacity: 0;
          }
        }
        .items{
          font-size: 18px;
          display: inline-block;
          background:#ffffff;
          width: 32%;
          margin-left: 2%;
          padding: (45rem/40) (50rem/40);
          padding-bottom: (25rem/40);
          text-align: left;
          vertical-align: top;
          color:#333333;
          transition:.5s ease-in-out;
          &:hover{
            color:#aacd06;
            transition:.5s ease-in-out;
            .img{
              img{
                transition:.5s ease-in-out;
              }
              .i0{
                opacity: 0;
              }
              .i1{
                opacity: 1;
              }
            }
          }
          &:nth-child(3n+1){
            margin-left:0;
          }
          .txt{
            line-height: 24px;
            min-height: 48px;
            overflow: hidden;
          }
          .tit{
             font-size: .75rem;
             line-height: 1.2;
             font-weight: bold;
             margin-top: .75rem;
             margin-bottom: (15rem/40);
          }

        }
      }

      .list-bot{
        margin-top: 2rem;
        text-align: right;
        .tit0{
           font-size: (44rem/40);
           color:#333333;
           line-height: 1.2;
           font-weight: bold;
        }
        .txt0{
           font-size: 18px;
           color:#333333;
           line-height: 24px;
           margin-top: (20rem/40);
           margin-bottom: .75rem;
        }
        .searbox-num{
          display: inline-block;
        }
        .wel-more{
          text-align: left;
        }
        .more-b{
          margin-top: (85rem/40);
        }
      }
    }

    .wel-products{
      .items-right{
        line-height: 1.2;
        color:#333333;
        .t0{
           font-size: 17px;
           
        }
        .t1{
          font-size: (50rem/40);
          font-weight: bold;
          margin-top: (15rem/40);
        }
        .t4,
        .t2{
          font-size: (64rem/40);
          font-family: "beba";
        }
        .t2{
          margin-top: (90rem/40);
        }
        .t3{
          font-size: 16px;
          margin-top: (15rem/40);
        }

      }

      .items-left{
         font-size: 15px;
         color:#ffffff;
         .txt{
           line-height: 30px;
         }
         .tit-top,.tit-center,.tit-right{
          width: 455px;
         }
         .tit-top{
          padding-bottom: (45rem/40);
          border-bottom: 1px solid rgba(255,255,255,.3);
          .tit{
             font-size: (50rem/40);
             font-weight: bold;
             line-height: 1.2;
          }
          .txt{
            font-size: 18px;
            line-height: 28px;
            margin-top: (15rem/40);
          }

         }
         .tit-bot{
          margin-top: (115rem/40);
         }

         .tit-center{
          padding-top: (45rem/40);
            .tit{
              font-size: 24px;
              line-height: 34px;
              margin-bottom: 12px;
            }

         }
      }

    }
    .web-bot-mbox{
      height: 50px;
      background: #f2f2f2;
    }
    .fgh{
      .i{
        position: relative;
        img{
          display: block;
        }
        .i1{
         position: absolute;
         left:0;
         top:0;
         opacity: 0;
        }
      }
    }

    .web-bot-mbox .list{
      font-size: 0;
      text-align: center;
      height: 100px;
      border-radius: 100px;
      background:#ffffff;
      line-height: 50px;
      box-shadow: 0 0  10px 5px rgba(0,0,0,.05);
      padding:0 10%;
      position: relative;
      .items{
        display: inline-block;
        vertical-align: top;
        width: 25%;
        .items-top{
            width: 28px;
            height: 28px;
            display: inline-block;
            vertical-align: middle;
            position: relative;
        }
      }
      .items4{
        .items-bot{
           font-size: 20px;
           width: 170px;
           text-align: center;
           display: inline-block;
           padding:0 10px;
           top: -30px;
           right:0;
           color:#cfab6f;
           position: absolute;
           line-height: 30px;
           background:#ffffff;
           border-radius: 5px;
           display: none;
           &:after{
              position: absolute;
              content: "";
              width: 18px;
              height: 15px;
              left: 0;
              right: 0;
              bottom: -15px;
              background: url(../img/m26.png) no-repeat center;
              background-size: 100%;
              margin: auto;
           }
        }
      }
    }



  .wel-products .items-right .bbox div{
    transform: translateX(30%);
    opacity: 0;
  }

 .wel-products .swiper-slide-active .items-right .bbox div{
      transition: 1s ease-in-out;
      transform: translateX(0);
      opacity: 1;
  }
 .wel-products .swiper-slide-active .items-right .bbox div:nth-child(1){
    transition-delay: .1s;
  }
 .wel-products .swiper-slide-active .items-right .bbox div:nth-child(2){
    transition-delay: .1s;
  }
 .wel-products .swiper-slide-active .items-right .bbox div:nth-child(3){
    transition-delay: .3s;
  }
 .wel-products .swiper-slide-active .items-right .bbox div:nth-child(4){
    transition-delay: .3s;
  }
 .wel-products .swiper-slide-active .items-right .bbox div:nth-child(5){
    transition-delay: .5s;
  }
 .wel-products .swiper-slide-active .items-right .bbox div:nth-child(6){
    transition-delay: .5s;
  }



  .wel-products .items-left{
    /*transform: translateX(-30%);*/
    opacity: 0;
  }
  .wel-products .swiper-slide-active  .items-left{
      transition: 1s ease-in-out;
      /*transform: translateX(0);*/
      opacity: 1;
  }
  .wel-products .images img{
    opacity: 0;
    transition: .5s ease-in-out;
  }
  .wel-products .swiper-slide-active .images img{
    opacity: 1;transition: .5s ease-in-out;
    transition-delay: .5s;
  }

  .wel-team .items .items-left{
    opacity: 0;
    filter: alpha(opacity=0);
     transform: translateX(-30%);
  }

  .wel-team .swiper-slide-active .items .items-left{
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translateX(0);
    transition: .8s ease-in-out .4s;
  }
  .wel-team .items .items-right{
    .top{
      opacity: 0;
    }
  }

  .wel-team .swiper-slide-active .items .items-right{
    .top{
      opacity: 1;
      transition: .5s ease-in-out;
      transition-delay: .1s ;
    }
  }
   .about-institution .items{
      transition: .5s ease-in-out;
   }
  .about-institution .items:hover{
      transition: .5s ease-in-out;
    box-shadow: 0 0 10px 5px rgba(0,0,0,.05);
  }



.wel-system .images .i .i2{
  width: (515rem/40);
  height: (515rem/40);
  border-radius: 50%;
  overflow: hidden;
  left: 0;
  position: absolute;
  right: 0;
  top:0;
  bottom:0;
  margin: auto;
  .i-img{
    position: absolute;
    left:0;
    top:0;
    opacity: 0;
    transition:.5s ease-in-out;
    &.active{
      opacity: 1;
      transition:.5s ease-in-out;
    }
  }

}

@keyframes fmove
{
  from {transform:translateY(5px);}
  to {transform:translateY(-5px);}
}
.layout-map .words{
    animation: fmove 2s linear 1s infinite alternate;
}

.contact-list2{
    background: #fff;
    padding: 55px 5.2% 150px 5.2%;
}
.contact2-items{
    font-size: 0;
}
.contact2-item{
    width: 48.2%;
    box-sizing: border-box;
    display: inline-block;
    margin-top: 25px;
}
.contact2-item input{
    width: 100%;
    border:none;
    padding: 25px 0;
    font-size: 16px;
}
.contact2-item input::-webkit-input-placeholder{
    color:#888;
}
.contact2-item2,.ct2-tjly{
    margin-right: 3.6%;
} 

.contact2-item {
    width: 48.2%;
    box-sizing: border-box;
    display: inline-block;
    margin-top: 25px;color: rgb(207, 171, 111);
}
.contact2-item2, .ct2-tjly {
    margin-right: 3.6%;
}
.contact-list2{
  .pre{
    position: relative;
  }
  .pro{
    position: absolute;
  }
}

.s1{
    width: 100%;
    height: 1px;
    display: block;
    background: #888;
    top:0;
}
.about-profile{
  padding-bottom: 2rem;
}
.s2{
    width: 0;
    height: 1px;
    display: block;
    background: #aacd06;
    top:0;
    transition: all .5s linear ;
}

.contact2-btnall {
    margin-top: 75px;
    font-size: 0;
}
.contact2-area textarea {
    width: 100%;
    height: 100px;
    font-size: 16px;
    border: none;
    transition: all .5s linear;
    resize: none;
}

.contact2-area {
    margin-top: 60px;
}
.contact2-btnall a,.contact2-btnall input {
      padding: 0;
    border:none;
    background:none;
    outline: none;
    width: 48%;
    height: 58px;
    background: #fff;
    border: 1px solid #e8e8e8;
    text-align: center;
    line-height: 58px;
    color: #999;
    transition: all .2s ease;
    display: inline-block;
    font-size: 15px;
    transition:.5s ease-in-out;
    &:hover{
      color:#aacd06;
      border-color:#aacd06;
      transition:.5s ease-in-out;
    }

}
.contact2-items3{
  margin-top: .75rem;
  .contact2-item2{
    position: relative;
    img{
      max-height: 80%;
      top: 0;
      right: 0;
      bottom:0;
      margin: auto;
    }
  }
}

.about-profile .profile-bot .items .en{
  font-weight: bold;
  height: 1.5rem;
}

.about-path .path-swiper-top .words .tit span{
  font-weight: normal;
}

.selbotbox{

  position: relative;
  .select-bx{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    background:#ffffff;
    height: 100%;
    z-index: 3;
    display: none;
    .items-top{
      font-weight: bold;
      .items{
        background:#ffffff;
      }
    }
    .items-bot{
      overflow-y:auto;
      height: calc(100% - 60px);
      position: relative;
      &:after{
        content:"";
        position: absolute;
        width:12px;
        height: 7px;
        background:url(../img/n2.png) no-repeat center;
        background-size: 100%;
        right: 10px;
        top:0;
        bottom:0;
        margin: auto;
      }
    }
    .items{
      height: 60px;
      line-height: 60px;
      background:#f9f9f9;
      font-size: 20px;
      color:#666666;
      padding:0 .75rem;
      border:1px solid #e5e5e5;
      cursor: pointer;
      &:hover{
        background:#fdfff6;
      }
    }
  }

}