@charset "utf-8";
/* CSS Document */
body{ background:#f3f5f7;}

.teach-box{ width:100%;height:360px; background:#2286c5 url(../../images/mobile/teach/teach_bg.jpg) no-repeat center top; }
.teach-box .teach-info{ text-align:center; color:#fff; width:90%; margin:0 auto;}
.teach-box .teach-info .img{ width:110px; height:110px; border-radius:50%; border:2px solid #fff; margin-top:7%;}
.teach-box .teach-info h3.name{font-size:22px;}
.teach-box .teach-info h4.msg{ font-size:16px; margin:5px 0 10px 0; color:#acd6f0;}
.teach-box .teach-info .info{ color:#fff; line-height:26px; font-size:16px; height:78px; overflow:hidden; text-align:left;}

.teach-class-info{ width:90%; background:#fff; margin-top:-30px; padding:15px 20px 20px; margin-bottom:7%;}
.teach-info-box{width:100%;}
.teach-info-box .moudle .tit{ position:relative; font-size:18px; border-bottom:1px solid #eee; padding-bottom:10px; color:#333;}
.teach-info-box .moudle .tit i.line{ position:absolute; left:-20px; top:6px; background:#32a8f5; width:3px; height:17px; display:block;}
.teach-info-box .moudle .tit a.back{position:absolute; right:0px; top:0px; width:60px; height:28px; line-height:28px; text-indent:1.8em; border:1px solid#e7e7e7; font-size:14px; background:#fff url(../../images/teach/back.png) no-repeat 5px center; color:#999; display:block; border-radius:3px; }
.teach-info-box .moudle .tit a.back:hover{background:#32a8f5 url(../../images/teach/back_h.png) no-repeat 5px center; color:#fff; border:1px solid#32a8f5;}

.class-list{ margin-top:15px;}
.class-list li{margin-bottom:1px;}
.class-list li a{ background:#fafafa; display:block; padding:13px 20px; min-height:26px; line-height:26px;font-size:16px;}
.class-list li.even a{background:#fff;}
.class-list li a:hover{ background:#f2f9fe;}
.class-list li em.title{ color:#333; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:100%;}
.class-list li span.time{ color:#999;}

.teach-msg{ background:#f7f7f7; color:#666; line-height:26px;font-size:16px; padding:15px 20px; margin-top:5%;}
.teach-msg strong{ font-weight:bold;}

.moudle .content{ line-height:26px; color:#333;font-size:16px;}
.moudle .content.class{ padding-bottom:25px;}
.moudle .content.class .info{ max-height:102px; overflow:hidden;}
.moudle .content.class .info.on{ max-height:none;}
.moudle .content .title{font-weight:bold; display:block;}
.moudle .content .more{ position:absolute; bottom:0px;}
.moudle .content .more a{ color:#32a8f5;}
.moudle .content .more a:hover{ color:#28a1ef;}

/*授课精彩瞬间*/
.teach-img-show{ width:100%;}
.teach-img-show .left-on{ background:rgba(50,168,245,0.7) url(../../images/mobile/jian_l.png) no-repeat center; width:55px; height:55px; position:absolute; left:-41px; top:150px; display:block; border-radius:3px; z-index:9;}
.teach-img-show .right-on{ background:rgba(50,168,245,0.7) url(../../images/mobile/jian_r.png) no-repeat center; width:55px; height:55px; position:absolute; right:-41px; top:150px; display:block;border-radius:3px; z-index:9;}
.teach-img-show .left-on:hover{  background:rgba(50,168,245,1) url(../../images/mobile/jian_l.png) no-repeat center;}
.teach-img-show .right-on:hover{  background:rgba(50,168,245,1) url(../../images/mobile/jian_r.png) no-repeat center;}

#teach-Scroll{ width:100%; overflow:hidden;height:450px;position:relative; }
.teach-list{ width:10000px;position:absolute; left:0; }
.teach-list li{ width:536px;  float:left; }
.teach-list .list .img{width:536px; height:336px; line-height:336px; padding:5px;background:#fff; border-radius:3px; border:1px solid #eee; text-align:center;}
.teach-list .list .big-img{max-width:526px; vertical-align:middle;}
.teach-list .list .zone-info{width:100%;}
.teach-list .list .zone-info .page{ position:absolute; right:0px; top:0px; color:#999; font-size:18px;}
.teach-list .list .zone-info .page i{font-size:24px; color:#6dc0f6;}
.teach-list .list .zone-info .title{ font-size:24px; color:#333; margin-top:10px; display:block; font-weight:500; width:88%;}
.teach-list .list .zone-info .text{color:#666; line-height:26px;  font-size:16px; }
@media screen and (min-width:300px) {
/*.wrapper{ width:320px;}*/
.teach-box{ height:285px; }
.teach-box .teach-info .img{ width:60px; height:60px; margin-top:7%;}
.teach-box .teach-info h3.name{font-size:14px;}
.teach-box .teach-info h4.msg{ font-size:12px;  margin:5px 0 5px 0; }
.teach-box .teach-info .info{line-height:22px; font-size:12px; height:140px;}

.teach-class-info{ margin-top:-25px; }
.teach-info-box .moudle .tit i.line{top:2px; }
.teach-info-box .moudle .tit{font-size:14px; }
.teach-info-box .moudle .tit a.back{ width:60px; height:25px; line-height:23px; text-indent:2em; font-size:12px; top:-3px;  }

.class-list li a{padding:10px 20px; min-height:22px; line-height:22px;font-size:12px;}

.teach-msg{ line-height:22px;font-size:12px; padding:15px 20px; }

.moudle .content{ line-height:22px;font-size:12px;}
.moudle .content.class{ padding-bottom:25px;}

.teach-img-show .left-on{ width:55px; height:55px;left:-41px; top:50px; }
.teach-img-show .right-on{  width:55px; height:55px; right:-41px; top:50px;}

#teach-Scroll{height:250px;position:relative; }
.teach-list li{ width:248px;}
.teach-list .list .img{width:248px; height:160px; line-height:140px;}
.teach-list .list .big-img{max-width:238px; }
.teach-list .list .zone-info .page{font-size:12px;}
.teach-list .list .zone-info .page i{font-size:14px;}
.teach-list .list .zone-info .title{ font-size:16px;}
.teach-list .list .zone-info .text{ line-height:22px;  font-size:12px; }
}
@media screen and (min-width:360px) {
/*.wrapper{ width:360px;}*/
.teach-box{ height:343px; }
.teach-box .teach-info .img{ width:70px; height:70px; margin-top:7%;}
.teach-box .teach-info h3.name{font-size:16px;}
.teach-box .teach-info h4.msg{ font-size:14px;  margin:5px 0 5px 0; }
.teach-box .teach-info .info{line-height:24px; font-size:14px; height:140px;}

.teach-class-info{ margin-top:-25px; }
.teach-info-box .moudle .tit{font-size:16px; }
.teach-info-box .moudle .tit i.line{top:2px; }
.teach-info-box .moudle .tit a.back{ width:60px; height:25px; line-height:23px; text-indent:1.8em; font-size:14px;  top:-3px;   }

.class-list li a{padding:10px 20px; min-height:24px; line-height:24px;font-size:14px;}

.teach-msg{ line-height:24px;font-size:14px; padding:15px 20px; }

.moudle .content{ line-height:24px;font-size:14px;}
.moudle .content.class{ padding-bottom:25px;}

.teach-img-show .left-on{ width:55px; height:55px;left:-41px; top:60px; }
.teach-img-show .right-on{  width:55px; height:55px; right:-41px; top:60px;}

#teach-Scroll{height:280px;position:relative; }
.teach-list li{ width:284px;}
.teach-list .list .img{width:284px; height:182px; line-height:160px;}
.teach-list .list .big-img{max-width:274px; }
.teach-list .list .zone-info .page{font-size:12px;}
.teach-list .list .zone-info .page i{font-size:14px;}
.teach-list .list .zone-info .title{ font-size:20px;}
.teach-list .list .zone-info .text{ line-height:24px;  font-size:14px; }
}
@media screen and (min-width:375px) {
/*.wrapper{ width:375px;}*/
.teach-box{ height:310px; }
.teach-box .teach-info .img{ width:70px; height:70px; margin-top:7%;}
.teach-box .teach-info h3.name{font-size:16px;}
.teach-box .teach-info h4.msg{ font-size:14px;  margin:5px 0 5px 0; }
.teach-box .teach-info .info{line-height:24px; font-size:14px; height:120px;}

.teach-class-info{ margin-top:-25px; }
.teach-info-box .moudle .tit{font-size:16px; }
.teach-info-box .moudle .tit i.line{top:0px; }
.teach-info-box .moudle .tit a.back{ width:60px; height:28px; line-height:26px; text-indent:1.8em; font-size:14px;  top:-3px;   }

.class-list li a{padding:10px 20px; min-height:24px; line-height:24px;font-size:14px;}

.teach-msg{ line-height:24px;font-size:14px; padding:15px 20px; }

.moudle .content{ line-height:24px;font-size:14px;}
.moudle .content.class{ padding-bottom:25px;}

.teach-img-show .left-on{ width:55px; height:55px;left:-41px; top:80px; }
.teach-img-show .right-on{  width:55px; height:55px; right:-41px; top:80px;}

#teach-Scroll{height:300px;position:relative; }
.teach-list li{ width:297px;}
.teach-list .list .img{width:297px; height:190px; line-height:170px;}
.teach-list .list .big-img{max-width:285px; }
.teach-list .list .zone-info .page{font-size:14px;}
.teach-list .list .zone-info .page i{font-size:16px;}
.teach-list .list .zone-info .title{ font-size:20px;}
.teach-list .list .zone-info .text{ line-height:24px;  font-size:14px; }
}

@media screen and (min-width:400px) {
/*.wrapper{ width:414px;}*/
.teach-box{ height:380px; }
.teach-box .teach-info .img{ width:80px; height:80px; margin-top:7%;}
.teach-box .teach-info h3.name{font-size:18px;}
.teach-box .teach-info h4.msg{ font-size:16px;  margin:5px 0 10px 0; }
.teach-box .teach-info .info{line-height:26px; font-size:16px; height:160px;}

.teach-class-info{ margin-top:-25px; }
.teach-info-box .moudle .tit{font-size:18px; }
.teach-info-box .moudle .tit i.line{top:0px; }
.teach-info-box .moudle .tit a.back{ width:60px; height:28px; line-height:28px; text-indent:1.8em; font-size:14px;   top:0px;  }

.class-list li a{padding:13px 20px; min-height:26px; line-height:26px;font-size:16px;}

.teach-msg{ line-height:26px;font-size:16px; padding:15px 20px; }

.moudle .content{ line-height:26px;font-size:16px;}
.moudle .content.class{ padding-bottom:25px;}

.teach-img-show .left-on{ width:55px; height:55px;left:-41px; top:80px; }
.teach-img-show .right-on{  width:55px; height:55px; right:-41px; top:80px;}

#teach-Scroll{height:330px;position:relative; }
.teach-list li{ width:332px;}
.teach-list .list .img{width:332px; height:210px; line-height:195px;}
.teach-list .list .big-img{max-width:322px; }
.teach-list .list .zone-info .page{font-size:14px;}
.teach-list .list .zone-info .page i{font-size:18px;}
.teach-list .list .zone-info .title{ font-size:20px;}
.teach-list .list .zone-info .text{ line-height:24px;  font-size:14px; }
}
@media screen and (min-width:480px) {
/*.wrapper{ width:480px;}*/
.teach-box{ height:360px; }
.teach-box .teach-info .img{ width:70px; height:70px; margin-top:7%;}
.teach-box .teach-info h3.name{font-size:18px;}
.teach-box .teach-info h4.msg{ font-size:16px; }
.teach-box .teach-info .info{line-height:26px; font-size:16px; height:140px;}

.teach-class-info{ margin-top:-30px; }
.teach-info-box .moudle .tit{font-size:18px; }
.teach-info-box .moudle .tit a.back{ width:60px; height:28px; line-height:28px; text-indent:1.8em; font-size:14px;  top:0px;   }

.class-list li a{padding:13px 20px; min-height:26px; line-height:26px;font-size:16px;}

.teach-msg{ line-height:26px;font-size:16px; padding:15px 20px; }

.moudle .content{ line-height:26px;font-size:16px;}
.moudle .content.class{ padding-bottom:25px;}

.teach-img-show .left-on{ width:55px; height:55px;left:-41px; top:150px; }
.teach-img-show .right-on{  width:55px; height:55px; right:-41px; top:150px;}

#teach-Scroll{height:380px;position:relative; }
.teach-list li{ width:392px;}
.teach-list .list .img{width:392px; height:248px; line-height:232px;}
.teach-list .list .big-img{max-width:382px; }
.teach-list .list .zone-info .page{font-size:16px;}
.teach-list .list .zone-info .page i{font-size:20px;}
.teach-list .list .zone-info .title{ font-size:20px;}
.teach-list .list .zone-info .text{ line-height:26px;  font-size:16px; }
}
@media screen and (min-width:568px) {
/*.wrapper{ width:568px;}*/
.teach-box{ height:360px; }
.teach-box .teach-info .img{ width:90px; height:90px; margin-top:7%;}
.teach-box .teach-info h3.name{font-size:20px;}
.teach-box .teach-info h4.msg{ font-size:16px; }
.teach-box .teach-info .info{line-height:26px; font-size:16px; height:128px;}

.teach-class-info{ margin-top:-30px;}
.teach-info-box .moudle .tit{font-size:18px; }
.teach-info-box .moudle .tit i.line{top:0px; }
.teach-info-box .moudle .tit a.back{ width:60px; height:28px; line-height:28px; text-indent:1.8em; font-size:14px;  top:0px;   }

.class-list li a{padding:13px 20px; min-height:26px; line-height:26px;font-size:16px;}

.teach-msg{ line-height:26px;font-size:16px; padding:15px 20px; }

.moudle .content{ line-height:26px;font-size:16px;}
.moudle .content.class{ padding-bottom:25px;}

.teach-img-show .left-on{ width:55px; height:55px;left:-41px; top:150px; }
.teach-img-show .right-on{  width:55px; height:55px; right:-41px; top:150px;}

#teach-Scroll{height:450px;position:relative; }
.teach-list li{ width:471px;}
.teach-list .list .img{width:471px; height:298px; line-height:270px;}
.teach-list .list .big-img{max-width:460px; }
.teach-list .list .zone-info .page{font-size:18px;}
.teach-list .list .zone-info .page i{font-size:22px;}
.teach-list .list .zone-info .title{ font-size:22px;}
.teach-list .list .zone-info .text{ line-height:26px;  font-size:16px; }
}
@media screen and (min-width:638px) {
.wrapper{ width:638px;}
.teach-box{ height:390px; }
.teach-box .teach-info .img{ width:110px; height:110px;}
.teach-box .teach-info h3.name{font-size:22px;}
.teach-box .teach-info h4.msg{ font-size:16px; }
.teach-box .teach-info .info{line-height:26px; font-size:16px; height:108px;}

.teach-class-info{ margin-top:-30px;}
.teach-info-box .moudle .tit{font-size:18px; }
.teach-info-box .moudle .tit i.line{top:0px; }
.teach-info-box .moudle .tit a.back{ width:60px; height:28px; line-height:28px; text-indent:1.8em; font-size:14px;  top:0px;  }

.class-list li a{padding:13px 20px; min-height:26px; line-height:26px;font-size:16px;}

.teach-msg{ line-height:26px;font-size:16px; padding:15px 20px; }

.moudle .content{ line-height:26px;font-size:16px;}
.moudle .content.class{ padding-bottom:25px;}

.teach-img-show{ width:100%;}
.teach-img-show .left-on{ width:55px; height:55px;left:-41px; top:150px; }
.teach-img-show .right-on{  width:55px; height:55px; right:-41px; top:150px;}

#teach-Scroll{height:450px;position:relative; }
.teach-list li{ width:535px;}
.teach-list .list .img{width:535px; height:335px; line-height:320px;}
.teach-list .list .big-img{max-width:520px; }
.teach-list .list .zone-info .page{font-size:18px;}
.teach-list .list .zone-info .page i{font-size:24px;}
.teach-list .list .zone-info .title{ font-size:24px;}
.teach-list .list .zone-info .text{ line-height:26px;  font-size:16px; }
}
