@charset "utf-8";
/*
   CSS Document
   @author                      lyt
   @function                   税务软件动画页面
   @updatetime              2016.9
*/
/* Reset CSS*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
a{text-decoration:none;}
table {border-spacing: 0;  }
fieldset,img {border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
strong{font-weight: bold;}
ol,ul {list-style: none;margin:0;padding:0;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;margin:0;padding:0;color:#444;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}
/*rightnav*/
#fp-nav span, .fp-slidesNavspan{border:none;}
#fp-nav li .active span, .fp-slidesNav.active span{background:none;}
#fp-nav{font-size: 12px;}
#fp-nav li { width: 120px; height: 21px; margin: 10px 0 0; vertical-align: middle;}
#fp-nav li a { float: right; width: 21px; height: 21px; color: #8F9DA4; text-decoration: none; text-align: right; background: url(../images/dot.png) 5px 5px no-repeat;}
#fp-nav li .active { background-position: 0 bottom;}
.fp-tooltip { float: left; top:0; margin-right: 5px; font: 12px "Microsoft Yahei"; color: #fff;line-height: 20px;}
/* Sections CSS */
.section{text-align: center;position:relative;overflow:hidden;}
.menu{width:800px;height:50px;position:fixed;left:0;top:0;z-index: 30000}
.section .inner{width:1100px;height:100%;margin:0 auto;position:relative;}
.section .inner > div{position:absolute;}
/*boxstyle*/
.section1{background:url(../images/p1.jpg) center top no-repeat;}
.section1 .mousemovie{position:absolute;width:100%;height:100%;left:0;top:0;z-index:100000;}
.section2{background:url(../images/p2.jpg) center top no-repeat;}
.section3{background:url(../images/p3.jpg) center top no-repeat;}
.section4{background:url(../images/p4.jpg) center top no-repeat;}
.section5{background:url(../images/p5.jpg) center top no-repeat;}
/*p1styles*/
.p1-1{width:114px;height:57px;left:60px;top:50%;transition: all 1s;margin-top:-28px;background:url(../images/p1-1.png) no-repeat;opacity:0;}
.p1-2{width:516px;height:65px;left:345px;top:50%;margin-top:0;background:url(../images/p1-2.png) no-repeat;transition: all 1s;opacity:0;}
.p1-3{width:1099px;height:455px;left:0;top:50%;margin-top:-227px;background:url(../images/p1-3.png) no-repeat;}
.p1-3-2{opacity: 0.1;width:800px;height:299px;left:50%;top:50%;margin-top:-150px;margin-left:-400px;background:url(../images/p1-3-2.png) no-repeat;
    }
.p1-4{width:145px;height:29px;left:710px;top:50%;margin-top:-95px;background:url(../images/p1-4.png) no-repeat;transition: all 0.6s;opacity:0;}
.p1-4 .dot{width:6px;height:6px;background:#72d708;position:absolute;left:50%;margin-left:-3px;top:50%;margin-top:-3px;
    }
/*p1 under active*/
.active .p1-1{left:210px;opacity:1;}
.active .p1-2{margin-top:-33px;opacity:1;transition-delay: 0.6s;}
.active .p1-3{animation:texttween 15s 1;
    -moz-animation:texttween 15s 1; /* Firefox */
    -webkit-animation:texttween 15s 1; /* Safari and Chrome */
    -o-animation:texttween 15s 1; /* Opera */}
.active .p1-3-2{animation:texttween0 20s 1;
    -moz-animation:texttween0 20s 1; /* Firefox */
    -webkit-animation:texttween0 20s 1; /* Safari and Chrome */
    -o-animation:texttween0 20s 1; /* Opera */}
.active .p1-4{margin-top:-75px;opacity:1;transition-delay: 1s;}
.active .p1-4 .dot{animation:dotshine 0.5s infinite;
    -moz-animation:dotshine 0.5s infinite; /* Firefox */
    -webkit-animation:dotshine 0.5s infinite; /* Safari and Chrome */
    -o-animation:dotshine 0.5s infinite; /* Opera */}
/*p1_keyfreams*/
/*p1-3背景税种文字*/
@keyframes texttween
{from {opacity:0.1;-webkit-transform:scale(0.8); transform:scale(0.8);}
to {opacity:0.8;-webkit-transform:scale(1.2); transform:scale(1.2);}}
@-moz-keyframes texttween /* Firefox */
{from {opacity:0.1;-webkit-transform:scale(0.8); transform:scale(0.8);}
to {opacity:0.8;-webkit-transform:scale(1.2); transform:scale(1.2);}}
@-webkit-keyframes texttween /* Safari 和 Chrome */
{from {opacity:0.1;-webkit-transform:scale(0.8); transform:scale(0.8);}
to {opacity:0.8;-webkit-transform:scale(1.2); transform:scale(1.2);}}
@-o-keyframes texttween /* Safari 和 Chrome */
{from {opacity:0.1;-webkit-transform:scale(0.8); transform:scale(0.8);}
to {opacity:0.8;-webkit-transform:scale(1.2); transform:scale(1.2);}}
/*p1-3-2背景税种文字*/
@keyframes texttween0
{from {-webkit-transform:scale(1.1); transform:scale(1.1);}
to {-webkit-transform:scale(0.8); transform:scale(0.8);}}
@-moz-keyframes texttween0 /* Firefox */
{from {-webkit-transform:scale(1.1); transform:scale(1.1);}
to {-webkit-transform:scale(0.8); transform:scale(0.8);}}
@-webkit-keyframes texttween0 /* Safari 和 Chrome */
{from {-webkit-transform:scale(1.1); transform:scale(1.1);}
to {-webkit-transform:scale(0.8); transform:scale(0.8);}}
@-o-keyframes texttween0 /* Opera */
{from {-webkit-transform:scale(1.1); transform:scale(1.1);}
to {-webkit-transform:scale(0.8); transform:scale(0.8);}}
/*p1-4.dot 数据·价值 中间的小方块*/
@keyframes dotshine
{from {opacity:0;}
to {opacity:1;}}
@-moz-keyframes dotshine /* Firefox */
{from {opacity:0;}
to {opacity:1;}}
@-webkit-keyframes dotshine /* Safari 和 Chrome */
{from {opacity:0;}
to {opacity:1;}}
@-o-keyframes dotshine /* Opera */
{from {opacity:0;}
to {opacity:1;}}
/*p2styles*/
.p2-1{width:269px;height:67px;top:50px;left:30px;background:url(../images/p2-1.png) no-repeat;opacity:0;transition:all 1s;}/*研发理念标题*/
.p2-2{width:622px;height:115px;top:290px;left:270px;background:url(../images/p2-2.png) no-repeat;opacity:0;transition:all 0.8s;transition-delay:0.8s}/*研发理念文字*/
.p2-f-1{width:125px;height:125px;top:250px;left:0;background:url(../images/p2-f-1.png) no-repeat;opacity:0;transition:all 0.7s;transition-delay:0.5s}/*流程图1*/
.p2-f-2{width:125px;height:125px;top:435px;left:-50px;background:url(../images/p2-f-2.png) no-repeat;opacity:0;transition:all 0.7s;transition-delay:0.5s}/*流程图2*/
.p2-f-2 > div{width:5px;position:absolute;bottom:55px;background:#fff}
.p2-f-2-a{height:22px;left:50px;}
.p2-f-2-b{height:26px;left:60px;}
.p2-f-2-c{height:16px;left:70px;}
.p2-f-3{width:76px;height:120px;top:465px;left:290px;background:url(../images/p2-f-3.png) no-repeat;opacity:0;transition:all 0.7s;transition-delay:0.2s}/*流程图3*/
.p2-f-3-mask{width:76px;height:76px;background:url(../images/p2-f-3-mask.png) no-repeat;}
.p2-f-4{width:1885px;height:125px;top:465px;left:530px;background:url(../images/p2-f-4.png) no-repeat;opacity:0;transition:all 0.7s;transition-delay:0.4s}/*流程图4*/
.p2-f-5{width:237px;height:125px;top:465px;left:875px;background:url(../images/p2-f-5.png) no-repeat;opacity:0;transition:all 0.7s;transition-delay:0.6s}/*流程图5*/
.p2-j-1{width:52px;height:45px;top:410px;left:36px;background:url(../images/p2-j-1.png) no-repeat;opacity:0;transition:all 0.6s;transition-delay:1s}/*箭头1*/
.p2-j-2{width:111px;height:52px;top:479px;left:120px;background:url(../images/p2-j-2.png) no-repeat;opacity:0;transition:all 0.6s;transition-delay:1s}/*箭头2*/
.p2-j-3{width:111px;height:53px;top:479px;left:370px;background:url(../images/p2-j-3.png) no-repeat;opacity:0;transition:all 0.6s;transition-delay:1.2s}/*箭头3*/
.p2-j-4{width:111px;height:52px;top:479px;left:710px;background:url(../images/p2-j-4.png) no-repeat;opacity:0;transition:all 0.6s;transition-delay:1.4s;}/*箭头4*/
.p2-mouse{width:22px;height:25px;top:457px;left:939px;z-index:1000;background:url(../images/p2-mouse.png) no-repeat;opacity:0;transition:all 0.5s;transition-delay:3s}/*鼠标*/
.p2-chilun{width:79px;height:79px;top:460px;left:553px;background:url(../images/p2-chilun.png) no-repeat;}/*齿轮*/
.p2-round-1{width:1045px;height:1045px;left:-250px;top:-210px;background:url(../images/p2-round-1.png) no-repeat;opacity:0.2;}
.p2-round-2{width:1590px;height:1590px;left:-255px;top:-70px;background:url(../images/p2-round-2.png) no-repeat;opacity:0.4;}
/*p2 under active*/
.active .p2-1{opacity:1;top:100px;}
.active .p2-2{opacity:1;top:240px;}
.active .p2-f-1,.active .p2-f-2{opacity:1;left:0;}
.active .p2-f-3,.active .p2-f-4,.active .p2-f-5{opacity:1;top:435px;}
.active .p2-j-1{opacity:1;top:382px;}
.active .p2-j-2{opacity:1;left:150px;}
.active .p2-j-3{opacity:1;left:400px;}
.active .p2-j-4{opacity:1;left:740px;}
.active .p2-mouse{opacity: 1;top:477px;}
.active .p2-round-1{animation:p2_round1 40s infinite linear;
    -moz-animation:p2_round1 40s infinite linear; /* Firefox */
    -webkit-animation:p2_round1 40s infinite linear; /* Safari and Chrome */
    -o-animation:p2_round1 40s infinite linear; /* Opera */}
.active .p2-round-2{animation:p2_round2 35s infinite linear;
    -moz-animation:p2_round2 35s infinite linear; /* Firefox */
    -webkit-animation:p2_round2 35s infinite linear; /* Safari and Chrome */
    -o-animation:p2_round2 35s infinite linear; /* Opera */}
.active .p2-chilun{animation:chilun_fadein 2s 1,is_rotate 5s 2s infinite linear;
    -moz-animation:chilun_fadein 2s 1,is_rotate 5s 2s infinite linear; /* Firefox */
    -webkit-animation:chilun_fadein 2s 1,is_rotate 5s 2s infinite linear; /* Safari and Chrome */
    -o-animation:chilun_fadein 2s 1,is_rotate 5s 2s infinite linear; /* Opera */}
.active .p2-f-2-a{animation:heightMotion 1.2s infinite;
    -moz-animation:heightMotion 1.2s infinite; /* Firefox */
    -webkit-animation:heightMotion 1.2s infinite; /* Safari and Chrome */
    -o-animation:heightMotion 1.2s infinite; /* Opera */}
.active .p2-f-2-b{animation:heightMotion 0.8s infinite;
    -moz-animation:heightMotion 0.8s infinite; /* Firefox */
    -webkit-animation:heightMotion 0.8s infinite; /* Safari and Chrome */
    -o-animation:heightMotion 0.8s infinite; /* Opera */}
.active .p2-f-2-c{animation:heightMotion 0.5s infinite;
    -moz-animation:heightMotion 0.5s infinite; /* Firefox */
    -webkit-animation:heightMotion 0.5s infinite; /* Safari and Chrome */
    -o-animation:heightMotion 0.5s infinite; /* Opera */}
.active .p2-f-3-mask{animation:mask_fadeout 1.5s infinite;
    -moz-animation:mask_fadeout 1.5s infinite; /* Firefox */
    -webkit-animation:mask_fadeout 1.5s infinite; /* Safari and Chrome */
    -o-animation:mask_fadeout 1.5s infinite; /* Opera */}
/*p2_keyframes*/
/*p2-round-1圆环1*/
@keyframes p2_round1
{from {transform:rotate(0deg);}
to {transform:rotate(-360deg);}}
@-moz-keyframes p2_round1 /* Firefox */
{from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(-360deg);}}
@-webkit-keyframes p2_round1 /* Safari 和 Chrome */
{from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(-360deg);}}
@-o-keyframes p2_round1 /* Opera */
{from {-o-transform:rotate(0deg);}
to {-o-transform:rotate(-360deg);}}
/*p2-round-2圆环2*/
@keyframes p2_round2
{from {transform:rotate(0deg);}
to {transform:rotate(360deg);}}
@-moz-keyframes p2_round2 /* Firefox */
{from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}}
@-webkit-keyframes p2_round2 /* Safari 和 Chrome */
{from {-webkit-transform:rotate(0deg);}
to {transform:rotate(360deg);}}
@-o-keyframes p2_round2 /* Opera */
{from {-o-transform:rotate(0deg);}
to {-o-transform:rotate(360deg);}}
/*p2-chilun齿轮fadein*/
@keyframes chilun_fadein
{from {opacity:0;}
to {opacity:1;}}
@-moz-keyframes chilun_fadein /* Firefox */
{from {opacity:0;}
to {opacity:1;}}
@-webkit-keyframes chilun_fadein /* Safari 和 Chrome */
{from {opacity:0;}
to {opacity:1;}}
@-o-keyframes chilun_fadein /* Opera */
{from {opacity:0;}
to {opacity:1;}}
/*顺时针旋转*/
@keyframes is_rotate
{from {transform:rotate(0deg);}
to {transform:rotate(360deg);}}
@-moz-keyframes is_rotate /* Firefox */
{from {-moz-transform:rotate(0deg);}
to {transform:rotate(360deg);}}
@-webkit-keyframes is_rotate /* Safari 和 Chrome */
{from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}}
@-o-keyframes is_rotate /* Opera */
{from {-o-transform:rotate(0deg);}
to {-o-transform:rotate(360deg);}}
/*逆时针旋转*/
@keyframes is_rotate_n
{from {transform:rotate(0deg);}
to {transform:rotate(-360deg);}}
@-moz-keyframes chilun_rotate /* Firefox */
{from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(-360deg);}}
@-webkit-keyframes chilun_rotate /* Safari 和 Chrome */
{from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(-360deg);}}
@-o-keyframes chilun_rotate /* Opera */
{from {-o-transform:rotate(0deg);}
to {-o-transform:rotate(-360deg);}}
/*p2-f-2 数据图标 中间的小方块*/
@keyframes heightMotion
{from {height:20%;}
to {height:9%;}}
@-moz-keyframes heightMotion /* Firefox */
{from {height:20%;}
to {height:9%;}}
@-webkit-keyframes heightMotion /* Safari 和 Chrome */
{from {height:20%;}
to {height:9%;}}
@-o-keyframes heightMotion /* Opera */
{from {height:20%;}
to {height:9%;}}
/*maskfadeout>p2-f-3-mask>fadeout*/
@keyframes mask_fadeout
{
    0% {opacity:0;transform:scale(1.3);}
    25% {opacity:0.5;transform:scale(0.3);}
    50%{opacity:0.8;transform:scale(1);}
    100%{opacity:0;transform:scale(0.3);}
}
@-moz-keyframes mask_fadeout /* Firefox */
{
    0% {opacity:0;transform:scale(1.3);}
    25% {opacity:0.5;transform:scale(0.3);}
    50%{opacity:0.8;transform:scale(1);}
    100%{opacity:0;transform:scale(0.3);}
}
@-webkit-keyframes mask_fadeout /* Safari 和 Chrome */
{
    0% {opacity:0;transform:scale(1.3);}
    25% {opacity:0.5;transform:scale(0.3);}
    50%{opacity:0.8;transform:scale(1);}
    100%{opacity:0;transform:scale(0.3);}
}
@-o-keyframes mask_fadeout /* Opera */
{
    0% {opacity:0;transform:scale(1.3);}
    25% {opacity:0.5;transform:scale(0.3);}
    50%{opacity:0.8;transform:scale(1);}
    100%{opacity:0;transform:scale(0.3);}
}
/*p3styles*/
.p3-1{width:388px;height:67px;top:150px;right:0;background:url(../images/p3-1.png) no-repeat;opacity:0;transition:all 1s;}
.p3-round{width:477px;height:510px;background:url(../images/p3-round-1.png) no-repeat;left:140px;top:50%;margin-top:-205px;opacity:0;transition:all 0.7s;transition-delay:1s}
.p3-round > div{position:absolute;}
.p3-round-2{width:300px;height:300px;background:url(../images/p3-round-2.png) no-repeat;top:90px;left:50%;margin-left:-150px;}
.p3-2{width:164px;height:99px;background:url(../images/p3-2.png) no-repeat;top:50%;top:190px;left:50%;margin-left:-82px;}
.p3-f-1{width:131px;height:57px;top:345px;left:-50px;background:url(../images/p3-f-1.png) no-repeat;opacity:0;transition:all 0.5s;transition-delay:1.2s}
.p3-f-2{width:133px;height:57px;top:-10px;left:160px;background:url(../images/p3-f-2.png) no-repeat;opacity:0;transition:all 0.5s;transition-delay:1.4s}
.p3-f-3{width:133px;height:56px;top:310px;right:-50px;background:url(../images/p3-f-3.png) no-repeat;opacity:0;transition:all 0.5s;transition-delay:1.6s}
.p3-mouse{width:117px;height:254px;top:298px;right:0;background:url(../images/p3-mouse.png) no-repeat;opacity:0;transition:all 0.6s;transition-delay:0.6s}
.p3-round-shine1{width:21px;height:21px;top:140px;right:225px;border-radius:100%;background:rgba(255,255,255,0.5);}
.p3-round-shine2{width:13px;height:13px;right:107px;top:290px;border-radius:100%;background:rgba(255,255,255,0.6);}
.p3-round-shine3{width:9px;height:9px;top:155px;right:108px;border-radius:100%;background:rgba(255,255,255,0.5);}
.p3-top-round{width:769px;height:769px;top:-520px;left:-160px;background:url(../images/p3-top-round.png) no-repeat;opacity:0.4;}
.p3-bottom-round{width:1144px;height:1144px;bottom:-655px;right:-530px;background:url(../images/p3-bottom-round.png) no-repeat;opacity:0.2;}
/*p3 under active*/
.active .p3-1{top:200px;opacity:1;}
.active .p3-2{animation:textmotion 1s 1.7s 1;
    -moz-animation:textmotion 1s 1.7s 1; /* Firefox */
    -webkit-animation:textmotion 1s 1.7s 1; /* Safari and Chrome */
    -o-animation:textmotion 1s 1.7s 1; /* Opera */}
.active .p3-mouse{opacity:1;right:12px;}
.active .p3-round{opacity:1;margin-top:-255px;}
.active .p3-round-2{animation:is_rotate 7s 2s infinite linear;
    -moz-animation:is_rotate 7s 2s infinite linear; /* Firefox */
    -webkit-animation:is_rotate 7s 2s infinite linear; /* Safari and Chrome */
    -o-animation:is_rotate 7s 2s infinite linear; /* Opera */}
.active .p3-f-1{left:-70px;opacity:1;}
.active .p3-f-2{top:-30px;opacity:1;}
.active .p3-f-3{right:-70px;opacity:1;}
.active .p3-round-shine1{animation:dotshine 2s 1s infinite;
    -moz-animation:dotshine 2s 1s infinite; /* Firefox */
    -webkit-animation:dotshine 2s 1s infinite; /* Safari and Chrome */
    -o-animation:dotshine 2s 1s infinite; /* Opera */}
.active .p3-round-shine2{animation:dotshine 3s 0.8s infinite;
    -moz-animation:dotshine 3s 0.8s infinite; /* Firefox */
    -webkit-animation:dotshine 3s 0.8s infinite; /* Safari and Chrome */
    -o-animation:dotshine 3s 0.8s infinite; /* Opera */}
.active .p3-round-shine3{animation:dotshine 1s 0.9s infinite;
    -moz-animation:dotshine 1s 0.9s infinite; /* Firefox */
    -webkit-animation:dotshine 1s 0.9s infinite; /* Safari and Chrome */
    -o-animation:dotshine 1s 0.9s infinite; /* Opera */}
.active .p3-f-1{left:-70px;opacity:1;}
.active .p3-top-round{animation:is_rotate_n 30s 1s infinite linear;
    -moz-animation:is_rotate_n 30s 1s infinite linear; /* Firefox */
    -webkit-animation:is_rotate_n 30s 1s infinite linear; /* Safari and Chrome */
    -o-animation:is_rotate_n 30s 1s infinite linear; /* Opera */}
.active .p3-bottom-round{animation:is_rotate 50s 1s infinite linear;
    -moz-animation:is_rotate 50s 1s infinite linear; /* Firefox */
    -webkit-animation:is_rotate 50s 1s infinite linear; /* Safari and Chrome */
    -o-animation:is_rotate 50s 1s infinite linear; /* Opera */}
/*p3-2跨平台整合应用文字过渡动画*/
@keyframes textmotion
{from {-webkit-transform:scale(1.3); transform:scale(1.3);opacity:0;}
to {-webkit-transform:scale(1); transform:scale(1);opacity:1;}}
@-moz-keyframes textmotion /* Firefox */
{from {-webkit-transform:scale(1.3); transform:scale(1.3);opacity:0;}
to {-webkit-transform:scale(1); transform:scale(1);opacity:1;}}
@-webkit-keyframes textmotion /* Safari 和 Chrome */
{from {-webkit-transform:scale(1.3); transform:scale(1.3);opacity:0;}
to {-webkit-transform:scale(1); transform:scale(1);opacity:1;}}
@-o-keyframes textmotion /* Opera */
{from {-webkit-transform:scale(1.3); transform:scale(1.3);opacity:0;}
to {-webkit-transform:scale(1); transform:scale(1);opacity:1;}}
/*p4styles*/
.p4-1{width:203px;height:49px;left:-20px;top:70px;background:url(../images/p4-1.png) no-repeat;opacity:0;transition:all 1s;transition-delay:2.5s}
.p4-r-arrow{width:13px;height:18px;left:200px;top:85px;background:url(../images/p4-r-arrow.png) no-repeat;opacity:0;transition:all 1s;transition-delay:2.6s}
.p4-1i{width:203px;height:49px;left:225px;top:70px;background:url(../images/p4-1i.png) no-repeat;opacity:0;transition:all 1s;transition-delay:2.7s}
/*heightSmallerThan680*/
.p4-1s{width:49px;height:222px;left:-80px;top:40px;background:url(../images/p4-1s.png) no-repeat;opacity:0;transition:all 1s;transition-delay:2.5s}
.p4-r-arrows{width:18px;height:13px;left:-65px;top:280px;background:url(../images/p4-r-arrows.png) no-repeat;opacity:0;transition:all 1s;transition-delay:2.6s}
.p4-1is{width:48px;height:220px;left:-80px;top:315px;background:url(../images/p4-1is.png) no-repeat;opacity:0;transition:all 1s;transition-delay:2.7s}
/*-->*/
.p4-tree{width:505px;height:456px;left:50%;margin-left:-252px;bottom:70px;z-index:500;}
.p4-tree > div{position:absolute;}
.p4-tree-root{width:196px;height:289px;left:170px;bottom:-60px;background:url(../images/p4-tree-root.png) no-repeat;opacity:0;transition:all 1.6s;}
.p4-leaf1{width:233px;height:82px;left:0;bottom:188px;background:url(../images/p4-leaf1.png) no-repeat;opacity:0;transition:all 0.5s;transition-delay:1s}
.p4-leaf2{width:135px;height:169px;left:138px;bottom:266px;background:url(../images/p4-leaf2.png) no-repeat;opacity:0;transition:all 0.4s;transition-delay:1.2s}
.p4-leaf3{width:162px;height:188px;right:80px;bottom:266px;background:url(../images/p4-leaf3.png) no-repeat;opacity:0;transition:all 0.3s;transition-delay:1.4s}
.p4-leaf4{width:191px;height:84px;right:0;bottom:230px;background:url(../images/p4-leaf4.png) no-repeat;opacity:0;transition:all 0.2s;transition-delay:1.6s}
.softs{width:340px;height:90px;}
.softs strong{font-weight:bold;font-size:24px;font-family:'微软雅黑','Microsoft Yahei','5FAE8F6F96C59ED1';display:block;margin-bottom:10px;color:#000;}
.softs strong span{color:#f60;}
.softs p{color:#000;font-size:18px;font-family:'微软雅黑','Microsoft Yahei','5FAE8F6F96C59ED1';line-height:22px;}
.softs a{font:normal 18px/30px '微软雅黑','Microsoft Yahei','5FAE8F6F96C59ED1';color:#7f7f7f;display:block;text-align:right;}
.p4-soft1{bottom:165px;left:-315px; text-align:right;opacity:0;transition:all 0.3s;transition-delay:1.6s}
.p4-soft2{top:-20px;left:-180px;text-align:right;opacity:0;transition:all 0.3s;transition-delay:1.7s}
.p4-soft3{top:-40px;right:-245px;text-align:left;opacity:0;transition:all 0.3s;transition-delay:1.8s}
.p4-soft4{bottom:230px;right:-320px;text-align:left;opacity:0;transition:all 0.3s;transition-delay:1.9s}
.p4-soft5{bottom:-60px;right:90px;text-align:right;opacity:0;transition:all 0.5s;transition-delay:1.5s}
.p4-sunshine1{width:40px;height:40px;top:100px;right:250px;border-radius:100%;background:rgba(255,255,255,0.5);opacity:0.8;transition:all 3s;transition-delay:2s;}
.p4-sunshine2{width:20px;height:20px;top:120px;right:270px;border-radius:100%;background:rgba(255,255,255,0.6);transition:all 8s;transition-delay:2.3s;}
.p4-sunshine3{width:30px;height:30px;top:130px;right:280px;border-radius:100%;background:rgba(255,255,255,0.3);transition:all 4s;transition-delay:2.4s;}
.p4-sunshine4{width:10px;height:10px;top:150px;right:300px;border-radius:100%;background:rgba(255,255,255,0.4);transition:all 6s;transition-delay:2.1s;}
.p4-cloud1{width:623px;height:427px;left:0px;top:70px;background:url(../images/p4-cloud1.png) no-repeat;z-index:100;transition:all 21s;transition-delay:2s}
.p4-cloud2{width:289px;height:192px;top:170px;right:470px;background:url(../images/p4-cloud2.png) no-repeat;z-index:120;transition:all 16s;transition-delay:2s}
.p4-sunshine5{width:13px;height:13px;top:130px;right:280px;border-radius:100%;background:rgba(235,245,75,0.6);transition:all 3s;transition-delay:1.9s;}
.p4-sunshine6{width:21px;height:21px;top:90px;right:240px;border-radius:100%;background:rgba(235,245,75,0.3);transition:all 5s;transition-delay:1.5s;}
.p4-sunshine7{width:10px;height:10px;top:150px;right:300px;border-radius:100%;background:rgba(255,255,255,0.4);transition:all 11s;transition-delay:2s;}
/*p4 under active*/
.active .p4-1{opacity:1;left:0;}
.active .p4-1i{opacity:1;left:255px;}
.active .p4-r-arrow{left:220px;opacity:1;}
.active .p4-tree-root{bottom:0;opacity:1;}
.active .p4-leaf1{opacity:1;}
.active .p4-leaf2{opacity:1;}
.active .p4-leaf3{opacity:1;}
.active .p4-leaf4{opacity:1;}
.active .p4-soft1{opacity:1;left:-345px;}
.active .p4-soft2{opacity:1;left:-210px;}
.active .p4-soft3{opacity:1;right:-275px;}
.active .p4-soft4{opacity:1;right:-350px;}
.active .p4-soft5{opacity:1;bottom:-120px;}
.active .p4-sunshine1{top:400px;right:580px;opacity:0;}
.active .p4-sunshine2{top:420px;right:570px;opacity:0;}
.active .p4-sunshine3{top:430px;right:560px;opacity:0;}
.active .p4-sunshine4{top:450px;right:600px;opacity:0;}
.active .p4-sunshine5{top:480px;right:750px;opacity:0;}
.active .p4-sunshine6{top:460px;right:600px;opacity:0;}
.active .p4-sunshine7{top:490px;right:610px;opacity:0;}
.active .p4-cloud1{left:600px;}
.active .p4-cloud2{right:270px;}
.active .p4-1s{opacity:1;}
.active .p4-1is{opacity:1;}
.active .p4-r-arrows{opacity:1;}
/*p4styles*/
.p5-1{width:258px;height:67px;left:0;top:145px;background:url(../images/p5-1.png) no-repeat;opacity:0;transition:all 1s;}
.p5-cup{width:148px;height:157px;left:290px;top:60px;background:url(../images/p5-cup.png) no-repeat;opacity:0;transition:all 1s;transition-delay:0.6s;transform:rotate(-40deg);}
.p5-taiji{width:65px;height:65px;left:331px;top:110px;background:url(../images/p5-taiji.png) no-repeat;opacity:0.7;z-index:10;}
.p5-mobile{width:120px;height:147px;left:495px;top:100px;background:url(../images/p5-mobile.png) no-repeat;opacity:0;transition:all 0.8s;transition-delay:1s}
.p5-computer{width:549px;height:558px;right:-70px;top:-40px;background:url(../images/p5-computer.png) no-repeat;opacity:0;transition:all 0.8s;transition-delay:0.9s}
.p5-paper{width:296px;height:294px;right:-220px;top:440px;background:url(../images/p5-paper.png) no-repeat;opacity:0;transition:all 1s;transition-delay:1.1s}
.p5-list{top:390px;opacity:0;transition:all 0.8s;transition-delay:1.5s}
.p5-list li{height:20px;line-height:20px;padding-left:20px;display:block;position:relative;margin-bottom:15px;text-align:left;}
.p5-list li a{font-family:'微软雅黑','Microsoft Yahei','5FAE8F6F96C59ED1';font-size:20px;color:#825528;font-weight:bold;}
.p5-list li i{display:block;width:23px;height:20px;background:url(../images/p5-list-ico.png) no-repeat;position:absolute;left:0;top:0;}
.p5-head{width:297px;height:69px;left:0;top:90px;background:url(../images/p5-head.png) no-repeat;opacity:1;}
.p5-navs{width:100%;bottom:30px;left:0;border-top:1px solid #825528;height:50px;line-height:50px;}
.p5-navs a{display:inline-block;font-family:'微软雅黑','Microsoft Yahei','5FAE8F6F96C59ED1';float:left;line-height:50px;padding:0 20px 0 0;color:#825528;font-size:16px;text-decoration: underline;}
/*p5 under active*/
.active .p5-1{opacity:1;top:100px;}
.active .p5-cup{opacity:1;transform:rotate(0);}
.active .p5-mobile{top:80px;opacity:1;}
.active .p5-computer{right:-50px;opacity:1;}
.active .p5-paper{top:400px;opacity:1;transform:rotate(8deg);}
.active .p5-taiji{animation:is_rotate 7s 2s infinite linear;
    -moz-animation:is_rotate 7s 2s infinite linear; /* Firefox */
    -webkit-animation:is_rotate 7s 2s infinite linear; /* Safari and Chrome */
    -o-animation:is_rotate 7s 2s infinite linear; /* Opera */}
.active .p5-list{top:230px;opacity:1;}