html{width: 100%; height: 100%; overscroll-behavior: none; touch-action: none; }
body{background:#A8D1F1; width: 100%; height: 100%; overflow-x: hidden; padding:0; margin:0; position: fixed;}
a{-webkit-tap-highlight-color: rgba(255, 255, 255, 0); color: #3581F7; text-decoration: none;}

html,
body {
	height: 100%;
	overflow: hidden;
}

@media screen and (max-width:400px){
	.box>.bk>.cover>.actionBar>span.text {font-size: 14px; line-height: 18px;}
}

@media screen and (min-width:400px){
   .box>.bk>.cover>.actionBar>span.text {font-size: 16px; line-height: 20px;}
}

body{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

body{display:flex; flex-direction: column;}
img{pointer-events: auto; user-select: none;}
#loading{text-align:center; line-height:100%; flex: 1; justify-content: center; display: flex; align-items: center; }
.topTitle{height: 60px; background-color: #A8D1F1; text-align: center; line-height:60px; font-size:25px; font-weight: bold;}
.mapWrap{flex: 1; display:none; overflow: hidden; position:relative; user-select: none; cursor:grab}
	.map{position:absolute; left: 0; top: 0; width: 100%; height: 100%;transform-origin: 0 0; will-change: transform; }
		.map>img{position: absolute;}

.nav{position:absolute; width:170px; top:100px; right:0; display: flex; flex-direction: column; overflow: hidden; user-select: none; display:none; }
	.nav>*{cursor: pointer; margin-bottom: 10px;}

.backBtn{background-image: url('/application/images/back_bt1n.png');
	background-repeat: no-repeat;
	background-size: contain;
	user-select: none;
	cursor: pointer;}

.backBtn:hover{background-image: url('/application/images/back_bt1n_hot.png')}

.box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); overflow: hidden;}
	.box>.bk{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
		.box>.bk>.cover{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size:contain; }
			.box>.bk>.cover>.actionBar{position: absolute; width: 100%; height:130px; left: 0; bottom: 0; display: flex; flex-direction: column; }
				.box>.bk>.cover>.actionBar>span.text{margin: 0 30px;display: -webkit-box; -webkit-line-clamp: 2;	-webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: 5px;}
				.box>.bk>.cover>.actionBar>span.backBtn{position: absolute; width: 180px; height:60px; left: 50%; bottom: -25%; transform: translate(-50%, 0); }

		.mapList {
			position: absolute;
			/* 或 fixed，看你用法 */
			bottom: 20px;
			/* 距离底部的间距 */
			left: 50%;
			/* 左边设为50% */
			transform: translateX(-50%);
			/* 向左平移自身一半，达到居中 */
			background-color: #fff;
			border-radius: 12px;
			overflow: hidden;
			min-width: 90%;
			box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
			font-family: sans-serif;
			display: flex;
			flex-direction: column;
		}
	
		.mapList .item {
			height: 50px;
			line-height: 50px;
			text-align: center;
			border-bottom: 1px solid #eee;
			font-size: 18px;
			color: #333;
		}
	
		.mapList .item:last-child {
			border-bottom: none;
		}

		.secondNav{width: 100%; height: 100%; display:flex; flex-direction: column; justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */}

		.secondNav>img{cursor: pointer; margin-bottom: 10px;}

		.actionBar .icon{margin-left: 5px;}
		.actionBar .icon img {
			vertical-align: middle;
			/* 或者 bottom / text-bottom / sub，根据具体效果微调 */
			height: 1em; /* 或者固定 px 高度 */
		}

.music{position: absolute; left: 20px; top: 80px; width: 40px; height: 40px; background-image: url('/application/images/music_pasued.png');
	background-repeat: no-repeat;
	background-size: contain;
	user-select: none;
	cursor: pointer; }

.music.playing{background-image: url('/application/images/music.png'); animation: rotate 2s linear infinite;}