.app {
  overflow-y: auto;
  height: 100vh;
  width: 100vw;
  overflow-x: auto; }
  .app .header-area {
    min-width: 1200px;
    height: 80px;
    background-color: #f68217;
    display: flex;
    align-items: center;
    justify-content: center; }
    .app .header-area .header {
      width: 1138px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .app .header-area .header .logo {
        width: 290px;
        height: 38px; }
      .app .header-area .header .down-btn {
        width: 137px;
        height: 30px;
        background-image: url("/img/index/down-default.png");
        cursor: pointer; }
        .app .header-area .header .down-btn:hover {
          background-image: url("/img/index/down-hover.png"); }
  .app .banner-area {
    min-width: 1200px;
    width: 100%;
    height: 510px;
    background-image: url("/img/index/banner.png");
    background-size: 1920px 510px;
    background-repeat: no-repeat;
    background-position: center top; }
  .app .four-moudle-area {
    min-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fcf4eb;
    padding: 94px 0; }
    .app .four-moudle-area .four-moudle-title {
      font-size: 44px;
      color: #444444; }
      .app .four-moudle-area .four-moudle-title .red {
        color: #f68417; }
    .app .four-moudle-area .four-moudle {
      margin-top: 40px;
      width: 1138px;
      height: 473px; }
  .app .how-class-area {
    min-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0; }
    .app .how-class-area .how-class-title {
      color: #333333;
      font-size: 44px; }
    .app .how-class-area .how-class-content {
      margin-top: 74px;
      width: 1138px;
      display: flex;
      align-items: center; }
      .app .how-class-area .how-class-content .how-class-left {
        flex: 1; }
        .app .how-class-area .how-class-content .how-class-left .class-left-item {
          display: flex;
          align-items: center;
          padding: 16px;
          border-radius: 12px;
          border: 1px solid transparent;
          cursor: pointer;
          margin: 6px 0; }
          .app .how-class-area .how-class-content .how-class-left .class-left-item-active {
            background: #fff3f0;
            border-radius: 12px;
            border: 1px solid transparent;
            position: relative;
            background: linear-gradient(to right, #fff3f0, #ffffff); }
            .app .how-class-area .how-class-content .how-class-left .class-left-item-active::after {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              right: 0;
              z-index: -1;
              margin: -2px;
              border-radius: 12px;
              background: linear-gradient(to right, #f6871b, #fff 80%); }
          .app .how-class-area .how-class-content .how-class-left .class-left-item:hover {
            background: #fff3f0;
            background: linear-gradient(to right, #fff3f0, #ffffff); }
          .app .how-class-area .how-class-content .how-class-left .class-left-item .how-item-icon {
            width: 56px;
            height: 56px; }
          .app .how-class-area .how-class-content .how-class-left .class-left-item .how-item-des {
            margin-left: 10px; }
            .app .how-class-area .how-class-content .how-class-left .class-left-item .how-item-des .how-item-title {
              color: #333333;
              font-size: 18px;
              font-weight: bold;
              line-height: 26px; }
            .app .how-class-area .how-class-content .how-class-left .class-left-item .how-item-des .how-item-subtitle {
              line-height: 20px;
              color: #777777;
              font-size: 14px; }
      .app .how-class-area .how-class-content .how-class-right {
        margin-left: 40px;
        width: 640px;
        height: 359px;
        border-radius: 6px; }
        .app .how-class-area .how-class-content .how-class-right .how-class-video {
          width: 640px;
          height: 359px;
          border-radius: 6px;
          object-fit: cover; }
  .app .why-class-area {
    min-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url("/img/index/why-shufa-bg.png");
    background-size: 1920px 754px;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding: 60px 0; }
    .app .why-class-area .why-class-title {
      color: #333333;
      font-size: 44px; }
    .app .why-class-area .why-class {
      margin-top: 80px;
      margin-bottom: 20px;
      width: 1138px;
      height: 312px; }
  .app .excellent-show-area {
    min-width: 1200px;
    background-color: #f9e1c6;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .app .excellent-show-area .excellent-show-title {
      color: #333333;
      font-size: 44px; }
    .app .excellent-show-area .excellent-show-list {
      overflow: hidden;
      width: 1138px;
      padding-left: 10px;
      margin-top: 66px; }
      .app .excellent-show-area .excellent-show-list .excellent-item {
        float: left;
        margin-right: 48px;
        padding: 10px 0 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; }
        .app .excellent-show-area .excellent-show-list .excellent-item:nth-of-type(4n) {
          margin-right: 0px; }
        .app .excellent-show-area .excellent-show-list .excellent-item .excellent-img {
          width: 245px;
          height: 310px;
          border-radius: 6px; }
        .app .excellent-show-area .excellent-show-list .excellent-item .excellent-name {
          font-weight: bold;
          color: #333333;
          line-height: 24px;
          font-size: 16px;
          text-align: center;
          margin-top: 20px;
          position: relative; }
          .app .excellent-show-area .excellent-show-list .excellent-item .excellent-name .excellent-name-txt {
            position: relative;
            z-index: 2; }
          .app .excellent-show-area .excellent-show-list .excellent-item .excellent-name::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 6px;
            background-color: #f68217;
            left: 0;
            bottom: 6px;
            z-index: 1; }
        .app .excellent-show-area .excellent-show-list .excellent-item .excellent-age {
          color: #333333;
          line-height: 24px;
          font-size: 16px;
          text-align: center; }
  .app .teach-sence-area {
    min-width: 1200px;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden; }
    .app .teach-sence-area .teach-sence-title {
      color: #333333;
      font-size: 44px; }
    .app .teach-sence-area .teach-sence-content {
      height: 226px;
      display: flex;
      align-items: center;
      width: 1200px;
      margin-top: 75px; }
      .app .teach-sence-area .teach-sence-content .prev-btn-area {
        cursor: pointer; }
      .app .teach-sence-area .teach-sence-content .next-btn-area {
        cursor: pointer; }
      .app .teach-sence-area .teach-sence-content .sence-list-c {
        flex: 1;
        overflow: hidden;
        height: 226px;
        position: relative;
        margin: 0 24px; }
        .app .teach-sence-area .teach-sence-content .sence-list-c .sence-list {
          display: flex;
          height: 226px;
          position: absolute;
          left: 0;
          bottom: 0;
          transition: left 1s ease-in-out; }
          .app .teach-sence-area .teach-sence-content .sence-list-c .sence-list .sence-item {
            width: 340px;
            height: 226px;
            border-radius: 6px;
            margin-right: 30px; }
  .app .how-start-area {
    min-width: 1200px;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .app .how-start-area .how-start-title {
      color: #333333;
      font-size: 44px; }
    .app .how-start-area .how-start {
      margin-top: 62px;
      width: 968px;
      height: 250px; }
  .app .about-area {
    min-width: 1200px;
    background-color: #f7f7f7;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center; }
    .app .about-area .about-left {
      width: 362px;
      color: #333333;
      font-size: 14px; }
      .app .about-area .about-left .about-title {
        font-size: 24px;
        position: relative;
        padding-bottom: 10px; }
        .app .about-area .about-left .about-title::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0px;
          height: 4px;
          width: 54px;
          background-color: #f68217; }
      .app .about-area .about-left .about-label {
        margin-top: 20px;
        font-weight: bold;
        line-height: 30px; }
      .app .about-area .about-left .about-value {
        line-height: 30px; }
    .app .about-area .about-site {
      width: 776px;
      height: 336px; }
  .app .bottom-area {
    min-width: 1200px;
    background-color: #333333;
    display: flex;
    justify-content: center;
    padding: 30px 0 10px; }
    .app .bottom-area .bottom-content {
      width: 1138px; }
      .app .bottom-area .bottom-content .bottom-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #ffffff; }
        .app .bottom-area .bottom-content .bottom-info .botton-info-left .bottom-title {
          font-weight: bold;
          color: #ffffff;
          line-height: 48px;
          font-size: 16px; }
        .app .bottom-area .bottom-content .bottom-info .botton-info-left .bottom-link {
          color: #ffffff;
          line-height: 48px; }
          .app .bottom-area .bottom-content .bottom-info .botton-info-left .bottom-link .v-line {
            margin: 0 20px; }
          .app .bottom-area .bottom-content .bottom-info .botton-info-left .bottom-link .bottom-item-link {
            cursor: pointer;
            color: #ffffff; }
        .app .bottom-area .bottom-content .bottom-info .bottom-info-right {
          display: flex;
          align-items: center; }
          .app .bottom-area .bottom-content .bottom-info .bottom-info-right .bottom-code-item {
            margin-left: 10px;
            display: flex;
            align-items: center; }
            .app .bottom-area .bottom-content .bottom-info .bottom-info-right .bottom-code-item:nth-of-type(2) {
              margin-left: 60px; }
            .app .bottom-area .bottom-content .bottom-info .bottom-info-right .bottom-code-item .code-img {
              width: 124px;
              height: 124px; }
            .app .bottom-area .bottom-content .bottom-info .bottom-info-right .bottom-code-item .code-text {
              margin-left: 10px;
              writing-mode: vertical-lr; }
      .app .bottom-area .bottom-content .dark-h-line {
        height: 1px;
        background-color: #1b1b1b;
        margin: 30px 0 20px; }
      .app .bottom-area .bottom-content .bottom-time {
        height: 40px;
        color: #888888; }
        .app .bottom-area .bottom-content .bottom-time .time-item {
          margin-right: 30px;
          color: #888888; }
  .app .wx-mini-area {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 20;
    width: 156px;
    height: 196px;
    box-shadow: 0px 6px 12px 0px #f9e1c6;
    border-radius: 12px 12px 3px 3px;
    background-color: #ffffff; }
    .app .wx-mini-area .wx-mini-title {
      width: 156px;
      height: 36px;
      background: linear-gradient(180deg, #17ceca 0%, #4de0b7 99%);
      border-radius: 12px 12px 3px 3px;
      color: #ffffff;
      line-height: 36px;
      text-align: center;
      font-size: 16px; }
    .app .wx-mini-area .wx-mini-code-c {
      width: 156px;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff; }
      .app .wx-mini-area .wx-mini-code-c .wx-mini-code {
        width: 146px;
        height: 146px; }

/*# sourceMappingURL=index.css.map */