@charset "utf-8";
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html {
            max-width: 640px;
            margin: 0 auto;
            font: 14px;
            color: #333;
        }

        img {
            display: block;
        }


        img {display:block;width:100%}
        body {background-color:#f0f0f0;color:#444}
        a {text-decoration:none;out-line: none;color: #333;}
        ul,li{ padding:0;margin:0;list-style:none}

        .nav {
            width: 100%;
            height: 46px;
            background: #383838;
            font-size: 17px;
            color: #fff;
            line-height: 46px;
            text-align: center;
            position: relative;
        }
        .nav span {
            font-size: 12px;
            width: 18%;
            height: 24px;
            border: 1px solid #fff;
            border-radius: 5px;
            position: absolute;
            top: calc(50% - 12px);
            right: 10px;
            display: block;
            text-align: center;
            line-height: 22px;
        }

        .shadow {margin-bottom:12px;border-radius:6px}

        .container {padding:12px}
        .info_frame {background-color: white;border-radius: 8.5px;padding: 0 17px;}
        .input_area {height:45px;line-height:45px;font-size:15px}
        .input_line {height: 1px;width: 90%;margin-left: 8px;}
        .left {float:left}
        .info_frame .title{color:#444;padding-right:20px}
        .info_frame .input{color:#444;font-size:15px;line-height:45px;background:none;width:100%;border:none;outline: none;cursor: auto;}
        .sepbar {height:5px}
        .mt20 {margin-top:20px}

        .sex i {display: block;float: left;width: 20px;height: 20px;border: 1px solid #b9b9b9;
            background-color: #fff;border-radius: 25%;border-color: #b9b9b9;
            -o-border-radius: 50%;-ms-border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;}
        .sex span {display: block;float: left;padding-top: 0px;width: 70px;}
        .sex span.cur i {background-color: #b9b9b9;border-color: #b9b9b9;
            background: url("/cdn/website/img/name/index200505/duigou.png"/*tpa=http://cdn.names.org.cn/website/img/name/index200505/duigou.png*/) center center no-repeat #ff5263;
            background-size: 20px auto;}
        .sex font {display: block;height: 20px;line-height: 20px;overflow: hidden;padding-left: 10px;color: #444;}

        #btn_qiming {height:45px;line-height:45px;border-radius:10px;letter-spacing:2px;color:white;font-size:20px;text-align:center;box-shadow:0 4px 4px #dc8a8a;background: #ff5263;
            background-size: 100% 100%; margin-top:30px;margin-bottom:10px;width: 66%;margin-left: 18%;}
        #btn_qiming2 {height:48px;line-height:48px;border-radius:24px;letter-spacing:2px;color:white;font-size:20px;text-align:center;box-shadow:0 4px 4px #dc8a8a;background-color:rgb(160,34,36);margin-top:30px;margin-bottom:10px;}

        .public_footer_servers {
            background-color: #f0f0f0 !important;
            color: #444;
        }
        /* CSS Document */
        body,ul,li{ padding:0px; margin:0px; font-family:"微软雅黑"; font-size:14px; color:#333; list-style-type:none; }
        a{ text-decoration:none; color:#333;}
        select,option{
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            border: none;
            outline: none;
            /*很关键：将默认的select选择框样式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            /*将背景改为红色*/
            background:#fff;
            /*加padding防止文字覆盖*/
            padding-right: .14rem;
        }
        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        select::-ms-expand {display: none;}
        input,select{border:0;outline:none;/*去除蓝色边框*/}

        .tpm{ width: auto; height:auto; overflow:hidden;}
        .tpm img { display:block; overflow:hidden; width:100%;}

        .dind_gd { height:auto; overflow:hidden; background-size:100% auto;}

        .footer{ background: url("/Public/Home/img/footer_bj.jpg"/*tpa=http://vip.100sm.cn//Public/Home/img/footer_bj.jpg*/); background-size:100% auto; height:auto; overflow:hidden; padding:10px 0px; color:#333;}
        .footer p{ display:block; width:90%; margin:auto;line-height:26px; color:#000;}
        .myscroll { width: 90%; margin:auto; height: 300px; margin: 0 auto; line-height: 26px; overflow: hidden;}
        .myscroll li { height:33px; }
        .myscroll a { color: #000; text-decoration: none;}
        .myscroll a:hover { color: #ED5565; text-decoration: underline;}
        .myscroll li span{ padding-left:20px; height: 26px; }
    

    
        .index_x1 {
            border: 1px solid #979797;
            background: #FFFFFF;
            display: none;
        }

        .index_x1 h4 {
            margin: 0;
            padding: 0;
        }

        .index_x1 h4 img {
            width: 100%;
        }

        .index_x1 .khpj {
            border-top: 1px solid #CCCCCC;
            border-bottom: 1px solid #CCCCCC;
        }

        .index_x1 .khpj span {
            display: block;
            float: left;
            font-size: 16px;
            color: #979797;
            text-align: center;
            width: 33.33%;
        }

        .index_x1 .khpj span a {
            display: block;
            color: #979797;
            padding: 16px 0;
            border: 1px solid #CCC;
        }

        .index_x1 ul {
            margin: 0 10px;
            padding: 10px 0;
            line-height: 24px;
            font-size: 24px;
            color: #282828;
        }

        .index_x1 ul li span {
            color: #7d7d7d;
            margin-right: 10px;
        }

        .index_x1 ul li em {
            font-style: normal;
            color: #7d7d7d;
        }

        .index_x1 .pinglun {
            border-top: 1px solid #CCCCCC;
            overflow: hidden;
        }

        .index_x1 .pinglun .p_l {
            float: left;
            width: 100%;
            margin: 39px 0 30px -2px;
        }

        .index_x1 .pinglun .p_l label {
            /* width: 100%; */
            float: left;
            font-size: 16px;
            /* line-height: 2rem; */
            text-align: center;
            /* margin-top: 0.5rem; */
        }

        .index_x1 .pinglun .p_l div textarea {
            width: 50%;
            /* height: 400px; */
            /* margin: 0; */
            /* padding: 0; */
            /* border-radius: 0; */
            /* outline: none; */
            border: 1px solid #CCC;
            -webkit-appearance: none;
        }

        .daytime {
            color: gray;
            font-weight: bold;

        }

        .index_x1 .pinglun .p_l div input {
            width: 50%;
            height: 34px;
            outline: none;
            margin: 0;
            padding: 0;
            border-radius: 0;
            border: 1px solid #CCC;
            -webkit-appearance: none;
        }

        .index_x1 .pinglun .p_r {
            float: left;
            /* margin-top: 0.5rem; */
            margin-left: 34%;
            margin-bottom: 26px;
        }

        .index_x1 .pinglun .p_r a {
            display: block;
            width: 100%;
            text-align: center;
            border-radius: 5px;
            /* margin: 2rem 1rem 0 0; */
            background: #a3a3a3;
            border: none;
            font-size: 26px;
            /* line-height: 2.23rem; */
            text-decoration: none;
            color: #FFFFFF;
            padding: 16px;
        }

        .txt {
            padding: .2rem 0;
            text-align: center;
            font-size: 13px;
            color: #8d8d8d;
            font-family: PingFangSC-Regular;
        }
        .txt .t2 a {
            color: #cc5454;
        }

        .desc {
            text-align: center;
        }
        .desc .t1 {
            margin-bottom: 10px;
        }
        .desc .t1 a {
            font-size: 13px;
            color: rgba(182,106,115,1);
        }
    


    
        * {
            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: 65px 15px 120px;
        }

        .block-header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color:rgb(244, 78, 59);
            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: 10px;
            background: #fff;
            border-radius: 8px;
        }

        .m-banner .banner-avatar {
            overflow: hidden;
            width: 96px;
            height: 96px;
            border-radius: 8px;
        }

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

        .m-banner .banner-info {
            margin-left: 11px;
        }

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

        .m-banner .banner-info .banner-info-teacher > span {
            padding: .133333rem .4rem;
            color: #86601e;
            background: #f4d59d;
            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 #c9aa68;
            color: #c9aa68;
            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: 36px;
            height: 36px;
            border-radius: 50%;
        }

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

        .chat-teacher .teacher-msg {
            margin-left: 10px;
        }

        .chat-teacher .teacher-info {
            font-size: 12px;
        }

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

        .chat-teacher .teacher-info .teacher-info-time {
            margin-left: 10px;
            color: #999;
        }

        .chat-teacher .teacher-msg-item {
            margin-top: 10px;
            padding: 13px;
            width: -webkit-fit-content;
            width: fit-content;
            font-size: 15px;
            font-weight: 400;
            color: #333;
            line-height: 21px;
            box-shadow: 0 2px 5px 0 hsla(0,0%,91%,.5);
            background: #fff;
            border-radius: 2px 10px 10px 10px;
        }

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

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

        .chat-teacher .teacher-msg-item.teacher-msg-select {
            width: 90%;
        }

        .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: 10px;
            width: 47%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 15px;
            color: #86601e;
            background: #f4d59d;
            border-radius: 18px;
        }

        .chat-user {
            margin-top: 15px;
        }

        .chat-user .user-msg {
            padding: 13px;
            width: -webkit-fit-content;
            width: fit-content;
            font-size: 16px;
            font-weight: 400;
            color: #86601e;
            background: #f4d59d;
            border-radius: 10px 2px 10px 10px;
        }

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

        .chat-teacher .teacher-msg-item.teacher-msg-parse span {
            display: inline-block;
            width: .9066666rem;
            height: .9066666rem;
            background: url("/cdn/website/img/law/index/icon-parse.png"/*tpa=http://cdn.names.org.cn/website/img/law/index/icon-parse.png*/) no-repeat;
            background-size: 100% 100%;
            -webkit-animation: d linear 3s infinite;
            animation: d linear 3s infinite;
        }

        .chat-teacher .teacher-msg-item.teacher-msg-phone .msg-input {
            margin-top: 10px;
        }

        .chat-teacher .teacher-msg-item.teacher-msg-phone .msg-input input {
            display: inline-block;
            width: 150px;
            padding-left: 11px;
            color: #333;
            font-size: 15px;
            border: 1px solid #c6c6c6;
            border-radius: 4px;
        }

        .chat-teacher .teacher-msg-item.teacher-msg-phone .msg-input .submitBtn {
            margin-left: 8px;
            display: inline-block;
            width: 84px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            background: #f4d59d;
            border-radius: 4px;
            color: #86601e;
            font-size: 16px;
            font-weight: 400;
        }
        #mbChatHeaderTitleTxt {
            color: #fff;
            float: left;
            width: 70%;
            font-size:15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 15px;
        }
        .mp_copy_scale {
            transform: scale(0.97,0.97);
        }
        .btn_scale {
            transform: scale(0.99,0.97);
        }
    

    
        /*旋转罗盘背景*/
        #luopan_box {
            height: 170px;
            width: 170px;
            margin: 0 auto;
            position: fixed;
            top: 40%;
            left: 50%;
            z-index: 9999999;
            margin-left: -85px;
            display: none;
            vertical-align: middle;
        }

        #luopan_box img.img-1 {
            -webkit-animation: rotate 4s linear infinite;
            animation: rotate 4s linear infinite;
        }

        @media screen and(min-width:300px) {
            #luopan_box img.img-1 {
                width: 170px;
                height: 170px;
            }
        }

        #luopan_box img.img-1 {
            width: 170px;
            height: 170px;
        }

        #luopan_box .img-2 {
            width: 20px;
            height: 140px;
            position: fixed;
            top: 42%;
            left: 50%;
            margin: 0 auto;
            margin-left: -10px;
            -webkit-animation: rotate2 4s linear infinite;
            animation: rotate2 4s linear infinite;
        }

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

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

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

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

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

            100% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }

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

            100% {
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg);
            }
        }

        .massage_btn {
            display: block;
        }

        .box-p {
            text-align: center;
            font-size: 15px;
            color: rgb(255,252,247);
            margin-top: 10px;
            font-weight: 500;
        }

        .luopan_bg_color {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 9999998;
            background: #000;
            opacity: 0.7;
            transition: opacity 0.5s;
            display: none;
        }
        /*旋转罗盘背景结束*/