@charset "utf-8";
/* CSS Document */
.section #header{ position:absolute; top:40px; left:40px;z-index:100;/*-webkit-opacity: 0;-moz-opacity: 0;-khtml-opacity: 0;opacity: 0; filter:alpha(opacity=0);-webkit-transition: all 2s ease 0s;-o-transition: all 2s ease 0s;-moz-transition: all 2s ease 0s;transition: all 2s ease 0s;*/}
.section.active{ z-index:99;}
/*.section.active #header{ left:40px;-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100);}*/
.section #header .logo img{ height:78px; width:auto;}

.section .wrap-box{ width:1180px; height:570px;position:absolute; left: 50%;top:50%; margin-left:-590px; margin-top:-285px; }

.section .bg{-webkit-opacity: 0;-moz-opacity: 0;-khtml-opacity: 0;opacity: 0; filter:alpha(opacity=0); -webkit-transition: all 2s ease 0s;-o-transition: all 2s ease 0s;-moz-transition: all 2s ease 0s;transition: all 2s ease 0s; }
.wrap-box .bg01{width:238px; height:483px; position:absolute; }
.wrap-box .bg02{width:340px; height:606px; position:absolute; }

.wrap-box .bgTitle{width:580px; height:auto; position:absolute; }
.wrap-box .bgTitle img{ width:580px;}
.wrap-box .littleTit{width:580px; height:auto; position:absolute; }

.wrap-box .bg05,.wrap-box .bg06{width:300px; height:90px;position:absolute;}
.wrap-box .bg05 a,.wrap-box .bg06 a{ width:300px; height:90px; line-height:90px; text-indent:3em; font-size:30px;  }
.wrap-box .bg07{width:200px; height:200px;position:absolute;}
.wrap-box .bg07 img{width:200px; height:200px;}
.wrap-box .bg05 .tit, .wrap-box .bg06 .tit {text-align: center;color: #fff;font-size: 16px;line-height: 36px;display: block; margin-top:10px;}

.wrap-box .bg01,.wrap-box .bg02{-webkit-transition: all 2s ease 0s;-o-transition: all 2s ease 0s;-moz-transition: all 2s ease 0s;transition: all 2s ease 0s; -webkit-opacity: 0;-moz-opacity: 0;-khtml-opacity: 0;opacity: 0; filter:alpha(opacity=0);}
.wrap-box .bgTitle,.wrap-box .littleTit{-webkit-transition: all 1.7s ease 0s;-o-transition: all 1.7s ease 0s;-moz-transition: all 1.7s ease 0s;transition: all 1.7s ease 0s;-webkit-opacity: 0;-moz-opacity: 0;-khtml-opacity: 0;opacity: 0; filter:alpha(opacity=0);}
.wrap-box .bg05,.wrap-box .bg06{-webkit-transition: all 1.5s ease 0s;-o-transition: all 1.5s ease 0s;-moz-transition: all 1.5s ease 0s;transition: all 1.5s ease 0s;-webkit-opacity: 0;-moz-opacity: 0;-khtml-opacity: 0;opacity: 0; filter:alpha(opacity=0); }
.wrap-box .bg05 a,.wrap-box .bg06 a{ display:inline-block; color:#fff; border-radius:5px;}
.wrap-box .bg07{-webkit-transition: all 1.5s ease 0s;-o-transition: all 1.5s ease 0s;-moz-transition: all 1.5s ease 0s;transition: all 1.5s ease 0s;-webkit-opacity: 0;-moz-opacity: 0;-khtml-opacity: 0;opacity: 0; filter:alpha(opacity=0); }

/*模块样式开始*/
.section .bg{ width:842px; height:570px;position:absolute; left: 50%;top:50%; margin-left:-1190px; margin-top:-286px;background:url(../images/app_download/bg_01.png)no-repeat center center;}
.section .leftBox{ width:580px; height:570px; position:relative;  }
.section .rightBox{ width:570px; height:570px; position:relative;}

.section .bg01{left:-80px; top:50px;}
.section .bg02{ right:-100px; top:-19px;}

.section .bgTitle{ left:0px; top:-50px;}
.section .littleTit{ left:0px; top:240px; font-size:24px; color:#fff; }

.section .bg05{ left:-50px; bottom:170px;}
.section .bg06{left:-50px; bottom:60px; }
.section .bg07{ right:0px; bottom:60px; }

.section .bg05 a{background:#f94d4d url(../images/app_download/android.png) no-repeat 30px center;}
.section .bg05 a:hover{background:#eb3e3e url(../images/app_download/android.png) no-repeat 30px center;}
.section .bg06 a{background:#0d86ff url(../images/app_download/ios.png) no-repeat 30px center;  }
.section .bg06 a:hover{background:#097bed url(../images/app_download/ios.png) no-repeat 30px center; }

.section.active .bg,.section.active .bg01,.section.active .bg02,.section.active .bgTitle,.section.active .littleTit,.section.active .bg05,.section.active .bg06,.section.active .bg07{-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100);}
.section.active .bg{margin-left:-690px; }
.section.active .bg01{ left:80px;}
.section.active .bg02{ right:0px;}
.section.active .bgTitle{ top:60px;}
.section.active .littleTit{ top:180px;}
.section.active .bg05,.section.active .bg06{ left:0px; }
.section.active .bg07{ right:50px; }

/*mac*/
.section.mac .bg05 a{background:#f94d4d url(../images/app_download/ios.png) no-repeat 30px center;}
.section.mac .bg05 a:hover{background:#eb3e3e url(../images/app_download/ios.png) no-repeat 30px center;}
.section.mac .bg06 a{background:#0d86ff url(../images/app_download/win.png) no-repeat 30px center;  }
.section.mac .bg06 a:hover{background:#097bed url(../images/app_download/win.png) no-repeat 30px center; }

.section.mac .bg02{top:190px;}
.section.mac.active .bg01{ left:-50px;}
.section.mac.active .bg02{ right:150px; top:190px;}
.section.mac .bg06{left:400px; bottom:170px; }
.section.mac.active .bg06{ left:320px; bottom:170px; }

/*触发&尾部*/
#fp-nav.right{ right:inherit; left:33px; bottom:100px; background:url(../images/app_download/mouse_msg.png) no-repeat 7px 140px; width:110px; height:auto;}
#fp-nav ul li, .fp-slidesNav ul li{width:15px; height:15px;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span{ background:none!important; -webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;border:2px solid #fff!important;width:13px; height:13px;left:0px; top:0px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{ background:#fff!important;-webkit-opacity: 0.5;-moz-opacity: 0.5;-khtml-opacity: 0.5; opacity:0.5; border:none!important; border-radius:50%; width:9px; height:9px;left:4px; top:4px; }

#footer{ position:fixed; bottom:35px; left:0px; z-index:9999; height:30px; line-height:30px; width:100%;}
.foot-content{ padding:0 40px 0 20px; color:#fff;}
.foot-content a{color:#fff;}
.foot-content .nav a{ background:url(../images/app_download/line.png) no-repeat right 11px; padding:0 20px;  float:left;}

.jian-box{ position:absolute; bottom:185px; left:0px; z-index:9999; height:18px; line-height:18px; width:100%; text-align:center;-webkit-transition: all 1.5s ease 0s;-o-transition: all 1.5s ease 0s;-moz-transition: all 1.5s ease 0s;transition: all 1.5s ease 0s;-webkit-opacity: 0;-moz-opacity: 0;-khtml-opacity: 0;opacity: 0; filter:alpha(opacity=0);-webkit-animation: bounceinT 2s ease-in-out infinite ;
-moz-animation: bounceinT 2s ease-in-out infinite;
-o-animation: bounceinT 2s ease-in-out infinite;
animation: bounceinT 2s ease-in-out infinite;}
@-webkit-keyframes bounceinT{
    0%{opacity: 0.2;-webkit-transform:translateY(-10px);}
    60%{opacity: 1;-webkit-transform:translateY(0px);}
    80%{-webkit-transform:translateY(-10px);}
    100%{-webkit-transform:translateY(0);}
}
@-moz-keyframes bounceinT{
    0%{opacity: 0.2;-moz-transform:translateY(-10px);}
    60%{opacity: 1;-moz-transform:translateY(0px);}
    80%{-moz-transform:translateY(-10px);}
    100%{-moz-transform:translateY(0);}
}
@-ms-keyframes bounceinT{
    0%{opacity: 0.2;-ms-transform:translateY(-10px);}
    60%{opacity: 1;-ms-transform:translateY(0px);}
    80%{-ms-transform:translateY(-10px);}
    100%{-ms-transform:translateY(0);}
}
@keyframes bounceinT{
    0%{opacity: 0.2;transform:translateY(-10px);}
    60%{opacity: 1;transform:translateY(0px);}
    80%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}
.section.active .jian-box{bottom:105px;-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100);}
.jian-box a.jian{ display:inline-block; width:32px; height:18px; background:url(../images/app_download/jian.png) no-repeat; }

@media screen and (max-width:1000px) {
.section .wrap-box{ width:710px; height:auto; position:inherit;margin:0 auto;}
.section.active .bg{margin-left:-320px; }
.section .leftBox{ float:inherit!important;width:580px; margin:60px auto 0;}
.section .rightBox{ float:inherit!important; width:580px; margin:0 auto;}
.section .littleTit{ font-size:32px; width:580px;}
.section .bg05{ bottom:130px;}
.section .bg06{ bottom:20px;}
.section .bg07{ bottom:20px;}

.section.mac .bg02{top:190px;}
.section.mac.active .bg01{ left:10px;}
.section.mac.active .bg02{ right:100px; top:190px;}
.section.mac .bg05,.section.mac.active .bg05{ bottom:220px; }
section.mac .bg06{left:400px; bottom:220px; }
.section.mac.active .bg06{ left:320px; bottom:220px; }
.wrap-box .bg05 .tit, .wrap-box .bg06 .tit{ font-size:20px;}

#fp-nav.right{ background:none; left:20px;}
#footer{ position:fixed; bottom:20px; left:0px;height:auto; line-height:34px; font-size:24px; text-align:center; }
.foot-content .nav{ display:none;}
.foot-content .nav a{ background:url(../images/app_download/line.png) no-repeat right 11px; padding:0 20px;  float:left;}

.section.active .jian-box{ bottom:145px;}
}
@media screen and (min-width:1020px) and (max-width:1400px) {
.section .wrap-box{ width:1000px;  margin-left:-500px;  }
.section #header .logo img{ height:58px;}
.section .bg01{ top:100px;}
.section.active .bg01{ left:100px;}
.section .bg02{ top:30px;}
.section.active .bg02{ right:-80px}
.section .bg01 img{ width:160px;}
.section .bg02 img{width:260px;}

.section .leftBox{ width:480px;}
.section .rightBox{ width:480px;}
.wrap-box .bgTitle{width:480px; }
.wrap-box .bgTitle img{ width:480px;}
.wrap-box .littleTit{width:480px; }
.section.active .littleTit{ top:160px;}

.wrap-box .bg05,.wrap-box .bg06{width:200px; height:70px;}
.section .bg05{ bottom:230px;}
.section .bg06{ bottom:140px;}
.wrap-box .bg05 a,.wrap-box .bg06 a{ width:200px; height:70px; line-height:70px; text-indent:3em; font-size:20px;  }
.section .bg05 a{background:#f94d4d url(../images/app_download/android.png) no-repeat 20px center; background-size:15%;}
.section .bg05 a:hover{background:#eb3e3e url(../images/app_download/android.png) no-repeat 20px center; background-size:15%;}
.section .bg06 a{background:#0d86ff url(../images/app_download/ios.png) no-repeat 20px center;  background-size:15%; }
.section .bg06 a:hover{background:#097bed url(../images/app_download/ios.png) no-repeat 20px center;  background-size:15%;}
.wrap-box .bg07{width:160px; height:160px; bottom:140px; }
.wrap-box .bg07 img{width:160px; height:160px;}
.section.active .bg07{ bottom:140px; right:100px;}

/*mac*/
.section.mac .bg01 img{ width:405px;}
.section.mac .bg02 img{width:400px;}

.section.mac .bg05 a{background:#f94d4d url(../images/app_download/ios.png) no-repeat 20px center;background-size:15%; }
.section.mac .bg05 a:hover{background:#eb3e3e url(../images/app_download/ios.png) no-repeat 20px center;background-size:15%; }
.section.mac .bg06 a{background:#0d86ff url(../images/app_download/win.png) no-repeat 20px center; background-size:15%;  }
.section.mac .bg06 a:hover{background:#097bed url(../images/app_download/win.png) no-repeat 20px center; background-size:15%; }

.section.mac .bg02{top:190px;}
.section.mac.active .bg01{ left:-50px;}
.section.mac.active .bg02{ right:80px; top:190px;}
.section.mac .bg06{left:400px; bottom:230px; }
.section.mac.active .bg06{ left:230px; bottom:230px; }
.wrap-box .bg05 .tit, .wrap-box .bg06 .tit{ line-height:30px; margin-top:5px; font-size:12px;}

}