@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:70px; width:auto;}

.education .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; left: 50%;top:50%;-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 .bg02{width:340px; height:606px;position:absolute; left: 50%;top:50%; -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 .bg03{width:636px; height:100px;-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 .bg04{width:636px; height:70px;-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,.wrap-box .bg06{width:300px; height:90px;position:absolute;-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{ width:300px; height:90px; line-height:90px; display:inline-block; text-indent:3em; color:#fff; border-radius:5px; font-size:30px; }

.wrap-box .bg07{width:300px; height:300px;position:absolute; right:-260px;-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 .bg07 img{width:200px; height:200px;}

.education .bg{ width:1172px; height:574px;position:absolute; left: 50%;top:50%; margin-left:-790px; margin-top:-587px;background:url(../../images/app_download/bg_03.png)no-repeat center center;}
.education .bg01{ margin-left:-890px; margin-top:-242px;background:url(../../images/school_project/phone_small_01.png) no-repeat  center; }
.education .bg02{ margin-left:-230px; margin-top:-302px;background:url(../../images/school_project/phone_big_01.png)no-repeat  center;  }
.education .bg03{position:absolute; right:70px; top:-80px;  text-indent:-9999px;background:url(../../images/school_project/title_01.png)no-repeat center center; }
.education .bg04{position:absolute; right:70px; top:250px; text-indent:-9999px;background:url(../../images/school_project/info_01.png)no-repeat center center;}
.education .bg05{right:350px; top:100px;}
.education .bg05 a{ background:#ffa200 url(../../images/school_project/android.png) no-repeat 30px center; }
.education .bg05 a:hover{ background:#fcb12f url(../../images/school_project/android.png) no-repeat 30px center; }
.education .bg06{right:350px; top:590px; }
.education .bg06 a{background:#32a8f5 url(../../images/school_project/ios.png) no-repeat 30px center;  }
.education .bg06 a:hover{background:#369cdf url(../../images/school_project/ios.png) no-repeat 30px center;  }
.education .bg07{top:275px; }

.education.active .bg{ margin-top:-287px;-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100);}
.education.active .bg01{margin-left:-590px;-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100);}
.education.active .bg02{margin-left:-430px;-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100); }
.education.active .bg03{top:60px;-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100);}
.education.active .bg04{ top:175px;-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100); }
.education.active .bg05{ top:275px;-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100);}
.education.active .bg06{ top:385px; -webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100);}
.education.active .bg07{ right:20px;-webkit-opacity: 1;-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; filter:alpha(opacity=100); }


/*触发&尾部*/
#fp-nav.right{ right:inherit; left:33px; bottom:100px; background:url(../images/app_download/mouse_msg.png) no-repeat 6px 80px; width:110px; height:130px;}
#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 .nav a{ background:url(../images/app_download/line.png) no-repeat right 11px; padding:0 20px; color:#fff; float:left;}
.foot-content a.author{color:#fff; opacity:0.8;}
.foot-content a.author:hover{opacity:1;}

.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 (min-width:984px) {
.section #header .logo img{ height:60px;}
.education .wrap-box{ width:1024px; height:495px; margin-left:-512px; margin-top:-265px; }
.section .bg{background-size:60%;}
.wrap-box .bg01{background-size:80%;}
.wrap-box .bg02{background-size:80%;}
.wrap-box .bg03{background-size:60%;}
.wrap-box .bg04{background-size:70%;}
.jian-box{ display:block;}
.section.active .jian-box{bottom:80px;}

.wrap-box .bg05,.wrap-box .bg06{width:200px; height:60px; right:305px;}
.wrap-box .bg05 a,.wrap-box .bg06 a{ width:200px; height:60px; line-height:60px; text-indent:3.2em; font-size:20px; background-size:14%;}
.wrap-box .bg05 a:hover,.wrap-box .bg06 a:hover{ background-size:14%;}

.wrap-box .bg07{width:200px; height:200px; top:240px; }
.wrap-box .bg07 img{width:140px; height:140px;}

.education .bg{margin-left:-680px;}
.education .bg02{margin-left:50px; }
.education .bg03{ right:-40px;}
.education .bg04{ right:-75px;}
.education .bg05,.education .bg06{right:265px;}
.education .bg07{ top:260px;}

.education.active .bg{ margin-top:-337px;}
.education.active .bg01{margin-left:-380px;}
.education.active .bg02{margin-left:-270px;}
.education.active .bg03{top:90px;}
.education.active .bg04{ top:175px;}
.education.active .bg05{ top:260px;}
.education.active .bg06{ top:340px;}
.education.active .bg07{ right:45px;}

}
@media screen and (min-width:1220px) {
.section #header .logo img{ height:65px;}
.education .wrap-box{ width:1180px; height:618px; margin-left:-590px; margin-top:-309px; }
.section .bg{background-size:75%;}
.person .bg{margin-top:-320px;}
.wrap-box .bg01{background-size:85%;}
.wrap-box .bg02{background-size:85%;}
.wrap-box .bg03{background-size:65%;}
.wrap-box .bg04{background-size:85%;}
.jian-box{ display:block;}
.section.active .jian-box{bottom:40px;}

.wrap-box .bg05,.wrap-box .bg06{width:220px; height:60px;}
.wrap-box .bg05 a,.wrap-box .bg06 a{ width:220px; height:60px; line-height:60px; text-indent:3em; font-size:22px; background-size:14%;}
.wrap-box .bg05 a:hover,.wrap-box .bg06 a:hover{ background-size:14%;}

.wrap-box .bg07{width:200px; height:200px; top:250px; }
.wrap-box .bg07 img{width:140px; height:140px;}

.education .bg{margin-left:-640px;}
.education .bg02{margin-left:50px; }
.education .bg03{right:22px;}
.education .bg04{ right:-45px;}
.education .bg04{ top:300px;}
.education .bg05,.education .bg06{right:320px;}
.education .bg07{ top:340px;}

.education.active .bg{ margin-top:-337px;}
.education.active .bg01{margin-left:-420px;}
.education.active .bg02{margin-left:-290px;}
.education.active .bg03{top:150px;}
.education.active .bg04{ top:250px;}
.education.active .bg05{ top:340px;}
.education.active .bg06{ top:420px;}
.education.active .bg07{ right:100px;}

}
@media screen and (min-width:1306px) {
.section #header .logo img{ height:70px;}
.education .wrap-box{ width:1280px; height:618px; margin-left:-640px; margin-top:-309px;}
.section .bg{background-size:85%;}
.person .bg{margin-top:-320px;}
.wrap-box .bg01{background-size:90%;}
.wrap-box .bg02{background-size:90%;}
.wrap-box .bg03{background-size:70%;}
.wrap-box .bg04{background-size:90%;}
.jian-box{ display:block;}
.section.active .jian-box{bottom:60px;}

.wrap-box .bg05,.wrap-box .bg06{width:220px; height:60px;}
.wrap-box .bg05 a,.wrap-box .bg06 a{ width:220px; height:60px; line-height:60px; text-indent:3em; font-size:22px; background-size:14%;}
.wrap-box .bg05 a:hover,.wrap-box .bg06 a:hover{ background-size:14%;}

.wrap-box .bg07{width:200px; height:200px; top:250px; }
.wrap-box .bg07 img{width:140px; height:140px;}

.education .bg{margin-left:-620px;}
.education .bg02{margin-left:50px; }
.education .bg03{right:50px;}
.education .bg04{ right:-15px;}
.education .bg04{ top:310px;}
.education .bg05,.education .bg06{right:366px;}
.education .bg07{ top:330px;}

.education.active .bg{ margin-top:-337px;}
.education.active .bg01{margin-left:-440px;}
.education.active .bg02{margin-left:-290px;}
.education.active .bg03{top:140px;}
.education.active .bg04{ top:240px;}
.education.active .bg05{ top:330px;}
.education.active .bg06{ top:410px;}
.education.active .bg07{ right:144px;}

}
@media screen and (min-width:1380px) {
.section #header .logo img{ height:70px;}
.education .wrap-box{ width:1440px; height:618px; margin-left:-720px; margin-top:-309px; }
.section .bg{background-size:100%;}
.person .bg{margin-top:-290px;}
.wrap-box .bg01{background-size:100%;}
.wrap-box .bg02{background-size:100%;}
.wrap-box .bg03{background-size:90%;}
.wrap-box .bg04{background-size:100%;}
.jian-box{ display:block;}
.section.active .jian-box{bottom:70px;}

.wrap-box .bg05,.wrap-box .bg06{width:300px; height:90px;}
.wrap-box .bg05 a,.wrap-box .bg06 a{ width:300px; height:90px; line-height:90px; text-indent:3em; font-size:32px; background-size:16%;}
.wrap-box .bg05 a:hover,.wrap-box .bg06 a:hover{ background-size:16%;}

.wrap-box .bg07{width:200px; height:200px; top:250px; }
.wrap-box .bg07 img{width:200px; height:200px;}

.education .bg{margin-left:-680px;}
.education .bg02{margin-left:50px; }
.education .bg03{right:123px;}
.education .bg04{ right:85px;}
.education .bg04{ top:310px;}
.education .bg05,.education .bg06{right:418px;}
.education .bg07{ top:330px;}

.education.active .bg{ margin-top:-287px;}
.education.active .bg01{margin-left:-530px;}
.education.active .bg02{margin-left:-370px;}
.education.active .bg03{top:100px;}
.education.active .bg04{ top:220px;}
.education.active .bg05{ top:330px;}
.education.active .bg06{ top:440px;}
.education.active .bg07{ right:197px;}

}