@charset "utf-8";
@import url("common.css");

body { background: #fff; }

.wrapper { width: 100%; height: auto; z-index: 1; }

.account-wrap { width: 400px; min-height: 280px; margin: 80px auto 20px; }
.account-wrap.join { width: 500px; }

.account-header { display: flex; justify-content: center; }
.account-header img { width: auto; height: 182px; object-fit: contain }
.account-header img.logo { width: auto; height: 58px; object-fit: contain }

.account-box { width: auto; height: auto; margin: 20px 0 30px 0; }
.account-title { margin-bottom: 20px; }
.account-title h1 { font-size: 2.5rem; font-weight: bold; }
.account-title h2 { font-size: 2rem; font-weight: bold; }
.account-title p { margin-top: 10px; font-size: 1.5rem; line-height: 1.7rem; word-break: keep-all; }
.account-option { height: 20px; margin-top: 10px; }
.account-message { height: 20px; margin-top: 10px; font-size: 1.5rem; color: #FF003E; line-height: 20px; display: none; }
.account-button { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 10px; }
.account-button button {
    width: 100%; height: 50px;
    margin-bottom: 5px;
    border: 1px solid #2d66af;
    border-radius: 3px;
    background: #2d66af;
    font-size: 1.5rem;
    color: #fff;
}
.account-button button:hover { border: 1px solid #2d66af; background: #163861; }
.account-button button + button { margin-left: 0; }
.account-button .btn-submit { flex: 1 0 0; width: unset; }
.account-button .btn-cancel { flex: 1 0 0; width: unset; border: 1px solid #A6B0B7; background: #fff; color: #333; }
.account-button .btn-cancel:hover { border: 1px solid #A6B0B7; background: #DDDDDD; }
.account-link { margin-top: 10px; display: flex; justify-content: space-between; align-items: center }
.account-link a { font-size: 1.5rem; }

.account-ocl { margin-top: 40px; display: flex; justify-content: space-around; }
.account-ocl button { width: 64px; height: 64px; border-radius: 50%; text-indent: -9999px; overflow:hidden; }
.account-ocl button.google { background: url(../images/ic_google.png) no-repeat center; }
.account-ocl button.naver { background: url(../images/ic_naver.png) no-repeat center; }
.account-ocl button.kakao { background: url(../images/ic_kakao.png) no-repeat center; }
.account-ocl button+button { margin-left: 0; }

.account-footer { margin-top: 30px; }
.account-footer .policy-link { text-align: center; }
.account-footer .policy-link a { font-size: 1.5rem; }
.account-footer .policy-link a+a { margin-left: 20px; }
.account-footer .copyright { margin-top: 10px; font-size: 1.2rem; font-weight: 500; text-align: center; }

.account-fieldset { width: 100%; margin-top: 30px; }
.account-fieldset h3 { font-size: 1.8rem; font-weight: 500; }
.account-fieldset .title { display: flex; justify-content: space-between; align-items: center; }
.account-fieldset .title span { font-size: 1.3rem; }

.account-help {
    display: block;
    list-style-type: disc;
    list-style-position: inside;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
.account-help li {
    font-size: 1.3rem;
    line-height: 1.7rem;
    display: list-item;
    text-align: -webkit-match-parent;
}
.account-help li+li { margin-top: 5px; }

.account-wrap .input-txt { width: 100%; height: 50px; border-radius: 3px; font-size: 1.5rem; color: #333; }
.account-wrap .input-txt+.input-txt { margin-top: 10px; }
.account-wrap.join .account-box .input-txt { height: 40px; }

.input-wrap { margin-top: 20px; display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 15px 10px; }
.input-wrap > .input-box { flex: 1 0 100%; } /* flex: 1 0 calc(50% - 5px); */
.input-wrap > .input-box.blank { display: none; }
.input-wrap > .input-box+.input-box { margin-top: 0; }
.input-box label { font-size: 1.3rem; }
.input-box em { font-size: 1.3rem; }
.input-box em.valid { color: #1B84FF; }
.input-box em.error { color: #FF003E; }
.input-button button {
    min-width: 80px; height: 40px;
    border: 1px solid #1E2129;
    border-radius: 3px;
    background: #1E2129;
    font-size: 1.5rem;
    color: #fff;
}
.input-button button:hover { border: 1px solid #1E2129; background: #111318; }

.find-result {
    width: 100%; height: 80px;
    margin-top: 20px;
    border: 1px solid #A8A8A8;
    border-radius: 3px;
    background: #fff;
    font-size: 2rem;
    line-height: 80px;
    color: #508AFB;
    text-align: center;
}

.policy { margin-top: 20px; }
.policy li { display: flex; justify-content: space-between; align-items: center; }
.policy li+li { margin-top: 10px; }
.policy li a { font-size: 1.3rem; }
.policy li a:hover { text-decoration: underline; }

/** popup **/
.popup-new-password { width: 400px; }
.popup-new-password .popup-body h4 { margin-bottom: 20px; font-size: 1.3rem; font-weight: normal; word-break: keep-all; }

/** shortcut **/
.shortcut {
    position: fixed; left: 50%; bottom: -250px;
    width: 350px;
    padding: 30px 30px;
    border: 1px solid #B0B0B0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
	overflow: hidden;
    display: none;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateX(-50%) translateZ(0);
    transition: bottom 300ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
    z-index: 10;
}
.shortcut.on { bottom: 20px;   }
.shortcut .message { display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.shortcut .message .icon { flex: none; width: 48px; height: 48px; border: 0px solid #B0B0B0; border-radius: 10px; background: #fff url(../images/favicon-48x48.png) no-repeat center; }
.shortcut .message span { font-size: 1.8rem; font-weight: 500; line-height: 2.5rem; word-break: keep-all; }
.shortcut .message span b { font-weight: bold; }

/** media **/
@media screen and (max-width: 767px) {
    /* tablet */
    .account-wrap { width: 90% !important; min-width: 300px; margin: 20px auto 20px; }
    .account-box { margin: 30px 0 20px 0; }
    .account-button button { height: 40px; }
    .account-ocl { margin-top: 30px; }
    .account-footer .copyright { font-size: 1.1rem; }
    .account-wrap .input-wrap > .input-box { flex: 1 0 100%; }
    .account-wrap .input-wrap > .input-box.blank { display: none; }
    .account-wrap .input-txt { height: 40px; }
    .popup-new-password { width: 90%; }
}

@media screen and (max-width: 360px) {
    .shortcut { width: 95%; padding: 20px 10px; }
}