@charset "utf-8";
*{ margin:0; padding:0; box-sizing: border-box;}
body,p,h1,h2,h3,h4,h5,table,ul,li,form,input{ margin:0; padding:0; color:#000; font-family:"Microsoft Yahei","微软雅黑"; line-height: 1.8; }
body,p{ font-size:14px; border:none;}
a{ font-size:14px; color:#999; text-decoration:none; border:none; padding:0; margin:0;}
table{border-collapse:collapse;}
img{ border:0; margin:0; padding:0;}
ul,li{ list-style:none; border:0; margin:0; padding:0;}
dl,dt,dd{ margin:0; padding:0; -webkit-margin-start:0;}
h1,h2,h3,h4,h5{ font-weight:normal; font-size:12px; display:block;}
b{ font-weight:normal;}
table,tr,td{ border-spacing:0;}
em,i,b{ font-style:normal;}
p{ line-height: 170%; color: #555; font-size: 14px;}
input{ border: none; background: none; }
figcaption{ display: block;}
input:focus,button:focus{ outline: none; }
::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #dfdfdf; } 
::-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px;color: #dfdfdf; } 
.fl{float:left;}
.fr{float:right;}
.clearfix{*zoom:1;} 
.clearfix:before,.clearfix:after{display:table; line-height:0; content:"";}
.clearfix:after{clear:both;}

button{ background: none; border:none;}


.wrap{ max-width: 750px; width: 100%; margin: 0 auto;}


.header{ display: flex; justify-content: space-between; padding: 0 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; 
top: 0; max-width: 750px; width: 100%; margin: 0 auto; height: 55px; z-index: 333; background: #fff; border-bottom: 1px solid #E0E0E0;}
.header .logo img{ height: 40px; vertical-align: middle;}
.header-right{ display: flex; align-items: center; height: 55px;}
.header-right .zoom{ height: 50px; display: flex; align-items: center; padding-right: 20px;}
.header-right .zoom img{ height: 16px; width: 16px; display: block;}
.bar-btn{ cursor: pointer; display: flex; flex-direction: column;}
.bar-btn span{ margin-bottom:6px; transition: all 0.6s; display: block; width: 30px; background: #000; height: 3px;}
.bar-btn .span2{ width: 26px; align-self: flex-end;}
.bar-btn .span3{  margin-bottom: 0;}
.bar-btn.on .span1{ transform: rotate(45deg) translate(5px,6px);}
.bar-btn.on .span2{ transform: rotate(-45deg); opacity: 0;}
.bar-btn.on .span3{ transform: rotate(-45deg) translate(5px,-6px);}


.subnav{ background: #fff; position: fixed; top: 55px; z-index: 3333; right: 0; left: 0;  bottom: 0; padding: 20px 0;
transition: all 1s; transform: translateX(-100%); visibility: hidden; opacity: 0; filter: blur(30px); max-width: 750px; width: 100%; margin: 0 auto;}
.subnav li a{ display: block; font-size: 18px; color: #000; padding: 10px 0; text-align: center; font-weight: bold;}
.subnav.on{ opacity: 1; visibility: visible; transform: none; filter: blur(0px);}

.banner{  margin-top: 55px;}
.banner img{ display: block; max-width: 100%;}
.banner .swiper-pagination-bullet{ background: #fff; }

.index-tit { padding: 15px 0 5px 0;}
.index-tit h3{ color: #000000;	opacity: 0.05; font-size: 39px; font-weight: bold;  text-align: center; height: 0;}
.index-tit h4{ color: #000000;	font-size: 20px; font-weight: bold;  text-align: center; line-height:80px;}
.index-sec1{ padding: 0 20px;}
.index-sec1 .swiper-container{ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);	border-radius: 10px; background: #fff;
display: block;}
.index-sec1 .swiper-slide img{ display: block; width: 100%; height: auto;}
.index-sec1 .swiper-slide h3{ color: #333; font-size: 18px; font-weight: bold; margin: 10px 0; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;}
.index-sec1 .swiper-slide p{ line-height: 30px; font-size: 14px; color: #333; height: 120px; overflow: hidden;
text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;}
.index-sec1 .swiper-slide .item-text{ padding: 15px 10px;}
.index-sec1 .swiper-pagination1 { display: flex; justify-content: center; padding: 30px 0;}
.index-sec1 .swiper-pagination-bullet{  margin: 0 5px; transition: all 0.6s;}
.index-sec1 .swiper-pagination-bullet-active{ width: 20px; border-radius: 3px; background: #2056d4;}

.index-sec2{ background: url(../images/bg.png) no-repeat top center;  background-size:cover;
 animation: bg1 infinite 50s linear ;  padding: 0 10px;  padding-bottom: 30px;}
.index-sec2 .index-tit h3,.index-sec2 .index-tit h4{ color: #fff;}
.index-sec2 .ul1{ display: flex; margin-left: -5px; margin-right: -5px; flex-wrap: wrap;}
.index-sec2 .ul1 li{ width: calc( 100%/2 - 10px); margin-left: 5px; margin-right: 5px; background: #fff; margin-bottom: 10px;}
.index-sec2 .ul1 li a{ display: flex; justify-content: space-between; flex-direction: column; height: 100%;}
.index-sec2 .ul1 .item-img,.index-sec2 .ul1  .item-img img{ display: block; overflow: hidden; transition: all 0.6s; width: 100%; height: auto;
 height: inherit; object-fit: cover;}
.index-sec2 .ul1 .item-text{ padding:10px;}
.index-sec2 .ul1 h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333333; font-size: 16px; line-height: 1;
text-align: center; margin-top: 10px; transition: all 0.6s; font-weight: bold;}
.index-sec2 .ul1 p{ color: #333333; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1;
text-align: center; margin: 10px 0 15px 0;}
.index-sec2 .ul1 span{ display: block; width: 100%;	height: 35px;	background-color: #f5f5f5; text-align: center; line-height: 35px;
color: #333; font-size: 14px; margin: 0 auto; transition: all 0.6s; position: relative; z-index: 1; overflow: hidden;}

.index-sec2 .ul2{ display: flex; margin-left: -5px; margin-right: -5px; flex-wrap: wrap;}
.index-sec2 .ul2 li{ width: calc( 100%/2 - 10px); margin-left: 5px; margin-right:5px; background: #fff; margin-bottom: 10px; }
.index-sec2 .ul2 li img{ display: block; width: 100%; height: auto; transition: all 0.6s;  margin:0 auto;}
.index-sec2 .ul2 li:hover img{ filter: grayscale(0);}

.index-sec3{ padding: 0 10px;}
.index-sec3 ul{ display: flex; margin-left: -5px; margin-right: -5px; flex-wrap: wrap;}
.index-sec3 ul li{ width: calc( 100%/2 - 10px); margin-left: 5px; margin-right: 5px; background: #fff; margin-bottom: 10px;}
.index-sec3 ul li a{ display: flex; justify-content: space-between; flex-direction: column; height: 100%;}
.index-sec3 ul li img{ display: block; max-width: 100%; height: auto; margin: 0 auto;}
.index-sec3 ul li .item-text{ padding: 15px 0;}
.index-sec3 ul h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2056d4; font-size: 16px; line-height: 1;
text-align: center; margin-top: 10px; transition: all 0.6s; font-weight: bold; margin: 10px 0;}
.index-sec3 ul .pl{ color: #333333; font-size: 14px;  height: 150px; overflow: hidden; line-height: 25px;
text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}



.indexPart3{background: #f9f9f9;}
.indexPart3-left{padding: 1em 1em 2em; width: 100%;  box-sizing: border-box;}
.indexPart3-left .tit h1{color: #141418; font-family: "DIN"; font-weight: bold; font-size: 32px;position: relative; letter-spacing: 1px;}
.indexPart3-left .tit h2{color: #242424; font-size: 17px; margin: 0 0 1em }
.indexPart3-left .text{ position: relative; padding-bottom: 1em; }
.indexPart3-left .text p{color: #888888; font-size: 14px; line-height:28px; margin-bottom: 1em;}
.indexPart3-left .index-more a{margin: 0;}
.index-more a{position: relative; display: block; width: 210px; margin: 1.5em auto; overflow: hidden; border-radius: 8PX; color: #FFFFFF;
 background: #2056d4; text-align: center; height: 45px; line-height: 45px; }
.index-more img{display: inline-block;margin: 0 0 0 1em; vertical-align: middle;}

.index-sec4{ position: relative; margin-top: 20px;}
.index-sec4 .item-text{  position: absolute; height: 100%; display: flex; flex-direction: column;  justify-content: center; padding: 0 10px;}
.index-sec4 h3{ color: #ffffff; font-size: 18px;}
.index-sec4 h3 strong{ font-weight: bold; font-size: 22px; display: inline-block;  margin: 0 5px;}
.index-sec4 p{ font-size: 15px; color: #fff;}
.index-sec4 img{ display: block; margin: 0 auto; width: 100%;}

.index-sec5{ padding: 0 15px; margin-bottom: 30px;}
.index-sec5 ul{box-shadow: 0px 0px 8px 0px	rgba(32, 86, 212, 0.2);	border-radius: 10px;}
.index-sec5 ul li a{ display: flex; border-bottom: 1px dashed #F5F5F5; padding: 10px;}
.index-sec5 li .item-img{ width: 100px; height: 80px; overflow: hidden; flex-shrink: 0; display: flex; justify-content: center; align-items: center;}
.index-sec5 li .item-img img{ display: block; object-fit: cover; width: 100%;   height: 80px}
.index-sec5 li .item-text{ display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
flex-grow: 1; padding-left: 10px;}
.index-sec5 li h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000000; font-size: 15px; line-height: 1;
  transition: all 0.6s;  margin: 10px 0;}
.index-sec5 li p{ color: #888888; font-size: 13px;  height: 44px; overflow: hidden; line-height: 22px;
text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}


.footer{ position: relative; background:#003399;width:100%;padding:30px 0;}
.footer img{ display: block; width: 100%; height: auto;}
.footer p{ color: #fff; font-size: 13px; /*position: absolute; display: flex; justify-content: center; top: 0;
align-items: center;*/height: 100%;   padding: 0 10px; line-height: 25px; text-align:center;}
.footer p a{display:block;color: #fff;font-size:13px;}

/* 新闻 */
.neibanner{ height: 200px; display: flex; align-items: center; justify-content: center;  position: relative; margin-top: 55px; overflow: hidden;}
.neibanner .item-text{  position: absolute; left: 0; right: 0; z-index: 33; top: 50%; transform: translateY(-50%);}
.neibanner img{ display: block; object-fit: cover; margin: 0 auto; width: 100%; height: 200px;}
.neibanner .item-text { padding: 0 20px;}
.neibanner .item-text h3{ color: #ffffff; font-size: 20px;}
.neibanner .item-text p{ color: #ffffff; font-size: 14px; }


.newspage ul{ padding: 20px 10px;}
.newspage ul li a{ display: flex; padding: 10px; box-shadow: 0px 0px 8px 0px rgba(32, 86, 212, 0.2); border-radius: 10px; margin-bottom: 10px;}
/*.newspage li .item-img{ width: 100px; height: 80px; overflow: hidden; flex-shrink: 0; display: flex; justify-content: center; align-items: center;}*/
.newspage li .item-img{ display: block;padding:10px;background-color: #2056d4;  text-align: center;}
.newspage li .item-img span{font-size:18px;font-weight: bold;color:#fff;}
.newspage li .item-img p{font-size:14px;color:#fff;height: 22px; width:70px;}
.newspage li .item-text{ display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
flex-grow: 1; padding-left: 10px;}
.newspage li h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000000; font-size: 15px; line-height: 1;
 transition: all 0.6s;  margin: 10px 0;}
.newspage li p{ color: #888888; font-size: 13px;  height: 44px; overflow: hidden; line-height: 22px;
text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}




/* 客户案例 */
.casepage {padding: 20px 10px;}
.casepage ul{ display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px;}
.casepage li{ width:calc( 100%/2 - 10px); margin-left: 5px; margin-right: 5px; position: relative; overflow: hidden;
margin-bottom: 20px;}
.casepage li .item-img{ display: block; overflow: hidden; }
.casepage li img{ display: block; width: 100%; height: auto; transition: all 0.6s;}
.casepage li::before {position: absolute;top: 0;left: -75%;z-index: 2;display: block;content: '';width: 50%;height: 100%;background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}
.casepage li h3{ color: #333333; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px;}
.casepage li p{ color: #666666; font-size: 13px; line-height: 24px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical;  overflow: hidden;}
.casepage li .item-text{ padding: 10px 0 0 0;}

.caselogo {padding: 20px 10px;}
.caselogo ul{ display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px;}
.caselogo li{ width:calc( 100%/2 - 10px); margin-left: 5px; margin-right: 5px; position: relative; overflow: hidden;
margin-bottom: 20px; box-sizing: border-box; border: 1px solid #e5e5e5; padding:10px 0;}
.caselogo li .item-img{ display: block; overflow: hidden; }
.caselogo li img{ display: block; width: 70%; height: auto; transition: all 0.6s; margin:0 auto;}
.caselogo li::before {position: absolute;top: 0;left: -75%;z-index: 2;display: block;content: '';width: 50%;height: 100%;background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}



/* 产品 */
.product-page{ padding:10px 0px 30px 0;}
#tab-hdscroll{  overflow-x: scroll; background: #F5F5F5; height: 50px; padding: 0 10px;}
#tab-hdscroll .swiper-slide{ width:auto !important; margin-right: 30px;}
#tab-hdscroll .swiper-slide{ color: #333333; font-size: 15px; transition: all 0.6s; background: transparent; padding: 0px 10px;
 border-bottom: 2px solid transparent;  height: 50px; line-height: 55px;}
#tab-hdscroll .swiper-slide-active{ border-bottom:2px solid #1362d9;}


/* #tab-bdscroll .swiper-slide{ display: none;} */
/* #tab-bdscroll .swiper-slide.on{ display: block;} */

#tab-bdscroll ul{ display: flex; flex-wrap: wrap; margin-top: 20px; padding: 0 5px; }
#tab-bdscroll ul li{ width:calc(100%/3); margin-bottom: 10px;  flex-grow: 1;}
#tab-bdscroll ul li a{ display: block; text-align: center; background: #F5F5F5; height: 35px; line-height: 35px; font-size: 14px;
color: #333; margin: 0 5px;}
#tab-bdscroll ul li.on a{ background: #2056D4; color: #fff;}


.prop-list{ padding:10px 10px 0px 10px;}
.prop-list .ul1{ display: flex; margin-left: -6px; margin-right: -6px; flex-wrap: wrap;}
.prop-list .ul1 li{ width: calc( 100%/2 - 12px); margin-left: 6px; margin-right: 6px; background: #fff; margin-bottom: 12px; box-shadow: 0px 0px 3px 0px rgba(6, 0, 1, 0.1);}
.prop-list .ul1 li a{ display: flex; justify-content: space-between; flex-direction: column; height: 100%;}
.prop-list .ul1 .item-img,.prop-list .ul1  .item-img img{ display: block; overflow: hidden; transition: all 0.6s; width: 100%; height: auto;
 height: inherit; object-fit: cover;}
.prop-list .ul1 .item-text{ padding:10px;}
.prop-list .ul1 h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333333; font-size: 16px; line-height: 1;
text-align: center; margin-top: 10px; transition: all 0.6s; font-weight: bold;}
.prop-list .ul1 p{ color: #333333; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1;
text-align: center; margin: 10px 0 15px 0;}
.prop-list .ul1 span{ display: block; width: 100%;	height: 35px;	background-color: #f5f5f5; text-align: center; line-height: 35px;
color: #333; font-size: 14px; margin: 0 auto; transition: all 0.6s; position: relative; z-index: 1; overflow: hidden;}


/* 关于 */
.about-sec1{ padding: 30px 10px;}
.about-sec1 img{ display: block; margin: 0 auto; height: auto; width: 100%;}
.about-sec1 h3{ text-align: center; color: #333; font-size:20px; line-height: 1.3; margin-bottom: 20px;}
.about-sec1 h3 i{ background-color: #2056d4; height: 3px; width: 25px; display: block; margin: 10px auto;}
.about-sec1 p{ color: #888888; font-size: 14px; line-height: 30px; margin-bottom: 10px;}

.about-sec2 .atit{ position: relative; }
.about-sec2 .atit .item-text{ position: absolute; height: 100%; display: flex; justify-content: center; align-items: center;
flex-direction: column; width: 100%;}
.about-sec2 .atit img{ display: block; width: 100%; height: auto;}
.about-sec2 .atit h3{ color: #333333; font-size: 24px; line-height: 1;}
.about-sec2 .atit p{ color: #333; font-size: 16px; }
.about-sec2 ul{ padding: 20px 10px;}
.about-sec2 li a{ display: flex;  background-color: #f7f7f7; margin-bottom: 15px; padding: 10px;}
.about-sec2 li img{ height: 50px; flex-shrink: 0; display: block;}
.about-sec2 li div{ padding-left: 10px; flex-grow: 1; overflow: hidden; display: flex; justify-content: space-between; flex-direction: column;}
.about-sec2 li h3{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-size: 16px;}
.about-sec2  li p{ color: #666666; font-size: 13px; line-height: 20px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; height:20px; overflow: hidden;}

.about-sec3{ background: #F5F5F5; padding: 0 15px 105px 15px; position: relative;}
.about-sec3 .tit h3{ color: #333; font-size: 20px; text-align: center; padding: 30px 0;}
.about-sec3 .swiper-slide a{ background: #fff; display: block; padding: 15px;}
.about-sec3 .swiper-slide img{display: block; width: 100%; height: auto;}
.about-sec3 .swiper-slide p{ text-align: center; color: #333; font-size: 16px; margin-top: 10px;}
.about-sec3 .swiper-button-next img, .swiper-button-prev img{ height: 35px;}
.about-sec3 .swiper-button-next{ left: auto; right: 35%; bottom: 30px;} 
.about-sec3 .swiper-button-prev{ right: auto; left: 35%; bottom: 30px;}


.about-sec4{ padding: 0px 15px 75px 15px; position: relative;}
.about-sec4 .tit h3{ color: #333; font-size: 20px; text-align: center; padding: 30px 0;}
.about-sec4 .swiper-slide img{display: block; width: 100%; height: auto;}
.about-sec4 .swiper-slide p{ text-align: center; color: #333; font-size: 16px; margin-top: 10px;}
.about-sec4 .swiper-pagination { display: flex; justify-content: center; bottom: 35px; overflow: hidden; left: 0; right: 0;}
.about-sec4 .swiper-pagination span{ display: block; margin: 0 4px;}

/* 详情 */

 .detailpage{ padding: 25px 15px;}
 .detail-tou { border-bottom: 1px solid #E0E0E0;}
 .detail-tou h3{ text-align: center; color: #000; font-weight: bold; font-size: 18px;}
 .detail-tou p{ font-size: 14px; color: #888; text-align: center;}
 .detail-tou p span{ display: inline-block; padding:10px;}
 .detailpage .div-p{ margin: 15px 0;line-height: 30px; font-size: 15px; color: #333;}
 .detailpage .div-p p{ line-height: 30px; font-size: 15px; color: #333;}
 .detailpage .div-p  img{ display: block; max-width: 100%; margin: 10px auto;}
 .fenpian{ display: flex; justify-content: space-between; padding: 25px 0 0 0; align-items: center; border-top: 1px solid #f5f5f5; padding-top: 15px; margin-top: 25px; align-items: center;}
 .fenpian div {width: 70%; padding-right: 10px;}
 .fenpian div a{ display: block; font-size: 14px; color: #555;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 
 .fenpian div a:last-child{ margin-bottom: 0;}
.fenpian .backlist{ display: block; width: 100px; height: 35px; line-height: 35px; text-align: center; color: #fff; font-size: 14px; background: #2056D4; border-radius: 40px; flex-shrink: 0; }
.fenpian .backlist img{ display: inline-block; vertical-align: middle; height: 12px; margin-right: 5px;}
 
.online{ padding:0 47px 20px; overflow:hidden; background:#fff;}
.online ul{width:100%;}
.online li{ width:100%; float:left; margin:1.5% 0; overflow:hidden; border:1px #e0e0e0 solid; border-radius:4px; line-height:48px;}
.online li input.text{ width:100%; padding-left:10px; height:48px; border:none; font-size:16px; background:none;}
.online li:first-child{ margin-left:0;}
.online li.on_11{  width:100%; margin-left:0; height:120px; overflow-x:hidden;}
.online li.on_11 textarea{ width:100%; padding:1%; font-size:16px; border:none; height:120px;}
.online li.on_22{ margin-left:0; width:100%; overflow:hidden; border:none;}
.online li.on_22 input.sub{ width:100%; height:48px; line-height:48px; background:#2056D4; border:none; color:#fff; font-size:20px; cursor:pointer;}
 
 
.fenye{ display: flex; justify-content: center; align-items: center; }
.fenye p{ margin-right: 10px;}
.fenye p,.fenye span{  color: #333333; 	font-size: 14px; }
.fenye p b{ color: #2056D4;}
.fenye a{ padding:0 12px;height: 30px;background-color: #ffffff;border-radius: 4px;border: solid 1px #cccccc;
text-align: center; line-height: 30px; margin: 0 5px; transition: all 0.6s;}
.fenye .at{ background-color: #f1f1f1; width: 43px; height: 36px;	background-color: #f1f1f1;	border-radius: 4px;
	border: solid 1px #cccccc; text-align: center; margin-right: 5px;}
.fenye span{ margin-left: 10px; margin-right: 10px;}
.fenye a:hover,.fenye a.on{ background: #353535; color: #fff;}
.fenye a.prev{border:none;width:auto !important;}

@keyframes bg1{
	from{ background-position: left top;}
	50%{ 
		background-position: right top;}
	to{ background-position: left top;}
}


@media (max-width:320px) {	
.footer p{  line-height: 20px; font-size: 12px;}	
}