@charset "utf-8";

@import "./reset.css";
:root {
    --brand-primary: #37dc6c;
    --brand-primary2: #00adef;
}

body,
html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-size: 16px;
    position: relative;
    scroll-behavior: smooth;
    width: 100vw;
    overflow-x: hidden;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* font-family: 'Spoqa Han Sans Neo', 'sans-serif'; */
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    -webkit-font-smoothing: antialiased;
}
*::-webkit-scrollbar {
    display: none;
}

a {
    text-decoration: none;
    cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1;
    margin: 0;
}
nav,
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.relative {
    position: relative;
}
.d-flex {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.d-flex.inline {
    display: inline-flex;
}
.d-flex.aligntop {
    align-items: flex-start;
}
.d-flex.alignbottom {
    align-items: flex-end;
}
.d-flex.stretch {
    align-items: stretch;
}
.d-flex.center {
    align-items: center;
    justify-content: center;
}
.d-flex.left {
    justify-content: flex-start;
}
.d-flex.right {
    justify-content: flex-end;
}
.flex1 {
    flex: 1;
}
.flex2 {
    flex: 2;
}
.flex3 {
    flex: 3;
}
.flex4 {
    flex: 4;
}
.flex5 {
    flex: 5;
}
.flex6 {
    flex: 6;
}
.flex7 {
    flex: 7;
}
.flex8 {
    flex: 8;
}
.flex9 {
    flex: 9;
}
.flex10 {
    flex: 10;
}
.flex11 {
    flex: 11;
}
.flex12 {
    flex: 12;
}
.d-flex.column {
    flex-direction: column !important;
}
.d-flex.space-between {
    justify-content: space-between !important;
}
.d-flex.space-between > div {
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .xs-d-column {
        display: flex;
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

.width100 {
    width: 100% !important;
}
.heightauto {
    height: auto !important;
}
.height100 {
    height: 100% !important;
}

.border {
    border: 1px solid #eeeeee;
}
.border1 {
    border: 1px solid #eeeeee;
}
.border-top {
    border-top: 1px solid #eeeeee;
}
.border-left {
    border-left: 1px solid #eeeeee;
}
.border-right {
    border-right: 1px solid #eeeeee;
}
.border-bottom {
    border-bottom: 1px solid #eeeeee;
}

.border-red {
    border-color: #ff3100 !important;
}

.border-radius {
    border-radius: 8px !important;
    /* overflow: hidden; */
}
.border-radius .border-radius {
    border-radius: 6px !important;
}
.border-radius .border-radius .border-radius {
    border-radius: 4px !important;
}
.border-round {
    border-radius: 100px !important;
    overflow: hidden;
}
.border-radius-0,
.no-border-radius {
    border-radius: 0 !important;
}
@media (max-width: 768px) {
    .d-flex.xs-column {
        flex-direction: column !important;
    }
    .xs-border-radius-0{
        border-radius: 0 !important;
    }
}
.border-radius-4 {
    border-radius: 4px !important;
}
.border-radius-6 {
    border-radius: 6px !important;
}
.border-radius-8 {
    border-radius: 8px !important;
}
.border-radius-12 {
    border-radius: 12px !important;
}
.border-radius-16 {
    border-radius: 16px !important;
}
.border-radius-999 {
    border-radius: 999px !important;
}
.border-radius-s {
    border-radius: var(--border-radius-s) !important;
}
.border-radius-m {
    border-radius: var(--border-radius-m) !important;
}
.border-radius-l {
    border-radius: var(--border-radius-l) !important;
}

.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-shadow{
    text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.3);
}

.ft10 {
    font-size: 10px !important;
}
.ft11 {
    font-size: 11px !important;
}
.ft12 {
    font-size: 12px !important;
}
.ft13 {
    font-size: 13px !important;
}
.ft14 {
    font-size: 14px !important;
}
.ft15 {
    font-size: 15px !important;
}
.ft16 {
    font-size: 16px !important;
}
.ft17 {
    font-size: 17px !important;
}
.ft18 {
    font-size: 18px !important;
}
.ft19 {
    font-size: 19px !important;
}
.ft20 {
    font-size: 20px !important;
}
.ft22 {
    font-size: 22px !important;
}
.ft24 {
    font-size: 24px !important;
}
.ft26 {
    font-size: 26px !important;
}
.ft28 {
    font-size: 28px !important;
}
.ft30 {
    font-size: 30px !important;
}
.ft39 {
    font-size: 39px !important;
}
.ft42 {
    font-size: 42px !important;
}

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

.text-333,
.text-black {
    color: #333 !important;
}
.text-111 {
    color: #111111 !important;
}
.text-222 {
    color: #222222 !important;
}
.text-333 {
    color: #333333 !important;
}
.text-444 {
    color: #444444 !important;
}
.text-555 {
    color: #555555 !important;
}
.text-666 {
    color: #666666 !important;
}
.text-777 {
    color: #777777 !important;
}
.text-888 {
    color: #888888 !important;
}
.text-999 {
    color: #999999 !important;
}
.text-white {
    color: #FFF !important;
}
.text-gray {
    color: #888 !important;
}
.text-red {
    color: red !important;
}
.text-primary {
    color: var(--brand-primary) !important;
}
.text-primary2 {
    color: var(--brand-primary2) !important;
}

@media (max-width: 768px) {
    .xs-ft10 {
        font-size: 10px !important;
    }
    .xs-ft11 {
        font-size: 11px !important;
    }
    .xs-ft12 {
        font-size: 12px !important;
    }
    .xs-ft14 {
        font-size: 14px !important;
    }
    .xs-ft15 {
        font-size: 15px !important;
    }
    .xs-ft16 {
        font-size: 16px !important;
    }
    .xs-ft18 {
        font-size: 18px !important;
    }
    .xs-ft20 {
        font-size: 20px !important;
    }
    .xs-ft22 {
        font-size: 22px !important;
    }
    .xs-ft24 {
        font-size: 24px !important;
    }
    .xs-ft26 {
        font-size: 26px !important;
    }
}
@media (min-width: 769px) {
    .only-mobile {
        display: none !important;
    }
}
@media (max-width: 768px) {
    .only-pc {
        display: none !important;
    }
}

.bg-gray-lighter {
    background-color: #f3f3f3;
}
.bg-orange,
.bg-primary {
    background-color: var(--brand-primary) !important;
    color: #FFF !important;
    border-color: var(--brand-primary) !important;
}
.bg-white {
    background-color: #FFF !important;
}
.bg-transparent {
    background-color: transparent !important;
}
@media (max-width: 768px) {
    .xs-bg-white{
        background-color: #FFF !important;
    }
    .xs-bg-transparent{
        background-color: transparent !important;
    }
}

.bold {
    font-weight: bold !important;
}
.line1 {
    line-height: 1 !important;
}
.line13 {
    line-height: 1.3 !important;
}
.line14 {
    line-height: 1.4 !important;
}
.line15 {
    line-height: 1.5 !important;
}
.line16 {
    line-height: 1.6 !important;
}
.line17 {
    line-height: 1.7 !important;
}
.line18 {
    line-height: 1.8 !important;
}
.line2 {
    line-height: 2 !important;
}
.line3 {
    line-height: 3 !important;
}
.cursor-pointer {
    cursor: pointer;
}

p,
span {
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}

.underline {
    text-decoration: underline;
}
a.underline {
    cursor: pointer;
}

.ellipsable,
.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.ellipsis2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: auto;
    max-height: 3em;
}

/*pa, py, px*/

.pa-0 {
    padding: 0;
}
.pa-1 {
    padding: 1px!important;
}
.pa-2 {
    padding: 2px!important;
}
.pa-3 {
    padding: 3px!important;
}
.pa-5 {
    padding: 5px!important;
}
.pa-8 {
    padding: 8px!important;
}
.pa-10 {
    padding: 10px!important;
}
.pa-15 {
    padding: 15px!important;
}
.pa-20 {
    padding: 20px!important;
}
.pa-25 {
    padding: 25px!important;
}
.pa-30 {
    padding: 30px!important;
}
.pa-35 {
    padding: 35px!important;
}
.pa-40 {
    padding: 40px!important;
}
.pa-60 {
    padding: 60px!important;
}
.pa-80 {
    padding: 80px!important;
}
.pa-120 {
    padding: 120px!important;
}

.pt-0 {
    padding-top: 0px!important;
}
.pt-1 {
    padding-top: 1px!important;
}
.pt-2 {
    padding-top: 2px!important;
}
.pt-3 {
    padding-top: 3px!important;
}
.pt-5 {
    padding-top: 5px!important;
}
.pt-8 {
    padding-top: 8px!important;
}
.pt-10 {
    padding-top: 10px!important;
}
.pt-15 {
    padding-top: 15px!important;
}
.pt-20 {
    padding-top: 20px!important;
}
.pt-25 {
    padding-top: 25px!important;
}
.pt-30 {
    padding-top: 30px!important;
}
.pt-35 {
    padding-top: 35px!important;
}
.pt-40 {
    padding-top: 40px!important;
}
.pt-60 {
    padding-top: 60px!important;
}
.pt-80 {
    padding-top: 80px!important;
}
.pt-120 {
    padding-top: 120px!important;
}

.pb-0 {
    padding-bottom: 0px!important;
}
.pb-1 {
    padding-bottom: 1px!important;
}
.pb-2 {
    padding-bottom: 2px!important;
}
.pb-3 {
    padding-bottom: 3px!important;
}
.pb-5 {
    padding-bottom: 5px!important;
}
.pb-8 {
    padding-bottom: 8px!important;
}
.pb-10 {
    padding-bottom: 10px!important;
}
.pb-15 {
    padding-bottom: 15px!important;
}
.pb-20 {
    padding-bottom: 20px!important;
}
.pb-25 {
    padding-bottom: 25px!important;
}
.pb-30 {
    padding-bottom: 30px!important;
}
.pb-35 {
    padding-bottom: 35px!important;
}
.pb-40 {
    padding-bottom: 40px!important;
}
.pb-60 {
    padding-bottom: 60px!important;
}
.pb-80 {
    padding-bottom: 80px!important;
}
.pb-120 {
    padding-bottom: 120px!important;
}

.py-0 {
    padding-top: 0px!important;
    padding-bottom: 0px!important;
}
.py-1 {
    padding-top: 1px!important;
    padding-bottom: 1px!important;
}
.py-2 {
    padding-top: 2px!important;
    padding-bottom: 2px!important;
}
.py-3 {
    padding-top: 3px!important;
    padding-bottom: 3px!important;
}
.py-5 {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}
.py-8 {
    padding-top: 8px!important;
    padding-bottom: 8px!important;
}
.py-10 {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}
.py-15 {
    padding-top: 15px!important;
    padding-bottom: 15px!important;
}
.py-20 {
    padding-top: 20px!important;
    padding-bottom: 20px!important;
}
.py-25 {
    padding-top: 25px!important;
    padding-bottom: 25px!important;
}
.py-30 {
    padding-top: 30px!important;
    padding-bottom: 30px!important;
}
.py-35 {
    padding-top: 35px!important;
    padding-bottom: 35px!important;
}
.py-40 {
    padding-top: 40px!important;
    padding-bottom: 40px!important;
}
.py-60 {
    padding-top: 60px!important;
    padding-bottom: 60px!important;
}
.py-80 {
    padding-top: 80px!important;
    padding-bottom: 80px!important;
}
.py-120 {
    padding-top: 120px!important;
    padding-bottom: 120px!important;
}

.pl-0 {
    padding-left: 0px!important;
}
.pl-1 {
    padding-left: 1px!important;
}
.pl-2 {
    padding-left: 2px!important;
}
.pl-3 {
    padding-left: 3px!important;
}
.pl-5 {
    padding-left: 5px!important;
}
.pl-8 {
    padding-left: 8px!important;
}
.pl-10 {
    padding-left: 10px!important;
}
.pl-15 {
    padding-left: 15px!important;
}
.pl-20 {
    padding-left: 20px!important;
}
.pl-25 {
    padding-left: 25px!important;
}
.pl-30 {
    padding-left: 30px!important;
}
.pl-35 {
    padding-left: 35px!important;
}
.pl-40 {
    padding-left: 40px!important;
}
.pl-60 {
    padding-left: 60px!important;
}
.pl-80 {
    padding-left: 80px!important;
}
.pl-120 {
    padding-left: 120px!important;
}

.pr-0 {
    padding-right: 0px!important;
}
.pr-1 {
    padding-right: 1px!important;
}
.pr-2 {
    padding-right: 2px!important;
}
.pr-3 {
    padding-right: 3px!important;
}
.pr-5 {
    padding-right: 5px!important;
}
.pr-8 {
    padding-right: 8px!important;
}
.pr-10 {
    padding-right: 10px!important;
}
.pr-15 {
    padding-right: 15px!important;
}
.pr-20 {
    padding-right: 20px!important;
}
.pr-25 {
    padding-right: 25px!important;
}
.pr-30 {
    padding-right: 30px!important;
}
.pr-35 {
    padding-right: 35px!important;
}
.pr-40 {
    padding-right: 40px!important;
}
.pr-60 {
    padding-right: 60px!important;
}
.pr-80 {
    padding-right: 80px!important;
}
.pr-120 {
    padding-right: 120px!important;
}

.px-0 {
    padding-left: 0px!important;
    padding-right: 0px!important;
}
.px-1 {
    padding-left: 1px!important;
    padding-right: 1px!important;
}
.px-2 {
    padding-left: 2px!important;
    padding-right: 2px!important;
}
.px-3 {
    padding-left: 3px!important;
    padding-right: 3px!important;
}
.px-5 {
    padding-left: 5px!important;
    padding-right: 5px!important;
}
.px-8 {
    padding-left: 8px!important;
    padding-right: 8px!important;
}
.px-10 {
    padding-left: 10px!important;
    padding-right: 10px!important;
}
.px-15 {
    padding-left: 15px!important;
    padding-right: 15px!important;
}
.px-20 {
    padding-left: 20px!important;
    padding-right: 20px!important;
}
.px-25 {
    padding-left: 25px!important;
    padding-right: 25px!important;
}
.px-30 {
    padding-left: 30px!important;
    padding-right: 30px!important;
}
.px-35 {
    padding-left: 35px!important;
    padding-right: 35px!important;
}
.px-40 {
    padding-left: 40px!important;
    padding-right: 40px!important;
}
.px-60 {
    padding-left: 60px!important;
    padding-right: 60px!important;
}
.px-80 {
    padding-left: 80px!important;
    padding-right: 80px!important;
}
.px-120 {
    padding-left: 120px!important;
    padding-right: 120px!important;
}

.ma-0 {
    margin: 0;
}
.ma-1 {
    margin: 1px!important;
}
.ma-2 {
    margin: 2px!important;
}
.ma-3 {
    margin: 3px!important;
}
.ma-5 {
    margin: 5px!important;
}
.ma-8 {
    margin: 8px!important;
}
.ma-10 {
    margin: 10px!important;
}
.ma-15 {
    margin: 15px!important;
}
.ma-20 {
    margin: 20px!important;
}
.ma-25 {
    margin: 25px!important;
}
.ma-30 {
    margin: 30px!important;
}
.ma-35 {
    margin: 35px!important;
}
.ma-40 {
    margin: 40px!important;
}
.ma-60 {
    margin: 60px!important;
}
.ma-80 {
    margin: 80px!important;
}
.ma-120 {
    margin: 120px!important;
}

.mt-0 {
    margin-top: 0px!important;
}
.mt-1 {
    margin-top: 1px!important;
}
.mt-2 {
    margin-top: 2px!important;
}
.mt-3 {
    margin-top: 3px!important;
}
.mt-5 {
    margin-top: 5px!important;
}
.mt-8 {
    margin-top: 8px!important;
}
.mt-10 {
    margin-top: 10px!important;
}
.mt-15 {
    margin-top: 15px!important;
}
.mt-20 {
    margin-top: 20px!important;
}
.mt-25 {
    margin-top: 25px!important;
}
.mt-30 {
    margin-top: 30px!important;
}
.mt-35 {
    margin-top: 35px!important;
}
.mt-40 {
    margin-top: 40px!important;
}
.mt-60 {
    margin-top: 60px!important;
}
.mt-80 {
    margin-top: 80px!important;
}
.mt-120 {
    margin-top: 120px!important;
}

.mb-0 {
    margin-bottom: 0px!important;
}
.mb-1 {
    margin-bottom: 1px!important;
}
.mb-2 {
    margin-bottom: 2px!important;
}
.mb-3 {
    margin-bottom: 3px!important;
}
.mb-5 {
    margin-bottom: 5px!important;
}
.mb-8 {
    margin-bottom: 8px!important;
}
.mb-10 {
    margin-bottom: 10px!important;
}
.mb-15 {
    margin-bottom: 15px!important;
}
.mb-20 {
    margin-bottom: 20px!important;
}
.mb-25 {
    margin-bottom: 25px!important;
}
.mb-30 {
    margin-bottom: 30px!important;
}
.mb-35 {
    margin-bottom: 35px!important;
}
.mb-40 {
    margin-bottom: 40px!important;
}
.mb-60 {
    margin-bottom: 60px!important;
}
.mb-80 {
    margin-bottom: 80px!important;
}
.mb-120 {
    margin-bottom: 120px!important;
}

.my-0 {
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}
.my-1 {
    margin-top: 1px!important;
    margin-bottom: 1px!important;
}
.my-2 {
    margin-top: 2px!important;
    margin-bottom: 2px!important;
}
.my-3 {
    margin-top: 3px!important;
    margin-bottom: 3px!important;
}
.my-5 {
    margin-top: 5px!important;
    margin-bottom: 5px!important;
}
.my-8 {
    margin-top: 8px!important;
    margin-bottom: 8px!important;
}
.my-10 {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}
.my-15 {
    margin-top: 15px!important;
    margin-bottom: 15px!important;
}
.my-20 {
    margin-top: 20px!important;
    margin-bottom: 20px!important;
}
.my-25 {
    margin-top: 25px!important;
    margin-bottom: 25px!important;
}
.my-30 {
    margin-top: 30px!important;
    margin-bottom: 30px!important;
}
.my-35 {
    margin-top: 35px!important;
    margin-bottom: 35px!important;
}
.my-40 {
    margin-top: 40px!important;
    margin-bottom: 40px!important;
}
.my-60 {
    margin-top: 60px!important;
    margin-bottom: 60px!important;
}
.my-80 {
    margin-top: 80px!important;
    margin-bottom: 80px!important;
}
.my-120 {
    margin-top: 120px!important;
    margin-bottom: 120px!important;
}

.ml-0 {
    margin-left: 0px!important;
}
.ml-1 {
    margin-left: 1px!important;
}
.ml-2 {
    margin-left: 2px!important;
}
.ml-3 {
    margin-left: 3px!important;
}
.ml-5 {
    margin-left: 5px!important;
}
.ml-8 {
    margin-left: 8px!important;
}
.ml-10 {
    margin-left: 10px!important;
}
.ml-15 {
    margin-left: 15px!important;
}
.ml-20 {
    margin-left: 20px!important;
}
.ml-25 {
    margin-left: 25px!important;
}
.ml-30 {
    margin-left: 30px!important;
}
.ml-35 {
    margin-left: 35px!important;
}
.ml-40 {
    margin-left: 40px!important;
}
.ml-60 {
    margin-left: 60px!important;
}
.ml-80 {
    margin-left: 80px!important;
}
.ml-120 {
    margin-left: 120px!important;
}

.mr-0 {
    margin-right: 0px!important;
}
.mr-1 {
    margin-right: 1px!important;
}
.mr-2 {
    margin-right: 2px!important;
}
.mr-3 {
    margin-right: 3px!important;
}
.mr-5 {
    margin-right: 5px!important;
}
.mr-8 {
    margin-right: 8px!important;
}
.mr-10 {
    margin-right: 10px!important;
}
.mr-15 {
    margin-right: 15px!important;
}
.mr-20 {
    margin-right: 20px!important;
}
.mr-25 {
    margin-right: 25px!important;
}
.mr-30 {
    margin-right: 30px!important;
}
.mr-35 {
    margin-right: 35px!important;
}
.mr-40 {
    margin-right: 40px!important;
}
.mr-60 {
    margin-right: 60px!important;
}
.mr-80 {
    margin-right: 80px!important;
}
.mr-120 {
    margin-right: 120px!important;
}

.mx-0 {
    margin-left: 0px!important;
    margin-right: 0px!important;
}
.mx-1 {
    margin-left: 1px!important;
    margin-right: 1px!important;
}
.mx-2 {
    margin-left: 2px!important;
    margin-right: 2px!important;
}
.mx-1 {
    margin-left: 1px!important;
    margin-right: 1px!important;
}
.mx-2 {
    margin-left: 2px!important;
    margin-right: 2px!important;
}
.mx-3 {
    margin-left: 3px!important;
    margin-right: 3px!important;
}
.mx-5 {
    margin-left: 5px!important;
    margin-right: 5px!important;
}
.mx-8 {
    margin-left: 8px!important;
    margin-right: 8px!important;
}
.mx-10 {
    margin-left: 10px!important;
    margin-right: 10px!important;
}
.mx-15 {
    margin-left: 15px!important;
    margin-right: 15px!important;
}
.mx-20 {
    margin-left: 20px!important;
    margin-right: 20px!important;
}
.mx-25 {
    margin-left: 25px!important;
    margin-right: 25px!important;
}
.mx-30 {
    margin-left: 30px!important;
    margin-right: 30px!important;
}
.mx-35 {
    margin-left: 35px!important;
    margin-right: 35px!important;
}
.mx-40 {
    margin-left: 40px!important;
    margin-right: 40px!important;
}
.mx-60 {
    margin-left: 60px!important;
    margin-right: 60px!important;
}
.mx-80 {
    margin-left: 80px!important;
    margin-right: 80px!important;
}
.mx-120 {
    margin-left: 120px!important;
    margin-right: 120px!important;
}

.mt--0 {
    margin-top: -0px!important;
}
.mt--3 {
    margin-top: -3px!important;
}
.mt--5 {
    margin-top: -5px!important;
}
.mt--10 {
    margin-top: -10px!important;
}
.mt--15 {
    margin-top: -15px!important;
}
.mt--20 {
    margin-top: -20px!important;
}
.mt--25 {
    margin-top: -25px!important;
}
.mt--30 {
    margin-top: -30px!important;
}
.mt--35 {
    margin-top: -35px!important;
}
.mt--40 {
    margin-top: -40px!important;
}
.mt--60 {
    margin-top: -60px!important;
}
.mt--80 {
    margin-top: -80px!important;
}
.mt--120 {
    margin-top: -120px!important;
}

.mb--0 {
    margin-bottom: -0px!important;
}
.mb--3 {
    margin-bottom: -3px!important;
}
.mb--5 {
    margin-bottom: -5px!important;
}
.mb--10 {
    margin-bottom: -10px!important;
}
.mb--15 {
    margin-bottom: -15px!important;
}
.mb--20 {
    margin-bottom: -20px!important;
}
.mb--25 {
    margin-bottom: -25px!important;
}
.mb--30 {
    margin-bottom: -30px!important;
}
.mb--35 {
    margin-bottom: -35px!important;
}
.mb--40 {
    margin-bottom: -40px!important;
}
.mb--60 {
    margin-bottom: -60px!important;
}
.mb--80 {
    margin-bottom: -80px!important;
}
.mb--120 {
    margin-bottom: -120px!important;
}

.my--0 {
    margin-top: -0px!important;
    margin-bottom: -0px!important;
}
.my--3 {
    margin-top: -3px!important;
    margin-bottom: -3px!important;
}
.my--5 {
    margin-top: -5px!important;
    margin-bottom: -5px!important;
}
.my--10 {
    margin-top: -10px!important;
    margin-bottom: -10px!important;
}
.my--15 {
    margin-top: -15px!important;
    margin-bottom: -15px!important;
}
.my--20 {
    margin-top: -20px!important;
    margin-bottom: -20px!important;
}
.my--25 {
    margin-top: -25px!important;
    margin-bottom: -25px!important;
}
.my--30 {
    margin-top: -30px!important;
    margin-bottom: -30px!important;
}
.my--35 {
    margin-top: -35px!important;
    margin-bottom: -35px!important;
}
.my--40 {
    margin-top: -40px!important;
    margin-bottom: -40px!important;
}
.my--60 {
    margin-top: -60px!important;
    margin-bottom: -60px!important;
}
.my--80 {
    margin-top: -80px!important;
    margin-bottom: -80px!important;
}
.my--120 {
    margin-top: -120px!important;
    margin-bottom: -120px!important;
}

.ml--0 {
    margin-left: -0px!important;
}
.ml--3 {
    margin-left: -3px!important;
}
.ml--5 {
    margin-left: -5px!important;
}
.ml--10 {
    margin-left: -10px!important;
}
.ml--15 {
    margin-left: -15px!important;
}
.ml--20 {
    margin-left: -20px!important;
}
.ml--25 {
    margin-left: -25px!important;
}
.ml--30 {
    margin-left: -30px!important;
}
.ml--35 {
    margin-left: -35px!important;
}
.ml--40 {
    margin-left: -40px!important;
}
.ml--60 {
    margin-left: -60px!important;
}
.ml--80 {
    margin-left: -80px!important;
}
.ml--120 {
    margin-left: -120px!important;
}

.mr--0 {
    margin-right: -0px!important;
}
.mr--3 {
    margin-right: -3px!important;
}
.mr--5 {
    margin-right: -5px!important;
}
.mr--10 {
    margin-right: -10px!important;
}
.mr--15 {
    margin-right: -15px!important;
}
.mr--20 {
    margin-right: -20px!important;
}
.mr--25 {
    margin-right: -25px!important;
}
.mr--30 {
    margin-right: -30px!important;
}
.mr--35 {
    margin-right: -35px!important;
}
.mr--40 {
    margin-right: -40px!important;
}
.mr--60 {
    margin-right: -60px!important;
}
.mr--80 {
    margin-right: -80px!important;
}
.mr--120 {
    margin-right: -120px!important;
}

.mx--0 {
    margin-left: -0px!important;
    margin-right: -0px!important;
}
.mx--3 {
    margin-left: -3px!important;
    margin-right: -3px!important;
}
.mx--5 {
    margin-left: -5px!important;
    margin-right: -5px!important;
}
.mx--10 {
    margin-left: -10px!important;
    margin-right: -10px!important;
}
.mx--15 {
    margin-left: -15px!important;
    margin-right: -15px!important;
}
.mx--20 {
    margin-left: -20px!important;
    margin-right: -20px!important;
}
.mx--25 {
    margin-left: -25px!important;
    margin-right: -25px!important;
}
.mx--30 {
    margin-left: -30px!important;
    margin-right: -30px!important;
}
.mx--35 {
    margin-left: -35px!important;
    margin-right: -35px!important;
}
.mx--40 {
    margin-left: -40px!important;
    margin-right: -40px!important;
}
.mx--60 {
    margin-left: -60px!important;
    margin-right: -60px!important;
}
.mx--80 {
    margin-left: -80px!important;
    margin-right: -80px!important;
}
.mx--120 {
    margin-left: -120px!important;
    margin-right: -120px!important;
}

@media (max-width: 768px) {

    /*pa, py, px*/

    .xs-pa-0 {
        padding: 0;
    }
    .xs-pa-1 {
        padding: 1px!important;
    }
    .xs-pa-2 {
        padding: 2px!important;
    }
    .xs-pa-3 {
        padding: 3px!important;
    }
    .xs-pa-5 {
        padding: 5px!important;
    }
    .xs-pa-8 {
        padding: 8px!important;
    }
    .xs-pa-10 {
        padding: 10px!important;
    }
    .xs-pa-15 {
        padding: 15px!important;
    }
    .xs-pa-20 {
        padding: 20px!important;
    }
    .xs-pa-25 {
        padding: 25px!important;
    }
    .xs-pa-30 {
        padding: 30px!important;
    }
    .xs-pa-35 {
        padding: 35px!important;
    }
    .xs-pa-40 {
        padding: 40px!important;
    }
    .xs-pa-60 {
        padding: 60px!important;
    }
    .xs-pa-80 {
        padding: 80px!important;
    }
    .xs-pa-120 {
        padding: 120px!important;
    }

    .xs-pt-0 {
        padding-top: 0px!important;
    }
    .xs-pt-1 {
        padding-top: 1px!important;
    }
    .xs-pt-2 {
        padding-top: 2px!important;
    }
    .xs-pt-3 {
        padding-top: 3px!important;
    }
    .xs-pt-5 {
        padding-top: 5px!important;
    }
    .xs-pt-8 {
        padding-top: 8px!important;
    }
    .xs-pt-10 {
        padding-top: 10px!important;
    }
    .xs-pt-15 {
        padding-top: 15px!important;
    }
    .xs-pt-20 {
        padding-top: 20px!important;
    }
    .xs-pt-25 {
        padding-top: 25px!important;
    }
    .xs-pt-30 {
        padding-top: 30px!important;
    }
    .xs-pt-35 {
        padding-top: 35px!important;
    }
    .xs-pt-40 {
        padding-top: 40px!important;
    }
    .xs-pt-60 {
        padding-top: 60px!important;
    }
    .xs-pt-80 {
        padding-top: 80px!important;
    }
    .xs-pt-120 {
        padding-top: 120px!important;
    }

    .xs-pb-0 {
        padding-bottom: 0px!important;
    }
    .xs-pb-1 {
        padding-bottom: 1px!important;
    }
    .xs-pb-2 {
        padding-bottom: 2px!important;
    }
    .xs-pb-3 {
        padding-bottom: 3px!important;
    }
    .xs-pb-5 {
        padding-bottom: 5px!important;
    }
    .xs-pb-8 {
        padding-bottom: 8px!important;
    }
    .xs-pb-10 {
        padding-bottom: 10px!important;
    }
    .xs-pb-15 {
        padding-bottom: 15px!important;
    }
    .xs-pb-20 {
        padding-bottom: 20px!important;
    }
    .xs-pb-25 {
        padding-bottom: 25px!important;
    }
    .xs-pb-30 {
        padding-bottom: 30px!important;
    }
    .xs-pb-35 {
        padding-bottom: 35px!important;
    }
    .xs-pb-40 {
        padding-bottom: 40px!important;
    }
    .xs-pb-60 {
        padding-bottom: 60px!important;
    }
    .xs-pb-80 {
        padding-bottom: 80px!important;
    }
    .xs-pb-120 {
        padding-bottom: 120px!important;
    }

    .xs-py-0 {
        padding-top: 0px!important;
        padding-bottom: 0px!important;
    }
    .xs-py-1 {
        padding-top: 1px!important;
        padding-bottom: 1px!important;
    }
    .xs-py-2 {
        padding-top: 2px!important;
        padding-bottom: 2px!important;
    }
    .xs-py-3 {
        padding-top: 3px!important;
        padding-bottom: 3px!important;
    }
    .xs-py-5 {
        padding-top: 5px!important;
        padding-bottom: 5px!important;
    }
    .xs-py-8 {
        padding-top: 8px!important;
        padding-bottom: 8px!important;
    }
    .xs-py-10 {
        padding-top: 10px!important;
        padding-bottom: 10px!important;
    }
    .xs-py-15 {
        padding-top: 15px!important;
        padding-bottom: 15px!important;
    }
    .xs-py-20 {
        padding-top: 20px!important;
        padding-bottom: 20px!important;
    }
    .xs-py-25 {
        padding-top: 25px!important;
        padding-bottom: 25px!important;
    }
    .xs-py-30 {
        padding-top: 30px!important;
        padding-bottom: 30px!important;
    }
    .xs-py-35 {
        padding-top: 35px!important;
        padding-bottom: 35px!important;
    }
    .xs-py-40 {
        padding-top: 40px!important;
        padding-bottom: 40px!important;
    }
    .xs-py-60 {
        padding-top: 60px!important;
        padding-bottom: 60px!important;
    }
    .xs-py-80 {
        padding-top: 80px!important;
        padding-bottom: 80px!important;
    }
    .xs-py-120 {
        padding-top: 120px!important;
        padding-bottom: 120px!important;
    }

    .xs-pl-0 {
        padding-left: 0px!important;
    }
    .xs-pl-1 {
        padding-left: 1px!important;
    }
    .xs-pl-2 {
        padding-left: 2px!important;
    }
    .xs-pl-3 {
        padding-left: 3px!important;
    }
    .xs-pl-5 {
        padding-left: 5px!important;
    }
    .xs-pl-8 {
        padding-left: 8px!important;
    }
    .xs-pl-10 {
        padding-left: 10px!important;
    }
    .xs-pl-15 {
        padding-left: 15px!important;
    }
    .xs-pl-20 {
        padding-left: 20px!important;
    }
    .xs-pl-25 {
        padding-left: 25px!important;
    }
    .xs-pl-30 {
        padding-left: 30px!important;
    }
    .xs-pl-35 {
        padding-left: 35px!important;
    }
    .xs-pl-40 {
        padding-left: 40px!important;
    }
    .xs-pl-60 {
        padding-left: 60px!important;
    }
    .xs-pl-80 {
        padding-left: 80px!important;
    }
    .xs-pl-120 {
        padding-left: 120px!important;
    }

    .xs-pr-0 {
        padding-right: 0px!important;
    }
    .xs-pr-1 {
        padding-right: 1px!important;
    }
    .xs-pr-2 {
        padding-right: 2px!important;
    }
    .xs-pr-3 {
        padding-right: 3px!important;
    }
    .xs-pr-5 {
        padding-right: 5px!important;
    }
    .xs-pr-8 {
        padding-right: 8px!important;
    }
    .xs-pr-10 {
        padding-right: 10px!important;
    }
    .xs-pr-15 {
        padding-right: 15px!important;
    }
    .xs-pr-20 {
        padding-right: 20px!important;
    }
    .xs-pr-25 {
        padding-right: 25px!important;
    }
    .xs-pr-30 {
        padding-right: 30px!important;
    }
    .xs-pr-35 {
        padding-right: 35px!important;
    }
    .xs-pr-40 {
        padding-right: 40px!important;
    }
    .xs-pr-60 {
        padding-right: 60px!important;
    }
    .xs-pr-80 {
        padding-right: 80px!important;
    }
    .xs-pr-120 {
        padding-right: 120px!important;
    }

    .xs-px-0 {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
    .xs-px-1 {
        padding-left: 1px!important;
        padding-right: 1px!important;
    }
    .xs-px-2 {
        padding-left: 2px!important;
        padding-right: 2px!important;
    }
    .xs-px-3 {
        padding-left: 3px!important;
        padding-right: 3px!important;
    }
    .xs-px-5 {
        padding-left: 5px!important;
        padding-right: 5px!important;
    }
    .xs-px-8 {
        padding-left: 8px!important;
        padding-right: 8px!important;
    }
    .xs-px-10 {
        padding-left: 10px!important;
        padding-right: 10px!important;
    }
    .xs-px-15 {
        padding-left: 15px!important;
        padding-right: 15px!important;
    }
    .xs-px-20 {
        padding-left: 20px!important;
        padding-right: 20px!important;
    }
    .xs-px-25 {
        padding-left: 25px!important;
        padding-right: 25px!important;
    }
    .xs-px-30 {
        padding-left: 30px!important;
        padding-right: 30px!important;
    }
    .xs-px-35 {
        padding-left: 35px!important;
        padding-right: 35px!important;
    }
    .xs-px-40 {
        padding-left: 40px!important;
        padding-right: 40px!important;
    }
    .xs-px-60 {
        padding-left: 60px!important;
        padding-right: 60px!important;
    }
    .xs-px-80 {
        padding-left: 80px!important;
        padding-right: 80px!important;
    }
    .xs-px-120 {
        padding-left: 120px!important;
        padding-right: 120px!important;
    }

    .xs-ma-0 {
        margin: 0;
    }
    .xs-ma-1 {
        margin: 1px!important;
    }
    .xs-ma-2 {
        margin: 2px!important;
    }
    .xs-ma-3 {
        margin: 3px!important;
    }
    .xs-ma-5 {
        margin: 5px!important;
    }
    .xs-ma-8 {
        margin: 8px!important;
    }
    .xs-ma-10 {
        margin: 10px!important;
    }
    .xs-ma-15 {
        margin: 15px!important;
    }
    .xs-ma-20 {
        margin: 20px!important;
    }
    .xs-ma-25 {
        margin: 25px!important;
    }
    .xs-ma-30 {
        margin: 30px!important;
    }
    .xs-ma-35 {
        margin: 35px!important;
    }
    .xs-ma-40 {
        margin: 40px!important;
    }
    .xs-ma-60 {
        margin: 60px!important;
    }
    .xs-ma-80 {
        margin: 80px!important;
    }
    .xs-ma-120 {
        margin: 120px!important;
    }

    .xs-mt-0 {
        margin-top: 0px!important;
    }
    .xs-mt-1 {
        margin-top: 1px!important;
    }
    .xs-mt-2 {
        margin-top: 2px!important;
    }
    .xs-mt-3 {
        margin-top: 3px!important;
    }
    .xs-mt-5 {
        margin-top: 5px!important;
    }
    .xs-mt-8 {
        margin-top: 8px!important;
    }
    .xs-mt-10 {
        margin-top: 10px!important;
    }
    .xs-mt-15 {
        margin-top: 15px!important;
    }
    .xs-mt-20 {
        margin-top: 20px!important;
    }
    .xs-mt-25 {
        margin-top: 25px!important;
    }
    .xs-mt-30 {
        margin-top: 30px!important;
    }
    .xs-mt-35 {
        margin-top: 35px!important;
    }
    .xs-mt-40 {
        margin-top: 40px!important;
    }
    .xs-mt-60 {
        margin-top: 60px!important;
    }
    .xs-mt-80 {
        margin-top: 80px!important;
    }
    .xs-mt-120 {
        margin-top: 120px!important;
    }

    .xs-mb-0 {
        margin-bottom: 0px!important;
    }
    .xs-mb-1 {
        margin-bottom: 1px!important;
    }
    .xs-mb-2 {
        margin-bottom: 2px!important;
    }
    .xs-mb-3 {
        margin-bottom: 3px!important;
    }
    .xs-mb-5 {
        margin-bottom: 5px!important;
    }
    .xs-mb-8 {
        margin-bottom: 8px!important;
    }
    .xs-mb-10 {
        margin-bottom: 10px!important;
    }
    .xs-mb-15 {
        margin-bottom: 15px!important;
    }
    .xs-mb-20 {
        margin-bottom: 20px!important;
    }
    .xs-mb-25 {
        margin-bottom: 25px!important;
    }
    .xs-mb-30 {
        margin-bottom: 30px!important;
    }
    .xs-mb-35 {
        margin-bottom: 35px!important;
    }
    .xs-mb-40 {
        margin-bottom: 40px!important;
    }
    .xs-mb-60 {
        margin-bottom: 60px!important;
    }
    .xs-mb-80 {
        margin-bottom: 80px!important;
    }
    .xs-mb-120 {
        margin-bottom: 120px!important;
    }

    .xs-my-0 {
        margin-top: 0px!important;
        margin-bottom: 0px!important;
    }
    .xs-my-1 {
        margin-top: 1px!important;
        margin-bottom: 1px!important;
    }
    .xs-my-2 {
        margin-top: 2px!important;
        margin-bottom: 2px!important;
    }
    .xs-my-3 {
        margin-top: 3px!important;
        margin-bottom: 3px!important;
    }
    .xs-my-5 {
        margin-top: 5px!important;
        margin-bottom: 5px!important;
    }
    .xs-my-8 {
        margin-top: 8px!important;
        margin-bottom: 8px!important;
    }
    .xs-my-10 {
        margin-top: 10px!important;
        margin-bottom: 10px!important;
    }
    .xs-my-15 {
        margin-top: 15px!important;
        margin-bottom: 15px!important;
    }
    .xs-my-20 {
        margin-top: 20px!important;
        margin-bottom: 20px!important;
    }
    .xs-my-25 {
        margin-top: 25px!important;
        margin-bottom: 25px!important;
    }
    .xs-my-30 {
        margin-top: 30px!important;
        margin-bottom: 30px!important;
    }
    .xs-my-35 {
        margin-top: 35px!important;
        margin-bottom: 35px!important;
    }
    .xs-my-40 {
        margin-top: 40px!important;
        margin-bottom: 40px!important;
    }
    .xs-my-60 {
        margin-top: 60px!important;
        margin-bottom: 60px!important;
    }
    .xs-my-80 {
        margin-top: 80px!important;
        margin-bottom: 80px!important;
    }
    .xs-my-120 {
        margin-top: 120px!important;
        margin-bottom: 120px!important;
    }

    .xs-ml-0 {
        margin-left: 0px!important;
    }
    .xs-ml-1 {
        margin-left: 1px!important;
    }
    .xs-ml-2 {
        margin-left: 2px!important;
    }
    .xs-ml-3 {
        margin-left: 3px!important;
    }
    .xs-ml-5 {
        margin-left: 5px!important;
    }
    .xs-ml-8 {
        margin-left: 8px!important;
    }
    .xs-ml-10 {
        margin-left: 10px!important;
    }
    .xs-ml-15 {
        margin-left: 15px!important;
    }
    .xs-ml-20 {
        margin-left: 20px!important;
    }
    .xs-ml-25 {
        margin-left: 25px!important;
    }
    .xs-ml-30 {
        margin-left: 30px!important;
    }
    .xs-ml-35 {
        margin-left: 35px!important;
    }
    .xs-ml-40 {
        margin-left: 40px!important;
    }
    .xs-ml-60 {
        margin-left: 60px!important;
    }
    .xs-ml-80 {
        margin-left: 80px!important;
    }
    .xs-ml-120 {
        margin-left: 120px!important;
    }

    .xs-mr-0 {
        margin-right: 0px!important;
    }
    .xs-mr-1 {
        margin-right: 1px!important;
    }
    .xs-mr-2 {
        margin-right: 2px!important;
    }
    .xs-mr-3 {
        margin-right: 3px!important;
    }
    .xs-mr-5 {
        margin-right: 5px!important;
    }
    .xs-mr-8 {
        margin-right: 8px!important;
    }
    .xs-mr-10 {
        margin-right: 10px!important;
    }
    .xs-mr-15 {
        margin-right: 15px!important;
    }
    .xs-mr-20 {
        margin-right: 20px!important;
    }
    .xs-mr-25 {
        margin-right: 25px!important;
    }
    .xs-mr-30 {
        margin-right: 30px!important;
    }
    .xs-mr-35 {
        margin-right: 35px!important;
    }
    .xs-mr-40 {
        margin-right: 40px!important;
    }
    .xs-mr-60 {
        margin-right: 60px!important;
    }
    .xs-mr-80 {
        margin-right: 80px!important;
    }
    .xs-mr-120 {
        margin-right: 120px!important;
    }

    .xs-mx-0 {
        margin-left: 0px!important;
        margin-right: 0px!important;
    }
    .xs-mx-1 {
        margin-left: 1px!important;
        margin-right: 1px!important;
    }
    .xs-mx-2 {
        margin-left: 2px!important;
        margin-right: 2px!important;
    }
    .xs-mx-3 {
        margin-left: 3px!important;
        margin-right: 3px!important;
    }
    .xs-mx-5 {
        margin-left: 5px!important;
        margin-right: 5px!important;
    }
    .xs-mx-8 {
        margin-left: 8px!important;
        margin-right: 8px!important;
    }
    .xs-mx-10 {
        margin-left: 10px!important;
        margin-right: 10px!important;
    }
    .xs-mx-15 {
        margin-left: 15px!important;
        margin-right: 15px!important;
    }
    .xs-mx-20 {
        margin-left: 20px!important;
        margin-right: 20px!important;
    }
    .xs-mx-25 {
        margin-left: 25px!important;
        margin-right: 25px!important;
    }
    .xs-mx-30 {
        margin-left: 30px!important;
        margin-right: 30px!important;
    }
    .xs-mx-35 {
        margin-left: 35px!important;
        margin-right: 35px!important;
    }
    .xs-mx-40 {
        margin-left: 40px!important;
        margin-right: 40px!important;
    }
    .xs-mx-60 {
        margin-left: 60px!important;
        margin-right: 60px!important;
    }
    .xs-mx-80 {
        margin-left: 80px!important;
        margin-right: 80px!important;
    }
    .xs-mx-120 {
        margin-left: 120px!important;
        margin-right: 120px!important;
    }

    .xs-mt--0 {
        margin-top: -0px!important;
    }
    .xs-mt--3 {
        margin-top: -3px!important;
    }
    .xs-mt--5 {
        margin-top: -5px!important;
    }
    .xs-mt--10 {
        margin-top: -10px!important;
    }
    .xs-mt--15 {
        margin-top: -15px!important;
    }
    .xs-mt--20 {
        margin-top: -20px!important;
    }
    .xs-mt--25 {
        margin-top: -25px!important;
    }
    .xs-mt--30 {
        margin-top: -30px!important;
    }
    .xs-mt--35 {
        margin-top: -35px!important;
    }
    .xs-mt--40 {
        margin-top: -40px!important;
    }
    .xs-mt--60 {
        margin-top: -60px!important;
    }
    .xs-mt--80 {
        margin-top: -80px!important;
    }
    .xs-mt--120 {
        margin-top: -120px!important;
    }

    .xs-mb--0 {
        margin-bottom: -0px!important;
    }
    .xs-mb--3 {
        margin-bottom: -3px!important;
    }
    .xs-mb--5 {
        margin-bottom: -5px!important;
    }
    .xs-mb--10 {
        margin-bottom: -10px!important;
    }
    .xs-mb--15 {
        margin-bottom: -15px!important;
    }
    .xs-mb--20 {
        margin-bottom: -20px!important;
    }
    .xs-mb--25 {
        margin-bottom: -25px!important;
    }
    .xs-mb--30 {
        margin-bottom: -30px!important;
    }
    .xs-mb--35 {
        margin-bottom: -35px!important;
    }
    .xs-mb--40 {
        margin-bottom: -40px!important;
    }
    .xs-mb--60 {
        margin-bottom: -60px!important;
    }
    .xs-mb--80 {
        margin-bottom: -80px!important;
    }
    .xs-mb--120 {
        margin-bottom: -120px!important;
    }

    .xs-my--0 {
        margin-top: -0px!important;
        margin-bottom: -0px!important;
    }
    .xs-my--3 {
        margin-top: -3px!important;
        margin-bottom: -3px!important;
    }
    .xs-my--5 {
        margin-top: -5px!important;
        margin-bottom: -5px!important;
    }
    .xs-my--10 {
        margin-top: -10px!important;
        margin-bottom: -10px!important;
    }
    .xs-my--15 {
        margin-top: -15px!important;
        margin-bottom: -15px!important;
    }
    .xs-my--20 {
        margin-top: -20px!important;
        margin-bottom: -20px!important;
    }
    .xs-my--25 {
        margin-top: -25px!important;
        margin-bottom: -25px!important;
    }
    .xs-my--30 {
        margin-top: -30px!important;
        margin-bottom: -30px!important;
    }
    .xs-my--35 {
        margin-top: -35px!important;
        margin-bottom: -35px!important;
    }
    .xs-my--40 {
        margin-top: -40px!important;
        margin-bottom: -40px!important;
    }
    .xs-my--60 {
        margin-top: -60px!important;
        margin-bottom: -60px!important;
    }
    .xs-my--80 {
        margin-top: -80px!important;
        margin-bottom: -80px!important;
    }
    .xs-my--120 {
        margin-top: -120px!important;
        margin-bottom: -120px!important;
    }

    .xs-ml--0 {
        margin-left: -0px!important;
    }
    .xs-ml--3 {
        margin-left: -3px!important;
    }
    .xs-ml--5 {
        margin-left: -5px!important;
    }
    .xs-ml--10 {
        margin-left: -10px!important;
    }
    .xs-ml--15 {
        margin-left: -15px!important;
    }
    .xs-ml--20 {
        margin-left: -20px!important;
    }
    .xs-ml--25 {
        margin-left: -25px!important;
    }
    .xs-ml--30 {
        margin-left: -30px!important;
    }
    .xs-ml--35 {
        margin-left: -35px!important;
    }
    .xs-ml--40 {
        margin-left: -40px!important;
    }
    .xs-ml--60 {
        margin-left: -60px!important;
    }
    .xs-ml--80 {
        margin-left: -80px!important;
    }
    .xs-ml--120 {
        margin-left: -120px!important;
    }

    .xs-mr--0 {
        margin-right: -0px!important;
    }
    .xs-mr--3 {
        margin-right: -3px!important;
    }
    .xs-mr--5 {
        margin-right: -5px!important;
    }
    .xs-mr--10 {
        margin-right: -10px!important;
    }
    .xs-mr--15 {
        margin-right: -15px!important;
    }
    .xs-mr--20 {
        margin-right: -20px!important;
    }
    .xs-mr--25 {
        margin-right: -25px!important;
    }
    .xs-mr--30 {
        margin-right: -30px!important;
    }
    .xs-mr--35 {
        margin-right: -35px!important;
    }
    .xs-mr--40 {
        margin-right: -40px!important;
    }
    .xs-mr--60 {
        margin-right: -60px!important;
    }
    .xs-mr--80 {
        margin-right: -80px!important;
    }
    .xs-mr--120 {
        margin-right: -120px!important;
    }

    .xs-mx--0 {
        margin-left: -0px!important;
        margin-right: -0px!important;
    }
    .xs-mx--3 {
        margin-left: -3px!important;
        margin-right: -3px!important;
    }
    .xs-mx--5 {
        margin-left: -5px!important;
        margin-right: -5px!important;
    }
    .xs-mx--10 {
        margin-left: -10px!important;
        margin-right: -10px!important;
    }
    .xs-mx--15 {
        margin-left: -15px!important;
        margin-right: -15px!important;
    }
    .xs-mx--20 {
        margin-left: -20px!important;
        margin-right: -20px!important;
    }
    .xs-mx--25 {
        margin-left: -25px!important;
        margin-right: -25px!important;
    }
    .xs-mx--30 {
        margin-left: -30px!important;
        margin-right: -30px!important;
    }
    .xs-mx--35 {
        margin-left: -35px!important;
        margin-right: -35px!important;
    }
    .xs-mx--40 {
        margin-left: -40px!important;
        margin-right: -40px!important;
    }
    .xs-mx--60 {
        margin-left: -60px!important;
        margin-right: -60px!important;
    }
    .xs-mx--80 {
        margin-left: -80px!important;
        margin-right: -80px!important;
    }
    .xs-mx--120 {
        margin-left: -120px!important;
        margin-right: -120px!important;
    }

}

/* components */
/* SnackBar */
.snackbar_container {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    max-width: 350px;
    z-index: 99999989;
    /* overflow: hidden; */
    padding: 0 20px;
}

.snackbar_container._top_left {
    bottom: unset;
    right: unset;
    top: 0;
    left: 0;
}

.snackbar_container._top_center {
    top: 40px;
    bottom: unset;
    left: 50%;
    right: unset;
    transform: translateX(-50%);
}

.snackbar_container._top_right {
    bottom: unset;
    right: 0;
    left: unset;
    top: 0;
}

.snackbar_container._bottom_left {
    bottom: 0;
    right: unset;
    left: 0;
    top: unset;
}

.snackbar_container._bottom_center {
    bottom: 20px;
    right: unset;
    left: 50%;
    top: unset;
    transform: translateX(-50%);
}

.snackbar_container._fixed {
    position: fixed;
}

.snackbar_container .snackbar_wrapper {
    /* overflow: hidden; */
    height: auto;
    margin: 0;
    display: flex;
    width: 100%;
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 0.5s;
}

.snackbar {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: 14px;
    font-size: 14px;
    /* background-color: #333; */
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
    /* border: 1px solid #000; */
    box-shadow: rgba(14, 63, 126, 0.04) 0 0 0 1px, rgba(42, 51, 69, 0.04) 0 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0 6px 6px -3px, rgba(14, 63, 126, 0.04) 0 12px 12px -6px, rgba(14, 63, 126, 0.04) 0 24px 24px -12px;
    padding: 16px;
    font-weight: bold;
    flex-grow: 1;
    text-align: left;
}
.snackbar > i {
    color: #fe5000;
    margin-right: 10px;
    font-size: 24px;
}
.snackbar > img {
    margin-right: 10px;
}
.snackbar a {
    display: flex;
    align-items: center;
    position: absolute;
    right: 16px;
    color: #fff;
    line-height: 1;
}
.snackbar a > span {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.snackbar a > i {
    color: #fff;
    font-size: 24px;
}
.snackbar i::before {
    margin: 0;
}

.snackbar ._message {
    display: inline-block;
    line-height: 1.7;
}

.snackbar ._action {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;
    color: #fe5000;
    cursor: pointer;
    line-height: 1;
}

.snackbar ._action:hover {
    background-color: #333;
}

.snackbar ._close {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 10px;
    user-select: none;
    color: #fff;
}

/* Modal */
.customModal {
    position: fixed;
    z-index: 999999999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.customModal ._inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    width: 100%;
    max-width: 280px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 10px 42px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.customModal ._inner ._content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.customModal ._inner ._content img {
    max-width: 100%;
    margin-bottom: 8px;
}
.customModal ._inner ._content i {
    font-size: 110px;
    margin-top: -0.3em;
    margin-bottom: -0.2em;
    color: #c4c4c4;
}
.customModal ._inner ._content ._title {
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
.customModal ._inner ._content ._body {
    font-size: 14px;
    color: #333;
    margin-top: 4px;
}
.customModal ._inner ._btns {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.customModal ._inner ._btns button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    outline: none;
    border: none;
    width: 100%;
    height: 52px;
    border-radius: 16px;
    order: 1;
}

.customModal ._inner ._btns button._action {
    background-color: #333;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    order: 0;
}

.customModal ._inner ._btns button._cancel {
    color: #999;
    font-size: 14px;
    height: 20px;
}
.customModal.confirm ._inner ._btns button._cancel {
    color: #999999;
    font-size: 16px;
    font-weight: 700;
    height: 52px;
}
.customModal.confirm ._inner ._btns button._cancel._orange {
    background-color: var(--brand-primary) !important;
    color: #fff;
}
.customModal ._inner ._btns button._action._orange {
    background-color: var(--brand-primary) !important;
}
.customModal.confirm ._inner ._btns {
    flex-direction: row;
    gap: 8px;
    margin-bottom: 0;
}
.customModal.confirm ._inner ._btns button {
    background-color: #eeeeee;
    order: 0;
}
.customModal.confirm ._inner ._btns button._action {
    background-color: #333;
    order: 1;
}

.customModal.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

/* BottomSheet */
ui-bottom-sheet {
    display: none;
}
ui-bottom-sheet[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.customBottomsheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999982;
    visibility: visible;
    transition: opacity 0.2s, visibility 0.2s;

    /* max-width: 420px; */
    margin: 0 auto;
    /* max-width: 540px; */
}
.customBottomsheet._modal {
    justify-content: center;
}
.customBottomsheet .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999980;
    background: rgba(0, 0, 0, 0.5);
}
.customBottomsheet .sheet__wrapper {
    display: flex;
    flex-direction: column;
    z-index: 99999983;
    border-radius: 18px 18px 0 0;
    background: #fff;
    position: relative;
    overflow-y: hidden;
    --default-transitions: transform 0.2s, border-radius 0.2s;
    transition: var(--default-transitions);
    transform: translateY(0);
    max-height: 100vh;
    width: 100%;

    max-width: 540px;
}
.customBottomsheet._modal .sheet__wrapper {
    width: 40%;
    max-width: 500px;
    border-radius: 18px;
}
.customBottomsheet .sheet__wrapper .controls {
    display: flex;
    flex-direction: column;
    padding: 0 30px 20px;
}
.customBottomsheet .sheet__wrapper .controls .title__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding-bottom: 10px;
}
.customBottomsheet .sheet__wrapper .controls .title__wrapper .title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}
.customBottomsheet .sheet__wrapper:not(.not-selectable) {
    transition: var(--default-transitions), height 0.2s;
}
.customBottomsheet[aria-hidden="true"] .sheet__wrapper {
    transform: translateY(100%);
}
.customBottomsheet .draggable-area {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: auto;
    padding: 12px;
    cursor: grab;
}
.customBottomsheet .draggable-thumb {
    width: 50px;
    height: 5px;
    background: #eeeeee;
    border-radius: 100px;
}
.customBottomsheet._modal .draggable-thumb {
    display: none;
}
.customBottomsheet .close-sheet {
    position: absolute;
    right: 0;
    background: transparent;
    border: none;
    z-index: 9;
    padding: 0;
    height: auto;
}
.customBottomsheet .close-sheet > i {
    background: url("./x.svg") center center / 61% no-repeat;
    width: 28px;
    aspect-ratio: 1 / 1;
}
.customBottomsheet .content {
    padding: 0 30px 30px;
    height: 100%;
    overflow-y: auto;
    font-size: 14px;
}
.customBottomsheet .content img {
    max-width: 100% !important;
}
.customBottomsheet .sheet__wrapper.min__height {
    min-height: 30vh;
}
.customBottomsheet .sheet__wrapper.fullscreen {
    height: 100vh !important;
    border-radius: 0;
}
.customBottomsheet .sheet__wrapper .controls {
    padding: 0 20px;
}
.customBottomsheet .content {
    padding: 0 20px 20px;
}

/* pc bottomsheet -> modal */
@media (min-width: 769px) {
    .customBottomsheet .content {
        padding: 20px;
    }
    .customBottomsheet .sheet__wrapper {
        max-height: initial;
        display: block;
        margin: auto;
        border-radius: 12px;
        height: auto !important;
    }
    .customBottomsheet .sheet__wrapper .controls {
        /* display: none */
    }
    .customBottomsheet .sheet__wrapper.fullscreen {
        height: calc(100vh - 40px) !important;
        border-radius: 12px;
    }
}

/* 슬라이더 */
.ui-slider {
    display: block;
    position: relative;
    overflow-y: scroll;
    isolation: isolate;
}
.ui-slider * {
    line-height: 1;
    margin: 0;
    padding: 0;
}
.ui-slider ._control {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    z-index: 1;
    border: none;
    border-radius: 0;
    background: none;
    cursor: pointer;
}
.ui-slider ._control._prev {
    background: url("https://www.jumpit.co.kr/App/build/static/media/btn-prev.85cf9174.svg") center center / 32px 32px no-repeat;
    left: 16px;
}
.ui-slider ._control._next {
    background: url("https://www.jumpit.co.kr/App/build/static/media/btn-next.6acd9890.svg") center center / 32px 32px no-repeat;
    right: 16px;
}
.ui-slider ._rail {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    height: auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    position: relative;
    height: 310px;
}
.ui-slider ._rail > * {
    scroll-snap-align: start;
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    scroll-snap-stop: always;
}
.ui-slider ._rail > * > img {
    position: relative;
    width: auto;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    outline-offset: -1px;
}
.ui-slider ._pager {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 4px 10px;
    background: rgba(51, 51, 51, 0.5);
    border-radius: 40px;
    color: rgb(255, 255, 255);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}
.ui-slider ._expand_slider_btn,
.ui-slider ._expand_slider_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 32px;
    height: 32px;
    background: rgba(51, 51, 51, 0.5);
    border-radius: 60px;
    border: none;
}
.ui-slider ._expand_slider_btn > img,
.ui-slider ._expand_slider_btn > img {
    width: 20px;
    height: 20px;
}

hr {
    margin: 0;
    width: 100%;
    background: rgba(0,0,0,0.1);
    height: 1px;
    border: 0;
}




.btn,
button {
    height: 2.4em;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;

    border: none;
    padding: 0 1em;
    font-weight: 600;
    font-size: 1em;
    color: #111;
    border: 1px solid #eee;
    background-color: transparent;
    white-space: nowrap;
}
button.bg-white {
    background-color: #FFF !important;
}
button.bg-primary {
    background-color: var(--brand-primary);
    color: #FFF;
}
button.bg-black {
    background-color: #000;
    color: #FFF;
}
button.bg-red {
    background-color: #ff0101;
    color: #FFF;
}
button.outline {
    background-color: transparent;
    border: 1px solid #eee;
    color: #333;
}
button.btn-d {
    font-size: 17px;
    font-weight: bold;
    line-height: 1;
    height: 2.2em;
    width: 144px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background-color: #313131;
    border: 2px solid #313131;
    border-radius: 100px;

}
button.disabled {
    background-color: #f1f1f1 !important;
    color: #cbcbcb;
    pointer-events: none;
    cursor: not-allowed;
}
.cursor-pointer:active,
button:active {
    filter: brightness(90%);
}
button .pos_left {
    position: absolute;
    left: 1em;
}
button.loading {
    color: transparent;
    pointer-events: none;
}
button.loading:after {
    content: '';
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    background-image: url("./loading-circle-white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
button.circle {
    width: 52px;
    padding: 0;
    border-radius: 100px !important;
}
button.sm {
    height: 36px;
    border-radius: 14px;
    padding: 0 1em;
    font-size: 0.8em;
}
button.mini {
    height: 2.2em;
    border-radius: 10px;
    padding: 0 0.5em;
    font-size: 0.8em;
}
button.sm.loading:after {
}
button.circle.sm {
    width: 36px;
}
input,
select,
textarea {
    height: 52px;
    border-radius: 18px;
    border: none;
    padding: 0 1em;
    font-weight: 600;
    font-size: 1em;
    color: #333;
    background-color: #fcfcfc;
    border: 1px solid rgba(0,0,0,0.05);
}
textarea {
    padding: 1em;
    min-height: 5em;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    position: relative;
    height: 1.8em;
    line-height: 1.8em;
    width: auto;
    padding-left: 2.3em;
    padding-right: 0.5em;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5em;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    font-weight: 600;
}
input[type="checkbox"] + label::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.8em;
    height: 1.8em;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.7em;
    box-sizing: border-box;
}
input[type="checkbox"]:checked + label::before {
    /* border-color: #6e0022; */
    border-color: rgba(0,0,0,0.5);
}
input[type="checkbox"]:checked + label::after {
    content: '';
    width: 1.8em;
    height: 1.8em;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: var(--brand-primary); */
    background-color: #000;
    border-radius: 0.7em;
    transform: scale(0.6);
    box-sizing: border-box;
}
input[type="radio"] {
    display: none;
}
input[type="radio"] + label {
    position: relative;
    height: 1.8em;
    line-height: 1.8em;
    width: auto;
    padding-left: 2.3em;
    padding-right: 0.5em;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5em;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
}
input[type="radio"] + label::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.8em;
    height: 1.8em;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    box-sizing: border-box;
}
input[type="radio"]:checked + label::before {
    /* border-color: #6e0022; */
    border-color: rgba(0,0,0,0.5);
}
input[type="radio"]:checked + label::after {
    content: '';
    width: 1.8em;
    height: 1.8em;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: var(--brand-primary); */
    background-color: #000;
    border-radius: 50%;
    transform: scale(0.6);
    box-sizing: border-box;
}

/* components */
.ui.avatar {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.ui.avatar.sm {
    width: 40px;
    height: 40px;
}
.ui.avatar.sm {
    width: 28px;
    height: 28px;
}
.ui.avatar.lg {
    width: 84px;
    height: 84px;
}
.ui.avatar > img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: #d1d1d1;
}
.ui.avatar > img:nth-child(1) {
    border: 1px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
}
.ui.avatar > img:nth-child(2) {
    z-index: 0;
    transform: scale(1.2);
    filter: blur(0.5em) brightness(1.5);
    opacity: 0.5;
    top: 0.4em;
}
.ui.avatars {
    display: flex;
    align-items: center;
}
.ui.avatars > span {
    font-size: 0.7em;
    margin-left: 2em;
    font-weight: 400;
    color: #555;
}
.ui.avatars > .ui.avatar {
    margin-right: -0.9em;
    display: none;
}
.ui.avatars > .ui.avatar > img:first-child {
    border: 1.5px solid #FFF;
}
.ui.avatars > .ui.avatar:nth-child(1),
.ui.avatars > .ui.avatar:nth-child(2),
.ui.avatars > .ui.avatar:nth-child(3) {
    display: block;
}

.ui.instIcon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
.ui.avatar > .ui.instIcon {
    position: absolute;
    z-index: 1;
    width: 55%;
    height: 55%;
    right: -8%;
    bottom: -8%;
    border: 2px solid #FFF;
    background-color: #FFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

pre {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 10px;
    background: #333;
    color: rgb(0,255,0);
    position: fixed;
    bottom: 0;
    left: 0;
    max-width: 400px;

    white-space: pre-wrap;
}
.box-shadow {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown > button {
    border: none;
    outline: none;
    background: transparent;
}
.dropdown > nav {
    position: absolute;
    z-index: 99;
    top: 100%;
    left: inherit;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: 300ms all;
    border-radius: 12px;
    background-color: #FFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: auto;
    min-width: 104px;
    overflow: hidden;
    margin-top: 6px;
}
.dropdown.left > nav {
    left: 0;
    right: inherit;
}
.dropdown > nav > ul {
    /* padding: 0.5em 0; */
    display: flex;
    flex-direction: column;
    width: 100%;
}
.dropdown > nav > ul > li {
    padding: 0;
}
.dropdown > nav > ul > li > a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 3em;
    font-size: 14px;
    line-height: 3em;
    color: #333 !important;
    font-weight: 500;
    padding: 0 1em;
    border-radius: 0;
    white-space: nowrap;
}
.dropdown > nav > ul > li > a span {
    margin-right: 1em;
    word-break: keep-all;
    white-space: nowrap;
}
.dropdown > nav > ul > li > a:hover {
    background: aliceblue;
}
.dropdown > nav > ul > li > a.dot:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    overflow: hidden;
    background-color: tomato;
    display: inline-block;
    vertical-align: super;
    margin-left: 0.3em;
    -webkit-animation: blinker 1s infinite;
    animation: blinker 1s infinite;
}
.dropdown:focus-within > nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0.25rem);
}

.dropdown > nav > ul > li.border {
    border: none!important;
    box-shadow: none!important;
    height: 9px;
    position: relative;
}
.dropdown > nav > ul > li.border:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1px;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08);
}

.ui.badge {
    height: 2.2em;
    border-radius: 2.2em;
    overflow: hidden;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1em;
    font-weight: 600;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
}
.ui.badge.fill {
    background-color: var(--brand-primary);
    color: #FFF;
    border: 1px solid var(--brand-primary);
}
.ui.badge.sm {
    height: 1.8em;
    font-size: 0.8em;
    padding: 0 0.5em;
}
.ui.thumbnail {
    background-size: cover;
    width: 80px;
    height: 80px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
*:focus {
    outline: none !important;
}

.blink {
    -webkit-animation: blinker 1s step-start infinite;
    animation: blinker 1s step-start infinite;
}
@keyframes blinker {
    50% {
        opacity: 0.2;
    }
}

.gap2 {
    gap: 2px !important;
}
.gap3 {
    gap: 3px !important;
}
.gap4 {
    gap: 4px !important;
}
.gap5 {
    gap: 5px !important;
}
.gap8 {
    gap: 8px !important;
}
.gap10 {
    gap: 10px !important;
}
.gap12 {
    gap: 12px !important;
}
.gap13 {
    gap: 13px !important;
}
.gap16 {
    gap: 16px !important;
}
.gap24 {
    gap: 24px !important;
}
.gap15 {
    gap: 15px !important;
}
.gap20 {
    gap: 20px !important;
}
.gap25 {
    gap: 25px !important;
}
.gap30 {
    gap: 30px !important;
}
.gap35 {
    gap: 35px !important;
}
.gap40 {
    gap: 40px !important;
}
.gap50 {
    gap: 50px !important;
}
.gap70 {
    gap: 70px !important;
}
.gap80 {
    gap: 80px !important;
}
@media (max-width: 768px) {
    .xs-gap0 {
        gap: 0px !important;
    }
    .xs-gap2 {
        gap: 2px !important;
    }
    .xs-gap3 {
        gap: 3px !important;
    }
    .xs-gap4 {
        gap: 4px !important;
    }
    .xs-gap5 {
        gap: 5px !important;
    }
    .xs-gap8 {
        gap: 8px !important;
    }
    .xs-gap10 {
        gap: 10px !important;
    }
    .xs-gap12 {
        gap: 12px !important;
    }
    .xs-gap13 {
        gap: 13px !important;
    }
    .xs-gap16 {
        gap: 16px !important;
    }
    .xs-gap24 {
        gap: 24px !important;
    }
    .xs-gap15 {
        gap: 15px !important;
    }
    .xs-gap20 {
        gap: 20px !important;
    }
    .xs-gap25 {
        gap: 25px !important;
    }
    .xs-gap30 {
        gap: 30px !important;
    }
    .xs-gap35 {
        gap: 35px !important;
    }
    .xs-gap40 {
        gap: 40px !important;
    }
    .xs-gap70 {
        gap: 70px !important;
    }
    .xs-gap80 {
        gap: 80px !important;
    }
}

.cubic02 {
    transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.cubic03 {
    transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.cubic04 {
    transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.cubic05 {
    transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.cubic1,
.cubic10 {
    transition: 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

.animShake {
    animation: one-time-animation 0.3s normal ease-in-out;
    animation-iteration-count: 1;
}
.animShakeAfter05s {
    animation: one-time-animation 0.3s normal ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.5s;
}
.animShakeAfter03s {
    animation: one-time-animation 0.3s normal ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.3s;
}
.animShakeAfter1s {
    animation: one-time-animation 0.3s normal ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 1s;
}
.animShakeAfter2s {
    animation: one-time-animation 0.3s normal ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 2s;
}
@keyframes one-time-animation {
    0% {
        transform: translateX(-0.3em);
    }
    20% {
        transform: translateX(0.3em);
    }
    40% {
        transform: translateX(-0.3em);
    }
    60% {
        transform: translateX(0.3em);
    }
    80% {
        transform: translateX(-0.3em);
    }
    100% {
        transform: translateX(0em);
    }
}

.animGlancing {
    position: relative;
    overflow: hidden;
}
.animGlancing:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
    animation: animGlancing 4s infinite;
    transform: skew(10deg, 0);
}
@keyframes animGlancing {
    0% {
        left: -150%;
        opacity: 0;
    }
    25% {
        left: -150%;
        opacity: 1;
    }
    70% {
        left: 150%;
        opacity: 1;
    }
    71% {
        left: 150%;
        opacity: 0;
    }
    100% {
        left: 150%;
        opacity: 0;
    }
}

.hidden {
    visibility: hidden;
    display: none;
}

.opacity05 {
    opacity: 0.5;
}

.border {
    border: 1px solid #eee;
}
.border .border {}

i.help {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    background-color: gray;
    border-radius: 1em;
    cursor: pointer;
    vertical-align: middle;
}
i.help:after {
    content: '?';
    color: #FFF;
    font-weight: 900;
    font-size: 0.6em;
    letter-spacing: 0;
    line-height: 1;
    font-style: normal;
}
i.help:active {
    opacity: 0.5;
}

.talkui {
    background-color: rgb(171, 194, 210);
    padding: 20px 20px 35px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.talkui > li {
    display: grid;
    grid-template-columns: 40px 1fr;
    padding-right: 80px;
    align-items: flex-start;
    gap: 10px;
}
.talkui > li > img {
    width: 40px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}
.talkui > li > .wrap {
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: relative;
    align-items: flex-start;
}
.talkui > li > .wrap .nick {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
    font-weight: bold;
}
.talkui > li > .wrap .message {
    border-radius: 14px;
    background: rgb(255, 255, 255);
    position: relative;
}
.talkui > li > .wrap .message:after {
    content: '';
    position: absolute;
    background: #FFF;
    width: 10px;
    height: 10px;
    left: -2px;
    top: 6px;
    transform: skew(40deg, 0deg);
}
.talkui > li > .wrap .message.withTitle:after {
    background: rgb(254, 229, 2);
}
.talkui > li > .wrap .message.withTitle:before {
    content: attr(data-title);
    padding: 13px 15px;
    font-weight: 700;
    font-size: 1em;
    line-height: 1;
    color: rgba(0, 0, 0, 0.9);
    background-color: rgb(254, 229, 2);
    border-radius: 14px 14px 0 0;
    width: 100%;
    display: block;
}
.talkui > li > .wrap .message.withTitle.bg-red:after {
    background: rgb(174 18 18);
    color: #FFF;
}
.talkui > li > .wrap .message.withTitle.bg-red:before {
    background: rgb(174 18 18);
    color: #FFF;
}
.talkui > li > .wrap .message > .body {
    padding: 12px 15px;
    font-weight: 500;
    font-size: 1em;
    line-height: 1.5;
    color: rgb(0, 0, 0);
}
.talkui > li > .wrap .message > .body img {
    /* max-width: 50% !important; */
    margin-top: 0.3em;
    display: block;
}
.talkui > li > .wrap .time {
    font-size: 0.75em;
    padding: 2px 0 0 8px;
    line-height: 1;
    opacity: 0.8;
}
.talkui > li.r {
    display: flex;
    justify-content: flex-end;
    padding-left: 80px;
    padding-right: 0;
}
.talkui > li.r > img {
    display: none;
}
.talkui > li.r > .wrap {
    align-items: flex-end;
}
.talkui > li.r > .wrap .message:after {
    left: inherit;
    right: -2px;
    transform: skew(-40deg, 0deg);
}
.talkui > li.r > .wrap .nick {
    text-align: right;
}
.talkui > li.r > .wrap .message.withTitle:before {}

.marquee_wrap {
    position: relative;
    overflow: hidden;
}
.marquee_wrap:after,
.marquee_wrap:before {
    content: '';
    width: 40px;
    height: 140%;
    position: absolute;
    top: -20%;
}
.marquee_wrap:before {
    left: 0;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.marquee_wrap:before {
    right: 0;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.marquee {
    display: flex;
    overflow: hidden;
    transition: none !important;
    /* gap: 1em; */
    line-height: 1;
    height: 1em;
}
.marquee.reverse {
    flex-direction: row-reverse;
}
.marquee .marquee-text {
    padding: 0 0.6em 0 0;
    margin: 0;
    font-size: inherit;
    white-space: nowrap;
    transition: none !important;
    line-height: 1;
}
.grayscale {
    filter: grayscale(1);
}

dl {
    display: grid;
    grid-template-columns: minmax(50px, auto) 1fr;
    gap: 0.4em 0.8em;
    /* align-items: center; */
}
dl > dt {
    padding-top: 0.1em;
    font-size: 1em;
    font-weight: 600;
}
dl > dd {
    min-height: 1.9em;
}

.imgfit {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

table {
    width: 100%;
    border-top: 2px solid #333;
}

table th {
    text-align: center;
    background: rgba(255,255,255,1);
    font-size: 1em;
    color: #333;
    font-weight: 500;
    height: 2em;
    border-bottom: 1px solid #ccc;
    font-size: 1.15em;
}

table td {
    background: rgba(255,255,255,0.5);
    padding: 25px;
    font-size: 1.1em;
    color: #333;
    font-weight: 500;
    height: auto;
    border-bottom: 1px solid #ccc;
}
table.small td {
    padding: 10px;
}

table td ul {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
}

table td ul li {
    display: flex;
    justify-content: flex-start;
    /* align-items: center; */
    position: relative;
}

table td ul li .txt {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.1em;
    color: #333;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

table td ul li .box {
    margin-left: 1em;
    font-size: 13px;
    color: #fff;
    height: 1.72em;
    border-radius: 4px;
    padding: 0 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #333;
}
/* mobile */
@media (max-width: 768px) {
    table {
        font-size: 13px;
    }
    table td {
        padding: 15px;
    }
    table.small tr > td:first-child,
    table.small tr > th:first-child {
        padding: 7px 0;
        text-align: center;
    }

}

ul._list {
    width: auto !important;
    height: auto;
    border-radius: 0 !important;
    background-color: transparent;
    border: none;
    margin: 0;
}
ul._list li {
    /* margin: 0 0 0.2em; */
    margin: 0;
    /* padding-left: 1em; */
    /* text-indent: -0.8em; */

    white-space-collapse: break-spaces;
}
ul._list li:before {
    /* content: "●"; */
    /* font-size: 0.3em; */
    /* margin-right: 1.5em; */
    /* vertical-align: top; */
    content: "·";
    font-size: 1em;
    font-weight: bold;
    color: inherit;
    vertical-align: center;
    margin-right: 0.5em;
}
ul._list li:last-child {
    margin-bottom: 0;
}
ul._list li b {
    font-weight: 700;
}

img {
    max-width: 100%;
}

.iconCircle30 {
    width: 30px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 50%;
}

.tabular {
    font-variant-numeric: tabular-nums;
}

#mapWrapper {
    border: 1px solid #eee;
    border-radius: 20px;
    overflow: hidden;
}
#mapWrapper .root_daum_roughmap .wrap_controllers {
    border: none !important;
    display: none !important;
}
#mapWrapper .root_daum_roughmap .border1,
.root_daum_roughmap .border2,
.root_daum_roughmap .border3,
.root_daum_roughmap .border4 {
    display: none !important;
}
#mapWrapper .root_daum_roughmap .cont {
    display: none;
}
#mapWrapper .root_daum_roughmap .wrap_controllers, #mapWrapper .root_daum_roughmap .cont {
    display: none;
}
#mapWrapper button{
    height: auto;
}


#pageCurtain {
    position: fixed;
    z-index: 99990;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 50vw solid #FFF;
    transition: 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
    pointer-events: none;
}
body.loaded #pageCurtain {
    border: 0 solid #FFF;
}

.atitle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7em;
    margin: auto;
    position: relative;
    line-height: 1;
    font-size: 1.5rem;
    /* border: 1px solid red; */
}
.atitle.text-center {
    align-items: center;
}
.atitle.big {
    font-size: 2.5rem;
}
.atitle > small {
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-primary);
}
.atitle > div {
    font-size: 1.31em;
    letter-spacing: 0;
    line-height: 1.2;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.atitle > div > * {
    /* opacity: 0; */
    transform: translateY(2em);
}

@media (max-width: 768px) {
    .atitle{
        font-size: 1.2rem;
    }
}



.breadcrumb {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    margin-top: -1em;
}
.breadcrumb > a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4em;
    font-weight: 500;
    padding: 1em 0;
}
.breadcrumb .material-symbols-outlined{
    font-size: 1.7em;
}
.breadcrumb .material-symbols-outlined.arrow{ 
    transform: scale(0.8);
    margin: 0 -0.1em;
}


.breadcrumb_wrap{
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .breadcrumb_wrap{
        margin-bottom: 0;
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        font-size: 13px;
    }
}