@charset "utf-8";


/* header&foot */
section{width: 100%; }
.box{width: 1200px; margin: 0 auto; margin-top: 50px;}
header{ width: 100%; height:128px;  transition: 0.3s;  background: #fff;}
.head{width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%;}
.logo{ width:568px;  }
.logo a{display: block; width:100%; }
.logo a img{display: block;width: 100%;}

.head_right{display: flex;  align-items: center; height: 100%; }

.tel{display: flex;align-items: center;}
.tel i{display: block; width: 50px; height: 50px; background: #353572; box-sizing: border-box; border-radius: 50%; color: #fff; font-size: 24px;}
.tel i a{display: flex; align-items: center; justify-content: center; color: #fff; width: 100%;height: 100%;}
.tel i a::before{content: "\e94f";}
.tel span{color: #353572; display: block; margin-left: 10px; }
.tel span h2{font-size: 22px; font-weight: bold;}

.banner-nav{position: relative; width: 100%; overflow: hidden;}
nav{width: 100%; height: 66px; background: #353572;z-index: 99; transition: 0.3s; border-radius: 0 0 20px 20px; position: absolute; left: 0; top: 0; overflow: hidden;}
.o-nav{position: static;}
nav.active{position: fixed; top: 0; left: 0; z-index: 99;}
.nav-box{width: 1200px; margin: 0 auto; display:  flex; align-items: center; justify-content: space-between;height: 100%;}
.nav-left{display: flex; height: 100%;}
.nav-left a{display: flex;align-items: center; height: 100%; transition: 0.3s; padding: 0 30px; color: #fff; font-size: 18px; border-right: 1px #fff solid;}
.nav-left a:hover{background: #05bc93; color: #fff;}
.nav-left a.on{background: #05bc93;}
.nav-tx{width: 180px; display: block; margin-top: 8px;}
.nav-tx img{display: block; width: 100%;}

.mBtn{ width: 40px; height: 40px; display: none;  cursor: pointer;   box-sizing: border-box; border: 2px rgba(255,255,255,.5) solid; border-radius: 50%;}
.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;}

.m-tel{display: none;}

.banner{width: 100%; position: relative; margin-top: 40px; }
.banner em{display: block;width: 100%;}
.banner em img{display: block; width: 100%;}
.banner i{display: block; width: 100%; position: absolute; z-index: 2;  left: 0; top: 50%; transform: translateY(-50%); margin-top: -50px;}
.banner i img{display: block; width: 695px; margin: 0 auto;}

.tz-sec{position: relative; z-index: 2; margin-top: -80px;}
.tongzhi{width: 100%;height: 76px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 20px; box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 10px; background: #fff;}
.tongzhi span{display: flex; align-items: center; height: 100%; width: calc(100% - 80px);}
.tongzhi span i{display: block; color: #ca2a1c; font-size: 24px;}
.tongzhi span i::before{content: "\e60b";}
.tongzhi span h1{font-size: 18px; color: #353572; margin-left: 8px;}
.tongzhi span a{display: block; width: calc(100% - 130px); word-wrap:break-word; white-space:nowrap;overflow: hidden;text-overflow:ellipsis;font-size: 18px; transition: 0.3s;}
.tongzhi span a:hover{ color: #353572;}
.tongzhi h2{}
.tongzhi h2 a{font-size: 16px; color: #353572;transition: 0.3s;}
.tongzhi h2 a:hover{ color: #ca2a1c;}


.index-title{position: relative; }
.index-title span{position: relative; left: 0; top: 0; display: block; z-index: 2;}
.index-title span h1{font-size: 18px; color: #bbb; text-transform: uppercase;}
.index-title span h2{font-size: 42px; color: #353572; font-weight: bold;}
.index-title i{position: absolute; z-index: 1; top: 46px; left: 146px; display: block;width: 28px; height: 28px; background: #05bc93; border-radius: 50%;}

.mes-title span h1{color: #fff;}
.mes-title span h2{color: #fff;}
.mes-title i{ background: #ffd200;}


.index-about{display: flex; align-items: center; justify-content: space-between;flex-wrap: wrap; margin-top: 50px;}
.about-left{width: calc(100% - 560px);}
.about-name{font-size: 36px;font-weight: bold; color: #353572;}
.about-tx{line-height: 1.6; color: #999; font-size: 16px; text-transform: uppercase; text-align: justify; margin-top: 20px;}
.more{width: 150px; height: 38px; background: #353572; border-radius: 0 0 38px 0; margin-top: 50px; transition: 0.3s;}
.more a{display: flex; height: 100%; align-items: center; justify-content: center; color: #fff;}
.more a i{display: block; margin-left: 20px;}
.more a i::before{content: "\e720";}
.more:hover{background: #CA2A1C;}
.more:hover a{color: #fff;}

.about-right{position: relative; width: 510px;}
.about-right em{display: block;width: 490px; border-radius: 20px; overflow: hidden; position: relative;z-index: 2;float: right; margin-bottom: 20px;}
.about-right em img{display: block; width: 100%;}
.about-right i{display: block; width: 110px; height: 156px; background: #05bc93; position: absolute; z-index: 1; left: 0; bottom:0; border-radius: 15px;}

.mes-box{display: flex; flex-wrap: wrap; border-radius: 20px; overflow: hidden;}
.mes-left{width: 50%; background: url(../img/mes.jpg) no-repeat center; background-size: cover;}
.mes-right{width: 50%; background: #05bc93; box-sizing: border-box; padding: 40px;}
.mes-info{ margin-top: 30px;}
.mes-info form{display: block;}
.mes-info span{display: flex; justify-content: space-between;}
.mes-info span input{
	outline:none;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	-ms-appearance:none;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	display: block;
	width: calc(50% - 10px);
	height: 42px;
	border-radius: 42px;
	background: rgba(255,255,255,.6);
	box-sizing: border-box;
	padding: 0px 10px;
	color: #333;
}
.mes-info span input::placeholder{color: #333;}
.mes-info textarea{
	outline:none;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	-ms-appearance:none;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	display: block;
	width: 100%;
	height: 42px;
	border-radius: 20px;
	background: rgba(255,255,255,.6);
	box-sizing: border-box;
	padding: 10px;
	color: #333;
	margin-top: 20px;
	height: 80px;
}
.mes-info textarea::placeholder{color: #333;}
.mes-info button{
	outline:none;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	-ms-appearance:none;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	display: block;
	width: 100%;
	height: 42px;
	margin-top: 20px;
	background: #ffd200;
	border-radius: 42px;
	transition: 0.3s;
	font-size: 16px;
}
.mes-info button:hover{background: #CA2A1C; color: #fff;}

.index-news{display: flex; margin-top: 50px; flex-wrap: wrap;}
.index-news a{display: block; width: calc(25% - 18px); margin-right: 24px;  background: #fff; box-sizing: border-box; border-radius: 16px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,.2); transition: 0.3s;}
.index-news a:nth-child(4n){margin-right: 0;}
.index-news a h1{font-size: 16px; color: #05bc93;}
.index-news a em{width: 100%; height: 10vh;  background-size:100% 100%!important; display: block; margin-top: 20px;}
.index-news a h1::after{content: ""; display: block; width: 20px;height: 1px; background: #05BC93; margin-top: 10px;}
.index-news a h2{font-size: 18px; margin-top: 20px; text-align: justify;}
.index-news a h3{color: #999; margin-top: 20px; text-align: justify;}
.index-news a h4{display: flex; align-items: center; margin-top: 20px;}
.index-news a h4 i{display: block; margin-left: 8px;}
.index-news a h4 i::before{content: "\e720";}
.index-news a:hover{ background: #353572;}
.index-news a:hover h1,.index-news a:hover h2,.index-news a:hover h3,.index-news a:hover h4{color: #fff;}
.index-news a:hover h1::after{background: #fff;}

footer{background: #353572; padding: 20px 0;}
.foot{width: 1200px;margin: 0 auto; display: flex; justify-content: space-between; color: #fff; flex-wrap: wrap;}
.foot a{color: #fff; transition: 0.3s;}
.foot a:hover{color: #FFD200;}

.weizhi{ width: 1200px; margin: 0 auto; text-align: center;font-size: 36px; font-weight: bold; color: #353572; display: flex; align-items: center; justify-content: center; margin-top: 50px;}
.weizhi::before{content: ""; display: block; width: 100px; height: 1px;background: #353572; margin-right: 20px;}
.weizhi::after{content: ""; display: block; width: 100px; height: 1px;background: #353572; margin-left: 20px;}

.about-zonghe{font-size: 16px; line-height: 1.8; color: #666;}
.about-zonghe p{margin-top: 10px; text-indent: 32px;}

.danye{line-height: 1.6;}
.danye img{max-width: 100%!important; height: auto!important;}

.news-sec{background: url(../img/cbg.png) no-repeat center bottom; background-size:cover auto; padding-bottom: 80px;}
.fy-sec{background: url(../img/cbg.png) no-repeat center bottom; background-size:cover auto; padding-bottom: 80px; }
.news{}
.news a{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box; padding: 20px; transition: 0.3s;}
.news a:nth-child(odd){background: #f2f2f2;}
.news a dl{text-align: center;}
.news a dl dt{ color: #353572; font-size: 38px; font-weight: bold;}
.news a dl dd{ color: #999;font-size: 12px;}
.news a em{display: block; width: 200px;}
.news a em img{display: block; width: 100%;}
.news a span{width: calc(100% - 300px);}
.news a span h1{font-size: 18px; font-weight: bold;}
.news a span h2{color: #999; margin-top: 10px;}
.news a:hover{background: #353572;}
.news a:hover dt{color: #05bc93;}
.news a:hover dd{color: #fff;}
.news a:hover h1,.news a:hover h2{color: #fff;}

.news-title{text-align: center; border-bottom: 1px #ddd solid; padding-bottom: 20px;}
.news-title h1{font-size: 32px; font-weight: bold;}
.news-title h2{color: #999; margin-top: 6px;}

.show-box{margin-top: 20px; line-height: 1.6;}
.show-box img{max-width: 100%!important; height: auto!important;}
.fenxiang{margin-top: 50px;text-align: center;}

.contacts{display: flex; justify-content: space-between; text-align: center; flex-wrap: wrap;}
.contacts span{display: block; width: calc(25% - 10px);}
.contacts span i{display: block; width: 60px; height: 60px; line-height: 60px; text-align: center; background: #353572; border-radius: 50%; margin: 0 auto; color: #fff; font-size: 24px;}
.contacts span:nth-child(1) i::before{content: "\e65e";}
.contacts span:nth-child(2) i::before{content: "\e632";}
.contacts span:nth-child(3) i::before{content: "\e966";}
.contacts span:nth-child(4) i::before{content: "\e62f";}
.contacts span h1{color: #999; margin-top: 16px;}
.contacts span h2{margin-top: 6px; font-weight: bold; font-size: 16px;}

.ditu{width: 100%;height: 50vh;background: #eee; margin-top: 50px;}


/*分页样式*/ 
.pages{margin-top: 50px;  }
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: 30px; border:#ddd solid 1px;color: #666; transition: 0.3s; background: #fff;}  
ul.yiiPager li a:hover{background:#353572;border:#353572 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: "\e642";transform: rotate(180deg); font-size: 20px;}
ul.yiiPager li.next a::before{content: "\e642"; font-size: 20px;}
ul.yiiPager li.selected a{background:#353572;border:#353572 solid 1px;color:#FFF;}