Moderna-Survey/src/fe/mrna/css/component/_modal.scss

@charset "UTF-8";
.modal {
    &__video {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 52.5%;
        margin-bottom: 1em;
        box-shadow: none;
        margin-bottom: 2em;
        iframe {
            position: absolute;
            width: 99%;
            height: 99%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .modal-body {
        .video__icon {
            width: 5em;
            p {
                font-size: 1em;
                font-weight: 500;
                color: #0699d2;
                margin-top: 0.5em;
            }
        }
    }
}
.modal-research {
    &::before {
        content: "";
        width: 300%;
        height: 300%;
        position: fixed;
        left: 50%;
        top: 50%;
        background: url(../images/modal-bg.png) $blue-d repeat;
        transform: translate(-50%, -50%) rotate(-45deg);
        background-size: 20em auto;
    }
    .btn-close {
        position: absolute;
        right: 1em;
        top: 1em;
        opacity: 0.3;
        z-index: 1;
    }
    .modal {
        &-dialog {
            max-width: 40em;
        }
        &-content {
            box-shadow: 0.8em 0.8em 1em rgba(#000, 0.3);
        }
        &-body {
            transition: 0.3s;
            padding: 2.5em 3em 2.3em;
            h2 {
                color: $blue-d;
                font-size: 1.4em;
                margin: 0;
            }
            h3 {
                color: $blue;
                font-size: 1em;
                margin: 0;
            }
            h4 {
                margin: 0;
                font-size: 0.9em;
            }
            p {
                color: $gray;
                font-size: 0.8em;
                margin: 0;
                font-weight: 300;
                span {
                    font-size: 0.8em;
                }
            }
        }
    }
}

.modal-proud {
    .modal {
        &__title {
            margin-bottom: 1em;
        }
        &__preface {
            margin-bottom: 0.5em;
            h3 {
                margin-bottom: 0.1em;
            }
        }
        &__list {

        }
        &__item {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }
        &__pic {
            flex: 0 0 4em;
            margin-right: 0.7em;
            margin-top: 0.8em;
            img {
                width: 100%;
                height: auto;
            }
        }
        &__text {
            flex: 1;
            padding: 0.9em 0;
            border-bottom: 0.1em solid rgba($gray, 0.3);
            h4 {
                color: $blue;
                font-size: 0.9em;
                margin-bottom: 0.2em;
            }
            p {
                font-size: 0.8em;
            }
        }
        &__additional {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            border: 0.1em solid rgba($gray, 0.3);
            border-radius: 0.5em;
            padding: 0.3em 0.7em 0.7em;
            margin-top: 0.7em;
            &__icon {
                width: 3em;
                margin-right: 0.7em;
                img {
                    width: 100%;
                    height: auto;
                }
            }
            p {
                font-size: 0.8em;
            }
        }

    }
}

.modal-feature {
    .modal {
        &-body {
            padding: 1.5em 3em 1.3em;
        }
        &__title {
            margin-bottom: 1em;
        }
        &__principle {
            position: relative;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 1.8em;
            &__item {
                position: relative;
                width: 15em;
                height: 15em;
                border-radius: 100%;
                &-blue {
                    background-color: $blue;
                    padding: 3.5em 1.8em 2.5em 2em;
                    &::before {
                        content: "";
                        display: block;
                        width: 7.5em;
                        height: 1px;
                        background-color: rgba($gray, 0.3);
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: -7.5em;
                    }
                }
                &-red {
                    background-color: $red;
                    padding: 3.5em 0.9em 2.5em 1.3em;
                }
            }
            &__title {
                margin-bottom: 0.5em;
                h3 {
                    font-size: 1.2em;
                    text-align: center;
                    color: $white;
                }
            }
            &__text {
                p {
                    color: $white;
                    line-height: 1.4;
                    font-size: 0.8em;
                }
                &-pc {
                    display: block;
                }
                &-mb {
                    display: none;
                }
            }
        }
        &__list {
            margin-top: 1em;
            display: flex;
            flex-wrap: wrap;
        }
        &__item {
            width: 33%;
            border-left: 0.1em solid $blue;
            padding: 0 1em 0 0.5em;
            margin-bottom: 1.5em;
            h4 {
                color: $blue-d;
            }
            p {
                font-size: 0.7em;
                line-height: 1.3;
            }
        }
    }
}

.modal-unlimit {
    .modal {
        &__title {
            margin-bottom: 0.7em;
        }
        &__preface {
            margin-bottom: 1.3em;
            h3 {
                font-size: 0.9em;
                font-weight: 300;
                margin-bottom: 0.3em;
            }
            p {
                font-size: 0.8em;
                line-height: 1.4;
            }
        }
        &__intro {
            margin-top: 1.8em;
            display: flex;
            justify-content: space-between;
            &__pic{
                width: 45%;
                img {
                    width: 100%;
                    height: auto;
                }
            }
            p {
                font-size: 0.8em;
                line-height: 1.7;
            }
            ul {
                width: 54%;
                list-style: none;
                li {
                    position: relative;
                    display: flex;
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        width: 0.15em;
                        height: 0.15em;
                        background-color: $gray;
                        border-radius: 100%;
                        left: -0.7em;
                        top: 0.5em;
                    }
                }
            }
        }
    }
}

.modal-show {
    h3 {
        font-weight: 400;
    }
    .modal {
        &-body {
            padding: 2.5em 2.3em 2.3em;
        }
        &__title {
            margin-bottom: 1em;
        }
        &__preface {
            margin-bottom: 1.5em;
        }
        &__operation {
            margin-top: 0.8em;
            &__item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 0.5em;
                p {
                    font-size: 0.7em;
                }
            }
            &__step {
                background-color: $blue;
                padding: 0.2em 0.5em 0.4em;
                border-radius: 1em;
                margin-right: 0.7em;
                p {
                    color: $white;
                    white-space: nowrap;
                    line-height: 1;
                }
            }
            &__text {
                flex: 1;
                padding-bottom: 0.5em;
                border-bottom: 0.1em solid rgba($gray, 0.3);
            }
        }
        &__feature {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            height: 7em;
            margin-top: 0.8em;
            margin-bottom: 1em;
            &__item {
                width: 19%;
                height: 100%;
                border-radius: 0.5em;
                border: 0.1em solid rgba($gray, 0.3);
                display: flex;
                justify-content: center;
                align-items: center;
                p {
                    text-align: center;
                    font-size: 0.7em;
                    .red {
                        font-size: 1.3em;
                        color: $red;
                    }
                }
            }
        }
        &__video {
            width: 33.875em;
            margin: 0 auto 2em
        }
    }
}

.modal-test {
    .modal {
        &-body {
            padding: 2.5em 2.6em 2.3em;
        }
        &__title {
            margin-bottom: 0.4em;
        }
        &__preface {
            p {
                color: $blue;
            }
        }
        &__game {
            margin-top: 1.5em;
            &__item {
                border-radius: 0.4em;
                overflow: hidden;
                margin-bottom: 0.8em;
                &.active {
                    .modal__game__ques {
                        padding: 0.5em 0.6em 0.6em;
                    }
                    .modal__game__btns {
                        display: none;
                    }
                }
            }
            &__ques {
                position: relative;
                background-color: $blue;
                padding: 1em 0.6em 1.1em;
                p {
                    color: $white;
                    line-height: 1;
                    .num {
                        font-size: 1.2em;
                        font-weight: 400;
                        margin-right: 0.7em;
                    }
                }
            }
            &__btns {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0.4em;
                display: flex;
                &__btn {
                    width: 2em;
                    height: 2em;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 0.3em;
                    transition: 0.3s;
                    cursor: pointer;
                    img {
                        width: 65%;
                        height: auto;
                    }
                    &:hover {
                        background-color: rgba($white, 0.3);
                    }
                }
            }
            &__ans {
                justify-content: flex-start;
                align-items: center;
                padding: 0.2em 0.6em 0.6em;
                display: none;
                border-radius: 0 0 0.4em 0.4em;
                border: 0.1em solid $blue;
                &__icon {
                    width: 1.2em;
                    margin-right: 0.7em;
                    img {
                        width: 100%;
                        height: auto;
                    }
                    &-circle {
                        width: 2em;
                    }
                }
                p {
                    margin-top: 0.3em;
                }
            }
        }
    }
}

@media screen and (max-width: 992px) {
    .modal {
        .modal-body {
            .video__icon {
                width: 4em;
                p {
                    font-size: 0.8em;
                    color: #0699d2;
                    margin-top: 0.5em;
                }
            }
        }
    }
    .modal-research {
        .modal {
            &-dialog {
                margin: 1.5em 0.7em;
            }
            &-body {
                padding: 2.5em 1em 1em;
                h2 {
                    font-size: 1.2em;
                    font-weight: 600;
                }
                h3 {
                    font-size: 0.9em;
                    font-weight: 600;
                }
                h4 {
                    font-size: 0.8em;
                }
                p {
                    font-size: 0.7em;
                }
            }
        }
    }
    .modal-proud {
        flex: 0 0 3.5em;
        .modal {
            &-body {
                padding: 2.5em 1.5em 2em;
            }
            &__text {
                h4 {
                    font-size: 0.8em;
                }
                p {
                    font-size: 0.7em;
                    word-break: break-all;

                }
            }
            &__pic {
                flex: 0 0 3.5em;
            }
            &__additional {
                &__icon {
                    flex: 0 0 1.5em;
                    width: 1.5em;
                }
            }
        }
    }
    .modal-feature {
        .modal {
            &-body {
                padding: 2.5em 1.3em 1em;
            }
            &__principle {
                flex-wrap: wrap;
                align-items: flex-start;
                h3 {
                    font-size: 1em;
                    font-weight: 300;
                }
                &__item {
                    width: 6.5em;
                    height: 6.5em;
                    padding: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 0.6em;
                    &-blue {
                        margin: 0 1em 0.6em;
                        padding: 0;
                        &::before {
                            display: none;
                        }
                    }
                    &-red {
                        margin: 0 1em 0.6em;
                    }
                }
                &__title {
                    margin-bottom: 0;
                }
                &__text {
                    p {
                        color: $gray;
                    }
                    &-pc {
                        display: none;
                    }
                    &-mb {
                        width: 8.5em;
                        display: block;
                    }
                }
            }
            &__item {
                width: 50%;
                margin-bottom: 1em;
            }
        }
    }
    .modal-unlimit {
        .modal {
            &-body {
                padding: 2.5em 0.8em 1.3em;
            }
            &__preface {
                margin-bottom: 1em;
            }
            &__intro {
                display: block;
                margin-top: 0;
                &__pic {
                    width: 65%;
                    margin-bottom: 1.5em;
                }
                ul {
                    width: 100%;
                    list-style: none;
                    padding-left: 0.8em;
                    margin-bottom: 0;
                }
            }
        }
    }
    .modal-show {
        .modal {
            &__preface {
                margin-bottom: 1em;
            }
            &__operation {
                margin-bottom: 1em;
            }
            &__feature {
                flex-wrap: wrap;
                height: auto;
                &__item {
                    height: 5.5em;
                    margin-bottom: 0.5em;
                    &:nth-child(1), &:nth-child(2), &:nth-child(3) {
                        width: 32%;
                    }
                    &:nth-child(4), &:nth-child(5) {
                        width: 49%;
                    }
                    p {
                        width: 100%;
                        .red {
                            font-size: 1.1em;
                            font-weight: 400;
                        }
                    }
                }
            }
            &__video {
                width: 100%;
            }
        }
    }
    .modal-test {
        .modal {
            &-body {
                padding: 2.5em 1em 0.7em;
            }
            &__title {
                margin-bottom: 0.2em;
            }
            &__game {
                margin-bottom: 0.6em;
                &__item {
                    &.active {
                        .modal__game__ques {
                            padding: 0.3em 4.5em 0.5em 0.6em;
                        }
                    }
                }
                &__ques {
                    padding: 0.3em 4.5em 0.5em 0.6em;
                    p {
                        line-height: 1.3;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                    }
                }
                &__btns {
                    &__btn {
                        width: 1.8em;
                        height: 1.78em;
                    }
                }
                &__ans {
                    &__icon {
                        flex: 0 0 1em;
                        width: 1em;
                    }
                }
            }
        }
    }
}