@charset "UTF-8";
.qa {
    p {
        color: $gray;
        font-size: 1em;
        span {
            font-size: 0.7em;
        }
    }
    &>.bg {
        top: 72%;
    }
    .container {
        padding-bottom: 5em;
    }
    &__keypoint {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin-top: 2.8em;
        margin-bottom: 1.7em;
        h3 {
            font-size: 1.6em;
            font-weight: 400;
            color: $blue;
            margin: 0;
            margin-bottom: 1.8em;
        }
        &__list {
            display: flex;
        }
        &__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            width: 10em;
            margin: 0 2.8em;
            &:nth-child(2) {
                .qa__keypoint__pic__line {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 7.6em;
                    height: 0.05em;
                    background-color: rgba($gray, 0.3);
                    &-left {
                        left: -7.6em;
                    }
                    &-right {
                        right: -7.6em;
                    }
                }
            }
        }
        &__pic {
            position: relative;
            width: 8em;
            margin: 0 auto 1.7em;
            img {
                width: 100%;
                height: auto;
            }
            &__frame {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 8.8em;
                height: 8.8em;
                border: 0.05em solid rgba($gray, 0.3);
                border-radius: 50%;
            }
        }
        &__exp {
            p {
                line-height: 1.5;
            }
        }
    }
    &__box {
        border: 0.1em solid rgba($gray, 0.5);
        border-radius: 0.5em;
        background-color: #fff;
        padding: 1.5em 0.35em 1.5em 0;
        width: 50em;
        height: 31em;
        margin: 0 auto;
        &__scroll {
            width: 100%;
            height: 100%;
            padding: 0 1.5em 0 2em;
        }
        &__list {
            margin: 0;
            padding-left: 0;
            list-style: none;
        }
        &__item {
            position: relative;
            margin-bottom: 1.5em;
            &::before {
                content: "";
                position: absolute;
                margin-left: -0.9em;
                top: 0.3em;
                display: block;
                width: 0.3em;
                height: 0.3em;
                border-radius: 50%;
                background-color: #0699d2;
                overflow: hidden;
            }
            h4 {
                margin: 0;
                color: $blue;;
                font-weight: 400;
                margin-bottom: 0.2em;
                font-size: 1.05em;
            }
            p {
                padding-left: 0.5em;
                line-height: 1.5;
            }
        }
    }
}

@media screen and (max-width: 992px) {
    .qa {
        .container {
            padding-bottom: 10em;
        }
        .copywriting {
            margin-bottom: 2em;
        }
        p {
            font-size: 2.1em;
            text-align: center;
            line-height: 1.5;
        }
        &__keypoint {
            h3 {
                text-align: center;
                font-size: 3em;
                line-height: 1.3;
                margin-bottom: 1.5em;
            }
            &__list {
                flex-direction: column;
                align-items: flex-start;
                justify-content: flex-start;
            }
            &__item {
                margin: 0 auto 3em;
                flex-direction: row;
                width: 77%;
                &:nth-child(2) {
                    .qa__keypoint__pic__line {
                        top: auto;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 0.1em;
                        height: 3em;
                        background-color: rgba($gray, 0.5);
                        &-left {
                            top: -3em;
                        }
                        &-right {
                            bottom: -3em;
                        }
                    }
                }
            }
            &__pic {
                width: 14em;
                flex: 0 0 14em;
                margin: 0;
                margin-right: 4em;
                &__frame {
                    width: 15.2em;
                    height: 15.2em;
                    border: 0.05em solid rgba($gray, 0.5);
                }
            }
            &__exp {
                flex: 1;
                p {
                    text-align: left;
                }
            }
        }
        &__box {
            border-radius: 2em;
            width: 92%;
            height: 59em;
            padding: 2.5em 1em 2.5em 0;
            &__scroll {
                padding: 0 5em 0 4em;
            }
            &__item {
                margin-bottom: 3em;
                &::before {
                    left: 1em;
                    top: 1.1em;
                    margin-left: -2em;
                    width: 0.6em;
                    height: 0.6em;
                    border-radius: 100%;
                }
                h4 {
                    font-size: 2.1em;
                    font-weight: 500;
                    line-height: 1.4;
                }
                p {
                    text-align: left;
                    font-size: 2em;
                    padding-left: 0;
                }
            }
        }
    }
}