@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('../font/PretendardVariable.woff2') format('woff2-variations');
}

h1 { font-size: 2.2rem; }
h2 { font-size: 2.0rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.6rem; }
h5 { font-size: 1.4rem; }
h6 { font-size: 1.2rem; }

table { width: 100%; }

/* display */
.hide { display: none; }
.dp-blck { display: block; }
.dp-inln { display: inline; }
.dp-inbl { display: inline-block; }
.dp-flex-row { display: flex; flex-direction: row; }            /* flex, direction:row */
.dp-flex-col { display: flex; flex-direction: column; }         /* flex, direction:column */
.dp-infl-row { display: inline-flex; flex-direction: row; }     /* inline-flex, direction:row */
.dp-infl-col { display: inline-flex; flex-direction: column; }  /* inline-flex, direction:column */

/* normal-align */
.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }

/* flex-justify-content */
.fj-st { justify-content: flex-start; }         /* flex, forward-align:start */
.fj-ed { justify-content: flex-end; }           /* flex, forward-align:end */
.fj-cr { justify-content: center; }             /* flex, forward-align:center */
.fj-sb { justify-content: space-between; }      /* flex, forward-align:between */
.fj-sa { justify-content: space-around; }       /* flex, forward-align:around */
.fj-se { justify-content: space-evenly; }       /* flex, forward-align:evenly */

/* flex-align-items */
.fa-st { align-items: flex-start; }             /* flex, cross-align:start */
.fa-ed { align-items: flex-end; }               /* flex, cross-align:end */
.fa-cr { align-items: center; }                 /* flex, cross-align:center */
.fa-bl { align-items: baseline; }               /* flex, cross-align:baseline */
.fa-sh { align-items: stretch; }                /* flex, cross-align:stretch */

/* flex-grow */
.fg1 { flex-grow: 1; }
.fg2 { flex-grow: 2; }
.fg3 { flex-grow: 3; }
.fg4 { flex-grow: 4; }
.fg5 { flex-grow: 5; }
.fg6 { flex-grow: 6; }
.fg7 { flex-grow: 7; }
.fg8 { flex-grow: 8; }
.fg9 { flex-grow: 9; }

/*  */
.flx-strch {
    align-items: stretch;
}

/* font-size */
.fs-m5 { font-size: 0.5rem; }
.fs-m4 { font-size: 0.6rem; }
.fs-m3 { font-size: 0.7rem; }
.fs-m2 { font-size: 0.8rem; }
.fs-m1 { font-size: 0.9rem; }
.fs-p1 { font-size: 1.1rem; }
.fs-p2 { font-size: 1.2rem; }
.fs-p3 { font-size: 1.3rem; }
.fs-p4 { font-size: 1.4rem; }
.fs-p5 { font-size: 1.5rem; }

/* font-weight */
.fw100 { font-weight: 100; }
.fw200 { font-weight: 200; }
.fw300 { font-weight: 300; }
.fw400 { font-weight: 400; }
.fw500 { font-weight: 500; }
.fw600 { font-weight: 600; }
.fw700 { font-weight: 700; }
.fw800 { font-weight: 800; }
.fw900 { font-weight: 900; }

/* margin */
.m5 { margin: 5px !important; }
.m10 { margin: 10px !important; }
.m20 { margin: 20px !important; }
.m30 { margin: 30px !important; }
.m40 { margin: 40px !important; }
.m50 { margin: 50px !important; }
.m60 { margin: 60px !important; }
.m70 { margin: 70px !important; }
.m80 { margin: 80px !important; }
.m90 { margin: 90px !important; }
.m100 { margin: 100px !important; }

/* margin-left */
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }
.ml60 { margin-left: 60px !important; }
.ml70 { margin-left: 70px !important; }
.ml80 { margin-left: 80px !important; }
.ml90 { margin-left: 90px !important; }
.ml100 { margin-left: 100px !important; }

/* margin-right */
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }
.mr60 { margin-right: 60px !important; }
.mr70 { margin-right: 70px !important; }
.mr80 { margin-right: 80px !important; }
.mr90 { margin-right: 90px !important; }
.mr100 { margin-right: 100px !important; }

/* margin-top */
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt80 { margin-top: 80px !important; }
.mt90 { margin-top: 90px !important; }
.mt100 { margin-top: 100px !important; }

/* margin-bottom */
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb100 { margin-bottom: 100px !important; }

/* padding */
.p5 { padding: 5px !important; }
.p10 { padding: 10px !important; }
.p20 { padding: 20px !important; }
.p30 { padding: 30px !important; }
.p40 { padding: 40px !important; }
.p50 { padding: 50px !important; }
.p60 { padding: 60px !important; }
.p70 { padding: 70px !important; }
.p80 { padding: 80px !important; }
.p90 { padding: 90px !important; }
.p100 { padding: 100px !important; }

/* padding-left */
.pl5 { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pl40 { padding-left: 40px !important; }
.pl50 { padding-left: 50px !important; }
.pl60 { padding-left: 60px !important; }
.pl70 { padding-left: 70px !important; }
.pl80 { padding-left: 80px !important; }
.pl90 { padding-left: 90px !important; }
.pl100 { padding-left: 100px !important; }

/* padding-right */
.pr5 { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }
.pr40 { padding-right: 40px !important; }
.pr50 { padding-right: 50px !important; }
.pr60 { padding-right: 60px !important; }
.pr70 { padding-right: 70px !important; }
.pr80 { padding-right: 80px !important; }
.pr90 { padding-right: 90px !important; }
.pr100 { padding-right: 100px !important; }

/* padding-top */
.pt5 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }
.pt50 { padding-top: 50px !important; }
.pt60 { padding-top: 60px !important; }
.pt70 { padding-top: 70px !important; }
.pt80 { padding-top: 80px !important; }
.pt90 { padding-top: 90px !important; }
.pt100 { padding-top: 100px !important; }

/* padding-bottom */
.pb5 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb70 { padding-bottom: 70px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb90 { padding-bottom: 90px !important; }
.pb100 { padding-bottom: 100px !important; }

/* width */
/* rate */
.w100p { width: 100% !important; }
.w90p { width: 90% !important; }
.w80p { width: 80% !important; }
.w70p { width: 70% !important; }
.w60p { width: 60% !important; }
.w50p { width: 50% !important; }
.w50p { width: 40% !important; }
.w35p { width: 35% !important; }
.w33p { width: 34% !important; }
.w33p { width: 33% !important; }
.w33p { width: 30% !important; }
.w25p { width: 25% !important; }
.w20p { width: 20% !important; }
.w15p { width: 15% !important; }
.w10p { width: 10% !important; }

/* pixel */
.w5 { width: 5px !important; }
.w10 { width: 10px !important; }
.w20 { width: 20px !important; }
.w30 { width: 30px !important; }
.w40 { width: 40px !important; }
.w50 { width: 50px !important; }
.w60 { width: 60px !important; }
.w70 { width: 70px !important; }
.w80 { width: 80px !important; }
.w90 { width: 90px !important; }
.w100 { width: 100px !important; }
.w150 { width: 150px !important; }
.w200 { width: 200px !important; }
.w250 { width: 250px !important; }
.w300 { width: 300px !important; }
.w350 { width: 350px !important; }
.w400 { width: 400px !important; }
.w450 { width: 450px !important; }
.w500 { width: 500px !important; }
.w550 { width: 550px !important; }
.w600 { width: 600px !important; }
.w650 { width: 650px !important; }
.w700 { width: 700px !important; }
.w750 { width: 750px !important; }
.w800 { width: 800px !important; }

/* height */
.h100p { height: 100% !important; }
.h5 { height: 5px !important; }
.h10 { height: 10px !important; }
.h20 { height: 20px !important; }
.h30 { height: 30px !important; }
.h40 { height: 40px !important; }
.h50 { height: 50px !important; }
.h60 { height: 60px !important; }
.h70 { height: 70px !important; }
.h80 { height: 80px !important; }
.h90 { height: 90px !important; }
.h100 { height: 100px !important; }
.h150 { height: 150px !important; }
.h200 { height: 200px !important; }
.h250 { height: 250px !important; }
.h300 { height: 300px !important; }
.h350 { height: 350px !important; }
.h400 { height: 400px !important; }
.h450 { height: 450px !important; }
.h500 { height: 500px !important; }
.h550 { height: 550px !important; }
.h600 { height: 600px !important; }
.h650 { height: 650px !important; }
.h700 { height: 700px !important; }
.h750 { height: 750px !important; }
.h800 { height: 800px !important; }