html,body{ margin:0; padding: 0;height:100%}
body{ position:relative;zoom:1}
ul {list-style-type: none;margin: 0; padding: 0;}
.clearfix:after{display:block;content:'';clear:both;visibility:hidden;height:0;}
.clearfix{*zoom:1;}
.pocket_new .jobcn_nav_header{position:fixed;top:0;left:0;width:100%;_position: absolute;_bottom: auto;_top: expression(eval(document.documentElement.scrollTop)); }
.header{ height:70px; width:100%; background:rgba(0,0,0,0.2); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#22000000,endcolorstr=#22000000);  position:fixed; top:36px; left:0; z-index:301;_position: absolute;_bottom: auto;_top: expression(eval(document.documentElement.scrollTop)); _margin-top:36px;}
.jobcn_width{width:990px;margin:0 auto;}
.scene_cnt{position:relative; zoom:1}
.header .logo_menu{position:relative;zoom:1; overflow:hidden;z-index:10;}
.header .logo{float:left;}
.header .logo h1{width:130px;height:50px; margin-top:10px;background:url("images/logo.png") no-repeat center;_background-image:none; _FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png',sizingMethod='scale');text-indent:-100px;overflow:hidden;}
.header .menu{float:right; margin-right:-15px;padding-top: 28px;}
.header .menu ul{float:right;}
.header .menu .nav_item{float:left;}
.header .menu .nav_item a{float:left;padding:0 40px;font-size:14px;line-height: 14px;font-family:"Microsoft yahei",SimSun,Tahoma;color:#FFF; text-align:center; border-right:1px solid #fff;}
.scene_wrap{ width:100%; height:100%; position:relative;zoom:1;}
.scene_wrap h1,.scene_wrap p,.scene_wrap a{ font-family: "Microsoft yahei",SimSun,Tahoma;}
.scene_wrap .container, .scene_wrap .section{width:100%;height:100%;}
.scene_wrap .scene3{ background:#94f7f6;z-index:99;}
.scene_wrap .scene4{ background:#2ff3b1;z-index:98;}
.scene_wrap .scene2{ background:#b5b9ff;z-index:97;}
.scene_wrap .scene1{ background:#92e1ff;z-index:96;}
.scene_wrap .scene_right{ position: absolute; right:50px;top:190px;}
.scene_wrap .scene_right .text_box{ width:600px; height:170px; position:relative; zoom:1;}
.scene_wrap .scene_right .text_box .title{ font-size:40px; font-weight:bold; color:#333; text-align:right; position:absolute; top:0px; right:200px;font-family:"Microsoft yahei",SimSun,Tahoma; opacity: 0;}
.scene_wrap .scene_right .text_box .att{width:240px;font-size:17px;  color:#333; text-align:left; position:absolute; top:125px; right:-300px;font-family:"Microsoft yahei",SimSun,Tahoma; opacity: 0;}
.scene_wrap .scene_left{ position:absolute; left:0px;top:0px;}
.scene_wrap .phone_bg{ width:511px; height:337px; position:absolute; z-index:11;}
.scene_wrap .phone1_bg{top:240px; left:73px; opacity: 0;}
.scene_wrap .phone2_bg{top:165px; left:45px; opacity: 0;}
.scene_wrap .phone3_bg{top:200px; left:100px; opacity: 0;}
.scene_wrap .phone4_bg{top:250px; left:70px; opacity: 0;}
.scene_wrap .phone_icon{ position:absolute; z-index:12;}
.scene_wrap .icon_1{top:305px; left:113px;}
.scene_wrap .icon_2{top:188px; left:290px;}
.scene_wrap .icon_3{top:313px; left:530px;}
.scene_wrap .icon_4{top:415px; left:30px;}
.scene_wrap .icon_5{top:235px; left:110px;}
.scene_wrap .icon_6{top:185px; left:350px;}
.scene_wrap .icon_7{top:275px; left:500px;}
.scene_wrap .icon_8{top:445px; left:595px;}
.scene_wrap .icon_9{top:495px; left:510px;}
.scene_wrap .icon_10{top:200px; left:150px;}
.scene_wrap .icon_11{top:300px; left:60px;}
.scene_wrap .icon_12{top:460px; left:65px;}
.scene_wrap .icon_13{top:160px; left:115px;}
.scene_wrap .icon_14{top:480px; left:95px;}
.scene_wrap .icon_15{top:300px; left:505px;}
.scene_wrap .icon_16{top:480px; left:445px; z-index:14}
.scene_wrap .pic_1{top:299px; left:262px; z-index:16}
.scene_wrap .pic_2{top:299px; left:262px; z-index:15}
.scene_wrap .pic_3{top:299px; left:262px; z-index:14}
.scene_wrap .pic_4{top:299px; left:262px; z-index:16}
.scene_wrap .pic_5{top:299px; left:262px; z-index:15}
.scene_wrap .pic_6{top:299px; left:262px; z-index:14}
.scene_wrap .phone{ position:absolute; z-index:13;}
.scene_wrap .phone1{top:255px; left:235px;}
.scene_wrap .phone2{top:255px; left:257px;}
.scene_wrap .phone3{top:255px; left:257px;}
.scene_wrap .phone4{top:250px; left:240px;}
.down_load{  position:fixed;top:410px; right:465px; z-index:888;_position: absolute;_bottom: auto;_top: expression(eval(document.documentElement.scrollTop)); _margin-top:460px;}
.down_load .qr_code{background:url("images/download.png"); width:239px; height:306px; display:block; cursor:pointer;}
.next_scene{ width:51px; height:29px; display:block; position:fixed; bottom:60px; left:50%; margin-left:-26px; z-index:999;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_margin-bottom:60px}
.arrow.down{ background:url("images/arrow.png");_background-image:none; _FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/arrow.png',sizingMethod='scale');}
.arrow.up{ background:url("images/arrow_up.png");_background-image:none; _FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/arrow_up.png',sizingMethod='scale');}

/*bubble*/
.download_bubble{width:100%;height:100%;   background:rgba(0,0,0,0.7);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#22000000,endcolorstr=#bb000000);position:absolute;top:0; left:0; z-index:999;}
.download_box .code_box .title,.download_box .right_box .att,.download_box .right_box .add,.download_box  .nav a{font-size:14px; font-family:Microsoft Yahei; }
.download_bubble .download_box{width:605px; height:380px;  margin:0 auto; margin-top:15%;  background:#fff; position:relative; zoom:1;overflow:hidden;}
.download_bubble .download_box .closed{ width:20px; height:20px; padding:20px; display:block; position:absolute; top:0px; right:0px;  cursor:pointer; }
.download_bubble .download_box .closed i{ width:20px; height:20px; display:block;background:url("images/download_icon.png") no-repeat 0px -200px;_background:url("images/download_icon6.png") no-repeat 0px -200px;}
.download_bubble .download_box .head{height:60px; line-height:60px; width:100%;font-family:Microsoft Yahei; color:#fff; font-weight:bold; font-size:16px; padding-left:30px;  background:#f26b00; box-sizing:border-box; border-bottom:3px solid #da6000; }
.download_bubble .download_box .download_menu{ height:90px; width:100%; }
.download_bubble .download_box  .nav_box{width:608px; height:25px;padding:28px 0; background:#bbf2fc;}
.download_bubble .download_box  .nav{ width:25%;*width:151px; height:25px; float:left;  border-right:1px solid #b2b2b2;box-sizing: border-box; position:relative;zoom:1; }
.download_bubble .download_menu .nav .angle{ width:16px; height:9px; background:url("images/download_icon.png") no-repeat -25px -200px;_background:url("images/download_icon6.png") no-repeat -25px -200px; position:absolute; bottom:-36px;_bottom:-43px; left:50%; margin-left:-8px;visibility: visible;}
.download_bubble .download_menu .nav.off .angle{visibility: hidden;}
.download_bubble .download_box  .nav i{ width:44px ;height:32px; margin-top:-5px; _margin-top:-1px;margin-left: 30px; float:left; background:url("images/download_icon.png") no-repeat;_background:url("images/download_icon6.png") no-repeat;}
.download_bubble .download_box  .touch i{ background-position:0 0;}
.download_bubble .download_box  .android i{ background-position:0 -50px;}
.download_bubble .download_box  .iphone i{ background-position:0 -100px;}
.download_bubble .download_box  .weixin i{ background-position:0 -150px;}
.download_bubble .download_box  .nav a{color:#333;line-height:24px;  display:inline-block;  text-decoration:none;}
.download_bubble .download_box .container{ padding:20px 0px 0px 60px; height:190px}
.download_bubble .download_box .code_box{ width:147px;height:147px; float:left;}
.download_bubble .download_box .code_box .code_box_img{ width:147px;height:147px;}
.download_bubble .download_box .code_box .code_box_img.touch_code{background: url("images/touch_code.png") no-repeat center center;}
.download_bubble .download_box .code_box .code_box_img.android_code{background: url("images/android_code.png") no-repeat center center;}
.download_bubble .download_box .code_box .code_box_img.iphone_code{background: url("images/iphone_code.png") no-repeat center center;}
.download_bubble .download_box .code_box .code_box_img.weixin_code{background: url("images/weixin_code.png") no-repeat center center;}
.download_bubble .download_box .code_box .title{ line-height:30px; background:#333; text-align:center; color:#fff;}
.download_bubble .download_box .right_box{width:360px; float:right;}
.download_bubble .download_box .right_box .add{ padding-left:15px; margin:10px 0;box-sizing:border-box; }
.download_bubble .download_box .down_icon{ width:22px; height:23px; padding:1px;margin: 7px 10px 0 0; box-sizing:border-box; float:left; background:url("images/download_icon.png") no-repeat 0 -250px;_background:url("images/download_icon6.png") no-repeat 0 -250px;}
.download_bubble .download_box .find_icon{ width:15px; height:18px; padding:1px;margin: 6px 15px 0 0; box-sizing:border-box; float:left; background:url("images/download_icon.png") no-repeat -25px -225px;_background:url("images/download_icon6.png") no-repeat -25px -225px;}
.download_bubble .download_box .touch_box .right_box{ width:200px; padding:40px 70px 0 0;}
.download_bubble .download_box .touch_box .att{ _width:200px;}
.download_bubble .download_box .touch_box .add{width:200px;height:30px; line-height:26px;*line-height:28px; color:#ff6600; border:1px solid #c0c0c0; }
.download_bubble .download_box .weixin_box .right_box{ width:240px; padding:40px 70px 0 0;}
.download_bubble .download_box .weixin_box .att{ _width:200px;}
.download_bubble .download_box .weixin_box .add{width:240px;height:30px; line-height:26px;*line-height:28px; color:#09c75e; font-weight:bold; border:1px solid #09c75e; }
.download_bubble .download_box .android_box .att,.download_bubble .download_box .iphone_box .att {_width:180px;}
.download_bubble .download_box .android_box .right_box,.download_bubble .download_box .iphone_box .right_box {width:170px; padding:50px 100px 0 0;}
.download_bubble .download_box .android_box .add,.download_bubble .download_box .iphone_box .add{width:147px;height:37px; line-height:34px;_line-height:37px; color:#fff; font-size:18px; background:#f26b00; border-radius:2px; display:block}


.scene3.animate .icon_position,
.scene4.animate .icon_position,
.scene1.animate .icon_position{
            animation: icon_position .75s ease-out infinite alternate;
         -o-animation: icon_position .75s ease-out infinite alternate;
       -moz-animation: icon_position .75s ease-out infinite alternate;
    -webkit-animation: icon_position .75s ease-out infinite alternate;
}
@keyframes icon_position{
    from {margin-top:2px;}
    to {margin-top:-18px;}
}
@-webkit-keyframes icon_position{
    from {margin-top:2px;}
    to {margin-top:-18px;}
}
@-moz-keyframes icon_position{
    from {margin-top:2px;}
    to {margin-top:-18px;}
}
@-o-keyframes icon_position{
    from {margin-top:2px;}
    to {margin-top:-18px;}
}

.scene3.animate .icon_position_w{
            animation:icon_position_w 2.4s ease-out infinite alternate;
         -o-animation:icon_position_w 2.4s ease-out infinite alternate;
       -moz-animation:icon_position_w 2.4s ease-out infinite alternate;
    -webkit-animation:icon_position_w 2.4s ease-out infinite alternate;
}
.scene1.animate .icon_position_point{
            animation:icon_position_w .5s ease infinite alternate;
         -o-animation:icon_position_w .5s ease infinite alternate;
       -moz-animation:icon_position_w .5s ease infinite alternate;
    -webkit-animation:icon_position_w .5s ease infinite alternate;
}
@keyframes icon_position_w{
    from {margin-left:0;}
    to {margin-left:28px;}
}
@-webkit-keyframes icon_position_w{
    from {margin-left:0;}
    to {margin-left:28px;}
}
@-moz-keyframes icon_position_w{
    from {margin-left:0;}
    to {margin-left:28px;}
}

@-o-keyframes icon_position_w{
    from {margin-left:0;}
    to {margin-left:28px;}
}

.next_scene{
            animation:arrow_position .75s ease 700ms infinite alternate;
         -o-animation:arrow_position .75s ease 700ms infinite alternate;
       -moz-animation:arrow_position .75s ease 700ms infinite alternate;
    -webkit-animation:arrow_position .75s ease 700ms infinite alternate;
}
@keyframes arrow_position{
    from{bottom:50px;}
    to{bottom:70px;}
}
@-webkit-keyframes arrow_position{
    from{bottom:50px;} to{bottom:70px;}
}
@-moz-keyframes arrow_position{
    from{bottom:50px;} to{bottom:70px;}
}
@-o-keyframes arrow_position{
    from{bottom:50px;} to{bottom:70px;}
}

.scene3.animate .phone_bg,
.scene4.animate .phone_bg,
.scene2.animate .phone_bg,
.scene1.animate .phone_bg{
            animation: bg_fade 2s ease-out .7s forwards;
         -o-animation: bg_fade 2s ease-out .7s forwards;
       -moz-animation: bg_fade 2s ease-out .7s forwards;
    -webkit-animation: bg_fade 2s ease-out .7s forwards;
}
@keyframes bg_fade{
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes bg_fade{
    from {opacity:0;}
    to { opacity:1;}
}
@-moz-keyframes bg_fade{
    from {opacity:0;}
    to { opacity:1;}
}
@-o-keyframes bg_fade{
    from {opacity:0;}
    to { opacity:1;}
}

.scene3.animate .scene_right .text_box .title,
.scene4.animate .scene_right .text_box .title,
.scene2.animate .scene_right .text_box .title,
.scene1.animate .scene_right .text_box .title{
            animation: text_fade_left .8s ease-out forwards;
         -o-animation: text_fade_left .8s ease-out forwards;
       -moz-animation: text_fade_left .8s ease-out forwards;
    -webkit-animation: text_fade_left .8s ease-out forwards;
}
@keyframes text_fade_left{
    from{opacity:0; right:200px;}
    to {opacity:1; right:0;}
}
@-webkit-keyframes text_fade_left{
    from{opacity:0; right:200px;}
    to {opacity:1; right:0;}
}
@-moz-keyframes text_fade_left{
    from{opacity:0; right:200px;}
    to {opacity:1; right:0;}
}
@-o-keyframes text_fade_left{
    from{opacity:0; right:200px;}
    to {opacity:1; right:0;}
}

.scene3.animate .scene_right .text_box .att,
.scene4.animate .scene_right .text_box .att,
.scene2.animate .scene_right .text_box .att,
.scene1.animate .scene_right .text_box .att{
            animation: text_fade_right .8s ease-out forwards;
         -o-animation: text_fade_right .8s ease-out forwards;
       -moz-animation: text_fade_right .8s ease-out forwards;
    -webkit-animation: text_fade_right .8s ease-out forwards;
}
@keyframes text_fade_right{
    from {opacity:0;right:-300px;}
    to {opacity:1;right:0;}
}
@-webkit-keyframes text_fade_right{
    from {opacity:0;  right:-300px;}
    to {opacity:1;  right:0;}
}
@-moz-keyframes text_fade_right{
    from {opacity:0;  right:-300px;}
    to {opacity:1;  right:0;}
}
@-o-keyframes text_fade_right{
    from {opacity:0;  right:-300px;}
    to {opacity:1;  right:0;}
}

.scene2.animate .icon_w10,
.scene1.animate .icon_w10{
            animation: icon_w10 .6s ease infinite alternate;
         -o-animation: icon_w10 .6s ease infinite alternate;
       -moz-animation: icon_w10 .6s ease infinite alternate;
    -webkit-animation: icon_w10 .6s ease infinite alternate;
}
@keyframes icon_w10{from{width:87px;height:87px;} to{width:97px;height:97px;}}
@-webkit-keyframes icon_w10{from{width:87px;height:87px;} to{width:97px;height:97px;}}
@-moz-keyframes icon_w10{from{width:87px;height:87px;} to{width:97px;height:97px;}}
@-o-keyframes icon_w10{from{width:87px;height:87px;} to{width:97px;height:97px;}}

.scene2.animate .icon_w11{
            animation: icon_w11 .75s ease infinite alternate;
         -o-animation: icon_w11 .75s ease infinite alternate;
       -moz-animation: icon_w11 .75s ease infinite alternate;
    -webkit-animation: icon_w11 .75s ease infinite alternate;
}
@keyframes icon_w11{from{width:107px;height:107px;} to{width:95px;height:95px;}}
@-webkit-keyframes icon_w11{from{width:107px;height:107px;} to{width:95px;height:95px;}}
@-moz-keyframes icon_w11{from{width:107px;height:107px;} to{width:95px;height:95px;}}
@-o-keyframes icon_w11{from{width:107px;height:107px;} to{width:95px;height:95px;}}

.scene2.animate .icon_w12{
            animation: icon_w12 .75s ease infinite alternate;
         -o-animation: icon_w12 .75s ease infinite alternate;
       -moz-animation: icon_w12 .75s ease infinite alternate;
    -webkit-animation: icon_w12 .75s ease infinite alternate;
}
@keyframes icon_w12{from{width:100px;height:100px;} to{width:120px;height:120px;}}
@-webkit-keyframes icon_w12{from{width:100px;height:100px;} to{width:120px;height:120px;}}
@-moz-keyframes icon_w12{from{width:100px;height:100px;} to{width:120px;height:120px;}}
@-o-keyframes icon_w12{from{width:100px;height:100px;} to{width:120px;height:120px;}}

.scene4.animate .pic_2{
            animation: pic_position2 .5s ease-out forwards;
         -o-animation: pic_position2 .5s ease-out forwards;
       -moz-animation: pic_position2 .5s ease-out forwards;
    -webkit-animation: pic_position2 .5s ease-out forwards;
}
@keyframes pic_position2{0%{left:262px;} 100%{left:172px; }}
@-webkit-keyframes pic_position2{0%{left:262px;} 100%{left:172px; }}
@-moz-keyframes pic_position2{0%{left:262px;} 100%{ left:172px; }}
@-o-keyframes pic_position2{0%{ left:262px;} 100%{left:172px; }}

.scene4.animate .pic_3{
            animation: pic_position3 .75s ease-out forwards;
         -o-animation: pic_position3 .75s ease-out forwards;
       -moz-animation: pic_position3 .75s ease-out forwards;
    -webkit-animation: pic_position3 .75s ease-out forwards;
}
@keyframes pic_position3{0%{left:262px;} 100%{left:92px; }}
@-webkit-keyframes pic_position3{0%{left:262px;} 100%{left:92px; }}
@-moz-keyframes pic_position3{0%{left:262px;} 100%{ left:92px; }}
@-o-keyframes pic_position3{0%{ left:262px;} 100%{left:92px; }}

.scene2.animate .pic_5{
            animation: pic_position5 .5s ease-out forwards;
         -o-animation: pic_position5 .5s ease-out forwards;
       -moz-animation: pic_position5 .5s ease-out forwards;
    -webkit-animation: pic_position5 .5s ease-out forwards;
}
@keyframes pic_position5{0%{top:299px; left:262px;} 100%{top:259px;left:317px; }}
@-webkit-keyframes pic_position5{0%{top:299px; left:262px;} 100%{top:259px;left:317px; }}
@-moz-keyframes pic_position5{0%{top:299px; left:262px;} 100%{top:259px; left:317px; }}
@-o-keyframes pic_position5{0%{top:299px;  left:262px;} 100%{top:259px;left:317px; }}

.scene2.animate .pic_4{
            animation: pic_position4 .5s ease-out forwards;
         -o-animation: pic_position4 .5s ease-out forwards;
       -moz-animation: pic_position4 .5s ease-out forwards;
    -webkit-animation: pic_position4 .5s ease-out forwards;
}
@keyframes pic_position4{0%{top:299px; left:262px;} 100%{top:219px; left:377px; }}
@-webkit-keyframes pic_position4{0%{top:299px; left:262px;} 100%{top:219px;left:377px; }}
@-moz-keyframes pic_position4{0%{top:299px; left:262px;} 100%{top:219px;  left:377px; }}
@-o-keyframes pic_position4{0%{ top:299px; left:262px;} 100%{top:219px; left:377px; }}