@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;
}
/* .contents.apply {} */


.contents.member {background:var(--bg1);position:relative;}
.contents.member .deco {left:0; top:0; position:absolute;}
.contents.member .contents-wrap {position:relative;}

.joinWrap {display:flex; border-radius: 15px; background: #FFF; box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.07); overflow:hidden;}
.joinWrap .join-tit {padding:70px; width:360px; background:var(--base3) url(/images/member/bg_deco_member.png) no-repeat center/cover;}

.joinWrap .join-tit .img {}
.joinWrap .join-tit .img img {width:auto; height:30px;}
.joinWrap .join-tit h3 {padding:20px 0; color: #FFF;font-size:var(--fs30);font-weight: 700;line-height: normal; white-space:nowrap;}
.joinWrap .join-tit p {color: #FFF;line-height: 140%; font-weight: 300;}
.joinWrap .join-con {padding:70px;width:calc(100% - 360px);}
.joinWrap .join-con .tit {padding:0 0 30px; margin: 0 0 30px; display:flex; gap:20px; border-bottom:1px solid #000; }
.joinWrap .join-con .tit img {}
.joinWrap .join-con .tit p {}

.joinWrap .join-con .con {display:flex; flex-direction:column; gap:20px;}
.joinWrap .join-con .con .inputWrap {display:flex; gap:20px;}
.joinWrap .join-con .con .inputWrap .label {width:130px; line-height:50px; align-self:start;}
.joinWrap .join-con .con .inputWrap .inputItem {width:calc(100% - 150px); gap:10px; display:flex; align-items:center;}
.joinWrap .join-con .con .inputWrap .inputItem {}
.joinWrap .join-con .con .inputWrap .inputItem>* {}
.joinWrap .join-con .con .inputWrap .inputItem select {}
.joinWrap .join-con .con .inputWrap .inputItem input {}
.joinWrap .join-con .con .inputWrap .inputItem>div {}
.joinWrap .join-con .con .inputWrap .inputItem.tel {align-items:center;}
.joinWrap .join-con .con .inputWrap .inputItem.tel>* {width:120px;}
.joinWrap .join-con .con .inputWrap .inputItem.tel .bar {width:10px; height:1px; background:#333;}
.joinWrap .join-con .con .inputWrap .inputItem.addr {flex-direction:column;}
.joinWrap .join-con .con .inputWrap .inputItem.addr div {}
.joinWrap .join-con .con .inputWrap .inputItem.addr div input {}
.joinWrap .join-con .con .inputWrap .inputItem.addr .num {display:flex; gap:5px;}
.joinWrap .join-con .con .inputWrap .inputItem.addr .num input {width:200px;}
.joinWrap .join-con .con .inputWrap .inputItem.addr .num button {width:50px; height:50px; border-radius:10px; background:#000 url(/images/common/icon_search_white.svg)center no-repeat;}
.joinWrap .join-con .con .inputWrap .inputItem.addr .addr1 {}
.joinWrap .join-con .con .inputWrap .inputItem.addr .addr2 {}

.joinWrap .join-con .apply-btn {
	padding:30px 0 0; margin:30px 0 0;
	display:flex; gap:20px; justify-content:center; border-top:1px solid var(--border1);
}
.joinWrap .join-con .apply-btn a {display: flex; height:60px; color:#fff; padding:0 50px; justify-content: center; align-items:center; border-radius:10px;}
.joinWrap .join-con .apply-btn a.apply {background:var(--base2);}
.joinWrap .join-con .apply-btn a.cancel {background:#333;}


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

/* ************************ 태블릿 이하(~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}
	
	
	.contents.member {background:#fff;}
	.joinWrap { box-shadow:none; border-radius:0;}
	.joinWrap .join-con {width:100%; box-shadow:none; padding:0;}
	
	.joinWrap .join-con .apply-btn {gap:10px;}
	
	
	
	
	
	
	
}

/* ************************ 태블릿 이하(~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;}
	
	
	.joinWrap .join-con .con .inputWrap {flex-direction:column; gap:5px;}
	.joinWrap .join-con .con .inputWrap .label {width:100%; line-height:130%;}
	.joinWrap .join-con .con .inputWrap .inputItem {width:100%; gap:5px; flex-wrap:wrap;}
	.joinWrap .join-con .con .inputWrap .inputItem>div {width:100%;}
	.joinWrap .join-con .con .inputWrap .inputItem>div+p {color:#999;}
	.joinWrap .join-con .con .inputWrap .inputItem.tel {flex-wrap:nowrap;}
	
	.joinWrap .join-con .apply-btn {gap:5px;}
	
}


/* ************************ 모바일 ************************ */
@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;}


}