/* BASIC css start */
#contentWrap{width:100%;}
/* ===== 회원가입 폼 (이맑은김치 톤 / 적응형 PC 고정폭) ===== */
#join{--g:#4a9a2c;--g-dark:#3c8a22;--g-soft:#eaf4e0;--line:#e6e8e2;--sub:#8a8f87;position:relative;width:100%;padding-bottom:80px}
#join,#join *{box-sizing:border-box;font-family:'Pretendard','Noto Sans KR','Malgun Gothic',sans-serif;letter-spacing:-.02em}
#join a{text-decoration:none}

/* 상단 타이틀 배너 */
#join .cateTit_v2.join{position:relative;border:0;text-align:center;background:url('/design/hwawon6311/img/join_vis.jpg')no-repeat center / cover;display: flex;align-items: center;flex-direction: column;gap:10px;margin:0 0 40px;padding:40px 0;}
#join .cateTit_v2.join .title{display:block;margin:0;padding:0;font-style:normal;font-size:38px;font-weight:800;line-height:1.3;color:#222;background:none}
#join .cateTit_v2.join .join-sub{margin:0;font-size:15px;color:#666}
#join .cateTit_v2.join:after{display:none;}

/* 카드 */
#join form{display:flex;flex-direction:column}
#join form:has(#personInfo){width:900px;margin:0 auto;border-radius:28px;background:#fff;box-shadow:0 14px 44px rgba(60,100,50,.09);padding:30px;}
#join form:has(#personInfo)>:first-child{margin-top:50px}
#join form:has(#personInfo)>:last-child{margin-bottom:50px}

/* 섹션 제목 */
#join fieldset:before,#join #personInfo:before{display:block;margin-bottom:18px;font-size:22px;font-weight:800;color:#222}
#join fieldset:before{content:"\2713\00a0 약관에 동의해주세요"}
#join #personInfo:before{content:"\263A\00a0 회원정보 입력"}
#join fieldset{order:1;position:relative;min-width:0;margin:0 0 46px;padding:0;border:0}
#join fieldset legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#join #personInfo{order:2}
#join #addInfo{order:3}
#join #snsConnect{order:4}
#join .auth-confirm{order:0}
#join .user_age_wrap{order:1}
#join .btnArea.join-footer{order:5}

/* 약관 */
#join .new-privercy-contract{padding:0}
#join #chkwrap{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff}
#join #chkwrap .all-chk{height:62px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--g-soft);font-size:16px;font-weight:800;line-height:62px;color:var(--g-dark)}
#join #chkwrap .all-chk label{cursor:pointer}
#join #chkwrap .all-chk .input-cbox,#join input[type=checkbox],#join input[type=radio]{width:18px;height:18px;margin:-2px 10px 0 0;vertical-align:middle;accent-color:var(--g)}
#join #chkwrap .cont ul{width:auto !important;margin:0 !important;padding:0 !important;list-style:none !important}
#join #chkwrap .cont ul:after{content:"";display:block;clear:both}
#join #chkwrap .cont ul li{float:none !important;display:flex !important;align-items:center !important;justify-content:space-between !important;width:100% !important;min-height:56px !important;padding:0 15px !important;border-top:1px solid var(--line) !important;font-size:14px !important;line-height:1.5 !important;color:#333 !important;box-sizing:border-box;margin:0;}
#join #chkwrap .cont ul li:first-child{border-top:0 !important}
#join #chkwrap .cont ul li label{display:flex !important;align-items:center !important;font-weight:600 !important;cursor:pointer !important}
#join #chkwrap .cont ul li a{display:inline-block !important;width:auto !important;height:auto !important;margin:0 !important;padding:6px 14px !important;border:1px solid var(--line) !important;border-radius:20px !important;background:#fff !important;font-size:12px !important;line-height:1.2 !important;color:var(--sub) !important;transition:.2s !important}
#join #chkwrap .cont ul li a:hover{border-color:var(--g);color:var(--g-dark)}
#join #chkwrap .cont strong{color:#222}
#join #chkwrap .cont .marketing{padding:0 24px;border-top:1px solid var(--line);background:#fafbf9;font-size:13px;line-height:1.7;color:var(--sub)}
#join #chkwrap .cont .marketing .mk-wrap{height:56px;line-height:56px;font-size:14px;color:#333}
#join #chkwrap .cont .marketing .mk-wrap label{font-weight:600}
#join .new-btn-area{display:none}
#join h4.tit{margin:30px 0 10px;padding:0;font-size:20px;font-weight:700}
#join .privercy-contract textarea{width:100%;height:140px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fafbf9;font-size:13px}
#join .contract-tbl th,#join .contract-tbl td{border-color:var(--line)}
#join .user_age_wrap{margin:0 0 20px;font-size:14px}
#join .new-privercy-contract p{font-size:14px;padding:0;}

/* 입력 폼 */
#join .person-tb{width:100%;border:0;border-collapse:separate;border-spacing:0 10px;background:none !important}
#join .person-tb th,#join .person-tb td{height:auto;border:0}
#join .person-tb th{padding:0;vertical-align:top;background:#f1f8ec !important;border-radius:12px 0 0 12px;font-size:14px;font-weight:700;color:#222}
#join .person-tb td{padding:0 0 0 14px;vertical-align:middle;background:none !important}
#join .person-tb .head-cell{position:relative;padding:15px 10px 15px 30px;line-height:22px;text-align: left;}
#join .person-tb .head-cell.empha:after{content:"*";margin-left:4px;font-size:14px;color:#e5484d}
#join .person-tb .col-cell{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:52px}
#join .person-tb .col-cell.social{gap:6px 6px}
#join .person-tb .idpw-info,.person-tb .col-cell .hint{flex:0 0 100%;font-size:12px;color:var(--sub);line-height:1.5}
.small-input,.normal-input,.large-input,.MS_input_txt,.MS_input_tel,.MS_input_email{flex:1 1 0;min-width:0;height:52px;line-height:50px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;outline:0;transition:.2s}
.small-input{flex:0 0 160px;width:160px}
.large-input,input#oaddress{width:auto}
.normal-input{width:auto}
input#hphone,input#ophone,input#etcphone{width:auto !important}
.small-input:focus,.normal-input:focus,.large-input:focus{border-color:var(--g);background:#fff;box-shadow:0 0 0 4px rgba(74,154,44,.12)}
.MS_select,.person-tb .MS_select{height:52px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fafbf9}
#join .person-tb #email2{width:158px}

/* 버튼 */
.cbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:110px;height:52px;padding:0 16px;border:1px solid var(--g);border-radius:12px;background:#fff;color:var(--g-dark);font-size:14px;font-weight:700;line-height:1;transition:.2s}
.cbtn.form:hover{background:var(--g);color:#fff}
.cbtn.form.action{border:0;background:linear-gradient(180deg,#58ad38,var(--g-dark));color:#fff;box-shadow:0 10px 24px rgba(74,154,44,.3)}
.cbtn.form.action:hover{background:linear-gradient(180deg,#58ad38,var(--g-dark));color:#fff;transform:translateY(-2px)}
.btnArea{padding-top:30px;text-align:center}
.join-footer{display:flex;justify-content:center;gap:12px;padding-top:30px}
.join-footer .cbtn.form{flex:0 0 auto;width:auto;min-width:0;height:64px;margin:0;line-height:1;font-size:18px;border-radius:14px}
.join-footer .cbtn.form.action{flex:1;max-width:520px}
.join-footer .cbtn.form:not(.action){width:160px;border-color:var(--line);color:#666}
.btn-out{display:inline-block;height:36px;line-height:34px;padding:0 16px;border:1px solid var(--line);background:#fff;color:#666;font-size:13px;font-weight:600;border-radius:10px}

/* 본인인증 */
.auth-confirm{padding:0 0 40px;text-align:center}
.auth-confirm .auth-wrap .auth-info{font-size:15px;line-height:1.7;color:#444}
.auth-confirm .btnArea{padding:24px 0 0}
.auth-confirm .btnArea a{display:inline-block;width:98px;height:98px;margin:0 8px;border:1px solid var(--line);border-radius:14px;font-size:12px;color:#222;text-align:center;letter-spacing:-1px;transition:.2s}
.auth-confirm .btnArea a span{display:inline-block;width:96px;height:96px;border:1px solid transparent;border-radius:14px}
.auth-confirm .btnArea a img{width:45px;height:45px;margin:14px 0 10px}
.auth-confirm .btnArea a:hover,.auth-confirm .btnArea a:hover span,.auth-confirm .btnArea a.on,.auth-confirm .btnArea a.on span{border-color:var(--g)}

/* 추가 정보 입력 */
#addInfo{margin:10px 0 30px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
#addInfo .addinfo-toggle{display:flex;align-items:center;gap:8px;width:100%;height:60px;padding:0 22px;border:0;background:var(--g-soft);font-size:16px;font-weight:800;color:var(--g-dark);text-align:left;cursor:pointer}
#addInfo .addinfo-toggle:before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:4px;border:1.5px solid var(--g);border-radius:50%;font-size:16px;line-height:1;color:var(--g)}
#addInfo .addinfo-toggle small{font-size:12px;font-weight:400;color:var(--sub)}
#addInfo .addinfo-toggle:after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg);transition:.2s}
#addInfo.open .addinfo-toggle:before{content:"\2212"}
#addInfo.open .addinfo-toggle:after{transform:rotate(-135deg)}
#addInfo .addinfo-body{display:none;padding:10px 22px 14px}
#addInfo.open .addinfo-body{display:block}
.addinfo-tb{width:100%;border-collapse:separate;border-spacing:0 6px}
.addinfo-tb th,.addinfo-tb td{border:0;vertical-align:middle}
.addinfo-tb th{padding:0;background:#f1f8ec;border-radius:10px;font-size:14px;line-height:20px;text-align:left}
.addinfo-tb th .head-cell{padding:12px 18px;font-weight:700}
.addinfo-tb td{padding:4px 0 8px}
.addinfo-tb .col-cell{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.addinfo-tb .MS_input_txt{flex:1 1 0;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line);border-radius:12px;background:#fff}
.addinfo-tb .MS_textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px}
/* 추천인 아이디 검색 */

/* 연동 */
#snsConnect{margin:30px 0 0}
#snsConnect li{margin-top:12px}
#snsConnect li dl{zoom:1;overflow:hidden}
#snsConnect li dt,#snsConnect li dd{float:left;line-height:28px}
#snsConnect li dt{width:80px;padding-left:35px;color:#8a8a8a;font-weight:bold;letter-spacing:-1px}
#snsConnect li.facebook dt{background:url(/images/d3/modern_simple/common/ico_sns_h26_facebook.gif) no-repeat 0 0}
#snsConnect li.naver dt{background:url(/images/d3/modern_simple/common/ico_sns_h26_naver.gif) no-repeat 0 0}
#snsConnect li.kakaotalk dt{background:url(/images/d3/modern_simple/common/ico_sns_h26_kakaotalk.gif) no-repeat 0 0}
#snsConnect li.apple dt{background:url(/images/d3/modern_simple/common/ico_sns_h26_apple.gif) no-repeat 0 0}
#snsConnect li dd .cut img{padding:10px 0 0 10px}
#snsConnect li:last-child{padding-bottom:30px}
.btm-msg{padding-top:30px;line-height:18px}
#join .person-tb .col-cell.recommend a,#join .person-tb .col-cell.recommend button,#join .person-tb .col-cell.recommend input[type=button],#join .person-tb .col-cell.recommend input[type=submit]{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:130px;height:52px;padding:0 16px;border:1px solid var(--g) !important;border-radius:12px;background:#fff !important;color:var(--g-dark) !important;font-size:14px;font-weight:700;line-height:1;cursor:pointer;transition:.2s}
#join .person-tb .col-cell.recommend a:hover,#join .person-tb .col-cell.recommend button:hover,#join .person-tb .col-cell.recommend input[type=button]:hover,#join .person-tb .col-cell.recommend input[type=submit]:hover{background:var(--g) !important;color:#fff !important}
/* BASIC css end */