/* -------------------------- 모달창 -------------------------- */

.modal {
	display: none;	
	position: fixed;	/* z-index는 relative나 absolute일 때 동작 */
	top: 38%;
	width: 100%;
	z-index: 1;	/* 원래 화면보다 앞에 나오도록 */
}

.modal .modal_layer {	/* 검은 배경 */
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;	/* 부모 태그의 100% */
	  height: 100%;
	  background: rgba(0, 0, 0, 0.5);	/* 검은색 투명도 50 */
	  z-index: -1;	/* modal_content보다 뒤로 가도록 */
}  

.modal .modal_content {
	position: relative;
	margin: 0 auto;
	padding: 20px 40px;
	width: 320px;
	height: 170px;
	background: white;
}

.modal h2 {
	height: 44px;	/* 한 줄 띄우는 것 때문에 다 똑같이 맞춰주려고 높이 지정 */
	margin-top: 45px;	/* 원래는 47px */
	line-height: 22px;	/* '주십시오'한 줄 띄울 때 줄 간격 때문. 없어도 됨 */
	text-align: center;
	font-size: 15.5px;
	font-weight: 600;
	color: #28283C;  
}

.modal .styleBtn {
	font-size: 14.3px;
	text-align: center;
	font-weight: 800;
	line-height: 40px;
	background-color: #A6CD48;	/* 원래 초록색 */
	color: white;	/* 텍스트 색깔 */
	border: 1px solid #A6CD48;
	
	/* 애니메이션 */
	cursor: pointer;
	transition: all 0.3s;
}

.modal .modal_content .containerBtn {	/* 버튼 두 개 들어가는 공간 */
	position: relative;
	margin-top: 20px;
	width: 320px;
	height: 40px;
}

.modal .modal_content .containerBtn .attrBtn {
	width: 138px;
	height: 38px;
	float: left;
}

.modal .modal_content .containerBtn #offBtn2 {
	width: 138px;
	height: 38px;
	margin: 0 auto;
}


/* joinAgreeForm 페이지 버튼 */
.modal #btn_confirm {
	position: relative;
	margin: 0 auto;
	margin-top: 20px;
	width: 138px;
	height: 38px;
}

.modal #btn_confirm:hover {
	color: black;
	box-shadow: 140px 0 0 0 rgba(255, 255, 255, 1) inset;	
}


/* joinForm 페이지 버튼 */
.modal #confirmBtn, .modal #offBtn2, .modal #md_joinBtn {
	margin-left: 17px; 
}

.modal #confirmBtn:hover, .modal #offBtn2:hover, .modal #md_joinBtn:hover {
	color: black;
	box-shadow: 140px 0 0 0 rgba(255, 255, 255, 1) inset;	
}

.modal #offBtn, .modal #offBtn3 {
	margin-left: 6px;
	margin-right: 17px; 
	
	/* 스타일 재정의 */
	background-color: #FFFFFF;	/* 원래 흰색 */
	color: #555555;
	border: 1px solid #999999;
}

.modal #offBtn:hover, .modal #offBtn3:hover {
	color: white;
	box-shadow: 140px 0 0 0 rgba(153, 153, 153, 1) inset;	
}