/* Default */
*,*::before,*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,body {
    background-color: #121212;
    font-family: "Pretendard", sans-serif !important;
    padding: 0;
    font-size: 1.0rem;
    font-weight: 400;
    line-height: inherit;
    color: var(--color-white);
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23ffffff' d='M242.7 256l100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.5c-12.3 12.3-12.3 32.2 0 44.5L109.3 256 9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5L242.7 256z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px;
    height: 8px;
    width: 8px;
    cursor: pointer;
}
button {
    background: none;
    color: inherit;
    border: none;
    cursor: pointer;
    outline: inherit;
}
a {
    color: inherit;
    text-decoration: none;
}
li { list-style: none; }
input:focus { outline: none; }
input,button {
    font-family: "Pretendard", sans-serif !important;
}
h1,h2,h3,h4,h5,h6 { text-wrap: balance; }
a {
    color: var(--color-white) !important;
    text-decoration: none;
}
a:hover {
    color: var(--color-white-gray) !important;
    opacity: 0.7;
    cursor: pointer;
}
b,strong {
    font-weight: bolder;
}
hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}
img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.drag-none {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

img[src*="/accessories"],
img[src*="/armors"],
img[src*="/miscs"],
img[src*="/monsters"],
img[src*="/musics"],
img[src*="/perks"],
img[src*="/skills"],
img[src*="/spells"],
img[src*="/utilities"],
img[src*="/weapons"],
img[src*="null"] {
    width: 96px;
    max-width: 96px;
    min-height: 40px;
    object-fit: contain;
    max-height: 96px;
}
@media (max-width: 768px) {
    img[src*="/accessories"],
    img[src*="/armors"],
    img[src*="/miscs"],
    img[src*="/monsters"],
    img[src*="/musics"],
    img[src*="/perks"],
    img[src*="/skills"],
    img[src*="/spells"],
    img[src*="/utilities"],
    img[src*="/weapons"],
    img[src*="null"] {
        width: 100%;
        max-width: 64px;
        min-height: 40px;
        object-fit: contain;
        max-height: 96px;
    }
}
a:has(img[src*="null"]) {
    min-width: 96px;
    min-height: 96px;
}

/* Style */
/* Content */
@media (min-width: 768px) {
    .content-desktop-space {
        /* max-width: 70% !important; */
        max-width: min(70%, 970px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Skeleton */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #252525;
    height: 95px;
    border-radius: 8px;
}
.skeleton::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: loading 1.3s infinite linear;
}
@keyframes loading {
    0% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(200%);
    }
}

/* Background Image */
.background-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)),
        url("/Assets/image/background.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Background Set Image */
.bg-cover {
    background-size: cover;
}
.bg-center { background-position: center; }

/* Image Under Gradient */
.img-under-gradient {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

/* Text Gradient */
.text-gradient {
    background: linear-gradient(
        to left,
        rgba(0, 224, 255, 1) 0%,
        rgba(250, 0, 255, 1) 33%,
        rgba(0, 224, 255, 1) 66%,
        rgba(250, 0, 255, 1) 100%
    );
    background-repeat: repeat-x;
    background-size: 400%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* Button Design */
.btn-primary {
    color: #fff;
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
    border-radius: 4px;
    text-align: center;
    border: 0;
    height: 44px;
    min-width: 64px;
    padding: 0 19.5px;
    font-family: "Pretendard", sans-serif !important;
    cursor: pointer;
}
.btn-primary:hover {
    background-color: var(--color-dark-blue) !important;
    border-color: var(--color-dark-blue) !important;
    color: var(--color-white-gray);
}
.btn-outline {
    color: var(--color-white);
    background-color: unset;
    border: 1px solid var(--color-white);
    border-radius: 4px;
    text-align: center;
    height: 44px;
    min-width: 64px;
    padding: 0 19.5px;
    font-family: "Pretendard", sans-serif !important;
    cursor: pointer;
}
.btn-outline:hover {
    color: var(--color-white-gray);
}
.btn-danger {
    color: #fff;
    background-color: var(--color-red) !important;
    border-color: var(--color-red) !important;
    border-radius: 4px;
    text-align: center;
    border: 0;
    height: 44px;
    min-width: 64px;
    padding: 0 19.5px;
    font-family: "Pretendard", sans-serif !important;
    cursor: pointer;
}
.btn-danger:hover {
    background-color: var(--color-dark-red) !important;
    border-color: var(--color-dark-red) !important;
    color: var(--color-white-gray);
}
a.btn-primary,
a.btn-outline {
    align-content: center;
}
a.btn-primary:hover,
a.btn-outline:hover {
    opacity: 1;
}

/* Table */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
th,td {
    padding: 6px 15px;
}
th {
    color: var(--color-white);
    text-align: left;
}
tr {
    border-bottom: 1px solid var(--color-white);
}
@media (min-width: 768px) {
    thead,tbody {
        display: flex;
        flex-wrap: wrap;
    }
    thead tr,
    tbody tr {
        display: flex;
        flex: 0 0 50%;
        align-items: center;
    }
    th,td {
        flex: 1;
        padding: 8px;
    }
}

/* Content Box Design */
.content-box {
    background-color: var(--color-deep-dark-gray);
    border-radius: 10px;
    padding: 20px;
    width: 100%;
}
.content-box-full {
    background-color: var(--color-deep-dark-gray);
    padding: 20px;
    width: 100vw;
}

/* Google Ads */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* Line Height */
.line-height-1\.5 { line-height: 1.5; }
.line-height-1\.4 { line-height: 1.4; }
.line-height-1\.3 { line-height: 1.3; }
.line-height-1\.2 { line-height: 1.2; }
.line-height-1\.1 { line-height: 1.1; }
.line-height-0\.9 { line-height: 0.9; }
.line-height-0\.8 { line-height: 0.8; }

/* Text Wrap */
.text-wrap-balance { text-wrap: balance; }
.text-wrap-nowrap { text-wrap: nowrap; }
.text-wrap-wrap { text-wrap: wrap; }


/* UnderLine */
.underline { text-decoration: underline; }
.none-underline { text-decoration: none; }

/* Cursor */
.pointer { cursor: pointer; }

/* Width, Height */
.w-0 { width: 0; }
.w-auto { width: auto; }
.w-screen { width: 100vw; }
.w-100 { width: 100%; }
.w-90 { width: 90%; }
.w-80 { width: 80%; }
.w-70 { width: 70%; }
.w-60 { width: 60%; }
.w-50 { width: 50%; }
.w-45 { width: 45%; }
.w-40 { width: 40%; }
.w-33 { width: 33.333333%; }
.w-30 { width: 30%; }
.w-16 { width: 16.666666%; }
.h-0 { height: 0; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.h-100 { height: 100%; }
.h-90 { height: 90%; }
.h-80 { height: 80%; }
.h-70 { height: 70%; }
.h-50 { height: 50%; }
.h-45 { height: 45%; }
.h-40 { height: 40%; }
.h-33 { height: 33.333333%; }
.h-30 { height: 30%; }
@media (max-width: 768px) {
    .md-w-auto { width: auto !important; }
    .md-w-screen { width: 100vw !important; }
    .md-w-100 { width: 100% !important; }
    .md-w-90 { width: 90% !important; }
    .md-w-80 { width: 80% !important; }
    .md-w-70 { width: 70% !important; }
    .md-w-60 { width: 60% !important; }
    .md-w-50 { width: 50% !important; }
    .md-w-45 { width: 45% !important; }
    .md-w-40 { width: 40% !important; }
    .md-w-33 { width: 33.333333% !important; }
    .md-w-30 { width: 30% !important; }
    .md-h-auto { height: auto !important; }
    .md-h-screen { height: 100vh !important; }
    .md-h-100 { height: 100% !important; }
    .md-h-90 { height: 90% !important; }
    .md-h-80 { height: 80% !important; }
    .md-h-50 { height: 50% !important; }
    .md-h-40 { height: 40% !important; }
    .md-h-33 { height: 33.333333% !important; }
    .md-h-30 { height: 30% !important; }
}
/* Max Width, Height */
.max-w-auto { max-width: auto; }
.max-w-screen { max-height: 100vw; }
.max-w-100 { max-width: 100%; }
.max-w-90 { max-width: 90%; }
.max-w-80 { max-width: 80%; }
.max-w-70 { max-width: 70%; }
.max-w-60 { max-width: 60%; }
.max-w-50 { max-width: 50%; }
.max-w-45 { max-width: 45%; }
.max-w-40 { max-width: 40%; }
.max-w-33 { max-width: 33.333333%; }
.max-w-30 { max-width: 30%; }
.max-h-auto { max-height: auto; }
.max-h-screen { max-height: 100vh; }
.max-h-100 { max-height: 100%; }
.max-h-90 { max-height: 90%; }
.max-h-80 { max-height: 80%; }
.max-h-50 { max-height: 50%; }
.max-h-33 { max-height: 33.333333%; }
.max-h-30 { max-height: 30%; }
@media (max-width: 768px) {
    .md-max-w-auto { max-width: auto !important; }
    .md-max-w-screen { max-height: 100vw !important; }
    .md-max-w-100 { max-width: 100% !important; }
    .md-max-w-90 { max-width: 90% !important; }
    .md-max-w-80 { max-width: 80% !important; }
    .md-max-w-70 { max-width: 70% !important; }
    .md-max-w-60 { max-width: 60% !important; }
    .md-max-w-50 { max-width: 50% !important; }
    .md-max-w-45 { max-width: 45% !important; }
    .md-max-w-40 { max-width: 40% !important; }
    .md-max-w-33 { max-width: 33.333333% !important; }
    .md-max-h-auto { max-height: auto !important; }
    .md-max-h-screen { max-height: 100vh !important; }
    .md-max-h-100 { max-height: 100% !important; }
    .md-max-h-90 { max-height: 90% !important; }
    .md-max-h-80 { max-height: 80% !important; }
    .md-max-h-50 { max-height: 50% !important; }
    .md-max-h-45 { max-height: 45% !important; }
    .md-max-h-40 { max-height: 40% !important; }
    .md-max-h-33 { max-height: 33.333333% !important; }
    .md-max-h-30 { max-height: 30% !important; }
}
/* Min Width, Height */
.min-w-auto { min-width: auto; }
.min-w-screen { min-height: 100vw; }
.min-w-100 { min-width: 100%; }
.min-w-80 { min-width: 80%; }
.min-w-70 { min-width: 70%; }
.min-w-60 { min-width: 60%; }
.min-w-50 { min-width: 50%; }
.min-w-45 { min-width: 45%; }
.min-w-40 { min-width: 40%; }
.min-w-33 { min-width: 33.333333%; }
.min-w-30 { min-width: 30%; }
.min-h-auto { min-height: auto; }
.min-h-screen { min-height: 100vh; }
.min-h-100 { min-height: 100%; }
.min-h-80 { min-height: 80%; }
.min-h-50 { min-height: 50%; }
.min-h-33 { min-height: 33.333333%; }
.min-h-30 { min-height: 30%; }
@media (max-width: 768px) {
    .md-min-w-auto { min-width: auto !important; }
    .md-min-w-screen { min-height: 100vw !important; }
    .md-min-w-100 { min-width: 100% !important; }
    .md-min-w-80 { min-width: 80% !important; }
    .md-min-w-70 { min-width: 70% !important; }
    .md-min-w-60 { min-width: 60% !important; }
    .md-min-w-50 { min-width: 50% !important; }
    .md-min-w-33 { min-width: 33.333333% !important; }
    .md-min-w-30 { min-width: 30% !important; }
    .md-min-w-45 { min-width: 45% !important; }
    .md-min-w-40 { min-width: 40% !important; }
    .md-min-h-auto { min-height: auto !important; }
    .md-min-h-screen { min-height: 100vh !important; }
    .md-min-h-100 { min-height: 100% !important; }
    .md-min-h-80 { min-height: 80% !important; }
    .md-min-h-50 { min-height: 50% !important; }
    .md-min-h-33 { min-height: 33.333333% !important; }
    .md-min-h-30 { min-height: 30% !important; }
}


/* Top */
.top-0 { top: 0; }
/* Left */
.left-0 { left: 0; }
/* Right */
.right-0 { right: 0; }
/* Bottom */
.bottom-0 { bottom: 0; }

/* Font Size */
.font-2xs { font-size: .625rem; }
.font-xs { font-size: .75rem; }
.font-sm { font-size: .875rem; }
.font-base { font-size: 1.0rem; }
.font-lg { font-size: 1.125rem; }
.font-xl { font-size: 1.25rem; }
.font-2xl { font-size: 1.5rem; }
.font-3xl { font-size: 1.875rem; }
.font-4xl { font-size: 2.25rem; }
.font-5xl { font-size: 3.0rem; }
.font-6xl { font-size: 3.75rem; }
.font-7xl { font-size: 4.5rem; }
.font-8xl { font-size: 6.0rem; }
.font-9xl { font-size: 8.0rem; }
@media (max-width: 768px) {
    .md-font-2xs { font-size: .625rem; }
    .md-font-xs { font-size: .75rem; }
    .md-font-sm { font-size: .875rem; }
    .md-font-base { font-size: 1.0rem; }
    .md-font-lg { font-size: 1.125rem; }
    .md-font-xl { font-size: 1.25rem; }
    .md-font-2xl { font-size: 1.5rem; }
    .md-font-3xl { font-size: 1.875rem; }
    .md-font-4xl { font-size: 2.25rem; }
    .md-font-5xl { font-size: 3.0rem; }
    .md-font-6xl { font-size: 3.75rem; }
    .md-font-7xl { font-size: 4.5rem; }
    .md-font-8xl { font-size: 6.0rem; }
    .md-font-9xl { font-size: 8.0rem; }
}

/* Font Weight */
.font-100 { font-weight: 100; }
.font-200 { font-weight: 200; }
.font-300 { font-weight: 300; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-900 { font-weight: 900; }
.font-bold { font-weight: bold; }

/* Items Align */
.items-flex-start { align-items: flex-start; }
.items-start { align-items: start; }
.items-center { align-items: center; }
.items-flex-end { align-items: flex-end; }
.items-end { align-items: end; }
@media (max-width: 768px) {
    .md-items-flex-start { align-items: flex-start; }
    .md-items-start { align-items: start; }
    .md-items-center { align-items: center; }
    .md-items-flex-end { align-items: flex-end; }
    .md-items-end { align-items: end; }
}

/* Text Align */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-end { text-align: end; }
.text-last-center { text-align-last: center; }

/* Align Content */
.align-content-center { align-content: center; }
.align-content-start { align-content: start; }
.align-content-end { align-content: end; }

/* Font Style */
.font-default { font-family: "Pretendard", sans-serif; }
.font-aggro { font-family: "SBAggroB", sans-serif; }
.font-jalnan { font-family: "JalnanGothic", sans-serif; }

/* Colors */
.color-white { color: var(--color-white) !important; }
.color-black { color: var(--color-black) !important; }
.color-deep-dark-gray { color: var(--color-deep-dark-gray) !important; }
.color-dark-gray { color: var(--color-dark-gray) !important; }
.color-light-gray { color: var(--color-light-gray) !important; }
.color-white-gray { color: var(--color-white-gray) !important; }
.color-light-white-gray { color: var(--color-light-white-gray) !important; }
.color-blue { color: var(--color-blue) !important; }
.color-dark-blue { color: var(--color-dark-blue) !important; }
.color-red { color: var(--color-red) !important; }
.color-dark-red { color: var(--color-dark-red) !important; }
.color-light-red { color: var(--color-light-red) !important; }
.color-green { color: var(--color-green) !important; }
.color-light-green { color: var(--color-light-green) !important; }
.color-orange { color: var(--color-orange) !important; }
.color-yellow { color: var(--color-yellow) !important; }
.color-light-yellow { color: var(--color-light-yellow) !important; }
.color-purple { color: var(--color-purple) !important; }
.color-chzzk { color: var(--color-chzzk) !important; }
:root {
    --color-white: #fff;
    --color-black: #000;
    --color-deep-dark-gray: #1e1e1e;
    --color-dark-gray: #303032;
    --color-light-gray: #525255;
    --color-white-gray: #cccccc;
    --color-light-white-gray: #e5e7eb;
    --color-blue: #2d7ceb;
    --color-dark-blue: #1b74bd;
    --color-red: #f23645;
    --color-dark-red: #be2c39;
    --color-light-red: #f1583c;
    --color-green: #28a745;
    --color-light-green: #38c172;
    --color-orange: #ef984b;
    --color-yellow: #f4d35f;
    --color-light-yellow: #e3d88c;
    --color-purple: #783C8C;
    --color-chzzk: #00ffa3;
}
/* Background Color */
.bg-color-white { background-color: var(--color-white) !important; }
.bg-color-black { background-color: var(--color-black) !important; }
.bg-color-deep-dark-gray { background-color: var(--color-deep-dark-gray) !important; }
.bg-color-dark-gray { background-color: var(--color-dark-gray) !important; }
.bg-color-light-gray { background-color: var(--color-light-gray) !important; }
.bg-color-white-gray { background-color: var(--color-white-gray) !important; }
.bg-color-light-white-gray { background-color: var(--color-light-white-gray) !important; }
.bg-color-blue { background-color: var(--color-blue) !important; }
.bg-color-dark-blue { background-color: var(--color-dark-blue) !important; }
.bg-color-red { background-color: var(--color-red) !important; }
.bg-color-dark-red { background-color: var(--color-dark-red) !important; }
.bg-color-light-red { background-color: var(--color-light-red) !important; }
.bg-color-green { background-color: var(--color-green) !important; }
.bg-color-light-green { background-color: var(--color-light-green) !important; }
.bg-color-orange { background-color: var(--color-orange) !important; }
.bg-color-yellow { background-color: var(--color-yellow) !important; }
.bg-color-light-yellow { background-color: var(--color-light-yellow) !important; }
.bg-color-purple { background-color: var(--color-purple) !important; }

/* Border Color */
.border-color-white { border-color: var(--color-white) !important; }
.border-color-black { border-color: var(--color-black) !important; }
.border-color-deep-dark-gray { border-color: var(--color-deep-dark-gray) !important; }
.border-color-dark-gray { border-color: var(--color-dark-gray) !important; }
.border-color-light-gray { border-color: var(--color-light-gray) !important; }
.border-color-white-gray { border-color: var(--color-white-gray) !important; }
.border-color-light-white-gray { border-color: var(--color-light-white-gray) !important; }
.border-color-blue { border-color: var(--color-blue) !important; }
.border-color-dark-blue { border-color: var(--color-dark-blue) !important; }
.border-color-red { border-color: var(--color-red) !important; }
.border-color-dark-red { border-color: var(--color-dark-red) !important; }
.border-color-light-red { border-color: var(--color-light-red) !important; }
.border-color-green { border-color: var(--color-green) !important; }
.border-color-light-green { border-color: var(--color-light-green) !important; }
.border-color-orange { border-color: var(--color-orange) !important; }
.border-color-yellow { border-color: var(--color-yellow) !important; }
.border-color-light-yellow { border-color: var(--color-light-yellow) !important; }
.border-color-purple { border-color: var(--color-purple) !important; }

/* Display */
.d-block { display: block; }
.d-table { display: table; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-hidden { display: none; }
@media (max-width: 768px) {
    .md-d-block { display: block; }
    .md-d-inline-block { display: inline-block; }
    .md-d-flex { display: flex; }
    .md-d-grid { display: grid; }
    .md-d-hidden { display: none; }
}

.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }

/* Flex Direction */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
@media (max-width: 768px) {
    .md-flex-col { flex-direction: column; }
    .md-flex-row { flex-direction: row; }
}

/* Flex Grow */
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.flex-grow-3 { flex-grow: 3; }
.flex-grow-4 { flex-grow: 4; }
.flex-grow-5 { flex-grow: 5; }
.flex-grow-6 { flex-grow: 6; }
.flex-grow-7 { flex-grow: 7; }
.flex-grow-8 { flex-grow: 8; }
.flex-grow-9 { flex-grow: 9; }
.flex-grow-10 { flex-grow: 10; }

/* Visibility */
.hidden { visibility: hidden; }
.visible { visibility: visible; }

/* Position */
.p-static { position: static; }
.p-fixed { position: fixed; }
.p-absolute { position: absolute; }
.p-relative { position: relative; }
.p-sticky { position: sticky; }

/* Justify Content */
.justify-center { justify-content: center; }
.justify-start { justify-content: start; }
.justify-end { justify-content: end; }
.justify-flex-start { justify-content: flex-start; }
.justify-flex-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
@media (max-width: 768px) {
    .md-justify-center { justify-content: center; }
    .md-justify-start { justify-content: start; }
    .md-justify-end { justify-content: end; }
    .md-justify-flex-start { justify-content: flex-start; }
    .md-justify-flex-end { justify-content: flex-end; }
    .md-justify-between { justify-content: space-between; }
    .md-justify-around { justify-content: space-around; }
    .md-justify-evenly { justify-content: space-evenly; }
}

/* Justify Items  */
.justify-items-center { justify-items: center; }
.justify-items-start { justify-items: start; }
.justify-items-end { justify-items: end; }
.justify-items-stretch { justify-items: stretch; }
@media (max-width: 768px) {
    .md-justify-items-center { justify-items: center; }
    .md-justify-items-start { justify-items: start; }
    .md-justify-items-end { justify-items: end; }
    .md-justify-items-stretch { justify-items: stretch; }
}

.place-items-center { place-items: center; }
.place-items-start { place-items: start; }
.place-items-end { place-items: end; }
.place-items-stretch { place-items: stretch; }

/* White Space */
.nowrap { white-space: nowrap; }
.pre-wrap { white-space: pre-wrap; }
.break-spaces { white-space: break-spaces; }
.white-space-inherit { white-space: inherit; }

/* Custom Scroll */
.scrollbar::-webkit-scrollbar {
    width: 3px;
    height: 7px;
}
.scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-white-gray);
    border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-track {
    background: rgba(204, 204, 204, .1);
}

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-15 { opacity: 0.15; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-35 { opacity: 0.35; }
.opacity-40 { opacity: 0.4; }
.opacity-45 { opacity: 0.45; }
.opacity-50 { opacity: 0.5; }
.opacity-55 { opacity: 0.55; }
.opacity-60 { opacity: 0.6; }
.opacity-65 { opacity: 0.65; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-85 { opacity: 0.85; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }

/* Hover Opacity */
.hover-opacity:hover { opacity: 0.7; }

/* Z-Index */
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }
.z-6 { z-index: 6; }
.z-7 { z-index: 7; }
.z-8 { z-index: 8; }
.z-9 { z-index: 9; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* Border Solid */
.border-none { border: none; }
.border-solid { border: 1px solid; }
.border-solid-top { border-top: 1px solid; }
.border-solid-bottom { border-bottom: 1px solid; }
.border-solid-left { border-left: 1px solid; }
.border-solid-right { border-right: 1px solid; }

/* Border Radius */
.rounded-none { border-radius: 0px; }
.rounded-sm { border-radius: 0.125rem; }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-right-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.rounded-left-none {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.rounded-bottom-none {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.rounded-top-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Float */
.float-right { float: right; }
.float-left { float: left; }
.float-none { float: none; }

/* Delay */
.delay-0 { transition-delay: 0s; }
.delay-75 { transition-delay: 75ms; }
.delay-100 { transition-delay: 100ms; }
.delay-150 { transition-delay: 150ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }
.delay-700 { transition-delay: 700ms; }
.delay-1000 { transition-delay: 1000ms; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-clip { overflow: clip; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-clip { overflow-x: clip; }
.overflow-y-clip { overflow-y: clip; }
.overflow-x-visible { overflow-x: visible; }
.overflow-y-visible { overflow-y: visible; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: keep-all;
}

/* Object */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-top { object-position: top; }
.object-bottom { object-position: bottom; }
.object-center { object-position: center; }

/* Box Shadow */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow	{ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }
.shadow-none { box-shadow: 0 0 #0000; }
.shadow-custom { box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); }

/* Filter */
.blur-none { filter: blur(0); }
.blur-sm { filter: blur(4px); }
.blur { filter: blur(8px); }
.blur-md { filter: blur(12px); }
.blur-lg { filter: blur(16px); }
.blur-xl { filter: blur(24px); }
.blur-2xl { filter: blur(40px); }
.blur-3xl { filter: blur(64px); }
.brightness-0 { filter: brightness(0); }
.brightness-10 { filter: brightness(0.1); }
.brightness-20 { filter: brightness(0.2); }
.brightness-30 { filter: brightness(0.3); }
.brightness-40 { filter: brightness(0.4); }
.brightness-50 { filter: brightness(0.5); }
.brightness-60 { filter: brightness(0.6); }
.brightness-70 { filter: brightness(0.7); }
.brightness-80 { filter: brightness(0.8); }
.brightness-90 { filter: brightness(0.9); }
.brightness-100 { filter: brightness(1); }
/* Animation */
.animate-none { animation: none; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.animate-bounce { animation: bounce 1s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
.opacity-fade-out {
    transition: opacity .3s ease-out;
    overflow: hidden;
}
.animate-hover-scale { transition: scale 0.3s ease-in-out; }
.animate-hover-scale:hover { scale: 1.05; }
.animate-face-in { animation: faceIn 0.8s ease-out; }
@keyframes faceIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Margin */
/* mx */
.mx-reset { margin-left: initial; margin-right: initial; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-0\.5 { margin-left: 0.125rem; margin-right: 0.125rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-1\.5 { margin-left: 0.375rem; margin-right: 0.375rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-2\.5 { margin-left: 0.625rem; margin-right: 0.625rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-3\.5 { margin-left: 0.875rem; margin-right: 0.875rem; }
.mx-4 { margin-left: 1.0rem; margin-right: 1.0rem; }
.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-7 { margin-left: 1.75rem; margin-right: 1.75rem; }
.mx-8 { margin-left: 2.0rem; margin-right: 2.0rem; }
.mx-9 { margin-left: 2.25rem; margin-right: 2.25rem; }
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
.mx-11 { margin-left: 2.75rem; margin-right: 2.75rem; }
.mx-12 { margin-left: 3.0rem; margin-right: 3.0rem; }
.mx-13 { margin-left: 3.5rem; margin-right: 3.5rem; }
.mx-14 { margin-left: 4.0rem; margin-right: 4.0rem; }
.mx-15 { margin-left: 4.5rem; margin-right: 4.5rem; }
.mx-16 { margin-left: 5.0rem; margin-right: 5.0rem; }
.mx-17 { margin-left: 5.5rem; margin-right: 5.5rem; }
.mx-18 { margin-left: 6.0rem; margin-right: 6.0rem; }
/* ml */
.ml-reset { margin-left: initial; }
.ml-auto { margin-left: auto; }
.ml-0 { margin-left: 0; }
.ml-0\.5 { margin-left: 0.125rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-1\.5 { margin-left: 0.375rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-2\.5 { margin-left: 0.625rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-3\.5 { margin-left: 0.875rem; }
.ml-4 { margin-left: 1.0rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-7 { margin-left: 1.75rem; }
.ml-8 { margin-left: 2.0rem; }
.ml-9 { margin-left: 2.25rem; }
.ml-10 { margin-left: 2.5rem; }
.ml-11 { margin-left: 2.75rem; }
.ml-12 { margin-left: 3.0rem; }
.ml-13 { margin-left: 3.5rem; }
.ml-14 { margin-left: 4.0rem; }
.ml-15 { margin-left: 4.5rem; }
.ml-16 { margin-left: 5.0rem; }
.ml-17 { margin-left: 5.5rem; }
.ml-18 { margin-left: 6.0rem; }
/* mr */
.mr-reset { margin-right: initial; }
.mr-auto { margin-right: auto; }
.mr-0 { margin-right: 0; }
.mr-0\.5 { margin-right: 0.125rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-1\.5 { margin-right: 0.375rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-2\.5 { margin-right: 0.625rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-3\.5 { margin-right: 0.875rem; }
.mr-4 { margin-right: 1.0rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-7 { margin-right: 1.75rem; }
.mr-8 { margin-right: 2.0rem; }
.mr-9 { margin-right: 2.25rem; }
.mr-10 { margin-right: 2.5rem; }
.mr-11 { margin-right: 2.75rem; }
.mr-12 { margin-right: 3.0rem; }
.mr-13 { margin-right: 3.5rem; }
.mr-14 { margin-right: 4.0rem; }
.mr-15 { margin-right: 4.5rem; }
.mr-16 { margin-right: 5.0rem; }
.mr-17 { margin-right: 5.5rem; }
.mr-18 { margin-right: 6.0rem; }
/* my */
.my-reset { margin-top: initial; margin-bottom: initial; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-0\.5 { margin-top: 0.125rem; margin-bottom: 0.125rem; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-1\.5 { margin-top: 0.375rem; margin-bottom: 0.375rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-2\.5 { margin-top: 0.625rem; margin-bottom: 0.625rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-3\.5 { margin-top: 0.875rem; margin-bottom: 0.875rem; }
.my-4 { margin-top: 1.0rem; margin-bottom: 1.0rem; }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-7 { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.my-8 { margin-top: 2.0rem; margin-bottom: 2.0rem; }
.my-9 { margin-top: 2.25rem; margin-bottom: 2.25rem; }
.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.my-11 { margin-top: 2.75rem; margin-bottom: 2.75rem; }
.my-12 { margin-top: 3.0rem; margin-bottom: 3.0rem; }
.my-13 { margin-top: 3.5rem; margin-bottom: 3.5rem; }
.my-14 { margin-top: 4.0rem; margin-bottom: 4.0rem; }
.my-15 { margin-top: 4.5rem; margin-bottom: 4.5rem; }
.my-16 { margin-top: 5.0rem; margin-bottom: 5.0rem; }
.my-17 { margin-top: 5.5rem; margin-bottom: 5.5rem; }
.my-18 { margin-top: 6.0rem; margin-bottom: 6.0rem; }
/* mt */
.mt-reset { margin-top: initial; }
.mt-auto { margin-top: auto; }
.mt-0 { margin-top: 0; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-3\.5 { margin-top: 0.875rem; }
.mt-4 { margin-top: 1.0rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2.0rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-11 { margin-top: 2.75rem; }
.mt-12 { margin-top: 3.0rem; }
.mt-13 { margin-top: 3.5rem; }
.mt-14 { margin-top: 4.0rem; }
.mt-15 { margin-top: 4.5rem; }
.mt-16 { margin-top: 5.0rem; }
.mt-17 { margin-top: 5.5rem; }
.mt-18 { margin-top: 6.0rem; }
/* mb */
.mb-reset { margin-bottom: initial; }
.mb-auto { margin-bottom: auto; }
.mb-0 { margin-bottom: 0; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-3\.5 { margin-bottom: 0.875rem; }
.mb-4 { margin-bottom: 1.0rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2.0rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-11 { margin-bottom: 2.75rem; }
.mb-12 { margin-bottom: 3.0rem; }
.mb-13 { margin-bottom: 3.5rem; }
.mb-14 { margin-bottom: 4.0rem; }
.mb-15 { margin-bottom: 4.5rem; }
.mb-16 { margin-bottom: 5.0rem; }
.mb-17 { margin-bottom: 5.5rem; }
.mb-18 { margin-bottom: 6.0rem; }
@media (max-width: 768px) {
    .md-mx-reset { margin-left: initial; margin-right: initial; }
    .md-ml-reset { margin-left: initial; }
    .md-mr-reset { margin-right: initial; }
    .md-my-reset { margin-top: initial; margin-bottom: initial; }
    .md-mt-reset { margin-top: initial; }
    .md-mb-reset { margin-bottom: initial; }
}


/* Padding */
/* px */
.px-auto { padding-left: auto; padding-right: auto; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-0\.5 { padding-left: 0.125rem; padding-right: 0.125rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1.0rem; padding-right: 1.0rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2.0rem; padding-right: 2.0rem; }
.px-9 { padding-left: 2.25rem; padding-right: 2.25rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-11 { padding-left: 2.75rem; padding-right: 2.75rem; }
.px-12 { padding-left: 3.0rem; padding-right: 3.0rem; }
.px-13 { padding-left: 3.5rem; padding-right: 3.5rem; }
.px-14 { padding-left: 4.0rem; padding-right: 4.0rem; }
.px-15 { padding-left: 4.5rem; padding-right: 4.5rem; }
.px-16 { padding-left: 5.0rem; padding-right: 4.5rem; }
.px-17 { padding-left: 5.5rem; padding-right: 4.5rem; }
.px-18 { padding-left: 6.0rem; padding-right: 4.5rem; }
/* pl */
.pl-auto { padding-left: auto; }
.pl-0 { padding-left: 0; }
.pl-0\.5 { padding-left: 0.125rem; }
.pl-1 { padding-left: 0.25rem; }
.pl-1\.5 { padding-left: 0.375rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-2\.5 { padding-left: 0.625rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-3\.5 { padding-left: 0.875rem; }
.pl-4 { padding-left: 1.0rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-7 { padding-left: 1.75rem; }
.pl-8 { padding-left: 2.0rem; }
.pl-9 { padding-left: 2.25rem; }
.pl-10 { padding-left: 2.5rem; }
.pl-11 { padding-left: 2.75rem; }
.pl-12 { padding-left: 3.0rem; }
.pl-13 { padding-left: 3.5rem; }
.pl-14 { padding-left: 4.0rem; }
.pl-15 { padding-left: 4.5rem; }
.pl-16 { padding-left: 5.0rem; }
.pl-17 { padding-left: 5.5rem; }
.pl-18 { padding-left: 6.0rem; }
/* pr */
.pr-auto { padding-right: auto; }
.pr-0 { padding-right: 0; }
.pr-0\.5 { padding-right: 0.125rem; }
.pr-1 { padding-right: 0.25rem; }
.pr-1\.5 { padding-right: 0.375rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-2\.5 { padding-right: 0.625rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-3\.5 { padding-right: 0.875rem; }
.pr-4 { padding-right: 1.0rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-6 { padding-right: 1.5rem; }
.pr-7 { padding-right: 1.75rem; }
.pr-8 { padding-right: 2.0rem; }
.pr-9 { padding-right: 2.25rem; }
.pr-10 { padding-right: 2.5rem; }
.pr-11 { padding-right: 2.75rem; }
.pr-12 { padding-right: 3.0rem; }
.pr-13 { padding-right: 3.5rem; }
.pr-14 { padding-right: 4.0rem; }
.pr-15 { padding-right: 4.5rem; }
.pr-16 { padding-right: 5.0rem; }
.pr-17 { padding-right: 5.5rem; }
.pr-18 { padding-right: 6.0rem; }
/* py */
.py-auto { padding-top: auto; padding-bottom: auto; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1.0rem; padding-bottom: 1.0rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-8 { padding-top: 2.0rem; padding-bottom: 2.0rem; }
.py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.py-12 { padding-top: 3.0rem; padding-bottom: 3.0rem; }
.py-13 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-14 { padding-top: 4.0rem; padding-bottom: 4.0rem; }
.py-15 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.py-16 { padding-top: 5.0rem; padding-bottom: 4.5rem; }
.py-17 { padding-top: 5.5rem; padding-bottom: 4.5rem; }
.py-18 { padding-top: 6.0rem; padding-bottom: 4.5rem; }
/* pt */
.pt-auto { padding-top: auto; }
.pt-0 { padding-top: 0; }
.pt-0\.5 { padding-top: 0.125rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-1\.5 { padding-top: 0.375rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-2\.5 { padding-top: 0.625rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-3\.5 { padding-top: 0.875rem; }
.pt-4 { padding-top: 1.0rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-7 { padding-top: 1.75rem; }
.pt-8 { padding-top: 2.0rem; }
.pt-9 { padding-top: 2.25rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-11 { padding-top: 2.75rem; }
.pt-12 { padding-top: 3.0rem; }
.pt-13 { padding-top: 3.5rem; }
.pt-14 { padding-top: 4.0rem; }
.pt-15 { padding-top: 4.5rem; }
.pt-16 { padding-top: 5.0rem; }
.pt-17 { padding-top: 5.5rem; }
.pt-18 { padding-top: 6.0rem; }
/* pb */
.pb-auto { padding-bottom: auto; }
.pb-0 { padding-bottom: 0; }
.pb-0\.5 { padding-bottom: 0.125rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-1\.5 { padding-bottom: 0.375rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-2\.5 { padding-bottom: 0.625rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-3\.5 { padding-bottom: 0.875rem; }
.pb-4 { padding-bottom: 1.0rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-7 { padding-bottom: 1.75rem; }
.pb-8 { padding-bottom: 2.0rem; }
.pb-9 { padding-bottom: 2.25rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-11 { padding-bottom: 2.75rem; }
.pb-12 { padding-bottom: 3.0rem; }
.pb-13 { padding-bottom: 3.5rem; }
.pb-14 { padding-bottom: 4.0rem; }
.pb-15 { padding-bottom: 4.5rem; }
.pb-16 { padding-bottom: 5.0rem; }
.pb-17 { padding-bottom: 5.5rem; }
.pb-18 { padding-bottom: 6.0rem; }

/* Grid Columns */
.grid-cols-base { grid-template-columns: repeat(1, 100%); }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid-cols-none { grid-template-columns: none; }
@media (max-width: 768px) {
    .md-grid-cols-base { grid-template-columns: repeat(1, 100%); }
    .md-grid-cols-1 { grid-template-columns: repeat(1, 80%); }
    .md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .md-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .md-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .md-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .md-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .md-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md-grid-cols-none { grid-template-columns: none; }
}

/* Grid Rows */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.grid-rows-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); }
.grid-rows-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); }
.grid-rows-9 { grid-template-rows: repeat(9, minmax(0, 1fr)); }
.grid-rows-10 { grid-template-rows: repeat(10, minmax(0, 1fr)); }
.grid-rows-11 { grid-template-rows: repeat(11, minmax(0, 1fr)); }
.grid-rows-12 { grid-template-rows: repeat(12, minmax(0, 1fr)); }
.grid-rows-none { grid-template-rows: none; }

/* Grid Gap */
.gap-0 { gap: 0px; }
.gap-x-0 { column-gap: 0px; }
.gap-y-0 { row-gap: 0px; }
.gap-0\.5 { gap: 0.125rem; }
.gap-x-0\.5 { column-gap: 0.125rem; }
.gap-y-0\.5 { row-gap: 0.125rem; }
.gap-1 { gap: 0.25rem; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-x-1\.5 { column-gap: 0.375rem; }
.gap-y-1\.5 { row-gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-x-2\.5 { column-gap: 0.625rem; }
.gap-y-2\.5 { row-gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-x-3\.5 { column-gap: 0.875rem; }
.gap-y-3\.5 { row-gap: 0.875rem; }
.gap-4 { gap: 1rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-5 { row-gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-7 { gap: 1.75rem; }
.gap-x-7 { column-gap: 1.75rem; }
.gap-y-7 { row-gap: 1.75rem; }
.gap-8 { gap: 2rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-9 { gap: 2.25rem; }
.gap-x-9 { column-gap: 2.25rem; }
.gap-y-9 { row-gap: 2.25rem; }
.gap-10 { gap: 2.5rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-11 { gap: 2.75rem; }
.gap-x-11 { column-gap: 2.75rem; }
.gap-y-11 { row-gap: 2.75rem; }
.gap-12 { gap: 3rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-y-12 { row-gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-x-14 { column-gap: 3.5rem; }
.gap-y-14 { row-gap: 3.5rem; }
.gap-16 { gap: 4rem; }
.gap-x-16 { column-gap: 4rem; }
.gap-y-16 { row-gap: 4rem; }
.gap-20 { gap: 5rem; }
.gap-x-20 { column-gap: 5rem; }
.gap-y-20 { row-gap: 5rem; }
.gap-24 { gap: 6rem; }
.gap-x-24 { column-gap: 6rem; }
.gap-y-24 { row-gap: 6rem; }
.gap-28 { gap: 7rem; }
.gap-x-28 { column-gap: 7rem; }
.gap-y-28 { row-gap: 7rem; }
.gap-32 { gap: 8rem; }
.gap-x-32 { column-gap: 8rem; }
.gap-y-32 { row-gap: 8rem; }