@charset "utf-8";

/* 약관 및 처리방침 동의 */
.memberLayout .agree,
.memberLayout .privacy {padding:30px !important; padding-right:15px !important; margin:0; border-radius:10px; border:1px solid #ddd; background-color:#f9f9f9; overflow:hidden;}

.memberLayout .agree pre {height:300px !important; overflow-y:auto}
.memberLayout .agree pre::-webkit-scrollbar {height:10px; width:10px;}
.memberLayout .agree pre::-webkit-scrollbar-thumb {background-color:#999; border-radius:5px;}
.memberLayout .agree pre::-webkit-scrollbar-track {background-color:#ccc; border-radius:5px;}

.memberLayout .privacy pre {height:300px !important; overflow-y:auto}


/* 체크박스:: */
.checkWrap_sunnong { color:#000; font-size:17px; background-color:transparent; text-align:right;}
.checkWrap_sunnong>* {display:inline-block; vertical-align:middle; line-height:1; font-weight:normal;}
.checkWrap_sunnong input {}
.checkWrap_sunnong input[type='checkbox'] { position : absolute; left : -999999px;}
.checkWrap_sunnong input[type='checkbox']+label { padding:3px 30px; padding-left:30px; background:url(/images/common/i-check.png) no-repeat left top 2px / 20px ; cursor:pointer; font-size:19px;}
.checkWrap_sunnong input[type='checkbox']:checked+label {background-image:url(/images/common/i-check-on.png);}

.checkWrap_sunnong input[type='radio'] {display:none;}
.checkWrap_sunnong input[type='radio']+label {padding:3px 0px; padding-left:30px;  background:url(/images/common/i-check.png) no-repeat left top 0px / 20px ; cursor:pointer;}
.checkWrap_sunnong input[type='radio']:checked+label {background-image:url(/images/common/i-check-on.png);}

.scroll-y::-webkit-scrollbar { height:3px; width:10px; } 
.scroll-y::-webkit-scrollbar-thumb { background-color:#999; border-radius:5px; } 
.scroll-y::-webkit-scrollbar-track { background-color:#ccc; border-radius:5px; } 



.join .h4 {position:relative; margin-bottom:20px; font-size:20px;
font-weight:600; color:var(--base2); letter-spacing:-0.5px; line-height:1; transform:var(--textRotate);}
.join .h4:before {position: absolute; left:0; top:-10px;content:'';display:inline-block;width:30px;
height:1px; background:var(--base2);}
.memberLayout .agree pre,
.memberLayout .privacy pre {
	font-family:inherit !important;
	width:100%; font-size:16px;
	margin:0; padding:0; padding-right:30px; color:#555;
	line-height:inherit;
	background:transparent; border:none;
	word-break:keep-all; white-space:pre-wrap;
}
.agree pre strong, .privacy pre strong {font-size:16px; color:#000; font-weight:600;}

.memberLayout .agree pre table {border-collapse:collapse; border:1px solid #ddd; text-align:center;}
.memberLayout .agree pre table tr>* {padding:7px 10px; border-right:1px solid #ddd; color:#000}
.memberLayout .agree pre table tr>*:last-child {border-right:none;}
.memberLayout .agree pre table tr {border-bottom:1px solid #ddd}
.memberLayout .agree pre table tr th {background:#616161; color:#fff; font-weight:400}
.memberLayout .join .checkWrap_sunnong {margin-top:20px;}

.termWrap .privacy pre table {border-collapse:collapse; border:1px solid #ddd; text-align:center;}
.termWrap .privacy pre table tr>* {padding:7px 10px; border-right:1px solid #ddd; color:#000}
.termWrap .privacy pre table tr>*:last-child {border-right:none;}
.termWrap .privacy pre table tr {border-bottom:1px solid #ddd}
.termWrap .privacy pre table tr th {background:#616161; color:#fff; font-weight:400}

.memberBtn-single {text-align:center; margin-top:30px!important;}
.memberBtn-single li a {display: inline-block; padding: 20px 50px; line-height:1; background: #333; color:#fff; font-size: 18px; border-radius:5px; font-weight:600; transform:var(--textRotate); transition:all 0.2s;}
.memberBtn-single li a.gray {background:#999;}
.memberBtn-single li a:hover {background:#000;}
.memberBtn-single ul {display:flex; justify-content:center; gap:10px;}
.termWrap h3 {text-align:center; font-size:24px; font-weight:700;}
.termWrap .box pre {padding:30px; margin-top:30px; border-radius:20px; display: block; line-height: 1.42857143; color: #333; word-break: break-all; word-wrap: break-word; background-color: #f5f5f5; white-space: pre-wrap; font-size:16px; font-family:var(--f_Pretendard)}


/* 회원가입 */
.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;}


}