@charset "utf-8";
/* 버튼 공통 */
.member-btn-mg { margin-top: 30px; }
.member-btn {display:flex; width:100%; margin-bottom:8px; border-radius: 8px; font-size: var(--font-size18); font-weight: 600; border-radius: 8px; font-weight:600; height: 64px; border: none; cursor: pointer;align-items: center; justify-content: center; position: relative; }
.member-btn.bg1 { color: #fff; background: #121212; }
.member-btn.bg2 { color: #505050; background: #F1F1F1; }
.member-btn.kakao { color: #3b1e1e; background: #fbe300; }
.member-btn.kakao::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; margin: auto; width: 24px; height: 24px; background: url(../images/member/kakao.png) center no-repeat; background-size: contain; }
.member-btn.naver { color: #fff; background: #03A94D; }
.member-btn.naver::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; margin: auto; width: 24px; height: 24px; background: url(../images/member/naver.png) center no-repeat; background-size: contain; }

/* 로그인 */
.login-area {max-width:470px; margin:0 auto;}
.login-tab {text-align:center; margin-bottom:40px; border-bottom: 1px solid #EEE;}
.login-tab ul {display:flex; }
.login-tab ul li {flex:1; position: relative; }
.login-tab ul li a {display:block; color:#878787; font-weight:600; line-height:1.5em; padding-bottom: 16px; }
.login-tab ul li.active {position:relative; z-index:2; border-color:#28ac9a;}
.login-tab ul li.active:after {content:""; position:absolute; left:0; bottom: -1px; width: 100%; background: #2c2c2c; height: 2px; }
.login-tab ul li.active a { color: #2c2c2c;}
.login-area .group {margin-bottom:8px;}
.login-area .group .input {display:block; width:100%; height:60px; font-size:16px; padding: 0 20px; border-color: #dfdfdf; border-radius: 8px; }
.login-area .group .input::placeholder { color: #a8a8a8; font-weight: 300; }
.login-area .links {display:flex; justify-content:space-between; margin-top:16px; font-size:14px; color:#2c2c2c; font-weight:400; line-height:1.42em; margin-bottom: 32px; }
.login-area .links .save label { position: relative; top: 1px; }
.login-area .links a {color:#2c2c2c; 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:10px; background:#dfdfdf;}
.login-info { text-align: center; margin-top: 40px; }
.login-info .tt { font-weight: 600; line-height: 1.75em; color: #a8a8a8; margin-bottom: 10px; }
.login-info .txt { font-size: 15px; line-height: 1.6em; font-weight: 500; color: #505050; }

.guest-link {margin-top:40px; text-align:center;}
.guest-link a {color:#505050; font-size:16px; line-height:1.5em; text-decoration:underline; text-underline-offset:0.25em;}

.guest-text {margin-top:45px; text-align:center; font-size:15px; line-height:1.75em; color:#505050;}
.guest-text strong {font-weight:500;}
.guest-text .hour {margin-top:10px; color:#878787; font-size:14px; line-height:1.75em;}

/* 약관동의 */
.agree-wrap {max-width:980px; margin:0 auto 60px;}
.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 .checkbox { display: inline-block; position: relative; vertical-align: middle; margin-top: -.2em;}
.agree-wrap .checkbox input { position:absolute; top:0; left:0; width:0; height:0; border:0; opacity:0; z-index:-1; }
.agree-wrap .checkbox label { display: inline-block; width: 100%; }
.agree-wrap .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%; content: ""; display: inline-block; vertical-align:middle; margin:-.1em 8px 0 0;}
.agree-wrap .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:230px; margin-top:20px; padding:20px; border:1px solid #eee; overflow:auto; border-radius: 16px; }
.agree-wrap .agree-box .terms-wrap {color:#767676; font-size:16px;}
.agree-wrap .agree-box .terms-wrap .sec {margin-bottom:30px;}
.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;}

/* 회원가입 */
.join-wrap {max-width:980px; margin:0 auto;}
.join-wrap h3 {font-size:var(--font-size26); line-height:1.53em; color: #2c2c2c; font-weight: 600; padding-bottom: 30px; }
.input-flex {display:flex; flex-wrap: wrap; gap: 40px 0; padding: 50px 0; border-bottom: 1px solid #eee; border-top: 2px solid #2c2c2c; flex-direction: column;}
.input-flex h5 { font-size: 16px; line-height: 1.75em; color: #878787; font-weight: 600; }
.input-flex.bd { border-top: none; }
.input-flex dl { display: flex; align-items: center; }
.input-flex .required {color:var(--color-primary);}
.input-flex dl dt { width: 140px; font-size: var(--font-size18); line-height: 1.55em; font-weight: 600; color: #2c2c2c; }
.input-flex dl dd { flex: 1 1 auto; min-width: 0; width: 1%; }
.input-flex dl dd .input { width: 100%; padding: 0 20px; height: 60px; border-radius: 8px; border: 1px solid #eee; color: #2c2c2c; }
.input-flex dl dd .input::placeholder { color: #a8a8a8; }
.input-flex dl dd .fx { display: flex; gap: 6px; width: 100%; }
.input-flex dl dd .fx .input { flex: 1 1 auto; min-width: 0; width: 1%; }
.input-flex dl dd .fx .btns { height: 60px; color: #fff; line-height: 1.5em; font-weight: 700; padding: 0 20px; display: inline-flex; align-items: center; background: #121212; border-radius: 5px; border: none; }
.input-flex dl dd .check-fx { display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap;}
.input-flex dl dd .check-fx .item { height: 20px; }
.input-flex dl dd .item-fx { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.input-flex dl dd .item-fx .item { display: flex; align-items: center;}
.input-flex dl dd .fx p { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 20px; }
.join-wrap .submit {margin-top:60px; text-align:center;}
.join-wrap .etc-link a { display: inline-block; padding: 8px 12px 6px; font-size: 14px; color: #a8a8a8; font-weight: 400; line-height: 1.42em; border-radius: 8px; border: 1px solid #DFDFDF; }
.join-wrap .etc-link a:hover { background: #121212; border-color: #121212; color: #fff; }

/* 마이페이지 정보수정 */
.join-wrap.w100 { max-width: 100%;}
.join-wrap.w100 dl dt { width: 180px; }

.join-agree {padding:20px 16px; border:1px solid #ddd; border-radius:4px; font-size:15px; line-height:1.5em;}
.join-agree .agree-item {margin-top:16px; display:flex; justify-content:space-between; align-items:center;}
.join-agree .checkbox {display:flex;}
.join-agree .line {margin:20px 0; border-bottom:1px solid #e5e5e5;}
.join-agree em {color:#999; font-style:normal; font-size:.875em;}
.join-agree em.required {color:var(--color-primary);}
.join-agree .arr {margin-left:10px;}
.join-agree .arr svg {display:block}

/* 전문보기 */
.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-complete { max-width:400px; min-height:40vh; margin:0 auto; text-align:center;}
.join-complete h2 {font-size:var(--font-size28); line-height:1.5em; font-weight:600; color:#2c2c2c; margin: 50px 0 32px;}
.join-complete h2 span { color: var(--color-primary);}
.join-complete p {line-height:1.88em; font-size:var(--font-size18); font-weight:400; color:#505050;}
.join-complete .btns {display:flex; justify-content:center; gap:10px; margin-top:60px;}
.join-complete .btns a { border-radius: 40px; }

/* 계정찾기 */
.find-area {max-width:470px; margin:0 auto;}
.find-tab {text-align:center; margin-bottom:30px;}
.find-tab ul {display:flex; border-bottom:1px solid #eee;}
.find-tab ul li {flex:1;}
.find-tab ul li a {display:flex; align-items:center; justify-content:center; width:100%; height:60px; color:#a8a8a8; font-size:16px; font-weight:600; line-height:1.3em;}
.find-tab ul li.active {position:relative; z-index:2; border-color:#28ac9a;}
.find-tab ul li.active:after {content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#000;}
.find-tab ul li.active a {color:#2c2c2c; font-weight:700;}
.find-content .group {margin-bottom:8px;}
.find-content .group .input {display:block; width:100%; height:60px; font-size:16px; padding: 0 20px; border-color: #dfdfdf; border-radius: 8px;}
.find-content .btn-pack {display:flex; width:100%; margin-top:10px;}
.find-content .btn-pack.focus {margin-top:18px;}
.find-content .btn-pack.xlarge {font-weight:500;}
.find-result {text-align:center; padding:10px 0 40px; color:#505050; font-weight:400; line-height:1.75em; border-bottom:1px solid #eee;}
.find-result h4 {color:var(--color-primary); font-size:22px; font-weight:600; 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:left; color:#505050; line-height:1.7em; margin-bottom:40px; font-size: 15px; font-weight: 400; }
.member-leave .txt .tit {color:#121212; font-size:17px; line-height:1.5em; margin-bottom:15px; font-weight: 700; }
.member-leave .form {max-width:100%; margin:0 auto 40px; padding:50px; color:#666; font-size:16px; line-height:1.5em; border:1px solid #eee; border-radius:10px; }
.member-leave .form .group {display:flex; align-items:center; margin-bottom:20px;}
.member-leave .form .group.mg { margin-bottom: 34px; }
.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 { height: auto;}
.member-leave .form .group .input {flex:1 1 auto; min-width:0; width:1%; height: 60px; border-radius: 8px; }