@charset "utf-8";
/*
 * Name     : membership.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : 2022-08-06
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. LOGIN
    02. REGISTER
    03. MEDIA QUERIES
---------------------------------------------------
*/

/* ------------------------------
 * LOGIN
------------------------------ */
.login-section, .register-section {padding-top: 160px; padding-bottom: 160px; background-color: var(--grey-100)}
.login-section .login-header {margin-bottom: 64px; text-align: center}
.login-section .login-header .logo {width: 140px; margin-bottom: 32px; user-select: none; pointer-events: none}
.login-section .login-header h2 {color: var(--link)}
.login-section .login-header p {margin-top: 8px}
.login-section .login-header p a {font-weight: 600; color: var(--link); text-decoration: underline !important; margin-left: 6px}
.login-section .form-sm, .register-section .form-sm {padding: 48px 40px; border: 1px solid var(--grey-200); border-radius: 16px; background-color: var(--white)}
.login-section .social-divider {position: relative; margin-top: 24px; margin-bottom: 24px; text-align: center}
.login-section .social-divider::before {content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: #f1f3f5}
.login-section .social-divider span {position: relative; display: inline-block; font-size: 15px; color: var(--grey-600); padding: 4px 8px; background-color: var(--white); z-index: 5}
.login-section .social-button .button i {margin-right: 6px; font-size: 20px; vertical-align: -1px}
.login-section .social-button .button-kakao {color: rgba(0,0,0,.85); background-color: #fee500}
.login-section .social-button .button-kakao:hover {background-color: #edd502}
.login-section .social-button .button-kakao:active {background-color: #dbc601}
.login-section .social-button .button-naver {color: var(--white); background-color: #03c75a}
.login-section .social-button .button-naver:hover {background-color: #00b752}
.login-section .social-button .button-naver:active {background-color: #00a149}
.login-section .social-button .button-google {color: var(--grey-800); border: 1px solid var(--grey-300); background-color: var(--white)}
.login-section .social-button .button-google:hover {background-color: #f8f9fa}
.login-section .social-button .button-google:active {background-color: #ececec}
.login-section .social-button .button-google img {width: 18px; margin-right: 8px; vertical-align: -1px}

/* ------------------------------
 * REGISTER
------------------------------ */
.register-section .business-type-checker {position: relative}
.register-section .business-type-checker input {position: absolute; top: 1px; left: 1px; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); overflow: hidden}
.register-section .business-type-checker label {display: block; cursor: pointer}
.register-section .business-type-checker .check-helper {display: flex; width: 100%; height: 120px; border: 1px solid var(--grey-300); border-radius: 12px; align-items: center; justify-content: center}
.register-section .business-type-checker label span:not(.check-helper) {display: block; font-size: 15px; font-weight: 600; color: var(--grey-800); text-align: center; margin-top: 10px}
.register-section .business-type-checker input:checked + label .check-helper {border-color: var(--secondary); box-shadow: 0 0 0 3px var(--primary)}
.register-section .business-type-checker input:checked + label span:not(.check-helper) {color: var(--secondary)}
.register-section .attached-img img {max-width: 64px}
.register-section .attached-img img, .register-section .attached-img .px-form-check {display: inline-block; vertical-align: middle}
#auth_area {display: none}
#auth_area.show {display: flex}
#auth_response_text {display: block; font-size: 14px; font-weight: 600; color: var(--danger-800); margin-top: 6px}

/* ------------------------------
 * MEDIA QUERIES
------------------------------ */
@media (max-width: 767px) {
    .login-section, .register-section {padding-top: 120px; padding-bottom: 80px}
    .login-section .login-header {margin-bottom: 48px}
    .login-section .login-header .logo {width: 100px; margin-bottom: 24px}
    .login-section .login-header p {margin-top: 4px}
}