@charset "utf-8";

/*-------------------------------------------------------------------
	파일정의 : 그리드 스타일
	작성날짜 : 2019-10-22 장병주
	참고사항 : 그리드 시스템 정의
	속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/* Grid */
.grid {
  margin-right: -30px;
}
.grid:after {
  display: block;
  content: "";
  clear: both;
}

.grid > .col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-right: 30px;
  box-sizing: border-box;
}
.grid.no_gap {
  margin-right: 0;
}
.grid.no_gap > .col {
  padding-right: 0;
}
.grid.grid_4 {
  margin-left: -4px;
  margin-right: -4px;
}
.grid.grid_4 > .col {
  padding-left: 4px;
  padding-right: 4px;
}
.grid > .col.right {
  float: right;
}
.grid.ib {
  font-size: 0;
}
.grid.ib > .col {
  display: inline-block;
  float: none;
}
.grid.grid_custom.type_1 .main_col {
  max-width: 930px;
}
.grid.grid_custom.type_1 .sub_col {
  max-width: 310px;
}
.grid.grid_custom.type_2 .main_col {
  max-width: 960px;
}
.grid.grid_custom.type_2 .sub_col {
  max-width: 280px;
}
.grid.grid_custom.type_3 .main_col {
  max-width: 806px;
}
.grid.grid_custom.type_3 .sub_col {
  max-width: 434px;
}
.grid.grid_custom.type_3 .main_col.half {
  max-width: 403px;
}
.grid.grid_custom.type_3 .main_col.half + .sub_col {
  width: 100%;
  max-width: 100%;
  margin-left: -403px;
  padding-left: 403px;
  box-sizing: border-box;
}
.grid.grid_custom.type_4 .main_col {
  max-width: 836px;
}
.grid.grid_custom.type_4 .sub_col {
  max-width: 374px;
}
.grid.grid_custom.type_5 .main_col {
  width: 792px;
}
.grid.grid_custom.type_5 .sub_col {
  width: 448px;
}
.grid.grid_custom.type_6 .main_col {
  width: 910px;
}
.grid.grid_custom.type_6 .sub_col {
  width: 330px;
}
/*flex*/
.grid.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid.flex .col {
  float: none !important;
  flex: 1;
  padding: 0 !important;
}

.grid .col.flex_2 {
  flex: 2;
}

/* 너비 - 자신 칸수 */
.grid > .col.col_1 {
  width: 8.33333333%;
}

.grid > .col.col_2 {
  width: 16.6666%;
}

.grid > .col.col_3 {
  width: 25%;
}

.grid > .col.col_4 {
  width: 33.3333%;
}

.grid > .col.col_5 {
  width: 41.66666667%;
}

.grid > .col.col_6 {
  width: 50%;
}

.grid > .col.col_7 {
  width: 58.33333333%;
}

.grid > .col.col_8 {
  width: 66.66666667%;
}

.grid > .col.col_9 {
  width: 75%;
}

.grid > .col.col_10 {
  width: 83.33333334%;
}

.grid > .col.col_11 {
  width: 91.66666667%;
}

.grid > .col.col_12 {
  width: 100%;
}

.grid > .col.col_x5 {
  width: 20%;
}