@keyframes fadeOutNew {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes shake {
    0% {
        width: 1.97rem;
        height: 1.16rem;
    }

    10% {
        width: 2.3rem;
        height: 1.26rem;
    }

    15% {
        width: 2.42rem;
        height: 1.35rem;
    }

    20% {
        width: 2.5rem;
        height: 1.4rem;
    }

    25% {
        width: 1.97rem;
        height: 1.16rem;
    }

    50% {
        width: 1.97rem;
        height: 1.16rem;
    }

    75% {
        width: 1.97rem;
        height: 1.16rem;
    }

    100% {
        width: 1.97rem;
        height: 1.16rem;
    }
}

@keyframes toLeft {
    0% {
        left: 0;
    }

    15% {
        left: -.1rem;
    }

    25% {
        left: -.15rem;
    }

    30% {
        left: 0;
    }

    70% {
        left: 0;
    }

    75% {
        left: -.1rem;
    }

    85% {
        left: -.15rem;
    }

    90% {
        left: 0;
    }

    100% {
        left: 0;
    }
}

@keyframes toRight {
    0% {
        right: 0;
    }

    15% {
        right: -.1rem;
    }

    25% {
        right: -.15rem;
    }

    30% {
        right: 0;
    }

    70% {
        right: 0;
    }

    75% {
        right: -.1rem;
    }

    85% {
        right: -.15rem;
    }

    90% {
        right: 0;
    }

    100% {
        right: 0;
    }
}

@keyframes myRotate {
    0% {
        transform: rotate(0deg);
        transform-origin: bottom;

    }

    30% {
        transform: rotate(45deg);
        transform-origin: bottom;
    }

    60% {
        transform: rotate(45deg);
        transform-origin: bottom;
    }

    100% {
        transform: rotate(0deg);
        transform-origin: bottom;

    }
}

.scroll_analysis {
    width: 1.90rem;
    height: 1.48rem;
    position: absolute;
    right: -0.5rem;
    bottom: .5rem;
    display: none;
    background: url(http://asxx-img.ai160.com/images/asxx/assets/pre/scroll_ana.gif) no-repeat;
    background-size: 100% 100%;
}

.errorbook {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background: #8E53D9;
    background-size: 100% 100%;

    .back {
        width: 0.69rem;
        height: 0.86rem;
        position: absolute;
        top: 0.38rem;
        left: 0.63rem;

        img {
            width: 100%;
            height: 100%;
        }
    }
    .prev_next {
        position: absolute;
        right: 1rem;
        top: .32rem;
        display: flex;

        .prev,
        .next {
            width: 2.11rem;
            height: .94rem;
            border-radius: .52rem;
            background: #FEB32A;
            font-size: .44rem;
            font-weight: 500;
            color: #fff;
            line-height: .94rem;
            text-align: center;

            // span {
            //     width: 3.46rem;
            //     height: 0.1rem;
            //     background: #e2d5c2;
            //     opacity: .3;
            //     display: block;
            //     left: 0;
            //     position: absolute;
            //     bottom: 0;
            // }

            // &.tap {
            //     background: #ff9d30;
            //     box-shadow: 0 -.07rem 0 0 #ffbb6f;

            //     span {
            //         background: #e28929;
            //         opacity: .3;
            //     }
            // }
        }
        .next {
            margin-left: .74rem;
        }
        // .next {
        //     width: 3.46rem;
        //     height: .93rem;
        //     border-radius: .5rem .5rem 0 0;
        //     background: #fff4e4;
        //     box-shadow: 0 -.07rem 0 0 rgba(255, 255, 255, 1);
        //     position: absolute;
        //     top: -.05rem;
        //     left: 3.53rem;
        //     font-size: .46rem;
        //     color: #241600;
        //     font-weight: 500;
        //     line-height: 1rem;
        //     text-align: center;

        //     span {
        //         width: 3.46rem;
        //         height: 0.1rem;
        //         background: #e2d5c2;
        //         opacity: .3;
        //         display: block;
        //         left: 0;
        //         position: absolute;
        //         bottom: 0;
        //     }

        //     &.tap {
        //         background: #ff9d30;
        //         box-shadow: 0 -.07rem 0 0 #ffbb6f;

        //         span {
        //             background: #e28929;
        //             opacity: .3;
        //         }
        //     }
        // }
    }
    .errorbook-tab {
        display: flex;
        margin-top: .48rem;
        .tab-item {
          width: 3.08rem;
          height: 1.07rem;
          font-size: .5rem;
          color: #fff;
          box-sizing: border-box;
          text-align: center;
          line-height: 1.3rem;
          &:nth-child(1) {
            background: url('assets/mobile/school_bg.png') no-repeat;
            background-size: 100% 100%;
            margin-left: 1.64rem;
          }
          &:nth-child(2) {
            background: url('assets/mobile/test_bg.png') no-repeat;
            background-size: 100% 100%;
          }
          &:nth-child(3) {
            background: url('assets/mobile/question_bg.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .tab-select {
          background: url('assets/mobile/select_bg.png') no-repeat !important;
          background-size: 100% 100% !important;
          color: #333;
        }
      }
    .category {
        width: 6.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: .27rem;
        left: 1.75rem;

        .category_btn {
            text-align: center;
            width: 3.07rem;
            height: 0.95rem;
            background: #fff4e4;
            box-shadow: 0 .07rem 0 0 #919191;
            font-size: .46rem;
            font-weight: 500;
            line-height: .95rem;
            color: #353535;
            border-radius: 1rem;

            &.focus {
                background: #ff9d30;
                box-shadow: 0 .07rem 0 0 #f47e1f;
                color: #fff;
            }
        }


    }
    .review_main {
        width: 18.29rem;
        height: 9.01rem;
        background: url('assets/mobile/white_bg.png') no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .no_ques {
        display: none;
        width: 3.95rem;
        height: 4.64rem;
        position: absolute;
        top: 2rem;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .before_re_box {
        width: 18.68rem;
        height: 10.12rem;
        background: url('http://asxx-img.ai160.com/images/asxx/assets/pre/broad.png') no-repeat;
        position: relative;
        top: 0.1rem;
        margin: 0 auto;
        animation: fadeOut .5s linear;


    }

    .lesson_main {
        width: 17.45rem;
        height: 8.08rem;
        position: relative;
        top: .65rem;
        margin: 0 auto;
        animation: fadeOut .5s linear;
        // background: #fff;
        border-radius: .2rem;

        .text_area {
            width: 15.5rem;
            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: .5rem;
            left: 1.4rem;
            overflow: hidden;
            .ques_img {
              width: 16.84rem;
              height: 5rem;
            }
            .ques_big_img {
              width: 13.3rem;
              height: 7.48rem;
              margin: 0 auto;
              display: block;
              transform: translateY(-.6rem) scale(1.1);
            }
            // 下划线
            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 {
            display: none;
            width: 100%;
            height: 1.5rem;
            // padding-left: 1.2rem;
            box-sizing: border-box;
            // display: flex;
            align-items: center;
            justify-content: space-around;

            .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;
                    margin-right: .48rem;
                    // box-shadow: 0 0.02rem 0.08rem 0 rgba(208, 224, 231, 0.32);
                    border: 0.04rem solid #7a7a7a;
                    color: #7a7a7a;
                    font-size: .56rem;
                    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: .81rem;
                    position: absolute;
                    top: 0.98rem;
                    left: .75rem;
                    display: none;
                }

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


                    // 下划线
                    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;
                    }

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

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

        .know {
            width: 5.58rem;
            height: 1.22rem;
            background: url('http://ai-img.ai160.com/images/xyyf-res/lesson/know.png') no-repeat;
            margin: 0 auto;
            display: none;
            position: relative;
            z-index: 2;
        }

        .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;
                }

                // 下划线
                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;
                }

                width: 16.72rem;

            }
        }
    }


    .tip_modal {
        display: none;
        width: 6.25rem;
        height: 2.91rem;
        border-radius: .3rem;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 3.8rem;
        background: rgba(0, 0, 0, .74);
        font-size: .35rem;
        color: #fff;
        line-height: 2.91rem;
        text-align: center;
        animation: fadeOutNew .3s linear 1s;
    }
}
