@import "../base/utils.scss";
@import "../base/variables";

@mixin setStyleCFramePage($project) {

  //author: TX  describe: c端页面通用布局 证书   /* 完成 */
  .management-content-c {
    // 容器外侧margin限定
    @extend %mta-wrap;
    // 具备筛选容器 居中
    @include mta-c-wrap-middle;
    // 高级筛选
    @include mta-showMore-btn;
    // 字体设置
    @include font-size-media-cframe(-5);
    // 设置分页
    @include mta-pagination;

    // 状态操控
    &.showMore {
      position: relative;

      .mta-c-kaoshi-lists {
        margin-top: 132px;
      }

      .mta-showMore-box {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        position: absolute;
        background: #FFF;
        padding: 30px 0;
        left: 0;
        top: -20px;
        z-index: 999;
        width: 100%;
        border-radius: 8px;
      }

      .model {
        position: absolute;
        background-color: rgba(36, 35, 35, .8);
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 888;
        border-radius: 8px;
      }

    }

    // 响应式 input 搜索
    @include cframe-el-input__inner;
  }

  //  describe: 自主练习list author: Wgy date:2019-11-27 /* 完成 */
  .mta-c-exercise {

    // 容器外侧margin限定
    @extend %mta-wrap;

    // 查询input 选择容器
    @include mta-select-input-wrap;

    // 查询lable
    @include mta-c-label;

    // 查询 nav
    //@include mta-search-nav-area;

    // 查询宽度 input 第一列宽度
    @include search-input-first-row;

    // 主体容器 高度 + card
    @include mta-c-main-card-wrap(390px, 0);

    // 遮罩 后高度 媒体响应式联动计算
    &.showMore {
      // 主体容器 高度 + card
      @include mta-c-main-card-wrap(360px, 108px);
      @include mediaMax(large) {
        @include mta-c-main-card-wrap(352px, 100px);
      }
      @include mediaMax(small) {
        @include mta-c-main-card-wrap(346px, 94px);
      }
    }

    // 查询导航nav
    @include mta-c-search-nav;
  }

  //  describe: 错题list author: Wgy date:2019-11-28 /* 完成 */
  .mta-c-cuoti-lists {
    // 容器外侧margin限定
    /*@extend %mta-wrap;
    // 日历组件
    @include mta-data-wrap;

    // 查询lable
    @include mta-c-label;
    // 查询input 选择容器
    @include mta-select-input-wrap;
    // 错题select 选择容器
    @include mta-select-wrap;

    // 查询宽度 input 第一列宽度
    @include search-input-first-row;*/

    // 主体 + card
    @include mta-c-main-card-wrap(400px, 0);
    // 遮罩 后高度 媒体响应式联动计算
    &.showMore {
      // 主体容器 高度 + card
      @include mta-c-main-card-wrap(250px, 120px);
      @include mediaMax(large) {
        @include mta-c-main-card-wrap(252px, 108px);
      }
      @include mediaMax(small) {
        @include mta-c-main-card-wrap(250px, 99px);
      }
    }

  }

  // describe: 错题page
  .mta-c-cuoti-page {
    // 设置字体
    @include font-size-media-cframe(-6);

    .mta-cuoti-page--title {
      text-align: center;

      h3 {
        margin: 24px 0 0;
        text-align: center;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(100% - 60px);
        @include font-size-media-cframe(4);
        @include mediaMax(large) {
          margin: 16px 0 0;
        }
        @include mediaMax(small) {
          margin: 10px 0 0;
        }
      }
    }

    .mta-cuoti-page--tabs {
      @extend %page-margin;
      $component-bg-color: rgba(60, 150, 255, 0.39);

      .exam-area-border {
        overflow: hidden;

        .exam-area {
          height: calc(100vh - 365px);

          /*.paragraph {
            width: 100%;
            display: flex;
            flex-flow: column nowrap;
            align-items: stretch;

            .paragraph-c {
              min-height: 300px;
              background-color: white;
              margin-bottom: 15px;
              display: flex;
              flex-flow: column nowrap;
              align-items: stretch;

              .qa {
                margin-bottom: 0;

                .qa-title {
                  height: 80px;
                  line-height: 80px;
                  @include font-size-media-cframe(-4);
                  font-weight: bold;
                  margin-left: 15px;
                }

                .qa-line {
                  margin-left: 0;
                  margin-top: 30px;
                }

                .qa-content {
                  width: calc(90% - 30px);
                  float: left;
                  padding-left: 15px;
                  padding-right: 15px;
                  padding-bottom: 5px;
                }

                .qa-mark {
                  text-align: right;
                  padding-top: 0;
                  padding-right: 15px;
                  width: calc(10% - 15px);
                  float: left;

                  .el-button {
                    background: #FFA111;
                    border-color: #FFA111;

                    &:hover, &:active {
                      background: #F09810;
                      border-color: #F09810;
                    }
                  }
                }
              }
            }
          }*/
          @include mta-c-paragraph(1);

          img {
            max-width: 700px;
            @include mediaMax(large) {
              max-width: 600px;
            }
            @include mediaMax(small) {
              max-width: 500px;
            }

          }
        }
      }
    }
  }
  .mta-cuoti-page--tabs .el-tabs__header {
    margin: 0 0 0px;
  }
  .mta-cuoti-page--tabs .el-tabs__item {
    height: 50px;
    line-height: 50px;
  }

  //  describe: 证书管理list author: Wgy date:2019-11-29 /* 完成 */
  .mta-certificate {
    // 容器外侧margin限定
   /* @extend %mta-wrap;
    // 查询lable
    @include mta-c-label;
    // 查询select 选择容器
    @include mta-select-wrap;
    // 查询input 选择容器
    @include mta-select-input-wrap;
    // 日历组件
    @include mta-data-wrap;

    // 查询宽度 input 第一列宽度
    @include search-input-first-row;*/

    // 主体 list
    @include mta-c-main-card-wrap(400px, 0);

    // 遮罩 后高度 媒体响应式联动计算
    &.showMore {
      // 主体容器 高度 + card
      @include mta-c-main-card-wrap(370px, 120px);
      @include mediaMax(large) {
        @include mta-c-main-card-wrap(360px, 108px);
      }
      @include mediaMax(small) {
        @include mta-c-main-card-wrap(350px, 99px);
      }
    }
  }

  //  describe: 公告管理list author: Wgy date:2019-11-29 /* 完成 */
  .mta-noticeManagement {
    // 容器外侧margin限定
    @extend %mta-wrap;
    // 日历组件
    @include mta-data-wrap;
    // 查询lable
    @include mta-c-label;

    // 查询宽度 input 第一列宽度
    @include search-input-first-row;

    // 主体 table
    @include mta-c-main-card-wrap2(420px, 0);
    .mta-c-main-lists {
      margin-top:0;
    }
    // 内容：table body区域
    .mta-table-content {
      margin: 0 30px 0 0;

      @include mediaMax(large) {
        margin: 0 30px 0 0;
      }

      @include mediaMax(small) {
        margin: 0 30px 0 0;
      }
    }
  }

  //  describe: 公告详情 author: Wgy date:2019-11-29
  .mta-c-notice-page {
    // 容器外侧margin限定
    @extend %mta-wrap;

    .mta-notice-page {
      padding: 30px 10px 30px 50px;
      height: calc(100vh - 270px);
      text-align: left;

      h3 {
        margin-bottom: 0;
        text-align: center;
      }

      h5 {
        color: #999;
        margin-top: 15px;
        margin-bottom: 25px;
        text-align: center;
      }

      div {
        @include font-size-media-cframe(-6);
        text-align: justify;
        line-height: 2;

        img {
          max-width: 1280px;
          height: auto;
        }

        p {
          text-align: left;
        }
      }
    }

  }

  /*****author: TX  describe:考试中心*****/
  /* 完成 */
  .mta-c-kaoshi-management {

    // 搜索条件lable
    //@include mta-c-label;

    // 查询input 选择容器
    @include mta-select-input-wrap;

    // 查询 nav
    //@include mta-search-nav-area;

    //考试须知弹窗
    @include mta-c-notice;

    // 清理浮动
    @include mta-c-clearFix;

    // 主体容器 高度 + card
    @include mta-c-main-card-wrap(385px, 0);

    // 遮罩 后高度 媒体响应式联动计算
    &.showMore {
      // 主体容器 高度 + card
      @include mta-c-main-card-wrap(360px, 108px);
      @include mediaMax(large) {
        @include mta-c-main-card-wrap(352px, 100px);
      }
      @include mediaMax(small) {
        @include mta-c-main-card-wrap(346px, 94px);
      }
    }

    // 查询宽度 input 第一列宽度
    @include search-input-first-row;

    // 查询导航
    @include mta-c-search-nav;

    .mta-first-row {
      display: flex;
      flex-direction: row;

      .mta-c-kaoshi-select-input {
        @extend %page-margin;
        width: 180px;
      }
    }

    .mta-two-row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

    }

    //弹窗样式
    .el-dialog__body {
      overflow: auto;
    }

  }

  //  describe: 考试中心Exam。vue author: Wgy date:2019-12-02
  .st-exam {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    font-family: PingFangSC-Regular;

    .c-breadcrumb-box{
      margin-bottom: 8px;
      @media screen and (max-width: 1600px){
        margin-bottom: 8px;
      }
      @media screen and (max-width: 1440px) {
        margin-bottom: 8px;
      }
    }
    .exam-t {
      height: 26px;
      border-radius: 10px;
      margin: 8px 15px 0 15px;
      padding: 0;
      text-align: center;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      @include font-size-media-cframe(3);
    }

    .m-c {
      margin: 0 auto;
      width: $screen-limit-width;
      height: calc(100vh - 220px);

      .exam-container {
        width: 100%;
        height: calc(100% - 90px);
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        background: #fff;
        border-radius: 0 0 5px 5px;

        .el-button--default:focus, .el-button--default:hover{
          @include setThemeColorBase("color", 1);
          @include setThemeColorBase('background-color', -4);
          @include setThemeColorBase('border-color', -2);
        }
        .exam-area-border {
          width: 80%;
          height: calc(100% - 20px);
          margin: 15px;
          border: 1px solid #CCC;
          background-color: #F0F0F0;
          border-radius: 10px;
          overflow: hidden;

          .exam-area {
            height: calc(100vh - 340px);

            /*.paragraph {
              width: 100%;
              display: flex;
              flex-flow: column nowrap;
              align-items: stretch;

              .paragraph-t {
                height: 48px;
                line-height: 48px;
                text-align: left;
                padding-left: 30px;
                color: #333;
                letter-spacing: 2px;
                border-radius: 10px 10px 0 0;
              }

              .paragraph-c {
                min-height: 300px;
                background-color: white;
                border-radius: 0 0 10px 10px;
                padding: 15px;
                margin-bottom: 15px;
                display: flex;
                flex-flow: column nowrap;
                align-items: stretch;

                .qa {
                  margin-bottom: 0;

                  .qa-title {
                    height: 80px;
                    line-height: 80px;
                    //@include setFontBase(-3);
                    @include font-size-media-cframe(-3);
                    font-weight: bold;
                    margin-left: 15px;
                  }

                  .qa-line {
                    margin-left: 0;
                    margin-top: 30px;
                  }

                  .qa-content {
                    width: calc(90% - 15px);
                    float: left;
                    padding-left: 15px;
                    padding-bottom: 5px;
                  }

                  .qa-mark {
                    text-align: center;
                    padding-top: 0;
                    padding-right: 0;
                    width: calc(10% - 15px);
                    float: left;

                    .el-button {
                      background: #FFA111;
                      border-color: #FFA111;
                      @include font-size-media-cframe(-5);

                      &:hover, &:active {
                        background: #F09810;
                        border-color: #F09810;
                      }
                    }
                  }
                }
              }

              .paragraph-btns {
                text-align: center;
              }
            }*/
            @include mta-c-paragraph(2);

            img {
              max-width: 700px;

              @include mediaMax(large) {
                max-width: 600px;
              }
              @include mediaMax(small) {
                max-width: 500px;
              }
            }
          }
        }

        .answer-paper-area-border {
          width: 20%;
          height: calc(100% - 20px);
          margin: 15px;
          border: 1px solid #CCC;
          border-radius: 10px;
          display: flex;
          flex-flow: column nowrap;
          align-items: stretch;
          position: relative;
          overflow: hidden;

          .clock {
            margin-left: 10px;
          }

          .userShow {
            @include font-size-media-cframe(-6);
            margin: 24px 0 22px 24px;
            @include mediaMax(large) {
              margin: 20px 0 18px 24px
            }
            @include mediaMax(small) {
              margin: 16px 0 14px 20px
            }
          }

          .progress {
            margin: 15px 30px 15px 10px;

            .progress-number {
              width: 100%;
              text-align: center;
              font-family: Arial;
            }
          }

          .answer-card {
            margin: 0 15px 0 15px;
            height: calc(100% - 330px);
            display: flex;
            flex-flow: column nowrap;
            align-items: stretch;
            background-color: white;

            @include mediaMax(large) {
              height: calc(100% - 290px);
            }
            @include mediaMax(small) {
              height: calc(100% - 240px);
            }



            .sperate-line {
              clear: both;
              width: 80%;
              margin-top: 15px;
              margin-left: 5%;
              margin-bottom: 15px;
            }

            .answer-card-row {
              .answer-card-title {
                @include font-size-media-cframe(-6);
                margin-left: 5px;
                //margin-bottom: 15px;
                min-height: 30px;
                line-height: 30px;
              }

              .answer-block-hold {
                width: 30px;
                height: 30px;
                float: left;
                //margin-bottom: 15px;

                .answer-block {
                  @include font-size-media-cframe(-9);
                  width: 20px;
                  height: 20px;
                  border-radius: 3px;
                  margin-left: 5px;
                  margin-right: 5px;
                  transition: all 0.2s;
                }

                .answer-block:hover {
                  width: 22px;
                  height: 22px;
                  margin-left: 4px;
                  margin-right: 4px;
                  margin-top: -1px;
                  box-shadow: -1px -1px 3px #89A0FF;
                  transform: rotate(180deg);
                }


                .answer-block-mark {
                  color: white;
                  background-color: #FFA111;
                  border: 1px solid #FFA111;
                  box-shadow: 1px 1px 3px #FEA111;
                }

                .answer-block-mark:hover {
                  background-color: #FFA111;
                }

                .answer-block-init {
                  background-color: white;
                  border: 1px solid #CCC;
                  box-shadow: 1px 1px 3px #CCC;
                }
              }

            }
          }

          .buttons {
            padding: 15px 0;
            margin: 0;
            text-align: center;
            position: absolute;
            bottom: 0;
            width: 100%;
            background: #fff;
          }
        }
      }
    }

    .el-progress-bar__outer {
      background-color: #F0F0F0;
    }

    .el-progress-bar__innerText {
      margin-top: -4px;
    }

    .hide {
      display: none;
    }

  }
  .mta-lianxi-page.st-exam {

    .m-c {

      .exam-container {

        .answer-paper-area-border {

          .answer-card {
            height: 100%;
          }
        }
      }
    }

    .span_has_p {
      p, h1, h2 {
        margin: 0;
      }
    }

  }
  /*****author: TX  describe:登录*****/
  .mta-c-login {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    line-height: 0;

    .demo-ruleForm3 {
      margin-left: -20px;
    }

    .mta-login-left {
      width: 60%;
      flex: 1;
    }

    .mta-login-right {
      width: 40%;
      display: flex;
      text-align: center;
      background: rgba(255, 255, 255, 1);
      min-width: 600px;

      .mta-login-content {
        opacity: 1;
        background: rgba(255, 255, 255, 1);
        //padding: 120px 22px;
        min-width: 85%;

        @include mediaMax(large) {
          //padding: 40px 22px;
        }
        @include mediaMax(small) {
          //padding: 30px 22px;
        }

      }

      .mta-login-title {
        p {
          margin: 20px 0 120px 10px;
          @include setFontBase(31);
          letter-spacing: 5px;
          line-height: 56px;

          @include mediaMax(large) {
            @include setFontBase(21);
            margin: 20px 0 80px 10px;
            line-height: 44px;
          }
          @include mediaMax(small) {
            @include setFontBase(11);
            margin: 20px 0 50px 10px;
            line-height: 34px;
          }
        }
      }

      .logo-box {
        //width: 400px;
        height: auto;
        max-height: 180px;
        margin: 0 0 30px 0;
        overflow: hidden;

        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }

    .mta-ModelLoginBg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: -1;
      overflow: hidden;
      background-repeat: no-repeat;
      background-position-x: left;
      background-position-y: center;
      background-size: 100% 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .verification {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .el-button {
        margin-left: 20px;
      }

    }

    //右侧div表格
    .el-form.login-ruleForm {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .nc-container {
      width: calc(100% - 80px);
      margin: 0 0 20px 80px;

      > div {
        width: auto !important;
      }

    }

    .login-ruleForm {
      .el-form-item {
        width: 90%;
        margin-bottom: 30px;

        .el-input {
          .el-input__inner {
            color: #333;
            //font-size: 18px;
            //@include setFontBase(-1);
            @include font-size-media-cframe(-1);
            margin-left: 5px;
            padding-left: 50px;
            background: transparent;
            border: 0;
            border-radius: 0;
            border-bottom: 1px solid #0D0D0D;

            ::-webkit-input-placeholder {
              color: #666;
            }
          }

          .el-input__prefix {
            // font-size: 22px;
            // @include setFontBase(3);
            @include font-size-media-cframe(3);
            padding: 0 10px;
            color: #FFF;
            height: 100%;
            background: #FFF;
          }

          .el-input__icon {
            width: 26px;
          }
        }
      }

      .el-form-item.is-success .el-input__inner {
        border-color: #75C653;
      }

      .el-form-item.is-error .el-input__inner {
        border-color: #F5859A;
      }

      .el-form-item__error {
        margin-left: 50px;
        //font-size: 14px;
        //@include setFontBase(-5);
        @include font-size-media-cframe(-5);
      }

      label.el-form-item__label, span.el-checkbox__label {
        color: #FFF;
      }

      label.el-checkbox {
        padding: 12px 16px;
      }

      .mta-login-check {
        margin-top: 40px;

        .el-button {
          margin-left: 0;
          width: 300px;
          //font-size: 20px;
          //@include setFontBase(1);
          @include font-size-media-cframe(1);
          letter-spacing: 5px;
        }
      }

      .mta-login-btns {
        width: 300px;
        margin: 0 auto;

        > div:first-child {
          text-align: left;

          .el-button {
            padding: 20px 0 20px 10px;
            text-decoration: underline;
          }
        }

        > div:last-child {
          text-align: right;

          .el-button {
            padding: 20px 10px 20px 0;
            text-decoration: underline;
          }
        }

      }

      .el-form-item__label {
        text-align: left;
      }


      .el-icon-user-solid:before {
        background: url("../../../assets/images/icons/fa-c-login.svg");
        content: '';
        width: 22px;
        height: 22px;
        display: block;
        margin-top: 8px;
        color: #FFF;
      }

      .el-icon-lock:before {
        background: url("../../../assets/images/icons/fa-c-passIcon.svg");
        content: '';
        width: 22px;
        height: 22px;
        display: block;
        margin-top: 8px;
        color: #FFF;
      }

      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus,
      input:-webkit-autofill:active {
        -webkit-transition-delay: 9999999999999s;
        -webkit-transition: color 9999999999999s ease-out, background-color 999999999999s ease-out;
      }

      .el-icon-user-solid::before, .el-icon-lock::before {
        width: 26px;
        height: 26px;
      }
    }

    .p-ips-red {
      //@include setFontBase(-5);
      @include font-size-media-cframe(-6);
      margin-left: 25px;
      color: red;
      line-height: 14px;
      @include mediaMax(large) {
        line-height: 12px;
      }
      @include mediaMax(small) {
        line-height: 10px;
      }
    }

    .p-ips-ml {
      margin-left: 47px;
    }
  }

  /*****author: TX  describe:注册*****/
  .mta-Register {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #F2F2F2;
    height: 100vh;

    .nc-container {
      width: calc(100% - 100px);
      margin: 0 0 20px 100px;
    }

    .verification {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .el-button {
        margin-left: 20px;
      }

    }

    .RegisterTop {
      height: 80px;
      line-height: 80px;
      padding: 0 12%;

      > p {
        display: inline-block;
        margin: 10px auto;

        > img {
          width: 100px;
          max-height: 60px;
        }
      }
    ;
    }

    .mta-R-wrap {
      background: #FFF;
      flex: 1;
      border-radius: 5px;
      padding: 30px 50px;
      /*margin: 3% 14%;*/
      display: flex;
      flex-direction: column;
      margin: 40px auto;
      width: 600px;
      min-width: 600px;

      > h1 {
        text-align: center;
        color: #333;
        //font-size: 24px;
        //@include setFontBase(5);
        @include font-size-media-cframe(5);
        margin-bottom: 40px;
      }

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

      .el-button--primary {
        padding: 10px 50px;
      }

      .el-table {
        flex: 1;
      }

      .el-pagination {
        margin-top: 15px;
      }

      .el-autocomplete {
        margin-right: 20px;
      }

      .el-select {
        width: 100%;
      }
    }

    //注册
    .Set_password {
      margin-left: 100px;
      margin-bottom: 20px;
      background: #D7D7D7;
      color: #FFF;
      display: flex;

      span {
        text-align: center;
        display: inline-block;
        height: 26px;
        line-height: 26px;
        color: #FFF;
        //font-size: 14px;
        //@include setFontBase(-5);
        @include font-size-media-cframe(-5);
        flex: 1
      }

      .high {
        background: #6C6;
      }

      .medium {
        background: #F90;
        flex: 2;
      }

      .low {
        background: #F33;
      }
    }

    .accounts {
      display: flex;
      text-align: right;
      color: #FFF;
      text-decoration: underline;
      cursor: pointer;
      float: right;
      @include font-size-media-cframe(-5);

      span {
        color: #FE990C;
      }

    }

  }

  /*****author: TX  describe:首页*****/
  /* 完成 */
  .mta-index  {
    width: 100%;
    min-width: $screen-limit-width;
    height: calc(100vh - 60px);
    //height: auto;

    // 考试须知
    @include mta-c-notice;
    // 清理浮动
    @include mta-c-clearFix;

    .mta-index-warp {
      margin: -480px auto 30px;
      border-radius: 5px;
      min-width: $screen-limit-width;
      width: $screen-limit-width;
      //background-color: white;
      .index-el-box {
        background: #fff;
        padding-top: 50px;
        margin-top: -30px;
      }

      //最新考试
      .mta-lists-content {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 8px;

        .mta-kaoshi-card {
          width: 300px;
          margin: 0 15px;
        }

        .mta-kaoshi-default {
          margin-left: 15px;
          transition: all 0.3s;

          .examImage {
            width: 260px;
            height: 283px;
            overflow: hidden;
          }
        }

        .mta-kaoshi-default:hover {
          cursor: pointer;
          transform: translateY(-10px);
        }
      }
      // 每日一练
      .mta-lists-lianxi-content {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 8px;

        .mta-lianxi-card {
          width: 300px;
          margin: 0 15px;
        }

        .mta-lianxi-default {
          margin:0 auto;
          transition: all 0.3s;

          .lianxiImage {
            width: 260px;
            height: 250px;
            overflow: hidden;
          }
        }

        .mta-lianxi-default:hover {
          cursor: pointer;
          transform: translateY(-10px);
        }
      }
      // 最热课程
      .mta-lists-kecheng-content {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 8px;

        .mta-kecheng-card {
          width: 300px;
          margin: 0 15px;
        }

        .mta-kecheng-default {
          margin:0 auto;
          transition: all 0.3s;

          .kechengImage {
            width: 260px;
            height: 250px;
            overflow: hidden;
          }
        }

        .mta-kecheng-default:hover {
          cursor: pointer;
          transform: translateY(-10px);
        }
      }
      // 最新考试 培训 首页
      .mta-lists-kaoshi-content {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 8px;

        .mta-kaoshi-card {
          width: 300px;
          margin: 0 15px;
        }

        .mta-kaoshi-default {
          margin:0 auto;
          transition: all 0.3s;

          .kaoshiImage {
            width: 260px;
            height: 250px;
            overflow: hidden;
          }
        }

        .mta-kaoshi-default:hover {
          cursor: pointer;
          transform: translateY(-10px);
        }
      }
      //用户信息
      .information-box {
        width: min-content;
        max-width: 1200px;
        min-width: 850px;
        min-height: 80px;
        margin: 0 auto;
        background: #FFF;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        border-radius: 8px;
        padding: 30px;
        position: relative;
        //IE11兼容
        @media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
          width: 1000px;
        }

        .in-box-left {
          margin: 0 5px;
          width: 100px;
          text-align: center;
          float: left;

          .indexImage {
            width: 75px;
            height: 75px;
            border-radius: 6px;
            overflow: hidden;
          }
        }

        .in-box-right {
          min-width: 875px;
          margin: 0 5px;
          margin-left: 120px;
          // font-size: 18px;
          // @include setFontBase(-1);
          @include font-size-media-cframe(-1);
          color: #333;
          cursor: default;


          .el-div {
            display: inline-block;
            min-width: 200px;
            height: 40px;
            line-height: 40px;
            padding-right: 10px;

          }
        }
      }

      //自主练习
      .notice-box {
        margin-right: 16px;

        .notice-warp {
          height: 140px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
          border-radius: 8px;
          padding: 30px;

          .notice-left {
            width: 200px;
            height: 136px;
            float: left;

            .noticeImage {
              width: 180px;
              height: 136px;
              border-radius: 8px;
              overflow: hidden;

            }
          }

          .notice-right {
            ul {
              margin: 8px 0;
              margin-left: 210px;

              li {
                color: #333;
                // font-size: 16px;
                // @include setFontBase(-3);
                @include font-size-media-cframe(-3);
                line-height: 30px;
                height: 30px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }

              li:before {
                content: "";
                display: inline-block;
                width: 10px;
                height: 10px;
                background-color: #848484;
                border-radius: 50%;
                margin-right: 8px;
              }

              li.active, li:hover {
                //color: #2D6BFF;
                @include setThemeColorBase('color', 1);
                cursor: pointer;
              }

              li.active:before, li:hover:before {
                //background: #2D6BFF;
                @include setThemeColorBase('background', 1);
              }
              .mta-notice-unread-li:before{
                background-color: #FF5448;
              }
              .mta-notice-read-li:before{
                background-color: #848484;
              }

              .mta-notice-unread-li.active:before, .mta-notice-unread-li:hover:before {
                background-color: #FF5448!important;
              }

              .mta-notice-read-li.active:before, .mta-notice-read-li:hover:before {
                background-color: #848484!important;
              }
            }
          }
        }
        //公告数字图标
        .notice-index-icon{
          background: #FF5551;
          display: inline-block;
          width: auto;
          height: auto;
          position: absolute;
          top: 0px;
          left: 20px;
          border-radius: 8px;
          padding: 0 3px;

          em {
            min-width: 8px;
            display: inherit;
            font-size: 12px;
            border-radius: 6px;
            text-align: center;
            color: #fff;
            font-style: normal;
            font-family: Arial,"PingFang SC","Microsoft YaHei";
            font-weight: normal;
            line-height: 14px;
          }
        }
      }

      .practice-box {
        margin-right: 0;
        margin-left: 16px;
      }
    }

    .circular {
      display: inline-block;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      //background-color: #2196F5;
      @include setThemeColorBase('background-color', 1);
      margin-right: 5px;
    }

    //bannner
    .index-banner {
      width: 100%;
      height: 557px;
      //position: relative;
      overflow: hidden;
      background-position: center;

      //自动缩放
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: top;
      background-size: 100% 100%;
    }

    //index标题
    .index-title {
      width: 100%;
      margin: 0 15px 24px;
      color: #333;
      height: 35px;
      line-height: 35px;

      @include mediaMax(large) {
        margin: 0 $base-size * 1.3 $base-size * 2;
      }

      @include mediaMax(small) {
        margin: 0 $base-size * 1 $base-size * 1.8;
      }

      span {
        float: left;
        //font-size: 24px;
        @include font-size-media-cframe(5);
        color: #333;
      }

      a {
        float: right;
        //font-size: 20px;
        @include font-size-media-cframe(1);

        cursor: pointer;

        i {
          width: 11px;
          height: 11px;
          background-image: url("../../../assets/images/client/more-icon.svg");
          float: right;
          margin-top: 12px;
          margin-left: 10px;
          -webkit-background-size: cover;
          background-size: cover;
        }
      }


      i {
        width: 32px;
        height: 32px;
        float: left;
        margin-right: 16px;
        margin-top: 1px;
        -webkit-background-size: cover;
        background-size: cover;
        @include mediaMax(large) {
          width: $width-base * 3;;
          height: $height-base * 3;;
          float: left;
          margin-right: $base-size * 1.4;
          margin-top: 1px;
        }
        @include mediaMax(small) {
          width: $width-base * 2.8;;
          height: $height-base * 2.8;;
          float: left;
          margin-right: $base-size * 1.2;
          margin-top: 1px;
        }
      }

      .exam {
        background-image: url("../../../../public/img/client/exam-icon.svg");
      }
      .kecheng {
        background-image: url("../../../../public/img/client/kecheng-icon.svg");
      }
      .notice {
        background-image: url("../../../../public/img/client/notice-icon.svg");
      }

      .practice {
        background-image: url("../../../../public/img/client/practice-icon.svg");
      }
    }

    .notice-title {
      margin-left: 0;
    }

    .notice-row {
      padding: 0 0 60px;
    }

    .el-dialog__body {
      overflow: auto;
    }
  }

  /*****author: WGY describe:首页*****/
  /* 复制TX */
  .mta-index-peixun  {
    width: 100%;
    min-width: $screen-limit-width;
    height: calc(100vh - 60px);
    //height: auto;

    // 考试须知
    @include mta-c-notice;
    // 清理浮动
    @include mta-c-clearFix;

    .mta-index-warp {
      margin: 20px auto 30px;
      border-radius: 5px;
      min-width: $screen-limit-width;
      width: $screen-limit-width;
      //background-color: white;
      .index-el-box {
        background: #fff;
        padding: 32px 32px 0;
        margin-top: 20px;
        border-radius: 8px;
      }

      //最新考试
      .mta-lists-content {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0 8px;

        .mta-kaoshi-card {
          width: 300px;
          margin: 0 20px 20px 10px;
        }

        .mta-kaoshi-default {
          margin-left: 15px;
          transition: all 0.3s;

          .examImage {
            width: 260px;
            height: 283px;
            overflow: hidden;
          }
        }

        .mta-kaoshi-default:hover {
          cursor: pointer;
          transform: translateY(-10px);
        }
      }
      // 每日一练
      .mta-lists-lianxi-content {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        margin-right: -34px;
        min-height: 265px;

        .mta-lianxi-card {
          width: 300px;
          margin: 0 20px 20px 10px;
        }

        /*.mta-lianxi-default {
          margin:0 auto;
          transition: all 0.3s;

          .lianxiImage {
            width: 260px;
            height: 250px;
            overflow: hidden;
          }
        }

        .mta-lianxi-default:hover {
          cursor: pointer;
          transform: translateY(-10px);
        }*/
      }
      // 最热课程
      .mta-lists-kecheng-content {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        margin-right: -34px;
        min-height: 265px;

        .mta-kecheng-card {
          width: 300px;
          margin: 0 20px 20px 10px;
        }
      }
      .mta-kecheng-default {
        margin:20px auto;
        text-align: center;
        .kechengImage {
          /*width: 260px;
          height: 250px;*/
          max-width: 100%;
          overflow: hidden;
        }
        .kechengText{
          text-align:center;
          color: #999;
          font-size: 20px;
          margin-top: 15px;
          font-weight: normal;
        }
      }
      // 最新考试 培训 首页
      .mta-lists-kaoshi-content {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        margin-right: -34px;
        min-height: 265px;

        .mta-kaoshi-card {
          width: 300px;
          margin: 0 20px 20px 10px;
        }

        /*.mta-kaoshi-default {
          margin:0 auto;
          text-align: center;

          .kaoshiImage {
            max-width: 100%;
          }
        }*/
      }
      //用户信息
      .information-box {
        width: min-content;
        max-width: 1200px;
        min-width: 850px;
        min-height: 80px;
        margin: 0 auto;
        background: #FFF;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        border-radius: 8px;
        padding: 30px;
        position: relative;
        //IE11兼容
        @media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
          width: 1000px;
        }

        .in-box-left {
          margin: 0 5px;
          width: 100px;
          text-align: center;
          float: left;

          .indexImage {
            width: 75px;
            height: 75px;
            border-radius: 6px;
            overflow: hidden;
          }
        }

        .in-box-right {
          min-width: 875px;
          margin: 0 5px;
          margin-left: 120px;
          // font-size: 18px;
          // @include setFontBase(-1);
          @include font-size-media-cframe(-1);
          color: #333;
          cursor: default;


          .el-div {
            display: inline-block;
            min-width: 200px;
            height: 40px;
            line-height: 40px;
            padding-right: 10px;

          }
        }
      }

      //自主练习
      .notice-box {
        margin-right: 16px;

        .notice-warp {
          height: 140px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
          border-radius: 8px;
          padding: 30px;

          .notice-left {
            width: 200px;
            height: 136px;
            float: left;

            .noticeImage {
              width: 180px;
              height: 136px;
              border-radius: 8px;
              overflow: hidden;

            }
          }

          .notice-right {
            ul {
              margin: 8px 0;
              margin-left: 210px;

              li {
                color: #333;
                // font-size: 16px;
                // @include setFontBase(-3);
                @include font-size-media-cframe(-3);
                line-height: 30px;
                height: 30px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }

              li:before {
                content: "";
                display: inline-block;
                width: 10px;
                height: 10px;
                background-color: #848484;
                border-radius: 50%;
                margin-right: 8px;
              }

              li.active, li:hover {
                //color: #2D6BFF;
                @include setThemeColorBase('color', 1);
                cursor: pointer;
              }

              li.active:before, li:hover:before {
                //background: #2D6BFF;
                @include setThemeColorBase('background', 1);
              }
              .mta-notice-unread-li:before{
                background-color: #FF5448;
              }
              .mta-notice-read-li:before{
                background-color: #848484;
              }

              .mta-notice-unread-li.active:before, .mta-notice-unread-li:hover:before {
                background-color: #FF5448!important;
              }

              .mta-notice-read-li.active:before, .mta-notice-read-li:hover:before {
                background-color: #848484!important;
              }
            }
          }
        }
        //公告数字图标
        .notice-index-icon{
          background: #FF5551;
          display: inline-block;
          width: auto;
          height: auto;
          position: absolute;
          top: 0px;
          left: 20px;
          border-radius: 8px;
          padding: 0 3px;

          em {
            min-width: 8px;
            display: inherit;
            font-size: 12px;
            border-radius: 6px;
            text-align: center;
            color: #fff;
            font-style: normal;
            font-family: Arial,"PingFang SC","Microsoft YaHei";
            font-weight: normal;
            line-height: 14px;
          }
        }
      }

      .practice-box {
        margin-right: 0;
        margin-left: 16px;
      }
    }

    .circular {
      display: inline-block;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      //background-color: #2196F5;
      @include setThemeColorBase('background-color', 1);
      margin-right: 5px;
    }

    //bannner
    .index-banner {
      width: 100%;
      height: 250px;
      overflow: hidden;
      background-image: url("../../../assets/images/client/c-peixun-banner.png");
      //自动缩放
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: top;
    }

    //index标题
    .index-title {
      width: 100%;
      margin-bottom: 16px;
      margin-right: 30px;
      color: #333;
      height: 33px;
      line-height: 33px;

      span {
        float: left;
        //font-size: 24px;
        @include font-size-media-cframe(1);
        color: #333;
      }

      a {
        float: right;
        //font-size: 20px;
        @include font-size-media-cframe(1);

        cursor: pointer;

        i {
          width: 11px;
          height: 11px;
          background-image: url("../../../assets/images/client/more-icon.svg");
          float: right;
          margin-top: 12px;
          margin-left: 10px;
          -webkit-background-size: cover;
          background-size: cover;
        }
      }
      a:hover{
        @include setThemeColorBase("color", 1);
        i {
          background-image: url("../../../assets/images/client/more-h-icon.svg");
        }
      }


      i {
        width: 32px;
        height: 32px;
        float: left;
        margin-right: 16px;
        margin-top: 1px;
        -webkit-background-size: cover;
        background-size: cover;
        @include mediaMax(large) {
          width: $width-base * 3;;
          height: $height-base * 3;;
          float: left;
          margin-right: $base-size * 1.4;
          margin-top: 1px;
        }
        @include mediaMax(small) {
          width: $width-base * 2.8;;
          height: $height-base * 2.8;;
          float: left;
          margin-right: $base-size * 1.2;
          margin-top: 1px;
        }
      }

      .exam {
        background-image: url("../../../../public/img/client/exam-icon.svg");
      }
      .kecheng {
        background-image: url("../../../../public/img/client/kecheng-icon.svg");
      }
      .notice {
        background-image: url("../../../../public/img/client/notice-icon.svg");
      }

      .practice {
        background-image: url("../../../../public/img/client/practice-icon.svg");
      }
    }

    .notice-title {
      margin-left: 0;
    }

    .notice-row {
      padding: 0 0 60px;
    }

    .el-dialog__body {
      overflow: auto;
    }
  }


  /*****author: TX  describe:成绩*****/
  /* 完成 */
  .mta-scoreManagement {

    // 容器外侧margin限定
    @extend %mta-wrap;

    // 日历组件
    //@include mta-data-wrap;

    // 查询lable
    //@include mta-c-label;

    // 查询select 选择容器
    @include mta-select-wrap;

    // 查询input 选择容器
    @include mta-select-input-wrap;

    // 主体容器 高度 + card
    @include mta-c-main-card-wrap(400px, 0);

    // 遮罩 后高度 媒体响应式联动计算
    &.showMore {
      // 主体容器 高度 + card
      @include mta-c-main-card-wrap(252px, 120px);
      @include mediaMax(large) {
        @include mta-c-main-card-wrap(256px, 108px);
      }
      @include mediaMax(small) {
        @include mta-c-main-card-wrap(260px, 98px);
      }
    }

    // 查询宽度 input 第一列宽度
    @include search-input-first-row;


  }

  /*****author: TX  describe:成绩-查看试卷-papers*****/
  .mta-c-score-page {
    @include font-size-media-cframe(-5);

    .mta-cuoti-page--title {
      text-align: center;

      h3 {
        height: 26px;
        margin: 12px;
        margin-bottom: 0;
        padding: 10px;
        text-align: center;
        //font-size: 24px;
        @include font-size-media-cframe(4);
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(100% - 60px);
      }
    }

    .mta-cuoti-page--tabs {
      @extend %page-margin;
      //$component-bg-color: rgba(60, 150, 255, 0.39);

      .exam-area-border {
        border: 1px solid #CCC;
        margin-bottom: 24px;
        border-radius: 10px;
        overflow: hidden;
        width:calc(1366px - 64px);

        .exam-area {
          height: calc(100vh - 325px);
          /*.paragraph {
            width: 100%;
            display: flex;
            flex-flow: column nowrap;
            align-items: stretch;

            .paragraph-t {
              height: 48px;
              line-height: 48px;
              text-align: left;
              padding-left: 30px;
              color: #333;
              letter-spacing: 2px;
              border-radius: 10px 10px 0 0;
            }

            .paragraph-c {
              min-height: 300px;
              background-color: white;
              border-radius: 0 0 10px 10px;
              padding: 15px;
              margin-bottom: 15px;
              display: flex;
              flex-flow: column nowrap;
              align-items: stretch;

              .qa {
                margin-bottom: 0;

                .qa-title {
                  height: 80px;
                  line-height: 80px;
                  //@include setFontBase(-3);
                  @include font-size-media-cframe(-3);
                  font-weight: bold;
                  margin-left: 15px;
                }

                .qa-line {
                  margin-left: 0;
                  margin-top: 30px;
                }

                .qa-content {
                  width: calc(90% - 30px);
                  float: left;
                  padding-left: 15px;
                  padding-right: 15px;
                  padding-bottom: 5px;
                }

                .qa-mark {
                  text-align: right;
                  padding-top: 0;
                  padding-right: 15px;
                  width: calc(10% - 15px);
                  float: left;
                }
              }
            }
          }*/
          @include mta-c-paragraph(2);

          img {
            max-width: 700px;
            @include mediaMax(large) {
              max-width: 600px;
            }
            @include mediaMax(small) {
              max-width: 500px;
            }
          }
        }
      }

    }
  }

  /*****学分统计*****/
  /* 完成 */
  .mta-credManagement {
    // 容器外侧margin限定
    @extend %mta-wrap;
    // 日历组件
    @include mta-data-wrap;

    // 主体 容器 + table
    @include mta-c-main-card-wrap2(450px, 0);

    // 查询宽度 input 第一列宽度
    @include search-input-first-row;

    // 总学分
    .total {
      margin: 20px 30px 10px;
      @include font-size-media-cframe(-5);
      font-weight: bolder;
      color: #333;
      @media screen and (max-width: 1600px)  {
        margin: 20px 20px 10px 20px;
      }
      @media screen and (max-width: 1440px)  {
        @include setFontBase(-6);
      }
    }

  }

  /*****课程中心-视频*****/
  .c-px-section-info {
    height: calc(100vh - 60px);
    width: 100%;

    .c-main {
      box-sizing: border-box;
      border-radius: 5px;
      min-width: 1366px;
      max-width: 1366px;
      background-color: white;
      padding: 32px 32px 0;
      margin: 32px auto;
      overflow: hidden;
      min-height: calc(100vh - 174px);

      .card-list-wxy7 {
        min-height: calc(100vh - 406px);
      }

      .ml_32 {
        margin-right: 32px;
      }

      .mt_16 {
        margin-top: 16px;
      }

      .my-pagination-wxy6 {
        margin: 0 auto 32px;
        text-align: center;

      }
      .c-lesson-info{
        h2{
          margin: 0;
          font-size: 16px;
          margin-bottom: 8px;
          color: #333;
        }
        .c-lesson-info-box{
          font-size: 14px;
          margin-bottom: 24px;
          color: #666;
        }
      }
      .c-lesson-h1{
        color: #050505;
        border-bottom: 1px solid #ccc;
        height: 30px;
        margin-top: 32px;
        margin-bottom: 16px;
        font-size: 16px;
      }
    }
    .c-lesson-box{
      .c-px-player-box{
        height: calc(100vh - 320px);
        display: flex;
        justify-content: space-between;
        position: relative;
        .play-board{
          width: 100%;
          overflow: hidden;
          border-radius: 8px 0 0 8px;
          border: 1px solid #46464a;
          box-sizing: border-box;
          iframe{
            width: calc(100% - 10px);;
            height: 100vh;
            border: 0;
          }
          .circular{
            background: transparent;
          }
          //视频高度
          .video-player{
            .video-js{
              height: calc(100vh - 322px);
              .vjs-control.vjs-close-button .vjs-icon-placeholder:before {
                content: "\F115";
                color: #545454;
                font-size: 24px;
                opacity: 0.7;
              }
            }
          }
        }
      }

      .menu-list{
        width: 340px;
        height: 100%;
        background-color: #323335;
        color: rgba(255, 255, 255, 0.7);
        transition: all 0.9s;
        cursor: pointer;
        flex-shrink: 0;
        position: relative;
        padding: 24px 0 0;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 0 8px 8px 0;
        font-weight: normal;
        .ps--active-y{
          height: calc(100% - 20px);
        }
        .menu-list-ul{
          margin: 0;
          li{
            display: flex;
            justify-content: space-between;
            padding: 8px 26px 8px 54px;
            font-size: 14px;
            span i{
              width: 6px;
              height: 6px;
              display: inline-block;
              background: #dad5d5;
              border-radius: 5px;
              margin-right: 8px;
              vertical-align: middle;
            }
            .courseware-title{
              width: auto;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-right: 10px;
              display: inline-block;
              vertical-align: middle;
            }
            .courseware-data{
              flex-shrink: 0;
            }
          }
          li.active{
            @include setThemeColorBase("color", 0);
            background: #46464a;
            span i{
              @include setThemeColorBase("background", 0);
            }
          }
          li:hover{
            background: #46464a;
            color: #fff;
            span i{
              background: #fff;
            }
          }
        }
        h3{
          margin: 0;
          padding-left: 26px;
          font-size: 16px;
          margin-bottom: 10px;
        }
        .menu-chapter{
          font-size: 14px;
          color: #fff;
          font-weight: normal;
          border-top: 1px solid rgb(70, 70, 74);
          padding: 8px 0;
          margin: 0 26px;
        }

        .menu-section{
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          font-weight: normal;
          padding: 8px 20px 8px 34px;
        }
          }

      //第一章不带线
      .perfect-box div:first-of-type{
        .menu-chapter:first-of-type{
          border: 0;
        }
      }
          .menu-icon{
            display: block;
            background-color: #46464a;
            width: 20px;
            height: 40px;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            right: 320px;
            z-index: 1000;
            border-radius: 0 20px 20px 0;
            transition: all 0.9s;
            >i{
              background-image: url("../../../assets/images/icons/px-arrow-right.svg");
              width: 6px;
              height: 12px;
              background-repeat: no-repeat;
              margin-top: 14px;
              margin-left: 6px;
              display: block;
            }
            >i.el-icon-tickets{
              background-image: url("../../../assets/images/icons/px-arrow-left.svg");
            }
            >i:before{
              content: "";
            }
          }
      }
    //分页
    .c-section-el-pagination{
      text-align: center;
      padding: 14px;
    }
    .c-mta-discuss{margin-right: -20px;}
    .c-discuss-btn{
      margin-bottom: 16px;
    }
    @media screen and (max-width: 1600px){
      .c-main {
        padding: 28px 28px 0;
      }
    }
    @media screen and (max-width: 1440px){
      .c-main {
        padding: 24px 24px 0;
        .c-lesson-info{
          h2{
            font-size: 15px;
          }
          .c-lesson-info-box{
            font-size: 13px;
            margin-bottom: 16px;
          }
        }
        .c-lesson-h1{
          height: 24px;
          margin-top: 20px;
          margin-bottom: 14px;
          font-size: 15px;
        }
        .c-discuss-btn{
          margin-bottom: 14px;
        }
      }
      .c-lesson-box{
        .menu-list{
          padding: 16px 0;
          .menu-list-ul{
            li{
              padding: 6px 16px 6px 44px;
              font-size: 13px;
              span i{
                width: 6px;
                height: 6px;
                margin-right: 6px;
              }
            }
          }
          h3{
            padding-left: 24px;
            font-size: 15px;
            margin-bottom: 8px;
          }
          .menu-chapter{
            font-size: 13px;
            padding: 6px 0;
          }
          .menu-section{
            font-size: 13px;
            padding: 6px 10px 6px 24px;
          }
        }
      }
    }
  }

  /*****课程中心-评论*****/
  .PX-kecheng-Details-Page {
    height: calc(100vh - 60px);
    width: 100%;
    @include mta-c-notice;
    .main {
      box-sizing: border-box;
      border-radius: 5px;
      min-width: 1340px;
      max-width: 1340px;
      background-color: white;
      padding: 32px 32px 0;
      margin: 32px auto;
      overflow: hidden;

      .card-list-wxy7 {
        min-height: calc(100vh - 406px);
      }

      .ml_32 {
        margin-right: 32px;
      }

      .mt_16 {
        margin-top: 16px;
      }

      .my-pagination-wxy6 {
        margin: 0 auto 32px;
        text-align: center;

      }
      //大纲
      .c-dagang-tab{
        min-height: calc(100vh - 353px);
      }
      //评论
      .c-mta-discuss{
        min-height: calc(100vh - 409px);
      }
      //考试tab
      .c-kaoshi-tab{
        min-height: calc(100vh - 353px);
        display: flex;
        flex-wrap: wrap;
        margin-right: -34px;
      }
      //详情tab
      .c-xiangqing-box{
        min-height: calc(100vh - 367px);
        font-size: 14px;
        line-height: 20px;
        img{
          max-width: 100%;
        }
      }
    }
    //tab
    .kecheng-Details-tabs{
      .c-discuss-btn{
        margin-bottom: 16px;
      }
      .el-tabs__item{
        font-size: 16px;
        font-weight: bold;
      }
      .el-tabs__header{
        margin-bottom: 24px;
      }
    }

    .page-top {
      display: flex;
      justify-content: space-between;

      .c-details-right {
        .el-image{
          width: 180px;
          height: 90px;
          max-height: 90px;
          border-radius: 4px;
          overflow: hidden;
        }
      }

      .c-details-left {
        flex: 1;
        margin-right: 50px;
        .c-details-left_Title {
          >div{
            color: #262626;
            font-size: 16px;
            margin-bottom: 16px;
          }
        }
      }
      .c-details-left_Title_info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #666;
        margin-bottom: 16px;
      }

    }

    .c-details-satisfaction {
      display: flex;
      >span{
        width: 70px;
        text-align: right;
        margin-bottom: 10px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
      }
    }
    //发表评论弹窗
    .c-detail-content-info{
      display: flex;
      justify-content: space-between;
      >span{
        flex-shrink: 0;
        width: 70px;
        font-size: 14px;
      }
    }
    //分页
    .c-kecheng-el-pagination{
      text-align: center;
      padding: 14px;
    }
    @media screen and (max-width: 1440px){
      .page-top{
        .c-details-left {
          .c-details-left_Title {
            >div{
              font-size: 15px;
            }
          }
        }
        .c-details-left_Title_info{
          font-size: 13px;
        }
      }
    }
  }
  //弹窗
  .c-details-dialog{
    .c-details-box{
      max-height: 600px;
      overflow: auto;
    }
  }

  /*****课程中心-考试*****/
  .kecheng-exam{
    height: calc(100vh - 80px);
    margin: 20px 0 0;
    .m-c{
      margin-bottom: 20px;
      border-radius: 5px;
      background-color: white;
      height: calc(100vh - 135px);
      .exam-container .exam-area-border .exam-area{
        height: calc(100vh - 270px);
      }
    }
  }

  /*****个人中心*****/
  .c-personal-center-page{
    padding: 32px 32px;
    margin-top: 0;

    //考试须知弹窗
    @include mta-c-notice;

    //页面头部信息栏
    .page-head{
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      .page-head-box{
        display: flex;
      }
      //用户头像
      .page-head-img{
        width: 72px;
        height: 72px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #ccc;
        >img{
          width: 100%;
          height: 72px;
        }
      }
      //用户信息
      .page-head-info{
        padding-left: 20px;
        h1{
          @include setFontBase(-1);
          margin: 14px 0;
        }
        p{
          @include setFontBase(-5);
          color: #666;
        }
        .info-line{
          height: 14px;
          width: 1px;
          background: #e3e3e3;
          margin: 0 8px;
          display: inline-block;
          vertical-align: bottom;
        }
      }
      //按钮
      .page-head-btn{
        display: flex;
        align-items: center;
        .el-button:active {
          @include setThemeColorBase("border-color", 0);
        }
      }
    }

    //tab
    .personal-center-tab{
      //左侧tab栏
      .el-tabs__header{
        width: 190px;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        padding: 10px 0;
        margin-right: 32px;
        min-height: 265px;
        height: calc(100vh - 586px);
        .el-tabs__item{
          border-bottom: 1px solid #e3e3e3;
          margin: 0 20px;
          padding: 0;
          text-align: center;
          @include setFontBase(-3);
          height: 50px;
          line-height: 50px;
        }
        .el-tabs__item:last-child{
          border-bottom:0;
        }
      }
      //tab右侧边线隐藏
      .el-tabs__active-bar.is-left, .el-tabs__nav-wrap.is-left::after{
        display: none;
      }
      //右侧tab内容区
      .el-tabs__content{
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        min-height: 260px;
        height: calc(100vh - 380px);
        position: relative;
      }
    }

    //个人中心-状态选择栏
    .personal-center-state-box{
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      padding: 20px 24px;
      height: 20px;
      line-height: 20px;
      margin-bottom: 16px;
      border-bottom: 1px solid #e3e3e3;
      .state-label {
        min-width: 70px;
        @include setFontBase(-3);
        display: inline-block;
      }

      .state-line {
        height: 20px;
        width: 1px;
        background: #e3e3e3;
        margin:0 16px;
      }
      .state-menu{
        margin-left: 24px;
          >span{
            @include setFontBase(-3);
            margin-right:24px;
          }
        //课程
        .personalCenterIndex{
          @include setThemeColorBase("color", 1);
        }
      }
      .state-menu:hover{
        cursor: pointer;
      }
    }
    //个人中心-card-box-外层滚动条
    .personal-center-card-box{
      height: calc(100vh - 540px);
    }

    //分页
    .c-personal-center-pagination{
        text-align: center;
        padding: 24px 0;
        position: absolute;
        width: 100%;
        background: #fff;
        bottom: 0;
        margin: 0;
    }

    @media screen and (max-width: 1600px) {
      padding: 24px 24px;
      //页面头部信息栏
      .page-head{
        margin-bottom: 12px;
      }

      //tab
      .personal-center-tab{
        //左侧tab栏
        .el-tabs__header{
          width: 180px;
          margin-right: 24px;
        }
      }

      //分页
      .c-personal-center-pagination{
        padding: 16px 0;
      }
    }
    @media screen and (max-width: 1440px) {
      padding: 16px 16px;
      //页面头部信息栏
      .page-head{
        margin-bottom: 10px;
        //用户头像
        .page-head-img{
          width: 66px;
          height: 66px;
          >img{
            height: 66px;
          }
        }
        //用户信息
        .page-head-info{
          padding-left: 16px;
          h1{
            @include setFontBase(-3);
          }
          p{
            @include setFontBase(-7);
          }
        }
      }

      //tab
      .personal-center-tab{
        //左侧tab栏
        .el-tabs__header{
          width: 160px;
          margin-right: 16px;
          min-height: 280px;
          .el-tabs__item{
            height: 44px;
            line-height: 44px;
            @include setFontBase(-5);
          }
        }

        //右侧tab内容区
        .el-tabs__content{
          min-height: 300px;
          height: calc(100vh - 330px);
        }
      }

      //个人中心-状态选择栏
      .personal-center-state-box{
        padding: 12px 24px;
        margin-bottom: 12px;
        .state-label {
          @include setFontBase(-5);
        }
        .state-menu{
          margin-left: 16px;
          >span{
            @include setFontBase(-5);
            margin-right:16px;
          }
        }
      }

      //个人中心-card-box-外层滚动条
      .personal-center-card-box{
        height: calc(100vh - 450px);
      }

      //分页
      .c-personal-center-pagination{
        padding: 10px 0;
      }
    }
  }

  /*****证书 mta-certinfo*****/
  .mta-certinfo{
    .certinfo-box{
      width: 100%;
      margin: 30px auto 0;
    }
    .canvas-container{
      margin: 0 auto;
    }
  }

  /***** 互动问答 *****/
  .question-and-answer {

    .question-reply {
      border: 1px solid #e3e3e3;
      margin-bottom: 20px;
      border-radius: 8px;
      padding: 14px 35px 0;
      margin-right: 32px;
      .reply-top {
        display: flex;
        justify-content: flex-start;
        .q-left{
          >span{
            width: 28px;
            height: 28px;
            margin-right: 8px;
            img{
              display: block;
              height: 100%;
              vertical-align: middle;
            }
          }
        }
        .q-right {
          width: 100%;
          .q-name{
            min-width: 70px;
            border-bottom: 1px solid #e3e3e3;
            color: #333;
            @include setFontBase(-6);
            padding: 0 8px;
            height: 25px;
            display: inline-block;
          }
          .q-content{
            @include setFontBase(-6);
            color: #666;
            padding: 16px 8px 0;
            line-height: 20px;
            word-break: break-all;
          }
          .q-btns {
            margin: 14px 8px;
            @include setFontBase(-6);
            display: flex;
            justify-content: space-between;
            .q-btns-left {
              .el-button--text{@include setThemeColorBase("color", 0);}
              .el-button {
                padding: 0;
              }
            }

            .q-time {
              color: #666;
            }
          }
        }
      }

      .reply-bottom {
        margin-left: 30px;
      }

      .q-answer {
        border: 1px solid #e3e3e3;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 20px;
        border-radius: 8px;
        min-height: 86px;
        margin-right: 0;
        padding: 10px 0 0 35px;
        .q-left{
          >span{
            width: 28px;
            height: 28px;
            margin-right: 8px;
            img{
              display: block;
              height: 100%;
              vertical-align: middle;
            }
          }
        }
        .q-right {
          width: 100%;

          .q-name{
            min-width: 70px;
            border-bottom: 1px solid #e3e3e3;
            color: #333;
            @include setFontBase(-6);
            padding: 0 8px;
            height: 25px;
            display: inline-block;
          }
          .q-content{
            @include setFontBase(-6);
            color: #666;
            padding: 16px 8px 0;
            line-height: 20px;
            word-break: break-all;
          }
          .q-btns {
            margin: 14px 8px;
            @include setFontBase(-6);
            display: flex;
            justify-content: space-between;
            .q-btns-left {
              .el-button {
                padding: 0;
              }
            }

            .q-time {
              color: #666;
            }
          }
        }
      }
    }
    @media screen and (max-width: 1600px){
      .question-reply {
        padding: 14px 24px 0;
      }
    }
    @media screen and (max-width: 1440px){
      .question-reply {
        padding: 14px 16px 0;
        .reply-top {
          .q-right {
            .q-name{
              @include setFontBase(-7);
            }
            .q-content{
              @include setFontBase(-7);
            }
            .q-btns {
              @include setFontBase(-7);
            }
          }
        }

        .q-answer {
          .q-right {

            .q-name{
              @include setFontBase(-7);
            }
            .q-content{
              @include setFontBase(-7);
            }
            .q-btns {
              @include setFontBase(-7);
            }
          }
        }
      }
    }
  }
  .mta-c-question-answer-page{
    padding: 32px 32px 0;
    box-sizing: border-box;
    //搜索栏
    .mta-c-question-answer-box{
      .response-c-search{
        margin: 0 20px 0 0;
      }
      .question-btn:hover{
        @include setThemeColorBase("color", 0);
        @include setThemeColorBase("border-color", 0);
        @include setThemeColorBase("background-color", -4);
      }
    }
    //问答列表
    .answer-list-box{
      height: calc(100vh - 370px);
      overflow: auto;
      margin-right: -32px;

      .no-Data-Show-defaultImg {
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        div {
          text-align: center;
          margin: 0 auto;
        }
        p{
          text-align: center;
          color: #999;
          @include setFontBase(0);
          margin-top: 24px;
          font-weight: normal;
        }
      }
    }
    .q-answer {
      border: 1px solid #e3e3e3;
      display: flex;
      justify-content: flex-start;
      margin-bottom: 20px;
      border-radius: 8px;
      min-height: 86px;
      margin-right: 0;
      padding: 10px 0 0 35px;
      .q-left{
        >span{
          width: 28px;
          height: 28px;
          margin-right: 8px;
          img{
            display: block;
            height: 100%;
            vertical-align: middle;
          }
        }
      }
      .q-right {
        width: 100%;

        .q-name{
          min-width: 70px;
          border-bottom: 1px solid #e3e3e3;
          color: #333;
          @include setFontBase(-6);
          padding: 0 8px;
          height: 25px;
          display: inline-block;
        }
        .q-content{
          @include setFontBase(-6);
          color: #666;
          padding: 16px 8px 0;
          line-height: 20px;
          word-break: break-all;
        }
        .q-btns {
          margin: 14px 8px;
          @include setFontBase(-6);
          display: flex;
          justify-content: space-between;
          .q-btns-left {
            .el-button--text{
              @include setThemeColorBase("color", 0);
            }
            .el-button {
              padding: 0;
            }
          }

          .q-time {
            color: #666;
          }
        }
      }
    }
    //分页
    .el-pagination{
      text-align: center;
      padding: 14px;
    }
    @media screen and (max-width: 1600px){
      padding: 24px 24px 0;
    }
    @media screen and (max-width: 1440px){
      padding: 16px 16px 0;
      //搜索栏
      .mta-c-question-answer-box{
        .question-btn{
          padding: 10px 16px;
        }
      }
      .q-answer {
        .q-right {

          .q-name{
            @include setFontBase(-7);
          }
          .q-content{
            @include setFontBase(-7);
          }
          .q-btns {
            @include setFontBase(-7);
          }
        }
      }
      //问答列表
      .answer-list-box{
        .no-Data-Show-defaultImg {
          p{
            @include setFontBase(-2);
          }
        }
      }
    }
  }

}
