/*
    LOGIN

*/


.container-flex { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.login { position: relative; width: 30rem; height: auto; font-size: 0; text-align: center; animation: fadein 0.5s linear 1; }
@keyframes fadein {
    0% { padding-top: 3rem; opacity: 0; }
    100% { padding-top: 0; opacity: 1; }
}

.login h1 { font-family: sans-serif; font-size: 7.5rem; font-weight: 300; color: #fff; letter-spacing: -5px; line-height: 8rem; }
.login h1 b { letter-spacing: -7px; }
.login h2 { margin-bottom: 7.5rem; font-family: sans-serif; font-size: 1.1rem; font-weight: 300; letter-spacing: 2px; }
.login h3 { font-family: sans-serif; font-size: 0.95rem; font-weight: 400; color: rgba(255, 255, 255, 0.2); letter-spacing: 1px; }
.login .logo { margin: 0 auto 2rem; width: 25rem; height: 11rem; background: no-repeat 50% 50% / contain url('/assets/images/img_logo_blog.png'); }
.login input[type='text'], .login input[type='password'] { display: block; margin: 0 auto 0.7rem; width: 22rem; height: 3.3rem; font-size: 1rem; font-weight: 400; color: #fff; text-align: center; background-color: rgba(255, 255, 255, 0.05); border-radius: 0.4rem; transition: background-color 0.5s; }
.login input[type='text']:focus, .login input[type='password']:focus { background-color: rgba(255, 255, 255, 0.15); }
.login input[type='text']::placeholder, .login input[type='password']::placeholder { color: rgba(255, 255, 255, 0.5); }
.login button { display: block; margin: 0 auto; width: 22rem; height: 3.3rem; font-size: 1.3rem; font-weight: 700; color: #fff; background: linear-gradient(45deg, #479d10, #62911a); box-shadow: 0 2px 10px rgba(71, 157, 16, 0.5); border-radius: 0.4rem; transition: all 0.5s; }
.login button:hover { cursor: pointer; width: 23rem; box-shadow: 0 2px 15px rgba(102, 178, 0, 1); }
.login span { display: inline-block; width: 50%; height: auto; text-align: center; vertical-align: top; }
.login a { position: relative; display: inline-block; margin: 1.5rem auto 9rem; font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.5s; }
.login a:hover { cursor: pointer; color: #429b07;  }
.login a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background-color: rgba(66, 155, 7, 0); transition: all 0.5s; }
.login a:hover::after { width: 100%; height: 2px; background-color: rgba(66, 155, 7, 1); }


.container-join { position: relative; width: 100%; height: auto; display: flex; align-items: center; justify-content: center; }
.join { position: relative; padding: 5rem 0; width: 60rem; height: auto; font-size: 0; text-align: center; }
.join h1 { font-family: sans-serif; font-size: 7.5rem; font-weight: 300; color: #fff; letter-spacing: -5px; line-height: 8rem; }
.join h1 b { letter-spacing: -7px; }
.join h2 { margin-bottom: 5rem; font-family: sans-serif; font-size: 1.1rem; font-weight: 300; letter-spacing: 2px; }
.join h3 { margin-bottom: 1rem; font-size: 2rem; font-weight: 400; color: rgba(255, 255, 255, 1); letter-spacing: -2px; }
.join h4 { margin-bottom: 0.25rem; padding-left: 0.5rem; font-size: 0.9rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); }
.join h5 { font-family: sans-serif; font-size: 0.95rem; font-weight: 400; color: rgba(255, 255, 255, 0.2); letter-spacing: 1px; }
.join h6 { margin-bottom: 2rem; font-family: sans-serif; font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 1); letter-spacing: 1px; }
.join .logo { margin: 0 auto; width: 25rem; height: 11rem; background: no-repeat 50% 50% / contain url('/assets/images/img_logo_blog.png'); }

.join .col { display: inline-block; width: auto; height: auto; text-align: left; vertical-align: top; }
.join .col:nth-of-type(1) { padding-right: 1rem; width: 40%; }
.join .col:nth-of-type(2) { padding-left: 1rem; width: 60%; }

.join input[type='text'], .join input[type='password'] { display: block; margin-bottom: 0.7rem; padding-left: 1rem; width: 100%; height: 3.3rem; font-size: 1rem; font-weight: 400; color: #fff; text-align: left; background-color: rgba(255, 255, 255, 0.05); border-radius: 0.4rem; transition: background-color 0.5s; }
.join input[type='text']:focus, .join input[type='password']:focus { background-color: rgba(255, 255, 255, 0.15); }
.join input[type='text']::placeholder, .join input[type='password']::placeholder { color: rgba(255, 255, 255, 0.5); }
.join select { display: block; margin: 0 auto 0.7rem; padding-left: 1rem; width: 100%; height: 3.3rem; font-size: 1rem; font-weight: 400; color: #fff; text-align: center; background-color: rgb(31, 32, 32); border-radius: 0.4rem; transition: background-color 0.5s; }
.join button { display: block; margin: 2rem auto 4rem; width: 22rem; height: 3.3rem; font-size: 1.3rem; font-weight: 700; color: #fff; background: linear-gradient(45deg, #479d10, #62911a); box-shadow: 0 2px 10px rgba(71, 157, 16, 0.5); border-radius: 0.4rem; transition: all 0.5s; }
.join button:hover { cursor: pointer; width: 23rem; box-shadow: 0 2px 15px rgba(102, 178, 0, 1); }

.join .birth { position: relative; width: 100%; height: auto; text-align: left; }
.join .birth span { display: inline-block; width: 35%; height: auto; vertical-align: top; }
.join .birth span:nth-child(2), .join .birth span:nth-child(3) { margin-right: 0.5rem; width: 25%; }
.join .birth span:nth-child(1)::after { content: '년'; padding-left: 0.5rem; font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
.join .birth span:nth-child(2)::after { content: '월'; padding-left: 0.5rem; font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
.join .birth span:nth-child(3)::after { content: '일'; padding-left: 0.5rem; font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
.join .birth span select { display: inline-block; width: 75%; }

.join .phone { position: relative; width: 100%; height: auto; text-align: left; }
.join .phone span { display: inline-block; width: 20%; height: auto; vertical-align: top; }
.join .phone span:nth-child(1)::after, .join .phone span:nth-child(2)::after { content: '-'; padding-left: 0.5rem; font-size: 1.1rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
.join .phone span input { display: inline-block; width: 75%; }

.join .terms { position: relative; padding: 0.75rem; width: 100%; height: 15rem; font-size: 0.8rem; font-weight: 400; color: rgba(255, 255, 255, 0.75); line-height: 1rem; background-color: rgba(255, 255, 255, 0.05); border-radius: 0.4rem; white-space: pre-line; overflow-x: hidden; overflow-y: auto; }
.join .terms::-webkit-scrollbar { width: 4px; }
.join .terms::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); }
.join .terms::-webkit-scrollbar-track { background-color: transparent; }
.join input[type=checkbox] { display: none; }
.join label { position: relative; display: flex; align-items: center; margin: 1rem 0 0 0.5rem; padding: 0 0 0 1.5rem; width: max-content; height: 2rem; font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 1); }
.join label::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 1rem; height: 1rem; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 1); }
.join input[type=checkbox]:checked + label::before { background-color: #429b07; }







.half { width: 50% !important; }

.btn-floating { position: absolute; width: 4rem; height: 4rem; right: 2rem; bottom: 2rem; }
.btn-floating img { width: 100%; height: auto; }




/*  mobile  */
@media (min-width: 320px) and (max-width: 675px) {
    .container-join { height: auto; display: flex; align-items: flex-start; justify-content: center; }
    .join { padding: 5rem 0 1rem 0; }
    .join h2 { margin-bottom: 2rem; }
    .join h3 { margin-bottom: 2rem; padding: 0 3rem; font-size: 1.5rem; letter-spacing: 0; line-height: 2rem; }

    .join .col:nth-of-type(1) { padding: 0 1rem; width: 100%; }
    .join .col:nth-of-type(2) { padding: 0 1rem; width: 100%; }
    
    .join button { margin: 2rem auto; }


}