@charset "UTF-8";
.pro-border[data-v-9ce7aa7c] {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #f8f8f8;
}
.pro-header[data-v-9ce7aa7c] {
  padding: 24px;
  background-color: #f8f8f8;
}
.pro-header .pro-header-white[data-v-9ce7aa7c] {
    width: 100%;
    height: 72px;
    background-color: #FFF;
    border-radius: 6px;
    box-sizing: border-box;
    padding-left: 32px;
    display: flex;
    align-items: center;
}
.pro-header .pro-header-white .pro-title[data-v-9ce7aa7c] {
      font-size: 14px;
      line-height: 14px;
      color: rgba(0, 0, 0, 0.9);
      margin-left: 10px;
      font-weight: 600;
}
.courseFHome-white[data-v-9ce7aa7c] {
  width: calc(100% - 24px - 24px);
  margin: 0 auto;
  background-color: #FFF;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 36px 60px;
}
.courseFHome-white .courseF-tt[data-v-9ce7aa7c] {
    box-sizing: border-box;
    padding: 0 14px;
    font-size: 14px;
    line-height: 14px;
    color: #333;
    font-weight: 400;
    position: relative;
    margin-bottom: 30px;
}
.courseFHome-white .courseF-tt span[data-v-9ce7aa7c] {
      color: #6366F1;
      margin: 0 7px;
}
.courseFHome-white .courseF-tt .courseF-right[data-v-9ce7aa7c] {
      position: absolute;
      right: 14px;
      top: -12px;
      display: flex;
      justify-content: end;
}
.courseFHome-white .courseF-tt .courseF-right[data-v-9ce7aa7c] .courseF-btn {
        width: auto !important;
        height: 40px !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        border-radius: 6px !important;
        border: 1px solid #6366F1 !important;
        font-size: 14px !important;
        color: #6366F1 !important;
        margin-left: 16px !important;
        cursor: pointer !important;
}
.courseFHome-white .courseF-tt .courseF-right[data-v-9ce7aa7c] .courseF-btn-blue {
        width: auto !important;
        height: 40px !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        border-radius: 6px !important;
        background-color: #6366F1 !important;
        border: 1px solid #6366F1 !important;
        font-size: 14px !important;
        color: #FFF !important;
        cursor: pointer !important;
        margin-left: 16px !important;
}
.courseFHome-white .courseF-tt .courseF-right[data-v-9ce7aa7c] .courseF-btn-blue:hover {
        background-color: #818CF8 !important;
        border-color: #818CF8 !important;
}
.courseFHome-white .courseF-tt .courseF-right[data-v-9ce7aa7c] .courseF-btn-blue.is-disabled {
        background-color: #A5B4FC !important;
        border-color: #A5B4FC !important;
        color: rgba(255, 255, 255, 0.7) !important;
        cursor: not-allowed !important;
        opacity: 0.7 !important;
}
.courseFHome-white .courseF-content[data-v-9ce7aa7c] {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: start;
}
.courseFHome-white .courseF-content .courseF-every[data-v-9ce7aa7c] {
      width: 25%;
      box-sizing: border-box;
      padding: 0 14px;
      margin-bottom: 36px;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block[data-v-9ce7aa7c] {
        width: 100%;
        transition: transform 0.3s ease;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        cursor: pointer;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block .courseF-choose-border[data-v-9ce7aa7c] {
          width: 100%;
          box-sizing: border-box;
          padding: 14px 16px;
          display: none;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block .courseF-img[data-v-9ce7aa7c] {
          width: 100%;
          height: 100%;
          z-index: 1;
          transition: transform 0.3s ease;
          position: absolute;
          top: 0;
          left: 0;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block .courseF-mask[data-v-9ce7aa7c] {
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.4);
          position: absolute;
          left: 0;
          top: 0;
          z-index: 3;
          display: none;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block .courseF-play[data-v-9ce7aa7c] {
          transform: scale(0);
          opacity: 0;
          transform-origin: center center;
          transition: transform 0.2s ease;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0);
          z-index: 4;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block[data-v-9ce7aa7c]:not(.courseF-block-selectMode):hover {
        transform: translateY(-6px);
        box-shadow: 0px 6px 12px -4px rgba(0, 0, 0, 0.1), 0px 16px 25px -3px rgba(0, 0, 0, 0.1);
}
.courseFHome-white .courseF-content .courseF-every .courseF-block:not(.courseF-block-selectMode):hover .courseF-img[data-v-9ce7aa7c] {
          transform: scale(1.05);
}
.courseFHome-white .courseF-content .courseF-every .courseF-block:not(.courseF-block-selectMode):hover .courseF-mask[data-v-9ce7aa7c] {
          display: block;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block:not(.courseF-block-selectMode):hover .courseF-play[data-v-9ce7aa7c] {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
}
.courseFHome-white .courseF-content .courseF-every .courseF-block-disabled:hover .courseF-play[data-v-9ce7aa7c] {
        display: none;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block-selectMode[data-v-9ce7aa7c] {
        /* 核心：禁止用户选中元素内容 */
        user-select: none;
        /* 兼容旧版浏览器（webkit 内核，如 Chrome、Safari 早期版本） */
        -webkit-user-select: none;
        /* 兼容 Firefox 早期版本 */
        -moz-user-select: none;
        /* 兼容 IE/Edge 早期版本 */
        -ms-user-select: none;
        border: 1px solid #E5E7EB;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block-selectMode .courseF-choose-border[data-v-9ce7aa7c] {
          display: flex;
          justify-content: start;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block-selectMode .courseF-choose-border .courseF-uncheck[data-v-9ce7aa7c],
          .courseFHome-white .courseF-content .courseF-every .courseF-block-selectMode .courseF-choose-border .courseF-checked[data-v-9ce7aa7c] {
            margin-right: 8px;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block-selectMode .courseF-choose-border .courseF-checked[data-v-9ce7aa7c] {
            display: none;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block-selectMode-active[data-v-9ce7aa7c] {
        border: 1px solid #6366F1;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block-selectMode-active .courseF-choose-border .courseF-uncheck[data-v-9ce7aa7c] {
          display: none;
}
.courseFHome-white .courseF-content .courseF-every .courseF-block-selectMode-active .courseF-choose-border .courseF-checked[data-v-9ce7aa7c] {
          display: block;
}
.courseFHome-white .courseF-content .courseF-every .courseF-img-border[data-v-9ce7aa7c] {
        width: 100%;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        overflow: hidden;
        position: relative;
        height: 0;
        padding-top: 56.25%;
        overflow: hidden;
}
.courseFHome-white .courseF-content .courseF-every .courseF-img-border .courseF-xian[data-v-9ce7aa7c] {
          width: 72px;
          height: 28px;
          background-color: #00C8B3;
          box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          font-weight: bold;
          font-size: 12px;
          line-height: 12px;
          color: #FFF;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 12px;
          top: 12px;
          z-index: 2;
}
.courseFHome-white .courseF-content .courseF-every .courseF-white[data-v-9ce7aa7c] {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
}
.courseFHome-white .courseF-content .courseF-every .courseF-white .courseF-white-tt[data-v-9ce7aa7c] {
          font-size: 16px;
          color: rgba(0, 0, 0, 0.9);
          font-weight: bold;
          line-height: 24px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-break: break-all;
}
.courseFHome-white .courseF-content .courseF-every .courseF-white .courseF-bottom[data-v-9ce7aa7c] {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 16px;
}
.courseFHome-white .courseF-content .courseF-every .courseF-white .courseF-bottom[data-v-9ce7aa7c] .courseF-bottom-btn {
            width: 79% !important;
            height: 40px !important;
            box-sizing: border-box !important;
            padding: 0 !important;
            cursor: pointer !important;
            border-radius: 6px !important;
            background-color: #6366F1 !important;
            color: #FFF !important;
}
.courseFHome-white .courseF-content .courseF-every .courseF-white .courseF-bottom[data-v-9ce7aa7c] .courseF-bottom-btn:hover {
            background-color: #818CF8 !important;
            border-color: #818CF8 !important;
}
.courseFHome-white .courseF-content .courseF-every .courseF-white .courseF-bottom .courseF-bottom-btn.is-disabled[data-v-9ce7aa7c],
          .courseFHome-white .courseF-content .courseF-every .courseF-white .courseF-bottom .courseF-bottom-btn.is-disabled[data-v-9ce7aa7c]:hover {
            background-color: #D6D6D6 !important;
            color: #666 !important;
            cursor: not-allowed !important;
}
.courseFHome-white .courseF-content .courseF-every .courseF-white .courseF-bottom img[data-v-9ce7aa7c] {
            width: 30px;
            height: 30px;
            display: block;
}
[data-v-9ce7aa7c] .courseF-page-border {
  width: 100%;
  margin-top: 24px;
  box-sizing: border-box;
  padding: 0 14px;
  text-align: right;
}
[data-v-9ce7aa7c] .courseF-page-border .pro-page .number {
    border-radius: 3px !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
    font-weight: 400;
}
[data-v-9ce7aa7c] .courseF-page-border .pro-page .btn-prev,[data-v-9ce7aa7c] .courseF-page-border .pro-page .btn-next {
    border: none;
}
[data-v-9ce7aa7c] .courseF-page-border .pro-page .active {
    background-color: #736EFE !important;
    color: #FFF !important;
}
[data-v-9ce7aa7c] .courseF-page-border .pro-page .el-input__inner {
    border-radius: 3px !important;
}
@media only screen and (max-width: 1549px) {
.courseFHome-white[data-v-9ce7aa7c] {
    padding-left: 50px;
    padding-right: 50px;
}
.courseFHome-white .courseF-content .courseF-every[data-v-9ce7aa7c] {
      padding-left: 10px;
      padding-right: 10px;
}
.courseF-xian[data-v-9ce7aa7c] {
    width: 70px !important;
    height: 28px !important;
}
[data-v-9ce7aa7c] .courseFHome-white .courseF-content .courseF-every .courseF-white .courseF-bottom img {
    width: 26px !important;
    height: 26px !important;
}
[data-v-9ce7aa7c] .courseFHome-white .courseF-content .courseF-every .courseF-white .courseF-bottom .courseF-bottom-btn {
    height: 34px !important;
}
.courseF-play[data-v-9ce7aa7c] {
    width: 54px;
    height: 54px;
}
}
@supports (aspect-ratio: 16/9) {
.courseF-img-border[data-v-9ce7aa7c] {
    aspect-ratio: 16/9 !important;
    height: auto !important;
    padding-top: 0 !important;
}
.courseF-img-border .courseF-img[data-v-9ce7aa7c] {
      position: relative !important;
}
}