* {margin: 0; padding: 0;}

html, body {height: 100%;}

.marginT_10 {margin-top: 0.625rem;}
.marginT_20 {margin-top: 1.25rem;}

.wrapper {
    height: 100%;
    text-align: center;
}

.wrapper::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.login_wrap {
    display: inline-block;
    width: 31.25rem;
    vertical-align: middle;
    text-align: left;
}

.login_wrap>h1 {
    text-align: center;
    margin-bottom: 1.25rem;
    height: 65px;
}

.login_wrap>h1 img {
    width: 10rem;
}

.login_box {
    padding: 2.5rem;
    border: 1px solid #ddd;
}

section {
    width: 100%;
    overflow: hidden;
}

section>input {
    float: left;
    width: calc(100% - 2.5rem);
    line-height: 1.25rem;
    padding: 0.625rem 0;
    border: 0;
    outline: none;
    font-size: 1.125rem;
    font-weight: bold;
}

section>button {
    width: 2rem;
    height: 2rem;
    margin: 0.25rem;
    border: none;
    background: url(../img/delete.png) no-repeat 50% 50%;
    background-color: #eee;
    background-size: 50%;
    float: right;
    cursor: pointer;
    border-radius: 1rem;
    box-sizing: border-box;
}

section>label {
    clear: both;
    display: block;
    height: 2px;
    background: #ccc;
}

section>input::placeholder {font-weight: normal;}
section>input:focus {background: #f3f3f3;}
section>input:focus~label {background: #000;}

.login_keep_box {
    margin-bottom: 2.5rem;
}

.login_keep_box input,
.login_keep_box label {cursor: pointer;}

.login_keep_box input {
    width: 1rem; height: 1rem;
    vertical-align: bottom;
    margin: 0.25rem 0;
}

.login_keep_box label {
    display: inline-block;
    line-height: 1.5rem;
}

.btn_box p {
    text-align: center;
    margin-bottom: 0.625rem;
}

.login_btn {
    display: block;
    width: 100%;
    padding: 0.625rem 0;
    line-height: 1.5rem;
    margin-bottom: 0.75rem;
    border: 0;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.login_main {background-color: #000; color: #fff;}

.login_link_box {
    overflow: hidden;
}

.login_link {
    text-decoration: none;
    color: #666;
    font-size: 0.875rem;
}

.right_link {
    float: right;
}

.right_link .login_link {margin-left: 1.25rem;}

.btn_google {
    background: url(../img/logo_google.png) no-repeat 1.25rem 50%;
    background-size: 2rem;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.btn_facebook {
    background: url(../img/logo_facebook.svg) no-repeat 1.25rem 50%;
    background-size: 2rem;
    background-color: rgb(26, 119, 242);
    color: #fff;
}

.btn_naver {
    background: url(../img/logo_naver.svg) no-repeat 1.25rem 50%;
    background-size: 2rem;
    background-color: #03c75a;
    color: #fff;
}

.btn_kakao {
    background: url(../img/logo_kakao.png) no-repeat 1.25rem 50%;
    background-size: 2rem;
    background-color: #fee500;
    color: #191919;
}

.btn_ms {
    background: url(../img/logo_ms.png) no-repeat 1.25rem 50%;
    background-size: 2rem;
    border: 1px solid #eee;
    box-sizing: border-box;
}