:root {
    --fontFamily: 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', sans-serif;
    --lineHeight4: calc(1em + 4px);
    --lineHeight8: calc(1em + 8px);
    --lineHeight12: calc(1em + 12px);
    --lineHeight16: calc(1em + 16px);
    --lineHeight20: calc(1em + 20px);
    --lineHeight24: calc(1em + 24px);
    --fontSize12: 12px;
    --fontSize13: 13px;
    --fontSize14: 14px;
    --fontSize16: 16px;
    --fontSize18: 18px;
    --fontSize20: 20px;
    --fontSize22: 22px;
    --fontSize24: 24px;
    --fontSize28: 28px;
    --fontSize32: 32px;
    --fontSize48: 48px;
    --fontSize58: 58px;
    --fontWeightRegular: 400;
    --fontWeightMedium: 500;
    --fontWeightBold: 700;
    /* 文字元件 */
    --title01: var(--fontWeightBold) var(--fontSize28)/var(--lineHeight12) var(--fontFamily);
    --title02: var(--fontWeightBold) var(--fontSize28)/var(--lineHeight12) var(--fontFamily);
    --title03: var(--fontWeightBold) var(--fontSize28)/var(--lineHeight12) var(--fontFamily);
    --title04: var(--fontWeightBold) var(--fontSize22)/var(--lineHeight8) var(--fontFamily);
    --title05: var(--fontWeightBold) var(--fontSize18)/var(--lineHeight8) var(--fontFamily);
    --title06: var(--fontWeightMedium) var(--fontSize14)/var(--lineHeight4) var(--fontFamily);
    --title07: var(--fontWeightBold) var(--fontSize12)/var(--lineHeight4) var(--fontFamily);
    --title08: var(--fontWeightBold) var(--fontSize16)/var(--lineHeight8) var(--fontFamily);
    --content01: var(--fontWeightMedium) var(--fontSize16)/var(--lineHeight8) var(--fontFamily);
    --content02: var(--fontWeightRegular) var(--fontSize14)/var(--lineHeight4) var(--fontFamily);
    --content03: var(--fontWeightRegular) var(--fontSize14)/var(--lineHeight4) var(--fontFamily);
    --content04: var(--fontWeightMedium) var(--fontSize14)/var(--lineHeight4) var(--fontFamily);
    --content05: var(--fontWeightBold) var(--fontSize14)/var(--lineHeight4) var(--fontFamily);
    --content06: var(--fontWeightRegular) var(--fontSize14)/var(--lineHeight4) var(--fontFamily);
    --content07: var(--fontWeightRegular) var(--fontSize12)/var(--lineHeight4) var(--fontFamily);
    --content08: var(--fontWeightMedium) var(--fontSize14)/var(--lineHeight4) var(--fontFamily);
}

@media screen and (min-width: 1024px) {
     :root {
        /* 文字元件 */
        --title01: var(--fontWeightBold) var(--fontSize58)/var(--lineHeight24) var(--fontFamily);
        --title02: var(--fontWeightBold) var(--fontSize48)/var(--lineHeight20) var(--fontFamily);
        --title03: var(--fontWeightBold) var(--fontSize32)/var(--lineHeight16) var(--fontFamily);
        --title04: var(--fontWeightBold) var(--fontSize28)/var(--lineHeight12) var(--fontFamily);
        --title05: var(--fontWeightBold) var(--fontSize24)/var(--lineHeight12) var(--fontFamily);
        --title06: var(--fontWeightMedium) var(--fontSize16)/var(--lineHeight8) var(--fontFamily);
        --title07: var(--fontWeightBold) var(--fontSize13)/var(--lineHeight4) var(--fontFamily);
        --title08: var(--fontWeightBold) var(--fontSize18)/var(--lineHeight8) var(--fontFamily);
        --content01: var(--fontWeightMedium) var(--fontSize18)/var(--lineHeight8) var(--fontFamily);
        --content02: var(--fontWeightMedium) var(--fontSize18)/var(--lineHeight8) var(--fontFamily);
        --content03: var(--fontWeightRegular) var(--fontSize16)/var(--lineHeight8) var(--fontFamily);
        --content04: var(--fontWeightMedium) var(--fontSize16)/var(--lineHeight8) var(--fontFamily);
        --content05: var(--fontWeightBold) var(--fontSize16)/var(--lineHeight8) var(--fontFamily);
        --content06: var(--fontWeightRegular) var(--fontSize14)/var(--lineHeight4) var(--fontFamily);
        --content07: var(--fontWeightRegular) var(--fontSize13)/var(--lineHeight4) var(--fontFamily);
        --content08: var(--fontWeightMedium) var(--fontSize16)/var(--lineHeight8) var(--fontFamily);
    }
}


/* line-height：
以下：+ 4px
16以上：+ 8px
24以上：+ 12px
32以上：+ 16px
40以上：+ 20px
56以上：+ 24px
 */

body {
    font-size: 14px;
    line-height: var(--lineHeight4);
}


/* .slogan01 { slogan未設定 } */

.title01,
.title02,
.title03 {
    font-size: 28px;
    font-weight: 700;
    line-height: var(--lineHeight12);
}

.title04 {
    font-size: 22px;
    font-weight: 700;
    line-height: var(--lineHeight8);
}

.title05 {
    font-size: 18px;
    font-weight: 700;
    line-height: var(--lineHeight8);
}

.title06 {
    font-size: 14px;
    font-weight: 500;
    line-height: var(--lineHeight4);
}

.title07 {
    font-size: 12px;
    font-weight: 700;
    line-height: var(--lineHeight4);
}

.title08 {
    font-size: 16px;
    font-weight: 700;
    line-height: var(--lineHeight8);
}

.content01 {
    font-size: 16px;
    font-weight: 500;
    line-height: var(--lineHeight8);
}

.content02,
.content03 {
    font-size: 14px;
    font-weight: 400;
    line-height: var(--lineHeight4);
}

.content04 {
    font-size: 14px;
    font-weight: 500;
    line-height: var(--lineHeight4);
}

.content05 {
    font-size: 14px;
    font-weight: 700;
    line-height: var(--lineHeight4);
}

.content06 {
    font-size: 14px;
    font-weight: 400;
    line-height: var(--lineHeight4);
}

.content07 {
    font-size: 12px;
    font-weight: 400;
    line-height: var(--lineHeight4);
}

.content08 {
    font-size: 14px;
    font-weight: 500;
    line-height: var(--lineHeight4);
}

a {
    cursor: pointer;
}

p a,
p a:visited,
ol li a,
ol li a:visited {
    text-decoration: none;
    color: var(--brandPink1);
}

p a:hover,
ol li a:hover,
p a:active,
ol li a:active {
    color: var(--brandPink2);
}

ol li {
    counter-increment: listCounter;
    text-indent: -1.2em;
    padding-left: 1.2em;
}

ol li::before {
    content: counter(listCounter)". ";
}

ol li p {
    text-indent: 0;
    margin: .5em 0;
}

ol ol li {
    counter-increment: subListCounter;
    text-indent: -1.2em;
    padding-left: 1.2em;
}

ol ol li::before {
    content: "("counter(subListCounter)") ";
}

@media screen and (min-width: 1024px) {
    body {
        font-size: 16px;
        line-height: var(--lineHeight8);
    }
    /* .slogan01 { slogan未設定 } */
    .title01 {
        font-size: 58px;
        line-height: var(--lineHeight24);
    }
    .title02 {
        font-size: 48px;
        line-height: var(--lineHeight20);
    }
    .title03 {
        font-size: 32px;
        line-height: var(--lineHeight16);
    }
    .title04 {
        font-size: 28px;
        line-height: var(--lineHeight12);
    }
    .title05 {
        font-size: 24px;
        line-height: var(--lineHeight12);
    }
    .title06 {
        font-size: 16px;
        line-height: var(--lineHeight8);
    }
    .title07 {
        font-size: 13px;
    }
    .title08 {
        font-size: 18px;
    }
    .content01 {
        font-size: 18px;
    }
    .content02 {
        font-size: 18px;
        font-weight: 500;
        line-height: var(--lineHeight8);
    }
    .content03 {
        font-size: 16px;
        line-height: var(--lineHeight8);
    }
    .content04 {
        font-size: 16px;
        line-height: var(--lineHeight8);
    }
    .content05 {
        font-size: 16px;
        line-height: var(--lineHeight8);
    }
    .content06 {
        /* 跟小網一樣 */
    }
    .content07 {
        font-size: 13px;
    }
    .content08 {
        font-size: 16px;
        line-height: var(--lineHeight8);
    }
}