*{margin:0; padding:0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
html{font-size:16px;}
html, body{width:100%; height:100%; user-select:none;}
body{background:#030e25 url(../img/bg.jpg) no-repeat right bottom/cover; color:#fff; font:22px/1.4 'Microsoft Yahei'; background-attachment:fixed;}
.flex{display:flex;}
.flex-center{align-items:center; justify-content:center;}
.flex-wrap{flex-wrap:wrap; flex-direction:row;}
.flex-column{flex-flow:column}
.flex-1{flex:1;}
.logo{position:fixed; left:.6rem; top:.42rem; pointer-events:none;}
.logo img{width:1.69rem;}
.float-1{position:fixed; left:.20rem; top:40%; pointer-events:none;}
.float-1 img{width:1.69rem;}
.float-2{position:fixed; left:1.76rem; top:70%; pointer-events:none;}
.float-2 img{width:1.1rem;}
.float-3{position:fixed; right:.98rem; top:1.22rem; pointer-events:none;}
.float-3 img{width:2.49rem;}
.header{padding:.6rem 0 .3rem;}
.header img{margin:0 auto; display:block; width:7.58rem;}
.player{position:relative; z-index:9999; margin:0 auto; width:1000px; height:562px; background:#000; box-shadow:0 0 40px 5px rgba(27,42,83,1);}

.footer{position:relative; z-index:9999; text-align:center; padding:.2rem 0; text-shadow:1px 1px 3px #0047A8;}
.footer img{width:1rem; cursor:pointer; transition:all .3s;}
.footer img:hover{transform:scale(1.1);}
.footer p{font-size:.3rem;}
.footer strong{color:#f00;}
.footer span{font-size:.14rem;}
.like-box{position:relative; margin:0 auto; width:1rem; height:1rem;}
.like-box canvas{position:absolute; left:50%; bottom:.5rem; transform:translateX(-50%) scale(.8); transform-origin:bottom; pointer-events:none;}

.tip{position:fixed; left:50%; top:-50px; padding:0 10px; height:40px; line-height:40px; background:rgba(0,0,0,.75); color:#fff; text-align:center; z-index:999999; transition:top .3s; white-space: nowrap;}
.tip{background:#fff; color:#333; border-radius:3px; box-shadow:0 0 5px 2px rgba(0,0,0,.5); font-size:14px; transform:translateX(-50%); whie}

.desc{text-align:center; padding-bottom:20px; color:#fff7ea; font-size:.22rem;}

@media screen and (max-width: 800px) {
    .logo{position:relative; left:0; top:0; padding:20px 0;}
    .logo img{display:block; margin:0 auto;width:172px;}
	
	.header{padding:20px 0;}
	.header img{width:80%;}
	
	.player{width:90%; height:220px;}
	
	.desc{margin:0 auto; width:90%; font-size:16px;}
	
	.footer{padding:20px 0;}
	.footer img{width:50px;}
	.like-box{width:50px; height:50px;}
	.like-box canvas{bottom:25px;}
	.footer p{font-size:20px;}
	.footer strong{color:#f00; font-size:36px;}
	.footer span{font-size:14px;}
}