@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+TC:wght@100..900&display=swap');

:root {
    --policy-ink: #1b2a41;
    --policy-muted: #5f6c80;
    --policy-accent: #165e8f;
    --policy-border: rgba(27, 42, 65, 0.1);
    --policy-surface: rgba(255, 255, 255, 0.94);
    --policy-shadow: 0 20px 45px rgba(27, 42, 65, 0.1);
}

body {
    margin: 0 !important;
    color: var(--policy-ink);
    background:
        linear-gradient(180deg, #f4f8fb 0%, #eef5f9 45%, #f8fafc 100%);
}

.content {
    max-width: 1040px;
    margin: 0 auto 72px;
    padding: 108px 40px 52px;
    box-sizing: border-box;
    letter-spacing: 0.2px;
    line-height: 1.9;
    font-size: 14px;
}

.content h1 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0 0 12px;
    font-family: "Jost", "Noto Sans TC", sans-serif;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--policy-ink);
    border-bottom: 1px solid rgba(27, 42, 65, 0.12);
}

.content h1::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #165e8f, #7fb2d6);
}

.content > p:first-of-type {
    margin: 0 0 24px;
    padding: 24px 28px;
    background: var(--policy-surface);
    border: 1px solid var(--policy-border);
    border-radius: 24px;
    box-shadow: var(--policy-shadow);
}

.point {
    margin-top: 18px;
    padding: 24px 28px;
    background: var(--policy-surface);
    border: 1px solid var(--policy-border);
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(27, 42, 65, 0.06);
}

.point h2 {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(22, 94, 143, 0.16);
    color: var(--policy-accent);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
}

.point ul,
.point ol {
    margin: 0;
    padding-left: 1.35em;
}

.point li {
    margin: 10px 0;
    color: var(--policy-ink);
}

.point li::marker {
    color: var(--policy-muted);
}

.point ul ul,
.point ul ol,
.point ol ul,
.point ol ol {
    margin-top: 8px;
}

#one > ul > ul,
#seven ol > li > ul {
    list-style-type: square;
}

@media screen and (max-width: 992px) {
    .content {
        padding: 96px 24px 44px;
    }

    .content h1 {
        font-size: 17px;
    }

    .content > p:first-of-type,
    .point {
        padding: 20px 22px;
        border-radius: 20px;
    }

    .point h2 {
        font-size: 15px;
    }
}

@media screen and (max-width: 576px) {
    .content {
        padding: 84px 14px 36px;
        font-size: 14px;
        line-height: 1.8;
    }

    .content h1 {
        font-size: 17px;
        margin-bottom: 18px;
        gap: 8px;
        padding-bottom: 10px;
    }

    .content h1::before {
        width: 22px;
    }

    .content > p:first-of-type,
    .point {
        padding: 16px 16px;
        border-radius: 18px;
    }

    .point {
        margin-top: 14px;
    }

    .point h2 {
        font-size: 15px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .point ul,
    .point ol {
        padding-left: 1.15em;
    }
}