/*通用样式*/
@charset "utf-8";
/* CSS Document */
html,body,div,label,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,a,input{ margin:0; padding:0;font-family:"Arial","微软雅黑";position: relative;}
fieldset,img { border:none ;}
html{ overflow-y:scroll; -webkit-text-size-adjust: none;}
body{font:12px/24px;font-family: "Arial","微软雅黑"; color:#333; background:#FFF;/*overflow:hidden*/}
ul,ol{ list-style:none; }
input::-moz-focus-inner { border:none; padding:0; }
select,input { vertical-align:middle; }
select,input,textarea{ font-size:12px; margin:0; }
input[type="text"],input[type="password"],textarea{ outline-style:none; -webkit-appearance:none; }
img {max-width: 100%; width: auto\9; /* ie8 */}
span{display:inline-block}
span em{font-style: normal;display:inline-block}
a{color:#333;text-decoration:none;webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;}
a:active {star:expression(this.onFocus=this.blur());}
.inside{width:1200px;margin:0 auto;}
body {
  background: #F7F7F7;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  height: 100%;
}
.swiper-container {
  width: 100%;
  height:100%;
  min-height:500px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide img{
  width:100%;
}
.banner{
  margin:0 auto;
  text-align:center;
}
#header{
  position:relative;
}
#header .header{
  position: absolute;
  z-index: 999;
  font-size:18px;
  text-align:center;
  width:100%;
  top:18px;
}
#header .nav{
  width:1200px;
  margin:0 auto;
}
#header .nav,#header .nav ul{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
}
#header .nav ul{
  margin-top:15px;
}
#header .nav li{
  margin:0 20px;
}
#header .nav li a{
  color:#FFF;
  padding:10px;
}
#header .nav li a:hover,#header .nav li a.active{
  border-bottom:2px solid #47B48B;
}
#header .nav h2 a{
  display: inline-block;
  background:url("/static/img/logo.png")no-repeat center center;
  width:229px;
  height:71px;
}
.box{
  overflow: hidden;
}
.box .inside{
  padding:80px 0;
}
.box h2{
  font-size:28px;
  font-weight:400;
  text-align:center;
  line-height:50px;
}
.box h3{
  font-size:18px;
  font-weight:400;
  text-align:center;
  color:#666;
}
#service{
  background-color:#F7F7F8;
}
#process{
  background-color:#FFF;
}
#service .inside{
  position: relative;
  height:840px;
}
#service ul{
  position:absolute;
  left:0;
  top:50%;
  list-style:none;
  margin:0;
  -webkit-transform:translate(0,-50%);
  -ms-transform:translate(0,-50%);
  transform:translate(0,-50%);
}
#service ul li {
  float:left;
  width:274px;
  padding:0 13px;
  margin-top:8%;
}
#service ul li:nth-child(5) {
  margin-left:12.142857%;
  clear:left;
}
#service ul li a {
  display:block;
  float:left;
  width:100%;
  position:relative;
  outline:none;
}
#service ul li a::before {
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:#fff;
  width:100%;
  height:100%;
  z-index:0;
  -webkit-transition:all 0.2s ease-out 0s;
  -moz-transition:all 0.2s ease-out 0s;
  -o-transition:all 0.2s ease-out 0s;
  transition:all 0.2s ease-out 0s;
  -webkit-transform:rotate(60deg);
  -moz-transform:rotate(60deg);
  -ms-transform:rotate(60deg);
  -o-transform:rotate(60deg);
  transform:rotate(60deg);
}
#service ul li a::after {
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:#fff;
  width:100%;
  height:100%;
  z-index:0;
  -webkit-transition:all 0.2s ease-out 0s;
  -moz-transition:all 0.2s ease-out 0s;
  -o-transition:all 0.2s ease-out 0s;
  transition:all 0.2s ease-out 0s;
  -webkit-transform:rotate(-60deg);
  -moz-transform:rotate(-60deg);
  -ms-transform:rotate(-60deg);
  -o-transform:rotate(-60deg);
  transform:rotate(-60deg);
}
#service ul li a i {
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:#fff;
  width:100%;
  height:100%;
  z-index:1;
  -webkit-transition:all 0.2s ease-out 0s;
  -moz-transition:all 0.2s ease-out 0s;
  -o-transition:all 0.2s ease-out 0s;
  transition:all 0.2s ease-out 0s;
}
#service ul li a i::before {
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:#fff;
  width:100%;
  height:100%;
  z-index:1;
  -webkit-transition:all 0.2s ease-out 0s;
  -moz-transition:all 0.2s ease-out 0s;
  -o-transition:all 0.2s ease-out 0s;
  transition:all 0.2s ease-out 0s;
  -webkit-transform:rotate(60deg);
  -moz-transform:rotate(60deg);
  -ms-transform:rotate(60deg);
  -o-transform:rotate(60deg);
  transform:rotate(60deg);
}
#service ul li a i::after {
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:-20px;
  background:#fff;
  width:100%;
  height:100%;
  z-index:1;
  -webkit-transition:all 0.2s ease-out 0s;
  -moz-transition:all 0.2s ease-out 0s;
  -o-transition:all 0.2s ease-out 0s;
  transition:all 0.2s ease-out 0s;
  background: url("/static/img/web.png")no-repeat center center;
  /*-webkit-transform:rotate(-60deg);*/
  /*-moz-transform:rotate(-60deg);*/
  /*-ms-transform:rotate(-60deg);*/
  /*-o-transform:rotate(-60deg);*/
  /*transform:rotate(-60deg);*/
  /*-moz-transform:rotate(180deg);*/
  /*-webkit-transform:rotate(180deg);*/
  /*transform:rotate(180deg);*/
  /*filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);*/
  background-repeat: no-repeat;
  background-position:center center;
}
#service ul li a i.web::after{
  background-image: url("/static/img/web.png");
}
#service ul li a i.app::after{
  background: url("/static/img/app.png")no-repeat center center;
}
#service ul li a i.mini::after{
  background: url("/static/img/mini.png")no-repeat center center;
}
#service ul li a i.wechat::after{
  background: url("/static/img/wechat.png")no-repeat center center;
}
#service ul li a i.h5::after{
  background: url("/static/img/h5.png")no-repeat center center;
}
#service ul li a i.product::after{
  background: url("/static/img/product.png")no-repeat center center;
}
#service ul li a i.seo::after{
  background: url("/static/img/seo.png")no-repeat center center;
}
#service ul li a em {
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:#568fd1;
  width:100%;
  height:100%;
  z-index:10;
  opacity:0;
  filter:alpha(opacity=00);
  -webkit-transition:all 0.2s ease-out 0s;
  -moz-transition:all 0.2s ease-out 0s;
  -o-transition:all 0.2s ease-out 0s;
  transition:all 0.2s ease-out 0s;
}
#service ul li a em::before {
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:#568fd1;
  width:100%;
  height:100%;
  -webkit-transition:all 0.2s ease-out 0s;
  -moz-transition:all 0.2s ease-out 0s;
  -o-transition:all 0.2s ease-out 0s;
  transition:all 0.2s ease-out 0s;
  -webkit-transform:rotate(60deg);
  -moz-transform:rotate(60deg);
  -ms-transform:rotate(60deg);
  -o-transform:rotate(60deg);
  transform:rotate(60deg);
}
#service ul li a em::after {
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  background:#568fd1;
  width:100%;
  height:100%;
  -webkit-transition:all 0.2s ease-out 0s;
  -moz-transition:all 0.2s ease-out 0s;
  -o-transition:all 0.2s ease-out 0s;
  transition:all 0.2s ease-out 0s;
  -webkit-transform:rotate(-60deg);
  -moz-transform:rotate(-60deg);
  -ms-transform:rotate(-60deg);
  -o-transform:rotate(-60deg);
  transform:rotate(-60deg);
}
#service ul li a h4 {
  display:block;
  float:left;
  position:absolute;
  left:0;
  width:100%;
  top:96%;
  height:32px;
  line-height:32px;
  font-size:16px;
  color:#333;
  z-index:19;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-transform:translate(0,-50%);
  -ms-transform:translate(0,-50%);
  transform:translate(0,-50%);
  -webkit-transition:all 0.2s ease-out 0s;
  -moz-transition:all 0.2s ease-out 0s;
  -o-transition:all 0.2s ease-out 0s;
  transition:all 0.2s ease-out 0s;
}
#service ul li a:hover em {
  opacity:0.8;
  filter:alpha(opacity=80);
}
#service ul li a:hover h4 {
  opacity:1;
  filter:alpha(opacity=100);
  color:#FFF;
}
#process ul{
  width:1200px;
  margin:40px auto 10px auto;
  background:url("/static/img/process_bg.png") no-repeat center top;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
}
#process ul li{
  width:233px;
  margin-top:80px;
  text-align:center;
}
#process ul li h4{
  line-height:50px;
  font-size:20px;
  text-indent:10px;
}
#process ul li p{
  padding:30px 20px 10px 20px;
  text-align:left;
  color:#999
}
#process ul li p a{
  color:#3CA5F6;
}
.service-companies{
    height: 420px;
    background-color: #282946;
    background-image: url("/static/img/num_bg.png"), linear-gradient(81deg, #282946, #191140);
    background-size: contain;
    background-repeat: repeat-x;
    color:#FFF;
    text-align:center;
    font-size:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.service-companies a{
    background-color:#FFF;
    padding:8px 20px;
    height:30px;
    line-height:30px;
    border-radius:5px;
    margin:50px 0;
    font-size:16px;
}
.service-companies span{
  font-size:68px;
}
#customer{
  background-color:#FFF;
}
#customer ul,#customer ul li{
  display: flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
}
#customer ul{
  margin:50px auto;
}
#customer ul li{
  width:265px;
  height:120px;
  background-color:#F4F4F4;
  justify-content:center;
  margin:10px 10px 20px 10px;
}
#customer ul img{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  opacity:0.7;
}
#customer ul li:hover img{
  cursor: pointer;
  opacity: 1;
  -webkit-filter: grayscale(10%);
  filter: grayscale(10%);
}
#demand{
  padding:50px 0;
}
#demand h6{
  font-size:30px;
  font-weight:400;
  line-height:50px;
}
#demand .form{
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content:flex-start;
  margin:10px 0;
}
#demand .form input.input_text{
  padding:15px;
  border:1px solid #F4F4F4;
  margin-right:20px;
  width:168px;
  font-size:16px;
}
#demand .form input.tel{
  width:280px;
}
#demand .form input.demand{
  width:380px;
}
#demand input.submit{
  background-color:#58B48A;
  border:1px solid #58B48A;
  padding:15px 90px;
  color:#FFF;
  font-size:16px;
  opacity: 0.7;
}
#demand input.submit:hover{
  cursor: pointer;
  opacity: 1;
}
#demand .inside p{
  color:#999;
  line-height:30px;
}
#footer{
  background-color:#FFF;
  padding:30px 0;
}
#footer .inside{
  display: flex;
  flex-direction:row;
  justify-content:space-between;
}
dl.base dt{
  margin-bottom:30px;
}
dl.base dd,dl.qrcode dd{
  line-height:32px;
  color:#999;
  text-indent:10px;
  font-size:16px;
}
dl.qrcode{
  padding:30px 0;
  text-align: center;
  width:158px;
}
dl.qrcode dd{
  text-indent: 0;
}
dl.qrcode img{
  width:120px;
}

#copyright{
  text-align:center;
  line-height:50px;
  color:#999;
  background-color:#FFF;
  border-top:1px solid #F4F4F4;
}
.case-lists{
  padding-bottom:60px;
}
.case-lists ul.menu{
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding:90px 0;
  font-size:15px;
}
.case-lists ul.menu li{
  margin:0 20px;
  padding:15px 30px;
  border:1px solid #E6E6E6;
}

.case-lists ul.menu li:hover,.case-lists ul.menu li.active{
  cursor: pointer;
  background-color:#58B48A;
  border:1px solid #58B48A;
  color:#FFF;
}
.case-lists ul.items{
  display: flex;
  flex-direction:row;
  justify-content:flex-start;
  flex-wrap:wrap;
  width:1200px;
  margin:0 auto;
}
.case-lists ul.items li{
  width:360px;
  height:240px;
  margin:0 20px 30px 20px;
  position:relative;
  overflow: hidden;
  cursor: pointer;
}
.case-lists ul.items li img{
  max-width:360px;
  width:100%;
  transition: all 0.6s;
}
.case-lists ul.items li.pc:hover img{
  transform: scale(1.2);
}
.case-lists ul.items li h6{
  text-align:center;
  width:100%;
  height:100%;
  line-height:240px;
  position: absolute;
  top:0;
  left:0;
  font-size:30px;
  color:#FFF;
  z-index:9;
}
.case-lists ul.items li .overlay{
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
  position: absolute;
  opacity: .5;
  z-index: 2;
  top: 0;
  left: 0;
  border-radius: 3px;
}
.case-lists ul.items li:hover img{
    -webkit-box-shadow:0 15px 30px rgba(0,0,0,.25);
    box-shadow:0 15px 30px rgba(0,0,0,.25);
    -webkit-transform:translate3d(0,-2px,0);
    transform:translate3d(0,-2px,0)
}
.case-list-items .itemsBox{
  display: none;
}
.case-list-items .itemsBox.active{
  display: block;
}
#about h3{
  margin-bottom:50px;
}
#about p{
  font-size:18px;
  text-indent:20px;
  line-height:30px;
  margin-bottom:10px;
}
#contact{
  background-color:#FFF;
}
#contact h5{
  text-align:center;
  font-size:50px;
  margin:20px 0;
}
#contact ul{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  margin:20px 0;
  overflow: hidden;
}
#contact ul li{
  width:360px;
  border:1px solid #DEDEDE;
  padding:30px 0;
  border-radius:5px;
  font-size:20px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}
#contact ul li h6{
  font-size:16px;
  font-weight:400;
  color:#999;
  margin-bottom:5px;
}

#contact ul li i{
  display:inline-block;
  width:50px;
  height:50px;
  background-position:center center;
  background-repeat:no-repeat;
  margin-right:20px;
}
#contact ul li i.qq{
  background-image:url("/static/img/qq.png");
  background-size:90%;
}
#contact ul li i.wechat{
  background-image:url("/static/img/wechat2.png");
}
#contact ul li i.email{
  background-image:url("/static/img/email.png");
}
.inputSuccess, .inputError {
  min-width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  position: fixed;
  top: 0;
  left: calc(50% - 100px);
  border-radius: 5px;
  z-index: 999;
  opacity: 0;
  padding:0 20px
}

.inputSuccess {
  background-color: #f0f9eb;
  border: 1px solid #e1f3d8;
  color: #67c23a;
}

.inputError {
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
  color: #f56c6c;
}
.isShow {
  opacity: 1;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
#demand .form input.input_text:focus,textarea:focus {
  border: 1px solid #2AB851;
  /* 当输入框获得焦点时的边框样式 */
  outline: none;
  /* 移除默认的轮廓样式 */
}
.banner_guide{
  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  background:url("/static/img/banner_guide.jpg")center center no-repeat;
  background-size: cover;
  height:288px;
  text-align: center;
  color:#FFF;
}
.banner_guide h2{
  margin-top:50px;
  font-weight:400;
}
.banner_guide p{
  margin-top: 5px;
    opacity: .8;
}

.container{
  width:1200px;
  margin:0 auto;
  padding:0 15px;
}
.row{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap:wrap;
}

/*二级导航*/
.screen{
  margin:20px auto;
}
.screen ul{
  background-color:#ebebeb;
  padding:10px;
  border-radius:5px;
}
.screen ul li{
  margin:0 10px;
}
.screen ul li a{
  display:inline-block;
  padding:10px;
  border-radius: 3px;
}
.screen ul li a.active,.screen ul li a:hover{
  background-color: #47B48B;
  color:#FFF;
  transition: all 0.2s ease-in-out;
}
/*指南列表*/
.guide-list{
  min-height:400px;
}
.guide-list h3{
  font-size:35px;
  line-height:130px;
  font-weight:300;
  text-align: center;
}
.guide-list ul{
  margin:0 -10px;
}
.guide-list ul li{
  width:100%;
  padding:0 10px;
  max-width:calc(25% - 20px);
  flex: 0 0 calc(25% - 20px);
  border-radius: 5px;
  margin-bottom:20px;
}
.guide-list ul li a{
  display: inline-block;
  width:100%;
  transition: 0.5s;
}
.guide-list ul li a:hover{
  -webkit-box-shadow:0 15px 30px rgba(0,0,0,.25);
  box-shadow:0 15px 30px rgba(0,0,0,.25);
  -webkit-transform:translate3d(0,-2px,0);
  transform:translate3d(0,-2px,0)
}
.guide-list ul li a img{
  width:100%;
  height:166px;
  border-radius:5px 5px 0 0 ;
}
.guide-list ul li a .info{
  padding:10px;
}
.guide-list ul li a .info h5{
  line-height:22px;
  font-size:15px;
  font-weight:400;
}
.guide-list ul li a .info span{
  color:#999;
  font-weight:300;
  font-size:14px;
}
/*分页*/
.pages {
  text-align:center;
  margin:40px auto;
}
.pages a {
  display:inline-block;
  padding:10px 20px;
  font-size:14px;
  color:#554744;
  border:1px solid #ececec;
  margin:0 3px 10px 3px;
  transition:all .4s ease 0s;
  border-radius:3px
}
.pages a:hover,.pages a.active {
  border:1px solid #47B48B;
  background-color:#47B48B;
  color:#fff
}
/*内容部分*/
.content-box{
  background-color:#FFF;
  padding:30px;
  border-radius:5px;;
}
.content-box .title{
  padding: 30px 0;
    font-size: 30px;
    text-align: center;
    line-height: 40px;
}
.content-box .guideInfo{
  text-align: center;
  line-height: 40px;
  color: #999;
  font-size: 12px;
  border-top: 1px dashed #e6e5e5
}
.content{
  line-height:2;
  margin:30px auto;
  font-size:16px;
}
.content p{
  letter-spacing:2px;
  margin-bottom:22px;
}
.content img{
  max-width: 780px;
  text-align: center;
  margin: 10px auto;
}
/*是否有用*/
.btn{
  color: #fff;
  cursor: pointer;
  background: #47B48B none repeat scroll 0 0;
  box-shadow: 0px 9px 16.74px 1.26px rgba(99, 134, 94, 0.21);
  transition: all ease 700ms;
  border-radius: 4px;
  padding: 8px 20px;
}
.btn:hover{
  color:#FFF;
  opacity:.8;
}
.isUse{
  margin:30px auto;
  text-align: center;
}
.isUse a.btn{
  padding:10px 31px;
}
.isUse a.btn span{
  display:inline-block;
  margin-left:10px;
}
.isUse a.btn span,.isUse a.btn span b,.isUse a.btn:hover{
  color:#E4E4E4;
}
/*上一下一篇*/
.previous-next{
  background-color:#FFF;
  justify-content: space-between;
  margin:30px auto;
}
.previous-next a{
  display: inline-block;
  width:50%;
  height:150px;
  overflow: hidden;
  position:relative;
  color:#FFF;
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
}
.previous-next a .overlay{
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
  position: absolute;
  opacity: .5;
  z-index:2;
  top:0;
  left:0;
}
.previous-next a:first-child .overlay{
  border-radius:3px 0 0 3px;
}
.previous-next a:last-child .overlay{
  border-radius:0 3px 3px 0 ;
}
.previous-next a .nBox{
  position:absolute;
  z-index:9;
  top:50px;
}
.previous-next a span,.previous-next a h6{
  color:#FFF;
}
.previous-next a h6{
  font-size:16px;
}
.previous-next a.previous .nBox{
  left:30px;
}
.previous-next a.next .nBox{
  right:30px;
  text-align:right;
}
.previous-next a:hover .overlay{
  opacity: .3;
}
.previous-next a:hover h6{
  color:#FFF;
}
.previous-next a.nopage{
  border:1px solid #F4F4F4;
}
.previous-next a.nopage:hover{
  border:1px solid #E4E4E4;
}
.previous-next a.nopage h6{
  color:#999;
}
.previous-next a.nopage span{
  color:#666;
}
/*暂无内容*/
.nodata{
  text-align: center;
  padding:120px 0;
  display: flex;
  flex-direction: column;
}
.nodata img{
  width:670px;
  margin:0 auto;
}
.nodata span{
  color:#666;
  margin-top:30px;
}
/*面包屑*/
.crumbs{
  width:1160px;
  margin:20px auto;
  background-color:#FFF;
  justify-content: flex-end;
  padding:20px;
}
.crumbs a.home{
  background:url("/static/img/crumbs.png")no-repeat center center;
  text-indent:50px;
}
.crumbs a,.crumbs span{
  display: inline-block;
  padding:0 5px;
}
.crumbs li span{
  display:inline-block;
  line-height:21px;
  height:21px;
}












































































/**/