html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
  font-size: 14px;
  background-repeat: no-repeat;
  background-position: center top;
}

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

img {
  border: 0;
}

/* 哀悼日 */
html.day-of-mourning {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
html.day-of-mourning *,
html.day-of-mourning ::before,
html.day-of-mourning ::after { filter:gray; }

/* scrollbar 宽度 */
::-webkit-scrollbar {
  background: transparent;
}
::-webkit-scrollbar:horizontal {
  width: 100%;
  height: 12px;
}
::-webkit-scrollbar:vertical {
  width: 12px;
  height: 100%;
}
::-webkit-scrollbar:hover {
  padding: 0;
  background: rgba(0, 0, 0, 0.075);
}

/* scrollbar 轨道（滑动槽） */
::-webkit-scrollbar-track {
  background: transparent;
}

/* scrollbar 滑块 */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
/* 水平方向滚动条，压扁显示*/
::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 25%,
    rgba(0, 0, 0, 0.2) 25%,
    rgba(0, 0, 0, 0.2) 75%,
    transparent 75%,
    transparent 100%
  );
}
/* 垂直方向滚动条，缩窄显示 */
::-webkit-scrollbar-thumb:vertical {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 25%,
    rgba(0, 0, 0, 0.2) 25%,
    rgba(0, 0, 0, 0.2) 75%,
    transparent 75%,
    transparent 100%
  );
}

::-webkit-scrollbar-corner {
  background: transparent;
}
::placeholder {
  color: #DBDBDB;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #DBDBDB;
  opacity: 1;
}
::-ms-input-placeholder {
  color: #DBDBDB;
  opacity: 1;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

dd {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4 {
  font-weight: 700;
}
h5, h6{
  font-weight: normal;
}
h1 {
  font-size: 1.8em;
}
h2 {
  font-size: 1.6em;
}
h3 {
  font-size: 1.4em;
}
h4 {
  font-size: 1.2em;
}
h5,
h6 {
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
}

input:focus {
  outline: none;
}

/* ============================================ */
/* 原子类 */
/* ============================================ */

.mt {
  margin-top: 8px;
}
.mt2 {
  margin-top: 16px;
}
.mt3 {
  margin-top: 24px;
}
.mr {
  margin-right: 8px;
}
.mr2 {
  margin-right: 16px;
}
.mr3 {
  margin-right: 24px;
}
.mb {
  margin-bottom: 8px;
}
.mb2 {
  margin-bottom: 16px;
}
.mb3 {
  margin-bottom: 24px;
}
.ml {
  margin-left: 8px;
}
.ml2 {
  margin-left: 16px;
}
.ml3 {
  margin-left: 24px;
}
.pt {
  padding-top: 8px;
}
.pt2 {
  padding-top: 16px;
}
.pt3 {
  padding-top: 24px;
}
.pr {
  padding-right: 8px;
}
.pr2 {
  padding-right: 16px;
}
.pr3 {
  padding-right: 24px;
}
.pb {
  padding-bottom: 8px;
}
.pb2 {
  padding-bottom: 16px;
}
.pb3 {
  padding-bottom: 24px;
}
.pl {
  padding-left: 8px;
}
.pl2 {
  padding-left: 16px;
}
.pl3 {
  padding-left: 24px;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
.clear {
  clear: both;
}
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

.color-danger {
  color: #E74C4C;
}
.color-success {
  color: #67C23A;
}
.color-warning {
  color: #fe9a00;
}

/*
 $ 布局 $
 */
body {
  min-width: 1180px;
}
.layout {
  box-sizing: border-box;
  position: relative;
  width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.layout:after {
  display: table;
  content: '';
  clear: both;
}

/*
 $ 网站页头区域 $
 */
#site-header {
  box-sizing: border-box;
  height: 205px;
}

/*
 $ 站点 logo $
 */
.site-logo {
  margin-top: 40px;
  float: left;
}

/*
 $ 全局页头搜索 $
 */
.site-search {
  float: right;
  margin: 20px 80px 0 0;
}
.site-search__input {
  box-sizing: border-box;
  float: left;
  width: 260px;
  height: 36px;
  padding: 0 16px 0;
  border: 1px solid transparent;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.4);
}
.site-search__input:focus {
  background: rgba(255, 255, 255, 0.9);
}
.site-search__input:focus,
.site-search__submit:focus {
  outline: none;
}
.site-search__submit {
  overflow: hidden;
  position: relative;
  float: left;
  width: 40px;
  height: 40px;
  margin-left: 5px;
  border: 1px solid transparent;
  border-radius: 20px;
  color: #fff;
  text-indent: -999px;
  cursor: pointer;
}
.site-search__submit::before,
.site-search__submit::after {
  display: block;
  content: '';
}
.site-search__submit::before {
  position: absolute;
  top: 0;
  right: 3px;
  bottom: 3px;
  left: 0;
  margin: auto;
  overflow: hidden;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}
.site-search__submit::after {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 0;
  left: 10px;
  width: 5px;
  height: 2px;
  margin: auto;
  background: rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
}
.site-search__submit:hover::before {
  border-color: #fff;
}
.site-search__submit:hover::after {
  background-color: #fff;
}

/*
 $ 网站页面内容区域 $
 */
#site-body {
  box-sizing: border-box;
  /* 205header + 52nav + 270footer */
  min-height: calc(100% - 527px);
}
#site-body::before,
#site-body::after {
  display: table;
  content: '';
  clear: both;
}

/*
 $ 网站主导航区域 $
 */
#site-nav {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
}

/*
 $ 网站主导航 $
 */
.site-nav {
  width: 100%;
  position: relative;
  height: 52px;
  font-size: 18px;
}
.site-nav::after {
  display: table;
  content: '';
  clear: both;
}
.site-nav__item {
  float: left;
  height: 100%;
  margin: 0 2px;
}
.site-nav__item__link {
  float: left;
  padding: 0 8px;
  height: 48px;
  line-height: 44px;
  margin-top: 4px;
  border-radius: 3px 3px 0 0;
  cursor: default;
}
.site-nav__item__link[href] {
  cursor: pointer;
}
.site-nav__item__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0;
  vertical-align: top;
  margin-top: 13px;
  fill: #fff;
}
.site-nav__item__icon > img,
.site-nav__item__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.site-nav__item__label {
  color: #fff;
}
.site-nav__item--hover .site-nav__item__link {
  position: relative;
  z-index: 3;
  background: #fff;
  box-shadow: 0 1px 0 #fff;
}
.site-nav__item--hover .site-nav__item__icon > svg {
  fill: #000;
}
.site-nav__item--hover .site-nav__item__label {
  color: #000;
}
.site-nav__submenu {
  box-sizing: border-box;
  display: none;
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24);
}
.site-nav__item--hover .site-nav__submenu {
  display: block;
}
.site-nav__submenu__item {
  display: inline-block;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 0 16px;
}
.site-nav__submenu__item__link {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px 0 8px 16px;
}
.site-nav__submenu__item__link::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: auto;
  border-radius: 3px;
  background: #dbdbdb;
}

/*
 $ 页脚 $
 */
#site-footer {
  box-sizing: border-box;
  background: #666;
  height: 270px;
  padding: 24px 0;
  color: #fff;
}
#site-footer a:hover {
  color: inherit;
  text-decoration: underline;
}
#site-footer .footer-link {
  overflow: hidden;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 32px;
}
#site-footer .footer-link__item {
  box-sizing: border-box;
  float: left;
  height: 100%;
  width: 31%;
  text-align: center;
}
#site-footer .footer-link__item:nth-child(2) {
  margin: 0 3.5%;
}
#site-footer .footer-link__item > a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
#site-footer .footer-link__item > a:hover {
  background: rgba(255, 255, 255, 0.075);
  text-decoration: none;
}
#site-footer .footer-info {
  margin: 16px 0;
  line-height: 20px;
}
#site-footer .footer-info img {
  margin: 0 5px 0 0;
  padding: 0;
}

/*
 $ 图标定义 $
 */
.icon {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 20px;
  height: 20px;
}
.icon__notification {
  background-image: url("/portal/public/img/icon__notification.png");
}
.icon__teacher {
  background-image: url("/portal/public/img/icon__teacher.png");
  background-size: 16px 15px;
}
.icon__duration {
  background-image: url("/portal/public/img/icon__duration.png");
  background-size: 16px 16px;
}
.icon__hour {
  background-image: url("/portal/public/img/icon__hour.png");
  background-size: 16px 17px;
}
.icon__view-count {
  background-image: url("/portal/public/img/icon__view-count.png");
  background-size: 16px 14px;
}
.icon__viewer {
  background-image: url("/portal/public/img/icon__viewer.png");
  background-size: 17px 17px;
}
.icon__phone {
  background-image: url("/portal/public/img/icon__phone.png");
  background-size: 11px 14px;
}
.icon__lock {
  background-image: url("/portal/public/img/icon__lock.png");
  background-size: 11px 14px;
}
.icon__file-jpg,
.icon__file-jpeg,
.icon__file-gif,
.icon__file-png {
  background-image: url("/portal/public/img/icon__file-jpg.png");
  background-size: 18px 18px;
}
.icon__file-pdf {
  background-image: url("/portal/public/img/icon__file-pdf.png");
  background-size: 18px 18px;
}
.icon__file-rar,
.icon__file-7z,
.icon__file-zip {
  background-image: url("/portal/public/img/icon__file-zip.png");
  background-size: 18px 18px;
}
.icon__file-doc,
.icon__file-docx,
.icon__file-word,
.icon__file-wps {
  background-image: url("/portal/public/img/icon__file-doc.png");
  background-size: 18px 18px;
}
.icon__file-xls,
.icon__file-xlsx,
.icon__file-excel {
  background-image: url("/portal/public/img/icon__file-xls.png");
  background-size: 18px 19px;
}
.icon__ie {
  background-image: url("/portal/public/img/icon__ie.png");
  background-size: 20px 20px;
}

/*
 $ 标题 $
 */
.section-title {
  font-size: 16px;
  font-weight: 700;
}

/*
 $ “更多” 文字按钮 $
 */
.more-link {
  display: inline-block;
}
.more-link::after {
  position: relative;
  display: inline-block;
  content: '';
  width: 6px;
  height: 6px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(45deg);
}

/*
 $ 通用 tabs 布局 $
 */
.tabs {
  box-sizing: border-box;
  height: 100%;
  font-size: 0;
}
.tabs::after {
  display: table;
  content: '';
  clear: both;
}
.tabs__item {
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  cursor: pointer;
}
.tabs__item + .tabs__item {
  margin-left: 16px;
}
.tabs__item--active {
  border-color: #000;
}
.tabs--vertical .tabs__item {
  display: block;
  position: relative;
  width: 105px;
  height: 36px;
  margin: 0 0 8px;
  line-height: 36px;
  overflow: visible;
  white-space: nowrap;
  background: #eff5fd;
  text-align: center;
  font-size: 14px;
}
.tabs--vertical .tabs__item::after {
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  right: -5px;
  left: auto;
  width: 0;
  height: 0;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
  content: '';
  border: 5px solid transparent;
  border-right-width: 0;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}
.tabs--vertical .tabs__item--active {
  color: #fff;
}

.tab-pane {
  display: none;
}
.tab-pane--active {
  display: block;
}

/*
 $ 通用标题+内容布局容器 $
 */
.box {
  box-sizing: border-box;
  border: 1px solid #e7edf4;
  background-color: #fff;
}
.box__hd {
  box-sizing: border-box;
  position: relative;
  height: 50px;
  padding: 0 20px;
  line-height: 50px;
  background: #f6fbfe;
}
.box__hd::after {
  display: table;
  content: '';
  clear: both;
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  border-bottom: 1px solid #e7edf4;
}
.box__bd {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: calc(100% - 50px);
}
.box__bd::after {
  display: table;
  content: '';
  clear: both;
}

.box__hd > .icon {
  float: left;
  width: 20px;
  height: 20px;
  margin: 15px 10px 15px 0;
}

.box__hd > .section-title {
  overflow: hidden;
  float: left;
  width: calc(100% - 85px);
  white-space: nowrap;
}

.box__hd > .more-link {
  float: right;
  width: 50px;
}

.box__hd > .tabs {
  float: left;
  position: relative;
  z-index: 1;
}


/*
 $ 按钮 $
 */
.button {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.button[disabled] {
  opacity: .8;
  cursor: not-allowed;
}
.button:hover {
  opacity: .8;
}

.button--s {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  padding: 0 16px;
}
.button--l {
  height: 56px;
  line-height: 56px;
  font-size: 22px;
  padding: 0 44px;
}

.button.theme-bg, .button.theme-bg:hover {
  border: none;
  color: #fff;
}

/*
 $ 分页组件 $
 */
 .pagination {
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
.pagination__prev,
.pagination__next,
.pagination__num {
  height: 34px;
  line-height: 32px;
  box-sizing: border-box;
  display: inline-block;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #e6e6e6;
}
.pagination__prev:hover,
.pagination__next:hover,
.pagination__num:hover {
  cursor: pointer;
}
.pagination__num--active,
.pagination__num--active:hover {
  color: #fff;
}
.pagination__more {
  height: 34px;
  line-height: 34px;
  box-sizing: border-box;
  display: inline-block;
  padding: 0 12px;
}

/*
 $ 两栏布局 $
 */
 .col-sub {
  box-sizing: border-box;
  float: left;
  width: 180px;
}
.col-main {
  box-sizing: border-box;
  width: 100%;
}
.col-sub + .col-main {
  float: right;
  width: 980px;
}

/*
 $ 内容容器 $
 */
.content-box {
  border: 1px solid #e7edf4;
  background: #fff;
}

/*
 $ 没有内容的时候，显示无数据背景 $
 */
.nodata {
  position: relative;
  display: block;
  content: '';
  width: 139px;
  height: 125px;
  background: url("/portal/public/img/nodata.png") no-repeat;
  background-size: contain;
  margin: auto;
}
.nodata::after {
  position: absolute;
  top: 135px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 14px;
  text-align: center;
  content: '无符合条件的数据';
  color: #aaa;
}

/*
 $ 轮播图分页 $
 */
.swiper-pagination-switch {
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.swiper-pagination-switch:hover,
.swiper-active-switch {
  background-color: rgba(255, 255, 255, 1);
}

/*
 $ popup 组件 $
 */
.com-popup {
  box-sizing: border-box;
  position: absolute;
  width: 100px;height: 100px;
}
.com-popup  {
  z-index: 9;
}
.com-popup:focus-within {
  z-index: 9;
}
.com-popup[open] {
  display: block;
}
.com-popup:focus {
  outline: 0 none;
}
.com-popup__layout {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
}
.com-popup__arrow {
  overflow: hidden;
  display: block;
  position: absolute;
  /* width, height 留出 5px 投影 */
  width: 24px;
  height: 10px;
  margin: auto;
}
.com-popup__arrow::after {
  display: block;
  position: absolute;
  top: 5px;
  right: 0;
  bottom: auto;
  left: 0;
  margin: auto;
  content: '';
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  background-color: #fff;
}
.com-popup__arrow::after {
  box-shadow: 0 0 5px rgba(0,0,0,0.06);
}
/* 默认无方向阴影 */
.com-popup__layout {
  box-shadow: 0 0 5px -4px rgba(0,0,0,0.12),
    0 0 16px 0 rgba(0,0,0,0.08),
    0 0 28px 8px rgba(0,0,0,0.05);
}
.com-popup:focus-within .com-popup__layout, .com-popup__layout:focus-within {
  outline: 0 none;
  box-shadow: 0 0 5px -2px rgba(0,0,0,0.16),
    0 0 16px 0 rgba(0,0,0,0.08),
    0 0 28px 8px rgba(0,0,0,0.05);
}
.origin-center-center .com-popup__arrow {
  display: none;
}
.com-popup__first, .com-popup__last, .com-popup__first:focus, .com-popup__last:focus {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0 none;
}
/* 箭头指向上方，阴影向下 */
.com-popup__layout.origin-top-left.vertical,
.com-popup__layout.origin-top-center,
.com-popup__layout.origin-top-right.vertical {
  box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12),
    0 6px 16px 0 rgba(0,0,0,0.08),
    0 9px 28px 8px rgba(0,0,0,0.05);
}
.com-popup:focus-within .com-popup__layout.origin-top-left.vertical, .com-popup__layout:focus-within.origin-top-left.vertical,
.com-popup:focus-within .com-popup__layout.origin-top-center, .com-popup__layout:focus-within.origin-top-center,
.com-popup:focus-within .com-popup__layout.origin-top-right.vertical, .com-popup__layout:focus-within.origin-top-right.vertical {
  box-shadow: 0 3px 6px -2px rgba(0,0,0,0.16),
    0 6px 16px 0 rgba(0,0,0,0.08),
    0 9px 28px 8px rgba(0,0,0,0.05);
}
.origin-top-left.vertical .com-popup__arrow {
  top: -10px;
  left: 10px;
}
.origin-top-center .com-popup__arrow {
  top: -10px;
  left: 0;
  right: 0;
}
.origin-top-right.vertical .com-popup__arrow {
  top: -10px;
  right: 10px;
}


/* 关闭按钮 */
.close-button {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.close-button::before,
.close-button::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  content: '';
  width: 1px;
  height: 1px;
  background-color: #888;
}
.close-button::before {
  width: 13px;
  transform: rotate(45deg);
}
.close-button::after {
  height: 13px;
  transform: rotate(45deg);
}
.close-button:hover::before,
.close-button:hover::after {
  background-color: #aaa;
}
.close-button:active::before,
.close-button:active::after {
  background-color: #666;
}


.com-select {
  box-sizing: border-box;
  display: inline-block;
  width: 180px;
  height: 32px;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 4px;
}


/*
 $ 日期组件 $
 */
.com-datepanel {
  display: inline-block;
  box-sizing: border-box;
  user-select: none;
  cursor: default;
  font-size: 12px;
  background-color: #fff;
}
.com-datepanel:focus {
  outline: 0 none;
}

.com-datepanel__layout:focus {
  outline: 0 none;
}
.com-datepanel__layout {
  box-sizing: border-box;
  position: relative;
  width: 234px;
  height: 266px;
}

.com-datepanel__header {
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
  width: 100%;
  height: 32px;
  line-height: 32px;
  cursor: default;
}

.com-datepanel__header-button {
  flex: 0 0 32px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: block;
  width: 32px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
  background-color: transparent;
  text-align: center;
  outline: 0;
  transition: .16s all;
}

.com-datepanel__header-button::before,
.com-datepanel__header-button::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: '';
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border-width: 0;
  border-style: solid;
  border-color: #666;
}

/* TODO, color-primary */
.com-datepanel__header-button:hover::before,
.com-datepanel__header-button:hover::after,
.com-datepanel__header-button:active::before,
.com-datepanel__header-button:active::after,
.com-datepanel__header-button:focus::before,
.com-datepanel__header-button:focus::after {
  border-color: #000;
}

.com-datepanel__header-button.com-datepanel__button-prevPrev::before,
.com-datepanel__header-button.com-datepanel__button-prevPrev::after {
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.com-datepanel__header-button.com-datepanel__button-prevPrev::after {
  left: 8px;
}

.com-datepanel__header-button.com-datepanel__button-prev::before {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.com-datepanel__header-button.com-datepanel__button-next::before {
  border-top-width: 1px;
  border-right-width: 1px;
}

.com-datepanel__header-button.com-datepanel__button-nextNext::before,
.com-datepanel__header-button.com-datepanel__button-nextNext::after {
  border-top-width: 1px;
  border-right-width: 1px;
}
.com-datepanel__header-button.com-datepanel__button-nextNext::after {
  right: 8px;
}

.com-datepanel__header-content {
  box-sizing: border-box;
  flex: 1 1 100%;
  height: 32px;
  text-align: center;
  font-size: inherit;
}

.com-datepanel__header-title {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 22px;
  line-height: 22px;
  font-size: inherit;
  margin: 5px auto;
  border: 0 none;
  border-radius: 3px;
  background: transparent;
}

/* TODO, color-primary */
.com-datepanel__header-title:focus {
  outline: 0 none;
  background-color: #f0f0f0;
  color: #000;
}
/* TODO, color-primary */
.com-datepanel__header-title:hover {
  color: #000;
}

.com-datepanel__com-datepanel__body {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 234px;
}

.com-datepanel__week-header {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  height: 32px;
  padding: 0 5px;
  box-shadow: inset 0 -1px 1px #f0f0f0;
  line-height: 31px;
  font-size: inherit;
  text-align: center;
  transition: .16s all;
}

.com-datepanel__week-header span {
  box-sizing: border-box;
  display: block;
  width: 32px;
}

.com-datepanel__button-list {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  padding: 5px;
  transition: .16s all;
}
.com-datepanel__body-month .com-datepanel__button-list {
  height: 202px;
}
.com-datepanel__body-year .com-datepanel__button-list,
.com-datepanel__body-decade .com-datepanel__button-list,
.com-datepanel__body-century .com-datepanel__button-list {
  height: 234px;
}

.com-datepanel__button-item {
  box-sizing: border-box;
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 1px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: inherit;
  transition: height .16s;
}
.com-datepanel__button-item:focus {
  outline: 0 none;
}
.com-datepanel__button-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  transition: color .16s,
    background .16s;
}
.com-datepanel__button-item:focus span {
  background-color: #f0f0f0;
}
/* 7 col * 5 row */
.com-datepanel__body-month .com-datepanel__button-item {
  width: 32px;
  height: 32px;
}
/* 3 col * 4 row */
.com-datepanel__body-year .com-datepanel__button-item {
  width: 74.6666px;
  height: 56px;
}
/* 2 col * 5 row */
.com-datepanel__body-century .com-datepanel__button-item,
.com-datepanel__body-decade .com-datepanel__button-item {
  width: 112px;
  height: 44.8px;
}

.com-datepanel__button-item.com-datepanel__button-item--otherMonth span,
.com-datepanel__button-item[disabled] span {
  color: #ccc;
}

.com-datepanel__button-item:not([disabled]):hover span {
  background-color: #f0f0f0;
}
.com-datepanel__button-item.com-datepanel__button-item--today span {
  color: #000;
  text-shadow: 0 0 1px #000;
}
.com-datepanel__button-item.com-datepanel__button-item--includesActive span {
  color: #000;
  text-shadow: 0 0 1px #000;
}

.com-datepanel__button-item.com-datepanel__button-item--active span,
.com-datepanel__button-item.com-datepanel__button-item--active:hover span,
.com-datepanel__button-item.com-datepanel__button-item--active:active span {
  color: #fff !important;
}


.com-dropdown {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 8;
  width: 210px;
}
.com-dropdown__result {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  height: 36px;
  line-height: 34px;
  border: 1px solid #DBDBDB;
  padding-right: 28px;
  font-size: 14px;
  border-radius: 4px;
  background: #fff;
}
.com-dropdown__print {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 8px 0 16px;
  font-size: 14px;
  border: none;
  background: transparent;
  cursor: default;
}
.com-dropdown__print:focus {
  outline: none;
}
.com-dropdown__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: auto;
  right: 8px;
  width: 20px;
  height: 20px;
  margin: auto;
  cursor: pointer;
}
.com-dropdown__icon::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 3px;
  left: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-top: 1px solid #666;
  border-right: 1px solid #666;
  transition: top .16s, bottom .16s, transform .16s;
  transform: rotate(135deg);
}
.com-dropdown--open .com-dropdown__icon::after {
  top: 3px;
  bottom: 0px;
  transform: rotate(-45deg);
}
.com-dropdown--clearable .com-dropdown__icon:hover::before,
.com-dropdown--clearable .com-dropdown__icon:hover::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1px;
  height: 1px;
  border: none;
  content: '';
  background: #666;
  transition: none;
}
.com-dropdown--clearable .com-dropdown__icon:hover::before {
  width: 11px;
  transform: rotate(45deg);
}
.com-dropdown--clearable .com-dropdown__icon:hover::after {
  height: 11px;
  transform: rotate(45deg);
}


.com-dropdown__panel {
  display: none;
  position: absolute;
  top: 38px;
  left: 0;
  border: 1px solid #DBDBDB;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  background-color: #fff;
  font-size: 14px;
  transition: all .16s;
  transform-origin: top left;
}
.com-dropdown__label {
  padding: 8px 24px 0;
  font-size: 14px;
}
.com-dropdown__list {
  padding: 8px;
}
.com-dropdown__item {
  height: 36px;
  line-height: 36px;
  border-radius: 4px;
  padding: 0 16px;
  white-space: nowrap;
  cursor: pointer;
}
.com-dropdown__item:hover {
  background-color: #F7F7F7;
}
.com-dropdown__actions {
  padding: 8px;
  border-top: 1px solid #eee;
  text-align: center;
  white-space: nowrap;
}
.com-dropdown__actions .button + .button {
  margin-left: 8px;
}

.com-date-range-picker .date-panels {
  white-space: nowrap;
}
.com-date-range-picker .date-panels .panel-start,
.com-date-range-picker .date-panels .panel-end {
  display: inline-block;
  padding: 8px;
}
.com-date-range-picker .date-panels .panel-end {
  border-left: 1px solid #eee;
}
.com-date-range-picker .date-panels .com-dropdown__label {
  padding: 8px;
}


.popup-mask {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  transform: all 1.16s;
}

/*
 $ 学员登录 $
 */
.com-login-dialog {
  box-sizing: border-box;
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 680px;
  height: 340px;
  margin: auto;
  padding: 0 40px 0 380px;
  background: #fff url("/portal/public/img/com-login-dialog.png") no-repeat;
  border-radius: 18px 8px 8px 18px;
  background-size: 340px 340px;
  background-position: left top;
  box-shadow: 0 0 15px rgba(0, 0, 0, .1);
  transform: all 1.16s;
}
.com-login-dialog__close {
  position: absolute;
  top: 8px;
  right: 8px;
}
.com-login-dialog__title {
  margin: 45px 0 25px;
  height: 20px;
  line-height: 20px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #333;
}
.com-login-dialog__item {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  line-height: 46px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
}
.com-login-dialog__item > input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0 12px;
  background: transparent;
  font-size: 14px;
}
.com-login-dialog__item > input::placeholder {
  color: #DBDBDB;
  opacity: 1;
}
.com-login-dialog__item > input:-ms-input-placeholder {
  color: #DBDBDB;
  opacity: 1;
}
.com-login-dialog__item > input::-ms-input-placeholder {
  color: #DBDBDB;
  opacity: 1;
}
.com-login-dialog__item.com-login-dialog__code {
  padding-right: 110px;
}
.com-login-dialog__item > button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 110px;
  height: 100%;
  font-size: 14px;
  border: none;
  border-left: 1px solid #ddd;
  background: #F7F7F7;
  color: #666;
  cursor: pointer;
}
.com-login-dialog__item > button:hover {
  color: #333;
}
.com-login-dialog__item > button[disabled],
.com-login-dialog__item > button[disabled]:hover {
  cursor: not-allowed;
  color: #aaa;
}
.com-login-dialog__button {
  width: 100%;
  height: 46px;
  line-height: 46px;
  font-size: 18px;
}

.com-video-dialog {
  display: none;
  overflow: hidden;
  box-sizing: border-box;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 0;
  background: rgba(0,0,0,.7);
}
.com-video-dialog__wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 960px;
  height: 540px;
  margin: auto;
}
.com-video-dialog__player {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.com-video-dialog__close {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.com-video-dialog__close::before,
.com-video-dialog__close::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 21px;
  height: 1px;
  margin: auto;
}
.com-video-dialog__close::before {
  transform: rotate(-45deg);
}
.com-video-dialog__close::after {
  transform: rotate(45deg);
}
.com-video-dialog:hover .com-video-dialog__close::before,
.com-video-dialog:hover .com-video-dialog__close::after {
  background: rgba(255,255,255,.3);
}
.com-video-dialog:hover .com-video-dialog__close:hover::before,
.com-video-dialog:hover .com-video-dialog__close:hover::after {
  background-color: rgba(255,255,255,.8);
}
.com-video-dialog:hover .com-video-dialog__close:active::before,
.com-video-dialog:hover .com-video-dialog__close:active::after {
  background-color: rgba(255,255,255,1);
}

.com-message {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  left: 0; 
  width: 100%;
  padding: 16px;
  font-size: 16px;
  text-align: center;
  background: rgba(37,61,96, .9);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,.1);
}