@charset "utf-8";


@font-face { font-family: "shuhei"; src: url(http://upyun.yu377.com/AlimamaShuHeiTi-Bold.ttf); } /* font for logo and h2 */


body{ width: 100%; /* overflow-x: hidden; */ min-width: 1200px; margin:0px auto; padding:0px; font-size:14px; background:#FFF; color:#333; }
ul,li,ol{ list-style:none; margin:0px; padding:0px;}
a{ cursor: pointer; color:#333; text-decoration: none; }
a:hover{ cursor: pointer;  text-decoration:none;}

.loopAnimate{ animation-iteration-count:infinite; }

h2{ clear: both; display: block; text-align: center; margin: 0px auto; padding: 0px; color: rgba(46, 46, 46, 1); font-size: 50px; font-family: "shuhei";}
.clear{ clear: both; display: block;}


/* top ============== */
.header{ clear: both; display: flex; width: 100%; position: fixed; height:80px; z-index: 1000; background: rgba(255,255,255,0.9); backdrop-filter:blur(2px); align-content: center; }
.logo{ display: flex; align-content: center; margin: 0px 50px; flex-wrap: wrap; }
.logo a{ display: flex; align-content: center; font-family: "shuhei"; font-size: 40px; text-shadow: 1px 1px 1px #fff,1px 1px 1px #ccc; }


.menu{ display: flex; flex: 1; }
.diyMenu{ display: flex; flex: 1; align-items: center; justify-content: space-evenly;}
.diyMenu .fMenu{ float: left; display:block; text-decoration:none;position:relative; list-style:none; height: 40px; }
.diyMenu .fMenu a{ padding: 0px 10px; display: block; height: 40px; line-height: 40px; color: #000; font-size: 17px; transition: all 0.4s; }
.diyMenu .fMenu a:hover{ background: #155bd4; color: #fff; transition: all 0.4s; border-radius: 40px; }
.diyMenu .fMenu .on{ background: #155bd4; color: #fff; border-radius: 40px; }


.diyMenu .submenu{ display: none; position: absolute; opacity: 0; z-index: 3000; width: 100%; background: #fff; top: 55px; left: 0px; }
.diyMenu .submenu a{ clear: both; display: block; width: 100%; text-align: center; height: 40px; line-height: 40px; color: #000; border-bottom: 1px solid #f7f7f7; font-size: 12px; padding: 0; }

/* .diyMenu .fMenu:hover .submenu{ opacity: 1; } */



/* banner index */
.swiper-container-banner { clear: both; display: block; width: 100%; overflow: hidden; position: relative; background-color: #4091fd; background-image:linear-gradient(40deg, #00d3ff, #2492ff 40%, #2b85ff 36%, #4091fd); }
.swiper-container-banner .swiper-pagination-bullet{ width: 40px; height: 10px; overflow: hidden; border-radius: 0; background-color: #fff; }
.swiper-container-banner .swiper-slide{ clear: both; display: flex; width: 100%; height: auto; background-position: center; background-size: cover;}


.swiper-container-banner .swiper-slide-con{ width: 1200px; margin: 0px auto; padding: 180px 0px 70px 0px; display: flex; flex-direction: row-reverse; /*左右反顺序排列*/ justify-content: space-between; color:#fff; }

.swiper-container-banner .swiper-slide-left{ display: flex; flex: 1; flex-direction: column; }
.swiper-container-banner .slide-left-tit{ display: flex; align-items: baseline; font-size: 30px; font-family: "shuhei"; }
.swiper-container-banner .slide-left-tit strong{ font-size: 50px; margin-right: 20px; }
.swiper-container-banner .slide-left-txt{ display: flex; font-size: 22px; font-weight: lighter; flex-direction: column; line-height: 40px; margin: 30px 0px; }
.swiper-container-banner .slide-left-btn{ display: flex; }
.swiper-container-banner .slide-left-btn a{ display: flex; justify-content: center; align-items: center; font-size: 18px; height: 55px; padding: 0px 60px; color: #155bd4; background: #fff; transition: all 0.4s; }
.swiper-container-banner .slide-left-btn a:hover{ border-radius: 23px; transition: all 0.3s; }

.swiper-container-banner .swiper-slide-right{ display: flex; width: 600px; }
.swiper-container-banner .swiper-slide-right img{ border: 0; height: 350px;}


/* index service */
.index-service{ clear: both; display: flex; flex-direction: column;background: #fff; margin-bottom: 80px; }
.index-service-tit{ clear: both; display: block; padding: 100px 0px 40px 0px;}
/* .index-service-tit h2{ color: #155bd4; } */
.index-service-list{ clear: both; display: block; width: 1200px; margin: 0px auto; text-align: center; border-radius: 20px; overflow: hidden; box-shadow: 7px 7px 10px #f1f1f1; }
.index-service-list li{ float: left; display: flex; width: 25%; height: 240px; background: rgba(84, 142, 255, 0.1); }
.index-service-list li a{ clear: both; display: flex; flex-direction: column; width: 100%; height: 100%; transition: all 0.5s; border-right: 1px solid #fff; border-top: 1px solid #fff; }
.index-service-list li:nth-child(4n) a{ border-right: 0px;}

.index-service-icon{ display: flex; width: 100%; justify-content: center; align-items: center; }
.index-service-icon .icon{ width: 60px; color: #fff; transition: all 0.5s;  }
.index-service-classname{ font-size: 26px; transition: all 0.5s; }

.index-service-list li a:hover{ background: rgba(84, 142, 255, 0.8); }
.index-service-list li:hover .icon{ width: 90px; transition: all 0.5s; transform:rotate(20deg); }
.index-service-list li:hover .index-service-classname{ color: #fff; font-size: 32px;  transition: all 0.5s; }


/* index-team */
.index-team{ display: flex; width: 100%; flex-direction: column; padding: 70px 0px 100px; background: rgb(21, 91, 212, 0.9); }
.index-team-tit{ display: flex; text-shadow: 1px 1px 1px #000; }
.index-team-tit h2{ color: #fff;}
.index-team-txt{ display: flex; justify-content: center; font-size: 18px; margin: 20px 0px 40px; color: #fff;}

.index-team-num{ display: flex; justify-content: space-between; padding: 60px 100px; }
.index-team-num-one{ display: flex; flex-direction: column; border-right: 1px solid #e3e3e3; padding-right: 35px; }
.index-team-num-one:last-child{ border-right: 0px;}
.index-team-num-one-n{ clear: both; display: flex; font-size: 40px;}
.index-team-num-one-n strong{}
.index-team-num-one-n span{ font-weight: lighter; font-size: 28px; margin-left: 6px;}
.index-team-num-one-t{ clear: both; display: block; font-size: 24px; font-weight: lighter;}

.index-team-con{ clear: both; display: block; width: 1200px; margin: 0px auto; padding: 50px; box-sizing: border-box; background: #fff; box-shadow: 0px 0px 15px #e3e3e3; border-radius: 20px; }

.index-team-list{ clear: both; display: flex; flex-direction: column; margin: 0px 50px;}
.index-team-one{ display: flex; width: 100%; margin-bottom: 30px; }
.index-team-one:hover .icon{ transform:rotate(30deg);}
.index-team-li{ display: flex; flex: 1; margin-right: 50px; flex-direction: column;}
.index-team-li-tit{ display: flex; font-size: 30px; color: rgb(21, 91, 212, 1);}
.index-team-li-txt{ display: flex; font-size: 16px; margin-top: 10px;}
.index-team-icon{ display: flex; width: 120px; }
.index-team-icon .icon{ width: 100px; transition: all 0.5s;  }





/* footer contact */
.footContact-con{ clear: both; display: flex; width: 100%; padding: 70px 0px; flex-direction: column; background-color: rgb(21, 91, 212, 0.8); background-image: url(../images/foot-contact-bg.png); background-size:cover; background-repeat: no-repeat; justify-content: center; align-items: center; }
.footContact-con-tit{ display: flex; text-shadow: 1px 1px 1px #000; }
.footContact-con-tit h2{ color: #fff; }
.footContact-con-txt{ display: flex; font-size: 18px; color: #fff; margin: 20px 0px 40px;}
.footContact-con-btn{ display: flex; }
.footContact-con-btn a{ display: flex; height: 60px; margin: 0 25px; padding: 0px 80px; justify-content: center; align-items: center; font-size: 22px; color:rgba(64, 128, 255, 1); background:  rgba(255, 255, 255, 0.7); border: 1px solid #fff; transition: all 0.5s;}
.footContact-con-btn a:hover{ background: rgba(255, 255, 255, 1); border-radius: 30px; }
.footContact-con-btn a:last-child{ background: rgba(64, 128, 255, 0); color: #fff; }
.footContact-con-btn a:last-child:hover{ background: rgba(64, 128, 255, 0.7); transition: all 0.5s; }

/* index news */
.index-news{ clear: both; display: flex; padding: 100px 0px; flex-direction: column; background: url(../images/index-news-bg.jpg);  background-size:cover; background-repeat: no-repeat; }
.index-news-tit{ display: flex; }
.index-news-con{ display: flex; width: 1200px; margin: 50px auto 0px; }
.index-news-one{ display: flex; flex-direction: column; background: #fff; margin-right: 22px; overflow: hidden; border-radius: 10px; }
.index-news-one:last-child{ margin-right: 0px;}
.index-news-class{ clear: both; display: block; height: 60px; line-height: 60px; font-weight: bold; text-indent: 1em; font-size: 20px; color: #fff; background-image: url(../images/foot-contact-bg.png); background-size: cover; }
.index-news-list{ clear: both; display: block; padding: 20px;}
.index-news-list-new{ clear: both; display: block; margin-bottom: 15px; border-bottom: 1px solid #f7f7f7; }
.index-news-list-new a{ clear: both; display: block; }
.index-news-list-new a:hover strong{ text-decoration: underline;}
.index-news-list-new a strong{ float: left; width: 315px; display: inline-block; font-size: 18px; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-news-list-new a span{ float: right; margin-top: 5px; width: 30px; display: inline-block; width: 30px; height: 14px; line-height: 14px; background: rgba(64, 128, 255, 1); border-radius: 0px 5px 0px 5px; color: #fff; font-size: 12px; font-weight: lighter; overflow: hidden; text-align: center;}
.index-news-list-new p{ clear: both; display: block; font-weight: lighter; height: 80px; line-height: 26px; overflow: hidden;}

.index-news-list li{ display: flex; height: 40px; justify-content: center;}
.index-news-list li span{ display: inline-block; width: 60px; color: #333; font-weight: lighter; }
.index-news-list li a{ display: block; flex: 1;  overflow: hidden; text-overflow: ellipsis; white-space:nowrap; font-size: 16px; }
.index-news-list li:hover a{ text-decoration: underline;}


/* cooperation */
.cooper-con{ clear: both; display: block; padding: 100px 0px 150px 0px; background: rgba(64,128,255,.05)!important; }

.cooper-con-tit{ clear: both; display: block; text-align: center; }

.cooper-con-list{ clear: both; display: block; width: 1200px; margin: 0px auto; margin-top: 50px; }
.cooper-con-list li{ float: left; display: block; width: 215px; margin-right: 29px; margin-top: 20px; background: #fff; box-shadow: 0px 1px 1px #ccc;}
.cooper-con-list li:nth-child(5n){ margin-right: 0px;}

.cooper-con-list li img{ clear: both; display: block; border: 0px; width: 100%; height: 95px; }

/* ======================= mini */
.swiper-container-mini { clear: both; display: block; width: 100%; overflow: hidden; position: relative; background-position: center; background-size: cover; background-image: url(../images/banner-mini1.jpg); }
.swiper-container-mini .swiper-pagination-bullet{ width: 40px; height: 10px; overflow: hidden; border-radius: 0; background-color: #fff; }
.swiper-container-mini .swiper-slide{ clear: both; display: flex; width: 100%; height: auto;  background-position: center; background-size: cover;}
.swiper-container-mini .swiper-slide-con{ width: 1200px; margin: 0px auto; padding: 130px 0px 70px; display: flex; align-items: center; justify-content: center; flex-direction: column;  }


.swiper-container-mini .slide-tit{ display: flex; align-items: flex-end; font-size: 50px; font-family: "shuhei"; color: #fff; }
.swiper-container-mini .slide-tit strong{ margin-right: 20px; }
.swiper-container-mini .slide-txt { font-size: 24px; color: #fff; padding-top: 20px; font-weight: lighter; }
.swiper-container-mini .slide-li{ display: flex; font-size: 22px; line-height: 40px; padding: 40px 0px; }
.swiper-container-mini .slide-li li{ margin: 0px 15px; color: #fff; }
.swiper-container-mini .slide-btn{ display: flex; }
.swiper-container-mini .slide-btn a{ display: flex; justify-content: center; align-items: center; font-size: 18px; height: 55px; padding: 0px 60px; color: #155bd4; background: #fff; transition: all 0.4s; }
.swiper-container-mini .slide-btn a:hover{ background: #155bd4; color: #fff; border-radius: 23px; transition: all 0.3s; }


/* mini */
.mini-youdian{ clear: both; display: block; width: 100%; padding: 80px 0px;}
.mini-youdian-con{ clear: both; display: block; width: 1200px; margin: 0px auto;}
.mini-youdian-con-list{ clear: both; display: flex; justify-content: space-between; width: 100%; height: 400px; margin: 70px 0px; }
.mini-youdian-con-list li strong{ font-size: 24px;}
.mini-youdian-con-list li p{ clear: both; display: block; margin: 0px; padding: 0px; height: 35px; line-height: 35px; font-size: 18px; font-weight: lighter; color: #000;}
.mini-youdian-con-list-left, .mini-youdian-con-list-right{ display: flex; flex: 1; flex-direction: column; justify-content: space-between; }
.mini-youdian-con-list-left li{ text-align: right; }
.mini-youdian-con-list-icon{ width: 430px; margin: 0px 70px; }
.mini-youdian-con-list-icon img{ border: 0; clear: both; display: block; width: 100%;}


/* web ===================== */
.swiper-container-web { clear: both; display: block; width: 100%; overflow: hidden; position: relative; background-color: #e1e9f9; }
.swiper-container-web .swiper-pagination-bullet{ width: 40px; height: 10px; overflow: hidden; border-radius: 0; background-color: #fff; }
.swiper-container-web .swiper-slide{ clear: both; display: flex; width: 100%; height: auto; background-position: center; background-size: cover;}
.swiper-container-web .swiper-slide-con{ width: 1200px; height: 600px; margin: 0px auto; display: flex; justify-content: center; flex-direction: column;  }

.swiper-container-web .slide-tit{ display: flex; align-items: flex-end; font-size: 50px; font-family: "shuhei"; color: #fff;  }
.swiper-container-web .slide-li{ display: flex; flex-direction: column; font-size: 18px; line-height: 40px; margin: 20px 0px;}
.swiper-container-web .slide-li li{ color: #fff; }
.swiper-container-web .slide-btn{ display: flex; }
.swiper-container-web .slide-btn a{ display: flex; justify-content: center; align-items: center; font-size: 18px; height: 55px; padding: 0px 60px; color: #155bd4; background: #fff; transition: all 0.4s; }
.swiper-container-web .slide-btn a:hover{ background: #155bd4; color: #fff; border-radius: 23px; transition: all 0.3s; }


.web-list{ clear: both; display: flex; flex-direction: column; width: 1200px; margin: 0px auto; padding: 80px 0px;}
.web-list-tit{ clear: both; display: block; margin-bottom: 70px;}

.web-one{ display: flex; width: 100%; justify-content: space-around;}
.web-pic{ width: 550px; border: 0px; display: inline-block;}
.web-pic img{ border: 0px; width: 100%; display: inline-block;}

.web-txt{ display: flex; flex-direction: column; justify-content: center; }
.web-txt strong{ display: flex; font-size: 24px; margin-bottom: 30px;}
.web-txt p{ clear: both; display: block; margin: 0px; padding: 0px; height: 35px; line-height: 35px; font-size: 18px; font-weight: lighter; color: #000;}

.web-one:nth-child(3){ flex-direction: row-reverse;}




/* youdian */
.web-youdian{ clear: both; display: block; width: 100%; padding: 80px 0px; background-image: url(../images/hangyeBg.png); background-size: cover; flex-direction: column; padding: 80px 0px;}
.web-youdian-tit{ display: flex; }

.web-youdian-con{ clear: both; display: block; width: 1200px; margin: 0px auto;}

.web-youdian-con-list{ clear: both; display: block; width: 1200px; margin: 70px auto 40px;}
.web-youdian-con-list li{ float: left; display: flex; width: 280px; margin-right: 26px; flex-direction: column; text-align: center; margin-bottom: 25px; cursor: pointer;}
.web-youdian-con-list li:nth-child(4n){ margin-right: 0px;}
.web-youdian-con-list li p{ clear: both; display: flex; justify-content: center; align-items: center; width: 100%; height: 280px; margin: 0px; padding: 0px; background: #fff; border-radius: 8px; transition: all 0.5s;}
.web-youdian-con-list li p .icon{ width: 140px; color: #fff; transition: all 0.5s;  }
.web-youdian-con-list li strong{ height: 45px; line-height: 45px; font-size: 20px; margin: 10px 0px;}
.web-youdian-con-list li span{ display: flex; font-size: 16px; line-height: 30px; color: #888; }
.web-youdian-con-list li:hover .icon{ width: 160px; transition: all 0.5s; }




.gotoTel{ clear: both; display: block; width: 100%; text-align: center;}
.gotoTel a{ display: inline-block;  font-size: 18px; height: 55px; line-height: 55px; padding: 0px 60px; background: #155bd4; color: #fff; transition: all 0.4s;}
.gotoTel a:hover{ border-radius: 15px; transition: all 0.4s; }
.gotoTel span{ display: block; clear: both; font-size: 18px; padding-top: 15px;}


/*  hangye */
.hangye{ display: flex; width: 100%; background-color: #f0f4f8; background-image: url(../images/hangyeBg.png); background-size: cover; flex-direction: column; padding: 80px 0px;}
.hangye-tit{ display: flex; }
.hangye-list{ clear: both; display: block; width: 1200px; margin: 70px auto 40px;}
.hangye-list li{ float: left; display: flex; width: 132.5px; margin-right: 20px; flex-direction: column; text-align: center; margin-bottom: 25px; cursor: pointer;}
.hangye-list li:nth-child(8n){ margin-right: 0px;}
.hangye-list li p{ clear: both; display: flex; justify-content: center; align-items: center; width: 100%; height: 132.5px; margin: 0px; padding: 0px; background: #fff; border-radius: 8px; transition: all 0.5s;}
.hangye-list li p .icon{ width: 60px; color: #fff; transition: all 0.5s;  }
.hangye-list li span{ height: 35px; line-height: 35px; font-size: 18px;}

.hangye-list li:hover .icon{ width: 80px; transition: all 0.5s; transform: rotate(20deg); }
.hangye-list li:hover p{ box-shadow: 0px 0px 15px #ccc; transition: all 0.5s; }


/* mp ==================== */
.swiper-container-mp { clear: both; display: block; width: 100%; overflow: hidden; position: relative; background-color: #e1e9f9;  background-position: center; background-size: cover; background-image: url(../images/banner-mp1.jpg); box-shadow: 0px 0px 10px #e3e3e3; }
.swiper-container-mp .swiper-pagination-bullet{ width: 40px; height: 10px; overflow: hidden; border-radius: 0; background-color: #fff; }
.swiper-container-mp .swiper-slide{ clear: both; display: flex; width: 100%; height: auto;  background-position: center; background-size: cover;}
.swiper-container-mp .swiper-slide-con{ width: 1200px; margin: 0px auto; padding: 150px 0px 20px; display: flex; align-items: flex-start; flex-direction: column; }



.swiper-container-mp .slide-tit{ display: flex; align-items: flex-end; font-size: 50px; font-family: "shuhei"; }
.swiper-container-mp .slide-tit strong{ margin-right: 20px; }
.swiper-container-mp .slide-li{ display: flex; font-size: 22px; line-height: 40px; padding: 40px 0px; }
.swiper-container-mp .slide-li li{ margin-right: 15px; }


.swiper-container-mp .slide-btn{ display: flex; margin-bottom: 100px; }
.swiper-container-mp .slide-btn a{ display: flex; justify-content: center; align-items: center; font-size: 18px; height: 55px; padding: 0px 60px; color: #fff; background: #155bd4; transition: all 0.4s; }
.swiper-container-mp .slide-btn a:hover{ border-radius: 23px; transition: all 0.3s; }

/* mp-youdian */
.mp-youdian{ clear: both; display: block; width: 100%; padding: 80px 0px;}
.mp-youdian-con{ clear: both; display: block; width: 1200px; margin: 0px auto;}
.mp-youdian-con-list{ clear: both; display: flex; justify-content: space-between; width: 100%; height: 400px; margin: 70px 0px; background-image: url(../images/mp-good.png); background-position: center; background-repeat: no-repeat; background-size: contain; }
.mp-youdian-con-list li strong{ font-size: 24px;}
.mp-youdian-con-list li p{ clear: both; display: block; margin: 0px; padding: 0px; height: 35px; line-height: 35px; font-size: 18px; font-weight: lighter; color: #000;}
.mp-youdian-con-list-left, .mp-youdian-con-list-right{ display: flex; flex: 1; flex-direction: column; justify-content: space-between; }
.mp-youdian-con-list-left li{ text-align: right; }
.mp-youdian-con-list-icon{ width: 650px; /* margin: 0px 100px; */}
.mp-youdian-con-list-icon img{ border: 0; clear: both; display: block; width: 100%; opacity: 0;}

/* mp-cate  */
.mp-cate{ clear: both; display: block; padding: 80px 0px; background: #f7f7f7;}
.mp-cae-list{ clear: both; display: block; width: 1200px; margin: 50px auto; }
.mp-cae-list li{ float: left; display: block; width: 285px; margin-right: 20px; padding: 50px 0px; transition: all 0.5s; text-align: center;}
.mp-cae-list li:hover{ box-shadow: 0px 0px 20px rgba(84, 142, 255, 0.3); transition: all 0.5s; }

.mp-cae-list li:nth-child(4){ margin-right: 0;}

.mp-cate-list-pic{ clear: both; display: block; }
.mp-cate-list-pic .icon{ width: 110px; transition: all 0.5s; }
.mp-cae-list li:hover .icon{ width: 130px; transition: all 0.5s;}

.mp-cate-list-tit{ clear: both; display: block; font-weight: bold; font-size: 20px;}
.mp-cate-list-txt{ clear: both; display: block; padding: 0px 15px; margin: 15px 0px; line-height: 25px; color: #888;}

/* mp good */
.mp-good{ clear: both; display: block; background-image: url(../images/mp-good.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 0px 100px;}
.mp-good-tit h2{ color: #fff;}
.mp-good-tit h2 strong{ color: #155bd4; font-size: 70px; margin: 0px 10px; text-shadow: 1px 1px 1px #fff;}

.mp-good-list{ clear: both; display: block; width: 1200px; margin: 50px auto;}
.mp-good-list ul{ display: flex; width: 100%; margin-top: 20px;}
.mp-good-list ul li{ display: flex; flex: 1; margin-right: 20px; background-color: #3b4057; color: #fff; justify-content: center; align-items: center;}
.mp-good-list ul li:last-child{ margin-right: 0px;}
.mp-good-list ul li .icon{ width: 60px; transition: all 0.5s;  }
.mp-good-list ul li strong{ display: flex; font-size: 22px; margin-left: 20px;}
.mp-good-list ul li:hover{ cursor: pointer; }
.mp-good-list ul li:hover .icon{ width: 70px; transition: all 0.5s;}

.mp-good .showTel{ color: #fff;}

/* mp service */
.mp-service{ clear: both; display: block; padding: 80px 0px;}
.mp-service-tit{ clear: both; display: block; }
.mp-service-list{ clear: both; display: block; width: 1200px; margin: 60px auto; }
.mp-service-list ul{ clear: both; display: block; }
.mp-service-list ul li{ float: left; display: flex; flex-direction: column; width: 285px; height: 150px; margin-top: 20px; margin-right: 20px; background:rgba(84, 142, 255, 0.1); transition: all 0.5s; text-align: center;}
.mp-service-list ul li strong{ display: flex; justify-content: center; align-items: center; height: 70px; font-size: 24px; font-weight: normal;}
.mp-service-list ul li p{ display: flex; padding: 0px 35px; justify-content: center; font-size: 16px; color: #999;}
.mp-service-list ul li:hover{ cursor: pointer; background: #fff; transition: all 0.5s;  box-shadow: 0px 0px 20px rgba(84, 142, 255, 0.3); }
.mp-service-list ul li:nth-child(4n){ margin-right: 0px;}


/* app ========================= */
.swiper-container-app { clear: both; display: block; width: 100%; overflow: hidden; position: relative; background-position: center; background-size: cover; background-image: url(../images/banner-app1.jpg);}
.swiper-container-app .swiper-pagination-bullet{ width: 40px; height: 10px; overflow: hidden; border-radius: 0; background-color: #fff; }
.swiper-container-app .swiper-slide{ clear: both; display: flex; width: 100%; height: auto; background-color: rgba(0,0,0,0.4); }
.swiper-container-app .swiper-slide-con{ width: 1200px; height: 540px; margin: 0px auto; display: flex; align-items: center; justify-content: flex-end; flex-direction: column;  }


.swiper-container-app .slide-tit{ display: flex; align-items: flex-end; font-size: 50px; font-family: "shuhei"; color: #fff; }
.swiper-container-app .slide-tit strong{ margin-right: 20px; }
.swiper-container-app .slide-txt { font-size: 24px; color: #fff; padding-top: 20px; font-weight: lighter; }
.swiper-container-app .slide-li{ display: flex; font-size: 22px; line-height: 40px; padding: 40px 0px; }
.swiper-container-app .slide-li li{ margin: 0px 15px; color: #fff; }


.swiper-container-app .slide-btn{ display: flex; margin-bottom: 100px; }
.swiper-container-app .slide-btn a{ display: flex; justify-content: center; align-items: center; font-size: 18px; height: 55px; padding: 0px 60px; color: #fff; background: #155bd4; transition: all 0.4s; }
.swiper-container-app .slide-btn a:hover{ border-radius: 23px; transition: all 0.3s; }




/* app service */
.app-service{ clear: both; display:block; padding: 80px 0px; }
.app-service-tit{ clear: both; display:block; text-align: center; }
.app-service-tit p{ clear: both; display: block; font-size: 16px; margin: 0px; padding: 30px 250px; }


.app-service-list{ clear: both; display: block; width: 1200px; margin: 50px auto; }
.app-service-list li{ float: left; display: block; width: 285px; margin-right: 20px; padding: 50px 0px; transition: all 0.5s; text-align: center;}
.app-service-list li:hover{ cursor: pointer; box-shadow: 0px 0px 20px rgba(84, 142, 255, 0.3); transition: all 0.5s; }

.app-service-list li:nth-child(4){ margin-right: 0;}

.app-service-list-pic{ clear: both; display: block; }
.app-service-list-pic .icon{ width: 110px; transition: all 0.5s; }
.mp-cae-list li:hover .icon{ width: 130px; transition: all 0.5s;}

.app-service-list-tit{ clear: both; display: block; font-weight: bold; font-size: 20px;}
.app-service-list-txt{ clear: both; display: block; padding: 0px 15px; margin: 15px 0px; line-height: 25px; color: #888;}


/* app step */
.app-step{ clear: both; display: block; background-image: url(../images/mp-good.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 0px 100px;}
.app-step-tit h2{ color: #fff;}
.app-step-tit h2 strong{ color: #155bd4; font-size: 70px; margin: 0px 10px; text-shadow: 1px 1px 1px #fff;}

.app-step-list{ clear: both; display: block; width: 1200px; margin: 50px auto;}
.app-step-list ul{ display: flex; width: 100%; margin-top: 20px;}
.app-step-list ul li{ display: flex; flex-direction: column; padding: 20px; margin-right: 20px; background-color: #3b4057; color: #fff; justify-content: center; transition: all 0.5s; }
.app-step-list ul li:last-child{ margin-right: 0px;}
.app-step-list ul li .app-step-list-tit{ clear: both; display: flex; margin-bottom: 15px; }
.app-step-list ul li .app-step-list-tit span{ display: flex; font-size: 20px; background:#155bd4; width: 30px; height: 30px; color: #fff; justify-content: center; align-items: center; }
.app-step-list ul li .app-step-list-tit strong{ display: flex; margin-left: 15px; font-size: 24px; color: #fff; }
.app-step-list ul li .app-step-list-txt{ clear: both; display: block; font-size: 16px; }

.app-step-list ul li:hover{ cursor: pointer; padding: 20px 30px; transition: all 0.5s; }



.app-step .showTel{ color: #fff;}

/* app hangye */
.app-hangye{ clear: both; display: block; padding: 80px 0px;}
.app-hangye-tit{ clear: both; display: block; }
.app-hangye-list{ clear: both; display: block; width: 1200px; margin: 60px auto; }
.app-hangye-list ul{ clear: both; display: block; }
.app-hangye-list ul li{ float: left; display: flex; flex-direction: column; width: 285px; height: 150px; margin-top: 20px; margin-right: 20px; background:rgba(84, 142, 255, 0.1); transition: all 0.5s; text-align: center;}
.app-hangye-list ul li strong{ display: flex; justify-content: center; align-items: center; height: 70px; font-size: 24px; font-weight: normal;}
.app-hangye-list ul li p{ display: flex; padding: 0px 35px; justify-content: center; font-size: 16px; color: #999;}
.app-hangye-list ul li:hover{ cursor: pointer; background: #fff; transition: all 0.5s;  box-shadow: 0px 0px 20px rgba(84, 142, 255, 0.3); }
.app-hangye-list ul li:nth-child(4n){ margin-right: 0px;}


/* news ======================== */
.index-c{ clear: both; display: block;  margin: 0px auto 0px; padding: 120px 66px 0px;}
.news-list{ clear: both; display: block; }
.news-list li{ clear: both; display: flex; padding: 50px 0px; border-bottom: 1px solid #e3e3e3; }
.news-list-txt{ display: flex; flex: 1; flex-direction: column; margin-right: 50px; }
.news-list-tit{ clear: both; display: block; font-size: 26px; font-weight: bold;}
.news-list-text{ clear: both; display: block; font-size: 18px; color: #999; margin: 50px 0px;}
.news-list-time{ clear: both; display: block; font-size: 18px; color: #ccc;}

.news-list-pic{ display: flex; width: 350px;}
.news-list-pic img{ border: 0px; width: 350px; height: 260px;}



.news-page{ clear: both; display: block; margin: 0px auto;}
.news-page-tit{ clear: both; display: block; font-size: 26px; font-weight: bold; margin-bottom: 20px;}
.news-page-txt{ clear: both; display: block; margin-bottom: 40px; font-weight: lighter;}
.news-page-txt span{ margin-right: 20px;}
.news-page-con{ clear: both; display: block; font-size: 16px; line-height: 33px;}
.news-page-con img{ border: 0px; max-width: 100%; height: auto;}


.news-page-shengming{ clear: both; display: block; margin: 40px auto; font-size: 12px; font-weight: lighter;}

.pageNext{ clear: both; display: block; margin: 0px auto; font-size: 18px; padding-bottom: 80px;}
.pageNext .prep{ float: left; display: block;}
.pageNext .nextp{ float: right; display: block;}





.url-nav{ clear: both; display: block; margin-bottom: 50px; padding-bottom: 20px; border-bottom: 1px solid #e3e3e3; font-size: 14px; }
.url-nav a{ color: #155bd4;}


/*  copyright */
.copyright{ display: flex; background: #17181b; padding: 80px 0px; }
.copyrightC{ display: flex; width: 1200px; margin: 0px auto; color: #808080;}
.copyrightC a{ color: #808080;}
.copy-contact{ display: flex; flex: 1; flex-direction: column; justify-content: flex-start; align-items: flex-start; font-size: 15px; }
.copy-sitename{ display: flex; flex: 1; color: #ccc; margin-bottom: 15px;}
.copy-sitename span{ margin-right: 8px;}
.copy-contact li{ display: flex; width: 100%; justify-content: flex-start; font-size: 15px; height: 30px; }
.copy-contact li a{ display: flex; align-items: center; margin-right: 20px; }
.copy-contact li a img{ border: 0px; height: 17px; }


.copy-qrcode{ display: flex; justify-content: space-between; width: 250px;}
.copy-qrcode div{ display: flex; flex-direction: column; text-align: center;}
.copy-qrcode div p{ margin: 0px; padding: 0px;}
.copy-qrcode div span{ display: flex; justify-content: center; align-items: flex-end; margin-top: 10px; }
.copy-qrcode div img{ clear: both; display: block; border: 1px solid #e3e3e3; border-radius: 8px; width: 105px;}






/* page list */
.pageList{ clear: both; display: block; margin: 80px 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: #155bd4; color: #FFF; }
.pageList span{ margin-right: 10px;}

.page_list_pre{ clear: both; display: block; margin: 30px; padding-top: 20px; border-top: 1px solid #e3e3e3; width: 100%; line-height: 25px; font-size: 14px;  }


/*  right fixed kefu  */
.fixKefu{ position: fixed; right: 0; top: 50%; margin-top: -120px; width: 80px; z-index: 100; }
.kefu-list{ clear: both; display: flex; flex-direction: column; background: #fff; box-shadow: 0px 0px 5px #ccc; }
.kefu-list li{ clear: both; display: block; width: 100%; height: 80px;  position: relative; border-bottom: 1px solid #e3e3e3;}
.kefu-list li:hover{ background: #f7f7f7; transition: all 0.5s; cursor: pointer;}
.kefu-list-li-con{ clear: both; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; background: #fff; z-index: 300; }
.kefu-list-li-con:hover .icon{ transform:rotate(20deg);}
.kefu-list-li-con p{ clear: both; display: block; margin: 0px; padding: 0px;;}
.kefu-list-li-con p .icon{ width: 40px; height: 40px; color: #fff; transition: all 0.5s;  }

.kefu-list li:hover .kefu-list-li-pic{ transition: all 0.5s; right: 80px; top: 0px; }
.kefu-list-li-pic{ clear: both; display: block; position: absolute; right: -280px; bottom: 0px; width: 160px; text-align: center; z-index: 100; }
.kefu-list-li-pic img{ border: 0px; width: 100%; clear: both; display: block;}
.kefu-list-li-pic span{ clear: both; display: block; background: #155bd4; color: #fff; width: 100%; padding: 15px 0px; font-size: 18px;}


/* middle kefu */
.showKefu{ display: flex; position: fixed; top: -2000px; left: 0px; z-index: 1500; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); justify-content: center; align-items: center; transition: all 0.5s;}

.kefu-con{ position: relative; width: 850px; padding: 40px 20px; box-sizing: border-box; background-color:#fff; box-shadow: 0px 0px 20px #333; display: flex; }

.closeKefu{ position: absolute; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; right: -20px; top: -20px; border-radius: 20px; overflow: hidden; background: #155bd4; color: #fff; font-size: 24px; box-shadow: 0px 0px 10px #333; transition: all 0.3s;}
.closeKefu:hover{ cursor: pointer; box-shadow: 0px 0px 20px #000; transition: all 0.3s; transform:rotate(180deg);}

.kefu-con-tit{ display: flex; width: 100%; font-size: 26px; font-weight: bold; color: #155bd4; margin-bottom: 20px;}

.kefu-con-l{ display: flex; flex-direction: column; width: 350px; padding-right: 50px; margin-right: 50px; border-right: 1px solid #e3e3e3;}
.kefu-con-l-iframe{ display: flex;}

.kefu-con-r{ display: flex; flex-direction: column; flex: 1; font-size: 18px;}
.kefu-con-r-li{ clear: both; display: block;}
.kefu-con-r-li li{ clear: both; display: block; line-height: 40px; }
.kefu-con-r-qrcode{ clear: both; display: flex; margin-top: 20px; }
.kefu-con-r-qrcode div{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 20px; }
.kefu-con-r-qrcode div p{ clear: both; display: flex; margin: 0px; padding: 0px; }
.kefu-con-r-qrcode div img{ border: 0px; width: 150px; border: 1px solid #e3e3e3; border-radius: 15px;}
.kefu-con-r-qrcode div span{ height: 40px; line-height: 40px;}