@charset "utf-8";
/* header&foot */
@font-face {font-family: "homeng"; src: url('../fonts/harmonyosbold.ttf');}
@font-face {font-family: "mama"; src: url('../fonts/mamah.ttf');}
body{ color: #333; font-size: 16px; background-color: #fff;}
.box{width: 1450px; margin: 0 auto;}
a,img,button{ transition: 0.3s; color: #333;}
img{ max-width: 100%;}
a:hover{ color: #0a9fd9;}
header{ width: 100%; position: relative; height: 106px; background-color: #fff;}
.logo{ margin-right:5%;}
.head{ display: flex; align-items: center; height: 100%; width: 1450px; margin: 0 auto; justify-content: space-between;}
.logo img{ display: block; height: 50px;}
nav{ height: 100%; display: flex;align-items: center;  flex-wrap: wrap; justify-content: space-between; flex: 1;}
.nav-item{position: relative;height: 100%;}
.mc{display: none}
.first-nav{ height: 100%; width: 100%;}
.first-nav a{ font-size: 20px; display: flex; align-items: center; justify-content: center; height: 100%; position: relative; transition: 0.3s; padding:0 3px;}
.first-nav a em{position: absolute; width: 0; height: 3px; background: #1893cc; left: 50%;transition: 0.3s; bottom: 25px; transform: translateX(-50%);}
.first-nav.on em{ width: 80%;}
.nav-item:hover em{width: 80%;}
.nav-item:hover .first-nav a{ color: #000;}
.first-nav.on a{ color: #000;}
.second-nav{position: absolute; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.8); min-width: 100%;  box-sizing: border-box;box-shadow: 0 0 10px rgba(0,0,0,.2); z-index: 9995; max-height: 0; overflow: hidden; opacity: 0; transition: 0.3s; padding:0 20px;}
.second-nav a{display: block; width: 100%;line-height: 2; transition: 0.3s; white-space: nowrap; text-align: center; font-size: 18px;}
.first-nav a i::before{content: "\e600";}
.first-nav.focus i{transform: rotate(180deg);}
.first-nav a i{ display: none;}
.nav-item:hover .second-nav{ max-height: 1000px; opacity: 1;padding:10px 20px;}
.second-nav a:hover{ text-decoration: underline;}
.mBtn{ display: none;  cursor: pointer;   box-sizing: border-box; width: 40px; height: 40px;align-items: center; justify-content: flex-end; /* background-color: #0a9fd9; */ }
.mBtn span{ display: block;  width: 22px;}
.mBtn span i{width: 100%; height: 2px; background: #000; 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: 0px;}
.mBtn.active span i{ background-color: #000;}
.mBtn.active{ background: none;}
.toprinav img{ margin-right: 10px;}
.top_ri{ margin-left: 5%; font-size: 20px;}

.banner{ width: 100%; height: calc(100vh - 106px);}
.swiper {width: 100%;height: 100%;}
.banner .swiper-pagination-bullet{color: #fff; font-size: 16px; background-color: transparent; position: relative; padding-right: 20px; opacity: 1; height: 20px;line-height: 20px; font-family: Arial;}
.banner .swiper-pagination-bullet-active{ font-weight: bold; padding-right: 24px;}
.banner .swiper-pagination-bullet::after{ content: ""; display: block; width: 10px; height: 1px; background-color: #fff; position: absolute; right: 0; top: 50%; opacity: 0;}
.banner .swiper-pagination-bullet-active::after{opacity: 1;}
.banner .swiper-pagination{ left: 0; width: auto!important;display: flex; top: 50%; transform: translateY(-50%);}
.ban_bg{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.ban_bg img{ max-width: 92%; height: auto; width: 809px; display: block;}
.bannerfu{ position: absolute; left: 50%; transform: translateX(-50%); bottom:30px; z-index: 9990; height: 60px;}
.swiper-button-next::after,.swiper-button-prev::after{ color: #fff; font-weight: normal; font-size: 14px;}
.swiper-button-prev,.swiper-button-next{ width: 48px; height: 48px; border: 1px solid rgba(255,255,255,0.3); border-radius: 100%; transition: 0.3s; top: 50%!important; margin: 0!important; transform: translateY(-50%)!important;}
.banner .swiper-button-prev{ left: auto; right: 68px;}
.swiper-button-prev:hover,.swiper-button-next:hover{ border: 1px solid #fff;}
.shub{ margin: 0 auto; width: 4em; font-size: 14px; color: #fff; text-align: center;animation: dup 3s linear infinite; margin-top: 20px;}
.shub img{ width: 22px; display: block; margin: 0 auto;}
@keyframes dup {
0%{transform:translateY(0px);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0px); }
}
footer{ width: 100%; color: #fff; background: url(../images/ftbj.jpg) center top no-repeat; background-size: cover;}
footer a{ color: #fff;}
footer a:hover{ color: #fff; text-decoration: underline;}
.foot{ flex-wrap: wrap; padding-top: 50px; padding-bottom: 30px;}
.xian{ width: 100%; height: 1px; background: rgba(255,255,255,0.2);}
.ftdi{ padding: 20px 0; line-height: 2;flex-wrap: wrap; text-align: center; color: #fff; text-transform: uppercase; color: #fffefe;}
.ftdi p{ display: flex; flex-wrap: wrap; justify-content: center;}
.ftdi p i{ padding: 0 2px;}
.ft1{ width: 410px;}
.ft1 h1{ font-size: 32px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
.ft1 h1 img{ margin-right: 20px;}
.ft1 p{ font-size: 18px; margin: 4px 0; line-height: 2;}
.ft1zi{ margin-top: 15px; overflow: hidden; width: 100%;}
.ft3{ width: 260px;margin-top: 8px;}
.ft3>div{ width: 100%; box-sizing: border-box; border: 1px solid #d2d9e9; display: flex;}
.ft3 h1{ width: 50%; padding: 12px;}
.ft3 h1 img{ width: 100%; display: block;}
.ft3 p{ display: flex; align-items:center; justify-content: center; line-height: 2; text-align: center; width: 50%; box-sizing: border-box; border-left: 1px solid #d2d9e9;}
.ft2{  display: flex; justify-content: space-between; flex: 1; margin: 0 60px; margin-top: 8px;}
.ft2 span{ display: flex; flex-direction: column; width: 100%; line-height: 2.2; margin-top: 20px;}
.ft2 h1{ font-size: 18px; font-weight: bold;}
.fubox{ position: fixed; right: 10px; top: 50%; transform: translateY(-50%); width: 120px; border-radius:120px; background-color: #0a9fd9; color: #fff; text-align: center; padding-bottom: 26px; z-index: 9990;animation: dup1 3s linear infinite; box-shadow: 1px 5px 10px rgba(0,0,0,0.1);}
.fubox a{ color: #fff;}
.fubox .futoptu{ position: relative; display: block; margin: 0 auto; margin-top: -13px;}
.fubox .fuzi{ display: inline-block; margin-bottom: 15px; line-height: 2.2; margin-top: 5px;}
.futop:hover img{ transform: translateY(-4px);}
.guanbi{ display: flex; opacity: 1;  transition: 0.3s;position: absolute; right: 5px; top: 5px; z-index: 9991; color: #fff; justify-content: center; width: 20px; height: 20px; border-radius: 100%; border: 1px solid #fff; line-height:1; align-items: center; cursor: pointer;}
.fukong{ position: relative;}
@keyframes dup1 {
0%{transform:translateY(-50%);}
50%{transform:translateY(0);}
100%{transform:translateY(-50%); }
}
.fubox:hover{ animation-play-state: paused;}
#toTop{ background-color:rgba(0,0,0,0.6); right: 1%; bottom: 90px; width: 40px; height:40px;display: flex; justify-content: center; align-items: center; transition: 0.3s; z-index: 9990; }
#toTop:hover{background-color:rgba(10,159,216,0.8);}
#toTop img{ width: 60%;}

section{ padding: 80px 0;}
main{width: 1450px; margin: 0 auto;}
.tu h1{ overflow: hidden; position: relative; width: 100%;}
.tu h1 img{ display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.tu h1::after{ width: 100%; padding-top: 70%; content: ""; display: block;}
.title h1{ font-size: 36px; position: relative; padding-bottom: 30px;}
.title h1 i{ position:absolute; left: 0; bottom: 0; width: 56px; height: 4px; background-color: #0a9fd8;}
.title{ position: relative; z-index: 0; text-transform: uppercase;}
.title h2{ position: absolute; z-index: -1; left: 70px; top: -36px; color: #999; font-weight: bold; font-size: 120px; opacity: 0.1;}
.title p{ letter-spacing: 0.5em; font-size: 18px; color: #717171; margin-top: 20px;}
.title1 h1{font-size: 36px;}
.title1{ text-align: center; position: relative; z-index: 0; text-transform: uppercase;}
.title1 h2{position: absolute; z-index: -1; left: 50%; transform: translateX(-50%); top: -60px; color: #999; font-weight: bold; font-size: 120px; opacity: 0.1; width: 100%;}
.title1 p{ margin-top: 0.5rem; font-size: 20px; color: #666;}
.more{ width: 190px; height: 46px; display: flex; justify-content: center; align-items: center; color: #fff; background-color: #0a9fd8; border-radius: 46px;}
.more:hover{ background-color: #db4d01; color: #fff;}


.con1{ background: url(../images/con1.jpg) bottom center no-repeat; background-size: cover;}
.con1le{ width: 750px; max-width: 100%;}
.con1ri{ width: 563px; max-width: calc(100% - 800px);}
.xkcon{ display: none; transition: 0.3s;}
.xkcon.active{ display: block;}
.con1ti{ font-size: 30px; margin-top: 35px; margin-bottom: 35px;}
.con1con span h2{ font-weight: bold; color: #db4d01; font-size: 46px; position: relative; padding-right: 20px;display: inline-block;}
.con1con span h2 i{ position: absolute; right: 0; top:0 ; color: #5b5b5b; font-size: 18px; font-weight: normal; }
.con1con p{ color: #5b5b5b; font-size: 18px;}
.con2con{ height: 420px; width: 100%; background: url(../images/con201.jpg) center center no-repeat; background-size: cover;}
.con2k{ width: 100%; display: flex; height: 100%; align-items: center; justify-content: center; color: #fff; text-align: center; box-sizing: border-box; border: 0.01rem solid #a0a2ab; border-bottom: 5px solid transparent;transition: 0.3s;}
.con2k h2{ font-size: 26px; margin-top: 20px;}
.con2k h3{ font-size: 60px; opacity: 0.1; margin-top: 45px;}
.con2k img{ width: 75px; margin: 0 auto; max-width: 80%;}
.con2tex{ color: #fff; padding-top: 130px;}
.con2 .danye{ text-align: center; width: 1020px; margin: 0 auto; max-width: 100%; margin-top: 80px; line-height: 2.4;}
.con2more{ display: block; margin: 0 auto;animation: dup1 3s linear infinite; width: 38px; margin-top: 100px;}
.con2 .title1 h2{ color: #eee;}
.con2more img{ width: 100%;}
.iconh{ display: none;}
.icon{ display: block;}
.xknav.on .con2k .iconh{ display: block;}
.xknav.on .con2k .icon{ display: none;}
.xknav.on .con2k{background-color: #fff;color: #000; border-bottom: 5px solid #0a9fd8;}
.con3con{ margin-top: 30px;}
.con3k{ display: block; width: 24%; background-color: #f7f7f7; margin-top: 20px;}
.con3k span{ display: block; box-sizing: border-box; padding: 26px; width: 100%;}
.con3k span:nth-child(2){ border-bottom:1px solid #d3d3d3;}
.con3k p{ line-height: 2; color: #666;}
.con3k span img{ margin: 0 auto; display: block; max-width: 50%;}
.con3k span h2{ text-align: center; font-size: 24px; margin-top: 20px;}
.con3 .tu h1::after{ padding-top: 62%;}
.con3k:hover span img{ transform: rotateY(-180deg);}
.con4{ background-color: #f3f3f3;}
.con4le{ width: 660px; max-width: 100%;}
.tufu{width: 100%; position: absolute; left: 0; bottom: 0; background-color: rgba(255, 255, 255,1); z-index: 6; box-sizing: border-box; padding: 0 20px; height: 50px; line-height: 50px; color: #000; transition: 0.3s;}
.tufu p{white-space: nowrap;text-overflow: ellipsis;overflow: hidden; width: calc(100% - 120px);}
.tu:hover .tufu{background-color: rgba(255, 255, 255, 1);}
.con4tu{width: 100%; height: 100%; display: block;position: relative;}
.con4tu img{ display: block; width: 100%; height: 100%;object-fit: cover; }
.con5list{ display: block; width: calc(20% - 4%); margin-right: 5%; box-sizing: border-box; padding: 5px; border: 1px dashed #666; margin-top: 50px;}
.con5list:nth-child(5n){ margin-right: 0;}
.con5 .tu h1::after{ padding-top: 54%;}
.con5 .tu h1 img{object-fit: contain;}
.con5list:hover{ border: 1px dashed #0a9fd8; transform: translateY(-5px);}
.con4 .swiper .swiper-pagination{ right: 15px!important; left: auto!important; top: auto!important;display: flex; align-items: center; width: auto; transform: translateX(0)!important; bottom: 20px;}
.con4 .swiper .swiper-pagination-bullet{ width:10px;height:10px; box-sizing: border-box; border-radius:10px; border: none; background-color: #000; opacity: 0.1; margin: 0 3px;}
.con4 .swiper .swiper-pagination-bullet-active{opacity: 1; background-color: #0a9fd8; }
.con4ti .more{ border-radius: 0;}
.con4con .tu h1::after,.tulistbox .tu h1::after{ padding-top: 68%;}
.con4ri{ width: calc(100% - 680px);}
.con4rilist{ width: 100%; padding-bottom: 18px; border-bottom: 1px solid #d8d8d8; margin-bottom: 18px;}
.con4rilist:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
.con4rilist h1{ width: 185px;}
.con4rilist span{ width: calc(100% - 205px);}
.con4rilist span h2{ font-size: 18px; font-weight: 500;}
.con4rilist span h3{ font-size: 16px; color: #999; margin: 10px 0;}
.con4rilist span p{ line-height: 1.6; color: #666;}

/*分页样式*/ 
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:#0a9fd9;border:#0a9fd9 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:#0a9fd9;border:#0a9fd9 solid 1px;color:#FFF;}
.bar{ display: flex; justify-content: space-between; width: 100%; margin-top: 40px;}
.bar a{color: #666; line-height: 1; transition: 0.3s;background: #F2F2F2;}
.bar a:hover{background: #0a9fd9; color: #fff;}
.bar a.show_prev{display: flex; align-items: center; justify-content: space-between;  padding: 15px 20px; 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: 15px 20px; 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;}
.show_title{text-align: center; padding-top: 20px;}
.show_title h1{font-size: 24px; font-weight: bold; border-bottom: 1px #dadada solid; padding-bottom: 30px;}
.show_title h2{font-size: 18px;color: #666; display: flex;align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 30px;}
.show_title i{ padding:0 10px;}
.danye{line-height: 2; width: 100%; font-size: 18px; width: 100%;}
.danye img{max-width: 100%!important;}
.erbanner{ width: 100%; height: 550px; position: relative;}
.ernav{ width: 100%; height: 70px; background: rgba(255,255,255,0.9); position: absolute; left: 0; bottom: 0;}
.ernav a{ height: 100%; position: relative; display: flex; align-items: center; font-size: 20px; margin-right: 90px;}
.ernav a i{ position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: #0a9fd8; transition: 0.3s;}
.ernav a:hover i,.ernav a.on i{ width: 100%;}
.ernav a:hover,.ernav a.on{ color: #0a9fd8;}
.ernav .swiper-slide,.dd_nav .swiper-slide{ width: auto!important;display: flex; align-items: center;}

/* 新闻 */
.tulistbox{ margin-top: 20px;}
.tulist{ background-color: #f5f6f8; margin-top: 30px;}
.tulist:hover h1 img{transform: scale(1.1);}
.tulist span{ display: flex; flex-direction: column; box-sizing: border-box; padding: 25px 20px 30px 20px;}
.tulist span h2{ font-size: 18px; font-weight: bold; line-height: 1.6;}
.tulist span h3{ width: 36px; background-color: #999; height: 3px; margin-top: 13px;}
.tulist span p{ color: #666; line-height: 2.2; margin-top: 25px;}
.tulist span h4{ font-size: 18px; color: #666; margin-top: 30px;}

.lxmap{ box-sizing: border-box;width: 100%; height: 50vh;}
.lxlist{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 30px;}
.lxlist span{ margin-top: 20px; background-color: #f9f9f9; display: flex; flex-direction: column; padding: 30px; box-sizing: border-box; width: calc(33.3% - 16px);}
.lxlist span img{ width: 20px; height: 24px;}
.lxlist span p{  line-height: 1.7; font-size: 18px; margin-top: 20px; font-weight: bold;}
.lxfoot{ display: flex; flex-direction: column; justify-content: center; text-align: center; color: #0c6eb9; background: url(../images/xlbj.png) center center no-repeat;}
.lxfoot h1{ font-size: 40px;}
.lxfoot h2{ margin-top: 10px; font-size: 50px;font-weight: bold;}

.left{ width: 440px;}
.right{ width: calc(100% - 480px);}
.left h1{ font-size: 38px; color: #0a9fd8; font-family: "homeng";text-transform: uppercase;}
.left h2{ font-size: 50px; font-family: "mama";}
.left h3{ font-size:40px; font-family: "mama";}
.left h4{ font-size:30px;}
.ywtu img{ width: 953px; max-width: 100%; height: auto; display: block;}

.zzlist{ background-color: #f2f2f2; text-align: center; margin-bottom: 30px;}
.zzlist p{font-size: 18px; line-height: 3.5; width: 100%; box-sizing: border-box; padding: 0 15px;}
.zzlist:hover{ background-color: #0a9fd8; color: #fff;}

.danyetop{ width:100%; flex-wrap:wrap;}
.dy_ri{ width:calc(100% - 600px)}
.dy_le{ width:570px;display: block;}

textarea{resize:none;} 
.kuai4{ width: calc(25% - 4.5%); margin-right: 6%;}
.kuai4:nth-child(4n),.lx_k4:nth-child(4n){ margin-right: 0;}
.kuai3{ width: calc(33.3% - 2%); margin-right: 3%;}
.kuai3:nth-child(3n){ margin-right: 0;}

.dianji{ cursor: pointer; transition: 0.3s;}
.dianji:hover{ opacity: 0.9;}
.conf{ display: flex; justify-content: space-between;}
.conc{ display: flex; align-items: center;}
.conw{ width: 100%; display: flex; flex-wrap: wrap;}
.cor1{ color: #0a9fd8;}
.cor2{ color: #e25053;}
.cor6{ color: #666;}
.cor9{ color: #999;}
.corf{ color: #fff;}
.mtop30{ margin-top: 30px;}
.mtop50{ margin-top: 50px;}
.mtop70{ margin-top: 70px;}
.mtop70{ margin-top: 70px;}
.mtop180{ margin-top: 180px;}
.pc{ display: block;}
.sj{ display: none;}
/*----- 超出省略号///-----*/
.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; /* 设置垂直布局 */}
.ziov5{ display: -webkit-box; /* 将元素作为弹性伸缩容器 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 使用省略号表示被裁切的部分 */
        line-clamp: 5; /* 限制最大行数为5行 */
        -webkit-line-clamp: 5; /* Safari/Chrome特定的限制最大行数的属性 */
        -webkit-box-orient: vertical; /* 设置垂直布局 */}
		
.qimg,.logo img{
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -webkit-optimize-contrast; /* Webkit (Safari/Chrome) */
	image-rendering: pixelated; /* Standards */
	}