@charset "utf-8";

/* 회원 레이아웃 */
.page-member--plain #container {padding-top:100px;}
.page-member--plain .real-cont {padding-top:0;}
.page-member .member-page-tit {margin:0 0 80px; font-size:var(--font-size48); font-weight:700; line-height:1.3em; letter-spacing:-.04em; text-align:center; color:#121212;}
.page-member .btn-pack {border-radius:8px;}
.page-member .required {color:#e23c3c; font-weight:700;}

/* 로그인 */
.login-area {max-width:470px; margin:0 auto;}
.login-content .group {margin-bottom:8px;}
.login-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.page-member .login-content .input {height:60px; font-size:16px; border-radius:8px;}
.page-member .login-options {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; font-size:14px; font-weight:500; color:#505050;}
.page-member .login-save label {color:#505050; font-size:14px; font-weight:500;}
.page-member .login-save input:checked + label:before {background-color:var(--color-primary); border-color:var(--color-primary);}
.page-member .login-find-links {display:flex; align-items:center; flex-shrink:0;}
.page-member .login-find-links a {color:#505050; font-weight:500; text-decoration:none;}
.page-member .login-find-links a:hover {text-decoration:underline;}
.page-member .login-find-links .bar {display:inline-block; width:1px; height:14px; margin:0 12px; background:#ddd; vertical-align:middle;}
.page-member .login-content .btn-pack {display:block; width:100%;}
.page-member .login-content .btn-pack.focus {display:flex; align-items:center; justify-content:center; margin-top:20px; height:60px; line-height:1em; background:var(--brand-green); border-color:var(--brand-green); color:#fff; border-radius:8px;}
.page-member .login-content .login-join {display:flex; align-items:center; justify-content:center; width:100%; margin-top:10px; height:60px; line-height:1em; font-size:20px; font-weight:500; text-align:center; background:#fff; border:1px solid #ddd; color:#333; border-radius:8px; text-decoration:none;}
.page-member .login-content .login-join:hover {border-color:#121212; color:#121212;}

/* 약관동의 */
.agree-wrap {max-width:680px; 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 { width:24px; height:24px; background:#fff; border:2px solid #ccc; border-radius:100%; margin-top:-.2em !important;}
.agree-wrap .agree-tit .checkbox input:checked + label:before {background-color:var(--color-primary); border-color:var(--color-primary); background-image:url("/images/bbs/checkbox.svg"); background-repeat:no-repeat; background-position:50% 50%;}
.agree-wrap .agree-box {position:relative; max-height:175px; margin-top:17px; padding:16px 20px; border:1px solid #ddd; overflow:auto; border-radius:8px;}
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:14px;}
.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;}
.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 {max-width:900px; margin:0 auto;}
.page-member .join-form {max-width:1080px;}
.join-form .required {color:#e23c3c;}
.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:0; border-top:2px solid #868686; font-size:16px; line-height:1.5em;}
.page-member .join-form table {font-size:16px; border-radius:8px; overflow:hidden; border-top:0;}
.join-form table th {padding:12px 15px; border:1px solid #ddd; background:#fafafa; font-weight:700; color:#333;}
.page-member .join-form table th {padding:20px 24px; font-size:18px; font-weight:600; letter-spacing:-.03em; color:#121212; vertical-align:middle;}
.join-form table td {padding:12px 20px; border:1px solid #ddd; color:#505050;}
.page-member .join-form table td {padding:16px 24px; vertical-align:middle;}
.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;}
.page-member .join-form table tr:first-child th,
.page-member .join-form table tr:first-child td {border-top:2px solid #121212;}
.join-form input[readonly] {background-color:#fff; color:#505050;}
.join-form .help-text {display:inline-block; margin-left:10px; color:#767676;}
.page-member .join-form .help-text {display:block; margin:8px 0 0; font-size:14px; line-height:1.5em;}
.page-member .join-form .input {width:360px; max-width:100%; height:60px; font-size:16px; border-radius:8px;}
.page-member .join-form #user_email {width:440px;}
.page-member .join-form .btn-pack.medium {height:60px; line-height:3.625em; padding:0 24px; font-size:16px; vertical-align:top;}
.page-member .join-form .btn-pack.large,
.page-member .member-leave .btn-pack.large {min-width:160px; height:60px; line-height:2.9em; font-size:20px;}
.page-member .join-form .buttons {margin-top:50px;}
.join-form + .buttons {margin-top:50px;}

/* 계정찾기 */
.find-area {max-width:470px; margin:0 auto;}
.find-tab {text-align:center; border-bottom:4px solid var(--color-primary); margin-bottom:50px;}
.find-tab ul {display:flex; padding:0 2px;}
.find-tab ul li {flex:1; border:4px solid #dfdfdf; border-bottom:0; margin:0 -2px; border-radius:10px 10px 0 0;}
.find-tab ul li a {display:block; color:#333; font-size:18px; font-weight:500; line-height:3.333em;}
.find-tab ul li.active {position:relative; z-index:2; border-color:var(--color-primary);}
.find-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#fff;}
.find-tab ul li.active a {color:var(--color-primary); font-weight:700;}
.find-content .group {margin-bottom:8px;}
.find-content .group .input {display:block; width:100%; height:54px; font-size:16px;}
.page-member .find-content .input {height:60px; font-size:16px; border-radius:8px;}
.find-content .btn-pack {display:block; width:100%; margin-top:10px;}
.find-content .btn-pack.focus {margin-top:30px; font-weight:500;}
.find-result {text-align:center; padding:34px 42px; color:#505050; font-size:18px; font-weight:400; line-height:1.75em; background:#fafafa; border-top:2px solid var(--color-primary); border-bottom:1px solid #ddd;}
.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;}

/* 마이페이지 */
.page-member .mypage-area {max-width:1080px; margin:0 auto;}
.page-member .mypage-tab {margin-bottom:50px; border-bottom:none; background:transparent;}
.page-member .mypage-tab .lnb {width:auto; max-width:none; margin:0; padding:0;}
.page-member .mypage-tab .lnb ul {display:flex; justify-content:center; align-items:flex-end; gap:44px; margin:0; padding:0; list-style:none;}
.page-member .mypage-tab .lnb ul li,
.page-member .mypage-tab .lnb ul li:first-child {flex:0 0 auto; border:none;}
.page-member .mypage-tab .lnb ul li a {display:block; width:auto; height:auto; padding:0; background:none; color:#ccc; font-size:24px; font-weight:700; line-height:1.6em; letter-spacing:-.03em; white-space:nowrap; text-decoration:none;}
.page-member .mypage-tab .lnb ul li a:hover,
.page-member .mypage-tab .lnb ul li.active a {background:none; color:#121212;}
.page-member .mypage-area .tab-content {display:none;}
.page-member .mypage-area .tab-content.is-active {display:block;}
.page-member .mypage-area .tab-content .member-leave {margin-top:0;}

/* 회원탈퇴 */
.page-member .member-leave {margin-top:80px;}
.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;}
.page-member .member-leave .form {border-radius:8px;}
.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%;}
.page-member .member-leave .input {height:60px; font-size:16px; border-radius:8px;}

/* 회원가입 완료 */
.page-member .join-complete {max-width:680px; margin:0 auto; padding:20px 0 40px; text-align:center;}
.page-member .join-complete .member-page-tit {margin-bottom:50px;}
.page-member .join-complete .icon {display:flex; align-items:center; justify-content:center; width:88px; height:88px; margin:0 auto 32px; background:var(--brand-green); border-radius:50%;}
.page-member .join-complete .icon:after {content:""; display:block; width:28px; height:16px; margin-top:-6px; border-left:4px solid #fff; border-bottom:4px solid #fff; transform:rotate(-45deg);}
.page-member .join-complete .tit {margin:0 0 16px; color:#121212; font-size:28px; font-weight:700; line-height:1.4em; letter-spacing:-.03em;}
.page-member .join-complete .txt {margin:0; color:#505050; font-size:16px; font-weight:400; line-height:1.7em;}
.page-member .join-complete .buttons {margin-top:50px;}
.page-member .join-complete .buttons .cen {display:flex; justify-content:center; gap:10px;}
.page-member .join-complete .btn-pack.large {display:flex; align-items:center; justify-content:center; min-width:160px; height:60px; padding:0 28px; line-height:1em; font-size:20px; font-weight:500; border-radius:8px; text-decoration:none;}
.page-member .join-complete .btn-pack.focus {background:var(--brand-green); border-color:var(--brand-green); color:#fff;}