/*!
 * flexbox.css : v0.5
 * date : 20190308
 */

/* flexbaox
-----------------------------------------------------------*/
.flexbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.col2,
.col2_nm {
	justify-content :space-between;
	width: 100%;
}
.col2 > div {
	width: 49%;
	margin: 0 0 2%;
}
.col3,
.col3_nm {
	justify-content :flex-start;
	width: 100%;
}
.col3 > div {
	width: 32%;
	margin: 0 2% 2% 0;
}
.col3 > div:nth-child(3n) {
	margin: 0 0 2% 0;
}
.col4,
.col4_nm {
	justify-content :flex-start;
	width: 100%;
}
.col4 > div {
	width: 23.5%;
	margin: 0 2% 2% 0;
}
.col4 > div:nth-child(4n) {
	margin: 0 0 2% 0;
}
.col5,
.col5_nm {
	justify-content :flex-start;
	width: 100%;
}
.col5 > div {
	width: 18.4%;
	margin: 0 2% 2% 0;
}
.col5 > div:nth-child(5n) {
	margin: 0 0 2% 0;
}
.col6,
.col6_nm {
	justify-content :flex-start;
	width: 100%;
}
.col6 > div {
	width: 15%;
	margin: 0 2% 2% 0;
}
.col6 > div:nth-child(6n) {
	margin: 0 0 2% 0;
}

/* No Margin */
.col2_nm > div {
	width: 50%;
}
.col3_nm > div {
	width: 33.3%;
}
.col3_nm > div:nth-child(3n) {
	width: 33.4%;
}
.col4_nm > div {
	width: 25%;
}
.col5_nm > div {
	width: 20%;
}
.col6_nm > div {
	width: 16.6%;
}
.col6_nm > div:nth-child(6n) {
	width: 17%;
}



/* Responsive
-----------------------------------------------------------*/
@media screen and (max-width: 1024px) {
.col5 > div,
.col6 > div {
	width: 32%;
	margin: 0 2% 2% 0;
}
.col5 > div:nth-child(3n),
.col6 > div:nth-child(3n) {
	margin: 0 0 2% 0;
}

/* No Margin */
.col5_nm > div,
.col6_nm > div {
	width: 33.3%;
}
.col5_nm > div:nth-child(3n),
.col6_nm > div:nth-child(3n) {
	width: 33.4%;
}

}


@media screen and (max-width: 768px) {
.col2,
.col3,
.col4,
.col5,
.col6 {
	justify-content :space-between;
	margin: 0;
	width: 100%;
}
.col2 > div,
.col3 > div,
.col4 > div,
.col5 > div,
.col6 > div {
	width: 49%;
	margin: 0 0 2%;
}

/* No Margin */
.col2_nm,
.col3_nm,
.col4_nm,
.col5_nm,
.col6_nm {
	justify-content :space-between;
	margin: 0;
	width: 100%;
}
.col2_nm > div,
.col3_nm > div,
.col4_nm > div,
.col5_nm > div,
.col6_nm > div {
	width: 50%;
}
.col3_nm > div:nth-child(3n),
.col5_nm > div:nth-child(3n),
.col6_nm > div:nth-child(3n) {
	width: 50%;
}

}


@media screen and (max-width: 480px) {
.col2 > div,
.col3 > div,
.col4 > div,
.col5 > div,
.col6 > div {
	width: 100%;
	margin: 0 0 4%;
}

/* No Margin */
.col2_nm > div,
.col3_nm > div,
.col4_nm > div,
.col5_nm > div,
.col6_nm > div {
	width: 100%;
	margin: 0 0 4%;
}
.col3_nm > div:nth-child(3n),
.col5_nm > div:nth-child(3n),
.col6_nm > div:nth-child(3n) {
	width: 100%;
}

}

