@charset "utf-8";

.gridsys { width: 960px; position: relative; margin: 0 auto; padding: 0px; }
.gridsys:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }



.gridsys .wrap-col { margin:10px; }

.gridsys .col-1-2,
.gridsys .col-1-3,
.gridsys .col-2-3,
.gridsys .col-1-4,
.gridsys .col-2-4,
.gridsys .col-3-4,
.gridsys .col-1-5,
.gridsys .col-2-5,
.gridsys .col-3-5,
.gridsys .col-4-5,
.gridsys .col-1-6,
.gridsys .col-2-6,
.gridsys .col-3-6,
.gridsys .col-4-6,
.gridsys .col-5-6,
.gridsys .col-6-6 { float:left; display: inline-block; }

.gridsys .col-full { width:100%; }

.gridsys .col-1-2 { width:50%; }

.gridsys .col-1-3 { width:33.33%; }
.gridsys .col-2-3 { width:66.66%; }

.gridsys .col-1-4 { width:25%; }
.gridsys .col-2-4 { width:50%; }
.gridsys .col-3-4 { width:75%; }

.gridsys .col-1-5{ width:20%; }
.gridsys .col-2-5{ width:40%; }
.gridsys .col-3-5{ width:60%; }
.gridsys .col-4-5{ width:80%; }

.gridsys .col-1-6{ width:16.66%; }
.gridsys .col-2-6{ width:33.33%; }
.gridsys .col-3-6{ width:50%; }
.gridsys .col-4-6{ width:66.66%; }
.gridsys .col-5-6{ width:83.33%; }


@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.gridsys { width:768px; }	
}

@media only screen and (max-width: 767px) {
	.gridsys { width:100%; }
}

@media only screen and (min-width: 620px) and (max-width: 767px) {
	.gridsys { width:100%; }
}

@media only screen and (max-width: 619px) {
	.gridsys, .gridsys .col-1-2, .gridsys .col-1-3, .gridsys .col-2-3, .gridsys .col-1-4, .gridsys .col-2-4, .gridsys .col-3-4, .gridsys .col-1-5, .gridsys .col-2-5, .gridsys .col-3-5, .gridsys .col-4-5, .gridsys .col-1-6, .gridsys .col-2-6, .gridsys .col-3-6, .gridsys .col-4-6, .gridsys .col-5-6{width:100%;}
}