*{
 margin: 0;
 padding: 0;
 list-style: none;
}
html{
 font-size: 12px;
}
body {
 background-color: #f5f5f5;
 font-family: 'PingFang SC Regular', 'PingFang SC';
 width: 100%;
 height: 100%;
 min-width: 320px;
 max-width: 480px;
 position: relative;
}
 
.cityPage {
 width: 100%;
 height: 100%;
 /* border: 1px solid black; */
 position: relative;
 top: 0;
 display: flex;
 flex-direction: column;
 /* justify-content: center; */
}
 
.cityContent {
 width: 93%;
 margin-left: 2%;
 padding: 10px 0;
 /* border: 1px solid black; */
 background: #f7f7f9;
 position: fixed;
 z-index: 9999;
 top: 0;
 
}
.inputBox {
     width: 65%;
}
.inputBox input {
 width: 90%;
 height: 30px;
 border: 1px solid rgb(215, 215, 215);
 outline: none;
 background: #fff;
 margin-left: 4%;
 border-radius: 4px;
 padding-left: 4px;
 color: #9e9e9e;
 font-size: 14px;
 
}
 
.localCity {
 color: #333;
 font-size: 13px;
 font-weight: bold;
 margin-left: 4.5%;
 margin-bottom: 16px;
}
 
.cityname {
 font-size: 13px;
 margin-left: 0.5em;
}
 
#list {
 font-size: 13px;
 position: fixed;
 height: 100%;
 top: 55px;
 width: 100%;
 overflow: scroll;
 font-size: 15px;
 /* margin-bottom: 140px; */
 /* bottom: 200px; */
}
 
#list>section {
 overflow-y: auto;
 height: 100%;
 margin-bottom: 80px;
}
 
#list>section>dl>dt {
 background: #f7f7f9;
 color: #999;
 height: 40px;
 line-height: 40px;
 padding-left: 15px;
}
 
#list>section>dl>dd {
 color: #333;
 line-height: 40px;
 padding-left: 15px;
 position: relative;
 background-color: #fff;
}
 
#list>section>dl>dd:after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 1px;
 width: 100%;
 height: 1px;
 background-color: #c8c7cc;
 transform: scaleY(.5);
 -webkit-transform: scaleY(.5);
}
 
#list>section>dl>dd:last-of-type:after {
 display: none;
}
 
#navBar {
 position: fixed;
 width: 26px;
 right: 3px;
 z-index: 30;
 top: 35%;
 bottom: 10%;
 display: flex;
 flex-direction: column;
 margin-top: -25%;

 text-align: center;
 font-size: medium
 /* text-align: center; */
}
 
#navBar.active {
 background: rgba(211, 211, 211, .6);
}
 
#navBar>div {
 text-align: center;
 display: block;
 text-decoration: none;
 /* height: 4.166%;
 line-height: 100%; */
 color: #333;
 font-size: 13px;
 font-weight: 500;
 flex: 1;
}
.letterBox{
 width: 40px;
 height: 40px;
 background:#9f9f9f;
 opacity: .5;
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -25px;
 margin-left: -25px;
 text-align: center;
 line-height: 40px;
 color: #fff;
 display: none;
}

.position {
	position:relative;
	width:.5em;
	height:.5em;
	border:.4em solid #aaa;
	border-radius:50%;
	margin-bottom: 0.5em;
}
.position:after {
	content:"";
	position:absolute;
	top:0.46em;
	left:-.38em;
	width:0;
	height:0;
	border-top:0.85em solid #aaa;
	border-right:.65em solid transparent;
	border-left:.65em solid transparent;
	border-top-left-radius:50%;
	border-top-right-radius:50%;
}

a {
 color: blue;
 transition: color 0.3s ease; /* 平滑过渡效果 */
}
a.active {
 color: red; /* 点击后的颜色 */
}
a:focus {
 outline: none; /* 取消聚焦时的轮廓 */
}