@charset "utf-8";
* {margin: 0;padding: 0;}

body {font-family: "Microsoft YaHei";}
ul,ol,li {list-style: outside none none;}
a {text-decoration: none;}
.clear{ clear:both}
img{ border:none}


.nav.filxed{ position:fixed; top:0; z-index:9999}
.nav2.filxed2{position:fixed; top:40px; z-index:9999}
#banner{ width:100%; min-width:1200px; overflow:hidden; position:relative;}
#banner .pic{ width:100%; height:615px; margin:0 auto; position:relative;}
#banner .pic ul li{ position:absolute; display:none; width:100%;height:615px;}
#banner .pic ul li img{ width:100%; display:block; height:100%;}
#banner .tab{position:absolute; bottom:35px; left:50%; margin-left:-33px;}
#banner .tab ul li{ width:11px; height:11px; background:#f57809; border-radius:50%; border:1px solid #f57809; float:left; margin-right:7px; }
#banner .tab ul .on{ width:17px; height:17px; margin-top:-3px;}
#banner .pic ul .word{ width:85%; position: inherit; left:7.5%;  top:0;}
#banner .pic .word .saas{ font-size:48px; color:#fff; line-height:1; margin-top:162px; margin-left:0; animation:fadeInUp 1 1.2s}
#banner .pic .word .year{ font-size:28px; line-height:1; margin-top:39px; margin-left:0; color:#fff;animation:fadeInUp 1 1.4s}
#banner .pic .word .btn2{ width:181px; height:46px; border-radius:25px; line-height:42px; text-align:center; color:#fff; font-size:22px; background:#f57809; display:block; transition-duration:500ms;margin-top:80px; margin-left:105px; border:2px solid #f57809;animation:zoomIn 1 1.2s}
#banner .pic .word .btn2:hover{ background-color:transparent; color:#f57809}

#banner .pic .two .word .saas{ margin-top:200px;animation:bounceInDown 1 1.2s;margin-left:0;}
#banner .pic .two .word .year{margin-left:0; }
#banner .pic .two .word .btn2{margin-left:105px;}

#banner .pic .thr .word .saas{ text-align:center; margin-top:200px;}
#banner .pic .thr .word .year{ text-align:center}
#banner .pic .thr .word .btn2{margin:71px auto 0}


.sty{ width:100%; min-width:1200px; overflow:hidden;  background:#f2f2f2; padding:70px 0; }
.sty .sty1{ width:1200px; height:667px; margin:0 auto}
.sty .sty1 .img{ width:500px; height:667px; float:left; position:relative}
.sty1 .img .TV{ width:315px; height:259px; background:url(../img/tv.png) no-repeat center; position:absolute; left:70px; top:275px; overflow: hidden}
.sty1 .img .TV li{ float:left;width:12px; height:12px; border-radius:50%;display:block;background:#78cad5; }
.sty1 .img .TV li:first-child{  animation:paopao 5s infinite linear ;position: inherit; top:100px ; left:30px  }
.sty1 .img .TV li:nth-child(2){ position: inherit; top:87px; left: 75px;animation:paopao 3s infinite linear ; }
.sty1 .img .TV li:nth-child(3){position: inherit; top:60px; left: 205px;animation:paopao 8s infinite linear ;}
.sty1 .img .TV li:nth-child(4){position: inherit; top:77px; left:265px;animation:paopao 10s infinite linear ;}
.sty1 .img .TV li:nth-child(5){position: inherit; top:77px; left:115px;animation:paopao 12s infinite linear ;}
@keyframes paopao { from{top:80px; opacity:1;} to{top:-100px; opacity:0.5; -webkit-transform: scale(3); -moz-transform: scale(3); -ms-transform: scale(3);  -o-transform: scale(3);transform: scale(3);}}
@-webkit-keyframes paopao { from{top:80px; opacity:1;-webkit-transform: scale(1)} to{top: -30px; opacity: 0.8; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2);  -o-transform: scale(2);transform: scale(2);}}



.sty1 .img .fire{ width:100px; height:198px; position:absolute; left:187px; top:182px;animation: huojian 8s infinite ease-in}
.sty1 .img .fire p:first-child{ width:100px; height:161px; background:url(../img/huojian.png) no-repeat center;position:inherit; top:0;
  }
.sty1 .img .fire p:last-child{ width:38px; height:60px; background:url(../img/fire.png) no-repeat center;  position:inherit; top:138px; left:31px;
 animation: fire 0.1s infinite linear alternate; background-size: contain;}
.sty1 .img .lunzi{ width:82px; height:104px; position:absolute; left:70px; top:363px; }
.sty1 .img .lunzi p:first-child{ width:65px; height:65px; background:url(../img/lun1.png) no-repeat center;position:inherit; top:0; left:0;
 animation: lunzi 3s infinite linear;}
.sty1 .img .lunzi p:last-child{ width:45px; height:45px; background:url(../img/lun2.png) no-repeat center;position:inherit; bottom:0; right:0;
 animation: lunzi 2.5s infinite linear;}
.sty1 .img .lunzi2{ width:100px; height:120px; position:absolute;top:472px; left:27px; }
.sty1 .img .lunzi2 p:nth-child(1){ width:65px; height:65px; background:url(../img/lun3.png) no-repeat center;position:inherit; top:0; left:0;animation: lunzi 8s infinite linear; }
.sty1 .img .lunzi2 p:nth-child(2){ width:65px; height:65px; background:url(../img/lun4.png) no-repeat center;position:inherit; bottom:5px; right:6px; animation: lunzi1 4.5s infinite linear; }
.sty1 .img .lun3{ position:absolute;top:234px; left:393px; }
.sty1 .img .could{ width:188px; height:241px; background:url(../img/could.png) no-repeat center; position:absolute; top:195px; left:0px;}
.sty1 .img .quan{ width:71px; height:69px; background:url(../img/quan.png) no-repeat center; position:absolute; top:523px; left:54px;}
.sty1 .img .quan1{ width:68px; height:120px; background:url(../img/quan1.png) no-repeat center; position:absolute; top:285px; left:420px;}
.sty1 .img .suo{ width:41px; height:42px; background:url(../img/suo.png) no-repeat center; position:absolute; left:30px; top:340px;}
.sty1 .img .could2{ width:121px; height:105px; background:url(../img/could2.png) no-repeat center; position:absolute; left:330px; top:450px;}
.sty1 .img .time{ width:47px; height:47px; background:url(../img/time1.png) no-repeat center; position:absolute; top:167px; left:415px;}
.sty1 .img .time p{ width:3px; height:11px; background:url(../img/time.png) no-repeat center; position:inherit; top:12px; left:22px;
 animation: time 5s infinite linear}
.sty1 .img .could3{ width:118px; height:73px; background:url(../img/could1.png) no-repeat center; position:absolute; left:339px; top:171px;
 animation:could 60s infinite linear alternate; opacity:0.6; }

.sty1 .sty2{ width:603px; height:665px; float:right; position:relative}
.sty1 .sty2 .title{ width:511px; height:37px; background:url(../img/3.png) no-repeat center; display:block; margin-top:89px; margin-left:0; visibility: hidden }
.sty1 .sty2 .title.one{animation: bounceInDown 1 1.2s; visibility: visible}
.sty1 .sty2 .num{ width:33px; height:307px; position:absolute; top:186px; left:0; background:url(../img/5.png) no-repeat center}
.sty1 .sty2 ul{ margin-top:67px; margin-left:64px;}
.sty1 .sty2 ul li{ font-size:22px; color:#383838; line-height:1; margin-bottom:47px; visibility: hidden}
.sty1 .sty2 ul .li1{ animation: bounceInRight 1 1s; visibility: visible}
.sty1 .sty2 ul .li2{ animation: bounceInRight 1 1.2s; visibility: visible}
.sty1 .sty2 ul .li3{ animation: bounceInRight 1 1.4s; visibility: visible}
.sty1 .sty2 ul .li4{ animation: bounceInRight 1 1.6s; visibility: visible}
.sty1 .sty2 ul .li5{ animation: bounceInRight 1 1.8s; visibility: visible}
.sty1 .sty2 a{ width:188px; height:46px; border:2px solid #e7720b; border-radius:24px; font-size:20px; line-height:46px; text-align:center; display:block; color:#e7720b; transition-duration:500ms}
.sty1 .sty2 a:hover{ background:#e7720b; color:#fff;}


/*轮子动画*/
@keyframes lunzi{ from{ transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg) } to{ transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);}}
@-webkit-keyframes lunzi{ from{ transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg) } to{ transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);}}
@keyframes lunzi1{ from{ transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg) } to{ transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}}
@-webkit-keyframes lunzi1{ from{ transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg) } to{ transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}}

/*时钟动画*/
@keyframes time{from{transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform-origin: bottom;-moz-transform-origin: bottom;-o-transform-origin: bottom;
 -ms-transform-origin: bottom;-webkit-transform-origin: bottom;} to{transform:rotate(0deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform-origin: bottom;-moz-transform-origin: bottom;-o-transform-origin: bottom;  -ms-transform-origin: bottom;-webkit-transform-origin: bottom;}}
@-webkit-keyframes time{from{transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform-origin: bottom;-moz-transform-origin: bottom;-o-transform-origin: bottom;
 -ms-transform-origin: bottom;-webkit-transform-origin: bottom;} to{transform:rotate(0deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform-origin: bottom;-moz-transform-origin: bottom;-o-transform-origin: bottom;  -ms-transform-origin: bottom;-webkit-transform-origin: bottom;}}
/*云动画*/
@keyframes could { from{left:330px;} to{left: 100px}}
@-webkit-keyframes could { from{left:330px;} to{left: 100px}}
/*火箭动画*/
@keyframes huojian { from{top:182px;} to{top: -200px; opacity: 0.3; transform:scale(0.8);-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-o-transform:scale(0.8);}}
@-webkit-keyframes huojian { from{top:182px;} to{top: -200px; opacity: 0.3; transform:scale(0.8);-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-ms-transform:scale(0.8);-o-transform:scale(0.8);}}
@keyframes fire{ from{ opacity: 0.8;height:60px } to{opacity: 1;height: 45px}}
@-webkit-keyframes fire{ from{ opacity: 0.8;height:60px } to{opacity: 1;height: 45px}}


.main{ width:100%; min-width:1200px; overflow:hidden;  background:#fff; padding:70px 0 50px 0;}
.main .main1{ width:1200px; margin:0 auto; position:relative; overflow:hidden;height:768px;}
.main1 .word{ font-size:18px; color:#333; line-height:30px; margin-top:160px; width:445px; margin-left:225px; visibility:hidden}
.main1 .word.animat{animation:fadeInUp 1 1.2s; visibility:visible; }
.main1 .word1.animat{animation:fadeInUp 1 1.2s; visibility:visible; }
.main1 .word1{ font-size:18px; color:#333; line-height:30px; margin-top:228px; width:313px; margin-left:62px; visibility:hidden}
.main1 .guanli{ width:720px; height:167px; display:block; position:absolute; background:url(../img/main1.png) no-repeat center;
 top:147px; left:15px;}
.main1 .poin{ width:30px; height:30px; border-radius:50%; margin-top:42px; margin-left:135px; position:relative;} 
.main1 .poin li{ width:1px; height:1px; border-radius:50%;  position:absolute; border:1px solid #fff; left:0; top:0; right:0; bottom:0; margin:auto}
.main1 .poin .pon{ width:5px; height:5px; background:#fff;animation: point1 1s infinite linear alternate}
.main1 .poin .pon1{animation: point 2s infinite linear}
.main1 .poin .pon2{animation: point 3s infinite linear }
.main1 .poin .pon3{animation: point 5s infinite linear }
/*波次动画*/
@keyframes point { from{width:1px; height:1px;} to{width:25px; height:25px; opacity:0.8; border:1px solid #fff}}
@-webkit-keyframes point { from{width:1px; height:1px;} to{width:25px; height:25px; opacity:0.8;border:1px solid #fff}}
@keyframes point1 { from{ opacity:1} to{ opacity:0.5}}
@-webkit-keyframes point1 { from{ opacity:1} to{ opacity:0.5}}

 
.main1 .guize{ width:509px; height:170px; display:block; position:absolute; background:url(../img/main2.png) no-repeat center;
 top:400px; left:403px;}
.main1 .guize .lun1{ width:27px; height:26px; background:url(../img/main4.png) no-repeat center; position:inherit; top:24px; left:50px; display:block;
 animation: lunzi1 3s infinite linear;}
.main1 .guize .lun2{ width:59px; height:58px; background:url(../img/main3.png) no-repeat center; position:inherit; top:40px; left:59px;display:block; animation: lunzi 8s infinite linear;}
.main1 .btn.bt{ margin:114px auto 0}
.main1 .img{ width:395px; height:315px; background:url(../img/main5.png) no-repeat center; position:absolute; right:86px; top:73px; visibility:hidden}
.main1 .img.animat{ animation:fadeInDown 1 1s; visibility:visible}



.suc{ width:100%; min-width:1300px; overflow:hidden;height:654px; background:#f2f2f2}
.suc .suc1{ width:1200px; margin:0 auto; overflow:hidden}
.suc1 h2{ font-size:25px; color:#f05b01; line-height:1; margin-top:63px; text-align:center;}
.suc1 .eng{ font-size:16px; color:#626262; text-align:center; line-height:12px; margin-top:22px; margin-bottom:76px;}
.suc1 .h2{animation: bounceInDown 1 1.2s; visibility: visible}
.suc1 .eng1{animation: zoomIn 1 1s; visibility: visible}
.suc1 li{ width:275px; height:250px;display:block; float:left; margin-right:33px;}
.suc1 .last{ float:right; margin-right:0;}
.suc1 li a{ width:275px; height:250px; display:block;position:relative; overflow:hidden}
.suc1 li a img{ width:100%; height:100%; background-size:contain; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; transition-duration:500ms}
.suc1 li a .more{ width:275px; height:250px; position:absolute;background:url(../img/bg.png) repeat center; top:250px; overflow:hidden; transition: all 0.5s}
.suc1 li a:hover .more{ top:0;}
.suc1 li a:hover img{ transform:scale(1.2)}
.suc1 li .more .more1{ width:239px; height:218px; border:1px solid #fff; margin:15px auto 0}
.suc1 li .more .more1 h3{ font-size:18px; color:#fff; line-height:1; margin-top:55px; text-align:center}
.suc1 li .more .more1 .cen{ font-size:14px; color:#fff; line-height:24px; padding:0 22px; margin-top:10px; display:none }
.btn{ width:112px; height:28px; text-align: center; line-height:30px; font-size:12px; color:#f37608; background:#fff; display:block; margin:70px auto 0; border:1px solid #fff;}
.btn:hover{ background:transparent; border:1px solid #f37608}
.btn1{ width:306px; height:38px; margin:90px auto; }
.btn1 a{width:134px; height:33px; line-height:35px; font-size:14px; border:2px solid #e7720b; display:block;color:#e7720b; text-align:center; border-radius:19px;
 transition-duration:500ms}
.btn1 a:hover{ background:#e7720b; color:#fff}
.btn1 .btn2{ float:left;}
.btn1 .btn3{ float:right;}
.btn1.btn10{ margin:50px auto}


.new{ width:100%; min-width:1300px; overflow:hidden;height:475px; background:#fff}
.new .new1{ width:1200px; margin:0 auto; overflow:hidden}
.new1 h2{ font-size:25px; color:#f05b01; line-height:1; margin-top:59px; text-align:center;}
.new1 .eng{ font-size:16px; color:#626262; text-align:center; line-height:12px; margin-top:22px; margin-bottom:58px;}
.new1 h2.animat{animation:bounceInDown 1 1.2s; visibility:visible}
.new1 .eng.animat{animation:bounceInDown 1 1.5s; visibility:visible}
.new1 .new2{ width:566px; height:155px; float:left;}
.new1 .new2 img{ width:208px; height:149px; padding:2px; display:block;border:1px solid #ccc; float:left}
.new1 .new2 .new3{ width:333px; height:155px; float:right;}
.new2 .new3 h3{ font-size:18px; color:#222; line-height:1; font-weight:normal; margin-top:2px;}
.new2 .new3 h3 a{ white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.new2 .new3 .title{ font-size:14px; color:#999; line-height:1; margin-top:18px; margin-bottom:14px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:290px;}
.new2 .new3 hr{ width:323px; border-top:1px dashed #999; margin-bottom:17px;}
.new2 .new3 li a{display:block; height:14px; width:323px; margin-bottom:12px; position:relative;}
.new2 .new3 li a:hover .data{ color:#f57809}
.new2 .new3 li a:hover p{ color:#f57809}
.new2 .new3 li a:hover strong{ color:#f57809}
.new2 .new3 li a strong{ color:#067ec3; line-height:14px; width:2px; height:2px; display:block;  position:absolute; left:0; top:-10px;}
.new2 .new3 li p{ font-size:14px; color:#4c4c4c; line-height:14px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:184px; margin-left:8px; float:left; padding-left:10px;}
.new2 .new3 li .data{ font-size:12px; line-height:14px; float:right; color:#999;}
.new1 .new2.one{ float:right}
.new .new1 .more{width:134px; height:33px; line-height:35px; font-size:14px; border:2px solid #e7720b; display:block;color:#e7720b; text-align:center; border-radius:19px;transition-duration:500ms; margin:60px auto 0}
.new .new1 .more:hover{background:#e7720b; color:#fff}


.daohan{ position:fixed; right:0; top:40%; width:60px;}
.daohan .ipho{ width:60px; height:60px; background:#fff url(../img/daohang.jpg) 0 0 no-repeat; display:block; color:#f86603; line-height:60px; text-indent:65px; border:1px solid #f57809; transition-duration:500ms; overflow:hidden; float:right; box-sizing:border-box; cursor:pointer; margin-top:5px; font-style:normal;-o-transition-duration:500ms;-moz-transition-duration:500ms;-webkit-transition-duration:500ms; }
.daohan .ipho:hover{ width:185px;}
.daohan .ipho1 a{ width:60px; height:60px; background:#fff url(../img/daohang.jpg) 0 -65px no-repeat; display:block; float:right; margin-top:5px; border: 1px solid #f57809;box-sizing:border-box;transition-duration:500ms; font-size:16px; text-indent:70px; line-height:60px; color:#f86603;
 font-style: normal; letter-spacing:2px; overflow:hidden;-o-transition-duration:500ms;-moz-transition-duration:500ms;-webkit-transition-duration:500ms;  }
.daohan .ipho1 a:hover{ width:160px; }
.daohan .saoma{width:60px; height:60px; background:url(../img/daohang.jpg) 0 -130px no-repeat; display:block; float:right; margin-top:5px;}
.daohan .QQ a{width:60px; height:60px; background:#fff url(../img/daohang.jpg) 0 -195px no-repeat; display:block; float:right; margin-top:5px;text-indent:70px;color:#f86603;transition-duration:500ms; font-size:16px;border: 1px solid #f57809;box-sizing:border-box; overflow:hidden;letter-spacing:2px; line-height:60px;font-style: normal;-o-transition-duration:500ms;-moz-transition-duration:500ms;-webkit-transition-duration:500ms; }
.daohan .QQ a:hover{width:160px;}
.daohan .top a{width:60px; height:60px; background:url(../img/daohang.jpg) 0 -261px no-repeat; display:block; float:right; margin-top:5px;}
.daohan .weixin{ width:160px; height:160px; background:#fff url(../img/weixin.jpg) no-repeat center; position:fixed; top:40%; right:65px; margin-top:90px; display:none}