html{font-family:Microsoft YaHei;font-size:10px}body,html{width:100%;height:100%;margin:0;padding:0}body{font-size:0;background:#fff;overflow-x:hidden}*{box-sizing:border-box}footer{width:100%;height:80px;background:#31b876;opacity:1}header{font-size:2rem;font-weight:900;color:#fff;border-bottom:3px solid #31b876}header img{width:40px;display:inline-block;margin:10px 10px 10px 100px}#id-top-playing,header img,header span{vertical-align:middle}#id-top-playing{display:inline-block;width:500px;height:60px;text-align:center;position:absolute;color:#fff;font-size:1.5rem;line-height:60px;left:50%;transform:translateX(-50%)}main{width:100%;height:80%;height:600px;position:relative}.to-page{width:40px;height:80px;position:fixed;top:50%;transform:translateY(-50%);text-align:center;cursor:pointer;transition:all 1s;z-index:100}.to-page,.to-page:hover{background:#fff}.to-page img{width:30px}#id-pre-page{left:0;opacity:0}#id-next-page{right:0}.main-page{width:900px;height:100%;margin:0 auto;position:absolute;top:0;left:50%;right:50%;transition:all 1s;transform:translateX(-50%)}#id-page-0{width:1100px;left:50%;height:1200px}#id-page-1{right:-500%}#id-page-1 .aside{display:inline-block;width:50%;height:100%;position:relative;overflow:hidden}.lunpo{margin:0 auto;width:80%;height:35%}#id-lunpo{top:20%}#id-recommendation{width:100%;margin:150px 0 0 0}#id-recommendation a{text-align:center;display:block;height:50px;color:#000;font-size:2rem;line-height:50px}#id-recommendation-list{display:block;padding-left:130px}#id-recommendation-list .re-music{display:inline-block;width:220px;height:230px;overflow:hidden;cursor:pointer}#id-recommendation-list .re-photo:hover{box-shadow:0 0 10px #fff6f6;opacity:.9}#id-recommendation-list .re-photo{display:block;width:180px;height:180px;background-repeat:no-repeat;background-position:50%;background-size:cover;border-radius:0}#id-recommendation-list .re-name{display:block;height:30px;line-height:30px;color:#fff;font-size:2rem;text-align:center}.left-aside{top:14%;float:left}.right-aside{top:14%;float:right;padding:20px}.music-cd{height:70%;position:relative}.cd-outside{width:330px;height:330px;background:#999}.cd,.cd-outside{border-radius:50%}.cd{width:320px;height:320px;background-image:url(../img/cd.96b129a8.png)}#id-gan{position:absolute;z-index:100;width:100px;left:57%;transform-origin:10px 15px;transform:translateX(-50%) rotate(-30deg);top:-19px;transition:all .5s}#id-cd-cover{display:inline-block;width:235px;height:235px;background-image:url(../img/随我.b33c242f.png);border-radius:50%;transition:all .5s}#id-cd-cover:hover{width:220px;height:220px}.bag{background-position:50%;background-repeat:no-repeat;background-size:cover}#id-music-name{height:30%;color:#fff;font-size:3rem;text-align:center}.music-funtion{padding:30px}.music-funtion span{width:30px;font-size:1.5rem;border-radius:0;padding:5px 15px;margin:20px 10px;cursor:pointer}.music-funtion span,.music-funtion span:hover{background:#31c27c;color:#fff}.play-list{height:5%;text-align:center;font-size:2rem;color:#31c27c;margin:20px}#id-music-play-list{height:90%;font-size:1.6rem;color:#fff}.playing:before{content:"";width:20px;height:20px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFCklEQVR4Xu1bTXbbNhCeoZmou7onqPpEriufIM6mkVZNT2D5BHZOEPcEUU4Q+QTJTko3UU4QeU3qhTlB5V1bI5y+gUiWokgZFAGScoP3vJEBEPPNDwYfBgiG24du9/hv236CAH0C6APAMSB2AYD/0i0AogAAVgiwIIBFR4iPT4NgZXKJaGLyP1y3HxKdAeIprIWu0hZANLcQr3/xvEWVifLGagNAavrRozMAuMzRrq51s4WMO3d317osozIALPg/tn1BLDjisS5Jd85DxG4yfizE66pAVALgfa93Rojj2gTPosJAEF0+Wy6v9wV+LwCm3W4XbftN5OP7flvfOKI5CXE+DAJ2kVKtNADve73nhMjC12PuquKsreH82XL5TnUI9ysFwMxxXgEiB7n2NqLxwPdfqC5QGYCZ674BgJHqxA33mww871xlDUoAzBznLSA+V5mwRX2UQLgXgAPTfBb/e0HYCcCs1xuDZV20SKvllxKGrwfLZWHcKgRARnvLelv+i+0bgWH4W9HukAtAtM9/at1Wty+2RCsS4iQvT8gFYOY4H1qT5Owr9HbWOB/4/tPsz1sATF13hAC85T24RgDnQ8+bpAXbACA6u39+MKa/bQWrjhA/pQ9QGwBMHecKEV8+ONWnBCKi34e+fxX/lABgRPtEt8zsMD+AiD+2AliiDStIAJg5Dp/nX2lbJNFtR4hubG5yfoArQPxe2zf2nYjoxcD3xzz8PwBc97NOJoeIPg59nymxpEkrOzq6akFytRh43kkCgOTwAD7tC2jeuDwA4n6cZ4BtTxDxic5vlpnLAjhhjlFagImUdxcACRCOwxbCQNQfH6IUeQ2A67L2q7K3GwpQASAe0FB8kG6AEZv7ZxnzUelbBgCer4n40Lm7+wFNHXrKAtBEfOBDEppKfvYFoM74wEkRzhznHSD+qmLWZfpUBSABgs8mREy9a88fCOCaLWBuYjvSBUAcH/6y7UvdaTqvEWeaE6BYczoBSMcHtG22Bl0Wu2AAqIxpq/Y1AYAJtzhIAHQmb98AOGAX4FuqytdzvAsEJnJxEzEgImtZcF2XNDcHsw3KGgTEhMlRDca7+q23wZYnQjPXvQAiJlIqm3sWjDgRMsIDVnWBqeOcIl/DbxdT6VC+nEOmwm08DNVVfCEPQ606Dtv2yzrrD+RxOCJEmLn9WZttrc1rixMsmt+kn++Q6Wbgef3GKTHTfl4IQJoSa4IUrcvPiwDYIEW5k+6EqJAWr9nPCwCQ5s//M3kxsnED05Cf58ufdzESXY0FWpkXIi50XhQUR+uMuepzZW6svl2OpqEzYgXqujHfM6P9jRiwwbb8XwskEhAMEaXmVVz8haLEbFeRFAcv7VR0IyBwnYIQfeUiKV6kqUNSEwCULpOLF2ni1rh2APYtlEwFxQkC8FOYg2tMeAw9b2eB9721wvK0aIg1MomoivC522DRoqauezCWoCp8KQCkJRxC8fQ9Pp9VsJILpAdFT2YmrdsiiW6RaGT0yUwSGFtQ5JRWCic5IMSolkdT6Q/LumJDd/dKAZITHMTLbP2v0tioU2kXyE7OByh5d79+OFlP5riuQB1/J8S40YeTaTCik+SIX5CauGrjbxHRF34x2hFiUlXweO2VLSDP3CTHGIYjsCyuA6zKNt9AGM4ty5q0+vF0kd/Jt8VHR6chIlPQ/ISer7i2iqdZuwAQIMCKC6wtosXjr1/nujRdtL5/AdwZ2IAu0qgiAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-size:cover;background-position:50%;position:absolute;top:5px;left:5px}.music-info-title{height:40px;background:#2cb070}.music-info-title span{display:inline-block;line-height:40px;text-align:center}.music-info-title .music-name,.music-info .music-name{width:60%}.music-info-title .music-duration,.music-info .music-duration{width:8%}.music-info-title .music-singer,.music-info .music-singer{width:28%}.music-info{position:relative;height:30px;opacity:.8;cursor:pointer}.music-info span{display:inline-block;line-height:30px;width:32%;text-align:center}.music-info:nth-child(odd){background:#72f9b8}.music-info:nth-child(2n){background:#31b876}.music-info:hover{background:#32f586;color:#fff}#id-music-control img{width:40px;display:inline-block;margin:10px 20px;cursor:pointer}#id-music-control{display:inline-block;width:250px;height:60px;text-align:center;float:left}#id-music-progress{margin:0 250px;height:60px}#id-progress{margin:0 50px;height:60px;position:relative}#id-full-progress{background:#c7c5d2}#id-current-progress{width:0;background:#f7f0f0}#id-music-progress-point{left:0}#id-current-time,#id-duration{display:inline-block;width:50px;height:60px;color:#fff;line-height:60px;font-size:1.5rem;text-align:center}.music-progress{cursor:default;display:inline-block;width:100%;background:#fff;height:5px;border-radius:0}#id-current-time{float:left}#id-duration{float:right}#id-music-vol-order{float:right;display:inline-block;width:250px;height:60px;position:relative}#id-music-vol-order img{cursor:pointer;width:30px;margin-top:15px;margin-left:20px}.music-vol{display:inline-block;width:100px;background:#c1c3c4;height:5px;vertical-align:middle;border-radius:2.5px;margin-left:5px}#id-music-vol{width:50px;background:#fff;height:6px}#id-music-vol-point{left:150px}.point{width:15px;height:15px;margin-left:-5.5px;border-radius:50%;background:#fff;text-align:center;cursor:pointer}.point span{display:inline-block;width:5px;height:5px;background:#08bd71;margin-top:5px;border-radius:50%}.vetical{transform:translateY(-50%)}.midXY,.vetical{position:absolute;top:50%}.midXY{left:50%;transform:translateX(-50%) translateY(-50%)}#id-theme{height:40px;width:50px;display:inline-block;left:80%;position:absolute;top:2rem;cursor:pointer}#id-theme1{float:left;background:#fbfbfb;border-radius:50%;border:2px solid #1d7043}#id-theme1,#id-theme2{height:20px;width:20px}#id-theme2{float:right;background:red;border-radius:50%;border:2px solid #fff}#id-lunpo{width:100%;height:100%;margin:0 auto;perspective:300px;perspective-origin:50% 50%;transform-style:preserve-3d;position:relative}#id-lunpo .photo{display:inline-block;width:300px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-150px;transition:all .5s;border-radius:0;cursor:pointer}#id-lunpo .photo:hover{transform:translateZ(150px);box-shadow:0 0 5px #000}#id-lunpo span{background-repeat:no-repeat;background-position:50%;background-size:cover;overflow:hidden;filter:brightness(90%)}#id-lunpo span:hover{filter:brightness(100%);box-shadow:0 0 10px #777}#id-lunpo span a{position:absolute;bottom:0;width:100%;height:40px;display:inline-block;font-size:1.8rem;color:#fff;letter-spacing:2px;line-height:40px;font-weight:800;background:#34e3ce}#id-lunpo span a,#visualizer_wrapper{text-align:center}