/* 未能缩小。正在返回未缩小的内容。
(453,110): run-time error CSS1036: Expected expression, found ';'
 */
/*************========模板 template start==========************/
/*公共*/
.service.template { width: 100%;}

.service.template .service-banner .service-box { height: 480px;}
.service.template .service-banner .banner-word { position: static; display: block; width: 100%; margin: 0 auto!important; padding: 30px 0 0; text-align: justify;}
.service.template .service-banner .banner-word .h1 { float: none; padding: 0; color: #333; text-align: center;}
.service.template .service-banner .banner-word p { float: none; width: 76%; margin: 5px auto; text-align: center; color: #333;}
.service.template .service-nav .nav-box { border: 0;}
.service.template .service-nav .nav-box .service-box { height: 100%; border-bottom: 1px solid #d9d9d9;}
.service.template .service-nav li a { color: #333;}
.service.template .service-nav li.active a { color: #e4007f;}
.service.template .service-nav li.all { float: right; padding-top: 10px;}
.service.template .service-nav li.all a { width: 110px; height: 40px; line-height: 40px; padding: 0; background-color: #E4007F; color: #fff; text-align: center; font-size: 16px; border-radius: 3px;}
.service.template .template-list { width: 100%; padding: 50px 0; text-align: center; overflow: hidden;}
.service.template .template-list .service-box li { display: inline-block; padding: 0 3%;}
.service.template .template-list .service-box li img { display: block;}
.service.template .template-list .service-box li p { font-size: 14px; color: #333;}
.service.template .template-list.animate-enable .service-box li img { opacity: 0; transition: all .5s ease-in-out;}
.service.template .template-list.animate-active .service-box li img { opacity: 1; transform: rotate(360deg);}
.service.template .template-list.animate-active .service-box li:nth-of-type(2) img { transition-delay: .2;}
.service.template .template-list.animate-active .service-box li:nth-of-type(3) img { transition-delay: .4;}
.service.template .template-list.animate-active .service-box li:nth-of-type(4) img { transition-delay: .6;}
.service.template .template-list.animate-active .service-box li:nth-of-type(5) img { transition-delay: .8;}

.service.template .service-box .template-title { margin: 0; padding: 30px 0; font-size: 28px; color: #333; text-align: left; font-weight: bold!important;}
.service.template .template-intr { float: left; width: 100%; clear: both; padding: 6% 0 3%; background-color: #fff;}
.service.template .service-box .intr-content { width: 43%; margin-left: 4%;}
.service.template .service-box .intr-content .intr-word { padding: 0; line-height: 26px; font-size: 14px; color: #666;}
.service.template .service-box .intr-content .intr-word p { padding-bottom: 30px; font-size: 14px; color: #666;}
.service.template .service-box .intr-image { position: relative; height: 360px; width: 50%; margin-top: -20px; text-align: center;}
.service.template div .service-box .intr-image img { position: absolute;}
/********========商城 start==========******/
.service.mall .service-banner { background: url(../images/Mall/banner.jpg)no-repeat center center; background-size: cover ;}
/*产品需求*/
.service.mall .template-intr .service-box .intr-image .image-1 { bottom: 0; top: 0; left: 0; right: 0; margin: auto; width: 80%;}
.service.mall .template-intr .service-box .intr-image .image-2 { left: 4%; top: 0; bottom: 0; margin: auto; width: 13%;}
.service.mall .template-intr .service-box .intr-image .image-3 { top: 0; left: 0; right: 0; margin: auto; width: 13%;}
.service.mall .template-intr .service-box .intr-image .image-4 { right: 4%; top: 0; bottom: 0; margin: auto; width: 13%;}
.service.mall .template-intr .service-box .intr-image .image-5 { bottom: 0; left: 0; right: 0; margin: auto;  width: 13%;}
/*设计分析*/
.service.mall .template-design { clear: both; padding: 8% 0 5%; background-color: #f7f7f7 ; overflow: hidden;} 
.service.mall .service-box .intr-image .img-1 { top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 40%;}
.service.mall .service-box .intr-image .img-3 { top: 0; left: 0; right: 0; margin: auto; width: 28%;}
.service.mall .service-box .intr-image .img-2 { left: 14%; top: 58%; width: 28%;}
.service.mall .service-box .intr-image .img-4 { right: 14%; top: 58%; width: 28%;}
/*三大需求*/
.service.mall .template-all { padding: 10% 0 8%; clear: both; background: url(../images/Mall/bg.jpg)no-repeat center center; background-size: cover; overflow: hidden;}
.service.mall .template-all .service-box .intr-content .template-title { padding: 0;}
.service.mall .template-all .service-box .intr-content .intr-word { padding: 10px 10px 40px 0;}
.service.mall .template-all .service-box .intr-content .more a { display: block; width: 110px; height: 40px; line-height: 40px; font-size: 16px; background-color: #e4007f; color: #fff; text-align: center; border-radius: 3px;}
.service.mall .template-all .service-box .intr-content .more a:hover { opacity: .8;}
.service.mall .template-all .service-box .intr-image .image-1 { left: 0; right: 0; top: 0; margin: auto; width: 90%;}
.service.mall .template-all .service-box .intr-image .image-2 { width: 38%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.mall .template-all .service-box .intr-image .image-3 { width: 30%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
/*动画*/
.service.template .template-intr.animate-enable .intr-content { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out;}
.service.mall .template-intr.animate-enable .intr-image { opacity: 0;transform: scale(.5) rotateX(360deg); transition: all .8s ease-in-out;}
.service.mall .template-intr.animate-enable .intr-image img { opacity: 0;transform: scale(.5); transition: all 1s ease-in-out;}
.service.template .template-intr.animate-active .intr-content { opacity: 1; transform: translateX(0);}
.service.mall .template-intr.animate-active .intr-image { opacity: 1; transform: scale(1) rotateX(0);}
.service.mall .template-intr.animate-active .intr-image img { opacity: 1; transform:  rotate(360deg);}
.service.mall .template-intr.animate-enable .intr-image .image-2 { transition-delay: .8s;}
.service.mall .template-design.animate-enable .service-box .intr-image img { opacity: 0; transform: scale(.2); transition: all .8s ease-in-out;}
.service.mall .template-design.animate-enable .service-box .intr-content .intr-word p { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out;}
.service.mall .template-design.animate-active .service-box .intr-image img { opacity: 1; transform: scale(1);}
.service.mall .template-design.animate-active .service-box .intr-image img:nth-of-type(2) { transition-delay: .5s;}
.service.mall .template-design.animate-active .service-box .intr-image img:nth-of-type(3) { transition-delay: .8s;}
.service.mall .template-design.animate-active .service-box .intr-image img:nth-of-type(4) { transition-delay: 1.1s;}
.service.mall .template-design.animate-active .service-box .intr-content .intr-word p { opacity: 1; transform: translateX(0); }
.service.mall .template-design.animate-active .service-box .intr-content .intr-word p:nth-of-type(2) { transition-delay: .3s;}
.service.mall .template-design.animate-active .service-box .intr-content .intr-word p:nth-of-type(3) { transition-delay: .6s;}
.service.mall .template-all.animate-enable .intr-content { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out;}
.service.mall .template-all.animate-enable .intr-image .image-1 { opacity: 0; transform: scale(.5) rotate(360deg); transition: all 1s ease-in-out;}
.service.mall .template-all.animate-enable .intr-image .image-2 { opacity: 0; transform: scale(.5); transition: all .8s ease-in-out;}
.service.mall .template-all.animate-enable .intr-image .image-3 { opacity: 0; transform: scale(.5); transition: all .8s ease-in-out;}
.service.mall .template-all.animate-active .intr-content { opacity: 1; transform: translateX(0);}
.service.mall .template-all.animate-active .intr-image .image-1 { opacity: 1;transform: scale(1) rotate(0);}
.service.mall .template-all.animate-active .intr-image .image-2 { opacity: 1;transform: scale(1); transition-delay: .5s;}
.service.mall .template-all.animate-active .intr-image .image-3 { opacity: 1;transform: scale(1); transition-delay: .8s;}
/*****=====功能介绍=====*****/

/*****=====交互体验=====*****/
/*说明1*/
.service.mall .inEx { width: 100%; padding: 6% 0 5%; clear: both; overflow: hidden;}
.service.mall .annotations1 .intr-image { background: url(../images/Mall/interactiveExperience/image_01.png)no-repeat center center; background-size: 50% auto; }
.service.mall .annotations1 .intr-image .image-1 { width: 16%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: translate(-96%,-40%);}
.service.mall .annotations1 .intr-image .image-2 { width: 16%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: translate(0,106%);}
.service.mall .annotations1 .intr-image .image-3 { width: 16%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: translate(96%,-40%); }
.service.mall .annotations1 .intr-content.animate-enable { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out; }
.service.mall .annotations1 .intr-content.animate-active { opacity: 1; transform: translateX(0);}
.service.mall .annotations1 .intr-image.animate-enable img { opacity: 0; transform: scale(0) rotate(360deg) translate(0,0); transition: all .8s ease-in-out; }
.service.mall .annotations1 .intr-image.animate-active .image-1 { opacity: 1; transform: scale(1) rotate(0) translate(-96%,-40%); }
.service.mall .annotations1 .intr-image.animate-active .image-2 { opacity: 1; transform: scale(1) rotate(0) translate(0,106%); }
.service.mall .annotations1 .intr-image.animate-active .image-3 { opacity: 1; transform: scale(1) rotate(0) translate(96%,-40%); }
/*说明2*/
.service.mall .annotations2 { background-color: #f7f7f7;}
.service.mall .annotations2 .intr-image .image-1 { width: 54%; left: 10%; bottom: 0;}
.service.mall .annotations2 .intr-image .image-2 { width: 53%; left: 20%; bottom: 30%;}
.service.mall .annotations2 .intr-content.animate-enable { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out; }
.service.mall .annotations2 .intr-content.animate-active { opacity: 1; transform: translateX(0);}
.service.mall .annotations2 .intr-image.animate-enable .image-1 { opacity: 0; transform: scale(0) translate(-60%,-30%); transition: all .8s ease-in-out; }
.service.mall .annotations2 .intr-image.animate-enable .image-2 { opacity: 0; transform: translate(-30%,40%); transition: all .8s ease-in-out; }
.service.mall .annotations2 .intr-image.animate-active .image-1 { opacity: 1; transform: translate(0,0); }
.service.mall .annotations2 .intr-image.animate-active .image-2 { opacity: 1; transform: scale(1) translate(0%,0%); transition-delay: .5s;}
/*说明3*/
.service.mall .annotations3 .intr-image .image-1 { width: 55%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.mall .annotations3 .intr-image .image-2 { left: 0; right: 0; top: 0; bottom: 0; margin: auto; padding: 22% 0 0 12%;}
.service.mall .annotations3 .intr-content.animate-enable { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out; }
.service.mall .annotations3 .intr-content.animate-active { opacity: 1; transform: translateX(0);}
.service.mall .annotations3 .intr-image.animate-enable .image-1 { opacity: 0; transform: scale(0) translate(-30%,-40%); transition: all .8s ease-in-out; }
.service.mall .annotations3 .intr-image.animate-enable .image-2 { opacity: 0; transform: translate(-30%,50%); transition: all .8s ease-in-out; }
.service.mall .annotations3 .intr-image.animate-active .image-1 { opacity: 1; transform: scale(1) translate(0%,0%); }
.service.mall .annotations3 .intr-image.animate-active .image-2 { opacity: 1; transform:translate(0%,0%); transition-delay: .5s; }
/*****=====seo优化=====*****/
/*网络营销功能*/
.service.mall .marketing { padding: 8% 0 4%; clear: both; overflow: hidden;}
.service.mall .marketing .intr-content .intr-word { width: 62%;}
.service.mall .marketing .intr-image .image-1 { width: 65%; left: 0; bottom: 5%; margin: auto;}
.service.mall .marketing .intr-image .image-2 { left: 62%; bottom: 35%; width: 28%;}
.service.mall .marketing .intr-content.animate-enable { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out; }
.service.mall .marketing .intr-content.animate-active { opacity: 1; transform: translateX(0);}
.service.mall .marketing .intr-image.animate-enable .image-1 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out; }
.service.mall .marketing .intr-image.animate-enable .image-2 { opacity: 0; transform: translate(-60%,60%) scale(0); transition: all .8s ease-in-out; }
.service.mall .marketing .intr-image.animate-active .image-1 { opacity: 1; transform: scale(1); }
.service.mall .marketing .intr-image.animate-active .image-2 { opacity: 1; transform: translate(0,0) scale(1); transition-delay: .8s;}
/*sns社区*/
.service.mall .snsCommunity { padding: 8% 0 1%;  clear: both; background-color: #f7f7f7; overflow: hidden;}
.service.mall .snsCommunity .intr-content .intr-word { width: 62%;}
.service.mall .snsCommunity .intr-image .image-1 {left: 0; bottom: 5%; width: 38%;}
.service.mall .snsCommunity .intr-image .image-2 {left: 30%; bottom: 5%; width: 56%;}
.service.mall .snsCommunity .intr-content.animate-enable { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out; }
.service.mall .snsCommunity .intr-content.animate-active { opacity: 1; transform: translateX(0);}
.service.mall .snsCommunity .intr-image.animate-enable .image-1 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out; }
.service.mall .snsCommunity .intr-image.animate-enable .image-2 { opacity: 0; transform: translate(-60%,60%) scale(0); transition: all .8s ease-in-out; }
.service.mall .snsCommunity .intr-image.animate-active .image-1 { opacity: 1; transform: scale(1); }
.service.mall .snsCommunity .intr-image.animate-active .image-2 { opacity: 1; transform: translate(0,0) scale(1); transition-delay: .8s;}

/*社区互动*/
.service.mall .communityInteraction { padding: 6% 0 3%; overflow: hidden;}
.service.mall .communityInteraction .intr-content .intr-word { width: 62%; text-align: justify;}
.service.mall .communityInteraction .intr-image .image-1 {left: 0; bottom: 62%; width: 16.5%;}
.service.mall .communityInteraction .intr-image .image-2 {left: 0; bottom: 0; top: 0; margin: auto; width: 16.5%;}
.service.mall .communityInteraction .intr-image .image-3 {left: 0; bottom: 10%; width: 16.5%;}
.service.mall .communityInteraction .intr-image .image-4 {left: 20%; bottom: 0; top: 0; margin: auto; width: 12%;}
.service.mall .communityInteraction .intr-image .image-5 {left: 38%; bottom: 0; top: 0; margin: auto; width: 60%;}
.service.mall .communityInteraction .intr-content.animate-enable { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out; }
.service.mall .communityInteraction .intr-content.animate-active { opacity: 1; transform: translateX(0);}
.service.mall .communityInteraction .intr-image.animate-enable .image-1 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out; }
.service.mall .communityInteraction .intr-image.animate-enable .image-2 { opacity: 0; transform: translate(-60%,60%) scale(0); transition: all .8s ease-in-out; }
.service.mall .communityInteraction .intr-image.animate-enable .image-3 { opacity: 0; transform: translate(-60%,60%) scale(0); transition: all .8s ease-in-out; }
.service.mall .communityInteraction .intr-image.animate-enable .image-4 { opacity: 0; transform: translateX(-60%) scale(0); transition: all .8s ease-in-out; }
.service.mall .communityInteraction .intr-image.animate-enable .image-5 { opacity: 0; transform: scale(1.2); transition: all .8s ease-in-out; }
.service.mall .communityInteraction .intr-image.animate-active .image-1 { opacity: 1; transform: scale(1); }
.service.mall .communityInteraction .intr-image.animate-active .image-2 { opacity: 1; transform: translate(0,0) scale(1); transition-delay: .2s;}
.service.mall .communityInteraction .intr-image.animate-active .image-3 { opacity: 1; transform: translate(0,0) scale(1); transition-delay: .3s;}
.service.mall .communityInteraction .intr-image.animate-active .image-4 { opacity: 1; transform: translateX(0) scale(1); transition-delay: .4s;}
.service.mall .communityInteraction .intr-image.animate-active .image-5 { opacity: 1; transform: scale(1); transition-delay: .6s;}
/*****=====功能介绍=====*****/
.service.mall .fun2 { background-color: #f7f7f7;}
/*促销手段*/
.service.mall .fun2 .intr-image .image-1 { width: 52%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.mall .fun2 .intr-image .image-2 { width: 27%; right: 2%; top: 10%;}
.service.mall .fun2 .intr-image .image-3 { width: 20%; left: 6%; top: 10%;}
.service.mall .fun2 .intr-content.animate-enable { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out; }
.service.mall .fun2 .intr-content.animate-active { opacity: 1; transform: translateX(0);}
.service.mall .fun2 .intr-image.animate-enable .image-1 { opacity: 0; transform: scale(0) translate(-30%,-40%); transition: all .8s ease-in-out; }
.service.mall .fun2 .intr-image.animate-enable .image-2 { opacity: 0; transform: translate(-30%,50%); transition: all .8s ease-in-out; }
.service.mall .fun2 .intr-image.animate-enable .image-3 { opacity: 0; transform: scale(0) translate(30%,50%); transition: all .8s ease-in-out; }
.service.mall .fun2 .intr-image.animate-active .image-1 { opacity: 1; transform: scale(1) translate(0%,0%); }
.service.mall .fun2 .intr-image.animate-active .image-2 { opacity: 1; transform: translate(0%,0%); transition-delay: .6s; }
.service.mall .fun2 .intr-image.animate-active .image-3 { opacity: 1; transform: scale(1) translate(0%,0%); transition-delay: .5s;}
/*智能客服系统*/
.service.mall .fun3 .intr-image .image-1 { width: 67%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.mall .fun3 .intr-image .image-2 { width: 26%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.mall .fun3 .intr-content.animate-enable { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out; }
.service.mall .fun3 .intr-content.animate-active { opacity: 1; transform: translateX(0);}
.service.mall .fun3 .intr-image.animate-enable .image-1 { opacity: 0; transform: scale(0) rotate(360deg) translate(-30%,-40%); transition: all .8s ease-in-out; }
.service.mall .fun3 .intr-image.animate-enable .image-2 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out; }
.service.mall .fun3 .intr-image.animate-active .image-1 { opacity: 1; transform: scale(1) rotate(0deg) translate(0%,0%); }
.service.mall .fun3 .intr-image.animate-active .image-2 { opacity: 1; transform: scale(1); transition-delay: .6s; }
/********========商城 end==========********/

/********========小程序 start==========****/
.service.template .template-design { padding: 6% 0 3%;  clear: both; background-color: #f7f7f7; overflow: hidden;}
.service.template .template-all { padding: 6% 0 3%;  clear: both; background: url(../images/miniProgram/bg.jpg)no-repeat center center; background-size: cover; overflow: hidden;}
/*****=====模板概述=====*****/
/*解决方案*/
.service.miniProgram .service-banner { background: url(../images/miniProgram/banner.jpg)no-repeat center center; background-size: cover ;}
.service.miniProgram .mini-intr .service-box .intr-image .image-1 { width: 40%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.miniProgram .mini-intr .service-box .intr-image .image-2 { width: 17%; left: 40%; bottom: 0; top: 0; margin: auto;}
.service.miniProgram .mini-intr .service-box .intr-image .image-3 { width: 58%; left: 24%; bottom: 0; top: 0; margin: auto;}
.service.miniProgram .mini-intr.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: rotate(180deg) translateX(-300px); transition: all .8s ease-in-out;}
.service.miniProgram .mini-intr.animate-enable .service-box .intr-image .image-2 { opacity: 0; transform: scale(.5); transition: all .8s ease-in-out;}
.service.miniProgram .mini-intr.animate-enable .service-box .intr-image .image-3 { opacity: 0; transform: scale(1.2); transition: all .8s ease-in-out;}
.service.miniProgram .mini-intr.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: rotate(360deg) translateX(0);}
.service.miniProgram .mini-intr.animate-active .service-box .intr-image .image-2 { opacity: 1; transform: scale(1); transition-delay: .3s;}
.service.miniProgram .mini-intr.animate-active .service-box .intr-image .image-3 { opacity: 1; transform: scale(1); transition-delay: .5s;}
/*玩法模式*/
.service.miniProgram .mini-design .service-box .intr-image .image-1 { width: 36%; left: 30.5%; top: 12%; margin: auto;}
.service.miniProgram .mini-design .service-box .intr-image .image-2 { width: 22%; left: 0; right: 0; bottom: 0; margin: auto;}
.service.miniProgram .mini-design .service-box .intr-image .image-3 { z-index: 2; width: 36%; left: 24%; bottom: 30%; margin: auto;}
.service.miniProgram .mini-design .service-box .intr-image .image-4 { z-index: 1; width: 26%; right: 20%; bottom: 29%; margin: auto;}
.service.miniProgram .mini-design.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: translateY(50px); transition: all .8s ease-in-out;}
.service.miniProgram .mini-design.animate-enable .service-box .intr-image .image-2 { opacity: 0; transform: scale(.5) translateY(300px); transition: all .8s ease-in-out;}
.service.miniProgram .mini-design.animate-enable .service-box .intr-image .image-3 { opacity: 0; transform: scale(.2); transition: all .8s ease-in-out;}
.service.miniProgram .mini-design.animate-enable .service-box .intr-image .image-4 { opacity: 0; transform: scale(.6); transition: all .8s ease-in-out;}
.service.miniProgram .mini-design.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: scale(1); transition-delay: .8s;}
.service.miniProgram .mini-design.animate-active .service-box .intr-image .image-2 { opacity: 1; transform: scale(1) translateY(0);}
.service.miniProgram .mini-design.animate-active .service-box .intr-image .image-3 { opacity: 1; transform: scale(1) translateY(0); transition-delay: .4s;}
.service.miniProgram .mini-design.animate-active .service-box .intr-image .image-4 { opacity: 1; transform: scale(1) translateY(0); transition-delay: .6s;}
/*交易服务*/
.service.miniProgram .mini-service .service-box .intr-image .image-1 { width: 34%; left: 0; right: 0; bottom: 0; top: 0; margin: auto;}
.service.miniProgram .mini-service .service-box .intr-image .image-2 { width: 48%; left: 0; right: 0; bottom: 0; top: 0; margin: auto;}
.service.miniProgram .mini-service .service-box .intr-image .image-3 { width: 12%; left: 0; right: 0; bottom: inherit; top: 0; margin: auto;}
.service.miniProgram .mini-service .service-box .intr-image .image-4 { width: 12%; left: 19%; bottom: 0; top: 0; right: inherit; margin: auto;}
.service.miniProgram .mini-service .service-box .intr-image .image-5 { width: 12%; right: 19%; bottom: 0; top: 0; left: inherit; margin: auto;}
.service.miniProgram .mini-service .service-box .intr-image .image-6 { width: 12%; left: 0; right: 0; bottom: 0; margin: auto;}
.service.miniProgram .mini-service.animate-enable .service-box .intr-image img { opacity: 0; transform: scale(.2); transition: all .8s ease-in-out;}
.service.miniProgram .mini-service.animate-active .service-box .intr-image .image-3 { transform: translateY(0);}
.service.miniProgram .mini-service.animate-active .service-box .intr-image img { opacity: 1; transform: scale(1);}

/*打造精品*/
.service.miniProgram .template-all .intr-image .image-1 { z-index: 3; width: 17%; left: 62%; top: 50%; margin: auto;}
.service.miniProgram .template-all .intr-image .image-2 { z-index: 2; width: 46%; left: 25%; right: inherit; top: 20%; bottom: 0; margin: auto;}
.service.miniProgram .template-all .intr-image .image-3 { width: 71%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.miniProgram .mini-service .service-box .intr-image .image-3 { transform: translateY(100px);}
.service.miniProgram .template-all.animate-enable .intr-image .image-1 { opacity: 0; transform: translateX(-50px); transition: all .8s ease-in-out;}
.service.miniProgram .template-all.animate-enable .intr-image .image-2 { opacity: 0; transform: translateY(300px); transition: all .8s ease-in-out;}
.service.miniProgram .template-all.animate-enable .intr-image .image-3 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .template-all.animate-active .intr-image .image-2 { opacity: 1; transform: translateY(0);}
.service.miniProgram .template-all.animate-active .intr-image .image-1 { opacity: 1; transform: translateY(0); transition-delay: .3s;}
.service.miniProgram .template-all.animate-active .intr-image .image-3 { opacity: 1; transform: scale(1); transition-delay: .6s;}
/*****=====功能介绍=====*****/
.service.miniProgram .inter-impact { padding: 6% 0 3%; clear: both; overflow: hidden;}
.service.miniProgram .inter-impact .service-box .intr-image .image-1 { z-index: 3; width: 33%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; padding-bottom: 9%;}
.service.miniProgram .inter-impact .service-box .intr-image .image-2 { z-index: 1; width: 50%; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
.service.miniProgram .inter-impact .service-box .intr-image .image-3 { z-index: 4; width: 60%; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
.service.miniProgram .inter-impact .service-box .intr-image .image-4 { z-index: 2; width: 50%; left: 28%; right: inherit; bottom: inherit; top: 16%; margin: auto; }
.service.miniProgram .inter-impact .service-box .intr-content .more { padding-top: 30px;}
.service.miniProgram .inter-impact .service-box .intr-content .more a { display: block; width: 110px; height: 40px; line-height: 40px; font-size: 16px; text-align: center; color: #fff; border-radius: 3px;}
.service.miniProgram .inter-impact.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out;}
.service.miniProgram .inter-impact.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.miniProgram .inter-impact.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: translateY(-200px) scale(1.2); transition: all .8s ease-in-out;}
.service.miniProgram .inter-impact.animate-enable .service-box .intr-image .image-2 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .inter-impact.animate-enable .service-box .intr-image .image-3 { opacity: 0; transform: rotate(180deg); transition: all .8s ease-in-out;}
.service.miniProgram .inter-impact.animate-enable .service-box .intr-image .image-4 { opacity: 0; transform: translate(300px,200px); transition: all .8s ease-in-out;}
.service.miniProgram .inter-impact.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: translateY(0) scale(1);}
.service.miniProgram .inter-impact.animate-active .service-box .intr-image .image-2 { opacity: 1; transform: scale(1);}
.service.miniProgram .inter-impact.animate-active .service-box .intr-image .image-3 { opacity: 1; transform: rotate(0);}
.service.miniProgram .inter-impact.animate-active .service-box .intr-image .image-4 { opacity: 1; transform: translate(0,0); transition-delay: .5s;}
/*电商营销类小程序*/
.service.miniProgram .fun-impact { padding: 6% 0 3%; clear: both; overflow: hidden;}
.service.miniProgram .fun-impact.bg { background-color: #f7f7f7;}
.service.miniProgram .fun-impact .service-box .intr-image .image-1 { z-index: 3; width: 33%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; padding-bottom: 9%; }
.service.miniProgram .fun-impact .service-box .intr-image .image-2 { z-index: 1; width: 50%; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }
.service.miniProgram .fun-impact .service-box .intr-image .image-3 { z-index: 4; width: 62%; left: 6%; right: 0; bottom: 0; top: 5%; margin: auto; }
.service.miniProgram .fun-impact .service-box .intr-image.fr .image-3 { z-index: 4; width: 66%; left: 1%; right: 0; bottom: 0; top: 2%; margin: auto; }

.service.miniProgram .fun-impact.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out;}
.service.miniProgram .fun-impact.bg.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out;}
.service.miniProgram .fun-impact.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.miniProgram .fun-impact.bg.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}

.service.miniProgram .fun-impact.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: translateY(-200px) scale(1.2); transition: all .8s ease-in-out;}
.service.miniProgram .fun-impact.animate-enable .service-box .intr-image .image-2 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .fun-impact.animate-enable .service-box .intr-image .image-3 { opacity: 0; transform: rotate(180deg); transition: all .8s ease-in-out;}
.service.miniProgram .fun-impact.animate-enable .service-box .intr-image .image-4 { opacity: 0; transform: translate(300px,200px); transition: all .8s ease-in-out;}
.service.miniProgram .fun-impact.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: translateY(0) scale(1);}
.service.miniProgram .fun-impact.animate-active .service-box .intr-image .image-2 { opacity: 1; transform: scale(1);}
.service.miniProgram .fun-impact.animate-active .service-box .intr-image .image-3 { opacity: 1; transform: rotate(0);}

.service.miniProgram .fun-impact .service-box .intr-content .more { padding-top: 30px;}
.service.miniProgram .fun-impact .service-box .intr-content .more a { display: block; width: 110px; height: 40px; line-height: 40px; font-size: 16px; text-align: center; color: #fff; border-radius: 3px;}
.rose { background-color: #ff41b4;}
.green{ background-color: #30cf19;}
.blue{ background-color: #40c4fb;}
.orange{ background-color: #ff8134;}
.purple{ background-color: #7a47ed;}
.red{ background-color: #e82f1c;}
/*交互体验*/
.service.miniProgram .inter-exp,.service.miniProgram .inter-design,.service.miniProgram .inter-wx { padding: 6% 0 3%; clear: both; overflow: hidden;}
.service.miniProgram .inter-exp .service-box .intr-image .image-1 { left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 70%;}

.service.miniProgram .inter-exp.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out;}
.service.miniProgram .inter-exp.animate-enable .service-box .intr-image { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out;}
.service.miniProgram .inter-exp.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.miniProgram .inter-exp.animate-active .service-box .intr-image { opacity: 1; transform: translateX(0);}

.service.miniProgram .inter-design { background-color: #f7f7f7;}
.service.miniProgram .inter-design .service-box .intr-image .image-1 { width: 30%; top: 0; bottom: 0; right: 0; left: 0; margin: auto;}
.service.miniProgram .inter-design .service-box .intr-image .image-2 { width: 20%; top: 0; bottom: 0; right: 0; left: 0; margin: auto;}
.service.miniProgram .inter-design .service-box .intr-image .image-3 { width: 11%; top: 0; right: 0; left: 0; margin: auto;}
.service.miniProgram .inter-design .service-box .intr-image .image-4 { width: 11%; top: 16%; left: 20%;}
.service.miniProgram .inter-design .service-box .intr-image .image-5 { width: 11%; top: 58%; left: 22%; margin: auto;}
.service.miniProgram .inter-design .service-box .intr-image .image-6 { width: 9%; bottom: 0; left: 0; right: 0; margin: auto;}
.service.miniProgram .inter-design .service-box .intr-image .image-7 { width: 11%; top: 58%; right: 22%; margin: auto;}
.service.miniProgram .inter-design .service-box .intr-image .image-8 { width: 11%; top: 16%; right: 20%; margin: auto;}
.service.miniProgram .inter-design.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out;}
.service.miniProgram .inter-design.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .inter-design.animate-enable .service-box .intr-image .image-2 { opacity: 0; transform: scale(1.2); transition: all .8s ease-in-out;}
.service.miniProgram .inter-design.animate-enable .service-box .intr-image .image-3 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .inter-design.animate-enable .service-box .intr-image .image-4 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .inter-design.animate-enable .service-box .intr-image .image-5 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .inter-design.animate-enable .service-box .intr-image .image-6 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .inter-design.animate-enable .service-box .intr-image .image-7 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .inter-design.animate-enable .service-box .intr-image .image-8 { opacity: 0; transform: scale(0); transition: all .8s ease-in-out;}
.service.miniProgram .inter-design.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.miniProgram .inter-design.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: scale(1); transition-delay: .2s;}
.service.miniProgram .inter-design.animate-active .service-box .intr-image .image-2 { opacity: 1; transform: scale(1); transition-delay: .3s;}
.service.miniProgram .inter-design.animate-active .service-box .intr-image .image-3 { opacity: 1; transform: scale(1); transition-delay: .4s;}
.service.miniProgram .inter-design.animate-active .service-box .intr-image .image-4 { opacity: 1; transform: scale(1); transition-delay: .5s;}
.service.miniProgram .inter-design.animate-active .service-box .intr-image .image-5 { opacity: 1; transform: scale(1); transition-delay: .6s;}
.service.miniProgram .inter-design.animate-active .service-box .intr-image .image-6 { opacity: 1; transform: scale(1); transition-delay: .7s;}
.service.miniProgram .inter-design.animate-active .service-box .intr-image .image-7 { opacity: 1; transform: scale(1); transition-delay: .8s;}
.service.miniProgram .inter-design.animate-active .service-box .intr-image .image-8 { opacity: 1; transform: scale(1); transition-delay: .9s;}

.service.miniProgram .inter-wx.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out;}
.service.miniProgram .inter-wx.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.miniProgram .inter-wx.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: scale(0) rotateY(180deg); transition: all .8s ease-in-out;}
.service.miniProgram .inter-wx.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: scale(1) rotateY(0);}
.service.miniProgram .inter-wx .service-box .intr-image .image-1 { width: 40%; top: 0; bottom: 0; right: 0; left: 0; margin: auto;}
.service.miniProgram .inter-wx .service-box .intr-image .image-2 { width: 17%; top: 0; bottom: 0; left: 40%; margin: auto;}
.service.miniProgram .inter-wx .service-box .intr-image .image-3 { width: 52%; top: 0; bottom: 0; right: 0; left: 0; margin: auto; padding-left: 5%;}
/********========小程序 end==========******/

/********========网站 start==========******/
.service.website .service-banner { background: url(../images/website/banner.jpg)no-repeat center center; background-size: cover ;}
.service.website .service-box .template-title { line-height: 40px;}
/**模板概述**/
/*产品需求*/
.service.website .website-intr .service-box .intr-image .image-1 { width: 50%; left: 10%; top: 0; bottom: 0; margin: auto;}
.service.website .website-intr .service-box .intr-image .image-2 { width: 13%; left: 65%; top: 0; bottom: 0; margin: auto;}
.service.website .website-intr .service-box .intr-image .image-3 { width: 16%; left: 82%; top: 0; bottom: 0; margin: auto;}
.service.website .website-intr.animate-enable .service-box .intr-image .image-1 {  opacity: 0; transform: rotateX(360deg) scale(.2); transition: all .8s ease-in-out;}
.service.website .website-intr.animate-enable .service-box .intr-image .image-2 {  opacity: 0; transform: translateX(-100px) scale(.2); transition: all .8s ease-in-out;}
.service.website .website-intr.animate-enable .service-box .intr-image .image-3 {  opacity: 0; transform: translateX(-100px) scale(.2); transition: all .8s ease-in-out;}
.service.website .website-intr.animate-active .service-box .intr-image .image-1 {  opacity: 1; transform: rotateX(0) scale(1);}
.service.website .website-intr.animate-active .service-box .intr-image .image-2 {  opacity: 1; transform: translateX(0) scale(1); transition-delay: .5s;}
.service.website .website-intr.animate-active .service-box .intr-image .image-3 {  opacity: 1; transform: translateX(0) scale(1); transition-delay: .8s;}
/*设计分析*/
.service.website .website-design { clear: both;}
.service.website .website-design .service-box .intr-image .image-1 { width: 50%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.website .website-design.animate-enable .service-box .intr-image .image-2 { width: 90%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.website .website-design.animate-enable .service-box .intr-image .image-1 {  opacity: 0; transform: rotateX(360deg) scale(.2); transition: all .8s ease-in-out;}
.service.website .website-design.animate-enable .service-box .intr-image .image-2 {  opacity: 0; transform: scale(1.2); transition: all .8s ease-in-out;}
.service.website .website-design.animate-active .service-box .intr-image .image-1 {  opacity: 1; transform: rotateX(0) scale(1);}
.service.website .website-design.animate-active .service-box .intr-image .image-2 {  opacity: 1; transform: scale(1); transition-delay: .5s;}
/**功能介绍**/
.service.website .fun-intr.animate-enable .service-box .intr-image { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out;}
.service.website .fun-intr.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out;}
.service.website .fun-intr.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.website .fun-intr.animate-active .service-box .intr-image { opacity: 1; transform: translateX(0);}
.service.website .fun-intr .service-box .intr-image .image-1 { width: 66%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}

.service.website .fun-design .service-box .intr-image .image-1 { width: 56%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.website .fun-design .service-box .intr-image .image-2 { width: 18%; left: 5.5%; right: inherit; top: 25%; bottom: inherit; margin: auto;}
.service.website .fun-design .service-box .intr-image .image-3 { width: 20%; left: 3.5%; right: inherit; top: 48%; bottom: inherit; margin: auto;}
.service.website .fun-design .service-box .intr-image .image-4 { width: 24%; left: inherit; right: 0; top: 12%; bottom: inherit; margin: auto;}
.service.website .fun-design.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out;}
.service.website .fun-design.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: rotateX(360deg) scale(.2); transition: all .8s ease-in-out;}
.service.website .fun-design.animate-enable .service-box .intr-image .image-2 { opacity: 0; transform: translateX(50px)scale(.2); transition: all .8s ease-in-out;}
.service.website .fun-design.animate-enable .service-box .intr-image .image-3 { opacity: 0; transform: translateX(50px) scale(.2); transition: all .8s ease-in-out;}
.service.website .fun-design.animate-enable .service-box .intr-image .image-4 { opacity: 0; transform: translateX(-50px) scale(.2); transition: all .8s ease-in-out;}
.service.website .fun-design.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.website .fun-design.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: rotateX(0) scale(1);}
.service.website .fun-design.animate-active .service-box .intr-image .image-2 { opacity: 1; transform: translateX(0) scale(1); transition-delay: .5s;}
.service.website .fun-design.animate-active .service-box .intr-image .image-3 { opacity: 1; transform: translateX(0) scale(1); transition-delay: .8s;}
.service.website .fun-design.animate-active .service-box .intr-image .image-4 { opacity: 1; transform: translateX(0) scale(1); transition-delay: 1.1s;}

.service.website .fun-three .service-box .intr-image .image-1 { z-index: 2; width: 36%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.website .fun-three .service-box .intr-image .image-2 { z-index: 1; width: 60%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.website .fun-three.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: translateY(100px) scale(1.2); transition: all .8s ease-in-out;}
.service.website .fun-three.animate-enable .service-box .intr-image .image-2 { opacity: 0; transform: translateY(-100px) scale(0.2); transition: all .8s ease-in-out;}
.service.website .fun-three.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: translateY(0) scale(1);}
.service.website .fun-three.animate-active .service-box .intr-image .image-2 { opacity: 1; transform: translateY(0) scale(1); transition-delay: .5s;}
/*seo优化*/
.service.website .seo-intr .service-box .intr-image .image-1 { z-index: 2; width: 36%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.website .seo-intr .service-box .intr-image .image-2 { z-index: 1; width: 60%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.website .seo-intr.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out;}
.service.website .seo-intr.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.website .seo-intr.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: translateY(100px) scale(1.2); transition: all .8s ease-in-out;}
.service.website .seo-intr.animate-enable .service-box .intr-image .image-2 { opacity: 0; transform: translateY(-100px) scale(0.2); transition: all .8s ease-in-out;}
.service.website .seo-intr.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: translateY(0) scale(1);}
.service.website .seo-intr.animate-active .service-box .intr-image .image-2 { opacity: 1; transform: translateY(0) scale(1); transition-delay: .5s;}

.service.website .seo-two .service-box .intr-image .image-1 { z-index: 2; width: 45%; left: 0; right: 0; top: 20%; bottom: inherit; margin: auto;}
.service.website .seo-two .service-box .intr-image .image-2 { z-index: 1; width: 84%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.website .seo-two.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out;}
.service.website .seo-two.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.website .seo-two.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: translateY(200px) scale(1.2); transition: all .8s ease-in-out;}
.service.website .seo-two.animate-enable .service-box .intr-image .image-2 { opacity: 0; transform: scale(0.2); transition: all .8s ease-in-out;}
.service.website .seo-two.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: translateY(0) scale(1);}
.service.website .seo-two.animate-active .service-box .intr-image .image-2 { opacity: 1; transform: scale(1); transition-delay: .5s;}

.service.website .seo-three .service-box .intr-image .image-1 { width: 60%; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.service.website .seo-three.animate-enable .service-box .intr-content { opacity: 0; transform: translateX(-300px); transition: all .8s ease-in-out;}
.service.website .seo-three.animate-active .service-box .intr-content { opacity: 1; transform: translateX(0);}
.service.website .seo-three.animate-enable .service-box .intr-image .image-1 { opacity: 0; transform: translateX(300px); transition: all .8s ease-in-out;}
.service.website .seo-three.animate-active .service-box .intr-image .image-1 { opacity: 1; transform: translateX(0);}
/********========网站 end==========********/
/*************========模板 template end==========**************/

/*************========模板列表  start==========****************/
.templateList { float: left; clear: both; padding: 0; margin: 0; width: 100%; background-color: #fff; z-index: 999999999;}
.templateList .service-box { position: relative; width: 1200px; height: auto; margin: 0 auto;}
.templateList div.zxf_pagediv { margin: 30px 0 60px;}

.templateList .service-banner { float: left; width: 100%; clear: both; background: url('../images/website/banner-bg.jpg') no-repeat center center; background-size: auto 100%; overflow: hidden; }
.templateList .service-banner .service-box { height: 270px;}
.templateList .service-banner .banner-image { position: absolute; top: 0; bottom: 0; left: 0; display: inline-block; width: 50%; height: auto; margin: auto;  }
.templateList .service-banner .banner-word { position: absolute; top: 0; bottom: 0; right: 0; display: inline-block; width: 45%; margin: auto; height: 180px; color: #fff; }
.templateList .service-banner .banner-word .h1 { position: relative; float: left; display: block; width: 100%; line-height: 42px; font-size: 36px; font-weight: bold !important; padding: 20px 0px; margin: 12px 0px; }
.templateList .service-banner .banner-word .h1 i { position: absolute; bottom: 0; left: 0; display: block; width: 25px; height: 4px; overflow: hidden; background-color: #e4007f; }
.templateList .service-banner .banner-word p { float: left; width: 100%; line-height: 24px; font-size: 18px; margin: 5px 0px; }
.templateList .service-banner.animate-enable .banner-image { transition: all .8s ease-in-out; transform: translateX(-600px); opacity: 0;  }
.templateList .service-banner.animate-active .banner-image { transform: translateX(0px); opacity: 1; }
.templateList .service-banner.animate-enable .banner-word { transition: all 1.0s ease-in-out; transform: translateX(600px); opacity: 0; }
.templateList .service-banner.animate-active .banner-word { transform: translateX(0px); opacity: 1; }
.templateList .service-banner.animate-enable .banner-word p { transition: all 1.0s ease-in-out; transform: translateX(600px); opacity: 0; }
.templateList .service-banner.animate-active .banner-word p { transform: translateX(0px); transition-delay: .4s; opacity: 1; }
.templateList .service-banner.animate-active .banner-word p:first-of-type { transition-delay: .2s; }

.templateList .templateList-nav { width: 100%;  overflow: hidden;}
.templateList .templateList-nav .service-box { padding: 25px 0; border-bottom: 1px solid #d9d9d9; overflow: hidden;}
.templateList .templateList-nav .service-box ul li { float: left; padding-right: 70px;}
.templateList .templateList-nav .service-box ul li a { font-size: 16px; color: #333;}
.templateList .templateList-nav .service-box ul li.active a { color: #e4007f;}
.templateList .templateList-nav .service-box .templateList-sourch { float: right;}
.templateList .templateList-nav .service-box .templateList-sourch input { float: left; width: 260px; height: 40px; padding: 0 10px; line-height: 40px; font-size: 14px; border: 1px solid #d9d9d9; border-right: 0; box-sizing: border-box;}
.templateList .templateList-nav .service-box .templateList-sourch input[type="submit"]{ width: 100px; color: #fff; font-size: 14px; text-align: center; border: 0; background-color: #e4007f; }

.templateList .templateList-group { width: 100%; padding-top: 20px; overflow: hidden;}
.templateList .templateList-group .service-box .item { position: relative; padding: 10px 0 10px 90px; }
.templateList .templateList-group .service-box .item .head { position: absolute; left: 30px; top: 15px; font-size: 14px; color: #333; font-weight: bold!important;}
.templateList .templateList-group .service-box .item .body a { padding-right: 30px; line-height: 30px; font-size: 14px; color: #666; white-space: nowrap;}
.templateList .templateList-group .service-box .item .body a:hover { color: #e4007f;}
.templateList .templateList-main { padding: 10px 0; overflow: hidden;}
.templateList .templateList-main .service-box ul { margin: 0 -15px;}
.templateList .templateList-main .service-box ul li { float: left; width: 33.3%; padding: 20px 15px;}
.templateList .templateList-main .service-box ul li a { display: block; overflow: hidden;}
.templateList .templateList-main .service-box ul li a img { width: 100%; transition: all .8s ease-in-out;}
.templateList .templateList-main .service-box ul li:hover a img { transform: scale(1.2);}

.templateList .mini-main { overflow: hidden;}
.templateList .mini-main .service-box ul { margin: 0 -15px;}
.templateList .mini-main .service-box ul li { float: left; width: 25%; padding: 20px 15px; }
.templateList .mini-main .service-box ul li a { display: block; box-shadow: 0 0 8px #ccc;}
.templateList .mini-main .service-box ul li a .img { position: relative; }
.templateList .mini-main .service-box ul li a .img > img { width: 100%;}
.templateList .mini-main .service-box ul li a .img .layer { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 0; text-align: center; background-color: rgba(0,0,0,.7); transition: all .5s ease-in-out;}
.templateList .mini-main .service-box ul li a .img .layer img { width: 70%; padding-top: 40%;}
.templateList .mini-main .service-box ul li a .img .layer p { padding-top: 5px; font-size: 24px; text-align: ; color: #fff;}
.templateList .mini-main .service-box ul li a p { padding: 8px 0; text-align: center; font-size: 14px; color: #333;}
.templateList .mini-main .service-box ul li:hover a .img .layer { opacity: 1; height: 100%;}
/*************========模板列表  end==========******************/