.city{
  width: 930px;
  height: 321px;
  background-color: #fff;
  border-radius: 12px;
  padding: 0 24px 24px 24px;
  border: 1px solid #E4E4E4;
  box-shadow:0 5px 17px 1px #E4E4E4;
  position: relative;
  margin-top: 15px;
}
.city::after{
  content: '';
  border: 10px solid transparent;
  height: 10px;
  border-bottom-color: #fff;
  position: absolute;
  top: -29px;
  right: 312px;
}
.city::before{
  content: '';
  border: 10px solid transparent;
  height: 10px;
  border-bottom-color:#E4E4E4;
  position: absolute;
  top: -31px;
  right: 312px;
}
.city_letter{
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #E4E4E4;
  top: -21px;
  right: 296px;
  cursor: pointer;
}
.city_letter .letter_item{
  display: inline-block;
  width: 32px;
  color: #999;
  font-size: 14px;
}
.city_letter .letter_item:hover{
  color:#FFAA00;
}
.city_letter .letter_active{
  color:#FFAA00;
}
.city_box{
  overflow-y: scroll;
  height: 257px;
}
.city_other{
  line-height: 24px;
  padding: 8px 0 6px;
}
.city_content{
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  width: 820px;
  line-height: 24px;
  padding: 3px 0;
}
.city_content .city_title{
  color: #E4E4E4;
  font-size: 14px;
  font-weight: bold;
  width: 35px;
  padding-left: 6px;
}
.city_content .city_group{
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  -webkit-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-flow:row wrap;
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.city_content .city_group .city_item{
  width: 72px;
  color: #999;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding:0 11px 0 2px;
  cursor: pointer;
}
.city_content .city_group .city_item:hover{
  color: #FFAA00;
}