@font-face {
    font-family: 'NotoSerifKR';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    outline: none;
}

html{
    background-color:#ffffff;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

body {
    line-height: 1;
    font-family: 'NotoSerifKR', Arial, "Helvetica Neue", Helvetica, sans-serif;
    ;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

input,
button {
    border-radius: 0;
    overflow: visible;
}

select {
    word-wrap: normal;
}

button,
select {
    text-transform: none;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button,
input {
    overflow: visible;
}

*,
::after,
::before {
    box-sizing: border-box;
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

sub,
sup {
    font-size: 80%;
    line-height: 1;
    vertical-align: sub
}

sup {
    vertical-align: super
}

button {
    margin: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0
}


/**************************
border style and width
***************************/

.ba {
    border-style: solid !important;
    border-width: 1px !important
}

.bt {
    border-top-style: solid !important;
    border-top-width: 1px !important
}

.br {
    border-right-style: solid !important;
    border-right-width: 1px !important
}

.bb {
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important
}

.bl {
    border-left-style: solid !important;
    border-left-width: 1px !important
}

.bx {
    border-left-style: solid !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-left-width: 1px !important
}

.by {
    border-top-style: solid !important;
    border-bottom-style: solid !important;
    border-top-width: 1px !important;
    border-bottom-width: 1px !important
}


/*******************
border size
*******************/

.baw0 {
    border-width: 0 !important
}

.baw1 {
    border-width: 1px !important
}

.baw2 {
    border-width: 2px !important
}

.baw3 {
    border-width: 4px !important
}

.btw0 {
    border-top-width: 0 !important
}

.btw1 {
    border-top-width: 1px !important
}

.btw2 {
    border-top-width: 2px !important
}

.btw3 {
    border-top-width: 4px !important
}

.brw0 {
    border-right-width: 0 !important
}

.brw1 {
    border-right-width: 1px !important
}

.brw2 {
    border-right-width: 2px !important
}

.brw3 {
    border-right-width: 4px !important
}

.bbw0 {
    border-bottom-width: 0 !important
}

.bbw1 {
    border-bottom-width: 1px !important
}

.bbw2 {
    border-bottom-width: 2px !important
}

.bbw3 {
    border-bottom-width: 4px !important
}

.blw0 {
    border-left-width: 0 !important
}

.blw0 {
    border-left-width: 0 !important
}

.blw1 {
    border-left-width: 1px !important
}

.blw2 {
    border-left-width: 2px !important
}

.blw3 {
    border-left-width: 4px !important
}

.byw0 {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important
}

.byw1 {
    border-top-width: 1px !important;
    border-bottom-width: 1px !important
}

.byw2 {
    border-top-width: 2px !important;
    border-bottom-width: 2px !important
}

.byw3 {
    border-top-width: 4px !important;
    border-bottom-width: 4px !important
}

.bxw0 {
    border-right-width: 0 !important;
    border-left-width: 0 !important
}

.bxw1 {
    border-right-width: 1px !important;
    border-left-width: 1px !important
}

.bxw2 {
    border-right-width: 2px !important;
    border-left-width: 2px !important
}

.bxw3 {
    border-right-width: 4px !important;
    border-left-width: 4px !important
}

/*******************
border style
*******************/

.bas-solid {
    border-style: solid !important
}

.bas-dashed {
    border-style: dashed !important
}

.bts-solid {
    border-top-style: solid !important
}

.bts-dashed {
    border-top-style: dashed !important
}

.brs-solid {
    border-right-style: solid !important
}

.brs-dashed {
    border-right-style: dashed !important
}

.bbs-solid {
    border-bottom-style: solid !important
}

.bbs-dashed {
    border-bottom-style: dashed !important
}

.bls-solid {
    border-left-style: solid !important
}

.bls-dashed {
    border-left-style: dashed !important
}

/*******************
border radius
*******************/

.bar-sm {
    border-radius: 3px !important
}

.bar-md {
    border-radius: 5px !important
}

.bar-lg {
    border-radius: 7px !important
}

.bar-circle {
    border-radius: 100% !important
}

.bar-pill {
    border-radius: 1000px !important
}

.btlr0 {
    border-top-left-radius: 0 !important
}

.btlr-sm {
    border-top-left-radius: 3px !important
}

.btlr-md {
    border-top-left-radius: 5px !important
}

.btlr-lg {
    border-top-left-radius: 7px !important
}

.btrr0 {
    border-top-right-radius: 0 !important
}

.btrr-sm {
    border-top-right-radius: 3px !important
}

.btrr-md {
    border-top-right-radius: 5px !important
}

.btrr-lg {
    border-top-right-radius: 7px !important
}

.bblr0 {
    border-bottom-left-radius: 0 !important
}

.bblr-sm {
    border-bottom-left-radius: 3px !important
}

.bblr-md {
    border-bottom-left-radius: 5px !important
}

.bblr-lg {
    border-bottom-left-radius: 7px !important
}

.bbrr0 {
    border-bottom-right-radius: 0 !important
}

.bbrr-sm {
    border-bottom-right-radius: 3px !important
}

.bbrr-md {
    border-bottom-right-radius: 5px !important
}

.bbrr-lg {
    border-bottom-right-radius: 7px !important
}

.btr0 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important
}

.btr-sm {
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important
}

.btr-md {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important
}

.btr-lg {
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important
}

.brr0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.brr-sm {
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important
}

.brr-md {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important
}

.brr-lg {
    border-top-right-radius: 7px !important;
    border-bottom-right-radius: 7px !important
}

.bbr0 {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.bbr-sm {
    border-bottom-left-radius: 3px !important;
    border-bottom-right-radius: 3px !important
}

.bbr-md {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important
}

.bbr-lg {
    border-bottom-left-radius: 7px !important;
    border-bottom-right-radius: 7px !important
}

.blr0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important
}

.blr-sm {
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important
}

.blr-md {
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important
}

.blr-lg {
    border-top-left-radius: 7px !important;
    border-bottom-left-radius: 7px !important
}

.bar0 {
    border-radius: 0 !important
}


/*******************
flex & justify-content
*******************/

.fd-row {
    flex-direction: row !important
}

.fd-row-reverse {
    flex-direction: row-reverse !important
}

.fd-column {
    flex-direction: column !important
}

.fd-column-reverse {
    flex-direction: column-reverse !important
}

.fw-wrap {
    flex-wrap: wrap !important
}

.fw-reverse {
    flex-wrap: wrap-reverse !important
}

.fw-nowrap {
    flex-wrap: nowrap !important
}

.ff-row-wrap {
    flex-flow: row wrap !important
}

.ff-row-nowrap {
    flex-flow: row nowrap !important
}

.ff-row-reverse-wrap {
    flex-flow: row-reverse wrap !important
}

.ff-row-reverse-nowrap {
    flex-flow: row-reverse nowrap !important
}

.ff-column-wrap {
    flex-flow: column wrap !important
}

.ff-column-nowrap {
    flex-flow: column nowrap !important
}

.ff-column-reverse-wrap {
    flex-flow: column-reverse wrap !important
}

.ff-column-reverse-nowrap {
    flex-flow: column-reverse nowrap !important
}

.jc-center {
    justify-content: center !important
}

.jc-end {
    justify-content: flex-end !important
}

.jc-space-around {
    justify-content: space-around !important
}

.jc-space-between {
    justify-content: space-between !important
}

.jc-space-evenly {
    justify-content: space-evenly !important
}

.jc-start {
    justify-content: flex-start !important
}

.ac-center {
    align-content: center !important
}

.ac-end {
    align-content: flex-end !important
}

.ac-space-around {
    align-content: space-around !important
}

.ac-space-between {
    align-content: space-between !important
}

.ac-start {
    align-content: flex-start !important
}

.ac-stretch {
    align-content: stretch !important
}

.ai-baseline {
    align-items: baseline !important
}

.ai-center {
    align-items: center !important
}

.ai-end {
    align-items: flex-end !important
}

.ai-start {
    align-items: flex-start !important
}

.ai-stretch {
    align-items: stretch !important
}

.grid__center {
    justify-content: center !important;
    align-items: center !important
}

.as-auto {
    align-self: auto !important
}

.as-baseline {
    align-self: baseline !important
}

.as-center {
    align-self: center !important
}

.as-end {
    align-self: flex-end !important
}

.as-start {
    align-self: flex-start !important
}

.as-stretch {
    align-self: stretch !important
}

.fl0 {
    flex: 0 auto !important
}

.fl1 {
    flex: 1 auto !important
}

.fl2 {
    flex: 2 auto !important
}

.fl3 {
    flex: 3 auto !important
}

.fl4 {
    flex: 4 auto !important
}

.fl5 {
    flex: 5 auto !important
}

.fl-shrink0 {
    flex-shrink: 0
}

.fl-shrink1 {
    flex-shrink: 1
}

.fl-shrink2 {
    flex-shrink: 2
}

.fl-shrink3 {
    flex-shrink: 3
}

.fl-shrink4 {
    flex-shrink: 4
}

.fl-shrink5 {
    flex-shrink: 5
}

.fl-grow0 {
    flex-grow: 0
}

.fl-grow1 {
    flex-grow: 1
}

.fl-grow2 {
    flex-grow: 2
}

.fl-grow3 {
    flex-grow: 3
}

.fl-grow4 {
    flex-grow: 4
}

.fl-grow5 {
    flex-grow: 5
}

.fl-none {
    flex: none
}

.fl-equal {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0
}

.grid__fl0,
.grid__fl0 > .grid,
.grid__fl0 > .grid--cell {
    flex: 0 auto
}

.grid__fl1,
.grid__fl1 > .grid,
.grid__fl1 > .grid--cell {
    flex: 1 auto
}

.grid--cell1 {
    flex-basis: 8.33333333%
}

.grid--cell2 {
    flex-basis: 16.66666667%
}

.grid--cell3 {
    flex-basis: 25%
}

.grid--cell4 {
    flex-basis: 33.33333333%
}

.grid--cell5 {
    flex-basis: 41.66666667%
}

.grid--cell6 {
    flex-basis: 50%
}

.grid--cell7 {
    flex-basis: 58.33333333%
}

.grid--cell8 {
    flex-basis: 66.66666667%
}

.grid--cell9 {
    flex-basis: 75%
}

.grid--cell10 {
    flex-basis: 83.33333333%
}

.grid--cell11 {
    flex-basis: 91.66666667%
}

.grid--cell12 {
    flex-basis: 100%
}

.grid__allcells1 > .grid,
.grid__allcells1 > .grid--cell {
    flex-basis: 8.33333333%
}

.grid__allcells2 > .grid,
.grid__allcells2 > .grid--cell {
    flex-basis: 16.66666667%
}

.grid__allcells3 > .grid,
.grid__allcells3 > .grid--cell {
    flex-basis: 25%
}

.grid__allcells4 > .grid,
.grid__allcells4 > .grid--cell {
    flex-basis: 33.33333333%
}

.grid__allcells5 > .grid,
.grid__allcells5 > .grid--cell {
    flex-basis: 41.66666667%
}

.grid__allcells6 > .grid,
.grid__allcells6 > .grid--cell {
    flex-basis: 50%
}

.grid__allcells7 > .grid,
.grid__allcells7 > .grid--cell {
    flex-basis: 58.33333333%
}

.grid__allcells8 > .grid,
.grid__allcells8 > .grid--cell {
    flex-basis: 66.66666667%
}

.grid__allcells9 > .grid,
.grid__allcells9 > .grid--cell {
    flex-basis: 75%
}

.grid__allcells10 > .grid,
.grid__allcells10 > .grid--cell {
    flex-basis: 83.33333333%
}

.grid__allcells11 > .grid,
.grid__allcells11 > .grid--cell {
    flex-basis: 91.66666667%
}

.grid__allcells12 > .grid,
.grid__allcells12 > .grid--cell {
    flex-basis: 100%
}


/*******************
margin
*******************/

.m0 {
    margin: 0 !important
}

.m2 {
    margin: 2px !important
}

.m4 {
    margin: 4px !important
}

.m6 {
    margin: 6px !important
}

.m8 {
    margin: 8px !important
}

.m12 {
    margin: 12px !important
}

.m16 {
    margin: 16px !important
}

.m24 {
    margin: 24px !important
}

.m32 {
    margin: 32px !important
}

.m48 {
    margin: 48px !important
}

.m64 {
    margin: 64px !important
}

.m96 {
    margin: 96px !important
}

.m128 {
    margin: 128px !important
}

.m-auto {
    margin: auto !important
}

.mn2 {
    margin: -2px !important
}

.mn4 {
    margin: -4px !important
}

.mn6 {
    margin: -6px !important
}

.mn8 {
    margin: -8px !important
}

.mn12 {
    margin: -12px !important
}

.mn16 {
    margin: -16px !important
}

.mn24 {
    margin: -24px !important
}

.mn32 {
    margin: -32px !important
}

.mn48 {
    margin: -48px !important
}

.mn64 {
    margin: -64px !important
}

.mn96 {
    margin: -96px !important
}

.mn128 {
    margin: -128px !important
}

.mt0 {
    margin-top: 0 !important
}

.mt2 {
    margin-top: 2px !important
}

.mt4 {
    margin-top: 4px !important
}

.mt6 {
    margin-top: 6px !important
}

.mt8 {
    margin-top: 8px !important
}

.mt12 {
    margin-top: 12px !important
}

.mt16 {
    margin-top: 16px !important
}

.mt24 {
    margin-top: 24px !important
}

.mt32 {
    margin-top: 32px !important
}

.mt48 {
    margin-top: 48px !important
}

.mt64 {
    margin-top: 64px !important
}

.mt96 {
    margin-top: 96px !important
}

.mt128 {
    margin-top: 128px !important
}

.mt-auto {
    margin-top: auto !important
}

.mtn1 {
    margin-top: -1px !important
}

.mtn2 {
    margin-top: -2px !important
}

.mtn4 {
    margin-top: -4px !important
}

.mtn6 {
    margin-top: -6px !important
}

.mtn8 {
    margin-top: -8px !important
}

.mtn12 {
    margin-top: -12px !important
}

.mtn16 {
    margin-top: -16px !important
}

.mtn24 {
    margin-top: -24px !important
}

.mtn32 {
    margin-top: -32px !important
}

.mtn48 {
    margin-top: -48px !important
}

.mtn64 {
    margin-top: -64px !important
}

.mtn96 {
    margin-top: -96px !important
}

.mtn128 {
    margin-top: -128px !important
}

.mr0 {
    margin-right: 0 !important
}

.mr2 {
    margin-right: 2px !important
}

.mr3 {
    margin-right: 3px !important
}

.mr4 {
    margin-right: 4px !important
}

.mr6 {
    margin-right: 6px !important
}

.mr8 {
    margin-right: 8px !important
}

.mr12 {
    margin-right: 12px !important
}

.mr16 {
    margin-right: 16px !important
}

.mr24 {
    margin-right: 24px !important
}

.mr32 {
    margin-right: 32px !important
}

.mr48 {
    margin-right: 48px !important
}

.mr52 {
    margin-right: 52px !important
}

.mr64 {
    margin-right: 64px !important
}

.mr96 {
    margin-right: 96px !important
}

.mr128 {
    margin-right: 128px !important
}

.mr-auto {
    margin-right: auto !important
}

.mrn1 {
    margin-right: -1px !important
}

.mrn2 {
    margin-right: -2px !important
}

.mrn4 {
    margin-right: -4px !important
}

.mrn6 {
    margin-right: -6px !important
}

.mrn8 {
    margin-right: -8px !important
}

.mrn12 {
    margin-right: -12px !important
}

.mrn16 {
    margin-right: -16px !important
}

.mrn24 {
    margin-right: -24px !important
}

.mrn32 {
    margin-right: -32px !important
}

.mrn48 {
    margin-right: -48px !important
}

.mrn64 {
    margin-right: -64px !important
}

.mrn96 {
    margin-right: -96px !important
}

.mrn128 {
    margin-right: -128px !important
}

.mb0 {
    margin-bottom: 0 !important
}

.mb2 {
    margin-bottom: 2px !important
}

.mb4 {
    margin-bottom: 4px !important
}

.mb6 {
    margin-bottom: 6px !important
}

.mb8 {
    margin-bottom: 8px !important
}

.mb12 {
    margin-bottom: 12px !important
}

.mb16 {
    margin-bottom: 16px !important
}

.mb17 {
    margin-bottom: 17px !important
}

.mb20 {
    margin-bottom: 20px !important
}

.mb24 {
    margin-bottom: 24px !important
}

.mb32 {
    margin-bottom: 32px !important
}

.mb48 {
    margin-bottom: 48px !important
}

.mb64 {
    margin-bottom: 64px !important
}

.mb96 {
    margin-bottom: 96px !important
}

.mb128 {
    margin-bottom: 128px !important
}

.mb-auto {
    margin-bottom: auto !important
}

.mbn1 {
    margin-bottom: -1px !important
}

.mbn2 {
    margin-bottom: -2px !important
}

.mbn4 {
    margin-bottom: -4px !important
}

.mbn6 {
    margin-bottom: -6px !important
}

.mbn8 {
    margin-bottom: -8px !important
}

.mbn12 {
    margin-bottom: -12px !important
}

.mbn16 {
    margin-bottom: -16px !important
}

.mbn24 {
    margin-bottom: -24px !important
}

.mbn32 {
    margin-bottom: -32px !important
}

.mbn48 {
    margin-bottom: -48px !important
}

.mbn64 {
    margin-bottom: -64px !important
}

.mbn96 {
    margin-bottom: -96px !important
}

.mbn128 {
    margin-bottom: -128px !important
}

.ml0 {
    margin-left: 0 !important
}

.ml2 {
    margin-left: 2px !important
}

.ml4 {
    margin-left: 4px !important
}

.ml6 {
    margin-left: 6px !important
}

.ml8 {
    margin-left: 8px !important
}

.ml10 {
    margin-left: 10px !important
}

.ml12 {
    margin-left: 12px !important
}

.ml16 {
    margin-left: 16px !important
}

.ml24 {
    margin-left: 24px !important
}

.ml32 {
    margin-left: 32px !important
}

.ml48 {
    margin-left: 48px !important
}

.ml64 {
    margin-left: 64px !important
}

.ml96 {
    margin-left: 96px !important
}

.ml128 {
    margin-left: 128px !important
}

.ml-auto {
    margin-left: auto !important
}

.mln1 {
    margin-left: -1px !important
}

.mln2 {
    margin-left: -2px !important
}

.mln4 {
    margin-left: -4px !important
}

.mln6 {
    margin-left: -6px !important
}

.mln8 {
    margin-left: -8px !important
}

.mln12 {
    margin-left: -12px !important
}

.mln16 {
    margin-left: -16px !important
}

.mln24 {
    margin-left: -24px !important
}

.mln32 {
    margin-left: -32px !important
}

.mln48 {
    margin-left: -48px !important
}

.mln64 {
    margin-left: -64px !important
}

.mln96 {
    margin-left: -96px !important
}

.mln128 {
    margin-left: -128px !important
}

.mx0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.mx2 {
    margin-left: 2px !important;
    margin-right: 2px !important
}

.mx4 {
    margin-left: 4px !important;
    margin-right: 4px !important
}

.mx6 {
    margin-left: 6px !important;
    margin-right: 6px !important
}

.mx8 {
    margin-left: 8px !important;
    margin-right: 8px !important
}

.mx12 {
    margin-left: 12px !important;
    margin-right: 12px !important
}

.mx16 {
    margin-left: 16px !important;
    margin-right: 16px !important
}

.mx24 {
    margin-left: 24px !important;
    margin-right: 24px !important
}

.mx32 {
    margin-left: 32px !important;
    margin-right: 32px !important
}

.mx48 {
    margin-left: 48px !important;
    margin-right: 48px !important
}

.mx64 {
    margin-left: 64px !important;
    margin-right: 64px !important
}

.mx96 {
    margin-left: 96px !important;
    margin-right: 96px !important
}

.mx128 {
    margin-left: 128px !important;
    margin-right: 128px !important
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.mxn1 {
    margin-left: -1px !important;
    margin-right: -1px !important
}

.mxn2 {
    margin-left: -2px !important;
    margin-right: -2px !important
}

.mxn4 {
    margin-left: -4px !important;
    margin-right: -4px !important
}

.mxn8 {
    margin-left: -8px !important;
    margin-right: -8px !important
}

.mxn12 {
    margin-left: -12px !important;
    margin-right: -12px !important
}

.mxn16 {
    margin-left: -16px !important;
    margin-right: -16px !important
}

.mxn24 {
    margin-left: -24px !important;
    margin-right: -24px !important
}

.mxn32 {
    margin-left: -32px !important;
    margin-right: -32px !important
}

.mxn48 {
    margin-left: -48px !important;
    margin-right: -48px !important
}

.mxn64 {
    margin-left: -64px !important;
    margin-right: -64px !important
}

.mxn96 {
    margin-left: -96px !important;
    margin-right: -96px !important
}

.mxn128 {
    margin-left: -128px !important;
    margin-right: -128px !important
}

.my0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my2 {
    margin-top: 2px !important;
    margin-bottom: 2px !important
}

.my4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important
}

.my6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important
}

.my8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important
}

.my12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important
}

.my16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important
}

.my24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important
}

.my32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important
}

.my48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important
}

.my64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important
}

.my96 {
    margin-top: 96px !important;
    margin-bottom: 96px !important
}

.my128 {
    margin-top: 128px !important;
    margin-bottom: 128px !important
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.myn1 {
    margin-top: -1px !important;
    margin-bottom: -1px !important
}

.myn2 {
    margin-top: -2px !important;
    margin-bottom: -2px !important
}

.myn4 {
    margin-top: -4px !important;
    margin-bottom: -4px !important
}

.myn8 {
    margin-top: -8px !important;
    margin-bottom: -8px !important
}

.myn12 {
    margin-top: -12px !important;
    margin-bottom: -12px !important
}

.myn16 {
    margin-top: -16px !important;
    margin-bottom: -16px !important
}

.myn24 {
    margin-top: -24px !important;
    margin-bottom: -24px !important
}

.myn32 {
    margin-top: -32px !important;
    margin-bottom: -32px !important
}

.myn48 {
    margin-top: -48px !important;
    margin-bottom: -48px !important
}

.myn64 {
    margin-top: -64px !important;
    margin-bottom: -64px !important
}

.myn96 {
    margin-top: -96px !important;
    margin-bottom: -96px !important
}

.myn128 {
    margin-top: -128px !important;
    margin-bottom: -128px !important
}

/*******************
padding
*******************/

.p0 {
    padding: 0 !important
}

.p2 {
    padding: 2px !important
}

.p4 {
    padding: 4px !important
}

.p6 {
    padding: 6px !important
}

.p8 {
    padding: 8px !important
}

.p12 {
    padding: 12px !important
}

.p16 {
    padding: 16px !important
}

.p24 {
    padding: 24px !important
}

.p32 {
    padding: 32px !important
}

.p48 {
    padding: 48px !important
}

.p64 {
    padding: 64px !important
}

.p96 {
    padding: 96px !important
}

.p128 {
    padding: 128px !important
}

.pt0 {
    padding-top: 0 !important
}

.pt2 {
    padding-top: 2px !important
}

.pt4 {
    padding-top: 4px !important
}

.pt6 {
    padding-top: 6px !important
}

.pt8 {
    padding-top: 8px !important
}

.pt12 {
    padding-top: 12px !important
}

.pt16 {
    padding-top: 16px !important
}

.pt24 {
    padding-top: 24px !important
}

.pt32 {
    padding-top: 32px !important
}

.pt48 {
    padding-top: 48px !important
}

.pt64 {
    padding-top: 64px !important
}

.pt96 {
    padding-top: 96px !important
}

.pt128 {
    padding-top: 128px !important
}

.pr0 {
    padding-right: 0 !important
}

.pr2 {
    padding-right: 2px !important
}

.pr4 {
    padding-right: 4px !important
}

.pr6 {
    padding-right: 6px !important
}

.pr8 {
    padding-right: 8px !important
}

.pr12 {
    padding-right: 12px !important
}

.pr16 {
    padding-right: 16px !important
}

.pr24 {
    padding-right: 24px !important
}

.pr32 {
    padding-right: 32px !important
}

.pr48 {
    padding-right: 48px !important
}

.pr64 {
    padding-right: 64px !important
}

.pr96 {
    padding-right: 96px !important
}

.pr128 {
    padding-right: 128px !important
}

.pb0 {
    padding-bottom: 0 !important
}

.pb2 {
    padding-bottom: 2px !important
}

.pb4 {
    padding-bottom: 4px !important
}

.pb6 {
    padding-bottom: 6px !important
}

.pb8 {
    padding-bottom: 8px !important
}

.pb12 {
    padding-bottom: 12px !important
}

.pb16 {
    padding-bottom: 16px !important
}

.pb20 {
    padding-bottom: 20px !important
}

.pb24 {
    padding-bottom: 24px !important
}

.pb32 {
    padding-bottom: 32px !important
}

.pb48 {
    padding-bottom: 48px !important
}

.pb64 {
    padding-bottom: 64px !important
}

.pb96 {
    padding-bottom: 96px !important
}

.pb128 {
    padding-bottom: 128px !important
}

.pl0 {
    padding-left: 0 !important
}

.pl2 {
    padding-left: 2px !important
}

.pl4 {
    padding-left: 4px !important
}

.pl6 {
    padding-left: 6px !important
}

.pl8 {
    padding-left: 8px !important
}

.pl12 {
    padding-left: 12px !important
}

.pl16 {
    padding-left: 16px !important
}

.pl24 {
    padding-left: 24px !important
}

.pl32 {
    padding-left: 32px !important
}

.pl48 {
    padding-left: 48px !important
}

.pl64 {
    padding-left: 64px !important
}

.pl96 {
    padding-left: 96px !important
}

.pl128 {
    padding-left: 128px !important
}

.px0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.px2 {
    padding-left: 2px !important;
    padding-right: 2px !important
}

.px4 {
    padding-left: 4px !important;
    padding-right: 4px !important
}

.px6 {
    padding-left: 6px !important;
    padding-right: 6px !important
}

.px8 {
    padding-left: 8px !important;
    padding-right: 8px !important
}

.px12 {
    padding-left: 12px !important;
    padding-right: 12px !important
}

.px16 {
    padding-left: 16px !important;
    padding-right: 16px !important
}

.px24 {
    padding-left: 24px !important;
    padding-right: 24px !important
}

.px32 {
    padding-left: 32px !important;
    padding-right: 32px !important
}

.px48 {
    padding-left: 48px !important;
    padding-right: 48px !important
}


.px64 {
    padding-left: 64px !important;
    padding-right: 64px !important
}

.px96 {
    padding-left: 96px !important;
    padding-right: 96px !important
}

.px128 {
    padding-left: 128px !important;
    padding-right: 128px !important
}

.py0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py2 {
    padding-top: 2px !important;
    padding-bottom: 2px !important
}

.py4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important
}

.py6 {
    padding-top: 6px !important;
    padding-bottom: 6px !important
}

.py8 {
    padding-top: 8px !important;
    padding-bottom: 8px !important
}

.py12 {
    padding-top: 12px !important;
    padding-bottom: 12px !important
}

.py16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important
}

.py24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
}

.py32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important
}

.py48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important
}

.py64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important
}

.py96 {
    padding-top: 96px !important;
    padding-bottom: 96px !important
}

.py128 {
    padding-top: 128px !important;
    padding-bottom: 128px !important
}


/*******************
top
*******************/

.t0 {
    top: 0 !important
}

.t2 {
    top: 2px !important
}

.tn2 {
    top: -2px !important
}

.t4 {
    top: 4px !important
}

.tn4 {
    top: -4px !important
}

.t6 {
    top: 6px !important
}

.tn6 {
    top: -6px !important
}

.t8 {
    top: 8px !important
}

.tn8 {
    top: -8px !important
}

.t12 {
    top: 12px !important
}

.tn12 {
    top: -12px !important
}

.t16 {
    top: 16px !important
}

.tn16 {
    top: -16px !important
}

.t24 {
    top: 24px !important
}

.tn24 {
    top: -24px !important
}

.t32 {
    top: 32px !important
}

.tn32 {
    top: -32px !important
}

.t48 {
    top: 48px !important
}

.tn48 {
    top: -48px !important
}

.t64 {
    top: 64px !important
}

.tn64 {
    top: -64px !important
}

.t96 {
    top: 96px !important
}

.tn96 {
    top: -96px !important
}

.t128 {
    top: 128px !important
}

.tn128 {
    top: -128px !important
}

.t50 {
    top: 50% !important
}

.tn50 {
    top: -50% !important
}

.t100 {
    top: 100% !important
}

.tn100 {
    top: -100% !important
}


/*******************
right
*******************/

.r0 {
    right: 0 !important
}

.r2 {
    right: 2px !important
}

.rn2 {
    right: -2px !important
}

.r4 {
    right: 4px !important
}

.rn4 {
    right: -4px !important
}

.r6 {
    right: 6px !important
}

.rn6 {
    right: -6px !important
}

.r8 {
    right: 8px !important
}

.rn8 {
    right: -8px !important
}

.r12 {
    right: 12px !important
}

.rn12 {
    right: -12px !important
}

.r16 {
    right: 16px !important
}

.rn16 {
    right: -16px !important
}

.r24 {
    right: 24px !important
}

.rn24 {
    right: -24px !important
}

.r32 {
    right: 32px !important
}

.rn32 {
    right: -32px !important
}

.r48 {
    right: 48px !important
}

.rn48 {
    right: -48px !important
}

.r64 {
    right: 64px !important
}

.rn64 {
    right: -64px !important
}

.r96 {
    right: 96px !important
}

.rn96 {
    right: -96px !important
}

.r128 {
    right: 128px !important
}

.rn128 {
    right: -128px !important
}

.r50 {
    right: 50% !important
}

.rn50 {
    right: -50% !important
}

.r100 {
    right: 100% !important
}

.rn100 {
    right: -100% !important
}


/*******************
bottom
*******************/

.b0 {
    bottom: 0 !important
}

.b2 {
    bottom: 2px !important
}

.bn2 {
    bottom: -2px !important
}

.b4 {
    bottom: 4px !important
}

.bn4 {
    bottom: -4px !important
}

.b6 {
    bottom: 6px !important
}

.bn6 {
    bottom: -6px !important
}

.b8 {
    bottom: 8px !important
}

.bn8 {
    bottom: -8px !important
}

.b12 {
    bottom: 12px !important
}

.bn12 {
    bottom: -12px !important
}

.b16 {
    bottom: 16px !important
}

.bn16 {
    bottom: -16px !important
}

.b24 {
    bottom: 24px !important
}

.bn24 {
    bottom: -24px !important
}

.b32 {
    bottom: 32px !important
}

.bn32 {
    bottom: -32px !important
}

.b48 {
    bottom: 48px !important
}

.bn48 {
    bottom: -48px !important
}

.b64 {
    bottom: 64px !important
}

.bn64 {
    bottom: -64px !important
}

.b96 {
    bottom: 96px !important
}

.bn96 {
    bottom: -96px !important
}

.b128 {
    bottom: 128px !important
}

.bn128 {
    bottom: -128px !important
}

.b50 {
    bottom: 50% !important
}

.bn50 {
    bottom: -50% !important
}

.b100 {
    bottom: 100% !important
}

.bn100 {
    bottom: -100% !important
}


/*******************
left
*******************/

.l0 {
    left: 0 !important
}

.l2 {
    left: 2px !important
}

.ln2 {
    left: -2px !important
}

.l4 {
    left: 4px !important
}

.ln4 {
    left: -4px !important
}

.l6 {
    left: 6px !important
}

.ln6 {
    left: -6px !important
}

.l8 {
    left: 8px !important
}

.ln8 {
    left: -8px !important
}

.l12 {
    left: 12px !important
}

.ln12 {
    left: -12px !important
}

.l16 {
    left: 16px !important
}

.ln16 {
    left: -16px !important
}

.l24 {
    left: 24px !important
}

.ln24 {
    left: -24px !important
}

.l32 {
    left: 32px !important
}

.ln32 {
    left: -32px !important
}

.l48 {
    left: 48px !important
}

.ln48 {
    left: -48px !important
}

.l64 {
    left: 64px !important
}

.ln64 {
    left: -64px !important
}

.l96 {
    left: 96px !important
}

.ln96 {
    left: -96px !important
}

.l128 {
    left: 128px !important
}

.ln128 {
    left: -128px !important
}

.l50 {
    left: 50% !important
}

.ln50 {
    left: -50% !important
}

.l100 {
    left: 100% !important
}

.ln100 {
    left: -100% !important
}

/*******************
font-size
*******************/


.fs-display4 {
    font-size: 7.61538461rem !important
}

.fs-display3 {
    font-size: 5.30769231rem !important
}

.fs-display2 {
    font-size: 4.23076923rem !important
}

.fs-display1 {
    font-size: 3.30769231rem !important
}

.fs-headline2 {
    font-size: 2.61538461rem !important
}

.fs-headline1 {
    font-size: 2.07692308rem !important
}

.fs-title {
    font-size: 1.61538462rem !important
}

.fs-subheading {
    font-size: 1.46153846rem !important
}

.fs-body3 {
    font-size: 1.30769231rem !important
}

.fs-body2 {
    font-size: 1.15384615rem !important
}

.fs-body1 {
    font-size: 13px !important
}

.fs-caption,
.fs-category {
    font-size: 12px !important
}

.fs-fine {
    font-size: 11px !important
}


/*******************
line-height
*******************/


.lh-xs {
    line-height: 1 !important
}

.lh-sm {
    line-height: 1.15384615 !important
}

.lh-md {
    line-height: 1.30769231 !important
}

.lh-lg {
    line-height: 1.61538462 !important
}

.lh-xl {
    line-height: 1.92307692 !important
}

.lh-xxl {
    line-height: 2 !important
}

/*******************
font-style
*******************/

.lh-unset {
    line-height: initial !important
}


.ff-inherit {
    font-family: inherit !important
}

.fw-normal {
    font-weight: 400 !important
}

.fw-bold {
    font-weight: 700 !important
}

.fs-normal {
    font-style: normal !important
}

.fs-italic {
    font-style: italic !important
}

.fs-unset {
    font-style: unset !important
}

.ta-left {
    text-align: left !important
}

.ta-center {
    text-align: center !important
}

.ta-right {
    text-align: right !important
}

.ta-justify {
    text-align: justify !important
}

.ta-unset {
    text-align: unset !important
}

.td-none {
    text-decoration: none !important
}

.td-underline {
    text-decoration: underline !important
}

.tt-capitalize {
    text-transform: capitalize !important
}

.tt-lowercase {
    text-transform: lowercase !important
}

.tt-uppercase {
    text-transform: uppercase !important
}

.tt-none {
    text-transform: none !important
}

.tt-unset {
    text-transform: unset !important
}


/*******************
white-space 스페이스와 탭, 줄바꿈, 자동줄바꿈
******************/

.ws-normal {
    white-space: normal !important
}

.ws-nowrap {
    white-space: nowrap !important
}

.ws-pre {
    white-space: pre !important
}

.ws-pre-wrap {
    white-space: pre-wrap !important
}

.ws-pre-line {
    white-space: pre-line !important
}

.ws-unset {
    white-space: unset !important
}

/*******************
word-break 단어분리
******************/

.wb-normal {
    word-break: normal !important
}

.wb-break-all {
    word-break: break-all !important
}

.wb-keep-all {
    word-break: keep-all !important
}

.wb-inherit {
    word-break: inherit !important
}

.wb-initial {
    word-break: initial !important
}

.wb-unset {
    word-break: unset !important
}


/*******************
overflow-wrap (box내 text 넘침 방지)
word-wrap (줄바꿈)
******************/

.ow-normal {
    overflow-wrap: normal !important;
    word-wrap: normal !important
}

.ow-break-word {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important
}

.ow-inherit {
    overflow-wrap: inherit !important;
    word-wrap: inherit !important
}

.ow-initial {
    overflow-wrap: initial !important;
    word-wrap: initial !important
}

.ow-unset {
    overflow-wrap: unset !important;
    word-wrap: unset !important
}

.ww-break-word {
    word-wrap: break-word !important
}



/*******************
hyphens (하이픈 규칙)
******************/

.hyphens-none {
    hyphens: none !important
}

.hyphens-auto {
    -ms-hyphens: auto !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important
}

.hyphens-unset {
    hyphens: unset !important
}

/*******************
list style
******************/

.list-reset {
    list-style: none;
    margin: 0;
    padding: 0
}

.list-ls-none {
    list-style: none !important
}

.list-ls-disc {
    list-style-type: disc !important
}

.list-ls-decimal {
    list-style-type: decimal !important
}

.list-ls-unset {
    list-style-type: unset !important
}

.list-inside {
    list-style-position: inside !important
}

.list-outside {
    list-style-position: outside !important
}


/*******************
display
******************/

.d-block {
    display: block !important
}

@media print {
    .print\:d-block {
        display: block !important
    }
}

.d-flex-js {
    display: flex !important;
    justify-content: space-between;
}

.d-flex {
    display: flex !important
}

.d-inline-flex {
    display: inline-flex !important
}

.d-grid {
    display: grid !important
}

.d-inline-grid {
    display: inline-grid !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-table {
    display: table !important
}

.d-table-cell {
    display: table-cell !important
}

.d-none {
    display: none !important
}

@media print {
    .print\:d-none {
        display: none !important
    }
}

.d-unset {
    display: unset !important
}


/*******************
background
******************/

.bg-bottom {
    background-position: bottom !important
}

.bg-center {
    background-position: center !important
}

.bg-left {
    background-position: left !important
}

.bg-left-bottom {
    background-position: left bottom !important
}

.bg-left-top {
    background-position: left top !important
}

.bg-right {
    background-position: right !important
}

.bg-right-bottom {
    background-position: right bottom !important
}

.bg-right-top {
    background-position: right top !important
}

.bg-top {
    background-position: top !important
}

.bg-repeat {
    background-repeat: repeat !important
}

.bg-no-repeat {
    background-repeat: no-repeat !important
}

.bg-repeat-x {
    background-repeat: repeat-x !important
}

.bg-repeat-y {
    background-repeat: repeat-y !important
}

.bg-auto {
    background-size: auto !important
}

.bg-cover {
    background-size: cover !important
}

.bg-contain {
    background-size: contain !important
}

.bg-fixed {
    background-attachment: fixed !important
}

.bg-local {
    background-attachment: local !important
}

.bg-scroll {
    background-attachment: scroll !important
}


/*******************
cursor
******************/

.c-auto {
    cursor: auto !important
}

.c-default {
    cursor: default !important
}

.c-pointer {
    cursor: pointer !important
}

.c-wait {
    cursor: wait !important
}

.c-move {
    cursor: move !important
}

.c-not-allowed {
    cursor: not-allowed !important
}

.c-help {
    cursor: help !important
}

.pe-auto {
    pointer-events: auto !important
}

.pe-none {
    pointer-events: none !important
}

.us-auto {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important
}

.us-none {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important
}

.ud-auto {
    -webkit-user-drag: auto !important;
    -moz-user-drag: auto !important;
    -ms-user-drag: auto !important;
    user-drag: auto !important
}

.ud-none {
    -webkit-user-drag: none !important;
    -moz-user-drag: none !important;
    -ms-user-drag: none !important;
    user-drag: none !important
}


/*******************
property show or hide
******************/

.v-visible {
    visibility: visible !important
}

.v-hidden {
    visibility: hidden !important
}

.v-visible-sr {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal
}


/*******************
float & clear
******************/

.float-left {
    float: left !important
}

.float-right {
    float: right !important
}

.float-none {
    float: none !important
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table
}

.clearfix:after {
    clear: both
}

.clear-left {
    clear: left !important
}

.clear-right {
    clear: right !important
}

.clear-both {
    clear: both !important
}

.clear-none {
    clear: none !important
}


/*******************
box-sizing
******************/

.box-content {
    box-sizing: content-box !important
}

.box-border {
    box-sizing: border-box !important
}

.box-unset {
    box-sizing: unset !important
}


/*******************
vertical-align
******************/

.va-baseline {
    vertical-align: baseline !important
}

.va-bottom {
    vertical-align: bottom !important
}

.va-middle {
    vertical-align: middle !important
}

.va-sub {
    vertical-align: sub !important
}

.va-super {
    vertical-align: super !important
}

.va-text-bottom {
    vertical-align: text-bottom !important
}

.va-text-top {
    vertical-align: text-top !important
}

.va-top {
    vertical-align: top !important
}

.va-unset {
    vertical-align: unset !important
}


/*******************
position
******************/

.ps-absolute {
    position: absolute !important
}

.ps-fixed {
    position: fixed !important
}

.ps-relative {
    position: relative !important
}

.ps-static {
    position: static !important
}

.ps-sticky {
    position: -webkit-sticky !important;
    position: sticky !important
}

.ps-unset {
    position: unset !important
}


/*******************
overflow
******************/

/* 2021.06.15 Left Content Scroll hide 정과장협의건 
 .overflow-auto {
    overflow: auto !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
} 
*/

.overflow-auto::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
}

.overflow-auto::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.overflow-auto::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2)
}

.overflow-auto::-webkit-scrollbar-corner {
    background-color: transparent;
    border-color: transparent
}

.overflow-x-auto {
    overflow-x: auto !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
}

.overflow-x-auto::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
}

.overflow-x-auto::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2)
}

.overflow-x-auto::-webkit-scrollbar-corner {
    background-color: transparent;
    border-color: transparent
}

.overflow-y-auto {
    overflow-y: auto !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
}

.overflow-y-auto::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
}

.overflow-y-auto::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2)
}

.overflow-y-auto::-webkit-scrollbar-corner {
    background-color: transparent;
    border-color: transparent
}

.overflow-hidden {
    overflow: hidden !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
}

.overflow-hidden::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
}

.overflow-hidden::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.overflow-hidden::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2)
}

.overflow-hidden::-webkit-scrollbar-corner {
    background-color: transparent;
    border-color: transparent
}

.overflow-x-hidden {
    overflow-x: hidden !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
}

.overflow-x-hidden::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
}

.overflow-x-hidden::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.overflow-x-hidden::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2)
}

.overflow-x-hidden::-webkit-scrollbar-corner {
    background-color: transparent;
    border-color: transparent
}

.overflow-y-hidden {
    overflow-y: hidden !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
}

.overflow-y-hidden::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
}

.overflow-y-hidden::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.overflow-y-hidden::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2)
}

.overflow-y-hidden::-webkit-scrollbar-corner {
    background-color: transparent;
    border-color: transparent
}

.overflow-scroll {
    overflow: scroll !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
}

.overflow-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
}

.overflow-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.overflow-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2)
}

.overflow-scroll::-webkit-scrollbar-corner {
    background-color: transparent;
    border-color: transparent
}

.overflow-x-scroll {
    overflow-x: scroll !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
}

.overflow-x-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
}

.overflow-x-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.overflow-x-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2)
}

.overflow-x-scroll::-webkit-scrollbar-corner {
    background-color: transparent;
    border-color: transparent
}

.overflow-y-scroll {
    overflow-y: scroll !important;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
}

.overflow-y-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent
}

.overflow-y-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent
}

.overflow-y-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2)
}

.overflow-y-scroll::-webkit-scrollbar-corner {
    background-color: transparent;
    border-color: transparent
}

.overflow-visible {
    overflow: visible !important
}


/*******************
opacity
******************/

.o0 {
    opacity: 0 !important
}

.h\:o0:hover {
    opacity: 0 !important
}

.o5 {
    opacity: .05 !important
}

.h\:o5:hover {
    opacity: .05 !important
}

.o10 {
    opacity: .1 !important
}

.o20 {
    opacity: .2 !important
}

.o30 {
    opacity: .3 !important
}

.o40 {
    opacity: .4 !important
}

.o50 {
    opacity: .5 !important
}

.h\:o50:hover {
    opacity: .5 !important
}

.o60 {
    opacity: .6 !important
}

.o70 {
    opacity: .7 !important
}

.o80 {
    opacity: .8 !important
}

.h\:o80:hover {
    opacity: .8 !important
}

.o90 {
    opacity: .9 !important
}

.o100 {
    opacity: 1 !important
}

.h\:o100:hover {
    opacity: 1 !important
}

.f\:o100:focus,
.f\:o100:focus-within {
    opacity: 1 !important
}


/*******************
z-index
******************/

.z-hide {
    z-index: -1 !important
}

.z-base {
    z-index: 0 !important
}

.z-active {
    z-index: 30 !important
}

.z-selected {
    z-index: 25 !important
}

.z-dropdown {
    z-index: 1000 !important
}

.z-popover {
    z-index: 2000 !important
}

.z-tooltip {
    z-index: 3000 !important
}

.z-banner {
    z-index: 4000 !important
}

.z-nav {
    z-index: 5000 !important
}

.z-nav-fixed {
    z-index: 5050 !important
}

.z-modal {
    z-index: 9000 !important
}

.z-modal-bg {
    z-index: 8950 !important
}


/*******************
outline
******************/

.outline-none {
    outline: 0 !important
}

.outline-ring {
    outline: solid 4px rgba(55, 138, 211, 0.15)
}

.f\:outline-ring:focus,
.f\:outline-ring:focus-within {
    outline: solid 4px rgba(55, 138, 211, 0.15)
}


/*******************
box-shadow
******************/

.bs-none {
    box-shadow: none !important
}

.bs-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1) !important
}

.h\:bs-sm:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1) !important
}

.bs-md {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.11), 0 2px 6px rgba(0, 0, 0, 0.11), 0 3px 8px rgba(0, 0, 0, 0.14) !important
}

.h\:bs-md:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.11), 0 2px 6px rgba(0, 0, 0, 0.11), 0 3px 8px rgba(0, 0, 0, 0.14) !important
}

.bs-lg {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.14), 0 4px 13px rgba(0, 0, 0, 0.18) !important
}

.h\:bs-lg:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.14), 0 4px 13px rgba(0, 0, 0, 0.18) !important
}

.bs-ring {
    box-shadow: 0 0 0 4px rgba(55, 138, 211, 0.15)
}

.h\:bs-ring:hover {
    box-shadow: 0 0 0 4px rgba(55, 138, 211, 0.15)
}

.f\:bs-ring:focus,
.f\:bs-ring:focus-within {
    box-shadow: 0 0 0 4px rgba(55, 138, 211, 0.15)
}

.bs-sm.bs-hover:hover {
    box-shadow: 0 2px 8px #eff0f1 !important
}

.bs-md.bs-hover:hover {
    box-shadow: 0 4px 8px #d6d9dc !important
}

.bs-lg.bs-hover:hover {
    box-shadow: 0 4px 12px rgba(159, 166, 173, 0.7) !important
}

.bs-i-sm.bs-hover:hover {
    box-shadow: inset 0 1px 8px 0 rgba(187, 192, 196, 0.75) !important
}

.bs-i-md.bs-hover:hover {
    box-shadow: inset 0 1px 8px 0 rgba(145, 153, 161, 0.8) !important
}

.bs-i-lg.bs-hover:hover {
    box-shadow: inset 0 1px 12px 0 #9199a1 !important
}


/*******************
transition
******************/

.t {
    transition-duration: .1s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.47, 0, .745, .715);
    transition-delay: 0s
}

.t-slow {
    transition-duration: .25s !important
}

.t-fast {
    transition-duration: .05s !important
}

.t-unset {
    transition-property: none !important
}

.t-bg {
    transition-property: background-color !important
}

.t-opacity {
    transition-property: opacity !important
}

.t-shadow {
    transition-property: box-shadow !important
}

.t-delay {
    transition-delay: .25s !important
}

.t-delay-unset {
    transition-delay: 0s !important
}


/*******************
width
******************/

.w0 {
    width: 0 !important
}

.w10 {
    width: 10% !important
}

.w15 {
    width: 15% !important
}

.w20 {
    width: 20% !important
}

.w25 {
    width: 25% !important
}

.w30 {
    width: 30% !important
}

.w31 {
    width: 31% !important
}

.w33 {
    width: 33.33333% !important
}

.w40 {
    width: 40% !important
}

.w50 {
    width: 50% !important
}

.w60 {
    width: 60% !important
}

.w66 {
    width: 66.66667% !important
}

.w70 {
    width: 70% !important
}

.w75 {
    width: 75% !important
}

.w80 {
    width: 80% !important
}

.w90 {
    width: 90% !important
}

.w95 {
    width: 95% !important
}

.w100 {
    width: 100% !important
}

.w-auto {
    width: auto !important
}

.ws0,
.w0 {
    width: 0 !important
}

.ws1 {
    width: 8.1025641rem !important
}

.ws2 {
    width: 16.2051282rem !important
}

.ws3 {
    width: 24.3076923rem !important
}

.ws4 {
    width: 32.4102564rem !important
}

.ws5 {
    width: 40.5128205rem !important
}

.ws6 {
    width: 48.6153846rem !important
}

.ws7 {
    width: 56.7179487rem !important
}

.ws8 {
    width: 64.8205128rem !important
}

.ws9 {
    width: 72.9230769rem !important
}

.ws10 {
    width: 81.025641rem !important
}

.ws11 {
    width: 89.1282051rem !important
}

.ws12 {
    width: 97.2307692rem !important
}

.w2 {
    width: 2px !important
}

.w4 {
    width: 4px !important
}

.w6 {
    width: 6px !important
}

.w8 {
    width: 8px !important
}

.w12 {
    width: 12px !important
}

.w16 {
    width: 16px !important
}

.w24 {
    width: 24px !important
}

.w32 {
    width: 32px !important
}

.w48 {
    width: 48px !important
}

.w55 {
    width: 52px !important
}

.w64 {
    width: 64px !important
}

.w96 {
    width: 96px !important
}

.w128 {
    width: 128px !important
}

.w150 {
    width: 150px !important
}

.w250 {
    width: 250px !important
}

.s-table--cell1 {
    width: 8.33333333%
}

.s-table--cell2 {
    width: 16.66666667%
}

.s-table--cell3 {
    width: 25%
}

.s-table--cell4 {
    width: 33.33333333%
}

.s-table--cell5 {
    width: 41.66666667%
}

.s-table--cell6 {
    width: 50%
}

.s-table--cell7 {
    width: 58.33333333%
}

.s-table--cell8 {
    width: 66.66666667%
}

.s-table--cell9 {
    width: 75%
}

.s-table--cell10 {
    width: 83.33333333%
}

.s-table--cell11 {
    width: 91.66666667%
}

.s-table--cell12 {
    width: 100%
}

.wmx0 {
    max-width: 0 !important
}

.wmx1 {
    max-width: 8.1025641rem !important
}

.wmx2 {
    max-width: 16.2051282rem !important
}

.wmx25 {
    max-width: 25% !important
}

.wmx3 {
    max-width: 24.3076923rem !important
}

.wmx4 {
    max-width: 32.4102564rem !important
}

.wmx5 {
    max-width: 40.5128205rem !important
}

.wmx50 {
    max-width: 50% !important
}

.wmx6 {
    max-width: 48.6153846rem !important
}

.wmx7 {
    max-width: 56.7179487rem !important
}

.wmx75 {
    max-width: 75% !important
}

.wmx8 {
    max-width: 64.8205128rem !important
}

.wmx9 {
    max-width: 72.9230769rem !important
}

.wmx10 {
    max-width: 81.025641rem !important
}

.wmx11 {
    max-width: 89.1282051rem !important
}

.wmx12 {
    max-width: 99% !important
}

.wmx100 {
    max-width: 100% !important
}

.wmx-initial {
    max-width: initial !important
}

.wmn0 {
    min-width: 0 !important
}

.wmn1 {
    min-width: 8.1025641rem !important
}

.wmn2 {
    min-width: 16.2051282rem !important
}

.wmn25 {
    min-width: 25% !important
}

.wmn3 {
    min-width: 24.3076923rem !important
}

.wmn4 {
    min-width: 32.4102564rem !important
}

.wmn5 {
    min-width: 40.5128205rem !important
}

.wmn50 {
    min-width: 50% !important
}

.wmn6 {
    min-width: 48.6153846rem !important
}

.wmn7 {
    min-width: 56.7179487rem !important
}

.wmn75 {
    min-width: 75% !important
}

.wmn8 {
    min-width: 64.8205128rem !important
}

.wmn9 {
    min-width: 72.9230769rem !important
}

.wmn10 {
    min-width: 81.025641rem !important
}

.wmn11 {
    min-width: 89.1282051rem !important
}

.wmn12 {
    min-width: 97.2307692rem !important
}

.wmn100 {
    min-width: 100% !important
}

.wmn-initial {
    min-width: initial !important
}


/*******************
    height
******************/

.h0 {
    height: 0 !important
}

.h100 {
    height: 100% !important
}

.h-auto {
    height: auto !important
}

.hs0,
.h0 {
    height: 0 !important
}

.hs1 {
    height: 8.1025641rem !important
}

.hs2 {
    height: 16.2051282rem !important
}

.hs3 {
    height: 26.3076923rem !important
}

.hs4 {
    height: 32.4102564rem !important
}

.hs5 {
    height: 40.5128205rem !important
}

.hs6 {
    height: 48.6153846rem !important
}

.hs7 {
    height: 56.7179487rem !important
}

.hs8 {
    height: 64.8205128rem !important
}

.hs9 {
    height: 72.9230769rem !important
}

.hs10 {
    height: 81.025641rem !important
}

.hs11 {
    height: 89.1282051rem !important
}

.hs12 {
    height: 97.2307692rem !important
}

.h2 {
    height: 2px !important
}

.h4 {
    height: 4px !important
}

.h6 {
    height: 6px !important
}

.h8 {
    height: 8px !important
}

.h12 {
    height: 12px !important
}

.h16 {
    height: 16px !important
}

.h24 {
    height: 24px !important
}

.h32 {
    height: 32px !important
}

.h48 {
    height: 48px !important
}

.h64 {
    height: 64px !important
}

.h96 {
    height: 96px !important
}

.h128 {
    height: 128px !important
}

.hmx0 {
    max-height: 0 !important
}

.hmx1 {
    max-height: 8.1025641rem !important
}

.hmx2 {
    max-height: 16.2051282rem !important
}

.hmx3 {
    max-height: 24.3076923rem !important
}

.hmx4 {
    max-height: 32.4102564rem !important
}

.hmx5 {
    max-height: 40.5128205rem !important
}

.hmx6 {
    max-height: 48.6153846rem !important
}

.hmx7 {
    max-height: 56.7179487rem !important
}

.hmx8 {
    max-height: 64.8205128rem !important
}

.hmx9 {
    max-height: 72.9230769rem !important
}

.hmx10 {
    max-height: 81.025641rem !important
}

.hmx11 {
    max-height: 89.1282051rem !important
}

.hmx12 {
    max-height: 97.2307692rem !important
}

.hmx100 {
    max-height: 100% !important
}

.hmx-initial {
    max-height: initial !important
}

.hmn0 {
    min-height: 0 !important
}

.hmn1 {
    min-height: 8.1025641rem !important
}

.hmn2 {
    min-height: 16.2051282rem !important
}

.hmn3 {
    min-height: 24.3076923rem !important
}

.hmn4 {
    min-height: 32.4102564rem !important
}

.hmn5 {
    min-height: 40.5128205rem !important
}

.hmn6 {
    min-height: 48.6153846rem !important
}

.hmn7 {
    min-height: 56.7179487rem !important
}

.hmn8 {
    min-height: 64.8205128rem !important
}

.hmn9 {
    min-height: 72.9230769rem !important
}

.hmn10 {
    min-height: 81.025641rem !important
}

.hmn11 {
    min-height: 89.1282051rem !important
}

.hmn12 {
    min-height: 97.2307692rem !important
}

.hmn100 {
    min-height: 100% !important
}

.hmn-initial {
    min-height: initial !important
}


/*******************
    background color
******************/
.bgc-fff {
    background-color: #fff;
}

/*******************
    color
******************/

.c-red {
    color: red;
}

.c-white {
    color: #fff;
}

.c-dark-bule {
    color: #2e5067;
}

.bg-c-light-blue {
    background-color: #eff9ff;
}

.bg-c-light-gray {
    background-color: #f8f8f8;
}

.bg-c-white {
    background-color: #fff;
}

.bc-gray {
    border: 1px solid #d0d0d0;
}

.bg-c-gay-g {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(242, 242, 242, 1) 43%, rgba(239, 239, 239, 1) 100%);
}