.social_ico {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #ececec;
    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
}

.social_bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1.2rem;
    border-radius: 5px;

    background-position: 3% center;
    background-repeat: no-repeat;
    background-size: auto 60%;
}

.social_bar > span {
    font-size: var(--font-size-16);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sns-kakao {
    background-image: url('./img/ico_kakao.svg');
    background-color: #FAE300;
}

.sns-kakao, .sns-kakao * {
    color: #3C1E1E;
}

.sns-naver {
    background-image: url('./img/ico_naver.svg');
    background-color: #03C75A;
}

.sns-naver, .sns-naver * {
    color: #FFFFFF;
}

.sns-google {
    background-image: url('./img/ico_google.svg');
    background-color: #FFFFFF;
    border: 1px solid #DEDEDE;
}

.sns-google, .sns-google * {
    color: #000000;
}

.sns-split {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 1.5rem;
}

.sns-split:before, .sns-split:after {
    content: "";
    width: 100%;
    height: 1px;
    display: inline-block;
    background: #ECECEC;
}

.sns-split > span {
    font-size: var(--font-size-14);
    white-space: nowrap;
    margin: 0 1.5rem;
    color: #bbbbbb;
    font-weight: 500;
}