@charset "utf-8";

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

/* Grid */
.grid:after {display: block; content: ''; clear: both; }
.grid>.col {float: left; width: 100%; min-height: 1px; box-sizing: border-box}
.grid>.col.right {float: right;}
.grid.ib {font-size: 0;}
.grid.ib>.col {display: inline-block; float: none; vertical-align: top;}

/* 구터 넒이 */
.grid.grid_5 {margin-left: -5px; margin-right: -5px;}
.grid.grid_5>.col {padding: 0 5px;}

.grid.grid_10 {margin-left: -10px; margin-right: -10px;}
.grid.grid_10>.col {padding: 0 10px;}

.grid.grid_15 {margin-left: -15px; margin-right: -15px;}
.grid.grid_15>.col {padding: 0 15px;}

.grid.grid_20 {margin-left: -20px; margin-right: -20px;}
.grid.grid_20>.col {padding: 0 20px;}

.grid.grid_25 {margin-left: -25px; margin-right: -25px;}
.grid.grid_25>.col {padding: 0 25px;}

/* 너비 - 자신 칸수 */
.grid>.col.col_1 {width: 8.3333%;}
.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.6667%;}
.grid>.col.col_6 {width: 50%;}
.grid>.col.col_7 {width: 58.3333%;}
.grid>.col.col_8 {width: 66.6667%;}
.grid>.col.col_9 {width: 75%;}
.grid>.col.col_10 {width: 83.3334%;}
.grid>.col.col_11 {width: 91.6667%;}
.grid>.col.col_12 {width: 100%;}
.grid>.col.col_x5 {width: 20%;}

/* 태블릿 이하 */
@media screen and (max-width: 767px) {
    /* 구터 넒이 */
    .grid.grid_5 {margin-left: -2px; margin-right: -2px;}
    .grid.grid_5>.col {padding: 0 2px;}

    .grid.grid_10 {margin-left: -5px; margin-right: -5px;}
    .grid.grid_10>.col {padding: 0 5px;}

    .grid.grid_15 {margin-left: -7px; margin-right: -7px;}
    .grid.grid_15>.col {padding: 0 7px;}

    .grid.grid_20 {margin-left: -10px; margin-right: -10px;}
    .grid.grid_20>.col {padding: 0 10px;}


    /* 너비 - 자신 칸수 */
    .grid>.col.col_1,
    .grid>.col.col_2 {width: 25%;}
    .grid>.col.col_x5,
    .grid>.col.col_3 {width: 50%;}
    .grid>.col.col_4,
    .grid>.col.col_5,
    .grid>.col.col_6,
    .grid>.col.col_7,
    .grid>.col.col_8,
    .grid>.col.col_9,
    .grid>.col.col_10,
    .grid>.col.col_11,
    .grid>.col.col_12 {width: 100%;}
}