@charset "utf-8";

/* 로그인 */
.login-area {max-width:580px; margin:0 auto;}
.login-tab {text-align:center; border-bottom:4px solid var(--color-1); 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-1);}
.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:var(--color-1); font-weight:700;}
.login-content .checkbox label:before {background-color:#fff;}
.login-content .group {margin-bottom:5px;}
.login-content .group .input {border:1px solid #E5E7EB; display:block; padding-left:clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px); width:100%; height:60px; font-size:16px; border-radius:8px;}
.login-content .group .input.id {background:#F9FAFB url(../images/member/log-icn1.png) no-repeat left clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) center; background-size:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px) auto;}
.login-content .group .input.pw {background:#F9FAFB url(../images/member/log-icn2.png) no-repeat left clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) center; background-size:clamp(14px, calc( 19 / var(--inner) * 100vw ), 19px) auto;}
.login-content .group .input::placeholder {font-weight:400; color:#878787;}
.login-content .links {display:flex; justify-content:space-between; margin-top:20px; font-size:14px; color:#505050; font-weight:500; line-height:1.5em;}
.login-content .links .bar {display:inline-block; vertical-align:middle; margin:-.2em clamp(5px, calc( 12 / var(--inner) * 100vw ), 12px) 0; width:1px; height:14px; background:#ddd;}
.login-content .btn-pack {display:block; width:100%; margin-top:10px; border-radius:8px; font-weight:600;}
.login-content .btn-pack.focus {margin-top:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);}
.login-content .form {padding:clamp(25px, calc( 64 / var(--inner) * 100vw ), 64px); border-radius:20px; border:1px solid #DDD;}
.login-content .bottom-text {display:flex;  align-items:center; justify-content:center; padding-top:30px;}
.login-content .bottom-text .text {padding-right:15px;}
.login-content .bottom-text .btn-join {display:flex;  align-items:center; justify-content:center; color:#fff; font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); font:600 sans-serif; width:clamp(80px, calc( 90 / var(--inner) * 100vw ), 90px); height:clamp(25px, calc( 32 / var(--inner) * 100vw ), 32px); border-radius:4px; background:var(--color-2);}

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


/* 약관동의 */
.agree-wrap {margin-bottom:60px;}
.agree-wrap .group {margin-top:60px;}
.agree-wrap .group:first-child {margin-top:0;}
.agree-wrap .group:nth-child(2) {margin-top:clamp(25px, calc( 45 / var(--inner) * 100vw ), 45px);}
.agree-wrap .agree-tit {margin-bottom:40px; color:#242424; 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-1); border-color:var(--color-1); background-image:url("/images/member/checkbox_on.png");}
.agree-wrap .agree-box {position:relative; max-height:175px; margin-top:17px; padding:16px 20px; border:1px solid #ddd; overflow:auto; border-radius:8px; background:#f9f9f9;}
.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;}

.term-process {margin-bottom:100px;}
.term-process ul {padding:10px; border-radius:16px; display:flex; gap:10px; border:1px solid #E5E7EB; background:#F9FAFB;}
.term-process ul li {flex:1;}
.term-process ul li .inner {height:68px; color:#242424; font-weight:600; display:flex; align-items:center; justify-content:center; border-radius:8px; background-color:#fff;}
.term-process ul li.active .inner {background:linear-gradient(110deg, #013B95 13.34%, #368DFF 86.66%); color:#fff;}

/* 정보입력 - 기본정보 */
.basinfo {display:flex; flex-direction:column; align-items:flex-start; gap:32px; width:100%;}
.basinfo .tit {color:#242424; font-size:clamp(20px, calc(30 / var(--inner) * 100vw), 30px); font-weight:700; line-height:1.5;}
.basinfo .cont {width:100%; padding:var(--space-40); border:1px solid #DDDDDD; border-radius:20px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; overflow:hidden;}
.basinfo .item {width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.basinfo .label {color:#242424; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:600; line-height:1.5;}
.basinfo .label .required {color:#FD8239;}
.basinfo .zip-row {display:flex; justify-content:flex-start; align-items:flex-start; gap:8px;}
.basinfo .input {width:100%; height:48px; padding:clamp(10px, calc(16 / var(--inner) * 100vw), 16px); background:#F9FAFB; border:1px solid #E5E7EB; border-radius:8px; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5;}
.basinfo .input:focus {border-color:#111111; color:#454545;}
.basinfo .input::placeholder {color:#9CA3AF;}
.basinfo .btn {flex:0 0 100px; width:100px; height:48px; background:var(--color-1); border:none; border-radius:8px; color:#fff; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; cursor:pointer;}
.basinfo .wrap {display:flex; width:100%; gap:8px; align-items:center;}
.basinfo .wrap .input {max-width:45%;}
.basinfo .wrap .btn-pack {border-radius:8px; height:48px; line-height:46px; font-size: var(--font-size-15); background-color: #242424; font-weight:500;}
.basinfo .help-text {font-size: var(--font-size-15); color:#9CA3AF; font-weight:600;}
.basinfo .input-foot {display:flex; justify-content:space-between; align-items:center; width:100%;}
.basinfo .char-count {font-size:var(--font-size-15); color:#9CA3AF; font-weight:600;}
.basinfo .char-count.is-limit {color:#FD8239;}
.basinfo textarea.input {width:100%; height:120px; min-height:120px; padding:clamp(10px, calc(16 / var(--inner) * 100vw), 16px); background:#F9FAFB; border:1px solid #E5E7EB; border-radius:8px; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; resize:vertical;}
.basinfo textarea.input:focus {border-color:#111111; color:#454545;}
.basinfo textarea.input::placeholder {color:#9CA3AF;}


/* 정보입력 - 인적사항(주소) */
.personinfo {display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-30); width:100%;}
.personinfo .tit {color:#242424; font-size:clamp(20px, calc(30 / var(--inner) * 100vw), 30px); font-weight:700; line-height:1.5;}
.personinfo .cont {width:100%; padding:var(--space-40); border:1px solid #DDDDDD; border-radius:var(--border-radius-20); display:flex; flex-direction:column; align-items:flex-start; gap:24px; overflow:hidden;}
.personinfo .item {width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.personinfo .label {color:#242424; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:600; line-height:1.5;}
.personinfo .label .required {color:#FD8239;}
.personinfo .zip-row {display:flex; justify-content:flex-start; align-items:flex-start; gap:8px;}
.personinfo .input {width:100%; height:48px; padding:clamp(10px, calc(16 / var(--inner) * 100vw), 16px); background:#F9FAFB; border:1px solid #E5E7EB; border-radius:8px; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; color:#454545;}
.personinfo .input.zip {width:300px; flex:0 0 auto;}
.personinfo .input::placeholder {color:#9CA3AF;}
.personinfo .btn {flex:0 0 100px; width:100px; height:48px; background:var(--color-1); border:none; border-radius:8px; color:#fff; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; cursor:pointer;}

/* 정보입력 - 근무분야/직군 */
.dept {display:flex; flex-direction:column; align-items:flex-start; gap:32px; width:100%;}
.dept .tit {color:#242424; font-size:clamp(20px, calc(30 / var(--inner) * 100vw), 30px); font-weight:700; line-height:1.5;}
.dept .box {width:100%; padding:var(--space-40); border:1px solid #DDDDDD; border-radius:var(--border-radius-20); display:flex; flex-direction:column; align-items:flex-start; gap:24px; overflow:hidden;}
.dept .box .lead {color:#242424; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:600; line-height:1.5;}
.dept .box .lead .hint {color:#FD8239;}
.dept .box .group {width:100%; padding:8px 24px; border-left:2px solid var(--color-1); display:flex; flex-direction:column; align-items:flex-start; gap:20px;}
.dept .box .group .group-tit {color:var(--color-1); font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:600; line-height:1.5;}
.dept .box .group .list {display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-40); list-style:none; padding:0; margin:0;}
.dept .box .group .list .col {width:200px; display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
.dept .box .group .item {display:flex; align-items:center; gap:10px; cursor:pointer;}
.dept .box .group .item .checkbox {display:inline-flex; align-items:center;}
.dept .box .group .item .checkbox label {color:#454545; font-size:clamp(14px, calc(16 / var(--inner) * 100vw), 16px); line-height:1.5; cursor:pointer;}
.dept .box .group .item .checkbox label:before {width:20px; height:20px; min-width:20px; border-radius:4px; border:1px solid #DDDDDD; background:#fff;}
.dept .box .group .item .checkbox input:checked + label:before {background:var(--color-1) url("/images/bbs/checkbox.svg") 50% 50% no-repeat; border-color:var(--color-1);}

/* 정보입력 - 자신만의 강점(주특기) 및 희망 지원분야 */
.strength {display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px, calc(32 / var(--inner) * 100vw), 32px); width:100%;}
.strength .cont-tit {display:flex; flex-direction:column; gap:4px; width:100%;}
.strength .tit {color:#242424; font-size:clamp(20px, calc(30 / var(--inner) * 100vw), 30px); font-weight:700; line-height:1.5;}
.strength .hint {color:#FD8239; font-size:clamp(14px, calc(16 / var(--inner) * 100vw), 16px); font-weight:700; line-height:1.5;}
.strength .box {width:100%; min-height:220px; padding:var(--space-20); background:#F9FAFB; border-radius:var(--border-radius-20); outline:1px solid #E5E7EB; outline-offset:-1px; display:flex; flex-direction:column; gap:24px; overflow:hidden;}
.strength .box .input {flex:1 1 0; min-height:0; border:none; background:transparent; resize:none; color:#454545; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5;}
.strength .box .input::placeholder {color:#9CA3AF;}

/* 정보입력 - 경력사항 */
.career {display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px, calc(32 / var(--inner) * 100vw), 32px); width:100%;}
.career .cont-tit {display:flex; flex-direction:column; gap:4px; width:100%;}
.career .tit {color:#242424; font-size:clamp(20px, calc(30 / var(--inner) * 100vw), 30px); font-weight:700; line-height:1.5;}
.career .hint {color:#FD8239; font-size:clamp(14px, calc(16 / var(--inner) * 100vw), 16px); font-weight:700; line-height:1.25;}
.career .box {width:100%; padding:var(--space-40); border-radius:var(--border-radius-20); outline:1px solid #DDDDDD; outline-offset:-1px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; overflow:hidden;}
.career .block {width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.career .sublabel {color:#242424; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:600; line-height:1.5;}
.career .file-row {width:100%; display:flex; justify-content:flex-start; align-items:flex-start; gap:8px;}
.career .file-group {display:flex; justify-content:flex-start; align-items:center; gap:8px;}
.career .file-display {width:500px; min-width:0; height:48px; padding:16px; background:#F9FAFB; border-radius:8px; outline:1px solid #E5E7EB; outline-offset:-1px; display:flex; align-items:center; color:#9CA3AF; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5;}
.career .file-group .btn {width:100px; height:48px; padding:16px; background:var(--color-1); border:none; border-radius:8px; color:#fff; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; display:flex; justify-content:center; align-items:center; cursor:pointer;}
.career .file-row .btn.del {width:100px; height:48px; padding:16px; background:#242424; border:none; border-radius:8px; color:#fff; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; display:flex; justify-content:center; align-items:center; cursor:pointer;}
.career .add-row {width:100%; height:48px; background:#F9FAFB; border-radius:8px; outline:1px solid #E5E7EB; outline-offset:-1px; display:flex; justify-content:center; align-items:center; cursor:pointer;}
.career .add-row:hover {background:#f0f0f0;}
.career .file-add {color:#242424; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; pointer-events:none;}
.career .uploaded-block {width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:24px;}
.career .uploaded-block .sublabel {color:#242424; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:600; line-height:1.5; margin-bottom:8px;}
.career .file-row.uploaded {width:100%; display:flex; justify-content:flex-start; align-items:flex-start; gap:8px;}
.career .file-row.uploaded .file-group {flex:1 1 0; min-width:0;}
.career .file-row.uploaded .file-display.uploaded {width:100%; min-width:0; height:48px; padding:16px; background:#F9FAFB; border-radius:8px; outline:1px solid #E5E7EB; outline-offset:-1px; display:flex; align-items:center; color:#242424; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; text-decoration:none; transition:all 0.2s;}
.career .file-row.uploaded .file-display.uploaded:hover {background:#e8f5e9; outline-color:#27ae60;}

/* 정보입력 - 동의항목 */
.agreeitem {display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px, calc(32 / var(--inner) * 100vw), 32px); width:100%;}
.agreeitem .tit {color:#242424; font-size:clamp(20px, calc(30 / var(--inner) * 100vw), 30px); font-weight:700; line-height:1.5;}
.agreeitem .tit .required {color:#FD8239;}
.agreeitem .cont {width:100%; padding:var(--space-40); border:1px solid #DDDDDD; border-radius:var(--border-radius-20); display:flex; flex-direction:column; align-items:flex-start; gap:24px; overflow:hidden;}
.agreeitem .list {list-style:none; padding:0; margin:0; width:100%; display:flex; flex-direction:column; gap:24px;}
.agreeitem .list .item {width:100%; padding:24px; background:#F9FAFB; border:1px solid #E5E7EB; border-radius:8px; display:flex; justify-content:flex-start; align-items:center; gap:10px;}
.agreeitem .list .item .checkbox {flex:1 1 0; min-width:0; display:inline-flex; align-items:center; gap:10px;}
.agreeitem .list .item .checkbox label {color:#242424; font-size:clamp(14px, calc(16 / var(--inner) * 100vw), 16px); font-weight:600; line-height:1.5; cursor:pointer;}
.agreeitem .list .item .checkbox label:before {width:20px; height:20px; min-width:20px; border-radius:4px; border:1px solid #DDDDDD; background:#fff;}
.agreeitem .list .item .checkbox input:checked + label:before {background:var(--color-1) url("/images/bbs/checkbox.svg") 50% 50% no-repeat; border-color:var(--color-1);}
.agreeitem .list .item .link {padding:4px; color:var(--color-1); font-size:clamp(14px, calc(16 / var(--inner) * 100vw), 16px); line-height:1.5; flex-shrink:0;}

/* 퇴직자 확인 (약관동의) */
.retchk {margin-bottom:clamp(40px, calc(80 / var(--inner) * 100vw), 80px); border-radius:20px; border:1px solid #DDD; padding:var(--space-40); display:flex; flex-direction:column; align-items:center; gap:var(--space-40); width:100%;}
.retchk .cont {display:flex; flex-direction:column; align-items:center; gap:var(--space-30); width:100%;}
.retchk .tit {text-align:center; color:#242424; font-size:clamp(18px, calc(20 / var(--inner) * 100vw), 20px); font-weight:600; line-height:1.5; width:100%;}
.retchk .tit .required {color:#FD8239;}
.retchk .btns {display:flex; justify-content:center; align-items:center; gap:clamp(8px, calc(10 / var(--inner) * 100vw), 10px); width:100%;}
.retchk .btns .btn {display:flex; align-items:center; justify-content:center; width:clamp(200px, calc(400 / var(--inner) * 100vw), 400px); height:60px; padding:0 clamp(20px, calc(63 / var(--inner) * 100vw), 63px); border-radius:8px; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:600; line-height:1.5; border:none; cursor:pointer; background:#F9FAFB; color:#454545; outline:1px solid #E5E7EB; outline-offset:-1px;}
.retchk .btns .btn input {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0;}
.retchk .btns .btn.primary {background:var(--color-1); color:#fff; outline:none;}
.retchk .btns .btn:has(input:checked) {background:var(--color-1); color:#fff; outline:none;}
.retchk .date-wrap {display:flex; flex-direction:column; align-items:center; gap:clamp(12px, calc(16 / var(--inner) * 100vw), 16px); max-width:810px; width:100%;}
.retchk .date-wrap .tit {text-align:left; width:100%; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:700;}
.retchk .date-inp {display:flex; align-items:center; width:100%;}
.retchk .date-inp .input {flex:1 1 0; min-width:0; height:56px; padding:12px; background:#F9FAFB; border:1px solid #E5E7EB; border-right:0; border-radius:8px 0 0 8px; font-size:clamp(14px, calc(16 / var(--inner) * 100vw), 16px); font-weight:500; color:#454545;}
.retchk .date-inp .input::placeholder {color:#9CA3AF;}
.retchk .date-inp .btn.trigger {flex:0 0 56px; width:56px; height:56px; padding:0; border-radius:0 8px 8px 0; border:1px solid #E5E7EB; background:#F9FAFB url('/images/bbs/datepicker_icon_x2.png') 50% 50% no-repeat; background-size:24px auto; overflow:hidden; text-indent:-999em;}

.join-info-wrap {display:flex; flex-direction:column; gap:clamp(40px, calc(80 / var(--inner) * 100vw), 80px); margin-bottom:clamp(40px, calc(80 / var(--inner) * 100vw), 80px);}
.join-info-wrap .value {padding:20px 10px; font-size:15px; font-weight:600;}

/* 마이페이지 - 계정/비밀번호 */
.account {display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px, calc(32 / var(--inner) * 100vw), 32px); width:100%;}
.account .cont {width:100%; padding:var(--space-40); border:1px solid #DDDDDD; border-radius:var(--border-radius-20); display:flex; flex-direction:column; align-items:flex-start; gap:24px; overflow:hidden;}
.account .item {width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.account .label {color:#242424; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:600; line-height:1.5;}
.account .label .required {color:#FD8239;}
.account .row {display:inline-flex; justify-content:flex-start; align-items:center; gap:8px;}
.account .txt {width:clamp(180px, calc(400 / var(--inner) * 100vw), 400px); height:48px; padding:16px; border-radius:8px; display:flex; align-items:center; color:#454545; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5;}
.account .input {width:clamp(180px, calc(400 / var(--inner) * 100vw), 400px); height:48px; padding:16px; background:#F9FAFB; border:1px solid #E5E7EB; border-radius:8px; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5;}
.account .input:focus {border-color:#111111; color:#454545;}
.account .input::placeholder {color:#9CA3AF;}
.account .hint {color:#9CA3AF; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5;}

/* 회원가입 */
.jointitle {margin-bottom:clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px); font-size:clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight:600;}
.join-form + .join-form {margin-top:clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px) ;}
.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 #868686; font-size:16px; line-height:1.5em; table-layout:fixed;} 
.join-form table th {padding:clamp(10px, calc( 17 / var(--inner) * 100vw ), 17px) 10px; border:1px solid #ddd; background:#fafafa; font-weight:600; font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.join-form table td {padding:clamp(10px, calc( 17 / var(--inner) * 100vw ), 17px) clamp(10px, calc( 30 / var(--inner) * 100vw ), 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 {border-radius:4px; height:clamp(38px, calc( 46 / var(--inner) * 100vw ), 46px);}
.join-form input + .btn-pack {margin-left:clamp(3px, calc( 6 / var(--inner) * 100vw ), 6px);}
.join-form .btn-pack {padding:0 17px; height:clamp(38px, calc( 46 / var(--inner) * 100vw ), 46px); border-radius:4px; background:var(--color-1); color:#fff; font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); font-weight:600; border-color:var(--color-1);}
.join-form input[readonly] {background-color:#fff; color:#505050;}
.join-form .help-text {display:inline-block; margin-left:10px; color:#767676;}
.join-form + .buttons {margin-top:50px;}
.w-346 {max-width:346px; width:100%;}
.w-220 {width:220px;}
.w-550 {max-width:550px; width:100%;}
.itembox {display:flex; align-items:center; flex-wrap:wrap;}
.itembox .radiobox label {white-space:nowrap;}
.itemtext {margin-left:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.itembox .item {display:flex; align-items:center; margin:2px clamp(12px, calc( 40 / var(--inner) * 100vw ), 40px) 2px 2px;; font-weight:600; font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.itembox .item:last-child {margin-right:0 ;}
.itembox .item .w-220 {width:clamp(110px, calc( 220 / var(--inner) * 100vw ), 220px);}
.join-form select {padding:0 5px; height:clamp(38px, calc( 46 / var(--inner) * 100vw ), 46px); border-radius:4px; border:1px solid #ddd; color:#878787; font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px);}
.join-form textarea {border-radius:4px;}
.formflx {display:flex; align-items:center;}
.join-form input + .inputtxt {display:inline-block; margin-left:10px; color:#121212;}
.w-120 {width:120px;}
.w-180 {width:180px;}
.w-240 {width:clamp(180px, calc( 235 / var(--inner) * 100vw ), 235px);}
.w-270 {width:100%; max-width:270px;}
.w-400 {width:clamp(180px, calc( 400 / var(--inner) * 100vw ), 400px);}
.formflx .dot {margin:0 clamp(2px, calc( 5 / var(--inner) * 100vw ), 5px); width:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); text-align:center; background-image:none !important;}
.join-form .flxWrap {align-items:center;}
.poptext {padding-left:clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); color:#505050; font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.poptext .pop_join {display:inline-flex; align-items:center; justify-content:center; width:clamp(52px, calc( 69 / var(--inner) * 100vw ), 69px); height:clamp(26px, calc( 28 / var(--inner) * 100vw ), 28px); border-radius:4px; border:1px solid #ddd; color:#505050; font-size:clamp(10px, calc( 13 / var(--inner) * 100vw ), 13px);} 
.wid-1 {width:clamp(80px, calc( 100 / var(--inner) * 100vw ), 100px);}
.wid-2 {width:clamp(120px, calc( 150 / var(--inner) * 100vw ), 150px);}
.grade .inputbx {display:flex; justify-content:space-between; flex:1 0 clamp(580px, calc( 680 / var(--inner) * 100vw ), 680px); max-width:clamp(580px, calc( 680 / var(--inner) * 100vw ), 680px); margin-right:clamp(10px, calc( 60 / var(--inner) * 100vw ), 60px);}
.grade .inputitem {margin-right:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); width:220px;}
.grade .inputitem:last-child {margin-right:0;}
.grade .input {width:100%;}
.grade .itembox {flex:1 0 auto; width:1%;}
.accountlist {display:flex; align-items:center; flex-wrap:wrap; padding-top:10px;}
.accountlist:first-child {padding-top:0;}
.accountlist .name {flex:1 0 clamp(95px, calc( 122 / var(--inner) * 100vw ), 122px) ; max-width:clamp(95px, calc( 122 / var(--inner) * 100vw ), 122px); font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.accountlist .acctext {flex:1 0 auto; width:1%;}
.mr-10 {margin-right:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.acctext {display:flex; flex-wrap:wrap;}
.acctext .selecbx {flex:1 0 220px; max-width:220px;}
.acctext select {width:100%;}
.acctext .accflx {display:flex; flex:1 0 auto; width:1%;}
.acctext .accflx input {width:100%;}
.acctext .input1 {width:64%;}
.acctext .input2 {width:36%;}
.accountlist:last-child{padding-top:20px;}
.formlast {display:flex;}
.formlast .icn {margin-right:7px;}
.formlast .icn img {vertical-align:middle;}

.formlast .list {font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color:#878787;}
.itembox + .formlast {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.signform + .formlast {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}

.sigPad {position:relative; max-width:480px; width:100% !important; height:200px;} 
.sigNav {position:absolute !important; right:0; bottom:0;}
.sigNav .btn-again {display:flex !important; align-items:center; justify-content:center; width:clamp(90px, calc( 148 / var(--inner) * 100vw ), 148px); height:clamp(34px, calc( 40 / var(--inner) * 100vw ), 40px); border:1px solid #ddd !important; background:#f4f4f4 url(../images/member/again.png)no-repeat left clamp(10px, calc( 25 / var(--inner) * 100vw ), 25px) center; background-size:clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px) auto; color:#505050 !important; font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); font-weight:600; border-radius:4px; text-decoration:none !important;} 
.sigNav .btn-again span {display:inline-block; padding-left:12px;}
.pad {cursor:url("../images/member/pen.cur"), crosshair !important;}
canvas {border:1px solid #dfdfdf;}
.sigWrapper {height:auto !important;}
.sigWrapper.current {border:0 !important;}
.canvastxt {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center; font-size:clamp(13px, calc( 16 / var(--inner) * 100vw ), 16px); color:#cccccc; font-weight:600; z-index:0;}
.sigPad input {width:100% !important;}
p.error {position:absolute; top:-10px; left:0; z-index:1;}

/* #upload-box {position:relative; } */
.imginfobx {display:flex; align-items:center;}
.imginfobx .info {padding-left:clamp(10px, calc( 25 / var(--inner) * 100vw ), 25px);}
.imginfobx .info .list {font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color:#878787; line-height:1.7;}
#upload-box .images {position:relative; width:110px; height:147px; border-radius:4px; overflow:hidden;}
#upload-box .bxtext {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;}
.prebx {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:5; width:102%; height:102%; border-radius:4px; overflow:hidden;}
.prebx img {object-fit:scale-down ; height:inherit; width:inherit; border:0; }
.click-box {display:flex;}
#upload-box + .click-box {margin-top:10px;}
.delete-btn {display:flex; align-items:center; justify-content:center; font-size:14px; color:#505050; font-weight:600; width:60px; height:46px; border-radius:4px; border:1px solid #ddd; background:#f4f4f4;}
.fileinput {display:flex; align-items:center; padding:0 10px; margin-right:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);  position:relative; width:370px; height:46px; border:1px solid #ddd; border-radius:4px;}
.upload-text {cursor:pointer;}
.fileinput input {width:100%;}
.upload-text {display:flex;  align-items:center; justify-content:center; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:59px; height:27px; border-radius:4px; border:1px solid #ddd; background:#f4f4f4; font-size:clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); font-weight:500; text-align:center;}

/* 가입완료 */
/* .join-complete {text-align:center;}
.join-complete .tit {color:var(--color-1); font-size:24px; font-weight:400; line-height:1.2; margin-bottom:15px;}
.join-complete .txt {color:#878787;  line-height:1.6;}
.join-complete .icon {width:180px; height:180px; background:var(--color-1) url("../images/member/complete.png") 50% 50% no-repeat; border-radius:100%; margin:36px auto 45px;}
.join-complete .buttons {margin:0;}
.join-complete .joinlogo img {width:clamp(150px, calc( 400 / var(--inner) * 100vw ), 400px);}
.completetext {padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 0 clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);} */

/* 가입완료 */
.join-complete {text-align:center;}
.join-complete .tit {color:#242424; font-size:28px; font-weight:700; line-height:1.4em; margin-bottom:30px;}
.join-complete .txt {margin-bottom:45px; color:#333; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); line-height:1.8em;}
.join-complete .icon {width:180px; height:180px; background:var(--color-1) url("../images/member/complete.png") 50% 50% no-repeat; border-radius:100%; margin:0 auto 45px;}


/* 게정찾기 */
.find-area {max-width:580px; margin:0 auto;}
.find-tab {text-align:center; margin-bottom:20px;}
.find-tab ul {display:flex; gap:10px;}
.find-tab ul li {flex:1;}
.find-tab ul li a {font-size:20px; line-height:72px; display:block; color:#878787; font-weight:600; background:#f1f1f1; border-radius:8px;}
.find-tab ul li.active {position:relative;}
.find-tab ul li.active a {color:#fff; background:var(--color-1); z-index:2;}
.find-content .form {padding:clamp(25px, calc(64 / var(--inner) * 100vw), 64px); border-radius:20px; border:1px solid #DDD;}
.find-content .group {margin-bottom:5px;}
.find-content .group .input {display:block; width:100%; height:64px; font-size:16px; border-radius:8px; border:1px solid #E5E7EB; background:#F9FAFB;}
.find-content .group .input::placeholder {color:#878787;}
.find-content .btn-pack {display:block; width:100%; margin-top:10px; border-radius:8px; font-weight:600;}
.find-content .btn-pack.focus {margin-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}

.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-1); 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-1); font-size:30px; font-weight:700; line-height:1.5em;}

/* 회원탈퇴 */
.member-leave {max-width:640px; margin:0 auto;}
.member-leave .txt {text-align:center; color:#454545; font-size:18px; line-height:1.7em; margin-bottom:50px; letter-spacing:-0.03em;}
.member-leave .txt .tit {color:#242424; font-size:30px; line-height:1.5em; margin-bottom:30px; font-weight:700; letter-spacing:-0.03em;}
.member-leave .form {padding:40px; margin-bottom:50px; color:#666; font-size:16px; line-height:1.5em; border:1px solid #ddd; 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:130px; color:#222; font-weight:700;}
.member-leave .form .group .text-id,
.member-leave .form .group .input {height:64px; line-height:64px; flex:1 1 auto; min-width:0; width:1%;}
.member-leave .form .group .input {border-radius:8px; border:1px solid #E5E7EB; background:#F9FAFB;}
.member-leave .btn-pack {width:100%;}

.mem-buttons .cen {display:flex; justify-content:center;}
.mem-buttons .btn-pack {display:flex; align-items:center; justify-content:center; min-width:clamp(160px, calc( 200 / var(--inner) * 100vw ), 200px); line-height:1; height:clamp(50px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius:8px; font-size:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:600;}
.mem-buttons .btn-pack.xlarge {min-width:clamp(120px, calc( 400 / var(--inner) * 100vw ), 400px);}
.mem-buttons.buttons {margin-bottom:0;}
.mem-buttons .btn-pack.leave-btn {min-width:clamp(120px, calc(240 / var(--inner) * 100vw), 240px);}
.join-complete .mem-buttons .btn-pack.xlarge {min-width:clamp(120px, calc(240 / var(--inner) * 100vw), 240px);}

.retire-pos-select-wrap {width:100%;}
.retire-pos-select-wrap select {height:56px; border-radius:8px; border:1px solid #E5E7EB; background-color:#F9FAFB;}

.hope-region {display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px, calc(32 / var(--inner) * 100vw), 32px); width:100%;}
.hope-region .tit {color:#242424; font-size:clamp(20px, calc(30 / var(--inner) * 100vw), 30px); font-weight:700; line-height:1.5; letter-spacing:-0.03em; width:100%;}
.hope-region .box {width:100%; padding:var(--space-40); border:1px solid #ddd; border-radius:20px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; overflow:hidden; box-sizing:border-box;}
.hope-region #hope_region_rows {width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px, calc(32 / var(--inner) * 100vw), 32px);}
.hope-region .hope-block {width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.hope-region .hope-block-label {color:#242424; font-size:clamp(16px, calc(18 / var(--inner) * 100vw), 18px); font-weight:600; line-height:1.5; letter-spacing:-0.03em;}
.hope-region .hope-select-row {width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.hope-region .hope-sel {height:48px; padding:0 16px; background:#F9FAFB; border:1px solid #E5E7EB; border-radius:8px; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; color:#454545; box-sizing:border-box;}
.hope-region .hope-sel:has(> option:first-child:checked) {color:#9CA3AF;}
.hope-region .hope-sel-fixed {flex:0 0 500px; width:500px; max-width:100%; min-width:0;}
.hope-region .hope-sel-flex {flex:1 1 0; min-width:140px;}
.hope-region .hope-add-wrap {width:100%; margin-top:0;}
.hope-region .hope-add-btn {width:100%; height:48px; border:1px solid #E5E7EB; border-radius:8px; background:#F9FAFB; color:#242424; font-size:clamp(14px, calc(15 / var(--inner) * 100vw), 15px); font-weight:600; line-height:1.5; letter-spacing:-0.03em; cursor:pointer; box-sizing:border-box;}
.hope-region .hope-add-btn:hover {background:#f0f0f0;}