/* CSS Document */ *{margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;} html{margin:0; padding:0; height:100%;} body{width:100%; height:100%; font-family:"SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","Apple Legacy Chevron","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif; font-size:0.24rem; color:#404040} ul,ol,li {list-style: none;} a,input,li,label,span,button,textarea,#club_comment{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)} input{-webkit-appearance: none; } a{color:#404040} .ico{ background-image:url(../images/ico.png);background-size:7.5rem 5rem;-webkit-background-size:7.5rem 5rem; background-repeat:no-repeat} .clear{ height:0; overflow:hidden; clear:both;} .s-off{ display:none;} .s-on{ display:block;} /*屏幕翻转防阻塞*/ @-webkit-keyframes rotation { 10% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg) } 90% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 100% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } } @keyframes rotation { 10% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg) } 90% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 100% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } } #orientLayer {display:none; } /*@media screen and (orientation: landscape) {#orientLayer{display: block;}}*/ .mod{display:none;position:fixed;height:100%;width:100%;left:0;top:0;right:0;bottom:0;background:#cccccc;background-size:100% auto;-webkit-background-size:100% auto;z-index:9997} .mod_content{position:absolute;width:100%;top:45%;margin-top:-0.75rem;text-align:center} .mod_orient{ display:inline-block;width:0.67rem; height:1.09rem;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAADaCAMAAABU68ovAAAAXVBMVEUAAAD29vb////x8fH////////x8fH5+fn29vby8vL////5+fn39/f6+vr////x8fH////////+/v7////09PT////x8fH39/f////////////////////x8fH///+WLTLGAAAAHXRSTlMAIpML+gb4ZhHWn1c2gvHBvq1uKJcC6k8b187lQ9yhhboAAAQYSURBVHja7d3blpowFIDhTUIAOchZDkre/zE7ycySrbUUpsRN2/1fzO18KzEqxEVgTiZNfgmmtxRc8iaR8HNe8x4BtjQePKayYCIoyBSgvNNE1AkNSHqZyLqk97EgUCCHBzZ5mkg7ScvIJuIyOyXBRFxgpqWZyGsAZLB1KjsJi8nutHU4JCRbFRH8tmirI9k8Jx2sqNs8K/m0LQkrktO2crgcgXGB4AiTEsB0hJfo9MGgX7CGcYiYwQxmMOOvZwRhBG8tCoMXjBDeXvWCEcHbi14wgCBmMIMZzGAGM5jxETNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxA8cMHDNwzMAxY6E2rUQxnH2tz9cirlJFwFBJedaPnUv0M7++egPDE8iAJcIDmxwH5wwv9vUviw2kLbVO3TJU5uul/EyB0FoLp4x60PdGUd3qPurrWyjGGTc05u+1dcgI7/+tCCPARWGhH7o5Y7RCf+bH9ctXLp6v2BVDxfqz0oPXeSVaNtINo/1SXDv4dck8IIkbhtC2ol+iouEonTBCbYvVMnXOjxww6s/RFrBUpXHh/gw1rHj5d/qhYn9Gpk2FWh6xRBRX5Oj3Znh2Sq49/L6+y8pB26q9GbE2dbA2mVbx6I+7MfBglLCttm73ZQi7AD3iL4HqjFYJHSPRppqaUaJ3ATpGa+ckpGak2hRRMyqjGMkvl+xyFeSMwjAqcsZgGDdyhl0oNTnDN4yenJGZFGxNChP5/Y3efh6SM2rDOJMzboYxkDMqwyjIGcIw6F+io2FU1IxIm1JqRmgXSkvNKNCXeTpGrU0JNSO2c6LIGPgCS8AuDHz9ta0SXWDtxoDRH+MqlbC2Dt2G2JFRadtQZt2qq/orGowdGb2euxYiqWEpVWhTBnszoNAPdStuQwxqf0aocdWKW4Z+DfszIh8pxJqbuCE4YAC+4bm0evtipjpgJHeFnyyt1Ku2xa0bhjxr27p75rECNwyI9ZwvXkHq+7aTaMEV44YYy/spfgjgjNHaWW+GeUhGEX7tLlVinIFDDSgnOwhi1V6bU0b6tVS9eAERe863g4dRrtiHdc6o+nn5vtyVVgR79Cqt4uL6gfHPQyGqtP2vf7HADGbcYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JiBYwaOGThm4JjhtOM+J/AgT008yDMkN/dPP9hzS8zAMQN3OEYeekp5YU7KOKXwVXqiY+QS7smcinGKABWdiBgpPJTSMHJ4KidhhPBUSMLw4CmPhKHgKUXCkHsygum71ftNSgCX6bsl8FQyfbcL5EdYsDk0R3j7aiA5wpt5AjKg/2gLJEBD/0Hf2OOf/vRrj6z/7GtP4B3nMKyjHA12kIPSjnJs3FEO0TvKkYJHOWCR+rjJH0Vn6fI5PjNbAAAAAElFTkSuQmCC');transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out; -webkit-background-size:0.67rem; background-size:0.67rem} .mod_desc{ margin-top:0.2rem; font-size:0.24rem; line-height:0.5rem;color:#fff} /*layout start*/ @media screen and (min-width: 320px) { html {font-size: 42.666666px;} } @media screen and (min-width: 360px) { html {font-size: 48px;} } @media screen and (min-width: 375px) { html {font-size: 50px;} } @media screen and (min-width: 414px) { html {font-size: 55.2px;} } @media screen and (min-width: 440px) { html {font-size: 58.666666px;} } @media screen and (min-width: 480px) { html {font-size: 64px;} } @media screen and (min-width: 640px) { html {font-size: 85.333333px;} } @media screen and (min-width: 720px) { html {font-size: 96px;} } @media screen and (min-width: 750px) { html {font-size: 100px;} } /*layout end*/ .page {position: absolute; left:0; top:0; width: 100%; height: 100%; overflow:hidden; opacity:0;} .page.in{} #touch{ display:none; position:absolute; z-index:999; left:0; top:0; width:100%; height:100%; -webkit-user-select:none;} #touch .touchImg{ display:none; position:absolute; left:0; right:0; bottom:1rem; margin:0 auto; width:1rem; height:1rem; -webkit-user-select:none; background:url("../images/longBtn.png?v=007") 0 0 no-repeat; background-size:cover; -webkit-background-size:cover; opacity:.8; -webkit-animation:touch 1s infinite alternate; animation:touch 1s infinite alternate; } /*#touch{ display:none; position:absolute; z-index:1000; left:0; right:0; bottom:1rem; margin:0 auto; width:1rem; height:1rem; text-align:center; line-height:1rem; color:#ffffff;background-color:#00a9d3; -webkit-border-radius:1rem; -moz-border-radius:1rem; border-radius:1rem; -webkit-user-select:none;*/ /*-webkit-animation:p5Ami1 1s infinite alternate;*/ /*animation:p5Ami1 1s infinite alternate;*/ /*}*/ #touch.cur{ opacity:0; -webkit-animation:none; animation:none; } #sound{position:absolute; z-index:1000; width:1rem; height:1rem; top:0; right:0; background-image:url(../images/sound.png); background-size:2rem 1rem; -webkit-background-size:2rem 1rem; background-position:0 0; -webkit-animation:rotating 2s linear infinite; animation:rotating 2s linear infinite; } #sound.off{ background-position:-1rem 0; animation:none; -webkit-animation:none; } #wrap{max-width:7.5rem; height:100%; min-height:11.6rem; margin:0 auto; overflow:hidden; position:relative; left:0; right:0; top:0;} /*******************************/ /*******************************/ #loading{ opacity:1; background-color:#ffffff} #loading .logo{position:absolute; width:4rem; height:1.4rem; left:0; top:4rem; right:0; margin:0 auto; background:url("../images/logo.png") 0 0 no-repeat; background-size:4rem 1.4rem; -webkit-background-size:4rem 1.4rem;} #loading .loadnum{ position:absolute; left:0; right:0; bottom:1rem; margin:auto; width:100%; height:1rem; line-height:1rem; text-align:center; font-size:0.28rem;} #loading.ok .loadnum{ -webkit-animation:p5Ami1 1s infinite alternate; animation:p5Ami1 1s infinite alternate; } /*******************************/ /*******************************/ #page0{ background-color:#ffffff; opacity:1;} #page0 .item1{ position:absolute; width:100%; height:100%; left:0; top:0; background:url("../images/p0-1.png") 50% 100% no-repeat; background-size:7.5rem 12.2rem; -webkit-background-size:7.5rem 12.2rem;} #page0 .item2{ position:absolute; width:1.3rem; height:1.1rem; left:0; right:0; margin:0 auto; bottom:1.6rem; background:url("../images/p0-2.png") 0 0 no-repeat; background-size:1.3rem 1.1rem; -webkit-background-size:1.3rem 1.1rem;; -webkit-transform:scale(0.1); transform:scale(0.1); -webkit-transform-origin:50% 0; transform-origin:50% 0; } #page0 .item3{ position:absolute; width:1rem; height:1rem; left:3.24rem; bottom:2.78rem; background:url("../images/p0-3.png") 0 0 no-repeat; background-size:1rem 1rem; -webkit-background-size:1rem 1rem; -webkit-transform:scale(0); transform:scale(0); -webkit-transform-origin:50% 100%; transform-origin:50% 100%; } #page0 .item4{ position:absolute; width:100%; height:100%; left:0; top:0; background:url("../images/p0-4.png") 50% 100% no-repeat; background-size:7.5rem 12.2rem; -webkit-background-size:7.5rem 12.2rem; opacity:0;} #page0 .loadnum{ position:absolute; left:0; right:0; bottom:1rem; margin:auto; width:100%; height:1rem; line-height:1rem; text-align:center; font-size:0.28rem;} #page0 .item5{ position:absolute; width:4rem; height:1rem; left:0; right:0; top:1.3rem; margin:0 auto; } #page0 .item5 i{ display:block; width:4rem; height:0.5rem; background:url("../images/p0-5.png") 0 0 no-repeat; -webkit-background-size:4rem 1rem; background-size:4rem 1rem; opacity:0; -webkit-transform:translate3d(0,60%,0); transform:translate3d(0,60%,0); } #page0 .item5 i:last-child{background-position:0 100%} /*******************************/ /*******************************/ #page1{ background:url("../images/p1-0.jpg") center bottom no-repeat; background-size:7.5rem 12.2rem; -webkit-background-size:7.5rem 12.2rem; z-index:100;} /*#page1 .item1{ position:absolute; width:1rem; height:1rem; left:3.24rem; bottom:2.78rem; background:url("../images/p1-1.png") 0 0 no-repeat; -webkit-background-size:4rem 1rem; background-size:4rem 1rem; } #page1 .item1{*/ /*-webkit-animation:item1Ami 1.4s steps(4) infinite;*/ /*animation:item1Ami 1.4s steps(4) infinite;*/ /*}*/ #page1 .item1{ position:absolute; width:1rem; height:1rem; left:3.24rem; bottom:2.78rem;} #page1 .item1 i{ display:block; position:absolute; left:0; top:0; width:1rem; height:1rem;} #page1 .item1 i:nth-child(1){ background:url("../images/p1-1-1.png") 0 0 no-repeat; -webkit-background-size:1rem 1rem; background-size:1rem 1rem;} #page1 .item1 i:nth-child(2){ display:none; background:url("../images/p1-1-2.png") 0 0 no-repeat; -webkit-background-size:1rem 1rem; background-size:1rem 1rem;} #page1 .item1 i:nth-child(3){ display:none; background:url("../images/p1-1-3.png") 0 0 no-repeat; -webkit-background-size:1rem 1rem; background-size:1rem 1rem;} #page1 .item1 i:nth-child(4){ display:none; background:url("../images/p1-1-4.png") 0 0 no-repeat; -webkit-background-size:1rem 1rem; background-size:1rem 1rem;} #page1 .item2{ position:absolute; width:4rem; height:1rem; left:0; right:0; top:1.3rem; margin:0 auto; } #page1 .item2 i{ display:block; width:4rem; height:0.5rem; background:url("../images/p1-2.png") 0 0 no-repeat; -webkit-background-size:4rem 1rem; background-size:4rem 1rem; opacity:0; -webkit-transform:translate3d(0,60%,0); transform:translate3d(0,60%,0); } #page1 .item2 i:last-child{background-position:0 100%} /*******************************/ /*******************************/ #page2{ background:url("../images/p2-0.jpg") center bottom no-repeat; background-size:7.5rem 12.2rem; -webkit-background-size:7.5rem 12.2rem; z-index:110;} #page2 .item1{ position:absolute; width:4rem; height:1rem; left:0; right:0; top:1.3rem; margin:0 auto; } #page2 .item1 i{ display:block; width:4rem; height:0.5rem; background:url("../images/p2-1.png") 0 0 no-repeat; -webkit-background-size:4rem 1rem; background-size:4rem 1rem; opacity:0; -webkit-transform:translate3d(0,60%,0); transform:translate3d(0,60%,0); } #page2 .item1 i:last-child{background-position:0 100%} /*******************************/ /*******************************/ #page3{ position:absolute; width:100%; height:100%; left:0; top:0; background:url("../images/p3-00.jpg") center bottom no-repeat; background-size:7.5rem 12.2rem; -webkit-background-size:7.5rem 12.2rem; z-index:120;} /*#page3 .item1{ position:absolute; width:100%; height:100%; left:0; top:0; background:url("../images/p3-0.jpg") center bottom no-repeat; background-size:7.5rem 12.2rem; -webkit-background-size:7.5rem 12.2rem;*/ /*transform-origin:50% 10.32rem;*/ /*-webkit-transform-origin:50% 10.32rem;*/ /*}*/ #page3 .item0{ position:absolute; width:40rem; height:65.1rem; left:50%; margin-left:-20rem; bottom:-0.64rem; background:url("../images/p3-0.jpg") 0 0 no-repeat; background-size:40rem auto; -webkit-background-size:40rem auto; -webkit-transform:scale(0.23); transform:scale(0.23); transform-origin:50% 100%; -webkit-transform-origin:50% 100%; } #page3 .item0 .flower{ position:absolute; width:40rem; height:65.1rem; left:0; top:0; background:url("../images/p3-26.png") 0 0 no-repeat; background-size:40rem 65.1rem; -webkit-background-size:40rem 65.1rem; display:none;} #page3 .item01{ position:absolute; width:100%; height:100%; left:0; top:0; background:url("../images/p3-00.jpg") center bottom no-repeat; background-size:7.5rem 12.2rem; -webkit-background-size:7.5rem 12.2rem; opacity:1;} /*******************************/ /*******************************/ #page3 .item1{ position:absolute; left:0.1rem; bottom:5.8rem; width:6rem; height:2.4rem;} #page3 .item1 div{ position:absolute; background:url("../images/p3-1.png") 0 0 no-repeat; background-size:5.8rem 2.4rem; -webkit-background-size:5.8rem 2.4rem;} #page3 .item1 .line{ left:0; top:1.3rem; width:5.8rem; height:1.1rem; background-position:0 -1.3rem; opacity:0; } #page3 .item1 .text{ left:0; top:0; width:5.8rem; height:1.3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item2{ position:absolute; left:0.4rem; bottom:4.5rem; width:5.4rem; height:4.4rem;} #page3 .item2 .pic{ position:absolute; background:url("../images/p3-2-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item2 .line{ left:0; top:0; width:5.4rem; height:4.4rem; background:url("../images/p3-2-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item2 .text1{ left:0; top:0; width:5.4rem; height:0.8rem; background-position:0 0; opacity:0; } #page3 .item2 .text2{ left:0; top:0.8rem; width:5.4rem; height:1.1rem; background-position:0 -0.8rem; opacity:0; } #page3 .item2 .text3{ left:0; top:1.9rem; width:5.4rem; height:1.1rem; background-position:0 -1.9rem; opacity:0; } #page3 .item2 .text4{ left:0; top:3rem; width:5.4rem; height:1.1rem; background-position:0 -3rem; opacity:0; } /*******************************/ /*******************************/ #page3 .item3{ position:absolute; left:0.6rem; bottom:5.4rem; width:6.6rem; height:4.8rem;} #page3 .item3 .pic{ position:absolute; background:url("../images/p3-3-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item3 .line{ left:0; top:0; width:6.6rem; height:4.8rem; background:url("../images/p3-3-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item3 .text1{ left:0; top:0; width:6.6rem; height:0.7rem; background-position:0 0; opacity:0; } #page3 .item3 .text2{ left:0; top:0.7rem; width:6.6rem; height:1.7rem; background-position:0 -0.7rem; opacity:0; } #page3 .item3 .text3{ left:0; top:2.4rem; width:6.6rem; height:1.2rem; background-position:0 -2.4rem; opacity:0; } #page3 .item3 .text4{ left:0; top:3.6rem; width:6.6rem; height:1.2rem; background-position:0 -3.6rem; opacity:0; } /*******************************/ /*******************************/ #page3 .item4{ position:absolute; left:0.7rem; bottom:2.5rem; width:6.4rem; height:5.8rem;} #page3 .item4 .pic{ position:absolute; background:url("../images/p3-4-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item4 .line{ left:0; top:0; width:6.4rem; height:5.8rem; background:url("../images/p3-4-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item4 .text1{ left:0; top:0; width:6.4rem; height:1rem; background-position:0 0; opacity:0; } #page3 .item4 .text2{ left:0; top:1rem; width:6.4rem; height:1.7rem; background-position:0 -1rem; opacity:0; } #page3 .item4 .text3{ left:0; top:2.7rem; width:6.4rem; height:1.8rem; background-position:0 -2.7rem; opacity:0; } #page3 .item4 .text4{ left:0; top:4.5rem; width:6.4rem; height:1.3rem; background-position:0 -4.5rem; opacity:0; } /*******************************/ /*******************************/ #page3 .item5{ position:absolute; left:0.4rem; bottom:3.7rem; width:6.6rem; height:5.8rem;} #page3 .item5 .pic{ position:absolute; background:url("../images/p3-5-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item5 .line{ left:0; top:0; width:6.6rem; height:5.8rem; background:url("../images/p3-5-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item5 .text1{ left:0; top:0; width:6.6rem; height:1rem; background-position:0 0; opacity:0; } #page3 .item5 .text2{ left:0; top:1rem; width:6.6rem; height:1.7rem; background-position:0 -1rem; opacity:0; } #page3 .item5 .text3{ left:0; top:2.7rem; width:6.6rem; height:2.22rem; background-position:0 -2.7rem; opacity:0; } #page3 .item5 .text4{ left:0; top:4.9rem; width:6.6rem; height:0.9rem; background-position:0 -4.9rem; opacity:0; } /*******************************/ /*******************************/ #page3 .item6{ position:absolute; left:0.96rem; bottom:5rem; width:6.2rem; height:2.1rem;} #page3 .item6 .pic{ position:absolute; background:url("../images/p3-6-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item6 .line{ position:absolute; left:0; top:1.3rem; width:6.2rem; height:0.8rem; background:url("../images/p3-6-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item6 .text1{ left:0; top:0; width:6.2rem; height:1.3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item7{ position:absolute; left:0.5rem; bottom:5rem; width:6.2rem; height:2.6rem;} #page3 .item7 .pic{ position:absolute; background:url("../images/p3-7-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item7 .line{ position:absolute; left:0; top:1.8rem; width:6.2rem; height:0.8rem; background:url("../images/p3-6-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item7 .text1{ left:0; top:0; width:6.2rem; height:1.8rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item8{ position:absolute; left:0.26rem; bottom:6.2rem; width:6.2rem; height:2.6rem;} #page3 .item8 .pic{ position:absolute; background:url("../images/p3-8-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item8 .line{ position:absolute; left:0; top:1.8rem; width:6.2rem; height:0.8rem; background:url("../images/p3-6-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item8 .text1{ left:0; top:0; width:6.2rem; height:1.8rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item9{ position:absolute; left:0.5rem; bottom:7.1rem; width:6.2rem; height:3.8rem;} #page3 .item9 .pic{ position:absolute; background:url("../images/p3-9-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item9 .line{ position:absolute; left:0; top:3rem; width:6.2rem; height:0.8rem; background:url("../images/p3-6-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item9 .text1{ left:0; top:0; width:6.2rem; height:3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item10{ position:absolute; left:0.8rem; bottom:7.8rem; width:6.2rem; height:2.6rem;} #page3 .item10 .pic{ position:absolute; background:url("../images/p3-10-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item10 .line{ position:absolute; left:0; top:1.8rem; width:6.2rem; height:0.8rem; background:url("../images/p3-6-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item10 .text1{ left:0; top:0; width:6.2rem; height:1.8rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item11{ position:absolute; left:0.6rem; bottom:6.1rem; width:6.2rem; height:2.6rem;} #page3 .item11 .pic{ position:absolute; background:url("../images/p3-11-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item11 .line{ position:absolute; left:0; top:1.8rem; width:6.2rem; height:0.8rem; background:url("../images/p3-6-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item11 .text1{ left:0; top:0; width:6.2rem; height:1.8rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item12{ position:absolute; left:1rem; bottom:7rem; width:6.2rem; height:2.2rem;} #page3 .item12 .pic{ position:absolute; background:url("../images/p3-12-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item12 .line{ position:absolute; left:0; top:1.4rem; width:6.2rem; height:0.8rem; background:url("../images/p3-6-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item12 .text1{ left:0; top:0; width:6.2rem; height:1.4rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item13{ position:absolute; left:0.76rem; bottom:4.5rem; width:6.2rem; height:2.2rem;} #page3 .item13 .pic{ position:absolute; background:url("../images/p3-13-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item13 .line{ position:absolute; left:0; top:1.4rem; width:6.2rem; height:0.8rem; background:url("../images/p3-6-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item13 .text1{ left:0; top:0; width:6.2rem; height:1.4rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item14{ position:absolute; left:1rem; bottom:7rem; width:6.2rem; height:2.6rem;} #page3 .item14 .pic{ position:absolute; background:url("../images/p3-14-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item14 .line{ position:absolute; left:0; top:1.8rem; width:6.2rem; height:0.8rem; background:url("../images/p3-6-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item14 .text1{ left:0; top:0; width:6.2rem; height:1.8rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item15{ position:absolute; left:0; bottom:8.6rem; width:6rem; height:2.6rem;} #page3 .item15 .pic{ position:absolute; background:url("../images/p3-15-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item15 .line{ position:absolute; left:0; top:1.3rem; width:6rem; height:1.3rem; background:url("../images/p3-15-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item15 .text1{ left:0; top:0; width:6rem; height:1.3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item16{ position:absolute; left:1.1rem; bottom:8.6rem; width:6rem; height:2.6rem;} #page3 .item16 .pic{ position:absolute; background:url("../images/p3-16-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item16 .line{ position:absolute; left:0; top:1.3rem; width:6rem; height:1.3rem; background:url("../images/p3-15-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item16 .text1{ left:0; top:0; width:6rem; height:1.3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item17{ position:absolute; left:1.1rem; bottom:8.3rem; width:5.1rem; height:2.6rem;} #page3 .item17 .pic{ position:absolute; background:url("../images/p3-17-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item17 .line{ position:absolute; left:0; top:1.3rem; width:5.1rem; height:1.3rem; background:url("../images/p3-17-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item17 .text1{ left:0; top:0; width:5.1rem; height:1.3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item18{ position:absolute; left:0.9rem; bottom:7.5rem; width:6rem; height:2.2rem;} #page3 .item18 .pic{ position:absolute; background:url("../images/p3-18-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item18 .line{ position:absolute; left:0; top:0.9rem; width:6rem; height:1.3rem; background:url("../images/p3-15-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item18 .text1{ left:0; top:0; width:6rem; height:0.9rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item19{ position:absolute; left:1.3rem; bottom:5.6rem; width:5.1rem; height:2.2rem;} #page3 .item19 .pic{ position:absolute; background:url("../images/p3-19-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item19 .line{ position:absolute; left:0; top:0.9rem; width:5.1rem; height:1.3rem; background:url("../images/p3-17-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item19 .text1{ left:0; top:0; width:5.1rem; height:0.9rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item20{ position:absolute; left:2rem; bottom:5.4rem; width:5.1rem; height:2.6rem;} #page3 .item20 .pic{ position:absolute; background:url("../images/p3-20-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item20 .line{ position:absolute; left:0; top:1.3rem; width:5.1rem; height:1.3rem; background:url("../images/p3-17-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item20 .text1{ left:0; top:0; width:5.1rem; height:1.3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item21{ position:absolute; left:1.8rem; bottom:6.3rem; width:5.6rem; height:3.9rem;} #page3 .item21 .pic{ position:absolute; background:url("../images/p3-21-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item21 .line{ position:absolute; left:0; top:2.6rem; width:5.1rem; height:1.3rem; background:url("../images/p3-17-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item21 .text1{ left:0; top:0; width:5.6rem; height:2.6rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item22{ position:absolute; left:1.2rem; bottom:7.3rem; width:5.6rem; height:1.8rem;} #page3 .item22 .pic{ position:absolute; background:url("../images/p3-22-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item22 .line{ position:absolute; left:0; top:0; width:5.6rem; height:1.8rem; background:url("../images/p3-22-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item22 .text1{ left:0; top:0.4rem; width:5.6rem; height:1.3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item23{ position:absolute; left:0; bottom:7.3rem; width:6.1rem; height:2.2rem;} #page3 .item23 .pic{ position:absolute; background:url("../images/p3-23-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item23 .line{ position:absolute; left:0; top:0; width:6.1rem; height:2.2rem; background:url("../images/p3-23-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item23 .text1{ left:0; top:0.78rem; width:6.1rem; height:1.3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item24{ position:absolute; left:0; bottom:6.7rem; width:6.6rem; height:2.2rem;} #page3 .item24 .pic{ position:absolute; background:url("../images/p3-24-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item24 .line{ position:absolute; left:0; top:0; width:6.1rem; height:2.2rem; background:url("../images/p3-23-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item24 .text1{ left:0.6rem; top:0.76rem; width:6.6rem; height:1.3rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page3 .item25{ position:absolute; left:0.1rem; bottom:5.5rem; width:6.6rem; height:2.2rem;} #page3 .item25 .pic{ position:absolute; background:url("../images/p3-25-2.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto;} #page3 .item25 .line{ position:absolute; left:0; top:0; width:6.1rem; height:2.2rem; background:url("../images/p3-23-1.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0; } #page3 .item25 .text1{ left:0; top:0.36rem; width:6.6rem; height:1.7rem; background-position:0 0; opacity:0; } /*******************************/ /*******************************/ #page4{} #page4 .item0{ position:absolute; width:25.05rem; height:40.8rem; left:-4.64rem; bottom:-4.1rem; background:url("../images/p4-0.jpg") left bottom no-repeat; background-size:25.05rem 40.8rem; -webkit-background-size:25.05rem 40.8rem; transform-origin:0 100%; -webkit-transform-origin:0 100%; } #page4 .item0 .elephant{ position:absolute; left:7.3rem; bottom:4.6rem; width:5.2rem; height:3.4rem; background:url("../images/p4-1.png") 0 0 no-repeat; background-size:20.8rem 3.4rem; -webkit-background-size:20.8rem 3.4rem; opacity:1; -webkit-animation:elephantAmi 1.4s steps(4) infinite alternate; animation:elephantAmi 1.4s steps(4) infinite alternate; } #page4 .item1{ position:absolute; width:7.5rem; height:4.32rem; left:0; top:1.2rem;} #page4 .item1 i{ display:block; width:7.5rem; height:0.54rem; background:url("../images/p4-2.png") 0 0 no-repeat; -webkit-background-size:7.5rem 4.32rem; background-size:7.5rem 4.32rem; opacity:0; -webkit-transform:translate3d(0,60%,0); transform:translate3d(0,60%,0); } #page4 .item1 i:nth-child(1){background-position:0 0} #page4 .item1 i:nth-child(2){background-position:0 -0.54rem} #page4 .item1 i:nth-child(3){background-position:0 -1.08rem} #page4 .item1 i:nth-child(4){background-position:0 -1.62rem} #page4 .item1 i:nth-child(5){background-position:0 -2.16rem} #page4 .item1 i:nth-child(6){background-position:0 -2.7rem} #page4 .item1 i:nth-child(7){background-position:0 -3.24rem} #page4 .item1 i:nth-child(8){background-position:0 -3.78rem} /*******************************/ /*******************************/ #page5{background:url("../images/p5-0.jpg") center bottom no-repeat; background-size:7.5rem 12.2rem; -webkit-background-size:7.5rem 12.2rem;} #page5 .item1{ position:absolute; width:7.5rem; height:1.5rem; left:0; top:1rem; background:url("../images/p5-1.png") 0 0 no-repeat; -webkit-background-size:7.5rem 1.5rem; background-size:7.5rem 1.5rem;} #page5 .item2{ position:absolute; width:6.4rem; height:6.4rem; left:0; right:0; margin:0 auto; top:3.8rem; background:url("../images/p5-2.png") 0 0 no-repeat; -webkit-background-size:6.4rem 6.4rem; background-size:6.4rem 6.4rem; -webkit-animation:rotating 30s linear infinite; animation:rotating 30s linear infinite; } #page5 .item3box{ position:absolute; width:100%; height:100%; left:0; top:0; -webkit-animation:p5Ami2 1.4s infinite alternate; animation:p5Ami2 1.4s infinite alternate; } #page5 .item3{ position:absolute; width:7.5rem; height:8rem; left:0; top:3rem; background:url("../images/p5-3.png") 0 0 no-repeat; -webkit-background-size:7.5rem 8rem; background-size:7.5rem 8rem; /*-webkit-animation:p5Ami2 1s infinite alternate;*/ /*animation:p5Ami2 1s infinite alternate;*/ -webkit-animation:rotating1 30s linear infinite; animation:rotating1 30s linear infinite; } /*******************************/ /*******************************/ #page6{ background-color:#ffffff; z-index:150;} #page6 .item1{position:absolute; width:4rem; height:1.4rem; left:1.7rem; top:4rem; background:url("../images/logo.png?v=1127") 0 0 no-repeat; background-size:4rem 1.4rem; -webkit-background-size:4rem 1.4rem;} /*******************************/ /*******************************/ #page7{ z-index:130;} #page7 .item0{ position:absolute; width:15rem; height:24.4rem; left:0; bottom:0; background:url("../images/p7-0.jpg") 0 100% no-repeat; background-size:15rem 24.4rem; -webkit-background-size:15rem 24.4rem; transform-origin:0 100%; -webkit-transform-origin:0 100%; } #page7 .item1{ position:absolute; width:15rem; height:24.4rem; left:0; bottom:0; background:url("../images/p7-1.png") 0 100% no-repeat; background-size:15rem 24.4rem; -webkit-background-size:15rem 24.4rem; transform-origin:0 100%; -webkit-transform-origin:0 100%; } #page7 .item2{ position:absolute; width:1.5rem; height:1rem; left:2.2rem; bottom:1rem; background:url("../images/p7-2.png") 0 0 no-repeat; background-size:1.5rem 1rem; -webkit-background-size:1.5rem 1rem; opacity:0;} #page7 .item2 i{ display:block; width:1.5rem; height:1rem; background:url("../images/p7-3.png") 0 0 no-repeat; background-size:6rem 1rem; -webkit-background-size:6rem 1rem; -webkit-animation:elephantAmi1 1.4s steps(4) infinite alternate; animation:elephantAmi1 1.4s steps(4) infinite alternate; } #page7 .item3{ position:absolute; width:7.5rem; height:4.32rem; left:0; top:1.2rem;} #page7 .item3 i{ display:block; width:7.5rem; height:0.54rem; background:url("../images/p4-2.png") 0 0 no-repeat; -webkit-background-size:7.5rem 4.32rem; background-size:7.5rem 4.32rem; opacity:0; -webkit-transform:translate3d(0,60%,0); transform:translate3d(0,60%,0); } #page7 .item3 i:nth-child(1){background-position:0 0} #page7 .item3 i:nth-child(2){background-position:0 -0.54rem} #page7 .item3 i:nth-child(3){background-position:0 -1.08rem} #page7 .item3 i:nth-child(4){background-position:0 -1.62rem} #page7 .item3 i:nth-child(5){background-position:0 -2.16rem} #page7 .item3 i:nth-child(6){background-position:0 -2.7rem} #page7 .item3 i:nth-child(7){background-position:0 -3.24rem} #page7 .item3 i:nth-child(8){background-position:0 -3.78rem} #page7 .item4{ position:absolute; width:100%; height:100%; left:0; bottom:0; background:url("../images/p7-4.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0;} #page7 .item5{ position:absolute; width:100%; height:100%; left:0; bottom:0; background:url("../images/p7-5.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0;} #page7 .item6{ position:absolute; width:100%; height:100%; left:0; bottom:0; background:url("../images/p7-6.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0;} #page7 .item7{ position:absolute; width:100%; height:100%; left:0; bottom:0; background:url("../images/p7-7.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0;} #page7 .item8{ position:absolute; width:100%; height:100%; left:0; bottom:0; background:url("../images/p7-8.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0;} #page7 .item9{ position:absolute; width:100%; height:100%; left:0; bottom:0; background:url("../images/p7-9.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0;} #page7 .item10{ position:absolute; width:100%; height:100%; left:0; bottom:0; background:url("../images/p7-10.png") 0 0 no-repeat; background-size:100% auto; -webkit-background-size:100% auto; opacity:0;} /*******************************/ /*******************************/ #page8{background:url("../images/p5-0.jpg") center bottom no-repeat; background-size:7.5rem 12.2rem; -webkit-background-size:7.5rem 12.2rem; z-index:140;} #page8 .item1{ position:absolute; width:18rem; height:18rem; left:50%; bottom:-15rem; margin-left:-9rem; background:url("../images/p8-1.png") 0 0 no-repeat; -webkit-background-size:18rem 18rem; background-size:18rem 18rem;} #page8 .item2{ position:absolute; width:7.5rem; height:1.5rem; left:0; top:1.2rem; background:url("../images/p8-2.png") 0 0 no-repeat; -webkit-background-size:7.5rem 1.5rem; background-size:7.5rem 1.5rem; opacity:0;} #page8 .item3box1{ position:absolute; width:100%; height:100%; left:0; top:0; opacity:0;} #page8 .item3box2{ position:absolute; width:100%; height:100%; left:0; top:0; -webkit-animation:p5Ami2 1.4s infinite alternate; animation:p5Ami2 1.4s infinite alternate; } #page8 .item3{ position:absolute; width:7.5rem; height:7.5rem; left:0; bottom:1.3rem; background:url("../images/p8-3.png") 0 0 no-repeat; -webkit-background-size:7.5rem 7.5rem; background-size:7.5rem 7.5rem; -webkit-animation:rotating1 30s linear infinite; animation:rotating1 30s linear infinite; } /*#page8 .item2{ position:absolute; width:6.4rem; height:6.4rem; left:0; right:0; margin:0 auto; top:3.8rem; background:url("../images/p5-2.png") 0 0 no-repeat; -webkit-background-size:6.4rem 6.4rem; background-size:6.4rem 6.4rem;*/ /*-webkit-animation:rotating 30s linear infinite;*/ /*animation:rotating 30s linear infinite;*/ /*}*/ /*#page8 .item3box{ position:absolute; width:100%; height:100%; left:0; top:0;*/ /*-webkit-animation:p5Ami2 1.4s infinite alternate;*/ /*animation:p5Ami2 1.4s infinite alternate;*/ /*}*/ /*#page8 .item3{ position:absolute; width:7.5rem; height:8rem; left:0; top:3rem; background:url("../images/p5-3.png") 0 0 no-repeat; -webkit-background-size:7.5rem 8rem; background-size:7.5rem 8rem;*/ /*!*-webkit-animation:p5Ami2 1s infinite alternate;*!*/ /*!*animation:p5Ami2 1s infinite alternate;*!*/ /*-webkit-animation:rotating1 30s linear infinite;*/ /*animation:rotating1 30s linear infinite;*/ /*}*/ /**************/ /*keyframes*/ /**************/ @-webkit-keyframes item1Ami{ 0%{ background-position:0 0;} 100%{ background-position:-4rem 0;} } @keyframes item1Ami{ 0%{ background-position:0 0;} 100%{ background-position:-4rem 0;} } @-webkit-keyframes elephantAmi{ 0%{ background-position:0 0;} 100%{ background-position:-20.8rem 0;} } @keyframes elephantAmi{ 0%{ background-position:0 0;} 100%{ background-position:-20.8rem 0;} } @-webkit-keyframes elephantAmi1{ 0%{ background-position:0 0;} 100%{ background-position:-6rem 0;} } @keyframes elephantAmi1{ 0%{ background-position:0 0;} 100%{ background-position:-6rem 0;} } @-webkit-keyframes flashAmi{ 0%,66%{ opacity:0;} 33%,100%{ opacity:1;} } @keyframes flashAmi{ 0%,66%{ opacity:0;} 33%,100%{ opacity:1;} } @-webkit-keyframes touch{ 0%{ opacity:.8;} 100%{ opacity:0.5;} } @keyframes touch{ 0%{ opacity:0.8;} 100%{ opacity:0.5;} } @-webkit-keyframes p5Ami1{ 0%{ opacity:1;} 100%{ opacity:0.5;} } @keyframes p5Ami1{ 0%{ opacity:1;} 100%{ opacity:0.5;} } @-webkit-keyframes p5Ami2{ 0%,20%{ opacity:1;} 100%{ opacity:0.2;} } @keyframes p5Ami2{ 0%,20%{ opacity:1;} 100%{ opacity:0.2;} } @-webkit-keyframes rotating{ from{-webkit-transform:rotate(0deg);transform:rotate(0deg);} to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg);} } @keyframes rotating{ from{-webkit-transform:rotate(0deg);transform:rotate(0deg);} to{-webkit-transform:rotate(-360deg);transform:rotate(-360deg);} } @-webkit-keyframes rotating1{ from{-webkit-transform:rotate(0deg);transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);transform:rotate(360deg);} } @keyframes rotating1{ from{-webkit-transform:rotate(0deg);transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);transform:rotate(360deg);} }