@keyframes startAni{from{transform:scale(1.1)}to{transform:scale(0.9)}}@keyframes noteGo{0%{opacity:.3;transform:translate(0, 0) scale(0.3)}10%{opacity:.6;transform:translate(-20%, -10%) scale(0.37)}40%{opacity:1;transform:translate(-80%, 30%) scale(0.58)}100%{opacity:0;transform:translate(-200%, -10%) scale(1)}}@keyframes sc2Btn{0%{transform:translateY(0)}100%{opacity:0;transform:translateY(100%) scale(0.8)}}@keyframes circleRoll{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes lightDown1{0%{left:-429%}10%,100%{left:100%}}@keyframes lightDown2{0%,10%{left:-429%}20%,100%{left:100%}}@keyframes lightDown3{0%,20%{left:-429%}30%,100%{left:100%}}@keyframes lightDown4{0%,40%{left:-429%}50%,100%{left:100%}}@keyframes nextBtn{0%{opacity:0}100%{opacity:1}}@keyframes fingerIn{0%{transform:translateX(150%);opacity:0}80%{transform:translateX(0) rotate(30deg)}100%{transform:translateX(0) rotate(0);opacity:1}}html{font-size:312.5%}body{font:.32rem/.54rem sans-serif;color:#000}.screen1{position:fixed;width:100vw;height:100vh;overflow:hidden;background:url("../img/a4.jpg") no-repeat 50% 0/100% 100%;z-index:50}.screen1 .logo{width:16vw;position:absolute;top:4vw;left:61vw}.screen1 .logo1{width:16vw;position:absolute;top:5.6vw;left:79vw}.screen1 .mainTit{width:56.8vw;position:absolute;left:36.2vw;top:35vw}.screen1 .startBtn{width:49vw;position:absolute;left:25vw;top:77vh;animation:startAni .6s infinite alternate}.screen2{position:fixed;width:100vw;height:100vh;overflow:hidden;background:url("../img/b3.jpg") no-repeat 50% 0/100% 100%;z-index:20;opacity:0}.screen2 .player{width:63.7vw;position:absolute;left:50.5vw;top:60.5vh}.screen2 .note{width:25vw;position:absolute;left:41.4vw;top:58.4vh;animation:noteGo 2s infinite linear}.screen2 .txt{font-size:.34rem;color:#fed556;line-height:180%;position:absolute;width:81vw;position:absolute;left:9.5vw;top:11vh;text-shadow:2px 2px 2px #333}.screen2 .txt h1{text-align:center;font-size:.48rem;font-weight:normal;padding-bottom:.25rem}.screen2 .txt p{text-indent:2em;padding-bottom:.1rem}.screen2 .goBtn{width:15.3vw;position:absolute;left:45%;bottom:13vh;transform:translateX(-50%);animation:sc2Btn 1s infinite;z-index:20}.screen3{width:100vw;height:100vh;overflow:hidden;position:relative;background-color:#4d6545;background-position:50% 0;background-repeat:no-repeat;background-size:100% 100%;z-index:1;transition:background-image .6s;opacity:0}.screen3 .tv{width:92.8vw;position:absolute;left:3.6vw;top:13.4vh;z-index:20}.screen3 .snow{width:80vw;height:57vw;position:absolute;left:10vw;top:13.4vh;z-index:15;opacity:0;transition:opacity .2s}.screen3 .gif{width:76vw;position:absolute;left:11.5vw;top:15.8vh}.screen3 .title{width:100%;position:absolute;left:0;top:5.7vh;font-size:.48rem;color:#fed556;font-weight:normal;text-shadow:2px 2px 2px #333;text-align:center;display:flex;justify-content:center;align-items:center}.screen3 .title img{height:.8rem}.screen3 .desc{width:100vw;height:3.2rem;box-sizing:border-box;padding:0 .6rem;position:absolute;left:0;top:48.4vh;font-size:.32rem;color:#fed556;text-shadow:2px 2px 2px #333;transition:transform .3s .4s;z-index:20;padding-top:3vh}.screen3 .keyBoard{width:87vw;position:absolute;left:6.5vw;top:76.5vh;z-index:1}.screen3 .blckKey{width:9vw;position:absolute;top:76.5vh;z-index:5;overflow:hidden}.screen3 .blckKey::before{content:"";width:529%;height:305%;position:absolute;left:-529%;top:-200%;background:url("../img/light.png") no-repeat 0 0/100% 100%;opacity:.6}.screen3 .blckKey.k1{left:14.2vw}.screen3 .blckKey.k1::before{animation:lightDown1 6s infinite linear}.screen3 .blckKey.k2{left:30vw}.screen3 .blckKey.k2::before{animation:lightDown2 6s infinite linear}.screen3 .blckKey.k3{left:45.2vw}.screen3 .blckKey.k3::before{animation:lightDown3 6s infinite linear}.screen3 .blckKey.k4{left:76vw}.screen3 .blckKey.k4::before{animation:lightDown4 6s infinite linear}.screen3 .blckKey img{width:100%}.screen3 .finger{width:30vw;position:absolute;top:68vh;left:67vw;z-index:10;transform:translateX(150%);opacity:0}.screen3 .finger.in{animation:fingerIn 1s forwards}.screen3 .play{width:3vw;height:3.3vw;position:absolute;left:33vw;top:81.9vh;z-index:10;background:url("../img/c2.png") no-repeat 50% 50%/cover;transition:background .3s}.screen3 .play.pause{background:url("../img/c1.png") no-repeat 50% 50%/cover}.screen3 .prev{width:3.7vw;position:absolute;left:16.9vw;top:81.9vh;z-index:10}.screen3 .next{width:3.7vw;position:absolute;left:48vw;top:81.9vh;z-index:10}.screen3 .next_yellow{width:3.7vw;position:absolute;left:48vw;top:81.9vh;z-index:15;animation:nextBtn 1s infinite}.screen3 .more{width:3.4vw;position:absolute;left:78.9vw;top:81.9vh;z-index:10}.screen3 .flag{width:100vw;position:absolute;left:0;top:52.5vh}.vdoBlock{width:100vw;height:100vh;position:fixed;left:0;top:0;z-index:45;background:rgba(0,0,0,.9);display:flex;align-items:center;display:none}.vdoBlock video{width:100vw}.vdoBlock .close{width:5vw;height:5vw;position:absolute;top:4vw;right:4vw;background:url("../img/close.png") no-repeat 50% 50%/100% 100%;z-index:20}.nomute{width:10vw;height:10vw;position:fixed;right:4vw;top:2vh;z-index:40;background:url("../img/mute.png") no-repeat 50% 50%/100% 100%;animation:circleRoll 2s infinite linear}.nomute.mute{background:url("../img/notmute.png") no-repeat 50% 50%/100% 100%;animation:none}.goUp{transition:transform .6s;transform:translateY(-100%)}.preload{width:1px;height:1px;position:fixed;top:-10px;left:-10px}.preload img{width:1px;height:1px}@media screen and (min-width: 1024px){html{font-size:625%}body{width:600px;margin:0 auto;height:100vh;background:#05160d}.screen1{width:600px;height:100vh}.screen1 .logo{width:96px;position:absolute;top:24px;left:366px}.screen1 .logo1{width:96px;top:33.6px;left:474px}.screen1 .mainTit{width:300px;position:absolute;left:217.2px;top:198px}.screen1 .startBtn{width:228px;position:absolute;left:180px;top:82vh}.screen2{width:600px}.screen2 .player{width:382.2px;left:303px}.screen2 .note{width:150px;left:248.4px}.screen2 .txt{font-size:.24rem;width:100%;box-sizing:border-box;padding:0 4vw;left:0;text-align:justify}.screen2 .txt h1{font-size:.32rem}.screen2 .goBtn{width:91.8px;left:40%;bottom:13vh}.screen3{width:600px;opacity:0}.screen3 .tv{width:480px;left:60px}.screen3 .snow{width:408px;height:300px;left:96px}.screen3 .gif{width:396px;left:96px}.screen3 .title{width:100%;top:5vh;font-size:.3rem}.screen3 .title img{height:.5rem}.screen3 .desc{width:750px;height:auto;top:50vh;font-size:.2rem;line-height:180%;padding:2vh 1.2rem 0}.screen3 .keyBoard{width:420px;left:90px;top:77vh}.screen3 .blckKey{width:42px;top:77vh}.screen3 .blckKey.k1{left:138px}.screen3 .blckKey.k2{left:210px}.screen3 .blckKey.k3{left:277.2px}.screen3 .blckKey.k4{left:420px}.screen3 .blckKey img{width:100%}.screen3 .finger{width:120px;left:384px}.screen3 .play{width:18px;height:19.8px;left:222px;top:83vh}.screen3 .prev{width:22.2px;left:147px;top:83vh}.screen3 .next{width:22.2px;left:288px;top:83vh}.screen3 .next_yellow{width:22.2px;left:288px;top:83vh}.screen3 .more{width:20.4px;left:432px;top:83vh}.screen3 .flag{width:750px;left:0;top:41vh}.vdoBlock{width:750px;left:calc((100vw - 750px)/2)}.vdoBlock video{width:750px}.vdoBlock .close{width:30px;height:30px;top:24px;right:24px}.nomute{width:60px;height:60px;right:calc((100vw - 600px)/1.95)}}@media screen and (min-width: 1280px){html{font-size:416.666667%}body{min-height:800px}.screen1{width:600px;height:100vh;min-height:800px}.screen1 .mainTit{width:228px;left:330px;top:150px}.screen3 .tv{width:420px;left:90px}.screen3 .snow{width:348px;height:276px;left:126px}.screen3 .gif{width:348px;left:126px}.screen3 .desc{top:56vh;font-size:.16rem;padding:2vh 1.6rem 0}}@media screen and (min-width: 1440px){html{font-size:468.75%}.screen1{width:600px;height:100vh}.screen1 .mainTit{width:270px;left:288px;top:168px}.screen3 .desc{top:57vh;padding:2vh 1.2rem 0}}@media screen and (min-width: 1600px){html{font-size:520.833333%}.screen1{width:600px;height:100vh}.screen1 .mainTit{width:270px;left:288px;top:168px}.screen3 .desc{top:52vh;padding:2vh 1.2rem 0}}@media screen and (min-width: 1920px){html{font-size:625%}.screen1{width:600px;height:100vh}.screen1 .mainTit{width:330px;left:228px;top:168px}.screen3 .desc{top:50vh;padding:2vh .8rem 0}}@media screen and (min-width: 2560px){html{font-size:833.333%}body{width:800px;margin:0 auto;height:100vh;background:#05160d}.screen1{width:800px;height:100vh}.screen1 .logo{width:128px;position:absolute;top:32px;left:488px}.screen1 .logo1{width:128px;top:44.8px;left:632px}.screen1 .mainTit{width:440px;position:absolute;left:289.6px;top:264px}.screen1 .startBtn{width:336px;position:absolute;left:240px;top:82vh}.screen2{width:800px}.screen2 .player{width:509.6px;left:404px}.screen2 .note{width:200px;left:331.2px}.screen2 .txt{font-size:.34rem;width:100%;box-sizing:border-box;padding:0 4vw;left:0;text-align:justify}.screen2 .txt h1{font-size:.44rem}.screen2 .goBtn{width:122.4px;left:40%;bottom:13vh}.screen3{width:800px;opacity:1}.screen3 .tv{width:720px;left:40px}.screen3 .snow{width:576px;height:456px;left:80px}.screen3 .gif{width:576px;left:80px}.screen3 .title{width:100%;top:5vh;font-size:.44rem}.screen3 .title img{height:.8rem}.screen3 .desc{width:800px;height:auto;top:50vh;font-size:.3rem;line-height:180%;padding:3vh 1rem 0}.screen3 .keyBoard{width:640px;left:80px;top:77vh}.screen3 .blckKey{width:56px;top:77vh}.screen3 .blckKey.k1{left:160px}.screen3 .blckKey.k2{left:264px}.screen3 .blckKey.k3{left:376px}.screen3 .blckKey.k4{left:584px}.screen3 .blckKey img{width:100%}.screen3 .finger{width:160px;left:544px;top:70vh}.screen3 .play{width:24px;height:26.4px;left:280.8px;top:82vh}.screen3 .prev{width:29.6px;left:174.4px;top:82vh}.screen3 .next{width:29.6px;left:388.8px;top:82vh}.screen3 .next_yellow{width:29.6px;left:388.8px;top:82vh}.screen3 .more{width:27.2px;left:600px;top:82vh}.screen3 .flag{width:800px;left:0;top:52vh}.vdoBlock{width:800px;left:calc((100vw - 800px)/2)}.vdoBlock video{width:800px}.vdoBlock .close{width:40px;height:40px;top:32px;right:32px}.nomute{width:80px;height:80px;right:calc((100vw - 800px)/1.95)}}