/* 海角0814需求 start */
/* PC rem = 设计稿 px ÷ 20；仅 ≥768px。H5 待确认后再写 max-width:767.98px */

@media (min-width: 768px) {
    .main-container:has(> .home-road) {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 60rem;
        margin: 0 auto;
        padding: 1rem 0 2.9rem;
    }

    .home-road {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 31.2rem;
        max-width: 100%;
        font-family: "PingFang SC", PingFangSC, "Microsoft YaHei", sans-serif;
    }

    .home-road__card {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        max-width: 31.2rem;
        border-radius: 0.6rem;
        border: 0.05rem solid transparent;
        background:
            linear-gradient(0deg, #ffffff 87.981%, #f3f4ff 100%) padding-box,
            linear-gradient(180deg, #ccddff 0%, rgba(143, 180, 255, 0) 100%) border-box;
    }

    .home-road__card--fetch {
        min-height: 8.55rem;
        padding: 0;
        justify-content: flex-start;
    }

    .home-road__row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        box-sizing: border-box;
        width: 100%;
        padding: 0 0.65rem 0 0.75rem;
        column-gap: 0.6rem;
        row-gap: 0.4rem;
    }

    .home-road__card--fetch .home-road__row:first-of-type {
        padding-top: 0.95rem;
    }

    .home-road__card--fetch .home-road__row:last-of-type .home-road__avatar {
        margin-top: 0.2rem;
    }

    .home-road__avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        margin-top: 0.25rem;
        border-radius: 50%;
        background: #3377ff;
    }

    .home-road__avatar-icon {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        max-width: 1.2rem;
        max-height: 1.2rem;
        object-fit: contain;
    }

    .home-road__body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 8rem;
        gap: 0.3rem;
    }

    .home-road__heading {
        margin: 0;
        font-size: 0.8rem;
        font-weight: 500;
        line-height: 1.1rem;
        color: #000000;
    }

    .home-road__meta {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        margin: 0;
        font-size: 0.7rem;
        line-height: 1rem;
    }

    .home-road__label {
        color: #262626;
        font-weight: 400;
    }

    a.home-road__link:link,
    a.home-road__link:visited,
    a.home-road__link:hover {
        color: #3377ff;
        font-weight: 500;
        text-decoration: none;
    }

    a.home-road__btn:link,
    a.home-road__btn:visited,
    a.home-road__btn:hover {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex-shrink: 0;
        width: 3rem;
        height: 1.2rem;
        margin-top: 0;
        margin-left: auto;
        padding: 0.15rem 0.3rem;
        border: 0.05rem solid #3377ff;
        border-radius: 0.2rem;
        font-size: 0.6rem;
        font-weight: 400;
        line-height: 0.85rem;
        color: #3377ff;
        text-decoration: none;
        white-space: nowrap;
        background: transparent;
    }

    .home-road__card--fetch .home-road__btn {
        margin-top: 0.65rem;
    }

    .home-road__rule {
        display: block;
        box-sizing: border-box;
        flex-shrink: 0;
        width: 28.9rem;
        max-width: none;
        height: 0.05rem;
        margin: 0.85rem 0 0.8rem 2.25rem;
        padding: 0;
        border: 0;
        background: #f1f1f1;
    }

    .home-road__card--feedback {
        min-height: 10.2rem;
        margin-top: 1rem;
        padding: 0.95rem 0.65rem 0 0.75rem;
        justify-content: flex-start;
    }

    .home-road__heading--block {
        margin: 0 0 0.55rem;
    }

    .home-road__row--plain {
        align-items: center;
        padding: 0;
        min-height: 1.2rem;
        column-gap: 0.4rem;
    }

    .home-road__row--plain + .home-road__row--plain {
        margin-top: 0.4rem;
    }

    .home-road__row--plain .home-road__meta {
        flex: 1 1 auto;
        min-width: 8rem;
    }

    .home-road__rule--feedback {
        width: 29.6rem;
        max-width: 100%;
        margin: 0.7rem 0 0.55rem 0;
    }

    .home-road__hint {
        margin: 0;
        width: 29.6rem;
        max-width: 100%;
        font-size: 0.6rem;
        font-weight: 400;
        line-height: 0.85rem;
        color: #959595;
    }

    .home-road__card--addr {
        min-height: 14.1rem;
        margin-top: 0.8rem;
        padding: 0.95rem 0 0.9rem;
        justify-content: flex-start;
    }

    .home-road__head {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        padding: 0 1rem 0 0.95rem;
        column-gap: 0.6rem;
        row-gap: 0.2rem;
        margin-bottom: 0.65rem;
    }

    .home-road__head-title {
        margin: 0;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.4rem;
        color: #000000;
    }

    .home-road__head-date {
        margin: 0;
        font-size: 0.7rem;
        font-weight: 400;
        line-height: 1rem;
        color: #898989;
        white-space: nowrap;
    }

    .home-road__row--addr {
        align-items: center;
        min-height: 1.2rem;
        padding: 0 0.9rem 0 0.95rem;
        column-gap: 0.35rem;
    }

    .home-road__row--addr .home-road__meta {
        flex: 1 1 auto;
        min-width: 8rem;
    }

    .home-road__dot {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        background: rgba(0, 122, 255, 0.1);
    }

    .home-road__dot-icon {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        max-width: 0.6rem;
        max-height: 0.6rem;
        object-fit: contain;
    }

    .home-road__dot-icon--home {
        width: 0.7rem;
        height: 0.7rem;
        max-width: 0.7rem;
        max-height: 0.7rem;
    }

    .home-road__rule--addr {
        width: 29.15rem;
        max-width: none;
        margin: 0.5rem 0 0.45rem 1.05rem;
    }

    .home-road__card--addr .home-road__row--addr:first-of-type + .home-road__rule--addr {
        margin-top: 0.6rem;
    }

    .home-road__card--addr .home-road__rule--addr:last-of-type {
        margin-bottom: 0.45rem;
    }

    .home-road__row--addr-last {
        margin-top: 0.25rem;
    }

    .home-road__card--lost {
        min-height: 14.1rem;
        margin-top: 0.9rem;
        padding: 0.95rem 0 0.9rem;
        justify-content: flex-start;
    }

    .home-road__head-title--lost {
        padding: 0 1rem 0 0.95rem;
        margin-bottom: 0.75rem;
    }

    .home-road__row--lost {
        align-items: center;
        min-height: 1.2rem;
        padding: 0 0.9rem 0 1.3rem;
        column-gap: 0.2rem;
    }

    .home-road__tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-sizing: border-box;
        width: 2.15rem;
        height: 1rem;
        border-radius: 0.2rem;
        background: #ff480b;
        color: #ffffff;
        font-size: 0.6rem;
        font-weight: 400;
        line-height: 0.85rem;
    }

    .home-road__lost-text {
        flex: 1 1 auto;
        min-width: 8rem;
        margin: 0;
        font-size: 0.7rem;
        font-weight: 400;
        line-height: 1rem;
        color: #262626;
    }

    .home-road__btn-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.65rem;
        flex-shrink: 0;
    }

    a.home-road__btn--wide:link,
    a.home-road__btn--wide:visited,
    a.home-road__btn--wide:hover {
        width: auto;
        min-width: 0;
        padding: 0.15rem 0.3rem;
    }

    a.home-road__btn--mail:link,
    a.home-road__btn--mail:visited,
    a.home-road__btn--mail:hover {
        width: 4.9rem;
    }

    a.home-road__btn--tg-ch:link,
    a.home-road__btn--tg-ch:visited,
    a.home-road__btn--tg-ch:hover {
        width: 3.95rem;
    }

    a.home-road__btn--tg-g:link,
    a.home-road__btn--tg-g:visited,
    a.home-road__btn--tg-g:hover {
        width: 3.35rem;
    }

    .home-road__edited {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 9.25rem;
        height: 1rem;
        margin: 0.9rem 0 0 auto;
        padding: 0;
        font-size: 0.7rem;
        font-weight: 400;
        line-height: 1rem;
        color: #898989;
        text-align: right;
        white-space: nowrap;
    }
}

/*
 * H5（≤767.98px）共用 DOM；750 画布 px ÷ 23.4375 = rem
 * Figma：2324:3960；H1 卡 Group 38 = 2324:4157 690×293
 * 禁止改上方 PC @media 数值
 */
@media (max-width: 767.98px) {
    html,
    body {
        overflow-x: clip;
        background: #f5f6fa;
    }

    .main-container:has(> .home-road) {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0 auto;
        padding: 1.237rem 1.28rem 1.28rem;
    }

    .home-road {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 29.44rem;
        font-family: "PingFang SC", PingFangSC, "Microsoft YaHei", sans-serif;
    }

    .home-road__card {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        width: 100%;
        max-width: 29.44rem;
        border-radius: 0.878rem;
        border: 0.073rem solid transparent;
        background:
            linear-gradient(0deg, #ffffff 87.981%, #f3f4ff 100%) padding-box,
            linear-gradient(180deg, #ccddff 0%, rgba(143, 180, 255, 0) 100%) border-box;
    }

    .home-road__card--fetch {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 12.544rem;
        height: auto;
        padding: 0;
    }

    .home-road__row {
        display: flex;
        flex-direction: row;
        /* flex-wrap: wrap; */
        align-items: flex-start;
        box-sizing: border-box;
        width: 100%;
        padding: 0 0.74rem 0 1.171rem;
        column-gap: 0.878rem;
        row-gap: 0.427rem;
    }

    .home-road__card--fetch .home-road__row:first-of-type {
        padding-top: 1.463rem;
    }

    .home-road__card--fetch .home-road__row:last-of-type .home-road__avatar {
        margin-top: 0.213rem;
    }

    .home-road__card--fetch .home-road__row:last-of-type {
        padding-top: 0.427rem;
        padding-bottom: 1.463rem;
    }

    .home-road__avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2.926rem;
        height: 2.926rem;
        margin-top: 0.213rem;
        border-radius: 50%;
        background: #3377ff;
    }

    .home-road__avatar-icon {
        display: block;
        width: 1.756rem;
        height: 1.756rem;
        max-width: 1.756rem;
        max-height: 1.756rem;
        object-fit: contain;
    }

    .home-road__body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 6rem;
        gap: 0.384rem;
    }

    .home-road__heading {
        margin: 0;
        font-size: 1.195rem;
        font-weight: 500;
        line-height: 1.664rem;
        color: #000000;
    }

    .home-road__meta {
        display: flex;
        flex-direction: row;
        /* flex-wrap: wrap; */
        align-items: center;
        margin: 0;
        font-size: 1.024rem;
        line-height: 1.451rem;
    }

    .home-road__label {
        color: #262626;
        font-weight: 400;
        flex-shrink: 0;
    }

    a.home-road__link:link,
    a.home-road__link:visited,
    a.home-road__link:hover {
        color: #3377ff;
        font-weight: 500;
        text-decoration: none;
        word-break: break-all;
    }

    a.home-road__btn:link,
    a.home-road__btn:visited,
    a.home-road__btn:hover {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex-shrink: 0;
        width: 4.422rem;
        height: 1.769rem;
        margin-top: 0;
        margin-left: auto;
        padding: 0.221rem 0.442rem;
        border: 0.074rem solid #3377ff;
        border-radius: 0.295rem;
        font-size: 0.884rem;
        font-weight: 400;
        line-height: 1.237rem;
        color: #3377ff;
        text-decoration: none;
        white-space: nowrap;
        background: transparent;
    }

    .home-road__card--fetch a.home-road__btn:link,
    .home-road__card--fetch a.home-road__btn:visited,
    .home-road__card--fetch a.home-road__btn:hover {
        margin-top: 0.884rem;
    }

    .home-road__rule {
        display: block;
        box-sizing: border-box;
        flex-shrink: 0;
        width: 26.069rem;
        max-width: none;
        height: 0.043rem;
        margin: 1.195rem 0 1.179rem 3.297rem;
        padding: 0;
        border: 0;
        background: #f1f1f1;
    }

    .home-road__card--feedback {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
        width: 100%;
        max-width: 29.44rem;
        min-height: 16.299rem;
        margin-top: 1.237rem;
        padding: 0;
        border-radius: 0.884rem;
        border: 0.074rem solid transparent;
    }

    .home-road__heading--block {
        display: block;
        box-sizing: border-box;
        margin: 0;
        padding: 1.389rem 0.74rem 0.768rem 1.094rem;
        font-size: 1.179rem;
        font-weight: 500;
        line-height: 1.664rem;
        color: #000000;
    }

    .home-road__row--plain {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 1.769rem;
        padding: 0 0.74rem 0 1.094rem;
        column-gap: 0.427rem;
        row-gap: 0.427rem;
    }

    .home-road__row--plain + .home-road__row--plain {
        margin-top: 0.589rem;
    }

    .home-road__row--plain .home-road__meta {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        flex: 1 1 auto;
        min-width: 6rem;
        margin: 0;
        font-size: 1.024rem;
        line-height: 1.451rem;
    }

    .home-road__row--plain a.home-road__btn:link,
    .home-road__row--plain a.home-road__btn:visited,
    .home-road__row--plain a.home-road__btn:hover {
        margin-top: 0;
    }

    .home-road__rule--feedback {
        display: block;
        box-sizing: border-box;
        width: 28.117rem;
        max-width: none;
        height: 0.074rem;
        margin: 1.014rem 0 1.209rem 1.122rem;
        padding: 0;
        border: 0;
        background: #f1f1f1;
    }

    .home-road__hint {
        display: block;
        box-sizing: border-box;
        width: 26.752rem;
        max-width: 100%;
        margin: 0 0 0 1.122rem;
        padding: 0;
        font-size: 0.853rem;
        font-weight: 400;
        line-height: 1.195rem;
        color: #959595;
    }

    .home-road__card--addr {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
        width: 100%;
        max-width: 29.44rem;
        height: auto;
        min-height: 19.285rem;
        margin-top: 1.28rem;
        padding: 0;
        border-radius: 0.799rem;
        border: 0.067rem solid transparent;
    }

    .home-road__head {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        padding: 1.162rem 0.868rem 0.853rem 1.247rem;
        column-gap: 0.427rem;
        row-gap: 0.213rem;
        margin: 0;
    }

    .home-road__head-title {
        display: block;
        margin: 0;
        font-size: 1.332rem;
        font-weight: 500;
        line-height: 1.877rem;
        color: #000000;
    }

    .home-road__head-date {
        display: block;
        margin: 0;
        font-size: 0.853rem;
        font-weight: 400;
        line-height: 1.195rem;
        color: #898989;
        white-space: nowrap;
    }

    .home-road__row--addr {
        display: flex;
        flex-direction: row;
        /* flex-wrap: wrap; */
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 1.598rem;
        padding: 0 0.868rem 0 1.247rem;
        column-gap: 0.466rem;
        row-gap: 0.213rem;
    }

    .home-road__row--addr .home-road__meta {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        flex: 1 1 auto;
        min-width: 6rem;
        margin: 0;
        font-size: 0.938rem;
        line-height: 1.323rem;
    }

    .home-road__row--addr a.home-road__link:link,
    .home-road__row--addr a.home-road__link:visited,
    .home-road__row--addr a.home-road__link:hover {
        font-size: 0.932rem;
        font-weight: 500;
    }

    .home-road__row--addr a.home-road__btn:link,
    .home-road__row--addr a.home-road__btn:visited,
    .home-road__row--addr a.home-road__btn:hover {
        width: 3.996rem;
        height: 1.598rem;
        margin-top: 0;
        padding: 0.171rem 0.32rem;
        border-width: 0.067rem;
        border-radius: 0.266rem;
        font-size: 0.799rem;
        line-height: 1.109rem;
    }

    .home-road__dot {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 1.598rem;
        height: 1.598rem;
        border-radius: 50%;
        background: rgba(0, 122, 255, 0.1);
    }

    .home-road__dot-icon {
        display: block;
        width: 0.799rem;
        height: 0.799rem;
        max-width: 0.799rem;
        max-height: 0.799rem;
        object-fit: contain;
    }

    .home-road__dot-icon--home {
        width: 0.938rem;
        height: 0.938rem;
        max-width: 0.938rem;
        max-height: 0.938rem;
    }

    .home-road__rule--addr {
        display: block;
        box-sizing: border-box;
        width: 27.136rem;
        max-width: none;
        height: 0.067rem;
        margin: 0.666rem 0 0.666rem 1.38rem;
        padding: 0;
        border: 0;
        background: #f1f1f1;
    }

    .home-road__card--addr .home-road__rule--addr {
        margin: 0.665rem 0 0.665rem 1.38rem;
    }

    .home-road__card--addr .home-road__row--addr:first-of-type + .home-road__rule--addr {
        margin-top: 0.8rem;
    }

    .home-road__card--addr .home-road__row--addr-last {
        margin-top: 0.334rem;
        padding-bottom: 1.388rem;
    }

    .home-road__card--lost {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
        width: 100%;
        max-width: 29.44rem;
        min-height: 18.176rem;
        margin-top: 1.365rem;
        padding: 0;
        border-radius: 0.771rem;
        border: 0.064rem solid transparent;
    }

    .home-road__head-title--lost {
        display: block;
        box-sizing: border-box;
        margin: 0;
        padding: 1.2rem 0.868rem 1.109rem 1.222rem;
        font-size: 1.285rem;
        font-weight: 500;
        line-height: 1.792rem;
        color: #000000;
    }

    .home-road__row--lost {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        min-height: 1.542rem;
        padding: 0 0.868rem 0 1.245rem;
        column-gap: 0.512rem;
        row-gap: 0.213rem;
    }

    .home-road__tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-sizing: border-box;
        width: 2.763rem;
        height: 1.285rem;
        border-radius: 0.257rem;
        background: #ff480b;
        color: #ffffff;
        font-size: 0.771rem;
        font-weight: 400;
        line-height: 1.067rem;
    }

    .home-road__lost-text {
        display: block;
        flex: 1 1 auto;
        min-width: 6rem;
        margin: 0;
        font-size: 0.938rem;
        font-weight: 400;
        line-height: 1.323rem;
        color: #262626;
    }

    .home-road__row--lost a.home-road__btn:link,
    .home-road__row--lost a.home-road__btn:visited,
    .home-road__row--lost a.home-road__btn:hover {
        width: 3.856rem;
        height: 1.542rem;
        margin-top: 0;
        padding: 0.193rem 0.386rem;
        border-width: 0.064rem;
        border-radius: 0.257rem;
        font-size: 0.771rem;
        line-height: 1.067rem;
    }

    .home-road__btn-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.835rem;
        flex-shrink: 0;
    }

    .home-road__row--lost a.home-road__btn--wide:link,
    .home-road__row--lost a.home-road__btn--wide:visited,
    .home-road__row--lost a.home-road__btn--wide:hover {
        width: auto;
        min-width: 0;
        padding: 0.193rem 0.386rem;
    }

    .home-road__row--lost a.home-road__btn--mail:link,
    .home-road__row--lost a.home-road__btn--mail:visited,
    .home-road__row--lost a.home-road__btn--mail:hover {
        width: auto;
    }

    .home-road__row--lost a.home-road__btn--tg-ch:link,
    .home-road__row--lost a.home-road__btn--tg-ch:visited,
    .home-road__row--lost a.home-road__btn--tg-ch:hover {
        width: auto;
    }

    .home-road__row--lost a.home-road__btn--tg-g:link,
    .home-road__row--lost a.home-road__btn--tg-g:visited,
    .home-road__row--lost a.home-road__btn--tg-g:hover {
        width: auto;
    }

    .home-road__card--lost .home-road__rule--addr {
        width: 26.965rem;
        margin: 0.64rem 0 0.64rem 1.33rem;
    }

    .home-road__edited {
        display: block;
        box-sizing: border-box;
        flex-shrink: 0;
        width: 11.861rem;
        height: 1.28rem;
        margin: 1.109rem 0.682rem 0 auto;
        padding: 0.085rem 0 0;
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 1.195rem;
        color: #898989;
        text-align: left;
        white-space: nowrap;
    }
}
/* 海角0814需求 end */