@charset "utf-8";

/* Grid Layout Class */
*{
    box-sizing: border-box;/*크기유지(보더,패딩포함)*/
}

/* 12개 컬럼 개수별 %셋팅 class */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.col-np-1 {width: 8.33%;}
.col-np-2 {width: 16.66%;}
.col-np-3 {width: 25%;}
.col-np-4 {width: 33.33%;}
.col-np-5 {width: 41.66%;}
.col-np-6 {width: 50%;}
.col-np-7 {width: 58.33%;}
.col-np-8 {width: 66.66%;}
.col-np-9 {width: 75%;}
.col-np-10 {width: 83.33%;}
.col-np-11 {width: 91.66%;}
.col-np-12 {width: 100%;}

/*
    *= 은 문자열이 있기만 하면 모두 찾음
    ^= 시작하는 문자열
    $= 끝나는 문자열
*/
[class*="col-"] {
    float: left;
    padding: 12px;
    height: 100%;
    /*border: 1px solid red;*/
}
[class*="col-np"] {
    padding: 0px;
}

/*float해제 class*/
.clb::after{
    content: "";
    display: block;
    clear: both;
}