@charset "EUC-KR";

/* gap */
.gap-global{
	gap: var(--gap-global) !important;
}
.gap-global-sm{
	gap: var(--gap-global-sm) !important;
}
.gap-global-lg {
    gap: var(--gap-global-lg);
}
.gap-global-xl {
    gap: var(--gap-global-xl);
}
.gap-none {
    gap:0 !important;
}
.gap-1 {
	gap: 0.1em;
}
.gap-2 {
	gap: 0.2em;
}
.gap-3 {
	gap: 0.3em;
}
.gap-4 {
	gap: 0.4em;
}
.gap-5 {
	gap: 0.5em;
}

/* FLEX */
.d-inline-flex{
	display: inline-flex;
}
.d-flex {
	display: flex;
}
.flex-d-row {
	flex-direction: row !important;
}
.flex-d-col {
	flex-direction: column !important;
}
.flex-d-row-reverse {
	flex-direction: row-reverse !important;
}
.flex-d-col-reverse {
	flex-direction: column-reverse !important;
}
.flex-justify-center{
	justify-content: center !important;
}
.flex-justify-start{
	justify-content: flex-start !important; 
}
.flex-justify-end{
	justify-content: flex-end!important;
}
.flex-justify-space-between{
	justify-content: space-between !important;
}
.flex-justify-space-around{
	justify-content: space-around !important;
}
.flex-align-center{
	align-items: center !important;
}
.flex-align-start{
	align-items: flex-start !important;
}
.flex-align-end{
	align-items: flex-end !important;
}
.flex-wrap-wrap{
	flex-wrap: wrap !important;
}
.flex-wrap-nowrap{
	flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}
.flex-stack {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* GRID */
.grid-container {
	display: grid;
	gap: var(--gap-global);
}
.grid-container.col-12 {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.grid-container.col-6 {
	grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr;
}
.grid-container.col-5 {
	grid-template-columns: 2.4fr 2.4fr 2.4fr 2.4fr 2.4fr;
}
.grid-container.col-4 {
	grid-template-columns: 3fr 3fr 3fr 3fr;
}
.grid-container.col-3 {
	grid-template-columns: 4fr 4fr 4fr;
}
.grid-container.col-2 {
	grid-template-columns: 6fr 6fr;
}
.grid-container.col-1 {
	grid-template-columns: 12fr;
}
/* ¹ÝÀÀÇü */
@media (min-width: 1200px) and (max-width: 1500px) {
    .grid-container.col-5 {
        grid-template-columns: 3fr 3fr 3fr 3fr;
    }
}
@media (min-width: 930px) and (max-width: 1200px) {
    .grid-container.col-5 {
        grid-template-columns: 4fr 4fr 4fr;
    }
}
@media (min-width: 550px) and (max-width: 930px) {
    .grid-container.col-5 {
        grid-template-columns: 6fr 6fr;
    }
}
@media (min-width: 360px) and (max-width: 550px) {
    .grid-container.col-5 {
        grid-template-columns: 12fr;
    }
}
@media (min-width: 1024px) and (max-width: 1366px) {
	.grid-container.col-12 {
		grid-template-columns: 3fr 3fr 3fr 3fr;
	}
	.grid-container.col-6 {
		grid-template-columns: 3fr 3fr 3fr 3fr;
	}
	.grid-container.col-4 {
		grid-template-columns: 3fr 3fr 3fr 3fr;
	}
	.grid-container.col-3 {
		grid-template-columns: 4fr 4fr 4fr;
	}
	.grid-container.col-2 {
		grid-template-columns: 6fr 6fr;
	}
	.grid-container.col-1 {
		grid-template-columns: 12fr;
	}
}
@media (min-width: 720px) and (max-width: 1024px) {
	.grid-container.col-12 {
		grid-template-columns: 6fr 6fr;
	}
	.grid-container.col-6 {
		grid-template-columns: 6fr 6fr;
	}
	.grid-container.col-4 {
		grid-template-columns: 6fr 6fr;
	}
	.grid-container.col-3 {
		grid-template-columns: 6fr 6fr;
	}
	.grid-container.col-2 {
		grid-template-columns: 6fr 6fr;
	}
	.grid-container.col-1 {
		grid-template-columns: 12fr;
	}
}
@media (max-width: 720px) {
	.grid-container.col-12 {
		grid-template-columns: 12fr;
	}
	.grid-container.col-6 {
		grid-template-columns: 12fr;
	}
	.grid-container.col-4 {
		grid-template-columns: 12fr;
	}
	.grid-container.col-3 {
		grid-template-columns: 12fr;
	}
	.grid-container.col-2 {
		grid-template-columns: 12fr;
	}
	.grid-container.col-1 {
		grid-template-columns: 12fr;
	}
}