@media screen and (max-width: 821px) {
    /* -------------------- Banner -------------------- */
    .banner {
        height: auto;
    }
    .banner::after {
        background-attachment: scroll;
    }
    .banner .wrapper {
        justify-content: flex-start;
        gap: 60px;
    }
    .banner-text-area {
        gap: 32px;
    }
    .banner-text-area h1 {
        font-size: 40px;
    }
    .banner-btn-area {
        gap: 32px;
    }
    .banner-btn-area a {
        padding: 16px 20px;
    }
    /* -------------------- 服務介紹 -------------------- */
    main .wrapper {
        margin-top: 20px;
        flex-direction: column;
    }
    .service-block {
        padding: 40px;
    }
    .service-block .text-area {
        gap: 24px;
    }
    .title-text h1 {
        font-size: 32px;
    }
    .title-text h2 {
        font-size: 20px;
    }
    .service-block .text-area {
        margin-bottom: 40px;
    }
    .service-block .text-area a {
        padding: 12px 16px;
        font-size: 14px;
    }

    .service-block:nth-child(3) .pic {
        background-position: right -150px;
    }
    /* -------------------- 方案價格與細項 -------------------- */
    .plan {
        margin-top: 60px;
    }
    .plan .wrapper {
        padding: 24px;
        gap: 60px;
        align-items: flex-start;
        overflow: scroll;
    }
    .plan-card {
        flex-shrink: 0;
    }
}

@media screen and (max-width: 431px) {
    .for-mobile-none {
        display: none;
    }
    /* -------------------- Banner -------------------- */
    .banner .wrapper {
        padding: 24px;
        gap: 32px;
    }
    .banner-text-area h1 {
        font-size: 20px;
    }

    .banner-btn-area {
        gap: 20px;
    }
    .banner-btn-area h2{
        font-size: 14px;
    }
    .banner-btn-area div {
        gap: 16px;
    }
    .banner-btn-area a {
        font-size: 10px;
        padding: 8px 12px;
    }
    /* -------------------- 服務介紹 -------------------- */
    main .wrapper {
        display: flex;
        gap: 24px;
        overflow: scroll;
    }
    .service-block {
        padding: 0;
        gap: 24px;
        flex-direction: column;
        flex-shrink: 0;
        width: 100%;
        align-items: center;
    }
    .service-block:nth-child(1) .pic, .service-block:nth-child(3) .pic {
        order: 0;
    }
    .title-text h1 {
        font-size: 24px;
    }
    .title-text h2{
        font-size: 16px;
    }
    .content-text p{
        font-size: 14px;
    }
    .service-block .text-area h3 {
        font-size: 14px;
    }
    .service-block .pic {
        border-radius: 0;
        width: 100%;
    }

    /* -------------------- 方案價格與細項 -------------------- */
    .plan {
        margin-top: 20px;
    }
    .plan .wrapper {
        gap: 32px;
    }
    .plan .wrapper h1 {
        font-size: 28px;
    }
    .plan-card {
        gap: 20px;
        width: 280px;
    }
    .plan-title {
        padding: 20px;
        height: auto;
    }
    .plan-title h2 {
        font-size: 20px;
        margin-bottom: 12px;
    }
    .plan-title p {
        font-size: 16px;
    }
    .plan-price {
        font-size: 20px;
    }
    .plan-items {
        gap: 12px;
        padding: 0;
        height: auto;
    }
    .plan-items p {
        font-size: 14px;
    }
    
}