/* banner */
  .swiper-container {
      width: 100%;

  }

  .swiper-slide {
      text-align: center;
      font-size: 18px;


      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;

  }

  .swiper-slide a {
      width: 100%;
      height: 100%;
  }

  .swiper-pagination-bullet {
      width: 80px;
      height: 6px;
      display: inline-block;
      background: #FFFFFF;
      border-radius: 5px;
      opacity: .3;

  }

  .swiper-pagination-bullet-active {
      background-color: #FFFFFF !important;
      opacity: 1 !important;
  }

  .swiper-wrapper img {
      width: 100%;
  }


 

  /* hexin */
  .hx {
      width: 100%;
      padding-top: 80px;
      padding-bottom: 80px;
      background-image: linear-gradient(to right, #040000, #262A31, #262A31);
  }

  .hx-div {
      width: 80%;
      margin: auto;
      text-align: center;
  }

  .hx-div h3 {

      font-size: 29px;
      font-family: 'alibb-l';

      color: #FFFFFF;
  }

  .swiper-container-hx {
      overflow: hidden;
      margin-top: 80px;

  }

  .swiper-container-hx .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      padding-bottom: 60px;
      display: inline-block;
      background: 0;
  }

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

  }

  .swiper-container-hx .swiper-slide h3 {
      margin-top: 40px;
      font-size: 31px;
      font-family: 'alibb-m';
      color: #F5F5F5;

  }

  .swiper-container-hx .swiper-slide p {
      font-size: 16px;
      font-family: 'alibb-l';
      color: #FFFFFF;
  }

  /* about */
  .about {
      width: 100%;
      height: 700px;
      background: #FFFFFF;
  }

  .about-s {
      padding-bottom: 60px;
      padding-top: 40px;
  }

  .about-div {
      width: 80%;
      margin: auto;
      text-align: center;
  }

  .about-div h3 {

      margin: auto;
      font-size: 40px;
      font-family: 'alibb-r';
      color: #3D3A39;
      margin-top: 60px;
      margin-bottom: 20px;
  }

  .ab-title {
      margin-bottom: 100px;
  }

  .ab-title span {
      font-size: 23px;
      font-weight: 20;
      color: #636160;
      line-height: 62px;
      padding-left: 20px;
      padding-right: 20px;
      cursor: pointer;

  }

  .ab-title span:nth-child(1) {

      border-right: 1px solid #636160;

  }

  .ab-title span:nth-child(2) {

      border-right: 1px solid #636160;
  }

  .gs-left {
      border-right: 2px solid #2B2F37;
  }

  .gs-left img {
      width: 100%;
      height: 100%;
      padding-right: 50px;
  }

  .gs-right {
      padding-left: 50px !important;
      height: 400px;
      text-align: left;

  }

  .gs-right span {
      font-size: 20px;
      font-family: 'alibb-l';
      color: #3D3A39;
      line-height: 52px;
      text-align: left;

  }

  .t-active {
      color: #00a33b !important;
  }

  .gs {
      display: none;
  }

  .c-active {
      display: block !important;
  }

  .tuandui div {
      position: relative;
  }

  .ac-icon {
      width: 60px;
      height: 60px;
  }

  .ac1 {
      position: absolute;
      top: 11%;
      left: 12%;
      animation: float .8s linear;
  }

  .ac2 {
      position: absolute;
      top: 37%;
      left: 15%;
      animation: float .8s linear;
  }

  .ac3 {
      position: absolute;
      top: 10%;
      left: 35%;
      animation: float .8s linear;
  }

  .ac4 {
      position: absolute;
      top: 31%;
      left: 43%;
      animation: float .8s linear;
  }

  .ac5 {
      position: absolute;
      top: 10%;
      left: 52%;
      animation: float .8s linear;
  }

  .ac6 {
      position: absolute;
      top: -2%;
      left: 61%;
      animation: float .8s linear;
  }

  .ac7 {
      position: absolute;
      top: 36%;
      left: 71%;
      animation: float .8s linear;
  }

  .ac8 {
      position: absolute;
      top: 46%;
      left: 82%;
      animation: float .8s linear;
  }

  .gs-tuandui img {
      width: 70% !important;
  }

  @keyframes float {
      0% {
          transform: translateY(0px);
      }

      50% {
          transform: translateY(-20px);
      }

      100% {
          transform: translateY(0px);
      }
  }

  /* number  */
  .number {
      width: 100%;

      padding-top: 100px;
      height: 800px;
      background-image: linear-gradient(to right, #040000, #262A31, #262A31);
  }

  .number-div {
      width: 80%;
      margin: auto;
      text-align: center;
  }

  .number-div h1 {

      font-size: 75px;
      font-family: 'alibb-m';
      color: #E6CF97;

  }

  .number-div p {

      font-family: 'alibb-m';
      font-size: 25px;
      color: #FFFFFF;

  }

  .number-div li {
      padding-top: 60px;
      padding-bottom: 60px;
  }

  .nt {

      border-bottom: 1px solid #FFFFFF;
  }

  .nl h1 {

      margin: 0px;
      padding-top: 15px;
  }

  .nl p {
      border-right: 1px solid #FFFFFF;
      margin: 0px;
      padding-bottom: 15px;
  }

  .nr h1 {
      margin: 0px;
      padding-top: 15px;
  }

  .nr p {
      margin: 0px;
      padding-bottom: 15px;
  }

  .number-div div {
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
  }

  .dr {
      border-right: 1px solid #FFFFFF;
  }
 /* product */


 .product {
    width: 100%;
    position: relative;
    padding-top: 10vh;
    padding-bottom: 30vh;
    background: #FFFFFF;
}

.cailiao-header {
    width: 30%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20vh;
    padding-bottom: 2vh;
    border-bottom: 1px solid #D3D4DA;
    position: relative;


}

.cailiao-header a {

    font-size: 31px;
    color: #777777;
    font-weight: 500;
   
    line-height: 42px;
}
.chactive{
    color: #010101 !important;
}
.cailiao-xian {
    position: absolute;
    bottom: 0px;
    width: 35%;
    left: 6%;
    color: #00A736;
    background-color: #00A736;
    border-bottom: 3px solid #00A736;
}

.cailiao-content {
    width: 61%;
   
    margin: auto;
}

.content-item {
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: left;
    display: none;
    height:61vh;
}

.ciactive {
    display: flex !important;
}

.content-item img {
    box-shadow: 0px 0px 3px #777777;
}

.item1 span {

    font-size: 28px;

    font-weight: 400;
    color: #FFFFFF;
    line-height: 42px;
}

.item-x {
    width: 30px;
    height: 1px;
    background: #565657;
}

.cc span {

    font-size: 15px;

    font-weight: bold;
    color: #565657;
    line-height: 44px;
}

.item2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item1 {

    padding-top: 3vh;
    padding-left: 4vh;
}

.jz1 {
    background: url(/public/static/home/index/jz1.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.ny1{
    background: url(/public/static/home/index/ny1.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.item2-1 {

    padding-top: 3vh;
    padding-left: 4vh;
}

.jz2-1 {
    background: url(/public/static/home/index/jz2-1.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.ny2-1{
    background: url(/public/static/home/index/ny2-1.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.item2-2 {

    padding-top: 3vh;
    padding-left: 4vh;
}

.jz2-2 {
    background: url(/public/static/home/index/jz2-2.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.ny2-2{
    background: url(/public/static/home/index/ny2-2.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.item3 {

    padding-top: 3vh;
    padding-left: 4vh;
}

.jz3 {
    background: url(/public/static/home/index/jz3.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.ny3{
    background: url(/public/static/home/index/ny3.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.item1 {
    width: 25%;
   
    box-shadow: 1px 1px 3px #565657;
    cursor: pointer;
    transition: all 0.6s;
}

.item1:hover {
    transform: scale(1.1);
}

.item3:hover {
    transform: scale(1.1);
}

.item2-2:hover {
    transform: scale(1.1);
}

.item2-1:hover {
    transform: scale(1.1);
}

.item2 {
    width: 40%;
   
}

.item2-2,
.item2-1 {
    height: 49.3%;
    box-shadow: 1px 1px 3px #565657;
    cursor: pointer;
    transition: all 0.6s;
}

.item3 {
    width: 30%;
 
    box-shadow: 1px 1px 3px #565657;
    cursor: pointer;
    transition: all 0.6s;

}