/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;}
html{-webkit-text-size-adjust:none;}
body{background-color:#fff;font:12px/2em Microsoft Yahei,tahoma,HELVETICA;text-align:center;color:#333;}
ol,ul,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img {border:0; }
table {border-collapse:collapse; }
th {font-weight:normal; }
i,em{font-style:normal;}
input,select,option,textarea{font-size:12px; font-family: Microsoft Yahei,tahoma,HELVETICA;outline:none;}
a,span,h1,h2,h3,p,strong {margin:0; padding:0; border:none; font-family:"Microsoft Yahei","Arial"; }
div {font-family:"Microsoft Yahei","Arial"; }
a {text-decoration:none; outline:none; }
a:hover {text-decoration:underline; }
.mgLeft10{ margin-left: 10px;}

/* layout */
.main {width:100%; height:100%; min-width:980px; font-family:"Microsoft Yahei","Arial"; font-size:14px; }
.area {width:100%; margin:0 auto; height:100%; }
.area-cont {width:980px; margin:0 auto; height:100%; position:relative; padding-top:100px; padding-bottom: 50px; overflow:hidden; }

/* function */
.clear{clear:both;height:0;line-height:0;font-size:0;overflow:hidden;}
.clearfix{*zoom:1;}
.clearfix:after{content:"\20";clear:both;height:0;display:block;overflow:hidden;}

/* skin */
.nav .logo {background:url(../images/logo.jpg) no-repeat; }
.area1 .area-tit {background:url(../images/cut2.png) no-repeat; background-position:0 -58px; }
.area2 .area-tit {background:url(../images/cut2.png) no-repeat; background-position:0 -99px; }
.area3 .area-tit {background:url(../images/cut2.png) no-repeat; background-position:0 -140px; }
.area4 .area-tit {background:url(../images/cut2.png) no-repeat; background-position:0 -181px; }

.bub .icon1 {background:url(../images/cut2.png) no-repeat; background-position:0 0; }
.bub .icon2 {background:url(../images/cut2.png) no-repeat; background-position:-23px 0; }
.bub .icon3 {background:url(../images/cut2.png) no-repeat; background-position:-46px 0; }
.bub .icon4 {background:url(../images/cut2.png) no-repeat; background-position:-78px 0; }
.bub .icon5 {background:url(../images/cut2.png) no-repeat; background-position:-104px 0; }
.bub .icon6 {background:url(../images/cut2.png) no-repeat; background-position:-127px 0; }
.bub .icon7 {background:url(../images/cut2.png) no-repeat; background-position:-157px 0; }
.bub .icon8 {background:url(../images/cut2.png) no-repeat; background-position:-190px 0; }
.bub .icon9 {background:url(../images/cut2.png) no-repeat; background-position:-216px 0; }
.bub .icon10 {background:url(../images/cut2.png) no-repeat; background-position:-246px 0; }
.bub .icon11 {background:url(../images/cut2.png) no-repeat; background-position:-276px 0; }
.bub .icon12 {background:url(../images/cut2.png) no-repeat; background-position:-302px 0; }
.bub .icon13 {background:url(../images/cut2.png) no-repeat; background-position:-329px 0; }

.bub .icon14 {background:url(../images/cut2.png) no-repeat; background-position:-875px 0; }
.bub .icon15 {background:url(../images/cut2.png) no-repeat; background-position:-900px 0; }
.bub .icon16 {background:url(../images/cut2.png) no-repeat; background-position:-930px 0; }
.bub .icon17 {background:url(../images/cut2.png) no-repeat; background-position:-960px 0; }
.bub .icon18 {background:url(../images/cut2.png) no-repeat; background-position:-983px 0; }

.active .bub .icon1 {background:url(../images/cut2.png) no-repeat; background-position:0 -29px; }
.active .bub .icon2 {background:url(../images/cut2.png) no-repeat; background-position:-23px -28px; }
.active .bub .icon3 {background:url(../images/cut2.png) no-repeat; background-position:-46px -22px; }
.active .bub .icon4 {background:url(../images/cut2.png) no-repeat; background-position:-78px -26px; }
.active .bub .icon5 {background:url(../images/cut2.png) no-repeat; background-position:-104px -29px; }
.active .bub .icon6 {background:url(../images/cut2.png) no-repeat; background-position:-127px -15px; }
.active .bub .icon7 {background:url(../images/cut2.png) no-repeat; background-position:-157px -23px; }
.active .bub .icon8 {background:url(../images/cut2.png) no-repeat; background-position:-190px -25px; }
.active .bub .icon9 {background:url(../images/cut2.png) no-repeat; background-position:-216px -29px; }
.active .bub .icon10 {background:url(../images/cut2.png) no-repeat; background-position:-246px -27px; }
.active .bub .icon11 {background:url(../images/cut2.png) no-repeat; background-position:-276px -28px; }
.active .bub .icon12 {background:url(../images/cut2.png) no-repeat; background-position:-302px -25px; }
.active .bub .icon13 {background:url(../images/cut2.png) no-repeat; background-position:-329px -25px; }

.active .bub .icon14 {background:url(../images/cut2.png) no-repeat; background-position:-875px -29px; }
.active .bub .icon15 {background:url(../images/cut2.png) no-repeat; background-position:-900px -27px; }
.active .bub .icon16 {background:url(../images/cut2.png) no-repeat; background-position:-930px -28px; }
.active .bub .icon17 {background:url(../images/cut2.png) no-repeat; background-position:-960px -24px; }
.active .bub .icon18 {background:url(../images/cut2.png) no-repeat; background-position:-983px -23px; }

/* content */
.nav {width:100%; height:121px; background:#000; }
.nav-cont {width:1120px; margin:0 auto; height:100%; position:relative; }
.nav .logo {display:block; width:228px; height:77px; margin-top:18px; float:left; }
.nav .page-nav {float:right; }
.nav .page-nav li {float:left; overflow:hidden; }
.nav .page-nav a {color:#fff; font-size:16px; font-weight:bold; margin-left:100px; line-height:121px; }
.nav .page-nav a.cur {color:#39acad; }
.nav .page-nav a:hover {color:#39acad; text-decoration:none; }

.prodoctNav{width: 100%; height: 50px; line-height: 50px; border-bottom: 1px solid #ccc;}
.productNav-cont{ width: 980px; margin: 0 auto; height: 100%; position: relative;}
.prodoctNav .product-nav li{float: left ; width: 33%; text-align: center; cursor: pointer;}
.prodoctNav .product-nav li a {color:#7f7f7f; font-size:16px; font-weight:bold;}
.prodoctNav .product-nav li a.cur {color:#39acad; }
.prodoctNav .product-nav li a:hover {color:#39acad; text-decoration:none; }

.Box{width: 100%; height: auto; overflow: hidden; }
.hide{display: none;}
.visibility{visibility: hidden;}
.opcity{opacity: 0;}
.area-tit {font-size:0; line-height:0; height:40px; margin:0 auto 24px; position:relative; z-index:1; }
.des {color:#929292; line-height:28px; font-size: 12px; }

.footer {background:#000; height:60px; width:100%; }
.footer p {font-size:20px; color:#fff; line-height:60px; }

.area1 .area-tit {width:390px; }
.progress {text-align:center; margin-top:80px; }
.progress-list {height:80px; margin-bottom:80px; }
.progress-tit {display:block; width:173px; height:78px; border:1px solid #e7e7e7; font-size:20px; color:#6e6e6e; line-height:78px; border-radius:8px; float:left; }
.progress-cont {width:925px; float:left;}
.progress-cont li {width:175px; height:90px; float:left; position:relative; margin-left:56px; }
.progress-cont .bub {display:block; width:173px; height:49px; border:1px solid #e7e7e7; background:#fff; color:#6e6e6e; font-size:20px; line-height:49px; border-radius:8px; position:relative; margin-bottom:15px; }
.progress-cont .bub1 {line-height:40px; }
.progress-cont .bub .bub-tips {font-size:12px; color:#000; position:absolute; left:60px; bottom:5px; line-height:12px; }
.progress-cont .active .bub .bub-tips {color:#fff; }
.progress-cont .bub .trag {display:block; font-size:0; position:absolute; width:0px; height:0px; margin-left:-8px; left:50%; bottom:-8px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #e7e7e7; }
.progress-cont .bub .trag em {display:block; font-size:0; position:absolute; width:0px; height:0px; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #fff; left:-7px; top:-8px; }
.progress-cont .dot {display:block; width:14px; height:14px; margin:0 auto; margin-left: 77px; border-radius:50%; background:#a4a4a4; border:6px solid rgba(236,236,236,0.7);  background-clip:padding-box; position:relative; z-index:10; }
.progress-cont .progress-bar {width:233px; height:4px; background:#ececec; overflow:hidden; font-size:0; position:absolute; left:85px; bottom:9px; z-index:1; }
.progress-cont .progress-bar div {width:0px; height:4px; background:#3badad; float:left;}

.pannel5 .progress-cont li {margin-left:25px; width:153px; }
.pannel5 .progress-cont .bub {width:153px; }
.pannel5 .progress-cont .progress-bar {width:180px; left:80px; }
.pannel5 .progress-cont {margin-left:31px; width:900px; }

.progress-list .active .bub {border:1px solid #36a4a4\9; background:#3badad\9; color:#fff\9; *border:1px solid #36a4a4; *background:#3badad; *color:#fff; }
.progress-list .active .trag {border-top:8px solid #36a4a4\9; *border-top:8px solid #36a4a4 }
.progress-list .active .trag em {border-top:8px solid #3badad\9; *border-top:8px solid #3badad }
.progress-list .active .trag001 {border-top:8px solid #36a4a4\9; *border-top:8px solid #36a4a4 }
.progress-list .active .trag001 em {border-top:8px solid #3badad\9; *border-top:8px solid #3badad }
.progress-list .active .progress-bar div {width:100%\9; *width:100%; }
.progress-list .active .dot {background:#2a8282\9; border:6px solid rgba(59,173,173,0.7)\9; *background:#2a8282; *border:6px solid rgba(59,173,173,0.7); }

.progress-cont .bub .icon {display:inline-block; vertical-align:middle; font-size:0; margin-right:10px; }
.bub .icon1 {width:22px; height:28px; }
.bub .icon2 {width:22px; height:27px; }
.bub .icon3 {width:31px; height:21px; }
.bub .icon4 {width:25px; height:25px; }
.bub .icon5 {width:22px; height:28px; }
.bub .icon6 {width:29px; height:13px; }
.bub .icon7 {width:32px; height:22px; }
.bub .icon8 {width:25px; height:24px; }
.bub .icon9 {width:29px; height:28px; }
.bub .icon10 {width:29px; height:26px; }
.bub .icon11 {width:25px; height:27px; }
.bub .icon12 {width:26px; height:24px; }
.bub .icon13 {width:27px; height:24px; }
.bub .icon14 {width:24px; height:28px; }
.bub .icon15 {width:29px; height:26px; }
.bub .icon16 {width:29px; height:27px; }
.bub .icon17 {width:22px; height:23px; }
.bub .icon18 {width:17px; height:22px; }

.progress-cont .active .bub {animation: bubAnimate 1s both ease; -webkit-animation: bubAnimate 1s both ease; -moz-animation: bubAnimate 1s both ease; -ms-animation: bubAnimate 1s both ease;}
.progress-cont .active1 .bub {animation: bubAnimate 1s both ease; -webkit-animation: bubAnimate 1s both ease; -moz-animation: bubAnimate 1s both ease; -ms-animation: bubAnimate 1s both ease;}
.progress-cont .active .bub .trag {animation: trag1Animate 1s both ease; -webkit-animation: trag1Animate 1s both ease; -moz-animation: trag1Animate 1s both ease; -ms-animation: trag1Animate 1s both ease;}
.progress-cont .active .bub .trag001 {animation: trag3Animate 1s both ease; -webkit-animation: trag3Animate 1s both ease; -moz-animation: trag3Animate 1s both ease; -ms-animation: trag3Animate 1s both ease;}
.progress-cont .active .bub .trag em {animation: trag2Animate 1s both ease; -webkit-animation: trag2Animate 1s both ease; -moz-animation: trag2Animate 1s both ease; -ms-animation: trag2Animate 1s both ease;}
.progress-cont .active .bub .trag001 em {animation: trag3Animate 1s both ease; -webkit-animation: trag3Animate 1s both ease; -moz-animation: trag3Animate 1s both ease; -ms-animation: trag3Animate 1s both ease;}
.progress-cont .active .dot {animation: dotAnimate 1s both linear; -webkit-animation: dotAnimate 1s both linear; -moz-animation: dotAnimate 1s both linear; -ms-animation: dotAnimate 1s both linear;}
.progress-cont .active .progress-bar div {animation: barAnimate 2s both linear 0.5s; -webkit-animation: barAnimate 2s both linear 0.5s; -moz-animation: barAnimate 2s both linear 0.5s; -ms-animation: barAnimate 2s both linear 0.5s;}

.progress-cont .active .progress-bar01 div {animation: barAnimate 2s both linear 0.5s; -webkit-animation: barAnimate 2s both linear 0.5s; -moz-animation: barAnimate 2s both linear 0.5s; -ms-animation: barAnimate 2s both linear 0.5s;}

.progress-cont .active1 .dot {animation: dotAnimate2 1s both linear 0.5s; -webkit-animation: dotAnimate2 1s both linear 0.5s; -moz-animation: dotAnimate2 1s both linear 0.5s; -ms-animation: dotAnimate2 1s both linear 0.5s;}
.progress-cont .cont2.active1 .progress-bar div {animation: barAnimate2 2s both linear; -webkit-animation: barAnimate2 2s both linear; -moz-animation: barAnimate2 2s both linear; -ms-animation: barAnimate2 2s both linear;}

.pannel5 .progress-cont .active .progress-bar div {animation: barAnimate 1.5s both linear 0.5s; -webkit-animation: barAnimate 1.5s both linear 0.5s; -moz-animation: barAnimate 1.5s both linear 0.5s; -ms-animation: barAnimate 1.5s both linear 0.5s;}

.area2 {height:925px; background:#f5f5f5; }
.area2 .area-cont {height:825px; }
.area2 .area-tit {width:911px; }

.animate-cont {width:100%; height:auto; position:relative; }
.animate2-cont {margin-top:100px; }
.animate2-cont .animate-main {width:666px; height:509px; margin:0 auto; background:url(../images/product/area2-1.jpg) no-repeat; position:relative; }
.animate2-cont .zoom1 {position:absolute; width:325px; height:325px; background:url(../images/product/area2-2.png) no-repeat; left:-188px; top:30px; opacity:0; opacity:1\9; }
.animate2-cont .zoom2 {position:absolute; width:325px; height:325px; background:url(../images/product/area2-3.png) no-repeat; right:-180px; top:-50px; opacity:0; opacity:1\9; }
.play .animate2-cont .zoom1 {animation: fadeInLeft 2s both ease-out; -webkit-animation: fadeInLeft 2s both ease-out; -moz-animation: fadeInLeft 2s both ease-out; -ms-animation: fadeInLeft 2s both ease-out; }
.play .animate2-cont .zoom2 {animation: fadeInRight 2s both ease-out; -webkit-animation: fadeInRight 2s both ease-out; -moz-animation: fadeInRight 2s both ease-out; -ms-animation: fadeInRight 2s both ease-out; }

.area3 {height:895px; background:#fff; }
.area3 .area-cont {height:795px; }
.area3 .area-tit {width:980px; }
.animate3-cont {margin-top:100px; }
.animate3-cont .animate-main {width:1058px; height:527px; margin:0 auto; position:relative; }
.animate3-cont .animate-main span {display:block; width:100%; height:100%; position:absolute; left:0; top:0; opacity:0; opacity:1\9; }
.animate3-cont .animate-main span:nth-child(1) {background:url(../images/product/area3-1.jpg) no-repeat; z-index:1; }
.animate3-cont .animate-main span:nth-child(2) {background:url(../images/product/area3-2.jpg) no-repeat; z-index:2; }
.animate3-cont .animate-main span:nth-child(3) {background:url(../images/product/area3-3.jpg) no-repeat; z-index:3; }
.animate3-cont .animate-main span:nth-child(4) {background:url(../images/product/area3-4.jpg) no-repeat; z-index:4; }
.animate3-cont .animate-main span:nth-child(5) {background:url(../images/product/area3-5.jpg) no-repeat; z-index:5; }
.play .animate3-cont .animate-main span {animation: fadeIn 1s both linear; -webkit-animation: fadeIn 1s both linear; -moz-animation: fadeIn 1s both linear; -ms-animation: fadeIn 1s both linear; }
.play .animate3-cont .animate-main span:nth-child(2) {-webkit-animation-delay:2s; -ms-animation-delay:2s; animation-delay:2s; -moz-animation-delay:2s; }
.play .animate3-cont .animate-main span:nth-child(3) {-webkit-animation-delay:4s; -ms-animation-delay:4s; animation-delay:4s; -moz-animation-delay:4s; }
.play .animate3-cont .animate-main span:nth-child(4) {-webkit-animation-delay:6s; -ms-animation-delay:6s; animation-delay:6s; -moz-animation-delay:6s; }
.play .animate3-cont .animate-main span:nth-child(5) {-webkit-animation-delay:8s; -ms-animation-delay:8s; animation-delay:8s; -moz-animation-delay:8s; }


.area4 {height:925px; background:#f5f5f5; }
.area4 .area-cont {height:825px; }
.area4 .area-tit {width:996px; }
.animate4-cont {margin-top:100px; }
.animate4-cont .animate-main {width:650px; height:488px; margin:0 auto; background:url(../images/product/area4-1.jpg) no-repeat; position:relative; box-shadow:0 0 22px rgba(8,1,3,0.14); }
.animate4-cont .zoom1 {position:absolute; width:293px; height:293px; border-radius:50%; background:url(../images/product/area4-2.png) no-repeat; left:316px; top:115px; box-shadow:0 0 25px 5px rgba(8,1,3,0.1); opacity:0; opacity:1\9; }
.play .animate4-cont .zoom1 {animation: fadeIn 2s both ease-out; -webkit-animation: fadeIn 2s both ease-out; -moz-animation: fadeIn 2s both ease-out; -ms-animation: fadeIn 2s both ease-out; }

.area-aside .area-tit {margin:0; margin-bottom:50px; }
.area-aside .des {text-align:left; }

.area5 {height:790px; }
.area5 .area-cont {padding-top:0; }
.area5 .area-aside {width:400px; float:right; margin-right:50px; padding-top:200px; }
.area5 .area-aside .area-tit {width:411px; height:152px; background:url(../images/cut2.png) no-repeat; background-position:0 -222px; }
.area5 .area-aside .des {padding-left:10px; }
.animate5-cont {width:580px; height:660px; float:left; margin-top:100px; margin-left:50px; }
.animate5-cont .animate-block1 {width:293px; height:547px; position:absolute; background:url(../images/product/area5-1.jpg) no-repeat; z-index:2; box-shadow:0 0 22px rgba(8,1,3,0.14); left:0; top:65px; opacity:0; opacity:1\9; }
.animate5-cont .animate-block2 {width:293px; height:587px; position:absolute; background:url(../images/product/area5-2.jpg) no-repeat; z-index:1; box-shadow:0 0 22px rgba(8,1,3,0.14); left:243px; top:0; opacity:0; opacity:1\9; }
.play .animate5-cont .animate-block1 {animation: shortFIL 1s ease both; -webkit-animation: shortFIL 1s ease both; -moz-animation: shortFIL 1s ease both; -ms-animation: shortFIL 1s ease both; }
.play .animate5-cont .animate-block2 {animation: shortFIR 1s ease both; -webkit-animation: shortFIR 1s ease both; -moz-animation: shortFIR 1s ease both; -ms-animation: shortFIR 1s ease both; }

.area6 {height:745px; background:#f5f5f5; }
.area6 .area-cont {padding-top:0; }
.area6 .area-aside {width:380px; float:left; margin-left:50px; padding-top:200px; }
.area6 .area-aside .area-tit {width:267px; height:97px; background:url(../images/cut2.png) no-repeat; background-position:-412px -222px; }
.animate6-cont {width:480px; height:660px; float:right; margin-top:100px; margin-right:50px; }
.animate6-cont .animate-block1 {width:293px; height:504px; position:absolute; background:url(../images/product/area6-1.jpg) no-repeat; z-index:2; box-shadow:0 0 22px rgba(8,1,3,0.14); left:0; top:45px; opacity:0; opacity:1\9; }
.animate6-cont .animate-block2 {width:293px; height:503px; position:absolute; background:url(../images/product/area6-2.jpg) no-repeat; z-index:1; box-shadow:0 0 22px rgba(8,1,3,0.14); left:243px; top:0; opacity:0; opacity:1\9; }
.play .animate6-cont .animate-block1 {animation: shortFIL 1s ease both; -webkit-animation: shortFIL 1s ease both; -moz-animation: shortFIL 1s ease both; -ms-animation: shortFIL 1s ease both; }
.play .animate6-cont .animate-block2 {animation: shortFIR 1s ease both; -webkit-animation: shortFIR 1s ease both; -moz-animation: shortFIR 1s ease both; -ms-animation: shortFIR 1s ease both; }

.area7 {height:745px; }
.area7 .area-cont {padding-top:0; }
.area7 .area-aside {width:400px; float:right; margin-right:50px; padding-top:200px; }
.area7 .area-aside .area-tit {width:379px; height:102px; background:url(../images/cut2.png) no-repeat; background-position:-680px -222px; }
.area7 .area-aside .des {padding-left:10px; }
.animate7-cont {width:580px; height:660px; float:left; margin-top:100px; margin-left:50px; }
.animate7-cont .animate-block1 {width:293px; height:504px; position:absolute; background:url(../images/product/area7-1.jpg) no-repeat; z-index:2; box-shadow:0 0 22px rgba(8,1,3,0.14); left:0; top:45px; opacity:0; opacity:1\9; }
.animate7-cont .animate-block2 {width:293px; height:503px; position:absolute; background:url(../images/product/area7-2.jpg) no-repeat; z-index:1; box-shadow:0 0 22px rgba(8,1,3,0.14); left:243px; top:0; opacity:0; opacity:1\9; }
.play .animate7-cont .animate-block1 {animation: shortFIL 1s ease both; -webkit-animation: shortFIL 1s ease both; -moz-animation: shortFIL 1s ease both; -ms-animation: shortFIL 1s ease both; }
.play .animate7-cont .animate-block2 {animation: shortFIR 1s ease both; -webkit-animation: shortFIR 1s ease both; -moz-animation: shortFIR 1s ease both; -ms-animation: shortFIR 1s ease both; }

.area8 {height:745px; background:#f5f5f5; }
.area8 .area-cont {padding-top:0; overflow:hidden; }
.area8 .area-aside {width:390px; float:left; padding-top:200px; margin-left:60px; }
.area8 .area-aside .area-tit {width:387px; height:92px; background:url(../images/cut2.png) no-repeat; background-position:-391px 0; }
.animate8-cont {width:630px; height:650px; float:right; margin-top:60px; }
.animate8-cont .animate-block1 {width:344px; height:531px; position:absolute; z-index:5; background:url(../images/product/area8-1.png) no-repeat; left:162px; top:0; }
.animate8-cont .animate-block2 {width:320px; height:525px; position:absolute; z-index:1; background:url(../images/product/area8-2.png) no-repeat; left:0; top:0; transform: translate(166px, 0); -webkit-transform: translate(166px, 0); -moz-transform: translate(166px, 0); -ms-transform: translate(166px, 0); -ms-transform: translate(0, 0)\9; }
.animate8-cont .animate-block3 {width:322px; height:522px; position:absolute; z-index:1; background:url(../images/product/area8-3.png) no-repeat; right:0; top:0; transform: translate(-168px, 0); -webkit-transform: translate(-168px, 0); -moz-transform: translate(-168px, 0); -ms-transform: translate(-168px, 0); -ms-transform: translate(0, 0)\9; }
.play .animate8-cont .animate-block3 {animation: slideInLeft 1s ease both; -webkit-animation: slideInLeft 1s ease both; -moz-animation: slideInLeft 1s ease both; -ms-animation: slideInLeft 1s ease both; }
.play .animate8-cont .animate-block2 {animation: slideInRight 1s ease both; -webkit-animation: slideInRight 1s ease both; -moz-animation: slideInRight 1s ease both; -ms-animation: slideInRight 1s ease both; }

.area9 {height:450px; }
.area9 .area-cont {height:360px; padding-top:90px; }
.area9 .area-tit {width:1005px; height:120px; background:url(../images/cut2.png) no-repeat; background-position:0 -375px; }
.contact {padding-top:75px; font-size:18px; color:#bcbcbc; text-align:left; padding-left:175px; }
.contact .icon {display:inline-block; vertical-align:middle; margin-right:20px; }
.contact span {display:inline-block; line-height:24px; padding-right:40px; padding-bottom:25px; }
.icon-phone {width:24px; height:24px; background:url(../images/cut2.png) no-repeat; background-position:-779px 0; }
.icon-fax {width:24px; height:23px; background:url(../images/cut2.png) no-repeat; background-position:-804px 0; }
.icon-email {width:24px; height:14px; background:url(../images/cut2.png) no-repeat; background-position:-829px 0; }
.icon-address {width:20px; height:24px; background:url(../images/cut2.png) no-repeat; background-position:-854px 0; }

.tit{font-size: 24px; font-weight: normal; margin-bottom: 10px;}
.area01{background: #f5f5f5;}
.tit-cont{width: 980px; height: auto;}
.tit-cont .tit-cont {width: 100%; overflow: hidden; padding: 10px;}
.tit-cont li{width: 33%; float: left;}
.tit-cont li .txt{ width: 320px; height: 150px; margin: 0 auto;}

.area03{background: #f5f5f5; padding-bottom: 50px;}
.tit-cont>.sys{position: relative; width: 100%; height: auto; background: #FFFFFF; margin-bottom: 15px; padding: 20px; border-radius: 8px;}
.tit-cont>.sys>.left{width: 30%; text-align: left; display: inline-block;}
.tit-cont>.sys>.right{width:60%; text-align: left; display: inline-block; vertical-align: top; color: #ccc;}
.tit-cont>.sys>.right h3{margin-bottom: 20px; font-size: 18px; color: black; font-weight: normal;}
.tit-cont>.sys span{width: 150px; height: 38px; line-height: 38px; text-align: center; display: inline-block; margin-right: 10px; background: #39acad; color: #FFFFFF;}

.area04{width: 100%; height: auto; overflow: hidden;}
.area04 .tit-cont{padding: 50px 40px;}
.colorGreen{color: #39acad;}
.area04 .tit-cont .numCon{float: left; width: 50%; text-align: left; padding-right: 50px; box-sizing: border-box;}
.area04 .tit-cont .numCon h3{font-size: 24px; font-weight: normal; color: #39acad; margin-bottom: 20px;}
.area04 .tit-cont .numCon .num{width: 73px; height: 60px; line-height: 60px; text-align: center; color: white; display: inline-block; background: url(../images/product/numBg.png) no-repeat;}

.area05 .d_case{ padding: 0 80px; margin-bottom: 50px;}

.area06{ background: #F5F5F5; padding-bottom: 50px;}
.area06 .onCon{position: relative; width: 980px; height: 660px; box-sizing: border-box;}
.area06 .onCon .picBox{ width: 980px; height: 650px; position: absolute; top: 0px; left: 0px;}
.area06 .onCon .picBox li{width: 980px; height: 650px;}
.area06 .animateBanner{width: 415px; height: 285px;position: absolute; top: 188px; left: 35px; }
.area06 .animateBanner .progress-cont{width: 415px; height: 285px; box-sizing: border-box; position: relative;}
.area06 .animateBanner .progress-cont .cont{position: relative; display: inline-block; width:135px; height: 40px;}
.progress-cont .cont .bub{ position: absolute; top: -39px; left: -33px; width: 94px; height: 36px; line-height: 36px;}
.area06 .animateBanner .progress-cont .dot{ position: absolute; top: 5px; left: -76px;}
.area06 .animateBanner .progress-cont .progress-bar{ width: 145px; top: 16px; left: 17px; }
.area06 .animateBanner .progress-cont .cont2{position: relative; display:block; width:35px; height:60px;}
.area06 .animateBanner .progress-cont .cont2 .dot{ position: absolute; top: -26px; left: 65px;}
.area06 .animateBanner .progress-cont .cont2 .progress-bar{ width: 4px; height: 120px; top: -40px; left: 153px;}
.area06 .animateBanner .progress-cont .cont2 .progress-bar01{width: 130px; height: 4px; position: absolute; top: 16px; left: 155px;}
.area06 .animateBanner .progress-cont .cont3 .dot{ position: absolute; top: -54px; left: 54px;}
.area06 .animateBanner .progress-cont .cont3 .progress-bar{ width: 83px; top: -44px; left: 146px; }
.area06 .animateBanner .progress-cont .cont4{position: absolute;}
.area06 .animateBanner .progress-cont .cont4 .progress-bar{ width: 4px; height: 230px; position: absolute; top: -317px; left: 365px;}
.area06 .animateBanner .progress-cont .cont5 .progress-bar{ width: 55px; height: 4px; position: absolute; top: -318px; left: 314px;}
.area06 .animateBanner .progress-cont .cont5 .angle{width: 0px; height: 0px; position: absolute; top: -324px; left: 305px; border-top: 8px solid transparent; border-right: 10px solid #cecece; border-bottom: 8px solid transparent;}
.area06 .animateBanner .progress-cont .cont5 .angles{width: 0px; height: 0px; position: absolute; top: -324px; left: 305px; border-top: 8px solid transparent; border-right: 10px solid #39acad; border-bottom: 8px solid transparent;}
.area06 .animateBanner .progress-cont .trag002{width: 0px; height: 0px; position: absolute; top: 10px; right: -11px; border-top: 8px solid transparent; border-left: 10px solid #ffffff; border-bottom: 8px solid transparent;}
.area06 .animateBanner .progress-cont .trags002{width: 0px; height: 0px; position: absolute; top: 10px; right: -11px; border-top: 8px solid transparent; border-left: 10px solid #39acad; border-bottom: 8px solid transparent;}
.area06 .animateBanner .progress-cont .trag0021{width: 0px; height: 0px; position: absolute; top: 10px; right: -11px; border-top: 8px solid transparent; border-left: 10px solid #ffffff; border-bottom: 8px solid transparent;}
.area06 .animateBanner .progress-cont .trags0021{width: 0px; height: 0px; position: absolute; top: 10px; right: -11px; border-top: 8px solid transparent; border-left: 10px solid #39acad; border-bottom: 8px solid transparent;}
.area06 .animateBanner .progress-cont .trag003{width: 0px; height: 0px; position: absolute; top: 10px; left: -11px; border-top: 8px solid transparent; border-right: 10px solid #ffffff; border-bottom: 8px solid transparent;}
.area06 .animateBanner .progress-cont .trags003{width: 0px; height: 0px; position: absolute; top: 10px; left: -11px; border-top: 8px solid transparent; border-right: 10px solid #39acad; border-bottom: 8px solid transparent;}
.area06 .animateBanner .progress-cont .trag004{width: 0px; height: 0px; position: absolute; top: -11px; left: 38px; border-right: 8px solid transparent; border-bottom: 10px solid #ffffff; border-left: 8px solid transparent;}
.area06 .animateBanner .progress-cont .trags004{width: 0px; height: 0px; position: absolute; top: -11px; left: 38px; border-right: 8px solid transparent; border-bottom: 10px solid #39acad; border-left: 8px solid transparent;}
.area06 .onCon .picBox li{position: absolute;}
.area06 .onCon .picBox li .overBox{position: absolute; top: 0px; left: 0px; width: 652px; height: 650px; overflow: hidden;} 
.area06 .onCon .picBox li .picBanner{width: 1956px; height: 563px; position: absolute; z-index: 9; top: 0px; left: 0px;}
.area06 .onCon .picBox li .picBanner .inPic{ width: 652px; height: 563px; float: left;}
.area06 .onCon .picBox li .circlePic{width: 200px; height: 40px; position: absolute; z-index: 1; bottom: 25px; left: 280px;  display: block;}
.area06 .onCon .picBox li .circlePic span{ display: inline-block; float: left; width: 20px; height: 20px; border-radius: 50%; background: #ccc; margin-right: 20px; cursor: pointer;}
.area06 .onCon .picBox li .circlePic .bgGreen{background: #39acad;}
.area06 .onCon .Btn{ position: absolute; bottom: 230px; right: 0px; width: 360px; height: 100px;}
.area06 .onCon .Btn li{ width: 50px; height: 30px; line-height: 30px; float: left; margin: 0 10px; border: 1px solid #39acad; border-radius: 5px; text-decoration: none; margin-bottom: 20px; cursor: pointer;}
.bgGreen{ background: #39acad; color: #FFFFFF;}

.area07 .tit-cont .h-icon li{width: 20%; margin-top: 40px;}

.area08{background: #F5F5F5;}
.area08 ul{ position: relative; width: 100%; height: 630px; overflow: hidden;}
.area08 ul li{ height: 630px;}
.area08 ol{ width: 100px; margin: 0 auto;}
.area08 ol li{ width: 20px; height: 20px; border-radius: 50%; background: #ccc; float: left; margin: 0 15px; cursor: pointer;}
.area08 ol .bgGreen{background: #39acad;}

.area09 p{color: #929292;}
.area09 .assess{width: 100%; overflow: hidden; box-sizing: border-box;}
.area09 .assess li{width: 31%; margin-right: 20px; margin-top: 30px; padding: 20px; float: left; border: 1px solid #ccc; box-sizing: border-box; text-align: left; color: #39acad;}
.area09 .assess .otherWidth{width: 47%;}
.area09 .assess .lastBorder{ border: none;}
.area09 .assess li h3{ font-size: 24px; font-weight: normal; margin-bottom: 10px;}
.area09 .assess li h5{ font-weight: normal;}
.area09 .assess li h5 span{ width: 114px; height: 18px; display: inline-block; background: url(../images/product/start.png) no-repeat 0px 0px;}
.area09 .assess li hr{ margin: 20px 0; background: #39acad;}

.area10{ background: #F5F5F5;}
.area10 ul{ position: relative; width: 100%; height: 518px; overflow: hidden;}
.animateProcess{width: 100%; height: 110px;position: absolute;top: 140px;}
.animateProcess .progress-cont{width: 100%; box-sizing: border-box; margin: 0 auto;}
.animateProcess .progress-cont li{width: 16%; margin-right: 0px; margin-left: 0px;}
.animateProcess .progress-cont .bub{ width: 113px; position: relative; top:9px; left: 0px; margin-left: 32px;}
.animateProcess .progress-cont .progress-bar{ width: 165px; top: 77px; left: 85px; }
.area10 ul li{ height: 518px;}
.area10 ol{ width: 100px; margin: 0 auto;}
.area10 ol li{ width: 20px; height: 20px; border-radius: 50%; background: #ccc; float: left; margin: 0 15px; cursor: pointer;}
.area10 ol .bgGreen{background: #39acad;}

.area11 .area11FUl{ position: relative; width: 100%; height: 484px; overflow: hidden;}
.area11 .area11FUl > li{ height: 484px;}
.area11 ol{ width: 100px; margin: 0 auto;}
.area11 ol li{ width: 20px; height: 20px; border-radius: 50%; background: #ccc; float: left; margin: 0 15px; cursor: pointer;}
.area11 ol .bgGreen{background: #39acad;}
.area011{ background: #F5F5F5;}
.area12 .banner{width: 980px; height: 548px; overflow: hidden;}
.area12 .banner ul{ position: relative;}
.area12 .banner ul li{ position: absolute; width: 980px; height: 548px; cursor: pointer;}


@media (max-width: 1440px) and (min-width: 900px) {
    .area-tit {-webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9);	-o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
    .progress {-webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9);	-o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
    .animate-cont {-webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9);	-o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); }
}

/* animation */
@-webkit-keyframes pulse {
    0% {-webkit-transform: scale3d(1, 1, 1); }
    50% {-webkit-transform: scale3d(1.05, 1.05, 1.05); }
    100% {-webkit-transform: scale3d(1, 1, 1); }
}
@-moz-keyframes pulse {
    0% {-moz-transform: scale3d(1, 1, 1); }
    50% {-moz-transform: scale3d(1.05, 1.05, 1.05); }
    100% {-moz-transform: scale3d(1, 1, 1); }
}
@-ms-keyframes pulse {
    0% {-ms-transform: scale3d(1, 1, 1); }
    50% {-ms-transform: scale3d(1.05, 1.05, 1.05); }
    100% {-ms-transform: scale3d(1, 1, 1); }
}
@keyframes pulse {
    0% {transform: scale3d(1, 1, 1); }
    50% {transform: scale3d(1.05, 1.05, 1.05); }
    100% {transform: scale3d(1, 1, 1); }
}
/*从左边飞进*/
@-webkit-keyframes slideInLeft {
    0% {-webkit-transform: translate(-168px, 0); visibility: visible; }
    100% {-webkit-transform: translate(0, 0); }
}
@-moz-keyframes slideInLeft {
    0% {-moz-transform: translate(-168px, 0); visibility: visible; }
    100% {-moz-transform: translate(0, 0); }
}
@-ms-keyframes slideInLeft {
    0% {-ms-transform: translate(-168px, 0); visibility: visible; }
    100% {-ms-transform: translate(0, 0); }
}
@keyframes slideInLeft {
    0% {transform: translate(-168px, 0); visibility: visible; }
    100% {transform: translate(0, 0); }
}
/*从右边飞进*/
@-webkit-keyframes slideInRight {
    0% {-webkit-transform: translate(166px, 0); visibility: visible; }
    100% {-webkit-transform: translate(0, 0); }
}
@-moz-keyframes slideInRight {
    0% {-moz-transform: translate(166px, 0); visibility: visible; }
    100% {-moz-transform: translate(0, 0); }
}
@-ms-keyframes slideInRight {
    0% {-ms-transform: translate(166px, 0); visibility: visible; }
    100% {-ms-transform: translate(0, 0); }
}
@keyframes slideInRight {
    0% {transform: translate(166px, 0); visibility: visible; }
    100% {transform: translate(0, 0); }
}

@-webkit-keyframes fadeInRight {
    0% {opacity: 0; -webkit-transform: translate(200%, 0); }
    50% {opacity: 0.3; -webkit-transform: translate(0, 0); }
    100% {opacity: 1; -webkit-transform: translate(0, 0);}
}
@-moz-keyframes fadeInRight {
    0% {opacity: 0; -moz-transform: translate(200%, 0); }
    50% {opacity: 0.3; -moz-transform: translate(0, 0); }
    100% {opacity: 1; -moz-transform: translate(0, 0);}
}
@-ms-keyframes fadeInRight {
    0% {opacity: 0; -ms-transform: translate(200%, 0); }
    50% {opacity: 0.3; -ms-transform: translate(0, 0); }
    100% {opacity: 1; -ms-transform: translate(0, 0);}
}
@keyframes fadeInRight {
    0% {opacity: 0; transform: translate(200%, 0); }
    50% {opacity: 0.3; transform: translate(0, 0); }
    100% {opacity: 1; transform: translate(0, 0);}
}

@-webkit-keyframes shortFIR {
    0% {opacity: 0; -webkit-transform: translate(200%, 0); }
    100% {opacity: 1; -webkit-transform: translate(0, 0);}
}
@-moz-keyframes shortFIR {
    0% {opacity: 0; -moz-transform: translate(200%, 0); }
    100% {opacity: 1; -moz-transform: translate(0, 0);}
}
@-ms-keyframes shortFIR {
    0% {opacity: 0; -ms-transform: translate(200%, 0); }
    100% {opacity: 1; -ms-transform: translate(0, 0);}
}
@keyframes shortFIR {
    0% {opacity: 0; transform: translate(200%, 0); }
    100% {opacity: 1; transform: translate(0, 0);}
}

@-webkit-keyframes fadeInLeft {
    0% {opacity: 0; -webkit-transform: translate(-200%, 0); }
    50% {opacity: 0.3; -webkit-transform: translate(0, 0); }
    100% {opacity: 1; -webkit-transform: translate(0, 0);}
}
@-moz-keyframes fadeInLeft {
    0% {opacity: 0; -moz-transform: translate(-200%, 0); }
    50% {opacity: 0.3; -moz-transform: translate(0, 0); }
    100% {opacity: 1; -moz-transform: translate(0, 0);}
}
@-ms-keyframes fadeInLeft {
    0% {opacity: 0; -ms-transform: translate(-200%, 0); }
    50% {opacity: 0.3; -ms-transform: translate(0, 0); }
    100% {opacity: 1; -ms-transform: translate(0, 0);}
}
@keyframes fadeInLeft {
    0% {opacity: 0; transform: translate(-200%, 0); }
    50% {opacity: 0.3; transform: translate(0, 0); }
    100% {opacity: 1; transform: translate(0, 0);}
}

@-webkit-keyframes shortFIL {
    0% {opacity: 0; -webkit-transform: translate(-200%, 0); }
    50% {opacity: 0.3; -webkit-transform: translate(0, 0); }
    100% {opacity: 1; -webkit-transform: translate(0, 0);}
}
@-moz-keyframes shortFIL {
    0% {opacity: 0; -moz-transform: translate(-200%, 0); }
    50% {opacity: 0.3; -moz-transform: translate(0, 0); }
    100% {opacity: 1; -moz-transform: translate(0, 0);}
}
@-ms-keyframes shortFIL {
    0% {opacity: 0; -ms-transform: translate(-200%, 0); }
    50% {opacity: 0.3; -ms-transform: translate(0, 0); }
    100% {opacity: 1; -ms-transform: translate(0, 0);}
}
@keyframes shortFIL {
    0% {opacity: 0; transform: translate(-200%, 0); }
    50% {opacity: 0.3; transform: translate(0, 0); }
    100% {opacity: 1; transform: translate(0, 0);}
}

@-webkit-keyframes fadeIn{
    0% {opacity: 0; }
    100% {opacity: 1; }
}
@-moz-keyframes fadeIn{
    0% {opacity: 0; }
    100% {opacity: 1; }
}
@-ms-keyframes fadeIn{
    0% {opacity: 0; }
    100% {opacity: 1; }
}
@keyframes fadeIn{
    0% {opacity: 0; }
    100% {opacity: 1; }
}

@-webkit-keyframes bubAnimate{
    0%{border:1px solid #e7e7e7; background:#fff; color:#6e6e6e;}
    100%{border:1px solid #36a4a4; background:#3badad; color:#fff;}
}
@-moz-keyframes bubAnimate{
    0%{border:1px solid #e7e7e7; background:#fff; color:#6e6e6e;}
    100%{border:1px solid #36a4a4; background:#3badad; color:#fff;}
}
@-ms-keyframes bubAnimate{
    0%{border:1px solid #e7e7e7; background:#fff; color:#6e6e6e;}
    100%{border:1px solid #36a4a4; background:#3badad; color:#fff;}
}
@keyframes bubAnimate{
    0%{border:1px solid #e7e7e7; background:#fff; color:#6e6e6e;}
    100%{border:1px solid #36a4a4; background:#3badad; color:#fff;}
}

@-webkit-keyframes barAnimate{
    0%{width:0; }
    100%{width:100%; }
}
@-moz-keyframes barAnimate{
    0%{width:0; }
    100%{width:100%; }
}
@-ms-keyframes barAnimate{
    0%{width:0; }
    100%{width:100%; }
}
@keyframes barAnimate{
    0%{width:0; }
    100%{width:100%; }
}

@-webkit-keyframes barAnimate2{
    0%{height:0; width: 4px; }
    100%{height:100%; width: 4px; }
}
@-moz-keyframes barAnimate2{
    0%{height:0; width: 4px;}
    100%{height:100%; width: 4px;}
}
@-ms-keyframes barAnimate2{
    0%{height:0; width: 4px;}
    100%{height:100%; width: 4px;}
}
@keyframes barAnimate2{
    0%{width:0; width: 4px;}
    100%{height:100%; width: 4px;}
}

@-webkit-keyframes trag1Animate{
    0%{border-top:8px solid #e7e7e7; }
    100%{border-top:8px solid #36a4a4; }
}
@-moz-keyframes trag1Animate{
    0%{border-top:8px solid #e7e7e7; }
    100%{border-top:8px solid #36a4a4; }
}
@-ms-keyframes trag1Animate{
    0%{border-top:8px solid #e7e7e7; }
    100%{border-top:8px solid #36a4a4; }
}
@keyframes trag1Animate{
    0%{border-top:8px solid #e7e7e7; }
    100%{border-top:8px solid #36a4a4; }
}

@-webkit-keyframes trag2Animate{
    0%{border-top:8px solid #fff; }
    100%{border-top:8px solid #3badad; }
}
@-moz-keyframes trag2Animate{
    0%{border-top:8px solid #fff; }
    100%{border-top:8px solid #3badad; }
}
@-ms-keyframes trag2Animate{
    0%{border-top:8px solid #fff; }
    100%{border-top:8px solid #3badad; }
}
@keyframes trag2Animate{
    0%{border-top:8px solid #fff; }
    100%{border-top:8px solid #3badad; }
}

@-webkit-keyframes trag3Animate{
    0%{border-bottom:8px solid #e7e7e7; }
    100%{border-bottom:8px solid #36a4a4; }
}
@-moz-keyframes trag3Animate{
    0%{border-bottom:8px solid #e7e7e7; }
    100%{border-bottom:8px solid #36a4a4; }
}
@-ms-keyframes trag3Animate{
    0%{border-bottom:8px solid #e7e7e7; }
    100%{border-bottom:8px solid #36a4a4; }
}
@keyframes trag3Animate{
    0%{border-bottom:8px solid #e7e7e7; }
    100%{border-bottom:8px solid #36a4a4; }
}

@-webkit-keyframes dotAnimate{
    0%{background:#a4a4a4; border:6px solid rgba(236,236,236,0.7);}
    50%{background:#2a8282; border:6px solid rgba(236,236,236,0.7);}
    100%{background:#2a8282; border:6px solid rgba(59,173,173,0.7);}
}
@-moz-keyframes dotAnimate{
    0%{background:#a4a4a4; border:6px solid rgba(236,236,236,0.7);}
    50%{background:#2a8282; border:6px solid rgba(236,236,236,0.7);}
    100%{background:#2a8282; border:6px solid rgba(59,173,173,0.7);}
}
@-ms-keyframes dotAnimate{
    0%{background:#a4a4a4; border:6px solid rgba(236,236,236,0.7);}
    50%{background:#2a8282; border:6px solid rgba(236,236,236,0.7);}
    100%{background:#2a8282; border:6px solid rgba(59,173,173,0.7);}
}
@keyframes dotAnimate{
    0%{background:#a4a4a4; border:6px solid rgba(236,236,236,0.7);}
    50%{background:#2a8282; border:6px solid rgba(236,236,236,0.7);}
    100%{background:#2a8282; border:6px solid rgba(59,173,173,0.7);}
}

@-webkit-keyframes dotAnimate2{
    0%{background:#a4a4a4; border:6px solid rgba(236,236,236,0.7);}
    50%{background:#2a8282; border:6px solid rgba(236,236,236,0.7);}
    100%{background:#2a8282; border:6px solid rgba(59,173,173,0.7);}
}
@-moz-keyframes dotAnimate2{
    0%{background:#a4a4a4; border:6px solid rgba(236,236,236,0.7);}
    50%{background:#2a8282; border:6px solid rgba(236,236,236,0.7);}
    100%{background:#2a8282; border:6px solid rgba(59,173,173,0.7);}
}
@-ms-keyframes dotAnimate2{
    0%{background:#a4a4a4; border:6px solid rgba(236,236,236,0.7);}
    50%{background:#2a8282; border:6px solid rgba(236,236,236,0.7);}
    100%{background:#2a8282; border:6px solid rgba(59,173,173,0.7);}
}
@keyframes dotAnimate2{
    0%{background:#a4a4a4; border:6px solid rgba(236,236,236,0.7);}
    50%{background:#2a8282; border:6px solid rgba(236,236,236,0.7);}
    100%{background:#2a8282; border:6px solid rgba(59,173,173,0.7);}
}


/*--------------- kong css ---------------*/

.part01 .pic,.part02 .pic,.assess li:not(.lastBorder),.part03 .pic,.sys .left,.numCon{
    position: relative;
    visibility: hidden;
    opacity: 0;
}

.part01 li:nth-of-type(1) .pic{
    left: 839px;
}

.part01 li:nth-of-type(2) .pic{
    left: 468px;
}

.part01 li:nth-of-type(3) .pic{
    left: 99px;
}

.part02 li:nth-of-type(1) .pic,.part02 li:nth-of-type(6) .pic{
    left: 926px;
}

.part02 li:nth-of-type(2) .pic,.part02 li:nth-of-type(7) .pic{
    left: 703px;
}

.part02 li:nth-of-type(3) .pic,.part02 li:nth-of-type(8) .pic{
    left: 479px;
}

.part02 li:nth-of-type(4) .pic,.part02 li:nth-of-type(9) .pic{
    left: 255px;
}

.part02 li:nth-of-type(5) .pic,.part02 li:nth-of-type(10) .pic{
    left: 31px;
}

.assess li:nth-of-type(1){
    left: 773px;
}

.assess li:nth-of-type(2){
    left: 406px;
}

.assess li:nth-of-type(3){
    left: 39px;
}

.assess li:nth-of-type(4){
    left: 594px;
}

.sys .left{
    left: 820px;
}

.part01Animate{
    animation: part01Animate 3s both ease;
    -webkit-animation: part01Animate 3s both ease;
    -o-animation: part01Animate 3s both ease;
    -ms-animation: part01Animate 3s both ease;
    -moz-animation: part01Animate 3s both ease;
}

.area08 ul{
    position: relative;
    width: 2500px;
    height: 630px;
    margin-left: -55px;
    overflow: hidden;
}

.area08 ul li {
    height: 630px;
    float: left;
    width: 880px;
    margin: 0 100px;
}

.area10 ul,.area11 ul{
    height: auto;
}

.area10 ul li,.area11 ul li{
    height: auto;
}
.area10 .area10FUl{
	position: relative;
    width: 2500px;
    height: 518px;
    overflow: hidden;
}
.area11 .area11FUl{
    position: relative;
    width: 2500px;
    height: 418px;
    overflow: hidden;
}

.area10 .area10FUl > li,.area11 .area11FUl > li{
    height: 518px;
    width: 980px;
    float: left;
    position: relative;
}


.animateProcess02{
    width: 100%;
    height: 110px;
    position: absolute;
    top: 28px;
    left: -25px;
}
.animateProcess02 .progress-cont{width: 100%; box-sizing: border-box; margin: 0 auto;}
.animateProcess02 .progress-cont li{width: 16%; margin-right: 0px; margin-left: 0px;}
.animateProcess02 .progress-cont .bub{ width: 113px; position: relative; top:9px; left: 0px; margin-left: 32px;}
.animateProcess02 .progress-cont .bub02{
    display: block;
    width: 113px;
    height: 49px;
    border: 1px solid #e7e7e7;
    background: #fff;
    color: #6e6e6e;
    font-size: 20px;
    line-height: 49px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 15px;
    right: 45px;
    bottom: 17px;

}

.animateProcess02 .progress-cont .bub02 .trag,.animateProcess02 .progress-cont .bub03 .trag  {
    display: block;
    font-size: 0;
    position: absolute;
    width: 0px;
    height: 0px;
    margin-left: -8px;
    left: 50%;
    bottom: 16px;
    left: 122px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #e7e7e7;
}

.animateProcess02 .progress-cont .bub02 .trag em,.animateProcess02 .progress-cont .bub03 .trag em{
    display: block;
    font-size: 0;
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #fff;
    left: -9px;
    top: -7px;
}

.animateProcess02 .progress-cont .bub03{
    display: block;
    width: 113px;
    height: 49px;
    border: 1px solid #e7e7e7;
    background: #fff;
    color: #6e6e6e;
    font-size: 20px;
    line-height: 49px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 15px;
    right: 45px;
    top: 13px;
}

.animateProcess02 .progress-cont .bub04{
    display: block;
    width: 140px;
    height: 49px;
    border: 1px solid #e7e7e7;
    background: #fff;
    color: #6e6e6e;
    font-size: 20px;
    line-height: 49px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 15px;
    left: 184px;
    bottom: 96px;
}

.animateProcess02 .progress-cont .bub04 .trag{
    display: block;
    font-size: 0;
    position: absolute;
    width: 0px;
    height: 0px;
    margin-left: -8px;
    left: 50%;
    bottom: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #e7e7e7;
}

.animateProcess02 .progress-cont .bub04 .trag em{
    display: block;
    font-size: 0;
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    left: -7px;
    top: -8px;
}

.animateProcess02 .progress-cont .progress-bar{ width: 168px; top: 77px; left: 85px; }
.animateProcess02 .progress-cont .progress-bar02{
    height: 100px;
    top: 77px;
    left: 87px;
    width: 4px;
    position: absolute;
    background-color: #ececec;
    z-index: 2;
}

.animateProcess02 .progress-cont .dot02{
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    border-radius: 50%;
    background: #a4a4a4;
    border: 6px solid rgba(236,236,236,0.7);
    background-clip: padding-box;
    position: relative;
    z-index: 10;
    top: 75px;
    left: 10px;
}
.animateProcess02 .progress-cont .progress-bar03{
    height: 100px;
    top: 180px;
    left: 87px;
    width: 4px;
    position: absolute;
    background-color: #ececec;
    z-index: 2;
}

.animateProcess02 .progress-cont .dot03{
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    border-radius: 50%;
    background: #a4a4a4;
    border: 6px solid rgba(236,236,236,0.7);
    background-clip: padding-box;
    position: relative;
    z-index: 10;
    top: 145px;
    left: 10px;
}
.animateProcess02 .progress-cont .progress-bar04{
    width: 168px;
    top: 274px;
    left: 87px;
    height: 4px;
    position: absolute;
    background-color: #ececec;
    z-index: 2;
}

.animateProcess02 .progress-cont .dot04{
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    border-radius: 50%;
    background: #a4a4a4;
    border: 6px solid rgba(236,236,236,0.7);
    background-clip: padding-box;
    position: relative;
    z-index: 10;
    top: 119px;
    left: 176px;
}

.bar02Animate{
    height: 0px;
    width: 4px;
    background: #3badad;
    animation: bar02Animate 0.5s both linear 0.5s;
    -webkit-animation: bar02Animate 0.5s both linear 0.5s;
    -moz-animation: bar02Animate 0.5s both linear 0.5s;
    -ms-animation: bar02Animate 0.5s both linear 0.5s;
}

.bar04Animate{
    width: 0px;
    height: 4px;
    background: #3badad;
    animation: barAnimate 1s both linear 0.5s;
    -webkit-animation: barAnimate 1s both linear 0.5s;
    -moz-animation: barAnimate 1s both linear 0.5s;
    -ms-animation: barAnimate 1s both linear 0.5s;
}

.myDot{
    animation: dotAnimate 1s both linear;
    -webkit-animation: dotAnimate 1s both linear;
    -moz-animation: dotAnimate 1s both linear;
    -ms-animation: dotAnimate 1s both linear;
}

.myBub,.myBub02{
    animation: bubAnimate 1s both ease;
    -webkit-animation: bubAnimate 1s both ease;
    -moz-animation: bubAnimate 1s both ease;
    -ms-animation: bubAnimate 1s both ease;
}

.myBub02 .trag{
    animation: myTrag1Animate02 1s both ease;
    -webkit-animation: myTrag1Animate02 1s both ease;
    -moz-animation: myTrag1Animate02 1s both ease;
    -ms-animation: myTrag1Animate02 1s both ease;
}

.myBub .trag{
    animation: myTrag1Animate 1s both ease;
    -webkit-animation: myTrag1Animate 1s both ease;
    -moz-animation: myTrag1Animate 1s both ease;
    -ms-animation: myTrag1Animate 1s both ease;
}

.myBub .trag em{
    animation: myTrag2Animate 1s both ease;
    -webkit-animation: myTrag2Animate 1s both ease;
    -moz-animation: myTrag2Animate 1s both ease;
    -ms-animation: myTrag2Animate 1s both ease;
}

.myBub02 .trag em{
    animation: myTrag3Animate 1s both ease;
    -webkit-animation: myTrag3Animate 1s both ease;
    -moz-animation: myTrag3Animate 1s both ease;
    -ms-animation: myTrag3Animate 1s both ease;
}

@keyframes part01Animate{
    0%{left: 839px; visibility: hidden;}
    100%{left: 0px; visibility: visible;opacity: 1;}
}

@-webkit-keyframes part01Animate{
    0%{left: 839px; visibility: hidden;opacity: 0;}
    100%{left: 0px; visibility: visible;opacity: 1;}
}

@-o-keyframes part01Animate{
    0%{left: 839px; visibility: hidden;}
    100%{left: 0px; visibility: visible;opacity: 1;}
}

@-ms-keyframes part01Animate{
    0%{left: 839px; visibility: hidden;}
    100%{left: 0px; visibility: visible;opacity: 1;}
}

@-moz-keyframes part01Animate{
    0%{left: 839px; visibility: hidden;}
    100%{left: 0px; visibility: visible;opacity: 1;}
}

@keyframes bar02Animate{
    0%{height:0; }
    100%{height:100%; }
}
@-webkit-keyframes bar02Animate{
    0%{height:0; }
    100%{height:100%; }
}
@-moz-keyframes bar02Animate{
    0%{height:0; }
    100%{height:100%; }
}
@-ms-keyframes bar02Animate{
    0%{height:0; }
    100%{height:100%; }
}
@keyframes bar02Animate{
    0%{height:0; }
    100%{height:100%; }
}

@keyframes myTrag2Animate{
    0%{border-left:7px solid #fff; }
    100%{border-left:7px solid #3badad; }
}

@-webkit-keyframes myTrag2Animate{
    0%{border-left:7px solid #fff; }
    100%{border-left:7px solid #3badad; }
}
@-moz-keyframes myTrag2Animate{
    0%{border-left:7px solid #fff; }
    100%{border-left:7px solid #3badad; }
}
@-ms-keyframes myTrag2Animate{
    0%{border-left:7px solid #fff; }
    100%{border-left:7px solid #3badad; }
}
@keyframes myTrag2Animate{
    0%{border-left:7px solid #fff; }
    100%{border-left:7px solid #3badad; }
}

@-webkit-keyframes myTrag3Animate{
    0%{border-top:8px solid #fff; }
    100%{border-top:8px solid #3badad; }
}
@-moz-keyframes myTrag3Animate{
    0%{border-top:8px solid #fff; }
    100%{border-top:8px solid #3badad; }
}
@-ms-keyframes myTrag3Animate{
    0%{border-top:8px solid #fff; }
    100%{border-top:8px solid #3badad; }
}
@keyframes myTrag3Animate{
    0%{border-top:8px solid #fff; }
    100%{border-top:8px solid #3badad; }
}

@keyframes myTrag1Animate{
    0%{border-left:8px solid #e7e7e7; }
    100%{border-left:8px solid #36a4a4; }
}

@-webkit-keyframes myTrag1Animate{
    0%{border-left:8px solid #e7e7e7; }
    100%{border-left:8px solid #36a4a4; }
}
@-moz-keyframes myTrag1Animate{
    0%{border-left:8px solid #e7e7e7; }
    100%{border-left:8px solid #36a4a4; }
}
@-ms-keyframes myTrag1Animate{
    0%{border-left:8px solid #e7e7e7; }
    100%{border-left:8px solid #36a4a4; }
}
@keyframes myTrag1Animate{
    0%{border-left:8px solid #e7e7e7; }
    100%{border-left:8px solid #36a4a4; }
}

@keyframes myTrag1Animate{
    0%{border-left:8px solid #e7e7e7; }
    100%{border-left:8px solid #36a4a4; }
}

@-webkit-keyframes myTrag1Animate02{
    0%{border-top:8px solid #e7e7e7; }
    100%{border-top:8px solid #36a4a4; }
}
@-moz-keyframes myTrag1Animate02{
    0%{border-top:8px solid #e7e7e7; }
    100%{border-top:8px solid #36a4a4; }
}
@-ms-keyframes myTrag1Animate02{
    0%{border-top:8px solid #e7e7e7; }
    100%{border-top:8px solid #36a4a4; }
}
@keyframes myTrag1Animate02{
    0%{border-top:8px solid #e7e7e7; }
    100%{border-top:8px solid #36a4a4; }
}

.animatePic{ position: relative; width: 652px; height: 563px;}
.animatePic .progress-cont{width: 100%; box-sizing: border-box; margin: 0 auto;}
.animatePic .progress-cont .li{position: absolute; top: 10px; left: -20px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .li01{position: absolute; top: 10px; left: 80px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .li02{position: absolute; top: 10px; left: 180px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .li03{position: absolute; top: 10px; left: 280px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .li04{position: absolute; top: 10px; left: 380px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .li05{position: absolute; top: 10px; left: 480px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .li06{position: absolute; top: 333px; right: 73px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .li07{position: absolute; top: 333px; right: 254px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .li08{position: absolute; top: 333px; right: 420px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .li09{position: absolute; top: 333px; left: -20px; display: inline-block; width: 100px; height: auto;}
.animatePic .progress-cont .bub{ width: 95px; position: relative; top:9px; left: -12px; margin-left: 32px;}
.animatePic .progress-cont .bub001{ width: 123px; position: relative; top:100px; left: -28px; margin-left: 32px; z-index: 9;}
.animatePic .progress-cont .progress-bar{ width: 90px; top: 77px; left: 74px; }
.animatePic .progress-cont .progress-bar001{ width: 4px; height: 320px; top: 77px; left: 64px; }
.animatePic .progress-cont .progress-bar002{ width: 160px; top: 77px; left: -88px; }
.animatePic .progress-cont .progress-bar003{ width: 170px; top: 77px; left: -106px; }
.animatePic .progress-cont .dot{ position: absolute; top: 68px; left: -24px;}
.animatePic .progress-cont .bub .trag001 {display:block; font-size:0; position:absolute; width:0px; height:0px; margin-left:-8px; left:50%; top:-16px; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #e7e7e7; }
.progress-cont .bub .trag001 em {display:block; font-size:0; position:absolute; width:0px; height:0px; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #fff; left:-7px; top:-7px; }

.progress-cont .active1 .progress-bar div {animation: barAnimate2 2s both linear; -webkit-animation: barAnimate2 2s both linear; -moz-animation: barAnimate2 2s both linear; -ms-animation: barAnimate2 2s both linear;}