* {
    margin: 0;
    padding: 0;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
}

body {
    // Margin & padding
    --margin-padding-0: 0px;
    --margin-padding-1: 5px;
    --margin-padding-2: 10px;
    --margin-padding-3: 15px;
    --margin-padding-4: 20px;
    --margin-padding-5: 25px;
    --margin-padding-6: 30px;
    --margin-padding-7: 35px;
    --margin-padding-10: 50px;

    // 文字大小
    --font-size-s: 10px;
    --font-size-0: 12px;
    --font-size-1: 14px;
    --font-size-2: 16px;
    --font-size-3: 18px;
    --font-size-4: 20px;
    --font-size-5: 22px;
    --font-size-6: 24px;
    --font-size-7: 26px;
    --font-size-8: 28px;
    --font-size-9: 30px;
    --font-size-10: 32px;
}

.n-flex {
    display: flex;
}

.n-flex-dr-c {
    flex-direction: column;
}

.n-flex-w {
    flex-wrap: wrap;
}

.n-flex-j-s {
    justify-content: flex-start;
}

.n-flex-j-c {
    justify-content: center;
}

.n-flex-j-e {
    justify-content: flex-end;
}

.n-flex-j-sb {
    justify-content: space-between;
}

.n-flex-j-sa {
    justify-content: space-around;
}

.n-flex-a-c {
    align-items: center;
}

.n-flex-a-fl {
    align-items: first baseline;
}

.n-flex-a-t {
    align-items: stretch;
}

.n-flex-a-s {
    align-items: flex-start;
}

.n-flex-a-e {
    align-items: flex-end;
}

.n-flex-s {
    flex-shrink: 0;
}

.n-flex-g {
    flex-grow: 1;
}

.n-flex-g-h-1-hack {
    height: 0;
}

.n-flex-g-w-1-hack {
    width: 0;
}


// 字体加粗
.n-f-bold1 {
    font-weight: 100;
}

.n-f-bold2 {
    font-weight: 200;
}

.n-f-bold3 {
    font-weight: 300;
}

.n-f-bold4 {
    font-weight: 400;
}

.n-f-bold5 {
    font-weight: 500;
}

.n-f-bold6 {
    font-weight: 600;
}

.n-f-bold7 {
    font-weight: 700;
}

.n-f-bold8 {
    font-weight: 800;
}

.n-f-bold9 {
    font-weight: 900;
}

.n-f-s {
    font-size: var(--font-size-s);
}

.n-f-0 {
    font-size: var(--font-size-0);
}

.n-f-1 {
    font-size: var(--font-size-1);
}

.n-f-2 {
    font-size: var(--font-size-2);
}

.n-f-3 {
    font-size: var(--font-size-3);
}

.n-f-4 {
    font-size: var(--font-size-4);
}

.n-f-5 {
    font-size: var(--font-size-5);
}

.n-f-6 {
    font-size: var(--font-size-6);
}

.n-f-7 {
    font-size: var(--font-size-7);
}

.n-f-8 {
    font-size: var(--font-size-8);
}

.n-f-9 {
    font-size: var(--font-size-9);
}

.n-f-10 {
    font-size: var(--font-size-10);
}


//Display
.n-inline {
    display: inline;
}

.n-block {
    display: block;
}

.n-inline-block {
    display: inline-block;
}

.n-hide-none {
    display: none;
}

.n-hide-opacity {
    opacity: 0;
}

.n-opacity-5 {
    opacity: 0.5;
}

.n-opacity-2 {
    opacity: 0.2;
}

.n-line-height-1 {
    line-height: 1;
}

.n-line-height-1-5 {
    line-height: 1.5;
}

.n-line-height-2 {
    line-height: 2;
}

.n-text-center {
    text-align: center;
}

.n-text-right {
    text-align: right;
}

.n-text-left {
    text-align: left;
}

.n-h-1 {
    height: 100%;
}

.n-h-2 {
    height: 50%;
}

.n-mh-1 {
    min-height: 100%;
}

.n-vh-1 {
    height: 100vh;
}

.n-vh-2 {
    height: 50vh;
}

.n-mvh-1 {
    min-height: 100vh;
}

.n-vw-1 {
    width: 100vw;
}

.n-break-word {
    word-break: break-all;
}

.n-keep-word {
    word-break: keep-all;
    white-space: nowrap;
}


.n-pl-0,
.n-plr-0,
.n-p-0 {
    padding-left: var(--margin-padding-0);
}

.n-pl-1,
.n-plr-1,
.n-p-1 {
    padding-left: var(--margin-padding-1);
}

.n-pl-2,
.n-plr-2,
.n-p-2 {
    padding-left: var(--margin-padding-2);
}

.n-pl-3,
.n-plr-3,
.n-p-3 {
    padding-left: var(--margin-padding-3);
}

.n-pl-4,
.n-plr-4,
.n-p-4 {
    padding-left: var(--margin-padding-4);
}

.n-pl-5,
.n-plr-5,
.n-p-5 {
    padding-left: var(--margin-padding-5);
}

.n-pl-6,
.n-plr-6,
.n-p-6 {
    padding-left: var(--margin-padding-6);
}

.n-pl-7,
.n-plr-7,
.n-p-7 {
    padding-left: var(--margin-padding-7);
}

.n-pl-10,
.n-plr-10,
.n-p-10 {
    padding-left: var(--margin-padding-10);
}

.n-pr-0,
.n-plr-0,
.n-p-0 {
    padding-right: var(--margin-padding-0);
}

.n-pr-1,
.n-plr-1,
.n-p-1 {
    padding-right: var(--margin-padding-1);
}

.n-pr-2,
.n-plr-2,
.n-p-2 {
    padding-right: var(--margin-padding-2);
}

.n-pr-3,
.n-plr-3,
.n-p-3 {
    padding-right: var(--margin-padding-3);
}

.n-pr-4,
.n-plr-4,
.n-p-4 {
    padding-right: var(--margin-padding-4);
}

.n-pr-5,
.n-plr-5,
.n-p-5 {
    padding-right: var(--margin-padding-5);
}

.n-pr-6,
.n-plr-6,
.n-p-6 {
    padding-right: var(--margin-padding-6);
}

.n-pr-7,
.n-plr-7,
.n-p-7 {
    padding-right: var(--margin-padding-7);
}

.n-pr-10,
.n-plr-10,
.n-p-10 {
    padding-right: var(--margin-padding-10);
}

.n-pt-0,
.n-ptb-0,
.n-p-0 {
    padding-top: var(--margin-padding-0);
}

.n-pt-1,
.n-ptb-1,
.n-p-1 {
    padding-top: var(--margin-padding-1);
}

.n-pt-2,
.n-ptb-2,
.n-p-2 {
    padding-top: var(--margin-padding-2);
}

.n-pt-3,
.n-ptb-3,
.n-p-3 {
    padding-top: var(--margin-padding-3);
}

.n-pt-4,
.n-ptb-4,
.n-p-4 {
    padding-top: var(--margin-padding-4);
}

.n-pt-5,
.n-ptb-5,
.n-p-5 {
    padding-top: var(--margin-padding-5);
}

.n-pt-6,
.n-ptb-6,
.n-p-6 {
    padding-top: var(--margin-padding-6);
}

.n-pt-7,
.n-ptb-7,
.n-p-7 {
    padding-top: var(--margin-padding-7);
}

.n-pt-10,
.n-ptb-10,
.n-p-10 {
    padding-top: var(--margin-padding-10);
}

.n-pb-0,
.n-ptb-0,
.n-p-0 {
    padding-bottom: var(--margin-padding-0);
}

.n-pb-1,
.n-ptb-1,
.n-p-1 {
    padding-bottom: var(--margin-padding-1);
}

.n-pb-2,
.n-ptb-2,
.n-p-2 {
    padding-bottom: var(--margin-padding-2);
}

.n-pb-3,
.n-ptb-3,
.n-p-3 {
    padding-bottom: var(--margin-padding-3);
}

.n-pb-4,
.n-ptb-4,
.n-p-4 {
    padding-bottom: var(--margin-padding-4);
}

.n-pb-5,
.n-ptb-5,
.n-p-5 {
    padding-bottom: var(--margin-padding-5);
}

.n-pb-6,
.n-ptb-6,
.n-p-6 {
    padding-bottom: var(--margin-padding-6);
}

.n-pb-7,
.n-ptb-7,
.n-p-7 {
    padding-bottom: var(--margin-padding-7);
}

.n-pb-10,
.n-ptb-10,
.n-p-10 {
    padding-bottom: var(--margin-padding-10);
}

.n-ml-0,
.n-mlr-0,
.n-m-0 {
    margin-left: var(--margin-padding-0);
}

.n-ml-1,
.n-mlr-1,
.n-m-1 {
    margin-left: var(--margin-padding-1);
}

.n-ml-2,
.n-mlr-2,
.n-m-2 {
    margin-left: var(--margin-padding-2);
}

.n-ml-3,
.n-mlr-3,
.n-m-3 {
    margin-left: var(--margin-padding-3);
}

.n-ml-4,
.n-mlr-4,
.n-m-4 {
    margin-left: var(--margin-padding-4);
}

.n-ml-5,
.n-mlr-5,
.n-m-5 {
    margin-left: var(--margin-padding-5);
}

.n-ml-6,
.n-mlr-6,
.n-m-6 {
    margin-left: var(--margin-padding-6);
}

.n-ml-7,
.n-mlr-7,
.n-m-7 {
    margin-left: var(--margin-padding-7);
}

.n-ml-10,
.n-mlr-10,
.n-m-10 {
    margin-left: var(--margin-padding-10);
}

.n-mr-0,
.n-mlr-0,
.n-m-0 {
    margin-right: var(--margin-padding-0);
}

.n-mr-1,
.n-mlr-1,
.n-m-1 {
    margin-right: var(--margin-padding-1);
}

.n-mr-2,
.n-mlr-2,
.n-m-2 {
    margin-right: var(--margin-padding-2);
}

.n-mr-3,
.n-mlr-3,
.n-m-3 {
    margin-right: var(--margin-padding-3);
}

.n-mr-4,
.n-mlr-4,
.n-m-4 {
    margin-right: var(--margin-padding-4);
}

.n-mr-5,
.n-mlr-5,
.n-m-5 {
    margin-right: var(--margin-padding-5);
}

.n-mr-6,
.n-mlr-6,
.n-m-6 {
    margin-right: var(--margin-padding-6);
}

.n-mr-7,
.n-mlr-7,
.n-m-7 {
    margin-right: var(--margin-padding-7);
}

.n-mr-10,
.n-mlr-10,
.n-m-10 {
    margin-right: var(--margin-padding-10);
}

.n-mt-0,
.n-mtb-0,
.n-m-0 {
    margin-top: var(--margin-padding-0);
}

.n-mt-1,
.n-mtb-1,
.n-m-1 {
    margin-top: var(--margin-padding-1);
}

.n-mt-2,
.n-mtb-2,
.n-m-2 {
    margin-top: var(--margin-padding-2);
}

.n-mt-3,
.n-mtb-3,
.n-m-3 {
    margin-top: var(--margin-padding-3);
}

.n-mt-4,
.n-mtb-4,
.n-m-4 {
    margin-top: var(--margin-padding-4);
}

.n-mt-5,
.n-mtb-5,
.n-m-5 {
    margin-top: var(--margin-padding-5);
}

.n-mt-6,
.n-mtb-6,
.n-m-6 {
    margin-top: var(--margin-padding-6);
}

.n-mt-7,
.n-mtb-7,
.n-m-7 {
    margin-top: var(--margin-padding-7);
}

.n-mt-10,
.n-mtb-10,
.n-m-10 {
    margin-top: var(--margin-padding-10);
}

.n-mb-0,
.n-mtb-0,
.n-m-0 {
    margin-bottom: var(--margin-padding-0);
}

.n-mb-1,
.n-mtb-1,
.n-m-1 {
    margin-bottom: var(--margin-padding-1);
}

.n-mb-2,
.n-mtb-2,
.n-m-2 {
    margin-bottom: var(--margin-padding-2);
}

.n-mb-3,
.n-mtb-3,
.n-m-3 {
    margin-bottom: var(--margin-padding-3);
}

.n-mb-4,
.n-mtb-4,
.n-m-4 {
    margin-bottom: var(--margin-padding-4);
}

.n-mb-5,
.n-mtb-5,
.n-m-5 {
    margin-bottom: var(--margin-padding-5);
}

.n-mb-6,
.n-mtb-6,
.n-m-6 {
    margin-bottom: var(--margin-padding-6);
}

.n-mb-7,
.n-mtb-7,
.n-m-7 {
    margin-bottom: var(--margin-padding-7);
}

.n-mb-10,
.n-mtb-10,
.n-m-10 {
    margin-bottom: var(--margin-padding-10);
}

.n-m-auto {
    margin-left: auto;
    margin-right: auto;
}

//Radius
.n-radius-3 {
    border-radius: var(--radius-3);
}

.n-radius-6 {
    border-radius: var(--radius-6);
}

.n-radius-8 {
    border-radius: var(--radius-8);
}

.n-radius-10 {
    border-radius: var(--radius-10);
}

.n-radius-12 {
    border-radius: var(--radius-12);
}

.n-radius-15 {
    border-radius: var(--radius-15);
}

.n-radius-20 {
    border-radius: var(--radius-20);
}

.n-radius-circle {
    border-radius: 50%;
}


.n-border-0 {
    border: 0;

    &:after {
        display: none;
    }
}

.n-border-box {
    box-sizing: border-box;
}

.n-f-underline {
    text-decoration: underline;
}

.n-f-delline {
    text-decoration: line-through;
}