my_tests/assets/css/rv_web/psy_test.scss

// <!-- -------------common----------------->

// 心理測驗英文字
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap');

$main-color: #727679;
a {
    &:hover {
        color: #727679;
    }
}

.psyWrapper {
    max-width: 1310px;
    margin-left: auto;
    margin-right: auto;
    @media(max-width: 576px) {
        background-color: #F6F6F6;
    }
}

//心理測驗-default 狀態
.psy {
    padding: 3.5rem 0 0.5rem;
    transition: all 300ms ease-in-out;
    @media(max-width: 576px) {
        padding: 0;
    }
    article {
        position: sticky;
        top: 80px;
    }
    &__state {
        padding: 0;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            position: unset;
            padding: 0;
        }
        &__img {
            width: 100%;
        }
        &__bgImg {
            height: 435px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                height: 250px;
            }

        }
        &__caption {
            padding: 1rem 0.5rem;
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                padding: 1rem;
            }
        }
        h2 {
            color: #4D4D4D;
            font-size: 2rem;
            font-weight: bold;
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                font-size: 1.375rem;
            }
        }
        p {
            color: #4D4D4D;
            font-size: 1.1875rem;
            letter-spacing: 0.9px;
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                font-size: 1rem;
                letter-spacing: 0.28px;
            }
        }
    }

    .ans {
        padding: 1rem 1.5rem 1.5rem;
        position: relative;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            padding: 1.5rem;
        }
        &__option {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
                color: #727679;
                font-size: 5rem;
                font-family: 'Nunito', sans-serif;
                transition: all 300ms ease-in-out;
                @media(max-width: 576px) {
                    font-size: 3.5rem;
                }
            }
            &__letter {
                margin: 0 2rem 0 0.5rem;
                transition: all 300ms ease-in-out;
                @media(max-width: 576px) {
                    margin: 0 2rem;
                }
            }
            &__title {
                font-size: 2rem;
                font-weight: bold;
                margin: 0;
                transition: all 300ms ease-in-out;
                @media(max-width: 576px) {
                    font-size: 1.75rem;
                    margin: 0 0.5rem;
                }
            }
        }
        &__content {
            text-align: left;
            letter-spacing: 0.19px;
            margin: -1rem 0 0;
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                letter-spacing: 0.16px;
                margin: -0.5rem 0 0;
            }
        }
    }

    //心理測驗-active 狀態
    .ansBlock {
        color: #727679;
        &.active {
            .ans {
                padding: 1rem 1.5rem 1.5rem;
                transition: all 300ms ease-in-out;
                @media(max-width: 576px) {
                    padding: 1.5rem;
                }
            }
            .ans__option__title {
                color: #EE7800;
                margin: 0;
                transition: all 300ms ease-in-out;
                @media(max-width: 576px) {
                    margin: 0 0.5rem;
                }
            }
            .ans__section {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            span {
                color: #EE7800;
                font-size: 6.5rem;
                font-family: 'Nunito', sans-serif;
                transition: all 300ms ease-in-out;
                @media(max-width: 576px) {
                    font-size: 4.5rem;
                }
            }
            .ans__content {
                margin: 0;
                transition: all 300ms ease-in-out;
                @media(max-width: 576px) {
                    margin: 0 0 1.5rem 0;
                }  
            }
            p {
                margin: 1rem 0;
                transition: all 300ms ease-in-out;
                @media(max-width: 576px) {
                    margin: 0;
                }
            }
        }
    }
    .angle {
        width: 100%;
        height: 60px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 100% 100%;
        position: absolute;
        right: 0;
        bottom: 0;
    }
}

//心理測驗-社群媒體分享
.scMedia {
    &__block {
        width: 70%;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            padding: 1rem 0 2rem 0;
        }
    }
    &__list {
        background-color: transparent;
    }
}