/* ========== */
/* = NY-BANNER = */
/* ========== */
.ny-banner{ height: 400px; width: 100%; background-image: url(../image/ny_banner.jpg); position: relative;}
.ny-banner .gary{ position: absolute; bottom: 0; left:0; width:6.5%; height: 100%; background: #FFFFFF;}
.ny-banner .gary span{ position: absolute; display:block; bottom:60px; left:60px; font-size: 14px; line-height: 20px; width: 350px; text-transform: uppercase; transform:rotate(-90deg);  -webkit-transform:rotate(-90deg);  transform-origin:0 100%; -webkit-transform-origin:0 100%; letter-spacing: 3px;} 
.ny-banner .text{ float:left; max-width:60%; padding-left: 7%; padding-top:140px; color: #FFFFFF;} 
.ny-banner .text h2{ font-size: 44px;}
.ny-banner .text p{ margin-top: 42px; font-size: 20px; line-height: 30px;  color#ffffff; color:rgba(255,255,255,.8); letter-spacing:4px;}
.ny-banner .img{ float: right;}

@media (max-width:1460px){
	.ny-banner .text{ max-width: 55%;}
	.ny-banner .text p{ font-size: 18px;}
}
@media (max-width:1300px){
	.ny-banner .text{ max-width: 50%;}
}



.ny-tit{ text-align: center; font-weight: lighter; font-size: 26px; color: #000000;}
.ny-tit span{ color: #288fd4;}

.ny-tab{ padding: 30px 0 60px; border-bottom: 1px solid #e5e5e5; text-align: center;  }
.ny-tab a{ margin: 0 50px; display: inline-block; line-height:38px; font-size: 16px; color: #333333; position: relative;}
.ny-tab a:after{ content: ""; position: absolute; bottom: 0; left:0; width: 0%; height: 1px; background: #288fd4; transition: all ease .4s; -webkit-transition: all ease .4s;}
.ny-tab a.active,
.ny-tab a:hover{ color: #288fd4;}
.ny-tab a.active:after,
.ny-tab a:hover:after{ width: 100%;}

.page{ text-align: center;}
.page a,
.page span{ margin: 0 2px; display: inline-block; height: 30px; line-height: 30px; min-width: 30px; padding: 0 3px; text-align: center; background: #f4f4f4; color: #999999;} 
.page a:hover,
.page a.current,
.page span.current{ background: #288fd4; color: #FFFFFF;}


.media-tit{ padding-bottom:22px; font-size: 24px; color: #333333; position: relative; text-align: center; }
.media-tit:after{ content: ""; position: absolute; bottom: 0; left:50%; margin-left: -15px; width: 30px; height:2px; background: #288fd4; color:#333333;}
.media-tit p{ margin-top: 10px; font-size: 14px; color:#666666;}



.about-more{ display: inline-block; line-height: 50px; background: #288fd4; padding: 0 32px; text-align: center; color: #FFFFFF;}
.about-more i{ display: inline-block; margin-right: 14px; vertical-align: middle; width: 22px; height: 22px; background: url(../image/ico_about_more.png);}
.about-more span{ display: inline-block; vertical-align: middle; font-size: 16px; color: #FFFFFF;}
.about-more:hover{ background: #0079ca;}
.about-more:hover i{ transform: translateX(7px); -webkit-transform: translateX(7px); }




/* ========== */
/* = WEBCASE = */
/* ========== */
.webcase{ margin: 30px auto; padding: 75px 50px; background: #FFFFFF;}
.webcase .web-list{ margin: 15px 0 60px;}
.webcase .web-list li{ margin-top: 30px;}


/* ========== */
/* = WEBCASE-DETAIL = */
/* ========== */
.webcase-detail{ margin: 30px auto; background: #eaeaea;}
.webcase-detail-left{ float: left; width: 58%; max-width: 800px; background:#FFFFFF;}
.webcase-intro{ position:relative; top:auto; left:auto; float: right; width: 40%; padding: 40px 50px 60px; background:#FFFFFF;}
.webcase-intro.fx{ position: fixed; top:134px; z-index:9; }
.webcase-intro.fxb{ position: fixed; top:auto; bottom:330px; z-index:9; }

.webcase-intro .title{ padding-right: 70px; font-size: 30px; color: #333333; position: relative;}
.webcase-intro .title i{ font-style: normal; font-size: 16px; color: #999999;}
.webcase-intro .text{ margin-top: 15px; letter-spacing:4px;}
.webcase-intro .des{ margin-top: 38px; max-width: 420px; color: #999999; line-height: 30px; font-style: italic;}
.webcase-intro .bt{ margin-top: 38px;}
.webcase-intro .bt a{ float: left; width: 42%; margin-right:8%; text-align: center; display: inline-block; line-height: 44px; background: #288fd4; border: 1px solid #288fd4; color: #FFFFFF;}
.webcase-intro .bt a i{ font-style: normal; padding-left: 38px; display: inline-block; background: url(../image/ico_eye.png) no-repeat left;}
.webcase-intro .bt a:nth-child(2) i{ background: url(../image/ico_contact.png) no-repeat left;}
.webcase-intro .bt a:hover{ background:#FFFFFF; color: #288fd4;}
.webcase-intro .bt a:hover i{  background: url(../image/ico_eyeh.png) no-repeat left;}
.webcase-intro .bt a:nth-child(2):hover i{ background: url(../image/ico_contacth.png) no-repeat left;}
.webcase-intro .list-tit{ margin-top: 35px; font-size: 20px;}
.webcase-intro .list li{ margin-top: 22px; float: left; width: 46%; margin-right:8%;}
.webcase-intro .list li:nth-child(2n){ margin-right: 0;}
.webcase-intro .list li a{ display: block;}
.webcase-intro .list li .img{ overflow: hidden;}
.webcase-intro .list li .intro{ margin-top: 10px; position: relative; padding-right: 55px;}
.webcase-intro .list li .intro span{ letter-spacing: 1px; color: #333333;}
.webcase-intro .list li .intro em{ font-style: normal; color: #999999; font-size: 12px;} 
.webcase-intro .list li .intro:after{ content: ""; position: absolute; right:10px; top:50%; margin-top: -6px; width: 21px; height: 12px; background: url(../image/ico_more.png) right no-repeat; -webkit-transition: all ease .4s; transition: all ease .4s;}
.webcase-intro .list li a:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1);}
.webcase-intro .list li a:hover .intro span{ color: #288fd4;}
.webcase-intro .list li a:hover .intro:after{ transform: translateX(10px); -webkit-transform: translateX(10px); background: url(../image/ico_moreh1.png) right no-repeat;}
.return{ position: absolute; top:0; right:0; display: inline-block; width: 37px; height: 37px; background: url(../image/ico_return.png) #288fd4;}
.return:hover{ background: url(../image/ico_return.png)  #0079ca; }


/* ========== */
/* = WECHAT-LIST = */
/* ========== */
.webcase .wechat-list{ margin:35px -14px 60px;}
.wechat-list li{ float:left; width: 33.3333333%; padding: 14px;}
.wechat-list li:nth-child(3n+1){ clear: both;}
.wechat-list .item{ padding:35px; -o-box-shadow:0 0 30px rgba(0,0,0,.08); -ms-box-shadow:0 0 30px rgba(0,0,0,.08); -moz-box-shadow:0 0 30px rgba(0,0,0,.08); -webkit-box-shadow:0 0 30px rgba(0,0,0,.08); box-shadow:0 0 30px rgba(0,0,0,.08);}
.wechat-list .item .img{ float: left; width:45%; }
.wechat-list .item .img div{ width: 135px; height: 268px; padding: 22px 5px 0; background-image: url(../image/wechat_phone.png); background-size: cover;}
.wechat-list .item .text{ margin-left:5%; float: left; width:50%;}
.wechat-list .item .tit{ padding-bottom: 15px; border-bottom: 1px solid #ededed; padding-top:25px; position: relative;}
.wechat-list .item .tit:after{ content: ""; position: absolute; bottom: 0; left:0; width:30px; height: 2px; background: #057dcb;}
.wechat-list .item .tit span{ display:inline-block; font-size: 18px; color: #202020;}
.wechat-list .item .tit p{ margin-top: 5px; font-size: 15px; color: #aaaaaa;}
.wechat-list .item .erweima{ margin-top: 20px; max-width: 110px; text-align: center;}
.wechat-list .item .erweima div{ -o-box-shadow:0 0 30px rgba(0,0,0,.15); -ms-box-shadow:0 0 30px rgba(0,0,0,.15); -moz-box-shadow:0 0 30px rgba(0,0,0,.15); -webkit-box-shadow:0 0 30px rgba(0,0,0,.15); box-shadow:0 0 30px rgba(0,0,0,.15);}
.wechat-list .item .erweima p{ margin-top: 15px; color: #aaaaaa;}
.wechat-list li:nth-child(3n-2){ -webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
.wechat-list li:nth-child(3n-1){ -webkit-transition-delay: 0.6s; transition-delay: 0.6s;}
.wechat-list li:nth-child(3n){ -webkit-transition-delay: 0.9s; transition-delay: 0.9s;}

@media (max-width:1420px) {
	.wechat-list .item{ padding: 25px;}
	.wechat-list .item .img{ width:55%;}
	.wechat-list .item .text{ max-width:40%;}
	.wechat-list .item .tit span{ font-size: 16px;}
}



/* ========== */
/* = MARKET = */
/* ========== */
.market{ margin: 30px 0; padding: 60px 7% 65px; background: #FFFFFF;}
.market .market-list{ margin-top: 50px; padding: 15px 0 60px; border-top:1px solid #ededed;}
.market-list li{ margin-top: 40px; float: left; width: 48%; margin-right:4%;}
.market-list li:nth-child(2n){ margin-right: 0;}
.market-list li:nth-child(1),
.market-list li:nth-child(2){ margin-bottom: 20px; }
.market-list li a{ position: relative; display: block; box-shadow:0 0 20px rgba(206,206,206,.3); -webkit-box-shadow:0 0 20px rgba(206,206,206,.3); }
.market-list li a:before{ z-index: 1; content: ""; position: absolute; bottom: 0; left:0; width: 0; height: 2px; background: #288fd4; transition: ease all .6s; -webkit-transition: ease all .6s;}
.market-list li .img{ float:left; position: relative; width: 171px;  height: 200px; border-right: 1px solid #f0f0f0;}
.market-list li .img img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-height: 100%; max-width: 100%; }
.market-list li .intro{  margin-left: 171px; padding: 25px 25px 0;}
.market-list li .intro>span{ padding-bottom: 13px; display: block;  font-size: 20px; color: #333333; position: relative;}
.market-list li .intro>span:after{ content:""; position: absolute; bottom:0; left:0; width: 30px; height: 1px; background:#333333;}
.market-list li .intro p{ margin: 12px 0 18px; line-height: 28px; height: 56px; color: #999999; overflow: hidden;}
.market-list li .intro div{ line-height:40px; position: relative;}
.market-list li .intro div i{ font-style:normal; font-size: 12px;}
.market-list li .intro div em{ position: absolute; right:0; top:50%; margin-top: -6px; width: 21px; height: 12px; background: url(../image/ico_more.png) right no-repeat;}
.market-list li a:hover:before{ width: 100%;}
.market-list li a:hover .intro div i{ color: #288fd4;}
.market-list li a:hover .intro div em{ transform:translateX(-10px); -webkit-transform: translateX(-10px); width:36px; background: url(../image/ico_moreh1.png) right no-repeat;}
.market-list li:nth-child(2n-1){ -webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
.market-list li:nth-child(2n){ -webkit-transition-delay: 0.6s; transition-delay: 0.6s;}
.market-more{ margin: 0 auto; display: block; line-height:44px; width: 194px; cursor: pointer;}
.market-more i{ width: 23px; height: 23px; background: url(../image/home_more_white.png);}



.market-list .li-logo{ margin-top: 20px; float: left; width: 20%; padding: 0 10px; margin-right: 0;}
.market-list .li-logo a{ padding-bottom: 54%; position: relative;}
.market-list .li-logo a:hover:before{ width: 0%;}


.market-logo{ margin: 30px 0 50px; padding: 55px 7% 80px; background: #FFFFFF;}
.market-logo .market-logo-box{ margin-top: 40px;}
.market-logo-box{ margin-top: 60px; border: 1px solid #e5e5e5; border-top: none;}
.market-logo-box li{ float: left; width: 20%; border-right: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; overflow: hidden;}
.market-logo-box li:nth-child(5n){ border-right: none;}
.market-logo-box li a{ display: block; padding-bottom: 50%; position: relative;}
.market-logo-box li img{  position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-height: 90%; max-width: 90%;transition: ease all .4s; -webkit-transition: ease all .4s;}
.market-logo-box li:hover img{transform: scale(1.1); -webkit-transform: scale(1.1);}
.market-logo-box li .more{ padding:12% 0 0 15%;}
.market-logo-box li .more p{ font-size: 18px; color: #333333;}
.market-logo-box li .more span{ margin-top:7%; width: 90px; font-size: 12px; display: inline-block; position: relative;}
.market-logo-box li .more span i{ position: absolute; margin-top: -6px; top:50%; left:70px; width: 20px; height: 12px; background: url(../image/ico_moreh1.png) right no-repeat;}
.market-logo-box li .more:hover span i{ width: 36px;}


/* ========== */
/* = MARKET-DETAIL = */
/* ========== */
.market-detail{ margin:20px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.market-detail .left{ width: 40%;}
.market-detail .right{ width: 60%; padding:30px 5%;}
.market-detail .title{ padding-bottom: 20px; border-bottom: 1px dashed #e7e7e7;}
.market-detail .title img{ display: inline-block; vertical-align: middle;}
.market-detail .title h1{ display: inline-block; vertical-align:middle; font-size: 32px; color: #333333; font-weight: bold;}
.market-detail .title h1 span{ margin-left: 20px; font-size: 16px; color: #666666; letter-spacing:5px; font-weight: normal; }
.market-detail .title a{ margin-top: 35px; float: right; color: #288fd4;}
.market-detail .detail{ margin-top: 20px; max-width: 665px; position:relative;}
.market-detail .detail .return{ top:auto; bottom: 0;}
.market-detail .detail .tit{ margin-top:25px; font-size: 20px; color: #333333;}
.market-detail .detail .des{ margin-top: 12px; color: #999999; line-height: 30px;}
.market-detail .detail .des span{ color: #288fd4;}
.market-detail .detail .des i{ font-style: normal; color: #333333;}
.market-detail .detail .p-tip{ position: relative; padding-left: 55px;}
.market-detail .detail .p-tip span{ position: absolute; top:0; left:0; }

.revelant-market{ margin-bottom: 80px; padding: 60px 7% 65px; background:#FFFFFF;}
.revelant-market .theme{ text-align: center; font-size: 28px; color: #333333;}
.revelant-market ul{ margin-bottom: 50px;}


/* ========== */
/* = ABOUT = */
/* ========== */
.about-tit{ padding-bottom: 20px; letter-spacing: 1px; position: relative; color: #333333; font-size: 26px;}
.about-tit span{ color: #666666;}
.about-tit:after{ content: ""; position: absolute; bottom:0; left:0; width: 32px; height: 2px; background: #000000;} 

.about-box{ margin: 20px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.about-box .img{ width: 45%; max-width: 620px;}
.about-box .right{ width: 55%; padding:  20px 5%;}
.about-box .tip{ margin-top: 15px; color:#333333; font-size: 16px;}
.about-box .des{  margin-top: 10px; line-height: 30px; color: #999999;}
.about-box .text{ margin-top: 30px; text-align: center;}
.about-box .text .item{ float: left; width:25%; text-align: center;}
.about-box .text .item span{ display: inline-block; position: relative; font-weight:lighter; font-size: 50px; line-height:50px; letter-spacing: -1px;}
.about-box .text .item b{ display:inline-block;  font-weight: lighter;}
.about-box .text .item span i{ position: absolute; top:-12px; right:-15px; font-style: normal; font-size: 22px;}
.about-box .text .item:nth-child(1) span i{ font-size: 14px;}
.about-box .text .item p{ margin-top: 5px; font-size: 16px;}

.about-brand{ margin: 20px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.about-brand ul{ width: 70%; padding: 0 5%;}
.about-brand ul li{ padding:25px 5px; float: left; width: 33.33333%; text-align: center;}
.about-brand ul li p{ margin: 15px auto 0; max-width: 190px; font-size: 16px; line-height: 24px;}
.about-brand .box{ width: 30%;  padding: 87px 5% 100px; background-image: url(../image/about_img2.jpg); color: #FFFFFF;}
.about-brand .box .about-tit{ color:#FFFFFF;}
.about-brand .box .about-tit:after{ background: #bfc4c9;} 
.about-brand .box .tip{ font-size: 16px; margin-top: 15px;}
.about-brand .box .about-more{ margin-top: 85px;}

.about-honor{ margin: 20px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.about-honor .img{ width: 64%;}
.about-honor .text{ width: 36%; padding: 20px 6%;}
.about-honor .text .tip{ margin-top: 20px; font-size: 16px; color: #333333;}
.about-honor .text .des{ margin-top: 15px; line-height: 30px; color: #999999;}

.about-customer{ margin: 20px 0 80px; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.about-customer .box{ padding: 65px 2% 65px 5%; width: 30%; background: #f6f6f6;}
.about-customer .box .tip{ margin-top: 20px; font-size: 16px;}
.about-customer .box .des div{ margin-top: 50px; margin-right: 45px; float: left; }
.about-customer .box .des div:last-child{ margin-right: 0;}
.about-customer .box .des div p{ font-size: 16px; margin-bottom: 15px;}
.about-customer .box .about-more{ margin-top: 50px;}
.about-customer ul{ width: 70%; padding: 0 2%;}
.about-customer ul li{ float: left; width: 20%; }
.about-customer ul li a{ display: block; position: relative; padding-bottom: 50%; }
.about-customer ul li a img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-height: 80%; max-width: 80%; }

@media (max-width:1480px) {
	.about-tit{ font-size: 22px;}
	
	.about-box .right{ padding: 20px 4%;}
	.about-box .text .item p{ font-size: 14px;}
	.about-brand ul{ width: 65%;}
	.about-brand .box{ width: 35%;}
	.about-brand .about-more{ padding: 0 25px;}
	
	.about-customer .box{ padding-left:40px;}
}
@media (max-width:1280px) {
	.about-box .des{ font-size: 13px; line-height: 24px;}	
	.about-honor .text .des{ font-size: 13px; line-height: 24px;}
	.about-customer .box .des div{ margin-right: 20px;}
}


/* ========== */
/* = NEWS = */
/* ========== */
.news{ margin: 30px 0; padding: 65px 7% 90px; background: #FFFFFF;}
.news .ny-tab{ padding-bottom: 50px;}
.news .ny-tab a{ font-size: 20px; }
.news-list{ margin-bottom:60px;}
.news-list li{ padding: 30px 0; border-bottom: 1px solid #ebebeb;}
.news-list li a{ display: block;}
.news-list li .img{ float: left; overflow: hidden; width: 310px;}
.news-list li .text{ margin-left:350px;}
.news-list li .text .tit{ font-size: 18px; line-height: 46px;}
.news-list li .text p{ line-height: 26px; height: 52px; overflow: hidden; color: #999999;}
.news-list li .text .more{ margin-top: 30px;}
.news-list li .text .more i{ float: left; font-style:normal;}
.news-list li .text .more span{ float: right; display: inline-block; padding-right: 40px; color: #3a9bf1; position: relative;}
.news-list li .text .more span:after{ content: ""; position: absolute; top:50%; right:0; margin-top: -6px; width: 24px; height:12px; background: url(../image/ico_moreh1.png) right no-repeat;}
.news-list li a:hover .img img{ transform: scale(1.1); -webkit-transform: scale(1.1);}
.news-list li a:hover .text .tit{ color: #288fd4;}
.news-list li a:hover .text .more span{ transform:translateX(-20px); -webkit-transform:translateX(-20px);}

.revelant-news{ margin-bottom: 50px; padding: 40px 7% 65px; background: #FFFFFF;}
.revelant-news .theme{text-align: center; font-size: 28px; color: #333333;}
.revelant-news ul{ margin-top: 20px;}
.revelant-news li{ margin-top: 15px; float: left; width: 48.5%; margin-right:3%;}
.revelant-news li:nth-child(2n){ margin-right: 0;}
.revelant-news li a{ display: block;  padding: 35px 40px; -webkit-box-shadow:0 0 20px rgba(206,206,206,.3); box-shadow:0 0 20px rgba(206,206,206,.3); position:relative;}
.revelant-news li p{ font-size: 16px;}
.revelant-news li span{ margin-top: 20px; display: block;}
.revelant-news li i{ position: absolute; bottom:40px; right:45px; width:24px; height:12px; background:url(../image/ico_moreh1.png) right no-repeat;}
.revelant-news li a:hover{ background: #288fd4; color: #FFFFFF;}
.revelant-news li a:hover i{background:url(../image/ico_more_white.png) right no-repeat; transform:translateX(-100%); -webkit-transform:translateX(-100%);}


/* ========== */
/* = NEWS-DETAIl = */
/* ========== */
.news-left{ float: left; margin: 30px 0 55px; width: 71%;}
.news-detail{ background: #FFFFFF;  padding: 50px 65px 70px;}
.news-detail .title{ max-width: 826px; margin: 0 auto; padding-bottom: 40px; font-size: 20px; color: #444444; line-height: 32px; border-bottom:1px solid #d2d2d2; text-align: center;}
.article-come{ line-height:26px; margin-top:25px; text-align: center;}
.article-come i{ font-style: normal; vertical-align: middle;}
.article-come span{ margin:0 20px; padding-left: 28px; display: inline-block; vertical-align: middle; position: relative;}
.article-come .bdsharebuttonbox{ display:inline-block; vertical-align: middle;}
.article-come .span-date{ background: url(../image/ico_time.jpg) no-repeat left;}
.article-come .span-art{ background: url(../image/ico_art1.jpg) no-repeat left;}
.article-come .span-share{ background: url(../image/ico_share.jpg) no-repeat left;}
.news-article{ margin-top: 15px; padding:55px 0; border-top: 1px solid #eeeeee; line-height: 30px; color: #999999;}
.news-detail .detail{ margin-top:40px; line-height: 30px;}

.news-lable{ margin-top: 50px; position: relative; min-height: 37px; padding-right: 100px;}
.news-lable .lable{ float: left; color:#333333;}
.news-lable .lable span{ display: inline-block; vertical-align: middle;}
.news-lable .lable a{ margin-left: 10px; font-size: 13px; display: inline-block; vertical-align: middle; border: 1px solid #888; color:#333333; padding:5px 20px;}
.news-lable .lable a:hover{ color: #288fd4; border: 1px solid #288fd4;}

.flip{ margin-top:40px;}
.flip a{ max-width:48%; line-height:30px;}
.flip .prev{ float: left; padding-left:30px; background: url(../image/flip_prev.png) left no-repeat;}
.flip .next{ float: right; padding-right:30px;  background: url(../image/flip_next.png) right no-repeat;}
.flip a:hover{ color: #288fd4;}
.flip .prev:hover{ background: url(../image/flip_prevh1.png) left no-repeat;}
.flip .next:hover{ background: url(../image/flip_nexth1.png) right no-repeat;}


.interest-box{ margin-top: 30px; padding: 40px 20px; background:#FFFFFF;}
.interest-box .box{ float: left; width: 50%;}
.interest-box .box .tit{ margin-bottom: 10px; font-size: 16px; color: #555555; padding-left: 30px;}
.interest-box .box .tit span{ padding-bottom: 10px; display: block; border-bottom: 1px solid #d1d1d1;}
.interest-box .box li a{ margin-top:5px; display: block; padding: 0 95px 0 30px; line-height: 26px; height: 26px; font-size: 12px; position: relative;}
.interest-box .box li a:after{ content: ""; position: absolute; right:40px; top:50%; margin-top:-6px; width: 17px; height: 12px; background: url(../image/ico_more.png) right no-repeat; transition: ease all .6s; -webkit-transition: ease all .6s; }
.interest-box .box li a:before{ content:""; position: absolute; left:14px; top:50%; margin-top: -4px;  width: 8px; height: 8px; border:2px solid #FFFFFF; border-radius: 100%;}
.interest-box .box li a span{ display: inline-block; margin-right: 15px;}
.interest-box .box li a:hover{ background: #2e9bfd; color: #FFFFFF;}
.interest-box .box li a:hover:after{ background: url(../image/ico_more_white.png) right no-repeat; transform:translateX(100%); -webkit-transform:translateX(100%);}

.news-right{ float: right; margin: 30px 0 55px; width: 27%;}
.news-right-box{ background: #FFFFFF; padding: 50px 15px 55px;}
.news-right-box .theme{text-align: center; font-size: 20px; color: #333333;}
.news-right-box ul{ margin-top: 20px;}
.news-right-box li{ margin-top: 12px;}
.news-right-box li a{ display: block; padding: 30px 20px; font-size: 12px; -webkit-box-shadow:0 0 20px rgba(206,206,206,.3); box-shadow:0 0 20px rgba(206,206,206,.3); position:relative;}
.news-right-box li span{ margin-top: 15px; display: block;}
.news-right-box li i{ position: absolute; bottom:25px; right:25px; width:20px; height:12px; background:url(../image/ico_moreh1.png) right no-repeat;}
.news-right-box li a:hover{ background: #288fd4; color: #FFFFFF;}
.news-right-box li a:hover i{background:url(../image/ico_more_white.png) right no-repeat; transform:translateX(-100%); -webkit-transform:translateX(-100%);}


/* ========== */
/* = CONTACT = */
/* ========== */
.contact{ margin: 30px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.contact .left{ padding: 95px 5% 110px; width: 37.8%; background-image: url(../image/contact_bg.jpg); color: #FFFFFF;}
.contact .left img{ margin: 0;}
.contact .left .tit{ margin-top: 60px; font-size: 18px; color: #e2e2e2;}
.contact .left p{  margin-top: 10px; max-width: 360px; font-size: 20px; line-height: 30px; }
.contact .left p a{ color: #FFFFFF;}
.contact .diagnosis-box{ width: 62.2%; padding:30px 8%;}
.contact .diagnosis-box .theme{  margin-bottom: 85px;}
.contact .diagnosis-box .p1{ margin-top: 35px;}
.contact .diagnosis-box .button{ margin-top:12%;}



/* ========== */
/* = OPINION = */
/* ========== */
.opinion-cover{ margin: 30px 0; background: #FFFFFF; text-align: center;}
.opinion-cover .box{  padding: 50px 5% 80px; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.opinion-cover .box .text{ width:56%; }
.opinion-cover .box .con{display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; }
.opinion-cover .box .con div{ width: 31%; margin-top: 42px;}
.opinion-cover .box .con div span{ font-size: 45px; font-weight: bold; color: #288fd4; display: block;}
.opinion-cover .box .con div p{ margin-top: 25px; font-size: 16px; line-height: 34px;}
.opinion-cover .box .con div p i{ font-style: normal; color: #288fd4; font-weight: bold; font-size: 20px;}
.opinion-cover .box .img{ width:38%;}
.opinion-cover .bg{ padding: 50px 5% 60px; background: #f7f6f7; }
.opinion-cover ul{ margin: 0 -12px;}
.opinion-cover li{ float: left; width: 20%; padding: 0 12px;}
.opinion-cover .item{  background: #FFFFFF; text-align: center; padding: 40px 10px; position: relative;}
.opinion-cover .item .ico{ display: inline-block; width: 53px; height: 53px; position: relative; z-index: 1; background: #248cd6; border-radius: 100%; overflow: hidden;}
.opinion-cover .item .ico .hover{ position: absolute; top:0; left:0; opacity: 0; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
.opinion-cover .item span{ margin: 18px auto 0; padding-bottom: 18px; max-width: 150px; display: block; font-size: 16px; color: #333; border-bottom: 1px solid #cacacf;}
.opinion-cover .item p{ margin-top: 20px; display: block; font-size: 14px; line-height:32px; min-height:96px;}
.opinion-cover .item:hover .ico{ background: #FFFFFF;}
.opinion-cover .item:hover .ico .default{ opacity:0; transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg);}
.opinion-cover .item:hover .ico .hover{ opacity:1; transform:rotateY(0deg); -webkit-transform:rotateY(0deg);}
.opinion-cover .item:hover{ background: #248cd6; color: #FFFFFF;}
.opinion-cover .item:hover span{ color: #FFFFFF;  border-bottom: 1px solid #FFFFFF;}

.opinion-cover .about-more{ margin-top: 50px; font-size: 16px;}
.opinion-cover .about-more i{ background-image: url(../image/ico_heart.png);}


.opinion-data{ margin: 30px 0; padding: 60px 7% 70px; background: #FFFFFF; text-align: center;}
.opinion-data .content{ margin: 40px auto 55px; max-width: 322px; position: relative;}
.opinion-data .line{ position: absolute; font-size: 16px; line-height: 22px;}
.opinion-data .line i{ display: inline-block; vertical-align: middle; width: 8px; height: 8px; background: #248cd6; border-radius: 100%; -webkit-animation: imageAnimation 2s linear infinite 0s; animation: imageAnimation 2s linear infinite 0s}
.opinion-data .line span{ display: inline-block; vertical-align: middle; margin:0 10px;}
.opinion-data .line-01{ right:275px; top:-5px; width:308px; height: 54px; background: url(../image/line_01.png) bottom no-repeat; text-align: left;}
.opinion-data .line-02{ right:322px; top:114px; width:350px; height: 58px; background: url(../image/line_02.png) bottom no-repeat; text-align: left;}
.opinion-data .line-03{ right:270px; top:275px; width:395px; height: 42px; background: url(../image/line_03.png) bottom no-repeat; text-align: left;}
.opinion-data .line-04{ text-align: right; left:275px; top:-5px; width:308px; height: 54px; background: url(../image/line_04.png) bottom no-repeat; text-align: right;}
.opinion-data .line-05{ text-align: right; left:322px; top:114px; width:350px; height: 58px; background: url(../image/line_05.png) bottom no-repeat; text-align: right;}
.opinion-data .line-06{ text-align: right; left:270px; top:275px; width:310px; height: 42px; background: url(../image/line_06.png) bottom no-repeat; text-align: right;}
.opinion-data .about-more{ font-size: 16px;}
.opinion-data .about-more i{ background-image: url(../image/ico_data.png);}

@-webkit-keyframes imageAnimation {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	8% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	25% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes imageAnimation {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	8% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	25% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.opinion-system{ margin: 30px 0;  padding: 60px 0 70px; background:#FFFFFF;}
.opinion-system .content{ margin-top: 35px;  display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #fbfafa; padding: 0 5%; }
.opinion-system .content .text{ width: 50%; padding: 20px 0; text-align: center;}
.opinion-system .content .text .con{ max-width: 540px; display: inline-block; text-align: left;}
.opinion-system .content .text h2{ font-weight: bold; font-size: 20px; color: #288fd4;}
.opinion-system .content .text li{ margin-top: 50px; float: left; width: 48%; margin-right:4%;}
.opinion-system .content .text li:nth-child(2n){ margin-right: 0;}
.opinion-system .content .text li img{ float: left;}
.opinion-system .content .text li p{ margin-left:80px; font-size: 16px; line-height: 60px;}
.opinion-system .content .img{ width: 50%;}
.opinion-system .box { padding: 0 5%; text-align: center; max-width: 1180px; margin:0 auto;}
.opinion-system .box li{ margin-top:60px; padding-left: 38px; float: left; width:48%; margin-right:4%; text-align:left; font-size: 16px; position: relative;}
.opinion-system .box li:nth-child(2n){ margin-right: 0;}
.opinion-system .box li:nth-child(2n+1){  clear: both;}
.opinion-system .box li:before{ content: ""; position: absolute; top:50%; left:0; width: 4px; height:4px; background: #61626b; border-radius: 100%;}
.opinion-system .box li span{ color: #288fd4; font-size: 20px;}
.opinion-system .about-more{ margin-top: 70px; font-size: 16px; padding: 0 50px;}
.opinion-system .about-more i{ background-image: url(../image/ico_heart.png);}


.opinion-inter{ padding: 60px 0 75px; background-image: url(../image/opinion_inter.jpg); background-size: cover; text-align: center;}
.opinion-inter ul{ padding:50px 60px;}
.opinion-inter li{ float: left; width: 33.33333%;}
.opinion-inter li .ico{ display: inline-block; width: 76px; height:76px; position: relative; z-index: 1;  border-radius: 100%; overflow: hidden;}
.opinion-inter li .ico .hover{ position: absolute; top:0; left:0; opacity: 0; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
.opinion-inter li span{ display: block; margin-top: 30px; font-size: 18px; color: #333333;}
.opinion-inter li p{ margin: 15px auto 0; max-width: 300px; font-size: 16px; line-height: 26px;}
.opinion-inter li:hover .ico .default{ opacity:0; transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg);}
.opinion-inter li:hover .ico .hover{ opacity:1; transform:rotateY(0deg); -webkit-transform:rotateY(0deg);}
.opinion-inter .about-more{ font-size: 16px;}
.opinion-inter .about-more i{ width: 24px; height:24px; background-image: url(../image/ico_zx.png);}




/* ========== */
/* = DATA = */
/* ========== */
.data-box{ margin: 30px 0; background:#FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF; }
.data-box .img{ width: 56%;}
.data-box .text{ width: 44%; padding:20px 10px 20px 6%;}
.data-box .text .tit{ font-size: 24px; color: #333333; line-height: 60px;}
.data-box .about-more{ margin-top:12%; padding: 0 50px; font-size: 16px; line-height: 38px; font-size: 12px;}
.data-box .about-more i{ width: 24px; height: 24px; background-image: url(../image/ico_light.png);}

.data-system{ margin: 30px 0; padding: 26px 50px 26px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;text-align: center; }
.data-system .text{ padding:0 5%; width: 60%;}
.data-system .des{  margin-top:4%; position: relative; font-size: 16px; line-height: 24px; color:#666;}
.data-system li{ margin-top: 5%; float: left; width: 25%; text-align: center;}
.data-system li p{ margin-top: 15px; font-size: 16px; line-height: 24px; color: #999999;}
.data-system .img{ width: 40%;}

.data-advantage{ margin: 30px 0; background:#FFFFFF; padding-top: 30px;}
.data-advantage .theme{ font-size: 24px; text-align: center; padding-bottom: 30px;  border-bottom: 1px solid #eaeaea;}
.data-advantage ul{ overflow: hidden;}
.data-advantage li{ float: left;  width: 33.33333%; padding: 50px 5% 6%;}
.data-advantage li:nth-child(2n){ background: #fbfafa;}
.data-advantage li img{ margin: 0;}
.data-advantage li span{ display: block; margin-top: 40px; font-size: 24px;}
.data-advantage li p{ margin-top: 10%; font-size: 18px; color: #999999;}
.data-advantage li:hover img{ animation:bounce 1s; -webkit-align-content: animation:bounce 1s;}


/* ========== */
/* = MEDIA = */
/* ========== */
.media-box{ margin: 30px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.media-box .left{ width: 45%; max-width: 620px;}
.media-box .right{ width: 55%; padding:20px 3%;}
.media-box .right ul{ margin-top: 55px;}
.media-box .right li{ float: left; width: 25%; text-align: center;}
.media-box .right li p{ margin-top: 30px; font-size: 16px; line-height: 22px;}

.media-cover{ margin: 30px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.media-cover .left{ width:44%; padding:20px 3%;}
.media-cover .left ul{ margin-top: 30px;}
.media-cover .left li{ width: 33.333333%; float: left; padding:10px 0;}
.media-cover .right{ width:56%; max-width:780px;}

.logo-customer{  margin: 30px 0 50px; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF; overflow: hidden; text-align: center;}
.logo-customer ul{ margin-top: -1px; width: 100%;}
.logo-customer li{  float: left; width:16.6666667%;border-right: 1px solid #d7d7d7; border-top: 1px solid #d7d7d7;}
.logo-customer li:nth-child(6n){ border-right: none;}
.logo-customer li a{ display:block;  padding-bottom:100%; position: relative; }
.logo-customer li a img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-height: 90%; max-width: 90%;}
.logo-customer li .more{ padding:40px 5px 0;}
.logo-customer li .more span{ margin-top:50px; display: inline-block; padding:0 25px; background: #298fd4; color: #FFFFFF; height: 34px; line-height: 34px; font-size: 16px;  position: relative;}
.logo-customer li .more span i{  margin-left: 15px; display: inline-block; vertical-align: middle; width: 20px; height: 12px; margin-top: -6px; background:url(../image/ico_more_white.png) right no-repeat;}
.logo-customer li .more:hover span i{ transform:translateX(-10px); -webkit-transform:translateX(-10px);}

@media (max-width:1260px) {
	.media-tit{ font-size:20px;}
	.media-box .right ul{ margin-top: 40px;}
	.media-box .right li p{ margin-top: 15px; font-size: 14px; line-height: 22px;}
	.media-cover .left ul{ margin-top:10px;}
}





/* ========== */
/* = SEM = */
/* ========== */
.sem-box{ position: relative; z-index: 1; height: 220px; padding-left: 285px;}
.sem-box .titbox{ position: absolute; top:-30px; left:0; width: 285px; height: 250px; background: #FFFFFF; padding-top: 55px; text-align: center; }
.sem-box .titbox .about-more{ margin-top: 65px; padding: 0 30px; line-height: 34px; }
.sem-box .titbox .about-more i{ width: 24px; height: 24px; background:url(../image/ico_zx2.png);}
.sem-box li{ float: left; padding-left:2%; width: 25%;}
.sem-box .item{ height: 220px; padding-top: 55px; background:#FFFFFF; text-align: center; position: relative;}
.sem-box .item p{ margin-top: 17px; line-height: 26px; color: #333333;}

.sem-analysis{ margin: 30px auto; background: #FFFFFF; overflow: hidden;}
.sem-analysis .top{ padding: 35px 0; -webkit-box-shadow:0 0 35px rgba(206,206,206,.4); box-shadow:0 0 35px rgba(206,206,206,.4);}
.sem-analysis .content{ padding:50px 6% 55px 3%; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;}
.sem-analysis .img{ width: 53%;}
.sem-analysis .text{ width: 47%; text-align: center;}
.sem-analysis li{ margin-top: 30px; float:left; width:25%;}
.sem-analysis li p{ font-size: 16px; margin-top:10px; color:#333333;}
.sem-analysis .about-more{ margin-top:60px;}
.sem-analysis .about-more i{ background: url(../image/ico_sanjiao.png);}

.sem-monitor{ margin: 30px 0; padding:60px 4% 75px; background: #FFFFFF;}
.sem-monitor .content{ margin-top: 50px; border-top: 1px solid #f3f2f2;}
.sem-monitor .box{ display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;}
.sem-monitor .box .img{ width: 50%;}
.sem-monitor .box .text{ width:50%; text-align: center;}
.sem-monitor .box ul { padding: 55px 5% 0;}
.sem-monitor .box li{ float: left; width: 16.666666%;}
.sem-monitor .box li p{ margin-top: 15px; font-size: 16px;}
.sem-monitor .box:nth-child(2n) li{ width: 20%;} 

.sem-advantage{ margin: 30px 0; background: #FFFFFF; padding:60px 5% 65px; text-align: center;}
.sem-advantage .content{ margin: 55px 0; position: relative; overflow: hidden;}
.sem-advantage .cricle{ position: absolute; top:50%; left:50%; margin-top: -125px; width:250px; height: 250px; margin-left: -125px;}
.sem-advantage .cricle span{ position: absolute; z-index: 1; top:50%; left:50%; width:62px; height: 62px; margin-top: -31px; padding-top: 25px; margin-left: -31px; text-align: center; font-size: 16px; color: #FFFFFF; line-height:18px;}
.sem-advantage .cricle:after{ content: ""; position: absolute; z-index: 0; top:0; left:0; width: 250px; height: 250px; background: url(../image/sem_cricle.png);  animation: progress360 3s linear infinite;  -webkit-animation: progress360 3s linear infinite;}
.sem-advantage .text{ float: left; width:32%; text-align: right;}
.sem-advantage .text div{ margin-top:70px; position: relative; min-height: 60px; padding-right: 80px; line-height: 30px;}
.sem-advantage .text div:first-child{ margin-top: 0;}
.sem-advantage .text div i{ position: absolute; top:0; right:0; width: 60px; height: 60px;}
.sem-advantage .text div .ico-01{ background-image:url(../image/adv_01.png);}
.sem-advantage .text div .ico-02{ background-image:url(../image/adv_02.png);}
.sem-advantage .text div .ico-03{ background-image:url(../image/adv_03.png);}
.sem-advantage .text div .ico-04{ background-image:url(../image/adv_04.png);}
.sem-advantage .text div .ico-05{ background-image:url(../image/adv_05.png);}
.sem-advantage .text div .ico-06{ background-image:url(../image/adv_06.png);}
.sem-advantage .text div span{ font-size: 16px; color: #000000;}
.sem-advantage .text2{ float: right; text-align:left;}
.sem-advantage .text2 div{ padding-right: 0; padding-left: 80px; }
.sem-advantage .text2 div i{ right: auto; left:0; }
.sem-advantage .about-more{ margin-top:55px; font-size: 16px;}
.sem-advantage .about-more i{ background: url(../image/ico_heart.png);}


/* ========== */
/* = SEO = */
/* ========== */
/* ========== */
/* = SEO = */
/* ========== */
.seo-box{ padding: 25px 0 30px; background: #FFFFFF;}
.seo-box li{ float: left; width: 23.125%; margin-right:2.5%; background: #FFFFFF; padding:30px 20px 38px;}
.seo-box li:nth-child(4n){ margin-right: 0;}
.seo-box li p{ margin: 15px auto 0; max-width: 210px; padding-top: 30px; position: relative; color: #333333; font-size: 18px; line-height: 34px; text-align: center;}
.seo-box li p:before{ content: ""; position: absolute; top:0; left:50%; margin-left: -15px; width:30px; height: 1px; background:#288fd4;}


.seo-strategy{ margin: 30px 0; background: #FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; padding: 5% 7%;}
.seo-strategy .img{ width: 50%;}
.seo-text{ width: 48%;}
.seo-text .tit{ font-size: 24px; color: #333333;}
.seo-text .tit span{ color: #298fd4;}
.seo-text .con{ margin-top: 40px; line-height: 40px; font-size: 18px;}
.seo-text .con p{ margin-top: 20px; position: relative; padding-left: 65px;}
.seo-text .con p:before{ content: ""; position: absolute; top:0; left:0; width:40px; height: 40px; background-size: cover;}
.seo-text .con p:nth-child(1):before{ background-image: url(../image/ico_strategy_01.png);}
.seo-text .con p:nth-child(2):before{ background-image: url(../image/ico_strategy_02.png);}
.seo-text .con p:nth-child(3):before{ background-image: url(../image/ico_strategy_03.png);}
.seo-text a{ margin-top:45px; display: inline-block; padding: 0 55px 0 85px; background: url(../image/more_01.png) 44px 6px no-repeat #288fd4; color: #FFFFFF; line-height: 38px;}
.seo-text a:hover{ background-color: #187ec3;}

.seo-accurate{ margin: 30px 0; background: #FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; padding: 5% 4%;}
.seo-accurate .seo-text{ width:42%;}
.seo-accurate .seo-text .con p:nth-child(1):before{ background-image: url(../image/accurate_01.png);}
.seo-accurate .seo-text .con p:nth-child(2):before{ background-image: url(../image/accurate_02.png);}
.seo-accurate .seo-text .con p:nth-child(3):before{ background-image: url(../image/accurate_03.png);}
.seo-accurate .seo-text a{ background-image: url(../image/ico_zx.png);}
.seo-accurate .img{ width:58%; max-width: 610px; position: relative;}
.seo-accurate .img p{ position:absolute; z-index: 1;}
.seo-accurate .img p img{ display: inline-block; vertical-align: middle;}
.seo-accurate .img p span{ display: inline-block; vertical-align: middle; line-height: 30px;}
.seo-accurate .img p:nth-child(1){ left:57px; top:0; text-align: right;}
.seo-accurate .img p:nth-child(2){ left:-5px; top:140px; }
.seo-accurate .img p:nth-child(3){ left:50px; bottom:15px;text-align: right;}
.seo-accurate .img p:nth-child(4){ right:40px; top:30px;}
.seo-accurate .img p:nth-child(5){ right:45px; bottom:40px;}

.seo-ability{ margin: 30px 0; background: #FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; padding: 5% 2% 5% 7%;}
.seo-ability .img{ width: 55%;}
.seo-ability .seo-text{ width:45%; max-width:500px;}
.seo-ability .seo-text a{ background-image: url(../image/ico_zx.png);}

.seo-optimization{ margin: 30px 0; background: #FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; padding: 5% 2%;}
.seo-optimization .img{ width:56%;}
.seo-optimization .seo-text{ width: 43%;}
.seo-optimization .seo-text .con p:nth-child(1):before{ background-image: url(../image/ico_optimization_01.png);}
.seo-optimization .seo-text .con p:nth-child(2):before{ background-image: url(../image/ico_optimization_02.png);}
.seo-optimization .seo-text .con p:nth-child(3):before{ background-image: url(../image/ico_optimization_03.png);}


.seo-team{ margin: 30px 0; background: #FFFFFF; padding: 45px 5% 75px;}
.seo-team .content{ width: 880px; margin: 45px auto 0; position: relative;}
.seo-team .content ul{ position: absolute; top:0; left:0; width: 100%;}
.seo-team .content li{ margin:16px 0; float:left;  text-align: right; width:250px; line-height:40px; color: #333333; font-size: 16px; padding-right:42px; position: relative;}
.seo-team .content li:before{ content: ""; position: absolute; top:50%; right: 0; width:4px; height: 4px; background: #187ec3; border-radius: 100%;}
.seo-team .content li:nth-child(2n){ float:right; text-align: left; padding-right: 0; padding-left: 42px;}
.seo-team .content li:nth-child(2n):before{ left:0; right:auto;}
.seo-team .content li:nth-child(2n+1){ clear: both;}
.seo-team .content li img{ margin: 0 15px; display: inline-block; vertical-align: middle;}
.seo-team .content li span{ display: inline-block; vertical-align: middle;}

.seo-case { padding:50px 0; background: #FFFFFF;}
.seo-case .theme{ font-size: 26px; color: #333333; text-align: center; border-bottom: 1px solid #E5E5E5; padding-bottom: 45px;}
.seo-case .theme span{ color: #288fd4;}
.seo-case .tab { margin-top: 45px; text-align: center;}
.seo-case .tab span{ display: inline-block; margin: 0 60px; width: 135px; border: 1px solid #298fd4; color: #298fd4; line-height: 30px; cursor: pointer;}
.seo-case .tab span.active{ background: #298fd4; color: #FFFFFF;}
.seo-case .js-tab-box{ padding: 0 7%;}
.seo-case .js-tab-con{ display: none;}
.seo-case .js-tab-con.active{ display: block;}
.seo-case .market-list{ padding-bottom: 40px; border-bottom: 2px dashed #e5e5e5;}
.seo-case .market-logo-box { margin: 40px 7% 0; }


.seo-bottom-box{  margin: 30px 0; background: #FFFFFF; padding:55px 4%;}
.seo-bottom-box li{ margin-top: 35px; float: left; width: 25%; padding: 0 23px;}
.seo-bottom-box li a{ display: block; padding: 50px 20px 50px 30px;}
.seo-bottom-box li img{ margin: 0;}
.seo-bottom-box li span{ margin-top: 20px; font-weight: bold; display: block; font-size: 16px; color: #298fd4;}
.seo-bottom-box li p{ margin-top: 22px; line-height: 24px; color: #999999;}
.seo-bottom-box li i{ margin-top: 30px; display: inline-block; width: 122px; line-height: 30px; background: #288fd4; color: #FFFFFF; text-align: center; font-style:normal;}
.seo-bottom-box li:hover img{ animation: 1s tada; -webkit-animation: 1s tada;}



/* ========== */
/* = EPR = */
/* ========== */
.epr-three{ margin: 30px 0; background: #FFFFFF; padding: 20px 30px 20px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;}
.epr-three .img{ width:38%;}
.epr-three .text{ width: 62%;}
.epr-three ul{ margin-top: 30px; padding: 0 5%;}
.epr-three li{ float: left;width:33.33333%; padding: 0 2%;}
.epr-three .item{ text-align: center; position: relative;}
.epr-three .box{ height: 220px; background: #FFFFFF; cursor: pointer; padding:25px 0;}
.epr-three .box span{ margin-top:12px; display: block; font-size: 18px; color:#333333;}
.epr-three .box .tip{ margin-top:12px; font-size: 16px; color: #999999;}
.epr-three .box i{ margin-top: 20px; display: inline-block; width: 23px; height: 23px; background: url(../image/jia.png) no-repeat;}
.epr-three .des{ opacity:0; transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); position: absolute; top:0; left:0; width: 100%; padding:0 20px; line-height:26px; background:#FFFFFF; height: 100%; -webkit-box-shadow:0 0 25px rgba(206,206,206,.4); box-shadow:0 0 25px rgba(206,206,206,.4);}
.epr-three .des div{ display: inline-block; width: 100%; vertical-align: middle;}
.epr-three .des i{ display: inline-block; vertical-align: middle; height: 100%;}
.epr-three .des p{ margin:20px 0;}
.epr-three .item:hover .box {opacity: 0; transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); }
.epr-three .item:hover .des{ opacity:1; transform:rotateY(0deg); -webkit-transform:rotateY(0deg);}


.epr-box{ margin: 30px 0; padding: 45px 7% 55px; background: #FFFFFF;}
.epr-box .content{ margin-top: 55px;}
.epr-box .box{ margin-top: 15px; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;}
.epr-box .box .img{ width: 50%;}
.epr-box .box .text{ width: 50%; padding-right: 5%; padding-left:12%;}
.epr-box .box .text span{ padding-bottom: 30px; display: block; font-size: 22px; position: relative;}
.epr-box .box .text span:after{ content:""; position: absolute; bottom: 0; left:0; width: 35px; height: 1px; background: #666666;}
.epr-box .box .text p{ margin-top: 5%; font-size: 16px; color: #999999; line-height: 34px;}
.epr-box .box:nth-child(2n) .text{  padding-right: 12%; padding-left:5%;}

.epr-feature .box{ clear: both; height: 262px; background:url(../image/epr_img.jpg) no-repeat right #0b2138; padding:45px 0 0 50px;}
.epr-feature .box .tit{ display:block; padding-bottom: 30px; position: relative; color: #FFFFFF; font-size: 28px; letter-spacing:12px;}
.epr-feature .box .tit:after{ width: 27px; height: 2px; background: #FFFFFF; content: ""; position: absolute; bottom: 0; left:0;}
.epr-feature .box .about-more{ margin-top:50px; line-height:38px; padding: 0 50px;}
.epr-feature .box .about-more i{ width: 24px; height: 24px; background: url(../image/ico_zx.png);}
.epr-feature ul{ background: #FFFFFF; overflow: hidden;}
.epr-feature li{ float: left; width:25%; padding:4%;}
.epr-feature li:nth-child(2n){ background: #fbfafa;}
.epr-feature li img{ margin:0;}
.epr-feature li span{ margin-top: 30px; display:block; font-size: 18px; }
.epr-feature li p{ margin-top: 30px; font-size: 12px; color: #999999; line-height:22px; min-height: 88px;}
.epr-feature li:hover img{ animation:bounce 1s; -webkit-transform: bounce 1s;}


.epr-support{ margin: 30px 0; background: #FFFFFF; padding:35px 0 55px 6%;}
.epr-support .content{ margin-top: 35px; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;}
.epr-support .img{ width: 42%;}
.epr-support ul{ width: 58%; text-align: center;}
.epr-support ul li{ margin: 30px 0; display: inline-block; width:32%;}
.epr-support ul li p{ margin-top: 15px; font-size: 18px;}


.epr-advantage{ margin: 30px 0; background:#FFFFFF; padding:40px 15px;}
.epr-advantage li{ float: left; padding: 25px 15px; margin:40px 0.5% 0; width: 13.2857%; text-align: center; -webkit-box-shadow:0 0 25px rgba(206,206,206,.4); box-shadow:0 0 25px rgba(206,206,206,.4); }
.epr-advantage li span{ margin:18px auto 0; max-width: 120px; display:block; padding-bottom: 12px; border-bottom: 1px solid #e8e8e8; color: #333333;}
.epr-advantage li p{ margin-top: 12px; line-height:24px; min-height: 72px; font-size: 12px; color: #999999; overflow: hidden;}



/* ========== */
/* = RTB = */
/* ========== */
.rtb-box{ position: relative; z-index: 1; height: 255px; padding-left: 220px;}
.rtb-box .titbox{ position: absolute; top:-30px; left:0; width: 220px; height: 250px; background: #FFFFFF; padding-top: 55px; text-align: center; }
.rtb-box .titbox span{ display: block; padding-bottom: 30px; font-size: 24px; color: #333333; position: relative;}
.rtb-box .titbox span:after{ content: ""; position: absolute; bottom:0; left:50%; width: 18px; height: 1px; margin-left: -9px; background: #288fd4;}
.rtb-box .titbox a{ margin-top: 65px; padding: 0 32px; display: inline-block; background: #288fd4; color: #FFFFFF; text-align: center; line-height: 34px; }
.rtb-box .titbox i{ display: inline-block; vertical-align: middle; margin-right: 5px; width: 24px; height: 24px; background:url(../image/ico_zx.png);}
.rtb-box .titbox a:hover i{ transform: translateX(-10px); -webkit-transform: translateX(-10px); }
.rtb-box li{ float: left; padding-left: 15px; width: 20%;}
.rtb-box .item{ padding: 40px 0; background: #FFFFFF; height: 220px; text-align: center; position: relative; cursor: pointer; }
.rtb-box .item span{ display: block; font-size: 18px; color: #333; position: relative; padding-bottom: 20px;}
.rtb-box .item span:after{ content: "" ; position: absolute; bottom: 0; margin-left:-10px; width: 20px; left:50%; background: #288fd4; height: 1px;}
.rtb-box .item p{ margin-top: 20px; line-height: 20px; color: #999;}


.rtb-advantange .box{ clear: both; height: 262px; background:url(../image/rbt_img.jpg) no-repeat right #0c1137; padding:45px 0 0 50px;}
.rtb-advantange .box .tit{ display:block; padding-bottom: 30px; position: relative; color: #FFFFFF; font-size: 28px;}
.rtb-advantange .box .tit:after{ width: 27px; height: 2px; background: #FFFFFF; content: ""; position: absolute; bottom: 0; left:0;}
.rtb-advantange .box p{ margin-top:40px; font-size: 16px; color: #bbbbbb;}
.rtb-advantange ul{ background: #FFFFFF; overflow: hidden;}
.rtb-advantange li{ float: left; width:33.33333%; padding: 5% 6% 8%;}
.rtb-advantange li:nth-child(2n){ background: #fbfafa;}
.rtb-advantange li img{ margin:0;}
.rtb-advantange li span{ margin-top: 40px; display:block; font-size: 24px; }
.rtb-advantange li p{ margin-top: 40px; font-size: 16px; color: #999999; line-height: 40px;}
.rtb-advantange li:hover img{ animation:bounce 1s; -webkit-transform: bounce 1s;}

.rtb-platform{ margin: 30px 0; padding: 60px 7% 35px; background: #FFFFFF;  display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;}
.rtb-platform .text{ width:48%; }
.rtb-platform .tit{ padding-bottom: 30px; position: relative; font-size: 24px; color: #333333;}
.rtb-platform .tit:after{ content: ""; position: absolute; bottom:0; left:0; width: 78px; height: 1px; background: #288fd4;}
.rtb-platform .des{ margin-top: 50px;}
.rtb-platform .des p{ margin-bottom:32px; position: relative; line-height: 30px; padding-left: 70px; font-size: 16px;}
.rtb-platform .des p:last-child{ margin-bottom: 0;}
.rtb-platform .des p:before{ content:""; position: absolute; top:-2px; left:0; width: 35px; height: 35px;}
.rtb-platform .des p:nth-child(1):before{ background-image: url(../image/platform_ico_01.png);}
.rtb-platform .des p:nth-child(2):before{ background-image: url(../image/platform_ico_02.png);}
.rtb-platform .des p:nth-child(3):before{ background-image: url(../image/platform_ico_03.png);}
.rtb-platform .img{ width: 50%;  max-width: 610px;}




/* ========== */
/* = WEB = */
/* ========== */
.web-box{position: relative;}
.web-box li{ float: left; width: 23.5%; margin-right:2%;}
.web-box li:nth-child(4n){ margin-right: 0;}
.web-box .titbox{ margin-top: -45px; height: 315px; background: #FFFFFF; padding-top:65px; text-align: center; }
.web-box .titbox span{ display: block; padding-bottom:30px; font-size: 26px; color: #333333; position: relative;}
.web-box .titbox span:after{ content: ""; position: absolute; bottom:0; left:50%; width: 18px; height: 1px; margin-left: -9px; background: #288fd4;}
.web-box .titbox a{ margin-top:75px; padding: 0 40px; display: inline-block; background: #288fd4; color: #FFFFFF; text-align: center; line-height: 34px; }
.web-box .titbox i{ display: inline-block; vertical-align: middle; margin-right: 10px; width: 24px; height: 24px; background:url(../image/ico_zx.png);}
.web-box .titbox a:hover i{ transform: translateX(-10px); -webkit-transform: translateX(-10px); }
.web-box .item{ padding:32px 14% 0; background: #FFFFFF; height: 270px; text-align: center; position: relative; cursor: pointer; }
.web-box .item span{ margin-top:20px; display: block; padding-bottom: 20px; font-size: 20px; position: relative;}
.web-box .item span:after{ content: ""; position: absolute; bottom: 0; left:50%; margin-left: -14px; width:28px; height: 2px; background: #288fd4;}
.web-box .item p{ margin-top:20px; font-size: 16px; color: #999999; line-height: 34px; }

.web-service{ margin: 30px 0; padding: 45px 7%; background: #FFFFFF;}
.web-service .theme{ padding-bottom: 35px; font-size: 26px; position: relative; color: #333333; text-align: center;}
.web-service .theme:after{ content: ""; position: absolute; bottom:0; left:50%; margin-left:-13px; width: 26px; height: 2px; background: #288fd4;}
.web-service .box{ margin-top: 25px; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;}
.web-service .box:first-child{ margin-top: 50px;}
.web-service .box .img{ width:50%; max-width: 600px; position: relative;}
.web-service .box .img .tip{ position: absolute; bottom: 0; left:0; width: 100%; background: rgba(0,0,0,.6); color: #FFFFFF; padding: 15px; text-align: center;}
.web-service .box .img .tip i{ font-style: normal; margin: 0 20px;}
.web-service .box .img .tip2{ padding: 0; font-size: 12px; letter-spacing: -1px;}
.web-service .box .img .tip2 div{ float: left; text-align: left;}
.web-service .box .img .tip2 div{ width:55%; padding:20px 0 20px 10px;}
.web-service .box .img .tip2 div:nth-child(2){ width: 45%; border-left: 1px solid rgba(255,255,255,.3);}
.web-service .box .img .tip2 div span{ font-size: 14px; display: block; margin-bottom:8px;}
.web-service .box .text{ width: 50%; padding:20px 2%; text-align: center;}
.web-service .box .tit{ padding-bottom: 35px; font-size: 20px; position: relative; color: #333333; text-align: center;}
.web-service .box .tit:after{ content: ""; position: absolute; bottom:0; left:50%; margin-left:-13px; width: 26px; height: 2px; background: #288fd4;}
.web-service .box li{ margin-top: 40px; float: left; width: 25%; padding: 0 10px;}
.web-service .box li p{ margin-top: 20px; font-size: 16px; color: #333333;}
.web-service .box .des{ margin: 7% auto 0; max-width: 450px; font-size: 18px; line-height: 40px; color: #333333; letter-spacing: 2px;}
.web-service .box .des span{ color: #298fd4;}
.web-service .box .more{ margin-top:7%; padding: 0 40px; display: inline-block; background: #288fd4; color: #FFFFFF; text-align: center; line-height: 34px; }
.web-service .box .more i{ display: inline-block; vertical-align: middle; margin-right: 10px; width: 24px; height: 24px; background:url(../image/ico_zx.png);}
.web-service .box .more a:hover i{ transform: translateX(-10px); -webkit-transform: translateX(-10px); }

@media (max-width:1420px) {
	.web-service .box .img .tip{ font-size: 12px;}
	.web-service .box .img .tip i{ margin: 0 10px;}
}

.web-advantange{ margin:30px 0;}
.web-advantange .box{ clear: both; height: 262px; background:url(../image/web_img.jpg) no-repeat right #090b17; padding:45px 0 0 50px;}
.web-advantange .box .tit{ display:block; padding-bottom: 30px; position: relative; color: #FFFFFF; font-size: 28px;}
.web-advantange .box .tit:after{ width: 27px; height: 2px; background: #FFFFFF; content: ""; position: absolute; bottom: 0; left:0;}
.web-advantange .box p{ margin-top:40px; font-size: 16px; color: #bbbbbb;}
.web-advantange ul{ background: #FFFFFF; overflow: hidden;}
.web-advantange li{ float: left; width:25%; padding:36px 4% 10px;}
.web-advantange li:nth-child(8n-1),
.web-advantange li:nth-child(8n-3),
.web-advantange li:nth-child(8n-4),
.web-advantange li:nth-child(8n-6){ background: #fbfafa;}
.web-advantange li span{ display: block; font-size: 24px; font-weight: bold;}
.web-advantange li p{ margin-top: 25px; line-height: 24px; min-height: 96px; overflow: hidden; color: #999999;}

.web-process{ margin:30px 0; padding: 35px 0 50px; background: #FFFFFF;}
.web-process .theme{ padding-bottom: 25px; font-size: 24px; position: relative; color: #333333; text-align: center;}
.web-process .theme:after{ content: ""; position: absolute; bottom:0; left:50%; margin-left:-13px; width: 26px; height: 2px; background: #288fd4;}
.web-process ul{ margin-top: 70px; height: 320px;}
.web-process li{ float: left; width: 20%; text-align: center; padding: 0 28px; position: relative;}
.web-process li:after{ content: ""; position: absolute; top:135px; right:-8px; width: 15px; height: 15px; background: url(../image/ico_process_jt.png);}
.web-process li:last-child:after{ display: none;}
.web-process li .item{ padding:30px; height: 280px; position: relative;}
.web-process li .item:after{ content: ""; position: absolute; top:0; left:0; width: 100%; height: 0; transition: all ease .6s; -webkit-transition: all ease .6s; background: #288fd4;}
.web-process li .item span{ position: relative; z-index: 1; display: inline-block; width: 50px; height: 50px; line-height:50px; border-radius: 100%; background-image: url(../image/blue_cricle.png); color: #FFFFFF;}
.web-process li .item .tit{ padding:18px 0 11px; font-size: 16px; font-weight:bold;}
.web-process li .item .des{ border-top:2px solid #dadada; max-width: 137px; margin: 0 auto; padding-top: 32px; line-height: 20px; color: #999999;}
.web-process li .item a{ position: absolute; bottom: -17px; left:50%; margin-left: -50px; display:block; width: 100px; line-height: 32px; border:1px solid #288fd4; border-radius: 17px; background: #FFFFFF; color: #288fd4; font-size: 13px;}
.web-process li .item:hover{ margin-top: -35px; height: 355px; padding-top: 55px;}
.web-process li .item:hover:after{ height: 85px;}
.web-process li .item:hover span{ background: #FFFFFF; color: #288fd4;}
.web-process li .item:hover .tit{ padding-bottom: 25px;}
.web-process li .item:hover .des{ line-height: 30px;}
.web-process li .item:hover a{ background: #288fd4; color: #FFFFFF;}

.web-after{ margin:30px 0; background: #FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between;}
.web-after .left{ width: 50%; padding: 20px 6%;}
.web-after .left h2{ margin-bottom: 30px; padding-bottom: 25px; font-size: 24px; color: #333333; position: relative;}
.web-after .left h2:after{ content: ""; position: absolute; bottom: 0; left:0; height: 1px; width: 53px; background: #cccccc;}
.web-after .left p{ margin-bottom: 25px; position: relative; padding-left: 65px; color: #999999; background: url(../image/ico_sj.png) no-repeat 30px 10px; line-height: 32px;}
.web-after .left p span{ font-size: 16px; color: #666666; margin-right:7%;}
.web-after .right{  width: 50%;}

@media (max-width:1500px) {
	.web-after .left{ padding: 20px 4%;}
	.web-after .left h2{ margin-bottom:20px;}
	.web-after .left p{ margin-bottom: 10px;}
}



/* ========== */
/* = INTEGRATION = */
/* ========== */
.integration-box{ position: relative; z-index: 1; height: 220px; padding-left: 285px;}
.integration-box .titbox{ position: absolute; top:-30px; left:0; width: 285px; height: 250px; background: #FFFFFF; padding-top: 55px; text-align: center; }
.integration-box .titbox span{ display: block; padding-bottom: 35px; font-size: 24px; color: #333333; position: relative;}
.integration-box .titbox span:after{ content: ""; position: absolute; bottom:0; left:50%; width: 40px; height: 1px; margin-left: -20px; background: #288fd4;}
.integration-box .titbox a{ margin-top: 65px; padding: 0 55px; display: inline-block; background: #288fd4; color: #FFFFFF; text-align: center; line-height: 34px; }
.integration-box .titbox i{ display: inline-block; vertical-align: middle; margin-right: 5px; width: 24px; height: 24px; background:url(../image/ico_zx2.png);}
.integration-box .titbox a:hover i{ transform: translateX(-10px); -webkit-transform: translateX(-10px); }
.integration-box li{ float: left; padding-left:2%; width: 25%;}
.integration-box .item{ height: 220px; padding-top:35px; background:#FFFFFF; text-align: center; position: relative;}
.integration-box .item span{ margin-top: 10px; display: block; padding-bottom:20px; font-size: 16px; position: relative;}
.integration-box .item span:after{ content: ""; margin-left: -11px; position: absolute; bottom: 0; left:50%; width: 23px; height: 2px; background: #288fd4;}
.integration-box .item p{ margin-top:10px; line-height: 26px; color: #999999; font-size: 12px;}


.integration-product{ margin:30px 0; background:#FFFFFF; padding: 50px 20px 60px;}
.integration-product .box{ float: left; width: 25%; padding: 0 20px; text-align: center; position: relative;}
.integration-product .box .cricle{ margin: 0 auto; display:block; background: #288fd4; border-radius: 100%; padding: 10px; width: 110px; height: 110px; text-align: center;}
.integration-product .box .cricle span{display: block; width: 90px; line-height: 90px; height: 90px; border-radius: 100%; background: #288fd4; border: 1px solid rgba(255,255,255,.3);  font-size: 16px; color: #FFFFFF;}
.integration-product .box i{ margin: 10px 0; display:inline-block; width: 15px; height: 15px; background: url(../image/ico_process_jt2.png) no-repeat;}
.integration-product .item{ border:1px solid #f3f3f3; min-height: 365px; padding:50px 25px 0 35px; text-align: left; position: relative;}
.integration-product .item:after{ position: absolute; right:-30px; top:50%; margin-top: -9px; content: ""; display:inline-block; width: 15px; height: 15px; background: url(../image/ico_process_jt.png) no-repeat;}
.integration-product .item li{ margin-bottom:42px; position: relative; padding-left:65px; min-height: 65px;}
.integration-product .item li:last-child{ margin-bottom: 0;}
.integration-product .item li img{ position: absolute; top:3px; left:0;}
.integration-product .item li span{ color: #333333; font-size: 16px;}
.integration-product .item li p{ margin-top:8px; font-size: 12px; line-height:18px; color: #999999;}
.integration-product .box:last-child .item:after{ display: none;}
.integration-product .box:nth-child(3) .item,
.integration-product .box:nth-child(4) .item{ padding-top: 90px;} 
.integration-product .box:nth-child(3) .item li,
.integration-product .box:nth-child(4) .item li{ margin-bottom:60px;}

@media (max-width:1480px) {
	.integration-product .item{ padding:50px 15px 0 30px;}
	.integration-product .item li{ padding-left: 50px;}
}
@media (max-width:1340px) {
	.integration-product .item{ padding:50px 15px 0 20px;}
	.integration-product .item li{ margin-bottom: 35px;}
	.integration-product .box:nth-child(3) .item li,
	.integration-product .box:nth-child(4) .item li{ margin-bottom: 55px;}
}


.integration-process{ background-image: url(../image/process.jpg);  background-position:bottom right; background-size: cover; padding: 55px 60px 20px;}
.integration-process ul{ margin: 40px auto 0; max-width: 1040px; position: relative;}
.integration-process li{ position: relative; z-index: 1; float: left;  width: 16.66666666%; text-align: center; padding: 0 5px;}
.integration-process li span{ display: inline-block; width: 60px; height: 60px; border-radius: 100%; position: relative;}
.integration-process li span img{ border-radius: 100%;}
.integration-process li span img:nth-child(1){ }
.integration-process li span img:nth-child(2){ position: absolute; top:0; left:0; background: #288fd4;opacity: 0; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}
.integration-process li p{ margin-top:10px; font-size: 15px; }
.integration-process li .des{ margin:20px auto 0; max-width:170px; font-size: 12px; color: #999999; line-height: 22px; min-height:96px;}
.integration-process li.active span img:nth-child(1){ opacity: 0; transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg);}
.integration-process li.active span img:nth-child(2){ opacity: 1; transform:rotateY(0); -webkit-transform:rotateY(0);}
.integration-process li.active p{ color: #288fd4;}


.integration-team{ margin: 30px 0; background: #FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; padding:50px 50px 50px 0;}
.integration-team .img{ width: 50%;}
.integration-team .text{ width: 50%; padding:0 7%;}
.integration-team .tit{ font-size: 24px; color: #333333;}
.integration-team .des{  margin-top:45px;}
.integration-team .des p{ margin-bottom: 30px; position: relative; padding-left: 30px; line-height: 26px; font-size: 16px;}
.integration-team .des p:before{ content: ""; position:absolute; top:10px; left:10px; width:8px; height: 8px; background: #288fd4; border-radius: 100%;}
.integration-team li{ padding-top: 15px; float: left; width: 33.333%; text-align: center;}
.integration-team li p{ margin-top: 10px; font-size: 16px; color: #333333;}

.integration-system{ margin: 30px 0; background: #FFFFFF; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; padding: 30px 0 30px 35px;}
.integration-system .img{ width: 53%;}
.integration-system .text{ width:47%; padding: 0 5%;}
.integration-system li{ margin-top:32px; float: left; width: 50%; text-align: center; font-size:16px; color: #288fd4; line-height: 30px;}
.integration-system li div{ display: inline-block; min-width: 150px; padding-left:30px; text-align: left; position: relative;}
.integration-system li div:before{ content: ""; position: absolute; top:5px; left:0; display:block; width:0; height:0; border-width:8px 0 8px 8px; border-style:solid; border-color:transparent transparent transparent #419cd9;}


/* ========== */
/* = JH = */
/* ========== */
.poly-tit{ position: relative; padding-bottom: 15px; color:#333333; font-size:20px; border-bottom:2px solid #eeeeee;}
.poly-tit:before{ content:""; position: absolute; bottom:-2px; left:0; width: 25px; height: 2px; background: #288fd4;}
.poly-tit span{ display: inline-block; margin-left: 10px; color: #999; font-size: 12px; text-transform:uppercase;}

.jh-box{ background: #FFFFFF; margin:30px auto; padding:50px;}
.jh-box .leftbox{ float: left; width: 74.588%;}
.jh-box .leftbox .left{ float: left; position: relative; width: 54%;}
.jh-box .leftbox .left img{ width: 100%;}
.jh-box .leftbox .left span{ position:absolute; box-sizing: border-box; bottom:0; left:0; width: 100%; background: rgba(0,0,0,.7); color: #FFFFFF; padding: 10px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.jh-box .leftbox .right{ float: right; width: 43%;}
.jh-box .leftbox .right li{ padding:8px 0; border-bottom:1px dashed #e4e4e4;}
.jh-box .leftbox .right li:last-child{ padding-bottom:0; border-bottom: none;}
.jh-box .leftbox .right li span{ display: block; font-size: 16px; color: #333333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.jh-box .leftbox .right li p{ margin-top: 10px; line-height:18px; height: 36px; font-size: 14px; color: #999999; overflow: hidden;}
.jh-box .leftbox .right li:hover span{ color: #288fd4;}

.hot-box{ float: right; width: 22.5%;}
.hot-box .tit{ font-size: 18px; color: #ffffff; background: #333333; text-align: center; padding: 12px 0;}
.hot-box .tit span{ margin-left: 10px; color: #aaaaaa; font-size: 12px; text-transform:uppercase;}
.hot-box ul{ border-left: 1px solid #e4e4e4;  border-right: 1px solid #e4e4e4;}
.hot-box li{ padding:20px; border-bottom: 1px solid #e4e4e4; box-sizing: border-box; }
.hot-box li a{ display: block; font-size: 14px; color: #888888; background: url(../image/hot_ico.png) no-repeat left; padding-left: 20px; width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform:uppercase;}
.hot-box li:hover{ background: #eeeeee;}
.hot-box li:hover a{ color: #000000;}

.jh-industry{ margin: 30px 0; background: #FFFFFF; padding: 50px;}
.jh-industry ul{ margin: 20px -15px 0;}
.jh-industry li{ float: left; padding: 15px; width: 50%; box-sizing: border-box;}
.jh-industry li a{ display: block; padding:0 38px 30px; border: 1px solid #eeeeee;}
.jh-industry li .tit{ position: relative; padding: 25px 0; padding-right:40px; border-bottom: 1px solid #e9e9e9; font-size: 16px; color: #333333;}
.jh-industry li .tit:before{ content:""; position: absolute; top:50%; margin-top: -3px; left:-12px; width:6px; height: 6px; border-radius: 3px; background: #d4d4d4;}
.jh-industry li .tit:after{ content:""; position: absolute; top:50%; right:0; margin-top:-15px; width: 30px; height: 30px; background: url(../image/poly_more.png);}
.jh-industry li span{ display: block;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.jh-industry li p{ margin-top: 20px; color: #999999; line-height: 22px; font-size: 14px; height: 66px; overflow:hidden;}
.jh-industry li:hover .tit:before{ background: #288fd4;}
.jh-industry li:hover .tit:after{ background: url(../image/poly_moreh.png);}

.jh-information{ margin: 30px 0; background: #FFFFFF; padding: 50px;}
.jh-information .left{ float: left; width: 74.5%;}
.jh-information li{ padding:30px 0; border-bottom: 1px dashed #e4e4e4;}
.jh-information li a{ display: block; padding-right:100px; position: relative;}
.jh-information li .dimg{ float: left;}
.jh-information li .text{ margin-left: 340px; padding-top: 10px;}
.jh-information li .text span{ font-size: 16px; color: #202020; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.jh-information li .text p{ margin-top:20px; color: #999999; font-size: 14px; line-height: 30px; height: 90px; overflow: hidden;}
.jh-information li .date{ position: absolute; top:0; right:0; padding-left: 30px;  width:84px; height:140px;  box-sizing:border-box;border-left: 1px solid #e4e4e4;}
.jh-information li .date span{ display: block; font-size: 18px; color: #777777;}
.jh-information li .date em{ margin-top:5px; display: block; color: #cccccc; font-size: 12px; font-style: normal;}
.jh-information li .date i{ margin-top:40px; display: block; width: 31px; height: 31px; background: url(../image/xz_info_more.png);}
.jh-information li a:hover .text span{ color: #288fd4;}
.jh-information li a:hover .date i{background: url(../image/xz_info_moreh.png);}
.jh-information .getmore{ margin-top:50px; text-align: center;}
.jh-information .getmore a{ display: inline-block; padding:10px 70px; background: #288fd4; color: #FFFFFF; font-size: 16px;}

.tipbox{ float:right; width: 22.5%;}
.tipbox .tit{ font-size: 18px; color: #ffffff; background: #333333; text-align: center; padding: 12px 0;}
.tipbox .tit span{ margin-left: 10px; color: #aaaaaa;text-transform:uppercase;}
.tipbox .con{ border: 1px solid #e4e4e4; border-top: none; padding: 25px 10px 35px; text-align: center;}
.tipbox .con a{ margin: 2px; display: inline-block; border: 1px solid #298fd4; padding:5px 20px;}
.tipbox .con a:hover,
.tipbox .con a.active{ background: #333333; color: #FFFFFF; }


/* ========== */
/* = wltg = */
/* ========== */
.zt-tit{ padding: 18px 0; border-bottom: 1px solid #eeeeee; }
.zt-tit span{ display: inline-block; padding-left: 15px; font-size: 18px; color: #333333; border-left: 4px solid #288fd4;}
.wltg-box{ padding:30px 20px; background: #FFFFFF;}
.wltg-box .top-tit{ margin-bottom: 20px; background: #288fd4; line-height:60px; font-size: 20px; color: #FFFFFF; text-align: center;}
.wltg-box .con{ margin: 15px 0 30px; font-size: 0;}
.wltg-box .con a{ margin-right:7px; margin-top: 8px; padding: 0 10px; line-height: 32px; display: inline-block; background: #f1f5f8; border-radius:4px;  font-size: 12px;}
.wltg-box .con a:hover,
.wltg-box .con a.current{ background: #288fd4; color: #FFFFFF;}

.wltg-news{ margin: 30px 0px; padding:50px 7%; background: #FFFFFF; }
.wltg-news ul{ margin: 0 -35px;}
.wltg-news li{ float: left; width: 50%; padding: 0 35px; box-sizing: border-box;}
.wltg-news li .item{ padding: 35px 0; border-bottom: 1px solid #eeeeee; }
.wltg-news li .item .img{ float: left; position: relative; text-align: center;}
.wltg-news li .item .img .con{ position: absolute; top:0; left:0; width: 100%; height: 100%; color: #FFFFFF;}
.wltg-news li .item .img .con div{ display: inline-block; vertical-align: middle; width: 100%;}
.wltg-news li .item .img .con i{ display: inline-block; vertical-align: middle; height: 100%;}
.wltg-news li .item .img .con span{ font-size: 20px; font-weight: bold;}
.wltg-news li .item .img .con p{ margin-top: 5px; font-size: 12px; text-transform: uppercase;}
.wltg-news li .item .text{  margin-left: 195px;}
.wltg-news li .item .text a{ display: block; width:100%; padding-right: 80px; line-height: 26px; height: 26px;position: relative; box-sizing: border-box;}
.wltg-news li .item .text a span{ display: block; font-size: 14px; color: #333333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 15px; position: relative;}
.wltg-news li .item .text a span:before{ content:""; position: absolute; top:50%; margin-top:-2px; left:0; width: 4px; height: 4px; background: #288fd4; }
.wltg-news li .item .text a em{ position: absolute; top:0; right:0; color: #aaaaaa; font-size: 12px; font-style: normal;}
.wltg-news li .item .text a:hover span{ color: #288fd4;}


.wltg-three{ padding:50px; background: #FFFFFF;}
.wltg-three .box{ float: left; width: 32%; margin-right: 2%; background: #FFFFFF; box-shadow: 0 0 25px rgba(0,0,0,.06); padding: 0 35px 40px; box-sizing: border-box;}
.wltg-three .box:nth-child(3n){ margin-right: 0;}
.wltg-three .box .zt-tit{ padding: 25px 0;}
.wltg-three .box .con{ margin-top: 30px; padding:15px 15px 30px; background: #fbfbfb;}
.wltg-three .box .con a{ display: block;}
.wltg-three .box .con .tip{ line-height:40px;}
.wltg-three .box .con .tip span{ float: left; font-size:30px; color:#333333;}
.wltg-three .box .con .tip em{ float: right; font-size: 18px; color: #999999; font-style: normal;}
.wltg-three .box .con .tit{ margin-top: 20px; font-size: 16px; line-height: 24px; color: #333333; height: 48px; overflow: hidden;}
.wltg-three .box .con .des{ margin-top: 20px; font-size: 14px; color: #999999; line-height: 24px; height: 48px; overflow: hidden;}
.wltg-three .box .con .des em{ font-style: normal; color: #288fd4;}
.wltg-three .box .con a:hover .tit{  color: #288fd4;}
.wltg-three .box ul{ margin-top: 30px;}
.wltg-three .box li{ margin-top: 5px;}
.wltg-three .box li a{ display: block; line-height: 24px; font-size:14px; color: #666666; position: relative; padding-left: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.wltg-three .box li a:before{ content:""; position: absolute; left:0; top:10px; width: 4px; height: 4px;  background: #288fd4;}
.wltg-three .box li a:hover{color: #288fd4;}

.wltg-hot{ margin: 30px 0; padding:50px; background: #FFFFFF;}
.wltg-hot ul{ margin: 0 -35px;}
.wltg-hot li{ float: left; width: 50%; padding: 0 35px; box-sizing: border-box;}
.wltg-hot li a{ display: block; line-height: 56px; height: 56px; border-bottom:1px dotted #dcdcdc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; font-size: 14px; color: #666666;}
.wltg-hot li a:hover{ color: #288fd4;}


/* ========== */
/* = 404 = */
/* ========== */
.div404{ margin: 50px 0 80px; background: #FFFFFF; padding:50px 7% 80px;}
.div404 .text{ max-width:600px; margin: 0 auto;}
.div404 .text p{ margin-top:15px; line-height:30px;}
.div404 .text p .alink{ margin:0 10px; color: #298fd4;}


/* ========== */
/* = SITEMAP = */
/* ========== */
.sitemap{ margin: 50px 0 80px; background: #FFFFFF; padding:70px 7%;}
.sitemap .tit{ padding-bottom:20px; border-bottom: 2px solid #EEEEEE; font-size: 16px; color: #333333;}
.sitemap .tit span{ margin-right: 20px; text-transform: uppercase; font-size:26px;}
.sitemap li{ padding: 25px 0; border-bottom: 2px solid #EEEEEE; line-height: 30px;}
.sitemap li span{ display: inline-block; min-width: 120px;}
.sitemap li span a{ display: inline-block; font-size:20px; margin-right: 20px; color: #333333;}
.sitemap li span a:hover{ color: #298fd4;}
.sitemap li>a{ display:inline-block; margin:0 20px; font-size: 16px;}
.sitemap li>a:hover{ color: #298fd4;}


/* ========== */
/* = ok = */
/* ========== */
.success{ margin:50px 0 80px; padding:7% 5%; line-height: 34px; text-align: center; background: #FFFFFF; font-size: 16px;}







/* ========== */
/* = redbook = */
/* ========== */
.redbook-banner{ width: 100%; height: 400px; background-size: cover; background-image: url(../image/banner.jpg); background-position: center;}
.redbook-banner .text{ padding-top: 290px; max-width: 1200px; margin:0 auto; padding-left:10%;}
.redbook-banner .text a{ display: inline-block; width: 213px; height: 56px; line-height: 56px; text-align: center; background: #FFFFFF; border-radius: 5px; font-size: 26px; color: #f62d4f; font-weight: bold; position: relative;}


.ico-hand{ content: ""; position: absolute; bottom: -15px; right:0px; width: 40px; height:40px; background-image: url(../image/ico_hand.png); background-size:cover;}
.ico-hand{
  -webkit-animation: scales 1.5s linear infinite 0s;
  -moz-animation: scales 1.5s linear infinite 0s;
  -o-animation: scales 1.5s linear infinite 0s;
  -ms-animation: scales 1.5s linear infinite 0s;
  animation: scales 1.5s linear infinite 0s;
  -webkit-transition: all ease .4s;
  -moz-transition: all ease .4s;
  -ms-transition: all ease .4s;
  -o-transition: all ease .4s;
  transition: all ease .4s;
}
@-webkit-keyframes scales {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@-moz-keyframes scales {
	0% {
		-moz-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-moz-transform: scale(0.8);
		transform: scale(0.8);
	}
	100% {
		-moz-transform: scale(1);
		transform: scale(1);
	}
}
@-o-keyframes scales {
	0% {
		-o-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-o-transform: scale(0.8);
		transform: scale(0.8);
	}
	100% {
		-o-transform: scale(1);
		transform: scale(1);
	}
}
@-ms-keyframes scales {
	0% {
		-ms-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-ms-transform: scale(0.8);
		transform: scale(0.8);
	}
	100% {
		-ms-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes scales {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}


.redbook-tit{ max-width: 580px; margin: 0 auto; text-align: center; font-size: 32px; color: #333333; font-weight: bold; letter-spacing: 2px; position: relative; padding-bottom: 28px; border-bottom: 1px solid #999999;}
.redbook-tit:after{ content: ""; position: absolute; bottom:-6px; margin-left: -6px; left:50%; width: 12px; height: 12px; background: #f62d4f; border-radius: 100%;}
.redbook-des{  margin-top: 25px; font-size: 20px; color: #666; text-align: center; letter-spacing: 1px;}
a.redbook-bt{ display: block; margin: 0 auto; width: 234px; height: 68px; line-height: 68px; background: #f62d4f; color: #FFFFFF; font-weight: bold; font-size: 24px; text-align: center; position: relative;} 

.redbook-box{ padding: 60px 0; text-align: center; background: #ffffff;}
.redbook-box .content{ margin-top: 55px;}
.redbook-brand{ padding: 60px 0; background: #fafafa;}
.redbook-brand li{ margin-top:50px; float: left; width: 23.5%; margin-right:2%; text-align: center;}
.redbook-brand li:nth-child(4n){ margin-right:0;}
.redbook-brand li span{ display: block; font-size:24px; color:#FFFFFF; background: #f62d4f; line-height: 70px;}
.redbook-brand li p{ border: 1px solid #afafaf; padding: 22px 30px; font-size: 20px; line-height: 30px; color: #666666;}
.redbook-market{ padding: 60px 0;  background: #ffffff;}
.redbook-market .content{ margin-top: 55px;}
.redbook-market .left{ float: left; width: 58%;}
.redbook-market .right{ float: right; width:38%;}

.redbook-flow{ padding:60px 0; background: #f9f9f9;}
.redbook-flow .con{ margin: 40px 0 60px; text-align: center;}
.redbook-exposure{ background: #FFFFFF;}

.redbook-case{ background: #f9f9f9; padding: 60px 0;}
.redbook-case .logo-div{ max-width: 1440px; margin: 60px auto 50px;}
.redbook-case .logo-div div{ float: left; width:12.5%; padding: 0 10px; box-sizing: border-box;}
.redbook-case .slick{ padding-bottom: 65px;}
.redbook-case .slick-dots{ bottom:0;}
.redbook-case .slick-dots li{ width: 16px; height: 16px; margin: 0 8px;}
.redbook-case .slick-dots li button{ width: 16px; height: 16px; border-radius: 100%; border: 1px solid #f62d4f; background: #ffffff;}
.redbook-case .slick-dots li button:before{ display: none}
.redbook-case .slick-dots li.slick-active button{background:#f62d4f;}




.pop{ display: none; position: fixed; top:0; left:0; height: 100%; width: 100%; background: rgba(0,0,0,.6); text-align: center; z-index:999;}
.pop .content+i{ display: inline-block; vertical-align: middle; height: 100%;}
.pop .content{ max-width:400px; width:85%; background: #ffffff; display: inline-block; vertical-align: middle; position: relative;}
.pop .tit{ perspective-origin: right;}
.pop .close{ position: absolute; top:15px; right:20px; display:inline-block; width: 23px; height: 23px; background:url(../image/close.png); cursor: pointer;}
.pop .con{ padding:0 40px 40px;}
.pop .in{ margin-bottom:10px;}
.pop .in input{ background: none; border: none; width: 100%; line-height:24px; padding:8px 15px; background: #e9e9e9; color:#333333;}
.pop .bt{ margin-top:20px; display: block; background: #288fd4; color: #FFFFFF;}
.pop .bt i{ display: inline-block; vertical-align: middle; width:21px; height: 21px; background:url(../image/pop_bt.png);}
.pop .bt span{ display: inline-block; vertical-align: middle; margin-left:10px; height:34px; line-height: 34px; font-size:16px;}
.pop .tip{ margin-top: 10px;}


body{
	/* padding-top:110px !important; */
	background: #eaeaea !important;
}


.CommonHeaderBottomOtherBanner {
	text-align: center;
	height: 640px;
	background-size: cover;
	background-position: center center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
		-ms-flex-direction: column;
			flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
		-ms-flex-pack: center;
			justify-content: center; }
	.CommonHeaderBottomOtherBanner p {
	  font-size: 40px;
	  color: #fff;
	  font-weight: bold; }
	  .CommonHeaderBottomOtherBanner p.lag {
		font-size: 18px;
		color: #fff;
		margin-top: 20px;
		font-weight: normal; }
	.CommonHeaderBottomOtherBanner a.GradientCommonButton {
	  margin-top: 45px; }
	.CommonHeaderBottomOtherBanner a {
	  margin: 0 auto; }
	@media (max-width: 1599px) {
	  .CommonHeaderBottomOtherBanner {
		height: 533px; }
		.CommonHeaderBottomOtherBanner p {
		  font-size: 30px; }
		  .CommonHeaderBottomOtherBanner p.lag {
			font-size: 16px; } }

			.CommonHeaderBottomOtherBanner .container {
				padding-top: 80px; }
				@media (max-width: 1599px) {
				  .CommonHeaderBottomOtherBanner .container {
					padding-top: 60px; } }