@charset utf-8;
@import url("default.css");


.mdRegisterWrap{position:relative; max-width:1200px; margin:0 auto;}
.mdRegisterTit{font-size:35px; padding-bottom:15px; padding-top:15px; background:url(../images/public/top_bg.jpg) left bottom no-repeat;}

/*회원가입 상단*/
.mdStepWrap{height:83px; line-height:83px;margin:15px 0px; padding-bottom:15px;background: #fff;  border-bottom:1px solid #dfdfdf;}
.mdStepIconBox{position:relative;  margin:0 auto; width:180px;}
.mdStepIcon{width:83px; height:83px;}
.mdStepTxtbox{height:63px; padding-top:20px; margin-left:10px;}
.mdStepTxt{line-height:1.2; margin:0; font-size:20px; letter-spacing:-0.6pt;}
.mdStep{width:26.6%; height:83px;  }
.mdArrow{ width:10%; height:83px;}
.mdArrow img{width:100%; text-align:center; max-width:59px; vertical-align:middle;} 



/*회원가입step01:약관동의*/
.mdStep01Wrap{width:96%; padding:2%; min-height:400px; margin-bottom:20px;}
.mdStep01Tit{width:100%; height:30px; line-height:30px; text-indent:20px;font-size:18px;}
.mdTerms{width:100%;  margin:15px 0; }
.mdTermsText{width:96%; height:210px; line-height:200%; padding:0 2%; resize:none; }
.mdTermsText2 {height:100px;}
.mdTermsText2:nth-child(1),
.mdTermsText2:nth-child(2),
.mdTermsText2:nth-child(3) { border-bottom: none;}
.mdAccept{width:100%; height:30px; font-size:15px; }
.mdAccept02{width:100%; height:40px; line-height:40px; font-size:15px;  text-align:left;}


/*회원가입 하단*/
.mdBtnWrap{width:100%; height:50px; margin-bottom:10px;}
.mdCheckBtn{min-width:100px; padding:0 13px;}
.mdCancelBtn{width:80px; height:42px;}



/*회원가입step02-01:본인확인*/
.mdStep02Wrap{width:50%; min-height:300px;  margin-top:20px;}
.mdInner{margin:15px; height:270px; text-align:center;}
.mdInnerStyle{margin-left:-4px;}
.mdCheckIconBox{position:relative; margin-top:25px;}
.mdText01{margin-top:15px;}
.mdText02 {margin: 6px 0 10px 0; letter-spacing:-0.6px;}


/*인증받기*/
.mdStepWindow{width:100%; margin-top:20px;}
.mdStep02Wrap02{position:relative; margin:0 auto; max-width:555px; }
.mdInner02{position:relative; margin:15px; padding:20px; height:220px; text-align:center;}
.mdIconBox{width:30%; height:220px; line-height:220px; vertical-align:middle;}
.mdCheckInputBox{width:70%; height:220px;  text-align:left;}
.mdCheckInput { font-size: 16px; padding: 11px 10px; width: 180px; border-radius: 3px;}
p.mdCheckTit{font-size:26px; margin-top:30px;}
p.mdChecksubTit{font-size:16px; margin-top:10px; margin-bottom:20px;}
p.mdCheckInputWrap{display:inline-block; padding-right:5px; zoom:1; *display:inline;}
p.mdCheckBtnBox{display:inline-block; /*익스7*/ zoom:1; *display:inline; text-align:center; }

.mdStep02Wrap02_02{position:relative; margin:0 auto; max-width:555px; }
.mdInner02_02{position:relative; margin:15px; padding:20px; height:220px; text-align:center;}
p.mdCheckTit02{margin-top:30px; font-size:26px;}
p.mdTimeBox{padding-top:10px; margin-top:10px;}
.mdRepostBtn{ padding:0 7px;height:25px; line-height:25px; vertical-align:middle; text-decoration:none; display:inline-block; border-radius:5px;}



/*가입폼*/
.mdRegisterform{ margin-top:20px; margin-bottom:30px;}
.mdRegisterform ul li.mdLi{width:100%;  vertical-align:middle; }
.mdRegisterform ul li.mdLi02{position:relative; float:left; width:100%;  vertical-align:middle; list-style:none; line-height:1.6; padding:5px;}

.mdFormTh{position:relative; float:left; width:28%; vertical-align:middle; padding:2%; padding-top:10px; padding-bottom:10px; line-height:1.4; font-size:15px; letter-spacing:-0.6pt;}
.mdFormTd{ width:64%; padding:2%; padding-top:10px; padding-bottom:10px; line-height:1.6; background:#fff; font-size:15px;}


.mdFormUnder { font-size: 16px; min-height:33px; line-height: 33px; display:inline; display:inline-block; zoom:1; *display:inline;}
p.mdFormBtn1 {
	font-size:15px;
	line-height: 1.6;
	padding:3px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #4d3534;
	/*익스7*/
vertical-align:top;
}

p.mdFormBtn2{display:inline-block;
	cursor:pointer;
	font-size:15px;
	line-height: 1.6;
	border-radius: 3px; margin-right:5px; vertical-align:top; padding:4px 15px 3px 3px;
	zoom:1; *display:inline; /*익스7*/}
p.mdFormBtn2 img{ margin-right:5px;vertical-align:middle; margin-bottom:2px;}
p.mdFormBtn2:hover{ background:url(../images/C01/arrow.png)  no-repeat right #f3f3f3; }

.mdFormInputText1 { font-size: 16px; padding: 6px 10px; width: 150px; border-radius: 3px; vertical-align:top;}
.mdFormInputText2 { font-size: 16px; padding: 6px 10px; width: 340px; border-radius: 3px;}
.mdFormInputText3 { font-size: 16px; padding: 6px 10px; width: 340px; border-radius: 3px; margin-top:5px;}
.mdFormInputText4 { font-size: 16px; padding: 6px 10px; width: 50%; border-radius: 3px;}


.mdFormSelect1 { font-size: 16px; padding: 6px 10px; width: 150px;  height:33px; border-radius: 3px;}
.mdFormSelect2 { font-size: 16px; padding: 6px 10px; width: 360px; border-radius: 3px;}
.mdFormSelect3 {font-size:16px; padding:6px 10px; border-radius: 3px;}

.mdGroupSelec{margin-top:10px; border-radius: 3px; width:96%; padding:2%; background:url(../images/public/groupbg.jpg) repeat;}

.mailForm{display:none;}
.mdSel_year{width:80px; height:30px; padding:5px;margin-right:5px; border-radius: 3px; border:1px solid #d2d2d2;}
.mdSel_month{width:60px;  height:30px; padding:5px;margin-right:5px; margin-right:5px;margin-left:5px;  width:60px;  height:30px; padding:5px;margin-right:5px; border-radius: 3px;border:1px solid #d2d2d2;}

.mdCheckBox{float:none; vertical-align:middle; margin-right:10px;}		
.mdRadioBtn{float:none; vertical-align:middle; margin-right:10px;}

.mdFormInputText1 {color: #333; border: 1px solid #d2d2d2;}
.mdFormInputText2 {color: #333; border: 1px solid #d2d2d2;}
.mdFormInputText3 {color: #333; border: 1px solid #d2d2d2;}
.mdFormInputText4 {color: #333; border: 1px solid #d2d2d2;}

/*국가선택*/
.mdFlagWrap{position:absolute; max-width:350px;height:200px; background:#fff; font-family:'Nanum Barun Gothic' ,'나눔바른고딕'; font-weight:normal; z-index:10; left:0px; top:-2px; overflow-x:hidden; overflow-y:auto; margin-top:2px; border:1px solid blue;}

li.mdLocation_flagLi{padding:7px; font-size:13px;}
li.mdLocation_flagLi img{ margin-right:10px;vertical-align:middle;}
li.mdFlagLi{ vertical-align:middle; list-style:none; line-height:1.6; padding:5px; cursor:pointer; font-size:13px; clear:both;}
li.mdFlagLi img{ margin-right:10px;vertical-align:middle;}


.mdFormTextarea{border-radius: 3px; padding: 6px 10px; width:100%; height:100px;}

/*회원가입완료*/
.mdFinish_tit{height:230px; line-height:1.6; font-size:30px; }
.mdInner03{position:relative; margin:15px; height:200px; background:#fff; border:1px solid #d7d7d7;}
.mdFinish_leftw50{width:49.9%; height:160px;padding:20px 0px; background:url(../images/finish_bg.jpg) no-repeat right 0;}
.mdFinish_rightw50{width:50%; height:160px; padding:20px 0px;}


.idCheck { clear: both;}
.idCheck > p { color: #333; font-weight: 600; font-size: 20px; padding: 10px 0 !important; border-bottom: 1px solid #666;}
.idCheck > .idCheck1 { font-weight: 600; padding: 20px 0;}
.idCheck > .idCheck2 { margin-bottom: 30px; font-size: 16px; font-weight: 900; padding: 30px; background: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align:center; font-size: 24px;}

@media all and (max-width:1200px){
.mdRegisterWrap{max-width:96%; }

}



@media all and (max-width:700px){
.mdRegisterWrap{max-width:96%;}

/*회원가입 상단*/
.mdStepWrap{ height:60px; line-height:70px; margin:0px 0px 15px 0px;}
.mdStepIconBox{width:100px;}
.mdStepIcon{display:none;}
.mdSstepTxtbox{ height:55px; padding-top:15px;}


/*회원가입step02-01:본인확인*/
.mdStep02Wrap{width:100%; }
.mdInnerStyle{margin-left:0px;}

.mdInner02{margin:15px; padding:20px; height:265px;}
.mdIconBox{width:100%; height:105px; line-height:110px;}
.mdCheckInputBox{width:100%; height:140px; margin-top:5px; text-align:center; }
.mdCheckTit{margin-top:10px;}
.mdRegisterWrap{max-width:96%;}


/*폼*/
.mdFormTh{font-size:14px; line-height:1.6; padding:1.5%; width:30%;}
.mdFormTd{font-size:14px; line-height:1.6; padding:1.5%; width:64%;}

.mdFormInputText1{font-size:14px; width: 35%;}
.mdFormInputText2 {width:91%; }
.mdFormInputText3 {width:94%; }
.mdFormInputText4{width:50%; font-size:14px;}
.mdFormSelect1 { width: 110px; font-size:13px;}
.mdFormSelect2 { font-size: 13px; padding: 6px 10px; width: 97%;}
.mdFormSelect3 { font-size: 13px; padding: 6px 10px; width: 97%;}


.mdStep02Wrap02_02{height:375px;}
.mdInner02_02{height:300px;}
.mdCheckTit02{margin-top:0px;}


.mdFormTextarea{border-radius: 3px; padding: 6px 10px; width:93%; height:100px;}

}




@media all and (max-width:480px){

/*회원가입 상단*/
.mdStepWrap{margin-top:0px; height:50px; padding:0px; border-bottom:1px solid #dfdfdf;}
.mdStepIconBox{width:70px;}
.mdStepTxtbox{ height:43px; padding-top:7px;}
.mdStepTxt{font-size:15px;}


.mdArrow{ height:50px; line-height:50px;}
.mdArrow img{ vertical-align:middle; max-height:50px;}

/*본인확인*/
p.mdCheckTit{margin-top:0px; font-size:15px; margin-bottom: 0;}
p.mdChecksubTit{margin-top:5px; font-size:12px; margin-bottom: 10px;}
.mdCheckInputWrap{display:block; width: 100%;}
.mdCheckBtnBox{ display:block; width: 100%; margin-top: 3px !important;}
.mdCheckBtnBox > a {width: 146px !important;}

.mdCheckInput { font-size: 15px; padding: 11px 10px; width: 150px; border-radius: 3px;}


.mdCheckBtn{min-width:50px; padding:0 13px;}

/*폼*/
.mdFormTh{width:98%; border-bottom:none; height:20px; line-height:1; text-align:left; padding-left:2%; font-size:16px; margin-top:10px; }
.mdFormTd{width:98%; min-height:35px; line-height:1.6; padding:0 0 0 2%;margin-bottom:5px;  background:none;}
.mdFormInputText1{font-size:13px;}
.mdFormInputText2 { width: 92%;}
.mdFormInputText3 { width: 92%;}
.mdFormSelect1 { width: 130px; font-size:13px;}
.mdFormSelect2 { font-size: 13px; width: 98%;}

/*회원가입완료*/
.mdInner03{position:relative; margin:10px; height:200px; }
.mdFinish_tit{font-size:20px; height:170px;}
.mdFinish_tit img{width:100%;}

.mdStep01Tit{ margin-top: 30px !important;}
.mdStep01Tit:first-child { margin-top: 0 !important;}

.mdTermsText2 {height:150px;}
.mdTermsText2:nth-child(1),
.mdTermsText2:nth-child(2),
.mdTermsText2:nth-child(3) { margin-bottom: 20px;}

.mdAccept:last-child { height:40px;}
}


.joinType { margin: 80px 0;}
.joinType > p { background: #eee; border-radius: 10px; padding: 15px;}
.joinType > p > span { font-size: 15px; line-height: 1.6;}
.joinType > p > span > i { display: block; font-style: normal;}
.joinType > div { display: flex; align-items: stretch; justify-content: center; margin-top: 30px;}
.joinType > div > div { flex: 1; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; padding: 40px; text-align: center; color: #212121; cursor: pointer;}
.joinType > div > div:last-child { margin-left: 20px;}
.joinType > div > div:nth-child(1):hover { background: #f6fdf9;}
.joinType > div > div:nth-child(2):hover { background: #fcf8f7;}
.joinType > div > div > div > p { }
.joinType > div > div > div > strong { margin-top: 20px; display: block;}
.joinType > div > div > div > strong > span {font-size: 20px; display: block;}
.joinType > div > div > div > strong > span > i { font-style: normal;}
.joinType > div > div > div > strong > span .color1 { color: #32b16c;}
.joinType > div > div > div > strong > span .color2 { color: #ec6941;}
.joinType > div > div > div > strong > i { margin-top: 8px; font-size: 14px; font-weight: normal; color: #999; display: block; font-style: normal;}

.joinKid { padding-top: 10px; clear: both;}  
.joinKid > p { font-size: 15px;}
.joinKid > p > span { display: block; line-height: 1.6;}
.joinKid > div { margin: 10px 0; border: 1px solid #d2d2d2; background: #fff; padding: 15px; display: flex; align-items: center; justify-content: center;}
.joinKid > div > div { flex: 1; margin-right: 20px;}
.joinKid > div > div:last-child { margin-right: 0;}
.joinKid > div > div > strong { font-size: 15px;}
.joinKid > div > div:nth-child(2) > p {display: inline-flex; width: 100%;}
.joinKid > div > div:nth-child(2) > p > select:nth-child(1) { flex: 1.5;}
.joinKid > div > div:nth-child(2) > p > select:nth-child(2) { flex: 1;}
.joinKid > div > div:nth-child(2) > p > select:nth-child(3) { flex: 1;}
.joinKid > span { display: block; margin-bottom: 10px; font-size: 14px; color: #999;}

.joinKid input[type="text"],
.joinKid select { border: 1px solid #ddd; border-radius: 5px; height: 34px; width: 100%; box-sizing: border-box; padding: 0 5px;}
	@media all and (max-width:600px){
		.joinType { margin: 20px 0;}
		.joinType > p > span { font-size: 14px;}
		.joinType > p > span > i { margin-bottom: 8px;}
		.joinType > p > span > i:last-child { margin-bottom: 0;}
		.joinType > div > div { padding: 40px 10px;}
		.joinType > div > div:last-child { margin-left:10px;}

		.joinKid > p > span { line-height: 1.4; margin-bottom: 8px;}
		.joinKid > p > span:last-child { margin-bottom: 0;}
		.joinKid > div { display: block;}
		.joinKid > div > div { margin: 0 20px 10px 20px;}
		.joinKid > div > div:last-child { margin: 0 20px 0 20px;}
		.joinKid > div > div > strong { font-size: 15px;}
		.joinKid > span { display: block; margin-bottom: 10px; font-size: 14px; color: #999;}
		.joinKid input[type="text"] { border: 1px solid #ddd; border-radius: 5px; height: 34px; width: 100%; box-sizing: border-box; padding: 0 5px;}
	}