添加样式图片

@@ -79,4769 +79,668 @@ img {
   -webkit-text-stroke-width: 0px;
   -webkit-text-stroke-width: 0px;
   -moz-osx-font-smoothing: grayscale;
   -moz-osx-font-smoothing: grayscale;
 }
 }
-/*新加按钮*/
-.markDiv{
-  float: right;
-  /*width:112px;*/
-  height: 32px;
+
+body{
+  background: #f2f6f7;
+}
+.baseboardBox{
   position: relative;
   position: relative;
+  overflow: hidden;
 }
 }
-.setUpInfo{
-  color:#b3b3b3;
-  margin-top: 15px;
-  margin-right: 13px;
-  float: right;
-  cursor: pointer;
-  display: none;
+/*头部*/
+.headerBg{
+  width:100%;
+  height:68px;
+  background: #fff;
 }
 }
-.iconVideo,.iconAudio,.iconRaise{
-  cursor: pointer;
-  display: inline-block;
+.header{
+  width:1220px;
+  height:70px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
 }
 }
-.markDiv .iconVideo1,.markDiv .iconAudio1{
-  display: inline-block;
-  margin-top:15px;
-  margin-right:13px;
-  color:#b3b3b3;
-  float: right;
+/*图片*/
+.header_img{
+  float: left;
+  margin: 15px 50px 0 0;
 }
 }
-.markDiv .iconVideo,.markDiv .iconAudio,.markDiv .iconBanned,.markDiv .iconBanned1,.markDiv .iconKick{
-  margin-top:15px;
-  margin-right:13px;
-  color:#b3b3b3;
-  float: right;
+.header_list{
+  float: left;
+}
+.header_listMsg{
+  float: left;
   cursor: pointer;
   cursor: pointer;
+  font-size: 16px;
+  color:#333333;
+  padding-right:35px;
+  text-align: center;
+  line-height: 70px;
 }
 }
-.markDiv .iconBanned,.markDiv .iconBanned1{
-  margin-right:11px;
+.header_listTeacherMsg{
+  padding-right:55px;
 }
 }
-.medioClose{
-  cursor: pointer;
-  margin-top:15px;
-/*  position: absolute;*/
-  display:none;
-  float: right;
-  margin-right:13px;
+.header_listMsg.active{
+  color:#3498db;
 }
 }
-.medioClose1{
-  cursor: pointer;
-  margin-top:15px;
-  margin-right:13px;
-  /*position: absolute;*/
-  display:none;
-  float: right;
+.header_listMsg:selected{
+  color:#3498db;
+}
+.header_seek{
+  float: left;
+  width: 240px;
+  color:#ccc;
+  position: relative;
+}
+.header_seekInput{
+  border:1px solid transparent;
+  border-bottom:1px solid #ccc;
+  width:100%;
+  display: inline-block;
+  margin-top: 26px;
+}
+.header_seekBtn{
+  position: absolute;
+  bottom:10px;
+  right:0;
 }
 }
-.iconRaise{
-  margin-top:15px;
-  margin-right:13px;
-  color: #d95136;
-  width:16px;
-  height:16px;
-  display:none;
+.DownloadLoginBox{
   float: right;
   float: right;
+  font-size: 16px;
 }
 }
-.iconKick{
-  display: none;
+.DownloadLoginBox li{
+  float: left;
 }
 }
-.raiseNum{
-  color:#d95136;
-  padding-left:8px;
+.androidDownload{
+  position: relative;
+  padding-left:25px;
+  line-height: 70px;
+  color:#666666;
 }
 }
-.controlBrush{
-  cursor: pointer;
-  width: 20px;
-  height:20px;
+.androidDownload:after{
+  content: "";
   position: absolute;
   position: absolute;
-  right:30px;
-  top:6px;
-  z-index:1;
-  background: url(../images/tool/pencilClick.png) no-repeat;
-  background-size: 100%;
-  display: none;
+  display: block;
+  width: 15px;
+  height: 15px;
+  background: url(../images/DL.png) no-repeat;
+  left:0;
+  top:28px;
 }
 }
-.controlBrushClick{
-  background: url(../images/tool/pencil.png) no-repeat;
-  background-size: 100%;
-  width:20px;
+.userNews{
+  float: left;
+  font-size: 16px;
+  line-height: 70px;
+  margin-left:20px;
 }
 }
-.raiseBtn{
+.userLoginBtn{
+  width:30px;
+  height:30px;
+  border-radius: 50%;
+  background: #ccc;
+  background: url(../images/logo.png) no-repeat;
+  margin:12px 0 0 15px;
   cursor: pointer;
   cursor: pointer;
-  color:#b3b3b3;
-  font-size: 20px;
+}
+/*轮播图*/
+.slideshow{
+  width:100%;
+  height:540px;
+  overflow: hidden;
+  position: relative;
+}
+.motionMapBox{
+  height:540px;
   position: absolute;
   position: absolute;
-  right:30px;
-  top:5px;
-  z-index:1;
 }
 }
-.raiseBtn:hover{
-  color: #ccc;
+.slidesMap{
+  float: left;
+  height:540px;
 }
 }
-.raiseBtn.active{
-  color: #3498db;
+.slidesImg{
+  height:540px;
 }
 }
-.iconBanned{
-  width:18px;
-  height:18px;
-  background: url(../images/banned/chat-student-hover.png) no-repeat;
+.dots{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 20px;
+  text-align: center;
 }
 }
-/*.iconBanned:hover{*/
-  /*background: url(../images/banned/chat-student-normal.png) no-repeat;*/
-/*}*/
-.iconBanned1{
-  width:18px;
-  height:18px;
-  background: url(../images/banned/-silenced--student-hover-.png) no-repeat;
+.dots li{
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 4px;
+  text-indent: -999em;
+  border: 2px solid #fff;
+  border-radius: 6px;
+  cursor: pointer;
+  opacity: .4;
+  -webkit-transition: background .5s, opacity .5s;
+  -moz-transition: background .5s, opacity .5s;
+  transition: background .5s, opacity .5s;
 }
 }
-.iconBanned1:hover{
-  background: url(../images/banned/-silenced--student-normal.png) no-repeat;
+.dots li.active{
+  background: #fff;
+  opacity: 1;
 }
 }
-
-html,body {
-  background: #262626;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-  /*position: fixed;*/
+/*主题盒子*/
+.themeBox{
+  width:1220px;
+  height:auto;
+  left:0;
+  right:0;
+  margin:0 auto;
+  min-height: 1000px;
 }
 }
-
-.header{
-  height: 48px;
-  line-height: 48px;
-  background: #262626;
-  position: absolute;
+/*首页*/
+.box{
   width: 100%;
   width: 100%;
-  top: 0;
-  left: 0;
+  height:auto;
+  left:0;
+  right:0;
+  margin:0 auto;
+  min-height: 1000px;
 }
 }
-.classStatusIcon{
+.curriculumBox{
   float: left;
   float: left;
-  margin-left: 20px;
-  font-size: 14px;
-  color: #CCCCCC;
 }
 }
-.classStatus{
-  float: left;
-  color: #d95136;
-  margin-left: 10px;
-  font-size: 14px;
+.curriculumBox1{
+  margin-bottom:60px;
 }
 }
-.curClassUserNum{
-  float: left;
-  width: 95px;
-  font-size: 12px;
-  margin-left: 30px;
-  color: #595959;
+.curriculumHandler{
+  margin:60px 0 26px 0;
 }
 }
-.curClassUserNum  .curClassUserNumTotal{
-  margin-left: 10px;
-  color: #999;
+.curriculumTitle{
+  font-size: 22px;
+  float:left;
 }
 }
-.classTheme {
-  float: left;
-  margin-left: 20px;
-  color: #fff;
-  font-size: 14px;
+.curriculumMove{
+  padding:4px 10px 0 20px;
+  display: inline-block;
+  cursor: pointer;
 }
 }
-.exitText{
-  float: right;
-  font-size: 14px;
-  margin-left: 10px;
-  color: #CCC;
+.curriculumIcon{
   cursor: pointer;
   cursor: pointer;
 }
 }
-/*header 头部公共样式*/
-.header_title{
-  float: right;
-  margin-right: 24px;
-  color: #CCC;
+.curriculumList{
+  width:286px;
+  height:280px;
+  float: left;
+  background: #fff;
+  margin-right:25px;
   cursor: pointer;
   cursor: pointer;
 }
 }
-.header_text{
-  float: right;
+.curriculumList:hover{
+  box-shadow: 1px 5px 15px #adadad;
+}
+.curriculumListImg{
+  width:100%;
+  height:194px;
+  border: 1px solid transparent;
+}
+.curriculumListTit{
   font-size: 14px;
   font-size: 14px;
-  margin-left: 10px;
-  color: #CCC;
-  cursor: pointer;
+  color: #333333;
+  float: left;
+  width: 100%;
+  padding:15px 0 25px 10px;
+}
+.curriculumListInfo{
+  float: left;
+  width:100%;
+  padding-bottom:12px;
 }
 }
-.header_title:hover,.header_text:hover{
-  color: #e5e5e5;
+.curriculumListTime{
+  float: left;
+  font-size: 12px;
+  color:#f55c22;
+  padding-left:10px;
 }
 }
-.setting:active, .settingText:active {
-  color: #d95136;
+.curriculumListNum{
+  float: right;
+  font-size: 12px;
+  color:#666666;
+  padding-right:10px;
 }
 }
-.help{
+/*课堂分类列表*/
+.classifyListBox{
+  width: 100%;
+  float: left;
   display: none;
   display: none;
 }
 }
-.help:active, .helpText:active {
-  color: #d95136;
+.classifyListTitle{
+  float: left;
+  width: 100%;
+  font-size: 22px;
+  margin: 60px 0 26px 0;
 }
 }
-/*header 头部公共样式 end*/
-.mainContentBox{
-  position: absolute;
+.classifyListContent{
   width: 100%;
   width: 100%;
-  top: 51px;
-  bottom: 0;
-  background: #262626;
+  height:915px;
+  float: left;
 }
 }
-.leftWarp{
-  position: relative;
-  height: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  border-radius: 3px;
-  overflow-x: hidden;
-  overflow-y: hidden;
+.classifyList{
+  width: 286px;
+  height: 280px;
+  float: left;
+  background: #fff;
+  margin-right: 25px;
+  cursor: pointer;
+  margin-bottom:25px;
 }
 }
-.leftWarp_top{
+.classifyList:hover{
+  box-shadow: 1px 5px 15px #adadad;
+}
+.classifyListR{
+  margin-right:0px;
+}
+.pageNumContentBox{
   width:100%;
   width:100%;
-  height:100%;
+  height: 40px;
+  padding:30px 0 55px 0;
   float: left;
   float: left;
-}
-.left{
   position: relative;
   position: relative;
-  float: left;
-  width: 48px;
-  height: 100%;
-  background: #474749;
-  /*bottom: 10px;*/
-
 }
 }
-.docUploadOut{
-  margin-left: 8px;
-  position: relative;
-  display: none;
+.pageNumContent{
+  max-width: 480px;
+  position: absolute;
+  left:0;
+  right:0;
+  margin:0 auto;
+  text-align: center;
 }
 }
-.docUpload{
-  font-size: 28px;
-  margin-left: 8px;
-  color: #b3b3b3;
+.pageNumBtn{
+  display: inline-block;
+  width:40px;
+  height:40px;
+  border-radius: 3px;
+  border:1px solid #ebebeb;
+  margin-right:15px;
+  text-align: center;
+  line-height: 40px;
+  background: #fff;
+  color:#666666;
   cursor: pointer;
   cursor: pointer;
 }
 }
-.docUpload input{
-  position: absolute;
-  left: 1px;
-  /*top: 24px;*/
-  width: 48px;
-  cursor: pointer;
-  margin: 10px;
-   opacity: 0;
+.pageNumBtnCheck{
+  background: #3498db;
+  color:#fff;
+  border:1px solid #3498db;
 }
 }
-.docUploadForbid{
-  height: 80px;
-  width: 60px;
-  position: absolute;
+/*互动课堂*/
+.lanclassBox{
+  width:100%;
   left:0;
   left:0;
-  top:0;
-  display: none;
+  right:0;
+  margin:0 auto;
+  height:auto;
+  min-height:600px;
+}
+.lanclassContent{
+  height:345px;
+  background: #fff;
+  margin-top:40px;
+  padding-left:30px;
+}
+.teacherInfos{
+  margin-bottom:40px;
+}
+.lanclassContentCover{
+  width:404px;
+  height:278px;
+  margin:30px 75px 30px 0px;
+  float: left;
 }
 }
+/*老师详细信息*/
+.lanclassContentTitle{
+  font-size: 24px;
+  color: #333333;
+  padding:30px 0;
+}
+.lanclassContentInfo{
 
 
-.docListOut{
-  height: 36px;
-  width: 44px;
-  margin-top: 20px;
-  padding-top: 8px;
-  border-radius: 3px;
 }
 }
-.docListOut1{
-  display: none;
+.lanclassContentInfoPortrait{
+  width:46px;
+  height:46px;
+  border-radius: 50%;
+  padding-bottom: 20px;
 }
 }
-.docListOut:hover{
-  border-radius: 3px;
-  background-color: #666;
-  cursor: pointer;
+.lanclassContentInfoName{
+  padding-left:20px;
+  font-size: 16px;
+  color: #333333;
 }
 }
-.docListOut:active{
-  border-radius: 3px;
-  background-color: #313131;
-  cursor: pointer;
+.lanclassContentInfoTime{
+  font-size: 16px;
+  color: #333333;
 }
 }
-.docList{
-  font-size: 28px;
-  margin-left: 8px;
-  color: #b3b3b3;
-  cursor: pointer;
+.lanclassContentInfoTimeStart{
+  display:inline-block;
+  width: 100%;
 }
 }
-/*文件上传*/
-.am-modal-dialog .doc-headline{
-  font-size: 14px;
-  color: #fff;
+.lanclassContentInfoTimeEnd{
+  display:inline-block;
+  width: 100%;
+  padding-top:10px;
+}
+.lanclassContentApply{
+  width:180px;
+  height:48px;
   background: #3498db;
   background: #3498db;
-  height: 32px;
-  line-height: 32px;
-  text-align: left;
-  padding-left: 15px;
+  border-radius: 3px;
+  color:#fff;
+  text-align: center;
+  line-height: 48px;
+  font-size: 16px;
+  margin-top:50px;
+  cursor: pointer;
 }
 }
-.doc-headline a{
+.lanclassContentCenter{
+  float: left;
+}
+/*第三方登录 收藏*/
+.lanclassContentRight{
   float: right;
   float: right;
-  margin-right: 10px;
-  color: white;
-
+  height: 100%;
+  position: relative;
 }
 }
-.doc-headline a:hover{
-  color: white;
-
+.thirdPartyIconBox{
+  padding:30px 30px 0 0;
 }
 }
-.am-modal-bd-file{
-  height: 256px;
-  width: 398px;
-
+.thirdPartyIcon{
+  width:24px;
+  height:24px;
+  display: inline-block;
+  padding-left:10px;
+  cursor: pointer;
 }
 }
-.am-modal-bd-file .push-file{
-  display: none;
-  width: 360px;
-  margin: 0 auto;
-  border-bottom: 1px solid #CCCCCC;
+.weixinIcon{
+  color: #09bb07;
+}
+.qqIcon{
+  color: #3cc3f5;
+}
+.weiboIcon{
+  color: #d32024;
+}
+.collectBox{
+  position: absolute;
+  left:0;
+  bottom:30px;
   cursor: pointer;
   cursor: pointer;
-
 }
 }
-.am-modal-bd-file .push-file span,.am-modal-bd-file .push-file a{
-  float: right;
+.collectIcon{
+  padding:0 20px 5px 0;
+}
+.collectText{
+  font-size: 16px;
+  color:#333333;
 }
 }
-.am-modal-bd-file .push-file span{
-  margin: 8px 11px 8px 0;
-  width: 16px;
-  height: 16px;
+/*课堂介绍*/
+.lanclassIntroduceTitle{
+  padding:40px 0 20px 0px;
+  color:#333333;
+  font-size: 20px;
 }
 }
-.am-modal-bd-file .push-file a{
-  margin: 10px 10px 10px 0;
+.lanclassIntroduceContent{
+  padding-right: 30px;
   font-size: 12px;
   font-size: 12px;
-  color: #333333;
+  color:#333333;
 }
 }
-.am-modal-bd-file  a input{
-  width: 0;
-  height: 0;
-
+/*老师简介*/
+.teacherInfoData{
+  color:#3cc3f5;
+  font-size: 16px;
+  margin-bottom:30px;
 }
 }
-.am-modal .am-modal-bd-file .push-file .file-ul{
-  width: 398px;
-  height: 224px;
-  overflow:hidden;
-
+.teacherInfoName{
+  padding-right:30px;
 }
 }
-.file-ul li{
-  height: 16px;
-  line-height: 16px;
-  margin-top: 16px;
+/*底部*/
+.footerBg{
+  width:100%;
+  height:180px;
+  background: #404040;
+  float: left;
 }
 }
-.file-ul li:nth-child(1){
-  margin-top: 20px;
+.footer{
+  width:1220px;
+  height:180px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
 }
 }
-.file-ul li span:nth-child(1){
-  float: left;
-  margin:0 10px 0  30px;
-
 
 
+.footerLeft{
+  float: left;
+}
+.footerLeftList{
+  padding-top:70px;
 }
 }
-.file-ul li span:nth-child(2){
+.footerLeftListMsg{
   float: left;
   float: left;
-  margin:0 10px;
+  color:#ccc;
+  padding-right:6px;
   font-size: 12px;
   font-size: 12px;
-  color: #333333;
-}
-.file-ul li span:nth-child(3){
-  float: right;
-  margin-right: 30px;
   cursor: pointer;
   cursor: pointer;
 }
 }
+.copyrightMsg{
+  color: #999999;
+  font-size: 12px;
+  float: left;
+  padding-top:20px;
+}
 
 
-.middle{
-  position: relative;
-  height: 100%;
-  /*bottom: 10px;*/
-   -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-   box-sizing: border-box;
-  border-radius: 3px;
-  background: #353537;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  margin-left: 10px;
+/*注册*/
+.userSignBox{
+  width:100%;
+  height:100%;
+  background: rgba(0, 0, 0, .7);
+  position: absolute;
+  left:0;
+  top:0;
 }
 }
-.docBox{
-  position: absolute;
-  /*top: 10px;*/
-  top: 0px;
-  width: 100%;
-  bottom: 43px;
-}
-.doc{
-  position: absolute;
-  left:0;
-  top:0;
-  bottom: 52px;
-  width: 100%;
-  height: 100%;
-}
-.docView{
-  position: absolute;
-  left:0;
-  top:0;
-  bottom: 52px;
-  cursor: default;
-}
-.framePPT{
-  position: absolute;
-  left:0;
-  top:0;
-  bottom: 52px;
-  cursor: default;
-  width: 100%;
-  height: 100%;
-}
-.canvasContent{
-  position: absolute;
-  left:0;
-  top:0;
-  bottom: 52px;
-  cursor: default;
-  /*cursor: Crosshair;*/
-  /*width: 100%;*/
-  /*height: 100%;*/
-  /*width: 600px;*/
-}
-.laserBoard{
-  position: absolute;
-  left:0;
-  top:0;
-  bottom: 52px;
-  cursor: default;
-  /*cursor: Crosshair;*/
-  width: 100%;
-  height: 100%;
-  /*width: 600px;*/
-}
-
-.laserRed{
-  /*display: none;*/
-  position: absolute;
-  left:0;
-  top:0;
-  width: 20px;
-  height: 20px;
-  background: url(../images/tool/pen.png) no-repeat;
-}
-.foldDrawToolOut{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 85px;
-  height: 16px;
-  border: none;
-
-}
-
-.foldDrawToolOut .foldDrawTool{
-  position: absolute;
-  /*top: 10px;*/
-  top: 0px;
-  left: 0;
-  width: 40px;
-  height: 16px;
-  background-color: #3d3d3d;
-  border: 1px solid #2f2f30;
-  border-bottom: 0px;
-  cursor: pointer;
-}
-.foldDrawTool .arrowTop{
-  display: block;
-  width: 0;
-  height: 0;
-  position: absolute;
-  left: 16px;
-  top: 4px;
-  border-left: 4px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 6px solid #fff;
-}
-.foldDrawTool .arrowBottom{
-  display: none;
-  width: 0;
-  height: 0;
-  border-left: 4px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 6px solid #fff;
-  position: absolute;
-  left: 16px;
-  top: 4px;
-}
-.foldDrawToolOut .unfoldDrawTool{
-  position: absolute;
-  top: 10px;
-  left: 45px;
-  width: 40px;
-  height: 16px;
-  background-color: #3d3d3d;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  cursor: pointer;
-}
-.drawTool{
-  position: absolute;
-  left: 0;
-  /*top: 27px;*/
-  top: 17px;
-  width: 40px;
-  line-height: 210px;
-  background-color: #474749;
-  border: 1px solid #2f2f30;
-  border-bottom-right-radius: 3px;
-  border-top: 0px;
-  z-index: 1;
-}
-.toolColor{
-  display: none;
-  position: absolute;
-  top: 0px;
-  left: 41px;
-  width: 40px;
-  height: 210px;
-  line-height: 210px;
-  background-color: #474749;
-  border: 1px solid #2f2f30;
-  border-bottom-right-radius: 3px;
-  border-top: 0px;
-  z-index: 0;
-}
-.toolForm{
-  display: none;
-  position: absolute;
-  top: 0px;
-  left: 41px;
-  width: 40px;
-  height: 250px;
-  line-height: 250px;
-  background-color: #474749;
-  border: 1px solid #2f2f30;
-  border-bottom-right-radius: 3px;
-  border-top: 0px;
-  z-index: 0;
-}
-.toolColorList{
-  float: left;
-  width: 28px;
-  height: 28px;
-  cursor: pointer;
-  list-style: none;
-  border-radius: 0;
-}
-.toolColor .redColor {
-  margin: 20px 0 20px 6px;
-  background: url(../images/colorRed.png) no-repeat;
-}
-.toolColor .blueColor {
-  margin: 0px 0 20px 6px;
-  background: url(../images/colorBlue.png) no-repeat;
-}
-.toolColor .purpleColor {
-  margin: 0px 0 20px 6px;
-  background: url(../images/colorPurple.png) no-repeat;
-}
-.toolColor .yellowColor {
-  margin-left:6px;
-  background: url(../images/colorYellow.png) no-repeat;
-}
-.toolForm{
-  top: 50px;
-}
-.straightBrush{
-  margin: 20px 0 20px 10px;
-  background: url(../images/tool/line.png) no-repeat;
-}
-.circleBrush{
-  margin: 0px 0 20px 10px;
-  background: url(../images/tool/-circle.png) no-repeat;
-}
-.curveBrush{
-  margin: 5px 0 10px 10px;
-  background: url(../images/tool/curve.png) no-repeat;
-}
-.squareBrush{
-  margin: 0px 0 20px 10px;
-  background: url(../images/tool/tetragonum.png) no-repeat;
-}
-.customBrush{
-  margin-left:10px;
-  background: url(../images/tool/custom.png) no-repeat;
-}
-.brushInfo{
-  float: left;
-  margin: 0px 0 20px 9px;
-  width: 28px;
-  height: 28px;
-  cursor: pointer;
-  list-style: none;
-  border-radius: 0;
-}
-.drawTool .showColor{
-  margin: 20px 0 20px 6px;
-  background: url(../images/colorRed.png) no-repeat;
-}
-.showForm{
-  display: none;
-  margin-left: 6px;
-  background: url(../images/tool/rectangle.png) no-repeat;
-  background-size: 100%;
-}
-.drawTool .pencil{
-  background: url(../images/tool/pencil.png) no-repeat;
-}
-.drawTool .rescind{
-  background: url(../images/tool/rescind.png) no-repeat;
-}
-.drawTool .laserPen{
-  background: url(../images/tool/laserPen.png) no-repeat;
-}
-.drawTool .clearContent{
-  background: url(../images/tool/clearContext.png) no-repeat;
-}
-
-.botTurn{
-  position: absolute;
-  bottom: 0px;
-  height: 42px;
-  line-height: 42px;
-  width: 100%;
-  background: #414143;
-}
-
-.next-page .nextPage{
-  float: right;
-  margin:12px 10px 0 0;
-  width: 20px;
-  height: 20px;
-  /*background:url("../images/right-normal.png") no-repeat;*/
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  background: #333333;
-  position: relative;
-}
-.next-page .nextPage:active{
-  background: #595959;
-  border: 1px solid #595959;
-  border-radius: 3px;
-}
-
-.next-page .nextPage .arrowRight{
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-left: 6px solid #CCC;
-  border-bottom: 4px solid transparent;
-  position: absolute;
-  left: 8px;
-  top: 5px;
-}
-.total-page{
-  float: right;
-  color: #CCCCCC;
-  font-size: 12px;
-  margin-top: 14px;
-  width: 14px;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
- margin-right: 5px;
-}
-.total-page span{
-  font-size: 12px;
-  color: #ccc;
-}
-.bias{
-  float: right;
-  height: 42px;
-  line-height: 50px;
-  color: #ccc;
-}
-.cur-page{
-  float: right;
-  color: #CCCCCC;
-  font-size: 12px;
-  margin-left: 5px;
-  margin-top: 14px;
-  width: 14px;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-
-}
-.cur-page input{
-  float: right;
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  opacity: 0.5;
-  color: white;
-  background: #333;
-  border: 0;
-  text-align: center;
-}
-
-/*上一页*/
-.prev .prevPage{
-  float: right;
-  margin-top: 12px;
-  width: 20px;
-  height: 20px;
-  /* background: url(../images/left-normal.png) no-repeat; */
-  background: #333;
-  cursor: pointer;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  position: relative;
-}
-.prev .prevPage:active{
- background: #595959;
-  border: 1px solid #595959;
-  border-radius: 3px;
-}
-.prev .prevPage .arrowLeft{
-  width: 0px;
-  height: 0px;
-  border-top: 5px solid transparent;
-  border-right: 6px solid #ccc;
-  border-bottom: 4px solid transparent;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  margin: 6px;
-}
-
-/*上一步/下一步动画*/
-.pptNextStep{
-  float: right;
-  margin-right: 10px;
-  font-size: 20px;
-  color: #CCCCCC;
-  cursor: pointer;
-}
-
-.pptPrevStep{
-  float: right;
-  margin-right: 10px;
-  font-size: 20px;
-  color: #CCCCCC;
-  cursor: pointer;
-}
-
-
-/*适应宽  高  正常*/
-.setAdaptWH{
-  float: right;
-  margin-right: 10px;
-  font-size: 24px;
-  color: #CCCCCC;
-  cursor: pointer;
-  margin-top:2px;
-}
-.setAdaptWH:hover{
-  color: #e5e5e5;
-}
-.setAdaptWH:active{
-  color: #3498db;
-}
-.fitHeight{
-  margin-right: 20px;
-}
-.version{
-  float: left;
-  margin-left: 10px;
-  color: #666;
-  font-size: 10px;
-}
-.fold{
-  float: right;
-  position: relative;
-  width: 2px;
-  height: 100%;
-  /* background: bisque;
-  margin-left: 10px;
-  margin-left: 13px;*/
-}
-
-.fold .expand{
-  display: none;
-  position: absolute;
-  right: 410px;
-  top: 42%;
-  left: 0;
-  width: 11px;
-  height: 130px;
-  line-height: 130px;
-  background-color: #474747;
-  color: #ffffff;
-  cursor: pointer;
-  border-top-left-radius: 50px;
-  border-bottom-left-radius: 50px;
-}
-/*新版flash的容器-垂直布局*/
-.flashViewBoxV{
-  width:320px;
-  height:500px;
-}
-
-.right{
-  float: right;
-  /*margin-right: 10px;*/
-  width: 320px;
-  height: 100%;
-  position: relative;
-}
-/*箭头*/
-.arrowsBtn{
-  width: 11px;
-  height: 130px;
-  position: absolute;
-  left:0;
-  top:40%;
-}
-.arrowsBtn>div{
-  width: 11px;
-  height: 130px;
-  line-height: 130px;
-  background-color: #595959;
-  color: #ffffff;
-  cursor: pointer;
-  display: none;
-}
-.arrowsBtn .arrowsLeft{
-  border-top-right-radius: 50px;
-  border-bottom-right-radius: 50px;
-}
-.arrowsBtn .arrowsRight{
-  border-top-left-radius: 50px;
-  border-bottom-left-radius: 50px;
-}
-.arrowsLeft p, .arrowsRight p{
-  width:0px;
-  height:0px;
-  border:8px solid transparent;
-  top:45%;
-  position: absolute;
-}
-.arrowsLeft p{
-  border-left-color:#fff;
-}
-.arrowsRight p{
-  border-right-color:#fff;
-  left:-5px;
-}
-.videoWindow{
-  position: absolute;
-  /*right: 10px;*/
-  width: 320px;
-  height: 240px;
-  background: #474747;
-}
-.audioDivBox .audioBg{
-  position: absolute;
-  /*z-index: 4;*/
-  left: 0;
-  top: 0;
-  width: 320px;
-  height: 240px;
-  background: url(../images/audioing.png) no-repeat center center;
-  background-color: #474747;
-}
-
-.videoWindow .replayVideo{
-  z-index: 2;
-}
-.videoWindow .videoDivBox{
-  position: absolute;
-  z-index: 1;
-  top: 0;
- }
-
-.btnStopArea{
-  float: left;
-  width: 16px;
-  height: 29px;
-  margin-left: 26px;
-  position: relative;
-}
-.btnStopPublishVideo{
-  top: -4px;
-  left: 0px;
-  width: 16px;
-  height: 29px;
-  cursor: pointer;
-  background: url(../images/hangup.gif) no-repeat center center;
-  position: absolute;
-}
-.btnStopPublishAudio{
-  top: -4px;
-  left: 0px;
-  width: 16px;
-  height: 29px;
-  cursor: pointer;
-  background: url(../images/hangup.gif) no-repeat center center;
-  position: absolute;
-}
-.discussAndUsers{
-  position: absolute;
-  width: 320px;
-  top: 250px;
-  /*bottom: 10px;*/
-  bottom: 0px;
-  border-radius: 3px;
-  background: #474747;
-}
-/*右侧讨论和人员列表*/
-.discussAndUsers .tabTitle{
-  position: absolute;
-  top:0;
-  left: 0;
-  width: 320px;
-  height: 32px;
-  color: #ffffff;
-  border-bottom:1px solid #666;
-  z-index: 1;
-}
-.tabTitle .select{
-  border-bottom:1px solid #3498db;
-}
-.discussAndUsers .discussTitle{
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 32px;
-  line-height: 32px;
-  width: 40%;
-  cursor: pointer;
-  text-align: center;
-  border-bottom:1px solid #3498db;
-}
-.discussTitle span:nth-of-type(2){
-  margin-left: 16px;
-}
-.userListIcon{
-  font-size: 14px;
-}
-.discussAndUsers .userListTitle{
-  position: absolute;
-  top: 0;
-  left: 40%;
-  height: 32px;
-  line-height: 32px;
-  width: 40%;
-  border-bottom:1px solid #666;
-  cursor: pointer;
-  text-align: center;
-}
-
-.userListTitle span:nth-of-type(2){
-  margin-left: 16px;
-}
-
-.discussAndUsers .tabCon{
-  position: absolute;
-  right: 0;
-  top: 32px;
-  bottom: 0;
-  width: 320px;
-  background: #474747;
-  border-radius: 3px;
-}
-.discussAndUsers .curClassOn{
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-.discussAndUsers .curClassOn .curClassUserNum{
-  position: absolute;
-  left:0;
-  top: 0;
-  width: 310px;
-  height: 32px;
-  line-height: 32px;
-  padding-left: 17px;
-  border-bottom:1px solid #3b3b3b;
-  color: #3498db;
-  font-size: 14px;
-}
-.discussAndUsers .curClassOn .curClassUserList{
-  position: absolute;
-  left: 0;
-  top:0;
-  bottom: 0;
-  width: 320px;
-  background: #474747;
-  border-radius: 3px;
-}
-.userAvatar{
-  float:left;
-  margin-left: 14px;
-  color: #ccc;
-  display: inline-block;
-  margin-top: 11px;
-  font-size: 16px;
-  width:22px;
-  height:20px;
-}
-.userInfo{
-  float: left;
-  margin-left: 13px;
-  margin-top: 14px;
-}
-.nameDiv{
-  float: left;
-  font-size: 14px;
-  width: 90px;
-  height:16px;
-  color: #ccc;
-  overflow: hidden;
-}
-.userStatus{
-  float: left;
-  font-size: 10px;
-  color:#999;
-}
-.discussAndUsers .selectdOn{
-  display: block;
-}
-.discussAndUsers .curClassOn{
-  bottom:10px;
-}
-.discussAndUsers .chat {
-  position: absolute;
-  right: 0px;
-  top: 0px;
-  bottom: 0;
-  width: 320px;
-  background: #474747;
-  border-radius: 3px;
-}
-.discussAndUsers .chat .msg-border{
-  position: absolute;
-  border-top: none;
-  border-left: none;
-  border-bottom: none;
-  width: 320px;
-  bottom: 73px;
-  top: 0px;
-}
-
-/* 设置滚动条的样式 */
-::-webkit-scrollbar {
-   width: 8px;
-   height: 8px;
- }
-/* 滚动槽 */
-::-webkit-scrollbar-track {
-  /*-webkit-box-shadow: inset 0 0 4px #474749;*/
-  border-radius: 10px;
-  margin-right: 10px;
-}
-
-/* 滚动条滑块 */
-::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  width: 1px;
-  background: #666;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-}
-
-::-webkit-scrollbar-thumb:window-inactive {
-  background: #353536;
-}
-
-
-
-.discussAndUsers .chat .msg {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 320px;
-  background: #474747;
-  overflow-y: scroll;
-
-  padding: 10px 0 0 0;
-}
-.discussAndUsers .chat .msg .teacher-msg{
-  float: left;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-left: 10px;
-  width: 100%;
-  height: 30px;
-  /*border: 1px solid #000000;*/
-}
-.discussAndUsers .chat .msg .teacher-msg  .teaImg{
-  float: left;
-}
-.discussAndUsers .chat .msg .teacher-msg p {
-  position: relative;
-  float: left;
-  padding: 8px;
-  font-size: 12px;
-  color: #333333;
-  background: white;
-  margin-left: 16px;
-  border-radius: 8px;
-  display: inline-block;
-  min-width: 98px;
-  max-width: 100%;
-  border: 1px solid #d7d7d7;
-
-}
-.discussAndUsers .chat .msg .teacher-msg p img:nth-of-type(1){
-  text-align: left;
-  float: none;
-
-}
-.discussAndUsers .chat .msg .teacher-msg p.left::after{
-  top: 4px;
-  left: -7px;
-}
-.chat .msg .teacher-msg p::after{
-  content: "";
-  position: absolute;
-  float: left;
-  left: -8px;
-  bottom: 18px;
-  display: block;
-  width: 10px;
-  height: 10px;
-  background: url(../images/arrow.png) 50% 50%;
-}
-
-.chat .msg .student-msg{
-
-  float: right;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  width: 100%;
-  height: 30px;
-
-}
-.chat .msg .student-msg .stuImg{
-  float: right;
-  margin-right: 8px;
-}
-.chat .msg .student-msg p {
-  position: relative;
-  float: right;
-  padding: 8px;
-  font-size: 12px;
-  color: #333333;
-  background: white;
-  margin-right: 16px;
-  border-radius: 8px;
-  display: inline-block;
-  min-width: 98px;
-  max-width: 280px;
-  border: 1px solid #d7d7d7;
-  text-align: left;
-}
-.chat .msg .student-msg p.right::after{
-  top: 4px;
-  right: -7px;
-
-}
-.chat .msg .student-msg p::after{
-  content: "";
-  position: absolute;
-  right: -8px;
-  bottom: 18px;
-  float: right;
-  display: block;
-  width: 10px;
-  height: 10px;
-  background: url(../images/arrow-r.png) 50% 50%;
-}
-.chat .msg .student-msg p img:nth-of-type(1){
-  text-align: left;
-  float: none;
-
-}
-
-/*liaotian*/
-.message img{
-  width: 24px;
-  height: 24px;
-}
-.message_client{
-  margin-top: 5px;
-  margin-bottom: 5px;
-  overflow: hidden;
-
-}
-.chat .teaNameBox{
-  float: left;
-  margin-top: 3px;
-  margin-right: 14px;
-}
-.chat .teaName{
-  font-size: 12px;
-  margin-left: 21px;
-  color: #ffffff;
-  display: block;
-  height: 20px;
-  margin-right: 290px;
-  white-space: nowrap;
-  word-break: keep-all;
-}
-.chat .stuName{
-  display: block;
-  font-size: 12px;
-  margin-right: 15px;
-  margin-left: 289px;
-  color: #ffffff;
-  /* width: 58px; */
-  height: 20px;
-  white-space: nowrap;
-  word-break: keep-all;
-}
-.chat .stuNameBox{
-  float: right;
-  margin-top: 3px;
-  margin-left: 46px;
-}
-.chat .message_client .message {
-  font-size: 12px;
-  color: #fff;
-  margin-top: 5px;
-  line-height: 20px;
-}
-
-.triangle-isosceles {
-  position: relative;
-  bottom: 2px;
-  padding: 6px 10px 6px 10px;
-  border-radius: 5px;
-  display: inline-block;
-  /*min-width: 20px;*/
-  max-width:75%;
-  word-break: break-all;
-}
-.stutriangle-isosceles {
-  float:right;
-  position: relative;
-  bottom: 2px;
-  padding: 6px 10px 6px 10px;
-  border-radius: 5px;
-  display: inline-block;
-  /*min-width: 20px;*/
-  max-width:81%;
-  word-break: break-all;
-}
-.triangle-isosceles.leftmsg{
-  margin-left: 0px;
-  /*background: white;*/
-  /*border: 1px solid #d7d7d7;*/
-  background: #585859;
-
-}
-.stutriangle-isosceles.rightmsg{
-  margin-left: 8px;
-  background: #3498db;
-  /*border: 1px solid #d7d7d7;*/
-}
-
-.triangle-isosceles.leftmsg:after {
-  top: 6px;
-  left: -8px;
-  transform: rotate(294deg);
-  -ms-transform: rotate(294deg);
-  -moz-transform: rotate(294deg);
-  -webkit-transform: rotate(294deg);
-  -o-transform: rotate(294deg);
-
-}
-.stutriangle-isosceles.rightmsg:after {
-  top: 6px;
-  right: -8px;
-  transform: rotate(76deg);
-  -ms-transform: rotate(76deg);
-  -moz-transform: rotate(76deg);
-  -webkit-transform: rotate(76deg);
-  -o-transform: rotate(76deg);
-}
-.triangle-isosceles:after {
-  content: "";
-  position: absolute;
-  display: block;
-  width: 10px;
-  height: 10px;
-  background: url(../images/arrow-r.png) no-repeat;
-}
-.stutriangle-isosceles:after {
-  content: "";
-  position: absolute;
-  display: block;
-  width: 10px;
-  height: 10px;
-  background: url(../images/arrow.png) no-repeat;
-}
-
-
-
-
-
-.input-send{
-  position: absolute;
-  bottom: 0px;
-  width: 320px;
-  height: 72px;
-  border-top: 1px solid #666;
-
-}
-.input-send .face{
-  float: left;
-  font-size: 18px;
-  color: #ccc;
-  margin-left: 10px;
-  margin-top: 9px;
-  margin-bottom: 3px;
-  cursor: pointer;
-}
-.input-send .face:hover{
-  color:#e5e5e5;
-}
-.input-send .face:active{
-  color:#fff
-}
-
-/*全体禁言默认样式*/
-.input-send .bannedBtn{
-  width: 19px;
-  height:17px;
-  float: left;
-  cursor: pointer;
-  margin: 11px 0 -2px 10px;
-  background: url(../images/banned/chat-normal.png) no-repeat;
-  background-size: 100% 100%;
-}
-/*.input-send .bannedBtn:hover{*/
-  /*background: url(../images/banned/chat-normal.png) no-repeat;*/
-  /*background-size: 100%;*/
-/*}*/
-
-/*全体禁言中的样式*/
-.input-send .relieveBanned{
-  width: 20px;
-  height:20px;
-  float: left;
-  cursor: pointer;
-  margin: 11px -1px -3px 10px;;
-  background: url(../images/banned/-silenced-normal.png) no-repeat;
-  background-size: 100%;
-}
-.input-send .relieveBanned:hover{
-  background: url(../images/banned/-silenced-hover.png) no-repeat;
-  background-size: 100%;
-}
-.input-face{
-  width: 243px;
-  height: 26px;
-  line-height: 21px;
-  float: left;
-  border: none;
-  margin-top: 6px;
-  margin-left:10px;
-  background: #fafafa;
-
-}
-
-.chat .input-face input {
-  height: 26px;
-  line-height: 26px;
-  width: 235px;
-  border: none;
-  text-decoration: none;
-  outline-style: none;
-  background: #6a6a6c;
-  color: #ffffff;
-  font-size: 12px;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-
-.input-send .send {
-  float: right;
-  width: 46px;
-  height: 26px;
-  font-size: 12px;
-  border-radius: 2px;
-  border: none;
-  background: #3598db;
-  color: #fff;
-  margin-top: 38px;
-  margin-right: 10px;
-  cursor: pointer;
-
-}
-.input-send .send:hover{
-  background: #57b2ee;
-}
-.input-send .send:active{
-  background: #318ecc;
-}
-
-/*表情*/
-
-.swiper-container {
-  position: absolute;
-  width: 320px;
-  height: 153px;
-  bottom: 44px;
-  left: 0;
-  z-index: 1100;
-  overflow: hidden;
-}
-
-.inner-slide {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width:640px;
-  height: 153px;
-}
-.inner-slide img{
-  width: 26px;
-  height: 26px;
-  -webkit-font-smoothing:antialiased;
-}
-
-.inner-slide .swiper-slide {
-  float: left;
-  width: 320px;
-  height: 153px;
-}
-
-.tiplist {
-  position: absolute;
-  right: 0px;
-  bottom: 0;
-  overflow: hidden;
-  width: 320px;
-  height: 14px;
-
-
-}
-
-.tiplist li:nth-child(1) {
-  float: left;
-  margin-left: 141px;
-  width: 8px;
-  height: 8px;
-  left: 100px;
-  cursor: pointer;
-  background: #999;
-  border-radius: 50%;
-}
-.tiplist li:nth-child(2) {
-  float: left;
-  margin-left: 15px;
-  width: 8px;
-  height: 8px;
-  left: 100px;
-  cursor: pointer;
-  background: #999;
-  border-radius: 50%;
-}
-
-.tiplist li.bg {
-  background: #ff6600;
-}
-.swiper-slide {
-  text-align: center;
-  font-size: 18px;
-  background: #fff;
-  /* Center slide text vertically */
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  position: relative;
-  width: 320px;
-
-}
-
-.swiper-slide ul {
-  display: inline-block;
-  width: 100%;
-  white-space: normal;
-  padding-left: 0;
-}
-
-.swiper-slide li {
-  display: inline-block;
-  width: 10%;
-  height: 30px;
-  text-align: center;
-  line-height: 30px;
-  float: left;
-  margin-left: 7px;
-  cursor: pointer;
-}
-/*帮助弹出框*/
-.helpBox{
-  display: none;
-  position: absolute;
-  top: 12%;
-  left: 33%;
-  width: 398px;
-  height: 298px;
-  background: white;
-  z-index: 4;
-}
-.helpBox .helpHeadline{
-  height: 32px;
-  line-height: 32px;
-  background: #3b3b3b;
-}
-.helpBox .helpHeadline .helpHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  color: #fff;
-}
-.helpBox .helpHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.helpBox .helpHeadline a:hover{
-  color: #CCCCCC;
-}
-.helpBox .helpHeadline a:active{
-  color: #3b3b3b;
-}
-.helpContent{
-  height: 266px;
-  width: 398px;
-  background-color: #4f4e53;
-  overflow-x: hidden;
-}
-
-/*结束课堂弹出框*/
-.endClassBox{
-  display: none;
-  position: absolute;
-  top: 35%;
-  left: 33%;
-  width: 370px;
-  height: 174px;
-  background: white;
-  z-index: 5;
-  border-radius: 3px;
-}
-.endClassBox .endClassHeadline{
-  height: 40px;
-  line-height: 40px;
-  background: #3b3b3b;
-}
-.endClassBox .endClassHeadline .endClassHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  color: #fff;
-  font-size: 12px;
-}
-.endClassBox .endClassHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.endClassBox .endClassHeadline a:hover{
-  color: #CCCCCC;
-}
-.endClassBox .endClassHeadline a:active{
-  color: #3b3b3b;
-}
-.endClassContent{
-  height: 134px;
-  width: 370px;
-  background-color: #4f4e53;
-  overflow-x: hidden;
-}
-.endClassContent .endClassText{
-  font-size: 14px;
-  color: #fff;
-  text-align: center;
-  margin-top: 28px;
-  line-height: 14px;
-  position: absolute;
-  left: 50%;
-  top: 40px;
-  width: 200px;
-  margin-left: -100px;
-}
-.endClassContent .endClassEnsure{
-  width: 70px;
-  height: 32px;
-  background: #999;
-  border: 0;
-  margin-left: 72px;
-  margin-top: 77px;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 3px;
-}
-.endClassContent .endClassCancel{
-  width: 70px;
-  height: 32px;
-  background: #3498db;
-  border: 0;
-  margin-top: 77px;
-  margin-left: 93px;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 3px;
-}
-
-/*结束屏幕共享弹出框*/
-.endShareBox{
-  display: none;
-  position: absolute;
-  top: 35%;
-  left: 33%;
-  width: 370px;
-  height: 174px;
-  background: white;
-  z-index: 5;
-  border-radius: 3px;
-}
-.endShareBox .endShareHeadline{
-  height: 40px;
-  line-height: 40px;
-  background: #3b3b3b;
-}
-.endShareBox .endShareHeadline .endShareHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  color: #fff;
-  font-size: 12px;
-}
-.endShareBox .endShareHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.endShareBox .endShareHeadline a:hover{
-  color: #CCCCCC;
-}
-.endShareBox .endShareHeadline a:active{
-  color: #3b3b3b;
-}
-.endShareContent{
-  height: 134px;
-  width: 370px;
-  background-color: #4f4e53;
-  overflow-x: hidden;
-}
-.endShareContent .endShareText{
-  font-size: 14px;
-  color: #fff;
-  text-align: center;
-  margin-top: 28px;
-  line-height: 14px;
-  position: absolute;
-  left: 50%;
-  top: 40px;
-  width: 200px;
-  margin-left: -100px;
-}
-.endShareContent .endShareEnsure{
-  width: 70px;
-  height: 32px;
-  background: #999;
-  border: 0;
-  margin-left: 72px;
-  margin-top: 77px;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 3px;
-}
-.endShareContent .endShareCancel{
-  width: 70px;
-  height: 32px;
-  background: #3498db;
-  border: 0;
-  margin-top: 77px;
-  margin-left: 93px;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 3px;
-}
-
-/*退出课堂弹出框*/
-.exitClassBox{
-  display: none;
-  position: absolute;
-  top: 35%;
-  left: 33%;
-  width: 370px;
-  height: 174px;
-  background: white;
-  z-index: 506;
-  border-radius: 3px;
-}
-.exitClassBox .exitClassHeadline{
-  height: 40px;
-  line-height: 40px;
-  background: #3b3b3b;
-}
-.exitClassBox .exitClassHeadline .exitClassHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  color: #fff;
-  font-size: 12px;
-}
-.exitClassBox .exitClassHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.exitClassBox .exitClassHeadline a:hover{
-  color: #CCCCCC;
-}
-.exitClassBox .exitClassHeadline a:active{
-  color: #3b3b3b;
-}
-.exitClassContent{
-  height: 134px;
-  width: 370px;
-  background-color: #4f4e53;
-  overflow-x: hidden;
-}
-.exitClassContent .exitClassText{
-  font-size: 14px;
-  color: #fff;
-  text-align: center;
-  margin-top: 28px;
-  line-height: 15px;
-  position: absolute;
-  left: 50%;
-  top: 22%;
-  width: 200px;
-  margin-left: -100px;
-}
-.exitClassContent .exitClassEnsure{
-  width: 70px;
-  height: 32px;
-  background: #999;
-  border: 0;
-  margin-left: 72px;
-  margin-top: 78px;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 3px;
-}
-.exitClassContent .exitClassCancel{
-  width: 70px;
-  height: 32px;
-  background: #3498db;
-  border: 0;
-  margin-top: 78px;
-  margin-left: 93px;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 3px;
-}
-
-
-
-  /*弹出框列表样式*/
-.listModal{
-  display: none;
-  position: absolute;
-  top: 12%;
-  left: 33%;
-  width: 398px;
-  height: 298px;
-  background: white;
-  z-index: 5;
-}
-.listModal .listHeadline{
-  height: 40px;
-  line-height: 40px;
-  background: #3b3b3b;
-}
-.listModal .listHeadline .listHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  color: #ccc;
-  font-size: 14px;
-}
-.listModal .listHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ccc;
-}
-.listModal .listHeadline a:hover{
-  color: #CCCCCC;
-}
-.listModal .listHeadline a:active{
-  color: #3b3b3b;
-}
-
-/*!*文件列表中的样式*!*/
-/*.fileContent{*/
-  /*height: 266px;*/
-  /*width: 398px;*/
-  /*background-color: #4f4e53;*/
-  /*overflow: scroll;*/
-  /*overflow-x: hidden;*/
-/*}*/
-/*.fileContent div{*/
-  /*height: 36px;*/
-  /*line-height: 36px;*/
-/*}*/
-/*.fileContent div:nth-of-type(1){*/
-  /*padding-top: 18px;*/
-/*}*/
-/*.fileContent label:nth-of-type(1){*/
-  /*float: left;*/
-  /*margin-left: 30px;*/
-  /*color: #ccc;*/
-
-/*}*/
-/*.fileContent label:nth-of-type(2){*/
-  /*float: left;*/
-  /*display: inline-block;*/
-  /*width: 249px;*/
-
-  /*margin-left: 16px;*/
-  /*color: #ccc;*/
-  /*cursor: pointer;*/
-  /*white-space: nowrap;*/
-  /*overflow: hidden;*/
-  /*text-overflow: ellipsis;*/
-
-
-/*}*/
-/*.fileContent label:nth-of-type(3){*/
-  /*float: right;*/
-  /*margin-right: 36px;*/
-  /*color: #ccc;*/
-  /*cursor: pointer;*/
-
-/*}*/
-
-
-/*媒体共享文件列表*/
-.mediaFileContentBox{
-  position: relative;
-  height: 266px;
-  width: 398px;
-  background-color: #4f4e53;
-  overflow-x: hidden;
-}
-.mediaFileContentBox .mediaFileContentMenu{
-  position: absolute;
-  left: 10px;
-  height: 45px;
-  width: 380px;
-  border-bottom: 1px solid #666;
-}
-.mediaFileContentBox .mediaFileContentMenu .mediaFileContentTxt{
-  position: absolute;
-  bottom: 3px;
-  font-size: 12px;
-  color: #ccc;
-  left: 5px;
-}
-.mediaFileContentBox .mediaFileContentMenu .mediaFileContentMenuSpan{
-  position: absolute;
-  right: 0;
-  top: 10px;
-  width: 64px;
-  height: 28px;
-  line-height: 28px;
-  overflow: hidden;
-  background: #3A9AD9;
-  border-radius: 2px;
-  cursor: pointer;
-  color: #ffffff;
-}
-.mediaFileContentBox .mediaFileContentMenu .mediaFileContentMenuLableIcon{
-  font-size: 20px;
-  left:5px;
-  position: absolute;
-}
-.mediaFileContentBox .mediaFileContentMenu .mediaFileContentMenuLableTxt{
-  font-size: 12px;
-  position: absolute;
-  left:25px;
-}
-.mediaFileContentBox .mediaFileContentMenu input{
-  position: absolute;
-  width: 124px;
-  right: 10px;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.mediaFileContent{
-  position: absolute;
-  top: 46px;
-  height: 220px;
-  width: 398px;
-  background-color: #4f4e53;
-  overflow: scroll;
-  overflow-x: hidden;
-}
-.mediaFileContent div{
-  margin-left: 10px;
-  height: 36px;
-  line-height: 36px;
-}
-.mediaFileContent div:hover{
-  background: #666;
-  height: 36px;
-  line-height: 36px;
-}
-.mediaFileContent div:nth-of-type(1){
-  /*padding-top: 18px;*/
-}
-.mediaFileContent label:nth-of-type(1){
-  float: left;
-  margin-left: 14px;
-  color: #ccc;
-}
-.mediaFileContent label:nth-of-type(2){
-  float: left;
-  display: inline-block;
-  width: 249px;
-  font-size: 12px;
-  margin-left: 5px;
-  color: #ccc;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-
-}
-.mediaFileContent label:nth-of-type(3){
-  float: right;
-  margin-right: 10px;
-  color: #ccc;
-  cursor: pointer;
-
-}
-
-
-/*加载转圈*/
-.spinnerMasker{
-  display: none;
-  position: absolute;
-  z-index: 5;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, .7);
-}
-.spinner {
-  z-index: 1;
-  width: 33px;
-  height: 33px;
-  position: absolute;
-  top: 40%;
-  left:50%;
-  margin-left:-11px;
-}
-.spinnerHtml{
-  color:dodgerblue;
-  position: absolute;
-/*  top: 50%;*/
-  left:50%;
-  width:200px;
-  text-align: center;
-  margin-left:-100px;
-}
-.spinnerMask{
-  width:300px;
-  height:10px;
-  border-radius:5px;
-  background:rgba(0,0,0,.7);
-  position: absolute;
-  top:56%;
-  left:50%;
-  margin-left:-150px;
-}
-.exitSpinnerMasker{
-  position: absolute;
-  left:46%;
-  top:34%;
-  margin-left:130px;
-  display: none;
-}
-.exitSpinnerMasker .exitSpinnerMaskerA{
-  color:dodgerblue;
-}
-.minspinner{
-  width:0%;
-  height:10px;
-  border-radius:5px;
-  background:dodgerblue;
-  opacity: .7;
-}
-.container1 > div, .container2 > div, .container3 > div {
-  width: 10px;
-  height: 10px;
-  background-color:dodgerblue;
-
-  border-radius: 100%;
-  position: absolute;
-  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
-  animation: bouncedelay 1.2s infinite ease-in-out;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-.spinner .spinner-container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-.container2 {
-  -webkit-transform: rotateZ(45deg);
-  transform: rotateZ(45deg);
-}
-
-.container3 {
-  -webkit-transform: rotateZ(90deg);
-  transform: rotateZ(90deg);
-}
-
-.circle1 { top: 0; left: 0; }
-.circle2 { top: 0; right: 0; }
-.circle3 { right: 0; bottom: 0; }
-.circle4 { left: 0; bottom: 0; }
-
-.container2 .circle1 {
-  -webkit-animation-delay: -1.1s;
-  animation-delay: -1.1s;
-}
-
-.container3 .circle1 {
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
-}
-
-.container1 .circle2 {
-  -webkit-animation-delay: -0.9s;
-  animation-delay: -0.9s;
-}
-
-.container2 .circle2 {
-  -webkit-animation-delay: -0.8s;
-  animation-delay: -0.8s;
-}
-
-.container3 .circle2 {
-  -webkit-animation-delay: -0.7s;
-  animation-delay: -0.7s;
-}
-
-.container1 .circle3 {
-  -webkit-animation-delay: -0.6s;
-  animation-delay: -0.6s;
-}
-
-.container2 .circle3 {
-  -webkit-animation-delay: -0.5s;
-  animation-delay: -0.5s;
-}
-
-.container3 .circle3 {
-  -webkit-animation-delay: -0.4s;
-  animation-delay: -0.4s;
-}
-
-.container1 .circle4 {
-  -webkit-animation-delay: -0.3s;
-  animation-delay: -0.3s;
-}
-
-.container2 .circle4 {
-  -webkit-animation-delay: -0.2s;
-  animation-delay: -0.2s;
-}
-
-.container3 .circle4 {
-  -webkit-animation-delay: -0.1s;
-  animation-delay: -0.1s;
-}
-
-@-webkit-keyframes bouncedelay {
-  0%, 80%, 100% { -webkit-transform: scale(0.0) }
-  40% { -webkit-transform: scale(1.0) }
-}
-
-@keyframes bouncedelay {
-  0%, 80%, 100% {
-    transform: scale(0.0);
-    -webkit-transform: scale(0.0);
-  } 40% {
-      transform: scale(1.0);
-      -webkit-transform: scale(1.0);
-    }
-}
-
-/*屏幕共享*/
-.screenSharingGroup{
-  width:100%;
-  height:100%;
-  position: absolute;
-  left:0;
-  top:0;
-  background: #353536;
-  display: none;
-}
-.sharingMsgBox{
-  width:248px;
-  height:40px;
-  line-height: 40px;
-  position: absolute;
-  left:50%;
-  top:50%;
-  margin-left:-110px;
-  margin-top:25px;
-  font-size: 14px;
-}
-.sharingMsgBox1{
-  margin-left:-115px;
-}
-.shareBackdrop{
-  position: absolute;
-  left:15px;
-  top:-202px;
-  display: none;
-}
- .sharingMsg{
-  float: left;
-  width:188px;
-  height:100%;
-  background: #666;
-  text-align: center;
-  color:#fff;
-  border-radius: 30px;
-   display: none;
-}
- .sharingMsg1{
-   cursor: pointer;
-   text-decoration: underline;
- }
-.sharingMsg1:hover{
-  color: #e5e5e5;
-}
-.sharingMsg2{
-  cursor: pointer;
-}
-
-.downloadCancel{
-  float: left;
-  color:#fff;
-  cursor: pointer;
-  width:60px;
-  text-align: center;
-  display: none;
-}
-.downloadCancel:hover{
-  color: #e5e5e5;
-}
-
-/*媒体共享*/
-.mediaShareGroup{
-  width:100%;
-  height:100%;
-  position: absolute;
-  left:0;
-  top:0;
-  background: #353536;
-  display: none;
-}
-
-/*伴音*/
-.musicShareGroup{
-  width:286px;
-  height:88px;
-  background: #4f4f52;
-  z-index: 2;
-  position: absolute;
-  left:0;
-  top:0;
-  box-shadow: 0 2px 1px #4f4f52;
-  display: none;
-  font-size: 12px;
-  color:#fff;
-  cursor: default;
-}
-.musicShareNameBox{
-  width: 80%;
-  height:40px;
-  margin-left:10%;
-  text-align: center;
-  position: relative;
-}
-.closeMusicClose{
-  width:15px;
-  height:15px;
-  position: absolute;
-  right:7px;
-  top:7px;
-  background: url(../images/music/delete-normal.png) no-repeat;
-  cursor: pointer;
-}
-.closeMusicClose:hover{
-  background: url(../images/music/delete-hover.png) no-repeat;
-}
-.musicIcon{
-  background: url(../images/music/icon-music.png) no-repeat;
-  width: 15px;
-  height: 15px;
-  display: inline-block;
-  margin-top:12px;
-  position: absolute;
-  left:0;
-  top:0;
-}
-.musicShareName{
-  background: url(../images/music/icon-music.png) no-repeat 0 4px;
-  padding:0 20px;
-  line-height: 40px;
-  background-size: 12px;
-}
-.musicSharePlayBox{
-  width:100%;
-  height:25px;
-  float: left;
-  padding:0 15px;
-}
-.musicSharePlayBox>div{
-  float: left;
-}
-.musicShareProgressBtn{
-  width:14px;
-  height:14px;
-  float: left;
-  margin-right:15px;
-}
-.musicShareProgressBtn span{
-  width:15px;
-  height:15px;
-  float: left;
-  cursor: pointer;
-}
-.musicSharePlayProgressBox{
-  width:145px;
-  height:2px;
-  margin-top:6px;
-  float: left;
-  position: relative;
-}
-.musicSharePlayProgressBox span{
-  display: inline-block;
-}
-.musicShare_bg{
-  width:145px;
-  height:2px;
-  background: #b2b2b2;
-  position: absolute;
-  left:0;
-  top:0;
-  cursor: pointer;
-}
-.musicShare_color{
-  width:0%;
-  height:2px;
-  background: #ed5c1c;
-  position: absolute;
-  left:0;
-  top:0;
-  cursor: pointer;
-}
-.musicShare_btn{
-  width:9px;
-  height:9px;
-  background: url(../images/music/Play-Control.png) no-repeat;
-  position: absolute;
-  left:0%;
-  top:-3px;
-  margin-left:-4px;
-  cursor: pointer;
-}
-.musicTimeProgress{
-  width:60px;
-  height:100%;
-  margin-left:15px;
-}
-
-/*播放暂停播放*/
-.musicShareProgressPlay{
-  background: url(../images/music/play-normal.png) no-repeat;
-}
-.musicShareProgressPlay:hover{
-  background: url(../images/music/play-hover-.png) no-repeat;
-}
-.musicShareProgressPause{
-  background: url(../images/music/pause-normal.png) no-repeat;
-  display: none;
-}
-.musicShareProgressPause:hover{
-  background: url(../images/music/pause-hover.png) no-repeat;
-}
-/*音量控制*/
-.musicVolumePlay{
-  background: url(../images/music/Speakers-normal.png) no-repeat;
-}
-.musicVolumePlay:hover{
-  background: url(../images/music/Speakers-hover.png) no-repeat;
-}
-.musicVolumePause{
-  background: url(../images/music/No-sound-normal-.png) no-repeat;
-  display: none;
-}
-.musicVolumePause:hover{
-  background: url(../images/music/No-sound-hover.png) no-repeat;
-}
-/*遮罩层*/
-.masker {
-  display: none;
-  position: absolute;
-  z-index: 4;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, .7);
-}
-
-/*回放控制条*/
-.recordPlayControl{
-  z-index: 1000;
-}
-.controlBarOut{
-  position: fixed;
-  bottom: 0px;
-  left: 0px;
-  height: 60px;
-  width: 100%;
-  min-width: 760px;
-}
-/*录制回放控制条的背景*/
-.controlBarOpacity{
-  background-color: #111312;
-  height: 100%;
-  width: 100%;
-  opacity: 0.8;
-}
-.controlBarInner{
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%
-}
-.replayProgressBar{
-  position: absolute;
-  left: 2%;
-  width: 96%;
-  outline-style: none;
-}
-.btn_recordPlay{
-  position: absolute;
-  top: 29px;
-  left: 18px;
-  height: 18px;
-  width: 18px;
-  background: url(../images/playBack/play.gif) no-repeat;
-  border: 0;
-}
-.btn_recordPause{
-  position: absolute;
-  top: 29px;
-  left: 18px;
-  height: 18px;
-  width: 18px;
-  background: url("../images/playBack/pause.gif") no-repeat;
-  border: 0;
-}
-.btn_recordClose{
-  position: absolute;
-  top: 29px;
-  right: 25px;
-  height: 18px;
-  width: 18px;
-  background: url("../images/playBack/rePlay.gif") no-repeat;
-  border: 0;
-}
-.classTimestampText{
-  float: left;
-  color: #ccc;
-  margin-left: 10px;
-  font-size: 12px;
-}
-
-.classTimestamp{
-  position: absolute;
-  left: 42px;
-  top: 30px;
-  width: 120px;
-  text-align: center;
-  background: transparent;
-  border: 0;
-  color: #6b6b6b;
-}
-input[type="range"] {
-  margin-top: 2px;
-  background-color: #272728;
-  -webkit-appearance: none;
-  height:12px;
-}
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  cursor: default;
-  top: -5px;
-  height: 30px;
-  width: 20px;
-  background: none repeat scroll 0 0 #777;
-  border-radius: 15px;
-  -webkit-box-shadow: 0 -1px 1px black inset;
-}
-
-
-
-
-
-
-
-/*登录*/
-.loginBg{
-  display: block;
-  position: absolute;
-  left:0;
-  top:0;
-  right:0;
-  bottom: 0;
-  z-index: 100;
-  /*   background:#474749;
- background: url("../images/newlogin/bg.jpg") no-repeat center center;*/
-  width:auto;
-  height: 100%;
-  background-size: cover;
-}
-.loginContentBox{
-  width: 400px;
-  height: 400px;
- /* background: #484646;*/
-  position: absolute;
-  top: 20%;
-  left: 50%;
-  border-radius: 5px;
-  margin-left:-200px;
-}
-.loginBg .bgLogin{
-  width:100%;
-  height:100%;
-  background: rgba(0, 0, 0, .7);
-}
-.loginImg{
-  width:100%;
-  height: 100%;
-  background: url("../images/newlogin/student.png") no-repeat center bottom;
-  position: absolute;
-  bottom:0;
-  left:0;
-}
-.login_star{
-  width:100%;
-  height:100%;
-}
-@keyframes star{
-  from{transform: scale(0);}
-  to{transform: scale(2);}
-}
-@keyframes stars{
-  0% {
-    opacity: 0; }
-  50% {
-    opacity: .8; }
-  100% {
-    opacity: 0; }
-}
-.star{
-  width: 10px;
-  height: 10px;
-  background: url(../images/newlogin/xx.png) no-repeat;
-  background-size: 100% 100%;
-  position: absolute;
-}
-.login_star1{
-  left:80%;
-  top:7%;
-  animation: star 2s linear infinite;
-  animation: stars 2s linear infinite;
-  -webkit-animation: star 2s linear infinite;
-  -webkit-animation: stars 2s linear infinite;
-}
-.login_star2{
-  left:10%;
-  top:18%;
-  animation: star 1.8s linear infinite;
-  animation: stars 1.8s linear infinite;
-  -webkit-animation: star 1.8s linear infinite;
-  -webkit-animation: stars 1.8s linear infinite;
-}
-.login_star3{
-  left:60%;
-  top:20%;
-  animation: star 2.3s linear infinite;
-  animation: stars 2.3s linear infinite;
-  -webkit-animation: star 2.3s linear infinite;
-  -webkit-animation: stars 2.3s linear infinite;
-}
-.login_star4{
-  left:31%;
-  top:41%;
-  animation: star 1.4s linear infinite;
-  animation: stars 1.4s linear infinite;
-  -webkit-animation: star 1.4s linear infinite;
-  -webkit-animation: stars 1.4s linear infinite;
-}
-.login_star5{
-  left:78%;
-  top:50%;
-  animation: star 1.7s linear infinite;
-  animation: stars 1.7s linear infinite;
-  -webkit-animation: star 1.7s linear infinite;
-  -webkit-animation: stars 1.7s linear infinite;
-}
-.login_star6{
-  left:12%;
-  top:33%;
-  animation: star 2.5s linear infinite;
-  animation: stars 2.5s linear infinite;
-  -webkit-animation: star 2.5s linear infinite;
-  -webkit-animation: stars 2.5s linear infinite;
-}
-.login_star7{
-  left:24%;
-  top:30%;
-  animation: star 2.3s linear infinite;
-  animation: stars 2.3s linear infinite;
-  -webkit-animation: star 2.3s linear infinite;
-  -webkit-animation: stars 2.3s linear infinite;
-}
-.login_star8{
-  left:14%;
-  top:35%;
-  animation: star 2.2s linear infinite;
-  animation: stars 2.2s linear infinite;
-  -webkit-animation: star 2.2s linear infinite;
-  -webkit-animation: stars 2.2s linear infinite;
-}
-.login_star9{
-  left:64%;
-  top:55%;
-  animation: star 2.4s linear infinite;
-  animation: stars 2.4s linear infinite;
-  -webkit-animation: star 2.4s linear infinite;
-  -webkit-animation: stars 2.4s linear infinite;
-}
-.login_star10{
-  left:54%;
-  top:20%;
-  animation: star 2.7s linear infinite;
-  animation: stars 2.7s linear infinite;
-  -webkit-animation: star 2.7s linear infinite;
-  -webkit-animation: stars 2.7s linear infinite;
-}
-.login_star11{
-  left:74%;
-  top:23%;
-  animation: star 2.8s linear infinite;
-  animation: stars 2.8s linear infinite;
-  -webkit-animation: star 2.8s linear infinite;
-  -webkit-animation: stars 2.8s linear infinite;
-}
-.login_star12{
-  left:80%;
-  top:30%;
-  animation: star 3s linear infinite;
-  animation: stars 3s linear infinite;
-  -webkit-animation: star 3s linear infinite;
-  -webkit-animation: stars 3s linear infinite;
-}
-.loginContent{
-  position: absolute;
-  top: 15%;
-  left: 50%;
-  width: 270px;
-  height: 260px;
-  margin-left:-135px;
-}
-.loginContent input[type=text]{
-  color: white;
-}
-.loginContent .loginContentImg{
-  height: 35px;
-  width: 270px;
-  background: url("../images/newlogin/logo.png") no-repeat center center;
-}
-.loginContent .userNameLi{
-  height: 50px;
-  line-height: 50px;
-  width: 270px;
-  border:1px solid #fff;
-  border-radius:3px 3px 0 0;
-/*  background:#333;*/
-  opacity:0.8;
-  margin-top:30px;
-  display: none;
-  /*background: url("../images/login/userName.png") no-repeat left ;*/
-}
-.loginContent .userNameLi input,.loginContent .passWordLi input{
-  float: left;
-  margin-left: 12px;
-  width: 200px;
-  height: 50px;
-  border: none;
-  color:#fff ;
-  background-color:transparent;
-
-
-}
-/* WebKit browsers*/
-.loginContent .userNameLi input::-webkit-input-placeholder{
-  font-size: 12px;
-  color: #fff;
-}
-/* Mozilla Firefox 4 to 18*/
-.loginContent .userNameLi input:-moz-placeholder{
-  font-size: 12px;
-  color: #fff;
-}
-/* Mozilla Firefox 19+*/
-.loginContent .userNameLi input::-moz-placeholder{
-  font-size: 12px;
-  color: #fff;
-}
-/* Internet Explorer 10+*/
-.loginContent .userNameLi input:-ms-input-placeholder{
-  font-size: 12px;
-  color: #fff;
-}
-.loginContent .userNameLi input:focus{
-  outline-style: none;
-}
-/* WebKit browsers*/
-.loginContent .passWordLi input::-webkit-input-placeholder{
-  font-size: 12px;
-  color: #ccc;
-}
-/* Mozilla Firefox 4 to 18*/
-.loginContent .passWordLi input:-moz-placeholder{
-  font-size: 12px;
-  color: #ccc;
-}
-/* Mozilla Firefox 19+*/
-.loginContent .passWordLi input::-moz-placeholder{
-  font-size: 12px;
-  color: #ccc;
-}
-/* Internet Explorer 10+*/
-.loginContent .passWordLi input:-ms-input-placeholder{
-  font-size: 12px;
-  color: #ccc;
-}
-.loginContent .passWordLi input:focus{
-  outline-style: none;
-}
-.loginContent .loginUser{
-  line-height: 20px;
-  width: 270px;
-  /*border-bottom: 1px solid #ccc;*/
-}
-.loginContent .loginUser p{
-  /*display: none;*/
-  font-size: 12px;
-  color: #d95136;
-  /*margin-left: 45px;*/
-
-}
-.loginContent .passWordLi{
-  height: 50px;
-  line-height: 50px;
-  width: 270px;
-  border: 1px solid #fff;
-  border-top:none;
-  border-radius:0 0 3px 3px;
-/*  background:#333;*/
-  opacity:0.8;
-  display: none;
-}
-.loginContent .loginPassWord{
-  height: 20px;
-  line-height: 20px;
-  width: 270px;
-  /*border-bottom: 1px solid #ccc;*/
-}
-.loginContent .loginPassWord p{
-  /*display: none;*/
-  font-size: 12px;
-  color: #d95136;
-  /*margin-left: 45px;*/
-  display: none;
-}
-.loginContent .btnLoginLi{
-  height: 40px;
-  width: 270px;
-  display: none;
-}
-.loginContent .btnLoginLi button {
-  height: 40px;
-  width: 270px;
-  font-size: 14px;
-  background: #3598db;
-  color: #fff;
-  outline-style: none;
-  border: 0;
-  text-align: center;
-  border-radius:3px;
-}
-.loginContent .btnLoginLi button:hover {
-  background:#58aced;
-}
-
-.initParams .errorTip{
-  text-align: center;
- /* margin: 237px auto;*/
-  height: 20px;
-  line-height: 20px;
-  width: 270px;
-  color: red;
-  float: left;
-  padding-top:20px;
-  display:none;
-}
-.loginContent .errorTip{
-  margin: 6px auto;
-  height: 20px;
-  width: 270px;
-  color: red;
-  text-align: center;
-}
-/*初始化参数*/
-.initParamsOut{
-  display: block;
-  position: absolute;
-  left:0;
-  top:0;
-  right:0;
-  bottom: 0;
-  z-index: 100;
-  height: 100%;
- /* background:#474749;*/
-/*  background: url("../images/newlogin/bg.jpg") no-repeat center center;*/
-  width:auto;
-  background-size: cover;
-}
-.initParamsBox{
-  width: 400px;
-  height: 400px;
-/*  background: #484646;*/
-  position: absolute;
-  top: 20%;
-  left: 50%;
-  border-radius: 5px;
-  margin-left:-200px;
-}
-.initParamsOut .bgInit{
-  width:100%;
-  height:100%;
-  background: rgba(0, 0, 0, .7);
-}
-::-ms-clear, ::-ms-reveal{display: none;}
-.initParams{
-  position: absolute;
-  top: 15%;
-  left: 50%;
-  width: 270px;
-  height: 260px;
-  z-index: 10;
-  margin-left:-133px;
-}
-.initParams .initParamsImg{
-  height: 35px;
-  width: 270px;
-  background: url("../images/newlogin/logo.png") no-repeat center center;
-}
-.initParams .initParamsClassId{
-  height: 50px;
-  line-height: 50px;
-  width: 270px;
-  border:1px solid #fff;
-  border-radius:3px 3px 0 0;
-  /*background:#333;*/
-  opacity:0.8;
-  margin-top:30px;
-  display: none;
-}
-.initParams .initParamsClassId input,.initParams .initParamsUserId input {
-  float: left;
-  height: 51px;
-  border: none;
-  background-color:transparent;
-}
-.initParams .initParamsClassId input,.initParams .initParamsUserId input{
-  float: left;
-  padding-left:12px;
-  color:#fff;
-}
-.initParams .initParamsClassId input:focus,.initParams .initParamsUserId input:focus{
-  outline-style: none;
-}
-/* WebKit browsers*/
-.loginContent .initParamsClassId input::-webkit-input-placeholder,.loginContent .initParamsUserId input::-webkit-input-placeholder{
-  font-size: 12px;
-  color: #fff;
-
-}
-/* Mozilla Firefox 4 to 18*/
-.loginContent .initParamsClassId input:-moz-placeholder,.loginContent .initParamsUserId input:-moz-placeholder{
-  font-size: 12px;
-  color: #fff;
-}
-/* Mozilla Firefox 19+*/
-.loginContent .initParamsClassId input::-moz-placeholder,.loginContent .initParamsUserId input::-moz-placeholder{
-  font-size: 12px;
-  color: #fff;
-}
-/* Internet Explorer 10+*/
-.loginContent .initParamsClassId input:-ms-input-placeholder,.loginContent .initParamsUserId input:-ms-input-placeholder{
-  font-size: 12px;
-  color: #fff;
-}
-/* WebKit browsers*/
-.loginContent .initParamsClassId input::-webkit-input-placeholder,.loginContent .initParamsUserId input::-webkit-input-placeholder{
-  font-size: 12px;
-  color: #fff;
-}
-.initParams .initParamsUserId{
-  height: 50px;
-  line-height: 50px;
-  width: 270px;
-  border: 1px solid #fff;
-  border-top:none;
-  border-radius:0 0 3px 3px;
-  /*background:#333;*/
-  opacity:0.8;
-  display: none;
-}
-.initParams .initParamsNull{
-  height:40px;
-}
-.initParams .initParamsRoleBtn{
-  height: 40px;
-  width: 270px;
-  display: none;
-}
-.initParams .initParamsRoleBtn button{
-  height: 40px;
-  width: 130px;
-  font-size: 14px;
-  background: #3598db;
-  color: #fff;
-  outline-style: none;
-  border: 0;
-  border-radius:3px;
-  margin-left:5px;
-}
-.initParams .initParamsRoleBtn button:hover{
-  background:#58aced;
-}
-.ensureTeaBtn{
-  display: none;
-  width: 80px;
-}
-.ensureStuBtn{
-  display: none;
-  width: 80px;
-}
-
-
-/*错误弹出框*/
-.errorBox{
-  display: none;
-  position: absolute;
-  top: 35%;
-  left: 33%;
-  width: 370px;
-  height: 174px;
-  background: white;
-  z-index: 2000;
-}
-.errorBox .errorHeadline{
-  height: 40px;
-  line-height: 40px;
-  background: #3b3b3b;
-}
-.errorBox .errorHeadline .errorHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  font-size: 12px;
-  color: #fff;
-}
-.errorBox .errorHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.errorBox .errorHeadline a:hover{
-  color: #CCCCCC;
-}
-.errorBox .errorHeadline a:active{
-  color: #3b3b3b;
-}
-.errorContent{
-  height: 134px;
-  width: 370px;
-  background-color: #4f4e53;
-  overflow-x: hidden;
-}
-.errorContent .errorText{
-  font-size: 14px;
-  color: #fff;
-  text-align: center;
-  line-height: 14px;
-  position: absolute;
-  left: 50%;
-  top: 45%;
-  width: 250px;
-  margin-left: -125px;
-  line-height: 16px;
-}
-.errorContent .errorEnsure{
-  width: 66px;
-  height: 32px;
-  background: #999;
-  border: 0;
-  margin-left: 83px;
-  margin-top: 31px;
-  cursor: pointer;
-}
-.errorContent .errorCancel{
-  width: 66px;
-  height: 32px;
-  background: #3498db;
-  border: 0;
-  margin-top: 31px;
-  margin-left: 93px;
-  cursor: pointer;
-}
-
-/*设置*/
-
-.setContent li:nth-of-type(1),.setContent li:nth-of-type(3){
-  height:30px;
-  line-height: 30px;
-}
-.setContent li:nth-of-type(3){
-  margin-top: 36px;
-}
-.setContent li:nth-of-type(1) span,.setContent li:nth-of-type(3) span{
-  float: left;
-  font-size: 14px;
-  color: #666;
-}
-
-/*设置的弹出框 左右滑动*/
-.setContent li:nth-of-type(4){
-  height: 48px;
-  line-height: 48px;
-  position: relative;
-  margin-top: 15px;
-}
-.setContent li:nth-of-type(4) p:nth-of-type(1){
-  position: absolute;
-  display: inline-block;
-  font-size: 14px;
-  color: #666;
-  left:0;
-  top:0;
-}
-.setContent li:nth-of-type(4) span:nth-of-type(1){
-
-  position: absolute;
-  display: inline-block;
-  margin-left: 70px;
-  left:0;
-  top:0;
-}
-.setContent li:nth-of-type(4) span:nth-of-type(2){
-  position: absolute;
-  display: inline-block;
-  left:80px;
-  top:0;
-}
-/*.setContent li:nth-of-type(4) .scrollBar{*/
-
-  /*position:absolute;*/
-  /*left: 92px;*/
-  /*display: inline-block;*/
-  /*width: 110px;*/
-  /*height: 2px;*/
-  /*background-color: #ccc;*/
-  /*margin: 24px 10px;*/
-  /*-webkit-border-radius: 2px;*/
-  /*-moz-border-radius: 2px;*/
-  /*border-radius: 2px;*/
-  /*cursor: pointer;*/
-/*}*/
-/*.setContent li:nth-of-type(4) .scroll_Thumb {*/
-
-  /*display: inline-block;*/
-  /*height: 10px;*/
-  /*width: 10px;*/
-  /*background-color: #efefef;*/
-  /*-webkit-border-radius: 2em;*/
-  /*-moz-border-radius: 2em;*/
-  /*border-radius: 2em;*/
-  /*border: 1px solid #ccc;*/
-  /*-webkit-box-shadow: 0px 0px 5px #ccc;*/
-  /*-moz-box-shadow: 0px 0px 5px #ccc;*/
-  /*box-shadow: 0px 0px 5px #ccc;*/
-  /*position: absolute;*/
-  /*cursor: pointer;*/
-  /*bottom: -4px;*/
-  /*left:0;*/
-/*}*/
-/*.setContent li:nth-of-type(4) .scroll_Thumb:hover {*/
-  /*background-color: #3498db;*/
-  /*border: 1px solid #fff;*/
-/*}*/
-
-.setContent li:nth-of-type(4) .soundRange{
-  position: absolute;
-  left: 90px;
-  top: 20px;
-  width: 270px;
-  cursor: pointer;
-}
-
-.setContent li:nth-of-type(4)  input[type="range"]{
-  margin-top: 2px;
-  /*background-color: #ccc;*/
-  -webkit-appearance: none;
-  height: 3px;
-  background: -webkit-linear-gradient(#3498db, #3498db) no-repeat, #ddd;/*设置左边颜色为#61bd12，右边颜色为#ddd*/
-  cursor: pointer;
-  border: 0;
-}
-
-
-.setContent li:nth-of-type(4) input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;/*清除系统默认样式*/
-  height: 15px;/*拖动块高度*/
-  width: 15px;/*拖动块宽度*/
-  background: #fff;/*拖动块背景*/
-  border-radius: 50%; /*外观设置为圆形*/
-  /*border: solid 1px #ddd; !*设置边框*!*/
-  cursor: pointer;
-}
-
-.setContent li:nth-of-type(4) span:nth-of-type(3){
-  position:absolute;
-  left: 220px;
-  display: inline-block;
-
-}
-.setContent li:nth-of-type(4) span:nth-of-type(4){
-  position:absolute;
-  left: 245px;
-  display: inline-block;
-
-}
-
-
-/*.setContent li:nth-of-type(5){*/
-  /*height: 48px;*/
-  /*line-height: 48px;*/
-  /*position: relative;*/
-  /*margin-top: 10px;*/
-/*}*/
-/*.setContent li:nth-of-type(5) p:nth-of-type(1){*/
-  /*position: absolute;*/
-  /*border: none;*/
-  /*left: 0;*/
-  /*top:0;*/
-  /*width: 16px;*/
-  /*height: 16px;*/
-  /*margin-left: 70px;*/
-  /*background: url("../images/mic.png") no-repeat center center;*/
-/*}*/
-
-/*.set-voice-progress{*/
-  /*margin-left: 103px;*/
-  /*width: 150px;*/
-  /*height: 22px;*/
-  /*!*background: #3c3c3c;*!*/
-  /*position: relative;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-1{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 0;*/
-  /*top:0;*/
-
-  /*background: #cbcbcb;*/
-
-  /*-moz-animation: throbber-loader 5s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 5s 0s infinite linear;*/
-  /*animation:throbber-loader 5s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-2{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 8px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 6s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 6s 0s infinite linear;*/
-  /*animation:throbber-loader 6s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-3{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 16px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 7s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 7s 0s infinite linear;*/
-  /*animation:throbber-loader 7s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-4{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 24px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 8s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 8s 0s infinite linear;*/
-  /*animation:throbber-loader 8s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-5{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 32px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 9s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 9s 0s infinite linear;*/
-  /*animation:throbber-loader 9s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-6{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 40px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 10s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 10s 0s infinite linear;*/
-  /*animation:throbber-loader 10s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-7{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 48px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 11s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 11s 0s infinite linear;*/
-  /*animation:throbber-loader 11s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-8{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 56px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 12s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 12s 0s infinite linear;*/
-  /*animation:throbber-loader 12s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-9{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 64px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 13s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 13s 0s infinite linear;*/
-  /*animation:throbber-loader 13s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-10{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 72px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 14s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 14s 0s infinite linear;*/
-  /*animation:throbber-loader 14s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-11{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 80px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 15s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 15s 0s infinite linear;*/
-  /*animation:throbber-loader 15s 0s infinite linear;*/
-/*}*/
-/*.set-voice-progress .set-voice-progress-span-12{*/
-  /*position: absolute;*/
-  /*width: 4px;*/
-  /*height: 17px;*/
-  /*left: 88px;*/
-  /*top:0;*/
-  /*background: #cbcbcb;*/
-  /*-moz-animation: throbber-loader 16s 0s infinite linear;*/
-  /*-webkit-animation:throbber-loader 16s 0s infinite linear;*/
-  /*animation:throbber-loader 16s 0s infinite linear;*/
-/*}*/
-
-.setContent li:nth-of-type(5){
-  height: 48px;
-  line-height: 48px;
-  position: relative;
-  margin-top: 40px;
-}
-.setContent li:nth-of-type(5) .setSave{
-  width: 66px;
-  height: 32px;
-  background: #999;
-  border: 0;
-  margin-left: 118px;
-  cursor: pointer;
-  color: #fff;
-  border-radius: 3px;
-}
-.setContent li:nth-of-type(5) .setCancel{
-  width: 66px;
-  height: 32px;
-  background: #3498db;
-  border: 0;
-  margin-left: 50px;
-  /*margin-left: 34px;*/
-  cursor: pointer;
-  color: #fff;
-  border-radius: 3px;
-}
-
-
-/*设置Select样式*/
-.SelectList
-{
-  float:left;
-  display:block;
-  width:325px;
-  height: 30px;
-  margin-left: 28px;
-  margin-right: 0;
-  padding-right: 14px;
-  background: transparent;
-}
-.SelectList option{
-  width: 218px;
-  height: 10px;
-  max-width: 218px;
-}
-
-.setContent li:nth-of-type(2){
-  display: none;
-  margin-top: 16px;
-}
-
-@-moz-keyframes throbber-loader {
-  0% {
-    background: #dde2e7;
-  }
-  10% {
-    background: #6b9dc8;
-  }
-
-}
-@-webkit-keyframes throbber-loader {
-  0% {
-    background: #dde2e7;
-  }
-  10% {
-    background: #6b9dc8;
-  }
-
-}
-@keyframes throbber-loader {
-  0% {
-    background: #dde2e7;
-  }
-  10% {
-    background: #6b9dc8;
-  }
-
-}
-
-
-
-.header,.docBox,.botTurn,.videoWindow,.left,.tabTitle,.input-send,.curClassUserList {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.leftGap{
-  width:13px;
-  height:100%;
-  position: absolute;
-  left:60px;
-  top:0;
-  display: none;
-}
-.rightGap{
-  width:10px;
-  height:100%;
-  float: right;
-  display: none;
-}
-/*控制左侧栏是否可点击的遮罩层*/
-.leftBarEnabledMask{
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: none;
-}
-
-/*控制左侧栏是否可点击的遮罩层*/
-.bottomBarEnabledMask{
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: none;
-}
-/*答题卡弹出框*/
-.answerAllBox{
-  width:100%;
-  height:100%;
-  position: absolute;
-  left:0;
-  top:0;
-  background: rgba(0, 0, 0, .7);
-  display: none;
-  z-index:502;
-}
-.themeBox{
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  width: 480px;
-  height: 560px;
-  background: #fcfcfc;
-}
-.themeBox .themeHeadline{
-  height: 35px;
-  line-height: 35px;
-  background: #3b3b3b;
-}
-.themeBox .themeHeadline .themeHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  color: #fff;
-}
-.themeBox .themeHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.themeBox .themeHeadline a:active{
-  color: #3b3b3b;
-}
-.themeTit{
-  height: 30px;
-  line-height: 30px;
-  padding-top:10px;
-  border-bottom:1px solid #e1e1e1;
-  font-weight: normal;
-}
-.themeTit1{
-  font-weight: normal;
-}
-.themeTit1 b{
-  float: left;
-}
-.themeTit1 p{
-  font-size:12px;
-  letter-spacing:1px;
-}
-.themeCount{
-  width:90%;
-  padding-left:5%;
-  color:#666666;
-}
-.themeList{
-  border:1px solid #e1e1e1;
-  border-radius:4px;
-  margin-top:6px;
-  background: #fff;
-  position: relative;
-  height: 53px;
-}
-.themeTrends ul{
-  margin-left:15px;
-}
-.themeList ul li{
-  margin-top:10px;
-}
-.themeInput{
-  overflow: hidden;
-  height: auto;
-  margin-bottom:5px;
-}
-.themeInput ul{
-  width:310px;
-  margin-top:10px;
-}
-.themeInput ul li{
-  margin-bottom:10px;
-  margin-top:0;
-}
-.themeList ul li{
-  float: left;
-}
-.themeTrends ul li:last-of-type{
-  margin-right:10px;
-  font-weight:bold;
-  background:#f7f7f7;
-  border-radius:4px;
-  cursor:pointer;
-}
-.themeAdd{
-  width:30px;
-  height:30px;
-  border:1px solid #e1e1e1;
-  border-radius:4px;
-  line-height:30px;
-  text-align: center;
-  color:#666666;
-}
-.themeTrends ul li:last-of-type:hover{
-  background:#dfdada;
-}
-.themeTrends ul li:not(:first-of-type),.themeTrends ul li:not(:last-of-type){
-  float: left;
-  margin-right:15px;
-  position: relative;
-}
-.themeList ul li p{
-  width:32px;
-  height:32px;
-  border:1px solid #e1e1e1;
-  border-radius:4px;
-  line-height:32px;
-  text-align: center;
-  color:#666666;
-}
-.themeList ul li span{
-  display: none;
-  position: absolute;
-  right:-7px;
-  top:-6px;
-  width:15px;
-  height:15px;
-  line-height:13px;
-  text-align: center;
-  background:#e64b15;
-  color:#fff;
-  font-weight: bold;
-  border-radius:50%;
-  cursor:pointer;
-}
-.themeList ul li input{
-  width:60px;
-  height:30px;
-  border:1px solid #e1e1e1;
-  border-top:2px solid #e1e1e1;
-  color:#666666;
-  padding-left:5px;
-}
-.themeListFixed ul{
-  padding-left: 5px;
-}
-.themeListFixed ul li{
-  padding:0 5px;
-}
-.themeListFixed ul li p{
-  width:80px;
-  height: 32px;
-  line-height: 32px;
-  border:1px solid #e1e1e1;
-  border-radius:4px;
-  font-size: 14px;
-}
-.CountZero{
-  height: 50px;
-  clear: both;
-}
-.CountZero span{
-  float: left;
-  line-height: 50px;
-  font-size: 14px;
-  cursor:pointer;
-}
-.themeSelect{
-  width:80px;
-  height:30px;
-  border:1px solid #e1e1e1;
-  float: left;
-  position: relative;
-  margin-top:10px;
-  font-size: 14px;
-  cursor: pointer;
-}
-.themeSelect .show{
-  height:30px;
-  line-height: 30px;
-  padding-left:5px;
-}
-.themeSelect i{
-  position: absolute;
-  width:0;
-  height:0;
-  border:5px solid transparent;
-  border-top-color:#e1e1e1;
-  right:5px;
-  top:13px;
-}
-.themeSelect:hover i{
-  border-top-color:#3b3b3b;
-}
-.themeSelect .themeUl{
-  display: none;
-  width:80px;
-  height:126px;
-  position: absolute;
-  left:0;
-  top:-126px;
-  z-index:5;
-  border:1px solid #696969;
-  background: #fff;
-}
-.themeSelect ul li{
-  height: 21px;
-  line-height: 21px;
-  font-size: 12px;
-  padding-left:2px;
-  cursor: pointer;
-}
-.themeSelect ul li:hover{
-  background: #81868d;
-  color:#fff;
-}
-.themeSelect .active{
-  background: #3b3b3b;
-  color:#fff;
-}
-.dynamicRight{
-  float:right;
-  width:70px;
-  height:30px;
-  line-height: 30px;
-  text-align: center;
-  font-size: 14px;
-  background: #3b3b3b;
-  color:#fff;
-  margin-right:10px;
-  border-radius: 3px;
-  cursor:pointer;
-  position: absolute;
-  right:0;
-  top:12px;
-  display: none;
-}
-/*答题卡 input 错误提示框*/
-.inputErrerBox{
-  display: none;
-  position: absolute;
-  z-index:5;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, .7);
-}
-.inputErrer{
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  width: 280px;
-  height: 152px;
-  background: white;
-}
-.inputErrer .inputErrerTitle{
-  height: 32px;
-  line-height: 32px;
-  background: #3b3b3b;
-}
-.inputErrer .inputErrerTitle a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.inputErrer .inputCount{
-  height: 130px;
-  line-height: 115px;
-  text-align: center;
-}
-/*答题卡结果弹出框*/
-.resultBox{
-  display: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 22%;
-  margin: auto;
-  width: 450px;
-  height:375px;
-  z-index: 5;
-  font-size: 14px;
-}
-.resultBox .resultHeadline{
-  height: 35px;
-  line-height: 35px;
-  background: #3b3b3b;
-}
-.resultBox .resultHeadline .resultHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  color: #fff;
-}
-.resultBox .resultHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.resultBox .resultHeadline a:active{
-  color: #3b3b3b;
-}
-.resultContent{
-  background:#fcfcfc;
-  width:100%;
-  font-size: 14px;
-  position: relative;
-}
-.resultContent .resultTit{
-  width:90%;
-  height:50px;
-  position: relative;
-  font-size: 14px;
-  margin-left:5%;
-}
-.resultContent .resultTit p{
-  position: absolute;
-  top:15px;
-}
-.resultTit p:nth-child(1){
-  left:10px;
-}
-.resultTit p:nth-child(2){
-  right:10px;
-  color:#3b3b3b;
-}
-.layerBox{
-  width:310px;
-  min-height:70px;
-  background: #fff;
-  border-radius: 5px;
-  border:1px solid #d5d5d5;
-  z-index: 6;
-  position: absolute;
-  padding:10px;
-  display: none;
-  word-break:break-all;
-}
-.layerBox span{
-  display: inline-block;
-  color:#d46363;
-  height:25px;
-  line-height: 25px;
-}
-.resultListUl{
-  width:90%;
-  margin-left:5%;
-}
-.resultListUl li{
-  width:100%;
-  height:50px;
-  position:relative;
-}
-.resultListUl li b{
-  position: absolute;
-  left:0;
-  top:5px;
-}
-.resultListUl li span{
-  position: absolute;
-  right:0;
-  top:5px;
-}
-.resultListUl li .staticPlan{
-  width:100%;
-  height:10px;
-  background:#e8e8e8;
-  position: absolute;
-  left:0;
-  bottom:8px;
-}
-.resultListUl li .dynamicPlan{
-  width:0%;
-  height:10px;
-  background:#92e325;
-  position: absolute;
-  left:0;
-  bottom:8px;
-}
-.resultBtn{
-  width:50%;
-  height: 40px;
-  margin-left:25%;
-  padding:30px 0 20px 0;
-}
-.resultBtn p{
-  width:80px;
-  height:32px;
-  float: left;
-  margin:0 15px;
-  color:#fff;
-  text-align: center;
-  line-height: 32px;
-  cursor: pointer;
-  border-radius:3px;
-}
-.resultBtn .resultConceal{
-  background:#3b3b3b;
-}
-.resultBtn .resultTermination{
-  background: #89817e;
-}
-/*学生界面弹出框*/
-.answerStudentBox{
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  width: 450px;
-  height: 250px;
-  background: white;
-  z-index: 5;
-  font-size: 14px;
-  display: none;
-}
-.answerStudentBox .studentHeadline{
-  height: 35px;
-  line-height: 35px;
-  background: #3b3b3b;
-  padding-left:14px;
-  color:#fff;
-}
-.countdown{
-  opacity: 0;
-  width:90%;
-  height:50px;
-  margin-left:5%;
-  padding-top:20px;
-}
-.signCountdown{
-  opacity: 0;
-  width:90%;
-  height:50px;
-  margin-left:5%;
-  padding-top:20px;
-}
-.resultValueUl{
-  width:100%;
-  height: 50px;
-}
-.resultValueUl li{
-  float: left;
-  text-align: center;
-  word-break: break-all;
-}
-.answerStudentContent .choiceBtn{
-  width:50%;
-  height: 40px;
-  margin-left:25%;
-  position: absolute;
-  left:0;
-  bottom:20px;
-}
-.choiceBtn p{
-  width:80px;
-  height:32px;
-  float: left;
-  margin:0 15px;
-  color:#fff;
-  text-align: center;
-  line-height: 32px;
-  cursor: pointer;
-  border-radius:3px;
-}
-.choiceBtn .referBtn{
-  background: #3b3b3b;
-}
-.choiceBtn .abandonBtn{
-  background: #89817e;
-}
-/*点名弹出框*/
-.signAllBox{
-  width:100%;
-  height:100%;
-  position: absolute;
-  left:0;
-  top:0;
-  background: rgba(0, 0, 0, .7);
-  display: none;
-  z-index:502;
-}
-.signBox{
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  width: 400px;
-  height: 250px;
-  background: white;
-  font-size: 14px;
-}
-.signBox .signHeadline{
-  height: 35px;
-  line-height: 35px;
-  background: #3b3b3b;
-}
-.signBox .signHeadline .signHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  color: #fff;
-}
-.signBox .signHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.signBox .signHeadline a:active{
-  color: #3b3b3b;
-}
-.signContent{
-  background:#fcfcfc;
-  width:100%;
-  font-size: 14px;
-  height:215px;
-}
-.signSelect{
-  width:140px;
-  height:30px;
-  border:1px solid #e1e1e1;
-  position: relative;
-  font-size: 14px;
-}
-.signSelect .show{
-  height:32px;
-  line-height:32px;
-  padding-left:10px;
-  cursor: pointer;
-}
-.signSelect i{
-  position: absolute;
-  width:0;
-  height:0;
-  border:5px solid transparent;
-  border-top-color:#e1e1e1;
-  right:5px;
-  top:15px;
-}
-.signSelect:hover i{
-  border-top-color:#3b3b3b;
-}
-.signUl{
-  display: none;
-  width:140px;
-  height:110px;
-  position: absolute;
-  left:0;
-  top:-110px;
-  z-index:5;
-  border:1px solid #696969;
-  background: #fff;
-}
-.signSelect ul li{
-  height: 22px;
-  line-height: 22px;
-  font-size: 12px;
-}
-.signSelect ul li:hover{
-  background: #81868d;
-  color:#fff;
-}
-.signSelect .active{
-  background: #3b3b3b;
-  color:#fff;
-}
-.signContentB{
-  display: none;
-}
-.signContent .signSelect{
-  height:32px;
-  position:absolute;
-  left:35%;
-  top:100px;
-}
-.signContent .signBtn{
-  height:50px;
-  position: absolute;
-  bottom:35px;
-  left:35%;
-}
-.signBtn .sponsorSign{
-  width:140px;
-  height:45px;
-  line-height: 45px;
-  background: #3b3b3b;
-  color:#fff;
-  text-align: center;
-  border-radius:3px;
-  font-size: 16px;
-  cursor: pointer;
-}
-.turnListBox{
-  width:100%;
-  height:150px;
-  margin-top:10px;
-  overflow: hidden;
-}
-.turnListBox ul{
-  width:85%;
-  height:100%;
-  overflow-y: auto;
-  margin-left:13%;
-}
-.turnListBox ul li{
-  width:100%;
-  height:40px;
-  line-height: 40px;
-}
-.turnListBox ul li p{
-  float: left;
-}
-.turnListBox ul li .turnListItemName{
-  width:40%;
-}
-.turnListBox ul li .turnListItemTime{
-  width:60%;
-}
-.turnBox{
-  position: absolute;
-  right:5px;
-  bottom:15px;
-  width:60%;
-}
-.turnListBox ::-webkit-scrollbar{
-  width:11px;
-}
-.turnListBox ::-webkit-scrollbar-thumb{
-  background:#c6cacd;
-}
-.turnBox p{
-  float: left;
-  width:50%;
-  height:32px;
-  line-height: 32px;
-  text-align: center;
-}
-.turnBox .turnResult{
-  color:#3b3b3b;
-  font-size: 16px;
-}
-.turnBox .turnResultBtn{
-  background:#3b3b3b;
-  color:#fff;
-  border-radius:3px;
-  cursor: pointer;
-}
-/*学生端*/
-.signStudentBox{
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  width: 400px;
-  height: 250px;
-  background: white;
-  z-index: 5;
-  font-size: 14px;
-  display: none;
-}
-.signStudentBox .signStudentHeadline{
-  height: 35px;
-  line-height: 35px;
-  background: #3b3b3b;
-}
-.signStudentBox .signStudentHeadline .signStudentHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  color: #fff;
-}
-.signStudentBox .signStudentHeadline a{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.signStudentBox .signStudentHeadline a:active{
-  color: #3b3b3b;
-}
-.signStudentContent{
-  background:#fcfcfc;
-  width:100%;
-  height:215px;
-  font-size: 14px;
-}
-.turnStudentBtn{
-  width:140px;
-  height:40px;
-  line-height: 40px;
-  background: #3b3b3b;
-  color:#fff;
-  text-align: center;
-  border-radius:3px;
-  font-size: 16px;
-  cursor: pointer;
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin: auto;
-  top:60%;
-}
-
-/*底部视频区域*/
-.botVideoWindow{
-  width: 100%;
-  height:148px;
-  position: relative;
-  float: left;
-  display: none;
-  overflow-x: scroll;
-  overflow-y: hidden;
-}
-.botH5VideoBox{
-  width:100%;
-  /*width: 895px;*/
-  height:144px;
-  padding-top:14px;
-  display: none;
-}
-.botFlashVideoBox{
-  /*width: 895px;*/
-  width: 100%;
-  height:144px;
-  position: absolute;
-  left:0;
-  top:0;
-  display: none;
-}
-.botH5VideoSingleBox{
-  width:174px;
-  height:130px;
-  background: #262626;
-  /*margin-right:10px;*/
-  margin-left: 10px;
-  float: left;
-  display: none;
-}
-
-.centre{
-  width:150px;
-  height:100%;
-  float: right;
-}
-
-/*显示图片大图*/
-.imagesLargerBox{
-  width:100%;
-  height:100%;
-  background: rgba(0, 0, 0, .7);
-  position: absolute;
-  left:0;
-  top:0;
-}
-.magnifyHeadline{
-  width:100%;
-  height:35px;
-}
-.magnifyHeadlineA{
-  position: absolute;
-  right:14px;
-  top:14px;
-  color:#fff;
-}
-.magnifyImgBox{
-  width:100%;
-  height:100%;
-}
-.magnifyImg{
-  max-width:90%;
-  max-height: 90%;
-  position: absolute;
-  left:0;
-  right:0;
-  top:0;
-  bottom:0;
-  margin:auto;
-  background-size:100% 100%;
-}
-
-/*聊天发送图片*/
-
-.message .chatImg{
-  width: 100px;
-  height: auto;
-  cursor: pointer;
-}
-.fileImgBtn{
-  float: left;
-  font-size: 18px;
-  color: #ccc;
-  margin-left: 10px;
-  margin-top: 7px;
-  cursor: pointer;
-}
-.fileImgInput{
-  position: absolute;
-  left: 67px;
-  top: 7px;
-  width: 20px;
-  height: 20px;
-  opacity: 0;
-  cursor: pointer;
-  overflow: hidden;
-  font-size: 0;
-}
-
-/*媒体共享控制条*/
-.h5MediaShareControls{
-  position: absolute;
-  bottom:0;
-  height: 36px;
-  width: 100%;
-  min-width: 330px;
-  background: #4f4f52;
-  display: none;
-}
-/*暂停/播放按钮*/
-.mediaShareProgressBtn{
-  float: left;
-  width: 12px;
-  height: 36px;
-  line-height: 36px;
-  margin-right: 15px;
-}
-.mediaShareProgressPlay{
-  margin-top: 11px;
-  margin-left: 10px;
-  width: 15px;
-  height: 15px;
-  float: left;
-  cursor: pointer;
-  background: url("../images/media/play-normal.png") no-repeat;
-}
-.mediaShareProgressPause{
-  margin-top: 11px;
-  margin-left: 10px;
-  width: 15px;
-  height: 15px;
-  float: left;
-  cursor: pointer;
-  background: url("../images/media/pause-normal.png") no-repeat;
-}
-
-/*进度条*/
-.mediaSharePlayProgressBox{
-  float: left;
-  margin-left: 10px;
-  width: 86%;
-  height: 2px;
-  margin-top: 3px;
-  position: relative;
-}
-.mediaSharePlayProgressBox span{
-  display: inline-block;
-}
-.mediaShare_bg{
-  width: 100%;
-  height: 7px;
-  background: #b2b2b2;
-  position: absolute;
-  left: 0;
-  top: 12px;
-  cursor: pointer;
-}
-.mediaShare_color{
-  height: 7px;
-  width: 0%;
-  background: #3598db;
+.usersign{
+  width:420px;
+  height: 475px;
   position: absolute;
   position: absolute;
   left: 0;
   left: 0;
-  top: 12px;
-  cursor: pointer;
-}
-.mediaShare_btn{
-  width: 20px;
-  height: 20px;
-  background: url(../images/media/Play-Control.png) no-repeat;
-  position: absolute;
-  left: 0%;
-  top: 9px;
-  margin-left: -4px;
-  cursor: pointer;
-}
-.mediaShareProgressVolBtn{
-  position: absolute;
-  right: 0px;
-  width: 12px;
-  height: 36px;
-  line-height: 36px;
-  margin-right: 22px;
-}
-.mediaShareTimestamp{
-  float: left;
-  margin-left: 8px;
-  width: 90px;
-  height: 20px;
-  margin-top: 10px;
-  position: relative;
-  font-size: 14px;
-  color: #b2b2b2;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  background: #fff;
 }
 }
-.mediaVolumePlay{
-  margin-top: 12px;
-  margin-left: 8px;
-  width: 17px;
-  height: 15px;
-  float: left;
-  cursor: pointer;
-  background: url(../images/media/speaker-normal.png) no-repeat;
+.userLogin{
+  height:420px;
 }
 }
-
-.mediaSharePlayProgressVoiceBox{
-  display: none;
-  width: 10px;
-  height: 80px;
+.usersignA{
+  font-size: 16px;
   position: absolute;
   position: absolute;
-  right: 20px;
-  bottom: 48px;
+  right:10px;
+  top:10px;
+  color: #666666;
 }
 }
-.mediaShareVoice_bg{
-  width: 3px;
-  height: 100%;
-  background: #b2b2b2;
-  position: absolute;
-  right: 0.5px;
-  top: 12px;
+.usersignTit{
+  font-size: 16px;
+  text-align: center;
+  height: 60px;
+  line-height: 60px;
+  border-bottom:1px solid #e6e6e6;
+  margin:0 30px 25px;
+  color:#666666;
 }
 }
-.mediaShareVoice_color{
-  height: 100%;
-  width: 3px;
-  background: #3598db;
-  position: absolute;
-  left: 7px;
-  bottom: -12px;
+.usersignLi{
+  height:32px;
+  margin:0 70px 20px;
+  line-height: 32px;
+  border-radius: 2px;
+  border:1px solid #e6e6e6;
+  font-size: 12px;
 }
 }
-.mediaShareVoice_btn{
-  width: 10px;
-  height: 10px;
-  background: url(../images/media/volume-control.png) no-repeat;
-  position: absolute;
-  top: 0%;
-  margin-left: 4px;
-  margin-top: 7px;
-  cursor: pointer;
+.userVerifyLi{
+  width: 157px;
+  position: relative;
 }
 }
+.userVerifyLiInput{
 
 
-/*1v1视频区域样式*/
-.media1v1BoxView{
-  width:320px;
-  height:100%;
-  float: right;
-  position: relative;
-  display: none;
 }
 }
-.media1v1BoxView_flash{
-  width:320px;
-  height:490px;
-  display: none;
+.usersignInput{
+  padding-left:20px;
+  border:none;
+  background: none;
+  outline: none;
 }
 }
-.media1v1BoxView_h5{
-  width:320px;
-  height:490px;
+.userVerifyLiInputBtn{
+  height:32px;
+  border:none;
+  color:#fff;
+  background: #3498db;
+  width:100px;
+  text-align: center;
+  margin-left:20px;
   position: absolute;
   position: absolute;
-  left:0;
+  border-radius: 3px;
+  right:-120px;
   top:0;
   top:0;
-  display: none;
-}
-.media1v1BoxView_top,.media1v1BoxView_bottom{
-  width:320px;
-  height:240px;
+  cursor: pointer;
 }
 }
-.media1v1BoxView_top{
+.permitSign{
+  border:none;
   margin-bottom:10px;
   margin-bottom:10px;
+  margin-top: -10px;
+  position: relative;
 }
 }
-/*视频区域上一步下一步按钮*/
-.styleStep{
-  width:15px;
-  height:30px;
-  position: absolute;
-  bottom:50px;
-  background: #474747;
-  opacity:.6;
-  -webkit-border-radius:4px;
-  -moz-border-radius:4px;
-  border-radius:4px;
-}
-
-.nextStep {
-  background: url("../images/media/turnRight-hover.png") no-repeat center center;
-  background-size: 100% 100%;
-  right: 3px;
-  -webkit-transform: translate(0, -50%);
-  -moz-transform: translate(0, -50%);
-  -ms-transform: translate(0, -50%);
-  -o-transform: translate(0, -50%);
-  transform: translate(0, -50%);
-  cursor: pointer;
-  display: none;
+.selectStatus{
+  padding-left:20px;
+  color:#333333;
 }
 }
-.prevStep {
-  background: url("../images/media/turnLeft-hover.png") no-repeat center center;
-  background-size: 100% 100%;
-  position: absolute;
-  left: 13px;
-  -webkit-transform: translate(0, -50%);
-  -moz-transform: translate(0, -50%);
-  -ms-transform: translate(0, -50%);
-  -o-transform: translate(0, -50%);
-  transform: translate(0, -50%);
+.btnUsersign{
+  width: 100%;
+  height:34px;
+  background: #3498db;
+  color:#fff;
+  text-align: center;
+  border:none;
+  border-radius: 3px;
   cursor: pointer;
   cursor: pointer;
-  display: none;
 }
 }
-
-/*flash和浏览器和摄像头麦克风错误*/
-.errorHintBox{
-  z-index: 2000;
-  width:100%;
-  height:100%;
-  position: absolute;
-  left:0;
-  top:0;
-  background: rgba(0, 0, 0, .7);
+.permitSignIcon{
   display: none;
   display: none;
 }
 }
-.errorHint{
+.permitSignIcon+label{
+  width: 18px;
+  height:18px;
+  display: inline-block;
+  cursor: pointer;
+  margin-right:15px;
+  background: url(../images/circle.png) no-repeat;
   position: absolute;
   position: absolute;
   left:0;
   left:0;
-  right: 0;
-  top:0;
-  bottom:0;
-  margin:auto;
-  width: 370px;
-  height: 220px;
-  background: #4f4e53;
-  color:#fff;
-  display: none;
-}
-.errorHint1{
-  height: 174px;
-}
-.errorHint2{
-  height:210px;
-}
-.errorHint3{
-  height: 190px;
-}
-.errorFlashHintHeadline{
-  height: 35px;
-  line-height: 35px;
-  background: #3b3b3b;
-}
-.errorHintHeadlineTitle{
-  position: absolute;
-  left: 14px;
-  font-size: 12px;
-  color: #fff;
-}
-.errorFlashHintA{
-  position: absolute;
-  top: 0;
-  right: 14px;
-  color: #ffffff;
-}
-.errorFlashHintA:hover{
-  color: #CCCCCC;
-}
-.errorFlashHintA:active{
-  color: #3b3b3b;
-}
-.errorHintTit{
-  font-size: 14px;
-  padding:7px 0 7px 20px;
+  top:5px;
 }
 }
-.errorFlashHintList{
-  font-size:12px;
-  height: 26px;
-  line-height: 26px;
-  color:#fff;
-  text-decoration: underline;
+.permitSignIcon:checked+label{
+  width: 18px;
+  height:18px;
   display: inline-block;
   display: inline-block;
-  width:100%;
-  cursor: pointer;
+  background: url(../images/circle01.png) no-repeat;
 }
 }
-.errorFlashHintList:hover{
-  text-decoration: underline;
-  color:#5fa9da;
+.permitSignMsg{
+  padding-left:30px;
 }
 }
-.errorFlashIcon{
-  padding:0 5px 2px 10px;
-}
-.errorHintContent{
-  font-size: 14px;
-  text-align: center;
-  padding-top:70px;
-}
-.errornetworkHintContent{
-  font-size: 14px;
-  text-align: center;
-  padding-top:40px;
+.btnUsersignLi{
+  margin-bottom: 10px;
 }
 }
-.errorFlashTit{
-  display: inline-block;
-  font-size: 14px;
+.loginBtnBox{
+  width:280px;
+  font-size: 12px;
+  text-align: right;
+  margin:0 70px;
 }
 }
-.errorFlashLink{
+.loginBtn{
   color:#d95136;
   color:#d95136;
-  text-decoration: underline;
-}
-.errorFlashLink:hover{
-  text-decoration: underline;
-}
-.flashHintImg{
-  width:92%;
-  height:100%;
-  margin-left:4%;
-}
-.errorDownloadFlashTit{
-  font-size: 14px;
-  padding:40px 20px 7px 20px;
 }
 }
-.errorSetFlashHintTit{
-  font-size: 14px;
-  padding:25px 0 7px 20px;
-}
-.errorSetFlashHintInfo{
-  font-size: 14px;
-  border: 1px solid #666;
-  margin:10px;
-  padding:15px 10px 20px;
+.usersignNameLi{
+  position: relative;
 }
 }
-.errorSetFlashHintA{
-  font-size: 14px;
-  text-decoration: underline;
-  color:#3498db;
+.requiredMsg{
   position: absolute;
   position: absolute;
-  bottom: 25px;
-  right:36%;
-  width: 115px;
-  text-align: center;
+  right:-15px;
+  top:4px;
+  font-size: 20px;
+  line-height: 32px;
+  color:#d95136;
 }
 }
-.errorSetFlashHintB{
-  font-size: 14px;
-  text-decoration: underline;
-  color:#3498db;
-  position: absolute;
-  bottom: 25px;
-  right:41%;
+/*登录*/
+.forgetPasswordBtn{
+  width:280px;
+  font-size: 12px;
+  text-align: right;
+  margin:0 70px;
+  color:#333333;
   cursor: pointer;
   cursor: pointer;
-  display: none;
-  right:36%;
-  width: 115px;
-  text-align: center;
-}
-.errorSetFlashHintA:hover,.errorSetFlashHintB:hover{
-  color:#5fa9da;
-  text-decoration: underline;
+  margin-bottom:20px;
 }
 }
-.errorFlashListLeft{
-  float: left;
-  width:40%;
-  padding-left:10px;
+.nowSignBtn{
+  color:#d95136;
+  margin-top:20px;
 }
 }
-.errorFlashListLeft1{
-  width:53%;
+.openidOauthBox{
+  width:280px;
+  margin:0 70px;
 }
 }
-.showWindowText{
-  font-size: 14px;
-  color: #fff;
-  text-align: center;
-  margin-top: 28px;
-  line-height: 14px;
-  position: absolute;
-  left: 50%;
-  top: 40px;
-  width: 200px;
-  margin-left: -100px;
-}
-.closeInfoBtn{
-  width: 70px;
-  height: 32px;
-  background: #999;
-  border: 0;
-  margin-left: 72px;
-  margin-top: 77px;
+.openidOauth{
+  width:42px;
+  color:#bfbfbf;
   cursor: pointer;
   cursor: pointer;
-  color: #fff;
-  border-radius: 3px;
-
-}
-.cancelCloseInfo{
-  background: #3498db;
-  margin-top: 78px;
-  margin-left: 93px;
-}
-.errorPublicHintContent{
-  font-size: 14px;
-  color: #fff;
-  text-align: center;
-  line-height: 14px;
-  position: absolute;
-  left: 50%;
-  top: 45%;
-  width: 250px;
-  margin-left: -125px;
-  line-height: 16px;
-}
-.setFlashGuideTit{
-  font-size: 14px;
-  padding-left:20px;
-  padding-top:10px;
-}
-.setFlashGuideList{
-  float: left;
-  width:100%;
-  height:30px;
-  line-height: 30px;
-  font-size: 14px;
-}
-.setFlashGuideListP{
   float: left;
   float: left;
-  padding-left:10px;
 }
 }
-.setFlashHintA{
-  float: right;
-  text-decoration: underline;
-  color:#3498db;
-  padding-right:20px;
+.openidOauth1{
+  margin:0 60px;
 }
 }
-.setFlashHintA:hover{
-  color:#5fa9da;
-  text-decoration: underline;
+.openidOauth2{
+  padding-left:20px;
 }
 }
-
-/*跳转到指定页*/
-.botTurn .pageNo input{
-  float: right;
-  margin: 12px 10px 0 5px;
-  width: 20px;
-  height: 20px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  background: #333333;
-  position: relative;
-  color: #CCCCCC;
-  text-align: center;
-  outline: none;
+.weChatLogin{
+  width:42px;
+  height:42px;
+  display: inline-block;
 }
 }
-.botTurn .turn .go{
-  float: right;
-  margin: 12px 10px 0 5px;
-  width: 28px;
-  height: 22px;
-  line-height: 22px;
-  border-radius: 3px;
-  position: relative;
-  font-size: 12px;
-  color: #fff;
-  cursor: pointer;
-  background: #3598db;
+.openidOauthTit{
+  width: 42px;
   text-align: center;
   text-align: center;
+  padding-top:5px;
+  display: inline-block;
 }
 }
-
-/*人员搜索*/
-.searchBox{
-  display: none;
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  width: 300px;
-  height: 32px;
-  border-radius: 4px;
-  z-index: 1;
-  background: #e3e4e6;
-}
-.searchName{
-  height: 32px;
-  width: 265px;
-  outline: none;
-  border: none;
-  margin-left: 10px;
-  background: #e3e4e6;
-  font-size: 12px;
-  color: #333;
-}
-.clearInput{
-  position: absolute;
-  top: 8px;
-  cursor: pointer;
-
-}
-/*flash和浏览器和摄像头麦克风错误  END*/
-/* warn警告框 */
-.warnHintBox{
-  z-index: 2000;
-  width:300px;
-  height:120px;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  background: #fffdfd;
-  cursor: default;
-  font-size: 14px;
-  border-radius:4px;
-  box-shadow: 1px 3px 6px #adadad;
-  border: 1px solid #c1baba;
-  display: none;
-}
-.warnHintA{
-  position: absolute;
-  right:8px;
-  top:6px;
+/*删除*/
+.removeHandler{
+  width: 310px;
+  height:170px;
 }
 }
-.warnHintContent{
-  width:100%;
-  height:120px;
-  line-height: 120px;
+.removeHandlerContent{
   text-align: center;
   text-align: center;
+  font-size: 16px;
+  color:#333333;
+  margin-top:60px;
 }
 }
-/* warn警告框  END  */
-/*兼课声音控制*/
-.invisible_speak{
-  float: left;
-  margin:10px 0 0 20px;
-  height:20px;
-  display: none;
-}
-.invisible_speakVolume{
-  width: 50px;
-  height: 15px;
-  float: left;
-  position: relative;
-  left:10px;
-  top:3px;
-}
-.invisible_speakVolumeBg{
-  width: 50px;
-  height: 15px;
-  background: url("../images/music/invisible_novolume.png");
-}
-.invisible_speakVolumePlanBox{
-  width: 50px;
-  height: 15px;
-  overflow: hidden;
-  position: absolute;
-  left:0;
-  top:0;
-}
-.invisible_speakVolumePlan{
-  width: 0%;
-  height: 15px;
-  position: absolute;
-  left:0;
-  top:0;
-  background: url("../images/music/invisible_volume.png");
+.removeHandlerBtn{
+  margin-top:30px;
 }
 }
-.invisible_speakBtn{
-  float: left;
-  position: relative;
-  width: 16px;
-  height: 18px;
+.removeHandlerBtn button{
+  border:none;
+  width:72px;
+  height:34px;
+
+  border-radius: 3px;
 }
 }
-.invisible_speakBtnOpen{
-  width: 16px;
-  height: 18px;
-  cursor: pointer;
+.removeConfirm{
+  margin:0 30px 0 60px;
+  background: #3498db;
 }
 }
-.invisible_speakBtnClose{
-  display: none;
-  position: absolute;
-  left: 0;
-  top:1px;
-  width: 16px;
-  height: 18px;
-  cursor: pointer;
+.removeCancel{
+  background: #e6e6e6;
 }
 }

@@ -6,1245 +6,363 @@
     <link rel="stylesheet" href="stylesheets/style.css"/>
     <link rel="stylesheet" href="stylesheets/style.css"/>
 </head>
 </head>
 <body>
 <body>
-<div class="box">
-    <!--头部-->
+<div class="baseboardBox">
+    <!--头部导航-->
+    <div class="headerBg">
         <div class="header">
         <div class="header">
-        <li class="classStatusIcon iconfont"></li>
-        <!--左侧显示当前状态-->
-        <li class="classStatus"></li>
-        <!--当前课堂进行时间-->
-        <li class="classTimestampText"></li>
-        <!--当前课堂人数-->
-        <li class="curClassUserNum"><span id="memberNum"></span>
-            <span class="curClassUserNumTotal">0</span>
-        </li>
-        <!--左侧显示当前课堂主题-->
-        <li class="classTheme"></li>
-
-        <div class="exit header_title">
-            <span class="exitText header_text">退出</span>
-            <span class=" iconfont">&#xe607;</span>
-        </div>
-        <div class="setting header_title">
-            <span class="settingText header_text">设置</span>
-            <span class="iconfont">&#xe631;</span>
-        </div>
-        <div class="help header_title">
-            <span class="helpText header_text">帮助</span>
-            <span class="iconfont">&#xe608;</span>
-        </div>
-        <div class="sign header_title">
-            <span class="signText header_text">点名</span>
-            <span class="iconfont">&#xe67c;</span>
-        </div>
-        <div class="answer header_title">
-            <span class="answerText header_text">答题卡</span>
-            <span class="iconfont">&#xe67a;</span>
-        </div>
-        <div class="closeClass header_title">
-            <span class="startText header_text" id="endClassroom">结束课堂</span>
-            <span class="iconfont">&#xe660;</span>
-        </div>
-        <div class="pauseClass header_title">
-            <span class="startText header_text" id="pauseClassroom">暂停上课</span>
-            <span class="iconfont">&#xe60a;</span>
-        </div>
-        <div class="startClass header_title">
-            <span class="startText header_text" id="startClassroom">开始上课</span>
-            <span class="iconfont">&#xe61d;</span>
-        </div>
-    </div>
-    <!--头部以下的内容区域-->
-    <div class="mainContentBox clear" id="mainContentBox">
-        <div class="right">
-            <div class="videoWindow">
-                <!--flash播放器-->
-                <div class="videoDivBox" id="videoDivBox" style="background-color: #4c4c4c;  width: 320px;height: 240px;">
-                </div>
-                <video id="replayVideo"  poster="images/waiting.png" width="320" height="240"
-                       style="background-color: #36a1c6;position: absolute;top: 0px;left: 0px">
-                    您的浏览器不支持 video 标签。
-                </video>
-            </div>
-            <div class="discussAndUsers">
-                <ul class="tabTitle">
-                    <li class="userListTitle">
-                        <span id="rosterIcon" class="iconfont userListIcon">&#xe642;</span>
-                        <span><em id="member">成员</em><em class="raiseNum"></em></span>
-                    </li>
-                    <li class="discussTitle ">
-                        <span class="iconfont userListIcon">&#xe643;</span>
-                        <span id="discuss">讨论</span>
-                    </li>
+            <div class="header_img">
+                <img src="images/logo.png" alt="">
+            </div>
+            <ul class="header_list">
+                <li class="header_listMsg header_listTeacherMsg active" id="defaultBtn">首页</li>
+                <li class="header_listMsg" id="liveBtn">直播课堂</li>
+                <li class="header_listMsg header_listTeacherMsg" id="lanclassBtn">互动课堂</li>
+                <li class="header_listMsg header_listTeacherMsg" id="teacherBtn">老师</li>
             </ul>
             </ul>
-                <!--举手按钮-->
-                <div id="raiseBtn" class="raiseBtn iconfont" title="举手按钮">&#xe603;</div>
-                <div class="controlBrush" title="控制学生画笔" id="controlBrush"></div>
-                <div class="tabCon curClassOn">
-                    <!--搜索框-->
-                    <div id="searchBox" class="searchBox">
-                        <input id="searchName" class="searchName" type="text"/>
-                        <span id="clearInput" class= "clearInput iconfont">&#xe635;</span>
-                    </div>
-                    <!--成员列表-->
-                    <div class="curClassUserList">
-                        <div id="curClassUserListTeacher"></div>
-                        <div id="curClassUserListRaise"></div>
-                        <div id="curClassUserListCommon"></div>
-                    </div>
-                </div>
-                <div class="tabCon selectdOn">
-                    <!--聊天区域-->
-                    <div class="chat">
-                        <div class="msg-border">
-                            <div id="panel_message" class="msg clear">
-
-                            </div>
-                        </div>
-                        <div class="input-send clear">
-                            <button id="btn_send" class="send" type="submit">发送</button>
-                            <span id="face" class="face iconfont">&#xe602;</span>
-                            <span id="bannedBtn" class="bannedBtn" title="全体禁言"></span>
-                            <span id="fileImg" class="fileImgBtn iconfont" title="上传图片">&#xe6c5;
-                             <input type="file" id="fileImgInput" class="fileImgInput"/></span>
-                            </span>
-
-                            <!--监课音频推流控制-->
-                            <div id="invisible_speak" class="invisible_speak">
-                                <div class="invisible_speakBtn">
-                                    <img src="images/music/voice_close.png" alt="" id="invisible_speakBtnOpen" class="invisible_speakBtnOpen" title="开启音频">
-                                    <img src="images/music/voiceOpen.png" alt="" id="invisible_speakBtnClose" class="invisible_speakBtnClose" title="关闭音频">
+            <div class="header_seek">
+                <input type="text" class="header_seekInput">
+                <button class="header_seekBtn"><img src="" alt=""></button>
             </div>
             </div>
-                                <div class="invisible_speakVolume">
-                                    <div class="invisible_speakVolumeBg" id="invisible_speakVolumeBg"></div>
-                                    <div class="invisible_speakVolumePlanBox">
-                                        <div class="invisible_speakVolumePlan" id="invisible_speakVolumePlan"></div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="input-face">
-                                <input id="txt_message"
-                                       type="text"/>
-                            </div>
-                        </div>
-                    </div>
-                    <!--表情列表-->
-                    <div id="facelist" class="swiper-container" style="display: none">
-                        <div class="inner-slide" id="inner-slide">
-                            <div id="slide1" class="swiper-slide">
-                                <ul>
-                                    <li><img src="images/face/aimu.png" data-type="aimu">
-                                    </li>
-                                    <li><img src="images/face/daxiao.png" data-type="daxiao">
-                                    </li>
-                                    <li><img src="images/face/huaixiao.png" data-type="huaixiao">
-                                    </li>
-                                    <li><img src="images/face/liuhan.png" data-type="liuhan">
-                                    </li>
-                                    <li><img src="images/face/shuijiao.png" data-type="shuijiao">
-                                    </li>
-                                    <li><img src="images/face/yiwen.png" data-type="yiwen">
-                                    </li>
-                                    <li><img src="images/face/aoman.png" data-type="aoman">
-                                    </li>
-                                    <li><img src="images/face/jiew.png" data-type="jiew">
-                                    </li>
-                                    <li><img src="images/face/liulei.png" data-type="liulei">
-                                    </li>
-                                    <li><img src="images/face/sun.png" data-type="sun">
-                                    </li>
-                                    <li><img src="images/face/youhh.png" data-type="youhh">
-                                    </li>
-                                    <li><img src="images/face/baiyan.png" data-type="baiyan">
-                                    </li>
-                                    <li><img src="images/face/fadai.png" data-type="fadai">
-                                    </li>
-                                    <li><img src="images/face/jingkong.png" data-type="jingkong">
-                                    </li>
-                                    <li><img src="images/face/meiyan.png" data-type="meiyan">
-                                    </li>
-                                    <li><img src="images/face/tiaoxie.png" data-type="tiaoxie">
-                                    </li>
-                                    <li><img src="images/face/yue.png" data-type="yue">
-                                    </li>
-                                    <li><img src="images/face/baoquan.png" data-type="baoquan">
-                                    </li>
-                                    <li><img src="images/face/fanu.png" data-type="fanu">
-                                    </li>
-                                    <li><img src="images/face/jingya.png" data-type="jingya">
-                                    </li>
-                                    <li><img src="images/face/mojing.png" data-type="mojing">
-                                    </li>
-                                    <li><img src="images/face/touxiao.png" data-type="touxiao">
-                                    </li>
-                                    <li><img src="images/face/yumen.png" data-type="yumen">
-                                    </li>
-                                    <li><img src="images/face/bishi.png" data-type="bishi">
-                                    </li>
-                                    <li><img src="images/face/fendou.png" data-type="fendou">
-                                    </li>
-                                    <li><img src="images/face/kafei.png" data-type="kafei">
-                                    </li>
-                                    <li><img src="images/face/piezui.png" data-type="piezui">
-                                    </li>
-                                    <li><img src="images/face/tu.png" data-type="tu">
-                                    </li>
-                                    <li><img src="images/face/yun.png" data-type="yun">
-                                    </li>
-                                    <li><img src="images/face/bizui.png" data-type="bizui">
-                                    </li>
-                                    <li><img src="images/face/ganga.png" data-type="ganga">
-                                    </li>
-                                    <li><img src="images/face/kelian.png" data-type="kelian">
-                                    </li>
-                                </ul>
-                            </div>
-                            <div id="slide2" class="swiper-slide">
-                                <ul>
-                                    <li><img src="images/face/pijiu.png" data-type="pijiu">
-                                    </li>
-                                    <li><img src="images/face/weiqu.png" data-type="weiqu">
-                                    </li>
-                                    <li><img src="images/face/zaijian.png" data-type="zaijian">
-                                    </li>
-                                    <li><img src="images/face/cahan.png" data-type="cahan">
-                                    </li>
-                                    <li><img src="images/face/guai.png" data-type="guai">
-                                    </li>
-                                    <li><img src="images/face/koubi.png" data-type="koubi">
-                                    </li>
-                                    <li><img src="images/face/qiang.png" data-type="qiang">
-                                    </li>
-                                    <li><img src="images/face/weixiao.png" data-type="weixiao">
-                                    </li>
-                                    <li><img src="images/face/zancheng.png" data-type="zancheng">
-                                    </li>
-                                    <li><img src="images/face/cool.png" data-type="cool">
-                                    </li>
-                                    <li><img src="images/face/guzhang.png" data-type="guzhang">
-                                    </li>
-                                    <li><img src="images/face/kuaikl.png" data-type="kuaikl">
-                                    </li>
-                                    <li><img src="images/face/qinqin.png" data-type="qinqin">
-                                    </li>
-                                    <li><img src="images/face/woshou.png" data-type="woshou">
-                                    </li>
-                                    <li><img src="images/face/zhemo.png" data-type="zhemo">
-                                    </li>
-                                    <li><img src="images/face/dabing.png" data-type="dabing">
-                                    </li>
-                                    <li><img src="images/face/hanxiao.png" data-type="hanxiao">
-                                    </li>
-                                    <li><img src="images/face/kulou.png" data-type="kulou">
-                                    </li>
-                                    <li><img src="images/face/qiu.png" data-type="qiu">
-                                    </li>
-                                    <li><img src="images/face/xigua.png" data-type="xigua">
-                                    </li>
-                                    <li><img src="images/face/zhouma.png" data-type="zhouma">
-                                    </li>
-                                    <li><img src="images/face/daku.png" data-type="daku">
-                                    </li>
-                                    <li><img src="images/face/haqi.png" data-type="haqi">
-                                    </li>
-                                    <li><img src="images/face/kun.png" data-type="kun">
-                                    </li>
-                                    <li><img src="images/face/ruo.png" data-type="ruo">
-                                    </li>
-                                    <li><img src="images/face/xin.png" data-type="xin">
-                                    </li>
-                                    <li><img src="images/face/zuohh.png" data-type="zuohh">
-                                    </li>
-                                    <li><img src="images/face/dangao.png" data-type="dangao">
-                                    </li>
-                                    <li><img src="images/face/hua.png" data-type="hua">
-                                    </li>
-                                    <li><img src="images/face/lianhong.png" data-type="lianhong">
-                                    </li>
-                                    <li><img src="images/face/shuai.png" data-type="shuai">
-                                    </li>
-                                    <li><img src="images/face/yinxian.png" data-type="yinxian">
+            <ul class="DownloadLoginBox">
+                <li class="androidDownload">
+                    移动端下载
                 </li>
                 </li>
+                <li class="userNews iconfont">&#xe608;</li>
+                <li class="userLoginBtn" id="homeUserLoginBtn"></li>
             </ul>
             </ul>
         </div>
         </div>
     </div>
     </div>
-                        <ul class="tiplist" id="tiplist">
-                            <li class="bg"></li>
-                            <li></li>
+    <!--图片轮播-->
+    <div class="slideshow" id="slideshow">
+        <ul class="motionMapBox" id="motionMapBox">
+            <li class="slidesMap"><img class="slidesImg" src="images/xdybg.png" alt=""></li>
+            <li class="slidesMap"><img class="slidesImg" src="images/bg.jpg" alt=""></li>
+            <li class="slidesMap"><img class="slidesImg" src="images/xdybg.png" alt=""></li>
+            <li class="slidesMap"><img class="slidesImg" src="images/bg.jpg" alt=""></li>
+            <li class="slidesMap"><img class="slidesImg" src="images/xdybg.png" alt=""></li>
         </ul>
         </ul>
-
-                    </div>
-                </div>
-            </div>
-            <!--箭头-->
-            <div class="arrowsBtn">
-                <div class="arrowsLeft"><p></p></div>
-                <div class="arrowsRight"><p></p></div>
-            </div>
-        </div>
-        <!--1V1视频布局-->
-        <div class="media1v1BoxView" id="media1v1BoxView">
-            <div class="media1v1BoxView_flash" id="media1v1BoxView_flash">
-                <!--<div id="media1v1BoxView_flash_content"></div>-->
-            </div>
-            <div class="media1v1BoxView_h5" id="media1v1BoxView_h5">
-                <div class="media1v1BoxView_top" id="media1v1BoxView_top">
-                    <video id="media1v1BoxView_top_video" width="100%" height="100%"></video>
-                </div>
-                <div class="media1v1BoxView_bottom" id="media1v1BoxView_bottom">
-                    <video id="media1v1BoxView_bottom_video" width="100%" height="100%"></video>
-                </div>
-            </div>
-        </div>
-        <div class="leftWarp">
-            <div class="leftWarp_top">
-                <!--左边栏-->
-                <div class="left">
-                    <!--文档-->
-                    <div class="docListOut docListOut1" id="docUploadOut" title="上传文档">
-                        <span class="iconfont docList">&#xe648;<input type="file" id="file"/>
-                        </span>
-                    </div>
-
-                    <div class="docListOut" id="docListOut" title="选择文档">
-                        <span class="iconfont docList">&#xe620;</span>
+        <ol class="dots" id="dots">
+        </ol>
+    </div>
+    <div class="themeBox" id="themeBox">
+        <!--首页-->
+        <div class="box" id="defaultBox">
+            <div class="curriculumBox" id="liveListBox">
+                <div class="curriculumHandler">
+                    <p class="curriculumTitle" id="liveCoursesTitle">最新直播课程</p>
+                    <p class="curriculumMove">更多</p>
+                    <img class="curriculumIcon" src="images/more.png" alt="">
+                </div>
+                <div class="curriculumListBox" id="liveList">
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
-
-                    <!--屏幕共享-->
-                    <div class="docUploadForbid"></div>
-                    <div class="docListOut" id="screenSharingOut" title="屏幕共享">
-                        <span class="iconfont docList">&#xe66e;</span>
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
-
-                    <!--媒体共享-->
-                    <div class="docListOut docUploadOut" id="mediaUpLoadOut" title="上传媒体文件">
-                        <span class="iconfont docList">&#xe648;<input type="file" id="mediaFile"/>
-                        </span>
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
-                    <div class="docListOut" id="mediaListOut" title="选择媒体文件">
-                        <span class="iconfont docList">&#xe66f;</span>
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
-
-                    <!--伴音-->
-                    <div class="docListOut" id="musicUploadOut" title="上传音频">
-                        <span class="iconfont docList">&#xe68b;</span>
                 </div>
                 </div>
-
-                    <!--控制左侧栏是否可点击的遮罩栏-->
-                    <div class="leftBarEnabledMask" id="leftBarEnabledMask"></div>
             </div>
             </div>
-
-                <div class="leftGap"></div>
-
-                <!--<div class="rightGap"></div>-->
-
-                <div class="fold">
-                    <!--显示隐藏右侧按钮-->
-                    <div id="expand" class="expand">></div>
-                    <div id="collapse" class="collapse"></div>
+            <div class="curriculumBox" id="lanclassListBox ">
+                <div class="curriculumHandler">
+                    <p class="curriculumTitle" id="lessonsTitle">最新互动课程</p>
+                    <p class="curriculumMove">更多</p>
+                    <img class="curriculumIcon" src="images/more.png" alt="">
                 </div>
                 </div>
-                <div class="middle">
-                    <div class="docBox">
-
-                        <!--加载转圈-->
-                        <div class="spinnerMasker">
-                            <div class="exitSpinnerMasker">
-                                <a href="javascript: void(0)" class="exitSpinnerMaskerA iconfont">&#xe638;</a>
-                            </div>
-                            <div class="spinnerMask"><div class="minspinner"></div></div>
-                            <div class="spinnerHtml"></div>
-                            <div class="spinner">
-                                <div class="spinner-container container1">
-                                    <div class="circle1"></div>
-                                    <div class="circle2"></div>
-                                    <div class="circle3"></div>
-                                    <div class="circle4"></div>
+                <div class="curriculumListBox" id="lanclassList">
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
-                                <div class="spinner-container container2">
-                                    <div class="circle1"></div>
-                                    <div class="circle2"></div>
-                                    <div class="circle3"></div>
-                                    <div class="circle4"></div>
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
-                                <div class="spinner-container container3">
-                                    <div class="circle1"></div>
-                                    <div class="circle2"></div>
-                                    <div class="circle3"></div>
-                                    <div class="circle4"></div>
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
                 </div>
                 </div>
-
-                        <!--文档-动态ppt-白板标注-->
-                        <div class="docGroup" style="position: relative;background-color:rgb(50,50,50)" >
-                            <iframe id="framePPT" class="framePPT"  name="frame" src="" scrolling="no" frameborder="no"></iframe>
-                            <img class="docView" width="100%"/>
-                            <canvas id="canvasContent"  class="canvasContent"></canvas>
-                            <div class="laserBoard"><div class="laserRed"></div></div>
             </div>
             </div>
-
-                        <!--屏幕共享-->
-                        <div class="screenSharingGroup">
-                            <div class="sharingMsgBox">
-                                <!--<div class="sharingMsg"></div>-->
-                                <img class="shareBackdrop" src="images/img.png" alt="">
-                                <div id="opening" class="sharingMsg">正在开启</div>
-                                <div id="download" class="sharingMsg sharingMsg1">请先下载最新版插件</div>
-                                <div id="downloading" class="sharingMsg">正在下载中...</div>
-                                <div id="stopShare" class="sharingMsg sharingMsg2">终止共享</div>
-                                <div class="downloadCancel">取消</div>
-
+            <div class="curriculumBox curriculumBox1" id="teacherIntroBox">
+                <div class="curriculumHandler">
+                    <p class="curriculumTitle">推荐老师</p>
+                    <p class="curriculumMove">更多</p>
+                    <img class="curriculumIcon" src="images/more.png" alt="">
                 </div>
                 </div>
-                            <div class="screenMediaShareBox" style="position: absolute;width:100%;height: 100%; display: none">
-                                <div id="screenMediaShare"></div>
+                <div class="curriculumListBox" id="teacherIntro">
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
-                            <div class="h5ScreenShareBox" style="position: absolute;width:100%;height: 100%; display: none">
-                                <video id="h5ScreenShare" width="100%" height="100%"></video>
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
-
-                        <!--媒体共享-->
-                        <div class="mediaShareGroup" id="mediaShareGroup">
-                            <div class="h5MediaShareBox" style="position: absolute;width:100%;height: 100%; display: none">
-                                <video id="h5MediaShare" width="100%" height="100%"  autoplay="autoplay" ></video>
+                    <div class="curriculumList">
+                        <img class="curriculumListImg" src="" alt="">
+                        <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                        <p class="curriculumListInfo">
+                            <span class="curriculumListTime">今天 09:00-21:30</span>
+                            <span class="curriculumListNum">3200人已预约</span>
+                        </p>
                     </div>
                     </div>
-                            <!--媒体播放控制条-->
-                            <div class="h5MediaShareControls" id="h5MediaShareControls">
-                                <div class="mediaShareProgressBtn">
-                                    <span class="mediaShareProgressPlay" id="mediaShareProgressPlay" style="display: none;"></span>
-                                    <span class="mediaShareProgressPause" id="mediaShareProgressPause"></span>
                 </div>
                 </div>
-                                <div class="mediaSharePlayProgressBox">
-                                    <span class="mediaShare_bg" id="mediaShareProgress_bg"></span>
-                                    <span class="mediaShare_color" id="mediaShareProgress_color" ></span>
-                                    <span class="mediaShare_btn" id="mediaShareProgress_btn"></span>
             </div>
             </div>
-
-                                <div class="mediaShareTimestamp" id="mediaShareTimestamp">
-                                    00:00/00:00
         </div>
         </div>
-
-                                <div class="mediaShareProgressVolBtn">
-                                    <span class="mediaVolumePlay" id="mediaShareVolumePlay"></span>
+        <!--课堂分类列表-->
+        <div class="classifyListBox" id="classifyListBox">
+            <div class="classifyListTitle" id="classifyListTitle">最新直播课程</div>
+            <div class="classifyListContent" id="classifyListContent">
+                <!--<div class="classifyList">
+                    <img class="curriculumListImg" src="" alt="">
+                    <p class="curriculumListTit">初一英语阅读理解习题课</p>
+                    <p class="curriculumListInfo">
+                        <span class="curriculumListTime">今天 09:00-21:30</span>
+                        <span class="curriculumListNum">3200人已预约</span>
+                    </p>
+                </div>-->
             </div>
             </div>
-                                <div class="mediaSharePlayProgressVoiceBox">
-                                    <span class="mediaShareVoice_bg" id="mediaShareVoice_bg"></span>
-                                    <span class="mediaShareVoice_color" id="mediaShareVoice_color"></span>
-                                    <span class="mediaShareVoice_btn" id="mediaShareVoice_btn"></span>
         </div>
         </div>
+        <!--互动课堂详情-->
+        <div class="lanclassBox" style="display: none">
+        <div class="lanclassContent">
+            <img class="lanclassContentCover" src="" alt="">
+            <div class="lanclassContentCenter">
+                <div class="lanclassContentTitle">
+                    初一语文阅读理解习题课
                 </div>
                 </div>
-                            <!--媒体共享区域的遮罩，不是老师的时候这个区域不可点击，需要遮罩盖住-->
-                            <div class="mediaShareBoxMask" id="mediaShareBoxMask" style="position: absolute;width:100%;height: 100%;"></div>
+                <div class="lanclassContentInfo">
+                    <img class="lanclassContentInfoPortrait" id="lanclassContentInfoPortrait" src="images/collect.png" alt="">
+                    <span class="lanclassContentInfoName" id="lanclassContentInfoName">张媛媛</span>
                 </div>
                 </div>
+                <div class="lanclassContentInfoTime">
+                    <span class="lanclassContentInfoTimeStart" lanclassContentInfoTimeStart>开始时间：2017-08-01 13:00:00</span>
+                    <span class="lanclassContentInfoTimeEnd" lanclassContentInfoTimeEnd>结束时间：2017-08-01 13:00:00</span>
                 </div>
                 </div>
-                    <!--伴音-->
-                    <div class="musicShareGroup" id="musicShareGroup">
-                        <div class="musicShareNameBox">
-                            <span class="musicShareName" id="musicShareName">seasons in the sun</span>
+                <div class="lanclassContentApply" id="lanclassContentApply">我要报名</div>
             </div>
             </div>
-                        <span class="closeMusicClose" id="closeMusicClose"></span>
-                        <div class="musicSharePlayBox">
-                            <div class="musicShareProgressBtn">
-                                <span class="musicShareProgressPlay" id="musicShareProgressPlay"></span>
-                                <span class="musicShareProgressPause" id="musicShareProgressPause"></span>
+            <div class="lanclassContentRight">
+                <div class="thirdPartyIconBox">
+                    <span id="weixinIcon" class="thirdPartyIcon weixinIcon iconfont">&#xe608;</span>
+                    <span id="qqIcon" class="thirdPartyIcon qqIcon iconfont">&#xe608;</span>
+                    <span id="weiboIcon" class="thirdPartyIcon weiboIcon iconfont">&#xe608;</span>
                 </div>
                 </div>
-                            <div class="musicSharePlayProgressBox">
-                                <span class="musicShare_bg" id="musicShareProgress_bg"></span>
-                                <span class="musicShare_color" id="musicShareProgress_color"></span>
-                                <span class="musicShare_btn" id="musicShareProgress_btn"></span>
+                <div class="collectBox" id="collectYes">
+                    <img class="collectIcon" id="collectYesIcon" src="images/collect.png" alt="">
+                    <span class="collectText">已收藏</span>
                 </div>
                 </div>
-                            <div class="musicTimeProgress">
-                                <span class="musicPresentTime" id="musicPresentTime">0.00</span>
-                                <span>/</span>
-                                <span class="musicPresentTime" id="musicSumTime">0.00</span>
+                <div class="collectBox" id="collectNo">
+                    <img class="collectIcon" id="collectNoIcon" src="images/not-collect.png" alt="">
+                    <span class="collectText">未收藏</span>
                 </div>
                 </div>
             </div>
             </div>
-                        <div class="musicSharePlayBox">
-                            <div class="musicShareProgressBtn">
-                                <span class="musicVolumePlay" id="musicShareVolumePlay"></span>
-                                <span class="musicVolumePause" id="musicShareVolumePause"></span>
         </div>
         </div>
-                            <div class="musicSharePlayProgressBox">
-                                <span class="musicShare_bg" id="musicShareVoice_bg"></span>
-                                <span class="musicShare_color" id="musicShareVoice_color"></span>
-                                <span class="musicShare_btn" id="musicShareVoice_btn"></span>
+        <div class="lanclassContent" id="lanclassIntroduce">
+            <p class="lanclassIntroduceTitle">
+                课程介绍
+            </p>
+            <p class="lanclassIntroduceContent">
+                课程介绍Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
+                Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar
+                tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+                Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
+            </p>
         </div>
         </div>
-                            <div class="musicTimeProgress">
-                                <span class="musicPresentTime" id="musicPlayPercentage">0%</span>
+        <div class="lanclassContent teacherInfos" id="teacherInfos">
+            <div class="lanclassIntroduceTitle" id="teacherInfoTitle">
+                老师简介
             </div>
             </div>
+            <div class="teacherInfoData">
+                <span class="teacherInfoName">张媛媛</span>
+                <span class="teacherInfoSchool">北京外国语学院</span>
             </div>
             </div>
-                        <div class="musicShareBox" style="position: absolute;width:100%;height: 100%; display: none">
-                            <div id="musicShare"></div>
+            <div class="lanclassIntroduceContent" id="teacherInfoContent">
+                课程介绍Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
+                Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar
+                tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+                Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
             </div>
             </div>
-                        <div class="h5MusicShareBox" style="position: absolute;width:100%;height: 100%; display: none">
-                            <!--<video id="h5MusicShare" width="100%" height="100%"  autoplay="autoplay"></video>-->
-                            <audio class="h5Music" id="h5Music" controls="controls" style="position:absolute;z-index:10;top:0;left: 0;height: 100px;" autoplay="autoplay"></audio>
         </div>
         </div>
     </div>
     </div>
-
-                    <!--折叠展开画板-->
-                    <div class="foldDrawToolOut">
-                        <span class="foldDrawTool">
-                            <div class="arrowTop"></div>
-                            <div class="arrowBottom"></div>
-                        </span>
     </div>
     </div>
-                    <div class="drawTool" style="display: block">
-                        <li id="showColor" class="brushInfo showColor normal" title="选择颜色">
-                            <!--颜色板-->
-                            <ul class="toolColor">
-                                <!--红色-->
-                                <li id="redColor" class="redColor toolColorList" title="#b8242a" value="#b8242a"></li>
-                                <!--蓝色-->
-                                <li id="blueColor" class="blueColor toolColorList" title="#0071bc" value="#0071bc"></li>
-                                <!--紫色-->
-                                <li id="purpleColor" class="purpleColor toolColorList" title="#6a0db2" value="#6a0db2"></li>
-                                <!--黄色-->
-                                <li id="yellowColor" class="yellowColor toolColorList" title="#fae81b" value="#fae81b"></li>
+    <div class="footerBg">
+        <div class="footer">
+            <div class="footerLeft">
+                <ul class="footerLeftList">
+                    <li class="footerLeftListMsg">企业合作</li>
+                    <li class="footerLeftListMsg">人才招聘</li>
+                    <li class="footerLeftListMsg">联系我们</li>
+                    <li class="footerLeftListMsg">讲师招募</li>
+                    <li class="footerLeftListMsg">常见问题</li>
+                    <li class="footerLeftListMsg">意见反馈</li>
+                    <li class="footerLeftListMsg">友情链接</li>
                 </ul>
                 </ul>
-                        </li>
-                        <li id="showForm" class="brushInfo showForm " title="选择形状">
-                            <!--颜色板-->
-                            <ul class="toolForm">
-                                <!--直线-->
-                                <li id="straightBrush" class="straightBrush toolColorList" title="直线" value="#0071bc"></li>
-                                <!--圆形-->
-                                <li id="circleBrush" class="circleBrush toolColorList" title="圆形" value="#fae81b"></li>
-                                <!--曲线-->
-                                <li id="curveBrush" class="curveBrush toolColorList" title="曲线" value="#b8242a"></li>
-                                <!--正方形-->
-                                <li id="squareBrush" class="squareBrush toolColorList" title="正方形" value="#6a0db2"></li>
-                                <!--自定义-->
-                                <li id="customBrush" class="customBrush toolColorList" title="自定义" value="#6a0db2"></li>
-
-                            </ul>
-                        </li>
-                        <li class="brushInfo pencil active" title="铅笔"></li>
-                        <li class="brushInfo rescind normal" title="撤销上一步"></li>
-                        <li class="brushInfo laserPen normal" title="激光笔"></li>
-                        <li class="brushInfo clearContent normal" title="删除"></li>
-                    </div>
-
-                    <div class="botTurn" id="botTurn">
-                        <div id="docControlBar">
-                            <li class="turn" style=""><p class="go">GO</p></li>
-                            <li class="pageNo" style=""><input type="text" id="pageNo"></li>
-                            <li class="next-page "><a id="nextPage" class="nextPage" href="javascript:void(0)"><div class="arrowRight"></div></a></li>
-                            <li class="total-page"><span id="totalPageNum">0</span></li>
-                            <li class="bias" id="bias">/</li>
-                            <li class="cur-page" id="curPage"><span id="currentPageNum">0</span></li>
-                            <li class="prev"><a id="prevPage" class="prevPage" href="javascript:void(0)"><div class="arrowLeft"></div></a></li>
-                            <li id="pptNextStep" class="pptNextStep iconfont" title="下一步动画">&#xe66d;</li>
-                            <li id="pptPrevStep" class="pptPrevStep iconfont" title="上一步动画">&#xe66c;</li>
-                            <li id="fitHeight" class="fitHeight setAdaptWH iconfont" title="自适应高" >&#xe696;</li>
-                            <li id="fitWidth" class="fitWidth setAdaptWH iconfont" title="自适应宽">&#xe697;</li>
-                            <li id="fitNormal" class="fitNormal setAdaptWH iconfont" title="显示全部">&#xe695;</li>
-                        </div>
-                        <li class="version" id="pcVersion"></li>
-
-                        <!--控制底部栏是否可点击的遮罩栏-->
-                        <div class="bottomBarEnabledMask" id="bottomBarEnabledMask"></div>
-
-                    </div>
-                </div>
-            </div>
-            <div class="botVideoWindow" id="botVideoWindow">
-                <div class="botH5VideoBox" id="botH5VideoBox">
-                    <video class="botH5VideoSingleBox" id="botH5VideoSingleBox_1"></video>
-                    <video class="botH5VideoSingleBox" id="botH5VideoSingleBox_2"></video>
-                    <video class="botH5VideoSingleBox" id="botH5VideoSingleBox_3"></video>
-                    <video class="botH5VideoSingleBox" id="botH5VideoSingleBox_4"></video>
-                    <video class="botH5VideoSingleBox" id="botH5VideoSingleBox_5"></video>
-                    <video class="botH5VideoSingleBox" id="botH5VideoSingleBox_6"></video>
-                </div>
-                <div class="botFlashVideoBox" id="botFlashVideoBox"></div>
-            </div>
-            <span class="nextStep styleStep" id="nextStep"></span>
-            <span class="prevStep styleStep" id="prevStep"></span>
-        </div>
-        <!--文档上传的列表-->
-        <div class="listModal" id="docModalList">
-            <div class="listHeadline">
-                <div class="listHeadlineTitle" id="docListTitle">文档列表</div>
-                <a href="javascript: void(0)" id="closeDocList" class="iconfont">&#xe638;</a>
-            </div>
-
-            <div class="mediaFileContentBox">
-                <div  class="mediaFileContentMenu">
-                    <span class="mediaFileContentTxt">文件列表</span>
-                    <span class="mediaFileContentMenuSpan ">
-                        <lable class="mediaFileContentMenuLableIcon iconfont">&#xe672;</lable>
-                        <label class="mediaFileContentMenuLableTxt">上传</label>
-                        <input type="file" id="docFileBtn"/></span>
-                </div>
-                <div id="docFileContent" class="mediaFileContent" >
-                </div>
-            </div>
-        </div>
-
-        <!--媒体共享上传的列表-->
-        <div class="listModal" id="mediaShareModal">
-            <div class="listHeadline">
-                <div class="listHeadlineTitle" id="mediaListTitle">媒体文件列表</div>
-                <a href="javascript: void(0)" id="closeMediaList" class="iconfont">&#xe638;</a>
-            </div>
-            <div class="mediaFileContentBox">
-                <div  class="mediaFileContentMenu">
-                    <span class="mediaFileContentTxt">文件列表</span>
-                    <span class="mediaFileContentMenuSpan ">
-                        <lable class="mediaFileContentMenuLableIcon iconfont">&#xe672;</lable>
-                        <label class="mediaFileContentMenuLableTxt">上传</label>
-                        <input type="file" id="mediaFileBtn"/></span>
-                </div>
-                <div id="mediaFileContent" class="mediaFileContent" >
-                </div>
-            </div>
-        </div>
-
-        <!--伴音上传的列表-->
-        <div class="listModal" id="musicShareModal">
-            <div class="listHeadline">
-                <div class="listHeadlineTitle" id="musicListTitle">音频文件列表</div>
-                <a href="javascript: void(0)" id="closeMusicList" class="iconfont">&#xe638;</a>
-            </div>
-            <div class="mediaFileContentBox">
-                <div  class="mediaFileContentMenu">
-                    <span class="mediaFileContentTxt">文件列表</span>
-                    <span class="mediaFileContentMenuSpan ">
-                        <lable class="mediaFileContentMenuLableIcon iconfont">&#xe672;</lable>
-                        <label class="mediaFileContentMenuLableTxt">上传</label>
-                        <input type="file" id="musicFileBtn"/></span>
-                </div>
-                <div id="musicFileContent" class="mediaFileContent" >
-                </div>
-            </div>
+                <p class="copyrightMsg">© 2010 - 2015 三芒世纪（北京）科技有限公司 版权所有 京ICP备12014300号-1</p>
             </div>
             </div>
+            <div class="footerRight">
 
 
-        <!--帮助的弹出框-->
-        <div class="helpBox">
-            <div class="helpHeadline">
-                <div class="helpHeadlineTitle">帮助</div>
-                <a href="javascript: void(0)" class="iconfont">&#xe638;</a>
             </div>
             </div>
-            <div id="helpContent" class="helpContent" >
         </div>
         </div>
     </div>
     </div>
-
-        <!--结束课堂弹出框-->
-   <!--     <div class="endClassBox">
-            <div class="endClassHeadline">
-                <div class="endClassHeadlineTitle">结束课堂</div>
-                <a href="javascript: void(0)" class="endClassA iconfont ">&#xe638;</a>
-            </div>
-            <div id="endClassContent" class="endClassContent" >
-                <p class="endClassText">确定要结束当前课堂吗?</p>
-                <button class="endClassEnsure">确定</button>
-                <button class="endClassCancel">取消</button>
-            </div>
-        </div>-->
-<!--        &lt;!&ndash;结束屏幕共享弹出框&ndash;&gt;
-        <div class="endShareBox">
-            <div class="endShareHeadline">
-                <div class="endShareHeadlineTitle">屏幕共享</div>
-                <a href="javascript: void(0)" class="endShareA iconfont ">&#xe638;</a>
-            </div>
-            <div id="endShareContent" class="endShareContent" >
-                <p class="endShareText">确定要结束屏幕共享吗?</p>
-                <button class="endShareEnsure">确定</button>
-                <button class="endShareCancel">取消</button>
-            </div>
-        </div>-->
-    <!--    &lt;!&ndash;退出弹出框&ndash;&gt;
-        <div class="exitClassBox">
-            <div class="exitClassHeadline">
-                <div class="exitClassHeadlineTitle">退出</div>
-                <a href="javascript: void(0)" class="exitClassA iconfont">&#xe638;</a>
-            </div>
-            <div id="exitClassContent" class="exitClassContent" >
-                <p class="exitClassText">确定要退出当前课堂吗?</p>
-                <button class="exitClassEnsure">确定</button>
-                <button class="exitClassCancel">取消</button>
-            </div>
-        </div>-->
-
-    </div>
-    <!--遮罩层-->
-    <div class="masker"></div>
-    <!--录制回放控制条-->
-    <div class="recordPlayControl"></div>
-    <!--登录-->
-    <div class="loginBg">
-   <!--     <div class="loginImg"></div>
-        <div class="login_star">
-            <p class="login_star1 star"></p>
-            <p class="login_star2 star"></p>
-            <p class="login_star3 star"></p>
-            <p class="login_star4 star"></p>
-            <p class="login_star5 star"></p>
-            <p class="login_star6 star"></p>
-            <p class="login_star7 star"></p>
-            <p class="login_star8 star"></p>
-            <p class="login_star9 star"></p>
-            <p class="login_star10 star"></p>
-            <p class="login_star11 star"></p>
-            <p class="login_star12 star"></p>
-        </div>-->
-        <div class="loginContentBox">
-            <ul class="loginContent">
-                <li class="loginContentImg"></li>
-                <li class="userNameLi">
-                    <input class="userNameInput" type="text" placeholder="请输入用户名" maxlength="20"
+</div>
+<!--注册-->
+<div class="userSignBox" id="userSignBox" style="display: none">
+    <div class="usersign" id="usersign">
+        <a href="javascript: void(0)" id="usersignA" class="usersignA iconfont">&#xe638;</a>
+        <ul>
+            <li class="usersignTit">注册</li>
+            <li class="usersignLi">
+                <input id="signName" class="userNameInput usersignInput" type="text" placeholder="填写用户名" maxlength="20"
                        onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
                        onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
             </li>
             </li>
-                <li class="loginUser">
-                    <p class="userTip"></p>
-                </li>
-                <li class="passWordLi">
-                    <input class="passWordInput" type="password" placeholder="请输入密码">
+            <li class="usersignNameLi usersignLi">
+                <input id="signPhone" class="userPhoneInput usersignInput" type="text" placeholder="填写手机号" maxlength="20"
+                       onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
+                <span class="requiredMsg">*</span>
             </li>
             </li>
-                <li class="loginPassWord">
-                    <p class="passWordTip"></p>
+            <li class="usersignLi">
+                <input id="signMail" class="userMailInput usersignInput" type="text" placeholder="填写邮箱" maxlength="20"
+                       onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
             </li>
             </li>
-                <p class="errorTip"></p>
-                <li class="btnLoginLi">
-                    <button id="btnLogin">登录</button>
+            <li class="usersignNameLi usersignLi">
+                <input id="signPassWord" class="userPassWordInput usersignInput" type="text" placeholder="设置密码" maxlength="20"
+                       onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
+                <span class="requiredMsg">*</span>
             </li>
             </li>
-            </ul>
-        </div>
-
-        <div class="bgLogin"></div>
-    </div>
-    <!--初始化参数-->
-    <div class="initParamsOut">
-        <!--<div class="loginImg"></div>-->
-        <div class="initParamsBox">
-            <ul class="initParams">
-                <li class="initParamsImg"></li>
-                <li class="initParamsClassId">
-                    <input class="classId" type="text"  placeholder="请输入课堂号">
+            <li class="userVerifyLi usersignLi">
+                <input id="securityCode" class="userVerifyLiInput usersignInput" type="text" placeholder="验证码" maxlength="5"
+                       onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
+                <button class="userVerifyLiInputBtn">发送验证码</button>
             </li>
             </li>
-                <li class="initParamsUserId">
-                    <input class="userId" type="text"  placeholder="请输入userId">
+            <li class="permitSign usersignLi">
+                <input id="permitSign" class="permitSignIcon" type="checkbox">
+                <label for="permitSign"></label>
+                <span class="permitSignMsg">我已阅读并接受用户协议</span>
             </li>
             </li>
-                <li class="initParamsNull"></li>
-                <li class="initParamsRoleBtn">
-                    <button class="ensureTeaBtn">老师</button>
-                    <button class="ensureStuBtn">学生</button>
+            <li class="btnUsersignLi usersignLi">
+                <button id="signBtn" class="btnUsersign">注册</button>
             </li>
             </li>
-                <p class="errorTip"></p>
+            <p class="loginBtnBox">
+                <span>已有账号，去</span>
+                <a id="skipLoginBtn" class="loginBtn" href="javascript: void(0)">登录</a>
+            </p>
         </ul>
         </ul>
     </div>
     </div>
-        <div class="bgInit"></div>
-    </div>
 </div>
 </div>
-
-<div class="boxMask"></div>
-<!--设置弹出框-->
-<div id="H5settingBox"  style="position: absolute;z-index:2100;width: 100%;height: 100%"></div>
-<!--答题卡-->
-<div class="answerAllBox">
-    <!--创建答题卡-->
-    <div class="themeBox">
-        <div class="themeHeadline">
-            <div class="themeHeadlineTitle">答题卡</div>
-            <a href="javascript: void(0)" class="themeHeadlineA iconfont ">&#xe638;</a>
-        </div>
-        <div id="themeContent" class="themeContent">
-            <div class="themeCount">
-                <h4 class="themeTit">卡片类型:</h4>
-                <div data-type="1" class="themeList themeTrends">
-                    <ul class="themeTrendsUl" id="themeTrendsUlA">
-                        <li class="themeTrendsLi">
-                            <p></p>
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeTrendsLi">
-                            <p></p>
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeTrendsLi">
-                            <p></p>
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeTrendsLi">
-                            <p></p>
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeAdd">
-                            +
-                        </li>
-                    </ul>
-                    <div class="dynamicRight">发布</div>
-                </div>
-                <div data-type="1"  class="themeList themeTrends">
-                    <ul  class="themeTrendsUl" id="themeTrendsUlB">
-                        <li class="themeTrendsLi">
-                            <p>1</p>
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeTrendsLi">
-                            <p>2</p>
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeTrendsLi">
-                            <p>3</p>
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeTrendsLi">
-                            <p>4</p>
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeAdd">
-                            +
-                        </li>
-                    </ul>
-                    <div class="dynamicRight">发布</div>
-                </div>
-                <div data-type="1" class="themeList themeTrends themeInput">
-                    <ul class="themeTrendsUl" id="themeTrendsUlC">
-                        <li class="themeTrendsLi">
-                            <input type="text" class="themeVal" value="输入答案" maxlength="26">
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeTrendsLi">
-                            <input type="text" class="themeVal" value="输入答案" maxlength="26">
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeTrendsLi">
-                            <input type="text" class="themeVal" value="输入答案" maxlength="26">
-                            <span>&times;</span>
-                        </li>
-                        <li class="themeAdd" id="themeAdd">
-                            +
-                        </li>
-                    </ul>
-                    <div class="dynamicRight dynamicRight1">发布</div>
-                </div>
-                <h6 class="themeTit1">
-                    <b>*&nbsp;</b>
-                    <p class="enterAnswer">填空题需要输入答案才能进行发布进行正确率统计</p>
-                </h6>
-                <div data-type="3" class="themeList themeListFixed clear">
+<!--登录-->
+<div class="userSignBox" id="userLoginBox"  style="display: none" >
+    <div class="usersign userLogin" id="userLogin">
+        <a href="javascript: void(0)" id="userLoginA" class="usersignA iconfont">&#xe638;</a>
         <ul>
         <ul>
-                        <li>
-                            <p class="gotIt">听明白了</p>
-                        </li>
-                        <li>
-                            <p class="understand">没听明白</p>
-                        </li>
-                    </ul>
-                    <div class="dynamicRight">发布</div>
-                </div>
-                <div data-type="3" class="themeList themeListFixed">
-                    <ul>
-                        <li>
-                            <p class="yes">对</p>
-                        </li>
-                        <li>
-                            <p class="wrong">错</p>
+            <li class="usersignTit">登录</li>
+            <li class="usersignNameLi usersignLi">
+                <input id="loginName" class="usersignInput" type="text" placeholder="手机/用户名/邮箱" maxlength="20"
+                       onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
             </li>
             </li>
-                    </ul>
-                    <div class="dynamicRight">发布</div>
-                </div>
-                <div data-type="3" class="themeList themeListFixed">
-                    <ul>
-                        <li>
-                            <p class="yup">是</p>
+            <li class="userPassWordLi usersignLi">
+                <input id="loginPassWord" class="userPassWordInput usersignInput" type="text" placeholder="密码" maxlength="20"
+                       onkeyup="this.value=this.value.replace(/^ +| +$/g,'')">
             </li>
             </li>
-                        <li>
-                            <p class="nothing">无</p>
+            <p class="forgetPasswordBtn" id="forgetPasswordBtn">
+                忘记密码
+            </p>
+            <li class="btnUsersignLi usersignLi">
+                <button class="btnUsersign" id="userLoginBtn">提交</button>
             </li>
             </li>
-                    </ul>
-                    <div class="dynamicRight">发布</div>
-                </div>
-                <div class="CountZero">
-                    <span>答题计时：</span>
-                    <div class="themeSelect">
-                        <div class="show slelctShow">
-                            <p class="themeShow"></p>
-                            <i class="triangle"></i>
-                        </div>
-                        <ul class="themeUl">
-                            <!--<li data-val="0" data-ind="0" class="active"></li>
-                            <li data-val="30" data-ind="1"></li>
-                            <li data-val="60" data-ind="3"></li>
-                            <li data-val="120" data-ind="4"></li>
-                            <li data-val="180" data-ind="5"></li>
-                            <li data-val="300" data-ind="6"></li>-->
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!--input错误提示框-->
-    <div class="inputErrerBox">
-        <div class="inputErrer">
-            <div class="inputErrerTitle">
-                <a href="javascript: void(0)" class="inputErrerA iconfont ">&#xe638;</a>
-            </div>
-            <div class="inputCount">
-                填空题答案不能为空
-            </div>
-        </div>
-    </div>
-    <!--答题卡结果弹出框-->
-    <div class="resultBox">
-        <div class="resultHeadline">
-            <div class="resultHeadlineTitle">答题卡</div>
-            <a href="javascript: void(0)" class="resultHeadlineA iconfont ">&#xe638;</a>
-        </div>
-        <div id="resultContent" class="resultContent">
-            <div class="resultTit">
-                <p class="answerResult">答题结果：</p>
-                <p><span class="share">共有</span><span class="attendNum">0</span><span class="participation">人参与</span></p>
-            </div>
-            <div class="layerBox">
-                <!--<span>dong</span><span>lse</span>-->
-            </div>
-            <ul class="resultListUl">
-
-                <!--<li class="resultList">
-                    <b>A</b>
-                    <span>0%</span>
-                    <p></p>
-                </li>-->
-            </ul>
-            <div class="resultBtn">
-                <p class="resultConceal">隐藏</p>
-                <p class="resultTermination">终止</p>
-            </div>
-        </div>
-    </div>
-    <!--学生界面弹出框-->
-    <div class="answerStudentBox">
-        <div class="studentHeadline">
-            答题卡
-        </div>
-        <div class="answerStudentContent">
-            <!--倒计时盒子-->
-            <div class="countdown">
-                <p id="answerCountDown"></p>
-            </div>
-            <ul class="resultValueUl">
-
-            </ul>
-            <div class="choiceBtn">
-                <p class="referBtn">提交</p>
-                <p class="abandonBtn">放弃</p>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!--点名-->
-<div class="signAllBox">
-    <div class="signBox">
-        <div class="signHeadline">
-            <div class="signHeadlineTitle">点名</div>
-            <a href="javascript: void(0)" class="signHeadlineA iconfont ">&#xe638;</a>
-        </div>
-        <div id="signContentA" class="signContent signContentA">
-            <div class="signSelect">
-                <div class="show signShowBox" id="signShowBox">
-                    <p class="signShow">无</p>
-                    <i class="triangle"></i>
-                </div>
-                <ul class="signUl">
-                    <!--<li data-val="0" data-ind="0" class="active">无</li>
-                    <li data-val="5" data-ind="1">5秒</li>
-                    <li data-val="10" data-ind="2">10秒</li>
-                    <li data-val="15" data-ind="3">15秒</li>
-                    <li data-val="30" data-ind="4">30秒</li>-->
-                </ul>
-            </div>
-            <div class="signBtn">
-                <p class="sponsorSign">发起点名</p>
-            </div>
-        </div>
-        <div id="signContentB" class="signContent signContentB">
-            <div class="turnListBox">
-                <ul class="turnList">
-                    <!--<li class="turnListItem">
-                        <p>dong</p>
-                        <p>13:52:15</p>
-                    </li>-->
-                </ul>
-            </div>
-            <div class="turnBox">
-                <p class="turnResult">
-                    出勤人数：<span class="turnLen">0</span>
+            <p class="forgetPasswordBtn nowSignBtn" id="nowUserSign">
+                新用户注册
             </p>
             </p>
-                <p class="turnResultBtn">
-                    终止点名
+            <li class="openidOauthBox">
+                <p class="openidOauth openidOauth2" id="openWeixin">
+                    <span class="weChatLogin iconfont">&#xe638;</span>
+                    <span class="openidOauthTit">微信</span>
                 </p>
                 </p>
-            </div>
-        </div>
-    </div>
-    <!--学生端-->
-    <div class="signStudentBox">
-        <div class="signStudentHeadline">
-            <div class="signStudentHeadlineTitle">点名</div>
-            <a href="javascript: void(0)" class="signStudentHeadlineA iconfont ">&#xe638;</a>
-        </div>
-        <div id="signStudentContent" class="signStudentContent">
-            <div class="signCountdown" id="signCountdown"></div>
-            <p class="turnStudentBtn">
-                签到
+                <p class="openidOauth openidOauth1" id="openQQ">
+                    <span class="weChatLogin iconfont">&#xe638;</span>
+                    <span class="openidOauthTit">QQ</span>
                 </p>
                 </p>
-
-        </div>
-    </div>
-</div>
-
-<!--显示图片大图-->
-<div id="magnifyBox" class="magnifyBox" style="position: absolute;width:100%;height:100%;z-index:502;display: none;"></div>
-<!--错误弹出框-->
-<div class="errorBox">
-    <div class="errorHeadline">
-        <div class="errorHeadlineTitle"></div>
-        <a href="javascript: void(0)" class="errorA iconfont">&#xe638;</a>
-    </div>
-    <div id="errorContent" class="errorContent" >
-        <p class="errorText"></p>
-        <!--<button class="errorEnsure">确定</button>-->
-        <!--<button class="errorCancel">取消</button>-->
+                <p class="openidOauth" id="openWeibo">
+                    <span class="weChatLogin iconfont">&#xe638;</span>
+                    <span class="openidOauthTit">微博</span>
+                </p>
+            </li>
+        </ul>
     </div>
     </div>
 </div>
 </div>
-
-<!--flash和浏览器和摄像头麦克风错误   Flash_explorer_facility-->
-<div class="errorHintBox">
-    <div class="errorHint errorTestLive" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div>
-            <p class="errorHintTit errorHintTit1" id="nowLiveVersion">现支持直播的浏览器版本:</p>
-            <div class="errorFlashListLeft errorFlashListLeft1">
-                <a href="http://chrome.360.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360jisu.png" alt=""><span class="speed360Recommend">360极速(推荐下载)</span></a>
-                <a href="http://www.google.cn/chrome/business/browser/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconChrome.png" alt=""><span>Google Chrome</span></a>
-                <a href="http://www.firefox.com.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconFirefox.png" alt=""><span>Firefox</span></a>
-                <a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconIE.png" alt=""><span>IE 10 </span></a>
-                <a href="http://se.360.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360.png" alt=""><span class="security360">360安全</span></a>
-            </div>
-            <div class="errorFlashListLeft">
-                <a href="http://ie.2345.cc/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon2345.png" alt=""><span>2345</span></a>
-                <a href="http://browser.qq.com/?adtag=SEM7" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconQQ.png" alt=""><span>QQ</span></a>
-                <a href="http://ie.sogou.com/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSougou.png" alt=""><span class="sogouExplorer">搜狗高速</span></a>
-                <a href="https://www.apple.com/cn/safari/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSafari.png" alt=""><span>safari</span></a>
-            </div>
-
-        </div>
-    </div>
-    <div class="errorHint errorHint3 errorPlayback" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div >
-            <p class="errorHintTit errorHintTit1" id="nowPlaybackVersion">现支持录制回放浏览器版本:</p>
-            <div class="errorFlashListLeft errorFlashListLeft1">
-                <a href="http://chrome.360.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360jisu.png" alt=""><span class="speed360Recommend">360极速(推荐下载)</span></a>
-                <a href="http://www.google.cn/chrome/business/browser/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconChrome.png" alt=""><span>Google Chrome</span></a>
-                <a href="http://www.firefox.com.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconFirefox.png" alt=""><span>Firefox</span></a>
-                <a href="http://se.360.cn/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360.png" alt=""><span class="security360Only">360安全(仅9.1.0版本支持)</span></a>
-            </div>
-            <div class="errorFlashListLeft">
-                <a href="http://browser.qq.com/?adtag=SEM7" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconQQ.png" alt=""><span>QQ</span></a>
-                <a href="https://www.apple.com/cn/safari/" target=_blank class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSafari.png" alt=""><span>safari</span></a>
-            </div>
-        </div>
-    </div>
-    <div class="errorHint errorHint1 notDetectionFlash" id="notDetectionFlash" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorSetFlashContent">
-            <p class="errorDownloadFlashTit" id="flashMsgContent">您的flash可能被禁用或版本过低，请下载后重试</p>
-            <p class="errorSetFlashHintB" id="flashDetailSteps">查看设置详细步骤</p>
-            <a class="errorSetFlashHintA" id="flashUpdataVersions" href='https://get2.adobe.com/cn/flashplayer/' target="_blank">下载最新版本</a>
-        </div>
-    </div>
-    <div class="errorHint errorHint2 notDetectionFlash_1" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorSetFlashContent">
-            <p class="setFlashGuideTit" id="browserAreaSettings">根据您的浏览器区设置:</p>
-            <div class="errorFlashListLeft">
-                <p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360jisu.png" alt=""><span class="speed360"  id="e_speed360">360极速</span></p>
-                <p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconChrome.png" alt=""><span  id="e_chrome">Google Chrome</span></p>
-                <p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconFirefox.png" alt=""><span id="e_firefox">Firefox</span></p>
-                <p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconIE.png" alt=""><span id="e_ie10">IE 10 </span></p>
-                <p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon360.png" alt=""><span class="security360" id="e_security360">360安全</span></p>
-            </div>
-            <div class="errorFlashListLeft">
-                <p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/icon2345.png" alt=""><span id="e_2345">2345</span></p>
-                <p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconQQ.png" alt=""><span id="e_qq">QQ</span></p>
-                <p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSougou.png" alt=""><span class="sogouExplorer" id="e_sogou">搜狗高速</span></p>
-                <p class="errorFlashHintList"><img class="errorFlashIcon" src="images/flashHint/iconSafari.png" alt=""><span id="e_safari">safari</span></p>
-            </div>
+<!--删除弹框-->
+<div class="userSignBox" id="removeHandlerBox" style="display: none;">
+    <div class="usersign removeHandler" id="removeHandler">
+        <a href="javascript: void(0)" id="removeHandlerA" class="usersignA iconfont">&#xe638;</a>
+        <div class="removeHandlerContent">
+            确定删除吗？
         </div>
         </div>
+        <div class="removeHandlerBtn">
+            <button class="removeConfirm" id="removeConfirm">确定</button>
+            <button class="removeCancel" id="removeCancel">取消</button>
         </div>
         </div>
-    <div class="errorHint versionsFlash" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
     </div>
     </div>
-        <div class="errorHintContent">
-            <p class="errorFlashTit" id="flashVersionsLow">您的flash版本过低，请</p>
-            <a class="errorFlashLink" id="flashDownload" href='https://get2.adobe.com/cn/flashplayer/' target="_blank">下载</a>
-            <p class="errorFlashTit" id="flashRetry">后重试</p>
-
-        </div>
-    </div>
-    <div class="errorHint safariFlashBan" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorFlashContent">
-            <p class="errorHintTit flashForbiddenMsg">您的flash可能被禁用，请开启后重试!</p>
-            <img class="flashHintImg" src="images/flashHint/safari.png" alt="">
-        </div>
-    </div>
-    <div class="errorHint QQOrChromeFlashBan" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorFlashContent">
-            <p class="errorHintTit flashForbiddenMsg">您的flash可能被禁用，请开启后重试!</p>
-            <img class="flashHintImg" src="images/flashHint/qq_chrome.png" alt="">
-        </div>
-    </div>
-    <div class="errorHint sougouOr360jisuFlashBan" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorFlashContent">
-            <p class="errorHintTit flashForbiddenMsg">您的flash可能被禁用，请开启后重试!</p>
-            <img class="flashHintImg" src="images/flashHint/sougou_360jisu.png" alt="">
-        </div>
-    </div>
-    <div class="errorHint setChromeFlash" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorSetFlashContent">
-            <p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
-            <p class="errorSetFlashHintInfo">打开设置→开启网站运行flash</p>
-            <a class="errorSetFlashHintA" href="images/flashHint/setChrome.png" target=_blank>点击查看详情步骤</a>
-        </div>
-    </div>
-    <div class="errorHint setFirefoxFlash" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorSetFlashContent">
-            <p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
-            <p class="errorSetFlashHintInfo">地址栏输入about:addons→插件→开启Shockwave Flash</p>
-            <a class="errorSetFlashHintA" href="images/flashHint/setFirefox.png" target=_blank>点击查看详情步骤</a>
-        </div>
-    </div>
-    <div class="errorHint setQQFlash" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorSetFlashContent">
-            <p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
-            <p class="errorSetFlashHintInfo">地址栏输入qqbrowser://plugins→插件→开启Adobe Flash Player→运行</p>
-            <a class="errorSetFlashHintA" href="images/flashHint/setQQ.png" target=_blank>点击查看详情步骤</a>
-        </div>
-    </div>
-    <div class="errorHint set2345Flash" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorSetFlashContent">
-            <p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
-            <p class="errorSetFlashHintInfo">地址栏输入chrome://plugins→插件→开启Adobe Flash Player→运行</p>
-            <a class="errorSetFlashHintA" href="images/flashHint/set2345.png" target=_blank>点击查看详情步骤</a>
-        </div>
-    </div>
-    <div class="errorHint set360anquanFlash" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorSetFlashContent">
-            <p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
-            <p class="errorSetFlashHintInfo">地址栏输入se://plugins→插件→开启Adobe Flash Player→运行</p>
-            <a class="errorSetFlashHintA" href="images/flashHint/set360anquan.png" target=_blank>点击查看详情步骤</a>
-        </div>
-    </div>
-    <div class="errorHint set360jisuFlash" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorSetFlashContent">
-            <p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
-            <p class="errorSetFlashHintInfo">地址栏输入chrome://plugins→插件→开启Adobe Flash Player→运行</p>
-            <a class="errorSetFlashHintA" href="images/flashHint/set360jisu.png" target=_blank>点击查看详情步骤</a>
-        </div>
-    </div>
-    <div class="errorHint setsougouFlash" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorSetFlashContent">
-            <p class="errorSetFlashHintTit">flash已被禁止，请按以下步骤操作：</p>
-            <p class="errorSetFlashHintInfo">打开右上角工具→选项→程序→管理加载项→工具栏和扩展→开启Shockwave Flash Object</p>
-            <a class="errorSetFlashHintA" href="images/flashHint/setsougou.png" target=_blank>点击查看详情步骤</a>
-        </div>
-    </div>
-    <div class="errorHint errorHint1 errorPublicHint" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorPublicHintContent"></div>
-    </div>
-    <div class="errorHint errorHint1 networkDisconnection" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errornetworkHintContent"></div>
-    </div>
-    <div class="errorHint errorHint1 choiceHintBox" id="publicChoiceErrorrBox" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle" id="choiceHintBoxTitle"></div>
-        </div>
-        <div class="endClassHintContent" >
-            <p class="showWindowText" id="choiceHintBoxText"></p>
-            <button class="closeInfoBtn" id="choiceConfirm">确定</button>
-            <button class="cancelCloseInfo closeInfoBtn" id="choiceCancel">取消</button>
-        </div>
-    </div>
-    <div class="errorHint errorHint1 publicErrorBox" data="">
-        <div class="errorFlashHintHeadline">
-            <div class="errorHintHeadlineTitle"></div>
-            <a href="javascript: void(0)" class="errorFlashHintA iconfont">&#xe638;</a>
-        </div>
-        <div class="errorPublicHintContent"></div>
-    </div>
-</div>
-<!--warn提示信息-->
-<div class="warnHintBox" id="warnHintBox">
-    <a href="javascript: void(0)" class="warnHintA iconfont" id="warnHintA">&#xe638;</a>
-    <p class="warnHintContent" id="warnHintContent">warn警告框</p>
 </div>
 </div>
 </body>
 </body>
 </html>
 </html>

@@ -51,18 +51,18 @@ class Chat extends Ape {
 
 
     this.userList.on(UserList.WINDOW_VIEW_CHANGE, this.onWindowViewChange.bind(this));
     this.userList.on(UserList.WINDOW_VIEW_CHANGE, this.onWindowViewChange.bind(this));
     //布局
     //布局
-    $("#txt_message")[0].value = ''
+   // $("#txt_message")[0].value = ''
     //UI按钮点击事件
     //UI按钮点击事件
     $("#btn_send").on("click", this._sendMessageHandler.bind(this));
     $("#btn_send").on("click", this._sendMessageHandler.bind(this));
     //回车键发送聊天消息
     //回车键发送聊天消息
     let that = this;
     let that = this;
 
 
-    $("#txt_message").on("keydown", function (e) {
+ /*   $("#txt_message").on("keydown", function (e) {
       let curKey = e.which;
       let curKey = e.which;
       if (ClassDataProxy.isKeypress) {
       if (ClassDataProxy.isKeypress) {
         if (curKey == 13) that._sendMessageHandler();
         if (curKey == 13) that._sendMessageHandler();
       }
       }
-    });
+    });*/
 
 
     $('.left').on('contextmenu', this._preventDefault.bind(this));
     $('.left').on('contextmenu', this._preventDefault.bind(this));
     $('.header').on('contextmenu', this._preventDefault.bind(this));
     $('.header').on('contextmenu', this._preventDefault.bind(this));

@@ -37,13 +37,13 @@ class ChatFace extends Emiter {
         //选项卡s
         //选项卡s
         this._changeTab();
         this._changeTab();
         //文字区域点击后表情消失
         //文字区域点击后表情消失
-        $("#txt_message").on("focus",that._hideFace.bind(this));
+       /* $("#txt_message").on("focus",that._hideFace.bind(this));
         $("#panel_message").on("click",that._hideFace.bind(this));
         $("#panel_message").on("click",that._hideFace.bind(this));
         $(".middle").on("click",that._hideFace.bind(this));
         $(".middle").on("click",that._hideFace.bind(this));
         $(".left").on("click",that._hideFace.bind(this));
         $(".left").on("click",that._hideFace.bind(this));
         $(".header").on("click",that._hideFace.bind(this));
         $(".header").on("click",that._hideFace.bind(this));
         $(".videoWindow").on("click",that._hideFace.bind(this));
         $(".videoWindow").on("click",that._hideFace.bind(this));
-        $(".userListTitle").on("click",that._hideFace.bind(this));
+        $(".userListTitle").on("click",that._hideFace.bind(this));*/
 
 
     }
     }
 
 

@@ -32,7 +32,7 @@ class ClassApe extends Ape {
     //设置当前版本号
     //设置当前版本号
     $('#pcVersion').text("v2.58.3.20170823");
     $('#pcVersion').text("v2.58.3.20170823");
     //布局，未加入课堂成之前上课界面不显示
     //布局，未加入课堂成之前上课界面不显示
-    $('.header').hide();
+    //$('.header').hide();
     //$(".content ").hide();
     //$(".content ").hide();
     $(".loginBg ").show();//登陆框
     $(".loginBg ").show();//登陆框
     $(".initParamsOut ").show();//初始化界面
     $(".initParamsOut ").show();//初始化界面

+//*
+// 首页模块
+// */
+
+import Loger from "../Loger";
+import Ape from "./Ape";
+import xdysdk from "libs/xdysdk";
+import DrawTool from "./DrawTool";
+import LaserPen from "./LaserPen";
+import $ from "jquery";
+import ClassDataProxy from "proxy/ClassDataProxy";
+
+let loger = Loger.getLoger('PC-HomeApe');
+class HomeApe extends Ape {
+    constructor() {
+        super();
+        this.classDateList = {};//课堂的所有数据
+        this.addEvent();
+        this.init();
+    }
+
+    init() {
+        //判断列表在右侧时取消边距
+        this._judgeListPlace();
+
+        $('#defaultBtn').on('click',this._lanclassBtnHandler.bind(this));
+    }
+
+    addEvent() {
+
+    }
+    _judgeListPlace(){
+        let i;
+        let curriculumList = document.getElementsByClassName('curriculumList');
+        for(i=0;i<curriculumList.length;i++){
+            if((i%4) == 3){
+                $(curriculumList[i]).addClass('classifyListR');
+            }
+        }
+    }
+    _lanclassBtnHandler(evt){
+        $(evt.target).addClass('active').siblings().removeClass('active');
+        $('#slideshow').show();
+        $('#defaultBox').show();
+        $('#classifyListBox').hide();
+    }
+
+}
+export default new HomeApe;

+//*
+// 互动课堂模块
+// */
+
+import Loger from "../Loger";
+import Ape from "./Ape";
+import xdysdk from "libs/xdysdk";
+import DrawTool from "./DrawTool";
+import LaserPen from "./LaserPen";
+import $ from "jquery";
+import ClassDataProxy from "proxy/ClassDataProxy";
+let loger = Loger.getLoger('PC-LanclassApe');
+
+const classifyList = `<div class="classifyList {_classifyListR}">
+                            <img class="curriculumListImg" src="{_msgImg}" alt="">
+                            <p class="curriculumListTit">{_classroomTitle}</p>
+                            <p class="curriculumListInfo">
+                                <span class="curriculumListTime">{_schoolTime}</span>
+                                <span class="curriculumListNum">{_subscribeNum}</span>
+                            </p>
+                        </div>`;
+
+class LanclassApe extends Ape {
+    constructor() {
+        super();
+        this.classDateList = {};//课堂的所有数据
+        this.addEvent();
+        this.init();
+    }
+
+    init() {
+        //判断列表在右侧时取消边距
+        this._judgeListPlace();
+        $('#collectYes').hide();
+        $('#lanclassBtn').on('click',this._lanclassBtnHandler.bind(this));
+
+        $('#classifyListBox').on('click','.pageNumBtn',this._pageNumBtnHandler.bind(this));//点击翻页
+    }
+
+    addEvent() {
+
+    }
+    _judgeListPlace(){
+        let i=(i%4);
+        $('#classifyListContent').find('.classifyList').eq(i==3).addClass('classifyListR');
+    }
+    _lanclassBtnHandler(evt){
+        $(evt.target).addClass('active').siblings().removeClass('active');
+        $('#slideshow').hide();
+        $('#defaultBox').hide();
+        $('#classifyListBox').show();
+        this.detailPage();
+    }
+    //点击翻页
+    _pageNumBtnHandler(evt){
+        let _ele = $(evt.target);
+        let that = this;
+        if(_ele.siblings().length > 0 ){
+            _ele.addClass('pageNumBtnCheck').siblings().removeClass('pageNumBtnCheck');
+            console.log(_ele.text(),111111111111111111111111111111111111)
+            $.ajax({
+                type: "PUT",
+                url: 'http://192.168.31.8:3000/meeting/getMeeting',
+                headers: {'Content-Type': 'application/json',
+                    'page':_ele.text(),
+                    'token':'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IlhXQnJlRU00T0swYTVqUUIyUTFicGtObHlxOUFWbXZkIiwibmFtZSI6ImFkbWluIiwiY29kZSI6MSwiaWF0IjoxNTAzNDUxODU0LCJleHAiOjIyODEwNTE4NTR9.3kTVzKd_jbP7l69nxOpNaFeSjVnnjZkagYMzRB8fjNo',
+                },
+
+                success:function(_data){
+                    if(_data != 200 ){
+                       // loger.warn(_data.data.msg)
+                    }
+                    that.classDateList = _data.returnData.data;
+                    //切换列表内容
+                    that._classDateContent(that.classDateList);
+                    loger.log(_data,'成功')
+                },
+                error:function(error){
+                    console.log(error,'失败')
+                }
+            })
+        }else{
+            return;
+        }
+    }
+    detailPage(){
+        let that = this;
+        $.ajax({
+            type: "PUT",
+            url: 'http://192.168.31.8:3000/meeting/getMeeting',
+            headers: {'Content-Type': 'application/json',
+                        'token':'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IlhXQnJlRU00T0swYTVqUUIyUTFicGtObHlxOUFWbXZkIiwibmFtZSI6ImFkbWluIiwiY29kZSI6MSwiaWF0IjoxNTAzNDUxODU0LCJleHAiOjIyODEwNTE4NTR9.3kTVzKd_jbP7l69nxOpNaFeSjVnnjZkagYMzRB8fjNo'},
+            success:function(_data){
+               // loger.log(_data,'成功')
+                //获取课堂数据
+                that._gainClassData(_data);
+            },
+            error:function(error){
+                console.log(error,'失败')
+            }
+        })
+    }
+    _gainClassData(_data){
+        if(_data || _data.code == 200){
+            this.classDateList = _data.returnData.data;
+            let classifyListContent = $('#classifyListContent');
+            classifyListContent.empty();
+            //切换列表分类的标题
+            this._classDateTitle();
+            //切换列表内容
+            this._classDateContent(this.classDateList);
+            //页码
+            this._classDatepageNum(this.classDateList);
+        }
+    }
+    _classDateTitle(){
+        $('#classifyListTitle').html($('#lessonsTitle').html());
+    }
+    _classDateContent(_data){
+        let classifyListContent = $('#classifyListContent');
+        classifyListContent.empty();
+        let _dataList = _data.meetingInfo;
+        for(let i = 0;i<_dataList.length;i++){
+            let j = (i%4)==3;
+            let _classifyList = this._format(classifyList,{
+                _classifyListR : j?'classifyListR':'',
+                _msgImg :'../images/u373.png',
+                _classroomTitle : _dataList[i].meetingName,
+                _schoolTime : '11',
+                _subscribeNum : _dataList[i].reservationNumber+'人已预约'
+            })
+            classifyListContent.append(_classifyList);
+        }
+    }
+    _classDatepageNum(_data){ //page
+        let _pageContent = _data.count;
+        let _pageNum = Math.ceil(_pageContent / _data.pageno);
+
+        this.pagingConstruct(1,_pageNum);
+    }
+    pagingConstruct(paging,total){
+        let classifyListBox = $('#classifyListBox');
+        let pagingDivInnerHTML = '<div class="pageNumContentBox"><div class="pageNumContent">';
+        let isHiddenExist = 0;
+        for(let i =1 ;i<=total;i++){
+            if(i == paging){
+                pagingDivInnerHTML +='<span class="pageNumBtn pageNumBtnCheck">'+i+'</span>';
+            }else{
+                if (i < 4 || i < (paging + 4) && i > (paging - 2) && i < (total / 2 + 2) || i > (total - 2)) {
+                    pagingDivInnerHTML +='<span class="pageNumBtn">'+i+'</span>';
+                    isHiddenExist = 0;
+                }else{
+                    if(isHiddenExist == 0){
+                        pagingDivInnerHTML += '<span>...</span>';
+                        isHiddenExist = 1;
+                    }
+                }
+            }
+        }
+        pagingDivInnerHTML += '</div></div>';
+        classifyListBox.append(pagingDivInnerHTML);
+    }
+    //工具类
+    _format(str, obj) {
+        return str.replace(/\{(\w+)\}/g, function (match, group, index) {
+            return obj[group];
+        });
+    };
+}
+export default new LanclassApe;

+//*
+// 标注模块
+// */
+
+import Loger from "../Loger";
+import Ape from "./Ape";
+import xdysdk from "libs/xdysdk";
+import DrawTool from "./DrawTool";
+import LaserPen from "./LaserPen";
+import $ from "jquery";
+import ClassDataProxy from "proxy/ClassDataProxy";
+
+let loger = Loger.getLoger('PC-LoginOrRegister');
+class LoginOrRegister extends Ape {
+    constructor() {
+        super();
+        this.addEvent();
+        this.init();
+    }
+
+    init() {
+        $('#usersignA').on('click',this._usersignAHandler.bind(this));//关闭注册界面
+        $('#userLoginA').on('click',this._userLoginAHandler.bind(this));//关闭登录界面
+        $('#skipLoginBtn').on('click',this._skipLoginBtnHandler.bind(this));//注册跳转登录界面
+        $('#nowUserSign').on('click',this._nowUserSignHandler.bind(this));//新用户注册
+
+        $('#signPhone').on('focus',this._signFocusHandler.bind(this));//注册判断手机号
+        $('#signMail').on('focus',this._signFocusHandler.bind(this));//注册判断手机号
+        $('#signPassWord').on('focus',this._signFocusHandler.bind(this));//注册判断密码
+        $('#securityCode').on('focus',this._signFocusHandler.bind(this));//注册判断验证码
+
+        $('#signBtn').on('click',this._signBtnHandler.bind(this));//注册信息提交
+
+        $('#userLoginBtn').on('click',this._loginBtnHandler.bind(this));//登录信息提交
+
+        $('#homeUserLoginBtn').on('click',this._homeUserLoginBtnHandler.bind(this));//首页用户登录
+
+    }
+
+    addEvent() {
+
+    }
+    //关闭注册界面
+    _usersignAHandler(){
+        $('#userSignBox').hide();
+    }
+    //关闭登录界面
+    _userLoginAHandler(){
+        $('#userLoginBox').hide();
+    }
+    //注册跳转登录界面
+    _skipLoginBtnHandler(){
+        $('#userSignBox').hide();
+        $('#userLoginBox').show();
+    }
+    //新用户注册
+    _nowUserSignHandler(){
+        $('#userLoginBox').hide();
+        $('#userSignBox').show();
+    }
+    //首页用户登录
+    _homeUserLoginBtnHandler(){
+        $('#userLoginBox').show();
+    }
+    _signFocusHandler(evt){
+        let _ele = $(evt.target);
+        if(_ele.css('color') != 'rgb(0, 0, 0)'){
+            _ele.val('')
+                .css('color','#000');
+        }
+    }
+    _signName(_name){
+        if(!_name.value){
+            _name.focus();
+            return false;
+        }
+    }
+    _signPhone(phone){
+        let reg = "^1[3|4|5|8][0-9]\\d{8}$";
+        let re = new RegExp(reg);
+        if(!phone.value){
+            phone.focus();
+            return false;
+        }
+        if (re.test(phone.value)) {
+            $('#signPhone').css('color','#000');
+        } else {
+            $('#signPhone').val('手机号输入不合法')
+                .css('color','#d95136');
+            phone.focus();
+            return false;
+        }
+    }
+    _signMail(mail){
+        let filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+        if(!mail.value){
+            mail.focus();
+            return false;
+        }
+        if (filter.test(mail.value)){
+            $('#signMail').css('color','#000');
+        }
+        else {
+            $('#signMail').val('电子邮箱输入不合法')
+                .css('color','#d95136');
+            mail.focus();
+            return false;
+        }
+    }
+    //判断密码
+    _signPassWord(_passWord){
+        let reg = /^[0-9a-zA-Z]{8,12}$/;//密码正则
+        if(!_passWord.value){
+            _passWord.focus();
+            return false;
+        }
+        if(reg.test(_passWord.value)){
+            $('#signPassWord').css('color','#000');
+        }else{
+            $('#signPassWord').val('密码长度不够或太长')
+                .css('color','#d95136');
+            _passWord.focus();
+            return false;
+        }
+    }
+    //判断验证码
+    _securityCode(securityCode){
+        let reg= /^\d{4}$/;//验证码正则
+        if(!securityCode.value){
+            securityCode.focus();
+            return false;
+        }
+        if(reg.test(securityCode.value)){
+            $('#securityCode').css('color','#000');
+        }else{
+            $('#securityCode').val('验证码不正确')
+                .css('color','#d95136');
+            securityCode.focus();
+            return false;
+        }
+    }
+    //注册信息提交
+    _signBtnHandler(){
+        let _name = document.getElementById("signName");//用户名
+        let phone = document.getElementById("signPhone");//手机号
+        let mail = document.getElementById("signMail");//邮箱
+        let _passWord = document.getElementById("signPassWord");//密码
+        let securityCode = document.getElementById("securityCode");//验证码
+        let permitSign = document.getElementById("permitSign");//是否同意
+        if(_name.value && phone.value && mail.value && _passWord.value && securityCode.value && $(permitSign).is(':checked')){
+            let signInfo = {
+                "loginName": _name.value, // 登录名
+                "password": _passWord.value,  //登录密码
+                "companyName":null,  //公司名字
+                "userName":_name.value, //用户名
+                "userRole":4, // 用户角色 0超级管理员，1管理员，2监课，3老师，4学生
+                "userEmail":mail.value, // 用户邮箱
+                "userMobile":parseInt(phone.value), // 用户手机号
+                "content":"2017-09-01", // 用户简介
+                "groupId":1, //用户组id
+                "IDcard":123123
+            }
+            let that = this;
+            $.ajax({
+                type: "POST",
+                url: 'http://192.168.31.8:3000/users/addUser',
+                data: signInfo,
+                success:function(_data){
+                    console.log(_data,'成功')
+                    //注册成功后 跳转登录界面
+                    that._successSign(_data);
+                },
+                error:function(error){
+                    console.log(error,'失败')
+                }
+            })
+        }else{
+            this._securityCode(securityCode);//判断验证码
+            this._signPassWord(_passWord);//判断密码
+            this._signMail(mail);//判断邮箱
+            this._signPhone(phone);//判断手机号
+            this._signName(_name);//判断用户名
+        }
+    }
+    //注册成功后 跳转登录界面
+    _successSign(_data){
+        if(_data.code == 200){
+            this._skipLoginBtnHandler();
+        }
+    }
+    _loginName(_name){
+        if(_name.value){
+            _name.focus();
+            return false;
+        }
+    }
+    _loginPassWord(_passWord){
+        if(_passWord.value){
+            _passWord.focus();
+            return false;
+        }
+    }
+    //登录信息提交
+    _loginBtnHandler(){
+        let _name = document.getElementById("loginName");//用户名
+        let _passWord = document.getElementById("loginPassWord");//手机号
+        if(_name.value && _passWord.value){
+            let signInfo = {
+                "loginName": _name.value, // 登录名
+                "password": _passWord.value,  //登录密码
+                "code":"quwerdf"
+            }
+            $.ajax({
+                type: "POST",
+                url: 'http://192.168.31.8:3000/users/login',
+                data: signInfo,
+                success:function(_data){
+                    console.log(_data,'成功')
+                    that.successLogin(_data);
+                },
+                error:function(error){
+                    debugger;
+                    console.log(error,'失败')
+                }
+            })
+        }else{
+            this._loginName(_name);//登录判断用户名
+            this._loginPassWord(_passWord);//登录判断密码
+        }
+    }
+    //用户成功登录
+    successLogin(_data){
+        if(_data.code == 200){
+           this._userLoginAHandler();
+        }
+    }
+
+}
+export default new LoginOrRegister;

+//*
+// 标注模块
+// */
+
+import Loger from "../Loger";
+import Ape from "./Ape";
+import xdysdk from "libs/xdysdk";
+import DrawTool from "./DrawTool";
+import LaserPen from "./LaserPen";
+import $ from "jquery";
+import ClassDataProxy from "proxy/ClassDataProxy";
+
+let loger = Loger.getLoger('PC-Slideshow');
+class Slideshow extends Ape {
+    constructor() {
+        super();
+        this._timer = null;
+        this.windowWidth = 0;
+        this.num = 0;
+        this.len = 0;
+        this.addEvent();
+        this.init();
+    }
+
+    init() {
+        $(window).on('resize',this._imgReload.bind(this));
+        this.slideImg();
+        this._imgReload();
+        $(".slidesImg").on('load', this._onLoadImage.bind(this));
+        $('#dots li').on('mouseenter',this._mouseenterHandler.bind(this));
+        $('#dots li').on('mouseleave',this._mouseleaveHandler.bind(this));
+    }
+
+    addEvent() {
+
+    }
+    _onLoadImage(){
+        this._imgReload();
+    }
+    slideImg(){
+
+
+        let oli = document.getElementById('dots').getElementsByTagName("li");
+        let _num = 0;
+
+        let clone=$(".slidesMap").first().clone();
+        $("#motionMapBox").append(clone);
+
+        let li = document.getElementById('motionMapBox').getElementsByTagName("li");
+        let size = li.length
+        this.num = _num;
+        this.len = size;
+
+        this._timer = setInterval(function(){
+            li[_num].style.display="none";
+            _num=++_num==size ? 0:_num;
+            li[_num].style.display="inline-block";
+            // $("#motionMapBox").stop().animate({left:-this.num*this.windowWidth},500);
+            $("#dots li").eq(_num).addClass('active').siblings().removeClass('active');
+
+        },3000);//切换时间
+    }
+    _mouseenterHandler(){
+        clearInterval(this._timer);
+    }
+    _mouseleaveHandler(){
+
+    }
+    _move(){
+        let li = document.getElementById('motionMapBox').getElementsByTagName("li");
+        this._timer = setInterval(function(){
+            li[_num].style.display="none";
+             _num=++_num==size ? 0:_num;
+             li[_num].style.display="inline-block";
+           // $("#motionMapBox").stop().animate({left:-this.num*this.windowWidth},500);
+            $("#dots li").eq(_num).addClass('active').siblings().removeClass('active');
+
+        },3000);//切换时间
+    }
+    /*slideImg(){
+
+        let i = 0;
+        let width = $('.slidesMap').width();
+        let clone=$(".slidesMap").first().clone();
+        $("#motionMapBox").append(clone);
+        let size = document.getElementById('motionMapBox').getElementsByTagName("li").length;
+        for(let j=0;j<size-1;j++){
+            $("#dots").append("<li></li>");
+        }
+        $("#dots li").first().addClass('active');
+
+        $(".dots li").hover(function(){
+            let index=$(this).index();
+            i=index;
+            $(".motionMapBox").stop().animate({left:-index*width},500);
+            $(this).addClass('active').siblings().removeClass('active');
+        })
+            let t=setInterval(function(){
+                i++;
+                move();
+            },2000);
+
+            //对banner定时器的操作
+            $(".slideshow").hover(function(){
+                clearInterval(t);
+            },function(){
+                t=setInterval(move,2000);
+            })
+
+
+            function move(){
+                if(i==size){
+                    $("#motionMapBox").css({left:0});
+                    i=1;
+                }
+                if(i==-1){
+                    $("#motionMapBox").css({left:-(size-1)*width});
+                    i=size-2;
+                }
+
+                $("#motionMapBox").stop().animate({left:-i*width},500);
+
+                if(i==size-1){
+                    $("#dots li").eq(0).addClass('active').siblings().removeClass('active');
+                }else{
+                    $("#dots li").eq(i).addClass('active').siblings().removeClass('active');
+                }
+            }
+
+    }*/
+    _imgReload(){
+        let _windowWidth = $("body").width();
+        this.windowWidth = _windowWidth;
+        $('.slidesMap').css({width:_windowWidth + "px"});
+        $('.slidesImg').css({width:_windowWidth + "px"});
+
+  /*      let imgHeight = 0;
+
+        let wtmp = $("body").width();
+
+
+        $("#motionMapBox li").each(function(){
+
+            $(this).css({width:wtmp + "px"});
+
+        });
+
+        $(".slidesImg").each(function(){
+
+            $(this).css({width:wtmp + "px"});
+
+            imgHeight = $(this).height();
+
+        });*/
+        $('#motionMapBox').width($(".slidesMap").length * _windowWidth)
+    }
+
+
+}
+export default new Slideshow;

+/**
+ * BxSlider v4.1.2 - Fully loaded, responsive content slider
+ * http://bxslider.com
+ *
+ * Copyright 2014, Steven Wanderski - http://stevenwanderski.com - http://bxcreative.com
+ * Written while drinking Belgian ales and listening to jazz
+ *
+ * Released under the MIT license - http://opensource.org/licenses/MIT
+ */
+
+;(function($){
+
+	var plugin = {};
+
+	var defaults = {
+
+		// GENERAL
+		mode: 'horizontal',
+		slideSelector: '',
+		infiniteLoop: true,
+		hideControlOnEnd: false,
+		speed: 500,
+		easing: null,
+		slideMargin: 0,
+		startSlide: 0,
+		randomStart: false,
+		captions: false,
+		ticker: false,
+		tickerHover: false,
+		adaptiveHeight: false,
+		adaptiveHeightSpeed: 500,
+		video: false,
+		useCSS: true,
+		preloadImages: 'visible',
+		responsive: true,
+		slideZIndex: 50,
+		wrapperClass: 'bx-wrapper',
+
+		// TOUCH
+		touchEnabled: true,
+		swipeThreshold: 50,
+		oneToOneTouch: true,
+		preventDefaultSwipeX: true,
+		preventDefaultSwipeY: false,
+
+		// PAGER
+		pager: true,
+		pagerType: 'full',
+		pagerShortSeparator: ' / ',
+		pagerSelector: null,
+		buildPager: null,
+		pagerCustom: null,
+
+		// CONTROLS
+		controls: true,
+		nextText: 'Next',
+		prevText: 'Prev',
+		nextSelector: null,
+		prevSelector: null,
+		autoControls: false,
+		startText: 'Start',
+		stopText: 'Stop',
+		autoControlsCombine: false,
+		autoControlsSelector: null,
+
+		// AUTO
+		auto: false,
+		pause: 4000,
+		autoStart: true,
+		autoDirection: 'next',
+		autoHover: false,
+		autoDelay: 0,
+		autoSlideForOnePage: false,
+
+		// CAROUSEL
+		minSlides: 1,
+		maxSlides: 1,
+		moveSlides: 0,
+		slideWidth: 0,
+
+		// CALLBACKS
+		onSliderLoad: function() {},
+		onSlideBefore: function() {},
+		onSlideAfter: function() {},
+		onSlideNext: function() {},
+		onSlidePrev: function() {},
+		onSliderResize: function() {}
+	}
+
+	$.fn.bxSlider = function(options){
+
+		if(this.length == 0) return this;
+
+		// support mutltiple elements
+		if(this.length > 1){
+			this.each(function(){$(this).bxSlider(options)});
+			return this;
+		}
+
+		// create a namespace to be used throughout the plugin
+		var slider = {};
+		// set a reference to our slider element
+		var el = this;
+		plugin.el = this;
+
+		/**
+		 * Makes slideshow responsive
+		 */
+		// first get the original window dimens (thanks alot IE)
+		var windowWidth = $(window).width();
+		var windowHeight = $(window).height();
+
+
+
+		/**
+		 * ===================================================================================
+		 * = PRIVATE FUNCTIONS
+		 * ===================================================================================
+		 */
+
+		/**
+		 * Initializes namespace settings to be used throughout plugin
+		 */
+		var init = function(){
+			// merge user-supplied options with the defaults
+			slider.settings = $.extend({}, defaults, options);
+			// parse slideWidth setting
+			slider.settings.slideWidth = parseInt(slider.settings.slideWidth);
+			// store the original children
+			slider.children = el.children(slider.settings.slideSelector);
+			// check if actual number of slides is less than minSlides / maxSlides
+			if(slider.children.length < slider.settings.minSlides) slider.settings.minSlides = slider.children.length;
+			if(slider.children.length < slider.settings.maxSlides) slider.settings.maxSlides = slider.children.length;
+			// if random start, set the startSlide setting to random number
+			if(slider.settings.randomStart) slider.settings.startSlide = Math.floor(Math.random() * slider.children.length);
+			// store active slide information
+			slider.active = { index: slider.settings.startSlide }
+			// store if the slider is in carousel mode (displaying / moving multiple slides)
+			slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1;
+			// if carousel, force preloadImages = 'all'
+			if(slider.carousel) slider.settings.preloadImages = 'all';
+			// calculate the min / max width thresholds based on min / max number of slides
+			// used to setup and update carousel slides dimensions
+			slider.minThreshold = (slider.settings.minSlides * slider.settings.slideWidth) + ((slider.settings.minSlides - 1) * slider.settings.slideMargin);
+			slider.maxThreshold = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
+			// store the current state of the slider (if currently animating, working is true)
+			slider.working = false;
+			// initialize the controls object
+			slider.controls = {};
+			// initialize an auto interval
+			slider.interval = null;
+			// determine which property to use for transitions
+			slider.animProp = slider.settings.mode == 'vertical' ? 'top' : 'left';
+			// determine if hardware acceleration can be used
+			slider.usingCSS = slider.settings.useCSS && slider.settings.mode != 'fade' && (function(){
+				// create our test div element
+				var div = document.createElement('div');
+				// css transition properties
+				var props = ['WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
+				// test for each property
+				for(var i in props){
+					if(div.style[props[i]] !== undefined){
+						slider.cssPrefix = props[i].replace('Perspective', '').toLowerCase();
+						slider.animProp = '-' + slider.cssPrefix + '-transform';
+						return true;
+					}
+				}
+				return false;
+			}());
+			// if vertical mode always make maxSlides and minSlides equal
+			if(slider.settings.mode == 'vertical') slider.settings.maxSlides = slider.settings.minSlides;
+			// save original style data
+			el.data("origStyle", el.attr("style"));
+			el.children(slider.settings.slideSelector).each(function() {
+			  $(this).data("origStyle", $(this).attr("style"));
+			});
+			// perform all DOM / CSS modifications
+			setup();
+		}
+
+		/**
+		 * Performs all DOM and CSS modifications
+		 */
+		var setup = function(){
+			// wrap el in a wrapper
+			el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');
+			// store a namspace reference to .bx-viewport
+			slider.viewport = el.parent();
+			// add a loading div to display while images are loading
+			slider.loader = $('<div class="bx-loading" />');
+			slider.viewport.prepend(slider.loader);
+			// set el to a massive width, to hold any needed slides
+			// also strip any margin and padding from el
+			el.css({
+				width: slider.settings.mode == 'horizontal' ? (slider.children.length * 100 + 215) + '%' : 'auto',
+				position: 'relative'
+			});
+			// if using CSS, add the easing property
+			if(slider.usingCSS && slider.settings.easing){
+				el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
+			// if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
+			}else if(!slider.settings.easing){
+				slider.settings.easing = 'swing';
+			}
+			var slidesShowing = getNumberSlidesShowing();
+			// make modifications to the viewport (.bx-viewport)
+			slider.viewport.css({
+				width: '100%',
+				overflow: 'hidden',
+				position: 'relative'
+			});
+			slider.viewport.parent().css({
+				maxWidth: getViewportMaxWidth()
+			});
+			// make modification to the wrapper (.bx-wrapper)
+			if(!slider.settings.pager) {
+				slider.viewport.parent().css({
+				margin: '0 auto 0px'
+				});
+			}
+			// apply css to all slider children
+			slider.children.css({
+				'float': slider.settings.mode == 'horizontal' ? 'left' : 'none',
+				listStyle: 'none',
+				position: 'relative'
+			});
+			// apply the calculated width after the float is applied to prevent scrollbar interference
+			slider.children.css('width', getSlideWidth());
+			// if slideMargin is supplied, add the css
+			if(slider.settings.mode == 'horizontal' && slider.settings.slideMargin > 0) slider.children.css('marginRight', slider.settings.slideMargin);
+			if(slider.settings.mode == 'vertical' && slider.settings.slideMargin > 0) slider.children.css('marginBottom', slider.settings.slideMargin);
+			// if "fade" mode, add positioning and z-index CSS
+			if(slider.settings.mode == 'fade'){
+				slider.children.css({
+					position: 'absolute',
+					zIndex: 0,
+					display: 'none'
+				});
+				// prepare the z-index on the showing element
+				slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});
+			}
+			// create an element to contain all slider controls (pager, start / stop, etc)
+			slider.controls.el = $('<div class="bx-controls" />');
+			// if captions are requested, add them
+			if(slider.settings.captions) appendCaptions();
+			// check if startSlide is last slide
+			slider.active.last = slider.settings.startSlide == getPagerQty() - 1;
+			// if video is true, set up the fitVids plugin
+			if(slider.settings.video) el.fitVids();
+			// set the default preload selector (visible)
+			var preloadSelector = slider.children.eq(slider.settings.startSlide);
+			if (slider.settings.preloadImages == "all") preloadSelector = slider.children;
+			// only check for control addition if not in "ticker" mode
+			if(!slider.settings.ticker){
+				// if pager is requested, add it
+				if(slider.settings.pager) appendPager();
+				// if controls are requested, add them
+				if(slider.settings.controls) appendControls();
+				// if auto is true, and auto controls are requested, add them
+				if(slider.settings.auto && slider.settings.autoControls) appendControlsAuto();
+				// if any control option is requested, add the controls wrapper
+				if(slider.settings.controls || slider.settings.autoControls || slider.settings.pager) slider.viewport.after(slider.controls.el);
+			// if ticker mode, do not allow a pager
+			}else{
+				slider.settings.pager = false;
+			}
+			// preload all images, then perform final DOM / CSS modifications that depend on images being loaded
+			loadElements(preloadSelector, start);
+		}
+
+		var loadElements = function(selector, callback){
+			var total = selector.find('img, iframe').length;
+			if (total == 0){
+				callback();
+				return;
+			}
+			var count = 0;
+			selector.find('img, iframe').each(function(){
+				$(this).one('load', function() {
+				  if(++count == total) callback();
+				}).each(function() {
+				  if(this.complete) $(this).load();
+				});
+			});
+		}
+
+		/**
+		 * Start the slider
+		 */
+		var start = function(){
+			// if infinite loop, prepare additional slides
+			if(slider.settings.infiniteLoop && slider.settings.mode != 'fade' && !slider.settings.ticker){
+				var slice = slider.settings.mode == 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides;
+				var sliceAppend = slider.children.slice(0, slice).clone().addClass('bx-clone');
+				var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone');
+				el.append(sliceAppend).prepend(slicePrepend);
+			}
+			// remove the loading DOM element
+			slider.loader.remove();
+			// set the left / top position of "el"
+			setSlidePosition();
+			// if "vertical" mode, always use adaptiveHeight to prevent odd behavior
+			if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = true;
+			// set the viewport height
+			slider.viewport.height(getViewportHeight());
+			// make sure everything is positioned just right (same as a window resize)
+			el.redrawSlider();
+			// onSliderLoad callback
+			slider.settings.onSliderLoad(slider.active.index);
+			// slider has been fully initialized
+			slider.initialized = true;
+			// bind the resize call to the window
+			if (slider.settings.responsive) $(window).bind('resize', resizeWindow);
+			// if auto is true and has more than 1 page, start the show
+			if (slider.settings.auto && slider.settings.autoStart && (getPagerQty() > 1 || slider.settings.autoSlideForOnePage)) initAuto();
+			// if ticker is true, start the ticker
+			if (slider.settings.ticker) initTicker();
+			// if pager is requested, make the appropriate pager link active
+			if (slider.settings.pager) updatePagerActive(slider.settings.startSlide);
+			// check for any updates to the controls (like hideControlOnEnd updates)
+			if (slider.settings.controls) updateDirectionControls();
+			// if touchEnabled is true, setup the touch events
+			if (slider.settings.touchEnabled && !slider.settings.ticker) initTouch();
+		}
+
+		/**
+		 * Returns the calculated height of the viewport, used to determine either adaptiveHeight or the maxHeight value
+		 */
+		var getViewportHeight = function(){
+			var height = 0;
+			// first determine which children (slides) should be used in our height calculation
+			var children = $();
+			// if mode is not "vertical" and adaptiveHeight is false, include all children
+			if(slider.settings.mode != 'vertical' && !slider.settings.adaptiveHeight){
+				children = slider.children;
+			}else{
+				// if not carousel, return the single active child
+				if(!slider.carousel){
+					children = slider.children.eq(slider.active.index);
+				// if carousel, return a slice of children
+				}else{
+					// get the individual slide index
+					var currentIndex = slider.settings.moveSlides == 1 ? slider.active.index : slider.active.index * getMoveBy();
+					// add the current slide to the children
+					children = slider.children.eq(currentIndex);
+					// cycle through the remaining "showing" slides
+					for (i = 1; i <= slider.settings.maxSlides - 1; i++){
+						// if looped back to the start
+						if(currentIndex + i >= slider.children.length){
+							children = children.add(slider.children.eq(i - 1));
+						}else{
+							children = children.add(slider.children.eq(currentIndex + i));
+						}
+					}
+				}
+			}
+			// if "vertical" mode, calculate the sum of the heights of the children
+			if(slider.settings.mode == 'vertical'){
+				children.each(function(index) {
+				  height += $(this).outerHeight();
+				});
+				// add user-supplied margins
+				if(slider.settings.slideMargin > 0){
+					height += slider.settings.slideMargin * (slider.settings.minSlides - 1);
+				}
+			// if not "vertical" mode, calculate the max height of the children
+			}else{
+				height = Math.max.apply(Math, children.map(function(){
+					return $(this).outerHeight(false);
+				}).get());
+			}
+
+			if(slider.viewport.css('box-sizing') == 'border-box'){
+				height +=	parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom')) +
+							parseFloat(slider.viewport.css('border-top-width')) + parseFloat(slider.viewport.css('border-bottom-width'));
+			}else if(slider.viewport.css('box-sizing') == 'padding-box'){
+				height +=	parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom'));
+			}
+
+			return height;
+		}
+
+		/**
+		 * Returns the calculated width to be used for the outer wrapper / viewport
+		 */
+		var getViewportMaxWidth = function(){
+			var width = '100%';
+			if(slider.settings.slideWidth > 0){
+				if(slider.settings.mode == 'horizontal'){
+					width = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
+				}else{
+					width = slider.settings.slideWidth;
+				}
+			}
+			return width;
+		}
+
+		/**
+		 * Returns the calculated width to be applied to each slide
+		 */
+		var getSlideWidth = function(){
+			// start with any user-supplied slide width
+			var newElWidth = slider.settings.slideWidth;
+			// get the current viewport width
+			var wrapWidth = slider.viewport.width();
+			// if slide width was not supplied, or is larger than the viewport use the viewport width
+			if(slider.settings.slideWidth == 0 ||
+				(slider.settings.slideWidth > wrapWidth && !slider.carousel) ||
+				slider.settings.mode == 'vertical'){
+				newElWidth = wrapWidth;
+			// if carousel, use the thresholds to determine the width
+			}else if(slider.settings.maxSlides > 1 && slider.settings.mode == 'horizontal'){
+				if(wrapWidth > slider.maxThreshold){
+					// newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.maxSlides - 1))) / slider.settings.maxSlides;
+				}else if(wrapWidth < slider.minThreshold){
+					newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.minSlides - 1))) / slider.settings.minSlides;
+				}
+			}
+			return newElWidth;
+		}
+
+		/**
+		 * Returns the number of slides currently visible in the viewport (includes partially visible slides)
+		 */
+		var getNumberSlidesShowing = function(){
+			var slidesShowing = 1;
+			if(slider.settings.mode == 'horizontal' && slider.settings.slideWidth > 0){
+				// if viewport is smaller than minThreshold, return minSlides
+				if(slider.viewport.width() < slider.minThreshold){
+					slidesShowing = slider.settings.minSlides;
+				// if viewport is larger than minThreshold, return maxSlides
+				}else if(slider.viewport.width() > slider.maxThreshold){
+					slidesShowing = slider.settings.maxSlides;
+				// if viewport is between min / max thresholds, divide viewport width by first child width
+				}else{
+					var childWidth = slider.children.first().width() + slider.settings.slideMargin;
+					slidesShowing = Math.floor((slider.viewport.width() +
+						slider.settings.slideMargin) / childWidth);
+				}
+			// if "vertical" mode, slides showing will always be minSlides
+			}else if(slider.settings.mode == 'vertical'){
+				slidesShowing = slider.settings.minSlides;
+			}
+			return slidesShowing;
+		}
+
+		/**
+		 * Returns the number of pages (one full viewport of slides is one "page")
+		 */
+		var getPagerQty = function(){
+			var pagerQty = 0;
+			// if moveSlides is specified by the user
+			if(slider.settings.moveSlides > 0){
+				if(slider.settings.infiniteLoop){
+					pagerQty = Math.ceil(slider.children.length / getMoveBy());
+				}else{
+					// use a while loop to determine pages
+					var breakPoint = 0;
+					var counter = 0
+					// when breakpoint goes above children length, counter is the number of pages
+					while (breakPoint < slider.children.length){
+						++pagerQty;
+						breakPoint = counter + getNumberSlidesShowing();
+						counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
+					}
+				}
+			// if moveSlides is 0 (auto) divide children length by sides showing, then round up
+			}else{
+				pagerQty = Math.ceil(slider.children.length / getNumberSlidesShowing());
+			}
+			return pagerQty;
+		}
+
+		/**
+		 * Returns the number of indivual slides by which to shift the slider
+		 */
+		var getMoveBy = function(){
+			// if moveSlides was set by the user and moveSlides is less than number of slides showing
+			if(slider.settings.moveSlides > 0 && slider.settings.moveSlides <= getNumberSlidesShowing()){
+				return slider.settings.moveSlides;
+			}
+			// if moveSlides is 0 (auto)
+			return getNumberSlidesShowing();
+		}
+
+		/**
+		 * Sets the slider's (el) left or top position
+		 */
+		var setSlidePosition = function(){
+			// if last slide, not infinite loop, and number of children is larger than specified maxSlides
+			if(slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop){
+				if (slider.settings.mode == 'horizontal'){
+					// get the last child's position
+					var lastChild = slider.children.last();
+					var position = lastChild.position();
+					// set the left position
+					setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.outerWidth())), 'reset', 0);
+				}else if(slider.settings.mode == 'vertical'){
+					// get the last showing index's position
+					var lastShowingIndex = slider.children.length - slider.settings.minSlides;
+					var position = slider.children.eq(lastShowingIndex).position();
+					// set the top position
+					setPositionProperty(-position.top, 'reset', 0);
+				}
+			// if not last slide
+			}else{
+				// get the position of the first showing slide
+				var position = slider.children.eq(slider.active.index * getMoveBy()).position();
+				// check for last slide
+				if (slider.active.index == getPagerQty() - 1) slider.active.last = true;
+				// set the repective position
+				if (position != undefined){
+					if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0);
+					else if (slider.settings.mode == 'vertical') setPositionProperty(-position.top, 'reset', 0);
+				}
+			}
+		}
+
+		/**
+		 * Sets the el's animating property position (which in turn will sometimes animate el).
+		 * If using CSS, sets the transform property. If not using CSS, sets the top / left property.
+		 *
+		 * @param value (int)
+		 *  - the animating property's value
+		 *
+		 * @param type (string) 'slider', 'reset', 'ticker'
+		 *  - the type of instance for which the function is being
+		 *
+		 * @param duration (int)
+		 *  - the amount of time (in ms) the transition should occupy
+		 *
+		 * @param params (array) optional
+		 *  - an optional parameter containing any variables that need to be passed in
+		 */
+		var setPositionProperty = function(value, type, duration, params){
+			// use CSS transform
+			if(slider.usingCSS){
+				// determine the translate3d value
+				var propValue = slider.settings.mode == 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
+				// add the CSS transition-duration
+				el.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
+				if(type == 'slide'){
+					// set the property value
+					el.css(slider.animProp, propValue);
+					// bind a callback method - executes when CSS transition completes
+					el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
+						// unbind the callback
+						el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
+						updateAfterSlideTransition();
+					});
+				}else if(type == 'reset'){
+					el.css(slider.animProp, propValue);
+				}else if(type == 'ticker'){
+					// make the transition use 'linear'
+					el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
+					el.css(slider.animProp, propValue);
+					// bind a callback method - executes when CSS transition completes
+					el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
+						// unbind the callback
+						el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
+						// reset the position
+						setPositionProperty(params['resetValue'], 'reset', 0);
+						// start the loop again
+						tickerLoop();
+					});
+				}
+			// use JS animate
+			}else{
+				var animateObj = {};
+				animateObj[slider.animProp] = value;
+				if(type == 'slide'){
+					el.animate(animateObj, duration, slider.settings.easing, function(){
+						updateAfterSlideTransition();
+					});
+				}else if(type == 'reset'){
+					el.css(slider.animProp, value)
+				}else if(type == 'ticker'){
+					el.animate(animateObj, speed, 'linear', function(){
+						setPositionProperty(params['resetValue'], 'reset', 0);
+						// run the recursive loop after animation
+						tickerLoop();
+					});
+				}
+			}
+		}
+
+		/**
+		 * Populates the pager with proper amount of pages
+		 */
+		var populatePager = function(){
+			var pagerHtml = '';
+			var pagerQty = getPagerQty();
+			// loop through each pager item
+			for(var i=0; i < pagerQty; i++){
+				var linkContent = '';
+				// if a buildPager function is supplied, use it to get pager link value, else use index + 1
+				if(slider.settings.buildPager && $.isFunction(slider.settings.buildPager)){
+					linkContent = slider.settings.buildPager(i);
+					slider.pagerEl.addClass('bx-custom-pager');
+				}else{
+					linkContent = i + 1;
+					slider.pagerEl.addClass('bx-default-pager');
+				}
+				// var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
+				// add the markup to the string
+				pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
+			};
+			// populate the pager element with pager links
+			slider.pagerEl.html(pagerHtml);
+		}
+
+		/**
+		 * Appends the pager to the controls element
+		 */
+		var appendPager = function(){
+			if(!slider.settings.pagerCustom){
+				// create the pager DOM element
+				slider.pagerEl = $('<div class="bx-pager" />');
+				// if a pager selector was supplied, populate it with the pager
+				if(slider.settings.pagerSelector){
+					$(slider.settings.pagerSelector).html(slider.pagerEl);
+				// if no pager selector was supplied, add it after the wrapper
+				}else{
+					slider.controls.el.addClass('bx-has-pager').append(slider.pagerEl);
+				}
+				// populate the pager
+				populatePager();
+			}else{
+				slider.pagerEl = $(slider.settings.pagerCustom);
+			}
+			// assign the pager click binding
+			slider.pagerEl.on('click', 'a', clickPagerBind);
+		}
+
+		/**
+		 * Appends prev / next controls to the controls element
+		 */
+		var appendControls = function(){
+			slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
+			slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
+			// bind click actions to the controls
+			slider.controls.next.bind('click', clickNextBind);
+			slider.controls.prev.bind('click', clickPrevBind);
+			// if nextSlector was supplied, populate it
+			if(slider.settings.nextSelector){
+				$(slider.settings.nextSelector).append(slider.controls.next);
+			}
+			// if prevSlector was supplied, populate it
+			if(slider.settings.prevSelector){
+				$(slider.settings.prevSelector).append(slider.controls.prev);
+			}
+			// if no custom selectors were supplied
+			if(!slider.settings.nextSelector && !slider.settings.prevSelector){
+				// add the controls to the DOM
+				slider.controls.directionEl = $('<div class="bx-controls-direction" />');
+				// add the control elements to the directionEl
+				slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
+				// slider.viewport.append(slider.controls.directionEl);
+				slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
+			}
+		}
+
+		/**
+		 * Appends start / stop auto controls to the controls element
+		 */
+		var appendControlsAuto = function(){
+			slider.controls.start = $('<div class="bx-controls-auto-item"><a class="bx-start" href="">' + slider.settings.startText + '</a></div>');
+			slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</a></div>');
+			// add the controls to the DOM
+			slider.controls.autoEl = $('<div class="bx-controls-auto" />');
+			// bind click actions to the controls
+			slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
+			slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);
+			// if autoControlsCombine, insert only the "start" control
+			if(slider.settings.autoControlsCombine){
+				slider.controls.autoEl.append(slider.controls.start);
+			// if autoControlsCombine is false, insert both controls
+			}else{
+				slider.controls.autoEl.append(slider.controls.start).append(slider.controls.stop);
+			}
+			// if auto controls selector was supplied, populate it with the controls
+			if(slider.settings.autoControlsSelector){
+				$(slider.settings.autoControlsSelector).html(slider.controls.autoEl);
+			// if auto controls selector was not supplied, add it after the wrapper
+			}else{
+				slider.controls.el.addClass('bx-has-controls-auto').append(slider.controls.autoEl);
+			}
+			// update the auto controls
+			updateAutoControls(slider.settings.autoStart ? 'stop' : 'start');
+		}
+
+		/**
+		 * Appends image captions to the DOM
+		 */
+		var appendCaptions = function(){
+			// cycle through each child
+			slider.children.each(function(index){
+				// get the image title attribute
+				var title = $(this).find('img:first').attr('title');
+				// append the caption
+				if (title != undefined && ('' + title).length) {
+                    $(this).append('<div class="bx-caption"><span>' + title + '</span></div>');
+                }
+			});
+		}
+
+		/**
+		 * Click next binding
+		 *
+		 * @param e (event)
+		 *  - DOM event object
+		 */
+		var clickNextBind = function(e){
+			// if auto show is running, stop it
+			if (slider.settings.auto) el.stopAuto();
+			el.goToNextSlide();
+			e.preventDefault();
+		}
+
+		/**
+		 * Click prev binding
+		 *
+		 * @param e (event)
+		 *  - DOM event object
+		 */
+		var clickPrevBind = function(e){
+			// if auto show is running, stop it
+			if (slider.settings.auto) el.stopAuto();
+			el.goToPrevSlide();
+			e.preventDefault();
+		}
+
+		/**
+		 * Click start binding
+		 *
+		 * @param e (event)
+		 *  - DOM event object
+		 */
+		var clickStartBind = function(e){
+			el.startAuto();
+			e.preventDefault();
+		}
+
+		/**
+		 * Click stop binding
+		 *
+		 * @param e (event)
+		 *  - DOM event object
+		 */
+		var clickStopBind = function(e){
+			el.stopAuto();
+			e.preventDefault();
+		}
+
+		/**
+		 * Click pager binding
+		 *
+		 * @param e (event)
+		 *  - DOM event object
+		 */
+		var clickPagerBind = function(e){
+			// if auto show is running, stop it
+			if (slider.settings.auto) el.stopAuto();
+			var pagerLink = $(e.currentTarget);
+			if(pagerLink.attr('data-slide-index') !== undefined){
+				var pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
+				// if clicked pager link is not active, continue with the goToSlide call
+				if(pagerIndex != slider.active.index) el.goToSlide(pagerIndex);
+				e.preventDefault();
+			}
+		}
+
+		/**
+		 * Updates the pager links with an active class
+		 *
+		 * @param slideIndex (int)
+		 *  - index of slide to make active
+		 */
+		var updatePagerActive = function(slideIndex){
+			// if "short" pager type
+			var len = slider.children.length; // nb of children
+			if(slider.settings.pagerType == 'short'){
+				if(slider.settings.maxSlides > 1) {
+					len = Math.ceil(slider.children.length/slider.settings.maxSlides);
+				}
+				slider.pagerEl.html( (slideIndex + 1) + slider.settings.pagerShortSeparator + len);
+				return;
+			}
+			// remove all pager active classes
+			slider.pagerEl.find('a').removeClass('active');
+			// apply the active class for all pagers
+			slider.pagerEl.each(function(i, el) { $(el).find('a').eq(slideIndex).addClass('active'); });
+		}
+
+		/**
+		 * Performs needed actions after a slide transition
+		 */
+		var updateAfterSlideTransition = function(){
+			// if infinte loop is true
+			if(slider.settings.infiniteLoop){
+				var position = '';
+				// first slide
+				if(slider.active.index == 0){
+					// set the new position
+					position = slider.children.eq(0).position();
+				// carousel, last slide
+				}else if(slider.active.index == getPagerQty() - 1 && slider.carousel){
+					position = slider.children.eq((getPagerQty() - 1) * getMoveBy()).position();
+				// last slide
+				}else if(slider.active.index == slider.children.length - 1){
+					position = slider.children.eq(slider.children.length - 1).position();
+				}
+				if(position){
+					if (slider.settings.mode == 'horizontal') { setPositionProperty(-position.left, 'reset', 0); }
+					else if (slider.settings.mode == 'vertical') { setPositionProperty(-position.top, 'reset', 0); }
+				}
+			}
+			// declare that the transition is complete
+			slider.working = false;
+			// onSlideAfter callback
+			slider.settings.onSlideAfter(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
+		}
+
+		/**
+		 * Updates the auto controls state (either active, or combined switch)
+		 *
+		 * @param state (string) "start", "stop"
+		 *  - the new state of the auto show
+		 */
+		var updateAutoControls = function(state){
+			// if autoControlsCombine is true, replace the current control with the new state
+			if(slider.settings.autoControlsCombine){
+				slider.controls.autoEl.html(slider.controls[state]);
+			// if autoControlsCombine is false, apply the "active" class to the appropriate control
+			}else{
+				slider.controls.autoEl.find('a').removeClass('active');
+				slider.controls.autoEl.find('a:not(.bx-' + state + ')').addClass('active');
+			}
+		}
+
+		/**
+		 * Updates the direction controls (checks if either should be hidden)
+		 */
+		var updateDirectionControls = function(){
+			if(getPagerQty() == 1){
+				slider.controls.prev.addClass('disabled');
+				slider.controls.next.addClass('disabled');
+			}else if(!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd){
+				// if first slide
+				if (slider.active.index == 0){
+					slider.controls.prev.addClass('disabled');
+					slider.controls.next.removeClass('disabled');
+				// if last slide
+				}else if(slider.active.index == getPagerQty() - 1){
+					slider.controls.next.addClass('disabled');
+					slider.controls.prev.removeClass('disabled');
+				// if any slide in the middle
+				}else{
+					slider.controls.prev.removeClass('disabled');
+					slider.controls.next.removeClass('disabled');
+				}
+			}
+		}
+
+		/**
+		 * Initialzes the auto process
+		 */
+		var initAuto = function(){
+			// if autoDelay was supplied, launch the auto show using a setTimeout() call
+			if(slider.settings.autoDelay > 0){
+				var timeout = setTimeout(el.startAuto, slider.settings.autoDelay);
+			// if autoDelay was not supplied, start the auto show normally
+			}else{
+				el.startAuto();
+			}
+			// if autoHover is requested
+			if(slider.settings.autoHover){
+				// on el hover
+				el.hover(function(){
+					// if the auto show is currently playing (has an active interval)
+					if(slider.interval){
+						// stop the auto show and pass true agument which will prevent control update
+						el.stopAuto(true);
+						// create a new autoPaused value which will be used by the relative "mouseout" event
+						slider.autoPaused = true;
+					}
+				}, function(){
+					// if the autoPaused value was created be the prior "mouseover" event
+					if(slider.autoPaused){
+						// start the auto show and pass true agument which will prevent control update
+						el.startAuto(true);
+						// reset the autoPaused value
+						slider.autoPaused = null;
+					}
+				});
+			}
+		}
+
+		/**
+		 * Initialzes the ticker process
+		 */
+		var initTicker = function(){
+			var startPosition = 0;
+			// if autoDirection is "next", append a clone of the entire slider
+			if(slider.settings.autoDirection == 'next'){
+				el.append(slider.children.clone().addClass('bx-clone'));
+			// if autoDirection is "prev", prepend a clone of the entire slider, and set the left position
+			}else{
+				el.prepend(slider.children.clone().addClass('bx-clone'));
+				var position = slider.children.first().position();
+				startPosition = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
+			}
+			setPositionProperty(startPosition, 'reset', 0);
+			// do not allow controls in ticker mode
+			slider.settings.pager = false;
+			slider.settings.controls = false;
+			slider.settings.autoControls = false;
+			// if autoHover is requested
+			if(slider.settings.tickerHover && !slider.usingCSS){
+				// on el hover
+				slider.viewport.hover(function(){
+					el.stop();
+				}, function(){
+					// calculate the total width of children (used to calculate the speed ratio)
+					var totalDimens = 0;
+					slider.children.each(function(index){
+					  totalDimens += slider.settings.mode == 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
+					});
+					// calculate the speed ratio (used to determine the new speed to finish the paused animation)
+					var ratio = slider.settings.speed / totalDimens;
+					// determine which property to use
+					var property = slider.settings.mode == 'horizontal' ? 'left' : 'top';
+					// calculate the new speed
+					var newSpeed = ratio * (totalDimens - (Math.abs(parseInt(el.css(property)))));
+					tickerLoop(newSpeed);
+				});
+			}
+			// start the ticker loop
+			tickerLoop();
+		}
+
+		/**
+		 * Runs a continuous loop, news ticker-style
+		 */
+		var tickerLoop = function(resumeSpeed){
+			speed = resumeSpeed ? resumeSpeed : slider.settings.speed;
+			var position = {left: 0, top: 0};
+			var reset = {left: 0, top: 0};
+			// if "next" animate left position to last child, then reset left to 0
+			if(slider.settings.autoDirection == 'next'){
+				position = el.find('.bx-clone').first().position();
+			// if "prev" animate left position to 0, then reset left to first non-clone child
+			}else{
+				reset = slider.children.first().position();
+			}
+			var animateProperty = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
+			var resetValue = slider.settings.mode == 'horizontal' ? -reset.left : -reset.top;
+			var params = {resetValue: resetValue};
+			setPositionProperty(animateProperty, 'ticker', speed, params);
+		}
+
+		/**
+		 * Initializes touch events
+		 */
+		var initTouch = function(){
+			// initialize object to contain all touch values
+			slider.touch = {
+				start: {x: 0, y: 0},
+				end: {x: 0, y: 0}
+			}
+			slider.viewport.bind('touchstart', onTouchStart);
+		}
+
+		/**
+		 * Event handler for "touchstart"
+		 *
+		 * @param e (event)
+		 *  - DOM event object
+		 */
+		var onTouchStart = function(e){
+			if(slider.working){
+				e.preventDefault();
+			}else{
+				// record the original position when touch starts
+				slider.touch.originalPos = el.position();
+				var orig = e.originalEvent;
+				// record the starting touch x, y coordinates
+				slider.touch.start.x = orig.changedTouches[0].pageX;
+				slider.touch.start.y = orig.changedTouches[0].pageY;
+				// bind a "touchmove" event to the viewport
+				slider.viewport.bind('touchmove', onTouchMove);
+				// bind a "touchend" event to the viewport
+				slider.viewport.bind('touchend', onTouchEnd);
+			}
+		}
+
+		/**
+		 * Event handler for "touchmove"
+		 *
+		 * @param e (event)
+		 *  - DOM event object
+		 */
+		var onTouchMove = function(e){
+			var orig = e.originalEvent;
+			// if scrolling on y axis, do not prevent default
+			var xMovement = Math.abs(orig.changedTouches[0].pageX - slider.touch.start.x);
+			var yMovement = Math.abs(orig.changedTouches[0].pageY - slider.touch.start.y);
+			// x axis swipe
+			if((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX){
+				e.preventDefault();
+			// y axis swipe
+			}else if((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY){
+				e.preventDefault();
+			}
+			if(slider.settings.mode != 'fade' && slider.settings.oneToOneTouch){
+				var value = 0;
+				// if horizontal, drag along x axis
+				if(slider.settings.mode == 'horizontal'){
+					var change = orig.changedTouches[0].pageX - slider.touch.start.x;
+					value = slider.touch.originalPos.left + change;
+				// if vertical, drag along y axis
+				}else{
+					var change = orig.changedTouches[0].pageY - slider.touch.start.y;
+					value = slider.touch.originalPos.top + change;
+				}
+				setPositionProperty(value, 'reset', 0);
+			}
+		}
+
+		/**
+		 * Event handler for "touchend"
+		 *
+		 * @param e (event)
+		 *  - DOM event object
+		 */
+		var onTouchEnd = function(e){
+			slider.viewport.unbind('touchmove', onTouchMove);
+			var orig = e.originalEvent;
+			var value = 0;
+			// record end x, y positions
+			slider.touch.end.x = orig.changedTouches[0].pageX;
+			slider.touch.end.y = orig.changedTouches[0].pageY;
+			// if fade mode, check if absolute x distance clears the threshold
+			if(slider.settings.mode == 'fade'){
+				var distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
+				if(distance >= slider.settings.swipeThreshold){
+					slider.touch.start.x > slider.touch.end.x ? el.goToNextSlide() : el.goToPrevSlide();
+					el.stopAuto();
+				}
+			// not fade mode
+			}else{
+				var distance = 0;
+				// calculate distance and el's animate property
+				if(slider.settings.mode == 'horizontal'){
+					distance = slider.touch.end.x - slider.touch.start.x;
+					value = slider.touch.originalPos.left;
+				}else{
+					distance = slider.touch.end.y - slider.touch.start.y;
+					value = slider.touch.originalPos.top;
+				}
+				// if not infinite loop and first / last slide, do not attempt a slide transition
+				if(!slider.settings.infiniteLoop && ((slider.active.index == 0 && distance > 0) || (slider.active.last && distance < 0))){
+					setPositionProperty(value, 'reset', 200);
+				}else{
+					// check if distance clears threshold
+					if(Math.abs(distance) >= slider.settings.swipeThreshold){
+						distance < 0 ? el.goToNextSlide() : el.goToPrevSlide();
+						el.stopAuto();
+					}else{
+						// el.animate(property, 200);
+						setPositionProperty(value, 'reset', 200);
+					}
+				}
+			}
+			slider.viewport.unbind('touchend', onTouchEnd);
+		}
+
+		/**
+		 * Window resize event callback
+		 */
+		var resizeWindow = function(e){
+			// don't do anything if slider isn't initialized.
+			if(!slider.initialized) return;
+			// get the new window dimens (again, thank you IE)
+			var windowWidthNew = $(window).width();
+			var windowHeightNew = $(window).height();
+			// make sure that it is a true window resize
+			// *we must check this because our dinosaur friend IE fires a window resize event when certain DOM elements
+			// are resized. Can you just die already?*
+			if(windowWidth != windowWidthNew || windowHeight != windowHeightNew){
+				// set the new window dimens
+				windowWidth = windowWidthNew;
+				windowHeight = windowHeightNew;
+				// update all dynamic elements
+				el.redrawSlider();
+				// Call user resize handler
+				slider.settings.onSliderResize.call(el, slider.active.index);
+			}
+		}
+
+		/**
+		 * ===================================================================================
+		 * = PUBLIC FUNCTIONS
+		 * ===================================================================================
+		 */
+
+		/**
+		 * Performs slide transition to the specified slide
+		 *
+		 * @param slideIndex (int)
+		 *  - the destination slide's index (zero-based)
+		 *
+		 * @param direction (string)
+		 *  - INTERNAL USE ONLY - the direction of travel ("prev" / "next")
+		 */
+		el.goToSlide = function(slideIndex, direction){
+			// if plugin is currently in motion, ignore request
+			if(slider.working || slider.active.index == slideIndex) return;
+			// declare that plugin is in motion
+			slider.working = true;
+			// store the old index
+			slider.oldIndex = slider.active.index;
+			// if slideIndex is less than zero, set active index to last child (this happens during infinite loop)
+			if(slideIndex < 0){
+				slider.active.index = getPagerQty() - 1;
+			// if slideIndex is greater than children length, set active index to 0 (this happens during infinite loop)
+			}else if(slideIndex >= getPagerQty()){
+				slider.active.index = 0;
+			// set active index to requested slide
+			}else{
+				slider.active.index = slideIndex;
+			}
+			// onSlideBefore, onSlideNext, onSlidePrev callbacks
+			slider.settings.onSlideBefore(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
+			if(direction == 'next'){
+				slider.settings.onSlideNext(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
+			}else if(direction == 'prev'){
+				slider.settings.onSlidePrev(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
+			}
+			// check if last slide
+			slider.active.last = slider.active.index >= getPagerQty() - 1;
+			// update the pager with active class
+			if(slider.settings.pager) updatePagerActive(slider.active.index);
+			// // check for direction control update
+			if(slider.settings.controls) updateDirectionControls();
+			// if slider is set to mode: "fade"
+			if(slider.settings.mode == 'fade'){
+				// if adaptiveHeight is true and next height is different from current height, animate to the new height
+				if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
+					slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
+				}
+				// fade out the visible child and reset its z-index value
+				slider.children.filter(':visible').fadeOut(slider.settings.speed).css({zIndex: 0});
+				// fade in the newly requested slide
+				slider.children.eq(slider.active.index).css('zIndex', slider.settings.slideZIndex+1).fadeIn(slider.settings.speed, function(){
+					$(this).css('zIndex', slider.settings.slideZIndex);
+					updateAfterSlideTransition();
+				});
+			// slider mode is not "fade"
+			}else{
+				// if adaptiveHeight is true and next height is different from current height, animate to the new height
+				if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
+					slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
+				}
+				var moveBy = 0;
+				var position = {left: 0, top: 0};
+				// if carousel and not infinite loop
+				if(!slider.settings.infiniteLoop && slider.carousel && slider.active.last){
+					if(slider.settings.mode == 'horizontal'){
+						// get the last child position
+						var lastChild = slider.children.eq(slider.children.length - 1);
+						position = lastChild.position();
+						// calculate the position of the last slide
+						moveBy = slider.viewport.width() - lastChild.outerWidth();
+					}else{
+						// get last showing index position
+						var lastShowingIndex = slider.children.length - slider.settings.minSlides;
+						position = slider.children.eq(lastShowingIndex).position();
+					}
+					// horizontal carousel, going previous while on first slide (infiniteLoop mode)
+				}else if(slider.carousel && slider.active.last && direction == 'prev'){
+					// get the last child position
+					var eq = slider.settings.moveSlides == 1 ? slider.settings.maxSlides - getMoveBy() : ((getPagerQty() - 1) * getMoveBy()) - (slider.children.length - slider.settings.maxSlides);
+					var lastChild = el.children('.bx-clone').eq(eq);
+					position = lastChild.position();
+				// if infinite loop and "Next" is clicked on the last slide
+				}else if(direction == 'next' && slider.active.index == 0){
+					// get the last clone position
+					position = el.find('> .bx-clone').eq(slider.settings.maxSlides).position();
+					slider.active.last = false;
+				// normal non-zero requests
+				}else if(slideIndex >= 0){
+					var requestEl = slideIndex * getMoveBy();
+					position = slider.children.eq(requestEl).position();
+				}
+
+				/* If the position doesn't exist
+				 * (e.g. if you destroy the slider on a next click),
+				 * it doesn't throw an error.
+				 */
+				if ("undefined" !== typeof(position)) {
+					var value = slider.settings.mode == 'horizontal' ? -(position.left - moveBy) : -position.top;
+					// plugin values to be animated
+					setPositionProperty(value, 'slide', slider.settings.speed);
+				}
+			}
+		}
+
+		/**
+		 * Transitions to the next slide in the show
+		 */
+		el.goToNextSlide = function(){
+			// if infiniteLoop is false and last page is showing, disregard call
+			if (!slider.settings.infiniteLoop && slider.active.last) return;
+			var pagerIndex = parseInt(slider.active.index) + 1;
+			el.goToSlide(pagerIndex, 'next');
+		}
+
+		/**
+		 * Transitions to the prev slide in the show
+		 */
+		el.goToPrevSlide = function(){
+			// if infiniteLoop is false and last page is showing, disregard call
+			if (!slider.settings.infiniteLoop && slider.active.index == 0) return;
+			var pagerIndex = parseInt(slider.active.index) - 1;
+			el.goToSlide(pagerIndex, 'prev');
+		}
+
+		/**
+		 * Starts the auto show
+		 *
+		 * @param preventControlUpdate (boolean)
+		 *  - if true, auto controls state will not be updated
+		 */
+		el.startAuto = function(preventControlUpdate){
+			// if an interval already exists, disregard call
+			if(slider.interval) return;
+			// create an interval
+			slider.interval = setInterval(function(){
+				slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
+			}, slider.settings.pause);
+			// if auto controls are displayed and preventControlUpdate is not true
+			if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');
+		}
+
+		/**
+		 * Stops the auto show
+		 *
+		 * @param preventControlUpdate (boolean)
+		 *  - if true, auto controls state will not be updated
+		 */
+		el.stopAuto = function(preventControlUpdate){
+			// if no interval exists, disregard call
+			if(!slider.interval) return;
+			// clear the interval
+			clearInterval(slider.interval);
+			slider.interval = null;
+			// if auto controls are displayed and preventControlUpdate is not true
+			if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('start');
+		}
+
+		/**
+		 * Returns current slide index (zero-based)
+		 */
+		el.getCurrentSlide = function(){
+			return slider.active.index;
+		}
+
+		/**
+		 * Returns current slide element
+		 */
+		el.getCurrentSlideElement = function(){
+			return slider.children.eq(slider.active.index);
+		}
+
+		/**
+		 * Returns number of slides in show
+		 */
+		el.getSlideCount = function(){
+			return slider.children.length;
+		}
+
+		/**
+		 * Update all dynamic slider elements
+		 */
+		el.redrawSlider = function(){
+			// resize all children in ratio to new screen size
+			slider.children.add(el.find('.bx-clone')).width(getSlideWidth());
+			// adjust the height
+			slider.viewport.css('height', getViewportHeight());
+			// update the slide position
+			if(!slider.settings.ticker) setSlidePosition();
+			// if active.last was true before the screen resize, we want
+			// to keep it last no matter what screen size we end on
+			if (slider.active.last) slider.active.index = getPagerQty() - 1;
+			// if the active index (page) no longer exists due to the resize, simply set the index as last
+			if (slider.active.index >= getPagerQty()) slider.active.last = true;
+			// if a pager is being displayed and a custom pager is not being used, update it
+			if(slider.settings.pager && !slider.settings.pagerCustom){
+				populatePager();
+				updatePagerActive(slider.active.index);
+			}
+		}
+
+		/**
+		 * Destroy the current instance of the slider (revert everything back to original state)
+		 */
+		el.destroySlider = function(){
+			// don't do anything if slider has already been destroyed
+			if(!slider.initialized) return;
+			slider.initialized = false;
+			$('.bx-clone', this).remove();
+			slider.children.each(function() {
+				$(this).data("origStyle") != undefined ? $(this).attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
+			});
+			$(this).data("origStyle") != undefined ? this.attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
+			$(this).unwrap().unwrap();
+			if(slider.controls.el) slider.controls.el.remove();
+			if(slider.controls.next) slider.controls.next.remove();
+			if(slider.controls.prev) slider.controls.prev.remove();
+			if(slider.pagerEl && slider.settings.controls) slider.pagerEl.remove();
+			$('.bx-caption', this).remove();
+			if(slider.controls.autoEl) slider.controls.autoEl.remove();
+			clearInterval(slider.interval);
+			if(slider.settings.responsive) $(window).unbind('resize', resizeWindow);
+		}
+
+		/**
+		 * Reload the slider (revert all DOM changes, and re-initialize)
+		 */
+		el.reloadSlider = function(settings){
+			if (settings != undefined) options = settings;
+			el.destroySlider();
+			init();
+		}
+
+		init();
+
+		// returns the current jQuery object
+		return this;
+	}
+
+})(jQuery);

@@ -23,6 +23,10 @@ import SignApe from "ape/SignApe";
 import localConfig from "local/localConfig";
 import localConfig from "local/localConfig";
 import UIMagnifyApe from "ape/UIMagnifyApe";
 import UIMagnifyApe from "ape/UIMagnifyApe";
 import ErrorApe from 'ape/ErrorApe';
 import ErrorApe from 'ape/ErrorApe';
+import Slideshow from 'ape/Slideshow';//图片轮播
+import LoginOrRegister from 'ape/LoginOrRegister';//登录注册
+import LanclassApe from 'ape/LanclassApe';//互动课堂
+import HomeApe from 'ape/HomeApe';//首页
 
 
 let loger = Loger.getLoger('PCLive');
 let loger = Loger.getLoger('PCLive');
 
 
@@ -39,6 +43,9 @@ let _musicShareApe;
 
 
 let _answerApe;
 let _answerApe;
 let _signApe;
 let _signApe;
+let _loginOrRegister;
+let _lanclassApe;
+let _homeApe;
 
 
 class Main {
 class Main {
     constructor() {
     constructor() {
@@ -66,13 +73,11 @@ class Main {
         loger.log("urlParams", urlParams);
         loger.log("urlParams", urlParams);
         if (urlParams) {
         if (urlParams) {
             ClassDataProxy.classId = parseInt(urlParams.classId) || 0;
             ClassDataProxy.classId = parseInt(urlParams.classId) || 0;
-            //let userName = urlParams.userName || "user_" + (new Date().getTime() % 1000000);
+
           let userName = urlParams.userName || "";
           let userName = urlParams.userName || "";
             ClassDataProxy.userName = decodeURI(userName);
             ClassDataProxy.userName = decodeURI(userName);
             ClassDataProxy.userId = urlParams.userId || userName;
             ClassDataProxy.userId = urlParams.userId || userName;
-            /*if(!ClassDataProxy.userId||ClassDataProxy.userId=="0"){
-                ClassDataProxy.userId=userName;
-            }*/
+
             ClassDataProxy.userRole = urlParams.userRole || "normal";
             ClassDataProxy.userRole = urlParams.userRole || "normal";
             ClassDataProxy.isRecordPlayBack = Boolean(urlParams.playRecord);
             ClassDataProxy.isRecordPlayBack = Boolean(urlParams.playRecord);
             ClassDataProxy.autoLogin = urlParams.m || 0;
             ClassDataProxy.autoLogin = urlParams.m || 0;
@@ -123,50 +128,58 @@ class Main {
 
 
         //创建模块
         //创建模块
         //课堂模块
         //课堂模块
-        _classApe = new ClassApe();
-        _classApe.on(ClassApe.CLASS_STOP_MEDIA_PUBLISH, this._onClassStopMediaPublishHandler.bind(this));
+      //  _classApe = new ClassApe();
+       // _classApe.on(ClassApe.CLASS_STOP_MEDIA_PUBLISH, this._onClassStopMediaPublishHandler.bind(this));
 
 
         //答题卡模块
         //答题卡模块
-        _answerApe = new AnswerApe();
+      //  _answerApe = new AnswerApe();
         //签到模块
         //签到模块
-        _signApe = new SignApe();
+       // _signApe = new SignApe();
 
 
         //聊天模块
         //聊天模块
-        _chatApe = new ChatApe();
-        _chatApe.on(UserList.WINDOW_VIEW_CHANGE, this.onWindowViewChange.bind(this));//监听用户列表模块布局发生改变，文档模块的大小需要调整
+      //  _chatApe = new ChatApe();
+     //   _chatApe.on(UserList.WINDOW_VIEW_CHANGE, this.onWindowViewChange.bind(this));//监听用户列表模块布局发生改变，文档模块的大小需要调整
 
 
         //音频模块
         //音频模块
         //_audioApe = new AudioApe();
         //_audioApe = new AudioApe();
         //文档模块
         //文档模块
-        _docApe = new DocApe();
-        _docApe.on(DocApe.DOC_IMAGE_LOAD, this._docImageLoadHandler.bind(this));
-        _docApe.on(DocApe.SCENE_DOC_CHANGE, this._onSceneChangeHandler.bind(this));
+       // _docApe = new DocApe();
+      //  _docApe.on(DocApe.DOC_IMAGE_LOAD, this._docImageLoadHandler.bind(this));
+       // _docApe.on(DocApe.SCENE_DOC_CHANGE, this._onSceneChangeHandler.bind(this));
 
 
         //标注模块
         //标注模块
-        _whiteBoardApe = new WhiteBoardApe();
+       // _whiteBoardApe = new WhiteBoardApe();
         //激光笔模块
         //激光笔模块
-        _laserPen = new LaserPen();
+      //  _laserPen = new LaserPen();
         //录制回放模块
         //录制回放模块
-        _recordReplayApe = new RecordReplayApe();
-        _recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_PLAY, this._onRecordReplayPlayHandler.bind(this));
-        _recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_SEEK, this._onRecordReplaySeekHandler.bind(this));
-        _recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_PAUSE, this._onRecordReplayPauseHandler.bind(this));
-        _recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_STOP, this._onRecordReplayStopHandler.bind(this));
+        //_recordReplayApe = new RecordReplayApe();
+        //_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_PLAY, this._onRecordReplayPlayHandler.bind(this));
+        //_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_SEEK, this._onRecordReplaySeekHandler.bind(this));
+        //_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_PAUSE, this._onRecordReplayPauseHandler.bind(this));
+        //_recordReplayApe.on(RecordReplayApe.RECORD_REPLAY_STOP, this._onRecordReplayStopHandler.bind(this));
 
 
-        _screenShareApe = new ScreenShareApe();
-        _screenShareApe.on(ScreenShareApe.SCENE_SCREEN_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
+        //_screenShareApe = new ScreenShareApe();
+        //_screenShareApe.on(ScreenShareApe.SCENE_SCREEN_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
 
 
-         _mediaShareApe = new MediaShareApe();
-         _mediaShareApe.on(MediaShareApe.SCENE_MEDIA_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
+        // _mediaShareApe = new MediaShareApe();
+        // _mediaShareApe.on(MediaShareApe.SCENE_MEDIA_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
 
 
         // _musicShareApe = new MusicShareApe();
         // _musicShareApe = new MusicShareApe();
         // _musicShareApe.on(MusicShareApe.SCENE_MUSIC_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
         // _musicShareApe.on(MusicShareApe.SCENE_MUSIC_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
-        _musicShareApe = new MusicShareApeTwo();
-        _musicShareApe.on(MusicShareApeTwo.SCENE_MUSIC_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
-        //视频模块
-        _mediaManagerApe = new MediaManagerApe();
-        _mediaManagerApe.on(MediaManagerApe.FLASH_LOADED, this._onFlashLoaded.bind(this));
+       // _musicShareApe = new MusicShareApeTwo();
+       // _musicShareApe.on(MusicShareApeTwo.SCENE_MUSIC_SHARE_CHANGE, this._onSceneChangeHandler.bind(this));
+        ///视频模块
+      //  _mediaManagerApe = new MediaManagerApe();
+      //  _mediaManagerApe.on(MediaManagerApe.FLASH_LOADED, this._onFlashLoaded.bind(this));
         //_mediaManagerApe.startLoadFlashTools();
         //_mediaManagerApe.startLoadFlashTools();
+
+        //登录注册
+        _loginOrRegister = new LoginOrRegister();
+        //互动课堂
+        _lanclassApe = new LanclassApe();
+        //首页
+        _homeApe = new HomeApe();
+
         this._onFlashLoaded();
         this._onFlashLoaded();
     }
     }