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

/* flexbaox
-----------------------------------------------------------*/
.flexbox {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.col2,
.col2_nm {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  width: 100%;
}
.col2 > div {
  width: 49%;
  margin: 0 0 2%;
}
.col3,
.col3_nm {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-pack: 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;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-pack: 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;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-pack: 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;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-pack: 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;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    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;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    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%;
  }
}