@charset "utf-8";
/*-----------------------------------------------------header-----------------------------------------------------*/
.wechat { position: relative; z-index: 1; }
.wechat .m-tip { position:absolute; top: 40px; left: -60px; z-index: 999; opacity: 0; -webkit-opacity:0; transition: all .3s ease 0s; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0);  visibility: hidden;}
.wechat:hover .m-tip { -webkit-opacity:1;opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);   visibility: visible;}
.wechat .m-tip .direction-top { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent transparent #000 transparent; position: absolute; top: -20px; left: 60px; -webkit-opacity:0.8; opacity: 0.8; }
.wechat .m-tip .m-tip-panel i { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #000; z-index: -1;  -webkit-opacity:0.8; opacity: 0.8;}
.wechat .m-tip .m-tip-panel { padding: 10px; width: 120px; }
.wechat .m-tip .m-tip-panel img { width: 120px; margin: 0 auto;}
.wechat .m-tip .m-tip-panel p { line-height: 120%; text-align: center; color:#fff;}
.header .bot {width:1200px; height:80px; margin:0 auto; background:#fff;}
.header .bot .logo { margin-top:20px;}
.nav { padding-right:0;}
.nav ul li { float:left; height:80px; line-height:80px; padding:0 25px; position:relative; z-index:1; margin:0 5px; }
.nav ul li a {color:#666; font-size:16px;}
.nav ul li:hover a, .nav ul li:hover a.on,  .nav ul li a.on { color:#ff7300;}
.nav ul li a span { position:absolute; z-index:9; top:31px; right:0; font-size:20px; width:20px; display:inline-block; color:#bbb; text-align:center; -webkit-animation: rotateend .5s ease forwards; animation: rotateend .5s ease forwards;}
.nav ul li:hover a span { color:#bbb;   -webkit-animation: rotate .5s ease forwards;  animation: rotate .5s ease forwards; }
.nav ul li ul li {margin:0;}
.nav .m-tip {z-index: 10001; position: relative; top:4px; display:none;}
.nav .m-tip .direction-top { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent transparent #000 transparent; position: absolute; top: -20px; left: 45px; -webkit-opacity:0.8; opacity: 0.8; }
.nav .m-tip .m-tip-panel { min-width: 110px;  position: absolute; top: -15px;right: -30px; padding: 0; }
.nav .m-tip .m-tip-panel i {  position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #000; z-index: -1;  -webkit-opacity:0.8; opacity: 0.8 }
.nav .m-tip .m-tip-panel ul { }
.nav .m-tip .m-tip-panel ul li  { line-height: 40px; padding: 0; height: 40px;text-align: center; float: none;}
.nav .m-tip .m-tip-panel ul li a {  width:100%; line-height:40px; font-size: 14px; color: #fff; display:inline-block;}
.nav .m-tip .m-tip-panel ul li a:hover { background:#000;}
.user-msg { line-height: 80px;}
.user-msg .login {border-right: 1px solid #ccc;padding-right: 12px;}
.user-msg a { font-size: 18px;color: #666;padding-left: 16px;}
.user-msg a:hover {color:#ff7300;}
.ico-user-img { float: none; background:url(../images/ico_user_img.png) no-repeat; width: 32px;height: 32px; vertical-align: middle;     display: inline-block; zoom: 1; margin-right: 22px;}

.saas_logo img {display:none;}
.iheader .saas_logo { width:312px; height:60px; background:url(../images/xkoa_logo_white.png) no-repeat;}
.iheader { width:100%; height:80px; position:fixed; left:0; top:0; z-index:1000; background:none!important; border:none!important;   }
.iheader .saas_nav li a.title {color:#fff;}
.iheader .saas_nav li:hover a.title{ color:#fff;}
.iheader .saas_login a.link{ color:#fff;  }
.iheader .saas_login a.link:first-child {border-right: 1px solid rgba(255,255,255,0.3);}
.iheader .saas_login a.link:hover{ color:#fff;}
.iheader .saas_loginmenu a.online {color:#fff;}
.iheader .saas_loginmenu:hover a.online{ color:#fff;}
.ihfix .saas_logo { width:312px; height:60px; background:url(../images/xkoa_logo.png) no-repeat!important;}
.ihfix { border:none; box-shadow: 0 0 20px rgba(0,0,0,.05);}

/*-----------------------------------------------------banner-----------------------------------------------------*/
.banner { width: 100%; height: 100%; overflow: hidden;   }
.layer { display:block; z-index:99;}
.animation { position: relative; width: 100%; height: 100%; margin: 0 auto; overflow: hidden; }
.animation ul { width: 100%;  height: 100%;  }
.animation ul li { width: 100%; height: 100%;  display: none; }
.banner-btn { position: absolute; top: calc(50% - 25px);  width: 100%; height:50px; z-index: 99; }
.banner-btn a { position: absolute; width: 50px; height:50px; text-align:center; background:rgba(0,0,0,0.3); line-height:50px; border-radius:50px; display: block; color:#fff;  }
.banner-btn a i {font-size:18px;}
.banner-btn a.prev { left:70px; }
.banner-btn a.next { right:70px; }
.animation ol { z-index: 2; width: 100%; text-align: center; position: absolute; bottom: 40px; z-index: 99;}
.animation ol li { width: 10px; height: 10px; margin: 0 5px; display: inline-block; text-align: center;  border-radius: 10px; cursor: pointer; background:rgba(0,0,0,0.3);  }
.animation ol li.active { background: #fff; }
.banner .wrap {width:100%; height:100%; margin: 0 auto; text-align:center; position:relative; z-index:9;}
.ib1 .i-img1 { margin-top:30%; animation: fadeInUp 0.6s 0.2s ease both; max-width:100%;}
.ib1 .i-img2 { margin-top:5%; animation: fadeInUp 0.8s 0.2s ease both; max-width:100%;}
.ib1 .i-btn { margin-top:5%; animation: fadeInUp 1s 0.2s ease both; display:block; height:400px;}
.ib1 .i-img3 { margin-top:44%;}
.ib1 .ibsimg img { position:absolute;}
/*.ib1 .ibsimg1 {max-width: 52%;bottom: 16%;left: 12%;z-index: 99;animation: autoimg 3s infinite linear alternate;}
.ib1 .ibsimg2 {max-width: 16%;bottom: 12%;right: 12%;z-index: 9;animation: autoimg 2s infinite linear alternate;}
.ib1 .ibsimg3 {max-width: 10%;bottom: 58%;right: 15%;z-index: 9;animation: autoimg 2s infinite linear alternate;}
.ib1 .ibsimg4 {max-width: 68%;bottom: 0%;left: 5%;animation: autoimg 2s infinite linear alternate;}
.ib1 .ibsimg5 {max-width: 18%;bottom: 9%;right: 10%;animation: autoimg 3s infinite linear alternate;}*/

.ib1 .ibsimg1 {max-width: 52%; top:56%; left:20%; z-index:99;  animation: autoimg 3s infinite linear alternate; }
.ib1 .ibsimg2 {max-width: 16%; top:58%; right:10%; z-index:9;  animation: autoimg 2s infinite linear alternate;}
.ib1 .ibsimg3 {max-width: 10%; top:63%; right:13%; z-index:9;  animation: autoimgo 2s infinite linear alternate; }
.ib1 .ibsimg4 {max-width: 68%; top:56%; left:10%; animation: autoimg 2s infinite linear alternate;}
.ib1 .ibsimg5 {max-width: 18%; top:59.5%; right:10%;  animation: autoimg 3s infinite linear alternate;}
	
.banner .i-btn a {display:inline-block; width:120px; height:40px; line-height:40px; box-sizing:border-box; text-align:center; color:#fff; border:1px solid #fff; border-radius:4px; margin-right:10px; font-size:14px;}
.banner .i-btn a:hover { background:#fff; color:#3954b1; }
.banner .i-bgmask { position:absolute; z-index:1; top:0; width:100%; height:100%; background: linear-gradient(to right,#1e40e1 0,#09aef8 100%); opacity:0.5;}
.banner .i-bg { position:absolute; z-index:1; top:0; width:100%; height:100%; overflow:hidden;}
.fontcc {font-family:'CenturyGothic';}
.ib2 , .ib3, .ib4 { text-align:left!important;}
.ib2 .i-img1 { margin-top:26%;  animation: fadeInUp 0.6s 0.2s ease both;}
.ib2 .i-img2 { margin-top:2%;  animation: fadeInUp 0.8s 0.2s ease both;}
.ib2 .i-btn { margin-top:6%;  animation: fadeInUp 1s 0.2s ease both;}
.ib2 .i-img3 { margin-top:-35%; float:right;  animation: fadeInUp 1.2s 0.2s ease both;}
.ib2 .quickappStage { animation: fadeInUp 1s 0.2s ease both;}
.ib3 .i-img1 { margin-top:20%; animation: fadeInUp 0.6s 0.2s ease both;}
.ib3 .i-img2 { margin-top:4%; animation: fadeInUp 0.8s 0.2s ease both;}
.ib3 .i-btn { margin-top:6%; animation: fadeInUp 1s 0.2s ease both;}
.ib3 .i-img3 { margin-top:26%; margin-right:8%; animation: flipInY 1.2s 0.2s ease both; }
.ib3 .i-img4 {animation: mainzx2 60s infinite linear; animation: mainzx2 60s infinite linear; margin-top:-30%; float:right;}
.ib3 .i-img5 {animation: mainzx1 120s infinite linear; animation: mainzx1 120s infinite linear; margin-top:-30%; float:right; }
.ib4 .i-img1 { margin-top:30%; margin-right:280px;  animation: fadeInUp 0.6s 0.2s ease both;}
.ib4 .i-img2 { margin-top:38%;  animation: fadeInUp 0.8s 0.2s ease both;}
.ib4 .i-btn { margin-top:50%; margin-right:100px;  animation: fadeInUp 1s 0.2s ease both;}
.ib4 .i-img3 { margin-top:24%;  animation: fadeInUp 1.2s 0.2s ease both;}

@-webkit-keyframes mainzx1 { from {	-webkit-transform: rotate(0deg)}to {	-webkit-transform: rotate(359deg)}}
@keyframes mainzx1 { from {	transform: rotate(0deg)}to {	transform: rotate(359deg)}}
@-webkit-keyframes mainzx2 {from {-webkit-transform: rotate(0deg)}to {	-webkit-transform: rotate(-359deg)}}
@keyframes mainzx2 {from {	transform: rotate(0deg)}to {	transform: rotate(-359deg)}}

.i-pro { padding-top:15%; width:100%; height:100%; background:url(../images/i-probg.jpg) center top no-repeat; background-size:cover; display: table;  }
.content {/*display: table-cell;*/vertical-align: middle;}
.tit { text-align:center; margin:0 auto;margin-bottom:30px;}
.tit h2 { font-size:13px; color:#ccc; font-weight:normal; text-transform:uppercase;}
.tit h1 { font-size:20px; color:#333; font-weight:bold; margin-top:0;}
.i-pro .list .li {/* float:left; width:calc(20% - 32px); margin-right:40px;*/ margin-bottom:10px; /*background:#fff; height:80px; line-height:80px;  box-shadow: 0 0 20px rgba(0,0,0,.05); border-radius:4px; */transition: all .3s ease ; text-align:center;text-align: center;overflow: hidden;position: relative;}
.i-pro .list .li:nth-child(5n) {margin-right:0;}
.i-pro .list .li:hover {transform: translateY(-10px); transition: all .3s ease ;}
.i-pro .list .li:before{content: "";width: 0;height:70px;background: #f00;padding: 14px 18px;position: absolute;top: 0;left: 50%;opacity: 0;transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715) 0s; border-radius:5px;}
.i-pro .list .li:hover:before{width: 100%;left: 0;opacity: 0.8;}
.i-pro .list .li a { display:inline-block; width:100%;/*line-height:80px;*/}
.i-pro .list .li a img { max-width:100%; display:block; margin:0 auto; /*margin:15px 0 15px 10px; float:left;*/}
.i-pro .list .li a span { font-size:12px;  /*margin-left:10px; float:left; */color:#666; display:block; margin-top:5px;}
.i-pro .list .li:hover a{ color:#e5242c;}
.i-pro .list .li .box-content{width: 100%;padding: 14px 18px;color: #fff;position: absolute;top:0;left: 0;}
.i-pro .list .li .title{font-size: 25px;font-weight: 600;line-height: 30px;text-transform: uppercase;margin: 0;opacity: 0;transition: all 0.5s ease 0s;}
.i-pro .list .li .post{font-size: 15px;text-transform: capitalize;opacity: 0;transition: all 0.5s ease 0s; color:#fff; margin-top:0;}
.i-pro .list .li:hover .title,.i-pro .list .li:hover .post{opacity: 1;transition-delay: 0.7s;}
.i-pro .btn { text-align:center; margin-top:20px;}
.i-pro .btn a {display:inline-block; width:280px; height:50px; line-height:50px; text-align:center; font-size:16px; color:#fff; background: linear-gradient(to right,#e62129 0,#f84d54 100%); border-radius:4px; transition: all .3s ease ;}
.i-pro .btn a:hover { transform: translateY(-10px); box-shadow: 0 0 20px rgba(0,0,0,.1); background: linear-gradient(to right,#f84d54 0,#e62129 100%); transition: all .3s ease ; text-decoration:none;}

.i-smart { padding-top:100px; width:100%; height:100%; background:url(../images/i-smartbg.jpg) center top no-repeat; background-size:cover; display: table;  }
.tits { text-align:center; margin-bottom:20px;}
.tits h2 { font-size:16px; color:rgba(255,255,255,0.3); font-weight:normal; text-transform:uppercase; }
.tits h1 { font-size:20px; color:#fff; font-weight:bold;}
.tits p { font-size:12px; margin-top:10px; color:#fff;}
.i-smart .list ul li { float:left; width:30.3%; margin-right:10px; text-align:center; cursor:pointer; }
.i-smart .list ul li:last-child {margin-right:0;}
.i-smart .list ul li img { width:60%; height:100%; line-height:200px; border-radius:50%; background:rgba(255,255,255,0.2);  }
.i-smart .list ul li h3 { font-size:14px; color:#fff; margin-top:10px; }
.i-smart .list ul li:hover img {animation: spinAround 2s linear infinite;}
@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

.i-work { padding-top:80px; width:100%; height:100%; background:url(../images/i-workbg.jpg) center top no-repeat #f5f6fa; background-size:cover; display: table;  }
.i-work .list .li {margin-bottom: 40px;   position: relative; box-shadow: 0 0 20px rgba(0,0,0,.05); transition: all .3s ease ; background:#fff;}
.i-work .list .li:nth-child(3n) { margin-right: 0;}
/*.i-work .list ul li:before { content: ''; position: absolute;bottom: 0;left:0; width:0; height: 2px; background-color: #d2af69; transition: all .3s ease;}
.i-work .list ul li:hover:before  { width: 100%;} */
 .i-work .list .li:hover {margin-top:-10px; transition: all .3s ease ;}
.i-work .list .li a { display:inline-block; }
.i-work .list .li .img { width: 100%; height:240px; overflow: hidden; box-sizing: border-box; position: relative; z-index: 1;}
.i-work .list .li .img img {max-width:100%;   transition: all 0.6s ease; }
.i-work .list .li:hover  .img img {  transform: scale(1.08);  }
.i-work .list .li .txt { background:#fff; color:#666; padding:0; }
.i-work .list .li .txt h3 { width:100%; color:#333; font-size: 20px; font-weight: bold; margin-bottom: 12px;  text-align:center;  padding-bottom:20px; margin-top:0;}
.i-work .list .li .txt p { color:#999; font-size:15px; line-height:180%; display:none; }

.i-work .list .l{ margin:0; background:#fff;padding:20px 0; text-align:center;box-shadow: 2px 5px 10px #ddd;}
.i-work .list .l dd h3{font-size:14px;color: #393939;margin-bottom:15px; font-weight:bold;}
.i-work .list .l dd p{font-size: 12px;color: #828282;padding: 0 10px;}
.i-work .list .l dd ul.lists{margin-top: 20px;}
.i-work .list .l dd ul.lists li{margin-bottom: 5px;font-size: 13px;color: #9D9D9D;font-weight: 600;}
.i-work .list .l dl{ margin-bottom:0 !important;}
.i-work .list .l .icon04 dt{width: 62px;height: 62px;background: url("../images/aggregation-icon04.png") no-repeat;background-size: cover;margin: 0 auto 15px;}
.i-work .list .l .icon05 dt{width: 62px;height: 62px;background: url("../images/aggregation-icon05.png") no-repeat;background-size: cover;margin: 0 auto 15px;}
.i-work .list .l .icon06 dt{width: 62px;height: 62px;background: url("../images/aggregation-icon06.png") no-repeat;background-size: cover; margin: 0 auto 15px;}
.i-work .list .l .icon07 dt{width: 53px;height: 61px;background: url("../images/aggregation-icon07.png") no-repeat;background-size: cover;margin: 0 auto 15px;}
.i-work .list .l:hover{background-color: #e81727;}
.i-work .list .l:hover dd h3,
.i-work .list .l:hover dd p,
.i-work .list .l:hover dd li{color: #ffffff;}
.i-work .list .l .icon07:hover dt{background: url("../images/aggregation-icon007.png") no-repeat;}
.i-work .list .l .icon06:hover dt{background: url("../images/aggregation-icon006.png") no-repeat;}
.i-work .list .l .icon05:hover dt{ background: url("../images/aggregation-icon005.png") no-repeat;}
.i-work .list .l .icon04:hover dt{background: url("../images/aggregation-icon004.png") no-repeat;}
.i-work .list .l .more{ margin:0 auto; margin-top:40px; width:150px; height:42px; line-height:42px; font-size:18px; font-weight:300; color:#fff; background:#e81727; display:block; border-radius:20px; text-align:center;}
.i-work .list .l:hover dd .more{color:#e81727; background:#ffffff;}
.i-work .btn1 { text-align:center; margin-top:40px;}
.i-work .btn1 a {display:inline-block; width:280px; height:50px; line-height:50px; text-align:center; font-size:16px; color:#fff; background: linear-gradient(to right,#e62129 0,#f84d54 100%); border-radius:4px; transition: all .3s ease ;}
.i-work .btn1 a:hover { transform: translateY(-10px); box-shadow: 0 0 20px rgba(0,0,0,.1); background: linear-gradient(to right,#f84d54 0,#e62129 100%); transition: all .3s ease ; text-decoration:none;}

.i-why { padding-top:100px; width:100%; height:100%; background:url(../images/i-whybg.jpg) center top no-repeat; background-size:cover; display: table;  }
.i-why .list ul { text-align:center; margin-bottom:60px;}
.i-why .list ul li { display:inline-block; float:left; width:25%; color:#fff; }
.i-why .list ul li h3 {font-size:36px;}
.i-why .list ul li h3 i { font-style:normal;}
.i-why .list ul li p {font-size:15px;}

.i-case { padding-top:100px; width:100%; height:100%; background:url(../images/i-casebg.jpg) center top no-repeat #f5f6fa; background-size:cover;/* display: table;*/  }
.owl-carousel{ margin-top:10px;}
.post-slide{margin: 0;}	
.post-slide .item img{display: block;height: 100%;width: 100%;-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);-webkit-transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s; -o-transition:all 0.3s ease-out 0s; transition:all 0.3s ease-out 0s;}
.post-slide .item .l{padding: 0 5px;}
.post-slide .item dd{ width:100%; margin:0 auto; text-align:left; float:left;}
.post-slide .item dd .imgs{width:100%; overflow:hidden; position:relative;}
.post-slide .item dd .txts{font-weight:normal; color:#fff; font-size:16px; line-height:36px; height:100%; overflow:hidden;transition:all 0.4s; position:absolute; bottom:-100%; left:0; width:100%;background:rgba(0, 0, 0, 0.75); text-align:center;}
.post-slide .item dd .txts h1{ color:#fff; font-weight:normal; font-size:22px; height:50px; line-height:50px; overflow:hidden; margin-top:18%;}
.post-slide .item dd .txts a{ color:#fff; display:inline-block; width:62px; margin-left:12px; margin-right:12px; font-size:14px;}
.post-slide .item dd .txts a i{ width:48px; height:48px; display:block; margin:0 auto;transition:all 0.4s;}
.post-slide .item dd .txts a:hover i{ margin-top:-6%; margin-bottom:6%;transform:rotate(360deg);}
.post-slide .item dd .txts a i.bgs1{ background:url(../images/i_pic1.png) center top no-repeat;}
.post-slide .item dd .txts a i.bgs2{ background:url(../images/i_pic2.png) center top no-repeat;}
.post-slide .item dd .txts a i.bgs3{ background:url(../images/i_pic3.png) center top no-repeat;}
.post-slide .item dd h2{ color:#000; font-size:18px; line-height:50px; text-align:center; height:50px; text-align:center;overflow:hidden; white-space:nowrap;text-overflow:ellipsis; width:100%; position:relative; background-color:#fff; z-index:2; font-weight:normal;transition:all 0.4s; margin-top:0;}
.post-slide .item dd h2 i{transition:all 0.4s;position:absolute; width:100%; left:0; top:0; height:0; background:#e62129; z-index:-1;}
.post-slide .item dd:nth-child(1) h2 i{background:#e62129;}
.post-slide .item dd:nth-child(2) h2 i{background:#df0011;}
.post-slide .item dd:nth-child(3) h2 i{background:#ff6600;}
.post-slide .item dd:nth-child(4) h2 i{background:#f2ad0a;}
.post-slide .item dd:nth-child(5) h2 i{background:#b3c902;}
.post-slide .item dd:nth-child(6) h2 i{background:#858585;}
.post-slide .item dd:nth-child(7) h2 i{background:#858585;}
.post-slide .item dd:nth-child(8) h2 i{background:#b3c902;}
.post-slide .item dd:hover img{-webkit-transform:scale(1.1, 1.1); -moz-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); -ms-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1);}
.post-slide .item dd:hover h2{ color:#fff;}
.post-slide .item dd:hover h2 i{ height:100%;}
.post-slide .item dd:hover .txts{ bottom:0;}

.items1{}
.item{margin-right:0;}
.item .item-tit{ height:140px; color:#fff; text-align:center;box-shadow: 0 0px 2px rgba(0,0,0,.2);-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;border-radius: 6px 60px 0px 0px;}
.item .item-tit h3{ font-size:24px; padding-top:50px; display:block;text-align: left;padding-left: 30px; margin-top:0;}
.item .item-tit p{margin-top:10px; text-align:left; padding-left:30px;}
.item .item-tit p a{ font-size:14px;color:#fff;}
.item .item-content{ border:1px solid #e5e5e5; padding:10px; overflow:hidden; -webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s; min-height:200px; position:relative; background:#fff;}
.item .item-content ul li{line-height:30px; background:url(../images/ico3.png) left center no-repeat; padding-left:35px; text-align:left; position:relative;}
.item .item-content ul li a { color:#666; font-size:14px; display:block; max-width:100%; height:40px; overflow:hidden;}
.item .item-content ul li a:hover { color:#ec1424;}
.item .item-content ul li span{ position:absolute; top:0; right:0;}

.item3{ margin-right:0;}
.item1 .item-tit{ background: url(../images/n1.png) no-repeat right #45a4f1;}
.item2 .item-tit{ background: url(../images/n2.png) no-repeat right #45b7bc;}
.item3 .item-tit{ background: url(../images/n3.png) no-repeat right#7bb74c;}

.item .item-content .li1{ border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
.item .item-content .li2{ border-bottom:1px solid #e5e5e5;}
.item .item-content .li3{ border-right:1px solid #e5e5e5;}

.item1 .item-content .li1 i{ background-position:0 0;}
.item1 .item-content .li2 i{ background-position:-63px 0;}
.item1 .item-content .li3 i{ background-position:-127px 0;}
.item1 .item-content .li4 i{ background-position:-189px 0;}

.item2 .item-content .li1 i{ background-position:0 -61px;}
.item2 .item-content .li2 i{ background-position:-61px -61px;}
.item2 .item-content .li3 i{ background-position:-125px -58px;}
.item2 .item-content .li4 i{ background-position:-187px -59px;}

.item3 .item-content .li1 i{ background-position:0 -124px;}
.item3 .item-content .li2 i{ background-position:-59px -122px;}
.item3 .item-content .li3 i{ background-position:-126px -127px;}
.item3 .item-content .li4 i{ background-position:-190px -129px;}

.item:hover .item-tit{ border-radius:5px 5px 0 0;}
.item:hover .item-content{box-shadow: 0 1px 20px rgba(0,0,0,.2);}

.i-news { padding-top:100px; width:100%; height:100%; background:url(../images/i-newsbg.jpg) center top no-repeat #f5f6fa; background-size:cover; display: table;  }
.news {background:#fff; box-shadow: 0 0 20px rgba(0,0,0,.05);  transition: all .3s ease ; text-align:left;}
.news:hover {margin-top:-10px;transition: all .3s ease ;}
.news1 .news-t {width:100%; height:120px; background:url(../images/inewst1.png) no-repeat;  }
.news2 .news-t {width:100%; height:120px; background:url(../images/inewst2.png) no-repeat;  }
.news3 .news-t {width:100%; height:120px; background:url(../images/inewst3.png) no-repeat;  }
.news .news-t h1 {font-size:18px; font-weight:normal; color:#fff; padding:35px 0 0 30px;}
.news .news-t a { font-size:12px; color:#fff; padding:0 0 0 30px; /*line-height:60px;*/}
.news .news-info { padding:20px 30px; }
.news .news-info ul li { line-height:36px; background:url(../images/ico_news.png) left center no-repeat; border-bottom:1px dotted #ccc;}
.news .news-info ul li:last-child { border:none;}
.news .news-info ul li a { color:#666; padding-left:16px;}
.news .news-info ul li a:hover { color:#3954b1;}
.news4{ display:none;}

.i-footer { padding-top:100px; width:100%; height:100%; background:url(../images/i-contactbg.jpg) center top no-repeat; background-size:cover; /*display: table; */ }
.i-footer .tits { text-align:center;}
.i-footer .ft1{background: #333;padding: 40px 0; width:100%;}
.i-footer .ft1 .left{border-right: 1px solid #424242;}
.i-footer .ft1 .right{color: #ccc; display:none;}
.i-footer .ft1 .right h4{ font-size:30px; color:#ccc; padding-bottom:8px; font-style:oblique; text-align:left;}
.i-footer .ft1 .right p{ line-height:26px; color:#999;text-align:left;}
.i-footer .ft1 .right p a{color:#999;}
/*友链*/
.saas_under_bg{ background:#262626;}
.saas_under{ /*width:1200px;*/ overflow:hidden; margin:0 auto;}
.saas_flink{ line-height:28px; overflow:hidden; padding:20px 0; border-bottom:1px solid #333; display:none;}
.saas_flink span{ color:#999; font-size:14px; margin-right:10px;color:#666;}
.saas_flink a{ margin-right:15px;color:#666;}
/*内容*/
.saas_copy{ overflow:hidden;}
.saas_copy a {color:#666;}
.saas_copy p{ line-height:25px; text-align:center; color:#666; padding:25px 0 20px 0;}
.saas_copy ul.img{ overflow:hidden; padding:0 0 25px 0; text-align:center;}
.saas_copy ul.img li{ height:49px; width:auto; padding:0 8px; display:inline-block; overflow:hidden; width:112px;}
.saas_copy ul.img li img{ width:100%;border-radius:3px;}

/*.panel-bg {opacity:0.6;position: absolute;top:0;z-index:2;width: 100%;height: 100%;background: url(../image/panel-bg.jpg) center top repeat-x; background: linear-gradient(309deg,#6224f4,#d066c2,#f96f90,#5c23eb,#ff6600,#ed7074);background-size: 1000% 1000%; -webkit-animation: AnimationName 27s ease infinite;animation: AnimationName 27s ease infinite;
}*/
.panel-bg {opacity:0.6;position: absolute;top:0;z-index:2;width: 100%;height: 100%;background: url(../image/panel-bg.jpg) center top repeat-x; background: linear-gradient(309deg,#d90000,#ff6600,#f2ad0a,#d90000,#ff6600,#d90000);background-size: 1000% 1000%; -webkit-animation: AnimationName 27s ease infinite;animation: AnimationName 27s ease infinite;
}
/*.panel-bg {
    opacity:0.6;
    position: absolute;
    top:0;
    z-index:2;
    width: 100%;
    height: 100%;
    background: url(../image/panel-bg.jpg) center top repeat-x;
    background: linear-gradient(309deg,#00f2ff,#275ffe,#5fc0d0,#5d76ff,#275ffe,#00f2ff);
    background-size: 1000% 1000%;
    -webkit-animation: AnimationName 27s ease infinite;
    animation: AnimationName 27s ease infinite;
}*/
@-webkit-keyframes AnimationName{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@-moz-keyframes AnimationName{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@-o-keyframes AnimationName{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@-ms-keyframes AnimationName{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes AnimationName{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

 @media(min-width:768px) {
	.i-smart .list ul li {width:18%; margin-right:16px;  }
	.i-smart{ padding-top:12%;}
	.tits {margin-bottom:80px;}
	.tits h2 { font-size:24px;}
	.tits h1 { font-size:45px;}
	.tits p { font-size:35px; margin-top:10px;}
	.tit {margin-bottom:40px; }
	.tit h2 { font-size:24px;}
	.tit h1 { font-size:30px;}
	.ib1 .i-img1 { margin-top:14% !important; animation: fadeInUp 0.6s 0.2s ease both; max-width:100%;}
	.ib1 .i-img2 { margin-top:1% !important; animation: fadeInUp 0.8s 0.2s ease both; max-width:100%;}
	.ib1 .i-btn { margin-top:3% !important; animation: fadeInUp 1s 0.2s ease both; display:block; height:500px;}
	.ib1 .i-img3 { margin-top:44%;}
	.ib1 .ibsimg img { position:absolute;}
	.ib1 .ibsimg1 {max-width:100%; top:56%; left:24.8%; z-index:99;  animation: autoimg 3s infinite linear alternate; }
	.ib1 .ibsimg2 {max-width:100%; top:58%; right:19.2%; z-index:9;  animation: autoimg 2s infinite linear alternate;}
	.ib1 .ibsimg3 {max-width:100%; top:65%; right:22.5%; z-index:9;  animation: autoimgo 2s infinite linear alternate; }
	.ib1 .ibsimg4 {max-width:100%; top:56%; left:18%; animation: autoimg 2s infinite linear alternate;}
	.ib1 .ibsimg5 {max-width:100%; top:59.5%; right:20%;  animation: autoimg 3s infinite linear alternate;}
	.banner .i-btn a {display:inline-block; width:180px; height:50px; line-height:50px; box-sizing:border-box; text-align:center; color:#fff; border:1px solid #fff; border-radius:4px; margin-right:40px; font-size:16px;}
	.banner .i-btn a:hover { background:#fff; color:#3954b1; }
	.banner .i-bgmask { position:absolute; z-index:1; top:0; width:100%; height:100%; background: linear-gradient(to right,#1e40e1 0,#09aef8 100%); opacity:0.5;}
	.banner .i-bg { position:absolute; z-index:1; top:0; width:100%; height:100%; overflow:hidden;}
	.fontcc {font-family:'CenturyGothic';}
	.ib2 , .ib3, .ib4 { text-align:left!important;}
	.ib2 .i-img1 { margin-top:26%;  animation: fadeInUp 0.6s 0.2s ease both;}
	.ib2 .i-img2 { margin-top:2%;  animation: fadeInUp 0.8s 0.2s ease both;}
	.ib2 .i-btn { margin-top:6%;  animation: fadeInUp 1s 0.2s ease both;}
	.ib2 .i-img3 { margin-top:-35%; float:right;  animation: fadeInUp 1.2s 0.2s ease both;}
	.ib2 .quickappStage { animation: fadeInUp 1s 0.2s ease both;}
	.ib3 .i-img1 { margin-top:20%; animation: fadeInUp 0.6s 0.2s ease both;}
	.ib3 .i-img2 { margin-top:4%; animation: fadeInUp 0.8s 0.2s ease both;}
	.ib3 .i-btn { margin-top:6%; animation: fadeInUp 1s 0.2s ease both;}
	.ib3 .i-img3 { margin-top:26%; margin-right:8%; animation: flipInY 1.2s 0.2s ease both; }
	.ib3 .i-img4 {animation: mainzx2 60s infinite linear; animation: mainzx2 60s infinite linear; margin-top:-30%; float:right;}
	.ib3 .i-img5 {animation: mainzx1 120s infinite linear; animation: mainzx1 120s infinite linear; margin-top:-30%; float:right; }
	.ib4 .i-img1 { margin-top:30%; margin-right:280px;  animation: fadeInUp 0.6s 0.2s ease both;}
	.ib4 .i-img2 { margin-top:38%;  animation: fadeInUp 0.8s 0.2s ease both;}
	.ib4 .i-btn { margin-top:50%; margin-right:100px;  animation: fadeInUp 1s 0.2s ease both;}
	.ib4 .i-img3 { margin-top:24%;  animation: fadeInUp 1.2s 0.2s ease both;}
	.i-pro { padding-top:10%;}
	.i-pro .list .li {margin-bottom:20px;}
	.i-pro .list .li a span { font-size:16px;  margin-top:10px;}
	.i-work {padding-top:200px;}
	.i-work .list .li .txt {padding:20px 30px; }
	.i-work .list .li .txt h3 { margin-bottom: 12px; padding-bottom:0;}
	.i-work .list .li .txt p { display:block; }
	.i-work .list .l{ margin:15px 20px;padding:80px 0;}
	.i-work .list .l dd h3{font-size: 20px;margin-bottom:15px;}
	.i-work .list .l dd p{font-size: 14px;padding: 0 40px;}
	.i-work .list .l dd ul.lists{margin-top: 20px;}
	.i-work .list .l dd ul.lists li{font-size: 13px;}
	.i-work .list .l .icon04 dt{width: 62px;height: 62px;background: url("../images/aggregation-icon04.png") no-repeat;background-size: cover;margin: 0 auto 15px;}
	.i-work .list .l .icon05 dt{width: 60px;height: 68px;background: url("../images/aggregation-icon05.png") no-repeat;background-size: cover;margin: 0 auto 15px;}
	.i-work .list .l .icon06 dt{width: 62px;height: 62px;background: url("../images/aggregation-icon06.png") no-repeat;background-size: cover; margin: 0 auto 15px;}
	.i-work .list .l .icon07 dt{width: 53px;height: 61px;background: url("../images/aggregation-icon07.png") no-repeat;background-size: cover;margin: 0 auto 15px;}
	.i-work .list .l .more{ margin:0 auto; margin-top:40px; width:150px; height:42px; line-height:42px; font-size:18px; font-weight:300; color:#fff; background:#e81727; display:block; border-radius:20px; text-align:center;}
	.i-work .list .l:hover dd .more{color:#e81727; background:#ffffff;}
	.i-work .btn1 { text-align:center; margin-top:40px;}
	.i-work .btn1 a {display:inline-block; width:280px; height:50px; line-height:50px; text-align:center; font-size:16px; color:#fff; background: linear-gradient(to right,#e62129 0,#f84d54 100%); border-radius:4px; transition: all .3s ease ;}
	.i-work .btn1 a:hover { transform: translateY(-10px); box-shadow: 0 0 20px rgba(0,0,0,.1); background: linear-gradient(to right,#f84d54 0,#e62129 100%); transition: all .3s ease ; text-decoration:none;}
	.i-why { padding-top:10%;}
	.i-case { padding-top:10%;}
	.i-case .list .li {height:140px;line-height:140px;}
	.i-news {padding-top:10%}
	.i-footer{padding-top:10%} 
	.i-footer .ft1 .right{ display:block;}
	.saas_flink{ display:block;}
	.item{margin-right:30px;}
	.item .item-content{ padding:30px; min-height:300px;}
	.item .item-content ul li{line-height:40px;}
	.news4{ display:block;}
	.owl-carousel{ margin-top:40px;}
	.i-pro .btn {margin-top:40px;}
	.i-smart .list ul li h3 { font-size:16px;margin-top:20px; }
}
@media screen and (min-width:640px) and (max-width:1440px){
    .tit, .tits { margin-bottom:60px;}
    .tits p {display:none;}
    .i-pro .btn { margin-top:20px;}
    .ib1 .i-img1 { margin-top:10%;}
    .ib1 .i-img2 { margin-top:18%;}
    .ib1 .i-btn { margin-top:28%;}
    .ib1 .i-img3 { margin-top:36%;}
    .ib1 .i-img3 { margin-top:36%;}
    .ib1 .ibsimg1 { top:54%;  }
    .ib1 .ibsimg2 { top:56%; }
    .ib1 .ibsimg3 { top:63%;  }
    .ib1 .ibsimg4 { top:54%; }
    .ib1 .ibsimg5 { top:57.5%; }
    .ib2 .i-img1 { margin-top:22%; }
    .ib2 .i-img2 { margin-top:30%;  }
    .ib2 .i-btn { margin-top:46%; }
    .ib2 .i-img3 { margin-top:14%; }
    .quickappStage .container { top:-2%!important;}
    .ib3 .i-img1 { margin-top:24%;}
    .ib3 .i-img2 { margin-top:32%; }
    .ib3 .i-btn { margin-top:44%; }
    .ib3 .i-img4 { margin-top:16%;  }
    .ib3 .i-img5 { margin-top:17.5%; margin-right:1.5%; }
    .main_line {top: 430px!important;}
    .ib3 .i-img3 { margin-top:20%; }
    .ib4 .i-img1 { margin-top:24%; }
    .ib4 .i-img2 { margin-top:32%; }
    .ib4 .i-btn { margin-top:44%;}
    .ib4 .i-img3 { margin-top:18%; }
    .i-footer .tits { top:110px; }
}

@media screen and (min-width:640px) and (max-width:1366px){
    .ib1 img { transform: scale(0.8)!important;}
    .tit, .tits { margin-bottom:40px;}
    .tit h2, .tits h2 { display:none;}
    .tits p {display:none;}
	.i-pro{padding-top:30%;}
	.i-smart{padding-top:30%;}
	.i-case{padding-top:30%;}
	.i-work{padding-top:30%;}
	.i-news {padding-top:30%;}
	.i-footer{padding-top:20%;}
	.news4{ display:none}
    .i-pro .btn { margin-top:20px;}
    .ib1 .i-img1 { margin-top:8%;}
    .ib1 .i-img2 { margin-top:16%;}
    .ib1 .i-btn { margin-top:26%;}
    .ib1 .i-img3 { margin-top:36%;}
    .ib1 .i-img3 { margin-top:36%;}
    .ib1 .ibsimg1 { top:54%;left: 12%;}
    .ib1 .ibsimg2 { top:56%;  right:12%; }
    .ib1 .ibsimg3 { top:66%; right:17%;  }
    .ib1 .ibsimg4 { top:54%; left:0;}
    .ib1 .ibsimg5 { top:57.5%; right:10%; }
    .ib2 .i-img1 { margin-top:16%; }
    .ib2 .i-img2 { margin-top:24%;  }
    .ib2 .i-btn { margin-top:40%; }
    .ib2 .i-img3 { margin-top:10%; width:580px; }
    .quickappStage .container { top:-6%!important;}
    .ib3 .i-img1 { margin-top:18%;}
    .ib3 .i-img2 { margin-top:26%; }
    .ib3 .i-btn { margin-top:38%; }
    .ib3 .i-img4 { margin-top:10%;  }
    .ib3 .i-img5 { margin-top:11.5%; margin-right:1.5%; }
    .main_line {top: 430px!important;}
    .ib3 .i-img3 { margin-top:14%; }
    .ib4 .i-img1 { margin-top:18%; }
    .ib4 .i-img2 { margin-top:26%; }
    .ib4 .i-btn { margin-top:38%;}
    .ib4 .i-img3 { margin-top:14%; }
    .i-why .list ul {margin-bottom:40px;}
    .i-footer .tits { top:100px; }
	.i-footer .ft1 .right{ display:block;}
}

.tit, .tits, .i-pro .list, .i-pro .btn ,.i-smart .list ul li, .active .i-work .list ul li, .active .i-why .list ul li , .active .i-why .box , .i-case .list, .active .i-news .news, .i-footer .saas_foot_bg
 {animation: fadeOut 1s 0 ease both; transition: all .3s ease ;}
.active .tit {  animation: fadeInUp 1s 0.4s ease both;  }
.active .tits {  animation: fadeInUp 1s 0.4s ease both;  }
.active .i-pro .list {animation: fadeInUp 1s 0.4s ease both; }
.active .i-pro .btn  {animation: fadeInUp 1s 0.8s ease both; }
.active .i-smart .list ul li:first-child {animation: fadeInUp 1s 0.4s ease both; }
.active .i-smart .list ul li:nth-child(2) {animation: fadeInUp 1s 0.6s ease both; }
.active .i-smart .list ul li:nth-child(3) {animation: fadeInUp 1s 0.8s ease both; }
.active .i-smart .list ul li:nth-child(4) {animation: fadeInUp 1s 1s ease both; }
.active .i-smart .list ul li:last-child {animation: fadeInUp 1s 1.2s ease both; }
.active .i-work .list ul li:first-child {animation: fadeInUp 1s 0.4s ease both; }
.active .i-work .list ul li:nth-child(2) {animation: fadeInUp 1s 0.6s ease both; }
.active .i-work .list ul li:last-child {animation: fadeInUp 1s 0.8s ease both; }
.active .i-why .list ul li:first-child {animation: fadeInUp 1s 0.4s ease both; }
.active .i-why .list ul li:nth-child(2) {animation: fadeInUp 1s 0.6s ease both; }
.active .i-why .list ul li:nth-child(3) {animation: fadeInUp 1s 0.8s ease both; }
.active .i-why .list ul li:last-child {animation: fadeInUp 1s 1s ease both; }
.active .i-why .box { animation: fadeInUp 1s 1.2s ease both;}
.active .i-case .list {animation: fadeInUp 1s 0.4s ease both; }
.active .i-news .news:first-child {animation: fadeInUp 1s 0.4s ease both; }
.active .i-news .news:nth-child(2) {animation: fadeInUp 1s 0.6s ease both; }
.active .i-news .news:last-child {animation: fadeInUp 1s 0.8s ease both; }
.active .i-footer .saas_foot_bg {animation: fadeInUp 1s 0.4s ease both; }