@charset "utf-8";
body{ margin:0px; padding:0px; font-size:12px; background:#FFF;line-height:25px; font-family: "microsoft Yahei",Verdana, Geneva, sans-serif;}
ul,li{ margin:0px; padding:0px; list-style:none;}
a{ color:#333; text-decoration:none;}
a:hover{ text-decoration:none;}
table, td{ border: 1px solid #e3e3e3; }


.index{ clear: both; display: block; width: 1200px; margin: 20px auto 40px; }
.indexC{ clear: both; display: block; width: 1200px; margin: 0px auto; }
.clear{ clear: both; display: block; }
.content_c{ clear: both; display: block; border: 1px solid #e3e3e3; }

.topMargin{ clear: both; display: block; height: 80px; }
.top{ clear: both; display: block; width: 100%; height: 80px; background: #fff; position: fixed; z-index: 300; left: 0px; top: 0px; box-shadow: 0px 1px 1px #ccc; }
.topC{ clear: both; display: block; width: 1200px; height: 80px; margin: 0px auto; position: relative; }


.logo{ position: absolute; left: 0px; bottom: 10px; z-index: 300; }
.logo a{ clear: both; display: block; }
.logo img{ clear: both; display: block; border: 0px; height: 60px; }


/*  menu style start */
.navbg{ position: absolute; right: 0px; bottom: 0px; }
.muen_box { width: 100%; overflow: hidden; }


#wrap-nav .muen_box {overflow:visible; z-index: 99; text-transform: uppercase; }
#wrap-nav .menu{ clear: both; display: block; width: 700px; margin: 0px auto; }
#wrap-nav .menu li {  float:left; display: inline; margin-left: 80px; z-index:1000; }
#wrap-nav .menu li a{ display:block; height:70px; line-height:70px; font-size:14px; text-align: center; border-bottom: 3px solid rgba(0,0,0,0); }
#wrap-nav .menu li.on a{ color: #1d2088; text-decoration: none; font-weight: bold; border-bottom: 3px solid #1d2088; }
#wrap-nav .menu li a:hover{ color: #1d2088; text-decoration: none; font-weight: bold; border-bottom: 3px solid #1d2088; }
#wrap-nav .menu .on{ color: #1d2088; }


#wrap-nav .menu ul.children { display: none; width:100%; height: 160px; background: rgba(255,255,255,0.8); position: fixed; z-index:200; top:80px; left:0px; padding-top: 20px; }
#wrap-nav .menu ul.children .subMenuC{ clear: both; display: block; width: 1200px; margin: 0px auto; }

.subMenuInfo{ float: left; display: block; width: 150px; text-align: center; margin-right: 20px; }
.subMenuInfo strong{ clear: both; display: block; font-size: 22px; }
.subMenuInfo span{ clear: both; display: block; font-size: 12px; color: #999; height: 30px; line-height: 30px; }
#wrap-nav .menu li .subMenuInfo a{ clear: both; display: block; height: 30px; line-height: 30px; font-size: 13px; border-radius: 13px; border: 1px solid #666; overflow: hidden; color: #000; }

.subMenuList{ float: left; display: block; width: 1000px; }
#wrap-nav .menu li .subMenuList li{ float: left; display: block; text-align: center; width: 130px; margin-left: 10px; }
#wrap-nav .menu li .subMenuList li a{ border-bottom: none; font-weight: normal; }
.subMenuList li p { clear: both; display: flex;  margin: 0px; padding: 0px; width: 130px; height: 90px; overflow: hidden; align-items: center; justify-content: center; background: #ffffff; }
.subMenuList li p img{ clear: both; display: block; border: 0px; max-width: 130px; max-height: 90px; margin: 0px auto; }
.subMenuList li span{ clear: both; display: block; text-align: center; line-height: 25px; color: #333; }




/* banner */
.swiper-container-banner { clear: both; display: block; width: 100%; height: 500px; margin: 0px auto 40px; overflow: hidden; position: relative; }
.swiper-container-banner .swiper-slide{ clear: both; display: flex; width: 100%; height: 500px; line-height: 80px; align-items: center; justify-content: center; text-align: center; font-size: 40px; font-weight: bold; color: #fff; text-shadow: 2px 2px 4px #444; }
.swiper-container-banner .swiper-pagination-bullet{ width: 20px; height: 20px; background: #1d2088; }





/*  indexTitle  */
.indexTitle{ clear: both; display: block; padding-bottom: 10px; border-bottom: 1px solid #bcbcbc; margin-bottom: 30px; }
.indexTitleLeft{ float: left; display: block; }
.indexTitleLeft strong{ font-size: 32px; color: #1d2088; }
.indexTitleLeft span{ font-size: 24px; color: #666; text-transform: uppercase; }

.indexTitleChannel{ float: right; display: block; text-align: right; }
.indexTitleChannel a{ display: inline-block; font-size: 14px; border-radius: 15px; height: 30px; line-height: 30px; padding: 0px 15px; background: #ccc; margin-left: 15px; }
.indexTitleChannel a:hover{ background: #1d2088; color: #fff; transition: all 0.3s; text-decoration: none; }


/* indexPro */
.indexPro{ clear: both; display: block; width: 1200px; margin: 40px auto 0px; }
.indexProList{ clear: both; display: block; }
.indexProList li{ float: left; display: block; width: 280px; height: 340px; position: relative; margin-right: 26px; margin-bottom: 26px; box-shadow: 0px 0px 8px #ccc; border-radius: 5px; overflow: hidden; }
.indexProList li:nth-child(4n){ margin-right: 0px; }
.indexProList li a{ clear: both; display: block; margin: 10px; }

.indexProListPic{ clear: both; display: flex; width: 280px; height: 220px; align-items: center; justify-content: center; overflow: hidden; }
.indexProListPic img{ border: 0px; max-width: 100%; max-height: 220px; }
.indexProListTxt{ clear: both; display: block; width: 100%; }
.indexProListTitle{ clear: both; display: block; font-size: 16px; font-weight: bold; color: #000; height: 35px; line-height: 35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indexProListSmalltext{ clear: both; display: block; font-size: 12px; color: #888;  height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.indexProListMore{ clear: both; display: block; font-size: 14px; color: #1d2088; }
.proListIcon{ position: absolute; right: -50px; bottom: -60px; transition: all 0.3s; }

.indexProList li:hover a{ text-decoration: none; }
.indexProList li:hover .proListIcon{ right: 0px; bottom: -10px;  transition: all 0.3s;}


/*  indexYingyong  */
.indexYingyong{ clear: both; display: block; padding: 60px 0px; background: #494949; }
.indexYingyongC{ clear: both; display: block; width: 1200px; margin: 0px auto; }

.indexYingyongC .indexTitleLeft strong{ color: #fff; }

.indexYingyongList{ clear: both; display: block; }
.indexYingyongList li{ float: left; display: block; width: 300px; height: 280px; text-align: center; position: relative; }
.indexYingyongList a{ clear: both; display: block; }
.indexYingyongList p{ clear: both; display: block; }
.indexYingyongList p img{ border: 0px; width: 100%; height: 280px; z-index: 100; }
.indexYingyongList strong{ clear: both; display: block; width: 100%; position: absolute; left: 0px; bottom: 10px; font-size: 14px; color: #fff; transition: all 0.3s; }
.indexYingyongList span{ clear: both; width: 70px; height: 70px; line-height: 70px; overflow: hidden; position: absolute; opacity: 0; left: 115px; top: 0px; background: rgba(0,0,0,0.5); color: #fff; font-size: 60px; transition: all 0.3s; border-radius: 50%; }

.indexYingyongList li:hover strong{ bottom: 40px; font-size: 26px; transition: all 0.3s; }
.indexYingyongList li:hover span{ opacity: 1; top: 115px; font-size: 30px; transition: all 0.3s; }

.indexYingyongMore{ clear: both; display: flex; align-items: center; justify-content: center; width: 300px; height: 280px; position: absolute; left: 0px; top: 12px; background:#999; transition: all 0.3s; }
.indexYingyongMore a{ display: flex; align-items: center; justify-content: center; width: 50%; height: 50%; font-size: 50px; background: #999; border-radius: 50%; text-align: center; border: 1px solid #fff; color: #fff; transition: all 0.3s; }
.indexYingyongList li:hover .indexYingyongMore{ background: #000; }
.indexYingyongList li:hover .indexYingyongMore a{ width: 20%; height: 20%; font-size: 16px; }


/* indexService */
.indexService{ clear: both; display: block; width: 1200px; margin: 50px auto; }
.indexServiceList{ clear: both; display: block; }
.indexServiceList li{ float: left; display: block; width: 280px; height: 335px; position: relative; margin-bottom: 30px; margin-right: 26px; background: #e3e3e3; border-radius: 6px; overflow: hidden; }
.indexServiceList li:nth-child(4n){ margin-right: 0px; }
.indexServicePic{ clear: both; display: block; width: 100%; height: 200px; overflow: hidden; }
.indexServicePic img{ border: 0px; width: 100%; height: 100%; }

.indexServiceTit{ clear: both; display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 15px; position: absolute; left: 0px; top: 200px; transition: all 0.3s; }
.indexServiceTit strong{ clear: both; display: table; margin: 0px auto; height: 35px; line-height: 25px; font-size: 16px; border-bottom: 5px solid #333;transition: all 0.3s; }
.indexServiceTit span{ clear: both; display: table; margin: 0px auto; font-size: 12px; color: #888; transition: all 0.3s;}
.indexServiceTit i{ display: none; }
.indexServiceTit p{ clear: both; display: table; margin: 0px auto; font-size: 12px; color: #444; transition: all 0.3s;}


.indexServiceList li:hover .indexServiceTit{ background: rgba(0,0,0,0.4); top: 0px; height: 100%; color: #fff; transition: all 0.3s; }
.indexServiceList li:hover .indexServiceTit strong{ color: #fff; border-bottom-color: #fff; transition: all 0.3s; margin-top: 40px; }
.indexServiceList li:hover .indexServiceTit span{ color: #fff; transition: all 0.3s; }
.indexServiceList li:hover .indexServiceTit i{ display: block; margin-top: 20px; }
.indexServiceList li:hover .indexServiceTit p{ color: #fff; position: absolute; left: 0px; bottom: 0px; padding: 10px; box-sizing: border-box; transition: all 0.3s; }

.indexServiceMore{ clear: both; display: block; text-align: center; }
.indexServiceMore a{ display: inline-block; height: 56px; line-height: 56px; margin: 0px auto; padding: 0px 70px; font-size: 14px; border-radius: 28px; color: #777; border: 1px solid #777; }
.indexServiceMore a:hover{ color: #fff; background: #1d2088; border-color: #1d2088; text-decoration: none; transition: all 0.3s; }


/* indexAd */
.indexAd{ clear: both; display: block; height: 135px; margin: 30px auto; background: url(../images/ad.jpg) center top no-repeat; }
.indexAdC{ clear: both; display: block; width: 1200px; height: 135px; line-height: 135px; margin: 0px auto; text-align: right; }
.indexAdC a{ padding: 15px 50px; background: #1d2088; color: #fff; font-size: 18px; border-radius: 0px 6px 0px 6px; box-shadow: 0px 0px 5px #333; }


/*  indexOther  */
.indexOther{ clear: both; display: block; width: 1200px; margin: 0px auto; }

.indexAbout{ float: left; display: block; width: 580px; }
.indexAboutTxt{ clear: both; display: block; font-size: 15px; line-height: 32px; color: #333; }
.indexAboutTxt p{ text-indent: 2em; text-align: justify; }




.indexNews{ float: right; display: block; width: 580px; }
.indexNewsList{ clear: both; display: block; }
.indexNewsList li{ clear: both; display: block; }
.indexNewsList li a{ clear: both; display: block; width: 100%; height: 38px; line-height: 38px; overflow: hidden; }
.indexNewsList li a p{ float: left; display: block; margin: 0px; padding: 0px; font-size: 14px; }
.indexNewsList li a span{ float: right; display: block; }
.indexNewsList li a:hover{ color: #1d2088; }






/* copy style */

.copyMenu{ clear: both; display: block; background:rgba(0,0,0,0.85); color: #fff;  padding: 30px 0px; margin-top: 30px; }
.copyMenu a{ color: #fff; }
.copyMenuC{ clear: both; display: block; width: 1200px; margin: 0px auto; }
.menuOne{ float: left; display: block; margin-right: 100px; }
.menuOne strong{ clear: both; display: block; font-size: 16px; height: 40px; line-height: 40px; }
.menuOne li{ clear: both; display: block; font-size: 13px; line-height: 30px; }
.menuOne li a{ color: #ccc; }
.menuOne li img{ border: 0px; clear: both; display: block; width: 100px; background: #fff; padding: 3px; }

.menuContact{ float: left; display: block; }
.menuContact strong{ clear: both; display: block; font-size: 16px; height: 40px; line-height: 40px; }
.menuContact li{ clear: both; display: block; font-size: 13px; line-height: 30px; }
.menuContact li i{ margin-right: 10px; }

.copyQrcode{ float: right; display: block; text-align: center; }
.copyQrcode p{ clear: both; display: block; margin: 0px; padding: 0px; }
.copyQrcode p img{ clear: both; display: block; border: 0px; width: 120px;}
.copyQrcode span{ clear: both; display: block; font-size: 12px; line-height: 30px; }


.copyright{ clear: both; display: block; background:rgba(0,0,0,0.8); color: #fff; padding: 30px 0px; font-size: 14px; line-height: 40px; }
.copyrightC{ clear: both; display: block; width: 1200px; margin: 0px auto; }
.copyText{ float: left; display: block; width: 500px; line-height: 25px; }
.copyText ul{ clear: both; display: flex; }
.copyText li{ display: flex; width: 50%; align-items: center; margin-bottom: 10px; font-size: 14px; }
.copyText li i{ font-size: 18px; margin-right: 10px; }

.copySupport{ float: right; display: block; width: 450px; text-align: right; line-height: 30px; }
.copyright a{ color: #fff; }
.copyright span{ clear: both; display: block; }



/* pageBanner */
.pageBanner{ clear: both; display: none; width: 100%; }
.pageBanner img{ border: 0px; width: 100%; }

.pageClassname{ clear: both; display: block; width: 100%; height: 350px; text-align: center; }
.pageClassname strong{ clear: both; display: block; font-size: 46px; height: 190px; line-height: 300px; overflow: hidden; text-shadow: 1px 1px 1px #fff; }
.pageClassname span{ clear: both; display: block; font-size: 20px; height: 100px; text-transform: uppercase; text-shadow: 1px 1px 1px #fff; }

.location{ clear: both; display: block; width: 100%; height: 80px; position: relative; }
.locationLeft{ /* width: 100%; */ height: 80px; position: absolute; left: 0px; top: 0px; text-align: center; }
.locationLeft strong{ font-size: 32px; color: #1d2088; }
.locationLeft span{ font-size: 24px; color: #666; text-transform: uppercase; }

.locationRight{ position: absolute; right: 0px; top: 0px; }
.pageurl{ clear: both; display: block; color: #666; font-size: 14px; }
.pageurl a{ color: #666; }


/* page_service_list */
.page_service_list{ clear: both; display: block; }
.page_service_list ul{ clear: both; display: block; }
.page_service_list ul li{ float: left; display: block; width: 285px; margin-right: 20px; margin-bottom: 20px; border-radius: 5px; overflow: hidden; text-align: center; transition: all 0.3s;}
.page_service_list ul li:nth-child(4n){ margin-right: 0px; }
.page_service_list ul li p{ clear: both; display: block; width: 100%; margin: 0px; padding: 0px; }
.page_service_list ul li p a{ clear: both; display: block; }
.page_service_list ul li p img{ clear: both; display: block; border: 0px; width: 100%; height: 205px; }
.page_service_list ul li span a{ clear: both; display: block; height: 60px; line-height: 60px; font-size: 16px; background: #e4e4e4; overflow: hidden; }
.page_service_list ul li:hover span a{ background: #1d2088; color: #fff; transition: all 0.3s; }


.subChannel{ clear: both; display: block; }
.subChannel ul{ clear: both; display: block; text-align: center; }
.subChannel ul a{ display: inline-block; height: 50px; line-height: 50px; padding: 0px 25px; background: #e3e3e3; font-size: 16px; margin-right: 15px; margin-bottom: 30px;}
.subChannel ul a:hover{ background: #1d2088; color: #fff; }
.subChannel ul a.cur{ background: #1d2088; color: #fff; }


.page_content{ clear: both; display: block; margin: 30px 0px; line-height: 35px; font-size: 16px; color: #333; }
.page_content i{ margin-right: 10px; }


/*  page_case_channel  */
.page_case_channel{ clear: both; display: block; }
.page_case_one{ float: left; display: block; width: 360px; height: 550px; overflow: hidden; background: #e7e7e7; margin-right: 40px; margin-bottom: 40px; }
.page_case_one:nth-child(3n){ margin-right: 0px; }

.page_case_pic{ clear: both; display: block; width: 100%; height: 260px; position: relative; background: #fff; }
.page_case_pic img{ clear: both; display: block; border: 0px; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; }
.page_case_pic span{ clear: both; display: block; position: absolute; width: 100%; height: 50px; line-height: 50px; font-size: 18px; color: #fff; left: 0px;  bottom: 0px; text-align: center; background: rgba(0,0,0,0.1); }

.page_case_news{ clear: both; display: block; padding: 25px 40px; }
.page_case_news li{ clear: both; display: block; }
.page_case_news li a{ clear: both; display: block; font-size: 15px; line-height: 30px; color: #1d2088; }



.page_case_list{ clear: both; display: block; }
.page_case_list ul{ clear: both; display: block; }
.page_case_list ul li{ float: left; display: block; width: 280px; margin-right: 30px; margin-bottom: 30px; background: #fff; box-shadow: 0px 0px 10px #ccc; border-radius: 6px; }
.page_case_list ul li:nth-child(3n){ margin-right: 0px; }
.page_case_list ul li p{ clear: both; display: block; width: 100%; height: 280px; margin: 0px; padding: 0px;  }
.page_case_list ul li p a{ clear: both; display: flex; width: 100%; height: 280px; margin: 0px; padding: 0px; justify-content: center; align-items: center; }
.page_case_list ul li p img{ border: 0px; clear: both; display: block; max-width: 100%; max-height: 100%; }
.page_case_list ul li span{ clear: both; display: block; padding: 20px; font-size: 16px; background: #f7f7f7; }



/* sub page left */
.left{ float: left; display: block; width: 250px; background: #fff; }
.leftTit{ clear: both; display: block; height: 60px; line-height: 60px; color: #fff; background:rgba(0,0,0,1); text-indent: 2em; font-size: 24px; }
.leftList{ clear: both; display: block; background: #e7e7e7; }
.leftList li{ clear: both; display: block; height: 48px; line-height: 48px; font-size: 14px; text-indent: 2em; transition: all 0.5s; border-bottom: 1px solid #fff;  }
.leftList li:hover a{ background: #1d2088; color: #fff; transition: all 0.3s; }
.leftList li a{ clear: both; display: block; width: 100%; font-size: 15px; text-indent: 3em; }
.leftList .cur a{ color: #fff; transition: all 0.3s; background: #1d2088; }



/* page list */

.page{ clear: both; display: block; padding-top: 10px; border-top: 1px solid #f7f7f7; }
.pageList{ clear: both; display: block; margin: 30px auto; width: 100%; text-align: center; }
.pageList a, .pageList b{ display: inline-block; margin-right: 10px; height: 40px; line-height: 40px; padding: 0px 17px; background: #f7f7f7; border: 1px solid #e3e3e3; font-size: 16px; }
.pageList b{ background: #1d2088; color: #FFF; }

/* sub page right */
.page_right{ float: right; display: block; width: 900px; }




/* news */

.page_news_list{ clear: both; display: block; }
.page_news_list ul{ clear: both; display: block; margin-bottom: 25px; }
.page_news_list li{ float: left; display: block; width: 590px; height: 180px; margin-right: 20px; transition: all 0.3s; padding: 15px; box-sizing: border-box; background: #f7f7f7; }
.page_news_list li:nth-child(2n){ margin-right: 0px; }
.page_news_list li:hover{ background: #f7f7f7; }
.page_news_pic{ float: left; display: block; width: 155px; height: 130px; overflow: hidden; }
.page_news_pic img{ border: 0px; clear: both; display: block; width: 100%; height: 130px; }

.page_news_txt{ float: right; display: block; width: 380px; }
.page_news_txt strong{ clear: both; display: block; height: 35px; line-height: 35px; font-size: 16px; font-weight: bold; overflow: hidden; margin-bottom: 5px; }
.page_news_txt p{ clear: both; display: block; margin: 0px; padding: 0px; font-size: 12px; color: #999;}
.page_news_txt span{ clear: both; display: block; text-align: right; font-size: 12px; }




.newsContent{ clear: both; display: block; margin: 20px; }
.pageTitle{ clear: both; display: block; text-align: center; line-height: 40px; font-size: 20px; font-weight: bold; margin-bottom: 15px; border-bottom: 1px solid #f7f7f7; padding-bottom: 20px; }
.pageInfo{ clear: both; display: block; height: 35px; line-height: 35px; text-align: center; font-size: 12px; color: #888; }
.pageText{ clear: both; display: block; margin: 40px 0px; }
.pageText img{ border: 0px; max-width: 100%; height: auto; }


.pageTxt{ clear: both; display: block; margin: 20px; font-size: 14px; line-height: 32px; }
.pageTxt h2{ clear: both; display: block; margin: 0px; padding: 0px; margin-bottom: -20px; }
.pageTxt img{ border: 0px; max-width: 100%; height: auto; }
.pageTxt p{ margin: 0px; padding: 0px; }



/* page product */
.page_pro_content{ clear: both; display: block; }
.page_pro_pic{ float: left; display: block; width: 360px; }
.page_pro_pic img{ border: 0px; clear: both; display: block; width: 360px; }

.page_pro_txt{ float: right; display: block; width: 520px; }
.page_pro_tit{ clear: both; display: block; font-size: 18px; font-weight: bold; color: #000; margin-bottom: 20px; }
.page_pro_smalltext{ clear: both; display: block; font-size: 15px; color: #444; line-height: 25px; }


.tabs-tit{ clear: both; display: block; border-bottom: 1px solid #e3e3e3; margin: 40px 0px 20px; }
.tabs-tit a{ display: inline-block; height: 50px; line-height: 50px; font-size: 16px; padding: 0px 30px;  background: linear-gradient(to bottom,#f1f1f1,#d1d1d1); cursor: pointer; }
.tabs-tit a.active{  background: linear-gradient(to bottom,#3dc0ff,#0196dd); color: #fff; }

.swiper-container-tab{ clear: both; display: block; width: 100%; overflow: hidden; font-size: 16px; }
.swiper-container-tab img{ border: 0px; max-width: 100%; height: auto; }


/* kefu list */
.kefuShow{ position: fixed; top: 180px; left: 0px; background:rgba(0,0,0,0.85); width: 24px; font-size: 16px; display: block; color:#FFF; border-radius: 0px 5px 5px 0px; cursor: pointer; text-align: center; padding: 10px 0px; z-index: 1000; box-shadow: 0px 0px 10px #666;}
.kefu{ display: none; position: fixed; z-index: 1000; top: 180px; left: 0px; background: #FFF; width: 150px; border: 4px solid #555; box-shadow: 0px 0px 10px #666; }
.kefuHeader{ clear: both; display: block; height: 121px; background: URL(../images/leftContact.jpg) center top no-repeat; }
.kefuHeader span{ float: right; width: 16px; height: 16px; line-height: 16px; background:rgba(0,0,0,0.85); color: #FFF; text-align: center; margin:-10px -8px 0px 0px; cursor: pointer; border-radius: 50%; border: 2px solid #fff; box-shadow: 0px 0px 10px #666;}
.kefuList{ clear: both; display: block; }
.kefuList li{ margin:10px 10px; height:28px; line-height: 28px; overflow: hidden;}
.kefuList li a{ clear: both; display: block; background:rgba(0,0,0,0.55); color: #FFF; border-radius: 10px; text-align: center; }
.kefuEwm{ clear: both; display: block; margin: 18px 10px 0px 10px; }
.kefuEwm img{ border: 0px; width: 100%; border-radius: 10px; }
.kefuF40{ clear: both; display: block; text-align: center; color: #F40; line-height: 20px; }