html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; }

article, aside, figure, footer, header, nav, section, details, summary { display: block; }

/* Handle box-sizing while better addressing child elements: http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img, object, embed { max-width: 100%; }

/* Note: keeping IMG here will cause problems if you're using foreground images as sprites. In fact, it *will* cause problems with Google Maps' controls at small size. If this is the case for you, try uncommenting the following: #map img { max-width: none; } */
/* force a vertical scrollbar to prevent a jumpy page */
html { overflow-y: scroll; }

/* we use a lot of ULs that aren't bulleted.
you'll have to restore the bullets within content,
which is fine because they're probably customized anyway */
ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse: separate; border-spacing: 0; }

th { font-weight: bold; vertical-align: bottom; }

td { font-weight: normal; vertical-align: top; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ }

input[type="radio"] { vertical-align: text-bottom; }

input[type="checkbox"] { vertical-align: bottom; }

.ie7 input[type="checkbox"] { vertical-align: baseline; }

.ie6 input { vertical-align: text-bottom; }

select, input, textarea { font: 99% sans-serif; }

table { font-size: inherit; font: 100%; }

small { font-size: 85%; }

strong { font-weight: bold; }

td, td img { vertical-align: top; }

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* standardize any monospaced elements */
pre, code, kbd, samp { font-family: monospace, sans-serif; }

/* hand cursor on clickable elements */
.clickable, label, input[type=button], input[type=submit], input[type=file], button { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* make buttons play nice in IE */
button, input[type=button] { width: auto; overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img { -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover (commented out as usage is rare, and the filter syntax messes with some pre-processors) .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} */
/* let's clear some floats */
.clearfix:after { content: " "; display: block; clear: both; }

html, body { width: 100%; }

html, body, div { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body { padding-top: 62px; }

.index header { height: 62px; background: #fff; position: fixed; left: 0; top: 0; right: 0; box-shadow: 0 5px 5px #ccc; z-index: 100; }

.index header .logo-div { line-height: 62px; }

.index header .logo-div .logo { display: inline-block; width: 45px; height: 54px; margin-top: 4px; margin-left: 14px; vertical-align: top; }

.index header .logo-div span { position: relative; display: inline-block; margin-left: 20px; color: #777; font-size: 13px; vertical-align: top; }

.index header .logo-div span:before { content: ''; display: block; position: absolute; height: 15px; width: 2px; background: #aaa; border-radius: 2px; top: 50%; left: -12px; transform: translateY(-50%); }

.index header .header-list { height: 62px; position: absolute; top: 0; left: 320px; line-height: 62px; white-space: nowrap; }

.index header .header-list li { display: inline-block; width: 98px; text-align: center; }

.index header .header-list li a { display: block; width: 100%; height: 100%; font-size: 15px; color: #333; text-decoration: none; position: relative; }

.index header .header-list li a.active { color: #00CA37; }

.index header .header-list li a.active:after { content: ''; display: block; position: absolute; width: 70%; height: 2px; left: 15%; bottom: 0; background: #00CA37; }

.index header .header-xs-list { display: none; }

.index .bannar { position: relative; width: 100%; max-height: 680px; font-size: 0; overflow: hidden; }

.index .bannar .swiper-slide { position: relative; }

.index .bannar .swiper-slide p { font-size: 36px; color: #fff; position: absolute; font-weight: 500; }

.index .bannar .swiper-slide .ba-1 { color: #00BCD4; top: 12%; right: 2%; line-height: 55px; width: 600px; }

.index .bannar .swiper-slide .ba-1 span { font-size: 26px; }

.index .bannar .swiper-slide .ba-2 { top: 15%; left: 6%; line-height: 60px; font-weight: 700; width: 950px; opacity: 0.9; }

.index .bannar .swiper-pagination-bullet-active { background: #fff; opacity: 0.8; }

.index .product { background: #fff url(../img/pro-bg.png) 0 0 no-repeat; background-size: cover; padding: 72px 0; }

.index .product h2 { text-align: center; color: #333; font-size: 38px; font-weight: 300; line-height: 90px; position: relative; }

.index .product h2:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 270px; height: 90px; background: transparent url(../img/service.png) 50% 50% no-repeat; background-size: 270px 90px; transform: scale(1.8) translate(-28%, -36%); opacity: 0.1; }

.index .product .pro-div { width: 1200px; margin: 20px auto; font-size: 0; }

.index .product .pro-div .pro-list { width: 400px; display: inline-block; vertical-align: top; margin-bottom: 30px; text-align: center; }

.index .product .pro-div .pro-list img { display: block; width: 100px; height: 100px; margin: 0 auto 2px; }

.index .product .pro-div .pro-list h3 { color: #FF6868; font-size: 18px; font-weight: 300; line-height: 40px; text-align: center; margin-bottom: 12px; }

.index .product .pro-div .pro-list .prol-list { display: inline-block; font-weight: 300; color: #666; line-height: 40px; font-size: 0; width: 125px; vertical-align: top; }

.index .product .pro-div .pro-list .prol-list span, .index .product .pro-div .pro-list .prol-list b { display: block; font-weight: 300; font-size: 15px; }

.index .product .pro-div .pro-list .prol-list span { color: #FFAB20; width: 125px; text-align: center; }

.index .product .pro-div .pro-list .prol-list b { width: 125px; text-align: center; font-size: 13px; }

.index .product .pro-div .pro-list.pro-list-one, .index .product .pro-div .pro-list.pro-list-four { width: 900px; display: block; margin: 0 auto; }

.index .product .pro-div .pro-list.pro-list-one .prol-list, .index .product .pro-div .pro-list.pro-list-four .prol-list { width: 200px; }

.index .product .pro-div .pro-list.pro-list-one .prol-list span, .index .product .pro-div .pro-list.pro-list-four .prol-list span { width: 200px; }

.index .product .pro-div .pro-list.pro-list-one .prol-list b, .index .product .pro-div .pro-list.pro-list-four .prol-list b { width: 200px; }

.index .product .pro-div .pro-list.pro-list-four { margin-top: 30px; }

.index .product .pro-div .pro-list.pro-list-two { width: 550px; }

.index .product .pro-div .pro-list.pro-list-three { width: 350px; }

.index .product .pro-div .pro-list-div { margin: 40px auto 0; text-align: center; }

.index .product .pro-div .pro-list2 { margin-top: 30px; }

.index .product .pro-div .pro-list2 img { display: block; width: 100px; height: 100px; margin: 0 auto 2px; }

.index .product .pro-div .pro-list2 h3 { color: #FF6868; font-size: 18px; font-weight: 300; line-height: 40px; text-align: center; margin-bottom: 4px; }

.index .product .pro-div .pro-list2 h4 { color: #666; font-size: 14px; font-weight: 300; line-height: 40px; text-align: center; margin-bottom: 12px; }

.index .product .pro-div .pro-list2 .prol-list { display: inline-block; font-size: 0; vertical-align: top; width: 240px; text-align: center; }

.index .product .pro-div .pro-list2 .prol-list img { display: block; width: 180px; height: 180px; margin: 0 auto; border-radius: 3px; }

.index .product .pro-div .pro-list2 .prol-list span { display: block; font-weight: 300; font-size: 15px; color: #FFAB20; text-align: center; line-height: 30px; margin-top: 10px; margin-bottom: 12px; }

.index .product .pro-div .pro-list2 .prol-list b { display: block; font-size: 13px; color: #666; line-height: 20px; width: 200px; margin: 0 auto; }

.index .service { background: #f5f9fa; padding: 72px 0; }

.index .service h2 { text-align: center; color: #333; font-size: 38px; font-weight: 300; line-height: 90px; position: relative; }

.index .service h2:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 240px; height: 90px; background: transparent url(../img/service.png) 50% 50% no-repeat; background-size: 240px 90px; transform: scale(1.8) translate(-28%, -36%); opacity: 0.1; }

.index .service h3 { display: block; text-align: center; font-size: 16px; color: #999; margin-top: -12px; margin-bottom: 40px; font-weight: 300; }

.index .service .ser-div { width: 1000px; margin: 30px auto 0; font-size: 0; text-align: center; display: block; }

.index .service .ser-div .ser-list { display: inline-block; width: 400px; height: 400px; vertical-align: top; margin-bottom: 20px; margin-left: 25px; overflow: hidden; position: relative; }

.index .service .ser-div .ser-list:before { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: 1; }

.index .service .ser-div .ser-list:after { content: ''; display: block; position: absolute; background: transparent; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; transition: all 0.5s ease-in-out; z-index: 2; }

.index .service .ser-div .ser-list .ser-main { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.8; transition: all 0.5s ease-in-out; z-index: 3; }

.index .service .ser-div .ser-list .ser-main img { display: block; padding-top: 98px; padding-bottom: 24px; width: 180px; height: 110px; margin: 0 auto; box-sizing: content-box; }

.index .service .ser-div .ser-list .ser-main h4 { text-align: center; color: #f5f9fa; font-size: 20px; font-weight: 300; }

.index .service .ser-div .ser-list .ser-hover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; transition: all 0.5s ease-in-out; z-index: 4; }

.index .service .ser-div .ser-list .ser-hover img { display: block; padding-top: 85px; padding-bottom: 28px; width: 40px; height: 40px; margin: 0 auto; box-sizing: content-box; }

.index .service .ser-div .ser-list .ser-hover h5 { text-align: center; color: #f5f9fa; font-size: 16px; font-weight: 300; margin-bottom: 20px; }

.index .service .ser-div .ser-list .ser-hover p { text-align: center; color: #f5f9fa; font-size: 16px; font-weight: 300; line-height: 32px; width: 180px; margin: 0 auto; }

.index .service .ser-div .ser-list.ser-active:after { content: ''; background: #00CA37; opacity: 0.3; }

.index .service .ser-div .ser-list.ser-active .ser-main { opacity: 0; }

.index .service .ser-div .ser-list.ser-active .ser-hover { opacity: 0.7; }

.index .service .ser-div .ser-list:nth-child(2n + 1) { margin-left: 0; }

.index .service .ser-div .ser-list:first-child { background: transparent url(../img/s-01.jpg) 0 0 no-repeat; background-size: cover; }

.index .service .ser-div .ser-list:nth-child(2) { background: transparent url(../img/s-02.jpg) 0 0 no-repeat; background-size: cover; }

.index .service .ser-div .ser-list:nth-child(3) { background: transparent url(../img/s-03.jpg) 0 0 no-repeat; background-size: cover; }

.index .service .ser-div .ser-list:nth-child(4) { background: transparent url(../img/s-04.jpg) 0 0 no-repeat; background-size: cover; }

.index .service .ser-div-2 { display: none; }

.index .cooperation { background: #fff url(../img/coo-bg.png) 0 0 no-repeat; background-size: cover; padding: 72px 0; }

.index .cooperation h2 { text-align: center; color: #333; font-size: 38px; font-weight: 300; line-height: 90px; position: relative; }

.index .cooperation h2:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 365px; height: 90px; background: transparent url(../img/cooperation.png) 50% 50% no-repeat; background-size: 365px 90px; transform: scale(1.8) translate(-28%, -36%); opacity: 0.1; }

.index .cooperation h3 { display: block; text-align: center; font-size: 16px; color: #999; margin-top: -12px; margin-bottom: 40px; font-weight: 300; }

.index .cooperation .coo-list { width: 1000px; margin: 0 auto; font-size: 0; }

.index .cooperation .coo-list .cool-list { display: inline-block; width: 250px; margin-top: 10px; margin-bottom: 30px; text-align: center; }

.index .cooperation .coo-list .cool-list img { display: inline-block; width: 150px; height: 70px; vertical-align: middle; }

.index .business { background: #f5f9fa url(../img/bus-bg.jpg) 0 0 no-repeat; background-size: cover; padding: 72px 0; }

.index .business h2 { text-align: center; color: #333; font-size: 38px; font-weight: 300; line-height: 90px; position: relative; margin-bottom: 20px; }

.index .business h2:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 280px; height: 90px; background: transparent url(../img/business.png) 50% 50% no-repeat; background-size: 280px 90px; transform: scale(1.8) translate(-28%, -36%); opacity: 0.1; }

.index .business p { color: #666; font-size: 18px; line-height: 42px; text-align: center; }

.index .about { background: #fff; padding: 72px 0; }

.index .about h2 { text-align: center; color: #333; font-size: 38px; font-weight: 300; line-height: 90px; position: relative; }

.index .about h2:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 190px; height: 90px; background: transparent url(../img/about.png) 50% 50% no-repeat; background-size: 190px 90px; transform: scale(1.8) translate(-28%, -36%); opacity: 0.1; }

.index .about .about-qx { width: 1100px; margin: 30px auto 10px; }

.index .about .about-qx h3 { color: #666; font-size: 24px; line-height: 50px; }

.index .about .about-qx p { color: #999; font-size: 18px; line-height: 42px; }

.index .about .about-more { width: 1100px; margin: 30px auto 10px; }

.index .about .about-more h3 { color: #666; font-size: 24px; line-height: 50px; }

.index .about .about-more p { color: #999; font-size: 18px; line-height: 42px; }

.index .about .about-tag { width: 1200px; margin: 30px auto 0; font-size: 0; text-align: center; }

.index .about .about-tag .at-list { display: inline-block; width: 400px; height: 192px; position: relative; vertical-align: top; margin-bottom: 30px; }

.index .about .about-tag .at-list:before { content: ''; display: block; position: absolute; width: 282px; height: 188px; top: 50%; left: 50%; background: rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%); z-index: 1; }

.index .about .about-tag .at-list:after { content: ''; display: block; position: absolute; width: 282px; height: 188px; top: 50%; left: 50%; background: rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s ease-in-out; z-index: 2; }

.index .about .about-tag .at-list.at-active:after { content: ''; background: #FFAB20; opacity: 0.2; }

.index .about .about-tag .at-list img { display: block; position: absolute; top: 50%; left: 50%; width: 282px; height: 188px; transform: translate(-50%, -50%); }

.index .about .about-tag .at-list span { display: block; position: absolute; text-align: center; color: #f5f9fa; font-size: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }

.index .about .about-code-div { width: 1200px; margin: 40px auto 0; }

.index .about .about-code { display: block; margin: 0 auto; position: relative; height: 260px; width: 300px; }

.index .about .about-code img { display: block; width: 210px; height: 210px; position: absolute; left: 50%; top: 7px; transform: translateX(-50%); }

.index .about .about-code p { position: absolute; width: 100%; color: #999; font-size: 15px; text-align: center; top: 212px; left: 4px; }

.index .top { width: 40px; height: 40px; display: none; position: fixed; bottom: 35px; right: 35px; border-radius: 5px; z-index: 1000; }

.index .top img { display: block; width: 100%; height: 100%; }

.index .top.top-active { display: block; }

.index footer { font-size: 15px; color: white; line-height: 160px; background-color: #222222; height: 160px; text-align: center; }

.index footer h5 { width: 1200px; margin: 0 auto; opacity: 0.6; white-space: nowrap; }

.index footer h5 span { display: inline-block; margin-right: 24px; }

.index footer h5 span:last-child { margin-right: 0; }

@media (max-width: 769px) { .index header .header-list { display: none; }
  .index header .header-xs-list { display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 18px; cursor: pointer; }
  .index header .header-xs-list .hsx-btn { width: 23px; height: 17px; border-top: 1px solid #999; border-bottom: 1px solid #999; position: relative; }
  .index header .header-xs-list .hsx-btn:after { content: ''; display: block; position: absolute; width: 100%; height: 1px; background: #999; top: 50%; left: 0; transform: translateY(-50%); }
  .index header .hx-list { display: none; position: absolute; right: -5px; top: 25px; width: 240px; background: #fff; padding: 10px 20px; box-shadow: 0 0 4px #ccc; z-index: 15; }
  .index header .hx-list.hx-list-active { display: block; }
  .index header .hx-list li { height: 42px; border-bottom: 1px solid #e2e2e2; }
  .index header .hx-list li:last-child { border-bottom: none; }
  .index header .hx-list li a { display: block; width: 100%; height: 100%; font-size: 16px; line-height: 42px; color: #333; text-decoration: none; position: relative; font-weight: 300; }
  .index .bannar .swiper-slide p { font-size: 14px; color: #fff; position: absolute; font-weight: 500; }
  .index .bannar .swiper-slide .ba-1 { top: 30%; right: 2%; line-height: 38px; width: 280px; }
  .index .bannar .swiper-slide .ba-1 span { font-size: 14px; }
  .index .bannar .swiper-slide .ba-2 { top: 15%; left: 2%; width: 320px; line-height: 30px; opacity: 0.9; white-space: nowrap; }
  .index .product { padding-bottom: 40px; background: #fff; }
  .index .product h2:after { transform: scale(1.3) translate(-39%, -47%); }
  .index .product .pro-div { width: 100%; }
  .index .product .pro-div .pro-list-div { margin-top: 0 !important; }
  .index .product .pro-div .pro-list { width: 95% !important; display: block; margin: 0 auto !important; }
  .index .product .pro-div .pro-list h3 { margin-bottom: 3px; }
  .index .product .pro-div .pro-list.pro-list-one, .index .product .pro-div .pro-list.pro-list-four { width: 95% !important; }
  .index .product .pro-div .pro-list.pro-list-four { margin-top: 30px !important; }
  .index .product .pro-div .pro-list.pro-list-three { width: 95% !important; }
  .index .product .pro-div .pro-list .prol-list { width: 25% !important; line-height: 24px; transform: scale(0.9); }
  .index .product .pro-div .pro-list .prol-list.prol-list-spec { width: 40% !important; }
  .index .product .pro-div .pro-list .prol-list span, .index .product .pro-div .pro-list .prol-list b { width: 100% !important; }
  .index .product .pro-div .pro-list .prol-list span { font-size: 13px; }
  .index .product .pro-div .pro-list .prol-list b { font-size: 12px; }
  .index .product .pro-div .pro-list.pro-list-two { padding-left: 0; padding-top: 20px; }
  .index .product .pro-div .pro-list.pro-list-two .prol-list { width: 33%; }
  .index .product .pro-div .pro-list.pro-list-three { padding-top: 20px; }
  .index .product .pro-div .pro-list.pro-list-three .prol-list { width: 38%; }
  .index .product .pro-div .pro-list2 img { display: none !important; }
  .index .product .pro-div .pro-list2 h3 { line-height: 30px; }
  .index .product .pro-div .pro-list2 h4 { font-size: 13px; line-height: 24px; padding: 0 12px; margin-bottom: 10px; }
  .index .product .pro-div .pro-list2 .prol-list { display: block; width: 240px; margin: 0 auto 19px; }
  .index .product .pro-div .pro-list2 .prol-list span { margin-top: 3px; margin-bottom: 2px; }
  .index .product .pro-div .pro-list2 .prol-list b { width: 100%; }
  .index .service { padding-bottom: 40px; }
  .index .service h2:after { transform: scale(1.45) translate(-32%, -46%); }
  .index .service h3 { margin-bottom: 10px; }
  .index .service .ser-div { display: none; }
  .index .service .ser-div-2 { display: block; padding-top: 36px; }
  .index .service .ser-div-2 .ser2-list { font-size: 0; width: 100%; padding: 0 20px; margin-bottom: 30px; box-sizing: border-box; }
  .index .service .ser-div-2 .ser2-list:last-child { margin-bottom: 0; }
  .index .service .ser-div-2 .ser2-list img { width: 95px; height: 65px; display: inline-block; vertical-align: top; }
  .index .service .ser-div-2 .ser2-list .ser2-info { display: inline-block; vertical-align: top; width: calc(100% - 120px); margin-left: 20px; height: 65px; }
  .index .service .ser-div-2 .ser2-list .ser2-info h4 { color: #333; font-size: 16px; line-height: 16px; font-weight: 300; }
  .index .service .ser-div-2 .ser2-list .ser2-info p { color: #999; font-size: 12px; margin-top: 4px; line-height: 21px; font-weight: 300; }
  .index .cooperation { padding-bottom: 40px; }
  .index .cooperation h2:after { transform: translate(-50%, -50%); }
  .index .cooperation h3 { padding: 0 15px; margin-bottom: 5px; }
  .index .cooperation .coo-list { width: 100%; }
  .index .cooperation .coo-list .cool-list { width: 50%; margin-bottom: 14px; }
  .index .business { padding-bottom: 40px; }
  .index .business h2:after { transform: scale(1.3) translate(-39%, -47%); }
  .index .business p { padding: 0 15px; text-align: center; }
  .index .business p span { display: inline-block; text-align: left; }
  .index .about { padding-bottom: 40px; }
  .index .about .about-qx { width: 100%; }
  .index .about .about-qx h3 { padding-left: 15px; font-size: 20px; }
  .index .about .about-qx p { font-size: 18px; line-height: 34px; padding-left: 15px; padding-right: 15px; text-indent: 2em; }
  .index .about .about-more { width: 100%; }
  .index .about .about-more h3 { padding-left: 15px; font-size: 20px; }
  .index .about .about-more p { font-size: 18px; line-height: 34px; padding-left: 15px; padding-right: 15px; text-indent: 2em; }
  .index .about .about-tag { width: 100%; }
  .index .about .about-tag .at-list { width: 100%; }
  .index .about .about-code-div { width: 100%; }
  .index .top { width: 35px; height: 35px; bottom: 30px; right: 30px; }
  .index footer h5 { width: 100%; padding-top: 20px; }
  .index footer h5 span { display: block; font-size: 16px; line-height: 36px; text-align: center; margin: 0; }
  .index footer h5 span .footer-icp { cursor: pointer; } }