@charset "UTF-8";
/*clearfix.css*/

.clear_step_01{
	margin: 0 auto;
	margin-bottom: 50px;
	width: 100%; max-width: 600px;
	height: 400px; background-color: #ccc;
	border-bottom: 2px solid #333;
	}

.step_01_insert{float: left; width: 200px; height: 120px;
	background-color: #fa0;}
.step_01_insert:nth-of-type(2n){
	background-color: #acf
}

/*===========================*/
.clear_step_02{
	margin: 0 auto;
	margin-bottom: 100px;
	margin-top: 150px;
	width: 600px; height: auto;
	background-color: #ccf;
	border-bottom: 2px solid #333;
}
.step_02_insert {
	float: left; width: 110px; height: 120px;
	background-color: #afc;
}
.step_02_insert:nth-of-type(2n){
	background-color: #85f;}

.last {clear:both;}

/*다음걸 쓸경우 밑에 깔린다. 
	마지막거에다가 CLEAR 이거 하면 하나만 뚝 떨어진다. 
	필요없는걸 하나 만든다. 
*/

.clear_step_03 {
	margin: 0 auto;
	padding: 0; list-style: none;
	width: 800px; height: auto;
	background-color: #fac;
	margin-bottom: 500px;
}
.clear_step_03>li {
	float: left;
	width: 130px; height: 130px;
	border: 1px solid #333;
	background-color: #caa;
}
.clear_step_03:after,
.clear_step_03::after{content:" "; 
	width:0; height:0;
	display: block; clear:both;}
/*content (opera브라우져 스페이스 빈공간으로 만들어야한다.*/

 /*p:after{display:block; clear:both;}*/

 /*li>.last_1:after{clear: both;}*/
 p {margin: auto;
 	width: 300px; height: 150px;
 	background-color: #afc;}

 p:before,
 p::before{content: "안본눈"; color: #f00; font-weight: bold;}
 p:after,
 p::after{content: "1달전 으로"; color: #0ff; font-size: 2rem;}
 /*: explored 때문에
:: 표준 but : 하나예전버전 ; */

/*clearfix / cx = 등록 
	 after, 적용시키기.. 
.clearfix:after,
.clearfix::after{content:" "; 
	width:0; height:0;
	display: block; clear:both;}
*/
/*float 쓸때 꼭 clear 해야함
after/before 쓸때는 content 무조건
*/