@charset "utf-8";

.pagemain{ width:100%; overflow:hidden;}
.content { max-width:1300px; width:100%; height: auto; margin: 0 auto; padding:0 10px; box-sizing:border-box;}
img {max-width: 100%;}

.header{ width:100%; box-sizing:border-box;  left:0; top:0; z-index:9999; transition:all 0.5s;}
.header .logo{ float:left; position:relative;  padding: 10px 0 10px; transition:all 0.5s;}
.header .logo img{transition:all 0.5s;}

.mbutton *{ transition:all 0.5s;}
.mbutton{ width:40px; float:right; font-size:22px; color:#666; text-align:center; cursor:pointer; display:none; position:relative;}
.mbutton .caid{ opacity:1;}
.mbutton .close{ opacity:0; transform:scale(0,0); width:40px; line-height:72px; position:absolute; left:0; top:0;}
.mbutton.on{ color:#338dcd;}
.mbutton.on .caid{ opacity:0; transform:scale(0,0);}
.mbutton.on .close{ opacity:1; transform:scale(1,1);}

.header .inmenu{ float:left; line-height:80px; margin-left: 190px;}
.header .inmenu ul > li{ display:block; float:left; padding:0 22px; position: relative; line-height: 80px; transition:all 0.5s;}
.header .inmenu ul li > a{ display: block; color: #black; font-size: 16px; box-sizing: border-box; }
.header .inmenu ul li > a:hover{ color: steelblue; }
.header .inmenu ul li > a.on{ color: steelblue; }

.header_on{ background:#fff; transition:all 0.5s; position: fixed; box-shadow: 0 0 30px rgba(0, 0, 0, .05);}
.header_on .logo { width: 130px; transition:all 0.5s;}
.header_on .inmenu ul li{ color:#333;}
.header_on .inmenu ul li{ line-height: 79px; }
.header_on .lan{ margin-top: 21px; }

.header .lan{ height:30px; padding-left:170px; line-height:30px;  float:left; color: #a17d44;  float: right; margin-top: 26px; transition:all 0.5s;}
.header .lan span{padding:4px 0;}
.header .lan span a{font-size: 14px;margin: 0 10px;}
.header .lan  .onlan{background-color: #4fa3de;width: 40px;color:white;}
.header .lan  .onlan a{color:white;}

.jiange{ height: 47px; background: #000; display: none; }

.banner { position:relative; background:#0066cc; margin:0 auto; }
.banner .bd { position:relative; z-index:0; }
.banner .bd li img{width:100%; vertical-align:top; } 
.banner .hd {width: 100%;position: absolute;z-index: 1;bottom: 20px;left: 0;height: 30px;line-height: 30px;text-align: center;_background: #000;_filter: alpha(opacity=60);}
.banner .hd ul {text-align: center;padding-top: 5px;}

.banner .hd ul li{display: inline-block; margin: 0 5px; width: 20px; height: 20px; cursor: pointer; overflow: hidden; line-height: 999px;background:#0066cc; border-radius: 10px; border:0px solid #0066cc; position: relative;}
.banner .hd ul li.on::before{ content:""; display:block; width: 20px; height: 20px; background: #f2e93a; position: absolute; left: 0px; top: 0px; border-radius: 7px;}
.banner .prev {background: url(../image/sprite.png) left top no-repeat;cursor: pointer;height: 100px;position: absolute;top: 50%;margin-top: -50px;width: 45px;left: 0;opacity: 0.2;}
.banner .prev:hover {opacity: 0.5;}
.banner .next {background: url(../image/sprite.png) right top no-repeat;cursor: pointer;height: 100px;position: absolute;top: 50%;margin-top: -50px;width: 45px;right: 0;opacity: 0.2;}
.banner .next:hover {opacity: 0.5;}

.prod_adv{ padding: 60px 0; }
.bigtitle{ font-size: 46px;  text-align: center; margin-bottom: 5px;}
 .smalltitle{ font-size: 14px; text-align: center; margin-bottom: 50px;}
 
 .adv_left{width: 50%;}
 .adv_right{width:50%;background-color: #057ad4; padding:30px 30px 25px 30px;color: #fff;}
 .adv_right h1{font-size:32px; font-weight:bold;}
 .adv_right p{font-size:14px;line-height:28px;margin-top:20px;}
 

.prod_adv .img{margin-top: 2%;overflow: hidden;display:flex;}
.img-fluid { max-width: 100%;height: auto;}

.prod_4pic{display: flex;flex-wrap: wrap;justify-content: space-around;margin-top:80px ;}
.prod_4pic .item{text-align: center;}
.prod_4pic .item a .img{
    /* height: 178px;
    width: 220px; */
    display: grid;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.prod_4pic .item a .adv1 img:hover{
	 content: url(../image/1_h.png);
	
	}
.prod_4pic .item a .adv2 img:hover{
	 content: url(../image/2_h.png);
	
	}
	
.prod_4pic .item a .adv3 img:hover{
	 content: url(../image/3_h.png);
	
	}

.prod_4pic .item a .adv4 img:hover{
	 content: url(../image/4_h.png);
	
	}

.prod_4pic .item a h3{
    color: #057ad4;
    font-size: 20px;font-weight: bold;
    margin-top: 50px;
}
.prod_4pic .item a span{
	width: 220px;height: 120px;
	font-size: 16px; line-height: 24px;
	text-align: center;
	overflow: hidden;
	display:grid;
	
}


.indcase{background-color: #f5f6fa;padding:65px 0;}
.indcase .caselist{
    display: flex;
    flex-wrap: wrap;
    /* margin-top: 4%; */
}
.indcase .caselist .item{
    flex: 0 0 23%;
    margin-right: 2%;
    margin-top: 2%;
}
.indcase .caselist .item .img{
    display: grid;
    height: 215px;
    overflow: hidden;
    align-content: center;
}

.indcase .caselist .item .con{
    padding: 5% 0 5% 3%;
    text-align: left;
    background: url(../image/case_arrow.gif) 92% center no-repeat;
	background-color: #fff;
    font-size: 18px;
    color: #000;
    transition: .4s;
}
.indcase .caselist .item:hover .img img{
    transform: scale(1.1);
}
.indcase .caselist .item:hover .con{
    background: #4b98d9;
    color: #fff;
}
.indcase .caselist .item:nth-child(4n){
    margin-right: 0;
}

 .more{ display: block; width: 200px; height: 46px; border-radius: 30px; border:1px solid #cccccc;background-color: #fff; text-align: center; line-height: 46px;  font-size: 18px; letter-spacing: 4px; color: #666; margin: 0 auto; margin-top:80px; transition: all 0.5s;}
 .more:hover{ border:none; background: #0572c5; color: #fff; }


.indabout{padding: 70px 0; background: url(../image/cpy_bk.gif) no-repeat center #fff; }
.indabout .leftpic{width:48%;float: left;}
.indabout .rightabout{float:right;width: 48%;  padding-left:48px;padding-top:40px;}
.rightabout h3{font-size:42px;color:#fff;}
.rightabout .aboutcon{
	    line-height: 30px;
	    color: #fff;
	    font-size: 16px;
	    margin-top: 34px;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    max-height: 218px;
}
.rightabout .more{margin:45px 0 0 0;}


.indnews{padding: 65px 0;}
.indnews .newslist{
    display: flex;
    /* margin-top: 4%; */
}
.indnews .newslist .item{margin-right: 40px;}
.indnews .newslist .item .con:hover, .indnews .newslist .item:hover{border: #9E9E9E solid 1px;}
.indnews .newslist .item:hover .img img{
    /* transform: scale(1.05); */
}
.indnews .newslist .item .con{
    padding: 35px 0;
    text-align: center;
    
	background-color: #f5f6fa;
    
    color: #000;
    transition: .4s;
}
.indnews .btitle{padding-bottom:20px; font-size:24px; background: url(../image/newsline.gif) no-repeat center bottom}
.indnews .stitle{padding-top:20px; font-size:16px;}


.indlink{}
.indlink .content{padding-left:20px;font-size:14px;padding-bottom:30px;}
.indlink .content a{margin-right:20px;}

.footer {width:100%;overflow:hidden; position:relative;  background:#1a5e98;}
.footer .footer_content { width:1200px; margin:auto;  text-align:left; color:#fff;overflow:hidden;padding:30px 0 40px 0 ;}
.footer .footer_content ul {overflow:hidden; display:block;}
.footer .footer_content ul.fl { float:left;margin-right:5%; }
.footer .footer_content ul.fr { float:right;margin-right:5%; }
.footer .footer_content .ftitle{font-size:24px;padding-bottom: 10px ;background: url(../image/footerline.gif) no-repeat left bottom}
.footerbr{width:100%;height: 50px;}
.footer .footer_content ul.fl li{color:#fff;text-align:left; }
.footer .footer_content ul.fl li a{display:block;font-size:14px;color:#fff;padding-bottom:12px;}  
.footer .footer_content ul.fl li a:hover{color: #fff;}

.footer .ewm{margin-left: 10%;padding-top: 30px;font-size:12px;color:#fff;padding-bottom:12px;text-align: left;}
.footer .ewm li{padding-bottom:10px;}

.footer .finfo {display:block;font-size:14px;color:#fff;padding-bottom:12px; padding-left:22px;}
.footer .cpyname{font-size: 20px;padding-bottom: 20px;display:block;}
.footer .telicon{background: url(../image/telicon.gif) no-repeat left 2px}
.footer .mailicon{background: url(../image/mailicon.gif) no-repeat left 2px}
.footer .addressicon{background: url(../image/addressicon.gif) no-repeat left 2px}

.footer_bottom { background:#124a78;}
.footer_bottom .fb_con{width:1200px;margin:auto;  text-align:left; color:#9dabb7;font-size:12px; padding:15px; }
.footer_bottom .icp{margin-left: 50px; color:#338dcd;}
.footer_bottom .icp a{color:#338dcd;}

/* -------------------index----------------------------------------- */



/* ----------aboutus-------------------------------------- */
.webcontent{padding: 30px 0;}
.lnav{flex: 0 0 20%;float:left;width: 22%;margin-bottom: 30px;}
.navcontent{ background:#f3f5fc; padding:20px 0;border-bottom:2px solid #338dcd ;}
.navtitle{font-size:24px;color:#338dcd; font-weight:bold;}
.navtitle img{padding: 0 20px;}

.onnav{background:url(../image/leftmenu_bk1.png) no-repeat 240px center;}
.navcontent ul{padding: 20px 0;}
.navcontent li {padding:20px 0;background:url(../image/leftmenu_bk2.png) no-repeat 240px center; border-bottom:0.5px solid #ccc;}
.navcontent ul li a{display:block;}
.navcontent ul li a:hover{ url(../image/leftmenu_bk1.png) no-repeat 240px center;!important}
.nav2title{display:inline-block; padding-left:20px;font-size:18px;}

.navcontent .onnav{color:#fff;background: #338dcd url(../image/leftmenu_bk1.png) no-repeat 240px center;!important }
.navcontent .onnav a{color:#fff;}

.emptynav{height:35px; }
.navpic{padding-top:10px;}

.rcontent{float: right; width:75%;}
.position {padding:10px 0 30px 0;  border-bottom:1px #ccc solid;}
.positioncon{float:right;font-size:14px;}
.positioncon a{}



.rcon_detail{padding:15px 0;text-align:left;}
.rcon_detail h1{font-size: 34px; font-weight:bold;}
/* .rcon_detail p{font-size:16px;margin-top: 40px;line-height: 28px;letter-spacing: 0.5px;} */

.rcon_detail .title {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
	margin-bottom: 30px;
}

/* --------case------------------------ */

.rcontent .caselist{
    display: flex;
    flex-wrap: wrap;
	margin-bottom: 50px;
    /* margin-top: 4%; */
}
.rcontent .caselist .item{
    flex: 0 0 29.5%;
    margin-right: 40px;
    margin-top: 40px;
}
.rcontent .caselist .item .img{
    display: grid;
    /* height: 214px; */
    overflow: hidden;
    align-content: center;
}

.rcontent .caselist .item .con{
    padding: 5% 0 5% 3%;
    text-align: left;
    background: url(../image/case_arrow.gif) 92% center no-repeat;
	background-color: #f5f6fa;
    font-size: 18px;
    color: #000;
    transition: .4s;
}
.rcontent .caselist .item:hover .img img{
    transform: scale(1.1);
}
.rcontent .caselist .item:hover .con{
    background: #4b98d9;
    color: #fff;
}
.rcontent .caselist .item:nth-child(3n){
    margin-right: 0;
}

/* ---------------end case----------- */

.rnewslist .item{margin-top:6%;}
.rnewlist .item:hover{
	   -webkit-box-shadow: rgba(1, 130, 150,.2) 0px 0px 30px;
	    -moz-box-shadow: rgba(1, 130, 150,.2) 0px 0px 30px;
	    box-shadow: rgba(1, 130, 150,.2) 0px 0px 30px;
}

.rnewslist .item a{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.rnewslist .itemleft{flex: 0 0 24%;} 
.rnewslist .item .itemcenter {
    flex: 0 0 50%;
    padding-right: 10%;
}
.rnewslist .item .itemcenter .ntitle{font-size:16px;font-weight:bold;color:#333;}
.rnewslist .item .itemcenter .date{
	color: #999;
	font-size: 14px;
	margin: 10px 0;
}
.rnewslist .item .itemcenter .ncontent{
	/* width: 450px; */
	height:75px;
	color: #666;
	font-size: 14px;
	line-height: 1.8;	
	text-overflow:ellipsis; overflow:hidden;
}
.rnewslist .item .itemright{
	flex: 0 0 10%;
}
.rnewslist .item .itemright span{
	width: 100%;
	text-align: center;
	display: block;
	background: #338dcd;
	line-height: 40px;
	border-radius: 6px;
	color: #fff;
	font-size:14px;
}

 .button_nav{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

 .button_nav a {
     background: #f3f5fc;
     color: #333;
     line-height: 15px;
     padding: 5px;
     font-size: 12px;
     margin: 5px;
     transition: .5s;
     border-radius: 10px;
     border: 1px solid #cccccc;
     float: left;
 }
.button_nav a:hover{
    background: #338dcd;
    color: #fff;

}
 .button_nav a.active{
    background: #338dcd ;
    color: #fff;
 }
 .button_on{  background: #338dcd !important;color: #fff !important;}
 .button_nav .pclass{font-size:18px;}
 .button_nav{display:none;}




@media screen and (max-width: 980px) {
	.header {position:fixed !important;background:#fff !important;}
	
	.bigtitle{font-size:32px;} 
	.smalltitle{font-size:14px; margin-bottom:20px;}
	
	.prod_4pic{margin-top: 25px;}
	.prod_4pic .item a .img {margin: 0 auto;}
	
     .prod_4pic .item a h3 {margin-top: 25px;}
	 
	 .indcase .caselist{justify-content: space-between;}
	 .indcase .caselist .item{flex: 0 0 31%;margin-right: 0;}
	 .indcase .caselist .item .img{height:auto;}
	 
	 .more{    
		 font-size: 14px;
    line-height: 32px;
    height: 32px;
	margin-top:40px;}
	 
	.pagebanner{margin-top: 72px;}
	.pagebanner img{vertical-align: middle;
    border-style: none;}
	
	 .footer .footer_content {
	     width: 90% !important;
	     padding: 50px 5% 20px 5% !important;    
	     font-size: 1.4em;
	 }
	 .footer .footer_content ul.fl {
	     display: none !important;
	 }

}
.rnewslist .search-pagination {
    text-align: center;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    background-color: #40aae2;
    border-color: #40aae2;
    cursor: default;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857;
    text-decoration: none;
    color: #40aae2;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
}
.pagination>li {
    display: inline;
}
.pagination {
	display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.search-pagination>.pagination>li>a {
    margin: 0 3px;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}