@charset "utf-8";
html,body
{
    height:100%;
}
/*设置侧滑菜单的宽度*/

.mui-off-canvas-left, .mui-off-canvas-right {
	width: 80% !important;
	z-index:200 !important;
}

.mui-off-canvas-wrap.mui-right .mui-inner-wrap {
	-webkit-transform: translate3d(80%, 0, 0) !important;
	transform: translate3d(80%, 0, 0) !important;
}

.headbar {
	background-color: transparent !important;
	webkit-box-shadow: 0 0px 0px #ccc !important;
	box-shadow: 0 0px 0px #ccc !important;
}

.back {
	display: block;
	position: absolute;
	z-index: 101;
}

#videoplayer, #videoinfo, #novideoplayer {
	background-color: #000;
	color: #999;
	line-height: 100px;
	text-align: center;
}

video::-internal-media-controls-download-button {
	display: none !important;
}

video::-webkit-media-controls-enclosure {
	overflow: hidden !important;
}
video::-webkit-media-controls {
    overflow: hidden !important;
}
video::-webkit-media-controls-panel {
	--width: calc(100% + 30px) !important;
	margin-left: auto;
}

/*返回首页*/

.home {
	display: block;
	position: absolute;
	left: 20px;
	top: 2px;
	color: #555;
	z-index: 200;
}

.home:before {
	content: "\e678";
	font-family: iconfont;
	margin-right: 5px;
	font-size: 20px;
}

.video-box {
	background-color: #333;
	width: 100%;
	height: 300px;
	color: #CCC;
	position: relative;
}

.video {
	background-color: transparent !important;
	webkit-box-shadow: 0 1px 2px #ccc !important;
	box-shadow: 0 0px 0px #ccc !important;
	padding: 0px !important;
	min-height: 260px;
}

div {}

.videobox {
	width: 100%;
	height: calc(100vw*9/16);
	height: -webkit-calc(100vw*9/16);
	height: -moz-calc(100vw*9/16);
	position: absolute;
	top: 0px;
	z-index: 100;
}

.intro-box {}

#playerInfo {
	height: 20px;
	line-height: 20px;
	--background-color: #FFF;
	--webkit-box-shadow: 0 1px 6px #ccc;
	--box-shadow: 0 1px 6px #ccc;
	position: absolute;
	top: 2px;
	right: 0px;
	z-index: 100;
}

#playerInfo, #playerInfo * {
	font-size: 8px;
}

#playerInfo .time {
	color: #999;
	font-size: 8px;
	margin-right: 5px;
}

#playerInfo .time * {
	font-size: 10px;
}

/*上次观看播放进度*/

.historyInfo {
	display: block;
	bottom: 40px;
	left: 20px;
	position: absolute;
	z-index: 200;
	font-size: 10px;
}

/*学习记录递交成功的提示*/

.StudentStudyLog {
	display: block;
	bottom: 40px;
	right: 20px;
	position: absolute;
	z-index: 200;
	font-size: 10px;
}

.error {
	color: red;
}

#videoIframe {
	width: 100% !important;
}

.noVideo {
	text-align: center;
	line-height: 260px;
	font-size: 17px;
	color: #ccc;
}
/*直播加载时*/
#liveLoadingbox {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 110;
	width: 100%;
	padding: 10px;	
	max-height: 60px;
	font-size: 16px;
	color: #333;
	background-color: rgb(182, 179, 179,0.8);
}
#liveLoadingbox button{
	float: right;
}
/*直播，没有直播时*/

#liveStopbox {
	position: relative;
	width: 100%;
	height: 100%;
}

#liveStopbox .liveStop_Tit, .noSelect {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 180px;
	color: #333;
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	top: 0px;
	text-shadow: 1px 1px #eee;
	cursor: default;
}

/*背景图，带渐变效果*/

.bgPicture {
	opacity: 0.4;
	animation: 2s opacity2;
}

/*章节名称*/

.outline-name {
	background-color: #FFF;
	webkit-box-shadow: 0 1px 6px #ccc;
	box-shadow: 0 1px 6px #ccc;
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding-left: 20px;
	padding-right: 80px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 15px;
	position: relative;
}

.outline-name:before {
	content: "\e681";
	font-family: iconfont;
	margin-right: 5px;
	font-size: 18px;
	font-weight: normal;
}

.outline-name #msginputBtn {
	background-color: #fff;
	position: absolute;
	width: 60px;
	height: 30px;
	line-height: 30px;
	text-indent: 5px;
	padding: 0px;
	top: 5px;
	right: 10px;
	border-radius: 15px;
	border: 1px solid #999;
}

/*咨询留言*/

#chatArea.mui-card {
	height: calc(100vh - 100vw*9/16 - 105px);
	height: -webkit-calc(100vh - 100vw*9/16 - 105px);
	width: calc(100% - 20px);
}

.chatlist {
	max-height: calc(100% - 30px);
	bottom: 30px;
	width: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/*没有留言*/

.nomsg {
	padding: 20px;
}

.chatlist dl, .chatlist dd {
	margin: 0px;
}

.chatlist dd {
	width: auto;
	display: table;
	min-width: 30%;
	line-height: 20px;
	position: relative;
}

.chatlist dd>div {
	text-align: left;
	padding: 5px;
	padding-right: 10px;
	color: #333;
	border-radius: 10px;
	margin: 10px;
	line-height: 20px;
	box-shadow: 1px 1px 2px #eee;
}

.chatlist dd acc {
	display: block;
	position: relative;
}

.chatlist dd del {
	display: block;
	position: absolute;
	right: -8px;
	top: 0px;
	color: red;
	font-size: 14px;
	text-decoration-line: none;
	cursor: pointer;
	display: none;
}

.chatlist dd msg {
	display: block;
}

.chatlist dd date {
	display: block;
	text-align: left;
	padding-left: 16px;
	height: 18px;
	line-height: 18px;
	margin-top: -8px;
	color: #444;
	font-size: 10px;
}

.chatlist dd i {
	padding-right: 5px;
	font-size: 16px;
}

/*留言输入区域*/

#chatbox {
	width: 100%;
	height: 44px;
	position: absolute;
	bottom: 0px;
}

#chatbox .switch {
	background-color: #fff;
	height: 24px;
	line-height: 24px;
	width: 35px;
	margin-top: 8px;
	margin-left: 8px;
	font-size: 8px;
	border-radius: 12px;
	position: relative;
	cursor: pointer;
	float: left;
	transition: text-align .6s;
}

#chatbox .switch:before {
	content: "弹";
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 10px;
	margin: 2px 0px 2px 0px;
	margin-right: 5px;
	font-size: 8px;
	position: absolute;
	z-index: 2;
	color: #fff;
	left: 2px;
	background-color: #333;
	transition: left .6s;
}

#chatbox .switch:after {
	content: " ";
	width: 31px;
	height: 20px;
	border-radius: 10px;
	position: absolute;
	z-index: 1;
	left: 2px;
	margin: 2px 0px 2px 0px;
	background-color: #999;
	transition: background-color .6s;
}

#chatbox .switch-on {
	background-color: #FFFF99;
}

#chatbox .switch-on:before {
	left: 12px;
	background-color: #360;
}

#chatbox .switch-on:after {
	background-color: #6F6;
}

#chatbox .msgbox {
	float: left;
	background-color: #fff;
	width: calc(100% - 20px);
	height: 24px;
	line-height: 24px;
	border-radius: 6px;
}

#chatbox textarea {
	float: left;
	width: calc(75% - 2px);
	height: 44px;
	line-height: 22px;
	margin: 0px 0px 0px 2px;
	border-radius: 10px 0px 0px 10px;
}

#chatbox #btnMessage {
	float: left;
	background-color: #999;
	width: 25%;
	height: 44px;
	line-height: 44px;
	margin: 0px !important;
	padding: 0px !important;
	border-radius: 0px 10px 10px 0px;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
}

#chatbox #btnMessage:hover {
	background-color: #F93;
}

/*学习内容与附件的区域*/

#context-box {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#context-box>div[tag] {
	width: 100%;
	height: calc(100vh - 100vw*9/16);
	height: -webkit-calc(100vh - 100vw*9/16);
	height: -moz-calc(100vh - 100vw*9/16);

	margin-top: calc(100vw*9/16);
	margin-top: -webkit-calc(100vw*9/16);
	margin-top: -moz-calc(100% * 9/16);
}

.mui-card {
	height: calc(100% - 60px);
	width: calc(100% - 20px);
}

.mui-card-content {
	overflow: auto !important;
	height: calc(100% - 4px);
}

.mui-card-content {}

#details {
	width: 100%;
	padding: 20px;
}

#details p, #details * {
	font-size: 15px !important;
	line-height: 1.6em;
	background-color: transparent !important;
	color: #666 !important;
	padding: 0px !important;
}

#details p {
	margin-buttom: 20px !important;
}

#details a {
	color: #09F !important;
}

#details img {
	max-width: 100% !important;
}

#details .nointro {
	font-size: 16px;
	line-height: 30px;
	color: #666;
	padding: 20px;
}

video::-internal-media-controls-download-button {
	display: none;
}

video::-webkit-media-controls-enclosure {
	overflow: hidden;
}

video::-webkit-media-controls-panel {
	width: calc(100% + 30px);
}

.mui-table-view {
	margin: 10px;
}

/*附件*/

#access {
	margin: 10px;
	padding-left: 20px;
	padding-right: 20px;
}

#access dd {
	margin: 0px;
	line-height: 35px;
}

.noaccess {
	font-size: 16px;
	line-height: 30px;
	color: #666;
	padding: 20px;
}

/*没有购买课程*/

#noStudy {
	text-align: center;
	margin-top: 30px;
	margin: 10px;
	margin-top: 50px;
	height: auto;
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	background-color: white;
	background-clip: padding-box;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	padding: 10px;
	height: 140px;
	line-height: 100px;
}

/*+++++底部图标*/

.footer span {
	height: 15px !important;
	display: block;
	width: 100%;
}

.footer b {
	height: 20px !important;
	display: block;
	width: 100% !important;
}

.footer b:before {
	display: block;
}

.footer a.foot-outline b:before {
	content: "\e79c";
	font-size: 16px;
}

.footer a.foot-video b:before {
	content: "\e615";
}

.footer a.foot-message b:before {
	content: "\e75a";
}

.footer a.foot-text b:before {
	content: "\e65e";
	font-size: 23px;
	margin-top: 1px;
}

.footer a.foot-acc b:before {
	content: "\e651";
}

.footer a.foot-course b:before {
	content: "\e60b";
}

.footer a.foot-home b:before {
	font-size: 22px;
}

/*-----底部图标*/

/*+++++++左侧侧滑菜单*/

.study-menu .cour-info {
	margin: 10px;
	display: table;
	width: 100%;
}

.study-menu .cour-info img {
	width: 30%;
	margin-right: 5%;
	float: left;
	box-shadow: 0 1px 2px #fff !important;
}

.study-menu .cour-info .cour-info-right {
	width: 60%;
	margin-right: 5%;
	float: left;
}

.cour-info-right cour-name {
	display: block;
	line-height: 22px;
	color: #eee;
}

.cour-info-right cour-name:before {
	content: "\e60b";
	font-size: 15px;
	font-family: iconfont;
	margin-right: 8px;
}

.cour-info-right sbj-name {
	display: block;
	line-height: 22px;
	color: #999;
	font-size: 10px;
}

.cour-info-right sbj-name:before {
	content: "\e675";
	font-size: 10px;
	margin-right: 5px;
	font-family: iconfont;
}

/*侧滑菜单的章节列表*/

.study-menu .outline {
	padding-right: 40px !important;
}

.study-menu .outline a:before {
	content: "\e681";
	font-family: iconfont;
	margin-right: 5px;
	font-size: 15px;
	font-weight: normal;
}

/*视频章节的图标*/

.study-menu li[isvideo=True] a:before {
	content: "\e66c";
	font-family: iconfont;
	margin-right: 5px;
	font-size: 16px;
	font-weight: normal;
}

/*直播章节的图标*/

.study-menu li[islive=True] a:before {
	content: "";
	background-image: url(../Images/live-icon.gif);
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
	display: inline-block;
}

/*当前章节*/

.study-menu .current {
	color: #FF9;
}

.study-menu .current a:before {
	content: "\e618";
	font-family: iconfont;
	margin-right: 5px;
	font-size: 14px;
	font-weight: normal;
}

.study-menu .mui-badge {
	color: #999;
	background-color: #555;
}

.study-menu .noselect {
	color: #666 !important;
}

.try {
	color: #eee !important;
}

.buy {
	background-color: rgba(102, 102, 102, 0.15);
	color: #FC0 !important;
}

/*-------左侧侧滑菜单*/

/*学习内容*/

.mui-card {
	float: left;
}

.mui-card-header {
	font-size: 15px;
}

.intro-box .mui-card-header span:before {
	content: "\e65e";
	font-family: iconfont;
	margin-right: 5px;
	font-size: 18px;
	margin-top: 2px;
	display: block;
	float: left;
}

/*附件*/

.acc-box .mui-card-header span:before {
	content: "\e651";
	font-family: iconfont;
	margin-right: 5px;
	font-size: 16px;
}