body {

  font-size: 14px;

  background-color: #fff;

  width: 100%;

  overflow-x: hidden;
}



.swiper {

  width: 100%;

  height: 100%;
}



.swiper-slide {

  text-align: center;

  font-size: 18px;

  background: #fff;

  display: flex;

  justify-content: center;

  align-items: center;
}



.swiper-slide img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;
}



.con {

  width: 1200px;

  margin: 0 auto;



}



.header {

  display: flex;

  background: #fff;

  padding: 0 65px;

  align-items: center;

  height: 64px;
}

.header .logo {
  width: 150px;
  margin-right: 62px;
}
.header .logo img{
  width: 100%;
}
.header .nav {

  display: flex;
}

.header .nav .li {

  /*width: 90px;*/

  text-align: center;

  position: relative;

  margin-right: 25px;
}

.header .nav .li>a {

  font-size: 16px;

  color: #222;

  text-decoration: none;

  height: 64px;

  line-height: 64px;

  display: block;

  transition: all .5s;
}

.header .nav .li .downmenu {

  position: absolute;

  left: 0;

  top: 64px;

  z-index: 22;

  width: 350px;

  background: #fff;

  border-top: 4px solid #0870d3;

  padding: 20px;

  display: none;
}

.header .nav .li .downmenu a {

  display: flex;

  margin-bottom: 20px;

  font-size: 14px;

  color: #222;

  text-decoration: none;
}

.header .nav .li .downmenu a:last-child {

  margin-bottom: 0;
}

.header .nav .li .downmenu a:hover {

  color: #0870d3;
}

.header .nav .on,
.header .nav .li:hover {

  /*.header .nav .li:hover {*/

  border-bottom: 4px solid #0870d3;
}

/*.header .nav .on .downmenu, .header .nav .li:hover .downmenu {*/

.header .nav .downmenu,
.header .nav .li:hover .downmenu {

  display: block;
}

.header .nav .on>a,
.header .nav .li:hover>a {

  color: #0870d3;

  font-weight: bold;

  transition: all .5s;
}

.header .lianxi {

  display: flex;

  justify-content: flex-end;

  flex: 1;
}

.header .lianxi .l {

  display: flex;

  align-items: center;

  font-size: 16px;

  color: #111;

  margin-right: 32px;
}

.header .lianxi .l img {

  margin-right: 7px;
}

.header .lianxi .r {

  color: #0870d3;

  font-size: 18px;

  margin-left: 18px;
}



.banner {
  min-height: 360px;
  position: relative;
}



.pagebanner {

  background: url("../images/a4.png") no-repeat;

  height: 360px;

  background-position: center;

  background-size: cover;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 42px;

  font-weight: bold;
}



.banner3 {

  background: url("../images/a5.png") no-repeat;

  background-position: center;

  background-size: cover;
}



.banner4 {

  background: url("../images/a12.png") no-repeat;

  background-position: center;

  background-size: cover;
}



.banner5 {

  background: url("../images/a8.png") no-repeat;

  background-position: center;

  background-size: cover;
}



.banner6 {

  background: url("../images/a9.png") no-repeat;

  background-position: center;

  background-size: cover;
}



.product {

  margin-bottom: 50px;
}

.product .title {

  text-align: center;

  font-size: 36px;

  font-weight: bold;

  padding: 45px 0;
}

.product .list {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;
}

.product .list .item {

  width: 380px;

  background: #fff;

  border-radius: 8px;

  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);

  margin-bottom: 30px;

  transition: all 0.5s;
}

.product .list .item .img {

  width: 100%;

  height: 290px;

  overflow: hidden;
}

.product .list .item .img img {

  width: 100%;
}

.product .list .item .bot {

  padding: 30px;
}

.product .list .item .bot .t1 {

  font-size: 22px;

  text-align: center;

  margin-bottom: 20px;

  font-weight: bold;

  color: #333;

  text-decoration: none;
}

.product .list .item .bot .t2 {

  font-size: 18px;

  line-height: 30px;

  color: #222222;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-decoration: none;
}

.product .list .item .bot .t3 {

  width: 38px;

  height: 38px;

  background: url("../images/a_07.jpg") no-repeat;

  background-size: 100% 100%;

  border-radius: 50%;

  margin: 0 auto;

  margin-top: 35px;
}

.product .list .item:hover {

  box-shadow: 0 0 15px 10px rgba(8, 112, 211, 0.3);

  transition: all 0.5s;
}

.product .list .item:hover .bot .t1 {

  color: #0870d3;
}

.product .list .item:hover .bot .t3 {

  background: url("../images/a_09.jpg") no-repeat;

  background-size: 100% 100%;

  border-radius: 50%;
}



.productdetail {

  /*margin-top: 30px;*/

  padding: 30px;

  background: #fff;

}

.productdetail .title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 28px;
}

.productdetail .title .l {

  font-size: 36px;

  font-weight: bold;
}

.productdetail .title .r {

  width: 200px;

  height: 50px;

  background: #0870d3;

  color: #fff;

  font-size: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  border-radius: 10px;
}

.productdetail .title .r img {

  margin-right: 10px;

}

.productdetail .bot {

  font-size: 18px;

  line-height: 30px;

  color: #222;
}

.productdetail .bot img {

  /*margin: 20px 0;*/

  max-width: 90%;

}



.index1 img {

  width: 100%;
}



.about {

  padding-top: 52px;

  margin-bottom: 50px;
}

.about .title {

  font-size: 42px;

  font-weight: bold;

  color: #222222;

  margin-bottom: 30px;

  text-align: center;
}

.about .title2 {

  font-size: 20px;

  color: #222222;

  margin-bottom: 54px;

  text-align: center;
}

.about .list {

  display: flex;

  /*justify-content: space-between;*/
}

.about .list .item {

  width: 380px;

  padding: 35px;

  background-color: #f7f9fb;

  border-radius: 8px;
}

.about .list .item .t {

  font-size: 24px;

  font-weight: bold;

  color: #222;

  margin-bottom: 20px;
}

.about .list .item .m {

  font-size: 18px;

  color: #222;

  line-height: 30px;

  margin-bottom: 32px;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-decoration: none;

  min-height: 60px;
}

.about .list .item .b {

  height: 40px;

  color: #fff;

  background-color: #0870d3;

  border-radius: 20px;

  padding: 0 24px;

  display: inline-block;

  line-height: 40px;

  text-align: center;

  text-decoration: none;

  transition: all .5s;
}

.about .list .item .b:hover {

  background-color: #ccc;

  color: #0870d3;

  transition: all .5s;
}



.contact {

  padding: 50px 0;
}

.contact .top {

  display: flex;

  margin-bottom: 50px;
}

.contact .top .item {

  width: 33.3%;

  text-align: center;
}

.contact .top .item .t {

  margin-bottom: 20px;
}

.contact .top .item .t img {

  margin: 0 auto;
}

.contact .top .item .m {

  font-size: 24px;

  font-weight: bold;

  color: #222;

  margin-bottom: 10px;
}

.contact .top .item .b {

  font-size: 20px;

  color: #222;
}

.contact .bot img {

  /*width: 100%; */

}



.tech {

  padding: 50px 0;
}

.tech .top {

  font-size: 18px;

  line-height: 30px;

  margin-bottom: 28px;
}

.tech .top a {

  display: block;

  margin-top: 20px;

  color: #0870d3;
}

.tech .mid {

  background-color: #333;

  color: #fff;

  padding: 0 15px;

  height: 32px;

  text-align: center;

  line-height: 32px;

  display: inline-block;

  font-size: 18px;

  margin-bottom: 20px;
}

.tech .bot {

  margin-bottom: 20px;

  line-height: 2;
}

.tech .bot span {

  font-weight: bold;

  color: #3779f4;
}



.footer {

  background-color: #0c1c3b;

  padding: 50px 0;
}

.footer .con {

  display: flex;

  color: #fff;
}

.footer .con .item {

  width: 33.3%;
}

.footer .con .item .t {

  font-size: 18px;

  color: #fff;

  margin-bottom: 20px;
}

.footer .con .item .b {

  display: flex;

  align-items: center;

  margin-bottom: 10px;
  font-size: 16px;
}

.footer .con .item .b img {

  margin-right: 10px;
}

.footer .con .item .b a {

  color: #fff;

  text-decoration: none;

  font-size: 16px;

  color: #bbbbbb;
}

.footer .con .item .b a:hover {

  color: #0870d3;
}

.footer .con .item:first-child .b {

  margin-bottom: 20px;
}



.footer2 {

  background-color: #081226;

  color: #fff;

  height: 100px;

  display: flex;

  align-items: center;

  font-size: 16px;

  justify-content: center;
}



.header .menu {

  display: none;
}



.application {

  padding: 50px 0;
}

.application .item {

  background: #fff;

  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);

  display: flex;

  margin-bottom: 30px;

  border-radius: 10px;

  overflow: hidden;
}

.application .item .left {

  width: 580px;

  height: 420px;

  overflow: hidden;

  background-color: #fafafa;
}

.application .item .left img {

  width: 100%;
}

.application .item .right {

  flex: 1;

  padding: 60px;
}

.application .item .right .t1 {

  font-size: 22px;

  color: #333;

  margin-bottom: 30px;
}

.application .item .right .line {

  width: 52px;

  height: 2px;

  background-color: #1b1b1b;

  margin-bottom: 30px;
}

.application .item .right .t2 {

  font-size: 18px;

  line-height: 30px;

  color: #222;
}

.application .item .right .t3 {

  width: 38px;

  height: 38px;

  background: url("../images/a_07.jpg") no-repeat;

  background-size: 100% 100%;

  border-radius: 50%;

  margin-top: 35px;
}

.application .item:hover {

  box-shadow: 0 0 15px 10px rgba(8, 112, 211, 0.3);

  transition: all 0.5s;
}

.application .item:hover .right .t1 {

  color: #0870d3;
}

.application .item:hover .right .line {

  background-color: #0870d3;
}

.application .item:hover .right .t3 {

  background: url("../images/a_09.jpg") no-repeat;

  background-size: 100% 100%;

  border-radius: 50%;
}



.product2 {

  padding-top: 50px;
}

.product2 .list .item {

  width: 580px;
}

.product2 .list .item .img {

  height: 420px;
}



.aboutus {

  padding: 50px 0;
}

.aboutus .title {

  font-size: 36px;

  font-weight: bold;

  color: #222;

  margin-bottom: 35px;

  text-align: center;
}

.aboutus .text p {

  font-size: 18px;

  line-height: 36px;

  color: #222;

  text-indent: 36px;
}



.lc {

  background: #FAFAFA;

  padding: 50px 0;
}

.lc .title {

  font-size: 36px;

  font-weight: bold;

  color: #222;

  margin-bottom: 35px;

  text-align: center;
}

.lc .bot {

  width: 100%;
}

.lc .bot .btns {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 35px;
}

.lc .bot .btns img {

  cursor: pointer;

  margin: 0 10px;
}

.lc .bot .box {

  width: 1200px;

  max-height: 100%;

  position: relative;

  height: 618px;

  padding-top: 10px;

  margin: 0 auto;

  overflow: hidden;
}

.lc .bot .box .mySwiper1 {

  width: 100%;

  overflow: hidden;

  height: 100%;

  position: relative;
}

.lc .bot .box .mySwiper1::after {

  content: '';

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #E5E5E5;

  z-index: 99;

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  bottom: 0;
}

.lc .bot .box .mySwiper1 .swiper-slide {

  width: 100%;

  background: none;

  height: auto;

  display: flex;

  align-items: center;

  position: relative;

  justify-content: flex-end;
}

.lc .bot .box .mySwiper1 .swiper-slide .label {

  width: calc(50%);

  position: relative;

  padding-left: 26px;

  text-align: left;
}

.lc .bot .box .mySwiper1 .swiper-slide .label::after {

  content: '';

  width: 18px;

  height: 2px;

  background: #D2D2D2;

  position: absolute;

  left: 0px;

  top: 15px;
}

.lc .bot .box .mySwiper1 .swiper-slide .label p {

  font-size: 30px;

  font-weight: bold;

  line-height: 1;

  margin-bottom: 8px;

  color: #222222;
}

.lc .bot .box .mySwiper1 .swiper-slide .label span {

  display: block;

  font-size: 17px;

  line-height: 30px;

  color: #222222;
}

.lc .bot .box .mySwiper1 .swiper-slide:nth-child(even) {

  justify-content: flex-start;
}

.lc .bot .box .mySwiper1 .swiper-slide:nth-child(even) .label {

  text-align: right;

  padding-right: 26px;

  padding-left: 0;
}

.lc .bot .box .mySwiper1 .swiper-slide:nth-child(even) .label::after {

  content: '';

  width: 18px;

  height: 2px;

  background: #D2D2D2;

  position: absolute;

  left: auto;

  right: 0;

  top: 15px;
}

.lc .bot .box::before {

  content: '';

  width: 2px;

  height: 100%;

  background: #D2D2D2;

  z-index: 99;

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  top: 0;
}

.lc .bot .box::after {

  content: '';

  width: 20px;

  height: 10px;

  background-image: url(../images/historys_03.jpg);

  background-size: 100% 100%;

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  top: 0;

  z-index: 99;
}

.detailbox {

  /*background: #EEE;*/

  width: 100%;

  height: 100%;

  padding-top: 45px;

  padding-bottom: 45px;

}

@media screen and (max-width: 750px) {

  .con {

    width: 100%;
  }

  .detailbox {

    /*background: #EEE;*/

    width: 100%;

    height: 100%;

    padding-top: 15px;

    padding-bottom: 15px;

  }

  .header {

    flex-wrap: wrap;

    height: auto;

    position: relative;

    height: 60px;

    background-color: #fff;

    padding: 0 20px;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid #eee;
  }

  .header .logo {

    width: 120px;
  }

  .header .logo img {

    width: 100%;
  }

  .header .menu {

    width: 30px;

    display: block;
  }

  .header .menu img {

    width: 100%;
  }

  .header .nav {

    position: absolute;

    left: 0;

    top: 60px;

    z-index: 11;

    background-color: #fff;

    width: 100%;

    display: none;
  }

  .header .nav .li {

    width: 100%;
  }

  .header .nav .li>a {

    height: auto;

    line-height: 60px;

    font-size: 16px;
  }

  .header .nav .li .downmenu {

    position: static;

    width: 100%;
  }

  .header .lianxi {

    display: none;
  }



  .product {

    margin-bottom: 0;
  }



  .product .title {

    font-size: 22px;

    padding: 20px 0;
  }



  .product .list {

    justify-content: space-between;

    padding: 0 2%;
  }



  .product .list .item {

    width: 48%;
  }



  .product .list .item .img {

    height: 135px;
  }



  .product .list .item .bot {

    padding: 15px;
  }



  .product .list .item .bot .t1 {

    font-size: 16px;

    margin-bottom: 10px;
  }



  .product .list .item .bot .t2 {

    font-size: 14px;

    line-height: 24px;
  }



  .product .list .item .bot .t3 {

    margin-top: 15px;

    width: 24px;

    height: 24px;
  }



  .index1 {

    overflow: hidden;
  }

  .index1 img {

    transform: scale(1.8);
  }



  .about {

    padding-top: 30px;

    margin-bottom: 30px;
  }

  .about .title {

    font-size: 22px;

    margin-bottom: 10px;
  }

  .about .title2 {

    font-size: 14px;

    color: #666;

    margin-bottom: 30px;
  }

  .about .list {

    flex-wrap: wrap;

    padding: 0 20px;
  }

  .about .list .item {

    margin-bottom: 20px;

    width: 100%;

    padding: 20px;
  }

  .about .list .item .t {

    font-size: 18px;

    margin-bottom: 10px;
  }

  .about .list .item .m {

    font-size: 14px;

    min-height: auto;

    line-height: 22px;

    margin-bottom: 15px;
  }

  .about .list .item .b {

    padding: 0 12px;

    font-size: 14px;
  }



  .footer {

    padding: 25px 0;

    padding-bottom: 5px;
  }

  .footer .con {

    flex-wrap: wrap;
  }

  .footer .con .item {

    width: 100%;

    padding: 0 20px;

    margin-bottom: 20px;
  }

  .footer .con .item .t {

    font-size: 16px;
  }

  .footer .con .item .b {

    font-size: 14px;
  }

  .footer .con .item .b a {

    font-size: 14px;
  }



  .footer2 {

    text-align: center;

    font-size: 12px;

    height: auto;

    padding: 20px 0;
  }



  .pagebanner {

    height: 250px;

    font-size: 30px;
  }



  .application {

    padding: 25px 10px;
  }

  .application .item {

    flex-wrap: wrap;
  }

  .application .item .left {

    width: 100%;

    height: 280px;
  }

  .application .item .right {

    padding: 20px;
  }



  .application .item .right .t1 {

    font-size: 18px;

    margin-bottom: 15px;
  }



  .application .item .right .line {

    margin-bottom: 15px;
  }



  .application .item .right .t2 {

    font-size: 14px;

    line-height: 24px;
  }



  .application .item .right .t3 {

    width: 29px;

    height: 29px;

    margin-top: 20px;
  }



  .productdetail {

    padding: 20px 10px;
  }



  .productdetail .title .l {

    font-size: 22px;
  }



  .productdetail .title .r {

    width: 150px;

    height: 40px;

    font-size: 14px;
  }



  .productdetail .bot {

    line-height: 26px;

    font-size: 16px;
  }



  .contact {

    padding: 20px;
  }



  .contact .top {

    margin-bottom: 20px;
  }



  .contact .top .item .t {

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;
  }

  .contact .top .item .t img {

    width: 30px;
  }



  .contact .top .item .m {

    font-size: 16px;
  }



  .contact .top .item .b {

    font-size: 12px;
  }



  .tech {

    padding: 20px 10px;
  }

  .tech .top {

    font-size: 14px;

    line-height: 26px;
  }



  .tech .top a {

    margin-top: 10px;
  }



  .tech .bot {

    font-size: 14px;
  }



  .tech .mid {

    font-size: 14px;

    padding: 0 10px;
  }



  .aboutus {

    padding: 20px;
  }

  .aboutus .title {

    font-size: 24px;

    margin-bottom: 15px;
  }



  .aboutus .text p {

    font-size: 14px;

    line-height: 24px;

    margin-bottom: 10px;
  }



  .lc {

    padding: 20px;
  }

  .lc .title {

    font-size: 24px;

    margin-bottom: 15px;
  }



  .lc .bot .box {

    width: 100%;
  }



  .lc .bot .box .mySwiper1 .swiper-slide .label p {

    font-size: 18px;

    margin-bottom: 10px;
  }



  .lc .bot .box .mySwiper1 .swiper-slide .label span {

    font-size: 13px;

    line-height: 1.5;
  }



  .lc {

    padding: 50px 0;
  }
}