#site-body {
  background-color: #fff;
}


/*
 $ 课程列表查询区 $
 */
.course-header {
  position: relative;
  width: 100%;
  padding: 0 0 24px;
}

.course-header__title {
  margin: 16px 0 24px;
  font-size: 24px;
}

.course-header .com-dropdown {
  float: left;
  margin-right: 16px;
}

.course-header__form .com-dropdown:first-child {
  width: 140px;
}

.course-header .com-date-picker {
  width: 120px;
  margin-right: 16px;
}

.course-header__face2face {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 295px;
  height: 90px;
  margin-bottom: 24px;
  padding: 16px 0 0 85px;
  border: 1px solid #DBDBDB;
  background-color: #FBFBFB;
  background-image: url("/portal/public/img/training-face2face.png");
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 52.5px;
}
.course-header__face2face strong {
  vertical-align: bottom;
  margin-right: 5px;
  font-size: 18px;
  color: #333;
}
.course-header__face2face span {
  font-size: 16px;
  color: #333;
}
.course-header__face2face p {
  font-size: 12px;
  color: #ADADAD;
}
.course-header__face2face::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  left: auto;
  margin: auto;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border-top: 1px solid #999999;
  border-right: 1px solid #999999;
}
.course-header__face2face--party {
  margin-top: 24px;
  background-color: #FFF7F5;
  border-color: #FFF7F5;
  background-image: url("/portal/public/img/training-face2face--party.png");
}

.course-search {
  float: right;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 380px;
  height: 36px;
  padding: 0 46px 0 18px;
  border-radius: 4px;
  border: 1px solid #E2EAF0;
  background: #fff;
}
.course-search__input {
  float: left;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}
.course-search__input:focus,
.course-search__submit:focus,
.course-search__submit-button:focus {
  outline: none;
}

.course-search__submit-button {
  box-sizing: border-box;
  width: 80px;
  height: 34px;
}

.course-search__submit {
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 100%;
  text-indent: -999px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.course-search__submit::before,
.course-search__submit::after {
  display: block;
  content: '';
}
.course-search__submit::before {
  position: absolute;
  top: 0;
  right: 3px;
  bottom: 3px;
  left: 0;
  margin: auto;
  overflow: hidden;
  width: 8px;
  height: 8px;
  border: 2px solid #B1BAC1;
  border-radius: 50%;
}
.course-search__submit::after {
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 0;
  left: 8px;
  width: 5px;
  height: 2px;
  margin: auto;
  background: #B1BAC1;
  transform: rotate(45deg);
}
.course-search__submit:hover {
  opacity: .8;
}


.sourse-main {
  display: block;
  width: 100%;
  padding: 24px 0;
  background-color: #F7F7F8;
}
.sourse-main::after {
  display: table;
  content: '';
  clear: both;
}


/*
 $ 课程列表 $
 */
 .courses {
  width: 100%;
  overflow: hidden;
}
.courses__list::after {
  display: table;
  content: '';
  clear: both;
}
.courses__list {
  overflow: hidden;
  margin: 0 -20px -20px 0;
}
.courses__list__item {
  position: relative;
  float: left;
  box-sizing: border-box;
  width: 280px;
  height: 246px;
  margin: 0 20px 20px 0;
  border: 1px solid #E7EDF4;
  background: #fff;
}
.courses__list__item__link {
  display: block;
  width: 100%;
  height: 100%;
}
.courses__list__item__pic {
  overflow: hidden;
  width: 100%;
  height: 160px;
}
.courses__list__item__pic > img {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 160px;
}
.courses__list__item--flag-private .courses__list__item__pic::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  content: '非公开';
  background-color: #E74C4C;
  color: #fff;
  border-radius: 0 0 15px 0;
}
.courses__list__item__link:hover .courses__list__item__pic {
  opacity: .9;
}
.courses__list__item__title {
  overflow: hidden;
  margin: 16px 12px 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}
.courses__list__item__info::after {
  display: table;
  content: '';
  clear: both;
}
.courses__list__item__info {
  overflow: hidden;
  padding: 0 12px;
}
.courses__list__item__hours {
  float: left;
  color: #E74C4C;
  font-size: 16px;
}
.courses__list__item__status {
  float: right;
  font-size: 14px;
}
.courses__list__item__status.courses__list__item__status--finished {
  color: #999;
}
.courses__list__item:hover .courses__list__item__time {
  z-index: 0;
  opacity: 1;
}
.courses__list__item__time {
  opacity: 0;
  z-index: -1;
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.7);
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  transition: opacity .16s;
}