.city {
    width: 2000px;
    height: 1040px;
    transform: translateY(250px);
}

.city ul li:hover .city__list-char {
    opacity: 1;
}

.city__list {
    overflow: hidden;
}

.city__list-item::before {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.city__list-item {
    position: relative;
    width: 100%;
    height: 260px;
    background: center no-repeat;
    background-size: 100% auto;
    cursor: pointer;
    overflow: hidden;
}

.city__list-item p,
.home .city__list-item a {
    display: inline-block;
    position: relative;
    top: -400px;
    z-index: 3;
    font-size: 36px;
    color: #fff;
    line-height: 260px;
    width: 100%;
    height: 260px;
    background-size: 132px;
    text-align: center;
    text-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    margin: 0 !important;
    overflow: hidden;
}

.city_imgs {
    display: inline-block;
    position: relative;
    top: -199px;
    left: 690px;
    z-index: 3;
    font-size: 36px;
    color: #fff;
    line-height: 260px;
    text-align: center;
    text-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    margin: 0 !important;
    overflow: hidden;
}

.city_img {
    transition: all ease 0.7s;
}

.city__list-item:hover .city_img {
    transform: scale(1.1);
}

.city__list-item p::before {
    position: absolute;
    bottom: 91px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    content: "";
    width: 210px;
    height: 10px;
    background: url(../image/琴_1s.png) center no-repeat;
    background-size: 210px 10px;
    opacity: 0;
}

.city__list-item .city__list-char {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 260px;
    background-repeat: no-repeat;
    background-position: calc(50% + 360px) 50%;
    background-size: 960px 260px;
    opacity: 0;
    transition: all 0.2s 0s ease-in;
    border: #fff solid 6px;
    box-sizing: border-box;
}

.city__list-item_last::before {
    position: absolute;
    z-index: 2;
    top: 780px;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 260px;
    background: rgba(0, 0, 0, 0.4);
}

.city__list-item_last a p {
    display: inline-block;
    position: relative;
    top: -265px;
    z-index: 3;
    font-size: 36px;
    color: #5e5f63;
    line-height: 260px;
    width: 100%;
    height: 260px;
    text-align: center;
    text-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    margin: 0 !important;
    overflow: hidden;
}