@charset "UTF-8";
/*
XET CSS v2.0.4 2024-08-02 for supported in all modern browsers
By xetemplate(https://xetemplate.com)
*/
/* Flex Grid */
.flex-row,
.flex-container {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-top {
  align-items: flex-start;
}

.flex-middle {
  align-items: center;
}

.flex-bottom {
  align-items: flex-end;
}

.flex-center {
  justify-content: center;
}

.flex-right {
  justify-content: flex-end;
}

/* flex item 비율로 크기 설정 */
.flex-row,
.flex-container {
  margin-left: -12px;
  margin-right: -12px;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-1 {
  flex: 1;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-2 {
  flex: 2;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-3 {
  flex: 3;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-4 {
  flex: 4;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-5 {
  flex: 5;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-6 {
  flex: 6;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-7 {
  flex: 7;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-8 {
  flex: 8;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-9 {
  flex: 9;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-10 {
  flex: 10;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-11 {
  flex: 11;
  padding-left: 12px;
  padding-right: 12px;
}

.flex-12 {
  flex: 12;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-1 {
  flex: 1;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-2 {
  flex: 2;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-3 {
  flex: 3;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-4 {
  flex: 4;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-5 {
  flex: 5;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-6 {
  flex: 6;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-7 {
  flex: 7;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-8 {
  flex: 8;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-9 {
  flex: 9;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-10 {
  flex: 10;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-11 {
  flex: 11;
  padding-left: 12px;
  padding-right: 12px;
}

.xs-flex-12 {
  flex: 12;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-1 {
  flex: 1;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-2 {
  flex: 2;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-3 {
  flex: 3;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-4 {
  flex: 4;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-5 {
  flex: 5;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-6 {
  flex: 6;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-7 {
  flex: 7;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-8 {
  flex: 8;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-9 {
  flex: 9;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-10 {
  flex: 10;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-11 {
  flex: 11;
  padding-left: 12px;
  padding-right: 12px;
}

.sm-flex-12 {
  flex: 12;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-1 {
  flex: 1;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-2 {
  flex: 2;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-3 {
  flex: 3;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-4 {
  flex: 4;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-5 {
  flex: 5;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-6 {
  flex: 6;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-7 {
  flex: 7;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-8 {
  flex: 8;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-9 {
  flex: 9;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-10 {
  flex: 10;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-11 {
  flex: 11;
  padding-left: 12px;
  padding-right: 12px;
}

.md-flex-12 {
  flex: 12;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-1 {
  flex: 1;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-2 {
  flex: 2;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-3 {
  flex: 3;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-4 {
  flex: 4;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-5 {
  flex: 5;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-6 {
  flex: 6;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-7 {
  flex: 7;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-8 {
  flex: 8;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-9 {
  flex: 9;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-10 {
  flex: 10;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-11 {
  flex: 11;
  padding-left: 12px;
  padding-right: 12px;
}

.lg-flex-12 {
  flex: 12;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-1 {
  flex: 1;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-2 {
  flex: 2;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-3 {
  flex: 3;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-4 {
  flex: 4;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-5 {
  flex: 5;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-6 {
  flex: 6;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-7 {
  flex: 7;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-8 {
  flex: 8;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-9 {
  flex: 9;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-10 {
  flex: 10;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-11 {
  flex: 11;
  padding-left: 12px;
  padding-right: 12px;
}

.xl-flex-12 {
  flex: 12;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-1 {
  flex: 1;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-2 {
  flex: 2;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-3 {
  flex: 3;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-4 {
  flex: 4;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-5 {
  flex: 5;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-6 {
  flex: 6;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-7 {
  flex: 7;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-8 {
  flex: 8;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-9 {
  flex: 9;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-10 {
  flex: 10;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-11 {
  flex: 11;
  padding-left: 12px;
  padding-right: 12px;
}

.xxl-flex-12 {
  flex: 12;
  padding-left: 12px;
  padding-right: 12px;
}

/* flex item width */
.flex-width-1 {
  flex-basis: 1%;
}

.flex-width-2 {
  flex-basis: 2%;
}

.flex-width-3 {
  flex-basis: 3%;
}

.flex-width-4 {
  flex-basis: 4%;
}

.flex-width-5 {
  flex-basis: 5%;
}

.flex-width-6 {
  flex-basis: 6%;
}

.flex-width-7 {
  flex-basis: 7%;
}

.flex-width-8 {
  flex-basis: 8%;
}

.flex-width-9 {
  flex-basis: 9%;
}

.flex-width-10 {
  flex-basis: 10%;
}

.flex-width-11 {
  flex-basis: 11%;
}

.flex-width-12 {
  flex-basis: 12%;
}

.flex-width-13 {
  flex-basis: 13%;
}

.flex-width-14 {
  flex-basis: 14%;
}

.flex-width-15 {
  flex-basis: 15%;
}

.flex-width-16 {
  flex-basis: 16%;
}

.flex-width-17 {
  flex-basis: 17%;
}

.flex-width-18 {
  flex-basis: 18%;
}

.flex-width-19 {
  flex-basis: 19%;
}

.flex-width-20 {
  flex-basis: 20%;
}

.flex-width-21 {
  flex-basis: 21%;
}

.flex-width-22 {
  flex-basis: 22%;
}

.flex-width-23 {
  flex-basis: 23%;
}

.flex-width-24 {
  flex-basis: 24%;
}

.flex-width-25 {
  flex-basis: 25%;
}

.flex-width-26 {
  flex-basis: 26%;
}

.flex-width-27 {
  flex-basis: 27%;
}

.flex-width-28 {
  flex-basis: 28%;
}

.flex-width-29 {
  flex-basis: 29%;
}

.flex-width-30 {
  flex-basis: 30%;
}

.flex-width-31 {
  flex-basis: 31%;
}

.flex-width-32 {
  flex-basis: 32%;
}

.flex-width-33 {
  flex-basis: 33%;
}

.flex-width-34 {
  flex-basis: 34%;
}

.flex-width-35 {
  flex-basis: 35%;
}

.flex-width-36 {
  flex-basis: 36%;
}

.flex-width-37 {
  flex-basis: 37%;
}

.flex-width-38 {
  flex-basis: 38%;
}

.flex-width-39 {
  flex-basis: 39%;
}

.flex-width-40 {
  flex-basis: 40%;
}

.flex-width-41 {
  flex-basis: 41%;
}

.flex-width-42 {
  flex-basis: 42%;
}

.flex-width-43 {
  flex-basis: 43%;
}

.flex-width-44 {
  flex-basis: 44%;
}

.flex-width-45 {
  flex-basis: 45%;
}

.flex-width-46 {
  flex-basis: 46%;
}

.flex-width-47 {
  flex-basis: 47%;
}

.flex-width-48 {
  flex-basis: 48%;
}

.flex-width-49 {
  flex-basis: 49%;
}

.flex-width-50 {
  flex-basis: 50%;
}

.flex-width-51 {
  flex-basis: 51%;
}

.flex-width-52 {
  flex-basis: 52%;
}

.flex-width-53 {
  flex-basis: 53%;
}

.flex-width-54 {
  flex-basis: 54%;
}

.flex-width-55 {
  flex-basis: 55%;
}

.flex-width-56 {
  flex-basis: 56%;
}

.flex-width-57 {
  flex-basis: 57%;
}

.flex-width-58 {
  flex-basis: 58%;
}

.flex-width-59 {
  flex-basis: 59%;
}

.flex-width-60 {
  flex-basis: 60%;
}

.flex-width-61 {
  flex-basis: 61%;
}

.flex-width-62 {
  flex-basis: 62%;
}

.flex-width-63 {
  flex-basis: 63%;
}

.flex-width-64 {
  flex-basis: 64%;
}

.flex-width-65 {
  flex-basis: 65%;
}

.flex-width-66 {
  flex-basis: 66%;
}

.flex-width-67 {
  flex-basis: 67%;
}

.flex-width-68 {
  flex-basis: 68%;
}

.flex-width-69 {
  flex-basis: 69%;
}

.flex-width-70 {
  flex-basis: 70%;
}

.flex-width-71 {
  flex-basis: 71%;
}

.flex-width-72 {
  flex-basis: 72%;
}

.flex-width-73 {
  flex-basis: 73%;
}

.flex-width-74 {
  flex-basis: 74%;
}

.flex-width-75 {
  flex-basis: 75%;
}

.flex-width-76 {
  flex-basis: 76%;
}

.flex-width-77 {
  flex-basis: 77%;
}

.flex-width-78 {
  flex-basis: 78%;
}

.flex-width-79 {
  flex-basis: 79%;
}

.flex-width-80 {
  flex-basis: 80%;
}

.flex-width-81 {
  flex-basis: 81%;
}

.flex-width-82 {
  flex-basis: 82%;
}

.flex-width-83 {
  flex-basis: 83%;
}

.flex-width-84 {
  flex-basis: 84%;
}

.flex-width-85 {
  flex-basis: 85%;
}

.flex-width-86 {
  flex-basis: 86%;
}

.flex-width-87 {
  flex-basis: 87%;
}

.flex-width-88 {
  flex-basis: 88%;
}

.flex-width-89 {
  flex-basis: 89%;
}

.flex-width-90 {
  flex-basis: 90%;
}

.flex-width-91 {
  flex-basis: 91%;
}

.flex-width-92 {
  flex-basis: 92%;
}

.flex-width-93 {
  flex-basis: 93%;
}

.flex-width-94 {
  flex-basis: 94%;
}

.flex-width-95 {
  flex-basis: 95%;
}

.flex-width-96 {
  flex-basis: 96%;
}

.flex-width-97 {
  flex-basis: 97%;
}

.flex-width-98 {
  flex-basis: 98%;
}

.flex-width-99 {
  flex-basis: 99%;
}

.flex-width-100 {
  flex-basis: 100%;
}

/* XS */
@media (max-width: 575px) {
  .xs-flex-row,
.xs-flex-container {
    display: flex;
  }

  .xs-flex-column {
    flex-direction: column;
  }

  .xs-flex-wrap {
    flex-wrap: wrap;
  }

  .xs-flex-top {
    align-items: flex-start;
  }

  .xs-flex-middle {
    align-items: center;
  }

  .xs-flex-bottom {
    align-items: flex-end;
  }

  .xs-flex-center {
    justify-content: center;
  }

  .xs-flex-right {
    justify-content: flex-end;
  }

  /* flex item 비율로 크기 설정 */
  .xs-flex-row,
.xs-flex-container {
    margin-left: -12px;
    margin-right: -12px;
  }

  .xs-flex-auto {
    flex: auto;
  }

  .xs-flex-none {
    flex: none;
  }

  /* flex item width */
  .xs-flex-width-1 {
    flex-basis: 1%;
  }

  .xs-flex-width-2 {
    flex-basis: 2%;
  }

  .xs-flex-width-3 {
    flex-basis: 3%;
  }

  .xs-flex-width-4 {
    flex-basis: 4%;
  }

  .xs-flex-width-5 {
    flex-basis: 5%;
  }

  .xs-flex-width-6 {
    flex-basis: 6%;
  }

  .xs-flex-width-7 {
    flex-basis: 7%;
  }

  .xs-flex-width-8 {
    flex-basis: 8%;
  }

  .xs-flex-width-9 {
    flex-basis: 9%;
  }

  .xs-flex-width-10 {
    flex-basis: 10%;
  }

  .xs-flex-width-11 {
    flex-basis: 11%;
  }

  .xs-flex-width-12 {
    flex-basis: 12%;
  }

  .xs-flex-width-13 {
    flex-basis: 13%;
  }

  .xs-flex-width-14 {
    flex-basis: 14%;
  }

  .xs-flex-width-15 {
    flex-basis: 15%;
  }

  .xs-flex-width-16 {
    flex-basis: 16%;
  }

  .xs-flex-width-17 {
    flex-basis: 17%;
  }

  .xs-flex-width-18 {
    flex-basis: 18%;
  }

  .xs-flex-width-19 {
    flex-basis: 19%;
  }

  .xs-flex-width-20 {
    flex-basis: 20%;
  }

  .xs-flex-width-21 {
    flex-basis: 21%;
  }

  .xs-flex-width-22 {
    flex-basis: 22%;
  }

  .xs-flex-width-23 {
    flex-basis: 23%;
  }

  .xs-flex-width-24 {
    flex-basis: 24%;
  }

  .xs-flex-width-25 {
    flex-basis: 25%;
  }

  .xs-flex-width-26 {
    flex-basis: 26%;
  }

  .xs-flex-width-27 {
    flex-basis: 27%;
  }

  .xs-flex-width-28 {
    flex-basis: 28%;
  }

  .xs-flex-width-29 {
    flex-basis: 29%;
  }

  .xs-flex-width-30 {
    flex-basis: 30%;
  }

  .xs-flex-width-31 {
    flex-basis: 31%;
  }

  .xs-flex-width-32 {
    flex-basis: 32%;
  }

  .xs-flex-width-33 {
    flex-basis: 33%;
  }

  .xs-flex-width-34 {
    flex-basis: 34%;
  }

  .xs-flex-width-35 {
    flex-basis: 35%;
  }

  .xs-flex-width-36 {
    flex-basis: 36%;
  }

  .xs-flex-width-37 {
    flex-basis: 37%;
  }

  .xs-flex-width-38 {
    flex-basis: 38%;
  }

  .xs-flex-width-39 {
    flex-basis: 39%;
  }

  .xs-flex-width-40 {
    flex-basis: 40%;
  }

  .xs-flex-width-41 {
    flex-basis: 41%;
  }

  .xs-flex-width-42 {
    flex-basis: 42%;
  }

  .xs-flex-width-43 {
    flex-basis: 43%;
  }

  .xs-flex-width-44 {
    flex-basis: 44%;
  }

  .xs-flex-width-45 {
    flex-basis: 45%;
  }

  .xs-flex-width-46 {
    flex-basis: 46%;
  }

  .xs-flex-width-47 {
    flex-basis: 47%;
  }

  .xs-flex-width-48 {
    flex-basis: 48%;
  }

  .xs-flex-width-49 {
    flex-basis: 49%;
  }

  .xs-flex-width-50 {
    flex-basis: 50%;
  }

  .xs-flex-width-51 {
    flex-basis: 51%;
  }

  .xs-flex-width-52 {
    flex-basis: 52%;
  }

  .xs-flex-width-53 {
    flex-basis: 53%;
  }

  .xs-flex-width-54 {
    flex-basis: 54%;
  }

  .xs-flex-width-55 {
    flex-basis: 55%;
  }

  .xs-flex-width-56 {
    flex-basis: 56%;
  }

  .xs-flex-width-57 {
    flex-basis: 57%;
  }

  .xs-flex-width-58 {
    flex-basis: 58%;
  }

  .xs-flex-width-59 {
    flex-basis: 59%;
  }

  .xs-flex-width-60 {
    flex-basis: 60%;
  }

  .xs-flex-width-61 {
    flex-basis: 61%;
  }

  .xs-flex-width-62 {
    flex-basis: 62%;
  }

  .xs-flex-width-63 {
    flex-basis: 63%;
  }

  .xs-flex-width-64 {
    flex-basis: 64%;
  }

  .xs-flex-width-65 {
    flex-basis: 65%;
  }

  .xs-flex-width-66 {
    flex-basis: 66%;
  }

  .xs-flex-width-67 {
    flex-basis: 67%;
  }

  .xs-flex-width-68 {
    flex-basis: 68%;
  }

  .xs-flex-width-69 {
    flex-basis: 69%;
  }

  .xs-flex-width-70 {
    flex-basis: 70%;
  }

  .xs-flex-width-71 {
    flex-basis: 71%;
  }

  .xs-flex-width-72 {
    flex-basis: 72%;
  }

  .xs-flex-width-73 {
    flex-basis: 73%;
  }

  .xs-flex-width-74 {
    flex-basis: 74%;
  }

  .xs-flex-width-75 {
    flex-basis: 75%;
  }

  .xs-flex-width-76 {
    flex-basis: 76%;
  }

  .xs-flex-width-77 {
    flex-basis: 77%;
  }

  .xs-flex-width-78 {
    flex-basis: 78%;
  }

  .xs-flex-width-79 {
    flex-basis: 79%;
  }

  .xs-flex-width-80 {
    flex-basis: 80%;
  }

  .xs-flex-width-81 {
    flex-basis: 81%;
  }

  .xs-flex-width-82 {
    flex-basis: 82%;
  }

  .xs-flex-width-83 {
    flex-basis: 83%;
  }

  .xs-flex-width-84 {
    flex-basis: 84%;
  }

  .xs-flex-width-85 {
    flex-basis: 85%;
  }

  .xs-flex-width-86 {
    flex-basis: 86%;
  }

  .xs-flex-width-87 {
    flex-basis: 87%;
  }

  .xs-flex-width-88 {
    flex-basis: 88%;
  }

  .xs-flex-width-89 {
    flex-basis: 89%;
  }

  .xs-flex-width-90 {
    flex-basis: 90%;
  }

  .xs-flex-width-91 {
    flex-basis: 91%;
  }

  .xs-flex-width-92 {
    flex-basis: 92%;
  }

  .xs-flex-width-93 {
    flex-basis: 93%;
  }

  .xs-flex-width-94 {
    flex-basis: 94%;
  }

  .xs-flex-width-95 {
    flex-basis: 95%;
  }

  .xs-flex-width-96 {
    flex-basis: 96%;
  }

  .xs-flex-width-97 {
    flex-basis: 97%;
  }

  .xs-flex-width-98 {
    flex-basis: 98%;
  }

  .xs-flex-width-99 {
    flex-basis: 99%;
  }

  .xs-flex-width-100 {
    flex-basis: 100%;
  }
}
/* SM */
@media (max-width: 576px) {
  .sm-flex-container {
    display: flex;
  }

  .sm-flex-column {
    flex-direction: column;
  }

  .sm-flex-wrap {
    flex-wrap: wrap;
  }

  .sm-flex-top {
    align-items: flex-start;
  }

  .sm-flex-middle {
    align-items: center;
  }

  .sm-flex-bottom {
    align-items: flex-end;
  }

  .sm-flex-center {
    justify-content: center;
  }

  .sm-flex-right {
    justify-content: flex-end;
  }

  /* flex item 비율로 크기 설정 */
  .sm-flex-auto {
    flex: auto;
  }

  .sm-flex-none {
    flex: none;
  }

  .sm-flex-1 {
    flex: 1;
  }

  .sm-flex-2 {
    flex: 2;
  }

  .sm-flex-3 {
    flex: 3;
  }

  .sm-flex-4 {
    flex: 4;
  }

  .sm-flex-5 {
    flex: 5;
  }

  .sm-flex-6 {
    flex: 6;
  }

  .sm-flex-7 {
    flex: 7;
  }

  .sm-flex-8 {
    flex: 8;
  }

  .sm-flex-9 {
    flex: 9;
  }

  .sm-flex-10 {
    flex: 10;
  }

  /* flex item width */
  .sm-flex-width-1 {
    flex-basis: 1%;
  }

  .sm-flex-width-2 {
    flex-basis: 2%;
  }

  .sm-flex-width-3 {
    flex-basis: 3%;
  }

  .sm-flex-width-4 {
    flex-basis: 4%;
  }

  .sm-flex-width-5 {
    flex-basis: 5%;
  }

  .sm-flex-width-6 {
    flex-basis: 6%;
  }

  .sm-flex-width-7 {
    flex-basis: 7%;
  }

  .sm-flex-width-8 {
    flex-basis: 8%;
  }

  .sm-flex-width-9 {
    flex-basis: 9%;
  }

  .sm-flex-width-10 {
    flex-basis: 10%;
  }

  .sm-flex-width-11 {
    flex-basis: 11%;
  }

  .sm-flex-width-12 {
    flex-basis: 12%;
  }

  .sm-flex-width-13 {
    flex-basis: 13%;
  }

  .sm-flex-width-14 {
    flex-basis: 14%;
  }

  .sm-flex-width-15 {
    flex-basis: 15%;
  }

  .sm-flex-width-16 {
    flex-basis: 16%;
  }

  .sm-flex-width-17 {
    flex-basis: 17%;
  }

  .sm-flex-width-18 {
    flex-basis: 18%;
  }

  .sm-flex-width-19 {
    flex-basis: 19%;
  }

  .sm-flex-width-20 {
    flex-basis: 20%;
  }

  .sm-flex-width-21 {
    flex-basis: 21%;
  }

  .sm-flex-width-22 {
    flex-basis: 22%;
  }

  .sm-flex-width-23 {
    flex-basis: 23%;
  }

  .sm-flex-width-24 {
    flex-basis: 24%;
  }

  .sm-flex-width-25 {
    flex-basis: 25%;
  }

  .sm-flex-width-26 {
    flex-basis: 26%;
  }

  .sm-flex-width-27 {
    flex-basis: 27%;
  }

  .sm-flex-width-28 {
    flex-basis: 28%;
  }

  .sm-flex-width-29 {
    flex-basis: 29%;
  }

  .sm-flex-width-30 {
    flex-basis: 30%;
  }

  .sm-flex-width-31 {
    flex-basis: 31%;
  }

  .sm-flex-width-32 {
    flex-basis: 32%;
  }

  .sm-flex-width-33 {
    flex-basis: 33%;
  }

  .sm-flex-width-34 {
    flex-basis: 34%;
  }

  .sm-flex-width-35 {
    flex-basis: 35%;
  }

  .sm-flex-width-36 {
    flex-basis: 36%;
  }

  .sm-flex-width-37 {
    flex-basis: 37%;
  }

  .sm-flex-width-38 {
    flex-basis: 38%;
  }

  .sm-flex-width-39 {
    flex-basis: 39%;
  }

  .sm-flex-width-40 {
    flex-basis: 40%;
  }

  .sm-flex-width-41 {
    flex-basis: 41%;
  }

  .sm-flex-width-42 {
    flex-basis: 42%;
  }

  .sm-flex-width-43 {
    flex-basis: 43%;
  }

  .sm-flex-width-44 {
    flex-basis: 44%;
  }

  .sm-flex-width-45 {
    flex-basis: 45%;
  }

  .sm-flex-width-46 {
    flex-basis: 46%;
  }

  .sm-flex-width-47 {
    flex-basis: 47%;
  }

  .sm-flex-width-48 {
    flex-basis: 48%;
  }

  .sm-flex-width-49 {
    flex-basis: 49%;
  }

  .sm-flex-width-50 {
    flex-basis: 50%;
  }

  .sm-flex-width-51 {
    flex-basis: 51%;
  }

  .sm-flex-width-52 {
    flex-basis: 52%;
  }

  .sm-flex-width-53 {
    flex-basis: 53%;
  }

  .sm-flex-width-54 {
    flex-basis: 54%;
  }

  .sm-flex-width-55 {
    flex-basis: 55%;
  }

  .sm-flex-width-56 {
    flex-basis: 56%;
  }

  .sm-flex-width-57 {
    flex-basis: 57%;
  }

  .sm-flex-width-58 {
    flex-basis: 58%;
  }

  .sm-flex-width-59 {
    flex-basis: 59%;
  }

  .sm-flex-width-60 {
    flex-basis: 60%;
  }

  .sm-flex-width-61 {
    flex-basis: 61%;
  }

  .sm-flex-width-62 {
    flex-basis: 62%;
  }

  .sm-flex-width-63 {
    flex-basis: 63%;
  }

  .sm-flex-width-64 {
    flex-basis: 64%;
  }

  .sm-flex-width-65 {
    flex-basis: 65%;
  }

  .sm-flex-width-66 {
    flex-basis: 66%;
  }

  .sm-flex-width-67 {
    flex-basis: 67%;
  }

  .sm-flex-width-68 {
    flex-basis: 68%;
  }

  .sm-flex-width-69 {
    flex-basis: 69%;
  }

  .sm-flex-width-70 {
    flex-basis: 70%;
  }

  .sm-flex-width-71 {
    flex-basis: 71%;
  }

  .sm-flex-width-72 {
    flex-basis: 72%;
  }

  .sm-flex-width-73 {
    flex-basis: 73%;
  }

  .sm-flex-width-74 {
    flex-basis: 74%;
  }

  .sm-flex-width-75 {
    flex-basis: 75%;
  }

  .sm-flex-width-76 {
    flex-basis: 76%;
  }

  .sm-flex-width-77 {
    flex-basis: 77%;
  }

  .sm-flex-width-78 {
    flex-basis: 78%;
  }

  .sm-flex-width-79 {
    flex-basis: 79%;
  }

  .sm-flex-width-80 {
    flex-basis: 80%;
  }

  .sm-flex-width-81 {
    flex-basis: 81%;
  }

  .sm-flex-width-82 {
    flex-basis: 82%;
  }

  .sm-flex-width-83 {
    flex-basis: 83%;
  }

  .sm-flex-width-84 {
    flex-basis: 84%;
  }

  .sm-flex-width-85 {
    flex-basis: 85%;
  }

  .sm-flex-width-86 {
    flex-basis: 86%;
  }

  .sm-flex-width-87 {
    flex-basis: 87%;
  }

  .sm-flex-width-88 {
    flex-basis: 88%;
  }

  .sm-flex-width-89 {
    flex-basis: 89%;
  }

  .sm-flex-width-90 {
    flex-basis: 90%;
  }

  .sm-flex-width-91 {
    flex-basis: 91%;
  }

  .sm-flex-width-92 {
    flex-basis: 92%;
  }

  .sm-flex-width-93 {
    flex-basis: 93%;
  }

  .sm-flex-width-94 {
    flex-basis: 94%;
  }

  .sm-flex-width-95 {
    flex-basis: 95%;
  }

  .sm-flex-width-96 {
    flex-basis: 96%;
  }

  .sm-flex-width-97 {
    flex-basis: 97%;
  }

  .sm-flex-width-98 {
    flex-basis: 98%;
  }

  .sm-flex-width-99 {
    flex-basis: 99%;
  }

  .sm-flex-width-100 {
    flex-basis: 100%;
  }
}
/* MD Column Size */
@media (min-width: 768px) {
  .md-flex-container {
    display: flex;
  }

  .md-flex-column {
    flex-direction: column;
  }

  .md-flex-wrap {
    flex-wrap: wrap;
  }

  .md-flex-top {
    align-items: flex-start;
  }

  .md-flex-middle {
    align-items: center;
  }

  .md-flex-bottom {
    align-items: flex-end;
  }

  .md-flex-center {
    justify-content: center;
  }

  .md-flex-right {
    justify-content: flex-end;
  }

  /* flex item 비율로 크기 설정 */
  .md-flex-auto {
    flex: auto;
  }

  .md-flex-none {
    flex: none;
  }

  .md-flex-1 {
    flex: 1;
  }

  .md-flex-2 {
    flex: 2;
  }

  .md-flex-3 {
    flex: 3;
  }

  .md-flex-4 {
    flex: 4;
  }

  .md-flex-5 {
    flex: 5;
  }

  .md-flex-6 {
    flex: 6;
  }

  .md-flex-7 {
    flex: 7;
  }

  .md-flex-8 {
    flex: 8;
  }

  .md-flex-9 {
    flex: 9;
  }

  .md-flex-10 {
    flex: 10;
  }

  /* flex item width */
  .md-flex-width-1 {
    flex-basis: 1%;
  }

  .md-flex-width-2 {
    flex-basis: 2%;
  }

  .md-flex-width-3 {
    flex-basis: 3%;
  }

  .md-flex-width-4 {
    flex-basis: 4%;
  }

  .md-flex-width-5 {
    flex-basis: 5%;
  }

  .md-flex-width-6 {
    flex-basis: 6%;
  }

  .md-flex-width-7 {
    flex-basis: 7%;
  }

  .md-flex-width-8 {
    flex-basis: 8%;
  }

  .md-flex-width-9 {
    flex-basis: 9%;
  }

  .md-flex-width-10 {
    flex-basis: 10%;
  }

  .md-flex-width-11 {
    flex-basis: 11%;
  }

  .md-flex-width-12 {
    flex-basis: 12%;
  }

  .md-flex-width-13 {
    flex-basis: 13%;
  }

  .md-flex-width-14 {
    flex-basis: 14%;
  }

  .md-flex-width-15 {
    flex-basis: 15%;
  }

  .md-flex-width-16 {
    flex-basis: 16%;
  }

  .md-flex-width-17 {
    flex-basis: 17%;
  }

  .md-flex-width-18 {
    flex-basis: 18%;
  }

  .md-flex-width-19 {
    flex-basis: 19%;
  }

  .md-flex-width-20 {
    flex-basis: 20%;
  }

  .md-flex-width-21 {
    flex-basis: 21%;
  }

  .md-flex-width-22 {
    flex-basis: 22%;
  }

  .md-flex-width-23 {
    flex-basis: 23%;
  }

  .md-flex-width-24 {
    flex-basis: 24%;
  }

  .md-flex-width-25 {
    flex-basis: 25%;
  }

  .md-flex-width-26 {
    flex-basis: 26%;
  }

  .md-flex-width-27 {
    flex-basis: 27%;
  }

  .md-flex-width-28 {
    flex-basis: 28%;
  }

  .md-flex-width-29 {
    flex-basis: 29%;
  }

  .md-flex-width-30 {
    flex-basis: 30%;
  }

  .md-flex-width-31 {
    flex-basis: 31%;
  }

  .md-flex-width-32 {
    flex-basis: 32%;
  }

  .md-flex-width-33 {
    flex-basis: 33%;
  }

  .md-flex-width-34 {
    flex-basis: 34%;
  }

  .md-flex-width-35 {
    flex-basis: 35%;
  }

  .md-flex-width-36 {
    flex-basis: 36%;
  }

  .md-flex-width-37 {
    flex-basis: 37%;
  }

  .md-flex-width-38 {
    flex-basis: 38%;
  }

  .md-flex-width-39 {
    flex-basis: 39%;
  }

  .md-flex-width-40 {
    flex-basis: 40%;
  }

  .md-flex-width-41 {
    flex-basis: 41%;
  }

  .md-flex-width-42 {
    flex-basis: 42%;
  }

  .md-flex-width-43 {
    flex-basis: 43%;
  }

  .md-flex-width-44 {
    flex-basis: 44%;
  }

  .md-flex-width-45 {
    flex-basis: 45%;
  }

  .md-flex-width-46 {
    flex-basis: 46%;
  }

  .md-flex-width-47 {
    flex-basis: 47%;
  }

  .md-flex-width-48 {
    flex-basis: 48%;
  }

  .md-flex-width-49 {
    flex-basis: 49%;
  }

  .md-flex-width-50 {
    flex-basis: 50%;
  }

  .md-flex-width-51 {
    flex-basis: 51%;
  }

  .md-flex-width-52 {
    flex-basis: 52%;
  }

  .md-flex-width-53 {
    flex-basis: 53%;
  }

  .md-flex-width-54 {
    flex-basis: 54%;
  }

  .md-flex-width-55 {
    flex-basis: 55%;
  }

  .md-flex-width-56 {
    flex-basis: 56%;
  }

  .md-flex-width-57 {
    flex-basis: 57%;
  }

  .md-flex-width-58 {
    flex-basis: 58%;
  }

  .md-flex-width-59 {
    flex-basis: 59%;
  }

  .md-flex-width-60 {
    flex-basis: 60%;
  }

  .md-flex-width-61 {
    flex-basis: 61%;
  }

  .md-flex-width-62 {
    flex-basis: 62%;
  }

  .md-flex-width-63 {
    flex-basis: 63%;
  }

  .md-flex-width-64 {
    flex-basis: 64%;
  }

  .md-flex-width-65 {
    flex-basis: 65%;
  }

  .md-flex-width-66 {
    flex-basis: 66%;
  }

  .md-flex-width-67 {
    flex-basis: 67%;
  }

  .md-flex-width-68 {
    flex-basis: 68%;
  }

  .md-flex-width-69 {
    flex-basis: 69%;
  }

  .md-flex-width-70 {
    flex-basis: 70%;
  }

  .md-flex-width-71 {
    flex-basis: 71%;
  }

  .md-flex-width-72 {
    flex-basis: 72%;
  }

  .md-flex-width-73 {
    flex-basis: 73%;
  }

  .md-flex-width-74 {
    flex-basis: 74%;
  }

  .md-flex-width-75 {
    flex-basis: 75%;
  }

  .md-flex-width-76 {
    flex-basis: 76%;
  }

  .md-flex-width-77 {
    flex-basis: 77%;
  }

  .md-flex-width-78 {
    flex-basis: 78%;
  }

  .md-flex-width-79 {
    flex-basis: 79%;
  }

  .md-flex-width-80 {
    flex-basis: 80%;
  }

  .md-flex-width-81 {
    flex-basis: 81%;
  }

  .md-flex-width-82 {
    flex-basis: 82%;
  }

  .md-flex-width-83 {
    flex-basis: 83%;
  }

  .md-flex-width-84 {
    flex-basis: 84%;
  }

  .md-flex-width-85 {
    flex-basis: 85%;
  }

  .md-flex-width-86 {
    flex-basis: 86%;
  }

  .md-flex-width-87 {
    flex-basis: 87%;
  }

  .md-flex-width-88 {
    flex-basis: 88%;
  }

  .md-flex-width-89 {
    flex-basis: 89%;
  }

  .md-flex-width-90 {
    flex-basis: 90%;
  }

  .md-flex-width-91 {
    flex-basis: 91%;
  }

  .md-flex-width-92 {
    flex-basis: 92%;
  }

  .md-flex-width-93 {
    flex-basis: 93%;
  }

  .md-flex-width-94 {
    flex-basis: 94%;
  }

  .md-flex-width-95 {
    flex-basis: 95%;
  }

  .md-flex-width-96 {
    flex-basis: 96%;
  }

  .md-flex-width-97 {
    flex-basis: 97%;
  }

  .md-flex-width-98 {
    flex-basis: 98%;
  }

  .md-flex-width-99 {
    flex-basis: 99%;
  }

  .md-flex-width-100 {
    flex-basis: 100%;
  }
}
/* LG Column Size */
@media (min-width: 992px) {
  .lg-flex-container {
    display: flex;
  }

  .lg-flex-column {
    flex-direction: column;
  }

  .lg-flex-wrap {
    flex-wrap: wrap;
  }

  .lg-flex-top {
    align-items: flex-start;
  }

  .lg-flex-middle {
    align-items: center;
  }

  .lg-flex-bottom {
    align-items: flex-end;
  }

  .lg-flex-center {
    justify-content: center;
  }

  .lg-flex-right {
    justify-content: flex-end;
  }

  /* flex item 비율로 크기 설정 */
  .lg-flex-auto {
    flex: auto;
  }

  .lg-flex-none {
    flex: none;
  }

  .lg-flex-1 {
    flex: 1;
  }

  .lg-flex-2 {
    flex: 2;
  }

  .lg-flex-3 {
    flex: 3;
  }

  .lg-flex-4 {
    flex: 4;
  }

  .lg-flex-5 {
    flex: 5;
  }

  .lg-flex-6 {
    flex: 6;
  }

  .lg-flex-7 {
    flex: 7;
  }

  .lg-flex-8 {
    flex: 8;
  }

  .lg-flex-9 {
    flex: 9;
  }

  .lg-flex-10 {
    flex: 10;
  }

  /* flex item width */
  .lg-flex-width-1 {
    flex-basis: 1%;
  }

  .lg-flex-width-2 {
    flex-basis: 2%;
  }

  .lg-flex-width-3 {
    flex-basis: 3%;
  }

  .lg-flex-width-4 {
    flex-basis: 4%;
  }

  .lg-flex-width-5 {
    flex-basis: 5%;
  }

  .lg-flex-width-6 {
    flex-basis: 6%;
  }

  .lg-flex-width-7 {
    flex-basis: 7%;
  }

  .lg-flex-width-8 {
    flex-basis: 8%;
  }

  .lg-flex-width-9 {
    flex-basis: 9%;
  }

  .lg-flex-width-10 {
    flex-basis: 10%;
  }

  .lg-flex-width-11 {
    flex-basis: 11%;
  }

  .lg-flex-width-12 {
    flex-basis: 12%;
  }

  .lg-flex-width-13 {
    flex-basis: 13%;
  }

  .lg-flex-width-14 {
    flex-basis: 14%;
  }

  .lg-flex-width-15 {
    flex-basis: 15%;
  }

  .lg-flex-width-16 {
    flex-basis: 16%;
  }

  .lg-flex-width-17 {
    flex-basis: 17%;
  }

  .lg-flex-width-18 {
    flex-basis: 18%;
  }

  .lg-flex-width-19 {
    flex-basis: 19%;
  }

  .lg-flex-width-20 {
    flex-basis: 20%;
  }

  .lg-flex-width-21 {
    flex-basis: 21%;
  }

  .lg-flex-width-22 {
    flex-basis: 22%;
  }

  .lg-flex-width-23 {
    flex-basis: 23%;
  }

  .lg-flex-width-24 {
    flex-basis: 24%;
  }

  .lg-flex-width-25 {
    flex-basis: 25%;
  }

  .lg-flex-width-26 {
    flex-basis: 26%;
  }

  .lg-flex-width-27 {
    flex-basis: 27%;
  }

  .lg-flex-width-28 {
    flex-basis: 28%;
  }

  .lg-flex-width-29 {
    flex-basis: 29%;
  }

  .lg-flex-width-30 {
    flex-basis: 30%;
  }

  .lg-flex-width-31 {
    flex-basis: 31%;
  }

  .lg-flex-width-32 {
    flex-basis: 32%;
  }

  .lg-flex-width-33 {
    flex-basis: 33%;
  }

  .lg-flex-width-34 {
    flex-basis: 34%;
  }

  .lg-flex-width-35 {
    flex-basis: 35%;
  }

  .lg-flex-width-36 {
    flex-basis: 36%;
  }

  .lg-flex-width-37 {
    flex-basis: 37%;
  }

  .lg-flex-width-38 {
    flex-basis: 38%;
  }

  .lg-flex-width-39 {
    flex-basis: 39%;
  }

  .lg-flex-width-40 {
    flex-basis: 40%;
  }

  .lg-flex-width-41 {
    flex-basis: 41%;
  }

  .lg-flex-width-42 {
    flex-basis: 42%;
  }

  .lg-flex-width-43 {
    flex-basis: 43%;
  }

  .lg-flex-width-44 {
    flex-basis: 44%;
  }

  .lg-flex-width-45 {
    flex-basis: 45%;
  }

  .lg-flex-width-46 {
    flex-basis: 46%;
  }

  .lg-flex-width-47 {
    flex-basis: 47%;
  }

  .lg-flex-width-48 {
    flex-basis: 48%;
  }

  .lg-flex-width-49 {
    flex-basis: 49%;
  }

  .lg-flex-width-50 {
    flex-basis: 50%;
  }

  .lg-flex-width-51 {
    flex-basis: 51%;
  }

  .lg-flex-width-52 {
    flex-basis: 52%;
  }

  .lg-flex-width-53 {
    flex-basis: 53%;
  }

  .lg-flex-width-54 {
    flex-basis: 54%;
  }

  .lg-flex-width-55 {
    flex-basis: 55%;
  }

  .lg-flex-width-56 {
    flex-basis: 56%;
  }

  .lg-flex-width-57 {
    flex-basis: 57%;
  }

  .lg-flex-width-58 {
    flex-basis: 58%;
  }

  .lg-flex-width-59 {
    flex-basis: 59%;
  }

  .lg-flex-width-60 {
    flex-basis: 60%;
  }

  .lg-flex-width-61 {
    flex-basis: 61%;
  }

  .lg-flex-width-62 {
    flex-basis: 62%;
  }

  .lg-flex-width-63 {
    flex-basis: 63%;
  }

  .lg-flex-width-64 {
    flex-basis: 64%;
  }

  .lg-flex-width-65 {
    flex-basis: 65%;
  }

  .lg-flex-width-66 {
    flex-basis: 66%;
  }

  .lg-flex-width-67 {
    flex-basis: 67%;
  }

  .lg-flex-width-68 {
    flex-basis: 68%;
  }

  .lg-flex-width-69 {
    flex-basis: 69%;
  }

  .lg-flex-width-70 {
    flex-basis: 70%;
  }

  .lg-flex-width-71 {
    flex-basis: 71%;
  }

  .lg-flex-width-72 {
    flex-basis: 72%;
  }

  .lg-flex-width-73 {
    flex-basis: 73%;
  }

  .lg-flex-width-74 {
    flex-basis: 74%;
  }

  .lg-flex-width-75 {
    flex-basis: 75%;
  }

  .lg-flex-width-76 {
    flex-basis: 76%;
  }

  .lg-flex-width-77 {
    flex-basis: 77%;
  }

  .lg-flex-width-78 {
    flex-basis: 78%;
  }

  .lg-flex-width-79 {
    flex-basis: 79%;
  }

  .lg-flex-width-80 {
    flex-basis: 80%;
  }

  .lg-flex-width-81 {
    flex-basis: 81%;
  }

  .lg-flex-width-82 {
    flex-basis: 82%;
  }

  .lg-flex-width-83 {
    flex-basis: 83%;
  }

  .lg-flex-width-84 {
    flex-basis: 84%;
  }

  .lg-flex-width-85 {
    flex-basis: 85%;
  }

  .lg-flex-width-86 {
    flex-basis: 86%;
  }

  .lg-flex-width-87 {
    flex-basis: 87%;
  }

  .lg-flex-width-88 {
    flex-basis: 88%;
  }

  .lg-flex-width-89 {
    flex-basis: 89%;
  }

  .lg-flex-width-90 {
    flex-basis: 90%;
  }

  .lg-flex-width-91 {
    flex-basis: 91%;
  }

  .lg-flex-width-92 {
    flex-basis: 92%;
  }

  .lg-flex-width-93 {
    flex-basis: 93%;
  }

  .lg-flex-width-94 {
    flex-basis: 94%;
  }

  .lg-flex-width-95 {
    flex-basis: 95%;
  }

  .lg-flex-width-96 {
    flex-basis: 96%;
  }

  .lg-flex-width-97 {
    flex-basis: 97%;
  }

  .lg-flex-width-98 {
    flex-basis: 98%;
  }

  .lg-flex-width-99 {
    flex-basis: 99%;
  }

  .lg-flex-width-100 {
    flex-basis: 100%;
  }
}
/* XL Column Size */
@media (min-width: 1200px) {
  .xl-flex-container {
    display: flex;
  }

  .xl-flex-column {
    flex-direction: column;
  }

  .xl-flex-wrap {
    flex-wrap: wrap;
  }

  .xl-flex-top {
    align-items: flex-start;
  }

  .xl-flex-middle {
    align-items: center;
  }

  .xl-flex-bottom {
    align-items: flex-end;
  }

  .xl-flex-center {
    justify-content: center;
  }

  .xl-flex-right {
    justify-content: flex-end;
  }

  /* flex item 비율로 크기 설정 */
  .xl-flex-auto {
    flex: auto;
  }

  .xl-flex-none {
    flex: none;
  }

  .xl-flex-1 {
    flex: 1;
  }

  .xl-flex-2 {
    flex: 2;
  }

  .xl-flex-3 {
    flex: 3;
  }

  .xl-flex-4 {
    flex: 4;
  }

  .xl-flex-5 {
    flex: 5;
  }

  .xl-flex-6 {
    flex: 6;
  }

  .xl-flex-7 {
    flex: 7;
  }

  .xl-flex-8 {
    flex: 8;
  }

  .xl-flex-9 {
    flex: 9;
  }

  .xl-flex-10 {
    flex: 10;
  }

  /* flex item width */
  .xl-flex-width-1 {
    flex-basis: 1%;
  }

  .xl-flex-width-2 {
    flex-basis: 2%;
  }

  .xl-flex-width-3 {
    flex-basis: 3%;
  }

  .xl-flex-width-4 {
    flex-basis: 4%;
  }

  .xl-flex-width-5 {
    flex-basis: 5%;
  }

  .xl-flex-width-6 {
    flex-basis: 6%;
  }

  .xl-flex-width-7 {
    flex-basis: 7%;
  }

  .xl-flex-width-8 {
    flex-basis: 8%;
  }

  .xl-flex-width-9 {
    flex-basis: 9%;
  }

  .xl-flex-width-10 {
    flex-basis: 10%;
  }

  .xl-flex-width-11 {
    flex-basis: 11%;
  }

  .xl-flex-width-12 {
    flex-basis: 12%;
  }

  .xl-flex-width-13 {
    flex-basis: 13%;
  }

  .xl-flex-width-14 {
    flex-basis: 14%;
  }

  .xl-flex-width-15 {
    flex-basis: 15%;
  }

  .xl-flex-width-16 {
    flex-basis: 16%;
  }

  .xl-flex-width-17 {
    flex-basis: 17%;
  }

  .xl-flex-width-18 {
    flex-basis: 18%;
  }

  .xl-flex-width-19 {
    flex-basis: 19%;
  }

  .xl-flex-width-20 {
    flex-basis: 20%;
  }

  .xl-flex-width-21 {
    flex-basis: 21%;
  }

  .xl-flex-width-22 {
    flex-basis: 22%;
  }

  .xl-flex-width-23 {
    flex-basis: 23%;
  }

  .xl-flex-width-24 {
    flex-basis: 24%;
  }

  .xl-flex-width-25 {
    flex-basis: 25%;
  }

  .xl-flex-width-26 {
    flex-basis: 26%;
  }

  .xl-flex-width-27 {
    flex-basis: 27%;
  }

  .xl-flex-width-28 {
    flex-basis: 28%;
  }

  .xl-flex-width-29 {
    flex-basis: 29%;
  }

  .xl-flex-width-30 {
    flex-basis: 30%;
  }

  .xl-flex-width-31 {
    flex-basis: 31%;
  }

  .xl-flex-width-32 {
    flex-basis: 32%;
  }

  .xl-flex-width-33 {
    flex-basis: 33%;
  }

  .xl-flex-width-34 {
    flex-basis: 34%;
  }

  .xl-flex-width-35 {
    flex-basis: 35%;
  }

  .xl-flex-width-36 {
    flex-basis: 36%;
  }

  .xl-flex-width-37 {
    flex-basis: 37%;
  }

  .xl-flex-width-38 {
    flex-basis: 38%;
  }

  .xl-flex-width-39 {
    flex-basis: 39%;
  }

  .xl-flex-width-40 {
    flex-basis: 40%;
  }

  .xl-flex-width-41 {
    flex-basis: 41%;
  }

  .xl-flex-width-42 {
    flex-basis: 42%;
  }

  .xl-flex-width-43 {
    flex-basis: 43%;
  }

  .xl-flex-width-44 {
    flex-basis: 44%;
  }

  .xl-flex-width-45 {
    flex-basis: 45%;
  }

  .xl-flex-width-46 {
    flex-basis: 46%;
  }

  .xl-flex-width-47 {
    flex-basis: 47%;
  }

  .xl-flex-width-48 {
    flex-basis: 48%;
  }

  .xl-flex-width-49 {
    flex-basis: 49%;
  }

  .xl-flex-width-50 {
    flex-basis: 50%;
  }

  .xl-flex-width-51 {
    flex-basis: 51%;
  }

  .xl-flex-width-52 {
    flex-basis: 52%;
  }

  .xl-flex-width-53 {
    flex-basis: 53%;
  }

  .xl-flex-width-54 {
    flex-basis: 54%;
  }

  .xl-flex-width-55 {
    flex-basis: 55%;
  }

  .xl-flex-width-56 {
    flex-basis: 56%;
  }

  .xl-flex-width-57 {
    flex-basis: 57%;
  }

  .xl-flex-width-58 {
    flex-basis: 58%;
  }

  .xl-flex-width-59 {
    flex-basis: 59%;
  }

  .xl-flex-width-60 {
    flex-basis: 60%;
  }

  .xl-flex-width-61 {
    flex-basis: 61%;
  }

  .xl-flex-width-62 {
    flex-basis: 62%;
  }

  .xl-flex-width-63 {
    flex-basis: 63%;
  }

  .xl-flex-width-64 {
    flex-basis: 64%;
  }

  .xl-flex-width-65 {
    flex-basis: 65%;
  }

  .xl-flex-width-66 {
    flex-basis: 66%;
  }

  .xl-flex-width-67 {
    flex-basis: 67%;
  }

  .xl-flex-width-68 {
    flex-basis: 68%;
  }

  .xl-flex-width-69 {
    flex-basis: 69%;
  }

  .xl-flex-width-70 {
    flex-basis: 70%;
  }

  .xl-flex-width-71 {
    flex-basis: 71%;
  }

  .xl-flex-width-72 {
    flex-basis: 72%;
  }

  .xl-flex-width-73 {
    flex-basis: 73%;
  }

  .xl-flex-width-74 {
    flex-basis: 74%;
  }

  .xl-flex-width-75 {
    flex-basis: 75%;
  }

  .xl-flex-width-76 {
    flex-basis: 76%;
  }

  .xl-flex-width-77 {
    flex-basis: 77%;
  }

  .xl-flex-width-78 {
    flex-basis: 78%;
  }

  .xl-flex-width-79 {
    flex-basis: 79%;
  }

  .xl-flex-width-80 {
    flex-basis: 80%;
  }

  .xl-flex-width-81 {
    flex-basis: 81%;
  }

  .xl-flex-width-82 {
    flex-basis: 82%;
  }

  .xl-flex-width-83 {
    flex-basis: 83%;
  }

  .xl-flex-width-84 {
    flex-basis: 84%;
  }

  .xl-flex-width-85 {
    flex-basis: 85%;
  }

  .xl-flex-width-86 {
    flex-basis: 86%;
  }

  .xl-flex-width-87 {
    flex-basis: 87%;
  }

  .xl-flex-width-88 {
    flex-basis: 88%;
  }

  .xl-flex-width-89 {
    flex-basis: 89%;
  }

  .xl-flex-width-90 {
    flex-basis: 90%;
  }

  .xl-flex-width-91 {
    flex-basis: 91%;
  }

  .xl-flex-width-92 {
    flex-basis: 92%;
  }

  .xl-flex-width-93 {
    flex-basis: 93%;
  }

  .xl-flex-width-94 {
    flex-basis: 94%;
  }

  .xl-flex-width-95 {
    flex-basis: 95%;
  }

  .xl-flex-width-96 {
    flex-basis: 96%;
  }

  .xl-flex-width-97 {
    flex-basis: 97%;
  }

  .xl-flex-width-98 {
    flex-basis: 98%;
  }

  .xl-flex-width-99 {
    flex-basis: 99%;
  }

  .xl-flex-width-100 {
    flex-basis: 100%;
  }
}
/* XXL Column Size */
@media (min-width: 1400px) {
  .xxl-flex-container {
    display: flex;
  }

  .xxl-flex-column {
    flex-direction: column;
  }

  .xxl-flex-wrap {
    flex-wrap: wrap;
  }

  .xxl-flex-top {
    align-items: flex-start;
  }

  .xxl-flex-middle {
    align-items: center;
  }

  .xxl-flex-bottom {
    align-items: flex-end;
  }

  .xxl-flex-center {
    justify-content: center;
  }

  .xxl-flex-right {
    justify-content: flex-end;
  }

  /* flex item 비율로 크기 설정 */
  .xxl-flex-auto {
    flex: auto;
  }

  .xxl-flex-none {
    flex: none;
  }

  .xxl-flex-1 {
    flex: 1;
  }

  .xxl-flex-2 {
    flex: 2;
  }

  .xxl-flex-3 {
    flex: 3;
  }

  .xxl-flex-4 {
    flex: 4;
  }

  .xxl-flex-5 {
    flex: 5;
  }

  .xxl-flex-6 {
    flex: 6;
  }

  .xxl-flex-7 {
    flex: 7;
  }

  .xxl-flex-8 {
    flex: 8;
  }

  .xxl-flex-9 {
    flex: 9;
  }

  .xxl-flex-10 {
    flex: 10;
  }

  /* flex item width */
  .xxl-flex-width-1 {
    flex-basis: 1%;
  }

  .xxl-flex-width-2 {
    flex-basis: 2%;
  }

  .xxl-flex-width-3 {
    flex-basis: 3%;
  }

  .xxl-flex-width-4 {
    flex-basis: 4%;
  }

  .xxl-flex-width-5 {
    flex-basis: 5%;
  }

  .xxl-flex-width-6 {
    flex-basis: 6%;
  }

  .xxl-flex-width-7 {
    flex-basis: 7%;
  }

  .xxl-flex-width-8 {
    flex-basis: 8%;
  }

  .xxl-flex-width-9 {
    flex-basis: 9%;
  }

  .xxl-flex-width-10 {
    flex-basis: 10%;
  }

  .xxl-flex-width-11 {
    flex-basis: 11%;
  }

  .xxl-flex-width-12 {
    flex-basis: 12%;
  }

  .xxl-flex-width-13 {
    flex-basis: 13%;
  }

  .xxl-flex-width-14 {
    flex-basis: 14%;
  }

  .xxl-flex-width-15 {
    flex-basis: 15%;
  }

  .xxl-flex-width-16 {
    flex-basis: 16%;
  }

  .xxl-flex-width-17 {
    flex-basis: 17%;
  }

  .xxl-flex-width-18 {
    flex-basis: 18%;
  }

  .xxl-flex-width-19 {
    flex-basis: 19%;
  }

  .xxl-flex-width-20 {
    flex-basis: 20%;
  }

  .xxl-flex-width-21 {
    flex-basis: 21%;
  }

  .xxl-flex-width-22 {
    flex-basis: 22%;
  }

  .xxl-flex-width-23 {
    flex-basis: 23%;
  }

  .xxl-flex-width-24 {
    flex-basis: 24%;
  }

  .xxl-flex-width-25 {
    flex-basis: 25%;
  }

  .xxl-flex-width-26 {
    flex-basis: 26%;
  }

  .xxl-flex-width-27 {
    flex-basis: 27%;
  }

  .xxl-flex-width-28 {
    flex-basis: 28%;
  }

  .xxl-flex-width-29 {
    flex-basis: 29%;
  }

  .xxl-flex-width-30 {
    flex-basis: 30%;
  }

  .xxl-flex-width-31 {
    flex-basis: 31%;
  }

  .xxl-flex-width-32 {
    flex-basis: 32%;
  }

  .xxl-flex-width-33 {
    flex-basis: 33%;
  }

  .xxl-flex-width-34 {
    flex-basis: 34%;
  }

  .xxl-flex-width-35 {
    flex-basis: 35%;
  }

  .xxl-flex-width-36 {
    flex-basis: 36%;
  }

  .xxl-flex-width-37 {
    flex-basis: 37%;
  }

  .xxl-flex-width-38 {
    flex-basis: 38%;
  }

  .xxl-flex-width-39 {
    flex-basis: 39%;
  }

  .xxl-flex-width-40 {
    flex-basis: 40%;
  }

  .xxl-flex-width-41 {
    flex-basis: 41%;
  }

  .xxl-flex-width-42 {
    flex-basis: 42%;
  }

  .xxl-flex-width-43 {
    flex-basis: 43%;
  }

  .xxl-flex-width-44 {
    flex-basis: 44%;
  }

  .xxl-flex-width-45 {
    flex-basis: 45%;
  }

  .xxl-flex-width-46 {
    flex-basis: 46%;
  }

  .xxl-flex-width-47 {
    flex-basis: 47%;
  }

  .xxl-flex-width-48 {
    flex-basis: 48%;
  }

  .xxl-flex-width-49 {
    flex-basis: 49%;
  }

  .xxl-flex-width-50 {
    flex-basis: 50%;
  }

  .xxl-flex-width-51 {
    flex-basis: 51%;
  }

  .xxl-flex-width-52 {
    flex-basis: 52%;
  }

  .xxl-flex-width-53 {
    flex-basis: 53%;
  }

  .xxl-flex-width-54 {
    flex-basis: 54%;
  }

  .xxl-flex-width-55 {
    flex-basis: 55%;
  }

  .xxl-flex-width-56 {
    flex-basis: 56%;
  }

  .xxl-flex-width-57 {
    flex-basis: 57%;
  }

  .xxl-flex-width-58 {
    flex-basis: 58%;
  }

  .xxl-flex-width-59 {
    flex-basis: 59%;
  }

  .xxl-flex-width-60 {
    flex-basis: 60%;
  }

  .xxl-flex-width-61 {
    flex-basis: 61%;
  }

  .xxl-flex-width-62 {
    flex-basis: 62%;
  }

  .xxl-flex-width-63 {
    flex-basis: 63%;
  }

  .xxl-flex-width-64 {
    flex-basis: 64%;
  }

  .xxl-flex-width-65 {
    flex-basis: 65%;
  }

  .xxl-flex-width-66 {
    flex-basis: 66%;
  }

  .xxl-flex-width-67 {
    flex-basis: 67%;
  }

  .xxl-flex-width-68 {
    flex-basis: 68%;
  }

  .xxl-flex-width-69 {
    flex-basis: 69%;
  }

  .xxl-flex-width-70 {
    flex-basis: 70%;
  }

  .xxl-flex-width-71 {
    flex-basis: 71%;
  }

  .xxl-flex-width-72 {
    flex-basis: 72%;
  }

  .xxl-flex-width-73 {
    flex-basis: 73%;
  }

  .xxl-flex-width-74 {
    flex-basis: 74%;
  }

  .xxl-flex-width-75 {
    flex-basis: 75%;
  }

  .xxl-flex-width-76 {
    flex-basis: 76%;
  }

  .xxl-flex-width-77 {
    flex-basis: 77%;
  }

  .xxl-flex-width-78 {
    flex-basis: 78%;
  }

  .xxl-flex-width-79 {
    flex-basis: 79%;
  }

  .xxl-flex-width-80 {
    flex-basis: 80%;
  }

  .xxl-flex-width-81 {
    flex-basis: 81%;
  }

  .xxl-flex-width-82 {
    flex-basis: 82%;
  }

  .xxl-flex-width-83 {
    flex-basis: 83%;
  }

  .xxl-flex-width-84 {
    flex-basis: 84%;
  }

  .xxl-flex-width-85 {
    flex-basis: 85%;
  }

  .xxl-flex-width-86 {
    flex-basis: 86%;
  }

  .xxl-flex-width-87 {
    flex-basis: 87%;
  }

  .xxl-flex-width-88 {
    flex-basis: 88%;
  }

  .xxl-flex-width-89 {
    flex-basis: 89%;
  }

  .xxl-flex-width-90 {
    flex-basis: 90%;
  }

  .xxl-flex-width-91 {
    flex-basis: 91%;
  }

  .xxl-flex-width-92 {
    flex-basis: 92%;
  }

  .xxl-flex-width-93 {
    flex-basis: 93%;
  }

  .xxl-flex-width-94 {
    flex-basis: 94%;
  }

  .xxl-flex-width-95 {
    flex-basis: 95%;
  }

  .xxl-flex-width-96 {
    flex-basis: 96%;
  }

  .xxl-flex-width-97 {
    flex-basis: 97%;
  }

  .xxl-flex-width-98 {
    flex-basis: 98%;
  }

  .xxl-flex-width-99 {
    flex-basis: 99%;
  }

  .xxl-flex-width-100 {
    flex-basis: 100%;
  }
}