.stage-0{display:none}
.stage-0 .title-0{width:260px;height:33px;background:url(../textures/title_0_0.png) no-repeat;opacity:0;position:absolute;top:170px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.stage-0 .fingerprint{position:absolute;bottom:60px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);text-align:center;opacity:0}
.stage-0 .fingerprint .pic{width:85px;height:116px;background:url(../textures/stage_0_0.png) no-repeat;display:inline-block;margin-bottom:20px}
.stage-0 .fingerprint .info{width:200px;height:32px;background:url(../textures/title_0_1.png) no-repeat}
.stage-0 .fingerprint .netease_logo{width:130px;height:40px;margin-top:30px;background:url(../textures/netease_logo.png) no-repeat;display:inline-block}
.loading{width:100px;height:50px;padding-top:80px;font-size:24px;text-align:center;position:absolute;background:url(../textures/loading.png) top center no-repeat;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.loading.hideIn{display:none}
.stage-1{display:none}
.stage-1 .text-area-wrap{width:510px;height:510px;background:url(../textures/stage_1_2.png) no-repeat;position:absolute;opacity:0;top:50%;left:50%;-webkit-transform:translate(-50%,-530px);transform:translate(-50%,-530px)}
.stage-1 .text-area-wrap .line-0{width:0;height:51px;background:url(../textures/stage_1_11.png) no-repeat;position:absolute;top:163px;left:58px}
.stage-1 .text-area-wrap .line-1{width:30px;height:0;background:url(../textures/stage_2_1.png) no-repeat;position:absolute;top:147px;left:145px}
.stage-1 .text-area-wrap .line-2{width:30px;height:0;background:url(../textures/stage_3_1.png) no-repeat;position:absolute;top:13px;left:322px}
.stage-1 .text-area-wrap .line-3{width:0;height:29px;background:url(../textures/stage_4_1.png) no-repeat;position:absolute;top:403px;left:165px}
.stage-1 .text-area-wrap .line-fix-0{width:57px;height:39px;background:url(../textures/line_fix_0.png) no-repeat;position:absolute;top:180px;left:147px;opacity:0}
.stage-1 .text-area-wrap .line-fix-1{width:47px;height:44px;background:url(../textures/line_fix_1.png) no-repeat;position:absolute;top:181px;left:284px;opacity:0}
.stage-1 .text-area-wrap .line-fix-2{width:53px;height:94px;background:url(../textures/line_fix_2.png) no-repeat;position:absolute;top:384px;left:295px;opacity:0}
.stage-1 .text-area-wrap .dot{width:33px;height:33px;background:url(../textures/dot.png) no-repeat;position:absolute;display:none}
.stage-1 .text-area-wrap .dot-0{top:172px;left:66px}
.stage-1 .text-area-wrap .dot-0.twinkle{display:block;-webkit-animation:dot_ani_twinkle 1s ease alternate infinite,dot_ani_move_0 3s ease infinite;animation:dot_ani_twinkle 1s ease alternate infinite,dot_ani_move_0 3s ease infinite}
.stage-1 .text-area-wrap .dot-1{top:145px;left:145px}
.stage-1 .text-area-wrap .dot-1.twinkle{display:block;-webkit-animation:dot_ani_twinkle 1s ease alternate infinite,dot_ani_move_1 3s ease infinite;animation:dot_ani_twinkle 1s ease alternate infinite,dot_ani_move_1 3s ease infinite}
.stage-1 .text-area-wrap .dot-2{top:14px;left:320px}
.stage-1 .text-area-wrap .dot-2.twinkle{display:block;-webkit-animation:dot_ani_twinkle 1s ease alternate infinite,dot_ani_move_2 3s ease infinite;animation:dot_ani_twinkle 1s ease alternate infinite,dot_ani_move_2 3s ease infinite}
.stage-1 .text-area-wrap .dot-3{top:400px;left:150px}
.stage-1 .text-area-wrap .dot-3.twinkle{display:block;-webkit-animation:dot_ani_twinkle 1s ease alternate infinite,dot_ani_move_3 3s ease infinite;animation:dot_ani_twinkle 1s ease alternate infinite,dot_ani_move_3 3s ease infinite}
.stage-1 .animation-area{position:absolute;bottom:0;left:0}
.stage-1 .animation-area-0 .aitem{position:absolute}
.stage-1 .animation-area-0 .mountain-0{width:750px;height:510px;background:url(../textures/stage_1_3.png) no-repeat;bottom:0;left:0}
.stage-1 .animation-area-0 .mountain-1{width:750px;height:320px;background:url(../textures/stage_1_5.png) no-repeat;bottom:0;left:0}
.stage-1 .animation-area-0 .human{width:65px;height:98px;background:url(../textures/stage_1_4.png) no-repeat;bottom:43px;left:164px;-webkit-animation:human_shake_shake 3s ease-in-out alternate infinite;animation:human_shake_shake 3s ease-in-out alternate infinite}
.stage-1 .animation-area-0 canvas{width:100%;height:500px;position:absolute;bottom:0;left:0;opacity:0}
.stage-1 .animation-area-1 .aitem{position:absolute}
.stage-1 .animation-area-1 .wave-0{width:950px;height:205px;background:url(../textures/stage_2_12.png) no-repeat;background-size:cover;left:-100px;-webkit-animation:wave_ani_move 4s 1s linear alternate infinite;animation:wave_ani_move 4s 1s linear alternate infinite;bottom:20px}
.stage-1 .animation-area-1 .ship{width:120px;height:82px;background:url(../textures/stage_2_13.png) no-repeat;background-size:cover;left:500px;bottom:185px;-webkit-animation:ship_ani_rotate 5s ease-in-out alternate infinite;animation:ship_ani_rotate 5s ease-in-out alternate infinite}
.stage-1 .animation-area-1 .wave-1{width:950px;height:180px;background:url(../textures/stage_2_11.png) no-repeat;background-size:cover;left:-100px;-webkit-animation:wave_ani_move 4s .5s linear alternate infinite;animation:wave_ani_move 4s .5s linear alternate infinite;bottom:20px}
.stage-1 .animation-area-1 .wave-2{width:950px;height:85px;background:url(../textures/stage_2_10.png) no-repeat;background-size:cover;left:-100px;-webkit-animation:wave_ani_move 4s 2s linear alternate infinite;animation:wave_ani_move 4s 2s linear alternate infinite;bottom:90px}
.stage-1 .animation-area-1 .wave-3{width:950px;height:135px;background:url(../textures/stage_2_9.png) no-repeat;background-size:cover;left:-100px;-webkit-animation:wave_ani_move 4s 1.5s linear alternate infinite;animation:wave_ani_move 4s 1.5s linear alternate infinite;bottom:15px}
.stage-1 .animation-area-1 .wave-4{width:950px;height:120px;background:url(../textures/stage_2_8.png) no-repeat;background-size:cover;left:-100px;-webkit-animation:wave_ani_move 4s 2.5s linear alternate infinite;animation:wave_ani_move 4s 2.5s linear alternate infinite;bottom:10px}
.stage-1 .animation-area-1 .wave-5{width:950px;height:83px;background:url(../textures/stage_2_7.png) no-repeat;background-size:cover;left:-100px;-webkit-animation:wave_ani_move 4s 1.5s linear alternate infinite;animation:wave_ani_move 4s 1.5s linear alternate infinite;bottom:5px}
.stage-1 .animation-area-1 .wave-6{width:950px;height:63px;background:url(../textures/stage_2_6.png) no-repeat;background-size:cover;left:-100px;-webkit-animation:wave_ani_move 4s .5s linear alternate infinite;animation:wave_ani_move 4s .5s linear alternate infinite;bottom:0}
.stage-1 .animation-area-1 .wave-light{width:598px;height:160px;background:url(../textures/stage_2_5.png) no-repeat;left:90px;bottom:40px}
.stage-1 .animation-area-1 .light{width:533px;height:150px;background:url(../textures/stage_2_3.png) no-repeat;left:175px;bottom:300px;-webkit-animation:light_ani_twinkle 1.5s linear alternate infinite;animation:light_ani_twinkle 1.5s linear alternate infinite}
.stage-1 .animation-area-1 .tower{width:358px;height:544px;background:url(../textures/stage_2_4.png) no-repeat;left:0;bottom:0}
.stage-1 .animation-area-1 .birds{width:750px;height:248px;background:url(../textures/stage_2_14.png) no-repeat;left:0;bottom:0;-webkit-animation:birds_fly 10s cubic-bezier(0.36,0.61,0.7,0.31) infinite;animation:birds_fly 10s cubic-bezier(0.36,0.61,0.7,0.31) infinite;-webkit-transform-origin:top;transform-origin:top}
.stage-1 .animation-area-2 .aitem{position:absolute}
.stage-1 .animation-area-2 .worldland{width:750px;height:348px;background:url(../textures/stage_3_3.png) no-repeat;bottom:0;left:0}
.stage-1 .animation-area-2 .tree{width:502px;height:431px;background:url(../textures/stage_3_2.png) no-repeat;bottom:40px;left:0}
.stage-1 .animation-area-2 .leaf-0{width:19px;height:14px;background:url(../textures/stage_3_5.png) 0 0 no-repeat;bottom:300px;left:-20px}
.stage-1 .animation-area-2 .leaf-1{width:17px;height:17px;background:url(../textures/stage_3_5.png) -19px 0 no-repeat;bottom:320px;left:-20px}
.stage-1 .animation-area-2 .leaf-2{width:20px;height:17px;background:url(../textures/stage_3_5.png) -40px 0 no-repeat;bottom:340px;left:-20px}
.stage-1 .animation-area-2 .leaf-3{width:25px;height:17px;background:url(../textures/stage_3_5.png) -60px 0 no-repeat;bottom:360px;left:-20px}
.stage-1 .animation-area-2 .leaf-4{width:19px;height:17px;background:url(../textures/stage_3_5.png) -85px 0 no-repeat;bottom:380px;left:-20px}
.stage-1 .animation-area-2 .leaf-5{width:22px;height:17px;background:url(../textures/stage_3_5.png) -105px 0 no-repeat;bottom:300px;left:-20px}
.stage-1 .animation-area-2 .leaf-6{width:21px;height:16px;background:url(../textures/stage_3_5.png) 0 -17px no-repeat;bottom:320px;left:-20px}
.stage-1 .animation-area-2 .leaf-7{width:20px;height:17px;background:url(../textures/stage_3_5.png) -21px -17px no-repeat;bottom:340px;left:-20px}
.stage-1 .animation-area-3 .aitem{position:absolute}
.stage-1 .animation-area-3 .sun{width:385px;height:233px;background:url(../textures/stage_4_7.png) no-repeat;bottom:0;left:0}
.stage-1 .animation-area-3 .building-0{width:480px;height:102px;background:url(../textures/stage_4_6.png) no-repeat;bottom:0;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
.stage-1 .animation-area-3 .building-1{width:750px;height:437px;background:url(../textures/stage_4_4.png) no-repeat;bottom:0;left:0}
.stage-1 .animation-area-3 .heart{width:370px;height:325px;background:url(../textures/stage_4_3.png) no-repeat;bottom:150px;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);-webkit-animation:heart_beats 1s ease-out alternate infinite;animation:heart_beats 1s ease-out alternate infinite}
.stage-1 .animation-area-3 .cloud-0{width:140px;height:36px;background:url(../textures/stage_4_5.png) 0 0 no-repeat}
.stage-1 .animation-area-3 .cloud-1{width:140px;height:30px;background:url(../textures/stage_4_5.png) 0 -36px no-repeat}
.stage-1 .animation-area-3 .cloud-2{width:140px;height:23px;background:url(../textures/stage_4_5.png) 0 -66px no-repeat}
.stage-1 .others{width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none}
.stage-1 .others .info-0{width:20px;height:469px;background:url(../textures/stage_1_0.png) no-repeat;position:absolute;top:50%;left:50%;-webkit-transform:translate(-325px,-520px);transform:translate(-325px,-520px);opacity:0}
.stage-1 .others .info-0.twinkle{display:block;-webkit-animation:dot_ani_twinkle 3s linear alternate infinite;animation:dot_ani_twinkle 3s linear alternate infinite}
.stage-1 .others .info-1{position:absolute;top:50%;left:50%;-webkit-transform:translate(295px,-460px);transform:translate(295px,-460px);opacity:0}
.stage-1 .others .info-1 div{margin-top:5px}
.stage-1 .others .info-1 .strokes-0{width:47px;height:7px;background:url(../textures/strokes_0.png) center center no-repeat}
.stage-1 .others .info-1 .strokes-1{width:47px;height:40px;background:url(../textures/strokes_1.png) center center no-repeat}
.stage-1 .others .info-1 .strokes-1.on{background:url(../textures/strokes_1_1.png) center center no-repeat}
.stage-1 .others .info-1 .strokes-2{width:47px;height:64px;background:url(../textures/strokes_2.png) center center no-repeat}
.stage-1 .others .info-1 .strokes-2.on{background:url(../textures/strokes_2_1.png) center center no-repeat}
.stage-1 .others .info-1 .strokes-3{width:47px;height:5px;background:url(../textures/strokes_3.png) center center no-repeat}
.stage-1 .others .info-1 .strokes-3.on{background:url(../textures/strokes_3_1.png) center center no-repeat}
.stage-1 .others .info-title{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,30px);transform:translate(-50%,30px);white-space:nowrap;font-size:0}
.stage-1 .others .info-title span{width:35px;height:36px;display:inline-block;font-size:0;opacity:0}
.stage-1 .others .info-title span:nth-child(1){background-position-x:0}
.stage-1 .others .info-title span:nth-child(2){background-position-x:-35px}
.stage-1 .others .info-title span:nth-child(3){background-position-x:-70px}
.stage-1 .others .info-title span:nth-child(4){background-position-x:-105px}
.stage-1 .others .info-title span:nth-child(5){background-position-x:-140px}
.stage-1 .others .info-title span:nth-child(6){background-position-x:-175px}
.stage-1 .others .info-title span:nth-child(7){background-position-x:-210px}
.stage-1 .others .info-title span:nth-child(8){background-position-x:-245px}
.stage-1 .others .info-title span:nth-child(9){background-position-x:-280px}
.stage-1 .others .info-title span:nth-child(10){background-position-x:-315px}
.stage-1 .others .info-title span:nth-child(11){background-position-x:-350px}
.stage-1 .others .info-title span:nth-child(12){background-position-x:-385px}
.stage-1 .others .info-title span:nth-child(13){background-position-x:-420px}
.stage-1 .others .info-title span:nth-child(14){background-position-x:-455px}
@-webkit-keyframes dot_ani_twinkle{0%{opacity:0}
25%{opacity:.5}
100%{opacity:1}
}
@keyframes dot_ani_twinkle{0%{opacity:0}
25%{opacity:.5}
100%{opacity:1}
}
@-webkit-keyframes dot_ani_move_0{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(350px,0);transform:translate(350px,0)}
}
@keyframes dot_ani_move_0{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(350px,0);transform:translate(350px,0)}
}
@-webkit-keyframes dot_ani_move_1{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(0,200px);transform:translate(0,200px)}
}
@keyframes dot_ani_move_1{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(0,200px);transform:translate(0,200px)}
}
@-webkit-keyframes dot_ani_move_2{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(0,450px);transform:translate(0,450px)}
}
@keyframes dot_ani_move_2{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(0,450px);transform:translate(0,450px)}
}
@-webkit-keyframes dot_ani_move_3{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(160px,0);transform:translate(160px,0)}
}
@keyframes dot_ani_move_3{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(160px,0);transform:translate(160px,0)}
}
@-webkit-keyframes heart_beats{0%{-webkit-transform:translate(-50%,0) scale(0.9);transform:translate(-50%,0) scale(0.9)}
100%{-webkit-transform:translate(-50%,0) scale(1.1);transform:translate(-50%,0) scale(1.1)}
}
@keyframes heart_beats{0%{-webkit-transform:translate(-50%,0) scale(0.9);transform:translate(-50%,0) scale(0.9)}
100%{-webkit-transform:translate(-50%,0) scale(1.1);transform:translate(-50%,0) scale(1.1)}
}
@-webkit-keyframes wave_ani_move{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(100px,0);transform:translate(100px,0)}
}
@keyframes wave_ani_move{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
100%{-webkit-transform:translate(100px,0);transform:translate(100px,0)}
}
@-webkit-keyframes light_ani_twinkle{0%{opacity:0}
100%{opacity:1}
}
@keyframes light_ani_twinkle{0%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes ship_ani_rotate{0%{-webkit-transform:rotate(0) translate(0,0);transform:rotate(0) translate(0,0)}
25%{-webkit-transform:rotate(5deg) translate(-20px,0);transform:rotate(5deg) translate(-20px,0)}
45%{-webkit-transform:rotate(0) translate(-10px,0);transform:rotate(0) translate(-10px,0)}
70%{-webkit-transform:rotate(-5deg) translate(5px,0);transform:rotate(-5deg) translate(5px,0)}
100%{-webkit-transform:rotate(0) translate(0,0);transform:rotate(0) translate(0,0)}
}
@keyframes ship_ani_rotate{0%{-webkit-transform:rotate(0) translate(0,0);transform:rotate(0) translate(0,0)}
25%{-webkit-transform:rotate(5deg) translate(-20px,0);transform:rotate(5deg) translate(-20px,0)}
45%{-webkit-transform:rotate(0) translate(-10px,0);transform:rotate(0) translate(-10px,0)}
70%{-webkit-transform:rotate(-5deg) translate(5px,0);transform:rotate(-5deg) translate(5px,0)}
100%{-webkit-transform:rotate(0) translate(0,0);transform:rotate(0) translate(0,0)}
}
@-webkit-keyframes birds_fly{0%{-webkit-transform:scale(0) translate(300px,-300px) skewX(20deg);transform:scale(0) translate(300px,-300px) skewX(20deg)}
20%{-webkit-transform:scale(0.8) translate(100px,-100px) skewX(5deg);transform:scale(0.8) translate(100px,-100px) skewX(5deg)}
100%{-webkit-transform:scale(5) translate(0,0) skewX(0);transform:scale(5) translate(0,0) skewX(0)}
}
@keyframes birds_fly{0%{-webkit-transform:scale(0) translate(300px,-300px) skewX(20deg);transform:scale(0) translate(300px,-300px) skewX(20deg)}
20%{-webkit-transform:scale(0.8) translate(100px,-100px) skewX(5deg);transform:scale(0.8) translate(100px,-100px) skewX(5deg)}
100%{-webkit-transform:scale(5) translate(0,0) skewX(0);transform:scale(5) translate(0,0) skewX(0)}
}
@-webkit-keyframes human_shake_shake{0%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
100%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
}
@keyframes human_shake_shake{0%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
100%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
}
.stage-5{display:none;opacity:0}
.stage-5 .text-area-wrap{width:510px;height:509px;background:url(../textures/nian_bg.png) no-repeat;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-530px);transform:translate(-50%,-530px)}
.stage-5 .nian-2d{width:510px;height:509px;background:url(../textures/nian_text.png) no-repeat;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-530px);transform:translate(-50%,-530px)}
.stage-5 .title-0{width:321px;height:67px;background:url(../textures/stage_5_0.png) no-repeat;position:absolute;bottom:100px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}
.stage-5 .title-2{width:167px;height:43px;background:url(../textures/stage_5_2.png) no-repeat;position:absolute;bottom:180px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}
.stage-5 .title-1{width:524px;height:52px;background:url(../textures/stage_5_1.png) no-repeat;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,200px);transform:translate(-50%,200px);opacity:0}
.stage-6{display:none}
.music-btn{position:fixed;width:45px;height:46px;top:55px;right:30px;background:url(../textures/music_btn.png) no-repeat}
.music-btn.on{-webkit-animation:rotate_btn 4s linear infinite;animation:rotate_btn 4s linear infinite}
@-webkit-keyframes rotate_btn{0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes rotate_btn{0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}