section.loginWrap {
    width:500px; margin:0 auto;
    padding:5% 0 0 0;
}
section.loginWrap  > div.logo {
    display:flex;align-items:center;justify-content:center;
}
section.loginWrap  > div.logo > img {
    max-width: 200px;
}
section.loginWrap  > div.loginBoxWrap {
    margin:2rem 0;
    border:1px solid #dfdfdf;
    background: #f9f9f9;
}
section.loginWrap  > div.loginBoxWrap > div {
    font-size: 1rem; padding:1rem 0;
}
section.loginWrap  > div.loginBoxWrap > div.on {
    background: #FFF;
}
section.loginWrap  > div.loginBoxWrap > div.loginBox {
    background: #FFF; grid-column: 1 / span 3;
    padding:1rem 2rem;
}
article.loginFrom {
    display: flex; gap: 1rem;
    flex-direction: column;
}
article.loginFrom > .stnInp {
    height: 2.5rem;
}
article.loginFrom > .btn-secondary,
article.loginFrom > .btn-primary {
    height: 3rem;
}
article.loginFrom a {
    color:#222; text-decoration: none; font-size: .875rem; font-weight: 400;
}
article.snsWrap {
    padding:2rem 0 0 0;
}
article.snsWrap > h3 {
    padding:0 0 0 0; margin:0 0 0 0; font-size:1rem; font-weight:500;
}
article.snsWrap > div {
    display: flex; justify-content:space-around; gap: 1rem; margin-top: 1rem; margin-bottom: 2rem;
}
article.snsWrap > div > div {
    display: flex; flex: 1; align-items: center; justify-content:center; color:#FFF; font-weight: 500;
}
article.snsWrap > div > div > img { max-width: 40px; }