@charset "gb2312";
/* CSS Document */
body{font:12px/1.5 "\5b8b\4f53",arial,Helvetica,Tahoma,sans-serif; margin:0 auto; color:#333; overflow:hidden;}
p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,button,textarea,iframe{margin:0; padding:0;}
img{border:0 none;}
ul,li,ol{list-style-type:none;}
i,em,address, caption, cite, code, dfn, th, var {font-style: normal;font-weight: normal}
.msf{font-family:\5FAE\8F6F\96C5\9ED1,\9ED1\4F53;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;}
a,a:hover{outline:none;blur:expression(this.onFocus=this.blur());}
.layout{ clear:both;width:1200px;text-align:left;margin:0 auto;}
.clearfix:after{content:".";display:block;height:0;clear: both;visibility:hidden;}
.clearfix{*zoom:1;}
.fl{ float:left;_display: inline}
.fr{ float:right;_display: inline}
.pr{ position:relative}
.abs{position:absolute;}
.ggtit{display:block;top:50px;left:330px}
.ggtit2{display:block;top:148px;left:380px}
#menu{position:absolute;width:24px;right:10px;top:50%;z-index:999}
#menu a{display:block;background:url(//www.zikao365.com/images/zhuanti/2018app/an.png) no-repeat 0 -25px;width:24px;height:24px;margin:8px 0}
#menu a.active{background-position:0 0}
#section01 .layout,#section02 .layout,#section03 .layout,#section04 .layout,#section05 .layout{z-index:10}
img,a{ display:block;}

#section01 .s01{ left:51px; top:195px; animation-delay:.8s; -webkit-animation-delay:.8s;}
#section01 .s02{ left:48px; top:286px; animation-delay:.8s; -webkit-animation-delay:.8s;}
#section01 .s03{ left:428px; top:153px; animation-delay:.8s; -webkit-animation-delay:.8s;}
#section01 .s04{ left:50px; top:413px; animation-delay:1s;-webkit-animation-delay:1s}
#section01 .s05{ left:182px; top:413px; animation-delay:1s;-webkit-animation-delay:1s}
#section01 .s06{ left:182px; top:479px; animation-delay:1.3s;-webkit-animation-delay:1.3s}
#section01 .s07{ left:-257px; top:0px; animation-delay:2s;-webkit-animation-delay:2s}
#section01 .s08{ left:-46px; top:189px; animation-delay:.8s;-webkit-animation-delay:.8s}

#section06 .s01{ left:233px; top:195px; animation-delay:.4s; -webkit-animation-delay:.4s;}
#section06 .s02{ left:574px; top:288px; animation-delay:.8s; -webkit-animation-delay:.8s;}
#section06 .s03{ left:643px; top:303px; animation-delay:.8s; -webkit-animation-delay:.8s;}
#section06 .s04{ left:582px; top:373px; animation-delay:1.6s; -webkit-animation-delay:1.6s;}
#section06 .s05{ left:621px; top:373px; animation-delay:1.3s; -webkit-animation-delay:1.7s;}
#section06 .s06{ left:658px; top:373px; animation-delay:1.8s; -webkit-animation-delay:1.8s;}
#section06 .s07{ left:698px; top:373px; animation-delay:1.9s; -webkit-animation-delay:1.9s;}
#section06 .s08{ left:760px; top:373px; animation-delay:2s; -webkit-animation-delay:2s;}
#section06 .s09{ left:800px; top:373px; animation-delay:2.1s; -webkit-animation-delay:2.1s;}
#section06 .s10{ left:840px; top:373px; animation-delay:2.2s; -webkit-animation-delay:2.2s;}
#section06 .s11{ left:880px; top:373px; animation-delay:2.3s; -webkit-animation-delay:2.3s;}

#section02 .s01{ left:202px; top:56px;}
#section02 .s02{ left:319px; top:91px;}
#section02 .s03{ left:9px; top:489px; z-index:9; animation-delay:.5s; -webkit-animation-delay:.5s;}
#section02 .s04{ left:166px; top:282px; z-index:9; animation-delay:.8s; -webkit-animation-delay:.8s;}
#section02 .s05{ left:401px; top:212px; z-index:9; animation-delay:1.1s; -webkit-animation-delay:1.1s;}
#section02 .s06{ left:594px; top:384px; z-index:9; animation-delay:1.4s; -webkit-animation-delay:1.4s;}
#section02 .s07{ left:818px; top:489px; z-index:9; animation-delay:1.7s; -webkit-animation-delay:1.7s;}
#section02 .s08{ left:957px; top:294px; z-index:9; animation-delay:2s; -webkit-animation-delay:2s;}
#section02 .s09{ left:-240px; top:98px;}
#section02 .s10{ right:30px; top:130px;}

#section03 .s01{ left:372px; top:73px;}
#section03 .s02{ left:474px; top:108px;}
#section03 .s03{ left:104px; top:510px;}
#section03 .s04{ left:150px; top:250px;}
#section03 .s05{ left:235px; top:190px; animation-delay:.8s; -webkit-animation-delay:.8s;}
#section03 .s06{ left:683px; top:218px; animation-delay:1s; -webkit-animation-delay:1s;}
#section03 .s07{ left:935px; top:330px; animation-delay:1.2s; -webkit-animation-delay:1.2s;}
#section03 .s08{ left:955px; top:600px; animation-delay:1.5s; -webkit-animation-delay:1.5s;}
#section03 .s09{ left:880px; top:324px; animation-delay:1.1s; -webkit-animation-delay:1.1s;}
#section03 .s10{ left:895px; top:476px; animation-delay:1.3s; -webkit-animation-delay:1.3s;}
#section03 .s11{ left:700px; top:486px; animation-delay:1.4s; -webkit-animation-delay:1.4s;}
#section03 .s12{ left:895px; top:601px; animation-delay:1.3s; -webkit-animation-delay:1s;}

#section04 .s01{ left:315px; top:60px;}
#section04 .s02{ left:421px; top:99px;}
#section04 .s03{ width:300px; height:460px; border:1px solid #f1f1f1; border-radius:5px; background:#fff; left:49px; top:210px; animation-delay:1s; -webkit-animation-delay:1s;}
#section04 .s03 img{ display:block; margin-top:60px;}
#section04 .s03 h3{ font-size:30px; line-height:80px; padding:0 0 0 25px;}
#section04 .s03 p{ display:block; width:144px; height:46px; line-height:46px; text-align:center; font-size:18px; color:#868d94; background:url(//www.zikao365.com/images/zhuanti/2018app/step04_07.png) no-repeat; margin:0 0 0 20px;}
#section04 .s03.s04{ left:450px; animation-delay:1.5s; -webkit-animation-delay:1.5s;}
#section04 .s03.s05{ left:850px; animation-delay:2s; -webkit-animation-delay:2s;}
#section04 .s03:hover{ top:200px; height:480px; box-shadow:0 0 15px 5px #edf2fb; -webkit-box-shadow:0 0 15px 5px #edf2fb;}
#section04 .s03:hover img{  margin-top:70px;}
#section04 .s03:hover p{ background:url(//www.zikao365.com/images/zhuanti/2018app/step04_08.png) no-repeat; color:#fff;}

#section05 .s01{ left:56px; top:253px;}
#section05 .s02{ left:174px; top:288px;}
#section05 .s03{ left:174px; top:357px;animation-delay:1s;-webkit-animation-delay:1s}
#section05 .s04{ left:306px; top:357px;animation-delay:1s;-webkit-animation-delay:1s}
#section05 .s05{ left:306px; top:423px;animation-delay:1.3s;-webkit-animation-delay:1.3s}
#section05 .s06{ left:772px; top:122px;animation-delay:1.6s;-webkit-animation-delay:1.6s}



.dialog-mod{ display:none; width:100%; position:fixed; left:0; top:0; z-index:20; _position:absolute; left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||(document.documentElement.clientWidth*0)));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||(document.documentElement.clientHeight*0))))}
.dialog-mod .bg{ width:100%; height:100%; background:#000; opacity:0.4; filter: Alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; z-index:2;}
.cms-dialogs{ width:720px; height:360px; background:#fff; border-radius:10px; overflow:hidden; position:absolute; top:0; left:50%; margin-left:-360px; z-index:999; text-align:center;}
.cms-dialogs .close{ width:30px; height:30px; position:absolute; right:0; top:0;background:url(//www.zikao365.com/images/zhuanti/2018app/qd04.png) no-repeat center; cursor:pointer;}
.cms-dialogs h3{ padding:70px 0 10px 0;}
.cms-dialogs h3 img{ margin:0 auto;}
.cms-dialogs h4{ font-size:20px; color:#555; line-height:46px;}
.cms-dialogs .btn{ padding:20px 0;}
.cms-dialogs .btn .a1{ display:inline-block; width:180px; height:60px; line-height:60px; font-size:18px; color:#4287f9; background:url(//www.zikao365.com/images/zhuanti/2018app/qd03.png) no-repeat; text-decoration:none; margin:0 20px 0 0;}
.cms-dialogs .btn .a2{ display:inline-block; width:320px; height:60px; line-height:60px; font-size:18px; color:#fff; background:url(//www.zikao365.com/images/zhuanti/2018app/qd02.png) no-repeat; text-decoration:none;}
.cms-dialogs p{ line-height:32px; color:#999; font-size:14px;}

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated2{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated3{-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated4{-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated5{-webkit-animation-duration:5s;animation-duration:5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated6{-webkit-animation-duration:6s;animation-duration:6s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeInUpT{from{opacity:0;-webkit-transform:translate3d(-120%,100%,0);transform:translate3d(-120%,100%,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUpT{from{opacity:0;-webkit-transform:translate3d(-120%,100%,0);transform:translate3d(-120%,100%,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInUpT{-webkit-animation-name:fadeInUpT;animation-name:fadeInUpT}
@-webkit-keyframes fadeInDownT{from{opacity:0;-webkit-transform:translate3d(80%,-100%,0);transform:translate3d(80%,-100%,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDownT{from{opacity:0;-webkit-transform:translate3d(80%,-100%,0);transform:translate3d(80%,-100%,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInDownT{-webkit-animation-name:fadeInDownT;animation-name:fadeInDownT}
@-webkit-keyframes map{50%,from,to{opacity:1}
    25%,75%{opacity:0}
}
@keyframes map{50%,from,to{opacity:1}
    25%,75%{opacity:0}
}
.map{-webkit-animation-name:map;animation-name:map}
@-webkit-keyframes map2{50%,from,to{opacity:0}
    25%,75%{opacity:1}
}
@keyframes map2{50%,from,to{opacity:0}
    25%,75%{opacity:1}
}
.map2{-webkit-animation-name:map2;animation-name:map2}
@-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes rollIn{from{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes rollIn{from{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}
.fadeIn2{animation-name:fadeIn2;-webkit-animation-name:fadeIn2;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}
@keyframes fadeIn2{0%{transform:scale(0);opacity:0}
    60%{transform:scale(1.1)}
    80%{transform:scale(.9);opacity:1}
    100%{transform:scale(1);opacity:1}
}
@-webkit-keyframes fadeIn2{0%{-webkit-transform:scale(0);opacity:0}
    60%{-webkit-transform:scale(1.1)}
    80%{-webkit-transform:scale(.9);opacity:1}
    100%{-webkit-transform:scale(1);opacity:1}
}
@-webkit-keyframes fadeIn{from{opacity:0}
    to{opacity:1}
}
@keyframes fadeIn{from{opacity:0}
    to{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes rotateInUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}
    to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateInUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}
    to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}
}
.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}
@-webkit-keyframes rotateInUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}
    to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}
}
@keyframes rotateInUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}
    to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}
}
.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}
@-webkit-keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}
@-webkit-keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}
    to{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}
@-webkit-keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
    60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
}
@keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
    60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
}
.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}
@-webkit-keyframes bounceInDown{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
    0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}
    60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}
    75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
    90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
    to{-webkit-transform:none;transform:none}
}
@keyframes bounceInDown{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
    0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}
    60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}
    75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
    90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
    to{-webkit-transform:none;transform:none}
}
.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}


.rotate {
    -webkit-animation-name: rotate;
    animation-name: rotate;
}
@-webkit-keyframes rotate {
    from {
        transform:rotate(180deg);
    }
    to {
        transform:rotate(0deg);
    }
}
@keyframes rotate {
    from {
        transform:rotate(180deg);
    }
    to {
        transform:rotate(0deg);
    }
}


.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important;
}

@keyframes slideLeft {
    0% {
        transform: translateX(350%);
    }
    50%{
        transform: translateX(-8%);
    }
    65%{
        transform: translateX(4%);
    }
    80%{
        transform: translateX(-4%);
    }
    95%{
        transform: translateX(2%);
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(350%);
    }
    50%{
        -webkit-transform: translateX(-8%);
    }
    65%{
        -webkit-transform: translateX(4%);
    }
    80%{
        -webkit-transform: translateX(-4%);
    }
    95%{
        -webkit-transform: translateX(2%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}


@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}