@charset "utf-8";

.header .loginBtn {background: url('../images/nav_icon2_wht.png') left center no-repeat;}

.bgline {position:absolute;left:0;top:0;right:0;height:365px;background-image: -moz-linear-gradient( -90deg, rgb(245,246,248) 0%, rgba(245,246,248,0) 100%);
  background-image: -webkit-linear-gradient( -90deg, rgb(245,246,248) 0%, rgba(245,246,248,0) 100%);
  background-image: -ms-linear-gradient( -90deg, rgb(245,246,248) 0%, rgba(245,246,248,0) 100%);}

/* banna */
.bannawrap {position: relative;height:940px;}
.banner {overflow: hidden;}
.banner .item {position: relative;height:940px;width:100% !important;display: none;}
.banner .item1 {display: block;}
.banner .item .g-bg, .banner .item .g-bg-color, .banner .item .g-bg-img {position: absolute;left:0;top:0;right:0;bottom:0;}
.banner .item .g-bg-img img {position: absolute;left:50%;margin-left: -1280px;width:2560px;}
.banner .item .g-bg-img .img1 {left:50%;bottom:37px;width:881px;margin-left: -234px;}
.banner .item .g-txt {position: absolute;color: #fff;}
.banner .item .g-txt a {color: #fff;}
.banner .item-m {position: relative;z-index: 2;width:100%;height:100%;}
.banner .item-m .wrap {position: relative;}

.banner .item1 .g-bg-color {}

.banner .item1 .g-txt {left:10px;top:226px;}
.banner .item1 h2 {font-size: 54px;margin-bottom: 15px;font-weight: 600;}
.banner .item1 .p1 {font-size: 30px;line-height: 60px;margin-bottom: 3px;}
.banner .item1 .p2 {font-size: 18px;line-height: 38px;}
.banner .item1 .btns {margin-top: 50px;}
.banner .item1 .btns a {position: relative;display: inline-block;font-size: 14px;height: 46px;line-height: 46px;padding:0 51px;background: none;border:1px solid #fff;border-radius:22px;overflow: hidden;}
.banner .item1 .btns a {transition: all .5s;}
.banner .item1 .btns a:hover {/*box-shadow: 0 10px 48px 0px #f83824ab;*/box-shadow: 0px 14px 25px 0px rgba(255, 94, 77, 0.57);}
.banner .item1 .btns a.btn1:hover {background: #fb349c;}
.banner .item1 .btns a.btn1 {background: #fb349c;border:1px solid #fb349c;margin:0 50px 0 0;}
.banner .item1 .btns a .anim {-moz-animation:anim-out .75s;-webkit-animation:anim-out .75s;animation:anim-out .75s;animation-iteration-count:infinite;animation-duration:1.3s;z-index: 1;}
.banner .item1 .btns a .anim:after {-moz-animation:anim-out-pseudo-two 3s;-webkit-animation:anim-out-pseudo-two 3s;animation:anim-out-pseudo-two 3s}
.banner .item1 .btns a .anim, .banner .item1 .btns a .anim:after {animation-iteration-count:infinite;animation-duration:3s;}
.banner .item1 .btns a.btn2 .anim:after {-moz-animation:anim-out-pseudo-blk 3s;-webkit-animation:anim-out-pseudo-blk 3s;animation:anim-out-pseudo-blk 3s;animation-iteration-count:infinite;animation-duration:3s;}

.banner .item1 .g-img .img, .banner .item1 .g-img img {position: absolute;}
.banner .item1 .img, .banner .item1 .img1 {-webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;}
.banner .item1 .g-img .img img {width:100%;left:0;top:0;}

.banner .item1 .g-img-1 {left:50%;top: 715px;width:123px;margin-left: 515px;}
.banner .item1 .g-img-2 {left:50%;top: 170px;margin-left: 726px;width: 80px;}
.banner .item1 .g-img-3 {left: -357px;top: 648px;width: 480px;}
.banner .item1 .g-img-4 {left: 50%; margin-left: 710px; top: 668px; width: 215px;}
.banner .item1 .g-img-5 {left: 50%;margin-left: -152px;top: 842px;width: 1125px;}
.w1400 .banner .item1 .g-img-5 {margin-left: -166px;}
.banner .item1 .g-img-hand {left: 752px;top: 209px;width: 531px;}
.banner .item1 .g-img-banner3_applet {left: -244px;top: 80px;width: 305px;}
.banner .item1 .g-img-banner3_weixin {left: 50%;margin-left: 670px;top: 440px;width: 100px;}
.banner .item1 .g-img-banner3_h5 {left: 50%;margin-left: -220px;top: 613px;width: 100px;}
.banner .item1 .g-img-banner3_cir1 {left: 50%;margin-left: -205px;top: 46px;width: 910px;}
.banner .item1 .g-img-banner3_cir2 {left: 50%;margin-left: -20px;top: 257px;width: 530px;}
.banner .item1 .g-img-banner3_cir3 {left: 50%;margin-left: -236px;top: 639px;width: 72px;height: 72px;background-color: rgb(255, 255, 255, .3);box-shadow: 23.846px 38.162px 98px 0px rgba(21, 0, 89, 0.25);border-radius:50%;}

.w1400 .banner .item1 .g-img-hand {left: 837px;}
.w1400 .banner .item1 .g-img-banner3_cir1 {top:47px;}
.w1400 .banner .item1 .g-img-banner3_cir2 {}
.w1400 .banner .item1 .g-img-banner3_cir3 {l}
.w1400 .banner .item1 .g-img-banner3_h5 {}
.w1400 .banner .item1 .g-img-banner3_weixin {}

.banner .g-img-out {position: absolute;}
.banner .g-img-out img {width:100%;}


.banner .item1 .g-txt {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-duration: 1s;animation-duration: 1s;}
.banner .item1 .g-img-hand {-webkit-animation-name: fadeInRight;animation-name: fadeInRight;-webkit-animation-duration: 1s;animation-duration: 1s;}
.banner .item1 .g-img-banner3_applet,
.banner .item1 .g-img-banner3_h5,
.banner .item1 .g-img-2,
.banner .item1 .g-img-banner3_weixin,
.banner .item1 .g-img-1,
.banner .item1 .g-img-3{-webkit-animation-name: bounceInDown;animation-name: bounceInDown;-webkit-animation-duration: 1s;animation-duration: 1s;}

.banner .item1 .g-img-banner3_weixin {animation-delay:.5s;-webkit-animation-delay:.5s;}
.banner .item1 .g-img-2 {animation-delay:.2s;-webkit-animation-delay:.2s;}
.banner .item1 .g-img-banner3_h5 {animation-delay:.3s;-webkit-animation-delay:.3s;}
.banner .item1 .g-img-1 {animation-delay:.4s;-webkit-animation-delay:.4s;}
.banner .item1 .g-img-3 {animation-delay:.5s;-webkit-animation-delay:.5s;}

.banner .item1 .g-img-banner3_cir2,
.banner .item1 .g-img-banner3_cir1 {-webkit-animation: swing 3s ease-out infinite alternate;
    -moz-animation: swing 3s ease-out infinite alternate;
    animation: swing 3s ease-out infinite alternate;}

.banner .item1 .g-img-banner3_cir1 {animation-delay:.5s;-webkit-animation-delay:.5s;}


.banner-tab {z-index: 989; position: absolute; bottom: 23px; left: 0;right:0;text-align: center;}
.banner-tab li {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; text-align: center; float: none;display: inline-block; color: #fff; width: 44px; height: 2px; padding: 10px 10px; padding: 1px 3px\9; cursor: pointer; -webkit-background-clip: content-box; -moz-background-clip: content-box; background-clip: content-box; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; transition: all 0.8s ease-out; background: #b8babc; background-color: rgb(51, 51, 51, .3); -webkit-background-clip: content-box; -moz-background-clip: content-box; background-clip: content-box;}
.banner-tab li.on, .banner-tab li:hover {background: #333;background-color: rgb(51, 51, 51); -webkit-background-clip: content-box; -moz-background-clip: content-box; background-clip: content-box;}



/*产品演示*/
.demo {margin-top: 90px;}
.demo .maininfo {margin-bottom: 90px;}
.w1400 .demo .maininfo {margin-bottom: 125px;}

.demo .maininfo2, .w1400 .demo .maininfo2 {margin-bottom: 95px;}

.demo .maininfo h2 {font-size: 40px;color: #121212;text-align: center;padding:20px 0 28px 0;}
.demo .maininfo p {font-size: 20px;color: #212121;line-height: 40px;text-align: center;}
.demo .demo-list {margin-bottom: 115px;}
.w1400 .demo .demo-list {margin-bottom: 150px;}
.demo .demo-list li {position: relative;float: left;width:232px;height:300px;margin-right: 10px;text-align: center;background: url('../images/home_bakgd.png') center no-repeat;cursor: pointer;}
.w1400 .demo .demo-list li {margin-right: 54px;-moz-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);}
/*.w1400 .demo .demo-list li {margin-right: 60px;}*/
.demo .demo-list li.last {margin-right: 0;}
.demo .demo-list li .img {position: absolute;left:0;top:0;right:0;bottom:0;overflow: hidden;}
.demo .demo-list li .img .ewm {display: none;position: relative;width:120px;height:120px;margin:30px auto;background:#fff;-webkit-animation: topFadeIn .25s ease-out; -moz-animation: topFadeIn .25s ease-out; animation: topFadeIn .25s ease-out;z-index: 2;}
.demo .demo-list li:hover .ewm,.demo .demo-list li.on_chose .ewm {display: block;}
.demo .demo-list li .img .ewm img {width:100%;height:100%;}
.demo-list li .img .icon {position: absolute;left:0;top:0;}
.demo .demo-list li.app .img .icon {left:-140px;top: -143px;}
.demo .demo-list li.wx .img .icon {left: -170px;top: -169px;}
.demo .demo-list li.pc .img .icon {left:-160px;top: -134px;}
.demo .demo-list li.wap .img .icon {position: absolute;top:52px;left:97px;}
.demo .demo-list li.h5 .img .icon {left:-170px;top: -173px;}
.demo .demo-list li.applet .img .icon {left: -172px;top: -170px;}
.demo .demo-list li .info {position: absolute;top:170px;left:0;width:100%;}
.demo .demo-list li .info h3 {font-size: 24px;color: #212121;line-height: 40px;padding:5px 0 25px;}
.demo .demo-list li .info p {font-size: 14px;color: #333;line-height: 22px;}

.demo .demo-list li:hover {z-index: 2;}
.demo .demo-list li:hover h3,.demo .demo-list li.on_chose h3, .demo .demo-list li:hover p,.demo .demo-list li.on_chose p, .demo .demo-list li:hover a,.demo .demo-list li.on_chose a {color: #fff;}
.demo .demo-list li .bg {position: absolute;left:-21px;top:-10px;right:-21px;bottom:-32px;opacity: 0;filter:alpha(opacity=0);background-size: 0;}
.demo .demo-list li:hover .bg,.demo .demo-list li.on_chose .bg {opacity: 1; filter:alpha(opacity=100;);background-size: auto;}
.demo .demo-list li.demo1 .bg {background: #fff url('../images/home_bakgd2.png');}
.demo .demo-list li.demo2 .bg {background: #fff url('../images/home_bakgd3.png');}
.demo .demo-list li.demo3 .bg {background: #fff url('../images/home_bakgd4.png');}
.demo .demo-list li.demo4 .bg {background: #fff url('../images/home_bakgd5.png');}
.demo .demo-list li.demo5 .bg {background: #fff url('../images/home_bakgd1.png');}




/*左右版块*/
.fxlist {position: relative;}
.part {position: relative;z-index: 1;background: url('../images/line.png') center bottom no-repeat;padding:40px 0 90px 0;overflow: hidden;}
.part img {opacity: 0;}
.part6 {padding:0 0 40px 0;background: none;}
.part .inner {position: relative;}
.part .lf, .part .rt {position: relative;width:50%;display: inline-block;vertical-align: middle;}
.part img {width:80%;}
.part h3, .part p, .part img {-webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;}

.part img {width:100%;}
.part h3, .part p, .part img {opacity: 0;}
.animation_not .part.curr h3, .animation_not .part.curr p, .animation_not .part.curr img {opacity: 1;}

.part.odd.curr h3, .part.odd.curr p {-ms-animation-name: fadeInLeft;-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-duration: 1s;animation-duration: 1s;}

.part.even.curr h3, .part.even.curr p {-ms-animation-name: fadeInRight;-webkit-animation-name: fadeInRight;animation-name: fadeInRight;-webkit-animation-duration: 1s;animation-duration: 1s;}

.part.curr p {animation-delay:.3s;-webkit-animation-delay:.3s;}

.part h3 {font-size: 40px;line-height: 60px;color: #212121;font-weight: bold;margin-bottom: 35px;white-space: nowrap;}
.part p {font-size: 20px;line-height: 40px;color: #333;}
.part .lf p {padding-right: 15px;}
.part .rt h3, .part .rt p {padding-left: 15px;}

.part .imggroup {position: relative;}
.part .hold {visibility: hidden;}
.part .simg {position: absolute;top:0;}

.part1 .hold {height:560px;}
.part1 .simg1 {left: -16px;top: 41px;width: 101%;}
.part1 .simg2 {left: 97px;top: 93px;}
.part1 .simg3 {left: 122px;top: 211px;}

.w1400 .part1 {height: 610px;}
.w1400 .part1 .simg3 {left: 138px; top: 229px; }

.part1 .simgf1, .part1 .simgf2, .part1 .simgf3, .part1 .simgf4, .part1 .simgf5 {top:484px;width:100px;}
.part1 .simgf1 {left:57px;}
.part1 .simgf2 {left:166px;}
.part1 .simgf3 {left:275px;}
.part1 .simgf4 {left:384px;}
.part1 .simgf5 {left:493px;}

.part2 .hold {height: 600px;}
.part2 .simg1 {width:280px;left:210px;top:40px;}
.part2 .simg1.hold {width:280px;}
.part2 .simg2 {width: 619px;left: 55px;top: 10px;}

.part2 .simg3 {width:130px;left:495px;top:40px;}
.part2 .simg4 {width:130px;left:468px;top:156px;}
.part2 .simg5 {width:130px;left:385px;top:160px;}
.part2 .simg6 {width:200px;left: 408px;top: 274px;}
.part2 .simg7 {width: 144px;left:340px;top: 386px;}

.part3 .hold {height: 600px;}
.part3 .simg1 {left:154px;top: 34px;width:384px;}
.part3 .simg2 {left:60px;top: 57px;width:268px;}

.part4 .hold {height: 700px;}
.part4 .simg2 {left:80px;top: 145px;width:200px;}
.part4 .simg1 {left:200px;top: 205px;width:240px;}
.part4 .simg3 {left:365px;top: 145px;width:200px;}

.part5 {}
.part5 .hold {height: 700px;}
.part5 .simg1 {left: 312px;top: 82px;width:280px;}
.part5 .simg2 {left:180px;top: 71px;width:250px;}
.part5 .simg3 {left:80px;top: 70px;width:220px;}

.part5 .simg11, .part5 .simg22, .part5 .simg33 {opacity: 0;-webkit-animation-name: fadeIn;animation-name: fadeIn;-webkit-animation-duration: 3s;animation-duration: 3s;animation-delay:1s;-webkit-animation-delay:1s;}
.part5 .simg11 {left: 298px;top: 604px;width:280px;}
.part5 .simg22 {left: 164px;top: 542px;width:250px;}
.part5 .simg33 {left: 73px;top: 483px;width:220px;}

.part6 {}
.part6 .hold {height: 700px;}
.part6 .simg1 {left: 140px;top: 0;width:465px;}
.part6 .simg2 {left: 64px;top: 148px;width:80px;}
.part6 .simg3 {left: 140px;top: 132px;width: 280px;}
.part6 .simg4 {left: 570px;top: 322px;width:80px;}
.part6 .simg5 {left: 395px;top: 312px;width: 170px;}

.part6.curr .simg2,
.part6.curr .simg4 {opacity: 1;}


.part1.curr .simg1, .part1.curr .simg2, .part1.curr .simg3 {-webkit-animation-name: fadeIn;animation-name: fadeIn;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part1.curr .simgf1, .part1.curr .simgf2, .part1.curr .simgf3, .part1.curr .simgf4, .part1.curr .simgf5 {-webkit-animation-name: bounceInDown;animation-name: bounceInDown;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part1.curr .simgf2 {animation-delay:.2s;-webkit-animation-delay:.2s;}
.part1.curr .simgf3 {animation-delay:.3s;-webkit-animation-delay:.3s;}
.part1.curr .simgf4 {animation-delay:.4s;-webkit-animation-delay:.4s;}
.part1.curr .simgf5 {animation-delay:.5s;-webkit-animation-delay:.5s;}

.part2.curr .simg1, .part2.curr .simg2 {-webkit-animation-name: fadeIn;animation-name: fadeIn;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part2.curr .simg3, .part2.curr .simg4, .part2.curr .simg5, .part2.curr .simg6, .part2.curr .simg7 {-webkit-animation-name: fadeInDown;animation-name: fadeInDown;-webkit-animation-duration: 1s;animation-duration: 1s;}

.part3.curr .simg2 {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part3.curr .simg1 {-webkit-animation-name: fadeInRight;animation-name: fadeInRight;-webkit-animation-duration: 1s;animation-duration: 1s;}

.part4.curr .simg2 {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part4.curr .simg3 {-webkit-animation-name: fadeInRight;animation-name: fadeInRight;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part4.curr .simg1 {-webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part4.curr .simg1 {animation-delay:.5s;-webkit-animation-delay:.5s;}


.part5.curr .simg1, .part5.curr .simg2, .part5.curr .simg3 {-webkit-animation-name: fadeInLeft;animation-name: fadeInLeft;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part5.curr .simg2 {animation-delay:.2s;-webkit-animation-delay:.2s;}
.part5.curr .simg1 {animation-delay:.4s;-webkit-animation-delay:.4s;}


.part6.curr .simg1 {-webkit-animation-name: fadeIn;animation-name: fadeIn;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part6.curr .simg2 {-webkit-animation-name: user_left;animation-name: user_left;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part6.curr .simg3 {-webkit-animation-name: leftFadeIn;animation-name: leftFadeIn;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part6.curr .simg4 {-webkit-animation-name: user_right;animation-name: user_right;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part6.curr .simg5 {-webkit-animation-name: rightFadeIn;animation-name: rightFadeIn;-webkit-animation-duration: 1s;animation-duration: 1s;}
.part6 .simg3 {animation-delay:.5s;-webkit-animation-delay:.5s;}
.part6 .simg4 {animation-delay:.7s;-webkit-animation-delay:.7s;}
.part6 .simg5 {animation-delay:.9s;-webkit-animation-delay:.9s;}


@-webkit-keyframes user_left {
  0% {left: 221px; top: 151px; width: 46px;opacity: 0;},
  to {left: 64px;top: 148px;width:80px; opacity: 1;}
}
@keyframes user_left {
  0% {left: 221px; top: 151px; width: 46px;opacity: 0;},
  to {left: 64px;top: 148px;width:0px; opacity: 1;}
}
@-webkit-keyframes user_right {
  0% {left: 221px; top: 151px; width: 46px;opacity: 0;},
  to {left: 64px;top: 148px;width:80px; opacity: 1;}
}
@keyframes user_right {
  0% {left: 476px; top: 338px; width: 46px;opacity: 0;},
  to {left: 64px;top: 148px;width:80px; opacity: 1;}
}