* {	/* 기본 설정 */
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
	letter-spacing: -1.1px;	/* 글자와 글자사이의 간격. 원래 폰트의 간격에서 -1.1px만큼 줄였다. */
}

html, body {
	height: 100%;
	width: 100%;
}

body {
	font-family: sans-serif;
}

img {
	display: block;	/* 이미지는 사방으로 마진이 2정도 생긴다. 원래 이미지는 inline 요소인데 block으로 만들어준다. */
	position: absolute; /* relative속성을 가진 부모요소를 기준으로 위치를 정한다. 심지어 부모 요소 위에 겹쳐서 배치할 수도 있다.*/
}


/* -------------------------- section -------------------------- */

section {
	width: 980px;
	height: 340px;
	margin: auto;
	position: relative;	/* relative는 위치를 지정해주지 않으면 static과 같다. static은 문서에 기본적으로 표시되는 위치이다. */
	/* 하지만 처음부터 absolute를 주면 화면 너비에 따라서 크기가 변하지 않는다. */
	padding-left: 90px;	/* 왼쪽 메뉴 너비만큼 padding을 줬다. */
}

.clearFix::after {
	content: "";
    display: block;
}

section .joinSection_top .joinSection_img {
	position: absolute;
	left: 550px;
	width: 57px;
	height: 57px;
}

section .joinSection_top .joinSection_img #userIcon {
	left: 18px;
	top: 12px;
}

section .joinSection_top #icon {
	position: absolute;
	top: -25px;
	padding-left: 90px;
	left: 140px;
}

section .joinSection_top .joinSection_title {
	position: absolute;
	top: 65px;
	left: 480px;	/* padding: 90px 한 것과 같다. */
}

section .joinSection_top .joinSection_title span {	/* 회원가입 글자 */
	font-size: 47.5px;
	color: #222222;
}

section .joinSection_body {	/* 글상자 */
	width: 980px;
	height: 155px;
	position: absolute;
	top: 185px;
	border-top: 1px solid black;
	background-color: #F9F9F9;
	font-size: 15.5px;
}

section .joinSection_body div {
	position: absolute;
	width: 686px;
	top: 50px;
	left: 147px;
}

section .joinSection_body div p {
	font-weight: 600;
	color: #28283C;
	text-align: center;
}

section .joinSection_body div p small {	/* 작은 회색글자 */
	font-weight: 700;
	font-size: 14px;
	color: #9C999F;
	line-height: 40px;	/* 행 간격. 만약 글자 크기가 20이라도 아래위로 10px씩 공간이 생긴다. */
}


/* -------------------------- right_menu -------------------------- */

.right_menu {
	position: relative;
	height: 87px;
	top: 0;
	padding-left: 1400px;
}

.right_menu .order {
	position: absolute;
	bottom: 15px;
	right: 62px;
}

.right_menu .order ol {
	height: 28px;
	width: 262px;
	border-bottom: 1px solid #dcdcdc;	/* 실선 */
}

.right_menu .order ol li {
	float: left;	/* li 메뉴들이 서로 옆에 붙도록 한다. */
	height: 20px;
	width: 70px;
	padding: 0 2px 8px 2px;
	margin-left: 20px;
	display: list-item;
	
	font-weight: 600;
	font-size: 14px;
	color: #dcdcdc; 
}

.right_menu .order ol .first {
	margin-left: 0;	/* '01이용약관' 왼쪽 마진 없애준다. */
}

.right_menu .order ol .on {	/* 현재 페이지 - 이용약관 */
/*	margin-bottom: -1px; */
	color: #222222;
	border-bottom: 1px solid #222222;
}


/* -------------------------- article -------------------------- */

article {
	position: relative;
	top: 60px;
	height: 717px;
	width: 980px;
	margin: auto;
	padding-left: 90px;
	margin-bottom: 120px;
}

@media all and (max-width: 1300px) {	
/* 브라우저 너비가 1300px보다 작아질 때 이 쿼리가 실행됨 */
	article {
		margin: 0 105px;
		margin-bottom: 120px;
	}
	section {
		margin: 0 105px;
	}
}

article .joinArticle_top p {	/* '올리브영 회원 약관동의' 글자 */
	font-weight: 600;
	color: #28283C;
	float: left;	/* label태그 옆으로 정렬하기 위해 - float은 block요소 가로배치 */
}

article .joinArticle_body {
	/* joinArticle_top에서 float: left를 했으니 풀어줘야 한다. 
		float: left를 한 부모 요소는 높이가 사라진다. */
	clear: both;	
	width: 980px;
	height: 615px;
	position: absolute;
	top: 22px;	/* joinArticle_top의 높이가 22라서 이렇게 그냥 적어주었다. */
}

article .joinArticle_body span {	/* '서비스 이용약관' 글자*/
	display: block;
	clear: both;
	margin-top: 35px;
	font-size: 14.3px;
	font-weight: 600;
	color: #28283C;
}

article .joinArticle_body .body_service {
	position: absolute;
	width: 980px;
	height: 260px;
	margin-top: 23px;
}

article .joinArticle_body .body_service div {	/* 서비스 이용약관 스크롤 상자 */
	overflow: auto; /* 스크롤 */
	width: 940px; /* padding과 border 생각하라. 원래 너비 980 */
	height: 140px;
	border: 1px solid #DCDCDC;
	padding: 19px;
}

article .joinArticle_body .body_service div p {	/* 스크롤상자 제1조 글자*/
	font-size: 13.2px;
	font-weight: 800;
	color: #28283C;
	text-shadow: 0.2px 0.2px 0.2px gray;
}

li {	/* 약관 상자 작은 글자 */
	font-weight: 700;
	font-size: 13.2px;
	color: #5A5555;
	line-height: 23px;
}

article .joinArticle_body .body_privacy {
	position: absolute;
	top: 336px;
	width: 980px;
	height: 260px;
}

article .joinArticle_body .body_privacy div {	/* 개인정보수집 스크롤 상자 */
	overflow: auto; /* 스크롤 */
	width: 940px; /* padding과 border 생각하라. 원래 너비 980 */
	height: 140px;
	border: 1px solid #DCDCDC;
	padding: 19px;
}

article .joinArticle_body .body_privacy div p {
	font-weight: 700;
	font-size: 13.2px;
	color: #5A5555;
	line-height: 23px;
}

article .joinArticle_body .body_privacy div p span {
	font-size: 13.2px;
	font-weight: 800;
	color: #28283C;
	text-shadow: 0.2px 0.2px 0.2px gray;
}


/* -------------------------- article 버튼 -------------------------- */

article .joinArticle_btm {
	position: absolute;
	top: 637px;
	width: 980px;
	height: 79px;
	border-top: 1px solid #EEEEEE;
}

article .joinArticle_btm .btn {
	width: 285px;
	height: 40px;
	position: relative;
	margin: 0 auto;
	margin-top: 40px;
}

article .joinArticle_btm .btn .btn_all {
	position: absolute;	/* 부모인 .btn기준으로 위치설정 */
	width: 138px;
	height: 38px;
	font-size: 14.3px;
	text-align: center;
	font-weight: 800;
	line-height: 40px;
	
	/* 애니메이션 */
	cursor: pointer;	/* 커서를 올리면 커서가 포인터 모양으로 변한다. */
	transition: all 0.3s;	/* 모두 0.3초만에 바뀐다. */
}

article .joinArticle_btm .btn .btn_agree {	/* '동의' 버튼 */
	left: 0;
	background-color: #A6CD48;	/* 원래 초록색 */
	color: white;	/* 텍스트 색깔 */
	border: 1px solid #A6CD48;
}

article .joinArticle_btm .btn .btn_agree:hover {
	color: black;
	box-shadow: 140px 0 0 0 rgba(255, 255, 255, 1) inset;	
	/* 오른쪽 방향으로 140px만큼 흰색 그림자를 만든다. (버튼의 width와 border 합한 값이 140px)
		inset은 안쪽만 채운다는 의미, 만약 -140px이라면 왼쪽 방향으로 그림자가 만들어진다. */
}

article .joinArticle_btm .btn .btn_notagree {	/* '동의하지 않음' 버튼 */
	left: 145px;
	background-color: #FFFFFF;	/* 원래 흰색 */
	color: #555555;	/* 텍스트 색깔 */
	border: 1px solid #999999;
}

article .joinArticle_btm .btn .btn_notagree:hover {
	color: white;
	box-shadow: 140px 0 0 0 rgba(153, 153, 153, 1) inset;	/* 회색 그림자 */
}


/* -------------------------- article 체크박스 디자인 -------------------------- */

article label, input {	/* 라벨, input태그 전체 적용 */
	cursor: pointer;
}

article .joinArticle_top label {	/* 전체동의 체크 */
	position: absolute;
	left: 980px;
	padding-top: 2px;	/* '회원약관 동의' 글자와 윗줄을 맞춰주기 위해 */
	font-weight: 700;
	font-size: 14.3px;
	color: #5A5555;
}

article .joinArticle_body .body_service label {	/* '서비스 이용동의' 체크 */
	position: absolute;
	left: 783px;
	margin-top: 23px;
	font-weight: 700;
	font-size: 14.3px;
	color: #5A5555;
}

article .joinArticle_body .body_privacy label {	/* '개인정보 수집/이용 동의' 체크 */
	position: absolute;
	left: 765px;
	margin-top: 23px;
	font-weight: 700;
	font-size: 14.3px;
	color: #5A5555;
}

article input[type="checkbox"] { /* 실제 체크박스는 화면에서 숨김 */ 
	/* overflow는 이 속성이 지정된 요소의 내용(content)이 요소의 크기보다 더 클 때
		화면에 어떻게 보여줄지 설정. hidden은 넘어가는 것을 보여주지 않는다. */
	width: 0;	
	height: 0; 
	border: 0;
	overflow: hidden;  
}

article input[type="checkbox"] + label:before { /* 가짜 체크박스 - 체크하기 전 */ 
	/* :before은 요소의 콘텐츠 시작 부분에 생성된 콘텐츠를 추가한다. */
	/* + 는 '인접형제 선택자'. 같은 부모를 가지고 바로 앞뒤로 올 때 
		input태그는 label:before을 선택해주기만 한다. 쉼표(,)와 다르다. */
		
	content: ' '; 
	display: inline-block; /* width, height만큼 content공간 차지 */
	width: 13px; /* 체크박스의 너비와 높이를 지정 */ 
	height: 13px;
	line-height: 13px; /* 세로정렬을 위해 높이값과 일치 */ 
	margin: -3px 0 0 0;
	vertical-align: middle; 
	border: 1px solid #cacece; 
}

article input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */
	/* 체크박스는 위에서 이미 생성되었고, 속성을 다시 지정해주면 
		더 나중에 지정된 속성대로 바뀌는 것을 이용하여 클릭 효과를 만든 것 */
		
	content: '\2714'; /* 체크표시 유니코드 사용 */ 
	font-size: 11px;	/* 체크 크기*/
	color: #A9CD0A;  	/* 체크 색깔 */
	text-align: center;	/* 체크표시 가운데 정렬 */
	border-color: #5A5555; 
}