@charset "utf-8";

/* 회원가입 */
.join .sub-title {line-height:1}
.join .sub-title span {}

.join .title {padding-bottom:10px; margin-bottom:0; border-bottom:1px solid #333; font-size:16px; color:#000;}
.join .title span {font-size:12px; color:#666; font-weight:normal;}
.join .formGroup a.btn {min-height:32px; font-size:11px; letter-spacing:0; padding:0 20px; line-height:2.8;}
.join > .guide {margin-bottom:20px;}
.join > .guide span {color:var(--amethyst);}
.join .formGroup .gender {padding:0;}
.join .formGroup .gender.checkWrap_sunnong label {padding-left:25px; font-size:14px;}
.join .formGroup .gender.checkWrap_sunnong label:before {width:20px; height:20px; top:3px;}
.join .formGroup>div {min-height:34px; margin-bottom:20px;}
.join .formGroup>div>div {padding-left:0; display:inline-block;}
.join .formGroup>div>div.gender label {display:inline-block; margin-left:10px; vertical-align:baseline;}
.join .formGroup>div:last-child {margin-bottom:0;}
.join .formGroup>div p {clear:both; margin:0; font-size:15px; color:#999; line-height:1.4; padding-left:20px;}
.join .formGroup>div>* {margin-bottom:5px;}
.join .formGroup input[type="text"].inline {height:34px; padding:4px 12px; border:1px solid #ccc;}
/*.join .formGroup input[type="checkbox"] {display:none !important}*/
.join .formGroup span.inline {display:block; float:left; height:34px; padding:6px 5px;}
.join .formGroup .select_box {height:34px;border:1px solid #ccc;}
.join .formGroup .mail {border-right:0 !important;}
.join .formGroup .divinner label {display:block; }
.join .formGroup .divinner label input {vertical-align:middle; margin:0 !important;}
.join .formGroup .divinner label .check_text {vertical-align:middle; padding-left:5px;}
.join .formGroup .divinner>div {padding-right:5px !important;}
.join .formGroup .divinner>div:last-child {padding-right:0 !important;}
.join .formGroup .check_text {font-weight:normal; padding-left: 25px;}

/*** 체크박스 ***/
/* 기본 스타일 숨기기 */
input[type="checkbox"].checkbox_normal{position:absolute; opacity:0; width:0; height:0;}

/* check_text에 기본 박스 스타일 주기 */
.check_text{display:inline-block; position:relative; padding-left:28px; line-height:20px; cursor:pointer;}
.check_text::before{content:""; position:absolute; left:0; top:0; width:18px; height:18px; border:1px solid #464646; background:#fff; box-sizing:border-box; transition: all 0.2s ease;}

/* 체크됐을 때 표시 */
input[type="checkbox"].checkbox_normal:checked + .check_text::before{background:var(--base1); border-color:var(--base1);}
input[type="checkbox"].checkbox_normal:checked + .check_text::after{content:""; position:absolute; left:6px; top:2px; width:4px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}


.join .formGroup .inputWrap .check_text_wrap {margin-top:10px !important;}
.join .formGroup .inputWrap.telWrap>p {padding-left:0; font-size:14px; margin-top:5px !important; display:block;}
.join .formGroup .autoCodeWrap {position:relative;}
.join .formGroup .autoCodeWrap input {}
.join .formGroup .autoCodeWrap input::placeholder {font-size:14px; color:#666; font-weight:300}
.join .formGroup.cal_Box .email>p {padding-left:0; font-size:14px; margin-top:5px !important}
.join .formGroup.AutoWrap .autoCode {position:relative; top:0; left:0; z-index:100;height:40px; margin-right:10px !important; line-height:40px; color:#999; font-weight:bold; font-size:16px; vertical-align:top;}
.autoCode>span {color:#3e9eff !important; font-style:italic !important;}
.autoCode+div input {padding-left:92px;}

.join .formGroup.border-t {border-top:1px solid #000}
.join .formGroup {border-bottom:1px solid #ddd; padding:20px 0;}
.join .formGroup .labelName {
	display:inline-block; text-align:center; width:206px;
	vertical-align:top; padding:7px 20px; text-align:left;
	color:#000; font-size:18px;
}
.join .formGroup .labelName.empha {position:relative;}
.join .formGroup .labelName.empha:before {content:"*"; position:absolute; top:10px; left:5px; color:var(--amethyst);}
.join .formGroup .inputWrap {display:inline-block;}
.join .formGroup .inputWrap a.cal_Img {
	width:40px; height:40px; display:inline-block; margin-left:2px !important; border-radius:5px; vertical-align:top;
	background:#333 url(../images/common/i-calender.png)no-repeat center;
}
.join .formGroup .inputWrap.address br:after {}
/*.join .formGroup .inputWrap>* {display:inline-block; margin:0 !important;}*/
.join .formGroup .inputWrap input:not([type=radio]):not([type=checkBox]) {width:230px; height:40px; border:1px solid #ddd;}
.join .formGroup.autoCode .inputWrap input:not([type=radio]):not([type=checkBox]) { width : 350px; }
.join .formGroup .inputWrap.telWrap select { width :80px!important; }
.join .formGroup .inputWrap .notice {margin-top:10px; padding-left:0; /*color:#ff0000;*/}
.join .formGroup .inputWrap .notice.red {color:#ff0000;}


.join .formGroup .inputWrap>div:last-child {display:inline-block;}
.join .formGroup .inputWrap>div+div {padding-left:10px;}
.join .formGroup .inputWrap.h0 {height:auto !important; width:76.8%}
.join .formGroup .inputWrap.h0>div:first-child {margin-bottom:5px !important;}
.join .formGroup .inputWrap.h0>div:last-child {display:block;}
.join .formGroup .inputWrap.h0 .directly {padding-left:0;}
.join .formGroup .inputWrap>div:last-child input {}
.join .formGroup.birth select {max-width:100px;}
.join .formGroup.email .middle {max-width:150px;}
.join .formGroup.email select {max-width:150px;}
.join .formGroup .inputWrap.address .directly input {display:block; width:800px;}
.join .formGroup .inputWrap.address .directly input+input {margin-top:5px;}
input[type=file]::file-selector-button {display:none;}
.attach.type1 input[type="file"] {border:0!important; line-height:40px;}
.attach.type1 span {display:flex; align-items:center; gap:10px;}
.attach.type1 .btn_upload {display:inline-block; text-align:center; padding :8px 20px;
font-size:14px; color:#fff; background:#333; border-radius:2rem; cursor: pointer;margin-right:5px; padding-left:0;}
.join .formGroup>div .btn_upload p {color:#fff;}
.join .formGroup input[type="file"] {border:0;}


/* 회원가입 완료 */
.join_end {text-align:center; padding:50px 30px; border-radius:10px; border:1px solid #ddd}
.join_end .title {font-size:24px; color:#000; font-weight:600;}
.join_end .title span {color:var(--amethyst);}
.join_end p {margin-top:20px; }


.telWrap select {width:auto !important;}
/*.telWrap input:not([type=radio]):not([type=checkbox]) {width:100px !important;}*/
.telWrap .telSpan {padding:0 5px; line-height:40px;}

.btn_box {text-align:center;}
.board_ebi .write_normal .form-group>div p {letter-spacing:-1px;}
.padr5 {padding-right:5px !important;}




	.join .formGroup .btnAddress { display:inline-block; padding:0 15px; height:40px; margin-left:5px; margin-bottom:5px; font-size:14px; color:#fff; line-height:40px; border-radius:5px; background:#333; /*vertical-align:middle;*/}

	.join .formGroup .hidden {position:absolute; left: -100000px; top: auto; width:1px; height:1px; overflow:hidden;}
	.join .formGroup .btnDate {display:inline-block; width:40px; height:40px; margin-left:5px; border-radius:5px; background:#333 url(/images/common/i-calender.png) no-repeat center; vertical-align:middle;}

	/* 달력 */
	.mobileCal .mobileCalPopup {display:none;}
	.mobileCal .mobileCalPopup {z-index:999999;position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, .5)}
	.mobileCal .mobileCalPopup .bg {}
	.mobileCal .mobileCalPopup .mobileCalFrame {z-index:9992; position:fixed; text-align:center; max-width:90%;}
	.mobileCalInner { padding:50px 30px !important; color:#000; font-weight:400; border-radius:10px; background:#fff;}
	.mobileCalInner select {padding:5px 35px 5px 10px; margin-right:10px; border-radius:5px; border:1px solid #ddd;}
	.mobileCalInner select:focus {outline:none;}
	.mobileCalInner select+select {margin-left:15px; color:#000}
	.mobileCalInner .btn_box {text-align:center; margin-top:30px;}
	.mobileCalInner .btn_box ul {display:inline-block; padding-left:0;}
	.mobileCalInner .btn_box ul:after {clear:both; content:''; display:block;}
	.mobileCalInner .btn_box ul li {display:inline-block; float:left; margin:0 5px;}
	.mobileCalInner .btn_box ul li a {display:inline-block; font-size:15px; border-radius:3px; padding:5px 20px; background:#333; color:#fff}
	.mobileCalInner .btn_box ul li:first-child a {background:#2c674f}
	
form select[name="password_q"] {
    padding: 6px 35px 6px 15px;
}


/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1199px) {

.memberLayout .agree pre {height:200px !important; overflow-y:auto; line-height: 1.4;}
.memberLayout .login_box h3 {font-size:26px;}

	
	/* 달력 */
	.mobileCal .mobileCalPopup {display:none;}
	.mobileCal .mobileCalPopup {z-index:9990;position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, .5)}
	.mobileCal .mobileCalPopup .bg {}
	.mobileCal .mobileCalPopup .mobileCalFrame {z-index:9992; position:fixed; text-align:center; max-width:90%;}
	.mobileCalInner { padding:50px 30px; color:#000; font-weight:400; border-radius:10px; background:#fff;}
	.mobileCalInner select {padding:5px 20px; margin-right:10px; border-radius:5px; border:1px solid #ddd;}
	.mobileCalInner select:focus {outline:none;}
	.mobileCalInner select+select {margin-left:15px; color:#000}
	.mobileCalInner .btn_box {text-align:center; margin-top:30px;}
	.mobileCalInner .btn_box ul {display:inline-block;}
	.mobileCalInner .btn_box ul:after {clear:both; content:''; display:block;}
	.mobileCalInner .btn_box ul li {display:inline-block; float:left; margin:0 5px;}
	.mobileCalInner .btn_box ul li a {display:inline-block; font-size:15px; border-radius:3px; padding:5px 20px; background:#333; color:#fff}
	.mobileCalInner .btn_box ul li:first-child a {background:#2c674f}
}

/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 991px) { 
form[class*="form-"] input[type="text"], form[class*="form-"] input[type="password"], form[class*="form-"] input[type="number"], form[class*="form-"] select, form[class*="form-"] textarea {height:45px;}



}

/* ************************ 모바일 ************************ */
@media (max-width: 767px) { 

	.join .formGroup .labelName {width:100%;}
	.join .formGroup .labelName br {display:none;}
	
	.join .formGroup .btnAddress {margin:0; margin-top:5px;}
	
	/* 달력 */
	.mobileCalInner select {padding:5px 10px; padding-right:50px !important; margin-right:5px;}
	.mobileCalInner select+select {margin-left:10px;}
}


/* ************************ 모바일 ************************ */
@media (max-width: 500px) { 
/********* 로그인페이지 ***********/
.join .formGroup>div {width:100%;}
.memberLayout .login_box {width:100%;}
/*.telWrap input:not([type=radio]):not([type=checkbox]) {width:90px!important;} */
.join .formGroup .inputWrap select, .join .formGroup .inputWrap input:not([type=radio]):not([type=checkBox]) {width:100%;}
.join .formGroup .inputWrap input.birthdayHyChk {width:calc(100% - 50px) !important;}
.join .formGroup .inputWrap>div:last-child input:nth-child(2) {margin:5px 0;}
.join .formGroup>div>div {width:100%;}
.join .formGroup .inputWrap.h0 {width:100%;}

.telWrap .telSpan {padding:0;}
.join .formGroup .inputWrap.address .directly input {width:100%!important;}
.join .formGroup.autoCode .inputWrap input:not([type=radio]):not([type=checkBox]) {width:100%;}
.memberBtn-single li a {padding:15px 30px;}
.join .formGroup .btnAddress {margin:0; margin-top:5px;}

	.join .formGroup .labelName {width:100%;}
	.join .formGroup .labelName br {display:none;}


}