@charset "utf-8";
/*-----------------------------------------------------header-----------------------------------------------------*/
.header { width: 100%; margin: 0 auto; background: #fff; position: fixed; top: 0; z-index: 999;  border-bottom:1px solid #f1f1f1;}
.header .top { width: 100%; height: 40px; background: #333; }
.header .top-info { width: 1200px; height: 40px; margin: 0 auto; color: #999; }
.header .top-info p { line-height: 40px; font-size: 12px; }
.header .top-info .top-nav { color: #999; height: 40px; }
.header .top-info .top-nav h1 { font-weight: normal; color: #999; line-height: 40px; padding: 0 12px; font-size: 12px; }
.header .top-info .top-nav h1 span { color: #fff; font-size: 16px; font-weight: bold; font-family: Arial; font-style: italic; }
.header .top-info .top-nav .help-us { color: #999; line-height: 40px; padding: 0 12px; font-size: 12px; background: url(../images/top-nav-line.png) left center no-repeat; }
.header .top-info .top-nav .help-us:hover { color: #fff; }
.header .top-info .top-nav .focus-us { color: #999; line-height: 40px; padding: 0 6px 0 12px; font-size: 12px; background: url(../images/top-nav-line.png) left center no-repeat; }
.header .top-info .top-nav a { color: #999; }
.header .top-info .top-nav .ww { padding-top: 6px; }
.header .top-info .top-nav .ww a { margin-left: 10px; }
.header .top-info .top-nav .xk-wechat { font-size: 16px; }
.header .top-info .top-nav .xk-weibo { font-size: 18px; }
.header .top-info .top-nav .wechat:hover, .header .top-info .top-nav .weibo:hover { color: #fff; }
.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:50px;}
.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?v=20200722) no-repeat;}
.iheader { width:100%; height:80px; position:fixed; left:0; top:0; z-index:1000; background:none; border:none;   }
.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 { border:none; background:#fff; box-shadow: 0 0 20px rgba(0,0,0,.05); }
.ihfix .saas_logo { width:312px; height:60px; background:url(../images/xkoa_logo.png?v=20200722) no-repeat!important;}


/*-----------------------------------------------------banner-----------------------------------------------------*/
.banner { width: 100%; height: 800px; 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; top: calc(50% - 25px); z-index: 99; 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:1200px; height:100%; margin: 0 auto; text-align:center; position:relative; z-index:9;}
.tm11 { position:absolute; left:50%; margin-left:-960px; z-index:9; }
.ib1 .i-img1 { margin-top:12%; animation: fadeInUp 0.6s 0.2s ease both;}
.ib1 .i-img2 { margin-top:20%; animation: fadeInUp 0.8s 0.2s ease both;}
.ib1 .i-btn { margin-top:31%; animation: fadeInUp 1s 0.2s ease both;}
.ib1 .i-img3 { margin-top:38%;}
.ib1 .ibsimg img { position:absolute;}
.ib1 .ibsimg1 { width:34.2%; top:58%; left:28%; z-index:99;  animation: autoimg 3s infinite linear alternate; }
.ib1 .ibsimg4 { width:46%; top:58%; left:22%; animation: autoimg 2s infinite linear alternate;}
/*.ib1 .ibsimg3 { top:63%; right:22.5%; z-index:9;  animation: autoimgo 2s infinite linear alternate; }*/
.ib1 .ibsimg2 { width:9%; top:62%; right:22%; z-index:9;  animation: autoimg 2s infinite linear alternate;}
.ib1 .ibsimg5 { width:10%; top:61.5%; right:22%;  animation: autoimg 3s infinite linear alternate;}
.ib1 .ibsimg6 { width:110px; top:71%; left:40.5%; z-index:99; border-radius:6px; animation: autoimgo 2s infinite linear alternate; }
.ftlogo {width:110px!important; margin:20px 0 0;}
.ftlogo img { max-width:100%; border-radius:6px;}
.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%;}
.fontcc {font-family:'CenturyGothic';}
.ib2 , .ib3, .ib4 { text-align:left!important;}
.ib2 .i-img1 { margin-top:22%;  animation: fadeInUp 0.6s 0.2s ease both;}
.ib2 .i-img2 { margin-top:30%;  animation: fadeInUp 0.8s 0.2s ease both;}
.ib2 .i-btn { margin-top:46%;  animation: fadeInUp 1s 0.2s ease both;}
.ib2 .i-img3 { margin-top:14%;  animation: fadeInUp 1.2s 0.2s ease both;}
.ib2 .quickappStage { animation: fadeInUp 1s 0.2s ease both;}
.ib3 .i-img1 { margin-top:22%; animation: fadeInUp 0.6s 0.2s ease both;}
.ib3 .i-img2 { margin-top:30%; animation: fadeInUp 0.8s 0.2s ease both;}
.ib3 .i-btn { margin-top:42%; animation: fadeInUp 1s 0.2s ease both;}
.ib3 .i-img3 { margin-top:20%; 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:16%;  }
.ib3 .i-img5 {animation: mainzx1 120s infinite linear; animation: mainzx1 120s infinite linear; margin-top:17.5%; margin-right:1.5%; }
.ib4 .i-img1 { margin-top:22%; margin-right:280px;  animation: fadeInUp 0.6s 0.2s ease both;}
.ib4 .i-img2 { margin-top:30%;  animation: fadeInUp 0.8s 0.2s ease both;}
.ib4 .i-btn { margin-top:42%; margin-right:100px;  animation: fadeInUp 1s 0.2s ease both;}
.ib4 .i-img3 { margin-top:18%;  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:100px 0; 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-bottom:80px; }
.tit h2 { font-size:24px; color:#ccc; font-weight:normal; text-transform:uppercase; }
.tit h1 { font-size:30px; color:#333; font-weight:bold;}
.i-pro .list ul li { float:left; width:calc(20% - 32px); margin-right:40px; margin-bottom:40px; background:#fff; height:80px; line-height:80px;  box-shadow: 0 0 20px rgba(0,0,0,.05); border-radius:4px; transition: all .3s ease ;}
.i-pro .list ul li:nth-child(5n) {margin-right:0;}
.i-pro .list ul li:hover {transform: translateY(-10px); transition: all .3s ease ; }
.i-pro .list ul li a { display:inline-block; width:100%;  line-height:80px; }
.i-pro .list ul li a img { max-width:50px; margin:15px 0 15px 30px; float:left;}
.i-pro .list ul li a span { font-size:16px;  margin-left:20px; float:left; color:#666; }
.i-pro .btn { text-align:center; margin-top:40px;}
.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,#1e40e1 0,#09aef8 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,#09aef8 0,#1e40e1 100%); transition: all .3s ease ;}

.i-smart { padding:100px 0; 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:80px;}
.tits h2 { font-size:24px; color:rgba(255,255,255,0.3); font-weight:normal; text-transform:uppercase; }
.tits h1 { font-size:30px; color:#fff; font-weight:bold;}
.tits p { font-size:16px; margin-top:30px; color:#fff;}
.i-smart .list ul li { float:left; width:200px; margin-right:50px; text-align:center; cursor:pointer; }
.i-smart .list ul li:last-child {margin-right:0;}
.i-smart .list ul li img { width:100%; height:200px; line-height:200px; border-radius:200px; background:rgba(0,0,0,0.1);  }
.i-smart .list ul li h3 { font-size:16px; color:#fff; margin-top:20px; }
.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:100px 0 60px; width:100%; height:100%; background:url(../images/i-workbg.jpg) center top no-repeat #f5f6fa; background-size:cover; display: table;  }
.i-work .list ul li { float: left; width:calc(33.3% - 27px); margin-right:40px; margin-bottom: 40px;   position: relative; box-shadow: 0 0 20px rgba(0,0,0,.05); transition: all .3s ease ; }
.i-work .list ul 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 ul li:hover {margin-top:-10px; transition: all .3s ease ;}
.i-work .list ul li a { display:inline-block; }
.i-work .list ul li .img { width: 100%; height:240px; overflow: hidden; box-sizing: border-box; position: relative; z-index: 1;}
.i-work .list ul li .img img {max-width:100%;   transition: all 0.6s ease; }
.i-work .list ul li:hover  .img img {  transform: scale(1.08);  }
.i-work .list ul li .txt { background:#fff; color:#666; padding:20px 22px; }
.i-work .list ul li .txt h3 { width:100%; color:#333; font-size: 20px; font-weight: bold; margin-bottom: 12px;  text-align:center;  }
.i-work .list ul li .txt p { color:#999; font-size:15px; line-height:180%; }

.i-why { padding:100px 0; 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;}
.da-thumbs li {float: left; width:400px; height:160px; position: relative; background:#1f2531; overflow:hidden; }
.da-thumbs li  .info {position: absolute;  background:#3954b1; width: 100%;height: 100%;  z-index:99; }
.da-thumbs li  .info p { color:#fff; padding:20px 40px;}
.da-thumbs li .bg { position:relative; z-index:1; opacity:0.3; }
.da-thumbs li .txt { color:#fff;  width:calc(100% - 140px); position: absolute; z-index:9; left:70px; top:54px; }
.da-thumbs li .txt p { font-size:16px; line-height:180%; }
.da-thumbs li .txt em { font-family:Arial;}
.da-thumbs li .txt img { float:left; margin-right:20px;}

/*.i-case { padding-top:80px; width:100%; height:100%; background:url(../images/i-casebg.jpg) center top no-repeat #f5f6fa; background-size:cover; display: table;  }
.i-case .list { height:320px; position:relative; padding-top:20px; }
.i-case .list .txt { width:calc(100% - 80px); height:320px; background:#fff; float:right;  position:relative; box-shadow: 0 0 20px rgba(0,0,0,.05); }
.i-case .list .swiper-container {  width:460px; height:100%; float:right; margin-right:40px; }
.i-case .list .arrow{ width:100px; height:40px; position:absolute; right:40px; bottom:40px; z-index:99; }
.i-case .list .arrow a{ display:inline-block;  width:40px; height:40px; cursor:pointer; background:#999; color:#fff; font-size:14px; line-height:40px; text-align:center; }
.i-case .list  .snext.swiper-button-disabled, .i-case .list .sprev.swiper-button-disabled {background: #3954b1;}
.i-case .list .swiper-container h1 { font-weight:bold; font-size:20px; color:#333; padding:40px 0 20px 0;}
.i-case .list .swiper-container p { font-size:15px;}
.i-case .list .swiper-container .swiper-slide a { display:inline-block; width:160px; height:38px; text-align:center; line-height:38px; font-size:15px; color:#666; border:1px solid #ddd; border-radius:4px; position:absolute; bottom:40px; z-index:1; transition: all .3s ease ;}
.i-case .list .pic ul li { width:520px; height:320px;}
.i-case .list .swiper-container .swiper-slide a:hover { border:1px solid #fff; background: linear-gradient(to right,#09aef8 0,#1e40e1 100%); color:#fff;}
.i-case .list .ipcbg { width:682px; height:414px; background:url(../images/pcbg.png) no-repeat;  position:absolute; z-index:1; top:0;left:0;}
.i-case .list .ipc {width:520px; height:320px;  position:absolute; overflow: hidden; list-style: none; padding: 0; z-index: 9; top:17px; left:82px;}
.i-case .list .imbg { width:168px; height:314px; background:url(../images/mbg.png) no-repeat;  position:absolute; z-index:98; top:90px;left:490px;}
.i-case .list .im {width:120px; height:210px;  position:absolute; overflow: hidden; list-style: none; padding: 0; z-index: 99; top:136px; left:514px;}*/

.i-case { padding:100px 0; width:100%; height:100%; /*background:url(../images/i-casebg.jpg) center top no-repeat #f5f6fa;*/ background:#f5f6fa; background-size:cover; display: table;  }
.i-case .list ul { width:100%;  border-top: 1px solid #eee;  border-left: 1px solid #eee; }
.i-case .list ul li { float:left;  width: 238px; background:#fff; height:140px;   line-height:140px;  text-align:center;  border-right: 1px solid #eee; border-bottom: 1px solid #eee; transition: all .3s ease ;}
.i-case .list ul li:hover { /*transform: translateY(-10px);*/ position:relative; z-index:99; box-shadow: 0 0 40px rgba(0,0,0,.1); transition: all .3s ease ; }
.i-case .list ul li a { display:inline-block; width:100%;  }
.i-case .list ul li a img { max-width:100%; vertical-align:middle; }


.i-news { padding:100px 0; width:100%; height:100%; background:url(../images/i-newsbg.jpg) center top no-repeat #f5f6fa;  background-size:cover; display: table;  }
.news { width:calc(33.3% - 27px);  margin-right:40px;  background:#fff; box-shadow: 0 0 20px rgba(0,0,0,.05);  transition: all .3s ease ; }
.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 { padding-left:10px;line-height:36px; background:url(../images/ico_news.png) left 13px no-repeat; border-bottom:1px dotted #ccc;
text-overflow: ellipsis;overflow: hidden; white-space: nowrap; display: block;}
.news .news-info ul li:last-child { border:none;}
.news .news-info ul li a { color:#666; }
.news .news-info ul li a:hover { color:#3954b1;}

.i-footer { padding-top:80px; width:100%; height:100%; background:url(../images/i-contactbg.jpg) center top no-repeat; background-size:cover; display: table;  }
.i-footer .tits { width:100%;  position:absolute; top:160px;}
/*.saas_foot_bg { position:absolute; bottom:0;}*/


.panel-bg {
    opacity:0.6;
    position: absolute;
    top:0;
    z-index:1;
    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 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 .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%;  }
    .ib1 .ibsimg2 { top:56%;  right:23.2%; }
    .ib1 .ibsimg3 { top:68%; right:26.5%;  }
    .ib1 .ibsimg4 { top:54%;}
    .ib1 .ibsimg5 { top:57.5%; right:24%; }
    .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; }
}

/*.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; }*/