.vr_banner{ width: 100%;}
.vr_banner img{ width: 100%;}
.main_container{  width: 1100px;  min-height: 500px; margin: 0 auto;}
.title_box{ width:1100px; margin:60px auto;  }
.title_box h1{ font-size:44px; line-height: 1; margin-bottom: 22px; color: #f89b38; text-align: center; text-transform:uppercase; }
.title_box h2{ font-size:28px; line-height: 1; color: #333; text-align: center; }

.type_box{ margin-bottom:50px;}
.course_type ul{ margin: 0 -20px -40px; }
.micro_course_detail_item{ width: 340px; height: 387px; background-color:#fff; border: 1px solid #ddd; box-sizing: border-box; border-radius: 4px; margin: 0 20px 40px; }
.micro_course_detail_item:hover{ box-shadow:0 2px 5px rgba(0,0,0,.3); }
.micro_course_detail_img{ width:338px; height:211px; }
.micro_course_detail_img img{ width:100%; }
.micro_course_detail_info{ text-align: center; }
.micro_course_detail_info h3{ width: 100%; font-size: 24px; line-height: 1; color:#000; padding: 30px 14px 16px; margin: 0; text-align: center; }
.red_line{ width:52px; height: 2px; background-color: #f89b38; margin: 0 auto; }
.micro_course_detail_info .leader{ width: 100%; margin: 0; font-size: 14px; line-height: 46px; color:#999; text-align: center; }
.micro_course_detail_info .organization{ width: 100%; margin: 0; font-size: 14px;  color:#999; line-height: 1; padding-bottom: 40px; text-align: center; }

/*vrä¸»é¡µ*/
.vr_main_container{ width: 100%; background-color: #f5f5f5; padding: 20px 0; }
.up_video{ width: 100%; height: 625px; margin: 0 auto 6px; background: url(../images/vr_up_video_bg.png) no-repeat center center; }
.video_msg{ width: 1100px; height: 260px; margin: 0 auto; padding-left: 324px; padding-top: 70px; }
.video_msg h2{ width:430px;  font-size:26px;  color:#333;  line-height:1;  margin-bottom: 10px; }
.video_msg .category{  width:430px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  font-size:12px;  color:#666;  line-height:1; margin-bottom: 22px; }
.video_tips{ width:404px; float: left; margin-bottom: 0; }
.video_tips li{  width:174px;  line-height:22px;  margin-right:20px;  overflow: hidden;  display: inline-block;  text-overflow: ellipsis;  white-space: nowrap;  }
.video_tips li i{  width:16px;  font-size:16px;  margin-right:8px;  color:#666;  text-align: center;  border:1px solid #ccc;  border-radius:50%;  }
.video_tips li span{  font-size:12px;  color:#333;  }
.video_tips li em{  font-style:normal;  font-size:12px;  color: #666;  }

.video_msg .term{ width: 304px; margin-bottom: 10px; }
.video_msg .term .btn-group.bootstrap-select{ width: 120px; }
.video_msg .rela-info{ width: 404px; margin-bottom: 10px; }
.video_msg .rela-info .info{ margin-bottom: 10px; }
.video_msg .rela-info .info:last-child{ margin-bottom:0; }
.video_msg .rela-info .info .title{ color: #999; }
.video_msg .goods-prise{ width: 310px; text-align: right; font-size: 12px; line-height: 30px; }
.video_msg .now-prise{ font-size: 24px; font-weight: bold; color: #f89b38; }
.video_msg .free-prise{ font-size: 18px; color: #f89b38; }
.video_msg .normal-prise{ color: #666; text-decoration: line-through; }
.video_msg .prise-tips{ color: #999; }

.sign_up_msg{ float: left; margin-top: 10px; }
.sign_up_msg .sign_up{  width:206px;  height:38px;  line-height:38px;  color:#fff;  letter-spacing:6px;  text-indent: 6px;  text-align:center;  display:inline-block;  font-size:14px;  border-radius:20px;  background-color: #f89b38;  box-shadow:0 1px 2px rgba(0,0,0,.2);  cursor: pointer;  margin-right:30px;  position: relative;  }
.position_border{  width:204px;  height:36px;  box-sizing: border-box;  display: inline-block;  border:1px solid #ffcc96;  border-radius:20px;  position: absolute;  left:1px;  top:1px;  }

.sign_up_msg .sign_up.not-allow{ color:#999; background-color: #ccc; cursor: no-drop; }
.sign_up_msg .sign_up.not-allow .position_border{ border: none; }

.video_box{ width: 1101px; margin: 0 auto; padding-top: 20px; }
.video_box .video{ padding:60px 65px 0 55px; margin-right: 10px; }
.video_box .video video{ width: 426px;  height: 240px; }
.speaker{ width: 545px; height: 340px; padding: 16px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.content_title{
    display: block;
    padding-bottom:13px;
    box-sizing: border-box;
    border-bottom:1px solid #eee;
    position: relative;
}
.content_title i{
    width:4px;
    height:16px;
    display: inline-block;
    border-radius:4px;
    background-color: #f89b38;
    position: absolute;
    left:0;
    top:3px;
}
.content_title>span{
    font-size:16px;
    color:#333;
    line-height:16px;
    margin-left:14px;
}
.instructor-scroll{ position: relative; }
.instructor-scroll ul li{
    display: inline-block;
    position: absolute;
    left:0;
    top:0;
    transition: all 350ms;
}
.instructor-item{ padding:40px 14px; }
.speaker img{ width:140px; height: 140px; border-radius: 50%; margin-right: 30px; background-color: #ccc; }
.speaker .instructor_text{ width:310px; height: 140px;  }
.speaker .instructor_text h3{ width: 100%; font-size: 16px; font-weight: bold; line-height: 30px; }
.speaker .instructor_text .instructor_job{ width: 100%; font-size: 14px; line-height: 20px; }
.speaker .instructor_text .instructor_expe{ font-size: 14px; line-height: 20px; color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-line-clamp: 6;
    -mozt-line-clamp: 6;
    -ms-line-clamp: 6;
    -o-line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis;}
.instructor-scroll-index{
    box-sizing: border-box;
    text-align: center;
}
.instructor-scroll-index li{  width:22px; cursor: pointer; height:4px;  display: inline-block;  margin:0 4px;  border-radius:3px;  background-color: #eee; }
.instructor-scroll-index li.active{ background-color: #f89b38;  }

.intro_modude{ width: 1100px; margin: 0 auto 10px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); padding: 20px; }
.course_intro .course_title_info{padding: 0 14px;margin-top: 20px;margin-bottom: 20px;font-size: 14px;line-height: 21px;}
.course_intro .course_title_info .msg_info{margin-bottom: 10px;text-indent: 2em;}
.course_intro .course_title_info p{ margin-bottom: 0; }
.course_intro .title_info_p{font-size: 14px;color: #f89b38;line-height: 21px;margin-bottom: 10px;}

.course_plan .content_info{ padding: 20px 0; }
.course_plan .content_info .item_type{ margin-bottom: 20px; height: 30px; line-height: 30px; font-size: 16px; width: 80px; color: #fff; text-align: center; background-color: #f89b38; border-radius: 4px; }
.course_plan .content_info .item_content{ padding: 0 20px; margin-bottom: 20px; }
.course_plan .content_info .item_title em{ color: #ccc; font-size: 16px; line-height: 30px; }
.course_plan .content_info .item_title{ line-height: 30px; margin-bottom: 10px; }
.course_plan .content_info .item_c_c{ padding-left:20px; }
.course_plan .content_info .item_t_t{ width: 65px; font-size: 14px; font-weight: bold; color: #333; line-height: 20px; }
.course_plan .content_info .item_c_c_text{ width: 930px; font-size: 14px; line-height: 20px; color: #333; }
.course_plan .content_info .item_c_c_text .tips{ line-height: 20px; color: #666; }
.course_plan .content_info .item_c_c_item{ margin-bottom: 10px; }

.middle_nav { width: 1100px;  height: 50px;  line-height: 50px;  padding-left: 120px;  padding-right: 20px;  box-sizing: border-box;  margin: 10px auto;  background-color: #fff;  box-shadow: 0 1px 2px rgba(0,0,0,.2);  }
.middle_nav a{ text-decoration: none; display:inline-block; width:100px; height:36px; line-height:36px; text-align: center; color:#333; font-size:14px; margin-right:80px; border-radius:4px;  }
.middle_nav a:hover{ color: #f89b38; }
.middle_nav a.focus{ color: #fff; background-color: #f89b38;  }

/*评价*/
.assess-box{ background-color: #fff; padding:20px 40px 80px; margin-bottom: 80px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);  }
.assess-box .h_sub_title{ margin-bottom: 30px; }
.total-score-box .title{ font-size: 18px; font-weight: bold; line-height: 20px; margin-right: 10px; }
.total-score-box .assess-score{ margin-right: 10px; margin-bottom: 0; }
.total-score-box .assess-score li{ float: left; width: 20px; height: 20px; background: url("../images/assess.png") no-repeat; }
.total-score-box .assess-score li{ background-position: 0 -33px; }
.total-score-box .assess-score li.active{ background-position: 0 -57px; }
.total-score-box .assess-score li.star1{ background-position:-26px -33px; }
.total-score-box .assess-score li.star2{ background-position:-48px -33px; }
.total-score-box .assess-score li.star3{ background-position:-70px -33px; }
.total-score-box .number1,.total-score-box .number2{ font-size:18px; line-height: 20px; color: #f89b38; }
.total-score-box .number3{ margin-left: 10px; }

.myAssessBox{ padding: 30px 0; border-bottom: 1px solid #ccc; }
.myAssessBox .assess-score-box{ margin-bottom: 20px; }
.myAssessBox .assess-score-box .title{ font-size: 18px; line-height: 18px; }

.myAssessBox .assess-score li{ float: left; width: 20px; height: 20px; background: url("../images/assess.png") no-repeat; }
.myAssessBox .assess-score li{ background-position: 0 -33px; }
.myAssessBox .assess-score li.active{ background-position: 0 -57px; }
.myAssessBox .number1{ font-size: 14px; color: #f89b38; margin-left: 6px; }
.myAssessBox .number2{ font-size: 12px; color: #f89b38; }
.myAssessBox textarea{ width: 100%; height: 100px; background-color: #f5f5f5; border: 1px solid #ccc; padding: 10px; font-size: 16px; line-height: 26px; border-radius: 4px; resize: none; margin-bottom: 20px; }
.myAssessBox .btn-box{ text-align: right; }
.myAssessBox .btn-box .h_btn_toggle1{ margin-left: 20px; height: 30px; line-height: 30px; }

.myAssessedBox{ /*display: none;*/ padding: 30px 0; border-bottom: 1px solid #ccc; }
.myAssessedBox .assess-score-box{ margin-bottom: 20px; }
.myAssessedBox .assess-score-box .title{ font-size: 18px; line-height: 18px; }
.myAssessedBox .assess-score li{ float: left; width: 20px; height: 20px; background: url("../images/assess.png") no-repeat; }
.myAssessedBox .assess-score li{ background-position: 0 -33px; }
.myAssessedBox .assess-score li.active{ background-position: 0 -57px; }
.myAssessedBox .number1{ font-size: 14px; color: #f89b38; }
.myAssessedBox .number2{ font-size: 12px; color: #f89b38; }
.myAssessedBox .text-box{ position: relative; padding-left: 10px; padding-right: 70px; }
.myAssessedBox .text{ width: 100%; line-height: 26px; font-size: 16px; }
.myAssessedBox .edit{ position: absolute; top: 0; right: 0; cursor: pointer; color: #999; font-size: 14px; }
.myAssessedBox .edit:hover{ color: #f89b38; }

.assess-box ul{ margin-bottom: 10px; }
.assess{ position: relative; border-bottom: 1px solid #ccc; padding: 30px 0; padding-left: 76px; }
.assess .user_img{ position: absolute; top: 30px; left: 10px; width: 50px; height: 50px; border-radius: 50%; }
.assess-top{ margin-top: 16px;margin-bottom: 6px; line-height: 20px; }
.assess-top .user_name{ font-size: 14px; color: #999; margin-right: 10px; }
.assess-top .assess-score li{ float: left; width: 14px; height: 16px; margin: 2px 1px; background: url("../images/assess.png") no-repeat; }
.assess-top .assess-score li{ background-position: 0 0; }
.assess-top .assess-score li.r{ background-position:-7px 0; }
.assess-top .assess-score li.active{ background-position: 0 -16px; }
.assess-top .assess-score li.star1{ background-position:-26px -62px; }
.assess-top .assess-score li.star2{ background-position:-46px -62px; }
.assess-top .assess-score li.star3{ background-position:-66px -62px; }
/*.assess-top .assess-score li.r-active{ background-position:-7px -16px; }*/
.assess-top .number1{ font-size: 14px; color: #f89b38; }
.assess-top .number2{ font-size: 12px; color: #f89b38; }
.assess-title{ font-size: 16px; line-height: 26px; margin-bottom: 20px; }
.assess-title .beTop{height: 22px;font-size: 14px;line-height: 22px;padding: 0 10px;background-color: #f89b38;color: #fff;border-radius: 2px;margin-right: 10px;}
.assess .rela_info{ font-size: 12px; color: #999; }
.assess .rela_info .learn-time{ margin-right: 20px; }
.assess .rela_info .icon{ display: inline-block; width: 15px; height: 18px; vertical-align: text-bottom; background: url("../images/assess.png") no-repeat; margin-right: 6px; }
.assess .rela_info .praise{ cursor: pointer; user-select: none; }
.assess .rela_info .praise .icon{ background-position: -38px 1px; }
.assess .rela_info .praise.active .icon{ background-position: -38px -16px; }
.assess .rela_info .accusation{ margin-right: 20px; cursor: pointer; user-select: none; }
.assess .rela_info .accusation .icon{ background-position: -19px 1px; }
.assess .rela_info .accusation.active .icon{ background-position: -19px -16px; }

.rela_info .praise.active,
.rela_info .accusation.active,
.rela_info .delete.active,
.rela_info .reply.active,
.rela_info .totop.active{
    color: #f89b38;
}

.assess .reply_area{ margin-top: 20px; border: 1px solid #ccc; border-radius: 4px; background-color: #f5f5f5; padding: 10px; }
.assess .reply_area .reply-top{ font-size: 14px; line-height: 14px; margin-bottom: 20px; }
.assess .reply_area .reply-text{ font-size: 14px; color: #666; }
.assess .reply_area .reply-time{ color: #999; font-size: 12px; }

.content_accusation .modal_main_info{ padding: 20px 30px; }
.content_accusation .h_radio_group_inline{ margin-bottom: 10px; }
.content_accusation .h_radio_group_inline label{ margin-right: 10px; }
.content_accusation .h_radio_group_inline label.active{ display: inline-block; }
.content_accusation .h_radio_group_inline label input{ margin: 0; margin-right: 5px; vertical-align: middle; }
.content_accusation .h_radio_group_inline label span{ vertical-align: middle; }
.content_accusation textarea{ width: 100%; height: 140px;line-height: 20px; font-size: 14px; margin-bottom: 20px; border-radius: 4px; resize: none; padding: 10px; border: 1px solid #ccc; }
.content_accusation .btn-box{ text-align: center; }
.content_accusation .btn-box .h_btn_toggle1,
.content_accusation .btn-box .h_btn_toggle2{
    margin-left: 20px; height: 30px; line-height: 30px;
}
