@charset "utf-8";

/* 로그인 */
.login-area {max-width:550px; margin:0 auto;}
.login-tab {text-align:center; border-bottom:4px solid var(--color-primary); margin-bottom:50px;}
.login-tab ul {display:flex; padding:0 2px;}
.login-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px; border-radius:10px 10px 0 0;}
.login-tab ul li a {display:block; color:#333; font-size:18px; font-weight:500; line-height:60px;}
.login-tab ul li.active {position:relative; z-index:2; border-color:var(--color-primary);}
.login-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.login-tab ul li.active a {color:#262262; font-weight:700;}

.log-input-wrap {position:relative;}
.log-input-wrap img {position:absolute; top:50%; left:20px; width:20px; height:20px; transform:translateY(-50%);}
.log-input-wrap .input {padding-left:60px;}

.login-content .group {margin-bottom:var(--size25);}
.login-content .group label {display:block; margin-bottom:0.5em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); color:#121212; font-weight:700;}
.login-content .group .input {display:block; width:100%; height:var(--btn-size); font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); border-radius:8px;}
.login-content .links {display:flex; justify-content:space-between; margin-top:14px; color:#121212; font-weight:700; line-height:1.5em;}
.login-content .links a:hover {text-decoration:underline;}
.login-content .links .bar {display:inline-block; vertical-align:middle; margin:-.2em 12px 0; width:1px; height:16px; background:#ddd;}
.login-content .btn-pack {display:block; width:100%;}
.login-content .btn-pack.focus {margin-top:var(--size35);}

.join-btn {text-align:center; margin-top:var(--size30); font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); color:#121212; line-height:1.4em;}
.join-btn a {display:inline-block; padding:0.45em 1.1em; margin-left:1.1em; background:#0084cc; border-radius:0.25em; font-size:var(--font-size-16); line-height:1; color:#fff; font-weight:700;}

.sns-login {display:flex; padding-top:var(--size30); margin-top:var(--size40); border-top:1px solid #ddd;}
.sns-login p {flex:1 1 auto; min-width:0; width:1%; font-size:clamp(16px, calc(24/ var(--inner) * 100vw ),24px); color:#121212; line-height:1.4em;}
.sns-login .btn-wrap {display:flex; gap:var(--size20);}
.sns-login .btn-wrap a {display:block;}


/* 약관동의 */
.join-step {display:flex; justify-content:center; gap:var(--size40); margin-bottom:var(--size60); padding-bottom:var(--size60); border-bottom:1px solid #ddd;}
.join-step .item {display:flex; position:relative; align-items:center; gap:var(--size15); padding-right:clamp(50px, calc(100/ var(--inner) * 100vw ),100px);}
.join-step .item:after {content:""; position:absolute; top:50%; right:0; width:clamp(30px, calc(60/ var(--inner) * 100vw ),60px); height:1px; background:#505050;}
.join-step .item:last-child {padding-right:0;}
.join-step .item:last-child:after {display:none;}
.join-step .item .num {display:flex; flex-direction:column; justify-content:center; align-items:center; width:clamp(50px, calc(100/ var(--inner) * 100vw ),100px); height:clamp(50px, calc(100/ var(--inner) * 100vw ),100px); border:1px solid #505050; border-radius:100%; font-size:14px; font-weight:700; line-height:1; color:#505050;}
.join-step .item .num span {display:block; font-size:clamp(16px, calc(32/ var(--inner) * 100vw ),32px); font-weight:700; color:#121212;}
.join-step .item .tit {font-size:var(--font-size-18); font-weight:700; line-height:1.2em; color:#505050;}
.join-step .item.active .num {background:#134198; border-color:#134198; color:#fff;}
.join-step .item.active .num span {color:#fff;}
.join-step .item.active .tit {color:#134198;}

.btn-pack.submit-btn {min-width:335px; box-shadow:3px 3px 5px rgba(0, 0, 0, 0.2);}
.btn-pack.submit-btn .arw {display:inline-block; margin-left:0.5em; font-family:'pretendard'; font-weight:700; line-height:1; color:#fff;}

.agree-wrap {margin:0 auto 50px;}
.agree-wrap .group {margin-top:40px;}
.agree-wrap .group:first-child {margin-top:0;}
.agree-wrap .agree-tit {color:#333; font-size:20px; font-weight:600; line-height:1.3em;}
.agree-wrap .agree-tit .checkbox label:before {margin-top:-.02em; width:24px; height:24px; background:#fff url("../images/member/checkbox.png") 50% 50% no-repeat; border:2px solid #ccc; border-radius:100%;}
.agree-wrap .agree-tit .checkbox input:checked + label:before {background-color:var(--color-primary); border-color:var(--color-primary); background-image:url("/images/member/checkbox_on.png");}
.agree-wrap .agree-box {position:relative; max-height:175px; margin-top:17px; padding:20px; border:1px solid #ddd; background:#f9f9f9; overflow:auto;}
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:16px;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:25px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#767676; font-size:16px; font-weight:600; margin-bottom:0;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:400;}
.agree-wrap + .buttons {margin:var(--size80) 0 0;}

.terms-wrap {font-weight:400; color:#666; line-height:1.75em;}
.terms-wrap .sec {margin-bottom:40px;}
.terms-wrap .sec h3 {color:#222; font-size:1.1em; font-weight:700; margin-bottom:7px;}
.terms-wrap .sec p {margin-bottom:1em;}
.terms-wrap .sec strong {font-weight:700;}
.terms-wrap .sec ol li {padding-left:1em; text-indent:-1em;}
.terms-wrap .sec ol li ol li {padding-left:1.35em; text-indent:-1.35em;}
.terms-wrap .policy-contact {display:flex; padding:20px 0; background:#fafafa; border:1px solid #e5e5e5; margin-bottom:1em;}
.terms-wrap .policy-contact dl {flex:1; padding:0 20px; border-left:1px solid #e5e5e5;}
.terms-wrap .policy-contact dl:first-child {border-left:0;}
.terms-wrap .policy-contact dt {font-weight:500; color:#333; margin-bottom:12px;}

/* 회원가입 */
.join-form {margin-bottom:var(--size80);}
.join-form:last-child {margin-bottom:0;}
.join-form h3 {margin-bottom:0.5em; font-size:clamp(20px, calc(28/ var(--inner) * 100vw ),28px); font-weight:700; line-height:1.3em; color:#121212;}
.join-form .required {color:#fd8239}
.join-form .join-form-txt {color:#505050; font-weight:400; line-height:1.4em; margin-bottom:12px;}
.join-form table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #134198; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.5em;}
.join-form table th {padding:12px 15px; border:1px solid #ddd; background:#f9f9f9; font-weight:700; color:#121212; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px);}
.join-form table td {padding:12px 30px; border:1px solid #ddd; color:#505050;}
.join-form tr th:first-child,
.join-form tr td:first-child {border-left:0;}
.join-form tr th:last-child,
.join-form tr td:last-child {border-right:0;}
.join-form input[readonly] {background-color:#fff; color:#505050;}
.join-form input {height:var(--btn-size); border-radius:8px;}
.join-form .btn-pack {height:var(--btn-size); line-height:var(--btn-size); font-size:clamp(16px, calc(18/ var(--inner) * 100vw ),18px); font-weight:600;}
.join-form .help-text {display:inline-block; margin-left:10px; color:#767676;}
.join-form + .buttons {margin:var(--size80) 0 0;}
.join-form .ui-datepicker-trigger {width:var(--btn-size); height:var(--btn-size); border-radius:8px; border-color:#dddd;}
.join-form .form-items .item {width:auto; margin-right:var(--size35);}

/* 가입완료 */
.join-complete {max-width:680px; margin:0 auto; text-align:center;}
.join-complete .tit {color:#121212; font-size:32px; font-weight:700; line-height:1.4em; margin-bottom:0.5em;}
.join-complete .txt {color:#878787; font-size:20px; line-height:1.6em;}
.join-complete .icon {width:180px; height:180px; background:var(--color-primary) url("../images/member/complete.png") 50% 50% no-repeat; border-radius:100%; margin:36px auto 45px;}
.join-complete .buttons {margin:var(--size80) 0 0;}
.join-complete .cen {display:flex; gap:var(--size20);}
.join-complete .cen a {flex:1;}

/* 게정찾기 */
.find-area {max-width:550px; margin:0 auto;}
.find-tab {text-align:center; margin-bottom:var(--size70);}
.find-tab ul {display:flex; justify-content:center; margin:-4px;}
.find-tab ul li {padding:4px;}
.find-tab ul li a {display:inline-block; padding:0 1.67em; background:#f4f4f4; color:#a8a8a8; font-weight:600; line-height:2.75em; border-radius:100vh;}
.find-tab ul li.active a {background:var(--color-primary); color:#fff;}

.find-content .group {margin-bottom:var(--size25);}
.find-content .group .input {display:block; width:100%; height:var(--btn-size); font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px); border-radius:8px;}
.find-content .group label {display:block; margin-bottom:0.5em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); color:#121212; font-weight:700;}

.find-content .btn-pack {display:block; width:100%; margin-top:10px;}
.find-content .btn-pack.focus {margin-top:30px;}
.find-content .btn-pack.xlarge {font-weight:500; border-radius:5px;}
.find-result {text-align:center; padding:var(--size60) 20px; background:#f3f5fa; color:#505050; font-size:20px; font-weight:400; line-height:1.75em; border-top:2px solid #134198; border-bottom:1px solid #ddd;}
.find-result h4 {font-size:24px; font-weight:700; line-height:1.4em; margin-bottom:20px; color:#121212;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:var(--color-primary); font-size:40px; font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.leave-btn {display:block; margin-top:1.5em; font-size:14px; color:#a8a8a8; text-decoration:underline; text-underline-offset:3px;}
.member-leave .txt {text-align:center; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); color:#878787; line-height:1.6em; margin-bottom:var(--size50);}
.member-leave .txt .tit {color:#121212; font-size:clamp(16px, calc(32/ var(--inner) * 100vw ),32px); line-height:1.5em; margin-bottom:var(--size20);}
.member-leave .form {max-width:550px; margin:0 auto; color:#121212; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.5em;}
.member-leave .form .group {margin-bottom:var(--size25);}
.member-leave .form .group:last-child {margin-bottom:0;}
.member-leave .form .group .label-tt {display:inline-block; margin-bottom:0.5em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); color:#121212; font-weight:700;}
.member-leave .form .group .input {width:100%; height:var(--btn-size); border-radius:8px; font-size:clamp(14px, calc(18/ var(--inner) * 100vw ),18px);}
.member-leave .buttons {margin-top:var(--size40);}
.member-leave .buttons .btn-pack {width:100%;}

/* 마이페이지 */
.mypage-tab {margin-bottom:var(--size80);}
.mypage-tab ul {display:flex; gap:var(--size10);}
.mypage-tab ul li {flex:1;}
.mypage-tab ul li a {display:block; background:#f4f4f4; border-radius:0.18em; padding:1.18em 1em; color:#505050; font-size:clamp(14px, calc(22/ var(--inner) * 100vw ),22px); font-weight:600; text-align:center;}
.mypage-tab ul li.active a {color:#fff; background:#134198; font-weight:700; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2);}