/******  定制服务  ******/
.site{ background: url(../images/service/site-bg.jpg) center no-repeat; background-size: cover;}
.site-box {position: absolute; right: 0; padding-top: 5%; width: 50%; height: 100%; z-index: 1; background-color: rgba(0,22,61,.8);}
.site-desc {padding:100px 200px 0 100px; color: #fff;}
.site-desc h3{font-weight: normal; font-size: 24px; line-height: 40px;}
.site-desc h3 i{display: block; font-size: 30px; text-transform: uppercase;}
.site-desc .icon{margin:30px 0; color: var(--color);}
.site-desc .icon i{font-size: 58px;}
.site-desc p{font-size: 18px; line-height: 34px;}
.site-desc ul{margin: 70px 0;}
.site-desc li{float: left; width: 33.33%; font-size: 24px;  line-height: 50px; transition: all .4s;}
.site-desc li i{margin-right: 10px;}
.site-desc li:hover{letter-spacing: 4px;}

.site-link a{width: 160px; height: 48px; line-height: 48px; text-align: center; font-size: 16px; color: #fff; display: inline-block; transition: all .4s; margin-right:20px;}
.site-link a:first-child{background-color: var(--color);}
.site-link a:last-child{border: 1px solid #fff;}
.site-link a:hover{letter-spacing: 4px;}


/**/
.wx{ background: url(../images/service/wx-bg.jpg) center no-repeat; background-size: cover;}
.wx-box {position: absolute; left: 0; padding-top: 5%; width: 50%; height: 100%; z-index: 1; background-color: rgba(220,220,220,.8);}
.wx-desc {padding:100px 150px 0 200px; color: #333;}
.wx-desc h3{font-weight: normal; font-size: 24px; line-height: 40px;}
.wx-desc h3 i{display: block; font-size: 30px; text-transform: uppercase;}
.wx-desc .icon{margin:30px 0; color: var(--color);}
.wx-desc .icon i{font-size: 58px;}
.wx-desc p{font-size: 18px; line-height: 34px; color: #666;}
.wx-desc ul{margin: 70px 0;}
.wx-desc li{float: left; width: 33.33%; font-size: 24px;  line-height: 50px; transition: all .4s; color: #333;}
.wx-desc li i{margin-right: 10px;}
.wx-desc li:hover{letter-spacing: 5px;}

.wx-link a{width: 160px; height: 48px; line-height: 48px; text-align: center; font-size: 16px; color: #fff; display: inline-block; transition: all .4s; margin-right:20px;}
.wx-link a:first-child{background-color: var(--color);}
.wx-link a:last-child{border: 1px solid #999; color: #666;}
.wx-link a:hover{letter-spacing: 4px;}

/**/
.app{ background: url(../images/service/app-bg.jpg) center no-repeat; background-size: cover;}
.app-box {position: absolute; right: 0; padding-top: 5%; width: 50%; height: 100%; z-index: 1; background-color: rgba(33,79,162,.85);}
.app-desc {padding:100px 200px 0 100px; color: #fff;}
.app-desc h3{font-weight: normal; font-size: 24px; line-height: 40px;}
.app-desc h3 i{display: block; font-size: 30px; text-transform: uppercase;}
.app-desc .icon{margin:30px 0; color: var(--color);}
.app-desc .icon i{font-size: 58px;}
.app-desc p{font-size: 18px; line-height: 34px;}
.app-desc ul{margin: 70px 0;}
.app-desc li{float: left; width: 33.33%; font-size: 24px;  line-height: 50px; transition: all .4s;}
.app-desc li i{margin-right: 10px;}
.app-desc li:hover{letter-spacing: 4px;}

@media screen and (max-width:1600px) {
	.site-desc,.app-desc {padding:60px 100px 0 60px;}
	.wx-desc{padding:60px 60px 0 100px;}
	
	#dowebok h3{font-size: 20px; line-height: 34px;}
	#dowebok h3 i{font-size: 24px;}
	#dowebok .icon i{font-size: 44px;}
	#dowebok p{font-size: 16px; line-height: 30px;}
	#dowebok li{font-size: 18px;  line-height: 40px;}
	#dowebok li:hover,#dowebok a:hover{letter-spacing: 2px;}
	#dowebok a{height: 42px; line-height: 42px;}
}

@media screen and (max-width:1200px) {
	.site-desc,.app-desc {padding:60px 80px 0 60px;}
	.wx-desc{padding:60px 60px 0 80px;}
	#dowebok p{font-size: 14px; line-height: 26px;}
	#dowebok li{font-size: 14px;}
	#dowebok li i{margin-right: 5px;}
}
@media screen and (max-width:1024px) {
	.site-box,.wx-box,.app-box {width: 100%; height: 65%;}
	.site-desc,.app-desc { padding:40px 40px 0 ;}
	.wx-desc{ padding:40px 40px 0 ;}
	#dowebok h3{font-size: 24px; line-height: 34px;}
	#dowebok h3 i{font-size: 24px;}
	#dowebok p{margin-top:30px; font-size: 16px;}
	#dowebok .icon{display: none;}
	#dowebok ul{margin: 40px 0;}
	#dowebok li{font-size: 18px;}
} 

@media screen and (max-width:600px) {
	#dowebok li{width: 50%;}
	#dowebok a{width: 140px !important;}
	#dowebok p{font-size: 14px; line-height: 24px; margin: 20px 0 0;}
	.i-footer-contact p{margin:0px !important;}
} 

/******   案例  ******/
/* 案例banner */
.page-banner {position: relative;overflow: hidden; text-transform: uppercase;}
.page-banner img {width: 100%;}
.page-banner-txt {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.page-banner-txt .container-width{height: 100%; display: flex; align-items: flex-end;text-align: center;}
.page-banner-txt .container-width>div{padding-bottom: 180px; width: 100%;}
.page-banner-txt h3{margin-bottom: 15px; font-size: 30px; color: #fff; margin-bottom: 20px;}
.page-banner-txt p{font-size:20px; color: #fff; line-height: 26px;}
.case-banner .page-banner-txt .container-width>div{text-align: left;padding-bottom: 35px;}

.txt-left{float: left; width: 75%;}
.txt-left h3{position: relative; margin-bottom: 30px;}
.txt-left h3::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -15px;
	width: 48px;
	height: 3px;
	background-color: #fff;
	
}

.txt-right{float: right; width: 25%; margin-bottom: 5px;}
.txt-right a{display:block; float: right;}
.txt-right a i{font-size: 36px; color: #fff; }
.txt-right a:first-child {transform: rotate(180deg); margin-top: -1px; margin-left: 20px;}
@media screen and (max-width:1600px) {
	.page-banner-txt .container-width>div{padding-bottom: 160px;}
}
@media screen and (max-width:1400px) {
	.page-banner-txt{padding: 0 30px;}
	.page-banner-txt .container-width>div{padding-bottom: 110px;}
	.page-banner-txt h3{font-size: 20px; margin-bottom: 10px;}
	.page-banner-txt p{font-size: 14px; line-height: 22px;}
	.txt-right a i{font-size: 30px;}
} 
@media screen and (max-width:1000px) {
	.page-banner-txt .container-width>div{padding-bottom: 70px;}
}
@media screen and (max-width:800px) {
	.page-banner-txt h3{margin-bottom: 0px; font-size: 16px;}
	.page-banner-txt p{font-size: 12px; line-height: 18px; display: none;}
	.txt-left{padding-bottom: 45px !important;;}
	.txt-right{padding-bottom: 10px !important;}
} 
@media screen and (max-width:600px) {
	.page-banner-txt .container-width>div{padding-bottom: 40px;}
	.page-banner-txt{padding: 0 15px;}
	.page-banner-txt .container-width>div{padding: 0 0 25px 25px;}
	.page-banner-txt .container-width>div.txt-left{padding: 0 0 45px;}

} 

/* 分类导航 */
.case-nav{text-align: center;}
.case-nav a{color:#666; display: inline-block; padding: 5px 12px ; margin: 0 5px;}
.case-nav a.active,.case-nav a:hover{color:#fff; background: var(--color);}

/* 案例列表 */
.case{padding: 80px 0px 100px;}
.case ul {margin-top: 50px;}
.case ul li{float: left; width: 25%; margin-bottom: 25px; padding: 0 15px;}
.case ul li a{ position: relative; display: block; overflow: hidden;}
.case ul .case-img{ width: 100%; height: 450px;}
.case ul .case-img img{width: 100%; visibility: hidden;}

.case-mask{position: absolute; left: 0; top:0px; width: 100%; height: 100%; background: rgba(240,129,24,0); color: #fff; transition: all .6s; padding: 10%; line-height: 30px; opacity: 0;}
.case-mask h5{margin-top: ; font-size: 20px; color: #fff; font-weight: normal;}
.case-mask i{margin-top: ; font-size: 22px; color: #fff; border: 1px solid #fff; border-radius: 60px; padding: 10px;}
.case-mask .case-hover{position: relative;width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;} 
.case-mask .case-hover span{position: absolute; background: #fff; display: inline-block; transition: all 0.5s;-webkit-transition: all 0.5s;}
.case-hover .i-tline{width: 100%;height: 1px;left: 0;}
.case-hover .i-sline{width: 1px;height: 80%;top: 10%;}
.case-hover .i-tline-top{top: 0px;transform: translateX(100%);-webkit-transform: translateX(100%);}
.case-hover .i-tline-bottom{bottom: 0;transform: translateX(-100%);-webkit-transform: translateX(-100%);}
.case-hover .i-sline-left{left: 0;transform: translateY(-125%);-webkit-transform: translateY(-125%);}
.case-hover .i-sline-right{right:0;transform: translateY(125%);-webkit-transform: translateY(125%);}

.case-text{position: absolute; left: 0; bottom: 40px; width: 80%; background: rgba(0,0,0,.6); color: #fff; transition: all .2s; padding: 20px; line-height: 30px; transition: .3s;}
.case-text h5{font-weight: normal; font-size: 18px; margin: 0;}
.case-text p{opacity: .8;}

.case ul li:hover .case-text{left: -80%; opacity: 0;}
.case ul li:hover .case-mask{ background: rgba(240,129,24,1); opacity: 1;}
.case ul li:hover a span{transform:translateY(0);    -webkit-transform: translateY(0);  transform:translateX(0);  -webkit-transform: translateX(0);}

@media screen and (max-width:1400px) {
	.case ul li{float: left; width: 33.33%;}
	.case .case-img{height: 360px;}
}
@media screen and (max-width:1200px) {
	.case .case-img{height: 320px;}
	.case .case-txt h3{font-size: 18px; }
}
@media screen and (max-width:840px) {
	.case .case-img{height: 260px;}
	.case ul li{width: 100%;}
	.case ul .case-img{height:auto; background: none;}
	.case ul .case-img img{visibility: visible;}
}

@media screen and (max-width:600px) {
	.case{padding: 50px 0px 60px;}
	.case ul {margin-top: 40px;}
	.case-mask{display: none;}
	.case-text{bottom: 0px;padding: 8px 15px 5px; line-height: 20px;}
	.case-text h5{font-size: 14px;}
	.case-text p {font-size: 12px;}
}

/* 案例详情 */
.show-case{padding: 50px 0;}
.link-img{float: left; width: 50%;}
.link-img img{display: block; max-width: 100%;}
.link-net{float: right; width: 50%; text-align: right; margin-top: 30px;}
.link-net a{text-align: right; border: 1px solid #777; display: inline-block; padding: 6px 25px;}
.link-net i,.link-net span{float: right; line-height: 28px; transition: all 0s;}
.link-net i{font-size: 24px; margin-right: 10px;}
.link-net a:hover{ color: #fff; background-color: var(--color); border-color: var(--color);}

.show-case-img{max-width: 1400px; margin: 0 auto;}
.show-case-img img{width: 100%;}
@media screen and (max-width:1400px) {
	.show-case{padding:35px 30px;}
	.show-case-img{width: 100%; padding: 0 30px;}
}

@media screen and (max-width:600px) {
	.link-net{margin-top: 0px;}
	.show-case{padding:35px 5px;}
	.link-net a{padding: 3px 15px;}
}

/* 点赞 */
.thumbs-up{margin:100px auto;text-align: center;}
.thumbs-up a{ display: block;}
.thumbs-up i{background-color: var(--color); padding: 40px; border-radius: 100px; box-shadow: 0px 0px 10px #F08118; color: #fff; font-size: 30px; cursor: pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;}
.thumbs-up p{margin-top: 60px; font-size: 16px;}

/* 推荐案例 */
.recommend{background: linear-gradient(#eee, #fff); padding: 80px 20px 100px;margin-top: 10;}
.recommend ul li{float: left; width: 25%; margin-bottom: 25px; padding: 0 15px;}
.recommend ul li a{ position: relative; display: block; overflow: hidden;}
.recommend ul .case-img{ width: 100%; height: 450px;}
.recommend ul .case-img img{width: 100%; visibility: hidden;}
.recommend ul li:hover .case-text{left: -80%; opacity: 0;}
.recommend ul li:hover .case-mask{ background: rgba(240,129,24,1); opacity: 1;}
.recommend ul li:hover a span{transform:translateY(0);    -webkit-transform: translateY(0);  transform:translateX(0);  -webkit-transform: translateX(0);}
@media screen and (max-width:1400px) {
	.recommend ul li{width: 33.33%;}
	.recommend .case-img{height: 360px;}
}
@media screen and (max-width:1200px) {
	.recommend ul li{width: 50%;}
	.recommend .case-img{height: 320px;}
	.recommend .case-txt h3{font-size: 18px; }
}
@media screen and (max-width:840px) {
	.recommend .case-img{height: 260px;}
	.recommend ul li{width: 100%;}
	.recommend ul .case-img{height:auto; background: none;}
	.recommend ul .case-img img{visibility: visible;}
}

@media screen and (max-width:600px) {
	.recommend{padding: 50px 0px 60px;}
	.recommend ul {margin-top: 40px;}		
}




/****** erp ******/
/* 公共标题 */
.erp-title{text-align: center; margin-bottom: 20px;}
.erp-title h3{font-size: 26px;}
.erp-title span{display: inline-block; width: 60px; height: 4px; background-color: var(--color);}

@media screen and (max-width:768px) {
	.erp-title h3{font-size: 20px;}
}
/*  */
.solution{background-color: #f9f9f9; padding: 100px 0;}
.solution ul{margin-top: 50px;}
.solution ul li{float: left; width: 33.33%; padding: 0 20px;}
.solution ul li a{display: block; box-shadow: 0 0 8px #ddd; }
.solution-img{width: 100%; overflow: hidden;}
.solution-img img{width: 100%; display: block; transition: all .5s;}
.solution-text{padding: 25px 35px; width: 100%; height: 250px; background-color: #fff;}
.solution-text h3{font-size: 20px; color: #333; line-height: 30px;}
.solution-text h3 span{font-size: 14px; display: block;}
.solution-text p{color: #999; margin-top: 15px; line-height: 26px;}
.solution ul li:hover .solution-img img{transform: scale(1.1);}

@media screen and (max-width:1200px) {
	.solution ul li{padding: 0 10px; }
	.solution-text{padding: 15px 25px;}
}
@media screen and (max-width:966px) {
	.solution ul li{width: 50%;margin-bottom: 30px;}
}
@media screen and (max-width:768px) {
	.solution{padding: 50px 0;}
	.solution ul li{width: 100%; float: none;}
	.solution ul li:hover .solution-img img{transform: scale(1);}
	.solution-text h3{font-size: 18px; line-height: 26px;}
}

/* 服务项目 */
.project{padding: 100px 0;}
.project ul li{float: left; width: 50%; padding: 20px;}
.project ul li a {
	background-repeat: no-repeat;
	background-position: bottom center;
	display: block; 
	cursor: auto;

}
.project-img{float: right; width: 40%;}
.project-img img{width: 100%;}
.project-text{float: left; width: 60%; padding:115px 50px 0 50px; }
.project-text h3{font-size: 18px;}
.project-text h3 span{color: var(--color);}
.project-text p{color: #999; margin-top: 10px;}


@media screen and (max-width:1400px) {
	.project-text{padding: 45px 50px 50px 50px; width: 100%;}
	.project-img {display: none;}
}
@media screen and (max-width:1200px) {
	.project ul li{padding: 5px 8px;}
}
@media screen and (max-width:966px) {
	.project-text{padding: 45px 50px 50px 50px; width: 100%;}
	.project-text h3{font-size: 16px;}
	.project-img {display: none;}
}
@media screen and (max-width:768px) {
	.project{padding: 50px 0;}
	.project ul li{width: 100%; float: none;}
	.project-text{padding: 80px 30px 0px 30px; width: 65%;}
	.project-text h3{font-size: 16px;}
	.project-img {display: block; width: 35%;}
	
}
@media screen and (max-width:480px) {
	.project ul li{width: 100%; float: none;}
	.project-text{padding: 20px 10px 0px; width: 70%;}
	.project-text h3{font-size: 14px;}
	.project-img {display: block; width: 30%;}
	.project-text p{margin-top: 5px;}
}


/* 相关案例 */
.relevant{padding: 100px 0;}
.relevant li{float: left; width: 25%; padding: 15px;}
.relevant li a{ position: relative; display: block; width: 100%; }
.relevant li a img{width: 100%; }
.i-news-mask {position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; line-height: 50px; background-image: linear-gradient(rgb(255,255,255,0), rgba(0,0,0,1)); color: #ffffff; padding: 0 30px; font-size:18px;}
.relevant li a:hover .i-news-mask{height: 100%; font-size: 20px; background-image: linear-gradient(rgb(255,255,255,0), rgba(0,0,0,1)); display: flex; align-items: center; justify-content: center;}
@media screen and (max-width:1200px) {
	.relevant li{width: 33.33%; padding:10px}
}
@media screen and (max-width:768px) {
	.relevant{padding: 50px 0;}
	.relevant li{width: 50%;}
	.relevant li a:hover .i-news-mask{position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; line-height: 50px; background-image: linear-gradient(rgb(255,255,255,0), rgba(0,0,0,1)); color: #ffffff; padding: 0 30px; font-size:18px;align-items: left; justify-content: left;}
}


/****** o2o ******/
/* 介绍 */
.distribution-about{padding: 100px 0;}
.distribution-about-l{float: left; width: 33.33%; padding-right: 30px;}
.distribution-about-l img{width: 100%;}
.distribution-about-r{float: right; width: 66.66%; padding-left: 30px;}
.distribution-about-r h3{font-size: 26px; margin: 30px 0;}
.distribution-about-r p{line-height: 26px; color: #999;}
.distribution-about-more{margin-top: 35px;}
.distribution-about-more a{display: block; position: relative; width:160px; height: 40px; overflow: hidden;}
.distribution-about-more a span{position: absolute; top: 0; left: 0; display:block; width:100%; height: 40px; text-align: center; line-height: 40px; background-color: var(--color); color: #fff; transition: all .3s;}
.distribution-about-more a span.next{background-color:  #214fa2; top:40px;}
.distribution-about-more a:hover span.prev{top: -40px;}
.distribution-about-more a:hover span.next{top: 0;}
@media screen and (max-width: 1400px) {
	
}
@media screen and (max-width: 1200px) {	
	.distribution-about-r h3{font-size: 20px; margin: 10px 0;}
	.distribution-about-more{margin-top: 25px;}
}
@media screen and (max-width: 768px) {
	.distribution-about{padding: 50px 0;}
	.distribution-about-l,.distribution-about-r{float: none; width: 100%; padding: 0;}
	.distribution-about-r h3{font-size: 18px; margin: 15px 0;}
	.distribution-about-r p{line-height: 24px; color: #999;}
}


/* 公共标题 */
.distribution-title{text-align: center; line-height: 36px;}
.distribution-title h3{font-size: 26px;}
.distribution-title p{font-size: 16px; color: #999;}
.color-white{color: #fff;}
@media screen and (max-width: 768px) {
	.distribution-title h3{font-size: 20px;}
	.distribution-title p{font-size: 14px;}
}
@media screen and (max-width: 480px) {
	.distribution-title{line-height: 30px;}
	.distribution-title h3{font-size: 16px;}
	.distribution-title p{font-size: 12px;}
}


/* 优势 */
.advantage{ padding: 100px 0;}
.advantage ul{margin-top: 50px;}
.advantage ul li{float: left; width: 16.66%; padding: 20px;}
.advantage ul li>div{position: relative;}
.advantage ul li .tubiao em i{background:#F08118; }
.tubiao{width:90%; margin:0 auto; border-radius:50%; overflow:hidden; border:1px dashed rgba(200,200,200,.8); position:relative; transition:all .4s;}
.tubiao em{ position:absolute; left:6%; top:6%; width:88%; height:88%; border-radius:50%; background:rgba(200,200,200,.3);}
.tubiao em i{ position:absolute; width:100%; height:100%; left:0; top:0; border-radius:50%; transform:scale(0);}
.tubiao .tuceng{ position:relative; z-index:2;}
.tubiao .tuceng img{width: 100%;}
.kcjj{font-size:14px; line-height:24px; width: 80%;	margin: 15px 10% 0;	height:48px; color:#fff; text-align:center; display:-webkit-box;overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; 	line-clamp:2; -webkit-box-orient: vertical;}
.kcjj.on{ opacity:1; transform:translateY(0);  transition:transform 1s,color .4s; }
.advantage ul li>div:hover .tubiao{ border-color:#F08118; }
.advantage ul li>div:hover .tubiao em{ background:none;}
.advantage ul li>div:hover .tubiao em i{opacity:1; transform:scale(1);}
.advantage ul li>div:hover .tuceng{ background:none !important;}

@media screen and (max-width: 1200px) {
	.advantage ul li{width: 25%}
}
@media screen and (max-width: 1000px) {
	.advantage ul li{width: 33.33%; padding: 10px;}
}
@media screen and (max-width: 768px) {
	.advantage{padding: 50px 0;}
	.advantage ul li{width: 33.33%}
}
@media screen and (max-width: 480px) {				
	.advantage ul{margin-top: 20px;}
	.advantage ul li{width: 50%; padding: 10px 2px}
	.kcjj{font-size:12px;}
}

/* 功能 */
.funct{ padding: 100px 0;}
.funct ul{margin-top: 50px;}
.funct ul li{float: left; width: 16.66%; padding: 30px 20px; text-align: center;}	
.funct ul li .funct-img{background: url(static/images/product/funct-icon-bg.png) no-repeat center; padding: 20px 0; transition: all .5s;}
.funct ul li .funct-img img{display: inline-block; width: auto;}
.funct ul li .funct-text{margin: 15px auto 0; line-height: 26px; color: #666; width: 90%; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient: vertical;}
.funct ul li:hover .funct-img{transform: rotate(360deg);}
@media screen and (max-width: 1200px) {
	.funct ul li{width:25%; padding:10px;}
}

@media screen and (max-width: 768px) {
	.funct{padding: 50px 0;}
	.funct ul li{width: 33.33%}
}
@media screen and (max-width: 480px) {				
	.funct ul{margin-top: 20px;}
	.funct ul li{width: 50%; padding: 10px 2px}
	.kcjj{font-size:12px;}
	.funct ul li .funct-text{line-height: 22px; font-size: 12px; width: 80%;}
}

/* 界面 */
.interface{ padding: 100px 450px;}
.interface-tab{float: left; width: 70%; padding-right: 150px; margin-top: 120px;}
.interface-tab li{float: left; width: 25%; padding: 20px; text-align: center; color: #fff;filter: grayscale(100%);}
.interface-tab li img{display: inline-block; width: auto;}
.interface-tab-img{margin-bottom: 10px;}			
.interface-right{float: right; width: 30%; margin-top: 50px;}
.interface-right-bg{ padding:88px 45px 0 42px; width: 327px; height: 614px;}
.interface-right-bg img {width: 100%; display: none;}
.interface-tab li.act{color: var(--color); filter: grayscale(0%);}
@media screen and (max-width: 1400px) {
	.interface{padding: 100px;}
	.interface-tab{width: 65%; padding-right: 100px; margin-top: 100px;}
	.interface-right{width: 35%;}
}
@media screen and (max-width: 1200px) {
	.interface-tab{padding-right: 50px;}
}
@media screen and (max-width: 966px) {
	.interface{display: none;}
}

/* 解决方案 */
.programme{background-color: #f5f5f5; padding: 100px 0;}
.programme ul {margin-top: 50px;}
.programme ul li{float: left; width: 33.33%; padding: 20px; text-align: center;}
.programme-img{margin-bottom: 30px;}
.programme-img img{border: 10px solid #f5f5f5; border-radius:600px; width: 80%;}
.programme-text h3{line-height: 36px; color: #333; margin-bottom: 10px; font-size: 18px;}
.programme-text p{color: #999; line-height: 24px; text-align: left;}
.programme ul li:hover .programme-img img{border-color: rgba(240,130,26,.5);}
.programme ul li:hover .programme-text h3{color: var(--color);}
@media screen and (max-width: 966px) {
	.programme-text h3{font-size: 16px;}
	.programme ul li{padding: 10px;}
}
@media screen and (max-width: 768px) {
	.programme{padding: 50px 0;}
	.programme ul{margin-top: 30px;}
	.programme ul li{width: 100%;}
	.programme-img{width: 50%; margin: 0 auto;}
	
}

/* 版式图解 */
.diagram{padding: 100px 0;}
.diagram-text{max-width: 1000px; margin: 30px auto; color: #666; text-align: center; line-height: 26px;}
.diagram-img{margin-top: 100px;}
.diagram-img img{width: 100%;}
.diagram-img .hide{display: none;}
@media screen and (max-width: 966px) {
	.programme-text h3{font-size: 16px;}
}
@media screen and (max-width: 768px) {
	.diagram{padding: 50px 0;}
	.diagram-img{margin-top: 50px;}
	.diagram-img img{display: none;}
	.diagram-img .hide{display: block; width: 70%; margin: 0 auto;}
}

/* 行业问题 */
.industry{padding: 100px 0;}
.industry ul{margin-top: 50px;}
.industry ul li{float: left; width: 25%; background-color: var(--color); text-align: center; position: relative; height: 480px; transition: all .3s;}
.industry-img{height: 240px; width: 100%;}
.industry-img span{display: block; width: 100%; height: 100%; position: relative;}
.industry-img img{position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; background-repeat: no-repeat; background-position: center; padding: 28px;}
.industry-text{height: 240px; background-color: #fff;}
.industry li:nth-child(2n) .industry-img{position: absolute; bottom: 0; left: 0; }
.industry-text{padding: 25px 30px; position: relative;}
.industry-text::before{
	content: '';
	position: absolute;
	top: -12px;
	left: 50%;
	margin-left: -14px;
	z-index: 999999;
	width: 0;
	height: 0;
	border-right: 14px solid transparent;
	border-left: 14px solid transparent;
	border-bottom: 12px solid #fff;
}
.industry li:nth-child(2n) .industry-text::before{top: 240px; border-bottom:0; border-top: 12px solid #fff; }
.industry-text h3{font-size: 18px; margin-top: 40px;}
.industry-text p{text-align: left; line-height: 24px; margin-top: 15px; color: #999;} 
.industry-text a{display: inline-block; width: 140px; padding: 7px 0; border:1px solid var(--color); color: var(--color); margin-top: 25px; opacity: 0;}
.industry ul li:hover h3{margin-top: 5px;}
.industry ul li:hover .industry-text p{line-height: 22px; margin-top: 20px;}
.industry ul li:hover .industry-text a{ opacity: 1;}
.industry-text a:hover{background-color: var(--color); color: #fff;}
@media screen and (max-width: 1200px) {
	.industry-text{padding: 25px;}
}
@media screen and (max-width: 966px) {
	.industry ul{margin-top: 30px;}
	.industry ul li{width: 50%;}
}
@media screen and (max-width: 768px) {
	.industry{padding: 50px 0;}
}
@media screen and (max-width: 480px) {
	.industry ul li{width: 100%; margin-bottom: 15px; height: 440px;}
	.industry-img{height: 200px; }
	.industry li:nth-child(2n) .industry-img{ position: static; }
	.industry-text h3{font-size: 16px; margin-top: 20px;}
	.industry-text p{text-align: left; line-height: 24px; margin-top: 15px; color: #999;} 
	.industry-text a{ margin-top: 25px; opacity: 1;}
	.industry li:nth-child(2n) .industry-text::before{top: -12px;border-bottom: 12px solid #fff; border-top:0;}
}

/* 运营流程 */
.process{padding: 100px 0 80px;}
.process ul{margin-top: 50px;}
.process ul li{float: left; width: 25%; text-align: center; padding: 0 40px; height: 320px;}
.process-img{width: 100%;}
.process-img img{width: auto;}
.process-text h3{font-size: 18px; margin: 30px 0 20px;}
.process-text p{font-size: 14px; color: #999; line-height: 24px;}
@media screen and (max-width: 1200px) {
	.process ul li{padding: 0 20px;}
	.process-text h3{font-size: 16px;}
}
@media screen and (max-width: 966px) {
	.process ul li{width: 50%;}
}
@media screen and (max-width: 768px) {
	.process{padding: 50px 0;}
}
@media screen and (max-width: 480px) {
	.process ul li{width: 100%; height: auto; margin-bottom: 25px;}
	.process-text h3{margin: 10px 0 ;}	
}

/****** 新闻 ******/
.news-nav{text-align: center; border-bottom: 1px solid #ddd; color: #999;}
.news-nav a{margin: 0 30px; font-size: 16px; color: #999; padding: 20px 0; display: inline-block; transition: none;}
.news-nav a.active,.news-nav a:hover{color: var(--color); border-bottom: 2px solid var(--color);}
.news-list {background-color: #f5f5f5; padding: 50px 0 100px;}
.news-list li a{border-bottom: 1px solid #ddd; padding: 50px 20px; display: block;}
.news-list-img{float: left; width: 25%;}
.news-list-img img{width: 100%;}
.news-list-text{float: left; width: 70%; padding: 15px 0 15px 50px;}
.date{margin: 0px ; color: #999;}
.date span{display: inline-block; margin-right: 20px; font-size: 30px; color: #666;}
.news-list-text h3{font-size: 22px; margin: 45px 0 15px;}
.news-list-text p{ color: #999;}			
.news-list-more{float: left; width: 5%; padding-left: 35px;}
.news-list-more i{border:1px solid #999; font-size: 26px; padding: 82px 5px; display: inline-block;}
.news-list li:hover{background-color: #fff;}
.news-list li:hover .news-list-more i{background-color: var(--color); color: #fff; border-color: var(--color);}
@media screen and (max-width: 1000px) {
	.news-list-more{display: none;}
}
@media screen and (max-width: 768px) {
	.news-list { padding: 10px 0 70px;}
	.news-list-img,.news-list-text{float: none; width: 100%; padding: 10px 0 20px;}
	.news-list li a{padding: 10px;}
	.date span{font-size: 18px;}
	.news-list-text h3{font-size: 18px; margin: 15px 0 10px;}
}
@media screen and (max-width: 480px) {
	.news-nav a{margin: 0 15px; padding: 12px 0; font-size: 14px;}	
	
	
}

/* 新闻详情 */
.news-show-left{float: left; width: 80%; padding: 60px 50px 60px 0;}
.news-show-title{border-bottom:1px solid #ddd; padding-bottom: 15px;}
.news-show-left h3{font-size: 26px; margin: 15px 0;}
.news-show-left span{color: #666; font-size: 16px;}
.news-show-left span i{margin-right: 7px; color: #bbb; }
.news-content{margin-top: 30px;font-size: 16px; line-height: 26px; padding: 0 20px; color: #666;}
.news-content img{width: 100%;}

.news-show-right{float: right; width: 20%; padding: 60px 0;}
.news-show-nav {background-color: #fff; box-shadow: 0 0 4px #ddd; padding: 20px 25px; color: #666; margin-bottom: 20px; border-radius: 5px;}
.news-show-nav h3{border-bottom: 1px solid #eee; padding: 0 0 10px; font-size: 20px;}
.news-show-nav li{margin:10px 0; font-size: 16px; line-height: 26px;}
.news-show-nav li a{color: #666; display: block;}
.news-show-nav li a i{line-height: 30px;}
.news-show-nav li.active a,.news-show-nav li:hover a{color: var(--color);}

.tuijian h3{position: relative; padding-left: 15px;}
.tuijian h3::before{content: ""; position: absolute; left: 0; top: 4px; width: 5px; height: 55%; background-color: var(--color);}
.tuijian li a{color: #999; font-size: 14px;}

.page-views{position: relative; margin-top: 100px;}
.page-views::before{position: absolute; top: 0; left: 50%; content: ""; margin-left: -3px; width: 1px; height: 100%; background-color: #eee;}
.page-views ul li{float: left; width: 50%;}
.page-views ul li a{display: block; margin-top: 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.page-views ul li:first-child{padding-right: 10px;}
.page-views ul li:last-child{padding-left: 10px;}
.page-views ul li a:hover{color: var(--color);}
.page-views-hide{display: none;}

@media screen and (max-width: 768px) {
	.news-show-left,.news-show-right{float: none; width: 100%; padding: 40px 0;}
	.news-show-left h3{font-size: 20px; margin: 10px 0;}
	.news-show-left span{font-size: 14px;}
	.page-views{ margin-top: 50px;}
	.news-content{font-size: 14px; padding:10px;}
	.news-show-nav h3{font-size: 18px;}
	
}
@media screen and (max-width: 480px) {
	.news-show-left{padding: 20px 0;}
	.news-show-left h3{font-size: 16px; margin: 10px 0;}
	.news-show-left span{font-size: 14px;}
	.news-show-right{padding:30px 0;}
	.page-views::before{display: none;}
	.page-views ul {padding-top: 10px; border-top:1px solid #ddd;}
	.page-views ul li{float: none; width: 100%; padding: 0 !important; margin: 10px 0 15px;}
	.page-views ul li a{display: inline; }
	.news-content{padding:0px;}
}


/***** 营销推广 ******/
/* 菜单 */
.promotion-nav ul{margin: 50px -15px;}
.promotion-nav li{float: left; width: 33.33%; text-align: center; padding: 0px 15px; font-size: 26px;}
.promotion-nav li a{width: 100%; height: 230px; display: block; background-position: top center; background-repeat: no-repeat; background-size: cover;}
.promotion-nav li span{width: 100%; height: 100%; background-color: rgba(0,0,0,.7); display: block; color: #fff; padding-top: 95px;}
.promotion-nav li b{transform: rotate(90deg); display: block; font-family: '宋体'; opacity: 0; letter-spacing: -4px; animation: goyet 1s infinite;}
.promotion-nav li:hover span{padding-top: 80px; background-color: rgb(222,94,0,.9);}
.promotion-nav li:hover span b{opacity: 1;}
@keyframes goyet{
	0%   {transform: translateY(10px) rotate(90deg);}
	50%  {transform: translateY(20px) rotate(90deg);}
	100% {transform: translateY(10px) rotate(90deg);}
}
@media (max-width:768px) {
	.promotion-nav ul{margin: 30px 0px;}
	.promotion-nav li{padding: 15px 5px; font-size: 20px;}
	.promotion-nav li a{height: 130px;}
	.promotion-nav li span{padding-top: 35px;}
	.promotion-nav li span b{opacity: 1;}
	.promotion-nav li:hover span{padding-top: 35px; background-color: none;}
}
@media (max-width:480px) {
	.promotion-nav ul{margin: 20px 0px;}
	.promotion-nav li{font-size: 18px;}
	.promotion-nav li a{height: 100px;}
	.promotion-nav li span{padding-top: 20px;}
	.promotion-nav li:hover span{padding-top: 20px;}
}

/* seo介绍 */
.seo-about{background-color: #f5f5f5; padding: 50px 0;}
.seo-about-left,
.seo-about-right{float: left; width: 40%;}
.seo-about-left{padding: 50px 50px 50px 0; width: 60%; line-height: 30px;}
.seo-about-left h3{margin-top: 30px; padding-bottom: 30px; font-size: 30px; font-weight: bold;}
.seo-about-left p{margin-bottom: 35px; font-size: 16px; color: #777;}
.seo-about-left a{display:inline-block; padding: 0 30px; line-height: 38px; font-size: 16px; color: #fff; background-color: #666;border-radius: 4px;}
.seo-about-right{text-align: center; padding: 50px 5px;}
.seo-about-right img{max-width: 100%;}
.seo-about-left a:hover{background-color: var(--color);}

@media (max-width:768px) {
	.seo-about{padding: 30px 0;}
	.seo-about-left,
	.seo-about-right{ width: 100%; padding: 0;}
	.seo-about-left h3{margin-top: 20px; padding-bottom: 20px; font-size: 24px; }
	.seo-about-left p{margin-bottom: 15px; }
	.seo-about-right img{max-width: 60%;}
}


/*  */
.seo-title{text-align: center; padding: 0px 0 60px; font-size: 30px;}
@media (max-width:768px) {
	.seo-title{ padding: 40px 0 30px; font-size: 22px;}
}

/* seo选择 */
.seo-choose{padding: 100px 0; background-position: bottom center; background-repeat: no-repeat;}
.seo-choose-left,
.seo-choose-right{float: left; width: 30%;}
.seo-choose-left ul li,
.seo-choose-right ul li{float: none; margin-bottom: 20px; border: 1px solid #ddd; padding: 30px; }
.seo-choose-left ul li h3,
.seo-choose-right ul li h3{font-size:20px; color: #333; margin-bottom: 5px;}
.seo-choose-left ul li p,
.seo-choose-right ul li p{padding-top: 5px; color: #666;}
.seo-choose-center{position: relative; float: left; width: 40%; text-align: center; padding: 35px 10px 0;}
.seo-choose-center img{ max-width:100%;}
.seo-choose-left{text-align: right;}
.seo-choose-left ul li:hover,
.seo-choose-right ul li:hover{box-shadow: 0 0 7px #eee;}
@media (max-width:1300px) {
	.seo-choose-left ul li h3,
	.seo-choose-right ul li h3{font-size: 18px;}
	.seo-choose-center{padding-top:70px;}
}
@media (max-width:1050px) {
	.seo-choose-center{padding-top:140px;}
}
@media (max-width:940px) {
	.seo-choose-center{padding-top:220px;}
}
@media (max-width:768px) {
	.seo-choose{padding: 30px 0;}
	.seo-choose-left,
	.seo-choose-right{width: 100%; padding-top: 0; text-align: center;}
	.seo-choose-left ul li,
	.seo-choose-right ul li{float: none; margin-bottom: 15px; padding: 12px;}
	.seo-choose-center{display: none;}
}

/* 为什么做 */
.seo-why{background-color: #f5f6fa; padding: 100px 0; text-align: center;}
.seo-why ul{margin: 0 -20px; text-align: left;}
.seo-why li{float: left; width: 50%; padding: 15px 20px;}			
.seo-why li a{ padding: 30px; background-color: #fff; display: block;}
.seo-why li a img{max-width: 100%;}
.seo-why li a h3{ font-size: 24px; padding-bottom: 30px; position: relative;}
.seo-why li a h3::after{
	content: "";
	position: absolute;
	bottom: 15px;
	left:0;
	width: 70px;
	height: 1px;
	background-color: var(--color);
	transition: all .4s;
}
.seo-why li a p{line-height: 30px; color: #888; font-size: 18px; overflow: hidden;}
.seo-why .zixun{display:inline-block; padding: 0 30px; line-height: 38px; font-size: 16px; color: #fff; background-color: #666; border-radius: 4px; margin-top: 30px ;}
.seo-why .zixun:hover{background-color: var(--color);}
.seo-why li:hover a h3::after{width: 100%;}

@media (max-width:960px) {
	.seo-why ul{margin: 0 -15px;}
	.seo-why li{padding: 15px;}
	.seo-why li a h3{ font-size: 20px;}
	.seo-why li a p{line-height: 26px; font-size: 16px; }
}
@media (max-width:768px) {
	.seo-why{padding:30px 0;}
	.seo-why ul{margin: 0;}
	.seo-why li{ width: 100%; padding: 10px;}
	.seo-why li a{padding: 20px;}
	.seo-why li a h3{ font-size: 18px;}
	.seo-why li a p{line-height: 22px; font-size: 14px; }
	
}


/* sem介绍 */
.sem-about{ padding: 50px 0;}
.sem-about-left,
.sem-about-right{float: left; width: 40%;}
.sem-about-left{padding: 50px 50px 0 50px ; width: 60%; line-height: 30px;}
.sem-about-left h3{margin-top: 30px; padding-bottom: 30px; font-size: 30px; font-weight: bold;}
.sem-about-left p{margin-bottom: 35px; font-size: 16px; color: #777;}
.sem-about-left a{display:inline-block; padding: 0 30px; line-height: 38px; font-size: 16px; color: #fff; background-color: #666;border-radius: 4px;}
.sem-about-right{text-align: center; padding: 50px 5px;}
.sem-about-right img{max-width: 100%;}
.sem-about-left a:hover{background-color: var(--color);}

@media (max-width:768px) {
	.sem-about{padding: 30px 0;}
	.sem-about-left,
	.sem-about-right{ width: 100%; padding: 0;}
	.sem-about-left h3{margin-top: 20px; padding-bottom: 20px; font-size: 24px; }
	.sem-about-left p{margin-bottom: 15px; }
	.sem-about-right img{max-width: 60%;}
}

/* 自媒体介绍 */
.operate-about{background-color: #f5f5f5; padding: 50px 0;}
.operate-about-left,
.operate-about-right{float: left; width: 40%;}
.operate-about-left{padding: 50px 50px 50px 0; width: 60%; line-height: 30px;}
.operate-about-left h3{margin-top: 30px; padding-bottom: 30px; font-size: 30px; font-weight: bold;}
.operate-about-left p{margin-bottom: 35px; font-size: 16px; color: #777;}
.operate-about-left a{display:inline-block; padding: 0 30px; line-height: 38px; font-size: 16px; color: #fff; background-color: #666;border-radius: 4px;}
.operate-about-right{text-align: center; padding: 50px 5px;}
.operate-about-right img{max-width: 100%;}
.operate-about-left a:hover{background-color: var(--color);}

@media (max-width:768px) {
	.operate-about{padding: 30px 0;}
	.operate-about-left,
	.operate-about-right{ width: 100%; padding: 0;}
	.operate-about-left h3{margin-top: 20px; padding-bottom: 20px; font-size: 24px; }
	.operate-about-left p{margin-bottom: 15px; }
	.operate-about-right img{max-width: 60%;}
}




/* 联系 */
.contact{padding: 50px 0;}
.contact ul{margin: 30px 0 50px;}
.contact ul li{margin:15px 0; font-size: 18px;}
.contact ul li i{font-size: 20px; margin-right: 10px;}
#map{width: 100%; height: 350px;}