@charset "utf-8";


/* header&foot */
.box{width: 1260px; margin: 0 auto;}
header{ width: 100%; position: relative; }

.head{width: 1260px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 120px; transition: 0.3s; background-color: #fff; max-width: 92%;}
/* .head.active{ left: 0; top: 0; margin-left: 0; width: 100%; border-radius: 0;} */
.logo{ width: 110px; margin-left: 20px;  }
.logo a{display: block; width:100%; }
.logo a img{display: block;width: 100%;}

nav{ height: 100%; display: flex;align-items: center; justify-content: space-between; flex-wrap: wrap;}
.nav-item{position: relative;height: 100%; margin-left: 30px;padding: 0 20px;transition: 0.3s;}
.nav-item:last-child{ padding-right: 0!important;}
.mc{display: none}

.first-nav{ height: 100%; width: 100%;}
.first-nav a{ color: #333; font-size: 16px; display: flex; align-items: center; justify-content: center; height: 100%; position: relative; transition: 0.3s; font-weight: 500;}
.first-nav a i{display: block; margin-left: 10px; transition: 0.3s; display: none;}
.first-nav a i::before{content: "\e600";}
.first-nav.focus i{transform: rotate(180deg);}
.first-nav a em{position: absolute; width: 0; height: 4px; background: #0145ac; left: 50%; bottom: 0; transition: 0.3s;}
.first-nav.on a{color: #333; font-weight: bold;}

.second-nav{position: absolute; left: 0; top: 120px; background: rgb(1,69,172,0.8); width: 100%;  box-sizing: border-box;  z-index: 99; max-height: 0; overflow: hidden; opacity: 0; transition: 0.3s;}
.second-nav a{color: #fff; display: block; width: 100%;text-align: center; font-size: 16px; line-height: 3; transition: 0.3s;}
.second-nav a:hover{ color: #fff; background: rgb(1,69,172,1);  }

.nav-item:hover .first-nav a{color: #333; font-weight: bold;}
/* .nav-item:hover i{transform: rotate(180deg);} */
.nav-item:hover em,.first-nav.on em{width: 100%; left: 0;}
.nav-item:hover .second-nav{ max-height: 1000px; opacity: 1; padding: 10px 0;}



.mBtn{ width: 40px; height: 40px; border-radius: 4px; display: none;  cursor: pointer;   box-sizing: border-box;  background: #0145ac; margin-left: 20px; }
.mBtn span{ display: block;  width: 22px;}
.mBtn span i{width: 100%; height: 2px; background: #fff; display: block; margin: 0 auto;  margin-top: 5px; transition: 0.5s;}
.mBtn span i:first-child{margin-top: 0;}
.mBtn.active span i:nth-child(1){transform: rotate(45deg) translateY(4px) translateX(4px);}
.mBtn.active span i:nth-child(2){transform: rotate(-45deg) translateY(-1px) translateX(1px);}
.mBtn.active span i:nth-child(3){ width: 4px;}
.head_right{display: flex;  align-items: center; height: 100%;  position: relative; margin-right: 20px; display: none;}




.banner{ width:100%;  height: 795px;}
.banner_swiper{width: 100%;height: 100%;}
.banner_swiper .swiper-slide{width: 100%; height: 100%; overflow: hidden;}
.ban_bg{width: 100%; height: 100%;}
.bn_tx{width:1260px;  position: absolute; left:50%; margin-left: -630px;  top: 50%; transform: translateY(-50%); color: #fff; margin-top: 30px; }
.bn_tx h1{font-size: 100px;font-weight: bold; transform: translateY(100px); transition: 1s ease-in-out;opacity: 0;background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0));-webkit-background-clip: text; color: transparent; line-height: 1;}
.bn_tx h2{ font-size: 48px; font-weight: bold; transform: translateY(100px); transition: 1s ease-in-out 0.1s;opacity: 0; line-height: 1.2; }
.bn_tx h3{font-size: 18px; width: 50%; margin-top: 30px; transform: translateY(100px); transition: 1s ease-in-out 0.2s;opacity: 0;}

.banner_swiper .swiper-slide-active .bn_tx h1{transform: translateY(0); opacity: 1;}
.banner_swiper .swiper-slide-active .bn_tx h2{transform: translateY(0);opacity: 1;}
.banner_swiper .swiper-slide-active .bn_tx h3{transform: translateY(0);opacity: 1;}


.banner_swiper .swiper-pagination{ width: 1260px; left: 50%; margin-left: -630px;  top: auto; height: 6px!important;  bottom: 162px; text-align: center; }
.banner_swiper .swiper-pagination-bullet{ width:23px;height:6px; box-sizing: border-box; border-radius:20px; background-color: #fff; margin: 0 4px;opacity: 1;}
.banner_swiper .swiper-pagination-bullet-active{opacity: 1;background-color: #0143af;}
.banner_swiper .swiper-pagination-bullet-active::before{ background-color: #0143af;opacity: 1;}




section{padding: 80px 0; position: relative;}
main{width: 1260px; margin: 0 auto; max-width: 92%;}
.home-about{display: flex;align-items: center; justify-content: space-between; flex-wrap: wrap; }
.home-about-left{width: calc(100% - 630px); max-width: 100%;}
.home-about-title{ display: flex; align-items: center;}
.home-about-title h1{color: #0145ac; font-size: 60px; margin-right: 20px;}
.home-about-title span{ font-size: 32px;}
.home-about-title span h2{ color: #333;line-height: 1;}
.home-about-title span p{ color: #999; line-height: 1;}
.home-about-con{margin-top: 30px; font-size: 17px; color: #333; line-height: 1.8; text-align: justify; text-indent: 2em;}
.nums{ display: flex; margin-top: 40px; justify-content: space-between; align-items: center;}
.nums span{ display: flex; flex-direction: column;transition: 0.3s;}
.nums span img{ width:50px; margin: 0 auto; transition: 0.3s;}
.nums span:first-child{margin-left: 0;text-align: center;}
.nums span h1{font-size: 18px; color: #0145ac; display: flex; align-items: flex-end; margin-top: 10px; justify-content: center;}
.nums span h1 i{font-size: 32px;   display: block; line-height: 1; }
.nums span h2{ text-align: center; font-size: 15px; color: #666; margin-top: 10px;}
.nums span img.hover{ display: none;}
.nums span:hover img.hover{ display:flex;}
.nums span:hover img.abbiao{ display: none;}



.home-more{width: 136px; height: 40px; background: #0145ac; border-radius:50px; margin-top: 36px; transition: 0.3s;}
.home-more a{display: flex; height: 100%; align-items: center; justify-content: center; color: #fff; font-size: 16px;}
.home-more a img{width:18px; margin-left:16px;}
.home-more:hover{background: #162963;}

.news-more{background: #779d1c;}
.news-more:hover{background: #fff; }
.news-more:hover a{color: #0145ac;}

.home-about-right{position: relative; width: 540px; max-width: 100%; height: auto;}
/* .home-about-right em{ display: block; width: 100%;}
.home-about-right em img{display: block; width: 100%;} */

#canvas{
	width:100%;
	height:100%;
	overflow: hidden;
	position:absolute;
	top:0;
	left:0;
}

.home-products-app{background: url(../img/home-pro-bg.jpg) no-repeat center top #f5f5f5; background-size:100% 500px;}
.product-title{text-align: center; color: #fff; position: relative;}
.product-title span{ width: 100%; position: relative; z-index: 2; display: block; }
.product-title span h1{text-transform: uppercase; font-size: 28px;}
.product-title span h2{font-size: 42px;font-weight: bold;}
.product-title i{display: block; width: 18px; height: 18px; border-radius: 50%; background: #779d1c; position: absolute; z-index: 0; left: 50%; top: 70px; margin-left:74px;}

.products-box{margin-top: 60px;}
.tabs{display: flex;}
.tabs span{display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap; width: 25%;height: 110px; color: #fff; cursor: pointer;}
.tabs span.on{background: #fff; color: #137B8A; border-radius: 10px 10px 0 0;}
.tabs span i{display: block; width: 100%; text-align: center; font-size: 42px;}
.tabs span:nth-child(1) i::before{content: "\e8d8";}
.tabs span:nth-child(2) i::before{content: "\e697";}
.tabs span:nth-child(3) i::before{content: "\e629";}
.tabs span:nth-child(4) i::before{content: "\e659";}
.tabs span h1{width: 100%; text-align: center; font-size: 22px;}



.app-box{margin-top: 120px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.app-show{ position: relative; width: calc(50% - 30px); padding: 60px 0;}
.app-he{position: relative; z-index: 2; width: 94%; float: right; }
.app{ width: 100%;height: 100%;}
.app-item{width: 100%; position: relative;}
.app-item em{display: block; overflow: hidden;}
.app-item em img{display: block; width: 100%; transition: 0.3s;}
.app-item span{position: absolute; left: 0; bottom: 0; height: 60px; line-height: 60px; background: rgba(0,0,0,.6); color: #fff; font-size: 18px;box-sizing: border-box; padding: 0 20px;word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis; width: 100%;} 
.app-bg{width: 50%;height: 100%; background: #137B8A; position:  absolute; z-index: 1; left: 0; top: 0;}

.app-btns{width: 360px;height: 100px; position: absolute; right: 0; top: -40px; background: #779d1c; z-index: 3;--swiper-navigation-size: 0;}
.app-show .swiper-button-next{color: #fff; font-size: 18px; transition: 0.3s; left: auto; right: 40px; top: 50%; transform: translateY(-50%);  width: 44px; height:44px; box-sizing: border-box; border: 1px #fff solid; display: flex; justify-content: center; align-items: center; border-radius: 50%;  z-index: 2;}
.app-show .swiper-button-next::before{content: "\e609";}
.app-show .swiper-button-next:hover{ color: #fff; background: #0145ac;border:1px #0145ac solid;}
.app-show .swiper-button-prev{ color: #fff; font-size: 18px; transition: 0.3s; left:40px; right:auto; top: 50%; transform: translateY(-50%);  width: 44px; height:44px; box-sizing: border-box; border: 1px #fff solid; display: flex; justify-content: center; align-items: center; border-radius: 50%;  z-index: 2;}
.app-show .swiper-button-prev::before{content: "\e609"; transform: rotate(-180deg);}
.app-show .swiper-button-prev:hover{ color: #fff; background: #0145ac;border:1px #0145ac solid;}

.app-show .swiper-pagination{ width: 100%; left:0; z-index: 1;   top: 50%; transform: translateY(-50%); bottom: auto; color: #fff;}
.app-show .swiper-pagination-current{color: #fff; }

.app-item a:hover img{transform: scale(1.1);}

.app-right{width: calc(50% - 30px); margin-top: -40px; position: relative;}
.app-title{position: relative;}
.app-title span{display: block; position: relative; z-index: 2;}
.app-title span h1{font-size: 30px;font-weight: bold;}
.app-title span h2{font-size: 72px; text-transform: uppercase; line-height: 1; margin-top: 20px;}
.app-title i{width: 14px; height: 14px; display: block; border-radius: 50%; background: #0145ac; position: absolute; z-index: 1; top:24px; left: 110px;}
.app-info{font-size: 16px; color: #666; margin-top: 50px; text-align: justify; color: #999;}





.client-sec{background: url(../img/client-bg.jpg) no-repeat center; background-size: cover;}
.home-client{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}

.home-client-right{width: 300px; position: relative;}

.client-title{position: relative;}
.client-title span{display: block; position: relative; z-index: 2;}
.client-title span h1{font-size: 30px;font-weight: bold; }
.client-title span h2{font-size: 34px; text-transform: uppercase; line-height: 1; margin-top: 20px; color: #999;}
.client-title i{width: 14px; height: 14px; display: block; border-radius: 50%; background: #0145ac; position: absolute; z-index: 1; top:24px; left: 110px;}

.client-more{width:100%; height: 42px; background: #0145ac; margin-top: 60px; transition: 0.3s;}
.client-more a{display: flex; height: 100%; align-items: center; justify-content: center; color: #fff; font-size: 16px;}
.client-more a i{display: block; margin-left: 20px;}
.client-more a i::before{content: "\e720";}
.client-more:hover{background: #779d1c;}
.client-num{color: #0145ac; display: flex; align-items: flex-end;line-height: 150px; margin-top: 50px; font-size: 18px;}
.client-num i{font-size: 150px; }






.banquan{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 30px 0; border-top: 1px rgba(255,255,255,.4) solid; margin-top: 30px;}
.banquan h1{color: #fff;}
.banquan a{color: #fff; transition: 0.3s;}
.banquan a:hover{text-decoration: underline;}
.fenxiang{margin-top: 50px;}

.o-banner{width: 100%; height: 70vh; position: relative;}
.o-bg{display: block; width: 100%; height: 100%;}
.o-name{position: absolute; width: 1260px; left: 50%; margin-left: -630px; top: 50%; transform: translateY(-50%);  margin-top: 20px;}
.o-name p{ width: 112px; height: 1px; background: #fff;}
.o-name h1{font-size: 60px; text-transform: uppercase; color: #fff; margin-top:30px;}
.o-name h2{color: #fff; font-size: 36px; margin-top: 20px; text-transform: uppercase;}
.sec-nav{width: 100%; background: rgb(233,235,255);}
.sec-nav span{width:1260px; margin: 0 auto;display: flex;  justify-content: space-between; height: 100%;}
.sec-nav a{height: 80px; line-height: 80px;  display: block; transition: 0.3s; text-align: center; font-size: 20px;}
.sec-nav a:hover{background: #0145ac; color: #fff;}
.sec-nav a.on{background: #0145ac; color: #fff;}
.about-nav a{ width: 33.3333%;}
.product-nav a{width: 25%;}
.news-nav a{width:50%;}

.miaobao{ height: 66px; color: #999;border-bottom: 1px #eee solid;   }
.miaobao span{display: flex; align-items: center; height: 100%; width:1260px; margin: 0 auto; }
.miaobao .backhome{display: flex; align-items: center;color:#0145ac;}
.miaobao .backhome::before{content: "\e62a";  display: block; font-size: 18px; margin-right: 4px; }
.miaobao i{color: #ccc;display: block; font-size: 14px; margin: 0px 6px;}
.miaobao i::before{content: "\e694";}
.miaobao a{font-size: 16px;color: #999; transition: 0.3s; }
.miaobao a:hover{color: #0145ac;}

.o-sec{padding: 50px 0;}
.about-hengda span{ display: block; color: #888;font-size: 16px; text-indent: 32px; margin-top: 20px; line-height: 1.8;}
.about-hengda span:first-child{margin-top: 0;}

.about-pic{margin-top: 50px; background: url(../img/about2.jpg) no-repeat center; background-size: cover;}

.nums2{ background: rgba(19,123,138,.8); width: 400px;}
.nums2 span{display: block;  width: 300px;  margin: 0 auto; border-bottom: 1px rgba(255,255,255,.4) solid; text-align: center; padding: 30px 0;}
.nums2 span h1{font-size: 18px; color: #fff; display: flex; align-items: flex-end; justify-content: center; }
.nums2 span h1 i{font-size: 56px;   display: block; line-height: 1; font-weight: bold;}
.nums2 span h2{ color: #fff;}

.honor-h{display: flex; flex-wrap: wrap; margin-top: -32px; }
.honor-h a{width: calc(25% - 24px); margin-top: 32px; margin-right: 32px; box-sizing: border-box; border: 1px #eee solid; transition: 0.3s;}
.honor-h a:nth-child(4n){margin-right: 0;}
.honor-h a em{display: block; width: 100%; box-sizing: border-box; padding: 8px;}
.honor-h a em img{display: block; width: 100%;}
.honor-h a p{display: block; text-align: center; background: #eee; height: 50px; line-height: 50px; font-size: 16px; word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis; transition: 0.3s; margin-top: 8px; box-sizing: border-box; padding: 0 10px;}
.honor-h a:hover{border: 1px #137B8A solid;}
.honor-h a:hover p{background: #137B8A; color: #fff;}


/*分页样式*/ 
.pages{margin-top: 30px;  }
ul.yiiPager{ display: flex;  justify-content: center;}  
ul.yiiPager li{display:block; margin: 2px;}  
ul.yiiPager li a{ width: 40px; height: 40px; border-radius: 8px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; line-height: 1; border:#ddd solid 1px;color: #666; transition: 0.3s;}  
ul.yiiPager li a:hover{background:#0145ac;border:#0145ac solid 1px;color:#FFF;}
ul.yiiPager li.first a::before{content: "\e741";}
ul.yiiPager li.last a::before{content: "\e741"; transform: rotate(180deg);}
ul.yiiPager li.previous a::before{content: "\e694";transform: rotate(180deg); font-size: 14px;}
ul.yiiPager li.next a::before{content: "\e694"; font-size: 14px;}
ul.yiiPager li.selected a{background:#0145ac;border:#0145ac solid 1px;color:#FFF;}


.show_title{text-align: center;  border-bottom: 1px #ddd solid; padding-bottom: 30px;}
.show_title h1{font-size: 28px; font-weight: bold;}
.show_title h2{margin-top: 20px; font-size: 14px;color: #999; display: flex;align-items: center; justify-content: center;}

.danye{color: #666; line-height: 1.8; text-align: justify; margin-top:30px;}
.danye img{display: block; max-width: 100%!important;height: auto!important;}

.bar{margin-top: 50px; display: flex; justify-content: space-between;}
.bar a{font-size: 16px; color: #666; line-height: 1; transition: 0.3s;background: #F2F2F2;}
.bar a:hover{background: #0145ac; color: #fff;}
.bar a.show_prev{display: flex; align-items: center; justify-content: space-between;  padding: 20px 30px; box-sizing: border-box; width: calc(50% - 100px);}
.bar a.show_prev::before{content: "\e694"; transform: rotate(-180deg);}
.bar a.show_prev i{width: calc(100% - 30px);word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}

.bar a.show_next{display: flex; align-items: center; justify-content: space-between;  padding: 20px 30px; box-sizing: border-box; width: calc(50% - 100px);}
.bar a.show_next::after{content: "\e694"; }
.bar a.show_next i{width: calc(100% - 30px);word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis; text-align: right;}

.bar a.back_list{display: flex;align-items: center; justify-content: center; width: 140px;}
.bar a.back_list::before{content: "\e675"; display: block; margin-right: 8px;font-size: 14px;}


.clients{ display: flex; flex-wrap: wrap; margin-top: -32px; justify-content: flex-start;}
.clients span{display: block; box-sizing: border-box; border: 1px #ddd solid; width: calc(25% - 24px); margin-right: 32px; margin-top: 32px; transition: 0.3s; overflow: hidden;}
.clients span:nth-child(4n){margin-right: 0;}
.clients span img{display: block; width: 100%;}
.clients span:hover{  box-shadow: 0 0 10px rgba(0,0,0,.2);}



.products{display: flex; flex-wrap: wrap; margin-top: -52px; }
.products a{width: calc(25% - 24px); margin-top: 52px; margin-right: 32px; box-sizing: border-box; transition: 0.3s; box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 10px; position: relative; padding-bottom: 20px; background: #fff; margin-bottom: 20px;}
.products a:nth-child(4n){margin-right: 0;}
.products a em{display: block; width: 100%;overflow: hidden;}
.products a em img{display: block; width: 100%; transition: 0.3s;}
.products a p{display: block; text-align: center; height: 50px; line-height: 50px; font-size: 16px; word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis; transition: 0.3s;  box-sizing: border-box; padding: 0 10px;}
.products a:hover p{color: #137B8A;}
.products a i{display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #999; border-radius: 50%; color: #fff; position: absolute; left: 50%; margin-left: -20px; bottom: -20px;  transition: 0.3s; }
.products a i::before{content: "\e626";}
.products a:hover i{background: #137B8A;}
.products a:hover img{transform: scale(1.1);}

.show-products{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}
.show-products-pic{width: calc(40% - 30px); box-sizing: border-box; border: 1px #ddd solid; border-radius: 10px; overflow: hidden;padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,.2);}
.show-products-pic img{display: block; width: 100%;}
.show-products-info{width: calc(60% - 30px);}
.products-name{font-size: 32px; font-weight: bold;}
.products-title{width: 140px; height: 42px; line-height: 42px; text-align: center; background: #137B8A;text-align: center; color: #fff; margin-top: 30px; font-size: 18px; border-radius: 42px;}
.products-con{line-height: 1.8; color: #999; font-size: 16px; margin-top: 20px;}

.product-other{margin-top: 50px;}
.other-title{display: flex; align-items: center; font-size: 24px; font-weight: bold; justify-content: space-between;}
.other-title::before{content: ""; display: block; width: 6px; height: 24px; border-radius: 4px; background: #137B8A; }
.other-title::after{content: ""; display: block; width: calc(100% - 160px); height: 1px;  background: #137B8A;}
.other-con{margin-top: 30px; line-height: 1.8; color: #666;}

.scene{margin-top: 30px;}
.scene-con{ display: flex;flex-wrap: wrap; margin-top: -30px;}
.scene-con span{display: block; overflow: hidden; width: calc(33.3333% - 20px); margin-right: 30px; margin-top: 30px;}
.scene-con span:nth-child(3n){margin-right: 0;}
.scene-con span img{display: block; width: 100%; transition: 0.3s;}




.video-show{width: 100%;height: 80vh; margin-top: 30px;}


.article-con{ margin-top: -20px;}
.article-con a{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box; padding: 30px; transition: 0.3s; margin-top: 20px;}
.article-con a:nth-child(odd){background: #f2f2f2;}
.article-con a dl{ display: flex; align-content: center; justify-content: center; flex-wrap: wrap; box-sizing: border-box; border: 3px #ddd solid;  width: 80px; height: 80px; transition: 0.3s;}
.article-con a dl dt{ color: #0145ac; font-size: 42px; font-weight: bold;}
.article-con a dl dd{ color: #999;font-size: 12px;}
.article-con a em{display: block; width: 240px;}
.article-con a em img{display: block; width: 100%;}
.article-con a span{width: calc(100% - 400px);}
.article-con a span h1{font-size: 24px; font-weight: bold; word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}
.article-con a span h2{color: #999; margin-top: 10px; word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}
.article-con a span h3{width: 140px; height: 36px; line-height:36px; text-align: center; background: #137B8A;text-align: center; color: #fff; margin-top: 30px; font-size: 16px; border-radius: 36px; transition: 0.3s;}
.article-con a:hover{background: #0145ac;}
.article-con a:hover dd{color: #fff;}
.article-con a:hover h1,.article-con a:hover h2{color: #fff;}
.article-con a:hover h3{background: #fff; color: #137B8A;}
.article-con a:hover dl{border: 3px #779d1c solid; background: #779d1c;  }
.article-con a:hover dt{color: #fff;}
.article-con a:hover dd{color: #fff;}

.landline{border-bottom: 2px #137B8A solid; color: #137B8A; display: flex; align-items: center; font-size: 36px; font-weight: bold; padding-bottom: 30px;}
.landline i{display: block; width: 50px; height: 50px; line-height: 50px;  text-align: center; border-radius: 50%; border: 1px #137B8A solid; box-sizing: border-box; font-size: 24px; margin-right: 6px;}
.landline i::before{content: "\e683"; font-weight: normal;}
.landline span{display: flex; align-items: center;}
.landline span em{font-size: 16px;font-weight: normal; color: #999; display: block; margin-left: 6px;}

.contacts{display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 20px;}
.contacts span{display: flex; align-items: center; width: calc(50% - 40px); border-bottom: 1px #ddd dashed; padding: 30px 0;}
.contacts span i{display: block; font-size: 42px;}
.contacts span:nth-child(1) i::before{content: "\e601";}
.contacts span:nth-child(2) i::before{content: "\e61b";}
.contacts span:nth-child(3) i::before{content: "\e7f5";}
.contacts span:nth-child(4) i::before{content: "\e633";}
.contacts span em{ display: block; margin-left: 10px; font-size: 16px;}
.contacts span em h1{font-weight: bold;}
.contacts span em h2{margin-top: 6px; color: #666;}

.map-box{margin-top: 50px; box-sizing: border-box; border: 1px #ccc solid; width: 100%;height: 50vh;}



.headtop{ width: 100%; background-color: #0145ac; color: #fff; height: 58px;} 
.headtop .headtopbox{ width: 1260px; margin: 0 auto; line-height: 58px; display: flex; justify-content: space-between; align-items: center;font-size: 16px; max-width: 92%;}
.headtop .headtopbox h1{ font-size: 16px;}
.headtop .headtopbox span{ display: flex; align-items: center;}
.headtop .headtopbox span p{ margin-right: 10px; display: flex; align-items: center;}
.headtop .headtopbox span a{ margin-left: 20px; color: #fff;display: flex; align-items: center; transition: 0.3s;}
.headtop .headtopbox span img{ width: 30px; margin-right: 10px;}
.headtop .headtopbox span a:hover{ color: #f6b34f;}
footer{ background: url(../img/foot.jpg) no-repeat center;background-size: cover; height: auto; border-top: 8px solid #0145ac;}
.ftxian{ width: 100%; height: 1px; background-color: #5d5a59;}
.ftdi{ text-align: center; color: #c4c3c3; font-size: 14px; padding: 15px 0; line-height: 1.8;}
.ftdi a{color: #c4c3c3; transition: 0.3s;}
.ftdi a:hover{ text-decoration: underline;}
.ftdi i{ padding:0 8px;}
.foot{ display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; font-size: 14px; padding: 25px 0;}
.foot span{ display: flex; flex-direction: column;}
.foot span p{ display: flex; align-items: center; color: #fff; line-height: 56px;}
.foot span p i{ font-size: 26px;}
.foot span p img{ width:24px; height: 24px; margin-right: 12px;}
.home-p4{ width: 100%; display: flex; flex-direction: column;}
.home-p4 .common {display: flex;height: 240px;}
.home-p4 .common .bg {width: 100%;height: 100%;}
.home-p4 .row1 .one,.home-p4 .row2 .two,.home-p4 .row2 .three{flex: 2;}
.home-p4 .row1 .two,.home-p4 .row1 .three,.home-p4 .row1 .four,.home-p4 .row2 .one{flex: 1;}
.home-p4 .row1 .two .modal {background: #eef2f9;}
.home-p4 .row1 .three .modal,.home-p4 .row2 .two .modal{background: rgba(0,0,0,.48);}
.home-p4 .row1 .four .modal {background: #dbab64;}
.home-p4 .row1 .two .modal a {color: #555;}
.home-p4 .row2 .one .modal {background: #24a2b8;}
.home-p4 .row2 .three .modal {background: #3b6bc9;}
.home-p4 .common>div {position: relative;}
.home-p4 .modal {
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(60,43,11,.55);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
}
.home-p4 .modal a {color: #fff;}
.home-p4 .modal p {margin: 8px 0;}
.home-p4 .modal a:hover{color:#fff}
.home-p4 .item{position:relative;overflow:hidden; transition: 0.3s; transition:all .3s ease;}
.home-p4 .item:hover img{transition:all .3s ease;transform:scale(1.1)}
.home-p4 .item:hover{z-index:999;-webkit-transform:scale(1.05);-moz-transform:scale(1.05);transform:scale(1.05);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;box-shadow:0 -1px 15px rgba(0,0,0,.5)}
.home-p4 .item:hover .modal p{animation:heartbeat 1.5s ease-in-out infinite both;}

.news-sec{background: url(../img/newbj.jpg) no-repeat top right #f5f5f5; background-size: 30%;}
.home-news{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; flex-direction: column;}

.news-tabs{color: #fff; margin-top: 50px;}
.news-tabs span{display: flex; align-items: center; font-size: 16px; cursor: pointer; height: 40px; transition: 0.3s;}
.news-tabs span::before{content: ""; display: block; width: 5px; height: 1px; background: #fff; margin-right: 10px;transition: 0.3s;}
.news-tabs span.on::before{ width: 30px; }
.news-tabs span.on{font-weight: bold; font-size: 18px;}

.news-con{ width: 100%; margin-top: 50px;}
.news-item{ display: flex; flex-wrap: wrap;}
.news-item a{width: calc(33.3333% - 30px); margin-right: 30px;transition: 0.3s; overflow: hidden;display: flex; flex-direction: column;}
.news-item a:last-child{margin-right: 0;}
.news-item a em{display: block; width: 100%; overflow: hidden; transition: 0.3s;}
.news-item a em img{display: block; width: 100%;}
.news-item a span{display: block; box-sizing: border-box; padding: 30px; transition: 0.3s; background: #fff; }
.news-item a span h2{font-size: 18px;  margin-top: 10px; transition: 0.3s; text-align: justify; font-weight: bold; color: #333; overflow: hidden; height: 25px;}
.news-item a span h3{color: #999; line-height: 1.5; margin-top: 18px; font-size: 16px; height: 50px; overflow: hidden;}
.news-item a:hover h2,.news-item a:hover h3,.news-item a:hover h1{color: #fff;}
.news-item a:hover em{ transform: translateY(-10px);}
.news-item a:hover span{ transform: translateY(-10px);}
.newtime img.hover{ display: none;}
.news-item a:hover img.hover{ display: block;}
.news-item a:hover img.newbiao{ display: none;}
.news-item a:hover span{ background-color: #0145ac;}
.newtime{ display: flex; justify-content: space-between; align-items: center; margin-top: 25px;}
.newtime h1{font-size: 12px; color: #999;}
.newtop{ width: 100%; display: flex; justify-content: space-between; align-items: center;}
.sjmore{ display: none;}
.newsbox .swiper-button-prev{cursor: pointer;  display: flex; align-items: center; justify-content: center;  top: 50%; bottom: auto;  color: #000; left: 10px; right: auto; transition: 0.3s;position: absolute;}
.newsbox .swiper-button-next{  cursor: pointer;  display: flex; align-items: center; justify-content: center;  top: 50%; bottom: auto;  color: #000; right: 10px; left: auto; transition: 0.3s;position: absolute;}
.newsbox .swiper-button-next:hover,.newsbox .swiper-button-prev:hover{ color: #0145ac;}
.newsitem h1{ width: 100%; overflow: hidden;}
.newsitem h1 img{ width: 100%; transition: 0.3s;}
.newsitem:hover img{transition:all .3s ease;transform:scale(1.1)}
.newsitem p{ font-size: 16px; width: 204px; margin: 0 auto; margin-top: 20px; line-height: 1.5; text-align: center; max-width: 100%;}
.newsbox{ width: 100%; box-sizing: border-box; border-radius: 20px;box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 35px 70px; padding-bottom: 30px; position: relative;background: #fff;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-button-prev:after{ font-size: 22px;}
.newboxtop{ position: relative; margin-top: -120px; z-index: 88;}

.ksboxbj{ background: url(../img/ksbj.jpg) no-repeat center; background-size: cover;}
.ksboxbj .newtop h1,.ksboxbj .newtop p,.ksboxbj .newtop h2{ color: #fff;}
.ksbox{ width: 100%; margin-top: 50px;}
.sroll-tabs{ box-sizing: border-box;  position: relative; padding: 0 40px;}
.swiper-container{ width: 100%; border-bottom: 1px solid #7997c8; overflow: hidden;}
.ksbox .swiper-wrapper .swiper-slide{ height: 68px; font-size: 18px; display: flex;}
.ksbox .swiper-wrapper .swiper-slide a{color: #fff; display: block; padding:0 40px;  line-height: 68px; }
.ksbox .on a{ background-color:rgba(255,255,255,0.1); border-radius: 5px 5px 0 0;}
.swiper_right{ width: 24px; height: 24px; background: url(../img/p3-pre.png) no-repeat; background-size: 100%;position: absolute; left: 0; top: 50%; margin-top: -12px; transition: 0.3s;}
.swiper_right:hover{background: url(../img/p3-pre-on.png);background-size: 100%;}
.swiper_left{ width: 24px; height: 24px; background: url(../img/p3-next.png) no-repeat;background-size: 100%;position: absolute; right: 0;top: 50%; margin-top: -12px; transition: 0.3s;}
.swiper_left:hover{background: url(../img/p3-next-on.png);background-size: 100%;}
.tabs-con-in{ display: flex; padding: 0 40px; box-sizing: border-box; flex-wrap: wrap; margin-top: 30px; min-height: 270px;}
.tabs-con-in a{ width: calc(20% - 16px); height: 102px; box-sizing: border-box; padding-left: 26px; padding-top: 26px; color: #4b4a4a; font-size:18px; background: #e9ecf5 url(../img/ks.png) right bottom no-repeat; background-size: 100px; border-radius: 5px; transition: all 0.3s ease; margin-top: 30px; margin-right: 20px;}
.tabs-con-in a:nth-child(5n){ margin-right: 0;}
.tabs-con-in a:hover{background-size: 100px;background: #e9ecf5 url(../img/ksh.png) right bottom no-repeat;}
.erbox{ padding: 30px 0;}
.ertitle{ width: 100%; text-align: center; display: flex; justify-content: center; flex-direction: column; margin-top: 20px;}
.ertitle h1{ font-size: 40px; color: #0145ac; font-weight: bold;}
.ertitle p{ font-size: 20px; color: #afafaf;font-weight: bold; text-transform: uppercase;}
.erbox .news-item a{width: calc(33.3333% - 30px); margin-right: 30px;transition: 0.3s; overflow: hidden; box-sizing: border-box; border: 1px solid #e0e0e0; margin-bottom: 40px;}
.erbox .news-item a:hover{border: 1px solid #0145ac;box-sizing: border-box;}
.erbox .news-item a:last-child(3n){margin-right: 0;}
.erbox .news-item a:hover em{ transform: translateY(0);}
.erbox .news-item a:hover span{ transform: translateY(0);}
.zhuanjia{ width: 100%; display: flex; flex-wrap: wrap; margin-top: 40px;}
.zhuanjia a{width: calc(33.3333% - 28px); margin-right: 42px;transition: 0.3s; overflow: hidden;display: flex; flex-direction: column;box-sizing: border-box;transition: 0.3s; box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 10px; overflow: hidden; margin-bottom: 35px;}
.zhuanjia a:nth-child(3n){ margin-right: 0;}
.zhuanjia h1 img{ width: 100%; display: block;}
.zhuanjia span{ display: flex; width: 100%; flex-direction: column; box-sizing: border-box; padding:30px 26px;}
.zhuanjia span h2{ border-bottom: 1px solid #cccccc; padding-bottom: 20px; font-size: 20px; color: #333; display: flex; width: 100%; flex-wrap: wrap;}
.zhuanjia span h2 b{ font-weight: bold; padding-right: 26px;}
.zhuanjia span p{ color: #666; font-size: 15px; line-height: 30px; height: 60px; overflow: hidden; margin-top: 12px;}
.zhuanjia span em{ background-color: #dadada; width: 76px; height: 28px; line-height: 28px; text-align: center; color: #fff; font-size: 14px; margin-top: 15px; border-radius: 10px; transition: all 0.3s ease;}
.zhuanjia a:hover em{ background-color: #0145ac;}
.newlistbox{ width: 100%; display: flex; flex-direction: column; margin-top: 40px;}
.newlistbox a{ display: flex; justify-content: space-between; align-items: center; overflow: hidden; line-height: 90px;box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 10px; margin-bottom: 30px; transition: all 0.3s ease;}
.newlistbox a span{ width: calc(100% - 90px); display: flex; flex-wrap: wrap;}
.newlistbox a span h1{ font-size:18px; padding-left: 30px; padding-right: 20px;transition: all 0.3s ease; font-weight: bold;color: #0145ac;}
.newlistbox a span p{ font-size: 18px; margin-left: 20px;transition: all 0.3s ease;font-weight: bold;overflow: hidden; height: 90px;}
.newlistbox em{ background:url(../img/newmor.png) no-repeat left top; background-size: 100%; width: 30px; height: 30px; margin-right: 30px;transition: all 0.3s ease;}
.newlistbox a:hover em{background:url(../img/newmorh.png) no-repeat left top; background-size: 100%;}
.newlistbox a:hover h1{ background-color: #0145ac; color: #fff;}
.newlistbox a:hover p{ color: #0145ac;}
.lianxibox{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 60px;}
.lianxibox .lxbox{ width: calc( 50% - 10px);box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 10px; box-sizing: border-box; padding: 45px 50px; display: flex; align-items: center;}
.lianxibox .lxbox h1{ background-color: #0c5bd1; display: flex; width: 136px; height: 136px; border-radius: 5px; align-items: center;}
.lianxibox .lxbox:nth-child(2) h1{ background-color: #dbab64;}
.lianxibox .lxbox h1 img{ width:72px; height: 72px; margin: 0 auto;}
.lianxibox .lxbox span{ width: calc(100% - 100px); margin-left: 28px; display: flex; flex-direction: column;}
.lianxibox .lxbox span h2{ font-weight: bold; font-size:20px;}
.lianxibox .lxbox span p{ font-size: 16px; line-height: 33px; margin-top: 10px;}
.map{ width: 100%; border: 1px solid #ddd; height: 390px; margin-top: 30px; margin-bottom: 30px;}
.keshilist{ width: 100%; display: flex; flex-wrap: wrap; margin-top: 40px; padding-bottom: 40px;}
.keshilist a{box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 10px; margin: 20px; font-size: 18px; height: 60px; line-height: 60px; width: calc(20% - 40px); text-align: center; transition: all 0.3s ease; box-sizing: border-box;}
.keshilist a:hover{ background-color: #0145ac; color: #fff;}
.kstittop{ font-size: 26px; font-weight: bold; line-height: 2; width: 100%; border-bottom: 1px solid #eee; position: relative;}
.kstittop i{ display: block; position: absolute; z-index: 5; left: 0; bottom: -1px; width: 60px; height: 2px; background-color:#0145ac ;}