/* gg */
.title{text-align: center;width: 100%;}
.title::after{left: 50%;transform: translateX(-50%);}
.title span{left: 50%;transform: translate(-50%,-50%);}



/*nbanner */
.nbanner{
  /* height: 440px; */
  background-image: url(../images/nbanner.jpg);
  padding-bottom: 31%;
  background-size: cover;
  /* background-position: center top; */
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  position: relative;
}
.nbanner .area{
  position: absolute;
  height: 100%;
  bottom: 5%;
  right: -14%;
  transform: translateX(-50%);
}
.nbanner .title{color: #fff;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-30%);text-align: center;padding-bottom: 10px;}
.nbanner .title h3{font-size: 40px;}
.nbanner .title p{font-size: 18px;color: #fff;padding: 20px 0;}
.nbanner .title span{display: none;}
.nbanner .crumbs{position: absolute;right: 15px;bottom: 0;color: #fff;font-size: 16px;display: flex;align-items: center;}
.nbanner .crumbs a{color: #fff;font-size: 16px;line-height: 3;}
.nbanner .crumbs i{font-size: 26px;margin-right: 3px;line-height: 1;}


/*无数据提示*/
.no-goods {padding: 10px 0;overflow: hidden;text-align: center;}
.no-goods p {color: #7d7979;font-size: 15px;line-height: 35px;}


/* 栏目 */
.n-cate{width: 100%;border-bottom: 1px solid rgba(0,0,0,.1);}
.n-cate .area{display: flex;flex-wrap: wrap;padding: 15px;}
.n-cate .area a{margin-right: 5%;font-size: 16px;line-height: 2.5;position: relative;}
.n-cate .area a::after{content: '';display: inline-block;position: absolute;width: 0;height: 5px;background-color: rgba(63,130,254,1);top: calc(100% + 15px);right: 0;}
.n-cate .area a:hover{color: rgba(63,130,254,1);}
.n-cate .area a:hover::after{left: 0;width: 100%;}
.n-cate .area a.active{color: rgba(63,130,254,1);}
.n-cate .area a.active::after{left: 0;width: 100%;}


/* 关于我们 */
.about{position: relative;padding: 50px 0 0;overflow: hidden;}
.about::after{content: '';display: inline-block;position: absolute;width: 100%;height: 145px;bottom: 0;left: 0;z-index: -1;background-color: #f6faff;}
.about .title{margin-bottom: 45px;}
.about .area{flex-wrap: wrap;align-items: stretch;align-content: center;position: relative;z-index: 2;}
.about .left{display: flex;width: 50%;flex-wrap: wrap;align-content: start;}
.about .left .content{width: 100%;}
.about .left .content h2{font-size: 38px;font-weight: 600;line-height: 1;margin-bottom: 30px;}
.about .left .content .info{width: calc(100% - 30px);font-size: 16px;line-height: 2.5;height: 360px;overflow-x: auto;margin-right: 30px;padding-right: 20px;}
.about .right{width: 50%;margin-left: auto;}
.about .right .img{width: 100%;height: 100%;overflow: hidden;}
.about .right .img img{width: 100%;height: 100%;object-fit: cover;}
.about .ul{width: 100%;display: flex;flex-wrap: wrap;height: 145px;align-items: center;background-color: #f6faff;margin-top: 50px;}
.about .ul .li{flex-grow: 1;}
.about .ul .li p{display: inline-block;width: 100%;text-align: center;}
.about .ul .li p span{font-size: 42px;color: rgba(63,130,254,1);font-weight: 600;}

/* 单页 */
.single{position: relative;padding: 50px 0;}
.single .tit{font-size: 32px;text-align: center;line-height: 1.5;margin-bottom: 30px;display: inline-block;width: 100%;}
.single .content{font-size: 16px;line-height: 2;}

.content img{max-width: 100%;}

/* 产品 */
.product{position: relative;padding: 50px 0;}
.product .area{display: block;}
.product a .img{position: relative;padding-top: 90%;background-color: #f8f8f8;}
.product a .img img{position: absolute;width: 80%;height: 80%;object-fit: contain;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.product a .text{background-color: #fbfbfb;line-height: 3;font-size: 17px;text-align: center;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;margin-bottom: 20px;}
.product a:hover .img img{width: 90%;height: 90%;}
.product a:hover .text{background-color: rgba(63,130,254,1);color: #fff;}


/* 产品内页 */
.p-info{position: relative;padding: 50px 0;}
.p-info .area{display: block;}
.p-info .area .swiper{width: 100%;}
.p-info .area .swiper .img{width: 100%;position: relative;padding-top: 90%;background-color: #f8f8f8;}
.p-info .area .swiper .img img{position: absolute;width: 80%;height: 80%;object-fit: contain;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.p-info .area #proSwiper{margin-bottom: 20px;}
.p-info .area #thumbsSwiper .img{border: 1px solid rgba(0,0,0,.1);}
.p-info .area #thumbsSwiper .swiper-slide-active .img{border: 1px solid rgba(63,130,254,1);}
.p-info .area .info{padding-left: 5%;}
.p-info .area .info h2{font-size: 32px;font-weight: 600;line-height: 1;position: relative;padding: 30px 0;margin-bottom: 30px;}
.p-info .area .info h2::after{content: '';display: inline-block;position: absolute;left: 0;top: 100%;width: 50px;height: 5px;background-color: rgba(63,130,254,1);}
.p-info .area .info>p{font-size: 16px;line-height: 2;color: rgba(0,0,0,.6);margin-bottom: 15px;}
.p-info .area .info a{width: 40%;margin-right: 10%;max-width: 180px;color: #fff;background-color: rgba(63,130,254,1);border-radius: 5px;font-size: 16px;line-height: 3;display: inline-block;text-align: center;}
.p-info .area .info a:last-child{margin-right: 0;}
.p-info .area .param{display: flex;flex-wrap: wrap;width: 100%;margin-bottom: 15px;}
.p-info .area .param p{width: 100%;line-height: 2.5;}
.p-info .area .param p b{color: rgba(63,130,254,1);font-weight: 600;font-size: 17px;}

.p-info .content{margin-top: 30px;width: 100%;border-top: 1px solid rgba(0,0,0,.1);padding-top: 30px;}
.p-info .content h2{font-size: 24px;display: inline-block;width: 33.333333%;max-width: 180px;line-height: 2.5;font-weight: 600;}
.p-info .content .details{font-size: 16px;line-height: 2;width: 100%;color: rgba(0,0,0,.7);padding: 15px 0;}


/* 图品列表 */
.article{position: relative;padding: 50px 0;}
.article .area{display: block;}
.article .row .img{position: relative;padding-top: 75%;overflow: hidden;border-top-left-radius: 5px;border-top-right-radius: 5px;background-color: #fff;border: 1px solid rgba(0,0,0,.1);border-bottom-width: 0;}
.article .row .img img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);object-fit: cover;width: 100%;height: 100%;}
.article .row .text{display: flex;flex-wrap: wrap;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;background-color: #fff;justify-content: center;margin-bottom: 30px;}
.article .row .text p{font-size: 18px;width: calc(100%);overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;line-height: 3.2;text-align: center;background-color: rgba(0,0,0,.05);}

.article .row a:hover .img{border-color: rgba(63,130,254,1);}
.article .row a:hover .img img{width: 105%;height: 105%;}
.article .row a:hover .text p{color: #fff;background-color: rgba(63,130,254,1);}


/* 文章列表 */
.news{position: relative;padding: 50px 0;}
.news .area{flex-wrap: wrap;}
.news a{display: flex;flex-wrap: wrap;width: 100%;padding: 25px 5%;background-color: rgba(0,0,0,.03);margin: 15px 0;}
.news .left{width: 120px;display: flex;flex-wrap: wrap;align-content: start;}
.news .left span{font-size: 24px;font-weight: 600;width: 100%;margin-bottom: 8px;}
.news .left span:last-child{color: rgba(0,0,0,.4);font-size: 16px;}
.news .right{width: calc(100% - 120px);border-left: 1px solid rgba(0,0,0,.1);padding-left: 45px;}
.news .right h3{font-size: 22px;line-height: 1.5;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-bottom: 10px;font-weight: 500;}
.news .right p{line-height: 2;font-size: 15px;color: rgba(0,0,0,0.5);overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news a button{margin-top: 30px;font-size: 15px;color: rgba(63,130,254,1);font-weight: 500;}
.news a:hover{background-color: rgba(63,130,254,1);}
.news a:hover .left span{color: #fff;}
.news a:hover .right h3,.news a:hover .right p,.news a:hover .right button{color: #fff;}
.news a:hover .right{border-color: #fff;}


/* 文章内页 */
.n-info{position: relative;padding: 50px 0;}
.n-info .area{display: flex;flex-wrap: wrap;align-items: start;}
.n-info .left{width: calc(100% - 380px);max-width: 1200px;padding-right: 30px;}
.n-info .tit{font-size: 32px;text-align: center;line-height: 1.5;margin-bottom: 30px;display: inline-block;width: 100%;}
.n-info .time{display: flex;justify-content: center;width: 100%;background-color: rgba(0,0,0,.05);color: rgba(0,0,0,.5);font-size: 15px;line-height: 2.5;margin-bottom: 30px;}
.n-info .img{margin: 0 auto;max-width: 800px;width: 100%;margin-bottom: 30px;}
.n-info .img img{width: 100%;}
.n-info .content{font-size: 16px;line-height: 2;}
.n-info .switch{display: flex;width: 100%;margin-top: 30px;padding-top: 15px;border-top: 1px solid rgba(0,0,0,.1);}
.n-info .switch>div{width: 50%;line-height: 1.5;}

.n-info .right{width: 380px;padding-left: 30px;border-left: 1px solid rgba(0,0,0,.1);}
.n-info .right a{display: block;width: 100%;margin-bottom: 30px;background-color: rgba(0,0,0,.05);padding: 25px 30px;}
.n-info .right a:last-child{margin-bottom: 0;}
.n-info .right a h2{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 18px;font-weight: 600;line-height: 2;margin-bottom: 10px;}
.n-info .right a p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 16px;line-height: 2;color: rgba(0,0,0,.5);margin-bottom: 30px;}
.n-info .right a span{font-size: 16px;font-weight: 600;line-height: 2;}

.n-info .switch>div:hover,.n-info .switch>div:hover a{color: rgba(63,130,254,1);}

.n-info .right a:hover{background-color: rgba(63,130,254,1);}
.n-info .right a:hover h2,.n-info .right a:hover p,.n-info .right a:hover span{color: #fff;}


/* 联系我们 */
.contact{position: relative;padding: 50px 0;}
.contact .title{margin-bottom: 45px;}
.contact .area{flex-wrap: wrap;}
.contact .info{display: flex;flex-wrap: wrap;width: 100%;align-items: start;align-content: center;margin-bottom: 45px;}
.contact .info .li{width: 33.333333%;line-height: 2;font-size: 16px;display: flex;flex-wrap: wrap;margin-bottom: 15px;align-items: center;justify-content: center;}
.contact .info .li h3{font-size: 20px;font-weight: 500;padding: 20px 0;width: 100%;text-align: center;position: relative;margin-bottom: 15px;}
.contact .info .li h3::before,.contact .info .li h3::after{content: '';display: inline-block;position: absolute;left: 50%;top: 100%;transform: translate(-50%,-50%);}
.contact .info .li h3::before{width: 100%;max-width: 130px;height: 1px;background-color: rgba(0,0,0,.2);}
.contact .info .li h3::after{width: 50%;max-width: 30px;height: 3px;background-color: rgba(63,130,254,1);}
.contact .info .li span{width: calc(100%);text-align: center;}
.contact .info .li i{width: 50px;height: 50px;background-size: contain;background-position: center;background-repeat: no-repeat;}

.contact .info .li i.icon1{background-image: url(../images/contact-icon-01.png);}
.contact .info .li i.icon2{background-image: url(../images/contact-icon-02.png);}
.contact .info .li i.icon3{background-image: url(../images/contact-icon-03.png);}
.contact .info .li i.icon4{background-image: url(../images/contact-icon-04.png);}
.contact .info .li i.icon5{background-image: url(../images/contact-icon-05.png);}
.contact .info .li i.icon6{background-image: url(../images/contact-icon-06.png);}


/*在线留言*/
.message{position: relative;padding: 50px 0;}
.message form{background-color: #f8f9fa;display: flex;flex-wrap: wrap;width: 100%;padding: 30px 5%;align-items: center;}
.message form .form-input{width: calc(33.333333% - 20px);margin-right: 30px;border-bottom: 1px solid rgba(0,0,0,.1);padding: 20px 0;margin-bottom: 20px;display: flex;flex-wrap: wrap;}
.message form .form-input:nth-child(3){margin-right: 0;}
.message form .form-input:nth-child(4){width: 100%;margin-right: 0;}
.message form .form-input:nth-child(5){width: calc(70% - 30px);max-width: 450px;}
.message form .form-input label{width: 65px;}
.message form .form-input .code{display: flex;width: 100%;align-items: center;}
.message form .form-input .code input{width: calc(100% - 165px);}
.message form .form-input .code img{width: 100px;}
.message form .form-input input,.message form .form-input textarea{width: calc(100% - 65px);}
.message form .form-input input::placeholder,.message form .form-input textarea::placeholder{font-size: 15px;color: rgba(0,0,0,.5);}

.message form a{border-radius: 35px;background-color: rgba(63,130,254,1);color: #fff;font-size: 15px;text-align: center;padding: 20px 0;width: 30%;max-width: 200px;}


/*分页*/
.de-page-mian {overflow: hidden;text-align: center;font-size: 0;background: #f3f3f3;padding: 0;}
.de-page-mian .page-inner {display: inline-block;overflow: hidden;padding: 10px 0;}
.de-page-mian .page-inner a {display: block;float: left;min-width: 26px;padding: 0 5px;height: 36px;border: 1px solid #dddddd;background: #fff;text-align: center;line-height: 36px;font-size: 14px;color: #333;margin-right: -1px;overflow: hidden;}
.de-page-mian .page-inner a.active,
.de-page-mian .page-inner a:hover {color: #fff;border-color: rgba(63,130,254,1);background: rgba(63,130,254,1);}
.de-page-mian .page-inner a.prev {margin-right: 10px;background: #fff url(../images/prev.jpg) no-repeat center;}
.de-page-mian .page-inner a.prev.on {background: #fff url(../images/prev-hover.jpg) no-repeat center;}
.de-page-mian .page-inner a.prev:hover {background-color: #fff;border-color: #dddddd;}
.de-page-mian .page-inner a.next {margin-left: 10px;margin-right: 15px;background: #fff url(../images/next.jpg) no-repeat center;}
.de-page-mian .page-inner a.next.on {background: #fff url(../images/next-hover.jpg) no-repeat center;}
.de-page-mian .page-inner a.next:hover {background-color: #fff;border-color: #dddddd;}
.de-page-mian .page-inner a.page-btn {font-size: 12px;margin-right: 0;width: 63px;margin-left: 10px;}
.de-page-mian .page-inner span {display: block;font-size: 12px;color: #333;float: left;line-height: 38px;}
.de-page-mian .page-inner input {display: block;float: left;height: 36px;width: 36px;border: 1px solid #dddddd;text-align: center;line-height: 36px;font-size: 14px;color: #333;margin: 0 5px;}


@media (max-width:1400px){

}
@media (max-width:1200px){
  .about .ul .li p span{font-size: 34px;}

  .p-info .area .info{padding-left: 0;}
  .p-info .area .info h2{font-size: 28px;padding-top: 10px;padding-bottom: 25px;margin-bottom: 20px;}

  .n-info .tit{font-size: 28px;}
  
}
@media (max-width:1024px){
  .p-info .area .info>p{margin-bottom: 20px;}
  .p-info .area .content h2{font-size: 20px;max-width: 160px;}
  .p-info .area .info p{font-size: 15px;line-height: 2.2;}

  .n-info .left{width: 100%;padding-right: 0;}
  .n-info .right{width: 100%;padding-left: 0;border-left-width: 0;display: flex;flex-wrap: wrap;margin-top: 30px;}
  .n-info .right a{width: calc(50% - 15px);margin-right: 30px;}
  .n-info .right a:nth-child(2n){margin-right: 0;}
}
@media (max-width:992px){

  .product,.p-info{padding: 50px 0;}
  .product .right,.p-info .area{width: 100%;}

  .article .row .text p{font-size: 17px;}
}
@media (max-width:768px){
  .n-cate .area{padding: 15px;}
  .about{padding-top: 50px;}
  .about::after{height: 160px;}
  .about .title h2{padding-bottom: 35px;}
  .about .left{width: 100%;margin-bottom: 20px;}
  .about .left .content .info{height: auto;width: 100%;margin-right: 0;padding-right: 0;font-size: 15px;}
  .about .right{width: 100%;}
  .about .right .content{margin-top: 15px;}
  .about .ul .li p span{font-size: 26px;}
  .about .ul{height: 160px;align-content: center;margin-top: 30px;}
  .about .ul .li{width: 50%;padding: 8px 0;}

  .product a .text{font-size: 16px;}

  .p-info .area .info h2{padding-top: 20px;font-size: 24px;}

  .article .row .text p{font-size: 16px;}

  .single .tit{font-size: 28px;}

  .n-info .right a{width: 100%;margin-right: 0;margin-bottom: 15px;}

  .contact .info .li i{width: 45px;height: 45px;}
  .contact .info .li h3{font-size: 18px;padding: 15px 0;}
}
@media (max-width:440px){
  .nbanner .area{
    right: unset;
    transform: translateX(-49%);
    left: 50%;
  }

  .nbanner{height: 200px; background-position: center;}
  .nbanner .tit h2{font-size: 28px;}
  .nbanner .crumbs a{font-size: 15px;}
  .nbanner .title h3{font-size: 30px;}
  .nbanner .title p{font-size: 16px;padding: 15px 0;}
  .n-cate .area a{margin-right: 15px;font-size: 15px;}
  .about{padding-top: 40px;}
  .about .title{margin-bottom: 30px;}
  .about .right .content .info{font-size: 15px;}

  .product,.p-info,.article,.single,.news,.contact,.n-info,.message{padding: 30px 0;}
  .product a .text{font-size: 15px;}

  .p-info .content{padding-top: 10px;margin-top: 20px;}
  .p-info .content h2{font-size: 20px;}
  .p-info .area .info a{font-size: 15px;}

  .article .row .text{margin-bottom: 15px;}
  .article .row .text p{font-size: 15px;}
  
  .single .tit{font-size: 24px;}

  .news a{margin: 7.5px 0;padding: 15px;}
  .news .left{width: 80px;}
  .news .left span{font-size: 20px;}
  .news .left span:last-child{font-size: 15px;font-weight: 500;}
  .news .right{width: calc(100% - 80px);padding-left: 25px;}
  .news .right h3{font-size: 18px;font-weight: 300;}
  .news a button{margin: 15px 0 10px;}

  .n-info .tit{font-size: 22px;margin-bottom: 15px;}
  .n-info .time{margin-bottom: 20px;}
  .n-info .content{font-size: 15px;}
  .n-info .switch{margin-top: 20px;}
  .n-info .switch>div{font-size: 15px;}
  .n-info .right a{padding: 20px 25px;}
  .n-info .right a h2{font-size: 17px;}
  .n-info .right a p{font-size: 15px;}
  .n-info .right a span{font-size: 15px;}

  .contact .title{margin-bottom: 30px;}
  .contact .info{margin-bottom: 10px;}
  .contact .info .li{width: 100%;font-size: 15px;}

  .message form .form-input{width: 100%!important;margin-right: 0;padding: 15px;margin-bottom: 10px;}
  .message form a{margin-top: 10px;padding: 15px 0;width: 50%;}
}
@media (max-width:320px){
}