@charset "utf-8";
/* header&foot */
body{ line-height: 1.6;}
.box{width: 1440px; margin: 0 auto; max-width: 92%;}
header{position: sticky; left: 0; top: 0;width: 100%; z-index: 9992; box-shadow: 0px 2px 4px rgba(0,0,0,0.1);color: #fff; background-color: #073c6f;}
a,img{color: #333; transition: 0.3s;}
.tu h1{ position: relative; width: 100%; overflow: hidden;}
.tu h1::before{ content: ""; display: block; padding-top: 60%;}
.tu h1 img{position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; display: block;transition: 0.3s; z-index: 3;}
.tudj:hover img{ transform: scale(1.1);}

.head{ width: 100%;}
.headbox{ height: 110px;} 
.headbox.box{ width: 92%;}
.logo{ height:60px;}
.logo img{ display: block; height: 100%;}
nav{ height: 100%; display: flex;align-items: center; justify-content: space-between; flex-wrap: wrap; flex: 1; margin: 0 5%;}
.nav-item{position: relative;height: 100%;}
.nav-box{display: flex;align-items: center; flex-wrap: wrap; justify-content: space-between; width: 100%; height: 100%;}
.mc{display: none}
.first-nav{ height: 100%; width: 100%;}
.first-nav a{ color: #fff; font-size:18px; display: flex; align-items: center; justify-content: center; height: 100%; position: relative; transition: 0.3s;}
.first-nav a i{display: none; margin-left: 10px; transition: 0.3s;}
.first-nav a i::before{content: "\e600";}
.first-nav.focus i{transform: rotate(180deg);}
.first-nav.on a em{width: 100%;}
.first-nav a em{ position: absolute; left: 0; top: 0; width: 100%; background-color: #fff; height: 3px; width: 0; overflow: hidden; transition: 0.3s;}
.second-nav{position: absolute; left: 50%; top: 80px; background: #fff;  box-sizing: border-box;z-index: 99; max-height: 0; overflow: hidden; opacity: 0; transition: 0.3s; min-width: 100%; transform: translateX(-50%); background-color: rgba(255,255,255,0.9);box-shadow: 0px 2px 4px rgba(0,0,0,0.1); }
.second-nav a{color: #333; display: block;text-align: center; font-size: 16px; line-height: 3; transition: 0.3s; white-space: nowrap; padding: 0 30px;}
.second-nav a:hover{ background-color: #0561ac; color: #fff;}
.nav-item:hover .first-nav a em{ width: 100%;}
.nav-item:hover .second-nav{ max-height: 1000px; opacity: 1;}
.mBtn{ width: 40px; height: 40px; border-radius: 4px;cursor: pointer; box-sizing: border-box;display: none;}
.mBtn span{ display: block;  width: 26px;}
.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{ background-color:transparent;}
.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;}
.sousou{border: 1px solid #0561ac; box-sizing: border-box; height: 40px;border-radius: 40px;position: relative; min-width: 260px; width: 17%;}
.sousou form{ width: 100%; height: 100%;}
.souk{ width: calc(100% - 70px); box-sizing: border-box; border: none; background: transparent; padding: 0 24px; font-size: 18px;}
.sousou input::-webkit-input-placeholder {color:#8691a5;}
.sous{ width: 70px; display: flex; height: calc(100% + 2px);justify-content: center; align-items: center; cursor: pointer; background-color: #0561ac; border-radius: 40px; transition: 0.3s; position: absolute; top: -1px; right: -1px;}
.sous img{ display: block; width:24px;}
.sous:hover{ background-color: #10538d;}
.sous.active{ display: none;}
.gb{ position: absolute; left: 50%; top: -60px; transform: translateX(-50%); z-index: 996;display: block; width: 30px; height: 30px;}
.topsou{ font-size: 16px; cursor: pointer;}
.topsou img{ margin-right: 10px;}

.banner,.ban_bg{ width: 100%; height:auto;}
.swiper-wrapper,.swiper-slide{ height: auto!important;}
.ban_bg img {display: block; width: 100%; height: auto; object-fit: cover;}
.swiper-pagination-bullet{ width: 30px; height: 2px; background-color: #fff; margin: 0 5px!important; opacity: 1;border-radius: 0;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: #215aa9; height: 5px; border-radius: 0;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{ bottom: 35px;}
/* .bannerdj>div{width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 100%;} */
.banner .swiper-button-next:after,.banner .swiper-button-prev:after{ background: transparent;}
.banner .swiper-button-prev{ left: 2%;}
.banner .swiper-button-next{ right: 2%;}
.banner .swiper-button-prev:after,.banner .swiper-button-next:after{ font-size: 20px; color: #fff;}
.swiper-button-prev:after,.swiper-button-next:after{ font-size: 20px; color: #fff;}
.swiper-button-prev{ left: 0;}
.swiper-button-next{ right: 0;}
.swiper-button-next:after,.swiper-button-prev:after{ border: 1px solid #fff; width: 100%; background-color: #073c6f; box-sizing:border-box; height: 54px;text-align: center; color: #fff; font-size: 20px; border-radius: 50%; transition: 0.3s; display: flex; align-items: center; justify-content: center; opacity: 0.8;}
.swiper-button-next,.swiper-button-prev{width: 54px!important;}
.swiper-button-prev:hover:after,.swiper-button-next:hover:after{ opacity: 1;}

footer{ width: 100%; color: #fff; background-color: #073c6f;}
footer a{color: #fff;}
.ftdi{ padding: 20px 0; line-height: 2;flex-wrap: wrap; }
.ftdi i{ padding:0 5px;}

section{position: relative;width: 100%; padding: 70px 0;}
main{width:1440px; margin: 0 auto; max-width: 92%;}
.concc{ height: 100%; display: flex; align-items: center;}
.title{ width: 100%;position: relative;text-transform: uppercase; text-align: center; color: #215aa9;}
.title h2{ font-size: 26px; font-weight: 200;}
.title h3{ font-size: 36px;margin-top: 10px; margin-bottom: 20px;}
.title h4{ width: 66px; height: 3px; background-color: #e5e5e5; margin: 0 auto;}

.more{ width: 190px; height: 46px; font-size: 16px; color:  #fff; display: flex; align-items: center; justify-content: center; background-color: #0561ac; border-radius: 46px; margin: auto;}
.more:hover{ color: #fff; box-shadow: 0px 5px 5px rgba(0,0,0,0.2); transform: translateY(-2px);}
@keyframes daxiao {
  0%   { transform: scale(0.8);}
  50% {transform: scale(1);}
  100%   {transform: scale(0.8);}
  }
/* 弹窗 */
.tkceng{ position: fixed; width: 100%; height: 100%; z-index: 9996; left: 0; top: 0; background: rgba(0,0,0,0.8); display: none;  transition: 0.3s; opacity: 0;}
.tkbox{ position: fixed; width: 400px;z-index: 9997; left: 50%;top:50%;transform: translate(-50%,-50%);  border-radius: 50px; background-color: #fff;background: rgba(255,255,255,1);box-sizing: border-box;display: none; max-width: 92%;  animation:top 1s}
.tkceng.active,.tkbox.active{ display: block!important; opacity: 1;}
.tkbox .sousou{ width:100%; height: 50px;}
@keyframes top {
  0%   {transform: translate(-50%,-100%); opacity: 0;}
  100% {transform: translate(-50%,-50%);opacity: 1;}
  }

.con1{ flex-wrap: wrap; width: 100%; margin-top: 20px;}
.conlist{ display: block; width: 23.5%; position: relative; color: #fff; margin-top: 30px;}
.conlist h2{ font-size: 24px; font-weight: bold;}
.conlist p{ font-size: 20px; max-width: 100%;width: 290px;transition: 0.3s; height: 0; overflow: hidden;}
.conlist .fu{ position: absolute;left: 0; bottom: 0; z-index: 4; width: 100%; box-sizing: border-box; padding:15px 28px; transition: 0.3s;}
.conlist .fu img{ margin-top: 10px;}
.con1 .conlist:nth-child(1){ width: 67%;}
.con1 .conlist:nth-child(2){ width: 31%;}
.con1 .conlist.tu h1::before{padding-top: 94%;}
.con1 .conlist:nth-child(1).tu h1::before{padding-top: 43.5%;}
.conlist:hover p{ height: auto; margin-top: 10px;}
.conlist:hover .fu{ background-color: rgba(0,0,0,0.2);}
.conlist:hover .fu img{ transform: translateX(10px);}

.con2bj{ background-color: #f7f7f7;}
.con2{ flex-wrap: wrap; width: 100%; margin-top: 30px;}
.con2list{ width: calc(25% - 15px); background-color: #fff; box-shadow: 0 5px 5px rgba(0,0,0,0.1); margin-top: 20px;}
.con2list span{ display: block; box-sizing: border-box; padding:15px 20px;width: 100%; font-size: 16px; color: #747474;}
.con2list span h2{ font-weight: bold; font-size: 18px; color: #333;}
.con2list span p{ margin-top: 10px; margin-bottom: 10px; line-height: 30px; height: 90px;}
.con2list:hover span h2{color: #215aa9;}
.con2list:nth-child(1){ position: relative; width: calc(50% - 10px );}
.con2list:nth-child(1) span{ position: absolute; left: 0; bottom: 0; z-index: 5; width: 100%; box-sizing: border-box; color: #fff; display: flex; flex-direction: column-reverse;}
.con2list:nth-child(1) span p{ display: none;}
.con2list:nth-child(1).tu h1{ height: 100%;}
.con2list:nth-child(1).tu h1::before{ display: none;}
.con2list:nth-child(1).tu h1 img{position: relative; }
.con2list:nth-child(1) span h2{color: #fff; margin-top: 10px;}
.con3list{ background-color: #f1f1f1; text-align: center; font-size: 22px; display: block; width: 100%; box-sizing: border-box; padding: 40px 10px;}
.con3list img{ width: 116px; max-width: 64%; margin: 0 auto; display: block; margin-bottom: 20px;}
.con3list:hover img{ transform: rotateY(-180deg);}
.con4bj{ padding-top: 0;}
.splist.tu h1::before{padding-top: 70%;}
.splist{ position: relative; color: #fff;}
.splist .fu{ position: absolute; z-index: 4; left: 0; bottom: 0; background-color: rgba(0,0,0,0.5); box-sizing: border-box; padding: 10px 18px; font-size: 18px; width: 100%;}
.con5bj{ background-color: #f7f7f7;}
.con5 .swiper-pagination{ position: relative;width: 100%; top: auto; left: auto;transform: translateX(0); bottom:auto; display: flex; justify-content: center; justify-content:space-around;  background: url(../img/gyxian.jpg) left center repeat-x; height: auto!important; align-items: center; margin-top: 100px; padding: 50px 0; margin-bottom: 30px;}
.con5 .swiper-pagination-bullet{ width:24px;height:24px; box-sizing: border-box; border-radius:50%;  background:#073c6f; opacity:1; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; position: relative;}
.con5 .swiper-pagination-bullet-active{opacity: 1;}
.con5 .swiper-pagination-bullet>div{position:absolute; bottom: -50px; z-index: 3; font-size: 28px; display:flex;}
.con5 .swiper-pagination-bullet-active div{bottom: 40px;}
.con5 .swiper-pagination-bullet-active::before{content: ""; display: block; width:10px;height: 10px; background: #fff; border-radius: 50%;}
.con5 .swiper-pagination .lunboshu{ width: 100%; display: flex; justify-content: space-around; font-size: 28px; position: absolute; z-index: 2; left: 0; bottom: 0;}
.con5list{ display: flex; width: 100%; box-sizing: border-box; padding: 0 135px;justify-content: space-between; align-items: center; flex-wrap: wrap;}
.con5list span{ display: flex; align-items: center;}
.con5list span i{ width: 30px; height: 10px; background-color: #666;}
.con5list h2{ font-size: 64px; font-weight: bold; width: 200px; box-sizing: border-box;padding-left: 30px;}
.con5list .tex{font-size: 18px; line-height: 1.6; width: calc(100% - 300px);}
.con5 .news_btn{ position: absolute; width: 100%; top: 0; left: 0;}
.con5list:hover h2{ color: #073c6f;}
.con5list:hover span i{ background-color: #073c6f;}
.con1_lb,.con2_lb{ position: relative;}
 
/* 二级分页 */
ul.yiiPager{ display: flex;  justify-content: center;}  
ul.yiiPager li{display:block; margin:0 3px;}  
ul.yiiPager li a{ width: 46px; height: 46px; border-radius:10px; 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:#215aa9;border:#215aa9 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:#215aa9;border:#215aa9 solid 1px;color:#FFF;}
ul.yiiPager li.shouye a{ width: 60px; border-radius: 36px;}
.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: #215aa9; 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;}
.pages{ padding: 10px 0;}

.show_title{text-align: center;  border-bottom: 1px #e1e1e1 solid; padding-bottom: 30px;}
.show_title h1{font-size: 28px; font-weight: bold;}
.show_title h2{margin-top: 20px; font-size: 16px;color: #999; display: flex;align-items: center; justify-content: center;}
.danye{line-height: 2;font-size: 18px; width: 100%;}
.danye img{max-width: 100%!important;}
.ernav{ justify-content: center;}
.ernav a{ font-size: 18px; height: 52px; display: flex; align-items: center; border: 1px solid #cecece; padding: 0 30px; margin: 5px 12px; min-width: 4em; box-sizing: content-box; justify-content: center; text-align: center;}
.ernav a:hover{ border: 1px solid #215aa9;}
.ernav a.on{border: 1px solid #215aa9; background-color: #215aa9; color: #fff;}
.erbox{ min-height: 300px;}
.erbox .splist{ margin-bottom: 30px;}

.lxmap{ box-sizing: border-box;width: 100%; height: 500px;}
.lxlist{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.lxlist span{background-color: #f9f9f9; display: flex; flex-direction: column; padding: 30px; box-sizing: border-box; width:31%; font-weight: bold;}
.lxlist span img{ width: 20px; height: 24px;}
.lxlist span p{  line-height: 1.8; font-size: 18px; margin-top: 20px;}
.danyetu{ display: flex; justify-content: center; width: 100%;}
.danyetu img{ display: block; max-width: 100%;}
.tulist{ flex-wrap: wrap;background-color: #f7f7f7; margin-bottom: 30px; overflow: hidden; width: 100%;box-sizing: border-box; padding: 25px; flex-wrap: wrap;}
.tulist h1{ width: 360px;}
.tulist span{box-sizing: border-box; padding:25px; display: block;padding: 0; width: calc(100% - 400px);}
.tulist span h4{ color: #999; font-size: 16px; }
.tulist span h2{ font-weight: bold; font-size: 20px; margin-top: 25px; line-height: 1.1;}
.tulist span p{ font-size: 16px; line-height: 2; margin-top: 20px; margin-bottom: 20px; color: #666;}
.tulist span h3{ width: 140px; height: 38px; display: flex; justify-content: center; align-items: center; font-size: 16px; border: 1px solid #ebebeb; border-radius: 38px;}
.tulist:hover{ background-color: #215aa9;}
.tulist:hover h4,.tulist:hover h2,.tulist:hover p,.tulist:hover h3{ color: #fff;}
.tulist1 h1{ border: 10px solid #ccc; box-sizing: border-box; width: 100%;}
.tulist1.tu h1::before{ padding-top: 100%;}
.tulist1 p{ font-size: 20px;width: 100%; text-align: center; line-height: 90px; margin: 0 auto;}
.tulistbox{ width: 100%; display: flex; flex-wrap: wrap;}
.shipin{ width: 1000px; max-width: 100%; margin: auto;}
.shipin video{ width: 100%; height: auto;}
.lybox{width: 100%;border-radius: 10px;box-sizing: border-box;padding: 40px;display: flex; background-color: #f5f6f8;}
.lybox form{ display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.lybox span{ width: calc(50% - 15px); margin-bottom: 20px;}
.lybox span h1{ font-size: 16px; color: #666; margin-bottom: 12px;}
.lybox span input,.lybox span textarea{ height: 50px; padding: 0 15px; border-radius: 5px; border: 1px solid #DCDFE6; box-sizing: border-box; width: 100%; transition: 0.3s; font-size: 16px; }
.lybox span input:hover,.lybox span textarea:hover{ border: 1px solid #0082CC;}
.lybox span input::-webkit-input-placeholder,.lybox textarea::-webkit-input-placeholder{color:#999;}
.lybox span textarea{ line-height: 50px; height: 150px;resize:none;}
.lybox span.beizhu{ width: 100%;}
.naniu{ width: 100%; margin-top: 10px;}
.naniu input{ width: 100%; background-color: #0082CC; border: none; height: 60px; color: #fff; text-align: center; transition: 0.3s; border-radius: 5px; font-size: 22px;}
.naniu input:hover{ background-color: #167bb4; cursor: pointer;}


.sj{ display: none;}
select::-ms-expand { display: none;} 
select {appearance:none; -moz-appearance:none; -webkit-appearance:none;}
input::placeholder{color:#999;}
.kuai4{ width: calc(25% - 15px)!important; margin-right: 20px;}
.kuai6{ width: calc(16.66% - 10px)!important; margin: 0 5px; margin-top: 10px;}
.kuai4:nth-child(4n){ margin-right: 0;}
.kuai3{ width: calc(33.33% - 20px)!important; margin-right: 30px;}
.kuai3:nth-child(3n){ margin-right: 0;}
.conf{ display: flex; justify-content: space-between;}
.conc{ display: flex; align-items: center;}
.confw{ display: flex; flex-wrap: wrap;}
.dianji{ cursor: pointer;}
.mtop60{ margin-top: 60px;}
.mtop50{ margin-top: 50px;}
.mtop40{ margin-top: 40px;}
.mtop30{ margin-top: 30px;}
.mtop20{ margin-top: 20px;}
.mtop10{ margin-top: 10px;}


/*----- 超出省略号///-----*/
.toe{ word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ziov{white-space: nowrap;text-overflow: ellipsis;overflow: hidden; }
.ziov2{ display: -webkit-box; /* 将元素作为弹性伸缩容器 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 使用省略号表示被裁切的部分 */
        line-clamp: 2; /* 限制最大行数为2行 */
        -webkit-line-clamp: 2; /* Safari/Chrome特定的限制最大行数的属性 */
        -webkit-box-orient: vertical; /* 设置垂直布局 */}
.ziov3{ display: -webkit-box; /* 将元素作为弹性伸缩容器 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 使用省略号表示被裁切的部分 */
        line-clamp: 3; /* 限制最大行数为3行 */
        -webkit-line-clamp: 3; /* Safari/Chrome特定的限制最大行数的属性 */
        -webkit-box-orient: vertical; /* 设置垂直布局 */}
.ziov4{ display: -webkit-box; /* 将元素作为弹性伸缩容器 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 使用省略号表示被裁切的部分 */
        line-clamp: 4; /* 限制最大行数为4行 */
        -webkit-line-clamp: 4; /* Safari/Chrome特定的限制最大行数的属性 */
        -webkit-box-orient: vertical; /* 设置垂直布局 */}
.ziov5{ display: -webkit-box; /* 将元素作为弹性伸缩容器 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 使用省略号表示被裁切的部分 */
        line-clamp: 5; /* 限制最大行数为5行 */
        -webkit-line-clamp: 5; /* Safari/Chrome特定的限制最大行数的属性 */
        -webkit-box-orient: vertical; /* 设置垂直布局 */}
		
.msk img{
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -webkit-optimize-contrast; /* Webkit (Safari/Chrome) */
	image-rendering: pixelated; /* Standards */
	}