@import url('./iconfont/iconfont.css');
@font-face {
  font-family: dincondm;
  src: url(/static/css/fonts/DINCOND-MEDIUM.otf);
  font-style: normal
}

*,
:after,
:before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  padding: 0;
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-weight: 400;
  font-style: normal;
}

ol,
ul {
  list-style: none;
}

a:active,
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

button {
  border: none;
  outline: none;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #EEF4F4;
  font-size: 14px;
  color: #606266;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

.clearfix:after {
  content: '\0020';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}

.clearfix {
  *zoom: 1
}

.l {
  float: left
}

.r {
  float: right
}

.clear {
  height: 0;
  overflow: hidden;
  clear: both
}

.hide {
  display: none
}

.btn.hide {
  display: none
}

.img_border {
  border: 4px solid #fff;
  border-radius: 1px
}

.bb {
  border-bottom: 1px solid #d2d2d2
}

.bt {
  border-top: 1px solid #d2d2d2
}

.bbn {
  border-bottom: 0 !important
}

.mc {
  margin: 0 auto !important
}

.m0 {
  margin: 0 !important
}

.m1 {
  margin: 1px !important
}

.m2 {
  margin: 2px !important
}

.m3 {
  margin: 3px !important
}

.m4 {
  margin: 4px !important
}

.m5 {
  margin: 5px !important
}

.m10 {
  margin: 10px
}

.m15 {
  margin: 15px
}

.m20 {
  margin: 20px
}

.m25 {
  margin: 25px
}

.m30 {
  margin: 30px
}

.mt5 {
  margin-top: 5px !important
}

.mt0 {
  margin-top: 0 !important
}

.mt10 {
  margin-top: 10px !important
}

.mt14 {
  margin-top: 14px
}

.mt15 {
  margin-top: 15px
}

.mt18 {
  margin-top: 18px
}

.mt20 {
  margin-top: 20px !important
}

.mt30 {
  margin-top: 30px
}

.mt40 {
  margin-top: 40px
}

.mt50 {
  margin-top: 50px
}

.mt60 {
  margin-top: 60px
}

.mt70 {
  margin-top: 70px
}

.mt80 {
  margin-top: 80px
}

.mt90 {
  margin-top: 90px
}

.mt100 {
  margin-top: 100px
}

.mb0 {
  margin-bottom: 0 !important
}

.mb3 {
  margin-bottom: 3px
}

.mb5 {
  margin-bottom: 5px !important
}

.mb10 {
  margin-bottom: 10px
}

.mb15 {
  margin-bottom: 15px
}

.mb20 {
  margin-bottom: 20px !important
}

.mb25 {
  margin-bottom: 25px !important
}

.mb30 {
  margin-bottom: 30px
}

.mb40 {
  margin-bottom: 40px
}

.mb50 {
  margin-bottom: 50px
}

.mb55 {
  margin-bottom: 55px
}

.mb80 {
  margin-bottom: 80px
}

.mb100 {
  margin-bottom: 100px
}

.ml0 {
  margin-left: 0 !important
}

.ml8 {
  margin-left: 8px !important
}

.ml1 {
  margin-left: 1px !important
}

.ml5 {
  margin-left: 5px !important
}

.ml10 {
  margin-left: 10px !important
}

.ml12 {
  margin-left: 12px !important
}

.ml13 {
  margin-left: 13px !important
}

.ml15 {
  margin-left: 15px !important
}

.ml25 {
  margin-left: 25px !important
}

.ml20 {
  margin-left: 20px !important
}

.ml30 {
  margin-left: 30px !important
}

.ml35 {
  margin-left: 35px !important
}

.ml38 {
  margin-left: 38px !important
}

.ml40 {
  margin-left: 40px !important
}

.ml50 {
  margin-left: 50px !important
}

.ml60 {
  margin-left: 60px !important
}

.ml55 {
  margin-left: 55px !important
}

.ml57 {
  margin-left: 57px !important
}

.ml60 {
  margin-left: 60px !important
}

.ml80 {
  margin-left: 80px !important
}

.ml100 {
  margin-left: 100px !important
}

.ml110 {
  margin-left: 110px !important
}

.ml120 {
  margin-left: 120px !important
}

.ml150 {
  margin-left: 150px !important
}

.ml200 {
  margin-left: 200px !important
}

.ml250 {
  margin-left: 250px !important
}

.ml285 {
  margin-left: 285px !important
}

.ml835 {
  margin-left: 835px !important
}

.mr5 {
  margin-right: 5px !important
}

.mr10 {
  margin-right: 10px !important
}

.mr15 {
  margin-right: 15px !important
}

.mr20 {
  margin-right: 20px !important
}

.mr30 {
  margin-right: 30px !important
}

.mr40 {
  margin-right: 40px !important
}

.mr50 {
  margin-right: 50px !important
}

.mr80 {
  margin-right: 80px !important
}

.mr100 {
  margin-right: 100px !important
}

.mr250 {
  margin-right: 250px !important
}

.mr300 {
  margin-right: 300px !important
}

.pointer {
  cursor: pointer
}

.fl {
  float: left
}

.fr {
  float: right
}

.mr60 {
  margin-right: 60px
}

.pr {
  position: relative
}

.pa {
  position: absolute
}

.errorHint {
  height: 25px;
  line-height: 20px;
  font-size: 12px;
  color: #f01414
}

.breakall {
  word-break: break-all
}

.cb {
  clear: both
}

.fs12 {
  font-size: 12px !important
}

.fs14 {
  font-size: 14px !important
}

.fs16 {
  font-size: 16px !important
}

.fs18 {
  font-size: 18px !important
}

.fs20 {
  font-size: 20px !important
}

.bold {
  font-weight: 700 !important
}

.autowrap {
  word-wrap: break-word;
  word-break: break-all
}

.w {
  max-width: 1152px;
  margin: 0 auto
}

.pr {
  position: relative
}

.el-tooltip__popper {
  max-width: 80%;
  word-break: break-all;
  line-height: 1.5;
  font-size: 14px;
}

#app {
  height: 100%;
}

.icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.wscn-follow-btn {
  width: 74px;
  height: 32px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: background 0.1s linear;
  transition: background 0.1s linear;
}

.b-status-1 {
  color: #1482f0;
  background: #fff;
}

.b-status-1,
.b-status-2 {
  border: 1px solid #1482f0;
}

.b-status-2 {
  color: #fff;
  background: #1482f0;
}

.b-status-3 {
  color: #666;
  background: #e6e6e6;
  border: 1px solid #e6e6e6;
}

.b-status-4 {
  color: #333;
  background: #dcdcdc;
  border: 1px solid #dcdcdc;
}

.layout-main {
  padding-top: 72px;
}

.home-page {
  margin-top: 10px;
  margin: 20px auto 60px;
  position: relative;
  width: 1200px;
  min-height: 750px;
  overflow: hidden;
  z-index: 998;
}

.home-wrapper {
  position: relative;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #1482f0;
}

div:focus {
  outline: none;
}

code {
  background: #eef1f6;
  padding: 15px 16px;
  margin-bottom: 20px;
  display: block;
  line-height: 36px;
  font-size: 15px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

code a {
  color: #337ab7;
  cursor: pointer;
}

code a:hover {
  color: #20a0ff;
}

.warn-content {
  background: rgba(66, 185, 131, 0.1);
  border-radius: 2px;
  padding: 16px;
  padding: 1rem;
  line-height: 1.6rem;
  word-spacing: 0.05rem;
}

.warn-content a {
  color: #42b983;
  font-weight: 600;
}

.wscn-avatar {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.wscn-avatar__img {
  width: 100%;
  height: 100%;
}


.components-container {
  margin: 30px 50px;
  position: relative;
}

.pagination-container {
  margin-top: 30px;
}

.text-center {
  text-align: center;
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%);
}

.sub-navbar .subtitle {
  font-size: 20px;
  color: #fff;
}

.sub-navbar.draft {
  background: #d0d0d0;
}

.sub-navbar.deleted {
  background: #d0d0d0;
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;
}

.link-type:hover,
.link-type:focus:hover {
  color: #20a0ff;
}

.filter-container {
  padding-bottom: 10px;
}

.filter-container .filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}

.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}

/* layout */

.layout-main .sidebar-container {
  transition: width .28s;
  width: 180px !important;
  height: 100%;
  position: fixed;
  font-size: 0;
  top: 72px;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  background: #535c63;
}

.layout-main .main-container {
  min-height: 100%;
  transition: margin-left .28s;
  margin-left: 180px;
  margin-bottom: 57px;
}

.layout-main.hideSidebar .sidebar-container {
  width: 64px !important;
}

.layout-main.hideSidebar .main-container {
  margin-left: 64px;
}

.app-container {
  padding: 20px;
  padding-bottom:  120px;
}

.filter-container {
  padding-bottom: 10px;
}

.pagination-container {
  margin-top: 20px;
}

.home-main {
  position: relative;
  width: 1200px;
  margin: 80px auto 57px auto;
  overflow: hidden
}

.main {
  margin-top: 60px;
  padding: 20px 20px 56px 20px;
  overflow: hidden;
}

/* operation */

.operation {
  position: fixed;
  left: 180px;
  right: 0;
  top: 72px;
  padding: 10px;
  line-height: 40px;
  background: #fff;
  z-index: 2000;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  transition: all .28s;
}

.hideSidebar .operation {
  left: 64px;
}

.operation-back__button {
  margin-right: 10px;
}

.operation .el-breadcrumb {
  line-height: 40px;
}

/* breadcrumb */

.breadcrumb {
  position: fixed;
  left: 0;
  right: 0;
  top: 72px;
  padding: 10px;
  line-height: 40px;
  background: #fff;
  z-index: 2000;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  transition: all .28s;
}

.breadcrumb .el-breadcrumb {
  line-height: 40px;
}

/*zjm后加 dialog*/

.ml-30 {
  margin-left: 30px;
}

.mt-10 {
  margin-top: 10px;
}

.ml-50 {
  margin-left: 50px;
}

.mtb-10 {
  margin: 10px 0px;
}

.wd-100 {
  width: 100%;
}

.mlimpot-12 .el-form-item__content {
  margin-left: 12px !important;
}

.mlimpot-12 .el-collapse-item__content {
  padding-left: 20px;
}

.jcitem .el-form-item__content {
  margin-left: 80px !important;
}

.btnjcolor {
  border: none;
  color: #e39139;
  border-right: 1px solid #ccc;
  padding-right: 50px;
  width: 100px;
}

.btnjcolor input {
  width: 95px;
  border: none;
  color: #e39139;
}

.cont {
  height: 50px;
  margin-bottom: 10px;
}

.itemBorder {
  border: 1px solid #eee;
  padding: 5px;
}

.update .el-form-item__content {
  float: left;
  margin-left: 12px !important;
}

.textHints {
  background: #fee0e0;
  padding: 5px;
}

.fw-b {
  font-weight: bold;
}

.fs-2 {
  font-size: 25px;
}

.txtr {
  text-align: right;
}

.tpxx .el-input-group {
  width: 90%;
}

.pfzb {
  float: left;
  line-height: 40px;
}

.pfzb-20 {
  float: left;
  width: 24%;
}

.pfzb-20 input {
  height: 30px;
}

.pfzb-w70 {
  width: 70%;
}

.pfzb-w70 input {
  width: 70%;
}

/* 我的动画列表 */

.animate-list {
  margin-left: -2%;
  overflow: hidden;
}

.animate-list__item {
  float: left;
  width: 18%;
  margin: 0 0 15px 2%;
}

.animate-list__item.isChecked {
  background: #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, .35);
}

.animate-list__cover {
  height: 148px;
  overflow: hidden;
}

.animate-list__cover img {
  width: 100%;
  transition: all .35s;
}

.animate-list__cover:hover img {
  width: 110%;
}

.animate-list__label {
  width: 68%;
}

.animate-list__view {
  width: 24%;
}

/* (我的课程)头部分类的样式 */

.home_page_kinds_box {
  line-height: 32px;
}

.home_page_kinds {
  background: #fff;
  padding: 20px;
}

.home_page_kinds_box .kinds_name {
  width: 9%;
  float: left;
}

.home_page_kinds_box .kinds_name .el-icon-tickets {
  margin-right: 10px;
}

.home_page_kinds_box .kinds_lists {
  float: left;
  width: 80%;
}

.home_page_kinds_box .kinds_lists li {
  line-height: 30px;
  float: left;
  padding: 0 15px;
  margin: 0 20px 5px 5px;
  cursor: pointer;
  transition: all .3s;
}

.no-course-helper {
  padding: 60px;
  font-size: 24px;
  color: #93999f;
  line-height: 24px
}

.home_page_kinds_box .kinds_lists li:hover,
.home_page_kinds_box .kinds_lists li.active {
  border-radius: 15px;
  color: #fff;
  background-color: #49BC91;
}

.home_page_kinds_search .el-input__inner {
  width: 25%;
  float: right;
  border-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.home_page_kinds_search .el-input-group__append {
  cursor: pointer;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* 课程卡片公共样式 */

.course_card_box {
  margin-left: -2%;
  min-height: 200px;
}

.course_card_box .course_list_box {
  float: left;
  width: 23%;
  height: 242px;
  margin-left: 2%;
  overflow: hidden;
  background-color: #fff;
}

.course_card_box .course_list_box .course_img_box {
  width: 100%;
  height: 170px;
  overflow: hidden;
  border-bottom: none;
}

.course_card_box .course_list_box .course_img_box .course_img {
  width: 100%;
  height: 100%;
  transition: all 1s;
}

.course_card_box .course_list_box:hover .course_img_box .course_img {
  transform: scale(1.2);
}

.course_card_box .course_words {
  padding: 5px 10px;
}

.course_card_box .course_words .course_title {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 600;
}

.course_card_box .course_words .course_teacher {
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #92999F;
}

.course_card_box .course_teacher_name {
  float: left;
}

.course_card_box .course_number {
  float: right;
}

.course_card_box .course_number .el-icon-star-off {
  margin-right: 3px;
}

.no-data {
  padding: 100px 0;
  background: rgba(28,31,33,.05);
  font-size: 16px;
  color: #9199A1;
  text-align: center
}

.no-data i {
  display: block;
  font-size: 48px;
  color: #B2B8BD;
  line-height: 48px
}

/* 资源中心列表以及资源中心详情头部的输入搜索框样式 */

.resourcesLD {
  background-color: #fff;
}

.resourcesLD .home-main {
  position: relative;
  width: 1200px;
  margin: -45px auto 0 auto;
  overflow: hidden;
  background-color: #fff;
  padding-bottom: 20px;
}

.resourcesLD .banner-box {
  height: 250px;
  background-color: #49BC91;
}

.resourcesLD .banner-box .input-with-select {
  width: 60%;
  margin: 0 auto;
  left: 50%;
  margin-left: -30%;
  top: 0;
  margin-top: 8%;
}

.resourcesLD .input-with-select .el-select {
  width: 100px;
}

/* emoji style */

.emojione {
  /* Emoji Sizing */
  font-size: inherit;
  height: 3ex;
  width: 3.1ex;
  min-height: 20px;
  min-width: 20px;
  /* Inline alignment adjust the margins  */
  display: inline-block;
  margin: -.2ex .15em .2ex;
  line-height: normal;
  vertical-align: middle;
}

img.emojione {
  /* prevent img stretch */
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
}

a[href="https://froala.com/wysiwyg-editor"],
a[href="https://www.froala.com/wysiwyg-editor?k=u"] {
  display: none !important;
  position: absolute;
  top: -99999999px;
}

/* sidebar */

.siderbar .el-menu-item i {
  color: #ffffff;
}

.siderbar .el-menu-item.is-active i {
  color: inherit
}


/* 动画 */
.resource-show .file-name-list {
  float: left;
  margin-right: 15px;
  text-align: center;
  cursor: pointer;
}

.resource-show .file-name-list .el-icon-picture:before {
  font-size: 25px;
}

.resource-show .file-name-list .file-name {
  line-height: 2;
}

.showDetails-style .showDetails-style-child {
  width: 100%;
  min-height: 480px;
}

.courseteach .el-image-viewer__close {
  color: #fff;
  background: #323232;
}