@charset "UTF-8";
/* 版心 */
/*.container { position: relative; width: $containerWidth; margin: 0 auto;
}*/
/* 浮动 */
.fl { float: left; }

.fr { float: right; }

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; overflow: hidden; }

.clearfix { zoom: 1; }

/* 内外边距 */
.mar-0 { margin: 0 !important; }

.mar-5 { margin: 5px !important; }

.mar-10 { margin: 10px !important; }

.mar-15 { margin: 15px !important; }

.mar-20 { margin: 20px !important; }

.mar-25 { margin: 25px !important; }

.mar-30 { margin: 30px !important; }

.mar-40 { margin: 40px !important; }

.mar-50 { margin: 50px !important; }

.mt-0 { margin-top: 0 !important; }

.mt-5 { margin-top: 5px !important; }

.mt-10 { margin-top: 10px !important; }

.mt-15 { margin-top: 15px !important; }

.mt-20 { margin-top: 20px !important; }

.mt-25 { margin-top: 25px !important; }

.mt-30 { margin-top: 30px !important; }

.mt-40 { margin-top: 40px !important; }

.mt-50 { margin-top: 50px !important; }

.mt-70 { margin-top: 70px !important; }

.mr-0 { margin-right: 0 !important; }

.mr-5 { margin-right: 5px !important; }

.mr-10 { margin-right: 10px !important; }

.mr-15 { margin-right: 15px !important; }

.mr-20 { margin-right: 20px !important; }

.mr-25 { margin-right: 25px !important; }

.mr-30 { margin-right: 30px !important; }

.mr-40 { margin-right: 40px !important; }

.mr-50 { margin-right: 50px !important; }

.mb-0 { margin-bottom: 0 !important; }

.mb-5 { margin-bottom: 5px !important; }

.mb-10 { margin-bottom: 10px !important; }

.mb-15 { margin-bottom: 15px !important; }

.mb-20 { margin-bottom: 20px !important; }

.mb-25 { margin-bottom: 20px !important; }

.mb-30 { margin-bottom: 30px !important; }

.mb-40 { margin-bottom: 40px !important; }

.mb-50 { margin-bottom: 50px !important; }

.ml-0 { margin-left: 0 !important; }

.ml-5 { margin-left: 5px !important; }

.ml-10 { margin-left: 10px !important; }

.ml-15 { margin-left: 15px !important; }

.ml-20 { margin-left: 20px !important; }

.ml-25 { margin-left: 25px !important; }

.ml-30 { margin-left: 30px !important; }

.ml-40 { margin-left: 40px !important; }

.ml-50 { margin-left: 50px !important; }

.ml-60 { margin-left: 60px !important; }

.mlr-0 { margin-left: 0 !important; margin-right: 0 !important; }

.mlr-5 { margin-left: 5px !important; margin-right: 5px !important; }

.mlr-10 { margin-left: 10px !important; margin-right: 10px !important; }

.mlr-15 { margin-left: 15px !important; margin-right: 15px !important; }

.mlr-20 { margin-left: 20px !important; margin-right: 20px !important; }

.mlr-25 { margin-left: 25px !important; margin-right: 25px !important; }

.mlr-30 { margin-left: 30px !important; margin-right: 30px !important; }

.mlr-40 { margin-left: 40px !important; margin-right: 40px !important; }

.mlr-50 { margin-left: 50px !important; margin-right: 50px !important; }

.mtb-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.mtb-5 { margin-top: 5px !important; margin-bottom: 5px !important; }

.mtb-10 { margin-top: 10px !important; margin-bottom: 10px !important; }

.mtb-15 { margin-top: 15px !important; margin-bottom: 15px !important; }

.mtb-20 { margin-top: 20px !important; margin-bottom: 20px !important; }

.mtb-25 { margin-top: 25px !important; margin-bottom: 25px !important; }

.mtb-30 { margin-top: 30px !important; margin-bottom: 30px !important; }

.mtb-40 { margin-top: 40px !important; margin-bottom: 40px !important; }

.mtb-50 { margin-top: 50px !important; margin-bottom: 50px !important; }

.pd-0 { padding: 0 !important; }

.pd-5 { padding: 5px !important; }

.pd-10 { padding: 10px !important; }

.pd-15 { padding: 15px !important; }

.pd-20 { padding: 20px !important; }

.pd-25 { padding: 20px !important; }

.pd-30 { padding: 30px !important; }

.pd-40 { padding: 30px !important; }

.pd-50 { padding: 30px !important; }

.pt-0 { padding-top: 0 !important; }

.pt-5 { padding-top: 5px !important; }

.pt-10 { padding-top: 10px !important; }

.pt-15 { padding-top: 15px !important; }

.pt-20 { padding-top: 20px !important; }

.pt-25 { padding-top: 25px !important; }

.pt-30 { padding-top: 30px !important; }

.pt-40 { padding-top: 40px !important; }

.pt-50 { padding-top: 50px !important; }

.pr-0 { padding-right: 0 !important; }

.pr-5 { padding-right: 5px !important; }

.pr-10 { padding-right: 10px !important; }

.pr-15 { padding-right: 15px !important; }

.pr-20 { padding-right: 20px !important; }

.pr-25 { padding-right: 25px !important; }

.pr-30 { padding-right: 30px !important; }

.pr-40 { padding-right: 40px !important; }

.pr-50 { padding-right: 50px !important; }

.pb-0 { padding-bottom: 0 !important; }

.pb-5 { padding-bottom: 5px !important; }

.pb-10 { padding-bottom: 10px !important; }

.pb-15 { padding-bottom: 15px !important; }

.pb-20 { padding-bottom: 20px !important; }

.pb-25 { padding-bottom: 25px !important; }

.pb-30 { padding-bottom: 30px !important; }

.pb-40 { padding-bottom: 40px !important; }

.pb-50 { padding-bottom: 50px !important; }

.pl-0 { padding-left: 0 !important; }

.pl-5 { padding-left: 5px !important; }

.pl-10 { padding-left: 10px !important; }

.pl-15 { padding-left: 15px !important; }

.pl-20 { padding-left: 20px !important; }

.pl-25 { padding-left: 25px !important; }

.pl-30 { padding-left: 30px !important; }

.pl-40 { padding-left: 40px !important; }

.pl-50 { padding-left: 50px !important; }

.plr-0 { padding-left: 0 !important; padding-right: 0 !important; }

.plr-5 { padding-left: 5px !important; padding-right: 5px !important; }

.plr-10 { padding-left: 10px !important; padding-right: 10px !important; }

.plr-15 { padding-left: 15px !important; padding-right: 15px !important; }

.plr-20 { padding-left: 20px !important; padding-right: 20px !important; }

.plr-25 { padding-left: 25px !important; padding-right: 25px !important; }

.plr-30 { padding-left: 30px !important; padding-right: 30px !important; }

.plr-40 { padding-left: 40px !important; padding-right: 40px !important; }

.plr-50 { padding-left: 50px !important; padding-right: 50px !important; }

.ptb-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.ptb-5 { padding-top: 5px !important; padding-bottom: 5px !important; }

.ptb-10 { padding-top: 10px !important; padding-bottom: 10px !important; }

.ptb-15 { padding-top: 15px !important; padding-bottom: 15px !important; }

.ptb-20 { padding-top: 20px !important; padding-bottom: 20px !important; }

.ptb-25 { padding-top: 25px !important; padding-bottom: 25px !important; }

.ptb-30 { padding-top: 30px !important; padding-bottom: 30px !important; }

.ptb-40 { padding-top: 40px !important; padding-bottom: 40px !important; }

.ptb-50 { padding-top: 50px !important; padding-bottom: 50px !important; }

/* 文字大小 */
.fs-12 { font-size: 12px !important; }

.fs-13 { font-size: 13px !important; }

.fs-14 { font-size: 14px !important; }

.fs-15 { font-size: 15px !important; }

.fs-16 { font-size: 16px !important; }

.fs-18 { font-size: 18px !important; }

.fs-20 { font-size: 20px !important; }

.fs-24 { font-size: 24px !important; }

.fs-30 { font-size: 32px !important; }

.fs-42 { font-size: 42px !important; }

/* 文本颜色 */
.color-primary { color: #007aff !important; }

.color-warning { color: #ff9500 !important; }

.color-danger { color: #ff3b30 !important; }

.color-success { color: #4cd964 !important; }

.color-white { color: #fff !important; }

.color-gray { color: #666 !important; }

.color-gray-light { color: #999 !important; }

/* 文本粗细 */
.fw-200 { font-weight: 200 !important; }

.fw-400 { font-weight: 400 !important; }

.fw-700 { font-weight: 700 !important; }

/* 文本对齐 */
.tal { text-align: left !important; }

.tac { text-align: center !important; }

.tar { text-align: right !important; }

/* 文本行高 */
.lh { line-height: 1.5 !important; }

.lh-xs { line-height: 1.3 !important; }

.lh-md { line-height: 1.8 !important; }

/* 背景颜色 */
.bg-primary { background-color: #007aff !important; }

.bg-white { background-color: #fff !important; }

.bg-gray-light { background-color: #f1f1f1 !important; }

.bg-black { background-color: #000 !important; }

/* display */
.dib { display: inline-block !important; }

.db { display: block !important; }

.hide { display: none !important; }

/* 垂直对齐 */
.vam { vertical-align: middle !important; }

/* 溢出 */
.ovh { overflow: hidden !important; }

/* 定位 */
.pos-r { position: relative !important; }

/* 文本截断 */
.toe { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* 文本修饰 */
.tdlh { text-decoration: line-through !important; }

/* 背景设置 */
.bg-cover { background-repeat: no-repeat; background-position: center top; background-size: cover; }

/* 边框 */
.bd { border: 1px solid #dbdbdb; }

.bt { border-top: 1px solid #dbdbdb; }

.br { border-right: 1px solid #dbdbdb; }

.bb { border-bottom: 1px solid #dbdbdb; }

.bl { border-left: 1px solid #dbdbdb; }

/* 首页 ---------------------- */
/* 首页模块 */
.module { padding: 20px 10px; background-repeat: no-repeat; background-color: center top; background-size: cover; }
.module--gray { background: #fafafa; }
.module--mbjs { background-image: url("../images/bg-7.png"); background-position: center 400px; background-size: 100% auto; }
.module hr { height: 1px; margin: 20px 0; border: 0; border-top: 1px dotted #e5e5e5; }

/* 模块标题 */
.mod-tle h3 { display: inline-block; font-size: 18px; }
.mod-tle p { font-size: 12px; color: #999; text-transform: uppercase; }
.mod-tle.inverse:before, .mod-tle.inverse:after { background: #767676; }
.mod-tle.inverse h3 { color: #fff; }

/* 产品中心 */
.product { margin-top: 20px; }

.product-item { margin: 0 0 20px 0; text-align: center; }
.product-item > a { color: #333; }
.product-item > a:hover { color: #81b822; }
.product-item .item-img { width: 100%; height: 150px; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.product-item .item-bd { margin-top: 10px; }
.product-item .item-bd .bd-tle { font-size: 16px; }
.product-item .item-bd .bd-txt { margin-top: 10px; color: #999; }

/* 关于我们 */
.about { margin: 20px 0 0 0; }
.about p { color: #666; line-height: 1.8; }
.about p + p { margin-top: 20px; }
.about .about-img { margin: 20px 0 0 0; }

/* 新闻资讯 */
.category { margin: 20px 0 0; }
.category a { display: inline-block; padding: 10px 20px; color: #666; line-height: 8px; border-right: 1px solid #e5e5e5; }
.category a:hover { color: #81b822; }
.category a:last-child { border: 0; }
.category a.active { background-color: #81b822; color: #fff; }

.news-item { margin: 30px 0 0 0; }
.news-item a { display: block; color: #333; }
.news-item a:hover { color: #81b822; }
.news-item .item-img { width: 100%; height: 180px; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.news-item .item-bd .bd-date { color: #999; }

/* 联系我们 */
.contact p { color: #666; }
.contact p + p { margin-top: 10px; }

/* 新闻详情 */
.news-detail .pager li { margin-top: 10px; }

.news-detail__tle { padding-bottom: 15px; border-bottom: 1px solid #e9e9e9; }
.news-detail__tle h1 { font-size: 16px; font-weight: 600; line-height: 20px; color: #81b822; }
.news-detail__tle p { margin-top: 10px; font-size: 12px; color: #999; }

.news-detail__con { padding-bottom: 30px; }
.news-detail__con p { margin-top: 30px; text-indent: 2em; line-height: 24px; color: #666; }

/* 产品详情页 */
.product-detail-main p { margin-bottom: 20px; line-height: 2; color: #666; }
.product-detail-side p { margin-top: 20px; color: #999; }

.product-relevant { margin-top: 50px; }
.product-relevant > h4 { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dotted #e5e5e5; }

/* 合作流程 */
.cooperation-item { margin-top: 30px; text-align: center; }
.cooperation-item__icon { height: 78px; }
.cooperation-item__tle .num, .cooperation-item__tle .txt { font-size: 16px; font-weight: 700; line-height: 28px; }
.cooperation-item__txt { position: relative; padding-top: 10px; margin-top: 10px; color: #999; text-align: left; }
.cooperation-item__txt:after { position: absolute; top: 0; left: 50%; width: 30px; height: 2px; margin-left: -15px; background: #999; content: ""; }
.cooperation-item__txt p { line-height: 1.8; }

@media (min-width: 768px) { .cooperation-item { margin-top: 50px; }
  .cooperation-item__txt { height: 160px; overflow: hidden; } }
@media (min-width: 1200px) { .cooperation-item__icon { height: 156px; }
  .cooperation-item__tle .num, .cooperation-item__tle .txt { font-size: 22px; font-weight: 700; line-height: 40px; }
  .cooperation-item__txt { height: 250px; padding: 20px 20px 0; margin-top: 20px; }
  .cooperation-item__txt:after { width: 60px; height: 4px; margin-left: -30px; }
  .cooperation-item__txt p { font-size: 16px; } }
/* 互动平台 */
.platform-list { margin-top: -20px; }
.platform-item { margin-top: 20px; }
.platform-item__inner { padding: 30px 20px; text-align: center; background: #fff; box-shadow: 0 0 16px rgba(0, 0, 0, 0.05); border-radius: 5px; }
.platform-item__icon { height: 53px; }
.platform-item__tle { font-size: 16px; font-weight: 700; line-height: 45px; color: #666; }
.platform-item__txt { color: #999; }

@media (min-width: 768px) { .platform-list { margin-top: -40px; }
  .platform-item { position: relative; margin-top: 40px; }
  .platform-item__inner { position: relative; height: 258px; padding-top: 60px; box-shadow: 0 0 32px rgba(0, 0, 0, 0.1); } }
@media (min-width: 1200px) { .platform-item__inner { height: 340px; }
  .platform-item__icon { height: 106px; }
  .platform-item__tle { font-size: 20px; }
  .platform-item__txt { font-size: 16px; } }
/* 网站建设 */
.page-title { font-size: 20px; text-align: center; }

@media (min-width: 768px) { .page-title { font-size: 36px; } }
.why-list { margin-top: 40px; }
.why-item { margin-top: 20px; text-align: center; }
.why-item__inner { padding: 40px 20px; background: #fff; box-shadow: 0 0 16px rgba(0, 0, 0, 0.05); border-radius: 5px; }
.why-item__icon { display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 50%; background: #f1f1f1; }
.why-item__tle { margin-top: 15px; font-size: 16px; line-height: 23px; }
.why-list--col-2 { margin-top: 0; }
.why-list--col-2 .why-item { text-align: left; }
.why-list--col-2 .why-item__icon { float: left; margin-right: 20px; }
.why-list--col-2 .why-item__tle { margin-top: 0; overflow: hidden; }

@media (min-width: 768px) { .why-item__tle { height: 46px; overflow: hidden; } }
@media (min-width: 1200px) { .why-item { margin-top: 30px; }
  .why-item__inner { padding: 40px; }
  .why-item__icon { width: 120px; height: 120px; line-height: 120px; }
  .why-item__tle { margin-top: 30px; font-size: 20px; line-height: 45px; }
  .why-list--col-2 .why-item__icon { margin-right: 40px; }
  .why-list--col-2 .why-item__tle { height: 64px; line-height: 32px; } }
.intro-bd__tle { font-size: 20px; line-height: 38px; }
.intro-bd__txt { margin-top: 25px; color: #999; }
.intro-img { margin-top: 30px; }
.intro--img-left .intro-img { margin-bottom: 30px; }

@media (min-width: 768px) { .intro-bd { padding-top: 30px; }
  .intro-img { margin-top: 0; }
  .intro--img-left .intro-img { margin-bottom: 0; } }
@media (min-width: 1200px) { .intro-bd { padding-top: 60px; }
  .intro-bd__tle { font-size: 40px; line-height: 76px; }
  .intro-bd__txt { font-size: 16px; line-height: 1.8; margin-top: 50px; } }
.seo-container { margin-top: 30px; }

.seo-wrapper { padding: 20px 0; background: #fff; border-radius: 5px; }

.seo-list li { margin-top: 15px; color: #666; }
.seo-list li:first-child { margin-top: 0; }

.circle-list li { float: left; width: 50%; margin-top: 20px; text-align: center; }
.circle-list li span { display: inline-block; width: 75px; height: 75px; line-height: 75px; overflow: hidden; text-align: center; color: #25d0ab; background: #fff; border-radius: 50%; box-shadow: 0 0 16px rgba(6, 177, 122, 0.5); }

@media (min-width: 768px) { .circle-list li { width: 20%; }
  .circle-list li span { width: 120px; height: 120px; line-height: 120px; font-size: 18px; box-shadow: 0 0 32px rgba(6, 177, 122, 0.5); } }
@media (min-width: 1200px) { .seo-container { position: relative; margin-top: 100px; }
  .seo-container:before, .seo-container:after { position: absolute; top: -10px; left: 10px; right: 10px; z-index: 2; height: 50px; background: rgba(255, 255, 255, 0.4); border-radius: 5px; content: ""; }
  .seo-container:after { top: -20px; left: 30px; right: 30px; z-index: 1; background: rgba(255, 255, 255, 0.2); }
  .seo-wrapper { padding: 40px 40px 100px; }
  .seo-list { font-size: 16px; }
  .circle-list { margin-top: -95px; }
  .circle-list li span { width: 150px; height: 150px; line-height: 150px; font-size: 24px; } }
.mbjs-img, .dzsj-txt { margin-top: 30px; }

@media (min-width: 768px) { .dzsj-txt { font-size: 16px; line-height: 1.8; } }
@media (min-width: 1200px) { .mbjs-img, .dzsj-txt { margin-top: 80px; }
  .dzsj-txt { padding: 0 40px; font-size: 20px; } }
/* 定制软件 */
.question-list li { margin-top: 20px; }
.question-list li span { display: block; padding: 30px 20px; background: #f1f1f1; border-radius: 5px; text-align: center; font-size: 16px; color: #fff; }
.question-list li:first-child span { background: #47e196; }
.question-list li:nth-of-type(2) span { background: #36c4fd; }
.question-list li:nth-of-type(3) span { background: #2ae4d8; }
.question-list li:nth-of-type(4) span { background: #8c91f1; }

@media (min-width: 768px) { .question-list li { margin-top: 50px; }
  .question-list li span { padding: 40px 20px; font-size: 20px; } }
@media (min-width: 1200px) { .question-list { position: relative; margin-top: 80px; height: 414px; background: url("../images/user.png") no-repeat center center; }
  .question-list li { position: absolute; margin: 0; height: 156px; }
  .question-list li span { position: relative; display: inline-block; width: 336px; height: 156px; line-height: 156px; padding: 0 50px; font-size: 30px; }
  .question-list li span:after { position: absolute; top: 50%; width: 0; height: 0; margin-top: -15px; border-style: solid; content: ""; }
  .question-list li:first-child { top: 0; left: 0; }
  .question-list li:first-child span:after { right: -30px; border-width: 0 30px 30px 0; border-color: transparent transparent #47e196 transparent; }
  .question-list li:nth-of-type(2), .question-list li:nth-of-type(4) { top: 0; right: 0; text-align: right; }
  .question-list li:nth-of-type(2) span, .question-list li:nth-of-type(4) span { padding-top: 35px; line-height: 40px; }
  .question-list li:nth-of-type(2) span:after { left: -30px; border-width: 0 0 30px 30px; border-color: transparent transparent #36c4fd transparent; }
  .question-list li:nth-of-type(3) { bottom: 0; left: 0; }
  .question-list li:nth-of-type(3) span:after { right: -30px; border-width: 30px 30px 0 0; border-color: #2ae4d8 transparent transparent transparent; }
  .question-list li:nth-of-type(4) { top: auto; bottom: 0; }
  .question-list li:nth-of-type(4) span:after { left: -30px; border-width: 30px 0 0 30px; border-color: #8c91f1 transparent transparent transparent; } }
.services-item { margin-top: 30px; }
.services-item__tle { padding: 30px 15px; font-size: 16px; color: #fff; text-align: center; background: -webkit-linear-gradient(45deg, #2be4d5, #52dca1); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(45deg, #2be4d5, #52dca1); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(45deg, #2be4d5, #52dca1); /* Firefox 3.6 - 15 */ background: linear-gradient(45deg, #2be4d5, #52dca1); /* 标准的语法 */ border: 2px solid #45d297; border-radius: 5px; }
.services-item__txt { margin-top: 20px; color: #fff; }

@media (min-width: 768px) { .services-list { margin-top: 20px; }
  .services-item__tle { padding: 40px 20px; font-size: 24px; border: 4px solid #45d297; border-radius: 8px; }
  .services-item__txt { height: 88px; font-size: 16px; overflow: hidden; } }
@media (min-width: 1200px) { .services-list { margin-top: 40px; }
  .services-item { padding: 0 40px; }
  .services-item__tle { padding: 60px 30px; font-size: 30px; }
  .services-item__txt { height: 132px; } }
/* 公众号开发 */
.fun-list { margin-top: -30px; }

.fun-item { margin-top: 30px; text-align: center; }
.fun-item__icon { height: 37px; }
.fun-item__tle { margin-top: 10px; font-size: 16px; line-height: 25px; }
.fun-item__txt { margin-top: 10px; color: #999; text-align: left; }

@media (min-width: 1200px) { .fun-list { margin-top: -50px; }
  .fun-item { margin-top: 50px; }
  .fun-item__icon { height: 74px; }
  .fun-item__tle { margin-top: 20px; font-size: 24px; line-height: 50px; }
  .fun-item__txt { height: 100px; margin-top: 20px; padding: 0 20px; overflow: hidden; } }
.wx-item { margin-top: 30px; text-align: center; }
.wx-item__txt { height: 60px; overflow: hidden; margin-top: 10px; }

@media (min-width: 1200px) { .wx-item { margin-top: 50px; }
  .wx-item__txt { height: 66px; font-size: 16px; margin-top: 20px; } }