* {
            box-sizing: border-box;
        }

        body, div, p {
            margin: 0;
            padding: 0;
        }

        input {
            outline: none;
            -webkit-appearance: none;
        }

        body {
            font-family: Helvetica,HelveticaNeue;
            background: #f4f4f4;
        }

        body, html {
            height: 100%;
            -webkit-tap-highlight-color: transparent;
        }

        #j-app, body {
            width: 100%;
            height: 100%;
        }

        .f-flex-box {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }

            .f-flex-box.align-center {
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

            .f-flex-box.dir-col {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -webkit-flex-direction: column;
                flex-direction: column;
            }

            .f-flex-box.justify-around {
                -webkit-justify-content: space-around;
                justify-content: space-around;
            }

            .f-flex-box > .flex1 {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }

            .f-flex-box.wrap {
                -webkit-flex-wrap: wrap;
                flex-wrap: wrap;
            }

            .f-flex-box.justify-between {
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                justify-content: space-between;
            }

            .f-flex-box.justify-end {
                -webkit-box-pack: end;
                -webkit-justify-content: flex-end;
                justify-content: flex-end;
            }

        .animated {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

            .animated.infinite {
                -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
            }

            .animated.hinge {
                -webkit-animation-duration: 2s;
                animation-duration: 2s;
            }

            .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
                -webkit-animation-duration: .75s;
                animation-duration: .75s;
            }

        @-webkit-keyframes a {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0,100%,0);
                transform: translate3d(0,100%,0);
            }

            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
        }

        @keyframes a {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0,100%,0);
                transform: translate3d(0,100%,0);
            }

            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
        }

        @-webkit-keyframes b {
            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }

            50% {
                opacity: 0;
                -webkit-transform: translate3d(0,100%,0);
                transform: translate3d(0,100%,0);
            }

            0% {
                opacity: 0;
            }
        }

        @keyframes b {
            to {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }

            50% {
                opacity: 0;
                -webkit-transform: translate3d(0,100%,0);
                transform: translate3d(0,100%,0);
            }

            0% {
                opacity: 0;
            }
        }

        @-webkit-keyframes c {
            0% {
                opacity: 1;
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
            }

            to {
                opacity: 0;
                -webkit-transform: scaleY(0);
                transform: scaleY(0);
            }
        }

        @keyframes c {
            0% {
                opacity: 1;
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
            }

            to {
                opacity: 0;
                -webkit-transform: scaleY(0);
                transform: scaleY(0);
            }
        }

        @-webkit-keyframes d {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn);
            }
        }

        @keyframes d {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn);
            }
        }

        .fadeInUp {
            -webkit-animation-name: a;
            animation-name: a;
        }

        #page-question {
            width: 100%;
            height: 100%;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            position: relative;
        }

        .m-container {
            position: relative;
            padding: 3.14666rem .8rem 5.33333rem;
        }

        .block-header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2.34666rem;
            background: #fff;
            z-index: 10;
            border-bottom: .026666rem solid #d9d9d9;
        }

        .f-flex-box.align-center {
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        

        .m-banner {
            padding: .53333rem;
            background: #fff;
            border-radius: .426666rem;
        }

            .m-banner .banner-avatar {
                overflow: hidden;
                width: 5.12rem;
                height: 5.12rem;
                border-radius: .42666rem;
            }

                .m-banner .banner-avatar img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

            .m-banner .banner-info {
                margin-left: .586666rem;
            }

                .m-banner .banner-info .banner-info-teacher {
                    font-size: .8rem;
                    color: #333;
                    font-weight: 500;
                }

                    .m-banner .banner-info .banner-info-teacher > span {
                        padding: .133333rem .4rem;
                        color: #FFF;
                        background: #ed4c18;
                        font-size: .53333rem;
                        font-weight: 400;
                        border-radius: .426666rem .426666rem .426666rem 0;
                    }

                .m-banner .banner-info .banner-info-teacher-detail {
                    font-size: .693333rem;
                    color: #333;
                }

                .m-banner .banner-info .banner-label > span {
                    margin-right: .32rem;
                    border: 1px solid #ed4c18;
                    color: #ed4c18;
                    padding: .213333rem .266666rem;
                    border-radius: .1066666rem;
                    opacity: .8;
                }

                .m-banner .banner-info .banner-num {
                    color: #999;
                    font-size: .69333rem;
                    line-height: .693333rem;
                }

        .m-chat {
            margin-top: 20px;
        }

        .chat-teacher {
            margin-top: 10px;
        }

            .chat-teacher .teacher-avatar {
                overflow: hidden;
                width: 1.92rem;
                height: 1.92rem;
                border-radius: 50%;
            }

                .chat-teacher .teacher-avatar img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

            .chat-teacher .teacher-msg {
                margin-left: .53333rem;
            }

            .chat-teacher .teacher-info {
                font-size: .64rem;
            }

                .chat-teacher .teacher-info .teacher-info-name {
                    color: #333;
                }

                .chat-teacher .teacher-info .teacher-info-time {
                    margin-left: .53333rem;
                    color: #999;
                }

            .chat-teacher .teacher-msg-item {
                margin-top: .533333rem;
                padding: .6933333rem;
                width: -webkit-fit-content;
                width: fit-content;
                font-size: .8rem;
                font-weight: 400;
                color: #333;
                line-height: 1.12rem;
                box-shadow: 0 0.106666rem 0.266666rem 0 hsla(0,0%,91%,.5);
                background: #fff;
                border-radius: .1066666rem .533333rem .533333rem .533333rem;
            }

                .chat-teacher .teacher-msg-item > span {
                    color: #ed4c18;
                }

                .chat-teacher .teacher-msg-item > p > span {
                    color: #ed4c18;
                }

                .chat-teacher .teacher-msg-item.teacher-msg-select {
                    width: 14.933333rem;
                }

                    .chat-teacher .teacher-msg-item.teacher-msg-select > .msg-select-options {
                        overflow: hidden;
                    }

                        .chat-teacher .teacher-msg-item.teacher-msg-select > .msg-select-options .option {
                            margin-top: .533333rem;
                            width: 6.4rem;
                            height: 2.346666rem;
                            line-height: 2.346666rem;
                            text-align: center;
                            font-size: .833333rem;
                            color: #FFf;
                            background: #ed4c18;
                            border-radius: 1.0666666rem;
                            position: relative;
                        }

        .option_check {
            width: 15px;
            position: absolute;
            left: 20px;
            top: 0.7rem;
            width: 0.9rem;
            display: none;
        }

        .option_sel {
            background: #3f458c !important;
            color: white !important;
        }

        .multi_ok {
            border-radius: 5px !important;
            background: #ed4c18 !important;
            color: white !important;
        }

        .chat-user {
            margin-top: .8rem;
        }

            .chat-user .user-msg {
                padding: .69333333rem;
                width: -webkit-fit-content;
                width: fit-content;
                font-size: .85333333rem;
                font-weight: 400;
                color: #fff;
                background: #ed4c18;
                border-radius: .5333333rem .106666rem .5333333rem .5333333rem;
            }

        .chat-teacher .teacher-msg-item.teacher-msg-parse {
            color: #318fec;
        }

            

        .chat-teacher .teacher-msg-item.teacher-msg-phone .msg-input {
            margin-top: .533333rem;
        }

            .chat-teacher .teacher-msg-item.teacher-msg-phone .msg-input input {
                display: inline-block;
                width: 9.44rem;
                padding-left: .586666rem;
                color: #333;
                font-size: .8rem;
                border: 1px solid #c6c6c6;
                border-radius: .2133333rem;
            }

            .chat-teacher .teacher-msg-item.teacher-msg-phone .msg-input .submitBtn {
                margin-left: .426666rem;
                display: inline-block;
                width: 4.48rem;
                height: 2.346666rem;
                line-height: 2.346666rem;
                text-align: center;
                background: #f4d59d;
                border-radius: .2133333rem;
                color: #86601e;
                font-size: .8333333rem;
                font-weight: 400;
            }

.progress {
            padding: 4px;
            /*background: rgba(0, 0, 0, 0.25);*/
            border-radius: 6px;
            -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
        }

        .progress-bar {
            position: relative;
            height: 16px;
            border-radius: 4px;
            -webkit-transition: 0.4s linear;
            -moz-transition: 0.4s linear;
            -o-transition: 0.4s linear;
            transition: 0.4s linear;
            -webkit-transition-property: width, background-color;
            -moz-transition-property: width, background-color;
            -o-transition-property: width, background-color;
            transition-property: width, background-color;
            -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
        }

            .progress-bar:before, .progress-bar:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
            }

            

            .progress-bar:after {
                z-index: 2;
                bottom: 45%;
                border-radius: 4px;
                background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
            }


.mask, .maskpay {
            width: 100%;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            display: none;
            height: 100%;
        }

        .mask {
            filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000', endColorstr='#7F000000');
            background: rgba(0,0,0,0.5);
        }

        .maskpay {
            width: 100%;
            height: auto;
            top: 50%;
            max-width: 640px;
            left: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
        }

.btn_scale {
            transform: scale(0.99,0.97);
        }

.btn_quickIn_mp {
            display: block;
            margin: .3rem auto 0;
            height: .9rem;
            font-size: .34rem;
            color: #fff;
            background-color: #f60;
            border-radius: .2rem;
            border: none;
            outline: none;
        }

            .btn_quickIn_mp i {
                display: inline-block;
                margin-right: .3rem;
                font-weight: bold;
                animation: arrow .3s linear infinite alternate;
            }

        @keyframes arrow {
            0% {
                transform: translate(0,0);
            }

            100% {
                transform: translate(.2rem,0);
            }
        }

        .query-pop {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.5);
            z-index: 100001;
        }

        .query-pop-tip {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            box-sizing: border-box;
            padding: 1.3rem 0 0;
            width: 18rem;
            background-color: #fff;
            border-radius: .5rem;
        }

            .query-pop-tip h3 {
                margin-bottom: .8rem;
                margin-top: 0;
                font-weight: bold;
                font-size: .9rem;
                text-align: center;
            }

        .query-pop-tiptxt {
            margin-bottom: 2rem;
            padding: .1rem 0.8rem;
            line-height: 1.8;
            text-align: center;
        }

        .query-pop-tip button {
            display: block;
            width: 100%;
            height: 2.6rem;
            color: #111;
            border: none;
            background: #fff;
            border-radius: 0 0 .5rem .5rem;
            border-top: 1px solid #ddd;
            font-size: 0.9rem;
        }

        .query-pop-tiptxt strong {
            margin: 0.1rem;
            color: #07C160;
        }

        strong {
            font-weight: 700;
        }