.btnBox{
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    display: block;
    text-decoration: none;
    border: 3px solid #e7e7e7;
    transition: width 1s linear;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}

.btnBox:hover .banner_btn_text{color: #237AE4;}

.banner__item:hover .btnBox{
    width: 1.25rem;
}

.banner__item:hover .btnBox .banner_btn_text{
    opacity: 1;
}

.banner_btn_text{
    opacity: 0;
    transition: opacity 1s linear;
    transition: color 0.3s linear;
    font-size: 0.16rem;
    font-family: PF-Regular;
    text-wrap: nowrap;

}
.btnBox2{
    position: relative;
    width: 1.25rem;
    height: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    display: block;
    text-decoration: none;
    border: 3px solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    transition: color .3s;
}

.btnBox2:hover{
    color: #237AE4!important;
}

.banner_btn_text2{
    font-size: 0.16rem;
    font-family: PF-Regular;
    text-wrap: nowrap;
}

.btnBox3{
    position: relative;
    width: 1.25rem;
    height: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    display: block;
    text-decoration: none;
    border: 3px solid #e7e7e7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000000;
    transition: color .3s;
}

.btnBox3:hover .banner_btn_text3{
    color: #237AE4!important;
}

.banner_btn_text3{
    font-size: 0.16rem;
    font-family: PF-Bold;
    transition: color .3s;
}