.join-cat .grid{
    gap: 2rem;
}
.join-cat .cat_tt{
    position: relative;
    line-height: 1;
    display: block;
    padding-left: .4em;
    font-size: var(--f38);
    font-weight: bold;
}
.join-cat .cat_tt::after{
    position: absolute;
    content: '';
    display: block;
    height: 100%;
    width: .2em;
    background: var(--noBtnBgColor);
    left: 0;
    top: 0;
}

.join-cat .img-db{
    height: auto;
    aspect-ratio: 770/425;
}

.join-cat .tt{
    font-size: var(--f30);
    font-family: 'pingfangm-font';
}

.join-cat .btn{
    padding: .6rem 2rem;
    border: 2px solid #e5e8eb;
    font-size: var(--f18);
    font-family: 'pingfangm-font';
    border-radius: 10rem;
    display: inline-block;
    position: relative;
    /*overflow: hidden;*/
    transition: all .5s;
}
.join-cat .btn span{
    position: relative;
}

.join-cat .btn::before{
    opacity: 0;
    left: -2px;
    top: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 10rem;
    display: block;
    content: '';
    position: absolute;
    background: var(--noBtnBgColor);
}
.join-cat .btn:hover{
    color: #fff;
}
.join-cat .btn:hover::before{
    opacity: 1;
}