.phone-menu { position:fixed; display:none; right: 20px; top: 15px; z-index: 2000; }
.menu_h { display: block; background:#5eaad1; transition: 0.3s all; z-index:1000; -webkit-transition: 0.3s all; border: none; width: 40px; height: 40px; padding: 0; outline: none; position: absolute; right: 0; top: 0;  border-radius: 100%;}
.menu_h::before, 
.menu_h::after, 
.menu_h span { background: #fff ; border-radius: 2px;  content: ''; position: absolute; height: 2px; width: 50%; left: 25%; top: 50%;  overflow: hidden; transition:0.3s all; }
.menu_h::before,
.menu_h::after {  -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
.menu_h span {-webkit-transform: translate3d(0, -1px, 0); transform: translate3d(0, -1px, 0);}
.menu_h::before { -webkit-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0); }
.menu_h::after { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); }
.menu-open .menu_h{ background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.2);}
.menu-open .menu_h span { opacity: 0; }
.menu-open .menu_h::before { background: #5eaad1; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); }
.menu-open .menu_h::after { background: #5eaad1; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); }

.menu-open .menu-box-mask-over{ visibility: visible;}
.menu-open .menu-box-mask{width: 2600px; height: 2600px; margin: -1300px 0 0 -1300px; visibility: visible;  transition: 0.5s all ease-in; border-radius: 100%;  -webkit-border-radius: 100%; overflow: hidden;}

.menu-box-mask-over{position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; visibility: hidden; z-index: 1000;}
.menu-box-mask{position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;  overflow: hidden;  visibility: hidden; border-radius: 100%;  -webkit-border-radius: 100%; }

.wrap{ position: relative; width: 1280px; margin: 0 auto;}
header { position: relative; z-index: 100;}
header .top{ background: #f0f0f0; padding: 10px 0;}
header .top .cont{ float: left;}
header .top .cont dl{ float: left;}
header .top .cont dl:first-child{ margin-right: 50px;}
header .top .cont dl dt{ float: left; margin-right: 5px; margin-top:2px;}
header .top .cont dl dd{ float: left; }
header .top .cont dl dd a{color: #5eaad1;}
header .top .cont dl dd a:hover{ text-decoration: underline;}
header .top .right{ float: right;}
header .top .search{ float: left; background: #fff; position: relative; border-radius: 30px; padding: 1px 10px; overflow: hidden;}
header .top .search .inp{ border: 0; width: 170px; }
header .top .search .bon{ background: url(../images/home_08.jpg) no-repeat; width: 22px; height: 23px; border: 0; position: absolute; z-index: 2; right: 10px; top: 50%; margin-top: -13px;}
header .top .share{ float: left; margin-left: 30px;}
header .top .share a{ vertical-align: top; height: 16px; display: inline-block; padding: 5px; border-radius: 100%;}
header .top .share a img{ vertical-align: top;}
header .top .share a:hover{ background: #ddd; }

header .menu-box{ background: #243238; height: 120px;}

.logo img{ width: 275px; height: 79px;}

.menu ul{justify-content: flex-end;}
.menu>ul> li{ position: relative; margin-left: 40px;}
.menu>ul> li> a{ display: block; padding: 14px 0 10px; text-transform: uppercase; border-bottom: 3px solid #fff; font-weight: bold; color:#fff;}
.menu>ul> li.cur > a{ border-bottom-color:#fff; color: #fff;}
.menu li .child{ position: absolute; top: 100%; left: -20px;  display: none; box-shadow:  0 5px 5px rgba(0,0,0,0.1); background: #fff; padding:10px 20px 5px; border-top: 1px solid #5eaad1; }
.menu li .child:after{ content: " "; position: absolute; left: 40px; top: -12px;  width: 0; height: 0; border: 6px solid rgba(0,0,0,0); border-bottom-color: #5eaad1;}
.menu li .child li{ padding: 5px 0; border-bottom: 1px solid #fafafa;}.menu li .child li:last-child{ border: 0;}
.menu li .child li a{ display: block; white-space: nowrap;}
.menu li:hover .child{ display: block;}

.index-banner .swiper-slide{ height: 700px; position: relative; overflow: hidden;}
.index-banner .swiper-slide img{ width: 1920px; margin-left: -960px; height: 100%; position: absolute; left: 50%; top: 0; }
.index-banner .swiper-pagination-bullet{ height: 3px; width: 30px; border-radius: 0; opacity: 0.3;}
.index-banner .swiper-pagination-bullet-active{ background: #5eaad1; opacity: 1;}

.index-product{ }
.index-product .bg-txt{  position: absolute; width: 100%; top: 120px; left: 0;}

.index-product .top{ padding: 70px 0 50px; position: relative; z-index: 2;}
.index-product .top .left {}
.index-product .top .right{}
.index-product .top .right li{ float: left; text-align: center; margin: 0 15px;}
.index-product .top .right li a{ color: #000; text-transform: uppercase;}
.index-product .top .right li img{ border-radius: 100%; border:2px solid #fff; width: 52px; height: 52px;}
.index-product .top .right li span{ display: block; opacity: 0.6;  padding-top: 5px;}
.index-product .top .right li.cur img{ border-color: #5eaad1;}
.index-product .top .right li.cur span{ opacity: 1;}

.index-tit{ text-transform: uppercase; line-height: 1.3; font-weight: bold; color: #5eaad1;}
.index-tit span{ display: inline-block; position: relative; padding-bottom: 15px;}
.index-tit span:after{ content: " "; position: absolute; left: 0; bottom:0px; height: 4px; width: 30px; background: #5eaad1;}

.index-product .swiper-pagination-bullet{ height: 3px; width: 30px; border-radius: 0; opacity: 0.2;}
.index-product .swiper-pagination-bullet-active{ background: #5eaad1; opacity: 1;}
.index-product .list{ margin: 0 -10px 120px; position: relative;}
.index-product .list .swiper-slide{ width: 25%;}
.index-product .list .w{ border: 1px solid #000; margin: 0 10px;}
.index-product .list .w .img{border: 1px solid #000; overflow: hidden;}
.index-product .list .w .img a{border:1px solid #5eaad1; display: block; background-position: center; background-size: cover; transition: 0.4s all;}
.index-product .list .w .img img{ width: 100%; height: 298px; opacity: 0;}
.index-product .list .txt{ background: #5eaad1; padding: 20px;}
.index-product .list .txt a{ color: #fff;}
.index-product .list .more{ margin-top: 30px; transition: 0.4s all;}
.index-product .list .more a{ display: block; background: url(../images/j1.png); width: 30px; height: 30px;}
.index-product .list .w:hover .img a{ transform: scale(1.1);}
.index-product .list .w:hover .more{ animation: m1 0.8s 1;}
.index-product .list .bon{ position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px;}
.index-product .list .bon.bon-left{ left: -100px; background: url(../images/l.png) no-repeat center;}
.index-product .list .bon.bon-left:hover{ background-image: url(../images/l1.png);}
.index-product .list .bon.bon-right{ right: -100px; background: url(../images/r.png) no-repeat center;}
.index-product .list .bon.bon-right:hover{ background-image: url(../images/r1.png);}
body .index-product .pagination{ bottom: -60px; width: 100%;}
body .index-product .pagination span{ margin: 0 5px;}
@keyframes m1
{
0% {transform: translateX(0px);}
50% {transform: translateX(30px);}
100% {transform: translateX(0px);}
}
@-webkit-keyframes m1 /*Safari and Chrome*/
{
0% {transform: translateX(0px);}
50% {transform: translateX(30px);}
100% {transform: translateX(0px);}
}

.index-would .w{ height: 210px; color: #fff;}
.index-would .w .fiex1{ font-weight: bold;}
.index-would .w .more a{  display: block; background: #fff; color: #5eaad1; padding: 5px 30px; border-radius: 40px;}
.index-would .w .more a:hover{ background: #f0f0f0; }


.index-company .index-tit{ margin: 60px 0 30px;}
.index-company .box{ margin: 0 -10px 200px; }
.index-company .txt{ margin: -90px 30px 0; background: #fff; padding: 25px; position: relative; z-index: 2; box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.index-company .txt .more{ margin-top: 0px; transition: 0.4s all;}
.index-company .txt .more a{ display: block; background: url(../images/j2.png) center no-repeat; width: 30px; height: 30px;}
.index-company .txt .ellipsis{ margin-bottom: 20px;}
.index-company .w { margin: 0 10px; padding-bottom: 30px;}
.index-company .w .img{overflow: hidden;}
.index-company .w .img a{ display: block; background-position: center; background-size: cover; transition: 0.4s all;}
.index-company .w .img img{ width: 100%; height: 335px; opacity: 1;}
.index-company .w{ transition: 0.8s all; padding-top: 50px;}
.index-company .w:hover .img a{ transform: scale(1.1);}
.index-company .w:hover .ellipsis{ color:#5eaad1 ;}
.index-company .w:hover a{ color: #5eaad1;}
.index-company .swiper-slide-next .w{/*padding-top:0px;*/}
.index-company .box{ position: relative; z-index: 2;}
.index-company .box .bon{ position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px;}
.index-company .box .bon.bon-left{ left: -100px; background: url(../images/l.png) no-repeat center;}
.index-company .box .bon.bon-left:hover{ background-image: url(../images/l1.png);}
.index-company .box .bon.bon-right{ right: -100px; background: url(../images/r.png) no-repeat center;}
.index-company .box .bon.bon-right:hover{ background-image: url(../images/r1.png);}
.index-company .bg-txt{ color: #aaa; position: absolute; width: 100%; bottom: -50px; left: 0;}
.bg-txt img{ width: 100%; height: auto; opacity: 0.5;}
.index-profile{ background-position: center; background-size: cover; color: #fff; padding: 60px 0 80px;}
.index-profile  .index-tit{ color: #fff;}
.index-profile .left{ float: left; width: 46%; margin-right: 5%;}
.index-profile .left .w{ position: relative; /*margin-top: -120px;*/ border-top: 5px solid #d7bf8a;}
.index-profile .left .w:after{ content: " "; position: absolute; width: 200px; height: 200px; background: #eaa836; left: -10px; bottom: -10px; z-index: 1;}
.index-profile .left img{ width: 100%; height: auto; position: relative;z-index: 2;}
.index-profile .index-tit span:after{ background: #fff;}
.index-profile .right .txt{ margin: 50px 0;}
.index-profile .right .more{ text-transform: uppercase; }
.index-profile .right .more a{ color: #fff;}
.index-profile .right .more a:hover{ color: #eee;}

.footer{ background: #2b2b2b; color: #c8c8c8;}
.footer a{ color: #c8c8c8;}
.footer a:hover{ color: #fff;}
.footer .top{ padding: 30px 0 60px; border-bottom: 1px solid #444;}
.footer .top .left{ float: left; margin-right: 90px;}
.footer .top .right{ overflow: hidden;}
.footer .top .right dl{ float: left; margin-right: 50px;}
.footer .top .right dl:last-child{ margin-right: 0;}
.footer .top .right dl dd li{ padding-top: 10px; color: #999;}
.footer .top .right dl dd a{ color: #999;}
.footer .top .right dl dd a:hover{ color: #fff;}
.footer .bottom{ padding: 25px 0; color: #888;}
.footer .bottom .oh span{ display: inline-block;}
.footer .bottom .fr a{ background: #aeaeae; margin-left: 10px; vertical-align: top; height: 16px; display: inline-block; padding: 5px; border-radius: 100%;}
.footer .bottom .fr a img{ vertical-align: top;}
.footer .bottom .fr a:hover{ background: #ddd; }

.other-baner{ background-position: center; background-size: cover;}
.other-baner .w{ height: 573px; color: #fff; align-items: end;}
.other-baner .w.fiex{ padding-bottom: 30px; }
.other-baner .w.fiex dl,.other-baner .w.fiex dd{text-shadow: 3px 3px 4px #222;}
.other-baner .w a{ color: #fff;}
.other-baner .w a:hover{  color: #eee; text-shadow: 0 0 2px #5eaad1;}

.other-menu { position: relative; z-index: 100;display:none;}

.other-menu .wrap > div{ position: relative;}
.other-menu{ height: 50px; border-bottom: 1px solid #ddd;}
.other-menu .wrap > div{ display: inline-block; position: relative; line-height: 50px;   margin-right: 40px;}
.other-menu .wrap > div.cur:after{ content: " "; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: #5eaad1;}
.other-menu.open .pos{ position: fixed; left: 0; top: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #ddd;}

.other-menu .wrap > div.d:before{ content: " "; position: absolute; right: -15px; top: 50%; margin-top: -3px; background: url(../images/j3.png) no-repeat; width: 9px; height: 7px;}
.other-menu .wrap .child{ text-align: center; position: absolute;  min-width: 160px; margin-left: -80px; left: 50%; top: 100%;  background: #5eaad1; padding: 10px 0; margin-top: 0px; line-height: 1.5; display: none;}
.other-menu .wrap .child a{ color: #fff; padding: 5px 10px; display: block; text-align: left; }
.other-menu .wrap .child a:hover{ color: #f0f0f0;}
.other-menu .wrap >div:hover .child{ display: block;}

.other-menu .wrap .child dd{ position: relative; padding-right: 10px;}
.other-menu .wrap .child dd.ch:after{ content: ">"; position: absolute; right: 10px; top: 50%; margin-top: -0.7em; color: #fff; font-family: "宋体";}
.other-menu .wrap .child .child2{ text-align: center; position: absolute;  min-width: 160px;  left: 100%; top:0;  background: #5eaadd; padding: 10px 0; margin-top: 0px; line-height: 1.5; display: none; box-shadow: 0 0 5px rgba(0,0,0,0.2); border-radius: 2px;}
.other-menu .wrap .child .child2 a{ }
.other-menu .wrap .child dd:hover{ background: #5ebbdd;}
.other-menu .wrap .child dd:hover .child2{ display: block;}
.other-menu .wrap .child .child2 a:hover{background: #5e88dd;}


.about-1{ padding: 70px 0 120px;}
.about-1 .left{ float: left; width: 46%; margin-right: 8%;}
.about-1 .left .w{ position: relative;  z-index: 1;}
.about-1 .left .w:after{ background: url(../images/ab_07.jpg) no-repeat; content: " "; position: absolute; left: 0; right: 0; height: 60px; background-size: 100% 100%; top: 100%;}
.about-1 .left .w a{border-radius: 10px; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100;}
.about-1 .left .w a i{ position: absolute; z-index: 3; background: url(../images/video.png) no-repeat; width: 84px; height: 84px; margin: -42px 0 0 -42px; left: 50%; top: 45%;display:none;}
.about-1 .left .w a span{position: absolute; left: 0; right: 0; top: 60%; text-align: center; color: #fff; z-index: 3;display:none;}
.about-1 .left .w a img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
.about-1 .left .w a:after{ background: #000; opacity: 0.3; content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;display:none;}
.about-1 .left .w video{ vertical-align: top; height: 420px; width: 99.9%; background: #000; visibility: hidden;}
.about-1 .left .w.open{ background: #000;}
.about-1 .left .w.open a{ visibility: hidden;}
.about-1 .left .w.open video{ visibility: visible;}
.about-1 .right{ overflow: hidden;}
.about-1 .right .t{ padding: 30px 0 30px;}

.about-2{ background: #f8f8f8; padding: 60px 0;}
.about-2 .index-tit{margin-bottom:40px;}
.about-2 .left{ float: left; width: 50%;}
.about-2 .left img{ width: 100%; height: auto; margin-left: -30px;}
.about-2 .right{ overflow: hidden;}
.about-2 .right p{ padding-left: 30px; position: relative; margin-bottom: 20px;}
.about-2 .right p:after{ content: " "; margin: 3px 0 0 3px; position: absolute; left: 0; top: 10px; background: #5dabd2; width: 6px; height: 6px; border-radius: 100%;}
.about-2 .right p:before{ content: " "; position: absolute; width: 6px; height: 6px; left: 0; top: 10px;  padding: 2px; border: 1px solid #5dabd2;  border-radius: 100%;}

.about-3{ background: #fff; padding:60px 0 90px;}
.about-3 .left{ float: right; width: 40%; margin-left: 15%; position: relative;}
.about-3 .left img{ width: 100%; height: auto; top: -50px; left: -50px; position: relative; z-index: 2;}
.about-3 .left:after{content: " "; position:absolute; left: 0; bottom: 0; right: 0; height: 50%; z-index: 1; border: 3px solid #5dabd2;}
.about-3 .right{ overflow: hidden; padding-top: 50px;}

.about-4{ padding: 60px 0 90px;}
.about-4 .index-tit{ color: #fff; }
.about-4 .index-tit span:after{ background: #fff;}
.about-4 .box{ margin: 0 -20px; margin-top: 40px; position: relative;}
.about-4 .swiper-slide{ width: 25%;}
.about-4 .w{ margin: 0 20px; background: #fff; padding: 5px;}
.about-4 .w .img{overflow: hidden;}
.about-4 .w .img a{ display: block; background-position: center; background-size: cover; transition: 0.4s all;}
.about-4 .w .img img{ width: 100%; height: 208px; opacity: 0;}
.about-4 .txt{  padding: 20px;}
.about-4 .txt a{ color: #5eaad1;}
.about-4 .bon{ position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px;}
.about-4 .bon.bon-left{ left: -100px; background: url(../images/l3.png) no-repeat center;}
.about-4 .bon.bon-right{ right: -100px; background: url(../images/r3.png) no-repeat center;}
.about-4 .w:hover .img a{ transform: scale(1.1);}

.service-1{ padding: 60px 0 90px;}
.service-1 .txt-bg{ position: absolute; left: 0; right: 0; top: 50px;}
.service-1 .txt-bg img{ width: 100%; height: auto;}
.service-1 .box{ margin: 50px -20px 0;}
.service-1 .box .w{ margin: 0 20px 0; height: 370px; background-position: center; background-size: 100% 100%; }
.service-1 .box .w .txt{ width: 60%; margin: 0 auto; color: #fff; text-align: center; padding-top: 150px; position: relative;}
.service-1 .box .w .txt:after{ content: " "; position: absolute; left: 50%; top: 120px; width: 30px; margin-left: -15px; height: 4px; background: #fff;}
.service-1 .box .w .txt .p1{ opacity: 0.8; font-weight: bold; margin-bottom: 30px; position: relative;}
.service-1 .box .w .txt .p2{ opacity: 0.9;}

.service-1 .box .swiper-slide{ width: 33.33%;}
.service-1 .box .swiper-slide.swiper-slide-next{ padding-top: 110px; padding-bottom: 0;}
.service-1 .box .swiper-slide{ padding-top: 0; transition: 0.8s all; padding-bottom: 110px;}
.service-1 .box .bon{ position: absolute; bottom: 0px;   width: 76px; height: 66px; z-index: 10;}
.service-1 .box .bon.s-left{ left: 50%; margin-left: -300px; background: url(../images/left1.png) no-repeat center;}
.service-1 .box .bon.s-right{ right: 50%;  margin-right: -300px; background: url(../images/right1.png) no-repeat center;}

.service-2{ padding: 60px 0 90px;}
.service-2 .index-tit{ color: #fff; }
.service-2 .index-tit span:after{ background: #fff;}
.service-2 .box{ margin-top: 50px;}
.service-2 li{ float: left; width: 16%; text-align: center; position: relative; padding-bottom: 100px;}
.service-2 li:first-child+li,
.service-2 li:first-child+li+li+li{ margin: 0 4%; padding-top: 100px; padding-bottom: 0;}
.service-2 li dt span{ background: #fff; display: inline-block; padding: 30px; border-radius: 100%;}
.service-2 li dt span img{ width: 86px; height: 86px;}
.service-2 li dd{ position: absolute; left: 0; right: 0; bottom: 20px; color: #fff;}
.service-2 li:first-child+li dd,
.service-2 li:first-child+li+li+li dd{  top: 0; bottom: auto;}

.service-2 li:first-child+li dt span,
.service-2 li:first-child+li+li+li dt span{ background: #5dabd2;}

.service-2 li:first-child+li:after,
.service-2 li:first-child+li+li+li:after{ content: " "; position: absolute;  width: 40%; left: 92%; top:42%; height: 1px; background: #fff; transform: rotate(-25deg);}
.service-2 li:first-child+li:before,
.service-2 li:first-child+li+li+li:before{ content: " "; position: absolute;  width: 40%; right: 92%; top:42%; height: 1px; background: #fff; transform: rotate(25deg);}

.service-3{ padding: 60px 0 90px;}
.service-3 .box{ margin-top: 50px;}
.faq{}
.faq li{ margin-bottom: 30px;}
.faq dt{ background: #9ecde4; position: relative; padding: 15px 30px;}
.faq dt i{ position: absolute; left: 20px; top: 50%; margin-top: -15px; background: url(../images/faq.png) no-repeat; width: 30px; height: 30px;}
.faq dt span{ padding-left: 40px; color: #fff; display: block;}
.faq dt em{ position: absolute;  cursor: pointer; right: 20px; top: 50%; margin-top: -10px; width: 20px; height: 20px;}
.faq dt em:after{ content: " "; background: #fff; position: absolute; left: 0; right: 0; height: 2px; top: 50%; margin-top: -1px;}
.faq dt em:before{content: " "; background: #fff; position: absolute; left: 50%; top: 0; width: 2px; bottom:0; margin-left: -1px;}
.faq dd{ padding: 20px 40px 40px; box-shadow: 0 0 5px rgba(158,205,228,0.5); display: none;} 
.faq .open dt em:before{ display: none;}
.faq .open dd{ display: block;}

.from-box{ text-transform: uppercase; padding: 50px 0 90px;}
.from-box .index-tit{margin-bottom:40px;}
.from-box form{ display: block; margin-top: 50px;}
.from-box .item{ width: 50%; float: left; margin-bottom: 20px;}
.from-box .item dt{ margin-bottom: 10px;}
.from-box .item.item5{ width: 100%;}
.from-box .item textarea,
.from-box .item input{ border:0; background: #edf0f1; width: 100%; box-sizing: border-box; padding: 10px;}
.from-box .item textarea:focus,
.from-box .item input:focus{ box-shadow: 0 0 3px #4ba8d7; background: #e9f4f8;  }
.from-box .item.item1 dd,
.from-box .item.item3 dd{ padding-right: 10%;}
.from-box .buttons{ background: #5dabd2; color: #fff; border-radius: 5px; padding: 10px 20px; border: 0;}

.contact-2 .map{ height: 510px;}

.contact-1{ padding: 60px 0 0;}
.contact-1 .left{ float: left; width: 50%;}
.contact-1 .left img{ width: 100%; height: auto; }
.contact-1 .right{ overflow: hidden; padding: 20px 0 20px 90px;}
.contact-1 .right .t{ margin-bottom: 20px; font-weight: bold;}
.contact-1 .right .p dl{ margin-bottom: 15px;}
.contact-1 .right .p dt{ float: left; margin-right: 10px; font-weight: bold;}
.contact-1 .right .p dd{ overflow: hidden;}
.contact-1 .share{ padding-top: 30px;}
.contact-1 .share a{ background: #f0f0f0; margin-right: 10px; vertical-align: top; height: 16px; display: inline-block; padding: 5px; border-radius: 100%;}
.contact-1 .share a img{ vertical-align: top;}
.contact-1 .share a:hover{ background: #5eaad1; }

.product-bootom{ padding: 60px 0 90px; background: #f2f5f8;}
.product-bootom .box{ margin: 50px -15px 0;}
.product-bootom .box li{ float: left; width: 20%;}
.product-bootom .box .w{ margin: 0 10px; padding: 5px;}
.product-bootom .box .w .img{overflow: hidden;}
.product-bootom .box .w .img a{ display: block; background-position: center; background-size: cover; transition: 0.4s all;}
.product-bootom .box .w .img img{ width: 100%; height: 228px; opacity: 1;}
.product-bootom .box .txt{  padding: 10px;}
.product-bootom .box .txt a{ color: #000;}
.product-bootom .box .more{ margin-top: 10px; transition: 0.4s all;}
.product-bootom .box .more a{ display: block; background: url(../images/w1.png) center no-repeat; width: 30px; height: 30px;}
.product-bootom .box .w:hover a{ color: #fff;}
.product-bootom .box .w:hover{ background: #5dabd2; color: #fff;}
.product-bootom .box .w:hover .more a{ background: url(../images/w2.png) center no-repeat;}

.product-top{ padding: 50px 0 90px;}
.product-top .left{float: left; width: 45%; margin-right: 5%; overflow: hidden;}
.product-top .left .box1{ position: relative;}
.product-top .left .box1 img{ width: 100%; height: 567px;}
.product-top .left .box2 img{ width: 100%; height: 83px;}
.product-top .left .box2{ margin: 20px -5px 0; position: relative; }
.product-top .left .box2 .w{ margin: 0 5px; padding-top: 5px; cursor: pointer; }
.product-top .left .box2 .img{ position: relative;}
.product-top .left .box2 .cur .img:after{ content: " "; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 2px solid #5eaad1; }
.product-top .left .box2 .cur .img:before{ content: " "; position: absolute; width: 0; height: 0; border:5px solid rgba(0,0,0,0); border-bottom-color:#5eaad1 ; top: -10px; left: 50%; margin-left: -5px;}
.product-top .right{ overflow: hidden;}
.product-top .bon{ z-index: 100; position: absolute; top: 50%; width: 36px; height: 36px; background: rgba(94,170,209,0.8) ; background-position: center; background-repeat: no-repeat; margin-top: -18px;}
.product-top .bon.p-left{left: 0; background-image: url(../images/l4.png);}
.product-top .bon.p-right{ right: 0;background-image: url(../images/r4.png);}
.product-top .box2 .bon.p-left,
.product-top .box2 .bon.p-right{background-size: 10px; width: 28px; height: 28px; margin-top: -14px;}

.product-top .share{ }
.product-top .share a{ vertical-align: top; height: 16px; background: #f0f0f0; display: inline-block; padding: 10px; border-radius: 100%; margin-right: 10px;}
.product-top .share a img{ vertical-align: top;}
.product-top .share a:hover{ background: #5eaad1; }

.product-top .dl3 li{ float: left; width: 60%; margin-bottom: 5px;}
.product-top .dl3 li:nth-child(2n-1){ width: 40%;}
.product-top .dl4 dd a{ margin-left: 5px; display: inline-block; color: #666; border:1px solid #aaa; padding: 0 5px; border-radius: 3px;}
.product-top .dl4 dd a.cur{ color: #5eaad1; border-color: #5eaad1;}
.product-top .dl5{ margin-top:40px ;}
.product-top .dl5 a{ padding: 8px 20px; color: #fff; background: #02496e; border-radius: 5px; }
.product-top .dl5 a:hover{ background: #013b59;}
.product-top .dl5 div{ margin-right: 20px;}
.product-top .dl5 .p2 a{ background: #5eaad1;}
.product-top .dl5 .p2 a:hover{ background: #448db3;}
.product-top .dl5 a img{ margin-right: 5px; vertical-align: bottom;}

.product-bottom{margin-top:20px;}
.product-bottom img{max-width:100%;height:auto;}
.product-bottom .list{ margin-top: 50px;}
.product-bottom .list table td{border:1px solid #cccccc;padding:10px;}
.product-bottom .list li{ float: left; width: 50%; margin-bottom: 10px;}
.product-bottom .list dt{ float: left; margin-right: 5px; font-weight: bold;}
.product-bottom .list dd{ overflow: hidden;}
.product-bottom .tit{ margin: 50px 0 30px;}

.content{ padding-bottom: 90px;}
.contentimg{ margin-bottom: 30px;}
.contentimg img{ float: left; width: 30%; height: auto;}
.contentimg img:first-child + img{ margin:0 5%;}

.page{ text-align: center; margin: 10px 0 0;}
.page > div{ display: inline-block;}
.page i,
.page a,
.page span{ display: inline-block; border: 1px solid #b5b5b5; color: #b5b5b5; min-width: 1.5em; text-align:  center; padding: 5px; margin: 0 5px; vertical-align: top; border-radius: 3px;}
.page i{ border: 0;}
.page .on{ background: #5eaad1; border-color: #5eaad1; color: #fff;}

.product-box{ padding: 60px 0 90px;}
.product-box .box{ margin:0px -15px 0;}
.product-box .box li{ float: left; width: 25%; margin-bottom: 40px;}
.product-box .box .w{ margin: 0 10px; padding: 5px;}
.product-box .box .w .img{overflow: hidden;}
.product-box .box .w .img a{ display: block; background-position: center; background-size: cover; transition: 0.4s all;}
.product-box .box .w .img img{ width: 100%; height: 285px; opacity: 0;}
.product-box .box .txt{  padding: 10px;}
.product-box .box .txt a{ color: #000;}
.product-box .box .w .t2{ margin: 10px 0;}
.product-box .box .more{ margin-top: 10px; transition: 0.4s all;}
.product-box .box .more a{ display: block; background: url(../images/w1.png) center no-repeat; width: 30px; height: 30px;}
.product-box .box .w:hover a{ color: #fff;}
.product-box .box .w:hover,.index-pro .box .w:hover{ background: #5dabd2; color: #fff;}
.product-box .box .w:hover .more a{ background: url(../images/w2.png) center no-repeat;}






.news-box{ padding: 60px 0 90px;}
.news-box li{ margin-bottom: 50px; background: #f7fbfd;}

.news-box li dt{overflow: hidden; position: relative; width: 322px;}
.news-box li dt a{ display: block; background-position: center; background-size: cover; transition: 0.4s all;}
.news-box li dt img{ width: 100%; height: 254px; opacity: 1;}
.news-box li dd{ padding: 20px 40px;}
.news-box li:hover{background: #eff7fb; box-shadow: 3px 3px 5px rgba(94,170,209,0.2);}
.news-box li:hover dt a{ transform: scale(1.1);}
.news-box li .dd{ margin: 15px 0;}
.news-box li .dd span{ padding-left: 25px; display: inline-block; margin-right: 20px; line-height: 22px;}
.news-box li .dd span.s1{ background: url(../images/q1.png) left center no-repeat;}
.news-box li .dd span.s2{background: url(../images/q2.png) left center no-repeat;}
.news-box li .b{ margin-top: 20px;}
.news-box li .b .fl{ border: 1px solid #aaa; padding: 5px 20px; text-transform: uppercase;}
.news-box li .b .fl:hover{ background: #5eaad1; border-color: #5eaad1; color: #fff;}
.news-box li .b .fr{ display: none;}

.newsart .tit{ margin: 30px 0 10px;}
.newsart .data{ color: #999;}
.newsart  .share{ text-align: center; margin: 20px 0 20px; }
.newsart .share a{ vertical-align: top; height: 16px; background: #f0f0f0; display: inline-block; padding: 10px; border-radius: 100%; margin-right: 10px;}
.newsart .share a img{ vertical-align: top;}
.newsart  .share a:hover{ background: #5eaad1; }

.newsbottom { margin: 50px 0 50px;}
.newsbottom div{ float: left; width: 30%; margin-right: 5%; }
.newsbottom div a{ display: block; padding: 10px 20px; border: 1px solid #ddd; border-radius: 5px;}
.newsbottom div a:hover{ background: #5eaad1; color: #fff; border-color: #5eaad1;}

.case-box{ padding: 50px 0 90px;}
.case-box li{ float: left; width: 33.33%;}
.case-box .box{ margin: 0 -10px 50px; }
.case-box .txt{ margin: -90px 30px 0; background: #fff; padding: 25px; position: relative; z-index: 2; box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.case-box .txt .more{ margin-top: 0px; transition: 0.4s all;}
.case-box .txt .more a{ display: block; background: url(../images/j2.png) center no-repeat; width: 30px; height: 30px;}
.case-box .txt .ellipsis{ margin-bottom: 20px;}
.case-box .w { margin: 0 10px; padding-bottom: 30px;position: relative; top: 0; transition: 0.4s all; }
.case-box .w .img{overflow: hidden; }
.case-box .w .img a{ display: block; background-position: center; background-size: cover; transition: 0.4s all;}
.case-box .w .img img{ width: 100%; height: 335px; opacity: 1;}
.case-box .w{ transition: 0.8s all; padding-top: 50px;}
.case-box .w:hover{ top: -40px;}
.case-box .w:hover .img a{ transform: scale(1.1);}
.case-box .w:hover .ellipsis{ color:#5eaad1 ;}
.case-box .w:hover a{ color: #5eaad1;}
.case-box .swiper-slide-next .w{padding-top:0px;}

.s404{ padding: 20px 0 90px;}
.s404 .tit{color: #5eaad1; margin: 50px 0;}
.s404 .left{  width: 40%; margin-right: 15%; margin-left: 5%;}
.s404 .left img{ width: 100%; height: auto;}
.s404 .oh{}
.s404  .t2{ margin: 20px 0; border: 1px solid #ddd; background: #fff; position: relative; border-radius: 5px; padding: 1px 10px; overflow: hidden;}
.s404  .t2 .inp{ border: 0; width: 100%; padding: 10px 0; }
.s404  .t2 .bon{ background: url(../images/home_08.jpg) no-repeat; width: 22px; height: 23px; border: 0; position: absolute; z-index: 2; right: 10px; top: 50%; margin-top: -13px;}
.s404  .t3 a{ display: inline-block; margin: 0 10px 0 0;}

.searchcenter{ width: 40%; margin:0 auto; text-align: center;}

.postion1{}
.postion1 .wrap{ border-bottom: 1px solid #ddd; padding: 15px 0;}
.postion2 .index-tit{ margin-bottom: 50px;}

/*适应屏幕分辨率*/
@media only screen and (max-width: 1550px) {
body .bon.bon-right{ right: -50px !important;}
body .bon.bon-left{ left: -50px !important;}

}

@media only screen and (max-width: 1440px) {
.wrap{ width: 1080px;}
.menu>ul> li{ margin-left: 30px;}
.index-banner .swiper-slide{ height: 550px;}
.index-banner .swiper-slide img{ width: 1509px; margin-left: -754px;}
.index-product .list .w .img img{ height: 250px;}
.case-box .w .img img,
.index-company .w .img img{ height: 300px;}



.footer .top .left{ margin-right: 30px;}
.footer .top .right dl{ margin-right: 25px;}
.index-would .w{ height: 180px;}
.index-company .txt{ padding: 18px;}

.about-1 .left .w video{ height: 380px;}
.about-4 .w .img img{ height: 180px;}

.service-1 .box .w{ height: 300px;}
.service-1 .box .w .txt:after{ top: 100px;}
.service-1 .box .w .txt{ padding-top: 120px;}
.service-1 .box .w .txt .p1{ margin-bottom: 20px;}

.service-2 li:first-child+li:after,
.service-2 li:first-child+li+li+li:after{ top: 50%; width: 35%;}
.service-2 li:first-child+li:before,
.service-2 li:first-child+li+li+li:before{top: 50%; width: 35%;}

.contact-1 .share{ padding-top: 10px;}

.product-top .left .box1 img{ height: 480px;}
.product-top .left .box2 img{ height: 68px;}
.product-top .dl5 div{ margin-right: 10px;}
.product-top .dl5 a{ padding: 8px 10px;}
.product-bootom .box .w .img img{ height: 200px;}

.product-box .box .w .img img{ height: 250px;}

}

@media only screen and (max-width: 1260px) {
.wrap{ width:900px;}
.menu>ul> li{ margin-left: 17px;}
.logo img{ width: 220px; height: 63px;}
.index-banner .swiper-slide{ height: 480px;}
.index-banner .swiper-slide img{ width: 1316px; margin-left: -658px;}
.index-product .list .w .img img{ height: 200px;}
.index-product .list .txt{ padding: 10px;}
.index-company .box{ margin-bottom: 140px;}
.footer .top .left { margin-right: 10px; width: 80px; height: 80px;}
.footer .top .right dl{ margin-right: 12px;}
.footer .top .right dl:last-child{ margin: 0;}
.about-1 .left .w video{}

.service-1 .box .w{ height:260px;}
.service-1 .box .w .txt:after{ top: 70px;}
.service-1 .box .w .txt{ padding-top: 90px;}
.service-1 .box .w .txt .p1{ margin-bottom: 10px;}
.about-4 .box{ margin: 40px -10px 0;}
.about-4 .w{ margin: 0 10px;}
.about-4 .w .img img{ height: 150px;}
.about-1 .left .w video{ height: 330px;}
.about-1 .right .t{ padding: 0 0 20px;}

.service-1 .box {margin:50px -5px 0}
.service-1 .box .w{ margin: 0 5px;}
.service-2 li:first-child+li:after,
.service-2 li:first-child+li+li+li:after{ top: 50%; width: 25%; left: 100%;}
.service-2 li:first-child+li:before,
.service-2 li:first-child+li+li+li:before{top: 50%; width: 25%; right: 100%;}

.contact-1 .left{ width: 50%;}
.contact-1 .right{ padding: 10px 0 10px 30px;}
.contact-1 .right .t,
.contact-1 .right .p dl{ margin-bottom: 10px;}

.product-top .left{ width: 50%;}
.product-top .left .box1 img{ height: 460px;}
.product-top .left .box2 img{ height: 65px;}
.product-top .dl5{ display: block; overflow: hidden; margin-top: 20px;}
.product-top .dl5 div{ display: block; float: left; margin-bottom: 10px;}
.product-bootom .box{ margin: 30px -10px 0;}
.product-bootom .box .w .img img{ height: 160px;}
.product-bootom .box .w{ margin: 0 5px;}

.product-box .box .w .img img{ height: 210px;}
.case-box .w .img img,
.index-company .w .img img{ height: 260px;}
}

#gotop {
	width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    background: #ed421c;
    position: fixed;
    bottom: 10%;
    left: 3%;
    z-index: 10;
    text-align: center;
    cursor: pointer;
    color: #fff;
    opacity: 0.8;
    
}
#gotop img {
	margin-top:17px;
}
.leftfixapp{
	width: 50px;
    height: 50px;
    text-align: center;
    position: fixed;
	bottom: 10%;
	margin-bottom: 70px;
    left: 3%;
    z-index: 10;
    text-align: center;
	cursor: pointer;
	z-index: 1990;
 
}
.leftfixapp img{
	width: 50px;
}
.leftfixapp .iconfont{
	font-size:50px;
	color: green;
}
.leftfixapp.appwap{
	display: none;
}
.leftfixapp.appwap{
		display: none;
	}
	.leftfixapp.appc{
		display: block;
	}


@media only screen and (max-width: 1000px) {
	.leftfixapp{bottom:15%;}
	#xhl-wrapper .xhl-launch-button-bottom{bottom:100px !important;}
	#gotop {bottom:100px;}
	.leftfixapp.appwap{
		display: block;
	}
	.leftfixapp.appc{
		display: none;
	}
	.product-bottom .list .table-box{max-width:100%;overflow-x:scroll;}
	.content{overflow:hidden;}
	.content img{max-width:100%;height:auto;}
	.about-2 .left img{margin-left:0;}
.wrap{ width:auto; margin: 0 20px;}
body .bon.bon-right{ right: 5px  !important; z-index: 100;}
body .bon.bon-left{ left: 5px  !important; z-index: 100;}

.footer .top{ display: none;}
.footer .bottom .fr{ float: none; text-align: center;}
.footer .bottom .oh{ margin-top: 20px; text-align: center; padding-bottom: 10px;}
.footer .bottom .oh span{ display: block; margin: 10px 0;}

.menu>ul> li> a{ border-bottom-color: #fafafa;}
.menu ul{ display: block; }
.menu ul .child{ display: none; position: relative; left: 0; margin-right: 10px;}
.phone-menu{ display: block;}
.menu-mask{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 999; background: rgba(0,0,0,0.1); visibility: hidden; opacity: 0; transition: 0.5s all;}
.menu{ position: fixed; z-index: 1000; background: #59bbd2;  right: 0; top: 70px; height: calc(100vh - 210px); overflow: auto; width: 92%; border-top: 1px solid #ddd;  transform: translateX(100%); transition: 0.5s all;}
header .top{ position: fixed; right: 0; bottom: 0; height: 120px; width: 92%; display: block; z-index: 1000; transform: translateX(100%); transition: 0.5s all;}
header .top .cont{ float: none; margin-bottom: 20px; overflow: hidden;}
header .top .search{ float: none;}
header .top .search .inp{ width: 100%; padding: 5px 0;}
header .top .cont dl:first-child{ margin: 0;}
header .top .cont dl:last-child{ float: right;}
header .top .cont dl dt img{ width: 18px; height: 17px;}
header .top .right{ float: none; overflow: hidden;}
header .top .share{ margin-left: 0; padding: 10px 0; text-align: right; float: none;}
header .menu-box{ height: 70px; position: fixed; left: 0; top: 0; right: 0; z-index: 1000; box-shadow: 0 0 3px rgba(0,0,0,0.2);}
header{ height: 70px; position: relative; z-index: 10000;}
.menu-open header .top{transform: translateX(0);}
.menu-open .menu-mask{ visibility: visible; opacity: 1;}
.menu-open .menu{transform: translateX(0);}

.index-company .w{ padding-top: 0;}

.other-menu.open .pos{ position: relative;}
.other-menu{ }
.other-menu .wrap{ overflow-y: hidden; overflow-x: auto; white-space: nowrap; margin: 0 ; padding: 0 20px;}
.about-1 .left .w:after{ height: 50px;}
.about-1 .left{ float: none; margin: 0 0 50px; width: auto;}
.about-2 .left{ float: none; margin: 0 0 20px; width: auto;}
.about-3 .left{float: none; margin: 0 0 20px; width: auto; margin:50px 20px 20px;}
.about-3 .left img{ left: -20px; top: -20px;}

.service-1 .box .swiper-slide.swiper-slide-next{  padding-top: 0;}
.service-1 .box .w{ height: 320px;}

.product-top .left .box1 img{ height: 600px;}
.product-top .left .box2 img{ height: 80px;}
.product-top .left{ width: auto; margin: 0 0 20px; float: none;}
.product-bootom .box li{ width: 33.33%; margin-bottom: 20px;}

.product-box .box li{ width: 50%;}
.product-box .box .w .img img{ height: 320px;}

.case-box li{ width: 50%;}

}
#dibunav{ display: none;}
@media only screen and (max-width: 767px) {
	.index-banner .swiper-slide{ height: 220px;}.index-banner .swiper-slide{ height: auto;}
.index-banner .swiper-slide img{ width: 100%; margin-left: 0; position: relative; left: 0; top: 0; height: auto;}
.index-product .top{ display: block; padding: 30px 0;}
.index-product .bg-txt{ top: 70px;}
.index-product .top .left{ margin-bottom: 20px;}
.index-product .top .right li{ margin: 0 10px 0 0;}
.index-product .list .w .img img{ height: 300px;}
.index-product .list .bon{ top: 100%; margin-top: 10px; transform: scale(0.7);}
body .index-product .pagination{ bottom: -36px;}
.index-product .list{ margin-bottom: 90px;}
.logo img{ width: 180px; height: 52px;}
.index-would .w{ height: 100px;}
.index-company .box .bon{ transform: scale(0.7);}
.index-profile .left{ float: none; margin: 0 0 20px; width: auto;}
.index-profile .left .w{ margin: 0;}
.index-profile .right .txt{ margin: 10px 0;}
.index-company .box{ margin-bottom: 80px;}
.index-product .swiper-pagination-bullet{ width: 10px;}
body .index-product .pagination span{ margin: 0 2px;}

.other-baner .w{ height: 150px;}

.about-4 .bon{transform: scale(0.7);}
.about-1 .left .w video{ height: 280px;}

.news-box,
.product-box,
.product-top,
.product-bootom,
.service-1,
.service-2,
.service-3,
.about-4,
.about-3,
.about-1{ padding: 30px 0 30px;}

.service-1 .box .w .txt:after{ top: 90px;}
.service-1 .box .w .txt{ padding-top: 110px;}

.service-1 .box .swiper-slide{ padding-bottom: 40px;}
.service-1 .box .bon.s-left{ left: 0px; margin-left: 0; transform: scale(0.6);}
.service-1 .box .bon.s-right{ right: 0px; margin-right: 0; transform: scale(0.6);}

.service-2 li dt span{ padding: 20px;}
.service-2 li{ float: none; width: auto; padding: 0; text-align: left;}
.service-2 li:first-child+li,
.service-2 li:first-child+li+li+li{ margin: 0; padding: 0; text-align: right;}
.service-2 li dd{ top: 0; right:0; bottom: 0; left:  200px; }
.service-2 li:first-child+li dd, 
.service-2 li:first-child+li+li+li dd{ bottom: 0; right: 200px; left: auto; text-align: right; justify-content: flex-end;}

.service-2 li:first-child+li:before,
.service-2 li:first-child+li+li+li:before{ right: 37%; bottom: 100%; top: auto;}

.service-2 li:first-child+li:after,
.service-2 li:first-child+li+li+li:after{left: 37%; top: 100%; bottom: auto;}
.faq dd{ padding: 10px;}
.service-3 .box{ padding-top: 20px;}
.faq li{ margin-bottom: 15px;}

.contact-1 { padding: 30px 0;}
.contact-1 .left{ float: none; width: auto;}
.contact-1 .right{ padding: 10px;}
.contact-2 .map{ height: 300px;}
.from-box .item{ width: auto; float: none;}

.from-box .item.item1 dd, .from-box .item.item3 dd{ padding-right: 0;}

.product-top .left .box2{ display: none;}
.product-top .left .box1 img{ height: auto;}
.product-top .left .swiper-wrapper{align-items: center;}
.product-bottom .list li{ width: auto; float: none;}
.product-bootom .box li{ width: 50%;}

.product-box .box{ margin: 0 -10px;}
.product-box .box li{ width: 50%;}
.product-box .box .w{ margin: 0 5px;}
.product-box .box .w .img img{ height: 200px;}

.news-box li dt{ width: auto; float: none;}
.news-box li dd{ padding: 10px;}

.newsbottom div{ width: auto; float: none; margin: 0 0 10px;}
.from-box .item{ margin-bottom: 10px;}

.case-box .w{ top: 0 !important; padding-top: 0;}
.case-box .w .img img{ height: 130px;}
.case-box .txt{ margin: 0 0; padding: 10px;}
.s404{ padding: 10px 0 30px;}
.s404 .tit{ margin: 10px 0;}
.s404 .box{ display: block;}
.s404 .left{ float: none; width: auto; margin: 0 0 10px; text-align: center;}
.s404 .left img{ width: 80%;}

.searchcenter{ width: auto;}
.service-1 .box .swiper-slide{ width: 100%;}.about-3 .right{ padding-top: 10px;}

.product-box .box li{ margin-bottom: 10px;}
.news-box li dd .f-24.ellipsis,
.product-box .box .txt .f-18.ellipsis{ text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical; white-space: normal; height: 3em;}

.footer .bottom{ padding-bottom: 80px;}
#dibunav{display: block;position:fixed;width:100%;left:0;bottom:0;z-index:222;padding:10px 0 5px;background:#5eaad1;}
#dibunav ul{ overflow: hidden;}
	#dibunav ul li{width:25%;float:left;text-align: center;}
	#dibunav ul li p{color:#FFFFFF;text-transform: uppercase;padding-top:10px;font-size:12px;}
	#dibunav ul li img{ width: 24px; height: 24px;}
	

}