body{ font: 12px/1.5 arial,Helvetica Neue,tahoma,"Hiragino Sans GB",Microsoft YaHei,\5b8b\4f53; font-size: 14px;  background: #282828;}
img { border: 0; vertical-align: top; }
ul ,ol ,dd { margin: 0; padding: 0 }
li ,ol ,dd{ list-style: none; list-style-type: none }
a { font-size: 14px; blr:expression(this.onFocus=this.blur());
color: #333333; text-decoration: none; }
a:hover { color: #FF9900; text-decoration: none; }
a:visited,a:focus { text-decoration: none;}
a, input { font-size: 14px; outline: none; -moz-transition-property: box-shadow, color; -webkit-transition: color .2s linear, background-color .3s linear, border-color .3s linear; -moz-transition: color .2s linear, background-color .3s linear, border-color .3s linear; -o-transition: color .2s linear, background-color .3s linear, border-color .3s linear; -ms-transition: color .2s linear, background-color .3s linear, border-color .3s linear; transition: color .2s linear, background-color .3s linear, border-color .3s linear }
td img, td input, td textarea, td checkbox { vertical-align: middle; outline: none; }
input, textarea { font-family: "微软雅黑", Tahoma, sans-serif; outline: none; }
textarea { margin-left: 2px; margin-left: 0px\9; }
.form-control{-webkit-box-shadow:none;  box-shadow:none; }
.form-control:focus{box-shadow: none;}
.btn:active,.btn:focus{outline: none!important; box-shadow: none!important}
h6{ font-size: 16px; line-height: 21px}
.navbar_cus{  min-height: 60px; border: 0px solid transparent;}
.touping_main{ background: url(../images/main_bg.png); background-size: 100%;}
.logo{ width: 14.5%; margin: 6%}
.logo img{ width: 100%}
.touping_tit_1{ text-align: center; font-size: 40px; color: #fff; line-height: 1.6em; margin-top: 10%; margin-bottom: 50px;}
.input_st_1 { width: 120px; height: 120px; margin: 0 auto; border-radius: 15px; font-size: 70px; color: #000; text-align: center; font-weight: bold; background: #fff; display: block; line-height: 120px; }
.input_st_2 {border: 2px solid #5a9bdc;
    -webkit-box-shadow: 0 0 20px 6px #5a9bdc;
    box-shadow: 0 0 20px 6px #5a9bdc;}
.fullscreen{ width: auto; background: #000; padding: 15px; position: fixed; bottom: 100px; border-radius: 50px;transform: translateX(-35px);}
.fullscreen_2{ width: 200px; transform: translateX(-158px);}
.fullscreen .fullscreen_1 { width: auto; display: inline-block; margin-left: 20px;}
.fullscreen .fullscreen_1 a{ font-size: 20px; color: #999}
.fullscreen_3{ display: none;}
.fullscreen:hover .fullscreen_3{display: block; float: left}
.touping_tit_2{ text-align: center; font-size: 55px; color: #fff; line-height: 1.6em; margin-top: 12%; margin-bottom: 50px;}
.touping_tit_3{ text-align: center; font-size: 40px; color: #fff; line-height: 1.6em;  margin-bottom: 50px;}
.success_1{ width: 50%; display: block; margin: 0 auto; background: #49505F; border-radius: 8px; padding: 2%; font-size: 31px; color: #b1b9ca; text-align: center}
.touping_navbar{ font-size: 30px; color: #fff; padding-left: 30px; height: 90px; line-height: 90px; background: rgba(0,0,0,0.8)}

.player_slider{ width: 98%; display: block; float: left; text-align: center; position: absolute; bottom: 100px;}
.player_slider_1,.player_slider_2{ width: auto; display: inline-block; font-size: 0.7em}
.player_slider_2 .slider-track { height: 6px!important; margin-top: -6px!important}
.player_slider_2 .slider-horizontal { min-width: 430px; margin-left: 10px; margin-right: 5px;}
.player_slider_2 .slider-handle.round { position: absolute; width: 10px; height: 10px; top: 1px;  border: 1px solid #fff; background: #5D9CEC; cursor: pointer;}
.player_slider_2 .slider-handle { display: none;}
.player_slider_1{ font-size: 16px; font-weight: bold; color: #fff;}
.touping_audio,.touping_video{ display: flex; align-items: center; height: 100vh;}
.touping_video{ padding-left: 0; padding-right: 0}
.touping_audio_1 { margin: 0 auto; position: relative}
.touping_audio_1 img{ 
	-webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 6s linear infinite;
    -moz-animation: rotate 6s linear infinite;
    -o-animation: rotate 6s linear infinite;
    animation: rotate 6s linear infinite; }


@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}

@keyframes blink{
            0%{opacity: 1;}
            50%{opacity: 0.5;}
            100%{opacity: 0.8;}
          }
          @-webkit-keyframes blink {
            0% { opacity: 1; }
            50%{ opacity: 0.5;}
            100% { opacity: 0.8; }
          }
          @-moz-keyframes blink {
            0% { opacity: 1; }
            50%{ opacity: 0.5; }
            100% { opacity: 0.8; }
          }
          @-ms-keyframes blink {
            0% { opacity: 1; }
            50%{ opacity: 0.5; }
            100% { opacity: 0.8;}
          }
          @-o-keyframes blink {
            0% { opacity: 1; }
            50%{ opacity: 0.5; }
            100% { opacity: 0.8; }
          }

.touping_audio_2{ position: absolute; left: 34%; top: 23%; display: block; font-size: 12em; color: #fff; margin: 0 auto; z-index: 9999}
.touping_video_1{ width: 100%}
.touping_video{ position: relative}
.touping_video_1{ position: absolute; top: 0; left: 0;}
.touping_video_1 img{ width: 100%}
.touping_video_2 { display: flex;align-items: center; height: 100vh; font-size: 12em; color: #fff; text-align: center; margin: 0 auto;z-index: 9999}
.touping_text_1{ width: 97%; display: block; margin: 0 auto; padding: 40px; font-size: 30px; background: #282828; padding-top: 40px; color: #fff}
.touping_text_2{width: 90%; display: block; margin: 0 auto; padding: 40px; font-size: 30px; padding-top: 130px;}
.touping_text_3{  width: 97%; display: block; margin: 0 auto; padding: 40px; font-size: 30px; background: #fff; padding-top: 40px; color: #333}
.touping_hd{ display: flex; }
.touping_hd h1{ color:#b1b9ca; margin-bottom: 100px;}
.touping_hd .interaction_4 h4 {color:#b1b9ca; line-height: 2em}
.touping_hd .interaction_4 h4 span{ font-size: 46px; color: #fff}
.touping_hd_1{ position: relative; padding: 0}
.touping_hd_1 .interaction_1 { position:absolute; top: 40px; margin: 0 auto; width: 100%; height: 256px;}

.interaction_1_1{ font-size: 20px; color: #999}
.interaction_1_1 span{ font-size: 57px; font-weight: bold; color: #00EAE8; }
.interaction_1_2{ font-size: 30px; color: #999; margin-top: 10px;}
.interaction_1_3{ font-size: 28px; margin-top: 25px; color: #fff}
.touping_hd_1 img{ 
	-webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite; }

.interaction_3{ margin-bottom: 30px;}
.interaction_3 h4{ margin-top: 30px; border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 15px; }
.interaction_3 h4 span{ color: #000; font-size: 14px;}

.interaction_3 h5 { font-size: 18px; padding-top: 15px; padding-bottom: 15px; margin-left: 20px;}
.interaction_3 h5 div{ margin-top: -10px;}



.interaction{ position: relative; margin-top: 65px;}
.interaction_1{ position: absolute; top: 55px; width: 95%;}
.interaction_1_1{ font-size: 20px; color: #999}
.interaction_1_1 span{ font-size: 57px; font-weight: bold; color: #00b2b0;}
.interaction_1_2{ font-size: 30px; color: #999; margin-top: 10px;}
.interaction_1_3{ font-size: 22px; margin-top: 25px;}
.interaction_2{ background:url(../images/teasingin.jpg) no-repeat center top; position: relative; height: 400px; margin-top: 30px;}
.interaction_2 img{ position: absolute; left: 29%; top: 40px; max-width: 230px;}
.interaction_4{ height: 400px; margin-top: 80px;}
.interaction_4 h4{ line-height: 25px;}
.interaction_4 img{ left: 29%; top: 40px; max-width: 230px;}
.interaction_3{ margin-bottom: 30px;}
.interaction_3 h4{ margin-top: 30px; border-bottom: 1px solid #ddd; padding-bottom: 15px; margin-bottom: 15px; color: #fff }
.interaction_3 h4 span{ color: #999; font-size: 14px;}
.trf{ width: 100%; display: inline-block; font-size: 12px; color: #fff}
.trf ul{ width: auto; display:block; float: left}
.trf ul:first-child{ width: 12%; text-align: right; padding-right: 10px;}
.trf ul:last-child{ width: 12%; padding-left: 10px;}
.trf .trf_1{ width: 76%}
.trf .trf_1 li{width: 100%; display: inline-block; float: left; height: 20px; background: #00b2b0; }
.trf .trf_1 li:last-child{background: #f65; text-align: right}
.interaction_3 h5 { font-size: 18px; padding-top: 15px; padding-bottom: 15px; margin-left: 20px; color: #fff}
.interaction_3 h5 div{ margin-top: -10px;}

.qiandao_1{ width: 100%; display:flex; flex-wrap: wrap}
.qiandao_1_1{ width: 80px; height: 150px; display: block; overflow: hidden; position: relative; margin-right: 40px; margin-left: 10px;}
.qiandao_1_2{ border: 3px solid #fff; border-radius: 100px; width: 80px; height: 80px; background: url(../images/usericon.png); background-size: cover}
.qiandao_1_2 img{ width: 100%; height: 74px;  object-fit: cover; border-radius: 100px;}
.qiandao_1_3{ position: absolute; top: 57px; background: #C22F30;  width: 80%; margin-left: 10%; font-size: 16px; text-align:center; color: #fff; }
.qiandao_1_4{ color: #fff; padding-top: 5px; white-space: nowrap; }
.qiandao_1_5{ width: 80px; height: 80px; background: #000; position: absolute; border-radius: 80px; background-color:rgba(0,0,0,0.4);}
.qiandao_2_1{ background: #000; padding: 15px; color: #fff}
.qiandao_2_1 .pull-right{ color: #ccc; font-size: 16px; padding-top: 5px;}
.qiandao_2_1 span:first-child{ width: auto; position: absolute; left: 43%; font-size: 30px; margin-top: -8px;}
.qiandao_2_1 span:last-child{  font-size: 35px; margin-top: -10px;}
.qiandao_2_2{ font-size: 32px; color: #fff; padding-top: 20px; padding-bottom: 15px; }
.qiandao_2{ background: #252525; padding:1px 30px 30px 30px;}
.touping_qd{ width: 100%; padding-left: 20px; padding-right: 20px}
.qiandao_5{ display: flex}
.qiandao_3{ width: 320px; margin-right: 30px;}
.qiandao_3_1{ color: #fff; font-size: 18px;}
.qiandao_3_1 span{ background: #00b2b0; width: 30px; height: 30px; display: inline-block; font-weight: bold; text-align: center; border-radius: 20px;  line-height: 30px; margin-right: 15px;}
.qiandao_3 img{ width: 100%; max-width: 500px; margin-bottom: 20px;}
.qiandao_4{ flex: 1}
.qiandao_2_1 .fa-dot-circle-o{        
    color: #7FF73E;
    animation: blink 2s linear infinite;
    -webkit-animation: blink 2s linear infinite;
    -moz-animation: blink 2s linear infinite;
    -ms-animation: blink 2s linear infinite;
    -o-animation: blink 2s linear infinite;
  }
.code_error { text-align: center; padding-bottom: 20px; color: #FF0004; height: 53px;}
.task_n_1 { text-align: center; width: 120px; height: 120px; line-height: 120px; border-radius: 50%; background: #FF5050; color: #fff; font-size: 46px; margin: 0 auto}
.task_n { position: relative;}
.task_n_1 span{ font-size: 18px; }
.task_n_3{ text-align: center; padding-top: 10px; font-size: 24px;}
.touping_text_1 .task_n:nth-child(2) .task_n_1{ background: #89CC80}
.touping_text_1 .task_n:nth-child(3) .task_n_1{ background: #3B9BD8}
.touping_text_1 .task_n:nth-child(4) .task_n_1{ background: #F8A849}
.touping_text_1 .task_n:nth-child(5) .task_n_1{ background: #1CB8B8}
.touping_text_1 .task_n:nth-child(6) .task_n_1{ background: #8F82BA}

.tab_custom_4{ margin-top: 60px; font-size: 24px; border-bottom: 5px solid #282828; margin-bottom: 100px;}
.tab_custom_4 thead{ background: #393939}
.tab_custom_4 thead tr th{ border-bottom: 2px solid #282828!important;}
.tab_custom_4 td,.tab_custom_4 th { padding-top: 20px!important; padding-bottom: 20px!important;border-top: 1px solid #282828!important;}
.tuoping_task > div { margin-top: 15px;}
.task_pic_1{ display: flex; flex-wrap: wrap}
.task_pic_1 li{ width: 150px; display: block; margin-right: 30px; margin-bottom: 30px;}
.task_pic_1 li img{ width: 150px; height: 150px; object-fit: cover}
.tuoping_task_1{ width: 100%; display:flex; border-bottom: 1px solid #555; padding-bottom: 15px;}
.tuoping_task_1 a{ font-size: 30px; color: #fff}
.task_audio li{border-bottom: 1px solid #555; padding-bottom: 15px;}
.task_audio li:last-child{ border-bottom: none}
.task_audio a{ font-size: 30px; color: #fff}

.task_video{ display: flex; flex-wrap: wrap}
.task_video li{ width: 200px; display: block; margin-right: 30px; margin-bottom: 30px;}
.task_video li img{ width: 200px; height: 112px; object-fit: cover}
.task_video p{ width: 100%; display: block}

.touping_pic{position:relative; width: 100%; height: 100vh;}
.touping_pic_1{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);}

.touping_pic_1 img{ max-height: 100vh; width: 98.5%; object-fit: scale-down}
.unfinished span{ color: #fff; border-radius: 15px; background: #FF5050; padding: 7px 15px; font-size: 18px}
.task_file_1 { background: #8291E4; border-radius: 8px;  width: 150px; height: 150px; overflow: hidden; display: block}
.task_file_1 .fa { width: 100%; height: 67px; margin-top: 45px; display: block; text-align: center; font-size: 50px; color: #fff}
.touping_text_1 .task_file_1{ font-size: 15px; line-height: 18px;  padding-left: 10px; padding-right: 10px; height: 150px; overflow: hidden; color: #C6D1FF}
.play img{ animation-play-state: running !important;  }
.pause img{animation-play-state: paused !important;}


/* Anne修改内容 start */
video{display: block;}
#container_url,#container_text{overflow-y:auto;}
/* 课堂互动 start */
.interaction-wrap .touping_text_2{padding-top: 40px; position:absolute; top:50%;-webkit-transform:translate(0%,-50%);-moz-transform:translate(0%,-50%);-o-transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);transform:translate(0%,-50%);}
.interaction-wrap .interaction_4{margin-top: 0;}
.interaction-wrap .interaction{margin-top: 0;}
/* 课堂互动 end */

/* 签到进行中 start */
.qiandao-wrap .qiandao_3{position: fixed; margin-right: 0;}
.qiandao-wrap .qiandao_4{margin-left: 350px;}
/* 签到进行中 end */

/* 首页软键盘 start */
.index-keyboard-box{margin-top: 39px;}
.keyboard-isshow-btn{display: block; width: 116px; height: 24px; margin: 0 auto; border: none; }
.keyboard-isshow-btn.collapsed{background: url(../images/keyboard_show.png); background-size: 100% 100%;}
.keyboard-isshow-btn.collapsed:hover,
.keyboard-isshow-btn.collapsed:focus,
.keyboard-isshow-btn.collapsed.focus,
.keyboard-isshow-btn.collapsed:active,
.keyboard-isshow-btn.collapsed.active{border: none;background: url(../images/keyboard_show.png); background-size: 100% 100%;}

.keyboard-isshow-btn{background: url(../images/keyboard_hide.png); background-size: 100% 100%;}
.keyboard-isshow-btn:hover,
.keyboard-isshow-btn:focus,
.keyboard-isshow-btn.focus,
.keyboard-isshow-btn:active,
.keyboard-isshow-btn.active{border: none;background: url(../images/keyboard_hide.png); background-size: 100% 100%;}

.index-keyboard-box .well{padding: 0; margin: 0; background: none; border: none; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; }
.index-keyboard-box ul{width: 702px; height: 53px; margin: 22.1px auto 0;}
.index-keyboard-box ul:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.index-keyboard-box ul li{float: left; width: 53px; height: 53px; line-height: 53px; margin-right: 10px; font-size: 24px; text-align: center; text-shadow:1px 0px 0px rgba(0,0,0,0.11); background: url(../images/keyboard_bg.png); background-size: 100% 100%; cursor: pointer;}
.index-keyboard-box ul li:last-child{width: 72px; margin-right: 0; background: url(../images/keyboard_delet.png); background-size: 100% 100%;}
/* 首页软键盘 end */

/* 左下角退出投屏、全屏两个功能按钮不再显示 start */
.fullscreen{display: none;}
/* 左下角退出投屏、全屏两个功能按钮不再显示 end */
/* Anne修改内容 end */