.clearfixafter:after {
    content: "";
    display: block;
    clear: both;
}

/*
======================
     GRID SYSTEM
======================
*/

.wrapper {
    max-width: 1180px;
    margin: 0 auto;
}

.wrapper:after {
    content: "";
    display: block;
    clear: both;
}

.row {margin: 0 -10px;}

.row:after{
    content: "";
    display: block;
    clear: both;
}

.fit {padding: 0;}

[class*="gnt-col-"] {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 10px;
}

.gnt-col-right {float: right;}

@media ( min-width: 1024px ) {
    .gnt-col-1  {width: 8.33%;}
    .gnt-col-2  {width: 16.65%;}
    .gnt-col-3  {width: 25%;}
    .gnt-col-4  {width: 33.33%;}
    .gnt-col-5  {width: 41.66%;}
    .gnt-col-6  {width: 50%;}
    .gnt-col-7  {width: 58.33%;}
    .gnt-col-8  {width: 66.66%;}
    .gnt-col-9  {width: 75%;}
    .gnt-col-10 {width: 83.33%;}
    .gnt-col-11 {width: 91.66%;}
    .gnt-col-12 {width: 100%;}
}


/*
======================
      TYPOGRAPHY
======================
*/

body {
    font-size: 14px;
    color: black;
}

/* 메인 텍스트 사이즈 */
.title-large-b {font-size: 24px; font-weight: 200; line-height: 1.2;}
.title-large-w {font-size: 24px; font-weight: 200; line-height: 1.2; color: #000;}

.title-small-b {font-size: 15px; font-weight: 600; line-height: 1.2;}
.title-small-w {font-size: 15px; font-weight: 600; line-height: 1.2; color: #000;}

.text-w {color: #000; font-size: 14px; line-height: 1.875; font-weight: 400; line-height: 2;}
.text-b {color: black; font-size: 14px; line-height: 1.875; font-weight: 400; line-height: 2;}
	
@media(min-width:1200px) {
	.title-large-b {font-size: 30px; font-weight: 200; line-height: 1.2;}
	.title-large-w {font-size: 30px; font-weight: 200; line-height: 1.2; color: #000;}

	.title-small-b {font-size: 16px; font-weight: 600; line-height: 1.2;}
	.title-small-w {font-size: 16px; font-weight: 600; line-height: 1.2; color: #000;}

	.text-w {color: #000; font-size: 15px; line-height: 1.875; font-weight: 400; line-height: 2;}
	.text-b {color: black; font-size: 15px; line-height: 1.875; font-weight: 400; line-height: 2;}

}

@media(max-width:768px) {
	.title-large-b {font-size: 28px; font-weight: 200; line-height: 1.2;}
	.title-large-w {font-size: 28px; font-weight: 200; line-height: 1.2; color: #000;}

	.title-small-b {font-size: 14px; font-weight: 600; line-height: 1.2;}
	.title-small-w {font-size: 14px; font-weight: 600; line-height: 1.2; color: #000;}

	.text-w {color: #000; font-size: 13px; line-height: 1.875; font-weight: 400; line-height: 2;}
	.text-b {color: black; font-size: 13px; line-height: 1.875; font-weight: 400; line-height: 2;}
}

@media (max-width:568px) {
	.title-large-b {font-size: 24px; font-weight: 200; line-height: 1.2;}
	.title-large-w {font-size: 24px; font-weight: 200; line-height: 1.2; color: #000;}

	.title-small-b {font-size: 12px; font-weight: 600; line-height: 1.2;}
	.title-small-w {font-size: 12px; font-weight: 600; line-height: 1.2; color: #000;}

	.text-w {color: #000; font-size: 11px; line-height: 1.875; font-weight: 400; line-height: 2;}
	.text-b {color: black; font-size: 11px; line-height: 1.875; font-weight: 400; line-height: 2;}
}
/* 메인 텍스트 사이즈 */

/*
======================
    BUTTON DESIGN
======================
*/

[class*="btn-"] {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    padding: 8px 25px;
    border: 1px solid black;
    box-sizing: border-box;
}

.btn-w {border: 1px solid white; color: white;}
/*
.btn-w:hover {background-color: black; color: white;}
.btn-b:hover {background-color: white; color: black;}*/



/*
======================
      TRANSITION
======================
*/

.fade {
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}