nuxtProject/assets/scss/cus-client/cus-client-page.scss

@import "../base/utils";
@import "cus-client-common";

@mixin setClientPage() {
  /********  describe: 网站首页  author: TX  date:2020-07-30  ********/
  .client-index-page{
     width: 100%;
    /* 网站banner */
    .client-index-banner{
      width: 100%;
      height: 395px;
      background-color:#031073;
      background-image: url("~static/images/client/index/index-banner-background.png");
      background-position-x: center;
      background-repeat: no-repeat;
    }
    /* banner-box */
    .client-banner-box{
        .el-carousel__container{height: 640px;cursor: pointer;}
        .el-carousel__item{
          .index-carousel-box{width:100%;height: 640px;display: block;background-position: center;background-repeat: no-repeat;background-color: #a49d9b;}
        }
    }

    /* 发展历程 - 移动端隐藏*/
    .client-company-history{
      background:#f8f8f8;
        li{
          width: 25%;display: inline-block;text-align: center;
          i{width: 40px;height: 40px;display: inline-block;background-size: cover;margin-right: 16px;vertical-align: middle;}
          a{
            border-right:2px solid #e5e5e5;margin: 24px 0;display: block;
            div{display: inline-block;text-align: left;vertical-align: middle;}
            span{@include setFontStyle(-4);color: #333;margin-bottom: 10px;display: block;}
            p{@include setFontStyle(-4);color: #666;}
          }

        }
        li:last-child a{border-right: 0;}
    }
    li:nth-child(1){i{background-image: url("~static/images/client/index/company-history-icon1.png");}}
    li:nth-child(2){i{background-image: url("~static/images/client/index/company-history-icon2.png");}}
    li:nth-child(3){i{background-image: url("~static/images/client/index/company-history-icon3.png");}}
    li:nth-child(4){i{background-image: url("~static/images/client/index/company-history-icon4.png");}}

    /* 产品和服务 */
    .client-products-services{
      .client-title{
        margin-bottom: 48px;
      }
    }


    /* 行业学习需求 */
    .client-demand-box{
      .demand-list-box{
        margin-top: 24px;
        li{width: 25%;display: inline-block;margin: 34px 0;text-align: center;cursor: default;}
        span{width: 100px;height: 100px;border-radius: 50%;display: inline-block;text-align: center;transition: .3s;}
        i{width: 60px;height: 60px;background-size: cover;display: inline-block;margin-top: 20px;}
        p{font-weight: 700;font-size: 20px;color: rgb(16, 16, 16);margin: 12px 0;}
        li:nth-child(1){
          span{background-color: rgb(0, 150, 136);}
          i{background-image: url("~static/images/client/index/index-demand-icon1.png");}
        }
        li:nth-child(2){
          span{background-color: rgb(255, 152, 0);}
          i{background-image: url("~static/images/client/index/index-demand-icon2.png");}
        }
        li:nth-child(3){
          span{background-color: rgb(234, 73, 79);}
          i{background-image: url("~static/images/client/index/index-demand-icon3.png");}
        }
        li:nth-child(4){
          span{background-color: rgb(64, 158, 255);}
          i{background-image: url("~static/images/client/index/index-demand-icon4.png");}
        }
        li:nth-child(5){
          span{background-color: rgb(255, 128, 108);}
          i{background-image: url("~static/images/client/index/index-demand-icon5.png");}
        }
        li:nth-child(6){
          span{background-color: rgb(179, 111, 238);}
          i{background-image: url("~static/images/client/index/index-demand-icon6.png");}
        }
        li:nth-child(7){
          span{background-color: rgb(72, 97, 132);}
          i{background-image: url("~static/images/client/index/index-demand-icon7.png");}
        }
        li:nth-child(8){
          span{background-color: rgb(160, 212, 104);}
          i{background-image: url("~static/images/client/index/index-demand-icon8.png");}
        }
        li:hover{
          span{transform: translateY(-8px);;}
        }
      }
    }

    /* 超过10万家客户的信任之选 */
    .client-customer-box{
      .customer-img-box{
        padding-bottom: 80px;
        li{
          width: 20%;
          display: inline-block;
        }
        img{margin: 48px 30px 0;transition: all 0.5s;}
        li:hover{
          img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
        }
      }
    }

    /* 新闻资讯 */
    .client-news-information {
      background: rgb(248, 248, 248);
      padding-bottom: 80px;

      .industry-information-box {
        margin-top: 48px;
        h4{color: #333;}
        h4:hover {cursor: pointer;color: #3e7ce7;}
        // 左
        .industry-information-left {
          width: 520px;
          margin-right: 80px;
          display: inline-block;
          vertical-align: top;
          color: #333;
          div {float: left;border-right: 1px solid #dbdbea;padding: 8px 16px 8px 0;}
          img {width: 520px;height: 210px;margin-bottom: 42px;}
          h4 {@include setFontStyle(-2);margin-bottom: 16px;}
          i{width:25px;height:12px;float:right;background-image:url("~static/images/client/index/news-information-icon.png")}
          p {@include setFontStyle(-6);height: 68px;line-height: 22px;padding: 2px 0 0 16px;text-align: justify;@include multi-line-ellipsis(3);}
          b {@include setFontStyle(-4);font-weight: normal;display: block;margin-bottom: 16px;}
          span {@include setFontStyle(-6);display: block;color: #666;}
        }

        // 右
        .industry-information-right {
          width: 590px;
          display: inline-block;
          vertical-align: top;

          li {border-bottom: 1px solid #ccc;margin-bottom: 16px;}
          li:last-child {border: 0;}
          h4 {@include setFontStyle(-4);@include single-line-ellipsis;margin-bottom: 12px;}
          p {@include setFontStyle(-6);color: #666;@include single-line-ellipsis;margin-bottom: 16px;}
          span {margin: 0 30px 0 10px;}
        }
      }
    }

    // 移动端手机尺寸（0-768）
    @media (max-width: 768px){
      /* 网站banner */
      .client-index-banner{height: 150px;}
      /* banner-box */
      .client-banner-box{
        .el-carousel__container{height: 150px;}
        .el-carousel__item .index-carousel-box{height: 150px;background-size: cover;}
        // 左箭头
        .el-carousel__arrow--left{display: none;}
        // 右箭头
        .el-carousel__arrow--right{display: none;}
        // 分页
        .el-carousel__button {width: 6px;height: 6px;border-radius: 3px;}
      }

      /* 产品和服务 */
      .client-products-services{
        .client-title{
          margin-bottom: 0;
        }
      }

      /* 新闻资讯 */
      .client-newsInfo-phone{
        background-color: rgb(238, 238, 238);
        // 轮播外层
        .el-carousel{
          padding: 20px 0 40px;
          // card
          .el-carousel__item{
            width: 80%;left: -15%;color: rgb(16, 16, 16);background: #fff;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;
            img{width: 100%;height: 135px;}
          }
          // 文字区域
          .newsInfo-card-content{
            padding: 24px 20px;
            h4{@include setFontStyle(-4);}
            span{@include setFontStyle(-8);margin-top: 16px;display: block}
            p{min-height: 48px;@include setFontStyle(-6);margin-top: 16px;@include multi-line-ellipsis(3);}
          }
        }

      }

      /* 超过10万家客户的信任之选 */
      .client-customer-box{padding-top: 50px;
        .customer-img-box{
          padding-bottom: 50px;
          li{width: 50%;text-align: center;}
          img{max-width:90%;margin: 10px 0;}
          li:hover{
            img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
          }
        }
      }

    }
  }

  /********  describe: 平台页面（考试平台、培训平台） author: TX  date:2020-08-12  ********/
  .client-platform-page{
      /* 网站banner */
      .client-platform-banner{
        width: 100%;
        height: 396px;
        background-color:#042D85;
        position: relative;
        div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
        .free-trial-default-btn{position: absolute;top:260px;left: 50%;margin-left: -119px;}
      }

    // 考试应用场景
    .client-scene-box{
      ul{
        margin-top: 24px;
        li{width: 25%;display: inline-block;margin: 24px 0;text-align: center;cursor: default;}
        span{width: 100px;height: 100px;border-radius: 50%;display: inline-block;text-align: center;transition: .3s;}
        i{width: 60px;height: 60px;background-size: cover;display: inline-block;margin-top: 20px;}
        p{font-weight: 700;font-size: 20px;color: rgb(16, 16, 16);margin: 12px 0;}
        li:nth-child(1){
          span{background-color: rgb(0, 150, 136);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon1.png");}
        }
        li:nth-child(2){
          span{background-color: rgb(255, 152, 0);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon2.png");}
        }
        li:nth-child(3){
          span{background-color: rgb(234, 73, 79);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon3.png");}
        }
        li:nth-child(4){
          span{background-color: rgb(64, 158, 255);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon4.png");}
        }
        li:nth-child(5){
          span{background-color: rgb(255, 128, 108);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon5.png");}
        }
        li:nth-child(6){
          span{background-color: rgb(179, 111, 238);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon6.png");}
        }
        li:nth-child(7){
          span{background-color: rgb(72, 97, 132);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon7.png");}
        }
        li:nth-child(8){
          span{background-color: rgb(160, 212, 104);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon8.png");}
        }
        li:nth-child(9){
          span{background-color: rgb(68, 70, 147);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon9.png");}
        }
        li:nth-child(10){
          span{background-color: rgb(174, 102, 66);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon10.png");}
        }
        li:nth-child(11){
          span{background-color: rgb(110, 87, 123);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon11.png");}
        }
        li:nth-child(12){
          span{background-color: rgb(116, 120, 124);}
          i{background-image: url("~static/images/client/exam/exam-scene-icon12.png");}
        }
        li:hover{
          span{transform: translateY(-8px);;}
        }
      }
    }

    // 轻松组织一场考试
    .platform-products-services{
      .client-title{margin-bottom: 46px;}
      .products-services-content{
        h5{margin: 0;}
        .client-btn-box {
          margin-top: 80px;
        }
      }
    }

    // 满足12大考试应用场景
    .client-examOrg-box{
      height: 560px;background-position: center;background-image: url("~static/images/client/exam/exam-org-bj.png");background-color: rgba(248, 248, 248, 0.8);background-blend-mode: overlay;background-position: center;
      .exam-dl-box{display: flex;justify-content: space-between;margin-top: 42px;}
      dt{font-weight: 400;font-size: 20px;color: rgba(0, 0, 0, 1);margin-bottom: 24px;}
      dd{font-weight: 400;font-size: 16px;color: rgba(0, 0, 0, 1);margin-bottom: 12px;}
      dd:before{width: 5px;height: 5px;background: #00aeba;content: '';display: inline-block;vertical-align: middle;margin-right: 6px;border-radius: 50%;}
      // 按钮
      .client-btn-box{
        text-align: center;margin-top: 42px;
        .client-default-Btn,.client-default-white-Btn {
          width: 150px;height: 40px;line-height: 40px;display: inline-block;background: #00aeba;border: 1px solid #00aeba;box-sizing: border-box;margin-right: 24px;
        }
        .client-default-white-Btn {background: #fff;color: #00aeba;margin-right: 0;}
      }

    }
  }

  /********  describe: 培训平台--图片（和考试默认图片不同） author: TX  date:2020-08-14  ********/
  .client-train-page{

    /* 网站banner */
    .client-platform-banner{
      background-color:#1F2772;
    }

  }

  /********  describe: 课程开发 author: TX  date:2020-08-24  ********/
  .client-course-page{
    /* 网站banner */
    .client-course-banner{
      width: 100%;
      height: 395px;
      background-color:#130C4F;
      background-position-x: center;
      background-repeat: no-repeat;
    }

    /* 调转菜单栏 */
    .course-service-nav{width: 100%;height: 72px;background: url("~static/images/client/course/course--nav-bg.png") repeat-x;padding-top: 15px;text-align: center;}
    .course-link-nav{
      width: 100%;height: 83px;background: #161B38;opacity: 0.9;
      a{width: 171px;height: 83px;line-height:83px;display: inline-block;@include setFontStyle(-2);color: #fff;text-align: center;}
      a:nth-child(1){background: #353c61;}
      a:nth-child(2){background: #38406a;}
      a:nth-child(3){background: #3c4775;}
      a:nth-child(4){width:174px;background: #404b81;}
      a:nth-child(5){background: #3c4775;}
      a:nth-child(6){background: #38406a;}
      a:nth-child(7){background: #353c61;}
    }

    // 申请方案按钮
    .free-trial-default-btn{width:230px;display: inline-block;margin: 0}
    // 联系我们按钮
    .course-apply-btn{background: #fff;color: #3e7ee7;border:1px solid #3e7ee7;box-sizing: border-box;margin-left: 36px;}

    /* PPT定制及美化、H5平面设计、视频后期处理 */
    .course-ppt-box,.course-H5-box,.course-videoPos-box{
      ul{margin: 48px 0;}
      li{display: inline-block;}
      li:not(:last-child){margin-right: 30px;}
      p{@include setFontStyle(-4);color: rgba(0, 0, 0, 0.65);margin-top: 24px;}
    }
    /* 视频后期处理 */
    .course-videoPos-box{
      padding-bottom: 80px;
      li:not(:last-child){margin-right: 80px;}
    }

    @media (max-width: 768px){
      /* 网站banner */
      .client-course-banner{height: 150px;background-size: cover;}
      // 菜单 ul
      .course-menu-ul{
        background: #fff;margin: 20px 0 0;
        li{width: 100px;height: 30px;line-height:30px;margin:0 10px;padding:0;border-radius:5px;border: 1px solid rgb(0, 102, 204);@include setFontStyle(-4);
          color: rgb(0, 102, 204);background: #fff;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);box-sizing: border-box}
        li.active{color: #fff;background: rgb(0, 102, 204);}
        li:hover{transform: none;}
      }

      // 内容区域
      .client-container{padding: 0;}

      // 申请方案按钮
      .free-trial-default-btn{width:122px;display: inline-block;margin: 0 0 54px;}
      // 联系我们按钮
      .course-apply-btn{margin-left: 16px;}

      /* PPT定制及美化、H5平面设计、视频后期处理 */
      .course-ppt-box,.course-H5-box,.course-videoPos-box{
        margin: 0 6%;
        ul{margin: 12px 0;}
        li{box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;margin-bottom: 20px;}
        li:not(:last-child){margin-right: 0;}
        img{max-width: 100%;}
        p{margin: 20px 0;}
      }

      /* 视频后期处理 */
      .course-videoPos-box{
        padding-bottom: 16px;
        img{height: 180px;}
      }
    }

  }

  /********  describe: 关于我们 author: TX  date:2020-08-07  ********/
  .client-aboutUs-page{

    // banner
    .aboutUs-banner{width: 100%;height: 305px;background-image: url("~static/images/client/aboutUs/aboutUs-banner-bg.png");
        span{width: 1200px;overflow: hidden;display: block;margin: 0 auto;}
        img{width: 1200px;overflow: hidden;margin: 0 auto;display: block}
      }

    // 公司简介
    .company-profile-box{
      padding-bottom: 48px;
      font-size: 0;

      img{margin: 48px auto;display: block;}
      p{@include setFontStyle(-2);color: rgba(0,0,0,0.65);line-height: 40px;text-align: justify;margin: 0 60px}
    }

    // 品牌介绍
    .brand-introduction-box{
      .brand-introduction-content{
        width: 100%;
        padding: 42px;
        box-sizing: border-box;
        background: #fbfbfb;
        border-radius: 8px;
        float: right;
        .brand-introduction-left{
          display: inline-block;
          vertical-align: middle;
          padding-right: 42px;
          border-right: 1px solid #ddd;
          h4{@include setFontStyle(6);color: rgba(0,0,0,0.75);margin-bottom: 36px}
          img{margin-bottom: 36px;}
        }
        span{width: 740px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 40px;display: inline-block;vertical-align: middle;padding-left: 42px;text-align: justify;}

      }
    }

    // 企业文化
    .corporate-culture-box{
      padding-bottom: 80px;
      li{
        width:25%;
        display: inline-block;
        vertical-align: middle;
        div{
          margin-right: 16px;
          margin-bottom: 16px;
          padding: 40px 0;
          border: 6px solid #f7f7f7;
          text-align: center;
          i{width: 70px;height: 70px;display:inline-block;margin-bottom: 16px;}
          h5{@include setFontStyle(0);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
          p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;}
        }
      }
      li:nth-child(1){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon1.png");} }
      li:nth-child(2){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon2.png");} }
      li:nth-child(3){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon3.png");} }
      li:nth-child(4){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon4.png");} }
      li:last-child{
        div{margin-right: 0;}
      }
    }

    // 企业发展历程
    .enterprise-development-box{
      // 覆盖饿了么tab样式
      .enterprise-development-tab{
        .el-tabs__nav-wrap::after,.el-tabs__active-bar{display: none;}
        .el-tabs__header{
          margin: 0;
          .el-tabs__nav{width: 100%;padding-bottom: 20px;border-bottom: 1px dotted #6c9ce1;}
          .el-tabs__nav-wrap,.el-tabs__nav-scroll{overflow: visible}
        }
        .el-tabs__item{width: 170px;height: 45px;line-height:45px;border: 1px solid #3e7ee7;background: #fff;padding: 0;text-align: center;border-radius: 4px;margin-right: 24px;position: relative;}
        .el-tabs__item.is-active{background: #3e7ee7;color: #fff}
        .el-tabs__item:after{width: 14px;height: 14px;content: "";display: inline-block;border-radius: 50%;background: #888;position: absolute;bottom: -28px;left: 50%;margin-left: -7px;}
        .el-tabs__item.is-active:after{background: #3e7ee7;}
        .el-tabs__content{overflow: visible}
      }

      // 企业发展历程内容部分
      li{
        width: 25%;display: inline-block;padding: 36px 24px 60px;background:#fbfbfb;box-sizing: border-box;min-height: 196px;vertical-align: top;
        div{width: 250px;border-bottom: 1px solid #eee;}
        img{margin-bottom: 14px;}
        i{min-width:34px;display:inline-block;color: #3e7ee7;font-style: normal;margin-right: 10px;}
        p{@include setFontStyle(-4);color: rgba(0,0,0,.65);margin-top: 14px;}
      }
    }

    // 联系我们
    .contact-us-box{
      padding: 80px 0;
      border-top: 1px solid #ddd;
      .contact-container-box{
        width: 460px;
        padding: 0 40px;
        box-sizing: border-box;
        color: rgba(0,0,0,0.85);
        float: left;
        h4{@include setFontStyle(10);color: #3e7ee7;margin-bottom: 60px;margin-top: 20px;}
        h5{@include setFontStyle(0);color: #333;margin-bottom: 32px;}
        li{
          margin-bottom: 24px;
          i{width: 22px;height: 24px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 16px;vertical-align: middle;}
          span{@include setFontStyle(-4);color: rgba(0,0,0,0.64);vertical-align: middle;}
        }
        li:nth-child(3) {
          i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.png");}
        }
        li:nth-child(4) {
          i {background-image: url("~static/images/client/aboutUs/contact-us-icon2.png");}
        }
        li:nth-child(5) {
          i {background-image: url("~static/images/client/aboutUs/contact-us-icon3.png");}
        }
        li:nth-child(6) {
          i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");}
        }
      }
      img{float: right}
    }
    @media (max-width: 768px){
      // banner
      .aboutUs-banner{
        height: 150px;
        span{width: 100%;}
        img{width: auto;height: 150px;}
      }
      // 公司简介
      .company-profile-box{
        img{margin: 20px auto;max-width: 100%;}
        p{@include setFontStyle(-6);color: rgba(85, 85, 85, 1);line-height: 24px;margin: 0 10px 6px;}
      }

      // 品牌介绍
      .brand-introduction-box{
        background-color: rgb(238, 238, 238);
        .brand-introduction-content{
          background-color: transparent;padding: 24px 10px;
          .brand-introduction-left{
            display: block;border-right:0;padding-right:0;
            h4{font-size: 18px;color: rgba(0, 0, 0, 1);text-align: center;margin-bottom: 20px;font-weight: 700;}
            img{margin: 0 auto 24px;max-width: 230px;display: block;}
          }
          span{width: 100%;display: block;padding-left: 0;font-size: 14px;color: rgba(85, 85, 85, 1);line-height: 24px;}
        }
      }

      // 企业文化
      .corporate-culture-box{
        padding: 50px 0 0;
        li{
          width:100%;
          div{
            height: 70px;margin: 0 10px 16px;border: 0;box-shadow: rgb(206, 206, 206) 0 0 6px -1px;padding: 14px 0;
            i{display: unset;float: left;margin-left: 30px;margin-bottom: 0;}
            h5{font-weight: 700;font-size: 16px;color: #101010;margin: 12px 0;}
            p{font-size: 14px;color: #101010;}
          }
        }
      }

      // 联系我们
      .contact-us-box{
        padding: 54px 10px 0;border: 0;line-height: 1;font-size: 0;
        .contact-container-box{
          width: 100%;
          padding: 0;
          color: rgba(0,0,0,0.85);
          float: unset;
          h4{@include setFontStyle(-2);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;margin-top:0;text-align: center;}
          h5{@include setFontStyle(-4);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;}
          li{
            span{color: rgba(0,0,0,0.54);}
          }
        }
        img{float: unset;width: calc(100% + 50px);margin: 0 -25px;}
      }
    }
  }

  /********  describe: 新闻资讯  author: TX  date:2020-08-10  ********/
  .client-newsInfor-page{
    // banner
    .newsInfor-banner{
      width: 100%;height: 305px;background-image: url("~static/images/client/newsInfor/newsInfor-banner-bg.png");overflow: hidden;
      img{width: 1200px;overflow: hidden;margin: 0 auto;display: block}
    }

    // 菜单 ul
    .newsInfor-menu-ul{
      display: block;
      margin: 0 auto;
      text-align: center;
      background: #F7F9FB;
      li{display: inline-block;@include setFontStyle(-2);padding:24px 32px;color: rgba(0,0,0,0.64);background: #F7F9FB;transition: all .3s;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);border-bottom: 1px solid rgba(52, 99, 253, 0.08);@include single-line-ellipsis;cursor: pointer}
      li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
      li:hover{
        transform: scale(1.1);
      }
    }

    // 页面主要内容区域
    .newsInfor-content-box{
      min-height: 304px;
      padding: 48px 0 80px;
      ul{display: inline-block;vertical-align: top}

      // 右侧内容区域
      .newsInfor-content-ul{
        padding: 0 32px;
        li{margin-bottom: 40px;cursor: pointer}
        li:last-child{margin-bottom: 0;}
        //图片
        .newsInfor-img-box{width:318px;height:178px;display: inline-block;margin-right: 32px;border-radius: 8px;overflow: hidden;vertical-align: top;background-repeat: no-repeat;background-size: cover;background-position: center;}
        //内容区域
        .newsInfor-list-content{
          width: calc(100% - 350px);
          display: inline-block;
          vertical-align: top;

          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;}
          div{
            margin-bottom: 8px;
            i{width: 20px;height: 20px;display: inline-block;margin-right: 14px;vertical-align: middle;background-image: url("~static/images/client/newsInfor/newsInfor-details-time.svg");}
            i[type="visits"]{background-image: url("~static/images/client/newsInfor/newsInfor-details-visits.svg");}
            span{@include setFontStyle(-6);display:inline-block;color: #666;margin-right: 60px;vertical-align: middle;}
          }
          p{height: 72px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin-bottom: 32px;text-align: justify;@include multi-line-ellipsis(3);overflow: hidden;}
          a{@include setFontStyle(-6);color: #4A73FD;}
          a:after{content: "";width: 14px;height: 12px;display:inline-block;background-image: url("~static/images/client/newsInfor/newsInfor-list-icon.svg");margin-left: 8px;}
          a:hover{cursor: pointer;}
        }
      }
    }

    @media (max-width: 768px){
      // banner
      .newsInfor-banner{
        height: 150px;
        img{width: auto;height: 150px;}
      }

      // 页面主要内容区域
      .newsInfor-content-box{
          min-height: unset;padding: 20px 0 50px;
        // 右侧内容区域
        .newsInfor-content-ul{
          width:100%;padding: 0 6%;box-sizing: border-box;
          li{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;margin-bottom: 20px;}
          //图片
          .newsInfor-img-box{width:100%;height:180px;display: block;margin-right:0;border-radius: 0;}
          //内容区域
          .newsInfor-list-content{
            width: 100%;padding: 20px;box-sizing: border-box;
            h5{@include setFontStyle(-4);color: rgb(16, 16, 16);margin-bottom: 12px;}
            div{
              span{margin-bottom: 0;@include setFontStyle(-8);color: rgb(16, 16, 16);}
            }
            p{height: auto;max-height: 60px;margin-bottom:0;font-size: 14px;color: rgb(16, 16, 16);line-height: 20px;}
          }
          // 分页
          .client-el-pagination{margin-top: 24px}
        }
      }

    }

  }

  /********  describe: 政府机构-详情页  author: TX  date:2020-08-10  ********/
  .client-government-page{
    // banner
    .industrydetails-banner{background-color: #1B33B7;}
    .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/government-banner-img.png");}

    // 我们的系统为您改变了什么
    .government-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .industrydetails-content{
        width: 100%;height: 312px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/government-change-bg.png");
        li{
          p{margin-left: 30px}
        }
        img{width:100px;display: inline-block;vertical-align: top;margin: 85px 25px 85px 30px;}
      }
      .change-content-left{
        display: inline-block;padding: 32px 0 0 64px;vertical-align: top;
        h5,li,li i{color: #fff;border-color: #fff;}
        p{color: rgba(255,255,255,0.65);}
      }
      .change-content-right{width: 525px;display: inline-block;padding-top: 64px;}
    }

    // 我们的优势
    .government-advantage-box{
      padding-bottom: 50px;
        h4{margin-bottom: 48px;}
        dl{width:33.33%;display: inline-block;margin-bottom: 30px;}
        dt{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 16px}
        dd{@include setFontStyle(-6);color: rgba(0,0,0,0.65);margin-left: 33px;}
        i{width: 17px;height: 17px;float:left;box-sizing: border-box;opacity: 0.8;display: inline-block;border: 1px solid #2B5CFD;transform: rotate(45deg);margin-right: 16px;}
        .government-advantage-content{margin-right: -100px;padding: 4px 0 0 4px;}
    }
    @media (max-width: 768px) {
      // 我们的系统为您改变了什么
      .government-change-box{
        background: rgb(238, 238, 238);padding: 0 15px;
        .industrydetails-content{
          height: auto;margin-top: 20px;background-image:unset;position: relative;
          li{
            p{margin-left: 20px}
          }
          img{width:80px;display:block;margin: -60px auto;position: absolute;left: 50%;margin-left: -40px;}
        }
        .change-content-left,.change-content-right{
          width: 100%;box-sizing: border-box;margin-bottom: 20px;
          p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
          i{border-color: #fff;opacity: 1;}
        }
        .change-content-left{background-color: rgb(0, 102, 204);padding: 20px 16px;}
        .change-content-right{background-color: rgb(255, 186, 0);padding: 60px 16px 36px;}
      }
    }
  }

  /********  describe: 金融保险-详情页  author: TX  date:2020-09-01  ********/
  .client-finance-page{
    // banner
    .industrydetails-banner{background-color: #593513;}
    .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/finance-banner-img.png");}

    // 金融行业的问题
    .finance-question-box{
      background: #F9FAFF;
      padding: 80px 0;
        .finance-question-top{
          width: 946px;height: 104px;background-image: url("~static/images/client/industrydetails/finance-question-bg.png");margin: 0 auto 48px;
          h5{height: 104px;line-height:104px;display: inline-block;@include setFontStyle(10);color: rgba(255,255,255,0.85);padding: 0 56px}
          h5:first-child{margin-right: 180px;color: rgba(0,0,0,0.85);}
        }
        ul{
          width:460px;min-height:345px;display: inline-block;border: 1px solid #2B67FD;border-radius: 4px;padding: 32px;box-sizing: border-box;vertical-align: middle;margin: 0 52px;
          i{width: 12px;height: 12px;background-image: linear-gradient(90deg, #2B5CFD 0%, #FFFFFF 100%);border-radius: 50%;border:0;transform: rotate(0deg);opacity: 1;}
          p{margin-left: 30px;}
        }
        .finance-question-right{
          border: 1px solid #FF6226;
          i{background-image: linear-gradient(90deg, #FF6226 0%, #FFFFFF 100%);}
        }
    }
    @media (max-width: 768px) {
      .finance-question-box{background-color: rgb(238, 238, 238);padding: 20px 15px 30px;}
      .phone-class-box{
        ul{
          border: 0;width: 100%;margin: 0;padding: 20px 0 0;min-height: unset;
          li{margin-bottom: 10px;}
          i{width: 10px;height: 10px;margin-right: 8px;margin-top: 8px;border: 1px solid #fff;opacity: 1;border-radius:0;
            float: left;box-sizing: border-box;display: block;transform: rotate(45deg);background-image: unset;}
          p{font-size: 14px;color: white;line-height: 24px;margin-left: 20px;text-align: justify;}
        }
        h4{color: #fff;}
        img {width: 130px;display: block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;}
        .financial-tradition-phone{background-color: rgb(0, 102, 204);margin: 0 0 20px;padding: 0 16px 20px;}
        .financial-solve-phone{background-color: rgb(247, 109, 0);padding: 40px 16px 36px;}
      }

    }
  }

  /********  describe: 信息产业-详情页  author: TX  date:2020-09-02  ********/
  .client-information-page{
    // banner
    .industrydetails-banner{background-color: #070B20;}
    .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/information-banner-img.png");}

    // 我们的系统为您改变了什么
    .information-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .industrydetails-content{
        width: 100%;height: 300px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/information-change-bg.png");
        li{
          p{margin-left: 30px;}
        }
        img{display: inline-block;vertical-align: top;margin: 120px 30px auto 70px;}
      }
      .change-content-left{
        display: inline-block;padding: 48px 0 0 64px;vertical-align: top;
        h5,li,li i{color: #fff;border-color: #fff;}
        p{color: rgba(255,255,255,0.65);}
      }
      .change-content-right{width: 500px;display: inline-block;padding-top: 36px;}
    }
    @media (max-width: 768px) {
      // 我们的系统为您改变了什么
      .information-change-box{
        background-color: rgb(238, 238, 238);padding: 0 15px 15px;
        .industrydetails-content{
          height: auto;margin-top: 20px;background-image:unset;position: relative;
          li{
            p{margin-left: 20px}
          }
          img{width:130px;display:block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;}
        }
        .change-content-left,.change-content-right{
          width: 100%;box-sizing: border-box;margin-bottom: 20px;
          p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
          i{border-color: #fff;opacity: 1;}
        }
        .change-content-left{background-color: rgb(14, 60, 106);padding: 20px 16px;}
        .change-content-right{background-color: rgb(164, 3, 3);padding: 60px 16px 36px;}
      }
    }
  }

  /********  describe: 能源化工-详情页  author: TX  date:2020-09-02  ********/
  .client-energy-page{
    // banner
    .industrydetails-banner{background-color: #073A44;}
    .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/energy-banner-img.png");}

    // 我们的系统为您改变了什么
    .energy-change-box{
        background: #F9FAFF;
        padding-bottom: 80px;

        // 模块上半部分
        .change-box-top{
          width: 1100px;height: 247px;padding: 32px 64px;box-sizing: border-box;background: #104644;border-radius: 8px;margin-left: 20px;margin-top: 48px;
          i{border: 1px solid #fff;}
        }

        // 模块下半部分
        .change-box-bottom{
          width: 1100px;height: 368px;padding: 24px;box-sizing: border-box;border-radius: 8px;background: #FE552C;margin-left: 100px;margin-top:-24px;position: relative;
          h5{margin-top: 55px;}
          li:nth-of-type(odd){p{margin-right: 60px}}
        }
        h5{color: rgba(255,255,255,0.85);}
        li{
          width: 50%;display: inline-block;@include setFontStyle(-6);color: rgba(255,255,255,0.65);line-height: 22px;vertical-align: top;
          p{margin-left: 30px;color: rgba(255,255,255,0.65);}
        }
        img{position: absolute;top: -70px;left: 50%;margin-left: -50px;}
    }
    @media (max-width: 768px) {
      // 我们的系统为您改变了什么
      .energy-change-box{
        background-color: rgb(238, 238, 238);padding: 0 15px 15px;
        // 模块上半部分
        .change-box-top{width: 100%;height:auto;padding: 20px 16px;margin:20px 0 20px;border-radius:0;}
        // 模块下半部分
        .change-box-bottom{width: 100%;height:auto;padding: 60px 16px 36px;margin:0 0 20px;border-radius:0;background-color: rgb(255, 115, 5);}
        .change-box-top,.change-box-bottom{
          i{border: 1px solid #fff;opacity: 1;}
          h5{margin-top: 20px;color: #fff;}
          li:nth-of-type(odd){p{margin-right: 0}}
        }
        li{
          width: 100%;display: block;
          p{margin-left: 20px;color: #fff;}
        }
      }
    }
  }

  /********  describe: 交通运输-详情页  author: TX  date:2020-09-02  ********/
  .client-traffic-page{
    // banner
    .industrydetails-banner{background-color: #0A2F41;}
    .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/traffic-banner-img.png");}

    // 我们的系统为您改变了什么
    .traffic-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
        .change-content-left,.change-content-right{
          width: 462px;height: 359px;display:inline-block;background-repeat: no-repeat;vertical-align: top;margin-top: 48px;
          h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
          ul{margin-top: 80px;margin-left: 32px;}
          i{width:12px;height:12px;border-radius:50%;border: 1px solid #1276FF;margin-top: 5px;}
        }
        .change-content-left{background-image: url("~static/images/client/industrydetails/traffic-left-bg.png");margin-right: 104px;}
        .change-content-right{background-image: url("~static/images/client/industrydetails/traffic-right-bg.png");}
    }
    @media (max-width: 768px) {
      // 我们的系统为您改变了什么
      .traffic-change-box{
        background-color: rgb(238, 238, 238);padding: 0 15px 30px;
        .change-content-left,.change-content-right{
          width: 100%;height: unset;margin:0;box-sizing: border-box;
          ul{margin: 0;}
          h5{height: unset;line-height: unset;@include setFontStyle(-4);color: rgba(255, 255, 255, 1);margin-bottom: 16px;text-align: center;font-weight: 700;}
          p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
          i{width: 10px;height: 10px;border-color: #fff;opacity: 1;border-radius: 0;}
        }
        .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;background-image:unset;margin: 20px 0;}
        .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;background-image:unset;}
      }
    }
  }

  /********  describe: 教育行业-详情页  author: TX  date:2020-09-02  ********/
  .client-education-page{
    // banner
    .industrydetails-banner{background-color: #085903;}
    .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/education-banner-img.png");}

    // 我们的系统为您改变了什么
    .education-change-box{
      background: #F9FAFF;padding-bottom: 80px;
      img{position: absolute;top: 50%;margin-top: -78px;left:50%;margin-left: -54px;}
      .industrydetails-content{position: relative;}
      .change-content-left,.change-content-right{height: 338px;box-sizing: border-box;}
      .change-content-left{width: 637px;float:left;padding:32px 48px;background-image: url("~static/images/client/industrydetails/education-left-bg.png");}
      .change-content-right{width: 610px;float:right;padding:32px 0 32px 100px;background-image: url("~static/images/client/industrydetails/education-right-bg.png");margin-left: -55px;}
    }
    @media (max-width: 768px) {
      .education-change-box{
        background-color: rgb(238, 238, 238);padding: 0 15px 30px;
        img{width:100px;margin: -105px auto;margin-left: -50px;}
        .mt48{margin-top: 20px;}
        .change-content-left,.change-content-right{
          width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
          p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
          i{border-color: #fff;opacity: 1;}
        }
        .change-content-left{background-color: rgb(50, 159, 132);padding: 20px 16px 52px;}
        .change-content-right{background-color: rgb(249, 163, 97);padding: 60px 16px 16px;}
      }
    }

  }

  /********  describe: 食品餐饮-详情页  author: TX  date:2020-09-03  ********/
  .client-restaurant-page{
    // banner
    .industrydetails-banner{background-color: #1C1E21;}
    .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/restaurant-banner-img.png");}

    // 我们的系统为您改变了什么
    .restaurant-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .industrydetails-content{
        position: relative;
        img{position: absolute;top:50%;left: 50%;margin-top: -40px;margin-left: -45px;}
      }
      .change-content-left,.change-content-right{
        width: 552px;height: 328px;display:inline-block;background-repeat: no-repeat;vertical-align: top;
        h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
        ul{margin-top: 32px;margin-left: 48px;}
      }
      .change-content-left{background-image: url("~static/images/client/industrydetails/restaurant-left-bg.png");margin-right: 90px;}
      .change-content-right{background-image: url("~static/images/client/industrydetails/restaurant-right-bg.png");}
    }
    @media (max-width: 768px) {
      // 我们的系统为您改变了什么
      .restaurant-change-box{
        background-color: rgb(238, 238, 238);padding: 0 15px 30px;
        .mt48{margin-top: 20px;}
        .industrydetails-content img{margin-top: -85px;}
        .change-content-left,.change-content-right{
          width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
          ul{margin: 0;}
          h5{height: unset;line-height: unset;color: #fff;}
          p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
          i{border-color: #fff;opacity: 1;}
        }
        .change-content-left{background-color: rgb(240, 112, 112);padding: 20px 16px;}
        .change-content-right{background-color: rgb(255, 207, 78);padding: 60px 16px 16px;}
      }
    }
  }

  /********  describe: 医疗卫生-详情页  author: TX  date:2020-09-03  ********/
  .client-medical-page{
    // banner
    .industrydetails-banner{background-color: #2178E0;}
    .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/medical-banner-img.png");}

    // 我们的系统为您改变了什么
    .medical-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .industrydetails-content{width: 1200px;height: 316px;background-image: url("~static/images/client/industrydetails/medical-change-bg.png");}
      .change-content-left,.change-content-right{
        width: 500px;display:inline-block;vertical-align: top;
        ul{margin-left: 48px;}
        h5{margin-top: 36px;color: rgba(255,255,255,0.85);}
        p{color: rgba(255,255,255,0.65);}
        i{border-color: #fff;}
      }
      .change-content-left{margin-right: 180px;}
    }
    @media (max-width: 768px) {
      .medical-change-box{
        background-color: rgb(238, 238, 238);padding: 0 15px 30px;
        .industrydetails-content{width: 100%;height: unset;background-image:unset;}
        .mt48{margin-top: 20px;}
        .change-content-left,.change-content-right{
          width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
          ul{margin: 0;}
          h5{height: unset;line-height: unset;color: #fff;margin-top: 0;}
          p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
          i{border-color: #fff;opacity: 1;}
        }
        .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;}
        .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;}
      }

    }
  }

  /********  describe: 1-X-详情页  author: TX  date:2020-09-03  ********/
  .client-indexEducation-page{
    padding-bottom: 80px;
    .client-platform-banner{
      background-color: #04004a;
    .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box;
      position: absolute;top: 330px;left: 50%;margin-left: -150px;}
    .client-default-white-Btn{background: #fff;color: #3e7ce7;left: 50%;margin-left: 30px;}
    }
    @media (max-width: 768px){
      padding-bottom: 15px;
      .client-platform-banner{
        .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;top: 105px;margin-left: -130px}
        .client-default-white-Btn{background: #fff;color: #3e7ce7;left: 50%;margin-left: 10px;}
      }
    }
  }

  /********  describe: 课程资源  author: TX  date:2020-09-03  ********/
  .client-resources-page{
    // 图标列表
    .train-scheme-list{
      margin: 54px -24px 0;
      li{width: 25%;display: inline-block;text-align: center}
      i{width: 100px;height: 100px;display: block;margin: 0 auto;}
      span{@include setFontStyle(-4);color: #333;margin-top: 10px;display: block;}
      div{box-shadow: 0 0 7px 2px #f5f2ff;margin: 24px;padding: 42px 0;}
      li:nth-child(1) i{background-image: url("~static/images/client/resources/train-scheme-icon1.png")}
      li:nth-child(2) i{background-image: url("~static/images/client/resources/train-scheme-icon2.png")}
      li:nth-child(3) i{background-image: url("~static/images/client/resources/train-scheme-icon3.png")}
      li:nth-child(4) i{background-image: url("~static/images/client/resources/train-scheme-icon4.png")}
      li:nth-child(5) i{background-image: url("~static/images/client/resources/train-scheme-icon5.png")}
      li:nth-child(6) i{background-image: url("~static/images/client/resources/train-scheme-icon6.png")}
      li:nth-child(7) i{background-image: url("~static/images/client/resources/train-scheme-icon7.png")}
      li:nth-child(8) i{background-image: url("~static/images/client/resources/train-scheme-icon8.png")}
    }
    // 为企业培训打造学习矩阵
    .products-services-content p{line-height: 52px;}
    // 蓝色提醒文字
    .blue-big-size{
      font-size: 26px;color: #3e7ce7;padding: 0 5px;
    }

    // 课程内容形式多样
    .course-learn-box{
        background: #f9faff;
      // video列表
      .learn-box-list{
        margin: 54px -16px 0;
        li{
          width: 33.33%;display: inline-block;
          a{display: none;}
          div{background: #fff;border-radius: 8px;margin: 0 16px 40px;box-shadow: 0 0 7px 2px #f5f2ff;}
          span{width:342px;height:192px;display: inline-block;margin-top: 16px;border-radius:4px;overflow: hidden;position: relative}
          i{width: 48px;height: 48px;cursor: pointer;background-image: url("~static/images/client/course/course-video-icon.svg");display: inline-block;position: absolute;
            left: 50%;margin-left: -24px;z-index: 5;top: 50%;margin-top: -24px;background-size: cover;background-position: bottom;transition: all 0.5s;}
          img{transition: all 0.5s;}
          p{@include setFontStyle(-4);color: #3e7ce7;padding: 24px 16px 16px;text-align: left}
          .course-explain-black{@include setFontStyle(-4);color: #333;line-height: 24px;padding: 0 16px 24px;}
        }
        li span:hover{img{transform: scale(1.1);}}
        li i:hover{background-image: url("~static/images/client/course/course-video-icon-a.svg");background-size: cover;background-position: bottom;}
      }
    }
    // banner背景色
    .client-platform-banner{background-color: #03022e;}
    // 新闻资讯
    .platform-news-information{background: #fff;}
    // 按钮
    .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;border: 1px solid #3e7ce7;background: #3e7ce7;margin-right: 24px;margin-bottom: 42px;}
    .client-default-white-Btn{background: #fff;color:#3e7ce7;margin-right: 0 }

    @media (max-width: 768px){
      // 图标列表
      .train-scheme-list{
        margin: 12px 16px 36px;
        li{
          width: 50%;
          i{width: 70px;height: 70px;background-size: cover;}
          div{margin: 6px;padding: 24px 0;}
        }
      }
      // 为企业培训打造学习矩阵
      .products-services-content p{font-size: 14px;line-height: 40px;text-align: center;color: #101010;}
      // 蓝色提醒文字
      .blue-big-size{font-size: 18px;}
      // 按钮box
      .default-Btn-box{text-align: center}

      // 视频列表
      .course-learn-box{
        margin:0;background-color: rgb(238, 238, 238);
        .client-container {padding: 0 15px;}
        .learn-box-list{
          margin: 20px 0;
          li {
            width: 100%;
            div{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;border-radius:0;margin: 0 16px;}
            span {width: 100%;height: 180px;margin-top: 0;border-radius: 0;}
            img {max-width: 100%;}
            p {font-size: 14px;padding: 16px 0;text-align: center;}
            .course-explain-black{font-size: 14px;text-align: left;padding: 0 16px 20px;}
          }
        }

      }

      // 按钮
      .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;margin:0 8px 42px;}
    }
  }

  /********  describe: 考试系统更新日志  author: TX  date:2020-09-03  ********/
  .client-checklog-page{
    // banner
    .client-checklog-banner{
      width: 100%;height: 300px;background-color: rgb(0, 102, 204);text-align: center;
      h4{font-size: 56px;color: rgba(255, 255, 255, 1);font-weight: bold;padding-top: 64px;}
      p{font-size: 28px;color: rgb(255, 255, 255);padding-top: 24px;}
    }
    // 数据展示
    .log-data-show{
      height: 200px;
      border-color: rgb(187, 187, 187);
      border-width: 1px;
      border-style: solid;
      box-shadow: rgb(121, 188, 255) 0px 2px 6px 0px;
      border-radius: 10px;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-evenly;
      margin-top: -64px;
      background: #fff;
      div{
        display: inline-block;text-align: center;
        span{font-size: 24px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 32px;display: inline-block;}
        p{font-size: 54px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 10px;}
      }
      i{width: 1px;height: 150px;background: lightgray;display: inline-block;}
    }
    // 日志内容
    .log-content-box{
      margin: 52px auto 100px;color: rgb(16, 16, 16);
      li{
        color: rgb(16, 16, 16);border-bottom: 1px dashed #ccc;padding: 0 88px;
        h5{font-size: 18px;margin: 14px 0;font-weight: bold;}
        span{font-size: 18px;margin-bottom: 14px;display: block;font-weight: bold;}
        div{margin-bottom: 14px;}
        i{width: 12px;height: 1px;display: inline-block;background: #bbb;vertical-align: top;margin: 10px 6px 10px 0;}
        p{width: 1000px;font-size: 16px;display: inline-block;vertical-align: middle;line-height: 24px;color: #000;text-align: justify}
      }
      li:last-child{border: 0;}
    }
  }

  /********  describe: 体验中心  author: TX  date:2021-06-09  ********/
  .tiyan-center-page{
     .tiyan-center-register{
       background: #3776ff;text-align: center;padding: 52px 0;margin-top: 70px;
       h5{font-size: 42px;color: #fff;margin: 24px 0;}
       p{font-size: 32px;color: #fff;margin-bottom: 52px;}
       span{font-size: 52px;color: #ffff00}
       a{width: 355px;height: 60px;line-height: 60px;text-align: center;background: #ff4d4d;border-radius: 4px;display: inline-block;color: #fff;}
     }
    @media (max-width: 768px){
      /* 网站banner */
      .client-platform-banner div{background-position-x: 42%;}
      .experience-swiper-box .swiper-pagination-style {width: 80px;margin-left: -30px;}
    }
  }


  // 系统维护弹窗
  .system-maintain-dialog{
    .el-dialog{width: 540px;height: 380px;background-image:url("~static/images/client/tiyanCenter/ty-dialog-bj.jpg");}
  }

  /********  describe: 课程开发解决方案  author: TX  date:2021-08-06  ********/
  .course-develop-page{
    // 标题
    .course-develop-title{background-color: rgb(39, 68, 98);padding: 50px 0 100px;font-weight: 700;font-size: 24px;color: rgb(255, 255, 255);text-align: center;}

    // form
    .course-develop-form{width: 90%;min-height: 380px;background: #fff;margin: -50px auto 0;padding: 40px 24px;box-sizing: border-box;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px -1px;}

    // 滑块px
    .nc-container{
      overflow: hidden;height: 52px;
      .nc_wrapper{width:100%!important;margin-bottom: 22px;border-radius: 5px;overflow: hidden;}
      .nc_scale{
        height: 30px;
        .scale_text{overflow: hidden;line-height: 30px;}
        span{width:40px;height: 30px;line-height: 30px;border-radius: 5px;border: 1px solid rgb(187, 187, 187);box-sizing: border-box;overflow: hidden}
      }
      .btn_ok{margin-left: -1px;}
    }

    // 输入框-验证码
    .course-develop-input-code{width: calc(100% - 122px);}
    .course-develop-code-btn.el-button{width:110px;box-sizing:border-box;padding: 12px;margin-left: 8px;background-color: rgb(0, 102, 204);color: #fff;}

    // 公司名称
    .dialog-input-company{
      .el-form-item__content{display: grid;}
    }

    // 表单按钮
    .form-blue-btn,.form-border-btn{
       width: 100%;height: 50px;line-height: 50px;color: rgb(255, 255, 255);border-radius: 5px;@include setFontStyle(-4);text-align: center;border: 1px solid transparent;
    }

    .form-blue-btn{background-color: rgb(0, 102, 204);border-color:rgb(0, 102, 204);}
    .form-border-btn{display:block;border-color:rgb(0, 102, 204);color:rgb(0, 102, 204);margin-top: 20px; }

    // 咨询电话
    .course-develop-tel{display:block;text-align: center;margin: 60px 0;font-weight: 700;@include setFontStyle(-2);color: #101010;}

    // 产品
    .dialog-input-company{text-align: center;padding: 0;}
  }

  /********  describe: 注册页面--手机  author: TX  date:2021-08-06  ********/
  .register-phone-page{
    // 标题
    .course-develop-title{font-size: 20px;}
    // 咨询电话
    .course-develop-tel{margin: 46px 0;}
  }

  /********  describe: 复制路径页面--手机  author: TX  date:2021-08-06  ********/
  .copy-url-page{
    background: #fff;height: 100vh;
    // 底部
    .success-body-box{
      img{max-width: 100%;padding: 30px;box-sizing: border-box;}
      p{font-weight: 700;font-size: 20px;color: rgb(31, 104, 176);text-align: center;margin: 4px 0;}
      span{line-height: 24px;font-weight: 400;font-size: 16px;color: rgb(16, 16, 16);display: block;text-align: center;padding:30px;word-break: break-all;}
      a{width: 122px;height: 36px;line-height:36px;background-color: rgb(234, 118, 27);color: rgb(255, 255, 255);
        border-radius: 5px;font-size: 14px;display: block;margin: 0 auto;text-align: center}
    }

  }

  /********  describe: 企业微课制作  author: TX  date:2021-09-13  ********/
  .client-makeCourse-page{
    .client-platform-banner{
      background-color: #22252A;
      .free-trial-default-btn{background: #f76377}
    }
      // 按钮
      .btn-big-box{width: 263px;margin: 50px auto 0;display: block;text-align: center;}

      // 页面标题
      .make-course-title {width: 100%;font-size: 24px;font-weight: normal;margin-bottom: 35px;padding-left: 10px;color: #333;text-align: center}
      .course-blue-title{color: #3E7BE6;}

      // 页面文字
      .make-course-h2{
        width: 100%;text-align: center;padding: 40px 0;border-bottom: 1px solid #CCC;
        img{max-width: 100%;}
      }

      // 基本介绍
      .makeCourse-introduce-box{
        margin: 64px 0;
        dl {
          width: 580px;float: left;padding-top: 100px;padding-left: 20px;
          h3{text-align: left}
          dt {width: 100%;font-size: 18px;font-weight: normal;margin-bottom: 35px;color: #333;padding-left: 10px;}
        }
      }
      .contrary-introduce-box{
        margin-bottom: 88px;
        dl {
          width: 480px;float: right;padding-top: 0;height: 350px;
          dt {margin-bottom: 20px;}
          dd{margin-top: 35px;}
        }
      }

      // 课程目标
      .course-target-box{
        background: #F8F8F8;padding: 42px 0;
          li{
            width: 20%;display: inline-block;
            div{text-align: center;background: #fff;margin: 5px;padding: 24px 0;}
            img{height: 100px;margin-bottom: 24px;}
            span{text-align: center;font-size: 18px;color: #333;display: block}
          }
      }

    // 培训讲师介绍
    .px-teacher-box{
      margin: 60px 0;
      .teacher-content-box{display: flex;justify-content: space-between;align-items: center;}
      span{display: block;font-size: 18px;color: #333;text-align: center;}
      p{margin-left: 70px;line-height: 50px;}
      .btn-big-box{margin-top: 32px;}
    }

    // 课程体系
    .course-system-box{
      padding: 32px 0;
      .course-system-img{margin-bottom: 40px;max-width: 100%;}
      img{max-width: 100%;}
    }

    // 微课设计
    .course-learn-box{
      padding: 64px 0;
      .learn-box-list li div{margin: 0 16px 0;}
    }

    // 报名学习
    .sign-study-box{
      width: 100%;
      .study-gj-box{width: 100%;height: 298px;background-image:url("~static/images/client/makeCourse/sign-study-bj.png");
        margin-top: 20px;border-radius: 8px;bottom: -20px;position: relative;}
      .sign-study-content{
        position: absolute;bottom: 74px;font-size: 0;left: 76px;
        .el-input{
          width: 400px;font-size: 16px;
          .el-input__inner{height: 64px;display: inline-block;border-radius: 0;font-size: 16px}
          .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */
            font-size: 16px;
          }

          .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */
            font-size: 16px;
          }

          .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */
            font-size: 16px;
          }
        }

        .el-button{width:150px;height:64px;display: inline-block;margin-left: -1px;font-size: 16px}
      }
    }

    @media (max-width: 768px) {
      // 按钮
      .client-default-Btn{width: 120px;height: 35px;line-height: 35px;margin: 32px auto 0;}

      // 页面标题
      .make-course-title {font-size: 16px;margin-bottom: 16px;color: #3E7BE6;padding-left: 0;font-weight: bold;}

      // 页面文字
      .make-course-h2{
        padding: 32px 0;
      }

      // 基本介绍
      .makeCourse-introduce-box{
        margin: 32px 0;
        img{max-width: 100%;display: block;margin: 0 auto;}
        dl {
          width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center;
          h3{text-align: center;}
          dt {font-size: 14px;margin-bottom: 16px;color: #555555;padding-left: 0;line-height: 24px}
        }
      }
      .contrary-introduce-box{
        dl {
          width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center;height: unset;
          dt {margin-bottom: 4px;}
        }
      }

      // 课程目标
      .course-target-box{
        background: #F8F8F8;padding: 16px 0 32px;
        h3{font-size: 18px;color: #333;margin: 12px 0;text-align: center}
        ul{text-align: center;}
        li{
          width: 33.33%;
          div{margin: 6px;padding: 16px 0;}
          img{height: 40px;margin-bottom: 10px;}
          span{font-size: 16px;color: #333;}
        }
        .btn-big-box{margin-top: 50px;}
      }

      // 培训讲师介绍
      .px-teacher-box{
        margin: 32px 0;
        .teacher-img-box{
          width: 80px;padding: 0;box-sizing: border-box;flex-shrink: 0;
          img{width: 80px;display: inline-block;vertical-align: middle;}
        }
        .teacher-content-box{display: flex;justify-content: space-between;}
        span{font-size: 16px;margin: 10px 0;}
        p{font-size: 14px;line-height: 24px;margin: 10px 12px;text-align: justify;}
        .btn-big-box{margin-top: 32px;}
      }

      // 微课设计
      .course-learn-box{
        padding: 32px 0;
        .client-container{padding: 0}
        .learn-box-list li div{margin: 0}
      }

      // 报名学习
      .sign-study-box{
        background: #3776ff;
        .client-container{padding: 0;}
        .study-gj-box{height:180px;background-image:url("~static/images/client/makeCourse/sign-study-sjBj.png");background-size: contain;background-repeat: no-repeat;
        bottom: 0;border-radius: 0;background-position: center;}
        .sign-study-content{
          bottom: 40px;left: 40px;right: 40px;
          .el-input{
            width: 68%;font-size: 14px;vertical-align: middle;
            .el-input__inner{height: 38px;font-size: 14px}
            .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */
              font-size: 14px;
            }

            .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */
              font-size: 14px;
            }

            .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */
              font-size: 14px;
            }
          }

          .el-button{width:32%;height:38px;font-size: 14px;border-radius: 2px;vertical-align: middle;    padding: 0;}
        }
      }
    }


  }
}