/* CSS Document */
/*清零-公用样式表*/
body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input,textarea,button,select { margin: 0; padding: 0; border: 0; font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self; font-size:12px; }
body { font-size: 12px; color:#333; -webkit-tap-highlight-color:rgba(0,0,0,0);}
ul, ol { list-style-type: none;}
select, input, img, textarea { vertical-align: middle; }
a{ text-decoration:none; background:none;-webkit-user-select: none; -moz-user-select: none;}
a:active {outline: none;}
@font-face {
      font-family: 'fontello';
      src: url('../font/fontello.eot?20602028');
      src: url('../font/fontello.eot?20602028#iefix') format('embedded-opentype'),
           url('../font/fontello.woff?20602028') format('woff'),
           url('../font/fontello.ttf?20602028') format('truetype'),
           url('../font/fontello.svg?20602028#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
.textfont{font-family: "fontello";font-style: normal;font-weight: normal;speak: none; font-size:24px !important; color:#FFF;}
.fontred{ color:#ff3c7e;}
.fontleft{ text-indent:1em; display:inline-block;color:#ef4881}
.fontmax{ font-size:13px;}
.sleft{ text-align:right; width:70px; display:inline-block;}
.mt50{margin-top:50px;}
/*主体*/

/*1*/
.box{ min-width:320px; width:100%; margin:0 auto; height:auto; overflow:hidden; background-color:#fff; padding-bottom:60px;}
.box>.box-cover{ position:fixed; overflow:auto; z-index:1; background:rgba(0,0,0,0.8); left:0; right:0; top:0; bottom:0; display:none; opacity:0;}
.box-title{ border-bottom:1px #FF6CA3 solid; padding:50px 0 5px 15px; color:#ef4881; font-weight:bold;}

.box-ulicycle{padding:5%;  overflow:hidden; border-bottom:1px #FF6CA3 solid;}
.box-ulicycle  ul.u1{ margin:0 auto; clear: both;}
.box-ulicycle  ul.u1 span.letter{display:block;float:left;background-color:#f7fafa;color:#ef4881;width:30px;border:1px #e2e2e2 solid;height:20px;line-height:20px;text-align:center;font-size:16px;font-weight:bold;margin:8px 0;}
.box-ulicycle  ul.u1 li{ width:80%; height:auto; line-height:40px; float:left; margin-left:20px; text-align:center; color:#ef4881;}
.box-ulicycle  ul.u1 li a{ color:#ef4881;font-weight:bold;margin-right:10px;float:left}
.box-ulicycle  ul.u1 li a.active{ background-color:#FF6CA3;  border-radius:20px;color:#fff;}

.box-tel{ margin:20px auto 0; text-align:center;}
.box-tel a{ color:#47B1DC;}
.box-tel button{ margin-left:10px; border:1px #FF6CA3 solid; border-radius:4px; width:auto; background:#FFF; color:#ef4881; font-weight:bold; height:22px; line-height:18px; font-size:12px; padding:0 6px;}

/*2*/
.box-maximg{ padding:5px 0 0;}
.box-maximg img{display:block; margin:auto;vertical-align:middle;}
.box-maximg fieldset{ width:88%; height:175px; margin:0 auto; border:1px #fff solid; border-radius:4px;}
.box-maximg fieldset legend{ background-color:#fff ; color:#ef4881; margin-left:10px; padding:2px 5px; border-radius:4px; font-weight:bold;}
.box-maximg fieldset img{ display:block; margin:5px auto 0; width:90%; height:80%;}

.box-news{ width:92%; border:1px #ADADAD solid; overflow:hidden; margin:10px auto 0; border-radius:4px;}
.box-news p.ptitle{ height:24px; line-height:24px; background-color:#ADADAD; text-align:center; color:#fff; font-weight:bold; }
ul.ulnews{ padding:10px;}
ul.ulnews li{ list-style:inside; color:#ADADAD; line-height:22px;}
.htitle{ text-align:center; font-size:12px; color:#ADADAD; line-height:30px;}
p.pnews{ padding:0 10px 10px; line-height:20px; color:#ADADAD;}
.box-news a{ color:#ADADAD;}
.box-newstoo{ width:92%; margin:10px auto 0; clear:both;}
.box-newstoo p.ptitle{ color:#666; font-size:14px;}
.box-newstoo a{ color:#666;}
.box-newstoo ul{ padding-top:0;}
.box-newstoo p.pnews{ color:#666; line-height:24px;}

/*3*/
.box-toptitle{ height:42px; background-color:#FF6CA3; position:fixed;width:100%; z-index:10;left: 0;right: 0;top: 0;}
.box-toptitle>p{ text-align:center; line-height:42px; color:#fff; font-size:16px;}
.box-toptitle span.right-absolute{ width:32px; height:32px; text-algin:center; line-height:32px; position:absolute; right:10px; top:5px;}

.box-teacher{ width:92%; margin:0 auto 0;}
.box-teacher>ul li{ border-bottom:1px #FF6CA3 solid; width:95%; margin:0 auto 5px;}
.box-teacher>ul li>p>b{ margin-left:-9px; color:#ef4881;}
.box-teacher>ul li>.teacher{ height:80px; overflow:hidden; margin-bottom:10px; position:relative; width:98%;}
.box-teacher>ul li>.teacher>a>img{ width:78px; height:78px; position:absolute; left:0; overflow:hidden; border-radius:100px;}
.box-teacher>ul li>.teacher>a{ width:100%; height:100%; display:block;}
.box-teacher>ul li>.teacher>a>p{ float:left; margin-left:93px; line-height:20px; clear:both; color:#444;}
.box-teacher>ul li>.teacher>a>.texthidden{ color:#999; height:40px; font-weight:100; float:left; margin-left:83px; line-height:18px; font-size:10px;}
.box-teacher>ul li>.teacher>a>p.teacher-rz{ position:absolute; right:0px; color:#ef4881;font-size:12px;}
.box-teacher>ul li>.teacher>a>p.pholder{margin-top:5px !important;font-size:12px;}
.box-teacher>ul li>.teacher>a>p.pname{font-size:12px;}
.box-teacher>ul li>.teacher>a>p.inner{margin-top:10px !important;}
.box-teacher .speciality { margin: 0 auto 5px; width: 95%; clear: both;margin-bottom: 10px;height: 40px;}
.box-teacher .speciality div {width: 50%;float: left;}
/*4*/
.active-box{ position:absolute; left:0; right:0; height:auto; top:22px; z-index:10; display:none; background:#FFF; border:1px #fff solid;}
.active-box>a{ clear:both; height:30px; line-height:30px;  color:#FF6CA3; display:block; text-align:center; border:1px #fff solid; border-left:none; border-right:none;}
.active-box>a.active{ background-color:#ef4881; color:#FFF; border-color:#eaeaea;}

/*5*/
.teacher-1{}
.teacher-1>p.pname{ margin-top:15px !important;font-size:14px;}
.teacher-1>p.pholder{margin-top:15px !important;color:#87cefa;font-size:14px;}
.teacher-1>p.teacher-rz{ top:15px;}
.teacherinfo{ width:100%; margin:0 auto; padding:15px; border-top:1px #ccc solid;}
.teacher-news{ width:92%; margin:0 auto;}
.teacher-news li{ line-height:20px; border-bottom:1px #eee solid; color:#999; text-align:center;}
.teacher-news li a{ color:#999;}
.invite-teacher{ position:fixed; overflow:auto; z-index:10; background:rgba(0,0,0,0.9); left:0; right:0; top:0; bottom:0; display:none; opacity:0;}
.invite-teacher>div{ min-height:30px; margin:20px auto 0; width:90%; overflow:hidden;}
.invite-teacher>div>span{ float:left; text-align:left; width:38%; display:block; line-height:24px; color:#FFF; text-shadow:0 0 8px #333;}
.invite-teacher>div>input{ float:left; display:block; width:56%; height:24px; box-shadow:0 0 8px #333; padding-left:5px; line-height:24px; border:0; background:#FFF;}
.invite-teacher>div>p{ clear:both; overflow:hidden;}
.invite-teacher>div>p>select{ width:46%; height:22px; margin-right:2%; box-shadow:0 0 8px #333;}
.invite-teacher>div>p>textarea{ width:88%; height:100px; padding:10px; box-shadow:0 0 8px #333;}
.invite-teacher>a{ display:block; margin:20px auto 10px; width:70%; height:30px; line-height:30px; background-color:#ef4881; color:#fff; clear:both; text-align:center; font-size:14px; border-radius:2px; letter-spacing:4px;}
.invite-teacher>a.cose{ background:rgba(0,0,0,0.7); width:90px; height:28px; line-height:28px; letter-spacing:0;font-size:16px;}

.invite-teacher>span{ min-height:30px; margin:20px auto 0; width:90%; overflow:hidden;}
.invite-teacher>span>p{ color:#D7D7D7; font-size:12px;width:90%;text-indent:2em;line-height:16px;margin:5px auto 0 auto;}
.invite-teacher p.title1{font-size:16px;text-align:center;text-indent:0;}
.invite-teacher p.title2{font-size:14px;text-indent:0;}

.open-ok{ position:fixed; z-index:1; background:rgba(0,0,0,0.8); left:0; right:0; top:0; bottom:0; opacity:0; display:none;}
.open-ok>div{ width:160px; height:60px; background:#eeeeee; border-radius:6px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -100px; padding:20px; text-align:center; }
.open-ok>div>p{line-height:20px; margin-bottom:10px; color:#666;}
.open-ok>div>a{ color:#ef4881; font-size:14px;}
.remote-teacher{ position:fixed; overflow:auto; z-index:20; background:rgba(0,0,0,0.8); left:0; right:0; top:0; bottom:0; display:none; opacity:0;}
.remote-teacher p{ color:#FFF; font-size:16px;width:90%;text-indent:2em;line-height:20px;margin:5px auto 0 auto;}
.remote-teacher p.title1{font-size:20px;text-align:center;text-indent:0;}
.remote-teacher p.title2{font-size:18px;text-indent:0;}
/*6*/
.box-topselect-1{ width:60%; border:1px #fff solid; border-radius:30px;  height:24px; line-height:24px; margin:0 auto; display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */}
.box-topselect-1>div{  text-align:center; color:#FFF; border-right:1px #fff solid; box-sizing:border-box; -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 33.33%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1; position:relative;display:block;float:left;}
.box-topselect-1>div:nth-child(1){ border-radius:30px 0 0 30px;}
.box-topselect-1>div:nth-child(3){ border:none; border-radius:0 30px 30px 0;}
.box-topselect-1>div.active{ background-color:#FFF; color:#ef4881;}

.box-title>a.edit{ width:26px; color:#ef4881; font-size:24px !important; height:26px; display:block; float:right; margin:-8px 13px 0;}

.box-feedback{ width:92%; margin:0 auto;}
.box-feedback>ul>li{ }
.feedback{ overflow:hidden;min-height:70px; height:auto!important; padding-bottom:10px; margin-bottom:10px; border-bottom:1px #ccc solid; position:relative;}
.feedback>img{ width:36px; height:36px; position:absolute; left:0;}
.feedback>p{ float:left; margin-left:43px; clear:both;}
.feedback>.texthidden{ color:#666;width:82%; min-height:40px; height:auto!important; font-weight:100; float:left; margin-left:43px; line-height:18px; font-size:10px;}
.feedback>p.ptime{ font-size:10px; color:#999;}
.feedback>a.release{ width:16px; height:16px; position:absolute; bottom:8px; right:10px; color:#ef4881; font-size:20px !important; }
.feedback-1{min-height:70px; height:auto!important; margin:10px 0;}
.feedback-1>.texthidden{ height:95px; font-size:10px;}
.feedback-1>.pname>span{ color:#ef4881; margin-left:20px;}

.fz-delete{ position:fixed; left:0; right:0; top:0; bottom:0; z-index:11; background:rgba(0,0,0,0.7); opacity:0; display:none;}
.fz-deletenr{ position:absolute; width:90%; height:80px; left:50%; top:50%; margin:-40px 0 0 -45%; border-radius:6px; overflow:hidden;}

.fz-deletenr>a{ width:100%; margin:0 auto; display:block; height:40px; line-height:40px; padding-left:10px; background-color:#fbfbfb; border-bottom:1px #efefef solid; color:#333;}

.teacher-info{ border-top:1px #ccc solid; padding:10px 15px;}
.teacher-info>img{ float:left; margin:0 10px 10px 0;}
.box-d{ display:none;}

/*7*/
.box-pay{}
.box-pay .p1{ text-align:center; font-size:16px; color:#ff3c7e; line-height:40px;}
.box-pay .p2{ margin:0 auto; width:80%; color:#333; border-bottom:1px #ccc solid; line-height:20px;}
.box-pay>div{ width:80%; margin:0 auto; padding-bottom:10px;}
.box-pay>div>p{ line-height:24px; font-size:12px;}
.box-pay>div>p>span{ margin-left:10px;}
.box-pay .p3{ color:#ff3c7e; height:30px; line-height:30px; border-top:1px #ccc solid; background-color:#f0f0f0; padding-left:10px;}
.box-pay .d1{ width:100%; height:90px; border:1px #ccc solid; box-sizing:border-box;}
.box-pay .d1>img{display:block;margin:auto;vertical-align: middle;}
.box-pay>a{ display:block; margin:20px auto 0; width:70%; height:40px; line-height:40px; background-color:#ef4881; color:#fff; clear:both; text-align:center; font-size:14px; border-radius:2px; letter-spacing:4px;}

/*8*/
.wtzdgm .pay-time,.box-pay .pay-time{ width:90%; height:22px; overflow:hidden; padding:2px; overflow:hidden; margin:0 auto 15px; background-color:#FF6CA3; border-radius:30px;}
.pay-time>p{ width:20%; height:22px; line-height:22px; float:left; text-align:center;}
.pay-time>p.pt{ width:60%;  background:#FFF; text-align:center; color:#ef4881; font-size:14px;}
.pay-time .prev,.pay-time .next{ line-height:22px !important;}

.box-pay>div>div.d2{ height:auto; border-bottom:1px #ccc solid; padding:4px 20px; margin-top:-1px;]}
.box-pay>div>div.d2>p.p4{ text-align:right; color:#ef4881;}
div.d3{ width:90%; padding:10px 0; margin:0 auto;}
div.d3 p{display: inline-block;width: 100%; min-height:36px; height:auto; line-height:36px;}
div.d3 p>span{ float:left;}
div.d3 input{ border-bottom:1px #FF6CA3 solid; height:26px; margin-left:10px; width:70%; border-radius:0; float:left;}
div.d3 textarea{ width:88%; height:80px; padding:10px; border:1px #FF6CA3 solid; border-radius:0;}
.box-pay>div.teacher-bottom{ padding:0; width:100%;}
.box-pay>div.teacher-bottom>a.a1{ color:#666; text-decoration:none;}
.box-pay>div.teacher-bottom>a.a1>span{ color:#ef4881;}

/*9*/
.phone-zd .teacher-bottom{ width:100%; height:auto;}
.phone-zd .teacher-bottom p{ font-size:10px;}
.phone-zd .teacher-bottom>a.a1{ text-decoration:none;}
.phone-zd .teacher-bottom>a.a1>b{ font-weight:100; text-decoration:underline; margin-right:20px; font-size:10px;}
.phone-zd .teacher-bottom>a.a1>span{ color:#ef4881;}

.phone-zd>div.d4{ width:100%; border-top:1px #999 solid; padding:10px; background-color:#f3f3f3; border-bottom:1px #999 solid;}
.phone-zd>div.d4>p.p1{ text-indent:2em; color:#666; padding-bottom:10px; line-height:18px;}
.phone-zd>div.d4>div.d5{ line-height:18px; background-color:#ffffff; padding:10px; overflow:hidden;}

/*10*/
.box-topselect-2{ width:70%;}
.box-topselect-2 .active-box-1{ left:10%; right:-1px;}
.box-topselect-2 .active-box-2{ left:-1px; right:-1px;}
.box-topselect-2 .active-box-3{ right:10%; left:-1px;}
.box-topselect-2 .textfont{margin-left:5px; font-size:14px !important;}
.box-topselect-2>div.active{ background-color:#FFF; color:#ef4881;}
.box-topselect-2>div.active .textfont{ color:#FF6CA3;}


.box-topselect-3{width:70%;}
.box-topselect-3>div:nth-child(2){ border:0; border-radius:0 30px 30px 0;}
.box-topselect-3 .active-box-1{ left:10%; right:-1px;}
.box-topselect-3 .active-box-2{ right:10%; left:-1px;}
.box-topselect-3 .textfont{margin-left:5px; font-size:14px !important;}
.box-topselect-3>div.active{ background-color:#FFF; color:#ef4881;}
.box-topselect-3>div.active .textfont{ color:#FF6CA3;}

/*11*/
.wtzdgm>div.d6{ padding:16px 0; color:#ef4881; width:88%; margin:0 auto;}
.wtzdgm>div.d6>a{ color:#666; text-decoration:underline; float:right;}
.wtzdgm>div.d7{ width:88%; margin:0 auto 10px; overflow:hidden;}
.wtzdgm>div.d7>ul>li{ width:25%; text-align:center; height:22px; margin:5px 0; line-height:22px; float:left; color:#ef4881;}
.wtzdgm>div.d7>ul>li.active{ background-color:#FF6CA3; color:#FFF; border-radius:30px;}
.wtzdgm>div.d7>ul>li.hs{ color:#999;}
.wtzdgm>div.d8{ background-color:#FF6CA3; height:24px; width:100%; clear:both;}
.wtzdgm>div.d8>p{ line-height:24px; padding-left:20px; color:#FFF;}
.wtzdgm>div.d9>p>span{ color:#ef4881;}
.wtzdgm>div.d9>a{ display:block; margin:20px auto 0; width:70%; height:40px; line-height:40px; background-color:#ef4881; color:#fff; clear:both; text-align:center; font-size:14px; border-radius:2px; letter-spacing:4px;}

/*12*/
.teacher-bottom1>a.a1{ text-decoration:none;}
.teacher-bottom1>a.a1>span{ color:#ef4881; text-decoration:underline;}
.teacher-bottom1>a.a3{ color:#999; text-decoration:underline;}

/*底*/
.box-bottom{ position:fixed; bottom:0; left:0; right:0; height:50px; border:1px #ccc solid; background-color:#f3f3f3;}
.box-bottom .box-b-left{ float:left; padding-left:15px; height:50px;}
.box-bottom .box-b-left .a1{ line-height:50px; font-size:14px; text-decoration:none; color:#777;}
.box-bottom .box-b-right{ float:right; padding-right:15px; height:50px;}
.box-bottom .box-b-right .a2{ padding:10px 18px; color:#FFF; background:#ef4881; border-radius:6px; margin:6px; font-size:14px; float:left;}





.order-top{ height:120px;  background:url(../images/beijing.png) 0 0 no-repeat; background-size:100% 100%; border-bottom:2px #FF6CA3 solid; position:relative;}
.order-top>div.dnr{ position:absolute; height:54px; left:10%; right:0; top:34px; background:rgba(0,0,0,0.3)}
.order-top>div.dnr>a{ width:78px; height:78px; padding:4px; position:absolute; left:0; background:rgba(0,0,0,0.3); overflow:hidden; border-radius:100px; left:-20px; top:-18px;}
.order-top>div.dnr>a>img{width:78px; height:78px; background:#fff; display:block; border-radius:100px;}
.order-top>div.dnr>p{ float:left; margin-left:80px; color:#FFF; margin-top:4px;}
.order-top>div.dnr>p>b{ float:left; width:100%; font-size:18px; font-weight:100;}
.order-top>div.dnr>p>span{ clear:both;}

/*13*/
.order-center{ width:92%; margin:0 auto;}
.order-center>ul>li{ position:relative; border-left:1px #FF6CA3 solid; margin:0 auto; width:96%; padding:10px 0;}
.order-center div.order-time{ width:44px; height:37px; background:url(../images/04.png) 0 0 no-repeat; background-size:100% 100%; line-height:37px; color:#FFF; text-align:center; font-size:10px; margin:0 0 0 -18px;}
.order-center>ul>li>ul{ border:1px #FF6CA3 solid; border-left:none; background:url(../images/hs.png) 0 0 repeat; overflow:hidden; position:relative; z-index:2; border-radius:0 10px 10px 0;}
.order-center>ul>li>ul>li{ padding:0 10px; line-height:22px; height:22px;}
.order-center div.order-time1{ text-align:center; line-height:22px; margin-top:-8px;}
.order-center>ul>li>ul>li span{ float:left;}
.order-center>ul>li>ul>li span.s2{ width:90px; text-align:right;}
.order-center>ul>li>ul>li span.s1{ color:#ef4881; font-weight:bold;}
.order-center>ul>li>ul>li b.b1{ margin-left:15px; font-weight:100; text-decoration:underline;}
.order-center>ul>li>ul>li>a{ color:#ef4881; text-decoration:underline; float:left;}
.order-center>ul>li>ul>li .hs{ text-decoration:underline; color:#333;}

.arrow {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    margin-left: 5px;
    opacity: 0.66;
}

.arrow.asc {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #fff;
}

.arrow.dsc {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
}

.v-modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}

.v-modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.v-modal-container {
    width: 80%;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.v-modal-header h3 {
    margin-top: 0;
    color: #42b983;
}

.v-modal-body {
    margin: 20px 0;
}

.v-modal-default-button {
    padding:10px 18px;
    color:#FFF;
    background:#ef4881;
    border-radius:6px; margin:6px;
    font-size:14px;
}

/*
 * the following styles are auto-applied to elements with
 * v-transition="modal" when their visiblity is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter, .modal-leave {
    opacity: 0;
}

.modal-enter .modal-container,
.modal-leave .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

ul.area li {
    line-height: 40px;
    float: left;
    margin-left: 20px;
    text-align: center;
    color: #ef4881;
}
li.letter{background-color:#f7fafa;color:#ef4881;width:30px;border:1px #e2e2e2 solid;height:40px;line-height:20px;
    text-align:center;font-size:16px;font-weight:bold;clear: left;}