*,
:after,
:before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

ol,
ul {
    list-style: none
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    line-height: 1.5;
    scroll-behavior: smooth
}

img,
picture,
video {
    display: block;
    height: auto;
    max-width: 100%
}

button,
input,
select,
textarea {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    outline: none
}

a {
    color: inherit;
    text-decoration: none
}

:focus,
:focus-visible {
    outline: none
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5
}

p {
    font-size: 16px;
    font-weight: 400
}

h1 {
    line-height: 1.1
}

h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2
}

@media(min-width:1025px) {

    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.1
    }
}

.h1,
h1 {
    font-size: 1.75rem;
    font-weight: 700
}

@media(min-width:768px) {

    .h1,
    h1 {
        font-size: 3rem
    }
}

@media(min-width:1025px) {

    .h1,
    h1 {
        font-size: 3rem
    }
}

.h2,
h2 {
    font-size: 1.3125rem;
    font-weight: 700
}

@media(min-width:768px) {

    .h2,
    h2 {
        font-size: 2rem
    }
}

@media(min-width:1025px) {

    .h2,
    h2 {
        font-size: 2rem
    }
}

.h3,
h3 {
    font-size: 1.25rem;
    font-weight: 600
}

@media(min-width:768px) {

    .h3,
    h3 {
        font-size: 1.5rem
    }
}

@media(min-width:1025px) {

    .h3,
    h3 {
        font-size: 1.35rem
    }
}

.h4,
h4 {
    font-size: 1.125rem;
    font-weight: 600
}

@media(min-width:768px) {

    .h4,
    h4 {
        font-size: 1.25rem
    }
}

@media(min-width:1025px) {

    .h4,
    h4 {
        font-size: 1.5rem
    }
}

.h5,
h5 {
    font-size: 1.125rem;
    font-weight: 500
}

@media(min-width:1025px) {

    .h5,
    h5 {
        font-size: 1.25rem
    }
}

.h6,
h6 {
    font-size: 1.125rem;
    font-weight: 500
}

@media(min-width:1025px) {

    .h6,
    h6 {
        font-size: 1.125rem
    }
}

.text-large {
    font-size: 1.125rem;
    line-height: 1.5
}

.text-small,
small {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4
}

@media(min-width:1025px) {

    .text-small,
    small {
        line-height: 1.5
    }
}

.tag,
button {
    font-size: 1rem
}

button {
    line-height: 1.4
}

.tag {
    font-weight: 500;
    line-height: 1.5;
    text-transform: capitalize
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

@keyframes burger {
    to {
        transform-origin: center
    }
}

@keyframes burger-first-line {
    0% {
        top: 8px;
        transform: translateX(-50%)
    }

    33% {
        top: 50%;
        transform: translate(-50%, -50%)
    }

    66% {
        top: 50%;
        transform: translate(-50%, -50%)
    }

    to {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg)
    }
}

@keyframes burger-mid-line {
    0% {
        top: 50%;
        transform: translate(-50%, -50%)
    }

    66% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@keyframes burger-last-line {
    0% {
        top: 22px;
        transform: translateX(-50%)
    }

    33% {
        top: 50%;
        transform: translate(-50%, -50%)
    }

    66% {
        top: 50%;
        transform: translate(-50%, -50%)
    }

    to {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg)
    }
}

body {
    /* background: #F4F6F7; */
    background: #fff;
    color: #000
}

.container {
    margin: 0 auto;
    padding: 0 4.105%;
    width: 100%
}

@media(min-width:768px) {
    .container {
        max-width: calc(55.875rem + 5.556%);
        padding: 0 2.778%
    }
}

.container--narrow {
    max-width: calc(40.875rem + 5.556%)
}

.container--medium {
    max-width: calc(55.125rem + 5.556%)
}

.container--wide {
    max-width: 1440px
}

@media(min-width:1441px) {
    .container--wide {
        padding: 0 2.5rem
    }
}

.bg-beige {
    background-color: #f7f2ec;
    color: #000
}
.bg-gray {
    background-color: #eee;
    color: #000
}
.bg-beige .cards-item {
    border: none
}

.bg-blue {
    background-color: #1c2228;
    color: #fff
}

.bg-blue .btn--filled:hover {
    background: linear-gradient(0deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)), #e2001a;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2)
}

.bg-blue .btn--outlined:hover {
    color: #fff
}

picture img {
    width: 100%
}

.site-title {
    margin-bottom: 1.5rem;
    text-align: center
}

.no-results {
    padding-bottom: 2.5rem;
    padding-top: 2.5rem
}

.header {
    background: #1c2228;
    box-shadow: 0 0 1.25rem rgba(0, 0, 0, .15);
    padding: 1rem 0
}

@media(min-width:901px) {
    .header {
        padding: 1rem 0
    }
}

.header__wrapper {
    align-items: center;
    display: flex;
    height: 3.125rem;
    justify-content: space-between
}

@media(min-width:901px) {
    .header__wrapper {
        height: 3.625rem
    }
}

.header .logo img {
    height: auto;
    max-width: 10rem
}

@media(min-width:901px) {
    .header .logo img {
        max-width: 13rem
    }
}

.header nav {
    /*background: #fff;*/
    display: none;
    position: absolute;
    right: 0;
    top: 5.125rem;
    width: 100%;
    z-index: 1
}

@media(min-width:901px) {
    .header nav {
        display: block;
        position: static;
        width: auto
    }
}

.header nav.active {
    display: flex
}

.header nav svg {
    fill: #fff
}

.header nav .nav-menu {
    display: flex;
    flex-direction: column;
    width: 100%
}

@media(min-width:901px) {
    .header nav .nav-menu {
        flex-direction: row;
        gap: 1rem;
        width: auto
    }
}

.header nav .nav-menu li {
    align-items: center;
    border-bottom: 1px solid #e9e8e8;
    /* border-top: 1px solid #e9e8e8;
    display: flex;
    justify-content: center; */
    position: relative
}

@media(min-width:901px) {
    .header nav .nav-menu li {
        border: none
    }
}

.header nav .nav-menu li a {
    width: 100%;
    color: #fff;
}

@media(min-width:901px) {
    .header nav .nav-menu li a {
        width: auto
    }
}

.header nav .nav-menu li .menu-link,
.header nav .nav-menu li.menu-item-cta {
    padding: 1rem 0.8rem;
}

.header nav .nav-menu li:not(.menu-item-cta) a {
    display: block;
    padding-bottom: 1rem;
    padding-top: 1rem
}

.header nav .nav-menu li:not(.menu-item-cta) a:hover {
    text-decoration: underline;
    text-decoration-color: #e2001a;
    text-decoration-style: solid;
    text-decoration-thickness: .125rem;
    text-underline-offset: .3125rem
}

.header nav .nav-menu li.has-dropdown {
    flex-direction: column;
    position: relative
}

.header nav .nav-menu li.has-dropdown a {
    align-items: center;
    display: flex;
    gap: .3125rem;
    justify-content: space-between
}

@media(min-width:901px) {
    .header nav .nav-menu li.has-dropdown a {
        justify-content: center
    }
}

.header nav .nav-menu li.has-dropdown a .submenu-trigger {
    /*background-color: #fff;*/
    border-left: 2px solid #fff;
    height: 100%;
    max-height: 4rem;
    max-width: 4.875rem;
    padding: .8125rem 1.1875rem;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 2
}

@media(min-width:901px) {
    .header nav .nav-menu li.has-dropdown a .submenu-trigger {
        border: 0;
        height: 1.25rem;
        padding: 0;
        position: static;
        width: auto
    }
}

.header nav .nav-menu li.has-dropdown a svg {
    cursor: pointer;
    height: 2.5rem;
    transition: all .3s linear;
    width: 2.5rem
}

.header nav .nav-menu li.has-dropdown li a {
   
    color: #fff;
}
@media(min-width:901px) {
    .header nav .nav-menu li.has-dropdown a svg {
        height: 1.25rem;
        width: 1.25rem
    }
    .header nav .nav-menu li.has-dropdown li a {
        color: #000;
         padding-left: 2rem;
    }
}


@media(min-width:901px) {
    .header nav .nav-menu li.has-dropdown li a {
       
    }

    .header nav .nav-menu li.has-dropdown:hover>.sub-menu {
        display: block
    }

    .header nav .nav-menu li.has-dropdown:hover svg {
        transform: rotate(-180deg)
    }
}

.header nav .nav-menu li.has-dropdown .sub-menu.active {
    display: block
}

.header nav .nav-menu li.has-dropdown.open svg {
    transform: rotate(-180deg)
}

@media(min-width:901px) {
    .header nav .nav-menu li .menu-item-cta {
        padding: 0
    }
}

.header nav .nav-menu li ul {
    display: none;
    transition: all .3s linear;
    width: 100%;
    z-index: 1
}

@media(min-width:901px) {
    .header nav .nav-menu li ul {
        background: #fff;
        box-shadow: 0 0 1.25rem rgba(0, 0, 0, .15);
        left: -30%;
        position: absolute;
        top: 100%;
        width: auto
    }
}

.header nav .nav-menu li ul li {
    border-bottom: 1px solid #e9e8e8;
}

.header nav .nav-menu li ul li a {
    display: block;
    justify-content: flex-start !important;
    min-width: 11.4375rem;
    padding: 1.28125rem 1rem;
    text-decoration: none !important;
    white-space: nowrap
}

.header nav .nav-menu li ul li a:hover {
    background-color:rgba(255,255,255,0.05)
}
@media(min-width:901px) {
    .header nav .nav-menu li ul li a:hover {
    background-color: #eee
}
}
.header .menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    height: 2rem;
    position: relative;
    width: 2rem;

}

@media(min-width:901px) {
    .header .menu-toggle {
        display: none
    }
}

.header .menu-toggle div {
    background-color: #fff;
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 20px
}

.header .menu-toggle div:first-child {
    top: 8px
}

.header .menu-toggle div:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%)
}

.header .menu-toggle div:last-child {
    top: 22px
}

.header .menu-toggle.active {
    animation: burger .3s ease-out forwards
}

.header .menu-toggle.active div:first-child {
    animation: burger-first-line .3s ease-out forwards
}

.header .menu-toggle.active div:nth-child(2) {
    animation: burger-mid-line .3s ease-out forwards
}

.header .menu-toggle.active div:last-child {
    animation: burger-last-line .3s ease-out forwards
}

#page:has(header.header .menu-toggle.active) .header {
    position: relative;
    z-index: 2
}

@media(max-width:1024px) {
    #page:has(header.header .menu-toggle.active) .backdrop {
        display: block
    }
}

.breadcrumb {
    color: #736d6d;
    display: none;
    gap: .4375rem;
    padding: 1.15625rem 0
}

@media(min-width:768px) {
    .breadcrumb {
        align-items: center;
        display: flex
    }
}

.breadcrumb a {
    cursor: pointer;
    font-weight: 500;
    outline: none;
    transition: all .3s ease
}

.breadcrumb a.active {
    color: #000
}

.breadcrumb a:hover {
    color: #000;
    text-decoration: underline;
    text-decoration-color: #e2001a;
    text-decoration-style: solid;
    text-decoration-thickness: .125rem;
    text-underline-offset: .3125rem
}

.breadcrumb .icon {
    height: .625rem;
    width: .375rem
}

.btn {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: .5rem;
    justify-content: center;
    fill: currentColor;
    outline: none;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: fit-content
}

.btn .icon {
    height: 1.5rem;
    width: 1.5rem
}

.btn--plain {
    color: #C8102E;
    text-decoration: underline;
    text-decoration-color: #C8102E;
    text-decoration-style: solid;
    text-decoration-thickness: .125rem;
    text-underline-offset: .3125rem
}
.btn--plain.white{
     color: #B0B8BF;
}
.btn--plain:has(svg) {
    fill: #e2001a;
    font-weight: 400;
    text-decoration: none
}

.btn--plain:hover {
    text-decoration-color: #e2001a;
    fill: #e2001a
}
.btn--plain.white:hover{
     text-decoration-color: #fff;
    fill: #fff
}
.btn--plain:focus-visible {
    color: #fff;
    text-decoration-color: #fff
}
.btn--plain.btn--more{
   text-decoration: none; font-weight: 500;
}

.btn--filled,
.btn--outlined {
    border-radius: 0.175rem;
    padding: .75rem 1.875rem
}

.btn--outlined {
    background: transparent;
    border: .125rem solid #e2001a;
    color: #000
}

.btn--outlined:hover {
    border-color: #a20c24;
    color: #a20c24
}

.btn--outlined:focus-visible {
    border-color: #281e1e;
    color: #281e1e
}

.btn--filled {
    background: #C8102E;
    color: #fff
}

.btn--filled:hover {
    background: #a20c24
}

.btn--filled:focus-visible {
    background: #281e1e
}

.btn--icon-only {
    border-radius: 50%;
    max-width: 3.125rem;
    padding: .5625rem
}

.btn--icon-only:focus-visible {
    background: #281e1e
}

.btn--icon-only .icon {
    height: 2rem;
    width: 2rem
}

.backdrop {
    background: rgba(0, 0, 0, .85);
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 998
}

.backdrop--targetable {
    pointer-events: none
}


/* =========================================================
 * Header site-layer features (search / language switcher / nav
 * right-align). Moved here from per-page inline <style> on 2026-09-02.
 * NOTE: this is site-custom CSS appended over the upstream theme
 * output; it is lost if the theme dist is re-extracted/rebuilt.
 * ========================================================= */

/* ===== Header search ===== */
.header { position: sticky; top: 0; z-index: 999; }
/* keep header pinned & above content while the mobile menu is open
   (theme layer hard-codes position:relative + z-index:2 for that state) */
#page:has(header.header .menu-toggle.active) .header { position: sticky; top: 0; z-index: 999; }
.header__actions { align-items: center; display: flex; gap: .25rem; }
.header-search-toggle {
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	height: 2.875rem;
	justify-content: center;
	padding: 0;
	width: 2.875rem;
}
.header-search-toggle .icon { fill: #fff; height: 1.25rem; width: 1.25rem; }
.header-search-toggle:hover .icon,
.header-search-toggle[aria-expanded="true"] .icon { fill: #C8102E; }

.header-search {
	background: #fff;
	box-shadow: 0 .625rem 1.25rem rgba(0, 0, 0, .15);
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 6;
}
.header-search.open { display: block; }
.header-search__form {
	align-items: center;
	border-bottom: 1px solid #e9e8e8;
	display: flex;
	gap: .75rem;
	padding: .75rem 0;
}
.header-search__form > .icon { fill: #736d6d; flex: 0 0 auto; height: 1.25rem; width: 1.25rem; }
.header-search__input {
	background: none;
	border: none;
	color: #000;
	flex: 1;
	font: inherit;
	font-size: 1rem;
	min-width: 0;
	outline: none;
	padding: .5rem 0;
}
.header-search__input::placeholder { color: #736d6d; }
.header-search__submit {
	background: #C8102E;
	border: none;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	padding: .75rem 1.25rem;
	transition: filter .2s ease;
}
.header-search__submit:hover { filter: brightness(.9); }
.header-search__close {
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 2.875rem;
	justify-content: center;
	margin-right: -.875rem;
	padding: 0;
	width: 2.875rem;
}
.header-search__close .icon { fill: #000; height: 1.25rem; width: 1.25rem; }
.header-search__close:hover .icon { fill: #C8102E; }


/* ===== Language switcher (TranslatePress-style) ===== */
.lang-switcher { position: relative; }
.lang-switcher__current {
	align-items: center;
	background: #fff;
	border: 1px solid #e9e8e8;
	border-radius: 5px;
	color: #000;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: .8125rem;
	gap: .4375rem;
	line-height: 1;
	padding: .5625rem .75rem;
	transition: background-color .2s ease, border-color .2s ease;
}
.lang-switcher__current:hover,
.lang-switcher__current[aria-expanded="true"] {
	background: #eee;
	border-color: #d9d7d5;
}
.lang-switcher__arrow {
	flex: 0 0 auto;
	height: .8125rem;
	transition: transform .2s ease;
	width: .8125rem;
}
.lang-switcher__arrow path {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}
.lang-switcher__current[aria-expanded="true"] .lang-switcher__arrow { transform: rotate(180deg); }
.lang-switcher__list {
	background: #fff;
	border: 1px solid #e9e8e8;
	border-radius: 6px;
	box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
	display: none;
	list-style: none;
	margin: .375rem 0 0;
	min-width: 8.5rem;
	padding: .25rem;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 9;
}
.lang-switcher.open .lang-switcher__list { display: block; }
.lang-switcher__option {
	border-radius: 4px;
	color: #000;
	display: block;
	font-size: .8125rem;
	padding: .5625rem .75rem;
	text-decoration: none;
	white-space: nowrap;
}
.lang-switcher__option:hover {
	background: #eee;
	color: #C8102E;
}
.lang-switcher__option.is-current {
	background: #f7f2ec;
	font-weight: 600;
}
@media (max-width: 380px) {
	.header .logo img { max-width: 7rem; }
	.lang-switcher__current { font-size: .75rem; padding: .4375rem .5rem; }
	.header-search-toggle { width: 2.375rem; }
}


/* Push the main menu to the right (desktop) */
@media (min-width: 901px) {
	.header__wrapper > .menu-header-menu-container { margin-left: auto; }
	.header__wrapper > .header__actions { margin-left: 1.25rem; }
}



/* =========================================================
 * Products header dropdown: 2nd + 3rd level (added 2026-09-02).
 * Products now opens a fly-out: level-2 = catalog categories,
 * level-3 = models. Nested sub-menus need a solid bg, absolute
 * positioning beside their parent row (desktop) & indentation (mobile).
 * NOTE: site-custom CSS appended over the upstream theme output;
 * lost if the theme dist is re-extracted/rebuilt.
 * ========================================================= */

/* nested <ul> inside an open sub-menu always sits above the top panel */
.header nav .nav-menu li.has-dropdown .sub-menu .sub-menu {
    z-index: 7;
}

/* level-2 rows that themselves open a level-3 sub-menu: label left, chevron right */
.header nav .nav-menu li.has-dropdown .sub-menu li.has-dropdown > a {
    align-items: center;
    display: flex;
    justify-content: space-between;
    text-decoration: none !important;
}

/* ---- desktop (>=901px): fly the 3rd level out to the right ---- */
@media (min-width: 901px) {
    .header nav .nav-menu li.has-dropdown li.has-dropdown { position: relative; }
    .header nav .nav-menu li.has-dropdown li.has-dropdown > .sub-menu {
        background: #fff;
        box-shadow: 0 0 1.25rem rgba(0, 0, 0, .15);
        left: 100%;
        position: absolute;
        top: 0;
    }
    /* keep rows a stable width whether or not they open a 3rd level */
    .header nav .nav-menu li.has-dropdown li.has-dropdown > a {
        min-width: 13rem;
        padding: 1rem 1rem;
        white-space: nowrap;
    }
}

/* ---- mobile/tablet (<901px): 3rd level shows as indented list ---- */
.header nav .nav-menu li.has-dropdown li.has-dropdown > .sub-menu {
    width: 100%;
}

/* desktop hover / focus to reveal nested sub-menu (mirrors level-2 rule) */
@media (min-width: 901px) {
    .header nav .nav-menu li.has-dropdown li.has-dropdown:hover > .sub-menu { display: block; }
    .header nav .nav-menu li.has-dropdown li.has-dropdown:hover > a svg { transform: rotate(-180deg); }
}

/* =========================================================
 * Mobile/tablet (<901px) has-dropdown trigger refinements
 * (added 2026-09-02): drop the trigger's left divider, size
 * its chevron down from the theme default 2.5rem, center the
 * icon vertically, and show a right-pointing chevron when the
 * top-level row (Products/Company) is closed which points down
 * once the row is open.
 * NOTE: part of the site-custom layer appended over the
 * upstream theme output; lost on re-extract/re-build.
 * ========================================================= */
@media (max-width: 900px) {
    .header nav .nav-menu li.has-dropdown a .submenu-trigger {
        align-items: center;
        border-left: 0;
        display: flex;
        justify-content: center;
    }
    .header nav .nav-menu li.has-dropdown a svg {
        height: 1.5rem;
        transform: rotate(-90deg); /* chevron-down turned into a right arrow */
        transition: transform .3s linear;
        width: 1.5rem;
    }
    /* override the theme's open->rotate(-180deg) so an open row shows a down arrow */
    .header nav .nav-menu li.has-dropdown.open a svg {
        transform: rotate(0deg);
    }
}

/*# sourceMappingURL=global.css.map*/

.screen-reader-text {
            word-wrap: normal !important;
            border: 0;
            clip-path: inset(50%);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            word-break: normal !important
        }

        .screen-reader-text:focus {
            background-color: #ddd;
            clip-path: none;
            color: #444;
            display: block;
            font-size: 1em;
            height: auto;
            left: 5px;
            line-height: normal;
            padding: 15px 23px 14px;
            text-decoration: none;
            top: 5px;
            width: auto;
            z-index: 100000
        }

.m-pt-40{
    padding-top: 2.5rem;
}
.m-pb-40{
    padding-bottom: 2.5rem;
}
.m-mt-40{
    margin-top: 2.5rem;
}
.m-mb-40{
    margin-bottom: 2.5rem;
}
.m-py-40{
    padding-top: 2.5rem; padding-bottom:2.5rem;
}
.m-py-20{
    padding-top: 1.25rem; padding-bottom: 1.25rem;
}
.m-my-20{
    margin-top: 1.25rem; margin-bottom: 1.25rem;
}
.m-mt-20{
    margin-top: 1.25rem;
}
.m-mb-20{
    margin-bottom: 1.25rem;
}
@media (min-width: 1441px) {
    .pt-80 {
        padding-top: 5rem;
    }
    .pb-80 {
        padding-bottom: 5rem;
    }
    .mt-80 {
        margin-top: 5rem;
    }
    .mb-80 {
        margin-bottom: 5rem;
    }
    .py-80{
        padding-top: 5rem; padding-bottom: 5rem;
    }
    .py-40{
        padding-top: 2.5rem; padding-bottom: 2.5rem;
    }
    .my-40{
        margin-top: 2.5rem; margin-bottom:2.5rem;
    }
    .mt-40{
        margin-top:2.5rem;
    }
    .mb-40{
        margin-bottom:2.5rem;
    }
}

/* 手机端（<768px）缩小标题与正文字号 */
@media (max-width: 767px) {
    body,
    p,
    li,
    dl,
    dd,
    dt {
        font-size: .9375rem;
    }
    .h1,
    h1 {
        font-size: 1.5rem;
    }
    .h2,
    h2 {
        font-size: 1.125rem;
    }
    .h3,
    h3 {
        font-size: 1.0625rem;
    }
    .text-large {
        font-size: 1rem;
    }
    /* 面包屑原本在 768px 以下 display:none，手机端也显示出来；
       wrap 是因为文章页最后一级是长标题 */
    .breadcrumb {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
    }
}