@charset "gb2312";
* {margin:0;padding:0;border:0;-webkit-user-select:text}
a,img {-webkit-touch-callout:none;}
body,p,li,ul,div,span{margin: 0;padding: 0;}
img{border: none;pointer-events: none;}
body,html{height: 100%;margin:0 auto;font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;}
ul,li{list-style: none;}
a{text-decoration: none;}
.hidden{display: none !important;}

body{height: 100%;overflow: hidden;margin: 0 auto;max-width: 750px;}
.wrap{height: 100%;overflow: hidden;background: #fff;position: relative;}
.load{width: 100%;height: 100%;position: absolute;z-index: 500;overflow: hidden;background:#fff;}
.percent{font-size: .28rem;text-align: center;color: #fb0d0a;top: 50%;left: 0;width: 7.5rem;position: absolute;}
.title{background:url(../images/title.png);width: 5.21rem;height: 3.72rem;background-size: 100% 100%;position: absolute;left: 1.145rem;top: 15%;}

.load p{font-size: .28rem;width: 100%;text-align: center;color: #000;}
.load img{width: 4rem;position: absolute;top: 3%;left: 50%;margin-left: -2rem;}
.info{position: absolute;bottom: .5rem;width: 100%;}

.tips{position: absolute;z-index: 100;width: .16rem;left: 50%;margin-left: -.08rem;bottom: .1rem;height: 1.5rem;overflow: hidden;}
.line{border-left:1px dashed #e51414;height: 1.5rem;width: 0px;margin: 0 auto;}
.triangle{width:0;height:0;border-left:.08rem solid transparent;border-right:.08rem solid transparent;border-bottom:.16rem solid #e51414;position: absolute;bottom:.3rem;animation:tips 1.4s infinite linear;}

#canvas{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}

.pc_bg{width: 100%;height: 100%;overflow: hidden;position: fixed;z-index: 10000;left: 0;top: 0;bottom: 0;right: 0;background: #000;display: none;}
.pc_bg .code{width: 230px;height: 230px;display: block;margin: 10% auto 30px;background: #fff;padding: 10px;}
.pc_bg:after{content:'为了更好的体验，请使用手机扫描二维码浏览';display:block;color:#fff;text-align:center;font-size:20px;}

.route{position: absolute;left: 3.67rem;bottom: 0;background: url(../images/route.png);width: .48rem;height: .96rem;background-size: 100% 100%;z-index: 10;animation:route .8s infinite linear;}
.man{position: absolute;left: 3.72rem;bottom: .1rem;background: url(../images/man.png);width: .36rem;height: 1.15rem;background-size: 100% 100%;z-index: 10;animation:man .8s infinite linear;}

@-webkit-keyframes route {
	0% {
		height: 0;
	}
	100% {
		height: .96rem;
	}
}

@-webkit-keyframes man {
	0% {
		opacity: 1;
		transform: translateY(.3rem);
	}
	100% {
		opacity: 0;
		transform: translateY(-1.7rem);
	}
}

@keyframes tips {
	0% {
		transform: translateY(0); 
	}
	100% {
		transform: translateY(-1rem); 
	}
}