/*************************************************************************/
/*全局样式开始*/
/*************************************************************************/
@charset "utf-8";
*{margin:0;padding:0;outline:0;}
body,html{overflow-x:hidden;color:#666;font:14px/30px arial,sans-serif;background:#fff;}
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;}
input[type=text],input[type=submit],textarea,button{-webkit-border-radius:0;font-family:arial;-webkit-appearance:none;}
input:focus{outline:0;}
textarea{resize:none;}
h1,h2,h3,h4,h5,h6{font-style:normal;font-size:100%;}
abbr,em,i,li,ol,ul{list-style-type:none;font-style:normal;}
img{border:0;vertical-align:middle;}
img{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix{display:block;zoom:1;}
.clearfix:before{display:table;content:"";}
.clearfix:after{clear:both;display:block;visibility:hidden;height:0;content:"";}
* html .clearfix{height:1%;}
*{box-sizing:border-box;}
a{color:#666;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
a:hover{color:#3680f8;text-decoration:none;}
.hide,.none,ins{display:none;}
.fl{float:left;display:inline-block;}
.fr{float:right;display:inline-block;}
.wrap{clear:both;display:block;margin:0 auto;max-width:1300px;width:100%; padding:0 0}
.animate img{position:relative;opacity:1;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;transition:.5s all;-webkit-transform:scale(1,1) rotate(0);-ms-transition:.5s all;}
a:hover .animate img{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.animate img:hover{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.tran,.tran a,a.tran,.tran img{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
.rotate,.rotate2 img{-webkit-transition:all 0.8s;-moz-transition:all 0.8s;transition:all 0.8s;-ms-transition:all 0.8s;}
a:hover .rotate,a:hover rotate2 img{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all 0.8s;-moz-transition:all 0.8s;transition:all 0.8s;-ms-transition:all 0.8s;}
.bor_box::after,.bor_box::before{pointer-events:none;}
.bor_box::after,.bor_box::before{position:absolute;top:20px;right:20px;bottom:20px;left:20px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;}
.bor_box::before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);}
.bor_box::after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);}

@font-face {
	font-family: "quicksand";
	src: url('../fonts/quicksand.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family:"din";
	src:url("../fonts/din-medium.woff") format("woff"),
		url("../fonts/din-medium.ttf") format("truetype"),
		url("../fonts/din-medium.eot") format("embedded-opentype"),
		url("../fonts/din-medium.svg") format("svg");
	font-weight:normal;
	font-style:normal;
}

#header{ width:100%;}
#header .wrap{ height:90px;display: flex;justify-content:space-between;align-items:center;}
#header .logo img{ height:40px}
#header .right{display: flex;justify-content:flex-end;align-items:center;}
#header .right .nav ul{display: flex;justify-content:flex-end;align-items:center;}
#header .right .nav ul li{  position:relative;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s}
#header .right .nav ul li h3{ line-height:90px;display: flex;justify-content:center;align-items:center;padding:0 25px;}
#header .right .nav ul li h3 a{font-size:17px; display:block; position:relative; font-weight:normal;}
#header .right .nav ul li h3 a:before{position:absolute;content:"";left:50%;bottom:20px;width:0%;height:3px;transform:translateX(-50%);background:#04182e;transition:all .3s; opacity:0}
#header .right .nav ul li h3 i{ margin-left:5px; color:#999;transition:all .3s;}
#header .right .nav ul li .sub{ display:none;position:absolute; left:-15px; top:90px; width:calc(100% + 30px); background:rgba(4,24,46,.7); z-index:88;box-shadow: 0 6px 12px rgba(0,0,0,.175);}
#header .right .nav ul li .sub dl{}
#header .right .nav ul li .sub dl a{ display:block; color:#fff; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:15px; text-align:center}
#header .right .nav ul li .sub dl a:hover{ background:#04182e;}
#header .right .nav ul li.currclass h3 a{color:#04182e;}
#header .right .nav ul li.on h3 a{color:#04182e;}
#header .right .nav ul li.on h3 a:before{width:80%; opacity:1; }
#header .right .nav ul li.currclass h3 a{color:#04182e;}
#header .right .nav ul li.currclass h3 a:before{width:80%; opacity:1; }
#header .right .nav ul li:hover h3 a{color:#04182e;}
#header .right .nav ul li:hover h3 a:before{width:80%; opacity:1; }
#header .right .nav ul li:hover h3 i{-webkit-transform: rotate(-180deg);-ms-transform: rotate(-180deg);transform: rotate(-180deg);}
#header .right .mnav{ display:none}
#header .right .lan{ position:relative; margin-left:50px}
#header .right .lan .btn{display: flex;justify-content:space-between;align-items:center; cursor:pointer}
#header .right .lan .btn i{  line-height:90px; font-size:20px}
#header .right .lan .btn span{ margin-left:5px}
#header .right .lan .btn i:hover{ color:#3680f8}
#header .right .lan .btn i:last-child{ color:#999; font-size:18px; margin-left:5px}
#header .right .lan .list{ display:none; position:absolute; top:90px; right:0; background:#04182e; z-index:99; border-radius:0 0 4px 4px; padding:10px;box-shadow: 0 6px 12px rgba(0,0,0,.175);}
#header .right .lan .list a{ display:block; text-align:center; font-size:14px; padding:5px 10px; border-bottom:1px solid rgba(255,255,255,.1); color:#fff}
#header .right .lan .list a:last-child{ border-bottom:0}
#header .right .lan .list a:hover{ background:#3680f8}

#banner{ width:100%;}
#banner .focus{ position:relative}
#banner .focus .swiper-wrapper .swiper-slide{ height:600px; overflow:hidden}
#banner .focus .swiper-wrapper .swiper-slide img{width:100%;height:100%;object-fit:cover}
#banner .focus .swiper-slide{ position:relative}
#banner .focus .swiper-slide .textbox{ width:100%; height:100%; position: absolute; left:0; top:0;display: flex;justify-content:center;align-items:center;}
#banner .focus .swiper-slide .textbox .text{ text-align:center}
#banner .focus .swiper-slide .textbox .text h2{ font-size:40px; color:#fff; font-weight:700; line-height:50px;}
#banner .focus .swiper-slide .textbox .text p{ font-size:22px; color:#fff;line-height:40px; margin:30px auto; max-width:70%; padding:10px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1)}
#banner .focus .swiper-pagination-bullet{margin:0 5px;vertical-align:middle;opacity:1;background:#3680f8;width:40px;height:4px;border-radius:0;}
#banner .focus .swiper-pagination-bullet{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#banner .focus .swiper-pagination-bullet-active{background:#04182e;width:40px;height:4px;opacity:1;border-radius:0;}
#banner .focus .swiper-slide .textbox .text .btn a{ border:1px solid #fff; color:#fff; display:inline-block; padding:5px 25px}
#banner .focus .swiper-slide .textbox .text .btn a:hover{ background:#3680f8; border:1px solid #3680f8}

.htitle{ text-align:center;}
.htitle h2{ font-size:28px; font-family:"din"; text-transform:uppercase}
.htitle p{ margin-top:10px; font-size:13px; color:#999; font-family:"din"; text-transform:uppercase}
#about{ padding:50px 0}
#about .list{ margin-top:30px;display: flex;justify-content:space-between;align-items:start; background:url(../images/about_bg.png) no-repeat bottom right;}
#about .list .img{ width:45%;}
#about .list .img img{ width:100%}
#about .list .text{ width:50%}
#about .list .text .content{ font-size:16px; line-height:1.8}
#about .list .text .content p{ margin-bottom:10px;}
#about .list .text .more{ margin-top:30px}
#about .list .text .more a{ display:inline-block; border:1px solid #04182e; background:#04182e; color:#fff; border-radius:40px; padding:3px 30px; margin-right:10px;box-shadow: 0 0 20px rgba(206,206,206,.3);}
#about .list .text .more a i{ margin-left:10px}
#about .list .text .more a:hover{ border-color:#3680f8; background:#3680f8}

#product{ padding:50px 0; background:#f8f8f8}
#product .list{ margin-top:30px}
#product .list ul{display: flex;justify-content:space-between;align-items:center;gap:0 30px;flex-wrap:wrap}
#product .list ul li{ width:calc((100% - 90px) / 4);box-shadow: 0 0 20px rgba(206,206,206,.3);}
#product .list ul li .img{ background:#fff; text-align:center; padding:30px 0; overflow:hidden}
#product .list ul li .img img{ height:160px}
#product .list ul li p{text-align:center; background:#04182e; color:#fff; padding:5px 0;transition:all .3s;}
#product .list ul li p{word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical}
#product .list ul li a:hover p{ background:#3680f8}
#product .list2{ margin-top:20px}
#product .list2 ul{display: flex;justify-content:space-between;align-items:center;gap:0 30px}
#product .list2 ul li{ width:calc((100% - 60px) / 3);box-shadow: 0 0 20px rgba(206,206,206,.3);}
#product .list2 ul li .img{ background:#fff; padding:30px; text-align:center; overflow:hidden}
#product .list2 ul li .img img{ height:150px}
#product .list2 ul li p{text-align:center; background:#04182e; color:#fff; padding:5px 0;transition:all .3s;}
#product .list2 ul li p{word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical}
#product .list2 ul li a:hover p{ background:#3680f8}

#app{ width:100%; padding:50px 0 0; background:url(../images/app_Bg.jpg) no-repeat center center; background-size:cover; background-attachment:fixed}
#app .htitle{ padding-bottom:150px}
#app .htitle h2,
#app .htitle p{ color:#fff}
#app .list{ background:#fff; height:300px;}
#app .list ul{ padding:30px 0; position:relative; top:-150px}
#app .list ul{display:flex;justify-content:space-between;align-items:start;gap:0 0px;flex-wrap:wrap}
#app .list ul li{ width:25%; background:#fff; padding:20px; border:1px solid #eee; border-right:0}
#app .list ul li:last-child{ border-right:1px solid #eee}
#app .list ul li h2{ font-size:16px; border-left:3px solid #3680f8; line-height:18px; padding-left:8px}
#app .list ul li .img{ margin-top:20px; overflow:hidden}
#app .list ul li .img img{ width:100%}
#app .list ul li p{ line-height:26px; margin-top:20px; color:#999; height:60px}
#app .list ul li .more{text-align: center}
#app .list ul li .more span{ width:36px; height:36px;text-align:center; line-height:36px;background:#04182e;display:inline-block; position:relative; overflow:hidden;transition:all .3s;color:#fff;box-shadow: 0 0 20px rgba(206,206,206,.3);}
#app .list ul li .more span em{ position:absolute; left:-36px; top:0; width:36px; height:36px;display:block; background:#3680f8;transition:all .3s; opacity:0}
#app .list ul li .more span i{ position:relative; z-index:10}
#app .list ul li:hover .more span em{ left:0; opacity:1}

#client{ width:100%; padding:50px 0;}
#client .list{ margin-top:30px}
#client .list ul{display:flex;justify-content:flex-start;align-items:center;gap:30px;flex-wrap:wrap}
#client .list ul li{ width:calc((100% - 150px) / 6);height:80px;box-shadow: 0 0 20px rgba(206,206,206,.3); text-align:center; border:1px solid #eee; overflow:hidden;display:flex;justify-content:center;align-items:center;}
#client .list ul li img{max-width:100%}

#footer{ width:100%; background:#04182e;}
#footer .map{display: flex;justify-content:space-between;align-items:start; padding:50px 0}
#footer .map .contact{ width:350px; border-right:1px solid rgba(255,255,255,.15)}
#footer .map .contact .logo img{ height:50px}
#footer .map .contact .tel{ color:#fff; margin-top:20px; font-size:24px;font-family:"din"}
#footer .map .contact .qrcode{ margin-top:20px;display: flex;justify-content:flex-start;align-items:start;}
#footer .map .contact .qrcode .item { position:relative; width:50px;margin-right:20px}
#footer .map .contact .qrcode .item i{ width:50px; height:50px; text-align:center; line-height:50px; background:#0071B3; border-radius:50px; display:block; color:#fff; font-size:18px}
#footer .map .contact .qrcode .item em{display:none; padding: 5px; border-radius: 5px; position: absolute; left: 50%;  transform: translateX(-50%);; width: 140px; top: 60px;}
#footer .map .contact .qrcode .item em img{width: 100%;}
#footer .map .contact .qrcode .item em::after{content: ''; position: absolute; left: 50%; top: -5px; border-left: 10px transparent solid; border-right: 10px transparent solid; border-bottom: 10px #FFF solid; transform: translateX(-50%);}
#footer .map .link{display: flex;justify-content:flex-end;align-items:start;}
#footer .map .link .item{ margin-left:100px}
#footer .map .link .item h3{ font-size:16px; font-weight:700; margin-bottom:10px; color:#fff}
#footer .map .link .item a{ display:block; color:#8b9cb4}
#footer .map .link .item a:hover{ color:#fff}
#footer .copyright{ border-top:1px solid rgba(255,255,255,.1); padding:30px 0; text-align:center}
#footer .copyright,
#footer .copyright a{ color:#8b9cb4}
#footer .copyright a:hover{ color:#fff}
#footer .copyright i{ margin:0 10px}

@media (max-width:1300px){
	.wrap{ padding:0 20px}
}
@media (max-width:1100px){
	#header .right .nav ul li h3{padding:0 15px; }
	#footer .map .link .item{ margin-left:20px}
	#header .logo img{ height:50px}
}
@media (max-width:960px){
	#header .right .nav ul li h3{padding:0 10px; }
	#footer .map .link .item{ margin-left:20px}
	#header .logo img{ height:40px}
}

@media (max-width:900px){
	body,html{ font-size:.22rem; line-height:.34rem}
	.wrap{ padding:0px}
	#header{ width:100%; padding:0 .25rem;position:relative;}
	#header .wrap{ height:1rem;}
	#header .logo  img{ height:.5rem}
	#header .logo .txt{ display:none}
	#header .right .mnav{position:relative;display:block;width:.34rem; height:.33rem;cursor:pointer; margin-left:.1rem}
	#header .right .mnav span{position:absolute;display:block;width:.34rem;height:.03rem;background:#04182e;transition:all .5s;}
	#header .right .mnav .s1{top:.05rem;}
	#header .right .mnav .s2{top:.15rem;width:.26rem;}
	#header .right .mnav .s3{top:.25rem;}
	#header .right .mnav.isopen .s1{top:.15rem;transform:rotate(45deg);}
	#header .right .mnav.isopen .s2{width:0;opacity:0;}
	#header .right .mnav.isopen .s3{top:.15rem;transform:rotate(-45deg);}
	#header .right .nav{position: absolute;background:#fff;height: auto; min-height:100vh;width:100%;top:1rem;z-index:105;padding:.1rem .25rem 0;transform:translatex(105%);left:0; border-top:1px solid #eee}
	#header .right .nav ul{ display:block}
	#header .right .nav ul li{ width:100%}
	#header .right .nav ul li h3{ line-height:.7rem; height:.7rem; font-weight:normal;border-bottom:1px solid #eee; text-align:left; position:relative; display:block; padding:0}
	#header .right .nav ul li h3 a{font-size:.24rem;line-height:.7rem;display: block; padding:0; color:#333}
	#header .right .nav ul li h3 a:before{ display:none !important}
	#header .right .nav ul li h3 span{ padding-left:10%; position:absolute; right:0; top:0; display:block; opacity:.5;}
	#header .right .nav ul li h3 span i{ text-align:right; font-size:.24rem; color:#999;-webkit-transition: all .3s;transition: all .3s; margin:0}
	#header .right .nav ul li:hover h3{ background: none;}
	#header .right .nav ul li:hover h3 i{-webkit-transform: rotate(-180deg);-ms-transform: rotate(-180deg);transform: rotate(-180deg);}
	#header .right .nav ul li .sub{ position: inherit; left:auto; top: auto; width:auto; margin:0; z-index:100; padding-left:.2rem; background:#fff;box-shadow: 0 0 0 rgba(0,0,0,0);}
	#header .right .nav ul li .sub dl{ padding:0;}
	#header .right .nav ul li .sub dl a{ line-height:.7rem; padding:0; margin:0; border-bottom:1px solid #eee; color:#333}
	#header .right .nav ul li .sub dl a:first-child{ padding-top:0}
	#header .right .nav ul li .sub dl a:last-child{ padding-bottom:0}
	#header .right .nav ul li .sub dl a{ display:block; padding-left:0; border-left:0; font-size:.24rem; text-align: left;color:#68747f;}
	#header .right .nav ul li .sub dl a:hover{ background:none;}
	#header .right .nav.isopen{transform:translatex(0);}
	#header .right .lan{ position:relative; margin-left:0; margin-right:.2rem;}
	#header .right .lan .btn{ line-height:1rem}
	#header .right .lan .btn i{line-height: inherit; font-size:.28rem}
	#header .right .lan .btn i:last-child{ font-size:.22rem; margin-left:.05rem}
	#header .right .lan .list{ display:none; position:absolute; top:1rem; right:0;border-radius:0 0 .04rem .04rem; padding:.1rem;}
	#header .right .lan .list a{  font-size:.22rem; padding:.1rem;}
	#header.scroll{ background:#fff; border-bottom:0.01rem solid #eee;box-shadow: 0 1px 15px rgba(0,0,0,.05);}
	
	#banner{ width:100%;}
	#banner .focus .swiper-wrapper .swiper-slide{ height:5rem;}
	#banner .focus .swiper-slide .textbox .text .box{ width:90%; margin:0 auto}
	#banner .focus .swiper-slide .textbox .text h2{ font-size:.38rem;  line-height:.4rem; font-weight:700; letter-spacing:0}
	#banner .focus .swiper-slide .textbox .text p{ font-size:.22rem; line-height:.4rem;margin:.3rem auto}
	#banner .focus .swiper-button-next,#banner .focus .swiper-button-prev{ display:none}
	
	.htitle{ text-align:center;}
	.htitle h2{ font-size:.34rem}
	.htitle p{ margin-top:.1rem; font-size:.2rem;}	
	#about{ padding:.5rem .25rem}
	#about .list{ margin-top:.3rem;display: block;}
	#about .list .img{ width:100%;}
	#about .list .text{ width:100%; margin-top:.3rem}
	#about .list .text .content{ font-size:.22rem; line-height:1.8}
	#about .list .text .content p{ margin-bottom:.1rem; text-indent:0}
	#about .list .text .more{ margin-top:.3rem; text-align:center}
	#about .list .text .more a{ border-radius:.4rem; padding:.05rem .3rem; margin:0 .1rem; font-size:.22rem}
	#about .list .text .more a i{ margin-left:.1rem}
	
	#product{ padding:.5rem .25rem;}
	#product .list{ margin-top:.3rem}
	#product .list ul{gap:.25rem;}
	#product .list ul li{ width:calc((100% - .25rem) / 2)}
	#product .list ul li .img{ padding:.3rem 0; }
	#product .list ul li .img img{ height:1.6rem}
	#product .list ul li p{ padding:.1rem 0;}
	#product .list2{ margin-top:.3rem}
	#product .list2 ul{ display:block;gap:0}
	#product .list2 ul li{ width:100%}
	#product .list2 ul li .img{ padding:.3rem; }
	#product .list2 ul li .img img{ height:1.6rem}
	#product .list2 ul li p{padding:.1rem 0;}
	
	#app{padding:.5rem  0;background-attachment: inherit}
	#app .htitle{ padding-bottom:0}
	#app .htitle h2,
	#app .htitle p{ color:#fff}
	#app .list{ background: none; height: auto; padding:0 .25rem;}
	#app .list ul{ padding:.3rem 0; position:relative; top:0;gap:0 .25rem}
	#app .list ul li{ width:calc((100% - .25rem) / 2); padding:.25rem; border-right:1px solid #eee; margin-top:.3rem}
	#app .list ul li h2{ font-size:.24rem;border-left:3px solid #3680f8; line-height:.24rem; padding-left:.1rem}
	#app .list ul li .img{ margin-top:.1rem;}
	#app .list ul li p{ line-height:.34rem; margin-top:.2rem; height: auto}
	#app .list ul li .more{display:none}
	
	#client{padding:.5rem .25rem}
	#client .list{ margin-top:.3rem}
	#client .list ul{gap:.25rem;}
	#client .list ul li{ width:calc((100% - .25rem) / 2);}
	
	#footer .map{display: block;padding:.5rem 0}
	#footer .map .contact{ width:100%; border-right:0; text-align:center}
	#footer .map .contact .logo img{ height:.6rem}
	#footer .map .contact .tel{ color:#fff; margin-top:.4rem; font-size:.34rem; }
	#footer .map .contact .tel a{ color:#fff}
	#footer .map .contact .qrcode{ display:none}
	#footer .map .link{display: none;}
	#footer .copyright{ padding:.3rem .25rem;display: block; text-align:center; font-size:.21rem}
	#footer .copyright i{ margin:0; display:block}
}


#nbanner{ background-repeat:no-repeat; background-position: center center; background-size:cover}
#nbanner .wrap{ height:350px;display: flex;justify-content:flex-start;align-items:flex-end;}
#nbanner .local{color:#fff; padding-bottom:20px}
#nbanner .local a{ color:#fff;}
#nbanner .local i{ margin:0 10px}

#clist{ width:100%; border-bottom:1px solid #eee; background:#f9f9f9}
#clist .wrap{ text-align:center}
#clist a{ margin:0 20px; font-size:16px; position:relative; display: inline-block; line-height:60px}
#clist a:before{position:absolute;content:"";left:50%;bottom:0px;width:0%;height:3px;transform:translateX(-50%);background:#3680f8;;transition:all .3s; opacity:0}
#clist a.currclass:before{width:100%; opacity:1}
#clist a:hover:before{width:100%; opacity:1}

#main{ padding:50px 0}
#main .solution{min-height:600px}
#main .solution ul{display: flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
#main .solution ul li{ width:calc((100% - 60px) / 3); border:1px solid #eee}
#main .solution ul li .img{ background:#fff; padding:30px; text-align:center; overflow:hidden}
#main .solution ul li .img img{ height:150px}
#main .solution ul li .info{ padding:20px;}
#main .solution ul li .info h2{ font-size:16px;}
#main .solution ul li .info p{ margin-top:10px; color:#999; line-height:26px}
#main .solution ul li .info p{word-break:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical}
#main .solution ul li .info span{ display:inline-block; border:1px solid #eee; padding:5px 50px; margin-top:20px}
#main .solution ul li .info span i{ margin-left:10px}
#main .solution ul li a:hover .info span{ background:#04182e; border:1px solid #04182e; color:#fff}

#main .product{min-height:600px}
#main .product ul{display: flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
#main .product ul li{ width:calc((100% - 90px) / 4); border:1px solid #eee}
#main .product ul li .img{ background:#fff; padding:30px; text-align:center; overflow:hidden}
#main .product ul li .img img{ height:150px}
#main .product ul li .info{ padding:20px;}
#main .product ul li .info h2{ font-size:16px; line-height:24px; height:50px}
#main .product ul li .info p{ margin-top:10px; color:#999; line-height:26px}
#main .product ul li .info p{word-break:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical}
#main .product ul li .info span{ display:inline-block; border:1px solid #eee; padding:5px 50px; margin-top:20px}
#main .product ul li .info span i{ margin-left:10px}
#main .product ul li a:hover .info span{ background:#04182e; border:1px solid #04182e; color:#fff}

#main .app{ min-height:600px}
#main .app ul{display: flex;justify-content:space-between;align-items:start;gap:30px;flex-wrap:wrap}
#main .app ul li{ width:calc((100% - 90px) / 4); border:0px solid #eee}
#main .app ul li .img{ height:220px; overflow:hidden}
#main .app ul li .img img{width:100%;height:100%;object-fit:cover}
#main .app ul li .info{ margin-top:20px}
#main .app ul li .info h2{ font-size:16px;}
#main .app ul li .info p{ margin-top:10px; color:#999; line-height:26px}
#main .app ul li .info p{word-break:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical}
#main .app ul li .info span{ display:inline-block; border:1px solid #eee; padding:5px 50px; margin-top:20px}
#main .app ul li .info span i{ margin-left:10px}
#main .app ul li a:hover .info span{ background:#04182e; border:1px solid #04182e; color:#fff}

#main .news ul li{ padding:20px 0; border-bottom:1px solid #eee}
#main .news ul li a{display: flex;justify-content:space-between;align-items:center;}
#main .news ul li .img{ width:20%; height:180px; overflow:hidden}
#main .news ul li .img img{ width:100%;height:100%;object-fit:cover}
#main .news ul li .info{ width:75%}
#main .news ul li .info .t{ font-size:16px; font-weight:700}
#main .news ul li p{ margin-top:10px; line-height:24px; color:#999}
#main .news ul li .info p{word-break:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical}
#main .news ul li .info .more{ color:#3680f8; margin-top:10px}
#main .news ul li .info .more i{ margin-left:10px}

#main .job ul li{ padding:20px 0; border-bottom:1px solid #eee}
#main .job ul li .t{ font-size:16px; font-weight:700}
#main .job ul li p{ margin-top:10px; line-height:24px; color:#999}
#main .job ul li p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical}
#main .job ul li .more{ color:#3680f8; margin-top:10px}
#main .job ul li .more i{ margin-left:10px}

#main .about{display: flex;justify-content:space-between;align-items:start;}
#main .about .text{ width:55%; font-size:16px; line-height:1.8}
#main .about .text p{ margin-bottom:10px;}
#main .about .img{ width:40%}
#main .about .img img{ width:100%}

#main .honnor ul{display: flex;justify-content:flex-start;align-items:start;flex-wrap:wrap; gap:30px}
#main .honnor ul li{ width:calc((100% - 120px) / 5)}
#main .honnor ul li .img img{ width:100%}
#main .honnor ul li p{ text-align:center; margin-top:10px}

#main .contact{ padding:40px 0}
#main .contact .mycontent{ font-size:18px; padding-bottom:40px; line-height:36px}
#main .contact iframe{ height:400px}
#main .contact .img img{ width:100%}

#main .content h1{ font-size:28px; padding:20px 0; text-align:center; font-weight:normal}
#main .content .info{ border-bottom:1px solid #eee; text-align:center; padding-bottom:10px}
#main .content .info span{ margin:0 10px; color:#999}
#main .content .mycontent{ padding:40px 0; line-height:1.8; font-size:16px}
#main .content .mycontent img{ width:640px !important;height:auto !important}
#main .content .mycontent p{ padding-bottom:10px}
#main .content .updown{ border-top:1px solid #eee; padding:20px 0 0}
#main .content .updown p{ font-size:16px}
#main .content .updown p a{ color:#04182e}

#fenye{padding:50px 0 0px;text-align:center;clear:both;}
#fenye table{text-align:center;margin:0 auto}
#fenye a{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee; background:#FFF}
#fenye .prev,#fenye .next{width:52px;text-align:center}
#fenye a.curr{font-weight:700;color:#fff;background:#04182e;border:1px solid #04182e}
#fenye a:hover{background:#04182e;color:#fff;border:1px solid #04182e}
#fenye span{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee;background:#FFF}

#guest{ display:none; position:fixed; left:50%; top:50%; z-index:9999; background:#fff;transform:translate(-50%,-50%);; width:500px; padding:10px 30px; border:1px solid #ddd;box-shadow:0px 10px 12px 0px rgba(0,0,0,0.1);}
#guest .title{display: flex;justify-content:space-between ;align-items:center;}
#guest .title h2{ font-size:18px; font-weight:normal}
#guest .title .btn_close{ font-size:18px;}
#guest .tisp{ background:#f5f5f5; width:100%; border-right:4px; text-align:center; padding:5px 0; margin-top:10px; line-height:20px}
#guest .box{ margin-top:10px}
#guest .box .item{ padding:10px 0;display: flex;justify-content:space-between ;align-items:center;}
#guest .box .item label{ width:80px; text-align:right; font-size:14px; line-height:20px}
#guest .box .item label font{color:#f00;margin-right:5px}
#guest .box .item .inp{ width:calc(100% - 100px)}
#guest .box .item .inp .text{ border:1px solid #ddd; border-radius:6px; text-indent:10px; width:100%; line-height:40px}
#guest .box .item .inp .textarea{border:1px solid #ddd; border-radius:6px; text-indent:10px; width:100%; line-height:40px; height:120px}
#guest .box .item .inp span{ margin-right:10px}
#guest .box .item .inp span label{ width:auto; text-align:left;}
#guest .box .item .inp span label input{ margin-right:5px; display:inline-block}
#guest .box .button{ padding:0 0 10px; text-align:center;}
#guest .box .button .btn{ background:#3680f8; color:#fff; display:inline-block; padding:13px 40px; border:0; cursor: pointer}
#guest .box .button .btn:hover{ background:#04182e}

@media (max-width:900px){
	body,html{ font-size:.22rem; line-height:.34rem}

	#fenye{padding:.5rem 0 0px;}
	#fenye a{margin:0 .02rem;padding:.1rem .15rem}
	#fenye .prev,#fenye .next{width:.55rem;}
	#fenye span{margin:0 .02rem;padding:.1rem .15rem}
	#fenye .num,#fenye .prev{display:none}
	
	#nbanner .wrap{ height:3.5rem;}
	#nbanner .local{ font-size:.2rem; padding:.25rem}
	#nbanner .local a{ font-size:.2rem}
	#nbanner .local i{ margin:0 .1rem;}
	
	#clist{ padding:0}
	#clist a{ margin:0 .2rem; font-size:.22rem; position:relative; display: inline-block; line-height:.7rem}
	
	#main{ padding:.5rem .25rem}
	#main .title h2{font-size:.3rem; padding-bottom:.2rem;}
	#main .title .weizhi{ display:none}
	
	#main .solution{ margin-top:.5rem;}
	#main .solution ul{align-items:center;gap:.3rem 0}
	#main .solution ul li{ width:100%; border:1px solid #eee}
	#main .solution ul li .img{padding:.25rem;}
	#main .solution ul li .img img{ height:2rem}
	#main .solution ul li .info{ padding:.25rem;}
	#main .solution ul li .info h2{ font-size:.24rem;}
	#main .solution ul li .info p{ font-size:.21rem; margin-top:.1rem;line-height:.36rem}
	#main .solution ul li .info p{word-break:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical}
	#main .solution ul li .info span{padding:.05rem .5rem; margin-top:.2rem}
	#main .solution ul li .info span i{ margin-left:.1rem}
	
	#main .product{ margin-top:.5rem;}
	#main .product ul{align-items:center;gap:.3rem 0}
	#main .product ul li{ width:100%; border:1px solid #eee}
	#main .product ul li .img{padding:.25rem;}
	#main .product ul li .img img{ height:2rem}
	#main .product ul li .info{ padding:.25rem;}
	#main .product ul li .info h2{ font-size:.24rem;}
	#main .product ul li .info p{ font-size:.21rem; margin-top:.1rem;line-height:.36rem}
	#main .product ul li .info p{word-break:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical}
	#main .product ul li .info span{padding:.05rem .5rem; margin-top:.2rem}
	#main .product ul li .info span i{ margin-left:.1rem}
	
	#main .app{ margin-top:.5rem;}
	#main .app ul{align-items:center;gap:.5rem 0}
	#main .app ul li{ width:100%;}
	#main .app ul li .img{height:3rem}
	#main .app ul li .img img{}
	#main .app ul li .info{ margin-top:.2rem}
	#main .app ul li .info h2{ font-size:.24rem;}
	#main .app ul li .info p{ font-size:.21rem; margin-top:.1rem;line-height:.36rem}
	#main .app ul li .info p{word-break:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical}
	#main .app ul li .info span{padding:.05rem .5rem; margin-top:.2rem}
	#main .app ul li .info span i{ margin-left:.1rem}

	#main .news{ margin-top:.3rem}
	#main .news ul li{ padding:.2rem 0;}
	#main .news ul li .img{ width:2rem; height:1.8rem;}
	#main .news ul li .info{width:calc(100% - 2.3rem)}
	#main .news ul li .info .t{ font-size:.24rem; font-weight: normal;}
	#main .news ul li .info .t{word-break:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical}
	#main .news ul li .info p{ display:none}
	#main .news ul li .info .more{ margin-top:.1rem; font-size:.2rem}
	#main .news ul li .info .more i{ margin-left:.1rem}

	#main .job{ margin-top:.3rem}
	#main .job ul li{ padding:.2rem 0;}
	#main .job ul li .t{ font-size:.24rem; font-weight: normal;}
	#main .job ul li .t{word-break:break-word;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical}
	#main .job ul li p{ display:none}
	#main .job ul li .more{ margin-top:.1rem; font-size:.2rem}
	#main .job ul li .more i{ margin-left:.1rem}
	
	#main .about{display: block;}
	#main .about .text{ width:100%; font-size:.22rem; line-height:1.6}
	#main .about .text p{ margin-bottom:.05rem; text-indent:0}
	#main .about .img{ width:100%}
	
	#main .honnor{ margin-top:.3rem}
	#main .honnor ul{display: flex;justify-content:flex-start;align-items:start;flex-wrap:wrap; gap:.25rem}
	#main .honnor ul li{ width:calc((100% - .25rem) / 2)}
	#main .honnor ul li p{ text-align:center; margin-top:.2rem}
	
	#main .contact{ padding:.3rem 0}
	#main .contact .mycontent{ font-size:.24rem; padding-bottom:.4rem; line-height:.44rem}
	#main .contact iframe{ height:4rem}
	
	#main .content h1{ font-size:.3rem; padding:.25rem 0;}
	#main .content .info{ padding-bottom:.1rem}
	#main .content .info span{ margin:0 .1rem;}
	#main .content .info span+span+span{ display:none}
	#main .content .mycontent{ padding:.4rem 0; line-height:1.6; font-size:.24rem}
	#main .content .mycontent p{ padding-bottom:.1rem}
	#main .content .mycontent img{ width:100% !important;height:auto !important}
	#main .content .updown{ border-top:1px solid #eee; padding:.2rem 0 0}
	#main .content .updown p{ font-size:.22rem}
	#main .content .updown p a{ color:#94c93d}
	
	#guest{ width:90%; padding:.2rem;}
	#guest .title h2{ font-size:.23rem; }
	#guest .title .btn_close{ font-size:.23rem;}
	#guest .tisp{ padding:.05rem 0; margin-top:.1rem; font-size:.2rem}
	#guest .box{ margin-top:.1rem}
	#guest .box .item{ padding:.1rem 0;}
	#guest .box .item label{ width:1rem; text-align:right; font-size:.2rem; line-height:.6rem}
	#guest .box .item .inp{ width:calc(100% - 1.2rem)}
	#guest .box .item .inp .text{ text-indent:.1rem; line-height:.6rem}
	#guest .box .item .inp .textarea{text-indent:.1rem;line-height:.4rem; height:1rem}
	#guest .box .item .inp span{ margin-right:.1rem}
	#guest .box .item .inp span label input{ margin-right:.05rem;}
	#guest .box .button{ padding:0 0 .1rem;}
	#guest .box .button .btn{ padding:.2rem .5rem}
}