my_tests/assets/css/rv_web/rv_web2.scss

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

$main-color: #727679;

.radarBox {
    width: 50%;
    margin: 0;
    transition: all 300ms ease-in-out;
    @media(max-width: 576px) {
        width: 100%;
        background-color: #FFF;
        box-shadow: 0 1px 10px #cecece;
    }
    canvas {
        transform: unset;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            transform: scale(0.85);
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.text-underline {
    text-decoration: underline;
}


.swiper-button-next, .swiper-button-prev {
    &:focus {
        outline: none !important;
        display: none;
    }
}


// <!-- ---------------------建案(左:雷達圖/右:簡介+社群媒體分享)------------------------->

.intro {
    padding: 1.5rem 0;

    &__section {
        padding: 1rem;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            padding: 0;
        }
    }

    &__section__info {
        padding: 1rem;
        color: $main-color;
        position: relative;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            padding: 0.5rem 0.7rem;
        }
    }

    &__infoItems {
        padding: 1rem 0 0 0;
        line-height: 1.5;
        min-width: 87%;
        transition: all 300ms ease-in-out;
        @media(max-width: 1199px) {
            padding: 0 0 1.5rem 1rem;
        }
        @media(max-width: 992px) {
            padding: 0 0 1.5rem 0;
            max-width: 100%;
        }
        @media(max-width: 576px) {
            padding: 0;
            line-height: 2;
        }
    }

    &__infoItems__list {
        display: flex;
        &--lf {
            flex-basis: 13%;
            flex-grow: 0;
            max-width: 13%;
            display: flex;
            justify-content: flex-end;
            align-items: start;
            transition: all 300ms ease-in-out;
            @media(max-width: 1199px) {
                flex-basis: 20%;
            }
            @media(max-width: 992px) {
                flex-basis: 30%;
                max-width: 30%;
            }
            @media(max-width: 576px) {
                flex-basis: 25%;
                max-width: 25%;
            }
            @media(max-width: 321px) {
                flex-basis: 30%;
                max-width: 30%;
            }
        }
        &--rt {
            flex-basis: 87%;
            flex-grow: 0;
            max-width: 87%;
            justify-content: start;
            word-break: break-all;
            @media(max-width: 576px) {
                flex-basis: 70%;
                max-width: 70%;
            }
        }
        .small {
            color: #AAA;
        }

        a {
            &:hover {
                color: #727679;
            }
        }
    }

    .marked-dollar {
        position: absolute;
        right: 15px;
        top: 15px;
    }
    .marked {
        font-size: 2.5rem;
        font-weight: bold;
        color: #FF0000;
        line-height: 0.9;
        margin: 0 0.5rem 0 0;
        transition: all 300ms ease-in-out;
        @media(max-width: 1199px) {
            font-size: 2.5rem;
        }
        @media(max-width: 992px) {
            font-size: 1.5rem;
        }
        @media(max-width: 576px) {
            font-size: 1.5rem;
            color: #FF0000;
            line-height: 1.2;
        }
    }

    &__section__contact {
        padding: 0.5rem;
        width: 50%;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            padding: 1rem;
            width: 100%;
        }

        .contactTitle-wrapper {
            line-height: 1.2;
        }

        .contactTitle {
            color: #727679;
            font-size: 1.125rem;
            font-weight: normal;
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                font-size: 1.125rem;
                font-weight: bold;
            }
        }

        a {
            color: #EE751B;
            font-size: 1.5rem;
            font-weight: bold;
            padding: 0;
            transition: all 300ms ease-in-out;
            @media(max-width: 1199px) {
                font-size: 1.1rem;
            }
            @media(max-width: 576px) {
                padding: 0.5rem 0;
                font-size: 1.5rem;
            }
        }

        .btn {
            padding: 0.9rem 2rem;
            transition: all 300ms ease-in-out;
            @media(max-width: 1199px) {
                padding: 0.5rem 1rem;
            }
            @media(max-width: 992px) {
                padding: 0.5rem;
            }
        }
    }
}

.introShort {

    &__above {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__vr {
        top: 15px;
        right: 15px;
        text-align: center;
        color: #EE751B;
        border: 1px solid #EE751B;
        border-radius: 0.25rem;
        line-height: 1.1;
        transform: scale(0.9);
        padding: 0.5rem 0.8rem;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            top: 16px;
            right: 15px;
            padding: 0;
            line-height: 1.2;
        }

        &:hover {
            cursor: pointer;
        }

        &__big {
            font-size: 265%;
            font-weight: bold;
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                font-size: 170%;
            }
        }

        &__text {
            &::before {
                content: '全景預覽';
                display: inline-block;
                transform: scale(0.8);
                @media(max-width: 576px) {
                    transform: scale(0.75);
                }
            }
        }

    }

    &__price {
        top: 15px;
        right: 15px;
        text-align: center;
        color: #EE751B;
        border: 1px solid #EE751B;
        border-radius: 0.25rem;
        background: #ee7518;
        color: #FFF;
        line-height: 1.1;
        transform: scale(0.9);
        padding: 0.5rem;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            top: 16px;
            right: 15px;
            padding: 0;
            line-height: 1.2;
        }

        &:hover {
            cursor: pointer;
        }

        &__big {
            font-size: 265%;
            font-weight: bold;
            transform: scale(0.75);
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                font-size: 170%;
                transform: unset;
            }
        }

        &__text {
            &::before {
                content: '實價登錄';
                display: inline-block;
                transform: scale(0.8);
                @media(max-width: 576px) {
                    transform: scale(0.75);
                }
            }
        }
    }

    &__content {
        margin: 1rem 0 0;
        color: #727679;
    }
}


// <!-- --------------------------------建案-影片----------------------------------->

.buildVideo {
    &__bgImg {
        height: 406px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            height: 250px;
        }
    }
    &__play {
        position: absolute;
        top: 43%;
        left: 47%;
        width: 55px;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            top: 35%;
            left: 40%;
            width: 85px;
            height: 85px;
        }
    }

    &__link {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 1310px;
        margin: 0 auto;
        background: #fff;
        min-height: 750px;
        transition: all 300ms ease-in-out;
        @media(max-width: 576px) {
            min-height: unset;
        }
    }

    &__img {
        max-height: 650px;
    }

    picture {
        img {
            position: absolute;
            top: 45%;
            left: 45.5%;
            width: 110px;
            height: 110px;
        }
    }

    .swiper-button-prev:after {
        content: '';
        width: 23px;
        height: 40px;
        background: url("../../images/rv_web/arrow-left.png") no-repeat;
        background-position: center;
        display: inline-block;
    }

    .swiper-button-next:after {
        content: '';
        width: 23px;
        height: 40px;
        background: url("../../images/rv_web/arrow-right.png") no-repeat;
        background-position: center;
        display: inline-block;
    }
}

// <!-- ---------------------------------專欄(PC-2欄、mb-單欄)----------------------------------->

.buildSlider {

    &__bgImg {
        height: 406px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
    }

    &__title {
        margin: 0.5rem 0;
        color: #43484C;
        font-size: 1.125rem;

        &--ellipse {
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 2;
            height: calc(18px * 2 *1.5);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
        }
    }
}

// <!-- -------------------推薦建案---------------------->

.likeSee {
    &__tag {
        &--item {
            font-size: 1.125rem;
            font-weight: bold;
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                font-size: 1rem;
            }
        }
    }
    a {
        &:hover {
            color: #727679;
        }
    }
}

.card {
    .card-link {
        position: relative;
        picture img {
            position: absolute;
            top: 45%;
            left: 45%;
            width: 46px;
            height: 46px;
            transition: all 300ms ease-in-out;
            @media(max-width: 576px) {
                top: 39%;
                left: 39%;
                width: 40px;
                height: 40px;
            }
        }
    }
}