@CHARSET "UTF-8";
/*标签重定义*/
*,:after,:before{outline:none; -webkit-tap-highlight-color: rgba(0,0,0,0);	-webkit-box-sizing:border-box;	box-sizing:border-box;}
html {font-size:62.5%;height:100%;background: #eee;}
body {height: 100%;line-height:1; font-family:"微软雅黑"; background-color:#ffffff;font-size:12px;color:#5d5b5b; min-width: 320px; max-width: 640px;margin: 0px auto;display: block;position: relative;}
var, em, i {font-style:normal;}
h1, h2, h3, h4, h5, h6 {margin:0;font-size:inherit;}
img {vertical-align:inherit;}
ul {list-style:none;padding:0;margin:0;}
p {margin:0;}
input {outline:none; -webkit-appearance: none;}
a {color:#5d5b5b; text-decoration: none; }
dl,dd{margin: 0;}

textarea{outline: none; -webkit-appearance: none;}
.ng-cloak{display:none;}




/*闭合一切浮动*/
.clearfix{*zoom:1;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearline {*zoom:1;height:0px;line-height:0px;font-size:0px;overflow:hidden;clear:both;}
.clearperfect {clear:both;height:0px;overflow:hidden;}

/*盒子模式*/
.webkitBox,[class*="wkBox"],
.qlMTBottom{display:-webkit-box;display:-ms-flexbox;display:flex;}
.boxFlex,[class*="boxFl"]{width:100%; display:block; -webkit-box-flex:1; box-flex:1; -ms-flex:1; flex:1;overflow: hidden;}
 
/*  单行超出省略 */
.elli{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
/*  多行超出省略 */
.multi-elli{display: block;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
 
/******************** 通用组件 **********************/
body.gra_1{background-color: #efeff4;}
body.gra_2{background-color: #F2F2F2;}
body.gra_3{background-color: #ebebeb;}
body.gra_4{background-color: #f0f0f0;}
body.gra_5{background-color: #f5f5f5;}
body.blu_1{background-color: #def4ff;}



/*logobg*/
[class*="qlbgi"],
[class*="qlbga"]:after,
[class*="qlbgb"]:before,
.list_btn_1:after,
.list_btn_2:after,
.btn_qlcheckbox.on:before,
.btn_qlradio.on:before,
.right-arrow::before{ background:url(//cache1.qlchat.com/styles/wtwap/img/live/live_logo.png) no-repeat;background-size:75rem auto;}
[class*="codebydodomon"]{background: #f5f5f5; display: block; width: 100%; padding: 1rem;line-height: 2rem; color: #000;}

[class*="qlbmi"],
[class*="qlbma"]:after,
[class*="qlbmb"]:before,
.geneBox .gene_close,
.qlMsgTips .qlMT_close,.qlMsgTips .qlMT_close2{ background:url(//cache1.qlchat.com/styles/wtwap/img/live/live_logo_60.png?v=aoepdesend) no-repeat;background-size:60rem auto;}




[class*="qlbgb"]:before,
[class*="qlbga"]:after,
[class*="qlbma"]:after,
[class*="qlbmb"]:before{content:'';display:inline-block;vertical-align:top;}



/* icon属性 */
[class*=" icon_"],[class^=icon_]{vertical-align: top; line-height: inherit;}
[class*=" icon_"]:before,[class^=icon_]:before{vertical-align: top;}

.simple-confirm .main > p{
  padding: 5rem 1rem;
  text-align: center;
  color: #383838;
  font-size: 1.6rem
}

.vip-logo
{
  display: inline-block;
  vertical-align: top;
  background-color: #f0a900;
  font-size: .8rem;
  text-align: center;
  padding: 0 0.2rem;
  border-radius: 1px;
  height: 1.2rem;
  line-height: 1.2rem;
  margin: 0.3rem 0.5rem 0 0;
  color: #fff;
  font-family:Roboto;
  -webkit-text-size-adjust:none;
}
.vip-logo::before{
  content: "VIP";
  text-shadow: unset;
}

/***干聊头部***/
[class^="ql_header_"]{ width: 100%; height: 5rem; line-height: 5rem; display: block; position: absolute; top: 0; left: 0; text-align: center; z-index: 5; }
[class^="ql_header_"] .right_item{ float: right;}
[class^="ql_header_"] .left_item{ float: left;}
[class^="ql_header_"] a{ color: #fff; font-size: 1.4rem; padding: 0 1rem 0 0;}
.ql_header_1{ background: #73ace8;}
.ql_header_2{ background: #fff;}
.ql_header_2 a{ color: #333;}
.ql_header_2 a.icon_back::before{ 
    margin: 0.1rem 0.5rem 0 1rem;
    vertical-align: top;
    display: inline-block;
}


.qlbgb_back{ display: inline-block;max-width:17rem;max-height:6rem;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.qlbgb_back:before{content: ""; width: 2rem; height: 2rem; display: inline-block;  background-position: -60rem 0;vertical-align: top;margin: 1.5rem 0.5rem 0 1rem;}



/***qianliao尾部***/
[class^="wt_footer_"]{height:5rem;width:100%; position: absolute; bottom: 0; left: 0; z-index: 5;}
.wt_footer_1{ background: #f5f5f5; border-top: solid 1px #aaaaad; white-space: nowrap;overflow: hidden;}
.wt_footer_2{ white-space: nowrap;overflow: hidden; border-top:1px solid #e6e6e6}
[class^="wt_footer_"] .tlbtn_bottom{
  width:100%;
  font-size: 1.6rem;
  color: #33bb49;
  background-color: #fff;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  border-radius: 0;
}


/*** q_l中间 ***/
[class*="main_box_"]{ width: 100%; position: absolute; overflow: auto; overflow-x: hidden; -webkit-overflow-scrolling : touch;}
.main_box_1{ top: 5rem; bottom: 5.9rem;} /*有头有尾*/
.main_box_2{ top: 5rem; bottom: 0rem;} 	/*有头无尾*/
.main_box_3{ top: 0rem; bottom: 5.9rem;} 	/*无头有尾*/
.main_box_4{ top: 0rem; bottom: 0rem;} 	/*无头无尾*/
.main_box_5{top: 0rem; bottom: 0rem;} /* 有浮层尾 */
.main_box_5:after{content:'';display:block;height:7rem;}
.main_box_6{top: 0rem; bottom: 0rem;} /* 有浮层头 */
.main_box_6:after{content:'';display:block;height:7rem;}
.main_box_7{ top: 0rem; bottom: 5rem;}
.main_box_7:after{content:'';display:block;height:2rem;}
.main_box_bindgong {top: 0; bottom: 0; left: 0; background-color: #f5f5f5;}
.main_box_reword {top: 0; bottom: 0; left: 0; background-color: #f5f5f5;}

.main_box_re{position: relative; }  
[class^="main_box_"]:before{content: "Qian—Liao"; display: block; position: absolute; left: 0; top: -100px; color: #fff; z-index: 888;}

.nav_list.no-mr-top {
  margin-top: 0;
}

/*列表*/
.nav_list{ margin:1rem 0 1rem 0; background:#fff; font-size:1.6rem; }
.nav_list.no-mr {margin: 0; border-bottom:solid 1px #f5f5f5;}
.nav_list li{  padding:1rem 0; border-bottom:solid 1px #f0f0f0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.nav_list li:last-child{border-bottom: none;}
.nav_list li.flexible{ height: auto;  }
.nav_list span.spacer{ height: 4rem; line-height: 4rem; color: #333; font-size: 1.6rem; background-color: #f2f2f2; padding: .5rem 0 0.5rem 1rem; display: block;}
.nav_list.grey-bk {background: #fafafa;}
.nav_list li.li_bl{display: block;}
.nav_list li.li_mrb{border: none;background-color: #fff;margin: 1rem 0;}
.nav_list li span.flex textarea.auto_height{ overflow: hidden; height: auto;}
.nav_list li span.flex textarea.auto_height::-webkit-input-placeholder{color: #b3b3b3;}
.nav_list li span.flex textarea.auto_height:-ms-input-placeholder{color: #b3b3b3;}
.nav_list li span.flex textarea.auto_height::placeholder{color: #b3b3b3;}
.nav_list li span.flex textarea.auto_height::-moz-placeholder{color:#b3b3b3;}
.nav_list .title_1,
.nav_list .title_2,
.nav_list .title_3{ height:3rem; padding: 0 0.5rem 0 0; line-height:3rem; text-align:right; display:inline-block; white-space: nowrap; color: #333333;font-size:1.5rem;}
.nav_list .title_1{width:10rem;} 
.nav_list .title_2{ padding: 0 0.5rem 0 1.5rem;  text-align: left;}
.nav_list .title_3{height: 6rem; line-height: 6rem; padding: 0 0.5rem 0 1rem;text-align: left;}
.nav_list .title_4{height: 3rem; line-height: 3rem; font-size: 1.2rem; color: #cccccc;}

.nav_list span.flex{width:100%; display:block; -webkit-box-flex:1; box-flex:1; -ms-flex:1; flex:1;overflow: hidden;}
.nav_list span.flex input{ display:block;width:100%; height:3.5rem; line-height: 3.5rem; padding: 0 2rem 0 0;border: none; font-size:1.4rem;background:none; position:relative; color:#333;}
.nav_list span.flex input:placeholder {color: #b3b3b3}
.nav_list span.flex input.normal{padding-left: 1rem; text-align: left; }
.nav_list span.flex textarea{ display:block;width:100%; height:6rem; line-height: 2rem; padding: 0 2rem 0 0; margin:0.5rem 0;border: none; font-size:1.6rem;background:none; position:relative; color:#353535;  resize:none; padding: 0 1rem; }
.nav_list span.flex textarea::-webkit-input-placeholder{color: #b3b3b3;}
.nav_list span.flex textarea:-ms-input-placeholder{color: #b3b3b3;}
.nav_list span.flex textarea::placeholder{color: #b3b3b3;}
.nav_list span.flex textarea::-moz-placeholder{color:#b3b3b3;}
.nav_list span.flex textarea#forum_introduce,.nav_list span.flex input#forum_name{font-size:13px;}
.nav_list .date_time{ text-align: right;}
.nav_list .sp_bl{ display: block; padding: 1rem;}
.nav_list .hot-point{ 
    background-color: #f33;
    height: 1rem;
    width: 1rem;
    display: inline-block;
    border-radius: 1rem;
    margin-right: 0.5rem;
    vertical-align: middle; }

.nav_list .list_btn_1,
.nav_list .list_btn_2,
.nav_list .list_btn_3{ display:block;width:100%;  padding: 0 2.5rem 0 2rem; border: none; color:#000; text-align: right; background:none; position:relative; color:#999;font-size: 1.4rem;}

.nav_list .list_btn_2,
.nav_list .list_btn_3 {
    padding: 0 1.5rem 0 2rem;
}

.nav_list .list_btn_1{height:3rem; line-height:3rem; }
.list_btn_1:after{ display:block; position:absolute; content:""; width:1.8rem; height:2.4rem; right:1rem; top:50%; margin-top: -1.2rem; background-position:-2rem -1.8rem;}
.list_btn_1.btnSetFree::after{display:none; }

.nav_list .list_btn_2 img{ width: 6rem; height: 6rem;}

.list_btn_1 p,
.list_btn_2 p{display: block;  white-space: nowrap; text-overflow: ellipsis; margin-right: .5rem; overflow: hidden;}
.list_btn_3 p{display: block;  text-align: right; color: #999; font-size: 1.4rem; word-wrap: break-word;}

[class^="list_btn_"] p var{ color: #ff2534;}

.nav_list.list_1{padding:0rem;}
.nav_list.list_2{padding:0 0 0 1rem;}

.nav_list .btn_qlcheckbox{margin-top: 0.6rem;}
.nav_span{display: block; padding: 1rem; line-height: 2rem; font-size: 1.2rem; color: #999;;}


/****按钮****/
/*圆角*/
[class^="wt_btn"]{display: block; height:4.6rem; line-height: 4.6rem;font-size: 1.8rem;  text-align: center; color: #fff; border-radius: 0.3rem; background: #f84c69; text-decoration: none; } 
.wt_btn_1{ border: solid 1px #f84c69;}
.new_btn{ display: block; background-color: #33bb49; height: 4.5rem; line-height: 4.5rem; font-size: 1.8rem; text-align: center; color: #fff; border-radius: 5rem;  }
.wt_btn_2{ color: #00acff; background: #fff; border: solid 1px #999999;}
.btn-create-next {background: #33bb49;border-radius: 2.3rem; border:0 none;}
.btn-create-next-box {padding-left: 1.5rem !important;padding-right: 1.5rem !important;}
[class*="tlbtn"]{display: inline-block; height:4.6rem; line-height: 4.6rem;font-size: 1.5rem; padding: 0 1.7rem;  text-align: center; color: #fff; border-radius: 0.3rem; background-color: #33bb49; text-decoration: none;  white-space: nowrap;cursor: pointer;} 

/*圆边*/
[class*="qlbtn"]{display: inline-block; height: 4rem; line-height: 4rem;margin: 0 auto;padding: 0 1.7rem;  border-radius: 4rem;  font-size: 1.5rem;  text-align: center;text-decoration: none;background-color: #00acff; color: #fff; white-space: nowrap;cursor: pointer;} 
[class*="qlbtna"]{background-color: #ddf4ff; color: #00acff;}
[class*="qlbtnb"]{background-color: #ffa200; color: #fff;}

[class*="stlbtn"],[class^="sqlbtn"]{ height: 3rem; line-height: 3rem; font-size: 1.2rem;}

[class*="btn_org1"]{ background-color: #ffa200;}
[class*="btn_org2"]{ background-color: #fcf0d4; color: #ffb400;}
[class*="btn_org3"]{ background-color: #5a6579;}
[class*="btn_gre1"]{ background-color: #00c8bc;}
[class*="btn_gre2"]{ background-color: #d5fdfa; color: #00c8bc;}
[class*="btn_gre3"]{ background-color: #eff1f2; color: #888888;}
[class*="btn_blu1"]{ background-color: #ddf4ff; color: #00acff;}
[class*="btn_blu2"]{ background-color: #fff; color: #00acff; border: 1px solid #00acff;}
[class*="btn_blu3"]{ background-color: #00acff; }
[class*="btn_red1"]{ background-color: #ffe7e7; color: #f46262;}
[class*="btn_red2"]{ background-color: #ef5670; color: #fff;}
[class*="btn_red3"]{ background-color: #f84c69;}
[class*="btn_green"]{ background-color: #33bb49;}

[class*="tlbtn"].ed,
[class*="qlbtn"].ed,
[class*="btn_gra1"]{ background-color: #b9b9b9;}
[class*="tlbtn"].sta,
[class*="qlbtn"].sta,
[class*="btn_gra2"]{ background-color: #cedae0;}
[class*="btn_gra3"]{ background-color: #eff1f2; color: #00acff;}
[class*="tlbtn"].tra,
[class*="qlbtn"].tra,
[class*="btn_tra1"]{ background-color:rgba(0,0,0,0.45);}


[class*="blk"]{display: block;}
[class*="wblk"]{display: block; width: 100%;}

/* tips基本颜色 */
.text_state1{color:#ffa200;}
.text_state2{color:#949fa4;}
.text_state3{color:#e95050;}
.text_state4{color:#f84c69;}
.text_state5{color:#999;}
.text_state6{color:#333;}
.text_state7{color:#666;}
.text_statew{color:#fff;}

/*单选按钮*/
[class*="btn_switch"]{ position: relative; display: inline-block; width: 5rem; height: 3rem; border-radius:3.2rem;cursor: pointer; background: #fff;border: 1px solid #e1e1e1;transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s;}
/* [class*="btn_switch"]:after{ position: absolute; display: block; content: ""; right:inherit; top: 0rem; width: 3rem; height: 3rem;  border-radius: 3rem; background: #FFFFFF;border: 1px solid #ccc; } */
[class*="btn_switch"]:after{ position: absolute;
    display: block;
    content: "";
    right: inherit;
    left: 0rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 3rem;
    background: #FFFFFF;
    border: 0.1rem solid #e1e1e1;
    -webkit-box-shadow: 0rem 0.1rem 0.4rem 0.1rem rgba(0,0,0,.1);
            box-shadow: 0rem 0.1rem 0.4rem 0.1rem rgba(0,0,0,.1) }

[class*="btn_switch"].swon{background: #f84c69;border-color: #f84c69;}
[class*="btn_switch"].swon.green{background: #33bb49;border-color: #33bb49;}
[class*="iMzhai"]{background: #ffa200; display: block; width: 100%; margin:0 auto;overflow:hidden;}
.swon:after{left: inherit;right: -0.1rem;border-color: #f84c69;}
.swon.green:after{left: inherit; right: -0.1rem;border-color: #33bb49;}





/*ico*/
i.mg_ivt_card{         
    display: inline-block;
    width: 3rem;
    height: 3rem;
    background: url(../img/live/admin-card.png) no-repeat;
    background-size: 1.6rem 1.6rem;
    background-position: center;
}

/*单选按钮*/
.btn_qlcheckbox,
.btn_qlradio{ display: inline-block; height:2rem;line-height: 2rem; padding: 0 1rem 0 0 ; font-size: 1.2rem; color: 333333; cursor: pointer;white-space: nowrap;vertical-align: top;}
.btn_qlcheckbox:before,
.btn_qlradio:before{display: inline-block; content: ""; width: 1.8rem; height: 1.8rem; background:#f5f5f5;border:1px solid #f5f5f5;border-radius:2rem; vertical-align: top; }
.btn_qlcheckbox.on:before,
.btn_qlradio.on:before{border:1px solid #f84c69; background-position:-54.2rem -0.2rem;}
.qlradio_list{cursor:pointer;}


/* 无记录样式，空页面logo*/
.none_record{width:100%;height:17rem;position:relative;}
.none_pic{width:100%;height:20rem;position:relative;display:none;background:url(//cache1.qlchat.com/styles/wtwap/img/live/ico_none.png) center center no-repeat;display:none;}
.none_pic1{background:url(//cache1.qlchat.com/styles/wtwap/img/live/ico_norecord1.png) center center no-repeat;background-size:12rem;}
.none_pic2{background:url(//cache1.qlchat.com/styles/wtwap/img/live/ico_norecord8.png) top center no-repeat;background-size:12rem;height: 13rem;}
.none_pic3{background:url(//cache1.qlchat.com/styles/wtwap/img/live/ico_norecord3.png) center center no-repeat;}
.none_pic4{background:url(//cache1.qlchat.com/styles/wtwap/img/live/ico_norecord4.png) center center no-repeat;display:none;background-size:12rem;}
.none_pic5{background:url(//cache1.qlchat.com/styles/wtwap/img/live/ico_norecord5.png) center center no-repeat;background-size:8rem;margin-top: 3rem;}
.none_pic6{background:url(//cache1.qlchat.com/styles/wtwap/img/live/ico_norecord6.png) center center no-repeat;background-size:9rem;margin-top:2rem;}
.none_pic7{background:url(//cache1.qlchat.com/styles/wtwap/img/live/ico_norecord7.png) center center no-repeat;background-size:10rem;height: 12rem;margin-bottom: 3rem;}
.none_pic8{background:url(//cache1.qlchat.com/styles/wtwap/img/live/emptyPage.png) center center no-repeat;background-size:10rem;}
.none_tip{position:absolute;bottom:0rem;text-align:center;display:block;width: 100%;  font-size: 1.5rem;  color: #999;padding-right: 3%;}
[class*="WeRQL"]{background: #fff200; display: block; width: 90%; margin:1 auto;overflow:hidden;}

/*新空页面ui*/
.co-empty-m {
    padding: 20px;
}
.co-empty-m-img {
    display: block;
    width: 74px!important;
    margin: 0 auto;
}
.co-empty-m-desc {
    margin-top: 8px;
    font-size: 12px;
    color: #b2b2b2;
    text-align: center;
    line-height: 1.4;
}


/*加载中*/
.loadingBox{display:none;z-index: 120;position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align:center;}
/* .loadingBox:before{ display: block; content: ""; position: relative; z-index: 120; width: 100%; height: 100%; background: #000;opacity: 0.4; filter:alpha(opacity="40");} */
.loadingBox span{display:inline-block; position: absolute; z-index: 151; top: 50%; left: 50%; width: 5rem; height:5rem; margin:-5rem 0 0 -2.5rem; font-size: 14px; color: #888; line-height: 25px;  vertical-align: top; background:#fff url(//cache1.qlchat.com/styles/wtwap/img/live/qllogo_loading_1.gif) 0 0 no-repeat; background-size:100%; border-radius: 100px; border: 1px solid #f0f0f0;box-shadow: 0 5px 10px #e5e5e5;}


 /*提示弹框*/
.popBox{position: absolute; width: 100%; height: 100%;background: rgba(0,0,0,0.4);z-index: 102;}
.popBox .pop_bg{ position: absolute; z-index: 110; left: 0; top: 0; content: ""; width: 100%; height: 100%; cursor: pointer;}
.popBox .main{position:absolute; z-index: 111; width: 80%; min-height: 12rem; left: 10%; top: 45%; margin:-8rem 0 0 0; padding-bottom: 4.1rem; background: #fff; border-radius: 0.7rem; overflow:hidden;}

.pop_top{display: block;width: 100%;padding: 0 1rem;height: 4rem;background-color: #fff;color: #2984e2;font-size: 1.6rem;text-align: center;line-height: 4rem;}
.pop_top span{word-break: break-all;display: inline-block;}
.popBox .pop_content{ display: block; min-height:5.9rem; padding:1rem 2rem 1rem; text-align: center;}
.popBox .alignLeft{text-align: left;}
.pop_content span{display: inline-block; padding: 2rem 0px; font-size:1.6rem; line-height: 2rem; color: #666666;word-break: break-all;}

.popBox .pop_bottom{ position: absolute; left: 0; bottom: 0rem; width: 100%;padding: 0 0rem; border-top: solid 1px #eee;white-space: nowrap;}
.popBox .pop_bottom .pop_btn{display: block;  height: 4rem; line-height: 4rem; font-size: 1.5rem; margin: 0 0rem; text-align: center;}
.pop_btn.btn_confirm,.pop_btn.btn_cancel{color: #2984e2;}
.popBox .both .btn_confirm{color: #33bb49;}
.popBox .both .btn_cancel{color: #657084;}
.popBox .both span{ display:inline-block; width: 50%;}
.popBox .both span:last-child{border-left: solid 1px #eee;}

/*自消失提示 新版*/
.min_tips_box .bg{ position: absolute; z-index: 130; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: #000000; opacity: 0; filter:alpha(opacity=0);}
.min_tips_box .tips_content{ 
    position:absolute; 
    z-index: 131; 
    max-width: 85%; 
    min-width:12rem; 
    line-height:2rem; 
    padding: 2.5rem 2.5rem; 
    left: 50%; 
    top: 50%; 
    background: rgba(0,0,0,0.7); 
    border-radius: 5px; 
    text-align: center; 
    color: #fff;
    font-size:1.5rem; 
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
            box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    word-break: break-all;
    -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}
.min_tips_box.bottom .tips_content{
  top: auto;
  bottom:10rem;
}

 /*通用弹框 */
.geneBox{display: none;}
.geneBox:before,.qlGbBg{ position:absolute; content: ""; z-index: 100; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: #000000; opacity: 0.5; filter:alpha(opacity="50");}
.qlGbBg{ background: none;cursor:pointer;}
.geneBox .main{position:absolute; z-index: 101; width: 80%; min-height: 15rem; left: 10%; top: 45%; margin:-13rem 0 0 0; background: #fff; border-radius: 0.7rem; overflow:hidden;}
.geneBox .gene_close{position:absolute;right: 0rem;top: 0rem;display: block;width: 3rem;height: 3rem;background-position: -15rem 0; cursor:pointer;}
.geneBox .gene_content{ display: block; min-height:11rem; padding:1rem 1rem 1rem; text-align: center;}
.geneBox .gene_content.alignLeft{text-align: left;}
.gene_content span{display:block; font-size:1.6rem; line-height: 2rem; color: #666666;word-break: break-all;}
.geneBox .gene_top{display: block;width: 100%;height: 4rem;background-color: #fff;color: #2984e2;font-size: 1.6rem;text-align: center;line-height: 7rem;white-space: nowrap;}
.geneBox .gene_bottom{ display: block; width: 100%; padding: 0;  border-top: solid 1px #eee;white-space: nowrap;}
.geneBox .gene_bottom .gene_btn{display: block;  height: 4rem; line-height: 4rem; font-size: 1.5rem; margin: 0 0rem; text-align: center;}
.gene_btn.gene_confirm,.gene_btn.gene_cancel{color: #33bb49;}
.geneBox .both .gene_confirm{color: #33bb49;}
.geneBox .both .gene_cancel{color: #999;}
.geneBox .both span{ display:inline-block; width: 50%;}
.geneBox .both span:last-child{border-left: solid 1px #eee;}


/*滚动加载提示*/
#pageLoadBox{display: none;}
.page_loading_box{ display: none;text-align: center; line-height: 3rem; color: #899aa3;font-size: 1.4rem;}


/*千耳卯 通用选择弹框*/
.qlSelectBox{ display:none;position: absolute; width: 100%; height: 100%; z-index: 50;}
.qlSelectBox .qlSlBg{position:absolute; content: ""; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: #000000; opacity: 0.5; filter:alpha(opacity="50");  cursor: pointer;}
.qlSelectBox .main{ position: absolute; width: 25rem; left: 50%; top: 50%; margin-left: -12.5rem; background: #fff;}
.qlSelectBox .main .selectUl{ display: block; width: 100%;}
.selectUl li{ display: block; height: 3.5rem; padding:0 1rem; line-height: 3.5rem;  font-size: 1.4rem; color: #888; border-bottom: #eee solid 1px; cursor: pointer;}
.selectUl li:last-child{border: none;}
.selectUl li:hover{ background: #eee;}


/*千耳卯 通用信息弹框*/
[class^="qlMsgTips"]{ display: none;position:absolute;left:0;top:0;width:100%;height:100%;  z-index: 100; background: rgba(0,0,0,0.4); -webkit-overflow-scrolling : touch;overflow:hidden; overflow-y: scroll;}
[class^="qlMsgTips"] .qlMTBg{ position:absolute; content: ""; z-index: 100; left: 0; top: 0; content: ""; width: 100%; height: 100%; opacity: 0.5; filter:alpha(opacity="50");cursor: pointer;}
[class^="qlMsgTips"] .qlMT_top{  display: block;width: 100%; min-height: 4rem; padding: 3rem 0 1rem; background-color: #fff;color: #404040;font-size: 1.6rem;text-align: center;line-height: 2rem;white-space: nowrap;}
[class^="qlMsgTips"] .qlMT_top2{display: block;width: 100%; min-height: 4rem; padding: 3rem 0 1rem; background-color: #fff;color: #657084;font-size: 1.6rem;text-align: center;line-height: 2rem;white-space: nowrap;}
[class^="qlMsgTips"] .qlMT_top3{  display: block;width: 100%; min-height: 4rem; padding: 2rem 0 1rem; background-color: #fff;color: #404040;font-size: 1.6rem;text-align: center;line-height: 2rem;white-space: nowrap;}
[class^="qlMsgTips"] .qlMT_close{position:absolute;right: 0rem;top: 0rem;display: block;width: 3rem;height: 3rem;background-position: -15rem 0;cursor:pointer;}
[class^="qlMsgTips"] .qlMT_close2{position:absolute;right: 0rem;top: 0rem;display: block;width: 3rem;height: 3rem;background-position: -12rem 0;cursor:pointer;}
[class^="qlMsgTips"] .main{position:absolute; z-index: 101; width: 85%; left: 50%; top: 50%; margin:0; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background: #fff; border-radius: 5px; overflow:hidden;transition: 0.2s; -webkit-transition: 0.2s;}
.qMS .main{position:absolute;top:15px;margin-top:0; -webkit-transform: translate(-50%,0); transform: translate(-50%,0);}
[class^="qlMsgTips"] .qlMT_content{text-align:center;padding:1rem 2rem 0;font-size:1.4rem;}
[class^="qlMsgTips"] .qlMT_content.AlignLeft{text-align:left;}
.qlMT_content img{max-width: 100%;}
[class^="qlMsgTips"] .qlMTBottom{padding:2rem 1rem; text-align: center;}
[class^="qlMsgTips"] .qlMTBottom2{ text-align: center;margin-top:1rem;}
[class^="qlMsgTips"] .boxFlex{ padding: 0 1rem;}
[class^="qlMsgTips"] [class*="tlbtn"]{height: 4.5rem; line-height: 4.5rem; font-size: 1.6rem;}
[class^="qlMsgTips"] .qlMTBottom [class*="tlbtn"]{width: 100%;}
.qlMTBottom2 [class*="tlbtn"]{width: 100%;border-radius: 0;color: #f73657;background-color: #fff;}
.qlMTBottom2 [class*="tlbtn"].green{color: #33bb49}
.qlMTBottom .tlbtn_cancel{ border: solid 1px #657084; background: #fff; color: #657084;}
.qlMTBottom2 .tlbtn_cancel{ border-top: solid 1px #e5e5e5;border-right: solid 1px #e5e5e5;color: #404040;}
.qlMTBottom2 .tlbtn_confirm{border-top: solid 1px #e5e5e5;}

.qlMTBottom3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 1px solid #e6e6e6;
    font-size: 1.6rem;
    text-align: center;
    margin-top: 1rem;
}
.qlMTBottom3.mrt{
    margin-top: 3rem;
}
.qlMTBottom3 .cancel {
    display: block;
    width: 49.9%;
    height: 5rem;
    line-height: 5rem;
    color: #333;
    border-right: 1px solid #e6e6e6;
}
.qlMTBottom3 .confirm {
    display: block;
    width: 49.9%;
    height: 5rem;
    line-height: 5rem;
    color: #33bb49;
}

 [class^="qlMsgTips"] .span_1{display: block; padding: 1rem 2rem;}
 [class^="qlMsgTips"] .qlMT_input{display: block;width: 100%;height: 4rem;  padding: 0 1rem; line-height:2rem;background: #f6f6f6;border: none; font-size: 1.4rem; border-radius: 0.3rem; color:#333;}
 [class^="qlMsgTips"] .qlMT_textarea{ display: block; width: 100%; height:12rem; padding: 0.5rem; margin: 0 auto; line-height: 2rem; color: #333;background: #f8fbfc;border: solid 1px #e5e5e5;  border-radius: 0.5rem; font-size:1.6rem; resize:none}
 [class^="qlMsgTips"] .textonly_tips{ padding: 2rem; display: block; line-height:2rem;}
 [class^="qlMsgTips"] .qlMT_input:placeholder{color:#b3b3b3;}
 [class^="qlMsgTips"] .qlMT_input::-webkit-input-placeholder{color:#b3b3b3;}
 [class^="qlMsgTips"] .qlMT_input::-moz-placeholder { color:#b3b3b3; }
 [class^="qlMsgTips"] .qlMT_input::-ms-input-placeholder { color:#b3b3b3; }
 [class^="qlMsgTips"] .qlMT_input::-o-input-placeholder{color:#b3b3b3;}
  [class^="qlMsgTips"] .qlMT_textarea:placeholder{color:#b3b3b3;}
 [class^="qlMsgTips"] .qlMT_textarea::-webkit-input-placeholder{color:#b3b3b3;}
 [class^="qlMsgTips"] .qlMT_textarea::-moz-placeholder { color:#b3b3b3; }
 [class^="qlMsgTips"] .qlMT_textarea::-ms-input-placeholder { color:#b3b3b3; }
 [class^="qlMsgTips"] .qlMT_textarea::-o-input-placeholder{color:#b3b3b3;}
[class^="qlMsgTips"] .qlMT_content .qlMT_qr{display:block;width:15rem;height:15rem;overflow:hidden;margin:0 auto;}
[class^="qlMsgTips"] .qlMT_content .qlMT_qr img{width:100%;height:100%;}
/* 弹框 */
.qlMsgTips .banner{ display: block; width: 100%; margin: 0; background: #33bdff; padding: 1rem 0; text-align: center;}
.qlMsgTips .banner .ico_1{display: inline-block; width: 6rem; height: 6rem;border-radius:6rem;overflow:hidden;}
.qlMsgTips .banner .ico_1 img{width:100%;height:100%;}
.qlMsgTips .banner .banner_title{ display: block; height: 2rem; line-height: 2rem; font-weight: normal; text-align: center; color: #fff; font-size: 1.4rem; color: #fff;}
.qlMsg_content{padding:2rem;font-size:1.4rem;}
.coupon_detail span{display:block;line-height:2rem;}
.coupon_detail var{padding-left:1rem;}


.qlMsgTips .banner{ display: block; width: 100%; margin: 0; background: #33bdff; padding: 1rem 0; text-align: center;}
.qlMsgTips .banner .ico_choose{display: inline-block; width: 5rem; height: 5rem;border-radius:5rem;overflow:hidden; background-color: #fff;background-position: -5rem -5rem;}
.qlMsgTips .banner .banner_title{ display: block; height: 2rem; line-height: 2rem; font-weight: normal; text-align: center; color: #fff; font-size: 1.4rem; color: #fff;}

/* 通用底部弹窗 */
.bottom-menu {
    display: none;
    position:absolute;
    left:0;top:0;width:100%;height:100%;  
    z-index: 100; 
    background: rgba(0,0,0,0.4); 
    -webkit-overflow-scrolling : touch;
    overflow:hidden; 
    overflow-y: scroll;
}
.bottom-menu .qlMTBg { 
    position:absolute; 
    content: ""; 
    z-index: 100; 
    left: 0; top: 0; 
    content: ""; 
    width: 100%; height: 100%; opacity: 0.5; filter:alpha(opacity="50");cursor: pointer;
}
.bottom-menu .bottom-menu-main {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 100;
    background-color: #f0f0f0;
    font-size: 1.5rem;
    color: #333;
}
.bottom-menu .bottom-menu-head {
    height: 4.5rem;
    line-height: 4.5rem;
    background-color: #fff;
    padding-left: 1.5rem;
    border-bottom: 0.05rem solid #f0f0f0; 
}
.bottom-menu .bottom-menu-ls {
    background-color: #fff;
    margin-bottom: 1rem;
}
.bottom-menu-ls li {
  position:relative;
  height: 4.5rem;
  line-height: 4.5rem;
  margin-left: 1.5rem;
  border-bottom: 0.05rem solid #f0f0f0; 
}
.bottom-menu-ls .icon_checked {
  display: none;
}
.bottom-menu-ls .active .icon_checked {
  position: absolute;
  display: inline-block;
  color: #33bb49;
  right: 1.5rem;
}
.bottom-menu-ls li:last-child {
  border: none;
}

.bottom-menu .btm_btn {
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    background-color: #fff;
    border-right: 0.05rem solid #f0f0f0; 
}
.bottom-menu .btm_btn:last-child {
    border: none;
}
.btm_btn.confirm{
    color: #33bb49;
}

.bottom-menu-ls .with-hot-p:after{
    content: '支持拼课';
    display: block;
    color: #fff;
    background-color: #ff3333;
    font-size: 1rem;
    border-radius: 1rem;
    padding: 0 .4rem;
    height: 1.75rem;
    position: absolute;
    top: 50%;
    left: 6rem;
    margin-top: -.875rem;
    line-height: 1.75rem;
}
.bottom-menu-ls .with-hot:after{
    content: 'hot';
    display: block;
    color: #fff;
    background-color: #ff3333;
    font-size: 1rem;
    border-radius: 1rem;
    padding: 0 .4rem;
    height: 1.75rem;
    position: absolute;
    top: 50%;
    left: 4rem;
    margin-top: -.875rem;
    line-height: 1.75rem;
}

/***********  404  ************/
.box_404{ position: absolute; width: 100%; height: 22rem; top: 50%; margin-top:-11rem ; text-align: center;}
.box_404 img{display: inline-block; width: 10rem; margin:0rem auto 1rem;}
.box_404 .tips_1,
.box_404 .tips_2{ display: block; line-height: 3rem; padding:0.5rem 0 0; color: #899aa3;}
.box_404 .tips_2 var{ color: #2984e2;}
.box_404 .tips_1{font-size: 1.6rem;}
.box_404 .tips_2{font-size: 1.4rem;}

/*板块无内容*/
.loadStBox{ display: block; height: 3rem; width: 100%;}
.box_nothing{ display: none; text-align: center; padding: 0 0 1rem;}
.box_nothing img{display: inline-block; width: 12rem; margin:6rem auto 2rem;}
.box_nothing .tips_1{ display: block; line-height: 3rem; padding:0.5rem 0 0; color: #899aa3;font-size: 1.3rem;}


/*千聊 loading*/
.qlLoading{position: absolute; display: block; top: 0; bottom: 0; z-index: 10; width: 100%; height: 100%; background: #fff; overflow: hidden; }	
.logoBox{position:absolute; display: block; top: 100px; left: 50%; width: 64px; height: 40px;background-color: #00acff;margin: 0 0 0 -32px;border-radius: 10px;}
.logoBox li{display:inline-block;position:absolute;top:50%; right: 32px; background-color:#fff ;height:10px;width:4px;margin-top:-5px;}
.logoBox li:nth-child(1){margin-right:14px;height:10px;margin-top:-5px;}
.logoBox li:nth-child(2){margin-right:6px;height:20px;margin-top:-10px;}
.logoBox li:nth-child(3){margin-right:-2px;height:30px;margin-top:-15px;}
.logoBox li:nth-child(4){margin-right:-10px;height:20px;margin-top:-10px;}
.logoBox li:nth-child(5){margin-right:-18px;height:10px;margin-top:-5px;}

.logoBox li:nth-child(1),
.logoBox li:nth-child(5){
animation:qlanime 0.7s cubic-bezier(.72,.41,.41,.68) 0.1s alternate infinite ;
-moz-animation:qlanime 0.7s cubic-bezier(.72,.41,.41,.68) 0.1s alternate infinite; 
-webkit-animation:qlanime 0.7s cubic-bezier(.72,.41,.41,.68) 0.1s alternate infinite; }
.logoBox li:nth-child(2),
.logoBox li:nth-child(4){
animation:qlanime1 0.7s cubic-bezier(.72,.41,.41,.68) 0.1s alternate infinite ;
-moz-animation:qlanime1 0.7s cubic-bezier(.72,.41,.41,.68) 0.1s alternate infinite; 
-webkit-animation:qlanime1 0.7s cubic-bezier(.72,.41,.41,.68) 0.1s alternate infinite; }
.logoBox li:nth-child(3){
animation:qlanime2 0.7s cubic-bezier(.72,.41,.41,.68) 0.1s alternate infinite ;
-moz-animation:qlanime2 0.7s cubic-bezier(.72,.41,.41,.68) 0.1s alternate infinite; 
-webkit-animation:qlanime2 0.7s cubic-bezier(.72,.41,.41,.68) 0.1s alternate infinite;}

.qlName{position: absolute; top: 150px; font-size:1.5rem;color:#a7a7a7;text-align:center;width:100%;}
.reload_tips{position: absolute; top: 220px; font-size:1.2rem;color:#b4b4b4;text-align:center;width:100%;}
.ql_btn_RelLoad{ position: absolute; top: 260px; left: 50%; width: 60px; height: 30px; margin-left: -30px; text-align: center; line-height:30px; border: solid 1px #e5e5e5; background: #f2f2f2; color: #0096ff;border-radius: 3px; font-size:15px;}	
#ql_btn_RelLoad_box{display:none;}	
	
@-webkit-keyframes qlanime{
  0%{  height:10px; margin-top:-5px; }
 40%{  height:30px; margin-top:-15px; }
 80%{  height:14px; margin-top:-7px; }
 85%{  height:10px; margin-top:-5px; }
 100%{  height:10px;margin-top:-5px; }
}

@keyframes qlanime{
  0%{  height:10px; margin-top:-5px; }
 40%{  height:30px; margin-top:-15px; }
 80%{  height:14px; margin-top:-7px; }
 85%{  height:10px; margin-top:-5px; }
 100%{  height:10px;margin-top:-5px; }
}

@-webkit-keyframes qlanime1{
  0%{  height:20px; margin-top:-10px; }
 20%{  height:30px; margin-top:-15px; }
 60%{  height:10px; margin-top:-5px; }
 80%{  height:16px;margin-top:-8px; }
 85%{  height:20px;margin-top:-10px; }
 100%{  height:20px;margin-top:-10px; }
}

@keyframes qlanime1{
  0%{  height:20px; margin-top:-10px; }
 20%{  height:30px; margin-top:-15px; }
 60%{  height:10px; margin-top:-5px; }
 80%{  height:16px;margin-top:-8px; }
 85%{  height:20px;margin-top:-10px; }
 100%{  height:20px;margin-top:-10px; }
}
@-webkit-keyframes qlanime2{
  0%{  height:30px; margin-top:-15px;  }
 40%{  height:10px; margin-top:-5px; }
 80%{  height:26px; margin-top:-13px; }
 85%{  height:30px;margin-top:-15px;  }
 100%{  height:30px;margin-top:-15px;  }
}

@keyframes qlanime2{
  0%{  height:30px; margin-top:-15px;  }
 40%{  height:10px; margin-top:-5px; }
 80%{  height:26px; margin-top:-13px; }
 85%{  height:30px;margin-top:-15px;  }
 100%{  height:30px;margin-top:-15px;  }
}


/*ql-QRcode*/
.focusQr2Box,.focusQr3Box,.focusQrpayBox,.payQrBox{cursor:pointer;}
.focusQr2Box img,.focusQr3Box img,.focusQrpayBox img,.payQrBox img{width:75%;}
.focusQr2Box span,.focusQr3Box span,.focusQrpayBox span,.payQrBox span{display:block;width:100%;text-align:center;line-height:2rem;}
.focusQr_span_1{color:#333333;}
.focusQr_span_2{color:#b8b8b8;margin-bottom:1rem;}
.payQr_span_1{margin-top:1rem;}
.payQr_span_2{margin-bottom:1rem;}

/*新功能红点*/
.badge{position:relative}
.badge .newPoint{position:absolute;height: 1.2rem;font-size: 1rem;left:50%;background:#f14a4e;color:#fff;text-align:center;line-height:1.2rem;border-radius:5rem;padding: 0 0.3rem;min-height:1rem;min-width:1.5rem}
.mineNewPoint{
	width: 0.8rem;
	height: 0.8rem;
	display: inline-block;
	background: #f14a4e;
	border-radius: 50%;
	margin-top: 1.5rem;
	vertical-align: top;
}
.tab-mine .mineNewPoint{
	vertical-align: top;
	margin-left: 0.5rem;
	margin-top:0.2rem;
	position: absolute;
	left: 50%;
}
.shareset.livesharesetNew{
	width: 0.8rem;
	height: 0.8rem;
	display: inline-block;
	background: #f14a4e;
	border-radius: 50%;
	margin-top: 1.5rem;
	vertical-align: top;
	position: relative;
	right: -1rem;
	top: -4rem;
	
}

.livesharesetNew{
	width: 0.8rem;
	height: 0.8rem;
	display: inline-block;
	background: #f14a4e;
	border-radius: 50%;
	vertical-align: top;
	position: relative;
	right: -1rem;
	top: 0rem;
}


[class^="ql_notice"]{position:relative; display: block; margin: 1rem; padding: 1rem; background: #fff;}
[class^="ql_notice"] .qlbmibtn_closed{position: absolute;right: 0;top: 0;background-position: -12rem 0;display: inline-block;width: 3rem;height: 3rem;}

/*关注千聊*/
.follow_qianliao ul{display: block; text-align: center;}
.follow_qianliao li{display: block;}
.follow_qianliao .li_1{ height: 3rem; line-height: 3rem; font-size: 1.2rem; color: #949fa4;}
.follow_qianliao .li_3{ height: 2rem; line-height: 2rem; font-size: 1.2rem; color: #333333;}
.follow_qianliao .li_4{ height: 3rem; line-height: 3rem; font-size: 1.2rem; color: #00acff;}
.follow_qianliao .li_2 img{ display: inline-block; height: 12rem; width: 12rem;}

/*字体样式*/
.fbold{font-weight: bold}

/*推送话题*/
.qlMsgTips.pushBox .main{
  width: 86%;
}
.pushBox span,.pushChannelBox span{display:block;line-height:2rem;}
.pushBox .push_top,
.pushChannelBox .push_top{
  padding: 2.5rem 0 2rem;
  display: block;
  text-align: center;
  color:#313131;
  font-weight: bold;
  font-size: 1.7rem ;
} 
.push_top .num{
  color: #f73a5a;
	font-style: normal;
}
.pushBox .push_top span,.pushChannelBox .push_top span{
  display:inline-block; 
  margin:0 auto;
  text-align: left;
}
.pushBox .push-to-timeline{
    color: #c3ae9e;
    cursor: pointer;
    font-size: 1.2rem;
    height: 3rem;
    margin: 1.5rem auto;
    margin-bottom: 0;
		width: calc(100% - 8rem);
		background-color: #f8f4ed;
  	border-width: 1px;/* no */
  	border-color: rgb(195, 174, 158);
  	border-style: solid;
		border-radius: 4px;
    padding: 0 1rem;
    padding-right: 3rem;
		display: -webkit-box;
		display: -ms-flexbox;
    display: flex;
    position: relative;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
}
.pushBox .push-to-timeline::before{
    content:'';
  	border-width: .1rem;
  	border-color: rgb(195, 174, 158);
  	border-style: solid;
  	border-radius: 4px;
  	background-color: rgb(255, 255, 255);
  	width: 1.3rem;
		height: 1.3rem;
		margin-right: .9rem;
}
.pushBox .push-to-timeline.checked::before{
    background-image: url(../img/live/push-timeline-checked.png);
		background-size: contain;
		background-repeat: no-repeat;
}

.pushBox .push-to-timeline.new::after{
    content: 'new';
    font-size: 1rem;
		color: rgb(255, 255, 255);
		background-color: rgb(246, 47, 77);
		border-radius: 2px;
		margin-left: .4rem;
    padding: 2px 4px;
    line-height: 1;
}

.pushBox .push-to-timeline .goto-tuto{
    padding: .5rem 1rem;
    background-image: url(../img/live/goto.png);
    background-position: center;
    background-size: .5rem .9rem;
    width: .5rem;
    height:  .9rem;
    display: block;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    position: absolute;
    right: 0;
    top: .55rem;
    background-repeat: no-repeat;
}

.push_span_1 a{ color: #b2b2b2;}
/* .push_span_2 var {color: #f14a4e} */
.push_span_1{
  color:#b2b2b2;
  font-size:1.2rem;
  text-align: left;
  padding: 0 4rem;
  line-height: 1 !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: .3rem;
  margin-top: 1.4rem;
}
.push_span_1 .how-to-push{
  width: 1.2rem;
  height: 1.2rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/live/how-to-push-by-your-own.png);
  margin-right: .4rem;
  display: inline-block;
  vertical-align: middle;
}
.push_span_2{
  padding:0 4rem;
  color: #313131;
  font-size: 1.4rem;
  text-align: left;
}
.pushChannelBox span{padding:2rem;}
.pushChannelBox .push_top{padding:0rem;}


/*********************************************************\
                  bottom_box - 底部弹框                  
\*********************************************************/
.bottom_box{position: absolute; top: 0; left: 0; z-index: 8; height: 100%; width: 100%; background-color: rgba(0,0,0,0.4); }
.bottom_box .bottom_shade{position: absolute; top: 0; left: 0; z-index: 8; height: 100%; width: 100%; background-color:transparent; cursor: pointer;}
.bottom_box_main{width: 100%; position: absolute; z-index: 10; bottom:0;max-height:0; overflow: hidden;   -webkit-transition: all .6s ; -webkit-transition:all 1s ; transition: all 1s ; }
.bottom_box_main.on{ max-height: 60rem; }

.bottom_box_main li{ height: 4.5rem; line-height: 4.5rem; color: #333; font-size: 1.4rem; padding: 0 1rem; background-color: white; border-bottom: 1px solid #e5e5e5; cursor: pointer;}
.bottom_box_main .gray{color:#999; font-size:1.4rem;   }
.bottom_box_main .warning{ color: #f46262;  font-weight: normal;}
.bottom_box_main .tips{ color: #999999;  font-weight: normal;}
.bottom_box_main .small{font-size: 1.2rem;display:-webkit-box;display:-ms-flexbox;display:flex;}
.bottom_box_main span{ margin-right: 1rem; }
.bottom_box_main .cancel{ color: #999; background-color: #f9f9f9; text-align: center; font-size: 1.5rem; cursor: pointer;}
.bottom_box_main .header{ height: 4rem; background-color: #33bdff; color: white; text-align: center; }


.bottom_box_main .titleCtrl{height: 4rem;display: block;overflow: hidden;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}

/* loading */
.sl_loading{display:none;width:100%;height:100%;background-color:rgba(0,0,0,0);position:absolute;top:0;left:0;z-index:10;}
.sl_loading:before{content:'';display:block;width:10rem;height:10rem;position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:-5rem;border-radius:0.5rem;background-color:rgba(0,0,0,0.5);}
.sl_loading .loadingbox{width:10rem;height:10rem;position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:-5rem;text-align:center;line-height:10rem;}
.sl_loading .loadingbox span{display:inline-block;width:0.4rem;height:2rem;position:absolute;top:50%;left:50%;margin-top:-2rem;margin-left:-2rem;background-color:#fff;}
.sl_loading .loadingbox span:nth-child(1){margin-top:-1rem;margin-left:-1.8rem;
animation:heightmove1 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s  infinite ;
-moz-animation:heightmove1 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s  infinite; 
-webkit-animation:heightmove1 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s  infinite; }
.sl_loading .loadingbox span:nth-child(2){margin-top:-1rem;margin-left:-1rem;
animation:heightmove2 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s  infinite ;
-moz-animation:heightmove2 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s infinite; 
-webkit-animation:heightmove2 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s infinite;}
.sl_loading .loadingbox span:nth-child(3){margin-top:-1.5rem;margin-left:-0.2rem;
animation:heightmove3 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s  infinite ;
-moz-animation:heightmove3 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s infinite; 
-webkit-animation:heightmove3 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s infinite;}
.sl_loading .loadingbox span:nth-child(4){margin-top:-1rem;margin-left:0.6rem;
animation:heightmove4 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s infinite ;
-moz-animation:heightmove4 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s   infinite; 
-webkit-animation:heightmove4 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s   infinite;}
.sl_loading .loadingbox span:nth-child(5){margin-top:-1rem;margin-left:1.4rem;
animation:heightmove5 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s  infinite ;
-moz-animation:heightmove5 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s   infinite; 
-webkit-animation:heightmove5 0.9s cubic-bezier(.72,.41,.41,.68) 0.1s   infinite; }
	
@-webkit-keyframes heightmove1{
  0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1.4rem; margin-top:-0.7rem; }
  16%{  height:1.8rem; margin-top:-0.9rem; }
  24%{  height:2.2rem; margin-top:-1.1rem; }
  32%{  height:2.8rem; margin-top:-1.4rem; }
  40%{  height:2.2rem; margin-top:-1.1rem; }
  48%{  height:1.8rem; margin-top:-0.9rem; }
  56%{  height:1.4rem; margin-top:-0.7rem; }
  64%{  height:1rem; margin-top:-0.5rem; }
  72%{  height:1rem; margin-top:-0.5rem; }
  80%{  height:1rem; margin-top:-0.5rem; }
  88%{  height:1rem; margin-top:-0.5rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}

@keyframes heightmove1{
  0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1.4rem; margin-top:-0.7rem; }
  16%{  height:1.8rem; margin-top:-0.9rem; }
  24%{  height:2.2rem; margin-top:-1.1rem; }
  32%{   height:2.8rem; margin-top:-1.4rem; }
  40%{  height:2.2rem; margin-top:-1.1rem; }
  48%{  height:1.8rem; margin-top:-0.9rem; }
  56%{  height:1.4rem; margin-top:-0.7rem; }
  64%{  height:1rem; margin-top:-0.5rem; }
  72%{  height:1rem; margin-top:-0.5rem; }
  80%{  height:1rem; margin-top:-0.5rem; }
  88%{  height:1rem; margin-top:-0.5rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}

@-webkit-keyframes heightmove2{
  0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1rem; margin-top:-0.5rem; }
  16%{  height:1.4rem; margin-top:-0.7rem; }
  24%{  height:1.8rem; margin-top:-0.9rem; }
  32%{  height:2.2rem; margin-top:-1.1rem; }
  40%{  height:2.8rem; margin-top:-1.4rem; }
  48%{  height:2.2rem; margin-top:-1.1rem; }
  56%{  height:1.8rem; margin-top:-0.9rem; }
  64%{  height:1.4rem; margin-top:-0.7rem; }
  72%{  height:1rem; margin-top:-0.5rem; }
  80%{  height:1rem; margin-top:-0.5rem; }
  88%{  height:1rem; margin-top:-0.5rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}

@keyframes heightmove2{
  0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1rem; margin-top:-0.5rem; }
  16%{  height:1.4rem; margin-top:-0.7rem; }
  24%{  height:1.8rem; margin-top:-0.9rem; }
  32%{  height:2.2rem; margin-top:-1.1rem; }
  40%{  height:2.8rem; margin-top:-1.4rem; }
  48%{  height:2.2rem; margin-top:-1.1rem; }
  56%{  height:1.8rem; margin-top:-0.9rem; }
  64%{  height:1.4rem; margin-top:-0.7rem; }
  72%{  height:1rem; margin-top:-0.5rem; }
  80%{  height:1rem; margin-top:-0.5rem; }
  88%{  height:1rem; margin-top:-0.5rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}
@-webkit-keyframes heightmove3{
    0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1rem; margin-top:-0.5rem; }
  16%{  height:1rem; margin-top:-0.5rem; }
  24%{  height:1.4rem; margin-top:-0.7rem; }
  32%{  height:1.8rem; margin-top:-0.9rem; }
  40%{  height:2.2rem; margin-top:-1.1rem; }
  48%{  height:2.8rem; margin-top:-1.4rem; }
  56%{  height:2.2rem; margin-top:-1.1rem; }
  64%{  height:1.8rem; margin-top:-0.9rem; }
  72%{  height:1.4rem; margin-top:-0.7rem; }
  80%{  height:1rem; margin-top:-0.5rem; }
  88%{  height:1rem; margin-top:-0.5rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}

@keyframes heightmove3{
    0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1rem; margin-top:-0.5rem; }
  16%{  height:1rem; margin-top:-0.5rem; }
  24%{  height:1.4rem; margin-top:-0.7rem; }
  32%{  height:1.8rem; margin-top:-0.9rem; }
  40%{  height:2.2rem; margin-top:-1.1rem; }
  48%{  height:2.8rem; margin-top:-1.4rem; }
  56%{  height:2.2rem; margin-top:-1.1rem; }
  64%{  height:1.8rem; margin-top:-0.9rem; }
  72%{  height:1.4rem; margin-top:-0.7rem; }
  80%{  height:1rem; margin-top:-0.5rem; }
  88%{  height:1rem; margin-top:-0.5rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}
@-webkit-keyframes heightmove4{
  0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1rem; margin-top:-0.5rem; }
  16%{  height:1rem; margin-top:-0.5rem; }
  24%{  height:1rem; margin-top:-0.5rem; }
  32%{  height:1.4rem; margin-top:-0.7rem; }
  40%{  height:1.8rem; margin-top:-0.9rem; }
  48%{  height:2.2rem; margin-top:-1.1rem; }
  56%{  height:2.8rem; margin-top:-1.4rem;}
  64%{  height:2.2rem; margin-top:-1.1rem; }
  72%{  height:1.8rem; margin-top:-0.9rem; }
  80%{  height:1.4rem; margin-top:-0.7rem; }
  88%{  height:1rem; margin-top:-0.5rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}

@keyframes heightmove4{
  0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1rem; margin-top:-0.5rem; }
  16%{  height:1rem; margin-top:-0.5rem; }
  24%{  height:1rem; margin-top:-0.5rem; }
  32%{  height:1.4rem; margin-top:-0.7rem; }
  40%{  height:1.8rem; margin-top:-0.9rem; }
  48%{  height:2.2rem; margin-top:-1.1rem; }
  56%{  height:2.8rem; margin-top:-1.4rem; }
  64%{  height:2.2rem; margin-top:-1.1rem; }
  72%{  height:1.8rem; margin-top:-0.9rem; }
  80%{  height:1.4rem; margin-top:-0.7rem; }
  88%{  height:1rem; margin-top:-0.5rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}
@-webkit-keyframes heightmove5{
  0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1rem; margin-top:-0.5rem; }
  16%{  height:1rem; margin-top:-0.5rem; }
  24%{  height:1rem; margin-top:-0.5rem; }
  32%{   height:1rem; margin-top:-0.5rem; }
  40%{   height:1.4rem; margin-top:-0.7rem; }
  48%{   height:1.8rem; margin-top:-0.9rem; }
  56%{   height:2.2rem; margin-top:-1.1rem; }
  64%{   height:2.8rem; margin-top:-1.4rem;}
  72%{  height:2.2rem; margin-top:-1.1rem; }
  80%{ height:1.8rem; margin-top:-0.9rem; }
  88%{ height:1.4rem; margin-top:-0.7rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}

@keyframes heightmove5{
  0%{  height:1rem; margin-top:-0.5rem; }
  8%{  height:1rem; margin-top:-0.5rem; }
  16%{  height:1rem; margin-top:-0.5rem; }
  24%{  height:1rem; margin-top:-0.5rem; }
  32%{   height:1rem; margin-top:-0.5rem; }
  40%{   height:1.4rem; margin-top:-0.7rem; }
  48%{   height:1.8rem; margin-top:-0.9rem; }
  56%{   height:2.2rem; margin-top:-1.1rem; }
  64%{  height:2.8rem; margin-top:-1.4rem; }
  72%{  height:2.2rem; margin-top:-1.1rem; }
  80%{ height:1.8rem; margin-top:-0.9rem; }
  88%{ height:1.4rem; margin-top:-0.7rem; }
  96%{  height:1rem; margin-top:-0.5rem; }
  100%{  height:1rem; margin-top:-0.5rem; }
}
/* loading */


/* 知识店铺加v认证 */
.qlbga-v-live{ cursor: pointer; }
.qlbga-v-live::after{ content: ''; background-position: -30rem -4rem; width: 2rem; height: 2rem;margin-left: .5rem; cursor: pointer;}
.qlbga-t-live{ cursor: pointer; }
.qlbga-t-live::after{ content: ''; background-position: -48rem -4rem; width: 2rem; height: 2rem;margin-left: .5rem; cursor: pointer;}

#v-live-tips p{ text-align: left; margin-bottom: 1rem; line-height: 2rem; }
.qlMsgTips .v-live-tips{ color: #00acff; }

/*新建单课选择类型列表*/
.nav_list_cascade li{ width: 100%; background-color: #fff; height:6rem; padding: 0.5rem 0 0 1rem; position: relative; display: block;}
.nav_list_cascade span.spacer{ height: 3rem; line-height: 3rem; color: #333; font-size: 1.6rem; background-color: #f2f2f2; padding: 0 1rem; }

.nav_list_cascade .icon_checked{ width: 2rem; height: 2rem; display: block; border-radius: 10rem; color: white; background-color: white; border: 1px solid #e5e5e5; position: absolute; top: 2rem; text-align: center; line-height: 2rem; }
.nav_list_cascade .icon_checked:before {content: '' !important;}
.nav_list_cascade .icon_checked.on{ background-color: #3bcb59; border: none; }
.nav_list_cascade .icon_checked.on:before{color:#fff;content:"\e995" !important;}
.nav_list_cascade li .desc{position: relative; margin-left: 3rem; border-bottom: 1px solid #f0f0f0;  height: 100%; }
.nav_list_cascade li .desc .btn-sample{position: absolute; width:3rem; height: 2rem; text-align: center; line-height: 2rem; top:0.5rem; right: 1rem; color:#b2b2b2; color: 1.2rem; cursor: pointer; }
.nav_list_cascade li:last-child .desc{ border-bottom: none; }
.nav_list_cascade li h2{ font-size: 1.4rem; color: #333; font-weight: normal; padding-top: 1rem;  }
.nav_list_cascade li p{ font-size: 1.2rem; color: #ccc; margin-top: 1rem; }
.nav_list_cascade .new-style{ position: relative; display: inline-block; }
.nav_list_cascade .new-style::after{content: 'new'; display: block; position: absolute; right: -3.5rem; top: .5rem; width: 3rem; height: 1.5rem; text-align: center; line-height: 1.5rem;background: #f12c20;color: #fff;border-radius: 3rem; font-size: 1.2rem;}

/*  */
.sample-container{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0, 0, 0, .5)}
.sample-container.hide{display: none;}
.sample-container .main{position: absolute; left: 50%; top: 50%; max-height: 100%; width: 100%; text-align: center; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.sample-container .main img{display: inline-block;  max-width: 90%; max-height: 30rem;}
.sample-container .main .title{position: absolute; top: -5rem; width: 100%; text-align: center;  display: block; height: 2rem; color: #fff; font-size: 1.8rem; font-weight: bold;}
.sample-container .btn-close{position: absolute; top: -5.5rem; right: 2rem; color: #fff;width: 2rem; height: 2rem;border: solid 1px #fff; border-radius: 3rem; text-align: center; font-size: 1.4rem; line-height: 1.9rem; cursor: pointer;}
.sample-container .btn-close::before{position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
/* todo:carousel - 轮播栏 */
.slider-container { position: relative;overflow:hidden;  height: 100%;  cursor: all-scroll; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;-webkit-overflow-scrolling : touch;}
.slider-container::after{display: block;padding-bottom: 54%;content: '';}
.slider-pagi { font-size: 0; position: absolute; z-index: 3; bottom: 1.5rem; right: 1rem; list-style-type: none; }
.slider-pagi__elem { position: relative; display: inline-block; width: 0.8rem; height: 0.8rem; margin: 0 .5rem; cursor: pointer; vertical-align: top; border-radius: 50%; background: rgba(0, 0, 0, .5); }
.slider-pagi__elem:before { position: absolute; top: 50%; left: 50%; width: 0.8rem; height: 0.8rem; content: ""; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); border-radius: 50%; background: #fff; }
.slider-pagi__elem.active:before, .slider-pagi__elem:hover:before { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
.slider { position: absolute; z-index: 1; height: 100%; width: 100%;}
.slider.animating { -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; will-change: transform; }
.slider.animating .slide__bg { -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; will-change: transform; }
.slide { position: absolute; top: 0; overflow: hidden; width: 100%; height: 100%; background-color: #000;}
.slide__bg { position: absolute; top: 0; left: -50%; width: 100%; height: 100%; background-size: cover; will-change: transform; }
.slide__bg img { width: 100%; }
.slider_title{display:block;width: 100%;height: 4rem;position: absolute;bottom: 0px;left: 0px;color:#fff;font-size:1.3rem;line-height:3rem;padding:0.5rem 15rem 0.5rem 1rem;background-color: rgba(0, 0, 0, 0.5);}
.slider-container .slide_bg{}

#t-live-tips p{ text-align: left; margin-bottom: 1rem; line-height: 2rem; }
.qlMsgTips .t-live-tips{text-align:left;line-height: 2rem;margin-top: -1rem;}
#t-live-tips .tlbtn_cancel{color: #999; }

#hot-live-tips,#dai-live-tips{
	text-align:center;
/* 	display:block; */
}

#hot-live-tips b,#dai-live-tips b{
	color: #575757;
	font-size:2rem;
	display: block;
	line-height: 4rem;	
	padding-top:1rem;
}
#hot-live-tips span,#dai-live-tips span{
	font-size:1.4rem;
	color: #9b9ea3;
	display: block;
	line-height: 4rem;
	padding-bottom:1rem;
}
#hot-live-tips .qlMT_content,#dai-live-tips .qlMT_content{
	padding:0;
}
#hot-live-tips .qlMT_content:before{
	content:'';
	display:block;
	background:url(../img/live/hot-box.png) center center no-repeat;
	background-size:100% auto;
	padding-bottom:72%;
	width:100%;
}
#dai-live-tips .qlMT_content:before{
	content:'';
	display:block;
	background:url(../img/live/dai-box.png) center center no-repeat;
	background-size:100% auto;
	padding-bottom:72%;
	width:100%;
}

#hot-live-tips .qlMT_close2,#dai-live-tips .qlMT_close2{
	top:0.5rem;
	right:0.5rem;
	width:3rem;
	height: 3rem;
	line-height: 3rem;
	border-radius: 3rem;
	background-color: rgba(0,0,0,0.2);
	background-position:0 0;
	color:#fff;
}		


/*gif图遮罩*/
.gifShadow{ width: 100%; height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0); text-align: center; display: block; top: 0; left: 0; }
.gifShadow b{ color: #fff; position: absolute; font-size: 1.5rem;  left: 1rem; bottom: 1rem; display: inline-block; border: 1px solid rgba(255,255,255,.4); padding: 0 1.2rem; font-weight: normal; height:2.5rem; line-height: 2.5rem; border-radius: 5rem; background-color: rgba(0, 0, 0, .5) }





/*金字塔  */

.qlbgi_icon_pyramid{
    width: 2rem !important;
    height: 2rem !important;
    background: url(//img.qlchat.com/qlLive/liveCommon/icon_pyramid.png);
    background-size: 100%;
    background-repeat: no-repeat;
    cursor:pointer;
}


/* 金字塔弹框  */
.pyramidBox .qlMT_content{
   padding: 3rem 0 2rem;

}
.pyramidBox .logo-pyramid{
    width: 16rem;
}

.pyramidBox .main{
    padding-bottom: 2rem;
}
.pyramidBox .btn-close{
    position: absolute;
    width: 2rem;
    height: 2rem;
    right: 1rem;
    top: 1rem;
    text-align: center;
    font-size: 2rem;
    color: #c9c9c9;
}
.pyramidBox .title{
    display: block;
    text-align: center;
    font-size: 2rem;
    color: #575757;
    line-height: 3rem;
    font-weight: bold;
}
.pyramidBox .descript{
    font-size: 1.4rem;
    color: #9b9ea3;
    display: block;
    text-align: center;
    line-height: 3rem;
}


/* 金字塔弹框  */
.pyramidBox .qlMT_content{
   padding: 3rem 0 2rem;

}
.pyramidBox .logo-pyramid{
    width: 16rem;
}

.pyramidBox .main{
    padding-bottom: 2rem;
}
.pyramidBox .btn-close{
    position: absolute;
    width: 2rem;
    height: 2rem;
    right: 1rem;
    top: 1rem;
    text-align: center;
    font-size: 2rem;
    color: #c9c9c9;
}
.pyramidBox .title{
    display: block;
    text-align: center;
    font-size: 2rem;
    color: #575757;
    line-height: 3rem;
    font-weight: bold;
}
.pyramidBox .descript{
    font-size: 1.4rem;
    color: #9b9ea3;
    display: block;
    text-align: center;
    line-height: 3rem;
}


/* 博士帽弹框  */
.doctorBox .qlMT_content{
   padding: 3rem 0 2rem;

}
.doctorBox .logo-doctor-tip{
    width: 16rem;
}

.doctorBox .main{
    padding-bottom: 2rem;
}
.doctorBox .btn-close{
    position: absolute;
    width: 2rem;
    height: 2rem;
    right: 1rem;
    top: 1rem;
    text-align: center;
    font-size: 2rem;
    color: #c9c9c9;
}
.doctorBox .title{
    display: block;
    text-align: center;
    font-size: 2rem;
    color: #575757;
    line-height: 3rem;
    font-weight: bold;
}
.doctorBox .descript{
    font-size: 1.4rem;
    color: #9b9ea3;
    display: block;
    text-align: center;
    line-height: 3rem;
}

/* 千聊帮你推弹框 */
.promoteHelper .main {
    text-align: center;
    border-radius: 1.3rem;
}

.promoteHelper .gotoVip {
    display: block;
}

.promoteHelper .gotoVip img {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}