.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    animation: enterFirst 0.3s ease forwards;
}
.mask-leave{
    animation: leaveFirst 0.3s ease forwards;
}
.dialog{
    height: 96%;
    width: 100%;
    background: #FFFFFF;
    border-radius: 0.32rem 0.32rem 0 0;
    position: absolute;
    bottom: 0;
    animation: enterSecond 0.3s ease forwards;
    box-sizing: border-box;
    overflow: hidden;
}
.dialog-leave{
    animation: leaveSecond 0.3s ease forwards;
}
.dialog>i{
    position: fixed;
    font-size: 0.40rem;
    background: #FFFFFF;
    z-index: 4;
    top:0.2rem;
    right: 0.32rem;
    color: #6A6F7A;
}
.hidebg{
    background: transparent;
}
.dialog>div{
    max-height: 96vh;
    display: flex;
    flex-direction: column;
}
.dialog_title{
    height: 0.96rem;
    font-weight: bold;
    font-size: 0.36rem;
    color: #292A33;
    line-height: 0.96rem;
    font-family: Roboto, Roboto;
    margin-left: 0.32rem;
}
.content-country{
    height: 0.88rem;
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 0.28rem;
    color: #292A33;
    line-height: 0.88rem;
    margin-left: 0.32rem;
}
.ug-country-weight{
    font-weight: bold;
    font-size: 0.32rem;
}
.letter-nav {
    width: 0.4rem;
    position: fixed;
    right: 0;
    top: 2.68rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.letter-nav div {
    width: 0.24rem;
    height: 0.24rem;
    cursor: pointer;
    line-height: 0.24rem;
    text-align: center;
    margin-bottom: 0.08rem;
}

.letter-nav .active {
    background: #292A33;
    color: white;
    border-radius: 50%;
}
.country-list {
    flex: 1;
    overflow-y: auto;
}

@keyframes enterFirst{
    from {background-color: transparent}
    to { background-color: rgba(0, 0, 0, 0.5)}
}
@keyframes leaveFirst{
    from { background-color: rgba(0, 0, 0, 0.5)}
    to {background-color: transparent; display: none;}
}
@keyframes enterSecond{
    from {transform: translateY(100%)}
    to { transform: translateY(0%)}
}
@keyframes leaveSecond{
    from {transform: translateY(0%)}
    to {transform: translateY(100%)}
}