@charset "utf-8";
html{ min-width: 1200px; }
body{ margin:0px auto; padding:0px; font-size:12px; background:#FFF;line-height:25px; font-family: "microsoft Yahei",Verdana, Geneva, sans-serif; color:#333; }
ul,li{ margin:0px; padding:0px; list-style:none;}
a{ color:#333; text-decoration:none;}
a:hover{ text-decoration:underline;}


.top{ clear: both; display: block; width: 100%;}
.top img{ clear: both; display: block; border: 0px; width: 100%; }


.clear{ clear: both; display: block; }
.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; }


/*  menu style start */

.navbg{ clear:both; display:block; width:100%; background:#1a7edc; height: 87px; }
.muen_box { width: 100%; overflow: hidden; margin:0px auto;}


#wrap-nav .muen_box {overflow:visible; z-index: 99; text-transform: uppercase; }
#wrap-nav .menu{ clear: both; display: flex; justify-content: center; }

#wrap-nav .menu li {position: relative; flex: 1; display: inline; z-index:1000; }
#wrap-nav .menu li:last-child{ border-right: 0px;}
#wrap-nav .menu li a{ display:block; height:87px; line-height:87px; font-size:36px; color: #fff; text-align: center; }
#wrap-nav .menu li a:hover{ color: #ff8a00; text-decoration: none; transition: all 0.3s; }
#wrap-nav .menu .on{ color: #ff8a00; }
#wrap-nav .menu ul.children { display:none; width:600px; background: #e6f5fd; position:absolute; z-index:1000000; top:87px; left:20px; padding: 15px 0px; }

#wrap-nav .menu ul.children a{ margin: 0px 10px 10px; padding:0px; clear: both; display:block; height:23px; line-height:23px; overflow:hidden; text-align:center; font-weight: normal; color: #006ab9; transition: 0.3s all; font-size: 17px; text-align: left; padding-left: 15px; border-left: 2px solid #006ab9; }
#wrap-nav .menu ul.children a:hover{ border-bottom: none; text-decoration: none; color: #0030ff; background:#00c5ff; }
#wrap-nav .menu ul.children .noborder {border: none;}

/* index */
.indexTit{ clear: both; display: block; text-align: center; margin-top: 60px; }
.indexTit img{ border: 0px; display: block; margin: auto; }

.indexServiceTit{ clear: both; display: flex; flex-direction: column; font-size: 40px; align-items: center; justify-content: center; padding: 50px 0px; }
.indexServiceTit i{ display: flex; width: 5px; height: 50px; background:#1a7edc; margin-bottom: 20px; }


.indexAboutHonor{ clear: both; display: block; min-height: 620px; text-align: center; box-sizing: border-box; border-bottom: 5px solid #cbeffb; }
.indexAboutHonor img{ display: block; width: 100%; border: 0px; }



/* banner */
.swiper-container-banner { clear: both; display: block; width: 100%; height: auto; margin: 0px auto 40px; overflow: hidden; position: relative; border-bottom: 5px solid #cbeffb; }
.swiper-container-banner .swiper-slide{ clear: both; display: flex; width: 100%; height: auto; 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-slide img{ border: 0px; width: 100%; }
.swiper-pagination span{ width: 20px; height: 20px; margin: 0px 40px;   background: rgba(0,0,0,0.5);  }
.swiper-container-banner .swiper-pagination-bullet{ }

/* location */
.location{ clear: both; display: block; margin: 125px auto 30px; padding-bottom: 15px; border-bottom: 1px dashed #e3e3e3; }
.locationUrl{ float: left; display: block; height: 22px; line-height: 22px; font-size: 16px; font-weight: bold; border-left: 8px solid #1a7edc; padding-left: 10px; }
.locationTxt{ float: right; display: block; color:#fe940b; font-size: 13px; }



/* about */
.aboutContent{ clear: both; display: block; margin: 80px auto; }
.aboutTit{ clear: both; display: block; text-align: center; }
.aboutTit span{ clear: both; display: block; font-size: 32px; padding: 30px 0px; }
.aboutTit strong{ clear: both; display: block; font-size: 24px; color: #fc0000; }
.aboutTxt{ clear: both; display: block; margin-top: 70px; text-align: center; font-size: 16px; line-height: 40px; position: relative; }
.aboutTxtLineRed{ position: absolute; left: 0px; bottom: 170px; height: 40px; width: 40%; background: rgba(255,0,0,0.3); }
.aboutTxtLineBlue{ position: absolute; right: 0px; top: 190px; height: 40px; width: 40%; background: rgba(29,148,203,0.5); }

.aboutTxtC{ clear: both; display: block; width: 1200px; height: 780px; margin: 0px auto; position: relative; }
.aboutTxtL{ width: 730px; position: absolute; left: 0px; top: 0px; background:rgba(0,147,218,0.8);; color: #fff; padding: 80px; box-sizing: border-box; z-index: 500; }
.aboutTxtR{ width: 730px; position: absolute; right: 0px; bottom: 0px; z-index: 300; }
.aboutTxtR img{ width: 100%; border: 0px; display: block; }


.aboutNum{ clear: both; display: flex; width: 1200px; margin: 120px auto 0px; }
.aboutNum li{ display: flex; flex: 1; color: #505050; margin-left: 60px; }
.aboutNum li .n{ display: flex; font-size: 44px; font-weight: bold; align-items: center; margin-right: 15px; }
.aboutNum li .t{ display: flex; flex-direction: column; }
.aboutNum li .t strong{ clear: both; display: block; font-size: 25px; height: 18px; line-height: 18px; }
.aboutNum li .t span{ clear: both; display: block; font-size: 17px; }


.aboutHonor{ clear: both; display: block; min-height: 620px; padding: 45px; background: #bddaf5; text-align: center; box-sizing: border-box; }
.aboutHonor img{ border: 0px; }

.aboutOther{ clear: both; display: block; min-height: 600px; padding: 45px; text-align: center; box-sizing: border-box; }
.aboutOther img{ border: 0px; }


.aboutVideo{ clear: both; display: block; background:#e6e6e6; padding: 60px 0px; }
.aboutVideo .videoList{ width: 1200px; margin: 0px auto; }
.aboutVideo .videoList ul{ margin-bottom: 0px;}


/* service */
.serviceTit, .serviceTextTit, .serviceOtherTit, .serviceStepTit{ clear: both; display: flex; flex-direction: column; align-items: center; padding-top: 130px; }
.serviceTit i, .serviceTextTit i, .serviceOtherTit i, .serviceStepTit i{ width: 60px; height: 4px; overflow: hidden; margin-top: 20px; }


.serviceTit span{ color: #0d0d0d; font-size: 33px; padding: 20px 0px; }
.serviceTit strong{ color: #0871d3; font-size: 43px; padding: 20px 0px; }
.serviceTit i{ background: #0871d3; }


.serviceList{ clear: both; display: block; width: 1200px; margin: 0px auto; }
.serviceList li{ float: left; display: block; width: 280px; height: 320px; margin-right: 26.66px; background: #1a7edc; color: #fff; margin-top: 30px; margin-bottom: 40px; }
.serviceList li:nth-child(4n){ margin-right: 0px; }
.serviceList li a{ color: #FFF; font-size: 18px; }
.serviceList li p{ clear: both; display: block; margin: 0px; text-align: center; }
.serviceList li p a{ display: flex; width: 100%; height: 228px; text-align: center; }
.serviceList li p img{ border: 0px; display: block; width:128px; height: 125px; margin: auto; transition: all 0.3s;  }
.serviceList li span{ clear: both; display: block; text-align: center; padding: 0px 28px; }
.serviceList li:hover p img{ width: 150px; height: 148px; transition: all 0.3s; }



.serviceText{ clear: both; display: flex; width: 100%; flex-direction: column; align-items: center; height: 700px; background:#00194b URL(../images/serviceBg.jpg) center top no-repeat; color: #fff; }
.serviceTextTit span{ font-size: 34px; }
.serviceTextTit i{ background: #FFF; }
.serviceTextList{ display: flex; width: 100%; margin-top: 90px; }
.serviceTextList li{ display: flex; flex: 1; align-items: center; flex-direction: column; }
.serviceTextList li p{ clear: both; display: block; margin: 0px; padding: 30px 0px 0px 0px; text-align: center; box-sizing: border-box; width: 125px; height: 125px; background:#ffc600; overflow: hidden; border-radius: 50%; }
.serviceTextList li p img{ border: 0px; margin: auto; }
.serviceTextList li strong{ font-size: 32px; margin: 25px 0px; }
.serviceTextList li span{ display: flex; width: 100%;  justify-content: center; font-size: 18px; text-align: center; line-height: 35px; }



.serviceStep{ clear: both; display: flex; width: 100%; background: #1a7edc; color: #fff; flex-direction: column; }
.serviceStepTit{ display: flex; flex-direction: column; align-items: center; padding-top: 70px; }
.serviceStepTit span{ font-size: 40px; }
.serviceStepTit i{ background: #fff; }


.serviceStepList{ display: flex; width: 94%; margin: 70px auto 130px; }
.stepOne{ display: flex; flex: 1; flex-direction: column; align-items: center;  }
.stepNum{ display: flex; width: 86px; height: 86px; background:#1a7edc; border: 1px solid #fff; padding: 7px; border-radius: 50%; justify-content: center; align-items: center; box-sizing: border-box; }
.stepNum i{ display: flex; width: 100%; height: 100%; background:#fff; color:#1a7edc; font-size: 40px; border-radius: 50%; justify-content: center; align-items: center; }
.stepName{ clear: both; display: block; font-size: 25px; padding: 20px 0px; color: #FFF; }

.stepArr{ display: flex; width: 25px; font-size: 30px; font-weight: normal; padding-top: 27px; }



.serviceOther{ clear: both; display: block; width: 780px; margin: 0px auto 150px; text-align: center; }
.serviceOtherTit{ font-size: 27px; }
.serviceOtherTit i{ background:#1a7edc; }
.serviceOtherText{ clear: both; display: block; font-size: 18px; color: #505050; margin-top: 50px; line-height: 40px; }



/* video */
.videoList{ clear: both; display: block; }
.videoList ul{ margin-bottom: 50px; display: flex; width: 100%; }
.videoList li{ display: flex; width: 360px; flex-direction: column; height: 280px; margin-right: 60px; position: relative; overflow: hidden; }
.videoList li:last-child{ margin-right: 0px;}


.videoList li i{ position: absolute; left: 0px; top: 100%; display: flex; width: 100%; height: 280px; align-items: center; justify-content: center;  text-align: center; opacity: 0; z-index: 300; transition: all 0.3s;  }
.videoList li i a{ clear: both; display: flex; align-items: center; justify-content:center; width: 100%; height: 100%; background: rgba(26,126,220,0.8); font-size: 20px; color: #fff; text-decoration: none; }

.videoList li p{ display: block; margin: 0px; padding: 0px; width: 100%; height: 280px; overflow: hidden; z-index: 100; }
.videoList li p img{ border: 0px; clear: both; display: block; margin: auto; width: 100%; }
.videoList li span{ display: block; font-size: 16px; color: #fff; line-height: 30px; }


.videoList li:hover i{ top: 0px; opacity: 1; transition: all 0.3s; }


/* casesList */
.casesList{ clear: both; display: block; }
.casesList ul{ margin-bottom: 50px; display: flex; width: 100%; }
.casesList li{ display: flex;  width:360px; flex-direction: column; height: 280px; margin-right: 60px; position: relative; overflow: hidden; }
.casesList li:last-child{ margin-right: 0px;}


.casesList li i{ position: absolute; left: 0px; top: 100%; display: flex; width: 100%; height: 280px; align-items: center; justify-content: center;  text-align: center; opacity: 0; z-index: 300; transition: all 0.3s;  }
.casesList li i a{ clear: both; display: flex; align-items: center; justify-content:center; width: 100%; height: 100%; background: rgba(26,126,220,0.8); font-size: 20px; color: #fff; text-decoration: none; }

.casesList li p{ display: block; margin: 0px; padding: 0px; width: 100%; height: 280px; overflow: hidden; z-index: 100; }
.casesList li p img{ border: 0px; clear: both; display: block; margin: auto; width: 100%; }
.casesList li span{ display: block; font-size: 16px; color: #fff; line-height: 30px; }


.casesList li:hover i{ top: 0px; opacity: 1; transition: all 0.3s; }


/* contact */
.contactInfo{ clear: both; display: flex; justify-content:center; width: 100%; padding: 135px 0px; }
.contactInfo li{ display: flex; flex: 1; flex-direction: column; text-align:center; }
.contactInfo li p{ display: flex; width: 125px; height: 125px; border-radius: 50%; border: 1px solid #1a7edc;  margin: 0px auto 40px; box-sizing: border-box; justify-content: center; align-items: center; }
.contactInfo li p img{ display: block; margin: 0px auto; border: 0px; width: 65px; transition: all 0.3s; }
.contactInfo li:hover img{ width: 80px; }
.contactInfo li strong{ color: #ff8a00; font-size: 22px; margin-bottom: 15px; }
.contactInfo li span{ font-size: 22px; }


.contactText{ clear: both; display: block; text-align: center; }
.contactText strong{ font-size: 28px; color: #4c4d4d; }
.contactText p{ font-size: 22px; color:#403f3f; }


.contactQrcode{ clear: both; display: flex; width: 100%; margin-top: 50px; padding: 70px 0px 100px; background:#1a7edc; align-items: center; justify-content: center; color: #fff; }
.contactQrcode li{ display: flex; flex-direction: column; margin: 0px 15px; align-items: center; font-size: 14px; text-align: center; }
.contactQrcode li img{ border: 0px; clear: both; display:both; width: 150px; padding: 3px; background:#e3e3e3; }


.contactMap{ clear: both; display: block; width: 100%; }


#dituContent{ clear:both; display:block; width:100%; height:500px; font-size:14px; line-height:15px; }


/* copy style */
.copyRight{ clear: both; display: flex; width: 1200px; margin: 150px auto 50px; }

.copyLogo{ display: block; width: 140px; }
.copyLogo img{ border: 0px; width: 100%; height: auto; }


.copyContent{ display: flex; flex: 1; flex-direction: column; margin-left: 50px; font-size: 15px; line-height: 35px; }

.copyMenu{ display: flex; width: 100%; }
.copyMenu a{ margin-right: 15px; }

.copyText{ display: flex; width: 100%; margin-top: 20px; }


.copyQrcode{ display: flex; }
.copyQrcode li{ float: left; margin-left: 15px; text-align: center; }
.copyQrcode li:nth-child(1){ margin-left: 0px; }
.copyQrcode li strong{ clear: both; display: block; }
.copyQrcode li strong img{ border: 0px; clear: both; display: block; width: 115px; }
.copyQrcode li span{ clear: both; display: block; margin-top: 10px; line-height: 20px; }




/* page list style */

.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; font-size: 14px; }
.pageList a:last-child{ margin-right: 0px; }
.pageList a{ display: inline-block; margin-right: 10px; height: 35px; line-height: 35px; padding: 0px 10px; background: #f7f7f7; border: 1px solid #e3e3e3; }
.pageList b{ display: inline-block; margin-right: 10px; height: 35px; line-height: 35px; padding: 0px 14px; background:#1a7edc; color: #FFF; }


/* sub page content */
.pageTitle{ clear: both; display: block; text-align: center; line-height: 40px; font-size: 20px; font-weight: bold; margin-bottom: 15px; }
.pageInfo{ clear: both; display: block; height: 35px; line-height: 35px; text-align: center; border-bottom: 1px solid #f7f7f7; }
.pagePic{ clear: both; display: block; text-align: center; }
.pagePic img{ border: 0px; max-width: 100%; }


.pageText{ clear: both; display: block; margin: 40px 0px; font-size: 16px; line-height: 35px; }
.pageText img{ border: 0px; max-width: 100%; height: auto; }


.pageTxt{ clear: both; display: block; margin: 20px 0px; 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; }


.pageVideo{ clear: both; display: block; text-align: center; }
.pageVideo video{ background: rgba(0,0,0,0.2);}



/* kefu list */
.kefuShow{ display: none;  position: fixed; top: 300px; left: 0px; background:rgba(0,0,0,0.85); width: 24px; font-size: 16px;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: block; position: fixed; z-index: 1000; bottom: 100px; right: 0px; background: #f9f9f9; width: 90px; box-shadow: 0px 0px 10px #e3e3e3; }

.kefuLi{ clear: both; display: block; width: 100%; position: relative; cursor: pointer; transition: all 0.3s; }
.kefuLi:hover{ background: #f3f3f3; }

.kefuCon{ position: absolute; right: -400px; transition: all 0.3s; opacity: 1; border: 1px solid #fff; }
.kefuCon span{ display: block; width: 190px; height: 60px; line-height: 60px; text-align: center; background: #1a7edc;  color: #fff; font-size: 20px; }
.kefuCon img{ display: block; border: 0px; width: 150px; }

.kefuTxt{ clear: both; display: block; text-align: center; padding: 8px 0px; border-bottom: 1px solid #efefef; }
.kefuTxt p{ clear: both; display: block; margin: 0px; padding: 0px;  }
.kefuTxt p img{ clear: both; border: 0px; width: 42px; height: 42px; display: block; margin: 0px auto; }
.kefuTxt span{ font-size: 14px; }