@charset "utf-8";
/* CSS Document */
html, body, .pages_wrap { position: relative; height: 100%; width: 100%; min-width: 1008px; overflow-y: hidden; }
.page_c { width: 1008px; position:relative; margin:0 auto; }
.page_top { height: 28px; background: #343639;background: rgba(0,0,0,.7); position: relative; z-index: 100; }
.t_login { float: right; font-size: 12px; line-height: 16px; padding: 6px 20px; color: #fff; }
.t_user_center, .t_app_manage, .t_cms { background: url(/apppark/css/images/top_public_ico.gif) no-repeat; }
.t_user_center { background-position: 0 -1px; }
.t_app_manage { background-position: 0 -15px; }
.t_cms { background-position: 0 -30px; }
.t_user_info { float: right; font-size: 12px; line-height: 16px; color: #fff; }
.t_user_info .ico { height: 15px; width: 20px; }
.t_user_info a { display: inline-block; zoom: 1; *display:inline;
height: 15px; line-height: 16px; border-left: 1px solid #666; padding: 6px 10px; vertical-align: middle; overflow: hidden }
.t_user_info a:first-child { border: none; }
/*导航*/
.page_header { height: 68px; width: 100%; background: #fff; background: rgba(255,255,255,.9); border-top: 2px solid #1dc6f1; position: absolute; top: 28px; left: 0; z-index: 100; box-shadow: 0 5px 10px rgba(0,0,0,.1); }
.m_logo { float: left; padding-top: 8px; padding-left: 30px; position: relative; }
.m_logo a { position: relative; display: block; width: 208px; height: 56px; background: url(images/m_logo.png) no-repeat; text-indent: -999em; }
.m_logo span { position: absolute; top: 6px; right: -12px; display: block; width: 50px; height: 18px; background: url(images/m_version.png) no-repeat; text-indent: -999em; }
.m_nav { position: absolute; right: 0; top: 0; }
.m_nav .nav_i { float: left; position: relative; z-index: 10; padding: 10px 20px; }
.m_nav .nav_i.new:after{content:""; display:block; position:absolute;right:-6px;top:20px;height:11px;width:26px;background:url(images/new.gif) no-repeat;}
.m_nav .has_sub { z-index: 100; }
.m_nav .nav_btn { display: block; padding: 12px 0; border-bottom: 2px solid transparent; line-height: 24px; font: 16px/24px '微软雅黑', 'YaHei', '黑体', 'Hei', Tahoma, Helvetica, arial, sans-serif; color: #434343; position: relative; }
.m_nav .nav_btn:hover, .s_nav .s_btn:hover { text-decoration: none; color: #ffa022; }
.m_nav .active .nav_btn { text-decoration: none; color: #ffa022; border-bottom: 2px solid #ffa022; }
.m_nav .active .nav_btn:after { content: '.'; position: absolute; left: 50%; bottom: -1px; margin-left: -4px; display: block; height: 0; width: 0; line-height: 0; overflow: hidden; border-width: 4px; border-style: dashed dashed solid; border-color: transparent transparent #ffa022; }
.has_sub .nav_btn .arb { display: inline-block; zoom: 1; *display:inline;
margin-left: 5px; border-color: #333 transparent transparent; overflow: hidden; }
.s_nav { display: none; position: absolute; left: 50%; margin-left: -60px; border-top: 2px solid #ffa022; border-left: 1px solid #eee; border-right: 1px solid #eee; width: 120px; background: #fff; }
.s_nav .art { position: absolute; left: 50%; top: -10px; margin-left: -4px; }
.s_nav .s_btn { display: block; width: 120px; height: 36px; font: 13px/36px '微软雅黑', 'YaHei', '黑体', 'Hei', Tahoma, Helvetica, arial, sans-serif; text-align: center; border-bottom: 1px solid #eee; color: #434343; }
.has_sub:hover .s_nav { display: block; }
/*底部*/
.page_footer { position: absolute; bottom: -140px; left: 0; height: 120px; padding: 15px 0; width: 100%; background: #393939; z-index: 100; }
.page_footer p, .page_footer a { color: #575656; }
.page_footer a:hover { color: #999; }
.page_footer p.tac { margin-top: 5px; }
.friends-link { padding: 0 10px 0 66px; position: relative; }
.friends-link .t { position: absolute; left: 10px; }
.page_footer .divider { margin: 0 5px; }
/*首页弹出层*/
.infocenter_fiexd { position: absolute; z-index: 80; left: 0; top: -114px; width: 100%; }
.infocenter_btn { position: absolute; background: url(images/btn_infocenter.png) no-repeat; width: 64px; height: 64px; bottom: -64px; left: 50%; margin-left: 420px; }
.infocenter_btn img { position: absolute; right: 8px; top: 8px; -webkit-animation: bounce 1s 1s ease infinite both; -moz-animation: bounce 1s 1s ease infinite both; }
.infocenter_fiexd.show .infocenter_btn { background-position: 0 -64px; }
.m_infocenter { height: 211px; background: #fff; background: rgba(255,255,255,.9); box-shadow: 0 5px 10px rgba(0,0,0,.1); border-top: 1px solid #ececec; opacity: 0; }
.m_infocenter .arti { width: 33.333%; float: left; }
.m_infocenter .arti .arti_in { padding: 15px; }
.m_infocenter .gallery_images, .m_infocenter .tab { position: relative; width: 306px; height: 180px; overflow: hidden; }
.m_infocenter .gallery_images ul { width: 3000px; height: 180px; position: absolute; left: 0; top: 0; }
.m_infocenter .gallery_images ul li { width: 306px; height: 180px; float: left; }
.m_infocenter .gallery_images img { width: 306px; height: 180px; }
.m_infocenter .gallery_images .text { position: absolute; bottom: 0; left: 0; width: 100%; height: 32px; line-height: 32px; background: #333; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; text-indent: 1em; text-decoration: none; }
.m_infocenter .gallery .gallery_ctrl a { position: absolute; top: 70px; display: block; height: 29px; width: 29px; background: url(images/bg_infocenter.png) 0 -264px no-repeat; opacity: .5; }
.m_infocenter .gallery .gallery_ctrl a:hover { opacity: 1; }
.m_infocenter .gallery .gallery_ctrl a.prve { left: 10px; }
.m_infocenter .gallery .gallery_ctrl a.next { right: 10px; background-position: -29px -264px; }
.m_infocenter .news .tab_nav { position: relative; height: 32px; }
.m_infocenter .news .tab_nav li { float: left; width: 33.333%; }
.m_infocenter .news .tab_nav li a { display: block; width: 100%; height: 31px; color: #515151; border-bottom: 1px solid #c1c1c1; text-align: center; text-decoration: none; font: bold 14px/30px '微软雅黑', 'YaHei', '黑体', 'Hei', Tahoma, Helvetica, arial, sans-serif; }
.m_infocenter .news .tab_nav .slider { position: absolute; left: 0; bottom: 0; height: 3px; width: 33.333%; background: #ffa022; }
.m_infocenter .news .tab_nav li a:hover { color: #333; }
.m_infocenter .news .tab_content { width: 3000px; height: 148px; position: absolute; left: 0; top: 32px; }
.m_infocenter .news .tab_pane { width: 306px; height: 148px; float: left; }
.m_infocenter .news .news_list { padding: 8px; }
.m_infocenter .news .news_list li { position: relative; height: 28px; line-height: 28px; padding: 0 50px 0 10px; }
.m_infocenter .news .news_list li:after { content: ""; position: absolute; top: 12px; left: 0px; display: block; height: 4px; width: 4px; background: #999; }
.m_infocenter .news .news_list li a { color: #666; font-size: 13px; display: block; }
.m_infocenter .news .news_list li a:hover { color: #464646; }
.m_infocenter .news .news_list li.new a {  padding-left: 28px; background: url(images/new.gif) 0 9px no-repeat; }
.m_infocenter .news .news_list li.top a { color: #f00; font-weight: bold; }
.m_infocenter .news .news_list li.top a:hover { color: #f00; }
.m_infocenter .news .news_list li span { position: absolute; right: 0; top: 0; display: block; height: 28px; font-size: 12px; color: #999; }
.m_infocenter .arti .arti_title { line-height: 14px; margin: 8px 0 18px; padding: 0 10px; border-left: 3px solid #ffa022; }
.m_infocenter .arti .arti_title h3 { display: inline-block; zoom: 1; *display:inline;
font-size: 14px; }
.m_infocenter .other ul li { float: left; margin-right: 4px; }
.m_infocenter .service ul li a { display: block; width: 71px; height: 45px; padding: 0 10px; line-height: 45px; text-align: right; background: url(images/bg_infocenter.png) no-repeat; color: #666; text-decoration: none; }
.m_infocenter .service ul li a:hover { background-position: 0 -45px; color: #0084a2; }
.m_infocenter .service ul li.biz a { background-position: 0 -90px; width: 89px; }
.m_infocenter .service ul li.biz a:hover { background-position: 0 -135px; color: #9f5e00; }
.m_infocenter .follow { margin-top: 20px; }
.m_infocenter .follow ul li { position: relative; }
.m_infocenter .follow ul li a { display: block; width: 85px; height: 32px; padding: 5px 10px 5px 50px; color: #fff; background: url(images/bg_infocenter.png) 0 -180px no-repeat; text-decoration: none; opacity: .8; }
.m_infocenter .follow ul li a:hover { opacity: 1; }
.m_infocenter .follow ul li.wx a { background-position: 0 -222px; line-height: 35px; text-align: center; font-size: 14px; }
.m_infocenter .wx_qrcode { padding: 2px; border: 2px solid #ececec; background: #fff; position: absolute; top: 42px; display: none; }
/*页面导航*/
.page_nav { position: absolute; left: 50%; top: 50%; margin: -20px 0 0 482px; width: 16px; height: 80px; z-index: 50; }
.page_nav ul li a { display: block; width: 16px; height: 16px; background: url(images/bg_infocenter.png) -32px -293px; margin: 5px 0; }
.page_nav ul li.active a, .page_nav ul li.active a:hover { background-position: 0 -293px }
.page_nav ul li a:hover { background-position: -16px -293px }
.next_page a{ display:block; position:absolute;bottom:10px;left:50%;margin-left:-34px;height:40px;width:68px; background:url(images/next_page_btn.png) no-repeat; z-index:50;-webkit-animation: bounce 1.8s .2s ease infinite both; -moz-animation: bounce 1.8s .2s ease infinite both; }
/*侧边客服*/
/*mod-sidebar*/
.mod-sidebar { position: fixed; top: 50%; left: 50%; margin: -100px 0 0 468px; z-index: 1000; }
.mod-sidebar .tab-nav li { position: relative; }
.mod-sidebar .tab-nav li a { display: block;padding:12px 0; height: 44px; width: 44px; text-align: center;color:#fff; text-decoration: none;}
.mod-sidebar .tab-content { position: absolute; top: 0; right: 54px; width: 146px;*right:46px; }
.mod-sidebar .tab-panel { display: none; opacity: 0; position: absolute; top: 0;right:60px;  width: 146px; text-align: center; padding: 20px 5px; background: #f9f9f9;box-shadow: 0 3px 10px rgba(0,0,0,.2);border-radius: 8px; }
.mod-sidebar .tab-panel:after { content: "◆"; position: absolute; font-size: 16px; color: #f9f9f9; top: 10px; right: -6px; z-index: 110; }
.mod-sidebar .tab-panel#qq:after { top: 32px; }
.mod-sidebar .tab-panel a { color: #666; }
.mod-sidebar .tab-panel#activity{width: 248px;padding:0;margin-top:16px; background: none;}
.mod-sidebar .tab-panel#activity h4{ font-weight: normal; font-size: 14px;padding:15px 10px; text-align: left; line-height: 14px;border-radius: 8px 8px 0 0 ;background:#fff;;}
.mod-sidebar .tab-panel#activity .bottom{padding:5px 15px;height:28px; background: #f0ede6;background: rgba(240,237,230,.8);border-radius: 0 0 8px 8px;}
.mod-sidebar .tab-panel#activity .bottom .btn{ float:right;display: inline-block;width: 72px;height:28px;line-height:28px;background: #ffd050;color:#783f28;border-radius:4px;text-decoration: none;}
.mod-sidebar .tab-panel#activity .bottom .btn:hover{background: #ffda75;}
.mod-sidebar .tab-panel#activity:after{ top: 16px;color:#fff; }

.alert_box{ position:absolute;top:110px;left:50%;margin-left:-200px;width:400px;height:32px; z-index:50; border-radius:4px; overflow:hidden; background:rgba(0,0,0,.1) url(images/icon_alert.png) 0 1px no-repeat;padding:0 20px; }
.alert_box .alert_list{ position:absolute;}
.alert_box .alert_list li{position:relative; height: 28px;line-height: 28px;padding:2px 10px;}
.alert_box .alert_list li a{color:#fff;}
.alert_box .alert_list li a:hover{ text-decoration:none;}
.alert_box .alert_list li.new{padding-left:44px;}
.alert_box .alert_list li.new:before { content:"New"; position:absolute; background:#f00;top:9px;left:10px;color:#fff; display:block; height:14px; line-height:14px;padding:1px 2px; }
/*免费制作*/
.start_btn { margin: 10px 0; }
.start_btn a { display: inline-block; zoom: 1; *display:inline;
padding: 12px 20px; background: #333; background: rgba(0,0,0,.4); color: #fff; font-size: 24px; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; filter:Alpha(opacity=40);}
.start_btn a:hover { background: #464646; background: rgba(0,0,0,.3);filter:Alpha(opacity=30); }
/*页面转场*/
.pages_wrap { position: absolute; top: 0; /*-webkit-transition: top 1s ease; -moz-transition: top 1s ease; -ms-transition: top 1s ease;*/ }
.backdrop{width:100%;height:100%; position:absolute; background:#000; z-index:60; opacity:.6; display:none;filter:Alpha(opacity=60); }
.page { width:100%;position: relative; overflow:hidden; }
.page .page_bg{position: absolute; z-index: 1; height: 100%; width: 100%; }
/*page0*/
#page0 .page_bg { background: #1cc6f0 url(images/bg_page0.png) repeat; }
#page0 .text { position: absolute; left: 50%; top: 50%; margin: -108px 0 0 20px; width: 440px; text-align: center; z-index:10; }
#page0 .text .t { text-indent: -999em; height: 52px; background: url(images/text_page0.png) no-repeat; }
#page0 .text .t2 { height: 72px; background-position: 0 -52px; }
#page0 .text .t3 { height: 45px; background-position: 0 -124px; }
#page0 .text .app_num { color: #fff; font-size: 20px; margin: 10px 0; }
#page0 .text .app_num span { font-size: 32px; color: #404040; }
#page0 .mac { position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -680px; z-index:12; }
#page0 .mac .m3 { position: absolute; right: 111px; top: 155px; opacity: 0; }
#page0 .mac .m4 { position: absolute; right: 252px; top: 146px; }
#page0 .phone { position: absolute; left: 50%; top: 50%; margin: -120px 0 0 -180px; z-index:14; }
#page0 .phone .m5 { position: absolute; right: 18px; top: 136px; }
/*page0动画*/
#page0 .page_bg { -webkit-animation: bgColor1 60s linear infinite; -moz-animation: bgColor1 60s linear infinite; }
#page0.active .t1 { -webkit-animation: fadeInUp .6s .1s ease both; -moz-animation: fadeInUp .6s .1s ease both; }
#page0.active .t2 { -webkit-animation: fadeInUp .6s .3s ease both; -moz-animation: fadeInUp .6s .3s ease both; }
#page0.active .t3 { -webkit-animation: fadeInUp .6s .5s ease both; -moz-animation: fadeInUp .6s .5s ease both; }
#page0.active .app_num { -webkit-animation: fadeInUp .6s .7s ease both; -moz-animation: fadeInUp .6s .7s ease both; }
#page0.active .start_btn { -webkit-animation: fadeInUp .6s .9s ease both; -moz-animation: fadeInUp .6s .9s ease both; }
#page0.active .mac { -webkit-animation: fadeInLeft .6s .2s ease both; -moz-animation: fadeInLeft .6s .2s ease both; }
#page0.active .mac .m3 { -webkit-animation: animateHand 2s 2s ease both; -moz-animation: animateHand 2s 2s ease both; }
#page0.active .mac .m4 { -webkit-animation: bounceIn 1s 3.6s ease both; -moz-animation: bounceIn 1s 3.6s ease both; }
#page0.active .phone { -webkit-animation: fadeInRight 1s .2s ease both; -moz-animation: fadeInRight 1s .2s ease both; }
#page0.active .phone .m5 { -webkit-animation: bounceIn 1s 3.8s ease both; -moz-animation: bounceIn 1s 3.8s ease both; }
/*page1*/
#page1 .page_bg { background: #ffa022 url(images/bg_page0.png) repeat; }
#page1 .text { position: absolute; left: 50%; top: 50%; margin: -120px 0 0 -480px; width: 400px; text-align: center; z-index:10; }
#page1 .text .t { text-indent: -999em; height: 67px; background: url(images/text_page1.png) no-repeat; }
#page1 .text .t2 { background-position: 0 -67px; }
#page1 .phone { position: absolute; left: 50%; top: 50%; margin: -130px 0 0 -130px; z-index:12; }
#page1 .phone .topbar { position: absolute; right: 79px;/*top:62px;*/ top: -53px; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); opacity: .3; }
#page1 .phone .grid { position: absolute; right: 124px;/*top:92px;*/ top: -8px; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); opacity: .3; }
#page1 .phone .list { position: absolute; right: 184px;/*top:116px;*/ top: 34px; -webkit-transform: translateY(60px); -moz-transform: translateY(60px); opacity: .3; }
#page1 .phone .navbar { position: absolute; right: 336px;/*top:214px;*/ top: 144px; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); opacity: .3; }
#page1 .phone .m { position: absolute; left: 0; top: 0; }
#page1 .phone .m1 { top: -20px; left: 60px; }
#page1 .phone .m2 { top: -16px; left: -154px; }
#page1 .phone .m3 { top: 78px; left: 168px; }
#page1 .phone .m4 { top: 82px; left: -196px; }
/*page1动画*/
#page1 .page_bg { -webkit-animation: bgColor3 60s linear infinite; -moz-animation: bgColor3 60s linear infinite; }
#page1.active .t1 { -webkit-animation: fadeInLeft .6s .3s ease both; -moz-animation: fadeInLeft .6s .3s ease both; }
#page1.active .t2 { -webkit-animation: fadeInRight .6s .5s ease both; -moz-animation: fadeInRight .6s .5s ease both; }
#page1.active .start_btn { -webkit-animation: fade .6s .7s ease both; -moz-animation: fade .6s .7s ease both; }
#page1.active .phone { -webkit-animation: fadeInUp 1s .2s ease both; -moz-animation: fadeInUp 1s .2s ease both; }
#page1.active .phone .topbar { -webkit-transform: translateY(0); -moz-transform: translateY(0); opacity: 1; -webkit-transition: all 1s ease 1s; -moz-transition: all1s ease 1s; }
#page1.active .phone .grid { -webkit-transform: translateY(0); -moz-transform: translateY(0); opacity: 1; -webkit-transition: all 1s ease 1.3s; -moz-transition: all 1s ease 1.3s; }
#page1.active .phone .list { -webkit-transform: translateY(0); -moz-transform: translateY(0); opacity: 1; -webkit-transition: all 1s ease 1.6s; -moz-transition: all 1s ease 1.6s; }
#page1.active .phone .navbar { -webkit-transform: translateY(0); -moz-transform: translateY(0); opacity: 1; -webkit-transition: all 1s ease 1.9s; -moz-transition: all 1s ease 1.9s; }
#page1.active .phone .m1 { -webkit-animation: fadeInLeft .6s 1.8s ease both; -moz-animation: fadeInLeft .6s 1.8s ease both; }
#page1.active .phone .m2 { -webkit-animation: fadeInRight .6s 2.1s ease both; -moz-animation: fadeInRight .6s 2.1s ease both; }
#page1.active .phone .m3 { -webkit-animation: fadeInUp .6s 2.4s ease both; -moz-animation: fadeInUp .6s 2.4s ease both; }
#page1.active .phone .m4 { -webkit-animation: fadeInUp .6s 2.7s ease both; -moz-animation: fadeInUp .6s 2.7s ease both; }
#page1.active .phone .m5 { opacity: .4; -webkit-transition: all 3s ease 1s; -moz-transition: all 3s ease 1s; }
/*page2*/
#page2 .page_bg {  background: #56c603 url(images/bg_page0.png) repeat; }
#page2 .page_bg_in { position: absolute; z-index: 1; left: 50%; height: 100%; width: 50%; background: #0496ea url(images/bg_page0.png) repeat; }
#page2 .text { position: absolute; left: 50%; top: 50%; margin: -210px 0 0 -255px; width: 510px; text-align: center; z-index:12; }
#page2 .text .t { text-indent: -999em; height: 65px; background: url(images/text_page2.png) no-repeat; }
#page2 .text .t2 { background-position: 0 -65px; }
#page2 .phone { position: absolute; left: 50%; top: 50%; margin: 218px 0 0 -350px; z-index:10; }
#page2 .phone .p { position: absolute; opacity: 0; }
#page2 .phone .p0 { left: 612px; top: -292px; -webkit-transform: translateX(-373px) translateY(282px) rotate(-360deg) scale(.1); -moz-transform: translateX(-373px) translateY(282px) rotate(-360deg) scale(.1); }
#page2 .phone .p1 { left: 440px; top: -300px; -webkit-transform: translateX(-200px) translateY(290px) rotate(-360deg) scale(.1); -moz-transform: translateX(-200px) translateY(290px) rotate(-360deg) scale(.1); }
#page2 .phone .p2 { left: 502px; top: -231px; -webkit-transform: translateX(-265px) translateY(220px) rotate(-360deg) scale(.1); -moz-transform: translateX(-265px) translateY(220px) rotate(-360deg) scale(.1); }
#page2 .phone .p3 { left: 580px; top: -172px; -webkit-transform: translateX(-340px) translateY(160px) rotate(-360deg) scale(.1); -moz-transform: translateX(-340px) translateY(160px) rotate(-360deg) scale(.1); }
#page2 .phone .p4 { left: 463px; top: -127px; -webkit-transform: translateX(-224px) translateY(115px) rotate(-360deg) scale(.1); -moz-transform: translateX(-224px) translateY(115px) rotate(-360deg) scale(.1); }
#page2 .phone .p5 { left: 361px; top: -207px; -webkit-transform: translateX(-123px) translateY(196px) rotate(-360deg) scale(.1); -moz-transform: translateX(-123px) translateY(196px) rotate(-360deg) scale(.1); }
#page2 .phone .p6 { left: 352px; top: -110px; -webkit-transform: translateX(-113px) translateY(98px) rotate(-360deg) scale(.1); -moz-transform: translateX(-113px) translateY(98px) rotate(-360deg) scale(.1); }
#page2 .phone .p7 { left: -60px; top: -310px; -webkit-transform: translateX(379px) translateY(300px) rotate(360deg) scale(.1); -moz-transform: translateX(379px) translateY(300px) rotate(360deg) scale(.1); }
#page2 .phone .p8 { left: -36px; top: -197px; -webkit-transform: translateX(355px) translateY(186px) rotate(360deg) scale(.1); -moz-transform: translateX(355px) translateY(186px) rotate(360deg) scale(.1); }
#page2 .phone .p9 { left: 93px; top: -319px; -webkit-transform: translateX(225px) translateY(307px) rotate(360deg) scale(.1); -moz-transform: translateX(225px) translateY(307px) rotate(360deg) scale(.1); }
#page2 .phone .p10 { left: 63px; top: -210px; -webkit-transform: translateX(256px) translateY(198px) rotate(360deg) scale(.1); -moz-transform: translateX(256px) translateY(198px) rotate(360deg) scale(.1); }
#page2 .phone .p11 { left: 180px; top: -199px; -webkit-transform: translateX(138px) translateY(188px) rotate(360deg) scale(.1); -moz-transform: translateX(138px) translateY(188px) rotate(360deg) scale(.1); }
#page2 .phone .p12 { left: 107px; top: -105px; -webkit-transform: translateX(212px) translateY(95px) rotate(360deg) scale(.1); -moz-transform: translateX(212px) translateY(95px) rotate(360deg) scale(.1); }
#page2 .phone .p13 { left: 202px; top: -106px; -webkit-transform: translateX(118px) translateY(95px) rotate(360deg) scale(.1); -moz-transform: translateX(118px) translateY(95px) rotate(360deg) scale(.1); }
#page2 .phone .m2 { position: absolute; top: -297px; left: -100px; }
/*page2动画*/
#page2.active .t1 { -webkit-animation: fade .6s .3s ease both; -moz-animation: fade .6s .3s ease both; }
#page2.active .t2 { -webkit-animation: fade .6s .5s ease both; -moz-animation: fade .6s .5s ease both; }
#page2.active .start_btn { -webkit-animation: fade .6s .7s ease both; -moz-animation: fade .6s .7s ease both; }
#page2.active .phone { -webkit-animation: fadeInUp 1s .2s ease both; -moz-animation: fadeInUp 1s .2s ease both; }
#page2.active .phone .p { -webkit-transform: translateX(0) translateY(0) rotate(0) scale(1); -moz-transform: translateX(0) translateY(0) rotate(0) scale(1); opacity: 1; -webkit-transition: all 1.4s ease 1s; -moz-transition: all 1.4s ease 1s; }
#page2.active .phone .m1 { opacity: .4; -webkit-transition: all 2s ease 1s; -moz-transition: all 2s ease 1s; }
#page2.active .phone .m2 { -webkit-animation: fade 1.6s .8s ease both; -moz-animation: fade 1.6s .8s ease both; }
/*page3*/
#page3 .text { position: absolute; left: 50%; top: 50%; margin: -200px 0 0 0; width: 400px; text-align: center; z-index:10; }
#page3 .text .t { text-indent: -999em; height: 60px; background: url(images/text_page3.png) no-repeat; }
#page3 .text .t2 { height: 50px; background-position: 0 -60px; }
#page3 .app_type { margin: 10px 0; }
#page3 .app_type li { float: left; width: 33.3333%; padding: 10px 0; }
#page3 .app_type li a { display:block;width: 120px; height: 120px; background: url(images/app_type_page3.png) no-repeat; text-indent: -999em; -webkit-transform: scale(0.01); -moz-transform: scale(0.01); }
#page3 .app_type li a.type0 { background-position: 0 0; }
#page3 .app_type li.active a.type0, #page3 .app_type li a.type0:hover { background-position: -120px 0; }
#page3 .app_type li a.type1 { background-position: 0 -120px; }
#page3 .app_type li.active a.type1, #page3 .app_type li a.type1:hover { background-position: -120px -120px; }
#page3 .app_type li a.type2 { background-position: 0 -240px; }
#page3 .app_type li.active a.type2, #page3 .app_type li a.type2:hover { background-position: -120px -240px; }
#page3 .app_type li a.type3 { background-position: 0 -360px; }
#page3 .app_type li.active a.type3, #page3 .app_type li a.type3:hover { background-position: -120px -360px; }
#page3 .app_type li a.type4 { background-position: 0 -480px; }
#page3 .app_type li.active a.type4, #page3 .app_type li a.type4:hover { background-position: -120px -480px; }
#page3 .app_type li a.type5 { background-position: 0 -600px; }
#page3 .app_type li.active a.type5, #page3 .app_type li a.type5:hover { background-position: -120px -600px; }
#page3 .phone { position: absolute; left: 50%; top: 50%; margin: -280px 0 0 -382px; width: 322px; height: 650px; background: url(images/phone_page3.png) no-repeat; z-index:12; }
#page3 .app_view{ position:absolute;width:256px;height:448px;top:95px;left:32px;border:2px solid #fff; overflow:hidden;}
#page3 .app_view .images_list{width:3000px; position:absolute;top:0;left:0; z-index:16;}
#page3 .app_view .images_list li{ float:left;}
#page3 .app_view .images_list img{width:256px;height:448px;}
#page3 .app_view .images_nav{ text-align:center; position:absolute;width:100%;bottom:5px; z-index:18;}
#page3 .app_view .images_nav li{ display:inline-block;*display:inline;zoom:1;}
#page3 .app_view .images_nav li a{ display:block;width: 12px;height: 12px;background: url(images/bg_infocenter.png) -32px -293px;}
#page3 .app_view .images_nav li.active a,#page3 .app_view .images_nav li a:hover { background-position: -16px -293px }
#page3 .page_bg {  background: #ababab url(images/pageBg_page3.png) center no-repeat; opacity: .7; }
/*page3动画*/
#page3.active .t1 { -webkit-animation: fadeInLeft .6s .3s ease both; -moz-animation: fadeInLeft .6s .3s ease both; }
#page3.active .t2 { -webkit-animation: fadeInRight .6s .7s ease both; -moz-animation: fadeInRight .6s .7s ease both; }
#page3.active .start_btn { -webkit-animation: fade .6s .9s ease both; -moz-animation: fade .6s .9s ease both; }
#page3.active .app_type li a { -webkit-transform: scale(1); -moz-transform: scale(1); opacity: 1; -webkit-transition: -webkit-transform .5s ease .5s; -moz-transition: -moz-transform .5s ease .5s; }
#page3.active .phone { -webkit-animation: fadeInLeft 1s .2s ease both; -moz-animation: fadeInLeft 1s .2s ease both; }
#page3 .page_bg { -webkit-animation: bgColor1 60s linear infinite; -moz-animation: bgColor1 60s linear infinite; }
@-webkit-keyframes bgColor1 { 0% {
background-color:#1dc6f1;
}
26% {
background-color:#1dc6f1;
}
33% {
background-color:#6abb03;
}
60% {
background-color:#6abb03;
}
66% {
background-color:#ffa022;
}
94% {
background-color:#ffa022;
}
100% {
background-color:#1dc6f1;
}
}
 @-webkit-keyframes bgColor2 { 0% {
background-color:#6abb03;
}
26% {
background-color:#6abb03;
}
33% {
background-color:#ffa022;
}
60% {
background-color:#ffa022;
}
66% {
background-color:#1dc6f1;
}
94% {
background-color:#1dc6f1;
}
100% {
background-color:#6abb03;
}
}
@-webkit-keyframes bgColor3 { 0% {
background-color:#ffa022;
}
26% {
background-color:#ffa022;
}
33% {
background-color:#1dc6f1;
}
60% {
background-color:#1dc6f1;
}
66% {
background-color:#6abb03;
}
94% {
background-color:#6abb03;
}
100% {
background-color:#ffa022;
}
}
@-webkit-keyframes animateHand { 0% {
opacity:0;
}
20% {
opacity:1;
-webkit-transform:translateX(0)
}
80% {
opacity:1;
-webkit-transform:translateX(-180px)
}
100% {
opacity:0;
-webkit-transform:translateX(-180px)
}
}
@-moz-keyframes animateHand { 0% {
opacity:0;
}
20% {
opacity:1;
-moz-transform:translateX(0)
}
80% {
opacity:1;
-moz-transform:translateX(-180px)
}
100% {
opacity:0;
-moz-transform:translateX(-180px)
}
}
@-webkit-keyframes animateMoney { 0% {
opacity:.4;
}
50% {
opacity:1;
-webkit-transform:translateY(-30px)
}
100% {
opacity:.4;
-webkit-transform:translateY(0);
}
}
@-webkit-keyframes scale { 0% {
-webkit-transform:scale(1);
}
50% {
-webkit-transform:scale(1.6);
}
100% {
-webkit-transform:scale(1);
}
}
@-moz-keyframes scale { 0% {
-moz-transform:scale(1);
}
50% {
-moz-transform:scale(1.6);
}
100% {
-moz-transform:scale(1);
}
}
@-webkit-keyframes fade { 0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-moz-keyframes fade { 0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-webkit-keyframes fadeInUp { 0% {
opacity:0;
-webkit-transform:translateY(20px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-moz-keyframes fadeInUp { 0% {
opacity:0;
-moz-transform:translateY(20px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
}
@-webkit-keyframes fadeInDown { 0% {
opacity:0;
-webkit-transform:translateY(-20px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-moz-keyframes fadeInDown { 0% {
opacity:0;
-moz-transform:translateY(-20px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
}
@-webkit-keyframes fadeInLeft { 0% {
opacity:0;
-webkit-transform:translateX(-20px)
}
100% {
opacity:1;
-webkit-transform:translateX(0)
}
}
@-moz-keyframes fadeInLeft { 0% {
opacity:0;
-moz-transform:translateX(-20px)
}
100% {
opacity:1;
-moz-transform:translateX(0)
}
}
@-webkit-keyframes fadeInRight { 0% {
opacity:0;
-webkit-transform:translateX(20px)
}
100% {
opacity:1;
-webkit-transform:translateX(0)
}
}
@-moz-keyframes fadeInRight { 0% {
opacity:0;
-moz-transform:translateX(20px)
}
100% {
opacity:1;
-moz-transform:translateX(0)
}
}
@-webkit-keyframes bounceIn { 0% {
opacity:0;
-webkit-transform:scale(.3)
}
50% {
opacity:1;
-webkit-transform:scale(1.02)
}
70% {
-webkit-transform:scale(.95)
}
100% {
-webkit-transform:scale(1)
}
}
@-moz-keyframes bounceIn { 0% {
opacity:0;
-moz-transform:scale(.3)
}
50% {
opacity:1;
-moz-transform:scale(1.02)
}
70% {
-moz-transform:scale(.95)
}
100% {
-moz-transform:scale(1)
}
}
@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {
-webkit-transform:translateY(0)
}
40% {
-webkit-transform:translateY(-8px)
}
60% {
-webkit-transform:translateY(-5px)
}
}
@-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% {
-moz-transform:translateY(0)
}
40% {
-moz-transform:translateY(-8px)
}
60% {
-moz-transform:translateY(-5px)
}
}