yintai-company-home/src/pages/Business/InvestGroup.module.css

.investGroup {
    width: 100%;
    height: 50rem;
    padding: 6.25rem 16.25rem;
    background: rgba(0, 39, 83, 0.7);

    .investGroupContent {
        color: #FFFFFF;
        height: 28.75rem;

        .investGroupContentItems {
            display: flex;
            height: 28.75rem;

            .investGroupContentItem:first-child {
                padding-right: 6.25rem;
            }

            .investGroupContentItem:last-child {
                padding-left: 6.25rem;
            }

            .investGroupContentItem {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 2.5rem;

                &:last-child {
                    border-right: none;
                }

                border-right: .0625rem solid rgba(255, 255, 255, .5);

                .investGroupContentItemTitle {
                    font-size: 2.5rem;
                }

                .investGroupContentItemContent {
                    font-weight: 400;
                    font-size: 1rem;
                    color: #FFFFFF;
                    line-height: 1.875rem;
                    text-align: justify;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }
}


.equityInvestment {
    width: 100%;
    padding: 6.25rem 16.25rem;
    background: rgba(255, 255, 255, 0.6);

    .equityInvestmentItems {
        /* 5列布局 */
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem 2.5rem;

        .equityInvestmentItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.25rem;

            .equityInvestmentItemLogo {
                width: 16.5rem;
                height: 9.8125rem;
                object-fit: cover;
            }
        }
    }
}


.industryFoster {
    width: 100%;
    height: calc(100vh / var(--zoom-compensation, 1));
    display: flex;
    align-items: center;
    position: relative;

    .bgMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(20,53,92,0.1);
    }

    .industryFosterMask {
        width: 34.125rem;
        min-height: 25rem;
        background: rgba(20, 53, 92, 0.5);
        color: #fff;
        padding: 3.75rem 3.125rem;

        .industryFosterMaskTitle {
            font-weight: 500;
            font-size: 2.5rem;
            color: #FFFFFF;
            line-height: 3.125rem;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-bottom: 1.875rem;
        }

        .industryFosterMaskContent {
            font-weight: 400;
            font-size: 1.125rem;
            color: #FFFFFF;
            line-height: 2.125rem;
            text-align: justify;
            font-style: normal;
            text-transform: none;
        }
    }
}

@media (max-width: 48rem) {
    .investGroup {
        height: auto;
        padding: 4rem 2rem;
    }

    .investGroup .investGroupContent .investGroupContentItems {
        flex-direction: column;
        height: auto;
        gap: 2rem;

        .investGroupContentItem {
            border-right: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            padding: 2rem 0 !important;
        }

        .investGroupContentItem:last-child {
            border-bottom: none;
        }
    }

    .equityInvestment {
        padding: 4rem 2rem;
    }

    .equityInvestment .equityInvestmentItems {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .equityInvestment .equityInvestmentItems .equityInvestmentItem .equityInvestmentItemLogo {
        width: 100%;
        height: auto;
    }

    .industryFoster {
        height: auto;
        padding: 4rem 2rem;
    }

    .industryFoster .industryFosterMask {
        width: 100%;
        min-height: auto;
        padding: 2rem;
    }

    .industryFoster .industryFosterMask .industryFosterMaskTitle {
        font-size: 1.75rem;
    }
}

@media (max-width: 30rem) {
    .investGroup {
        padding: 3rem 1.25rem;
    }

    .equityInvestment {
        padding: 3rem 1.25rem;
    }

    .equityInvestment .equityInvestmentItems {
        grid-template-columns: repeat(2, 1fr);
    }

    .industryFoster {
        padding: 3rem 1.25rem;
    }

    .industryFoster .industryFosterMask {
        padding: 1.5rem;
    }

    .industryFoster .industryFosterMask .industryFosterMaskTitle {
        font-size: 1.5rem;
    }

    .investGroup .investGroupContent .investGroupContentItems .investGroupContentItem .investGroupContentItemTitle {
        font-size: 1.75rem;
    }
}