section.loginWrap {
    width:500px; margin:0 auto;
    padding:0 0 0 0;
}

section.loginWrap  > div.loginBoxWrap {
    margin:2rem 0;
    padding:2rem 2rem;
    border:1px solid #dfdfdf;
}
button.joinBtn1 {
    color: #FFF;
    background-color: #333;
    padding:.5rem 0;
    border:1px solid #333;
}

button.joinBtn2 {
    color: #333;
    background-color: #f9f9f9;
    padding:.5rem 0;
    border:1px solid #dfdfdf;
}
button.loginBtn {
    padding:.5rem 0;
}

.gap1 { gap: 1rem; }

article.snsWrap {
    font-size:.875rem;
    color:#949494;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    margin:2rem 0 1rem 0;
}
article.snsWrap > span {
    width:100%;
    position: relative;
    overflow: hidden;
}

article.snsWrap > span:before {
    content:"";
    width:100%;
    height:1px;
    background-color: #dfdfdf;
}

article.snsBoxWrap {

}
article.snsBoxWrap > div {
    display: flex; justify-content:space-around; gap: 1rem; margin-top: 1rem; margin-bottom: 1rem;
}
article.snsBoxWrap > div > div {
    display: flex; flex: 1; align-items: center; justify-content:center; color:#FFF; font-weight: 500;
}
article.snsBoxWrap > div > div > img { max-width: 40px; }