.category-title[data-v-197458f2] {
  display: flex;
  align-content: center;
}
.category-title .title-bar[data-v-197458f2] {
  width: 4px;
  height: 30px;
  background-color: #3DAB4A;
  margin-right: 10px;
}
.category-title .title[data-v-197458f2] {
  font-size: 22px;
  color: rgba(0, 0, 0, 0.85);
}
.recommend-class-wrapper[data-v-07d038cd] {
  height: 100%;
}
.recommend-class-wrapper .category-title[data-v-07d038cd] {
  display: flex;
  align-content: center;
}
.recommend-class-wrapper .category-title .title-bar[data-v-07d038cd] {
  margin-right: 10px;
  width: 4px;
  height: 30px;
  background-color: #3DAB4A;
}
.recommend-class-wrapper .category-title .title[data-v-07d038cd] {
  font-size: 22px;
  color: rgba(0, 0, 0, 0.85);
}
.recommend-class-wrapper .class-gird-list[data-v-07d038cd] {
  display: grid;
  width: 100%;
  grid-column-gap: 38px;
  row-gap: 48px;
  grid-template-areas: "class1 class1 class2 class2" "class3 class4 class5 class6";
  grid-template-columns: repeat(4, 1fr);
}
.recommend-class-wrapper .class-gird-list .class-wrapper[data-v-07d038cd] {
  border-radius: 8px;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .big-class[data-v-07d038cd] {
  display: flex;
  width: 100%;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .big-class .class-img-style[data-v-07d038cd] {
  width: 312px;
  height: 208px;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  vertical-align: middle;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .big-class .price[data-v-07d038cd] {
  position: absolute;
  bottom: 10px;
  right: 0;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .small-class[data-v-07d038cd] {
  width: 312px;
  overflow: hidden;
  border-radius: 8px;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .small-class .class-img-style[data-v-07d038cd] {
  width: 312px;
  height: 208px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.recommend-class-wrapper .class-gird-list .class-1[data-v-07d038cd] {
  grid-area: class1;
}
.recommend-class-wrapper .class-gird-list .class-2[data-v-07d038cd] {
  grid-area: class2;
}
.recommend-class-wrapper .class-gird-list .class-3[data-v-07d038cd] {
  grid-area: class3;
}
.recommend-class-wrapper .class-gird-list .class-4[data-v-07d038cd] {
  grid-area: class4;
}
.recommend-class-wrapper .class-gird-list .class-5[data-v-07d038cd] {
  grid-area: class5;
}
.recommend-class-wrapper .class-gird-list .class-6[data-v-07d038cd] {
  grid-area: class6;
}
.recommend-class-wrapper .class-content-right[data-v-07d038cd] {
  padding-bottom: 7px;
  background: #fff;
  width: calc(100% - 312px);
  border-radius: 0 8px 8px 0;
}
.recommend-class-wrapper .class-content-right .date-format[data-v-07d038cd] {
  margin-right: 6px;
}
.recommend-class-wrapper .class-content-right .learn-user[data-v-07d038cd] {
  justify-content: space-between;
}
.recommend-class-wrapper .class-content-bottom[data-v-07d038cd] {
  height: 135px;
  background: #fff;
  border-radius: 0 0 8px 8px;
  padding-bottom: 7px;
}
.recommend-class-wrapper .class-content-bottom .class-name[data-v-07d038cd] {
  height: 48px;
}
.recommend-class-wrapper[data-v-07d038cd] {
  /* stylelint-disable-next-line selector-class-pattern */
}
.recommend-class-wrapper .classroomName-div[data-v-07d038cd] {
  height: 48px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recommend-class-wrapper[data-v-7072f8fd] {
  height: 100%;
}
.recommend-class-wrapper .category-title[data-v-7072f8fd] {
  display: flex;
  align-content: center;
}
.recommend-class-wrapper .category-title .title-bar[data-v-7072f8fd] {
  margin-right: 10px;
  width: 4px;
  height: 30px;
  background-color: #3DAB4A;
}
.recommend-class-wrapper .category-title .title[data-v-7072f8fd] {
  font-size: 22px;
  color: rgba(0, 0, 0, 0.85);
}
.recommend-class-wrapper .class-gird-list[data-v-7072f8fd] {
  display: grid;
  width: 100%;
  grid-column-gap: 38px;
  row-gap: 48px;
  grid-template-areas: "class1 class1 class2 class2" "class3 class4 class5 class6";
  grid-template-columns: repeat(4, 1fr);
}
.recommend-class-wrapper .class-gird-list .class-wrapper[data-v-7072f8fd] {
  border-radius: 8px;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .big-class[data-v-7072f8fd] {
  display: flex;
  width: 100%;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .big-class .class-img-style[data-v-7072f8fd] {
  width: 312px;
  height: 208px;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  vertical-align: middle;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .small-class[data-v-7072f8fd] {
  width: 312px;
  overflow: hidden;
  border-radius: 8px;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .small-class .class-img-style[data-v-7072f8fd] {
  width: 100%;
  height: 208px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.recommend-class-wrapper .class-gird-list .class-wrapper .small-class .learn-user[data-v-7072f8fd] {
  margin-right: 10px;
}
.recommend-class-wrapper .class-gird-list .class-1[data-v-7072f8fd] {
  grid-area: class1;
}
.recommend-class-wrapper .class-gird-list .class-2[data-v-7072f8fd] {
  grid-area: class2;
}
.recommend-class-wrapper .class-gird-list .class-3[data-v-7072f8fd] {
  grid-area: class3;
}
.recommend-class-wrapper .class-gird-list .class-4[data-v-7072f8fd] {
  grid-area: class4;
}
.recommend-class-wrapper .class-gird-list .class-5[data-v-7072f8fd] {
  grid-area: class5;
}
.recommend-class-wrapper .class-gird-list .class-6[data-v-7072f8fd] {
  grid-area: class6;
}
.recommend-class-wrapper .class-content-right[data-v-7072f8fd] {
  padding-bottom: 7px;
  width: calc(100% - 312px);
  background: #fff;
  border-radius: 0 8px 8px 0;
}
.recommend-class-wrapper .class-content-right .learn-user[data-v-7072f8fd] {
  margin-right: 10px;
}
.recommend-class-wrapper .class-content-bottom[data-v-7072f8fd] {
  height: 135px;
  background: #fff;
  border-radius: 0 0 8px 8px;
  padding-bottom: 7px;
}
.recommend-class-wrapper[data-v-7072f8fd] {
  /* stylelint-disable-next-line selector-class-pattern */
}
.recommend-class-wrapper .classroomName-div[data-v-7072f8fd] {
  height: 48px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.class-content-box[data-v-038ac72a] {
  text-align: left;
  background: #fff;
  border-radius: 8px;
}
.class-content-box .unselect-course-img[data-v-038ac72a] {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 78px;
  height: 48px;
  -o-object-fit: cover;
     object-fit: cover;
}
.class-content-box .mask[data-v-038ac72a] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 152px;
  background: rgba(0, 0, 0, 0.39);
  border-radius: 8px;
}
.class-content-box .mask img[data-v-038ac72a] {
  width: 104px;
  height: 104px;
  -o-object-fit: cover;
     object-fit: cover;
}
.class-content-box .class-content-box-top .title[data-v-038ac72a] {
  min-height: 48px;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
}
.class-content-box .class-content-box-top img[data-v-038ac72a] {
  z-index: 2;
  width: 38px;
  height: 38px;
  -o-object-fit: cover;
     object-fit: cover;
}
.class-content-box .class-content-box-bottom .left .container div[data-v-038ac72a] {
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.45);
}
.class-content-box .class-content-box-bottom .left .people[data-v-038ac72a] {
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #f56c6c;
  opacity: 1;
}
.class-content-box .class-content-box-bottom .right .unselect-course-wrapper[data-v-038ac72a] {
  display: flex;
  align-items: flex-end;
}
.micro-specialty-list-wrapper[data-v-79d9b9bb] {
  text-align: left;
}
.micro-specialty-list-wrapper .class-content[data-v-79d9b9bb] {
  display: grid;
  grid-column-gap: 20px;
  row-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  background: #fafafa;
}
.micro-specialty-list-wrapper .class-content .micro-specialty[data-v-79d9b9bb]:nth-child(odd) {
  margin-right: 20px;
}
.category-list-wrapper[data-v-32a2d960] {
  text-align: left;
}
.category-list-wrapper .category-list .category-title[data-v-32a2d960] {
  display: flex;
  align-content: center;
  padding-bottom: 20px;
}
.category-list-wrapper .category-list .category-title .title-bar[data-v-32a2d960] {
  margin-right: 10px;
  width: 4px;
  height: 30 px;
  background-color: #2ec620;
}
.category-list-wrapper .category-list .category-title .title[data-v-32a2d960] {
  font-size: 22px;
  color: #1a1a1a;
}
.category-list-wrapper .category-list .course-list[data-v-32a2d960] {
  display: grid;
  grid-column-gap: 38px;
  row-gap: 48px;
  grid-template-columns: repeat(4, 1fr);
  /* stylelint-disable */
  grid-template-areas: "course1 course1 course2 course2" "course3 course4 course5 course6";
}
.category-list-wrapper .category-list .course-list .course[data-v-32a2d960] {
  border-radius: 10px;
}
.category-list-wrapper .category-list .course-list .course .course-big[data-v-32a2d960] {
  display: flex;
  align-content: center;
  background: white;
  border-radius: 10px;
}
.category-list-wrapper .category-list .course-list .course .course-big .img-style[data-v-32a2d960] {
  width: 312px;
  height: 208px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  border-radius: 10px;
}
.category-list-wrapper .category-list .course-list .course .course-big .course-desc-wrapper[data-v-32a2d960] {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  width: 45.5%;
  height: 168px;
  vertical-align: top;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0 8px 8px 0;
}
.category-list-wrapper .category-list .course-list .course .course-big .course-desc-wrapper .top .course-title[data-v-32a2d960] {
  line-height: 28px;
  font-size: 20px;
}
.category-list-wrapper .category-list .course-list .course .course-big .course-desc-wrapper .top .course-introduce[data-v-32a2d960] {
  overflow: hidden;
  margin-top: 16px;
  margin-bottom: 18px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 22px;
}
.category-list-wrapper .category-list .course-list .course .course-big .course-desc-wrapper .course-desc[data-v-32a2d960] {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 22px;
}
.category-list-wrapper .category-list .course-list .course .course-normal[data-v-32a2d960] {
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 312px;
  overflow: hidden;
}
.category-list-wrapper .category-list .course-list .course .course-normal .img-style[data-v-32a2d960] {
  height: 208px;
  background-size: cover;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}
.category-list-wrapper .category-list .course-list .course .course-normal .course-title[data-v-32a2d960] {
  overflow: hidden;
  padding: 16px 16px 0;
  margin-bottom: 10px;
  height: 50px;
  line-height: 25px;
  font-size: 18px;
  color: #1a1a1a;
}
.category-list-wrapper .category-list .course-list .course .course-normal .course-desc[data-v-32a2d960] {
  overflow: hidden;
  padding-left: 16px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 22px;
  padding-bottom: 10px;
}
.category-list-wrapper .category-list .course-list .course .course-normal .course-desc-wrapper[data-v-32a2d960] {
  background-color: #fff;
  padding-bottom: 10px;
}
.category-list-wrapper .category-list .course-list .course-1[data-v-32a2d960] {
  grid-area: course1;
}
.category-list-wrapper .category-list .course-list .course-2[data-v-32a2d960] {
  grid-area: course2;
}
.category-list-wrapper .category-list .course-list .course-3[data-v-32a2d960] {
  grid-area: course3;
}
.category-list-wrapper .category-list .course-list .course-4[data-v-32a2d960] {
  grid-area: course4;
}
.category-list-wrapper .category-list .course-list .course-5[data-v-32a2d960] {
  grid-area: course5;
}
.category-list-wrapper .category-list .course-list .course-6[data-v-32a2d960] {
  grid-area: course6;
}
.category-list-wrapper .category-list .course-list .course-7[data-v-32a2d960] {
  grid-area: course7;
}
.category-list-wrapper .category-list .course-list .course-8[data-v-32a2d960] {
  grid-area: course8;
}
.category-list-wrapper .pb40[data-v-32a2d960] {
  padding-bottom: 40px;
}
.app-constructor[data-v-7a6b49e4] {
  padding-right: 40px;
  padding-left: 40px;
  text-align: left;
}
.app-constructor .swiper-header[data-v-7a6b49e4] {
  display: flex;
  /* stylelint-disable-next-line selector-class-pattern */
}
.app-constructor .swiper-header .swiper_div[data-v-7a6b49e4] {
  width: 1360px;
}
.app-constructor .moudle[data-v-7a6b49e4] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  row-gap: 20px;
}
.app-constructor .moudle .moudle-content-wrapper[data-v-7a6b49e4] {
  position: relative;
}
.app-constructor .moudle .moudle-content-wrapper .img-style[data-v-7a6b49e4] {
  height: 180px;
  background-size: cover;
}
.app-constructor .moudle .moudle-content-wrapper .title[data-v-7a6b49e4] {
  position: absolute;
  top: 0;
  padding: 26px 0 10px 20px;
  font-size: 34px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  line-height: 48px;
}
.app-constructor .pb40[data-v-7a6b49e4] {
  padding-bottom: 40px;
}