@charset "utf-8";
/* CSS Document */

*{padding:0px;margin:0px;font-family:"微软雅黑";}

a{text-decoration:none;}

img{border:none;}

ul li{list-style:none;}

.speak-title,.main{width:1100px; margin:0 auto;}

.top-title .title1,.top-content{ margin-left:10px;}
	
/*言语语言头部导航*/	
.speak{height:70px;line-height:70px; border:1px solid #e5e5e5;}

.speak-title{color:#808080;}

.speak-title img{padding:10px;vertical-align:middle;}

.speak-title a{color:#237ae4;}

.speak-title ul li{position:relative;float:left;margin:0 5px;}

.speak-title ul li ul{position:absolute;top:60px;height:250px;list-style:none; text-align:left; display:none;text-align:center;margin-left:-8px;}

.speak-title ul li ul li{background:#FFF; width:100px;line-height:40px;border:1px solid #e6e6e6;}

.speak-title ul li ul li a{color:#333;}

.speak-title ul li ul li a:hover{color:#237ae4;}

.speak-title ul li:hover ul{display:block;}

/*主体部分*/

.main{ margin-top:10px;}

/*上部 视频部分*/

/*导航*/
.top-title{line-height:30px;height:30px; width:900px; }

.top-title .title1{font-size:24px;color:#4c4c4c; float:left;}

.top-title .title2,.title3{ cursor:pointer;}

.top-title ul{ margin-left:10px;}

.top-title ul li{float:left;font-size:20px; width:80px; height:30px; line-height:30px; }

.top-title ul li img{vertical-align:middle;padding:5px 10px; display: inline-block; margin-top: -4px;}

.title2{color:#237ae4;}

.title3{color:#808080; margin-left:15px;}

.title2 span:hover{color:#237ae4 ;}

.title3 span:hover{color:#237ae4 ;}

/*视频介绍*/

.top-content,.content-left,.content-right{height:450px;}

.top-content{ width:1070px; margin-top:20px;}
/*左边 视频*/
.top-content .content-left{float:left; width:800px; background-color:#000; }

.top-content .content-left img{ padding:55px 100px;}


/*右边 课程目录导航*/
.content-right{float:left; width:270px;color:#fff;background:#393939; overflow:auto; height:450px;  }

.right-title,.title4,.head-name{ padding-left:10px;}

.right-title{ font-size:20px;  padding-top:40px;}

.title4,.videolist{font-size:14px;}

.title4{margin-top:25px; padding-bottom:10px; color:rgba(255,255,255,0.3)}

.videolist { width:250px;background:#393939; }

.videolist ul{ background:#393939; margin-top:-10px;}

.videolist ul li { margin-top:10px; height:50px;position: relative;
}

.videolist ul li a{ color:rgba(255,255,255,0.5); display:block;height:50px; background-color:rgba(0,0,0 ,0.1);}

#change-video1{ color:#fff;}

.selected {background-color:rgba(35,122,228,0.5) !important; border-left:2px solid #237ae4;}

.videolist ul li a .head-name{ padding-top:5px;}

.videolist ul li a .play-icon{ margin-left:170px;   position: absolute;
    bottom: 3px;}

.videolist ul li a:hover{ color:#ccc !important;}

/*滚动条*/
.content-right .scroll_container {overflow: hidden;position: relative;background:#393939;  }

.content-right .scroll_absolute {position: absolute;}

.content-right .scroll_vertical_bar { position: absolute; top: 0; right: 0;width: 17px; height: 100%;background:#000;margin: 0; padding: 2px;}

.content-right .scroll_track {position: relative;background-color: #000;}

.content-right .scroll_drag {position: relative;top: -10px;left: 0;background-color: rgba(255,255,255,0.2); height:10px;}

.content-right .scroll_arrow {text-indent: -20000px;display: block;background-color: #000;}

.content-right .scroll_vertical_bar .scroll_arrow {height: 16px;}
/*滚动条end*/


/*下部 课程 评论 讲师*/
.main-bottom{ margin-top:23px; width:1080px; margin-bottom:150px;}

/*左边*/
.bottom-left{float:left; width:750px;}

.bottom-nav,.teacher,.list-title{font-size:18px;}

.bottom-nav ul li{float:left; list-style:none; padding:12px; color:#4c4c4c;}

.nav1{color:#237ae4; cursor:pointer;}

.nav2{margin-left:40px;cursor:pointer;}

/*分割线*/
.line,.line-1, .line-2, .line-3{ border-bottom:1px solid #e5e5e5; margin-top:15px;}

#short-line{ width:110px; border:1px solid #237ae4; margin-left:0px; margin-top:-2px;}

/*课程简介*/
.brief-course,.teacher,.img1,.information{color:#4c4c4c;}

.brief-course{ margin-top:30px; font-size:14px; padding-left:12px;}

.brief-course p{ line-height: 25px;}

.course-list{ margin-top:70px; }

.course-list .list-title{ color:#4c4c4c;margin-left:12px; display:block; margin-bottom:25px;}

/*相关视频*/
.course-list ul{margin-left:12px;}

.course-list ul li{ float:left; margin-top:30px; margin-right:15px; position:relative; overflow:hidden; width:160px; height:120px;} 

.course-list ul li a{ display:block;}

/*相关视频悬浮效果*/
.hidden{width:180px;height:120px;background:rgba(0,0,0,0.7);font-size:12px;padding:0px 5px;position:absolute;bottom:-120px;left:0px;}

.hidden p{color:#FFF;}

.hidden .palying img{vertical-align:middle;padding-right:8px;width:12px;height:12px;}

.hidden p{line-height:22px;}

.hidden .title{padding:10px 0px;font-size: 14px;text-align:left;}

.hidden .palying{text-align:right;position:absolute;bottom:10px;right:20px;}

.hidden {width:180px; height:120px;}

.show-info {width:180px;height:120px;}
/*评论*/
#show-comment{ margin-top:30px; display:none; width:710px;}

.input-textarea{ margin-top:18px; margin-left:10px; }

.input-textarea .input-comment{ height:100px; border:1px solid #cccccc; color:#000; font-size:14px; resize:none; line-height:22px; padding:10px 0px 8px 10px;}

.input-comment:hover{ border-color:#237ae4;}

.btn,.btn1{ margin-top:14px; height:30px; line-height:30px;}

.textarea-num{color:#999; font-size:14px; float:left; margin-left:20px;}

.btn button{ float:right;color:#4c4c4c; background-color:#fff; cursor:pointer;border:1px solid #e5e5e5; width:80px; height:30px; font-size:14px;}

.btn button:hover{ border-color:#237ae4;}

/*.nocomment{margin-top:70px; height:80px; margin-left:255px; line-height:80px; color:#999; font-size:18px;}

.nocomment img{margin-right:26px; vertical-align:middle;}*/

/*有评论条数*/
.havecomment{ margin-top:27px; width:700px; margin-left:12px; color:#4c4c4c; font-size:14px;}

.comment-num{ margin-top:25px;}

.havecomment ul{ margin-top:6px;}

.comment-list{ border-bottom:1px solid #e5e5e5 }

.user-info{ height:84px; line-height:84px; overflow:hidden;}

.user-info img{vertical-align:middle; border-radius:60px;}

.user-info .user-name{ margin-left:6px; font-size:16px;}

.relate-video{ float:right; color:#b6b6b6;}

.video-name{ float:right;color:#7a7a7a; margin-right:0px;}

.comment-info { margin-left:50px;}

.comments{ height:20px; color:#999; line-height:20px; margin-top:26px;  margin-left:50px; margin-bottom:18px;font-size:13px;}

.answer-comment{ float:right; color:#4c4c4c; cursor:pointer;}

.comments img{vertical-align:middle; margin-right:10px;}

.reply-comment .input-textarea{ margin-left:-2px;}

.btn1 {margin-bottom:18px;}

.btn1 #btn-1, #btn-2{ width:80px; height:30px; font-size:14px; cursor:pointer; float:right;}

#btn-1{background:#f38816; color:#fff; border:none; margin-right:18px;}

#btn-1:hover{background-color:#ff9b2f;}

#btn-2{border:1px solid #e5e5e5; color:#4c4c4c; background:#fff;}

#btn-2:hover{border-color:#237ae4;}


/*右边*/
.bottom-right{ float:left; width:330px;}

/*讲师简介*/
.teacher{ padding:12px;}

.img1{height:160px; text-align:center; padding-top:14px;}

.img1 p{ font-size:18px; margin-top:18px;}

.information{ margin-top:10px; font-size:14px; line-height:22px; padding-left:12px;}

.loaded {
    display:none;
    width:10px;
    margin:0 auto;
}

.content-right{float:left; width:270px; background:#393939;}

.content-right p{ padding-left:20px;}

.content-right .rtext1{ padding-top:40px; font-size:20px; color:#fff;}

.content-right .rtext2,.rtext3{ font-size:18px; color:#999999;}

.content-right .rtext2{margin-top:25px;}

.content-right .rtext3{ margin-top:18px;}

.content-right .rtext4{ font-size:18px; color:#fff; margin-top:20px;}

.content-right .btn{ display:block;color:#fff; width:110px; height:30px; font-size:20px; background-color:#f38816; margin-left:25px; margin-top:25px; text-align:center; padding:5px;}

.content-right .btn:hover{ background-color:#ff9b2f;}