@charset "UTF-8";
/* 定义flex布局 */
/* 定义flex布局 是横向还是纵向布局 */
/*定义flex 超出换行*/
.ban {
  overflow: hidden;
  position: relative;
  top: 0;
  width: 100%;
  height: 25.6875rem;
}
@media screen and (max-width: 960px) {
  .ban {
    height: calc(var(--s) * 420 * 1px);
  }
}
.ban .carousel-inner {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ban .carousel-inner .ban-img {
  width: var(--n);
  display: block;
  height: 25.6875rem;
}
@media screen and (max-width: 960px) {
  .ban .carousel-inner .ban-img {
    height: calc(var(--s) * 420 * 1px);
  }
}
.ban .ban-left,
.ban .ban-right {
  position: absolute;
  width: 5rem;
  height: 5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
}
@media screen and (max-width: 960px) {
  .ban .ban-left,
  .ban .ban-right {
    height: calc(var(--s) * 420 * 1px);
  }
}
.ban .ban-left {
  left: 10rem;
}
.ban .ban-right {
  right: 10rem;
}
.ban .indicator {
  position: absolute;
  z-index: 99;
  bottom: 1.25rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ban .indicator span {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 0 0.3125rem;
}
.ban .indicator span.active {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 0.3125rem;
}

.about {
  width: 100%;
  height: 49.875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 1908px) {
  .about {
    height: auto;
    padding-bottom: 5rem;
  }
}
.about .about-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: 16.875rem;
}
@media screen and (max-width: 117.5rem) {
  .about .about-center {
    margin: calc(var(--s) * 25 * 1px);
  }
}
.about .about-center .about-center-left {
  width: 43.125rem;
}
@media screen and (max-width: 117.5rem) {
  .about .about-center .about-center-left {
    width: 100%;
    margin-top: calc(var(--s) * 40 * 1px);
  }
}
.about .about-center .about-center-left .about-center-left-top {
  width: clamp(2rem, 8vw, 5.625rem);
  height: 0.125rem;
  background-color: #000;
}
.about .about-center .about-center-left .about-center-left-title-line {
  margin-top: clamp(0.625rem, 1.5vw, 1.25rem);
}
.about .about-center .about-center-left .about-center-left-title {
  margin-top: clamp(2rem, 5vw, 3.375rem);
}
.about .about-center .about-center-left .about-center-left-title .about-center-left-title-text {
  font-weight: bold;
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  color: #206453;
}
.about .about-center .about-center-left .about-center-left-title .about-center-left-title-line {
  font-size: clamp(1.25rem, 2.8vw, 1.875rem);
  font-weight: bold;
}
.about .about-center .about-center-left .about-center-left-content {
  margin-top: clamp(2.5rem, 6vw, 4.0625rem);
  font-size: clamp(0.875rem, 1.8vw, 0.9375rem);
  margin-right: 5rem;
}
.about .about-center .about-center-right {
  width: 58rem;
}
@media screen and (max-width: 117.5rem) {
  .about .about-center .about-center-right {
    width: calc(var(--s) * 700 * 1px);
  }
}
.about .about-center .about-center-right .about-center-right-img {
  width: 100%;
  height: 36.25rem;
  background: url("../image/index/BJ.png") no-repeat;
  background-size: cover;
  position: relative;
}
@media screen and (max-width: 117.5rem) {
  .about .about-center .about-center-right .about-center-right-img {
    margin-top: 2.5rem;
    width: 100%;
    height: 40rem;
  }
}
@media screen and (max-width: 980px) {
  .about .about-center .about-center-right .about-center-right-img {
    margin-top: 2.5rem;
    width: 100%;
    height: 20rem;
  }
}
.about .about-center .about-center-right .about-center-right-img .about-center-right-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 16.6875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(32, 100, 83)), color-stop(rgba(32, 100, 83, 0)), to(transparent));
  background: linear-gradient(to top, rgb(32, 100, 83), rgba(32, 100, 83, 0), transparent);
}
.about .about-center .about-center-right .about-center-right-img .about-center-right-bottom .about-center-right-bottom-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #fff;
  margin: 1.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.about .about-center .about-center-right .about-center-right-img .about-center-right-bottom .about-center-right-bottom-lists .about-center-right-bottom-lists-item .about-center-right-bottom-lists-item-image {
  width: 2.1875rem;
  height: 2.1875rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.about .about-center .about-center-right .about-center-right-img .about-center-right-bottom .about-center-right-bottom-lists .about-center-right-bottom-lists-item-text {
  font-size: 0.9375rem;
  margin-top: 0.625rem;
}

.products {
  width: 100%;
  height: 52.4375rem;
  background-color: #f8f8f8;
}
@media screen and (max-width: 960px) {
  .products {
    height: auto;
  }
}
@media screen and (min-width: 960px) and (max-width: 1380px) {
  .products {
    height: auto;
  }
}
.products {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.products .products-lists {
  width: 86.25rem;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .products .products-lists {
    padding: 1.5625rem;
  }
}
.products .products-lists .products-lists-title {
  font-size: 3.25rem;
  font-weight: bold;
  color: #206453;
}
.products .products-lists .products-lists-line {
  font-size: 1.875rem;
  font-weight: bold;
  margin-top: 1.5rem;
}
.products .products-lists .products-lists-content {
  margin-top: 3.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (min-width: 960px) and (max-width: 1080px) {
  .products .products-lists .products-lists-content {
    margin-left: 3.125rem;
  }
}
.products .products-lists .products-lists-content .products-lists-content-lists {
  width: 22.8125rem;
}
@media screen and (min-width: 960px) and (max-width: 1980px) {
  .products .products-lists .products-lists-content .products-lists-content-lists:first-child {
    margin-left: 0;
  }
  .products .products-lists .products-lists-content .products-lists-content-lists:last-child {
    margin-right: 0;
  }
  .products .products-lists .products-lists-content .products-lists-content-lists {
    margin-bottom: 1.5625rem;
  }
  .products .products-lists .products-lists-content .products-lists-content-lists:hover .products-lists-content-lists-bottom {
    background-color: #206453;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .products .products-lists .products-lists-content .products-lists-content-lists:hover .products-lists-content-lists-bottom .products-lists-content-lists-bottom-line {
    background-color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
}
@media screen and (max-width: 980px) {
  .products .products-lists .products-lists-content .products-lists-content-lists {
    width: 100%;
    margin: 0.9375rem auto;
  }
}
.products .products-lists .products-lists-content .products-lists-content-lists .products-lists-content-lists-image {
  width: 22.8125rem;
  height: 15.9375rem;
}
@media screen and (max-width: 980px) {
  .products .products-lists .products-lists-content .products-lists-content-lists .products-lists-content-lists-image {
    width: 100%;
  }
}
.products .products-lists .products-lists-content .products-lists-content-lists .products-lists-content-lists-bottom {
  height: 9.5625rem;
  padding: 0 3.125rem;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.products .products-lists .products-lists-content .products-lists-content-lists .products-lists-content-lists-bottom .products-lists-content-lists-bottom-title {
  font-size: 1.25rem;
  font-weight: bold;
}
.products .products-lists .products-lists-content .products-lists-content-lists .products-lists-content-lists-bottom .products-lists-content-lists-bottom-line {
  width: 2.9375rem;
  height: 0.25rem;
  background-color: #206453;
  margin: 1.125rem 0;
}
.products .products-lists .products-lists-content .products-lists-content-lists .products-lists-content-lists-bottom .products-lists-content-lists-bottom-content {
  font-size: 0.875rem;
  overflow: hidden; /*隐藏多出部分文字*/
  text-overflow: ellipsis; /*用省略号代替多出部分文字*/
  display: -webkit-box; /* 显示多行文本容器 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /*显示行数*/
}
.products .products-lists .products-lists-content-btn {
  margin: 1.5625rem auto;
  width: 22.8125rem;
  height: 5.4375rem;
  background-color: #206453;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.25rem;
}

.contact {
  width: 100%;
  height: 64.125rem;
  background: url("../image/index/LXBJ.png") no-repeat;
  background-size: cover;
}
@media screen and (max-width: 960px) {
  .contact {
    height: auto;
    padding-bottom: 3.125rem;
  }
}
@media screen and (min-width: 980px) and (max-width: 1380px) {
  .contact {
    height: auto;
    padding-bottom: 3.125rem;
  }
}
.contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.contact .contact-lists {
  width: 86.25rem;
  margin: 0 auto;
}
@media screen and (max-width: 960px) {
  .contact .contact-lists {
    padding: 0.9375rem;
  }
}
.contact .contact-lists .contact-lists-title {
  font-size: 3.25rem;
  font-weight: bold;
  color: #206453;
}
@media screen and (max-width: 960px) {
  .contact .contact-lists .contact-lists-title {
    margin-top: 2.8125rem;
  }
}
.contact .contact-lists .contact-lists-line {
  font-size: 1.875rem;
  font-weight: bold;
  margin-top: 1.5rem;
}
.contact .contact-lists .contact-lists-lists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.contact .contact-lists .contact-lists-lists .contact-lists-lists-item {
  width: 26.875rem;
  height: 10.9375rem;
  background-color: #fff;
  margin-top: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 960px) {
  .contact .contact-lists .contact-lists-lists .contact-lists-lists-item {
    width: 100%;
    margin: 0.9375rem auto;
  }
}
.contact .contact-lists .contact-lists-lists .contact-lists-lists-item .contact-lists-lists-item-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.contact .contact-lists .contact-lists-lists .contact-lists-lists-item .contact-lists-lists-item-icon .contact-lists-lists-item-icon-image {
  width: 1.5625rem;
  height: 1.8125rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.contact .contact-lists .contact-lists-lists .contact-lists-lists-item .contact-lists-lists-item-icon .contact-lists-lists-item-icon-text {
  font-size: 1.75rem;
  margin-left: 0.625rem;
}
.contact .contact-lists .contact-lists-lists .contact-lists-lists-item .contact-lists-lists-item-text {
  font-size: 1.875rem;
  text-align: center;
  margin-top: 0.625rem;
}
.contact .contact-lists .contact-lists-lists .contact-lists-lists-item .contact-lists-lists-item-content {
  font-size: 1.25rem;
  text-align: center;
  padding: 0 1.875rem;
  margin-top: 0.625rem;
}
.contact .contact-lists .contact-lists-content-image {
  width: 100%;
  height: 31.25rem;
  margin-top: 2.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 960px) {
  .contact .contact-lists .contact-lists-content-image {
    margin-top: 1.5625rem;
  }
}

.about-center-left-btn {
  margin-top: 7.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 10rem;
  height: 2.9375rem;
  border-radius: 50px;
  color: #fff;
  font-size: 0.875rem;
  background: -webkit-gradient(linear, left top, right top, from(#1f6353), to(#1bac9b));
  background: linear-gradient(to right, #1f6353, #1bac9b);
}
@media screen and (max-width: 117.5rem) {
  .about-center-left-btn {
    margin-top: calc(var(--s) * 40 * 1px);
  }
}
.about-center-left-btn .about-center-left-btn-text {
  margin-left: 0.9375rem;
}
.about-center-left-btn .about-center-left-btn-image {
  width: 2.0625rem;
  height: 2.0625rem;
  margin-right: 0.3125rem;
}