body,html,main,section{width:100%;height:100%;overflow:hidden}body{position:relative;font-family:"Microsoft YaHei",Helvetica,"Heiti SC"}#back{display:block;width:.6rem;height:.6rem;left:.2rem;top:.6rem;position:absolute;z-index:99;display:none;background:url(../images/back.png?v=04e618) center center no-repeat;background-size:.4rem .4rem}#music{width:.6rem;height:.6rem;right:.2rem;top:.6rem;position:absolute;z-index:99;display:none;background:url(../images/music.png?v=04e618) center center no-repeat;background-size:100% 100%}#music.playing{-webkit-animation:rotate 3s infinite linear;animation:rotate 3s infinite linear}section{position:absolute;top:0;left:0;opacity:0;z-index:1;-webkit-transition:opacity .5s;transition:opacity .5s}section.active{opacity:1;z-index:2}@-webkit-keyframes heart{0%{opacity:0}100%{opacity:1}}@keyframes heart{0%{opacity:0}100%{opacity:1}}.canvas_box{position:fixed!important;left:100vw}.text{color:#fff3c9;font-size:.34rem;text-align:center;line-height:.5rem;position:absolute;z-index:5;left:0;width:100%;bottom:3rem;text-shadow:0 0 2px #000}.text p{opacity:0}#p0 #logo{width:2.48rem;height:2.16rem;margin:0 auto;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%);overflow:hidden}#p0 #logo canvas{display:block;position:absolute;left:0;bottom:0;width:100%;height:auto;min-height:100%}#p0 .bar{height:.2rem;background:#f0f0f0;width:3rem;margin-left:-1.5rem;font-size:.2rem;text-align:center;position:absolute;top:60%;left:50%}#p0 .bar span{display:block;height:100%;background:#e7ad41}#p0 .bar p{line-height:.4rem;bottom:-.4rem;left:0;width:100%}section#p1.active{z-index:3}section#p1 .content{width:100%;height:100%;position:relative}section#p1 .content .edifice_bg{background:url(../images/edifice_bg.jpg?v=04e618) center center no-repeat;background-size:100% 100%;position:absolute;width:8.7rem;height:12.8rem;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}section#p1 .content .edifice_float{opacity:0;-webkit-transition:all 1s;transition:all 1s;position:absolute;width:8.7rem;height:7.98rem;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:url(../images/edifice_float.png?v=04e618) center center no-repeat;background-size:100% 100%;z-index:2}section#p1 .content .shadow{opacity:0;-webkit-transition:all 1s;transition:all 1s;position:absolute;width:8.7rem;height:12.7rem;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:url(../images/shadow.png?v=04e618) center center no-repeat;background-size:100% 100%;z-index:2}section#p1 .content .edifice{position:absolute;width:20.7rem;height:61.15rem;position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}section#p1 .content .edifice .edifice_content{top:0;left:0;position:absolute;width:100%;height:100%;background:url(../images/edifice.png?v=04e618) center center no-repeat;background-size:100% 100%;z-index:2}section#p1 .content .edifice .stars{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:url(../images/stars.png?v=04e618) center center no-repeat;background-size:100% 100%;width:8.7rem;height:8.18rem;z-index:1}section#p1 .content .edifice .cloud{position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:url(../images/cloud.png?v=04e618) center center no-repeat;background-size:100% 100%;width:8.7rem;height:12.8rem;z-index:1}section#p1 .content .edifice .lighting{position:absolute;width:2.62rem;height:1.5rem;left:49.4%;top:4.58rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:url(../images/lighting.png?v=04e618) center center no-repeat;background-size:100% 100%;z-index:2;position:0;-webkit-animation:heart 1s infinite alternate;animation:heart 1s infinite alternate}.pointer{width:.46rem;height:.52rem;position:absolute;left:50%;top:5.6rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:url(../images/click_icon.png?v=04e618) center center no-repeat;background-size:100% 100%;z-index:2;opacity:0}.pointer.ani{opacity:.4;-webkit-animation:show 1s infinite alternate;animation:show 1s infinite alternate}section#p2{background:url(../images/p2_bg.jpg?v=04e618) center center no-repeat;background-size:8.7rem 12.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}section#p2 .text{text-align:right;top:.8rem;left:auto;right:1rem;bottom:auto}section#p2 .content{width:5.9rem;height:10.8rem;position:relative}section#p2 .content .letter{position:absolute;width:3.94rem;height:6.6rem;background:url(../images/p2_letter.png?v=04e618) center center no-repeat;background-size:100% 100%;bottom:.16rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}section#p2 .content .letter .letter_content{margin-top:.96rem;margin-left:.58rem;font-size:.12rem;color:#4e4e4e;width:2.98rem;line-height:.2rem;text-shadow:#000 0 0 .08rem;color:transparent;text-align:justify}section#p2 .content .letter .letter_content span{position:relative;z-index:-1}section#p2 .content .letter .letter_content span:last-child::after{content:'';display:block;position:absolute;right:-6.9rem;bottom:-7.1rem;width:6.98rem;height:7.74rem;background:url(../images/right_hand.png?v=04e618) center center no-repeat;background-size:100% 100%;z-index:1}section#p2 .content .coffee{position:absolute;width:3.1rem;height:3.58rem;background:url(../images/coffee.png?v=04e618) center center no-repeat;background-size:100% 100%;left:-1.4rem;bottom:4rem}section#p2 .content .left_hand{position:absolute;width:5.22rem;height:9.76rem;background:url(../images/left_hand.png?v=04e618) center center no-repeat;background-size:100% 100%;left:-2.8rem;bottom:-6.16rem}section#p3{background:url(../images/p3_bg.jpg?v=04e618) center center no-repeat;background-size:8.7rem 12.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}section#p3 .text_t{top:0;bottom:auto}section#p3 .text_b{top:auto;bottom:2.6rem;text-align:right}section#p3 .content{width:5.9rem;height:10.8rem;position:relative}section#p3 .content .envelope{width:7.16em;height:4.7rem;background:url(../images/envelope.png?v=04e618) center center no-repeat;background-size:100% 100%;position:absolute;top:2.68rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}section#p3 .content .envelope span{display:block;left:0;width:100%;text-align:center;color:#fff;font-size:.3rem;position:absolute;top:88%;padding-left:.4rem}section#p3 .content .envelope::after{width:.46rem;height:.52rem;position:absolute;left:3.5rem;top:3.36rem;background:url(../images/click_icon.png?v=04e618) center center no-repeat;background-size:100% 100%}section#p3 .content .envelope.ani::after{content:'';display:block;opacity:.4;-webkit-animation:show 1s infinite alternate;animation:show 1s infinite alternate}section#p3 .content .feather{width:4.16rem;height:4.46rem;background:url(../images/feather1.png?v=04e618) center center no-repeat;background-size:100% 100%;position:absolute;bottom:1.8rem;left:-1.4rem}section#p4{background:url(../images/p4_bg.jpg?v=04e618) center center no-repeat;background-size:8.7rem 12.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}section#p4 .content{width:5.9rem;height:10.8rem;position:relative}section#p4 .content .envelope{width:7.16em;height:4.7rem;background:url(../images/envelope.png?v=04e618) center center no-repeat;background-size:100% 100%;position:absolute;top:2.68rem;left:50%;z-index:2;margin-left:-3.58rem}section#p4 .content .base{position:absolute;width:7.14rem;height:6.23rem;background:url(../images/base.png?v=04e618) center center no-repeat;background-size:100% 100%;bottom:-1.62rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}section#p4 .content .box>div{opacity:0;z-index:3}section#p4 .content .letter_content{width:5.9rem;height:10.26rem;position:absolute;top:100%;background:url(../images/letter_content.png?v=04e618) center center no-repeat;background-size:100% 100%;-webkit-transform:scale(.95);transform:scale(.95)}section#p4 .content .letter_content img{width:100%;height:100%}section#p4 .content .shell{position:absolute;width:7.3rem;height:6.4rem;background:url(../images/shell.png?v=04e618) center center no-repeat;background-size:100% 100%;bottom:-4.1rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}section#p4 .content .feather1{position:absolute;width:5.06rem;height:4.95rem;background:url(../images/feather2.png?v=04e618) center center no-repeat;background-size:100% 100%;bottom:-.24rem;left:-2.96rem;z-index:8}section#p4 .content .feather2{position:absolute;width:4.94rem;height:4.42rem;background:url(../images/feather3.png?v=04e618) center center no-repeat;background-size:100% 100%;top:1.68rem;right:-3.7rem;z-index:-1;z-index:8}section#p4 .content .feather3{position:absolute;width:4.2rem;height:4.24rem;background:url(../images/feather4.png?v=04e618) center center no-repeat;background-size:100% 100%;top:-3rem;left:-1.24rem;z-index:8}section#p4 .content .feather4{position:absolute;width:3.86rem;height:3.48rem;background:url(../images/feather5.png?v=04e618) center center no-repeat;background-size:100% 100%;bottom:-2.58rem;right:-2.28rem;z-index:8}section#p4 .content .btn_box{position:absolute;z-index:9;width:5.2rem;height:1rem;bottom:.48rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#d3ac74;padding:0 .26rem;border-radius:.16rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}section#p4 .content .btn_box a{display:inline-block;width:2.22rem;line-height:.72rem;height:.72rem;text-align:center;background:url(../images/min_btn.png?v=04e618) center center no-repeat;background-size:100% 100%;font-size:.26rem;color:#3c3c3c}section#p4 .content .generate_btn{position:absolute;width:5.28rem;height:.72rem;line-height:.72rem;background:url(../images/max_btn.png?v=04e618) center center no-repeat;background-size:100% 100%;left:50%;text-align:center;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:-.1rem;font-size:.26rem;color:#3c3c3c}section#p5{background:url(../images/p5_bg.jpg?v=04e618) center center no-repeat;background-size:8.7rem 12.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}section#p5 .content{width:5.9rem;height:10.8rem;position:relative}section#p5 .content>div{pointer-events:none}section#p5 .content .letter_content{width:5.9rem;height:10.26rem;position:absolute;top:0;-webkit-transform:scale(.95);transform:scale(.95)}section#p5 .content .letter_content img{width:100%;height:100%}section#p5 .content .five_stars{position:absolute;width:3.74rem;height:1.74rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:-.96rem;background:url(../images/five_stars.png?v=04e618) center center no-repeat;background-size:100% 100%}section#p5 .content .painting1{position:absolute;width:3.94rem;height:5.7rem;left:-3rem;top:2.46rem;background:url(../images/painting1.png?v=04e618) center center no-repeat;background-size:100% 100%}section#p5 .content .painting2{position:absolute;width:2.5rem;height:2.84rem;right:-1.4rem;top:-.6rem;background:url(../images/painting2.png?v=04e618) center center no-repeat;background-size:100% 100%}section#p5 .content .painting3{position:absolute;width:2.6rem;height:3.36rem;left:-1.4rem;bottom:-1rem;background:url(../images/painting3.png?v=04e618) center center no-repeat;background-size:100% 100%}section#p5 .content .painting4{position:absolute;width:4.24rem;height:5.84rem;right:-3.42rem;bottom:.32rem;background:url(../images/painting4.png?v=04e618) center center no-repeat;background-size:100% 100%}section#p5 .content .trophy{position:absolute;width:5.6rem;height:2.08rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:-1rem;background:url(../images/trophy.png?v=04e618) center center no-repeat;background-size:100% 100%}section#p5 .content .share_btn{position:absolute;display:block;z-index:999;width:1.9rem;height:.6rem;text-align:center;line-height:.6rem;right:.26rem;bottom:.96rem;background:url(../images/min_btn2.png?v=04e618) center center no-repeat;background-size:100% 100%;font-size:.26rem;color:#3c3c3c}@-webkit-keyframes show{from{opacity:.4}to{opacity:1}}@keyframes show{from{opacity:.4}to{opacity:1}}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}