.img, .section1 .bg1, .section1 .bg1 .moblie, .section1 .roleTabAll .roleTab .teach1, .section2 .img, .section2 .titleBg, .section3, .section3 .img, .section3 .titleBg, .section3 .btn .win, .section4 .img, .section4 .titleBg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%; }

.center {
  margin: 0 auto;
  width: 1200px;
  padding: 270px 0; }

.titleHub {
  position: relative; }

body {
  background-color: #fff; }

.section1 {
  width: 100%;
  height: 1090px;
  background-color: #fff;
  position: relative; }
  .section1 .banner {
    width: 1500px;
    height: 100%;
    margin: 0 auto; }
  .section1 .bg1 {
    background-image: url("../images/download-img/banner-lou.png");
    background-size: 100% 740px;
    width: 100%;
    height: 740px; }
    .section1 .bg1 .moblie {
      background-image: url("../images/download-img/moblie4.png");
      background-size: 728px 550px;
      width: 728px;
      height: 550px;
      margin: 105px 40px 105px 40px; }
  .section1 .title {
    margin-top: 350px;
    line-height: 36px; }
  .section1 .title1 {
    color: #fbfbfa;
    font-size: 60px;
    font-weight: 600; }
  .section1 .title2 {
    color: #fbfbfa;
    font-size: 37px;
    margin-top: 36px; }
  .section1 .roleTabAll {
    box-shadow: 0px 3px 24px 0px #e1eafb;
    width: 1200px;
    height: 343px;
    position: absolute;
    top: 683px;
    background-color: #fff;
    border-radius: 20px; }
    .section1 .roleTabAll .roleTab {
      width: 100%;
      height: 230px;
      border-bottom: 1px solid #D9E7FE; }
      .section1 .roleTabAll .roleTab span {
        font-size: 24px;
        vertical-align: middle;
        color: #616b72; }
      .section1 .roleTabAll .roleTab > div {
        width: 370px;
        float: left;
        text-align: center;
        padding: 15px;
        cursor: pointer; }
      .section1 .roleTabAll .roleTab .img, .section1 .roleTabAll .roleTab .bg1, .section1 .roleTabAll .roleTab .bg1 .moblie, .section1 .bg1 .roleTabAll .roleTab .moblie, .section1 .roleTabAll .roleTab .teach1, .section1 .roleTabAll .roleTab .section2 .titleBg, .section2 .section1 .roleTabAll .roleTab .titleBg, .section1 .roleTabAll .roleTab .section3, .section1 .roleTabAll .roleTab .section3 .titleBg, .section3 .section1 .roleTabAll .roleTab .titleBg, .section1 .roleTabAll .roleTab .section3 .btn .win, .section3 .btn .section1 .roleTabAll .roleTab .win, .section1 .roleTabAll .roleTab .section4 .titleBg, .section4 .section1 .roleTabAll .roleTab .titleBg {
        width: 166px;
        height: 174px;
        display: inline-block;
        vertical-align: middle; }
      .section1 .roleTabAll .roleTab .teach .img, .section1 .roleTabAll .roleTab .teach .bg1, .section1 .roleTabAll .roleTab .teach .bg1 .moblie, .section1 .bg1 .roleTabAll .roleTab .teach .moblie, .section1 .roleTabAll .roleTab .teach .teach1, .section1 .roleTabAll .roleTab .teach .section2 .titleBg, .section2 .section1 .roleTabAll .roleTab .teach .titleBg, .section1 .roleTabAll .roleTab .teach .section3, .section1 .roleTabAll .roleTab .teach .section3 .titleBg, .section3 .section1 .roleTabAll .roleTab .teach .titleBg, .section1 .roleTabAll .roleTab .teach .section3 .btn .win, .section3 .btn .section1 .roleTabAll .roleTab .teach .win, .section1 .roleTabAll .roleTab .teach .section4 .titleBg, .section4 .section1 .roleTabAll .roleTab .teach .titleBg {
        background: url(../images/download-img/teach.png); }
      .section1 .roleTabAll .roleTab .teach1 .img, .section1 .roleTabAll .roleTab .teach1 .bg1, .section1 .roleTabAll .roleTab .teach1 .bg1 .moblie, .section1 .bg1 .roleTabAll .roleTab .teach1 .moblie, .section1 .roleTabAll .roleTab .teach1 .teach1, .section1 .roleTabAll .roleTab .teach1 .section2 .titleBg, .section2 .section1 .roleTabAll .roleTab .teach1 .titleBg, .section1 .roleTabAll .roleTab .teach1 .section3, .section1 .roleTabAll .roleTab .teach1 .section3 .titleBg, .section3 .section1 .roleTabAll .roleTab .teach1 .titleBg, .section1 .roleTabAll .roleTab .teach1 .section3 .btn .win, .section3 .btn .section1 .roleTabAll .roleTab .teach1 .win, .section1 .roleTabAll .roleTab .teach1 .section4 .titleBg, .section4 .section1 .roleTabAll .roleTab .teach1 .titleBg {
        background: url(../images/download-img/teach.png); }
      .section1 .roleTabAll .roleTab .student .img, .section1 .roleTabAll .roleTab .student .bg1, .section1 .roleTabAll .roleTab .student .bg1 .moblie, .section1 .bg1 .roleTabAll .roleTab .student .moblie, .section1 .roleTabAll .roleTab .student .teach1, .section1 .roleTabAll .roleTab .student .section2 .titleBg, .section2 .section1 .roleTabAll .roleTab .student .titleBg, .section1 .roleTabAll .roleTab .student .section3, .section1 .roleTabAll .roleTab .student .section3 .titleBg, .section3 .section1 .roleTabAll .roleTab .student .titleBg, .section1 .roleTabAll .roleTab .student .section3 .btn .win, .section3 .btn .section1 .roleTabAll .roleTab .student .win, .section1 .roleTabAll .roleTab .student .section4 .titleBg, .section4 .section1 .roleTabAll .roleTab .student .titleBg {
        background: url(../images/download-img/student.png); }
      .section1 .roleTabAll .roleTab .adult .img, .section1 .roleTabAll .roleTab .adult .bg1, .section1 .roleTabAll .roleTab .adult .bg1 .moblie, .section1 .bg1 .roleTabAll .roleTab .adult .moblie, .section1 .roleTabAll .roleTab .adult .teach1, .section1 .roleTabAll .roleTab .adult .section2 .titleBg, .section2 .section1 .roleTabAll .roleTab .adult .titleBg, .section1 .roleTabAll .roleTab .adult .section3, .section1 .roleTabAll .roleTab .adult .section3 .titleBg, .section3 .section1 .roleTabAll .roleTab .adult .titleBg, .section1 .roleTabAll .roleTab .adult .section3 .btn .win, .section3 .btn .section1 .roleTabAll .roleTab .adult .win, .section1 .roleTabAll .roleTab .adult .section4 .titleBg, .section4 .section1 .roleTabAll .roleTab .adult .titleBg {
        background: url(../images/download-img/adult.png); }
      .section1 .roleTabAll .roleTab .teach1 {
        position: absolute;
        top: -75px;
        left: -16px;
        background-image: url("../images/download-img/bubble.png");
        background-size: 446px 321px;
        width: 446px;
        height: 321px; }
        .section1 .roleTabAll .roleTab .teach1 .img, .section1 .roleTabAll .roleTab .teach1 .bg1, .section1 .roleTabAll .roleTab .teach1 .bg1 .moblie, .section1 .bg1 .roleTabAll .roleTab .teach1 .moblie, .section1 .roleTabAll .roleTab .teach1 .teach1, .section1 .roleTabAll .roleTab .teach1 .section2 .titleBg, .section2 .section1 .roleTabAll .roleTab .teach1 .titleBg, .section1 .roleTabAll .roleTab .teach1 .section3, .section1 .roleTabAll .roleTab .teach1 .section3 .titleBg, .section3 .section1 .roleTabAll .roleTab .teach1 .titleBg, .section1 .roleTabAll .roleTab .teach1 .section3 .btn .win, .section3 .btn .section1 .roleTabAll .roleTab .teach1 .win, .section1 .roleTabAll .roleTab .teach1 .section4 .titleBg, .section4 .section1 .roleTabAll .roleTab .teach1 .titleBg {
          margin-top: 35px; }
        .section1 .roleTabAll .roleTab .teach1 span {
          vertical-align: -80px; }
    .section1 .roleTabAll .clientTab {
      width: 100%;
      margin-top: 25px; }
      .section1 .roleTabAll .clientTab span {
        font-size: 16px;
        vertical-align: middle;
        color: #0e263a; }
      .section1 .roleTabAll .clientTab > div {
        float: left;
        height: 57px;
        width: 220px;
        border-right: 1px solid #E6E9F2;
        padding-left: 71px;
        cursor: pointer; }
      .section1 .roleTabAll .clientTab .img, .section1 .roleTabAll .clientTab .bg1, .section1 .roleTabAll .clientTab .bg1 .moblie, .section1 .bg1 .roleTabAll .clientTab .moblie, .section1 .roleTabAll .clientTab .roleTab .teach1, .section1 .roleTabAll .roleTab .clientTab .teach1, .section1 .roleTabAll .clientTab .section2 .titleBg, .section2 .section1 .roleTabAll .clientTab .titleBg, .section1 .roleTabAll .clientTab .section3, .section1 .roleTabAll .clientTab .section3 .titleBg, .section3 .section1 .roleTabAll .clientTab .titleBg, .section1 .roleTabAll .clientTab .section3 .btn .win, .section3 .btn .section1 .roleTabAll .clientTab .win, .section1 .roleTabAll .clientTab .section4 .titleBg, .section4 .section1 .roleTabAll .clientTab .titleBg {
        width: 57px;
        height: 57px;
        display: inline-block;
        vertical-align: middle; }
      .section1 .roleTabAll .clientTab .yunApp .img, .section1 .roleTabAll .clientTab .yunApp .bg1, .section1 .roleTabAll .clientTab .yunApp .bg1 .moblie, .section1 .bg1 .roleTabAll .clientTab .yunApp .moblie, .section1 .roleTabAll .clientTab .yunApp .roleTab .teach1, .section1 .roleTabAll .roleTab .clientTab .yunApp .teach1, .section1 .roleTabAll .clientTab .yunApp .section2 .titleBg, .section2 .section1 .roleTabAll .clientTab .yunApp .titleBg, .section1 .roleTabAll .clientTab .yunApp .section3, .section1 .roleTabAll .clientTab .yunApp .section3 .titleBg, .section3 .section1 .roleTabAll .clientTab .yunApp .titleBg, .section1 .roleTabAll .clientTab .yunApp .section3 .btn .win, .section3 .btn .section1 .roleTabAll .clientTab .yunApp .win, .section1 .roleTabAll .clientTab .yunApp .section4 .titleBg, .section4 .section1 .roleTabAll .clientTab .yunApp .titleBg {
        background: url(../images/download-img/teachApp.png); }
      .section1 .roleTabAll .clientTab .client .img, .section1 .roleTabAll .clientTab .client .bg1, .section1 .roleTabAll .clientTab .client .bg1 .moblie, .section1 .bg1 .roleTabAll .clientTab .client .moblie, .section1 .roleTabAll .clientTab .client .roleTab .teach1, .section1 .roleTabAll .roleTab .clientTab .client .teach1, .section1 .roleTabAll .clientTab .client .section2 .titleBg, .section2 .section1 .roleTabAll .clientTab .client .titleBg, .section1 .roleTabAll .clientTab .client .section3, .section1 .roleTabAll .clientTab .client .section3 .titleBg, .section3 .section1 .roleTabAll .clientTab .client .titleBg, .section1 .roleTabAll .clientTab .client .section3 .btn .win, .section3 .btn .section1 .roleTabAll .clientTab .client .win, .section1 .roleTabAll .clientTab .client .section4 .titleBg, .section4 .section1 .roleTabAll .clientTab .client .titleBg {
        background: url(../images/download-img/client.png); }
      .section1 .roleTabAll .clientTab .classApp .img, .section1 .roleTabAll .clientTab .classApp .bg1, .section1 .roleTabAll .clientTab .classApp .bg1 .moblie, .section1 .bg1 .roleTabAll .clientTab .classApp .moblie, .section1 .roleTabAll .clientTab .classApp .roleTab .teach1, .section1 .roleTabAll .roleTab .clientTab .classApp .teach1, .section1 .roleTabAll .clientTab .classApp .section2 .titleBg, .section2 .section1 .roleTabAll .clientTab .classApp .titleBg, .section1 .roleTabAll .clientTab .classApp .section3, .section1 .roleTabAll .clientTab .classApp .section3 .titleBg, .section3 .section1 .roleTabAll .clientTab .classApp .titleBg, .section1 .roleTabAll .clientTab .classApp .section3 .btn .win, .section3 .btn .section1 .roleTabAll .clientTab .classApp .win, .section1 .roleTabAll .clientTab .classApp .section4 .titleBg, .section4 .section1 .roleTabAll .clientTab .classApp .titleBg {
        background: url(../images/download-img/client.png); }

.section2 {
  width: 100%;
  height: 900px;
  background-color: #f5f9fd; }
  .section2 .section {
    width: 384px;
    margin-top: 72px;
    font-size: 24px;
    line-height: 48px; }
  .section2 .section1 .bg1, .section1 .section2 .bg1, .section2 .section1 .bg1 .moblie, .section1 .bg1 .section2 .moblie, .section2 .section1 .roleTabAll .roleTab .teach1, .section1 .roleTabAll .roleTab .section2 .teach1, .section2 .img, .section2 .titleBg, .section2 .section3, .section2 .section3 .btn .win, .section3 .btn .section2 .win {
    background-image: url("../images/download-img/teachCloud.png");
    background-size: 646px 482px;
    width: 646px;
    height: 482px; }
  .section2 .titleBg {
    display: inline-block;
    background-image: url("../images/download-img/titleBG1.png");
    background-size: 250px 25px;
    width: 250px;
    height: 25px;
    position: absolute;
    bottom: 0; }
  .section2 .titleSection {
    position: relative;
    font-size: 50px;
    color: #091E2F;
    z-index: 100;
    font-weight: 600; }

.section3 {
  width: 100%;
  height: 900px;
  background-image: url("../images/download-img/BG.png");
  background-size: 100% 900px;
  width: 100%;
  height: 900px; }
  .section3 .section {
    width: 384px;
    margin-top: 72px;
    font-size: 24px;
    color: #fbfbfa;
    line-height: 48px; }
  .section3 .section1 .bg1, .section1 .section3 .bg1, .section3 .section1 .bg1 .moblie, .section1 .bg1 .section3 .moblie, .section3 .section1 .roleTabAll .roleTab .teach1, .section1 .roleTabAll .roleTab .section3 .teach1, .section3 .section3, .section3 .img, .section3 .titleBg, .section3 .btn .win {
    background-image: url("../images/download-img/classClient.png");
    background-size: 677px 513px;
    width: 677px;
    height: 513px; }
  .section3 .titleBg {
    display: inline-block;
    background-image: url("../images/download-img/titleBG3.png");
    background-size: 346px 25px;
    width: 346px;
    height: 25px;
    position: absolute;
    bottom: 0; }
  .section3 .titleSection {
    position: relative;
    font-size: 50px;
    color: #fbfbfa;
    z-index: 100;
    font-weight: 600; }
  .section3 .btn {
    width: 202px;
    height: 59px;
    line-height: 59px;
    background-color: #fff;
    color: #5591FE;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
    font-size: 26px;
    margin-top: 69px; }
    .section3 .btn .win {
      background-image: url("../images/download-img/win(1).png");
      background-size: 26px 24px;
      width: 26px;
      height: 24px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 15px; }
    .section3 .btn:hover, .section3 .btn:active {
      opacity: 0.9; }

.section4 {
  width: 100%;
  height: 900px;
  background-color: #f5f9fd; }
  .section4 .section {
    width: 384px;
    margin-top: 72px;
    font-size: 24px;
    line-height: 48px; }
  .section4 .section1 .bg1, .section1 .section4 .bg1, .section4 .section1 .bg1 .moblie, .section1 .bg1 .section4 .moblie, .section4 .section1 .roleTabAll .roleTab .teach1, .section1 .roleTabAll .roleTab .section4 .teach1, .section4 .section3, .section4 .section3 .btn .win, .section3 .btn .section4 .win, .section4 .img, .section4 .titleBg {
    background-image: url("../images/download-img/classApp.png");
    background-size: 651px 468px;
    width: 651px;
    height: 468px; }
  .section4 .titleBg {
    display: inline-block;
    background-image: url("../images/download-img/titleBG2.png");
    background-size: 303px 25px;
    width: 303px;
    height: 25px;
    position: absolute;
    bottom: 0; }
  .section4 .titleSection {
    position: relative;
    font-size: 50px;
    color: #091E2F;
    z-index: 100;
    font-weight: 600; }

.selectedTitle {
  font-weight: 600;
  color: #091E2F; }

.fl {
  float: left; }

.fr {
  float: right; }

.clear {
  clear: both; }
  .qrcode{
    width: 114px;
            height: 114px;
            position: absolute;
            left: 118px;
            top: 133px;
  }
  .qrcode canvas{
    width: 114px;
    height: 114px;
  }
/*# sourceMappingURL=style.css.map */