* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* font-family */
.ff-dflt {
    font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
}
.ff-arial {
    font-family: Arial;
}

/* box-sizing */
.bx-bb {
    box-sizing: border-box;
}
.bx-cb {
    box-sizing: content-box;
}
/* text */
.text-u--n {
    text-decoration: none;
}
.text-u--h:hover {
    text-decoration: underline;
}
.text-s {
    text-decoration: line-through;
}
.text-u,
a.text-u {
    text-decoration: underline !important;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
/* text in pixel */
.t11px {
    font-size: 11px;
}
.t12px {
    font-size: 12px;
}
.t13px {
    font-size: 13px;
}
.t14px {
    font-size: 14px;
}
.t15px {
    font-size: 15px;
}
.t16px {
    font-size: 16px;
}
.t17px {
    font-size: 17px;
}
.t18px {
    font-size: 18px;
}
.t19px {
    font-size: 19px;
}
.t20px {
    font-size: 20px;
}
.t21px {
    font-size: 21px;
}
.t22px {
    font-size: 22px;
}
.t23px {
    font-size: 23px;
}
.t25px {
    font-size: 25px;
}
.t27px {
    font-size: 27px;
}
.t29px {
    font-size: 29px;
}
.t31px {
    font-size: 31px;
}

/* text over flow: ellipsize */
.to-elps {
    text-overflow: ellipsis;
}

/* text-align  */
.t-center {
    text-align: center;
}
.t-left {
    text-align: left;
}
.t-right {
    text-align: right;
}

/* text in rem */
.t--5rem {
    font-size: 0.5rem;
}
.t--7rem {
    font-size: 0.7rem;
}
.t--9rem {
    font-size: 0.9rem;
}
.t1rem {
    font-size: 1rem;
}
.t1--1rem {
    font-size: 1.1rem;
}
.t1--2rem {
    font-size: 1.2rem;
}
.t1--3rem {
    font-size: 1.3rem;
}
.t1--5rem {
    font-size: 1.5rem;
}
.t1--7rem {
    font-size: 1.7rem;
}
.t2rem {
    font-size: 2rem;
}
.t2--5rem {
    font-size: 2.5rem;
}
.t3rem {
    font-size: 3rem;
}
.t3--5rem {
    font-size: 3.5rem;
}
.t4rem {
    font-size: 4rem;
}
.t4--5rem {
    font-size: 4.5rem;
}
.t5rem {
    font-size: 5rem;
}
/* width */
.w-inherit {
    width: inherit;
}
.w-64 {
    width: 64px;
}
.w-240 {
    width: 240px;
}
.w-260 {
    width: 260px;
}
.w-270 {
    width: 270px;
}
.w-320 {
    width: 320px;
}
.w-360 {
    width: 360px;
}
.w-400 {
    width: 400px;
}
.w-30 {
    width: 30px;
}
.w-36 {
    width: 36px;
}
.w-20 {
    width: 20px;
}
.w-160 {
    width: 160px;
}
.mxw-720 {
    max-width: 720px;
}
.h-64 {
    height: 64px;
}
.h-160 {
    height: 160px;
}
.h-100vh {
    height: 100vh;
}
.h-100vh--36 {
    height: calc(100vh - 36px);
}
.h-100vh--40 {
    height: calc(100vh - 40px);
}
.h-100vh--48 {
    height: calc(100vh - 48px);
}
.h-100vh--60 {
    height: calc(100vh - 60px);
}
/* max-width */
.mxw-inherit {
    max-width: inherit;
}
.mxw-5p {
    max-width: 5%;
}
.mxw-10p {
    max-width: 10%;
}
.mxw-15p {
    max-width: 15%;
}
.mxw-20p {
    max-width: 20%;
}
.mxw-25p {
    max-width: 25%;
}
.mxw-35p {
    max-width: 35%;
}
.mxw-40p {
    max-width: 40%;
}
.mxw-50p {
    max-width: 50%;
}
.mxw-60p {
    max-width: 60%;
}
.mxw-65p {
    max-width: 65%;
}
.mxw-100p {
    max-width: 100%;
}
.mxw-80p {
    max-width: 80%;
}
.mxw-90p {
    max-width: 90%;
}
.mxw-25 {
    max-width: 25px;
}
.mxw-50 {
    max-width: 50px;
}
.mxw-100 {
    max-width: 100px;
}
.mxw-200 {
    max-width: 200px;
}
.mxw-300 {
    max-width: 200px;
}
/* min width  */
.mxw-300 {
    max-width: 300px;
}
.mxw-320 {
    max-width: 320px;
}
.mxw-360 {
    max-width: 360px;
}
.mxw-400 {
    max-width: 400px;
}
.mxw-480 {
    max-width: 480px;
}
.mxw-500 {
    max-width: 500px;
}
.mxw-640 {
    max-width: 640px;
}
.mxw-680 {
    max-width: 680px;
}
.mxw-720 {
    max-width: 720px;
}
.mxw-960 {
    max-width: 960px;
}
.mxw-1080 {
    max-width: 1080px;
}
.mxw-960 {
    max-width: 960px;
}
.mxw-1200 {
    max-width: 1200px;
}
.mxw-1500 {
    max-width: 1500px;
}

/* min width */
.mnw-inherit {
    min-width: inherit;
}
.mnw-5p {
    min-width: 5%;
}
.mnw-10p {
    min-width: 10%;
}
.mnw-15p {
    min-width: 15%;
}
.mnw-20p {
    min-width: 20%;
}
.mnw-25p {
    min-width: 25%;
}
.mnw-35p {
    min-width: 35%;
}
.mnw-40p {
    min-width: 40%;
}
.mnw-50p {
    min-width: 50%;
}
.mnw-60p {
    min-width: 60%;
}
.mnw-65p {
    min-width: 65%;
}
.mnw-100p {
    min-width: 100%;
}
.mnw-80p {
    min-width: 80%;
}
.mnw-90p {
    min-width: 90%;
}
.mnw-25 {
    min-width: 25px;
}
.mnw-50 {
    min-width: 50px;
}
.mnw-100 {
    min-width: 100px;
}
.mnw-200 {
    min-width: 200px;
}
.mnw-300 {
    min-width: 200px;
}
.mnw-400 {
    min-width: 200px;
}
/* min width  */
.mnw-300 {
    min-width: 300px;
}
.mnw-320 {
    min-width: 320px;
}
.mnw-360 {
    min-width: 360px;
}
.mnw-400 {
    min-width: 400px;
}
.mnw-480 {
    min-width: 480px;
}
.mnw-500 {
    min-width: 500px;
}
.mnw-640 {
    min-width: 640px;
}
.mnw-680 {
    min-width: 680px;
}
.mnw-720 {
    min-width: 720px;
}
.mnw-960 {
    min-width: 960px;
}
.mnw-1080 {
    min-width: 1080px;
}
.mnw-960 {
    min-width: 960px;
}
.mnw-1200 {
    min-width: 1200;
}

.w-xl {
    width: 734px;
}
.w-8 {
    width: 8px;
}
.w-16 {
    width: 16px;
}
.w-24 {
    width: 24px;
}
.w-36 {
    width: 36px;
}
.w-40 {
    width: 40px;
}
.w-48 {
    width: 48px;
}
.w-60 {
    width: 60px;
}
.w-100 {
    width: 100px;
}
.w-150 {
    width: 150px;
}
.w-200 {
    width: 200px;
}
.w-20p {
    width: 20%;
}
.w-25p {
    width: 25%;
}
.w-40p {
    width: 40%;
}
.w-50p {
    width: 50%;
}
.w-60p {
    width: 60%;
}
.w-75p {
    width: 75%;
}
.w-80p {
    width: 80%;
}
.w-85p {
    width: 85%;
}
.w-90p {
    width: 90%;
}
.w-95p {
    width: 95%;
}
.w-100p {
    width: 100%;
}

/* height */
.h-auto {
    height: auto;
}
.h-inherit {
    height: inherit;
}
.h-100p--50 {
    height: calc(100% - 50px);
}
.h-100p--55 {
    height: calc(100% - 55px);
}
.h-100p--60 {
    height: calc(100% - 60px);
}
.h-100p--61 {
    height: calc(100% - 61px);
}
.h-100p--62 {
    height: calc(100% - 62px);
}
.h-100p--63 {
    height: calc(100% - 63px);
}
.h-100p--65 {
    height: calc(100% - 65px);
}
.h-100p--70 {
    height: calc(100% - 70px);
}
.h-100p--75 {
    height: calc(100% - 75px);
}
.h-100p--100 {
    height: calc(100% - 100px);
}
.h-100p--150 {
    height: calc(100% - 150px);
}
.h-100p--200 {
    height: calc(100% - 200px);
}
.h-100p--260 {
    height: calc(100% - 260px);
}
.h-100p--300 {
    height: calc(100% - 300px);
}
.h-100p--400 {
    height: calc(100% - 400px);
}

.h-8 {
    height: 8px;
}
.h-16 {
    height: 16px;
}
.h-20 {
    height: 20px;
}
.h-24 {
    height: 24px;
}
.h-27 {
    height: 27px;
}
.h-29 {
    height: 29px;
}
.h-36 {
    height: 36px;
}
.h-40 {
    height: 40px;
}
.h-45 {
    height: 45px;
}
.h-48 {
    height: 48px;
}
.h-60 {
    height: 60px;
}
.h-63 {
    height: 63px;
}
.mxh-63 {
    max-height: 63px;
}
.h-70 {
    height: 70px;
}
.h-80 {
    height: 80px;
}
.h-100 {
    height: 100px;
}
.h-100p {
    height: 100%;
}
.h-150 {
    height: 150px;
}
.h-200 {
    height: 200px;
}
.h-20p {
    height: 20%;
}
.h-25p {
    height: 25%;
}
.h-50p {
    height: 50%;
}
.h-75p {
    height: 75%;
}
.h-80p {
    hyphens: 80%;
}
.h-85p {
    height: 85%;
}
.h-90p {
    height: 90%;
}
.h-95p {
    height: 95%;
}
.h-100p {
    height: 100%;
}
.h-30 {
    height: 30px;
}
.h-36 {
    height: 36px;
}
/* max-height */
.mxh-inherit {
    max-height: inherit;
}
.mxh-5p {
    max-height: 5%;
}
.mxh-10p {
    max-height: 10%;
}
.mxh-15p {
    max-height: 15%;
}
.mxh-20p {
    max-height: 20%;
}
.mxh-25p {
    max-height: 25%;
}
.mxh-50p {
    max-height: 50%;
}
.mxh-80p {
    max-height: 80%;
}
.mxh-90p {
    max-height: 90%;
}
.mxh-100p {
    max-height: 100%;
}
.mxh-25 {
    max-height: 25px;
}
.mxh-50 {
    max-height: 50px;
}
.mxh-100 {
    max-height: 100px;
}
.mxh-200 {
    max-height: 200px;
}
.mxh-360 {
    max-height: 300px;
}
.mxh-400 {
    max-height: 400px;
}
.mxh-480 {
    max-height: 480px;
}
.mxh-500 {
    max-height: 500px;
}

/* min width */
.mnh-inherit {
    min-height: inherit;
}
.mnh-5p {
    min-height: 5%;
}
.mnh-10p {
    min-height: 10%;
}
.mnh-15p {
    min-height: 15%;
}
.mnh-20p {
    min-height: 20%;
}
.mnh-25p {
    min-height: 25%;
}
.mnh-50p {
    min-height: 50%;
}
.mnh-80p {
    min-height: 80%;
}
.mnh-90p {
    min-height: 90%;
}
.mnh-100p {
    min-height: 100%;
}
.mnh-25 {
    min-height: 25px;
}
.mnh-50 {
    min-height: 50px;
}
.mnh-100 {
    min-height: 100px;
}
.mnh-200 {
    min-height: 200px;
}
.mnh-360 {
    min-height: 300px;
}
.mnh-400 {
    min-height: 400px;
}
.mnh-480 {
    min-height: 480px;
}
.mnh-500 {
    min-height: 500px;
}
.mnh-580 {
    min-height: 580px;
}
.mnh-100p--100 {
    min-height: calc(100% - 150px);
}
.mnh-100p--101 {
    min-height: calc(100% - 151px);
}
.mnh-100p--102 {
    min-height: calc(100% - 152px);
}
.mnh-100p--103 {
    min-height: calc(100% - 153px);
}
.mnh-100p--150 {
    min-height: calc(100% - 150px);
}
.mnh-100p--151 {
    min-height: calc(100% - 151px);
}
.mnh-100p--152 {
    min-height: calc(100% - 152px);
}
.mnh-100p--153 {
    min-height: calc(100% - 153px);
}
.mnh-100p--200 {
    min-height: calc(100% - 200px);
}
.mnh-100p--201 {
    min-height: calc(100% - 201px);
}
.mnh-100p--202 {
    min-height: calc(100% - 202px);
}
.mnh-100p--203 {
    min-height: calc(100% - 203px);
}
.mnh-100p--220 {
    min-height: calc(100% - 220px);
}
.mnh-100p--221 {
    min-height: calc(100% - 221px);
}
.mnh-100p--222 {
    min-height: calc(100% - 222px);
}
.mnh-100p--223 {
    min-height: calc(100% - 223px);
}
/* display */
.d-none {
    display: none;
}
.d-block {
    display: block;
}
.d-flex {
    display: flex;
}
.d-iblock {
    display: inline-block;
}
.d-iflex {
    display: inline-flex;
}

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

/* top  */
.top-0 {
    top: 0;
}
.right-0 {
    right: 0;
}
.bottom-0 {
    bottom: 0;
}
.left-0 {
    left: 0;
}
.top-55 {
    top: 55px;
}
.right-55 {
    right: 55px;
}
.bottom-55 {
    bottom: 55px;
}
.left-55 {
    left: 55px;
}
.top-60 {
    top: 60px;
}
.right-60 {
    right: 60px;
}
.bottom-60 {
    bottom: 60px;
}
.left-60 {
    left: 60px;
}

/* z-index */
.zi-inherit {
    z-index: inherit;
}
.zi-0 {
    z-index: 0;
}
.zi-1 {
    z-index: 1;
}
.zi-2 {
    z-index: 2;
}
.zi-3 {
    z-index: 3;
}
.zi-5 {
    z-index: 5;
}
.zi-7 {
    z-index: 7;
}
.zi-9 {
    z-index: 9;
}
.zi-91 {
    z-index: 91;
}
.zi-97 {
    z-index: 97;
}
.zi-99 {
    z-index: 99;
}
.zi-999 {
    z-index: 999;
}
.zi-max {
    z-index: 99999;
}

/* overflow */
.o-hidden {
    overflow: hidden;
}
.o-visible {
    overflow: visible;
}
.o-auto {
    overflow: auto;
}
.o-scroll {
    overflow: scroll;
}
.ox-hidden {
    overflow-x: hidden;
}
.ox-scroll {
    overflow-x: scroll;
}
.ox-auto {
    overflow-x: auto;
}
.oy-hidden {
    overflow-y: hidden;
}
.oy-auto {
    overflow-y: auto;
}

/* flex-direction */
.fd-row {
    flex-direction: row;
}
.fd-col {
    flex-direction: column;
}
.fd-col-rev {
    flex-direction: column-reverse;
}

/* flex-wrap */
.fw-w {
    flex-wrap: wrap;
}
.fw-nw {
    flex-wrap: nowrap;
}
.fw-wr {
    flex-wrap: wrap-reverse;
}

/* flex-flow */
.ff {
    flex-flow: row wrap;
}

/* align content */
.ac-fs {
    align-content: flex-start;
}
.ac-sa {
    align-content: space-around;
}
.ac-fe {
    align-content: flex-end;
}

/* justify-content */
.jc-center {
    justify-content: center;
}

.jc-flex-start {
    justify-content: flex-start;
}

.jc-flex-end {
    justify-content: flex-end;
}
.jc-space-around {
    justify-content: space-around;
}
.jc-space-between {
    justify-content: space-between;
}

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

/* flex-basis */
.fb-0 {
    flex-basis: 0;
}
.fb-20p {
    flex-basis: 20%;
}
.fb-25p {
    flex-basis: 25%;
}
.fb-50p {
    flex-basis: 50%;
}
.fb-60p {
    flex-basis: 60%;
}
.fb-100p {
    flex-basis: 100%;
}

/* flex shrink */
.fs-1 {
    flex-shrink: 1;
}

/* flex-grow */
.fg-1 {
    flex-grow: 1;
}

/* visibility */
.v-visible {
    visibility: visible;
}
.v-hidden {
    visibility: hidden;
}

/* padding */
.p-0 {
    padding: 0px;
}
/* padding top */
.pt-0 {
    padding-top: 0px;
}
.pt-55 {
    padding-top: 55px;
}
.pt-60 {
    padding-top: 60px;
}
.pt-61 {
    padding-top: 61px;
}
.pt-63 {
    padding-top: 63px;
}
.pt-65 {
    padding-top: 65px;
}
.pt-66 {
    padding-top: 66px;
}
.pt-100p {
    padding-top: 100%;
}
.pb-0 {
    padding-bottom: 0px;
}
.pl-0 {
    padding-left: 0px;
}
.p-1 {
    padding: 1px;
}
.p-2 {
    padding: 2px;
}
.p-3 {
    padding: 3px;
}
.p-4 {
    padding: 4px;
}
.p-5 {
    padding: 5px;
}
.p-6 {
    padding: 6px;
}
.p-7 {
    padding: 7px;
}
.p-8 {
    padding: 8px;
}
.p-9 {
    padding: 9px;
}
.p-12 {
    padding: 12px;
}
.p-16 {
    padding: 16px;
}

.pt-2 {
    padding-top: 2px;
}
.pr-2 {
    padding-right: 2px;
}
.pb-2 {
    padding-bottom: 2px;
}
.pl-2 {
    padding-left: 2px;
}
.pt-3 {
    padding-top: 3px;
}
.pr-3 {
    padding-right: 3px;
}
.pb-3 {
    padding-bottom: 3px;
}
.pl-3 {
    padding-left: 3px;
}
.pt-4 {
    padding-top: 4px;
}
.pr-4 {
    padding-right: 4px;
}
.pb-4 {
    padding-bottom: 4px;
}
.pl-4 {
    padding-left: 4px;
}
.pt-5 {
    padding-top: 5px;
}
.pr-5 {
    padding-right: 5px;
}
.pb-5 {
    padding-bottom: 5px;
}
.pl-5 {
    padding-left: 5px;
}
.pt-6 {
    padding-top: 6px;
}
.pr-6 {
    padding-right: 6px;
}
.pb-6 {
    padding-bottom: 6px;
}
.pl-6 {
    padding-left: 6px;
}
.pt-7 {
    padding-top: 7px;
}
.pr-7 {
    padding-right: 7px;
}
.pb-7 {
    padding-bottom: 7px;
}
.pl-7 {
    padding-left: 7px;
}
.pt-8 {
    padding-top: 8px;
}
.pr-8 {
    padding-right: 8px;
}
.pb-8 {
    padding-bottom: 8px;
}
.pl-8 {
    padding-left: 8px;
}
.pt-9 {
    padding-top: 9px;
}
.pr-9 {
    padding-right: 9px;
}
.pb-9 {
    padding-bottom: 9px;
}
.pl-9 {
    padding-left: 9px;
}
.pt-12 {
    padding-top: 12px;
}
.pr-12 {
    padding-right: 12px;
}
.pb-12 {
    padding-bottom: 12px;
}
.pl-12 {
    padding-left: 12px;
}
.pt-14 {
    padding-top: 14px;
}
.pr-14 {
    padding-right: 14px;
}
.pb-14 {
    padding-bottom: 14px;
}
.pl-14 {
    padding-left: 14px;
}
.pt-16 {
    padding-top: 16px;
}
.pr-16 {
    padding-right: 16px;
}
.pb-16 {
    padding-bottom: 16px;
}
.pl-16 {
    padding-left: 16px;
}
.pt-21 {
    padding-top: 21px;
}
.pr-21 {
    padding-right: 21px;
}
.pb-21 {
    padding-bottom: 21px;
}
.pl-21 {
    padding-left: 21px;
}
.pt-24 {
    padding-top: 24px;
}
.pr-24 {
    padding-right: 24px;
}
.pb-24 {
    padding-bottom: 24px;
}
.pl-24 {
    padding-left: 24px;
}
.pt-27 {
    padding-top: 27px;
}
.pr-27 {
    padding-right: 27px;
}
.pb-27 {
    padding-bottom: 27px;
}
.pl-27 {
    padding-left: 27px;
}
.pb-100 {
    padding-bottom: 100px;
}
.pb-200 {
    padding-bottom: 200px;
}
.pb-260 {
    padding-bottom: 260px;
}
.pb-300 {
    padding-bottom: 300px;
}
.pb-20p {
    padding-bottom: 20%;
}
.pb-50p {
    padding-bottom: 50%;
}
.pb-60p {
    padding-bottom: 60%;
}
.pb-80p {
    padding-bottom: 80%;
}
.pb-100p {
    padding-bottom: 100%;
}
.pb-120p {
    padding-top: 120%;
}
.pl-200 {
    padding-left: 200px;
}
.pl-240 {
    padding-left: 240px;
}
.pl-300 {
    padding-left: 300px;
}
.pl-320 {
    padding-left: 320px;
}
.pl-400 {
    padding-left: 400px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-60 {
    padding-bottom: 60px;
}
/* patting right */
.pr-0 {
    padding-right: 0px;
}
.pr-60 {
    padding-right: 60px;
}
.pr-65 {
    padding-right: 65px;
}
.pt-48 {
    padding-top: 48px;
}

/* p-seudo */
.css-block--before:before {
    content: '';
    padding-bottom: 100%;
    height: 100%;
    display: block;
}
.css-block--before::before {
    content: '';
    padding-bottom: 100%;
    height: 100%;
    display: block;
}
.css-block--after:after {
    content: '';
    padding-bottom: 100%;
    height: 100%;
    display: block;
}
.css-block--after::after {
    content: '';
    padding-bottom: 100%;
    height: 100%;
    display: block;
}
/* ========= margin ========== */
.m-auto {
    margin: auto;
}
.mt-auto {
    margin-top: auto;
}
.mr-auto {
    margin-right: auto;
}
.mb-40 {
    margin-bottom: 40px;
}
.mb-auto {
    margin-bottom: auto;
}
.ml-auto {
    margin-left: auto;
}
.m-0 {
    margin: 0px;
}
.mt-0 {
    margin-top: 0px;
}
.mr-0 {
    margin-right: 0px;
}
.mb-0 {
    margin-bottom: 0px;
}
.ml-0 {
    margin-left: 0px;
}
.m-1 {
    margin: 1px;
}
.mt-2 {
    margin-top: 2px;
}
.mr-2 {
    margin-right: 2px;
}
.mb-2 {
    margin-bottom: 2px;
}
.ml-2 {
    margin-left: 2px;
}
.mt-3 {
    margin-top: 3px;
}
.mr-3 {
    margin-right: 3px;
}
.mb-3 {
    margin-bottom: 3px;
}
.ml-3 {
    margin-left: 3px;
}
.mt-4 {
    margin-top: 4px;
}
.mr-4 {
    margin-right: 4px;
}
.mb-4 {
    margin-bottom: 4px;
}
.ml-4 {
    margin-left: 4px;
}
.mt-8 {
    margin-top: 8px;
}
.mr-8 {
    margin-right: 8px;
}
.mb-8 {
    margin-bottom: 8px;
}
.ml-8 {
    margin-left: 8px;
}
.mt-12 {
    margin-top: 12px;
}
.mr-12 {
    margin-right: 12px;
}
.mb-12 {
    margin-bottom: 12px;
}
.ml-12 {
    margin-left: 12px;
}
.mt-16 {
    margin-top: 16px;
}
.mr-16 {
    margin-right: 16px;
}
.mb-16 {
    margin-bottom: 16px;
}
.ml-16 {
    margin-left: 16px;
}
.mt-21 {
    margin-top: 21px;
}
.mr-21 {
    margin-right: 21px;
}
.mb-21 {
    margin-bottom: 21px;
}
.ml-21 {
    margin-left: 21px;
}
.mt-22 {
    margin-top: 22px;
}
.mr-22 {
    margin-right: 22px;
}
.mb-22 {
    margin-bottom: 22px;
}
.ml-22 {
    margin-left: 22px;
}
.mt-27 {
    margin-top: 27px;
}
.mr-27 {
    margin-right: 27px;
}
.mb-27 {
    margin-bottom: 27px;
}
.ml-27 {
    margin-left: 27px;
}
.mb-24 {
    margin-bottom: 24px;
}
.mr-24 {
    margin-right: 24px;
}
.mb-1 {
    margin-bottom: 1px;
}
.mt--1 {
    margin-top: -1px;
}
.mt--2 {
    margin-top: -2px;
}
.mt--3 {
    margin-top: -3px;
}
.mt--4 {
    margin-top: -4px;
}
.mr--1 {
    margin-right: -1px;
}
.mr--2 {
    margin-right: -2px;
}
.mr--3 {
    margin-right: -3px;
}
.mr--4 {
    margin-right: -4px;
}
.mb--1 {
    margin-bottom: -1px;
}
.mb--2 {
    margin-bottom: -2px;
}
.mb--3 {
    margin-bottom: -3px;
}
.mb--4 {
    margin-bottom: -4px;
}
.ml--1 {
    margin-left: -1px;
}
.ml--2 {
    margin-left: -2px;
}
.ml--3 {
    margin-left: -3px;
}
.ml--4 {
    margin-left: -4px;
}
.ml-200 {
    margin-left: 200px;
}
.ml--200 {
    margin-left: -200px;
}
.ml--240 {
    margin-left: -240px;
}

/* float */
.f-right {
    float: right;
}
.f-left {
    float: left;
}

/* font style */
.fs-italic {
    font-style: italic;
}
/* ======== border- radius ======== */
.r-inherit {
    border-radius: inherit;
}
.r-3 {
    border-radius: 3px;
}
.r-4 {
    border-radius: 4px;
}
.r-5 {
    border-radius: 5px;
}
.r-6 {
    border-radius: 6px;
}
.r-7 {
    border-radius: 7px;
}
.r-8 {
    border-radius: 8px;
}
.r-9 {
    border-radius: 9px;
}
.r-20p {
    border-radius: 20%;
}
.r-25p {
    border-radius: 25%;
}
.r-50p {
    border-radius: 50%;
}
.rtr-3 {
    border-top-right-radius: 3px;
}
.rtl-3 {
    border-top-left-radius: 3px;
}
.rtr-3 {
    border-bottom-right-radius: 3px;
}
.rtr-3 {
    border-bottom-left-radius: 3px;
}

.rtr-5 {
    border-top-right-radius: 5px;
}
.rtl-5 {
    border-top-left-radius: 5px;
}
.rtr-5 {
    border-bottom-right-radius: 5px;
}
.rtr-5 {
    border-bottom-left-radius: 5px;
}

.rtr-7 {
    border-top-right-radius: 7px;
}
.rtl-7 {
    border-top-left-radius: 7px;
}
.rbr-7 {
    border-bottom-right-radius: 7px;
}
.rbl-7 {
    border-bottom-left-radius: 7px;
}

.rtr-9 {
    border-top-right-radius: 9px;
}
.rtl-9 {
    border-top-left-radius: 9px;
}
.rbr-9 {
    border-bottom-right-radius: 9px;
}
.rbr-9 {
    border-bottom-left-radius: 9px;
}
.rtl-31 {
    border-top-left-radius: 31px;
}
.rtr-31 {
    border-top-right-radius: 31px;
}
.rtr-50p {
    border-top-right-radius: 50%;
}
.rtl-50p {
    border-top-left-radius: 50%;
}
.rbr-50p {
    border-bottom-right-radius: 50%;
}
.rbl-50p {
    border-bottom-left-radius: 50%;
}

.rtr-100 {
    border-top-right-radius: 100px;
}
.rtl-100 {
    border-top-left-radius: 100px;
}
.rbr-100 {
    border-bottom-right-radius: 100px;
}
.rbl-100 {
    border-bottom-left-radius: 100px;
}

/* opecity */
.opacity-0 {
    opacity: 0;
}
.opacity-1 {
    opacity: 1;
}
.opacity-0--3 {
    opacity: 0.3;
}
.opacity-0--5 {
    opacity: 0.5;
}
.opacity-0--7 {
    opacity: 0.7;
}

/* color-icon-background */
.bg-f8 {
    background-color: #f8f8f8;
}
.bg-white--f:focus {
    background-color: #ffffff;
}
.bg-foggy {
    background-color: rgba(247, 247, 247, 0.79);
}
.bg-foggy-light {
    background-color: rgba(255, 255, 255, 0.56);
}
.bg-ddd {
    background-color: #ddd;
}
.bg-ddd--h:hover {
    background-color: #ddd;
}
.bg-ccc--h:hover {
    background-color: #ccc;
}
.bg-aaa {
    background-color: #aaa;
}
.bg-aaa--h:hover {
    background-color: #aaa;
}
.bg-aaa--h:hover {
    background-color: #aaa;
}
.bg-body {
    background-color: #f0f2f5;
}
.bg-black {
    background-color: #000000;
}
.bg-red {
    background-color: #ff3223;
}
.bg-transparent {
    background-color: transparent;
}
.bg-white {
    background-color: #ffffff;
}
.bg-white--h:hover {
    background-color: #ffffff;
}
.bg-navbar {
    background-color: #01283c;
}
.bg-light-gray {
    background-color: rgb(228, 230, 235);
}
.bg-light-gray.hoverable:hover {
    background-color: rgb(205, 207, 212);
}
.bg-blue-light-gray {
    background-color: #e7f3ff;
}
.bg-blue-light-gray--i {
    background-color: #e7f3ff !important;
}
.bg-blue-light-gray--h:hover {
    background-color: #e7f3ff;
}
.bg-light-gray--h:hover {
    background-color: rgb(228, 230, 235);
}
.bg-danger-light-gray {
    background-color: #ffdbd8;
}
.bg-danger-light-gray--h:hover {
    background-color: #ffdbd8;
}
.bg-light-blue {
    background-color: #1876f2;
}
.bg-light-blue.hoverable:hover {
    background-color: #0e63d4;
}
.bg-secondary {
    background-color: rgba(0, 0, 0, 0.05);
}
.bg-secondary.hoverable:hover {
    background-color: rgba(0, 0, 0, 0.09);
}
.bg-purple {
    background-color: #800080;
}
.bg-purple--h:hover {
    background-color: #800080;
}
.bg-green {
    background-color: #007600;
}
.bg-green--h:hover {
    background-color: #007600;
}

/* user -select none */
.us-none {
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* background color when hover */
.bg-navbar--h:hover {
    background-color: #01283c;
}
.bg-secondary--h:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
.bg-light-gray--h:hover {
    background-color: rgb(228, 230, 235);
}
.bg-light-blue--h:hover {
    background-color: #1876f2;
}
.bg-purple--h:hover {
    background-color: #800080;
}
.bg-light-box {
    background-color: rgba(0, 0, 0, 0.55);
}
.bg-light-box-2 {
    background-color: rgba(0, 0, 0, 0.78);
}
/* background-property */
.bgr-no-repeat {
    background-repeat: no-repeat;
}

.bgp-center {
    background-position: center;
}

/* text default color */
.c-price {
    color: #b12704;
}
.c-purple {
    color: #800080;
}
.c-blue-in-sibling-div + div {
    color: #1876f2;
}
.c-purple-in-sibling-div + div {
    color: #800080;
}
.c-muted-in-sibling-div + div {
    color: #6c757d;
}
.c-link-in-sibling-div + div {
    color: #007bff;
}
.c-success-in-sibling-div + div {
    color: #28a745;
}

/* text hover color  */
.c-blue-in-sibling-div--h:hover + div {
    color: #1876f2;
}
.c-purple-in-sibling-div--h:hover + div {
    color: #800080;
}
.c-muted-in-sibling-div--h:hover + div {
    color: #6c757d;
}
.c-link-in-sibling-div--h:hover + div {
    color: #007bff;
}
.c-success-in-sibling-div--h:hover + div {
    color: #28a745;
}
.c-state {
    color: #c45500;
}
.c-state--h:hover {
    color: #c45500;
}
.c-transparent {
    color: transparent;
}
.c-muted {
    color: #6c757d;
}
.c-muted--h:hover {
    color: #6c757d;
}
.c-rose {
    color: #ca0144;
}
.c-rose--h:hover {
    color: #ca0144;
}
.c-link {
    color: #007bff;
}
.c-link--h:hover {
    color: #007bff;
}
.c-success {
    color: #28a745;
}
.c-success--h:hover {
    color: #28a745;
}
.c-danger {
    color: #dc3545;
}
.c-danger--h:hover {
    color: #dc3545;
}
.c-secondary {
    color: #555555;
}
.c-secondary--h:hover {
    color: #555555;
}
.c-dflt {
    color: #444;
}
.c-dflt--h:hover {
    color: #444;
}
.c-base {
    color: #111;
}
.c-base--h:hover {
    color: #111;
}
.c-white {
    color: #ffffff;
}
.c-white--h:hover {
    color: #ffffff;
}
.c-purple--h:hover {
    color: #800080;
}
.c-green {
    color: #007600;
}
.c-green--h:hover {
    color: #007600;
}
.c-000 {
    color: #000000;
}
.c-000-i {
    color: #000000 !important;
}
.c-000--h:hover {
    color: #000000;
}
.c-111 {
    color: #111111;
}
.c-111-i {
    color: #111111 !important;
}
.c-111--h:hover {
    color: #111111;
}
.c-444 {
    color: #444444;
}
.c-444--h:hover {
    color: #444444;
}
.c-888 {
    color: #888888;
}
.c-888--h:hover {
    color: #888888;
}
.c-aaa {
    color: #aaaaaa;
}
.c-aaa--h:hover {
    color: #aaaaaa;
}
.c-ddd {
    color: #dddddd;
}
.c-ddd--h:hover {
    color: #dddddd;
}
.c-f8--h {
    color: #f8f8f8;
}
.c-f8--h:hover {
    color: #f8f8f8;
}

/* line-height */
.lh-1--2 {
    line-height: 1.2;
}
.lh-1--3 {
    line-height: 1.3;
}
.lh-1--4 {
    line-height: 1.4;
}
.lh-1--5 {
    line-height: 1.5;
}

/* font-weight */
.fw {
    font-weight: normal;
}
.fw-bold {
    font-weight: bold;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}

/* white-space nowrap */
.ws-nowrap {
    white-space: nowrap;
}
.ws-normal {
    white-space: normal;
}

/* outline none */
.o-none {
    outline: none;
}

/* border-none */
.b-none {
    border: none;
}
.bc-white {
    border-color: #ffffff;
}
.bc-f8 {
    border-color: #f8f8f8;
}
.bc-ee {
    border-color: #eeeeee;
}
.bc-e7 {
    border-color: #e7e7e7;
}
.bc-dd {
    border-color: #ddd;
}
.bc-dd--h:hover {
    border-color: #ddd;
}
.bc-cc {
    border-color: #ccc;
}
.bc-cc--h:hover {
    border-color: #ccc;
}
.bc-aa {
    border-color: #aaa;
}
.bc-aa--h:hover {
    border-color: #aaa;
}
.bc-ca {
    border-color: #cacaca;
}
.bc-ca--h:hover {
    border-color: #cacaca;
}
/* border color */
.bc-secondary {
    border-color: #e7e7e7;
}
.bc-purple {
    border-color: #800080;
}
.bc-danger {
    border-color: rgb(251, 71, 0);
}
.bc-light-blue {
    border-color: rgb(29, 161, 242);
}
.bc-light-blue--i {
    border-color: rgb(29, 161, 242) !important;
}
.bc-light-blue--h:hover {
    border-color: rgb(29, 161, 242);
}
.bc-light-blue--f:focus {
    border-color: rgb(29, 161, 242);
}

/* border style */
.bs-solid {
    border-style: solid;
}
.bs-dotted {
    border-style: dotted;
}
.bs-dashed {
    border-style: dashed;
}
.bs-groove {
    border-style: groove;
}

/* border style position */
.bts-solid {
    border-top-style: solid;
}
.brs-solid {
    border-right-style: solid;
}
.bbs-solid {
    border-bottom-style: solid;
}
.bls-solid {
    border-left-style: solid;
}
/* border width */
.bw-1 {
    border-width: 1px;
}
.bw-2 {
    border-width: 2px;
}
.bw-3 {
    border-width: 3px;
}
.bw-4 {
    border-width: 4px;
}
.bw-5 {
    border-width: 5px;
}
.bw-6 {
    border-width: 6px;
}
.bw-7 {
    border-width: 7px;
}

/* vertical align */
.va-top {
    vertical-align: top;
}
.va-bottom {
    vertical-align: bottom;
}
.va-baseline {
    vertical-align: baseline;
}
.va-sub {
    vertical-align: sub;
}
.va-sup {
    vertical-align: super;
}

/* box-shadow */
.bxs-primary {
    box-shadow: 0 1px 3px #cacaca;
}
.bxs-primary--h:hover {
    box-shadow: 0 1px 3px #cacaca;
}
.bxs-modal {
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px hsla(0, 0%, 100%, 0.5);
}
.bxs-modal-2 {
    box-shadow: rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px, rgba(0, 0, 0, 0.4) 0px 11px 15px -7px;
}

/* svg */
.svg-s {
    stroke: rgba(0, 0, 0, 0.1);
}
.svg-s-white {
    stroke: #fff;
}
.svg-s-black {
    stroke: #000;
}
.svg-sw-2 {
    stroke-width: 2;
}
.svg-sw-3 {
    stroke-width: 3;
}
.svg-sw-5 {
    stroke-width: 5;
}
.svg-sw-7 {
    stroke-width: 7;
}
.svg-f-none {
    fill: none;
}
.svg-f-blue {
    fill: #1876f2;
}
.svg-f-444 {
    fill: #444444;
}
.svg-f-fff {
    fill: #ffffff;
}
.svg-f-ddd {
    fill: #dddddd;
}
.svg-f-aaa {
    fill: #aaaaaa;
}
.svg-f-000 {
    fill: #000000;
}
.svg-f-111 {
    fill: #111111;
}
/* default */
.svg-f-blue-in-sibling-div + div svg {
    fill: #1876f2;
}
.svg-f-blue-in-sibling-div + div svg {
    color: #1876f2;
}
.svg-f-purple-in-sibling-div + div svg {
    color: #800080;
}
.svg-f-muted-in-sibling-div + div svg {
    color: #6c757d;
}
.svg-f-link-in-sibling-div + div svg {
    color: #007bff;
}
.svg-f-success-in-sibling-div + div svg {
    color: #28a745;
}
/* on hover */
.svg-f-blue-in-sibling-div--h:hover + div svg {
    fill: #1876f2;
}
.svg-f-blue-in-sibling-div--h:hover + div svg {
    color: #1876f2;
}
.svg-f-purple-in-sibling-div--h:hover + div svg {
    color: #800080;
}
.svg-f-muted-in-sibling-div--h:hover + div svg {
    color: #6c757d;
}
.svg-f-link-in-sibling-div--h:hover + div svg {
    color: #007bff;
}
.svg-f-success-in-sibling-div--h:hover + div svg {
    color: #28a745;
}

/* cursor */
.cursor-p {
    cursor: pointer;
}
.cursor-d {
    cursor: default;
}
.cursor-t {
    cursor: text;
}

/* css for input */
.inp-bxs-i {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.inp-bc-focus:focus {
    border-color: #2188ff;
}

.inp-bxs-focus:focus {
    box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(3, 102, 214, 0.3);
}

.inp-tran {
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.tran-ease-in--3s {
    transition: all ease-in 0.3s;
}

/* list style */
.ls-none {
    list-style-type: none;
}
.ls-disc {
    list-style-type: disc;
}
.ls-decimal {
    list-style-type: decimal;
}
.ls-circle {
    list-style-type: circle;
}