/* 폰트 크기 */
.fs-xs 	{font-size: var(--font-size-xs);}
.fs-sm 	{font-size: var(--font-size-sm);}
.fs-md 	{font-size: var(--font-size-md);}
.fs-lg 	{font-size: var(--font-size-lg);}
.fs-xl 	{font-size: var(--font-size-xl);}
.fs-2xl {font-size: var(--font-size-2xl);}
.fs-3xl {font-size: var(--font-size-3xl);}
.fs-4xl {font-size: var(--font-size-4xl);}
.fs-5xl {font-size: var(--font-size-5xl);}

/* 폰트 굵기 */
.fontMedium {font-weight: 400;}
.semiBold {font-weight: 600;}
.bold {font-weight: 700;}
.bolder {font-weight: 900;}

/* 폰트 위치 */
.tal {text-align: left;}
.tac {text-align: center;}
.tar {text-align: right;}

/* 요소간 간격 */
.gap-0 	{gap: 0px;}
.gap-4 	{gap: 4px;}
.gap-8 	{gap: 8px;}
.gap-10	{gap: 10px;}
.gap-14 {gap: 14px;}
.gap-16 {gap: 16px;}
.gap-24 {gap: 24px;}
.gap-32 {gap: 32px;}
.gap-40 {gap: 40px;}
.gap-48 {gap: 48px;}

/* Display & Flexbox */
.flex-between {display: flex; justify-content: space-between;}
.flex-around 	{display: flex; justify-content: space-around;}
.flex-evenly 	{display: flex; justify-content: space-evenly;}
.flex-start 	{display: flex; justify-content: start !important;}

/* align items */
.items-start 	{ align-items: flex-start;}
.items-center { align-items: center;}
.items-end    { align-items: flex-end;}

/* Display & Grid */
.grid-1col 	{display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)) !important;}
.grid-2col 	{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
.grid-3col 	{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;}
.grid-4col 	{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;}
.grid-5col 	{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) !important;}
.grid-6col 	{display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) !important;}
.grid-7col 	{display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) !important;}
.grid-8col 	{display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) !important;}
.grid-10col {display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)) !important;}
.grid-12col {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) !important;}

/* padding pixel */
.pd0 {padding: 0 !important;}
.pd2 {padding: 2px;}
.pd10 {padding: 10px;}
.pd15 {padding: 15px;}
.pd16 {padding: 16px;}
.pd20 {padding: 20px;}
.pd24 {padding: 24px;}
.pd30 {padding: 30px;}
.pd40 {padding: 40px;}
.pd50 {padding: 50px;}
.pd60 {padding: 60px;}
.pd70 {padding: 70px;}
.pd80 {padding: 80px;}
.pd90 {padding: 90px;}
.pd100 {padding: 100px;}

.pt0 {padding-top: 0px;}
.pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}
.pt25 {padding-top: 25px;}
.pt30 {padding-top: 30px;}
.pt35 {padding-top: 35px;}
.pt40 {padding-top: 40px;}
.pt45 {padding-top: 45px;}
.pt50 {padding-top: 50px;}
.pt55 {padding-top: 55px;}
.pt60 {padding-top: 60px;}
.pt65 {padding-top: 65px;}
.pt70 {padding-top: 70px;}
.pt75 {padding-top: 75px;}
.pt80 {padding-top: 80px;}
.pt85 {padding-top: 85px;}
.pt90 {padding-top: 90px;}
.pt95 {padding-top: 95px;}
.pt100 {padding-top: 100px;}

.pb0 {padding-bottom: 0px;}
.pb5 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}
.pb25 {padding-bottom: 25px;}
.pb30 {padding-bottom: 30px;}
.pb35 {padding-bottom: 35px;}
.pb40 {padding-bottom: 40px;}
.pb45 {padding-bottom: 45px;}
.pb50 {padding-bottom: 50px;}
.pb55 {padding-bottom: 55px;}
.pb60 {padding-bottom: 60px;}
.pb65 {padding-bottom: 65px;}
.pb70 {padding-bottom: 70px;}
.pb75 {padding-bottom: 75px;}
.pb80 {padding-bottom: 80px;}
.pb85 {padding-bottom: 85px;}
.pb90 {padding-bottom: 90px;}
.pb95 {padding-bottom: 95px;}
.pb100 {padding-bottom: 100px;}

/* margin pixel */
.mt0 {margin-top: 0px;}
.mt5 {margin-top: 5px;}
.mt8 {margin-top: 8px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt35 {margin-top: 35px;}
.mt40 {margin-top: 40px;}
.mt45 {margin-top: 45px;}
.mt50 {margin-top: 50px;}
.mt55 {margin-top: 55px;}
.mt60 {margin-top: 60px;}
.mt65 {margin-top: 65px;}
.mt70 {margin-top: 70px;}
.mt75 {margin-top: 75px;}
.mt80 {margin-top: 80px;}
.mt85 {margin-top: 85px;}
.mt90 {margin-top: 90px;}
.mt95 {margin-top: 95px;}
.mt100 {margin-top: 100px;}

.mb0 {margin-bottom: 0px !important;}
.mb4 {margin-bottom: 4px;}
.mb5 {margin-bottom: 5px;}
.mb8 {margin-bottom: 8px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb16 {margin-bottom: 16px;}
.mb20 {margin-bottom: 20px;}
.mb24 {margin-bottom: 24px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb35 {margin-bottom: 35px;}
.mb40 {margin-bottom: 40px;}
.mb48 {margin-bottom: 48px;}
.mb45 {margin-bottom: 45px;}
.mb50 {margin-bottom: 50px;}
.mb55 {margin-bottom: 55px;}
.mb60 {margin-bottom: 60px;}
.mb65 {margin-bottom: 65px;}
.mb70 {margin-bottom: 70px;}
.mb75 {margin-bottom: 75px;}
.mb80 {margin-bottom: 80px;}
.mb85 {margin-bottom: 85px;}
.mb90 {margin-bottom: 90px;}
.mb95 {margin-bottom: 95px;}
.mb100 {margin-bottom: 100px;}

/* width % */
.w0 {width: 0%;}
.w5p {width: 5%;}
.w10p {width: 10%;}
.w15p {width: 15%;}
.w20p {width: 20%;}
.w25p {width: 25%;}
.w30p {width: 30%;}
.w35p {width: 35%;}
.w40p {width: 40%;}
.w45p {width: 45%;}
.w50p {width: 50%;}
.w55p {width: 55%;}
.w60p {width: 60%;}
.w65p {width: 65%;}
.w70p {width: 70%;}
.w75p {width: 75%;}
.w80p {width: 80%;}
.w85p {width: 85%;}
.w90p {width: 90%;}
.w95p {width: 95%;}
.w100p {width: 100%;}

/* height % */
.h0 {height: 0%;}
.h5p {height: 5%;}
.h10p {height: 10%;}
.h15p {height: 15%;}
.h20p {height: 20%;}
.h25p {height: 25%;}
.h30p {height: 30%;}
.h35p {height: 35%;}
.h40p {height: 40%;}
.h45p {height: 45%;}
.h50p {height: 50%;}
.h55p {height: 55%;}
.h60p {height: 60%;}
.h65p {height: 65%;}
.h70p {height: 70%;}
.h75p {height: 75%;}
.h80p {height: 80%;}
.h85p {height: 85%;}
.h90p {height: 90%;}
.h95p {height: 95%;}
.h100p {height: 100%}