.city-list {
  position: absolute;
  margin-top: -3px;
  margin-left: -16px;
  background-color: white;
  border: 1px solid #DADFE3;
  transition-duration: 400ms;
  transform: translateY(-2%);
  opacity: 0;
  visibility: hidden;
  width: 300px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 9; }
  .city-list.city-on {
    transform: translateY(0);
    opacity: 1;
    visibility: visible; }
  .city-list .code {
    float: right; }
  .city-list i {
    float: left;
    color: #9d9c9b; }
  .city-list .ell {
    display: block;
    margin-right: 40px;
    margin-left: 25px; }
  .city-list .city-tit, .city-list .city-li {
    height: 40px;
    line-height: 40px;
    cursor: pointer; }
    .city-list .city-tit:hover, .city-list .city-tit.li-on, .city-list .city-li:hover, .city-list .city-li.li-on {
      background-color: #dcdcdc; }
  .city-list .city-tit {
    font-weight: bold;
    padding: 0 10px; }
  .city-list .city-li {
    padding: 0 10px 0 35px; }