/* grid */
.grid:before,
.grid:after {
	content: " ";
	display: table;
}
.grid:after {
	clear: both;
}
.grid {
	margin-left: -20px;
	padding: 0;
	list-style: none;
}
.grid > * {
	float: left;
	margin: 0;
 	padding-left: 20px;
 }
.grid + .grid {
	margin-top: 20px;
}
[class*='width'] {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}
.width-1-1 {
	width: 100%;
}
.width-1-2,
.width-2-4,
.width-3-6,
.width-5-10 {
	width: 50%;
}
.width-1-3,
.width-2-6 {
	width: 33.333%;
}
.width-2-3,
.width-4-6 {
	width: 66.666%;
}
.width-1-4 {
	width: 25%;
}
.width-3-4 {
	width: 75%;
}
.width-1-5,
.width-2-10 {
	width: 20%;
}
.width-2-5,
.width-4-10 {
	width: 40%;
}
.width-3-5,
.width-6-10 {
	width: 60%;
}
.width-4-5,
.width-8-10 {
	width: 80%;
}
.width-1-6 {
	width: 16.666%;
}
.width-5-6 {
	width: 83.333%;
}
.width-1-10 {
	width: 10%;
}
.width-3-10 {
	width: 30%;
}
.width-7-10 {
	width: 70%;
}
.width-9-10 {
	width: 90%;
}
@media (max-width: 768px) {
	[class*='width'] {
		width: 100%;
		margin-bottom: 20px;
	}
	[class*='width']:last-of-type  {
		margin-bottom: 0px;
	}
}
@media (min-width: 768px) {
	[class*='push-'] {
		position: relative;
	} 
	.push-1-2,
	.push-2-4,
	.push-3-6,
	.push-5-10 {
		left: 50%;
	}
	/* Thirds */
	.push-1-3,
	.push-2-6 {
		left: 33.333%;
	}
	.push-2-3,
	.push-4-6 {
		left: 66.666%;
	}
	.push-1-4 {
		left: 25%;
	}
	.push-3-4 {
		left: 75%;
	}
	.push-1-5,
	.push-2-10 {
		left: 20%;
	}
	.push-2-5,
	.push-4-10 {
		left: 40%;
	}
	.push-3-5,
	.push-6-10 {
		left: 60%;
	}
	.push-4-5,
	.push-8-10 {
		left: 80%;
	}
	.push-1-6 {
		left: 16.666%;
	}
	.push-5-6 {
		left: 83.333%;
	}
	.push-1-10 {
		left: 10%;
	}
	.push-3-10 {
		left: 30%;
	}
	.push-7-10 {
		left: 70%;
	}
	.push-9-10 {
		left: 90%;
	}
}
.grid-split  { 
	margin-left: 0;
}
.grid-split [class*='width'] {
	padding-left: 0;
}
.grid-small {
	margin-left: -10px;
}
.grid-small  > * {
	padding-left: 10px;
}
.grid-small + .grid-small {
	margin-top: 10px;
}
.grid-small > * > div + div { /* 수정요망 */
	margin-top: 10px;
}
.grid-large {
	margin-left: -40px;
}
.grid-large  > * {
	padding-left: 40px;
}
.grid-large + .grid-large {
	margin-top: 40px;
}
.grid-large > * > div + div { /* 수정요망 */
	margin-top: 40px;
}
.grid-divider:not(:empty) {
	margin-left: -20px;
	margin-right: -20px;
}
.grid-divider > * {
	padding-left: 20px;
	padding-right: 20px;
}
@media (min-width: 768px) {
	.grid-divider > [class*='width-1-']:not(-width-1-1):nth-child(n+2),
	.grid-divider > [class*='width-2-']:nth-child(n+2),
	.grid-divider > [class*='width-3-']:nth-child(n+2),
	.grid-divider > [class*='width-4-']:nth-child(n+2),
	.grid-divider > [class*='width-5-']:nth-child(n+2),
	.grid-divider > [class*='width-6-']:nth-child(n+2),
	.grid-divider > [class*='width-7-']:nth-child(n+2),
	.grid-divider > [class*='width-8-']:nth-child(n+2),
	.grid-divider > [class*='width-9-']:nth-child(n+2) {
		border-left: 1px solid #ddd;
	}
}
.grid-divider:empty {
	margin-top: 20px;
	margin-bottom: 20px;
	border-top: 1px solid #ddd;
}
.grid-1-2 > * {
	width: 50%;
}
.grid-1-3 > * {
	width: 33.333%;
}
.grid-1-4 > * {
	width: 25%;
}
.grid-1-5 > * {
	width: 20%;
}
.grid-1-6 > * {
	width: 16.666%;
}
.grid-1-10 > * {
	width: 10%;
}