@charset "utf-8";

/* 로그인 */
.login-area {max-width:580px; margin:0 auto; padding:60px; background:#fff; border:1px solid var(--color-primary); border-radius:var(--radius-30);}
.login-area .group {margin-bottom:20px;}
.login-area .group label {display:block; margin-bottom:12px; font-weight:500; line-height:1.3em;}
.login-area .group .input {display:block; width:100%; font-size:16px; font-weight:500;}
.login-area .links {display:flex; justify-content:space-between; margin-top:18px; font-size:15px; color:#505050; font-weight:500; line-height:1.5em;}
.login-area .links a {color:#878787; font-weight:400;}
.login-area .links a:hover {text-decoration:underline;}
.login-area .links .bar {display:inline-block; vertical-align:middle; margin:-.2em 10px 0; width:1px; height:14px; background:#a8a8a8;}
.login-area .btn-pack {display:block; width:100%; margin-top:10px; border-radius:60px;}
.login-area .btn-pack.focus {margin-top:60px;}
.login-area .btn-pack.xlarge {font-weight:500;}

.sns-login {text-align:center; margin-top:50px;}
.sns-login .tit {position:relative; color:#333; font-size:15px; font-weight:400; line-height:1.3em; margin-bottom:35px;}
.sns-login .tit:before {content:""; position:absolute; top:50%; left:0; margin-top:-1px; width:100%; height:1px; background:#ddd;}
.sns-login .tit span {display:inline-block; position:relative; padding:0 30px; background:#fff;}
.sns-login a {margin:0 12px;}

/* 회원가입 타입 선택 */
.join-type {display:flex; gap:30px; max-width:1000px; margin:0 auto; text-align:center;}
.join-type .item {display:block; width:50%;}
.join-type .box {position:relative; padding:60px; min-height:90%; background:#fff; border-radius:var(--radius-30);}
.join-type .box .tit {margin-bottom:12px; color:var(--color-primary); font-size:var(--font-size-30); line-height:1.33em; letter-spacing:-.04em;}
.join-type .box .txt {margin-bottom:27px; color:#878787; line-height:1.65em; letter-spacing:-.03em;}
.join-type .box .txt2 {color:#008681; font-size:14px; line-height:1.65em; letter-spacing:-.03em;}
.join-type .btn-submit {position:relative; transform:translateY(-50%);}
.join-type .item:hover .box {outline:2px solid var(--color-primary);}
.join-type .item:hover .btn-submit:after {transform:translateX(5px);}

/* 약관동의 */
.agree-wrap .wrap {max-width:580px; margin:0 auto; padding:60px 60px 105px; background:#fff; border:1px solid var(--color-primary); border-radius:var(--radius-30);}
.agree-wrap .group:not(:first-child) {margin-top:40px;}
.agree-wrap .group:first-child .agree-tit {font-size:22px; font-weight:700;}
.agree-wrap .agree-tit {color:#2c2c2c; font-size:18px; 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:120px; margin-top:10px; padding:12px 16px; border:1px solid #ddd; overflow:auto;}
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:14px; line-height:1.33em;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:20px;}
.agree-wrap .agree-box .terms-wrap .sec h3 {color:#767676; font-size:14px; font-weight:400; margin-bottom:0;}
.agree-wrap .agree-box .terms-wrap .sec strong {font-weight:400;}
.agree-wrap .btn-area {position:relative; transform:translateY(-50%); text-align:center;}

.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;}

.simple-agree {padding:40px 0; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;}
.simple-agree strong {font-weight:600;}
.simple-agree .item {margin-bottom:7px;}
.simple-agree .required {color:#fd8239}
.simple-agree .checkbox label:before {margin-top:-.02em; margin-right:10px; width:20px; height:20px; background-color:#fff; border:1px solid #ccc; border-radius:4px;}
.simple-agree .checkbox a {color:var(--color-primary);}
.simple-agree .checkbox a:hover {text-decoration:underline;}

/* 회원가입 */
.join-form {max-width:900px; margin:0 auto;}
.join-form .wrap {max-width:580px; margin:0 auto; padding:60px 60px 80px; background:#fff; border:1px solid var(--color-primary); border-radius:var(--radius-30);}
.join-form h3 {margin-bottom:35px; font-size:var(--font-size-24); line-height:1.33em; letter-spacing:-.04em;}
.join-form .required {color:#fd8239}
.join-form .group {margin-bottom:20px;}
.join-form .group label {display:block; margin-bottom:12px; font-weight:500; line-height:1.3em;}
.join-form .group .input {display:block; width:100%; font-size:16px; font-weight:500;}
.join-form .flex {display:flex;}
.join-form .flex .input {border-top-right-radius:0; border-bottom-right-radius:0;}
.join-form .flex .btn-pack {border-top-left-radius:0; border-bottom-left-radius:0;}
.join-form input[readonly] {background-color:#fff; color:#505050;}
.join-form .help-text {display:inline-block; margin-left:10px; color:#767676;}
.join-form .simple-agree {border-bottom:0; padding:20px 0 0 0;}
.join-form .simple-agree .item {margin-bottom:6px;}
.join-form .btn-area {position:relative; transform:translateY(-50%); text-align:center;}

/* 가입완료 */
.join-complete .wrap {max-width:580px; margin:0 auto; padding:60px; background:#fff; border:1px solid var(--color-primary); border-radius:var(--radius-30); text-align:center;}
.join-complete .tit {color:var(--color-primary); font-size:28px; font-weight:700; line-height:1.4em; margin-bottom:30px;}
.join-complete .txt {color:#2c2c2c; font-size:18px; line-height:1.8em;}
.join-complete .icon {margin:25px 0;}
.join-complete .buttons {margin:0;}
.join-complete .btn-pack {border-radius:60px;}
.join-complete .btn-area {position:relative; transform:translateY(-50%); text-align:center;}

/* 게정찾기 */
.find-area {max-width:580px; margin:0 auto;  background:#fff; border:1px solid var(--color-primary); border-radius:var(--radius-30); overflow:hidden;}
.find-tab {text-align:center; background:#f4f4f4;}
.find-tab ul {display:flex;}
.find-tab ul li {flex:1;}
.find-tab ul li a {display:block; color:#333; font-size:18px; font-weight:500; line-height:60px;}
.find-tab ul li.active {background:var(--color-primary);}
.find-tab ul li.active a {color:#fff; font-weight:700;}
.find-content {padding:60px;}
.find-content .group {margin-bottom:8px;}
.find-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.find-content .btn-pack {display:block; width:100%; margin-top:10px; border-radius:60px;}
.find-content .btn-pack.focus {margin-top:30px;}
.find-content .btn-pack.xlarge {font-weight:500;}
.find-result {text-align:center; padding:34px 42px; color:#2c2c2c; font-size:18px; font-weight:400; line-height:1.75em; background:#fafafa; border-radius:16px;}
.find-result h4 {font-size:22px; font-weight:700; line-height:1.4em; margin-bottom:20px;}
.find-result p:first-child {margin-bottom:10px;}
.find-result .name {color:var(--color-primary); font-size:30px; font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.member-leave .txt {text-align:center; color:#505050; line-height:1.7em; margin-bottom:40px;}
.member-leave .txt .tit {color:#333; font-size:20px; line-height:1.5em; margin-bottom:15px;}
.member-leave .form {max-width:470px; margin:0 auto 40px; padding:50px; color:#666; font-size:16px; line-height:1.5em; background:#f9f9f9; border:1px solid #e5e5e5; border-radius:10px;}
.member-leave .form .group {display:flex; align-items:center; margin-bottom:20px;}
.member-leave .form .group:last-child {margin-bottom:0;}
.member-leave .form .group .label-tt {width:90px; color:#222; font-weight:700;}
.member-leave .form .group .text-id,
.member-leave .form .group .input {flex:1 1 auto; min-width:0; width:1%;}