.app {
  padding-bottom: 14rem;
  box-sizing: border-box;
  background: #ffffff;
}

.app .caper-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8.8rem;
  padding: 0 4rem;
  box-sizing: border-box;
  background: #ffffff;
}

.app .caper-tab span {
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 8.8rem;
  font-size: 3.2rem;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #a1acbe;
}

.app .caper-tab .tab-active {
  color: #3f6bb4;
  position: relative;
}

.app .caper-tab .tab-active::after {
  content: '_';
  display: block;
  overflow: hidden;
  width: 5.6rem;
  height: .6rem;
  background: #3f6bb4;
  border-radius: .4rem;
  position: absolute;
  bottom: .6rem;
  left: 50%;
  margin-left: -2.8rem;
}

.app .find_header {
  width: 100%;
  padding: 1.8rem 4rem;
  box-sizing: border-box;
  font-size: 2.6rem;
  font-family: Source Han Serif CN, Source Han Serif CN-Medium;
  font-weight: 500;
  color: #4d5865;
}

.app .find_header img {
  height: 5.2rem;
}

.app .index_tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8.8rem;
  padding: 0 4rem;
  box-sizing: border-box;
}

.app .index_tab span {
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 8.8rem;
  font-size: 3.2rem;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 600;
  text-align: center;
  color: #a1acbe;
}

.app .index_tab .tab-active {
  color: #3f6bb4;
  position: relative;
}

.app .index_tab .tab-active::after {
  content: '_';
  display: block;
  overflow: hidden;
  width: 5.6rem;
  height: .6rem;
  background: #3f6bb4;
  border-radius: .4rem;
  position: absolute;
  bottom: .6rem;
  left: 50%;
  margin-left: -2.8rem;
}

.app .header {
  width: 100%;
  height: 49.2rem;
  background: url(/assets/images/class/header-bg.svg) center no-repeat;
  background-size: auto 100%;
  padding: 4rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.app .header .header_immg {
  width: 25.6rem;
  height: 40.4rem;
  background: #ffffff;
  border-radius: 1.6rem;
}

.app .header .header_immg img {
  width: 100%;
}

.app .header .header_text {
  width: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.app .header .header_text p {
  width: 40rem;
  height: 9.2rem;
  background: #ffffff;
  border: .2rem solid #ffffff;
  border-radius: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #103765;
  box-sizing: border-box;
}

.app .header .header_text p img {
  width: 6.4rem;
  height: 6.4rem;
  margin-left: 4rem;
}

.app .curriculum {
  width: 100%;
  padding: 1.6rem 4rem;
  box-sizing: border-box;
}

.app .curriculum .curriculum-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.4rem;
  margin-top: 7.2rem;
  line-height: 5.2rem;
}

.app .curriculum .curriculum-title:nth-child(1) {
  margin-top: 0;
}

.app .curriculum .curriculum-title p {
  font-size: 3.6rem;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  color: #333333;
}

.app .curriculum .curriculum-title p:nth-child(2) {
  font-size: 2.4rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #a1acbe;
  display: flex;
  align-items: center;
}

.app .curriculum .curriculum-title p img {
  width: 1.6rem;
  margin-left: .8rem;
}

.app .curriculum .curriculum-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}

.app .curriculum .curriculum-list .curriculum-list-contant {
  width: 32rem;
}

.app .curriculum .curriculum-list .curriculum-list-contant .curriculum-list-img {
  position: relative;
  width: 32rem;
  height: 18rem;
  border-radius: 1.6rem;
  overflow: hidden;
}

.app .curriculum .curriculum-list .curriculum-list-contant .curriculum-list-img img {
  width: 100%;
  border-radius: 1.6rem;
}

.app .curriculum .curriculum-list .curriculum-list-contant .curriculum-list-img span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 6.8rem;
  height: 3.6rem;
  background: #ff9500;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 0.8rem;
  left: 1.6rem;
  top: 1.6rem;
  font-size: 2rem;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #ffffff;
  box-sizing: border-box;
}

.app .curriculum .curriculum-list .curriculum-list-contant p:nth-child(2) {
  font-size: 2.6rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  margin: 1.6rem 0 .8rem 0;
}

.app .curriculum .curriculum-list .curriculum-list-contant p:nth-child(3) {
  font-size: 2.4rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #999999;
  margin-bottom: 3.2rem;
  display: flex;
}

.app .curriculum .curriculum-list .curriculum-list-contant p:nth-child(3) span:nth-child(1) {
  margin-right: 3.2rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app .curriculum .curriculum-list .curriculum-list-contant p:nth-child(3) span:nth-child(2) {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app .curriculum .curriculum-list .curriculum-list-contant p:nth-child(4) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.app .curriculum .curriculum-list .curriculum-list-contant p:nth-child(4) span:nth-child(1) {
  font-size: 3.6rem;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  color: #ff8d42;
}

.app .curriculum .curriculum-list .curriculum-list-contant p:nth-child(4) span:last-of-type {
  font-size: 2.4rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-decoration: line-through;
  text-align: left;
  color: #cacaca;
}

.app .curriculum .curriculum-list .curriculum-list-contant p:nth-child(4) img {
  width: 3.6rem;
  margin-left: 1.2rem;
  margin-right: 2.4rem;
}

.app .curriculum .curriculum-list:last-of-type .curriculum-list-contant .curriculum-list-img span {
  display: none;
}

.app .find_teach {
  display: none;
  box-sizing: border-box;
}

.app .find_teach .teach_bg {
  width: 100%;
  height: 4rem;
  background: linear-gradient(180deg, #f8f8f8, #ffffff);
}

.app .find_teach .teach_top {
  padding: 0 4rem;
  box-sizing: border-box;
}

.app .find_teach .teach_top h1 {
  font-size: 3.6rem;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #333333;
  margin: 0 0 1.6rem 0;
}

.app .find_teach .teach_top .teach_con {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app .find_teach .teach_top .teach_con img {
  width: 32.4rem;
  display: block;
}

.app .find_teach .teach_bottom {
  padding: 0 4rem;
  box-sizing: border-box;
  margin-top: 4.8rem;
}

.app .find_teach .teach_bottom h1 {
  font-size: 3.6rem;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #333333;
  margin: 0 0 1.6rem 0;
}

.app .find_teach .teach_bottom .teach_con p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2.4rem 0 4.8rem;
  box-sizing: border-box;
  width: 100%;
  height: 14.4rem;
  border-radius: 3.2rem;
  margin-bottom: 1.6rem;
  font-size: 3.2rem;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
}

.app .find_teach .teach_bottom .teach_con p:nth-child(1) {
  background: linear-gradient(180deg, #bfefff, #daf5ff);
  color: #205e73;
}

.app .find_teach .teach_bottom .teach_con p:nth-child(2) {
  background: linear-gradient(180deg, #d5e4fe, #e9f1ff);
  color: #203e73;
}

.app .find_teach .teach_bottom .teach_con p:nth-child(3) {
  background: linear-gradient(180deg, #fce6d8, #fef2eb);
  color: #734020;
}

.app .find_teach .teach_bottom .teach_con p:nth-child(4) {
  background: linear-gradient(180deg, #e8e4fb, #f0f1fd);
  color: #41318f;
}

.teaching {
  display: none;
}

.trend {
  width: 100%;
}

.trend .trend-header img {
  width: 100%;
}

.trend .trend-banner {
  display: none;
}

.trend .trend-banner img {
  width: 100%;
}

.trend .trend-footer img {
  width: 100%;
}

.trend .trend-tips {
  font-size: 2.8rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #cacaca;
  line-height: 4.4rem;
  text-align: center;
  margin: 8rem 0;
}

.trend .trend-content {
  padding: 0 4rem;
  box-sizing: border-box;
}

.trend .trend-content .capertype-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8.8rem;
  padding: 0 4rem;
  box-sizing: border-box;
  background: #ffffff;
  z-index: 1;
}

.trend .trend-content .capertype-tab span {
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 8.8rem;
  font-size: 3.2rem;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #a1acbe;
}

.trend .trend-content .capertype-tab .tab-active {
  color: #3f6bb4;
  position: relative;
}

.trend .trend-content .capertype-tab .tab-active::after {
  content: '_';
  display: block;
  overflow: hidden;
  width: 5.6rem;
  height: .6rem;
  background: #3f6bb4;
  border-radius: .4rem;
  position: absolute;
  bottom: .6rem;
  left: 50%;
  margin-left: -2.8rem;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-subject {
  font-size: 2.8rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #a1acbe;
  line-height: 4.4rem;
  margin-bottom: 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-subject i {
  flex: 1;
  margin-left: 2.4rem;
  position: relative;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-subject i::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 1px solid #eee;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class div {
  width: 32rem;
  margin-bottom: 4.8rem;
  position: relative;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class div .trend-list-imgg {
  width: 32rem;
  height: 18rem;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class div .trend-list-imgg img {
  width: 100%;
  height: 100%;
  border-radius: 1.6rem;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class div .trend-list-imgg span {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 6.8rem;
  height: 3.6rem;
  background: #ff9500;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 0.8rem;
  left: 1.6rem;
  top: 1.6rem;
  font-size: 2rem;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #ffffff;
  box-sizing: border-box;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class div p:nth-child(2) {
  font-size: 2.6rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  margin: 1.6rem 0 .8rem 0;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class div p:nth-child(3) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class div p:nth-child(3) span:nth-child(1) {
  font-size: 3.6rem;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  color: #ff8d42;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class div p:nth-child(3) span:last-of-type {
  font-size: 2.4rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-decoration: line-through;
  text-align: left;
  color: #cacaca;
}

.trend .trend-content .trend-list .trend-list-item .trend-list-class div p:nth-child(3) img {
  width: 3.6rem;
  margin-left: 1.2rem;
  margin-right: 2.4rem;
}

.tips {
  width: 100%;
  text-align: center;
  font-size: 2.8rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #cacaca;
  margin-top: 4.8rem;
}

.tips p {
  text-align: center;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 14rem;
  background-color: #fff;
  padding: 0 4rem;
  box-sizing: border-box;
}

.footer div {
  width: 100%;
  height: 9.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer p {
  display: flex;
  flex: 50%;
  height: 10rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  line-height: 3.6rem;
  color: #A1ACBE;
  font-weight: 400;
}

.footer p img {
  width: 4rem;
  height: 4rem;
}

.footer p .footer-our-actived {
  display: none;
}

.footer p .footer-class-active {
  display: none;
}

.footer .active {
  color: #3F6BB4;
  font-weight: 500;
}

.class-dialog {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.class-dialog .class-dialog-content {
  width: 56rem;
  height: 41.6rem;
  background: #ffffff;
  border-radius: 3.2rem;
  padding: 6.4rem 4rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.class-dialog .class-dialog-content p:nth-child(1) {
  font-size: 3.6rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 2.4rem;
}

.class-dialog .class-dialog-content p:nth-child(2) {
  font-size: 2.8rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: center;
  color: #666666;
  line-height: 4.4rem;
}

.class-dialog .class-dialog-content .class-dialog-button {
  width: 36rem;
  height: 8.8rem;
  background: #3f6bb4;
  border-radius: 1.6rem;
  margin-top: 6.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.8rem;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}