@keyframes getBig {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2, 1.2);
    }

}

@keyframes getShine {
    0% {
        color: #fff;
    }

    25% {
        color: #fff;
    }

    50% {
        color: #fff;
    }

    75% {
        color: #fff;
    }

    100% {
        color: #000;
    }
}

.answer_change {
    width: 100%;
    height: 100%;
    position: absolute;

    .back {
        width: 0.69rem;
        height: 0.86rem;
        position: absolute;
        top: 1.05rem;
        left: 0.93rem;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .review_main {
        width: 18.29rem;
        height: 9.01rem;
        // background: #fff;
        position: relative;
        top: 1.26rem;
        left: .43rem;
        background: url('assets/mobile/white_bg.png') no-repeat;
        background-size: 100% 100%;
    }

    .number_menu {
        width: 11.22rem;
        height: 1.06rem;
        border-radius: .5rem;
        // border: .03rem solid #fff;
        display: flex;
        align-items: center;
        overflow: scroll;
        position: absolute;
        top: 0.46rem;
        left: 1.3rem;
        background: #f2f7f6;
        border-radius: .53rem;
        padding: 0 .2rem;
        box-sizing: border-box;
        &::-webkit-scrollbar {
            display: none;
        }
        .number {
            flex-shrink: 0;
            width: 0.76rem;
            height: 0.76rem;
            border-radius: 50%;
            text-align: center;
            color: #5f5f5f;
            line-height: .68rem;
            box-sizing: border-box;
            font-size: .31rem;
            background: #fff;
            // box-shadow: 0px 5px 0px 0px rgba(80, 80, 80, 1);
            border: .04rem solid #7a7a7a;
            position: relative;
            margin-right: .3rem;
            img {
                width: 0.36rem;
                height: 0.36rem;
                position: absolute;
                right: -.12rem;
                bottom: .4rem;
                border-radius: 50%;
            }

            &.right {
                background: rgba(142, 216, 0, 1) !important;
                box-shadow: 0px 5px 0px 0px rgba(61, 124, 0, 1);
            }

            &.wrong {
                background: rgba(250, 94, 36, 1) !important;
                box-shadow: 0px 5px 0px 0px rgba(179, 49, 0, 1);
            }

            &.current {
                // border: .06rem solid rgba(255, 255, 255, 1);
                // background: #fff;
                // color: #3A3A3A;
                // transform: scale(1.2, 1.2);
                // animation: getBig .9s ease;
                // border: .02rem solid #fff;
                background: rgba(255, 157, 48, 1);
                border: .04rem solid rgba(244, 126, 31, 1);

            }

        }

    }

    .prev_next {
        position: absolute;
        left: 13rem;
        top: 0.36rem;


        .prev {
            width: 2.11rem;
            height: .94rem;
            border-radius: .9rem;
            background: #45c9a5;
            box-shadow: 0 .05rem 0 0 #07a183;
            position: absolute;
            left: 0;
            top: 0.1rem;
            font-size: .44rem;
            font-weight: 500;
            color: #fff;
            line-height: 1rem;
            text-align: center;

            &.shine {
                animation: getShine .3s linear;
            }
        }

        .next {
            width: 2.11rem;
            height: .94rem;
            border-radius: .8rem;
            background: #45c9a5;
            box-shadow: 0 .05rem 0 0 #07a183;
            position: absolute;
            left: 2.55rem;
            top: 0.1rem;
            font-size: .44rem;
            color: #fff;
            font-weight: 500;
            line-height: 1rem;
            text-align: center;

            &.shine {
                animation: getShine .3s linear;
            }
        }
    }

    .lesson_main {
        width: 16.68rem;
        height: 8rem;
        position: relative;
        top: 1.65rem;
        margin: 0 auto;
        animation: fadeOut .5s linear;

        .text_area {
            width: 100%;
            height: 5.8rem;
            font-size: .6rem;
            color: #000;
            background: rgba(0, 0, 0, 0);
            line-height: .84rem;
            white-space: normal;
            display: block;
            position: relative;
            top: -.35rem;
            left: .55rem;
            overflow: hidden;
            transform: scale(.86);
            .ques_img {
              width: 16.84rem;
              height: 5rem;
            }
            .ques_big_img {
              width: 13.3rem;
              height: 7.48rem;
              margin: 0 auto;
              display: block;
              transform: translateY(-.5rem) scale(1);
            }
            .ques_score {
                position: fixed;
                font-size: .5rem;
                left: 。7rem;
                top: .2rem;
                z-index: 1;
                border-bottom: 0;
            }
            // 下划线
            span {
                border-bottom: .02rem solid #000;
            }

            // 加粗 实线下划线
            b {
                border-bottom: .02rem solid #000;

            }

            // 虚线下划线
            i {
                font-style: normal;
                border-bottom: .02rem dashed #000;
            }

            // 控制空格
            em {
                width: 1.3rem;
                display: inline-block;
            }

            // 斜体
            p {
                display: inline;
                font-style: italic;
            }
        }

        .answer_area {
            width: 100%;
            height: 1.5rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: -.5rem;
            .answer_item {
                width: auto;
                position: relative;
                display: flex;
                align-items: center;

                &.fe-focus {
                    // &.fade_animation{
                    animation: answerFade .7s ease;
                    // }
                }

                .answer_icon {
                    width: 1rem;
                    height: 1rem;
                    display: inline-block;
                    // box-shadow: 0 0.02rem 0.08rem 0 rgba(208, 224, 231, 0.32);
                    color: #FB9B38;
                    font-size: .5rem;
                    text-align: center;
                    font-weight: 500;
                    line-height: 1rem;
                    border-radius: 50%;

                    &.choose {
                        // border: 0.04rem solid #f47e1f;
                        // color: #fff;
                        // background: #ff9d30;
                    }
                }

                .right_wrong {
                    width: 1.13rem;
                    height: .81remrem;
                    position: absolute;
                    top: 0.58rem;
                    left: .75rem;
                    display: none;
                }

                .answer_text {
                    display: flex;
                    align-items: center;
                    color: #000;
                    font-size: .5rem;
                    height: 1.85rem;
                    line-height: .83rem;
                    text-overflow: wrap;
                    flex-wrap: wrap;
                    max-width: 3.7rem;


                    span {
                        border-bottom: .02rem solid #000;
                        height: .85rem;
                    }

                    b {
                        border-bottom: .02rem solid #000;
                        font-style: normal;
                        font-weight: normal;
                        height: .85rem;

                    }

                    i {
                        font-style: normal;
                        border-bottom: .02rem dashed #000;
                        height: .85rem;

                    }

                    // 斜体
                    p {
                        display: inline;
                        font-style: italic;
                    }

                    // 控制空格
                    em {
                        width: 1.3rem;
                        display: inline-block;
                    }
                }
            }
        }

        .analysis {
            padding-left: .63rem;
            padding-top: .41rem;
            display: none;

            .answer_line {
                width: 100%;
                display: flex;
                align-items: center;
                font-size: .6rem;
                margin-bottom: .29rem;

                .user_answer {
                    color: #000;
                    margin-right: .56rem;
                }

                .user_answer {
                    color: #0d7a00;
                }
            }

            .analysis_main {
                font-size: .5rem;
                color: #000;

                .orange {
                    color: #ff8800;
                }
                b {
                    border-bottom: .02rem solid #000;
                    font-style: normal;
                    font-weight: normal;
                    height: .85rem;

                }

                i {
                    font-style: normal;
                    border-bottom: .02rem dashed #000;
                    height: .85rem;

                }

                // 控制空格
                em {
                    width: 1.3rem;
                    display: inline-block;
                }

                // 斜体
                p {
                    display: inline;
                    font-style: italic;
                }



                b {
                    border-bottom: .02rem solid #000;
                    font-style: normal;
                    font-weight: normal;
                    height: .85rem;

                }

                i {
                    font-style: normal;
                    border-bottom: .02rem dashed #000;
                    height: .85rem;

                }

                // 斜体
                p {
                    display: inline;
                    font-style: italic;
                }

                // 控制空格
                em {
                    width: 1.3rem;
                    display: inline-block;
                }

                width: 16.72rem;

            }

            .analysis_btn {
                display: none;
                width: 4.5rem;
                height: .99rem;
                background: #4cb0ff;
                box-shadow: 0 .08rem 0 0 #0D70BF;
                border-radius: .55rem;
                font-size: .52rem;
                font-weight: 500;
                color: #fff;
                line-height: .99rem;
                text-align: center;
                margin: 0 auto;
                position: absolute;
                top: 7.25rem;
                left: 0;
                right: 0;
            }
        }

    }
    .anser_title {
        position: absolute;
        top: -.97rem;
        left: 1.2rem;
        font-size: .5rem;
        font-weight: 500;
        color: #FFFFFF;
    }
    .anser_time_submit {
        position: absolute;
        left: 50%;
        top: -1rem;
        display: flex;
        transform: translateX(-50%);
        .answer_time {
            display: flex;
            align-items: center;
            img {
                width: .62rem;
                height: .73rem;
                margin-right: .3rem;
            }
            span {
                font-size: .53rem;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
        .answer_submit {
            width: 1.84rem;
            height: .74rem;
            background: #FFA400;
            border-radius: .38rem;
            text-align: center;
            line-height: .74rem;
            color: #FFFFFF;
            margin-left: .36rem;
            font-size: .44rem;
        }
    }
}
