/* 公共样式 */
.common {
  width: 1232px;
  margin: auto;
}

@font-face {
  /*为引入的字体自定义一个名字*/
  font-family: "FontName";
  /*指明引入字体的位置*/
  src: url('/css/course/FontName.ttf');
}
/* 过渡动画 */
.trans {
  /* 过渡 */
  transition: all 0.6s;
}

/* 咨询更多详细问题 */
.moreQuestion {
  width: 263px;
  padding: 16px 32px;
  margin: auto;
  margin-top: 44px;
  background: linear-gradient(90deg, #0974F3 0%, #023EE2 100%);
  border-radius: 100px;
  text-align: center;
}
.moreQuestion a {
  font-size: 22px;
  line-height: 30px;
  color: #FFFFFF;
  /* cursor: pointer; */
}
.moreQuestion:hover a {
  color: #FFFFFF;
}

/* 按钮关键帧动画 */
.moreQuestion:hover {
  animation: tada 1s;
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/* h2 标签样式 */
.h5Page-h2 {
  height: 68px;
  font-size: 46px;
  line-height: 68px;
  text-align: center;
  color: #333333;
}

/* 浮动 */
.fl {
  float: left;
}
.fr {
  float: right;
}

/* 过渡动画 */
.ani {
  transition: all 1s linear;
}

/* 背景img */
.bg {
  width: 100%;
  height: 100%;
}






/* 覆盖原来导航样式 */
#header .menu {
  background-color: rgba(0, 0, 0, 0);
}
#header .wrap {
  position: static;
}
body {
  background-color: #fff !important;
}

/* banner 上的两张背景 */
.h5_banner {
  overflow: hidden;
  /* background: url('http://qtummatrix.com:2000/course/h5/banner-1.png') no-repeat;
  background-size: 100% 100%; */
  position: relative;
  min-width: 1232px;
}
/* 背景一 */
.h5_banner_bg-1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -10;
}
/* 背景二 */
.banner_right_bg {
  width: 620px;
  height: 482px;
  position: absolute;
  right: 0;
  top: 316px;
  /* background: url('http://qtummatrix.com:2000/course/h5/banner-2.png') no-repeat; */
  /* background-size: 100%; */
  z-index: -9;
}
.h5_banner_bg-1 img, .banner_right_bg img {
  width: 100%;
  height: 100%;
}

/* banner */
/* 标题 */
.banner_title {
  margin-top: 86px;
  font-family: "FontName";
  font-size: 65px;
  letter-spacing: 4px;
  line-height: 80px;
  color: #FFFFFF;
}
/* 副标题 */
.banner_subHeading {
  width: 557px;
  height: 32px;
  padding: 16px;
  margin: 24px 0;
  background: #3EE9BC;
  border-radius: 100px;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  font-weight: 400;
  color: #FFFFFF;
}
/* 简介 */
.banner_desc {
  width: 695px;
  height: 90px;
  font-size: 16px;
  line-height: 30px;
  color: #FFFFFF;
}
/* 第一部分 */
.part1_title {
  margin-top: 280px;
}

.h5Part1 {
  margin-top: 24px;
}
.h5Part1_list {
  display: flex;
  justify-content: space-between;
}
.h5Part1_item {
  width: 350px;
  width: 278px;
  height: 444px;
  height: 372px;
  padding: 36px;
  background: url('http://qtummatrix.com:2000/course/h5/Frame59.png');
  background-size: 100% 100%;
  border-radius: 12px;
  overflow: hidden;
  /* 阴影 */
  box-shadow: 0px 0px 6px -1px rgba(28, 29, 36, 0.06), 0px 4px 24px -1px rgba(28, 29, 36, 0.06);
  /* 配合hover子元素背景图显示 */
  position: relative;
}
.h5Part1_item_icon {
  width: 84px;
  height: 82px;
  margin: 9px;
  background: url('http://qtummatrix.com:2000/course/h5/sprite-1.png') no-repeat;
}
.h5Part1_item_icon-job {
  background-position: -108px -10px;
}
.h5Part1_item_icon-change {
  background-position: -8px -10px;
}
.h5Part1_item_icon-money {
  background-position: -208px -10px;
}
.h5Part1_item_tit {
  margin-top: 18px;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: #333333;
}
.h5Part1_item_con {
  margin-top: 8px;
  font-size: 16px;
  line-height: 24px;
  color: #666666;
}
.blue_tit {
  color: #2F80ED;
}
/* hover 效果 */
.h5Part1_item:hover {
  background: #2575FF;
  /* 阴影 */
  box-shadow: 0px 25px 50px -12px rgba(28, 29, 36, 0.25);
}
.h5Part1_item:hover .h5Part1_item_icon-job {
  background-position: -108px -109px;
}
.h5Part1_item:hover .h5Part1_item_icon-change {
  background-position: -8px -109px;
}
.h5Part1_item:hover .h5Part1_item_icon-money {
  background-position: -208px -109px;
}
/* 字体颜色 */
.h5Part1_item:hover .h5Part1_item_tit, .h5Part1_item:hover .h5Part1_item_con {
  color: #FFFFFF;
}
/* hover 时背景图 */
.h5Part1_item:hover .h5Part1_item_bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url('http://qtummatrix.com:2000/course/h5/Frame59.png');
  background-size: 100% 100%;
}


/*
  第二部分
*/
.h5Part2 {
  margin: 80px auto 90px 52px;
}
/* 左 */
.h5Part2_left {
  width: 794px;
  width: 41%;
  min-width: 510px;
  height: 820px;
  /* background: url('http://qtummatrix.com:2000/course/h5/draw-1.png') no-repeat;
  background-size: 100% 100%; */
  /* 调整层级 */
  position: absolute;
  z-index: -10;
  display: flex;
  align-items: center;
}
.h5Part2_left img {
  width: 100%;
}
/* 右侧 */
.h5Part2_right {
  float: right;
  width: 609px;
}
.h5Part2_right-title {
width: 588px;
height: 136px;
padding-top: 40px;
text-align: start;
}



.h5Part2_right-desc {
width: 609px;
height: 190px;
padding-top: 44px;
font-weight: 500;
font-size: 16px;
line-height: 30px;
color: #666666;
}

.h5Part2_right-list {
  display: flex;
  justify-content: space-between;
}
.h5Part2_right-item {
  width: 186px;
}
.h5Part2_right-item>div {
  height: 168px;
  margin: auto;
}
.h5Part2_right-xcx {
  width: 146px;
}
.h5Part2_right-wz {
  width: 136px;
}
.h5Part2_right-item img {
  width: 100%;
}
.h5Part2_right-item p {
width: 100%;
height: 30px;
font-weight: 500;
font-size: 16px;
line-height: 30px;
text-align: center;
color: #666666;
}

/* 第三部分 */
.h5Part3 {
  min-width: 1232px;
  height: 1230px;
  /* background: url('http://qtummatrix.com:2000/course/h5/bg.png') no-repeat; */
  /* background-size: 100% 100%; */
  position: relative;
  z-index: -10;
}
.h5Part3_left_bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -10;
  /* background-color: rgba(0, 0, 0, 0.54); */
}
/* 版心文案 */
.h5Part3_list {
  padding-top: 180px;
  width: 726px;
  color: #FFFFFF;
}
.h5Part3_item>h3 {
font-weight: 500;
font-size: 32px;
line-height: 46px;
margin-left: 54px;
margin-top: 37px;
}
.h5Part3_item>p {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  margin-top: 16px;
}
/* 图标 */
.h5Part3_item {
  position: relative;
}
.h5Part3_item>div {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 2px;
  background-color: red;
  background: url('http://qtummatrix.com:2000/course/h5/sprite-1.png') no-repeat;
  background-size: 150px 150px;
}
.h5Part3_item .h5Part3_item-jyqj {
  background-position: -7px -108px;
}
.h5Part3_item .h5Part3_item-rcxq {
  width: 46px;
  background-position: -102px -108px;
}
.h5Part3_item .h5Part3_item-jyxz {
  background-position: -54px -104px;
}
/* 电脑 */
.h5Part3_right_bg {
  position: absolute;
/* width: 846px;
height: 636px; */
width: 564px;
height: 424px;
right: 0;
/* bottom: 200px; */
top: 500px;
z-index: -9;
/* background: url('http://qtummatrix.com:2000/course/h5/bg-computer.png'); */
/* background-size: 100% 100%; */
}

/* 第四部分 ---- 在第三部分内部的 */



/* 第四部分 */
.h5Part4 {
  position: relative;
}
/* 标题 */
.h5Part6-title {
  position: absolute;
  left: 0;
  right: 0;
  top: -180px;
  text-align: center;
  z-index: 800;
}
.h5Part6-course {
  margin-bottom: 30px;
}
.h5Part3_con {
  height: 100%;
  position: relative;
}
.h5Part6_course-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.h5Part6_course-item {
width: 180px;
height: 40px;
background: linear-gradient(90deg, #9372FA 0%, #7880F7 100%);
border-radius: 100px;
font-size: 14px;
line-height: 40px;
color: #FFFFFF;
cursor: pointer;
border: 1px solid transparent;
}
.h5Part6_course_active {
  background: #fff;
  color: #562DFF;
  border: 1px solid #562DFF;
}
/* 主体内容部分 */
.h5Part4_main_content {
margin-top: 40px;
width: 1200px;
height: 546px;
padding-left: 32px;
border: 1px solid #DCDFE6;
  border-radius: 12px;
  box-shadow: 0px 20px 25px -5px rgba(28, 29, 36, 0.1), 0px 10px 10px -5px rgba(28, 29, 36, 0.04);
  /* 上下两个div */
  position: relative;
}

.h5Part4_main_content .h5Part4_content-top, .h5Part4_main_content .h5Part4_content-bot {
  position: absolute;
  left: 10px;
  right: 20px;
  bottom: 0;
  height: 32px;
  z-index: 80;
  background-color: #FFFFFF;
}
.h5Part4_content-top {
  top: 0;
}
/* 内容 */
.h5Part4_content-wrap {
  padding: 32px 0;
  height: 482px;
  overflow: auto;
}
.h5Part4_content {
  padding-right: 32px;
}
/* 1, 阶段名称部分 */
.h5Part4_course-tit {
height: 30px;
font-weight: 500;
font-size: 18px;
line-height: 30px;
color: #333333;
}
.course-stageName {
  width: 72px;
  margin-right: 36px;
} 
.course-time {
color: #2079FF;
}
/* 2, 阶段内部部分 */
.course_stage-list {
  
}
.course_stage-item {
  margin-top: 28px;
  font-weight: 500;
font-size: 18px;
line-height: 30px;
/* 配合图标定位 */
position: relative;
}

.course_stage-item>h3 {
height: 30px;
margin-left: 35px;
color: #333333;
}
.course_stage-item>p {
margin-top: 12px;
color: #666666;
}
.course_stage-item>div {
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
background: url('http://qtummatrix.com:2000/course/h5/sprite-2.png') no-repeat;
background-size: 24px;
}
.course_stage-item>.course_stage_icon-zynr {
  background-position: 0 0;
}
.course_stage-item>.course_stage_icon-hxnl {
  /* background-position: 0 0; */
  background-position-y: -24px;
}
.course_stage-item>.course_stage_icon-jjwt {
  background-position-y: -48px;
}
.course_stage-item>.course_stage_icon-jdxm {
  background-position-y: -72px;
}


/* 第五部分 */
.h5Part5 {
  margin-top: 70px;
}
/* 2, 主体内容 */
.h5Part5_content {
  margin-top: 30px;
  height: 562px;
}
/* 左侧项目列表 */
.project_list {
  width: 298px;
  height: 100%;
  /* background-color: pink; */
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  text-align: center;
}
.project_item {
width: 296px;
height: 60px;
background: linear-gradient(90deg, #741BCD 0%, #4583FB 100%) no-repeat;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
line-height: 60px;
cursor: pointer;
border: 1px solid transparent;
}
.project_item_active {
  border: 1px solid #4F1CBD;
  color: #4F1CBD;
  background: #FFFFFF;
}

/* 右侧项目内容 */
.project_content {
  width: 917px;
  height: 100%;
border: 1px solid #E4E7ED;
box-shadow: 0px 20px 25px -5px rgba(28, 29, 36, 0.1), 0px 10px 10px -5px rgba(28, 29, 36, 0.04);
border-radius: 8px;
}
.project_message-wrap {
  width: 507px;
  width: 555px;
  height: 550px;
  position: relative;
}
.project_message-top, .project_message-bot {
  position: absolute;
  left: 10px;
  right: 20px;
  bottom: 0;
  background-color: #FFFFFF;
  height: 6px;
}
.project_message-top {
  height: 20px;
  top: 0;
}
.project_message-bot {
  
}
.project_message {
  /* width: 507px; */
  /* height: 562px; */
  height: 550px;
  /* padding: 6px 24px; */
  padding: 0px 24px;
  overflow: auto;
}
.project_message-list {
  /* overflow: auto; */
}
.project_message-item>h3 {
  padding-top: 18px;
height: 30px;
font-size: 18px;
line-height: 30px;
color: #000000;
}
.project_message-item>p {
  padding-top: 8px;
font-size: 14px;
line-height: 30px;
color: #666666;
}
.project_img {
  width: 362px;
  height: 100%;
  background-color: #C4C4C4;
  overflow: auto;
}
.project_img img {
  width: 350px;
  margin: 6px;
}


/* 第六部分 */
.h5Part6 {
  /* 配合右侧图片定位 */
  position: relative;
  min-width: 1232px;
}
/* 主体内容 */
.h5Part6_content {
  margin-top: 90px;
}
/* 上方讲师简介 */
.h5Part6_teacherInfo {
  margin-top: 30px;
}
.teacherInfo_leftImg {
  margin-left: 78px;
  width: 296px;
  height: 332px;
  border-radius: 8px;
  overflow: hidden;
}
.teacherInfo_leftImg img {
  /* width: 100%; */
  height: 100%;
  margin-left: -28px;
}
.teacherInfo_rightMsg {
  width: 680px;
  padding-left: 48px;
  color: #000000;
}
.teacherMsg_h3 {
  padding-top: 58px;
font-weight: 500;
font-size: 24px;
line-height: 35px;
}
.teacherMsg_h4 {
  padding-top: 8px;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}
.teacherMsg_p {
  padding-top: 24px;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: -0.408px;
  color: rgba(0, 0, 0, 0.54);
  /* 超过4行隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  */
  -webkit-line-clamp: 4; /*数字是几就显示几行*/
  -webkit-box-orient: vertical;
}

/* 下方讲师图片轮播 */
.h5Part6_teacherPhotos {
  width: 1156px;
  padding: 18px 12px;
  margin: auto;
  margin-top: 24px;
  background: linear-gradient(90.9deg, #347CFF 0%, #20AFFF 100%);
  border-radius: 12px;
  
}
.h5Part6_teacherPhotos_con {
  width: 100%;
  /* 溢出隐藏 */
  overflow: hidden;
}
.teacherPhotos_list {
  width: 3216px;
  position: relative;
  left: 0;
}
.teacherPhotos_item {
  width: 110px;
  height: 110px;
  margin: 0 12px;
  /* 遮罩 */
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.teacherPhotos_item img {
  width: 100%;
  height: 100%;
}
.teacherPhotos_deactive .photoMask {
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.40);
}

/* 右侧图片 */
.h5Part6_bg {
  position: absolute;
  width: 160px;
  height: 619px;
  height: 480px;
  right: 0px;
  top: 50%;
  margin-top: -240px;
  z-index: -11;
  background: url('http://qtummatrix.com:2000/course/h5/Frame60.png') no-repeat;
  background-size: 100% 100%;
}



/* 第七部分(明星学员) */
.h5Part7 {
height: 825px;
margin-top: 100px;
/* background: url('http://qtummatrix.com:2000/course/h5/Frame54.png') no-repeat; */
/* background-size: 100% 100%; */
position: relative;
}
.h5Part7_bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -8;
}
.h5Part7_bg img {
  width: 100%;
  height: 100%;
}
.h5Part7_content {
  width: 1020px;
  margin: auto;
  overflow: hidden;
}
/* 1, 标题 */
.h5Part7_title {
  margin-top: 220px;
  margin-bottom: 30px;
  color: #FFFFFF;
}
/* 2, 学员信息轮播图 */
.h5Part7_content_stuMsg {
  width: 100%;
}
.stuMsg_list {
  /* TODO: 修改js时要调整width */
  width: 10000px;
}
.stuMsg_item {
  width: 316px;
  height: 230px;
  height: 272px;
  margin: 0 12px;
  /* 配合遮罩 */
  position: relative;
}
.stuMsg_mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url('http://qtummatrix.com:2000/course/h5/Frame61.png') no-repeat;
  background-size: 100% 100%;
}
.stuMsg_pto {
  width: 285px;
  height: 218px;
  margin: auto;
  overflow: hidden;
}
.stuMsg_pto img {
  width: 100%;
  border-radius: 8px;
}
.stuMsg_item p {
  margin-top: 14px;
  font-size: 18px;
  line-height: 42px;
  text-align: center;
  color: #FFFFFF;
}


/* 八, 部分学员offer */
.h5Part8 {
  margin-top: 50px;
  overflow: hidden;
  position: relative;
  height: 547px;
}
.common {
  width: 1232px;
}
#part7 .part-box{
  position: absolute;
  height: 395px;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  left: 0;
  top: 92px;
}
#part7 .part-cell{
  width: 340px;
  height: 394px;
  overflow: hidden;
  margin-right: 16px;
}
#part7 .part-cell img{
    width: 100%;
    height: 100%;
}


/* 九, 就业信息 */
.h5Part9 {
}
#part9 .part-box{
  margin-top: 30px;
  position: relative;
  width: 100%;
  height: 660px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
#part9 .title {
  /* float: left; */
  width: 1232px;
  height: 44px;
  color: #fff;
  background: #072448;
  border-radius: 8px 8px 0 0;
  text-align: center;
  line-height: 44px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#part9 .table-color {
  background: #FF6150;
}

#part9 .title>li {
  float: left;
}

#part9 .title-name,
#part9 .item-name {
  width: 130px;
}

#part9 .title-age,
#part9 .item-age {
  width: 120px;
}

#part9 .title-pay,
#part9 .item-pay {
  width: 120px;
}

#part9 .title-edu,
#part9 .item-edu {
  width: 120px;
}

#part9 .title-job,
#part9 .item-job {
  width: 425px;
}

#part9 .title-welfare,
#part9 .item-welfare {
  width: 317px;
}

#part9 .job-content {
  width: 100%;
  height: 660px;
  position: relative;
}

#part9 .job-content>ul {
  width: 100%;
  float: left;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
  color: #606266;
}

#part9 .job-content>ul>li {
  width: 100%;
  float: left;
  border-bottom: 1px solid #dbdbdb;
}

#part9 .job-content>ul>li:hover {
  background-color: #00B1A0;
  color: white;
}

#part9 .job-content>ul>li>span {
  float: left;
  text-align: center;
}


/* 十, 培养数万学员，成功高薪就业 */
.h5Part10 {}
.groupPhoto {
  margin-top: 90px;
}
.groupPhoto_list {
  margin-top: 30px;
  height: 426px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.groupPhoto_item {
  width: 300px;
}
.groupPhoto_item img {
  width: 100%;
  border-radius: 10px;
}

/* 十一, 合作企业 */
.h5Part11 {
  margin-top: 50px;
}
#part11 {
  margin-bottom: 46px;
}
#part11 .part-box {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#part11 .part-box img {
  width: 192px;
  height: 100px;
  margin-bottom: 24px;
  box-shadow: 0px 0px 6px -1px rgba(28, 29, 36, 0.06), 0px 4px 24px -1px rgba(28, 29, 36, 0.06);
}