@charset "UTF-8";

/******************** col1 *********************/
.col1 {
	display		: flex;
	flex-wrap	: wrap;
	justify-content	: flex-start;
	justify-content	: center;
	margin-left: auto;
	margin-right: auto;
}
.col1 > * {
	width: auto;
	min-width: 50%;
}
/******************** col1 *********************/
.col2 {
	display		: flex;
	flex-wrap	: wrap;
	justify-content	: flex-start;
	justify-content	: center;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 999px) {
/* 	.col1 > * { width: calc(100% / 1 - 1 / 1 * var(--space-unit)); } */
/* 	.col1 > *:not(:nth-child(1n + 1)) { margin-left: var(--space-unit); } */
/* 	.col1 > *:nth-child(n + 5) { margin-top:calc(var(--space-unit) / 2); } */
}
@media screen and (min-width: 1000px) {
	.col2 > * { width: calc(100% / 2 - 1 / 2 * var(--space-unit)); }
	.col2 > *:not(:nth-child(2n + 1)) { margin-left: var(--space-unit); }
	.col2 > *:nth-child(n + 3) { margin-top:calc(var(--space-unit) / 2); }
}
/******************** col100 *********************/
.col100 {
	display		: flex;
	flex-wrap	: wrap;
	justify-content	: flex-start;
	justify-content	: center;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 400px) {
	.col100 > * { width: calc(100% / 2 - 1 / 2 * var(--space-unit)); }
	.col100 > *:not(:nth-child(2n + 1)) { margin-left: var(--space-unit); }
	.col100 > *:nth-child(n + 3) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:401px) and (max-width: 500px) {
	.col100 > * { width: calc(100% / 3 - 2 / 3 * var(--space-unit)); }
	.col100 > *:not(:nth-child(3n + 1)) { margin-left: var(--space-unit); }
	.col100 > *:nth-child(n + 4) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:501px) and (max-width: 599px) {
	.col100 > * { width: calc(100% / 4 - 3 / 4 * var(--space-unit)); }
	.col100 > *:not(:nth-child(4n + 1)) { margin-left: var(--space-unit); }
	.col100 > *:nth-child(n + 5) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:600px) and (max-width: 699px) {
	.col100 > * { width: calc(100% / 5 - 4 / 5 * var(--space-unit)); }
	.col100 > *:not(:nth-child(5n + 1)) { margin-left: var(--space-unit); }
	.col100 > *:nth-child(n + 6) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:700px) and (max-width: 799px) {
	.col100 > * { width: calc(100% / 6 - 5 / 6 * var(--space-unit)); }
	.col100 > *:not(:nth-child(6n + 1)) { margin-left: var(--space-unit); }
	.col100 > *:nth-child(n + 7) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:800px) {
	.col100 > * { width: calc(100% / 8 - 7 / 8 * var(--space-unit)); }
	.col100 > *:not(:nth-child(8n + 1)) { margin-left: var(--space-unit); }
	.col100 > *:nth-child(n + 9) { margin-top:calc(var(--space-unit) / 2); }
}
/******************** col200 *********************/
.col200 {
	display		: flex;
	flex-wrap	: wrap;
	justify-content	: flex-start;
	justify-content	: center;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 699px) {
	.col200 > * { width: calc(100% / 2 - 1 / 2 * var(--space-unit)); }
	.col200 > *:not(:nth-child(2n + 1)) { margin-left: var(--space-unit); }
	.col200 > *:nth-child(n + 3) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:700px) and (max-width: 899px) {
	.col200 > * { width: calc(100% / 3 - 2 / 3 * var(--space-unit)); }
	.col200 > *:not(:nth-child(3n + 1)) { margin-left: var(--space-unit); }
	.col200 > *:nth-child(n + 4) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:900px) and (max-width: 1099px) {
	.col200 > * { width: calc(100% / 4 - 3 / 4 * var(--space-unit)); }
	.col200 > *:not(:nth-child(4n + 1)) { margin-left: var(--space-unit); }
	.col200 > *:nth-child(n + 5) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:1100px) and (max-width: 1299px) {
	.col200 > * { width: calc(100% / 5 - 4 / 5 * var(--space-unit)); }
	.col200 > *:not(:nth-child(5n + 1)) { margin-left: var(--space-unit); }
	.col200 > *:nth-child(n + 6) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:1300px) and (max-width: 1499px) {
	.col200 > * { width: calc(100% / 6 - 5 / 6 * var(--space-unit)); }
	.col200 > *:not(:nth-child(6n + 1)) { margin-left: var(--space-unit); }
	.col200 > *:nth-child(n + 7) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:1500px) {
	.col200 > * { width: calc(100% / 8 - 7 / 8 * var(--space-unit)); }
	.col200 > *:not(:nth-child(8n + 1)) { margin-left: var(--space-unit); }
	.col200 > *:nth-child(n + 9) { margin-top:calc(var(--space-unit) / 2); }
}
/******************** col400 *********************/
.col400 {
	display		: flex;
	flex-wrap	: wrap;
	justify-content	: flex-start;
/* 	justify-content	: center; */
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 899px) {
	.col400 > * { width: 100%; }
/* 	.col400 > *:not(:nth-child(1n + 1)) { margin-left: var(--space-unit); } */
	.col400 > *:nth-child(n + 2) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:900px) and (max-width: 1299px) {
	.col400 > * { width: calc(100% / 2 - 1 / 2 * var(--space-unit)); }
	.col400 > *:not(:nth-child(2n + 1)) { margin-left: var(--space-unit); }
	.col400 > *:nth-child(n + 3) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:1300px) and (max-width: 1699px) {
	.col400 > * { width: calc(100% / 3 - 2 / 3 * var(--space-unit)); }
	.col400 > *:not(:nth-child(3n + 1)) { margin-left: var(--space-unit); }
	.col400 > *:nth-child(n + 4) { margin-top:calc(var(--space-unit) / 2); }
}
@media screen and (min-width:1700px) {
	.col400 > * { width: calc(100% / 4 - 3 / 4 * var(--space-unit)); }
	.col400 > *:not(:nth-child(4n + 1)) { margin-left: var(--space-unit); }
	.col400 > *:nth-child(n + 5) { margin-top:calc(var(--space-unit) / 2); }
}