.nbanner img{ max-width:100%;}
.nbanner{ text-align:center;}

.ztitle{ text-align:center; padding-top:20px; padding-bottom:8px; }
.ztitle font{ font-size:24px; display:block; margin-bottom:5px; line-height:24px;}
.ztitle span{ display:inline-block; width:400px; border-bottom:#ddd 1px solid; height:10px;}
.ztitle small{ font-size:16px; display:inline-block; background:#fff; padding:0px 10px;}
.menu2 { text-align:center; padding:20px 0;}
.menu2 a{ display:inline-block; padding:10px 20px; font-size:14px; border:#ddd 1px solid; border-radius:5px; margin:0 5px;}
.menu2 a:hover ,.menu2 a.on{ background:#34383c; color:#fff;}
.menu3{ background:#f9f9f9; height:64px; border-bottom:#e7e7e7 1px solid; text-align:center}
.menu3 a{ display:inline-block; line-height:64px;  font-size:18px; padding:0px 18px;}
.menu3 a:hover,.menu3 a.on{ background:#4e5556; color:#fff;}


/******************************
 ** 内页架构
 ******************************/
.sidebar { float:left; width:15%; }
.side-menu { position: relative;    }
  .containercon{ float:right; width:83%;}
 
 
.hr10{ clear:both; height:10px;}
.hr20{ clear:both; height:20px;}
.hr30{ clear:both; height:30px;}
.hr40{ clear:both; height:40px;}
.f24{ font-size:24px;}.f20{ font-size:20px;}
.f18{ font-size:18px;}
.f16{ font-size:16px;}
.f14{ font-size:14px}
 .text_center{ text-align:center;}
 .row{ margin-left:-15px; margin-right:-15px;}
 .rowitem{ margin-left:15px; margin-right:15px;}
 .rowitem img{ max-width:100%;}
 .col_3{ width:33.3%; float:left;}
 .col_4{ width:25%; float:left;}
 .col_2{ width:50% ; float:left;}
 .col_5{ width:20% ; float:left;}
 .col_6{ width:16.66667% ; float:left;}
 
 .zttitle{ text-align:center;}
 .zttitle .zbig{ font-size:36px; margin-bottom:4px;}
 .zttitle .zsmall{ font-size:20px; line-height:48px;}
 .zttitle .zsmall:before{ content:" "; width:300px; height:1px; background:#ddd; display:inline-block; margin-right:15px; position:relative; top:-5px;}
 .zttitle .zsmall:after{ content:" "; width:300px; height:1px; background:#ddd; display:inline-block; margin-left:15px;position:relative; top:-5px;}


 .part1{ padding:40px 0;}
 .part1 ul li { text-align:center; font-size:16px; line-height:2; padding:40px 0 0}
 .part1 ul li p{ line-height:2;}
 

.part4 ul li p{ font-size:16px; text-align:center; line-height:2; margin-bottom:15px;}

.side-title{ background:#34383c; color:#fff;   line-height:1}
.side-title big{ display:block; font-size:24px; font-weight:900; padding:25px 24px 25px 24px; background:url(../img/icon01.png) no-repeat 218px center; }
.side-title small{ display:block; font-size:18px;}

.side-list ul{border-left:#ddd 1px solid;border-right:#ddd 1px solid; }
.side-list li{ border-bottom:#ddd 1px solid; line-height:50px; }
.side-list li a{ font-size:16px; background:url(../images/arr1.png) left center no-repeat; background-position:220px; padding-left:24px; display:block;}
.side-list li:hover a,.side-list li.on a{ color:#fff; background:url(../images/arr2.png) left center no-repeat #274583; background-position:200px;}

 
.side-head { height:34px; line-height:34px; padding:10px 0 10px 10px; font-size:20px; background:none;  }
.side-con { margin-bottom:20px; position:relative; top:20px; }
.side-con .side-head { height:40px; line-height:40px; background:#34383c; }
.side-con .side-head h2 { font-size:16px; font-weight:normal; color:#fff; padding:0 0  0 15px; }
.side-con .main { padding:10px 10px 15px; line-height:25px; border:1px solid #ddd;background: #fff; border-radius:0 0 5px 5px; }
.side-con .main img{ max-width:100%; margin-bottom:5px;}

.container {  }
.location { height:35px; border-bottom:1px solid #ddd; position:relative; line-height:35px; margin-bottom:10px;  }
.location font { font-size:20px; float:left;  }
.location .io {   float:right;color:#666; }
.location .io b { color:#999; }
.content { padding:20px; border:1px solid #ddd; margin-bottom:20px; }


.list-news1 li{ line-height:35px; border-bottom:#ececec 1px solid; overflow:hidden;}
.list-news1 li a{ float:left; background:url(../images/arr1.png) left center no-repeat; padding-left:15px; display:block}
.list-news1 li span{ float:right; color:#666}

.list-news2 li{  overflow:hidden; padding-bottom:1%; margin-bottom:1%; background:#f4f4f4; padding:2%}
.list-news2 li.odd{  }
.list-news2 li span{ display:block; overflow:hidden; margin-bottom:5px;}
.list-news2 li span a{ font-size:16px; line-height:1; float:left;display:block; font-weight:900;}
.list-news2 li span font{ float:right}
.list-news2 li p{ font-size:12px; line-height:180%;}

.list-news3 li{border-bottom:#ececec 1px solid; overflow:hidden; padding-bottom:2%; margin-bottom:2%}
.list-news3 li a.litpic{ float:left; display:block; width:20%;}
.list-news3 li a.litpic img{ width:100%;}
.list-news3 li span{ float:right; display:block; width:78%;}
.list-news3 li.noimg span{ width:100%; float:none}
.list-news3 li span a{ font-size:16px; line-height:200%; margin-bottom:5px;}
.list-news3 li span font{ display:inline-block; margin-top:5px;}

.list-news4 li{border-bottom:#ececec 1px solid; float:left; overflow:hidden;  width:32%; margin-right:2%; margin-bottom:2%; padding-bottom:2%;}
.list-news4 li.last{ margin-right:0;}
.list-news4 li a.litpic{   display:block; }
.list-news4 li a.litpic img{ width:100%; height:160px;}
.list-news4 li span{   display:block; }
.list-news4 li.noimg span{ width:100%; float:none}
.list-news4 li span a{ font-size:14px; height:40px; line-height:40px; overflow:hidden; display:block; }
.list-news4 li span font{ display:inline-block; margin-top:5px; }


/* shownews*/
.vtitle{ font-size:22px; line-height:30px; text-align:center; padding-top:20px;  margin-bottom:20px;  color:#000;;}
.vdes{  text-align:center; color:#A8A6A6; border-bottom:1px dotted #CCCCCC;border-top:1px dotted #CCCCCC; ; margin-bottom:10px; padding:4px 0;}
.ArticleMessage a:link{ text-align:center;color:#A8A6A6;}
.vcon{  line-height:180%; padding:10px 10px; }
.vcon img{ max-width:100%;}
.vpages { border:#f1f1f1 1px solid; background:#f7f7f7; padding:10px; font-size:16px; line-height:2;}

ul,li{ margin:0; padding:0; list-style:none}
/*简单产品列表*/
.prolist ul{ margin:0 -15px;}
.prolist li{ float:left; margin-top:10px; width:33.3%;  }
.prolist li .item{ margin:15px 15px 0 15px;}
.prolist li a.txt{ display:block; text-align:center; line-height:35px; background:#eee; font-size:16px; line-height:35px;}
.prolist li a.img{ display:block; position:relative;  }
.prolist li a.img:before{content:""; display:block; padding-top:75%}
.prolist li a.img img{ height:100% ; position:absolute; width:100%;top:0; left:0; display:block; width:100%;}
.prolist li:hover a.txt{ background:#000; color:#fff;}

/*简单产品列表*/
.prolist1 ul{ }
.prolist1 li{ float:left; margin-top:10px; width:32%; margin-right:2%; position:relative;height:180px; }
.prolist1 li.last{ float:right; margin-right:0;}
.prolist1 li a.txt{ display:block; text-align:center; line-height:36px; position:absolute; bottom:0px; left:0; color:#fff; width:100%; font-size:14px; z-index:3}
.prolist1 li a.img{ display:block;    height:180px;}
.prolist1 li span{position:absolute; bottom:0px; left:0; width:100%; background:#000; z-index:2; background:#000; height:36px;/* older safari/Chrome browsers */  
    -webkit-opacity: 0.8;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.8;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.8;  
    /* IE9 + etc...modern browsers */  
    opacity: .8;  
    /* IE 4-9 */  
    filter:alpha(opacity=80);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  }
 
/*面包屑导航*/
.vpos{ height:40px; line-height:40px; border-bottom:#d9d9d9 1px solid;}
.vpos font{ float:left; font-size:18px; margin-left:10px;}
.vpos span{ float:right; margin-right:10px;}
 

.footer { background:#34383c; padding:30px 0 30px;color: #fff; position: relative; text-align:center; color:#fff; }
.footer a{color: #fff;}

.product-part{padding-top: 80px;padding-bottom: 50px}
.product-part .product-list{width: 100%;display: inline-block;padding-top:50px}
.product-part .product-list dl{width: 100%;height:auto;display: block;clear: both;background: #f2f4f9;float: left;margin-bottom: 50px;}
.product-part .product-list dl dt{width: 40%;float: left}
.product-part .product-list dl dd{width: 60%;float: right;padding: 40px;padding-top: 65px;}
.product-part .product-list dl:nth-child(2n) dt{float: right;text-align: right;}
.product-part .product-list dl:nth-child(2n) dd{float: left;padding-left: 65px}
.product-part .product-list dl dt img{width: 95%;}
.product-part .product-list dl dd h1{font-size:36px;line-height:36px;padding-bottom:10px;position: relative;background:linear-gradient(to right, rgba(0,104,183,1), rgba(235,185,14,1), rgba(235,185,14,1));-webkit-background-clip: text;color: transparent;}
.product-part .product-list dl dd h2{font-size:18px;color: #0068b7;font-weight: bold;text-transform:uppercase;position: relative;padding-bottom: 20px}
.product-part .product-list dl dd h2:after{content: '';position: absolute;left: 0;bottom: 0;width: 60px;height: 1px;background: #0068b7}
.product-part .product-list dl dd p{padding-top: 30px;font-size: 15px;line-height: 30px;width: 100%;display: block;}
.product-part .product-list dl dd a,.development-part .dev-list dl dd a{background: linear-gradient(to bottom right, rgba(235,185,14,1),rgba(0,104,183,1),rgba(0,104,183,1));box-shadow: 0px 0px 8px 0px rgb(10 25 50 / 20%); padding: 8px 60px;color: #fff;border-radius: 20px;font-size: 13px;display: inline-block;margin-top: 30px}
.product-part .product-list dl dd a:hover,.development-part .dev-list dl dd a:hover{background:linear-gradient(to bottom right,rgba(0,104,183,1),rgba(0,104,183,1),rgba(235,185,14,1));box-shadow: 0px 0px 8px 0px rgb(10 25 50 / 50%);}

@media screen and (max-width: 1599px){
	.product-part .product-list dl dt{width: 45%;}
	.product-part .product-list dl dd{width: 55%;}
}
@media screen and (max-width: 1399px){
	.product-part .product-list dl dt{width: 50%;}
	.product-part .product-list dl dd{width: 50%;}
}
@media screen and (max-width: 1199px){
	.product-part .product-list dl dt img{width: 100%;}
	.product-part .product-list dl dd{padding: 45px}
	.product-part .product-list dl:nth-child(2n) dd{padding-left: 45px}
	.product-part .product-list dl dd h1{font-size:30px;line-height: 30px;}
	.product-part .product-list dl dd h2{font-size:15px;}
	.product-part .product-list dl p{height: 150px;overflow: hidden;}
	.product-part .product-list dl dd a,.development-part .dev-list dl dd a{margin-top: 20px}
}
@media screen and (max-width: 999px){
	.product-part .product-list dl dt{width: 100%;}
	.product-part .product-list dl dd{width: 100%;}
	.product-part .product-list dl:nth-child(2n) dt{float: left}
	.product-part{padding-top: 60px}
}
@media screen and (max-width:576px){
	.product-part{padding-top: 30px}
	.product-part .product-list{padding-top: 30px}
	.product-part .product-list dl dd{padding: 20px 4% 40px 4%}
	.product-part .product-list dl:nth-child(2n) dd{padding-left: 4%}
	.product-part .product-list dl dd h1{font-size: 22px}
	.product-part .product-list dl dd p{padding-top: 20px;font-size: 13px;line-height: 22px;height: auto}
	.development-part .dev-list{padding-top: 10px}
}
.product-cate-list,.solution-list{padding-bottom: 40px}
.product-cate-list dl,.solution-list dl{padding: 20px}
.product-cate-list dl a,.solution-list dl a{background: #fff;display: block;width: 100%;padding: 0;}
.product-cate-list dl a dt,.solution-list dl a dt{width: 100%;overflow: hidden;}
.solution-list dl a dt{padding: 30px}
.product-cate-list dl a dt img,.solution-list a dt img{width: 100%;transition: all .2s}
.product-cate-list dl a:hover dt img,.solution-list dl a:hover dt img{transform: scale(1.05);}
.product-cate-list dl a dd,.solution-list dl a dd{width: 100%;padding: 30px;border-top: 1px #eee solid}
.product-cate-list dl a dd h1,.solution-list dl a dd h1{font-size: 22px;line-height: 30px;font-weight: normal;width: 100%}
@media screen and (max-width:576px){
	.product-cate-list dl,.solution-list dl{padding: 10px 2%}
	.product-cate-list dl a dd h1,.solution-list dl a dd h1{font-size: 20px;line-height: 24px}
	.product-cate-list dl a dd,.solution-list dl a dd{padding:10px 3%;}
}
.inner-p{ font-size:16px; line-height:2;}


.theme-center{ text-align: center;}
.theme-center span{ display: block; font-size: 36px; color: #000000; letter-spacing: 3px;}
.theme-center p{ margin-top: 8px; font-size: 18px; color: #999999; text-transform: uppercase;}
.tab-div{ margin-top: 30px; text-align: center;}
.tab-div span,
.tab-div a{ position: relative; display: inline-block; padding: 0 35px; font-size: 24px; position: relative; cursor: pointer;}
.tab-div span:after,
.tab-div a:after{ content: ""; position: absolute; top:50%; right:0; width: 1px; height: 24px; transform: translateY(-50%); -webkit-transform: translateY(-50%); background: rgba(0,0,0,.2); }
.tab-div span.active,
.tab-div a.active{ color: #1a7f95; }
.tab-div span:last-child:after,
.tab-div a:last-child:after{ display: none;}
.more-button{ border:1px solid #999999; display: inline-block; padding: 12px 40px; font-size: 16px; border-radius: 4px;}
.more-button:hover{ border: 1px solid #1a7f95; color: #FFFFFF; background: #1a7f95;} 

/* ========== */
/* = CASE = */
/* ========== */
.case{  padding: 75px 0 150px; position: relative;}
.case .mao{ position: absolute; left:0; top:-100px; }
.case .letter{ position: absolute; top:10%; right:18%; font-size: 200px; font-weight:600; color: rgba(0,0,0,.05); text-transform: uppercase; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform-origin:right top; -webkit-transform-origin:right top;}
.case-list{ margin: 10px 0 80px; display: flex; flex-flow: wrap;  justify-content: space-between; align-items:stretch; position: relative; z-index: 1;}
.case-list li{  margin-top: 30px; width: 31%; background:#FFFFFF; padding:10px;}
.case-list li .box{ display: block; color: #333333; }
.case-list li .img{ position: relative; overflow: hidden;}
.case-list li .img img{ width: 100%;}
.case-list li .img .pop{ position: absolute; transform: translateY(100%); -webkit-transform: translateY(100%); top:0; left:0; width: 100%; height: 100%; background:rgba(0,0,0,.5); display: flex; flex-flow: wrap;  justify-content: space-between; align-items:center;  color: #FFFFFF; text-align: center; -webkit-transition: all ease .3s; transition: all ease .3s;}
.case-list li .img .pop .con{ width: 100%; letter-spacing: 2px;}
.case-list li .img .pop p{ font-size: 24px;}
.case-list li .img .pop span{ margin-top: 20px; display: inline-block; padding-right: 30px; position: relative; font-style: normal; font-size: 18px;}
.case-list li .img .pop span:after{ content: ""; position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right:0; width: 24px; height: 24px; background-image: url(img/ico_more_white.png); background-size: cover;} 
.case-list li .tit{ padding: 18px 5px; display: flex; flex-flow: wrap; justify-content: space-between; align-items:center; font-size: 18px;} 
.case-list li .tit span{ display: inline-block; width: 50%; padding-left: 10px; position: relative;}
.case-list li .tit span:before{content: ""; position: absolute; top:50%; left:0;  transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 2px; height: 18px; background: #1a7f95;}
.case-list li .tit i{ font-style: normal;}
.case-list li .des{ line-height: 24px; border-top: 1px solid #dddddd; padding-top: 10px; }
.case-list li .des span{ display: inline-block; margin-right:40px;}
.case-list li .des span:last-child{ margin-right: 0;}
.case-list li:hover{ -webkit-box-shadow:0 5px 20px rgba(0,0,0,.15); box-shadow:0 5px 20px rgba(0,0,0,.15);}
.case-list li:hover .img .pop{  transform: translateY(0%); -webkit-transform: translateY(0%); }
.case-list li:hover .tit{ color: #1a7f95;}
/* ========== */
/* = NEWS = */
/* ========== */


/* ========== */
/* = CASE-DETAIL = */
/* ========== */
.case-detail{ padding: 55px 0 120px;}
.case-detail .container{ display: flex; flex-flow: wrap; justify-content: space-between; align-items:flex-start;}
.case-detail .left{ width: 67%;}
.case-detail .left .title{ padding-right: 260px; position: relative; line-height: 40px;}
.case-detail .left .title h1{ font-size: 30px; letter-spacing: 3px; font-weight: 600; color: #000000;}
.case-detail .left .title .date{ position: absolute; color: #333333; top:0; right:0; display: inline-block; padding-left: 22px;}
.case-detail .left .title .date:before{ content: ""; position: absolute; top:50%; left:-3px; width: 24px; height: 24px; transform: translateY(-50%); -webkit-transform: translateY(-50%); background-size: cover; background-image: url(img/ico_date2.png);}
.case-detail .left .source{ margin-top: 30px;}
.case-detail .left .source span{ margin-right: 40px; font-size: 16px; line-height: 30px; display: inline-block; padding-left: 30px; position: relative;}
.case-detail .left .source span:before{ content: ""; position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left:0; width: 24px; height: 24px; background-size:cover;}
.case-detail .left .source .span-01:before{ background-image: url(img/ico_case_01.png);}
.case-detail .left .source .span-02:before{ background-image: url(img/ico_case_02.png);}
.case-detail .left .source .span-03:before{ background-image: url(img/ico_case_03.png);}
.case-detail .detail{ margin-top: 20px; padding: 50px 0 75px; border-top: 1px solid rgba(0,0,0,.2); border-bottom: 1px solid rgba(0,0,0,.2); font-size: 16px; line-height: 30px; text-align: justify; color: #333333;}
.case-detail .detail .font-24{ font-size: 24px;}
.case-detail .detail .mt15{ margin-top: 15px;}
.case-detail .flip{ margin-top: 30px;  display: flex; flex-flow: wrap; justify-content: space-between; align-items:center;}
.case-detail .flip a{ max-width: 48%; color: #333333; font-size: 16px;}
.case-detail .flip a:hover{ color: #1a7f95;}
.case-detail .right{ width:28.5%;}
.case-detail .right .theme{ color: #222222; font-size: 20px; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,.2); font-weight: 600;}
.right-new-list li{ margin-top: 18px;}
.right-new-list li a{  display: flex; flex-flow: wrap; justify-content: space-between; align-items:center;}
.right-new-list li .img{ width:38%; overflow: hidden;}
.right-new-list li .img img{ width: 100%;}
.right-new-list li .text{ width: 56%;}
.right-new-list li .text .tit{ color: #333333;}
.right-new-list li .text .date{ margin-top: 6px; color: #999999; font-size: 12px; position: relative; padding-left: 18px;}
.right-new-list li .text .date:before{ content: ""; position: absolute; top:50%; left:-3px; width: 20px; height: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); background-size: cover; background-image: url(img/ico_time.png);}
.right-new-list li .text span{ margin-top: 20px; display: block; }
.right-new-list li a:hover .tit{ color: #1a7f95;}
.right-new-list li a:hover span{ color: #1a7f95;}



.news{ padding: 55px 0 150px; position: relative;}
.news .tab-div{ margin-top: 0;}
.news-list{ margin: 40px 0 75px;}
.news-list li { padding: 28px;}
.news-list li .box{ padding-right: 140px; padding-left: 300px; height: 144px;  display: flex; flex-flow: wrap; justify-content: space-between; align-items:center; position: relative;}
.news-list li .box .img{ position: absolute; top:50%; left:0; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 240px;}
.news-list li .box .text{ width: 100%; border-left: 1px solid #a3ccd5; padding-left:5%;}
.news-list li .box .text .tit{ font-size: 24px; color: #222222;}
.news-list li .box .text .des{ margin-top: 20px; font-size: 16px; line-height: 32px; height: 64px; overflow: hidden; text-align: justify;}
.news-list li .box .date{ position: absolute; top:50%; right:0; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 120px; text-align: center; color: #999999;}
.news-list li .box .date span{ font-size: 64px; }
.news-list li .box .date p{ font-size: 18px;}
.news-list li .box .date i{ margin-top:15px; display: inline-block; width: 50px; height: 30px; background-size: cover; background-image: url(img/ico_news_arrows.png); background-position: right center;}
.news-list li:hover{ -webkit-box-shadow:0 5px 20px rgba(0,0,0,.15); box-shadow:0 5px 20px rgba(0,0,0,.15);}
.news-list li:hover .text .tit{ color: #1a7f95;}
.news-list li:hover .date{ color: #1a7f95;}
.news-list li:hover .date i{ width: 70px; background-image: url(img/ico_news_arrows2.png);}
  
.news-tip-box{ padding: 35px 0; background:#f8f8f8 ;}
.news-tip-box .tit{ font-size: 20px; color: #333333; font-weight: 600;}
.news-tip-box .text{ font-size: 16px; line-height: 32px; color: #333333; margin-top: 20px;} 
  
.news-tip-bottom{ margin-top: 70px;}
.news-tip-bottom span{ font-size: 16px;  color: #333333;}
.news-tip-bottom a{ margin-bottom: 18px; margin-right: 15px; padding: 0 12px; display: inline-block; border: 1px solid #dddddd; line-height: 30px; border-radius: 3px;}
.news-tip-bottom a:hover{ border: 1px solid #1a7f95; color: #1a7f95;}  
  
.news-tip-con{ margin-top: 20px; margin-right: -10px;}
.news-tip-con a{ margin-bottom: 10px; margin-right: 10px; padding: 0 12px; color: #333333; display: inline-block; border: 1px solid #dddddd; line-height: 30px; border-radius: 3px;}
.news-tip-conn a:hover{ border: 1px solid #1a7f95; color: #1a7f95;}

/* ========== */
/* = ABOUT = */
/* ========== */
.about-box{ padding: 60px 0 115px; position: relative;}
.about-box .letter{ position: absolute; top:6%; right:10%; font-size: 160px; font-weight:600; color: rgba(0,0,0,.03); text-transform: uppercase;}
.about-box .content123123{ margin-top: 50px; position: relative; z-index:1;  display: flex; flex-flow: wrap; justify-content: space-between; align-items:center;}
.about-box .content123123 .text{  width: 50%; text-align: justify; color: #222222; }
.about-box .content123123 .text h2{ font-size: 24px; font-weight: 600;}
.about-box .content123123 .text .des{ margin-top: 30px; font-size: 16px; line-height: 32px;}
.about-box .content123123 .img{ width: 46%;}
.about-box ul{ display: flex; flex-flow: wrap; justify-content: space-between; align-items:stretch; border-top: 1px solid #e5e5e5; }
.about-box li{ margin-top: 50px; width: 47%; line-height: 30px; text-align: justify; position: relative;}
.about-box li h3{ margin-bottom: 10px; position: relative; padding-bottom: 15px; font-size: 20px; color: #222222;}
.about-box li h3:after{ content: ""; position: absolute; bottom: 0; left:0; width: 40px; height: 1px; background: #1a7f95;}
.about-box li span{ position: absolute; top:0; right:0; font-size: 60px; color: rgba(0,0,0,.05); font-weight:600;}
.about-advantage{ padding: 60px 0 70px; background: #f8f8f8;}
.about-advantage ul{ margin-top: 30px; display: flex; flex-flow: wrap; justify-content: space-between; align-items:center; font-size: 18px; text-align: center; color: #222222;}
.about-advantage .line{ margin-top: 20px; width: 1px; height: 117px; background: #dfdfdf;}
.honor-box{ padding: 70px 0; position: relative;}
.honor-box .letter{ position: absolute; top:12%; left:-20px; font-size: 160px; font-weight:600; color: rgba(0,0,0,.03); text-transform: uppercase;}
.honor-box .content{ position: relative;}
.honor-box .swiper-button-next{ right:-120px;}
.honor-box .swiper-button-prev{ left:-120px;}
.honor-box .text{ margin:30px auto 0; max-width: 700px; font-size: 18px; line-height: 36px; text-align: center; color: #222222;}
.swiper-honor{  margin: 55px -17px 0;}
.swiper-honor .swiper-slide{ padding: 0 17px;}
.swiper-honor .img{ border: 1px solid #e6e6e6; border-radius: 6px; overflow: hidden; padding:10%; background:#FFFFFF;}
.customer-box{ padding: 80px 0 110px;}
.customer-box ul{ margin-top: 20px; display: flex; flex-flow: wrap; justify-content: space-between; align-items:center;}
.customer-box li{ margin-top: 2.4%; width: 18%; border: 1px solid #e6e6e6; border-radius: 4px; overflow: hidden;}

@media (max-width:1680px){
	.honor-box .swiper-button-next{ right:-78px;}
	.honor-box .swiper-button-prev{ left:-78px;}
}

/* ========== */
/* = SERVICE = */
/* ========== */
.mao{ position: absolute; top:-101px; left:0;}
.service-bg{ background-image: url(img/service_bg.jpg);}
.service-design{ position: relative; border-bottom:1px solid #dddddd;}
.service-design .letter{ position: absolute; top:6%; right:10%; font-size: 160px; font-weight:600; color: rgba(0,0,0,.03); text-transform: uppercase;}
.service-design .theme-center{ position: absolute; top:55px; left:0; width: 100%;}
.service-design .container{ display: flex; flex-flow: wrap; justify-content: space-between; align-items:center; }
.service-design .left{ padding:180px 0 120px; width: 44%; position: relative; z-index: 1;}
.service-design .left .img {  position: relative;}
.service-design .left .img:after{ content: ""; position: absolute; top:10px; left:10px; width: 100%; height: 100%; background: #1a7f95;}
.service-design .left .img img{ position: relative; z-index: 1; width: 100%;}
.service-design .right{ padding:210px 0 150px; margin-left: -14%; width: 70%; border-left:1px solid #dddddd; padding-left: 20%; font-size: 16px; line-height: 32px; color: #222222; text-align: justify;}
.service-design .right span{ font-weight: 600;}

.service-concept{ position: relative; padding: 120px 0 80px;}
.service-concept ul{ display: flex; flex-flow: wrap; justify-content: space-between; align-items:stretch;}
.service-concept li{ margin-top: 50px; width: 31%; background: #fafafa; padding: 30px; position: relative; overflow: hidden; cursor: pointer;}
.service-concept li i{ font-style: normal; position: absolute; bottom: -17%; right:5%; font-size: 200px; line-height:200px; color:rgba(255,255,255,.1);}
.service-concept li span{ padding-bottom: 15px; display: block; font-size: 24px; color: #000000; position: relative;}
.service-concept li span:after{ content: ""; position: absolute; bottom: 0; left:0; width: 40px; height: 1px; background: #8abcc7;}
.service-concept li p{ margin-top: 10px; font-size: 16px; line-height: 32px; color: #333333; text-align:justify;}
.service-concept li:hover{ background: #1a7f95;}
.service-concept li:hover span{ color: #FFFFFF;}
.service-concept li:hover span:after{ background: rgba(255,255,255,.2);}
.service-concept li:hover p{ color: #FFFFFF;}
.service-concept .text{ margin-top: 60px; color: #333333; text-align: center; font-size: 24px;}

.service-assurance{ position: relative; padding-top: 80px; background: #f8f8f8;}
.service-assurance .letter{ position: absolute; top:6%; left:0; font-size: 160px; font-weight:600; color: rgba(0,0,0,.03); text-transform: uppercase;}
.service-assurance ul{ position: relative; z-index: 1; display: flex; flex-flow: wrap; justify-content: space-between; align-items:stretch;}
.service-assurance li{ margin-top: 60px; width: 20%; cursor: pointer; padding: 17% 0; color: #FFFFFF; text-align: center;  display: flex; flex-flow: wrap; justify-content: space-between; align-items:center; position: relative; letter-spacing: 2px;}
.service-assurance li:after{ content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background: #000; opacity: .7;}
.service-assurance li .con{ width: 100%; padding: 0 10%; position: relative; z-index: 1;}
.service-assurance li .tit{ position:relative; font-size: 25px; padding-bottom: 18px;}
.service-assurance li .tit:after{ content: ""; position: absolute; bottom: 0; left:50%; margin-left: -20px; width: 40px; height: 1px; background:rgba(255,255,255,.4);}
.service-assurance li .des{ display: none; margin-top: 18px; font-size: 18px; line-height: 36px; height: 72px; overflow: hidden;}
.service-assurance li.active{ width: 40%;}
.service-assurance li.active:after{ opacity: .3;}
.service-assurance li.active .des{ display: block;}


/* ========== */
/* = CONTACT = */
/* ========== */
.contact .content{ position: relative; display: flex; flex-flow: wrap; justify-content: space-between; align-items:center;}
.contact .map-box{ margin-left: -26%; position:relative; width:80%; height:760px; overflow: hidden;}
.contact .map-box img{ max-width:1000%;}
.contact .map-box .allmap{ width:100%; height: 100%; position: absolute; left: 0; top:0;} 
.contact .map-box .anchorBL{ display: none; }
.contact-info{ width:42%;}
.contact-info .row{ padding: 22px 0 12px; border-bottom: 1px solid #e5e5e5; line-height:40px; display: flex; flex-flow: wrap; justify-content: flex-start; align-items:center; font-size: 16px;}
.contact-info .row i{ display: inline-block; width: 10%;}
.contact-info .row i img{ margin: 0;}
.contact-info .row span{ display: inline-block; width:20%; font-size: 18px; color: #222222;}
.contact-info .row p{ width: 70%;}
.contact-info .row a:hover{  color: #1a7f95;}
.contact-info .erweima-div{ margin-top: 60px; display: flex; flex-flow: wrap; justify-content: flex-start; align-items:center;}
.contact-info .erweima-div span{ margin-right: 40px; display: block; border: 1px solid #dddddd;}
.contact-info .erweima-div div p{ margin-top: 10px; font-size: 18px;}
.contact-info .erweima-div div i{ display: block; font-size: 24px; color: #1a7f95; font-style: normal;}

.contact-box-left{float:left;width:35%;}
.contact-box-left .contact-box-left-p{font-size:18px; line-height:2;}
.contact-box-right{ float:right;width:60%}
.contact-box-right {}
.jylist{padding:40px 0;}
.jylist ul{ margin:0 -15px;}
.jylist li{ float:left; width:33.3%;   }
			.jylist li .box{ background:#eee; margin:15px;  padding:5%}
			.jylist li.last{ float:right;}
			.jylist li .bit{ font-size:16px; font-weight:900; line-height:2;     color: #fa5d06;}
			.jylist li p{ font-size:14px; line-height:2; margin-top:5px; height:90px}
@media (max-width:999px){

/* ========== */
	/* = ABOUT = */
	/* ========== */
	.about-box{ padding: 1.2rem 0;}
	.about-box .letter{display: none;}
	.about-box .content123123{ margin-top: 0.666666rem;}
	.about-box .content123123 .text{  width: 100%; }
	.about-box .content123123 .text h2{ font-size: 0.4rem;}
	.about-box .content123123 .text .des{ margin-top: 0.4rem; font-size: 0.34rem; line-height: 0.62rem;}
	.about-box .content123123 .img{ width: 100%; margin-top: 0.533333rem;}
	.about-box li{ margin-top:0.8rem; width: 100%; font-size: 0.34rem; line-height: 0.62rem;}
	.about-box li h3{ font-size: 0.4rem; }
	.about-box li span{ font-size: 0.7rem;}
	.about-advantage{ padding: 1.2rem 0;}
	.about-advantage ul{ margin-top: 0.4rem; font-size: 0.346666rem;}
	.about-advantage li{ width: 40%;}
	.about-advantage li:nth-child(4){ display: none;}
	.about-advantage img{ width: 1.2rem;}
	.about-advantage .line{ margin-top:0.266666rem; width: 1px; height:1.8rem; }
	.honor-box{ padding: 1.2rem 0;}
	.honor-box .swiper-button-next{ right:0;}
	.honor-box .swiper-button-prev{ left:0;}
	.honor-box .content{ padding: 0 0.8rem;}
	.honor-box .text{ margin:0.4rem auto 0; font-size: 0.34rem; line-height: 0.62rem;}
	.swiper-honor{  margin: 0.666666rem 0 0;}
	.swiper-honor .swiper-slide{ padding: 0 0.133333rem;}
	.customer-box{ padding: 1.2rem 0;}
	.customer-box li{ width: 32%; }
	
	/* ========== */
	/* = SERVICE = */
	/* ========== */
	.mao{ top:-1.4rem; }
	.service-design{ padding: 1.2rem 0;}
	.service-design .letter{ display: none;}
	.service-design .theme-center{ position: relative; top:auto;}
	.service-design .left{ padding:1rem 0; width: 100%;}
	.service-design .right{ padding: 0; margin: 0; border: none; width: 100%; font-size: 0.34rem; line-height: 0.62rem;}
	
	.service-concept{ padding:  1.2rem 0;}
	.service-concept li{ margin-top: 0.666666rem; width: 100%;}
	.service-concept li i{ font-size: 2.666666rem; line-height:3rem;}
	.service-concept li span{ font-size: 0.4rem;}
	.service-concept li p{font-size: 0.34rem; line-height: 0.62rem;}
	.service-concept .text{ margin-top: 0.8rem; font-size: 0.4rem;}
	
	.service-assurance{ padding-top: 1.2rem; }
	.service-assurance .letter{display: none;}
	.service-assurance li{ margin-top: 0.8rem;  letter-spacing: 0.01rem;}
	.service-assurance li .tit{ font-size:0.34rem; padding-bottom: 0.4rem;}
	.service-assurance li .tit:after{  margin-left: -15px; width: 30px;}
	.service-assurance li .des{ margin-top: 0.266666rem; font-size: 0.266666rem; line-height:0.5rem; height: 1rem;}
	
	
	/* ========== */
	/* = CONTACT = */
	/* ========== */
	.contact .container{ padding: 0 0 1rem;}
	.contact .map-box{ margin-left: 0%; width:100%; height:7rem; }
	.contact-info{ margin-top: 0.666666rem; width:100%; padding:0 0.666666rem;}
	.contact-info .row{ padding: 0.4rem 0 0.2rem; line-height:0.8rem; font-size: 0.34rem; }
	.contact-info .row i img{ width:0.7rem;}
	.contact-info .row span{ font-size: 0.34rem; }
	.contact-info .erweima-div{ margin-top: 0.8rem;}
	.contact-info .erweima-div span{ margin-right: 0.4rem; width: 2.6rem; }
	.contact-info .erweima-div div p{ margin-top:0.133333rem; font-size:0.34rem;}
	.contact-info .erweima-div div i{  font-size: 0.46rem;}
	
}




.cxbtnform{ display:none}
.cxbtnformitem{ margin:10px 0;}
.cxbtnformbox{ padding:20px  30px;}
.cxbtnformitemleft{ float:left; width:80px; font-size:16px; text-align:center; line-height:40px;}
.cxbtnformitemright{ float:right; width:300px;}
.cxbtnformitemright input.inp{ border:#ddd 1px solid; width:100%; padding:0 3%; line-height:40px;height:40px;}

.cxbtnformitem_btn input{  margin:20px auto 0 auto;
    height: 48px;
    border: none;
    font-size: 16px;
    background-color: #ff7d4e;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;}
	.cxbtnformtitle{ text-align:center; padding-bottom:10px; font-size:20px; color:#ff7d4e}



/*joinus*/
.join_us {
	width: 1002px;
	padding-bottom: 14px;
}

.join_wrap {
 
 
}

.join01 {
	padding-left: 146px;
	background: url(../images/join01.jpg) no-repeat left center;
}

.join01 p span {
	font-family: "Microsoft YaHei";
	display: block;
	font-size: 14px;
	color: #3284b6;
	font-weight: bold;
	line-height: 45px;
}

.join01 p {
	line-height: 24px;
}

.join02 {
	padding-top: 15px;
}

.join02_title {
	height: 36px;
}

.join02_title span {
	width: 23px;
	height: 34px;
	line-height: 34px;
	color: #FFF;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	background: url(../images/li07.jpg) no-repeat;
	margin-right: 15px;
	float: left;
	display: inline;
}

.join02_title h3 {
	height: 34px;
	line-height: 34px;
	font-size: 12px;
	color: #000;
	float: left;
}

.join_c {
	padding-left: 38px;
	line-height: 20px;
}

.join2_c {
 
}

.join03 {
	border: 1px solid #b6b5b5;
	border-top: none;
}

.join03_title {
	padding: 0px 15px;
	  line-height: 35px;
	border-top: 1px solid #b6b5b5;
	background: #ededf0;
}

.join03_title span {
	color: #232323;
	line-height: 35px; display:block;
 
}

.join03_title span h3{font-size:16px; 	line-height: 35px; }

.join03_title a {
	padding-top: 10px;
	float: right;
}

.join03_c {
	padding: 10px 20px;
	border-top: 1px solid #b6b5b5;
	line-height: 20px;
}


.pc{ display:block;}
.wap{ display:none}
@media only screen and (max-width: 768px){
	.containercon1{ margin:0 15px;}
	.yc_logo{ float:none; width:auto; margin:0 5%;}
	.yc_logo img{}
	.yc_head{ padding:10px 0 !important}
	.nav{height:auto !important; margin:10px 0 !important;}
	.nav li{display:block;float:left; height:auto !important;width:25% !important;}
	.nav li a.big {line-height:32px !important}
	.pc{ display:none;}
.wap{ display:block}


.tab-div span, .tab-div a{ font-size:16px;}
.news-list li{     padding: 10px;
    margin: 10px;
    border: #eee 1px solid;}
.news-list li .box{ height:auto; display:block; padding:10px;}
.news-list li .box .img{ position:inherit; width:100%; -webkit-transform:none; text-align:center}
.news-list li .box .img img{ height:160px; max-width:100%;}
.news-list li .box .date{ position:inherit; width:auto; display:none}
.news-list li .box .text .tit{ font-size:18px;}
.news-list li .box .text .des{ font-size:14px;}

.case-detail{  padding:15px;}
.case-detail .left .title{ padding-right:0; }
.case-detail .left .title h1{ font-size:24px; margin:0;}
.case-detail .left .title .date{ position:inherit;}
.case-detail .left{ width:auto; float:none;}
.case-detail .right {width:auto; float:none;}
.case-detail .detail{ margin:0; padding:10px 0;}

.case-list li .tit{ font-size:14px;}
.case{ padding:15px;}
.theme-center span{ font-size:24px;}
.case .letter{ display:none}
.product-part{ padding:15px;}
.case-list{ display:block;}
.case-list li{ width:auto; float:none;}

.about-box{ padding:15px;}
.about-box .content123123 .text h2{ font-size:18px;}
.about-box .content123123 .text .des{line-height:2; font-size:14px;}

.service-concept li span{ font-size:18px; font-weight:900;}
.service-concept li p{ font-size:14px; line-height:2;}
.service-design{ padding:15px;}
.service-design .right{ line-height:2; font-size:14px;}
.about-box li h3{ font-size:18px;}
.about-box li{ line-height:2; font-size:14px;}
	.phone-menu{ background:#fff; height:50px; padding:0 5px; position:relative;}
	.phone-menu-logo{ float:left; margin-top:5px; }
	.phone-menu-logo img{ height:30px;}
	.phone-menu-btn{ float:right; width:24px; margin-top:15px;}
	.phone-menu-btn span{ display:block; height:3px; margin-bottom:5px; background:#022d93;}
	.phone-menu-btn.on{margin-top: 22px;}
	.phone-menu-btn.on span{ margin-bottom:-3px;}
	.phone-menu-btn.on span:nth-child(2){ display:none;}
	.phone-menu-btn.on span:nth-child(1){transform: rotate(45deg);}
	.phone-menu-btn.on span:nth-child(3){transform: rotate(135deg);}
	.phone-nav_vr{ float:right; background:url(../img/vrbg.png); color:#fff; background-size:100% 100%; color:#fff; line-height:34px; width:60px; text-align:center; margin-top:7px; margin-right:10px;}
.phone-nav_vr a{ display:block; font-size:12px; color:#fff; font-weight:900;}

.phone-menu-xl{ position:absolute; top:50px; display:none; left:0; width:100%; background:#022d93; z-index:2222222222;}
.phone-menu-xl-box{ padding:10px;}
.phone-menu-xl-box li{ float:left; width:50%;}
.phone-menu-xl-box li a{ display:block; padding-left:2%; line-height:3; color:#fff; border-bottom:#c4c4c4 1px solid; font-size:14px;;}

	

	.top img{height:40px !important;}
	.wrap{max-width:100%;}
	.indexbanner .indexbannertxt img{ height:20px;}
	.indexbanner .indexbannertxt .indexbanner_fjmd{ padding:10px 0;}
	.indexbanner .indexbannertxt{ font-size:16px;}
	.row{ margin-left:-5px; margin-right:-5px;}
 .rowitem{ margin-left:5px; margin-right:5px;}
 .maincon{ float:none; width:auto; margin:2%;}
 .prolist ul{ margin:0 -5px;}
 .prolist li .item{ margin:5px;}
 .nbanner .nbannertxt font{ font-size:20px;}
 .nbanner .nbannertxt p{ font-size:14px;}
 
	.sitepath{ background:#f3f3f3; position:relative; line-height:40px; height:40px;border-bottom:#efefef 1px solid;}
.sitepath font{ display:inline-block; font-size:18px; margin:0 0.2rem; width:70%;}
.sitepath  span{ float:right; font-size:0.3rem; margin-right:0.2rem; color:#666}
.sitepath  span i{  }
.menu{ display:none; padding:0.1rem  0;}
.menu .list a { display:block; float:left; width:50%; text-align:center; font-size:0.275rem}
.menu .list a span{ display:block; border:#ddd 1px solid; margin:2%; padding:.2rem 0.1rem; border-radius:3px;}

.menu .list a.on span{   color:#fff;}
.h20{ height:7px;}
.location{ display:none}
.contact-box{ margin:0 15px;}
.contact-box-left,.contact-box-right{width:auto;float:none;}
.jylist li{ width:auto;float:none;}
.jylist li p{height:auto}
}