.section {
  text-align: center; }
  .section h1 {
    font-size: 90px;
    font-weight: bold;
    margin: 0;
    padding-top: 125px; }
  .section h4 {
    font-size: 36px;
    font-weight: bold; }
  .section h1, .section h2, .section h3, .section h4, .section h5 {
    color: white; }

.center-panel {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.home, .parent, .student, .teacher, .branding {
  position: relative; }
  .home .section, .parent .section, .student .section, .teacher .section, .branding .section {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    background-position: 50% 50%;
    height: 100%;
    min-height: 250px; }

.home #slides .section {
  min-height: 620px; }
.home .section.slide0 {
  background-image: url(../imgs/banner/slide0.jpg);
}
.home .section.slide1 {
  background-image: url(../imgs/banner/slide1.jpg);
}
.home .section.slide2 {
  background-image: url(../imgs/banner/slide2.jpg); }
.home .section.slide3 {
  background-image: url(../imgs/banner/slide3.jpg); }
.home .section.slide4 {
  background-image: url(../imgs/banner/slide4.jpg); }
  .home .section.slide5 {
  background-image: url(../imgs/banner/slide5.jpg); }
.home .section.section1 {

  background-image: url(../imgs/section1.jpg);
  /*background-position-y: 500px; */}
  .home .section.section1 .content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
    .home .section.section1 .content div {
      color: #0c86e3; 
      font-size: 36px;}
    .home .section.section1 .content div:nth-child(1) {
      /*margin-bottom: 25px;*/
    }
    .home .section.section1 .content div:nth-child(3){
      padding-top: 75px;
    }
    .home .section.section1 .content div:nth-child(3) img {
      margin-right: -28px;
      height: 394px;
      width: 360px;
    }

.home .section.section2 {
  background-image: url(../imgs/section2.jpg); }
  .home .section.section2 .content {
    padding-top: 88px;}
    .home .section.section2 .content h2 {
      color: #FFFFFF;
      font-size: 36px; }
    .home .section.section2 .content h2:nth-child(2) {
      font-size: 60px;
      margin-bottom: 75px;}
    .home .section.section2 .content p {
      color: #00FFDE;
      text-align: center;
      font-size: 30px;
      margin-bottom: 38px;}
    .home .section.section2 .content p:nth-child(4),.home .section.section2 .content p:nth-child(6){
      color: #FFFFFF;
      font-size: 18px;
      display: inline-block;
      line-height: 30px;
      width: 364px;
      margin-bottom: 65px;}
    .home .section.section2 .content div img{
      margin-bottom: 32px;}
.home .section.section3 {
  background-image: url(../imgs/section3.jpg); }
.home .section.section3-1 {
    background-image: url(../imgs/section3-1.jpg);
  }
.home .section.section3-2 {
    background-image: url(../imgs/section3-2.png);}
.home .section.section4-1 {
  background-image: url(../imgs/section4-1.jpg);}

.home .section.section4 {
  background-image: url(../imgs/section4.jpg); }
  .home .section.section4 .content {
    padding-top: 70px; }
    .home .section.section4 .content h2 {
      margin-bottom: 30px;
      font-size: 36px; }
    .home .section.section4 .content p:nth-child(2){
      display: inline-block;
      width: 753px;}
    .home .section.section4 .content label {
      font-size: 118px;
      line-height: 0;
      color: #0c86e3; }
      .home .section.section4 .content label.unit {
        font-size: 75px;
        position: relative;}
    .home .section.section4 .content p {
      font-size: 18px;
      line-height: 30px;
      color: white; }
    .home .section.section4 .content .content-row.score {
      margin-top: 30px; }
      .home .section.section4 .content .content-row.score .content-item {
        display: inline-block;
        vertical-align: top;
        margin: 0 20px; }
        .home .section.section4 .content .content-row.score .content-item p {
          width: 260px;
          margin: 20px auto; }
        .home .section.section4 .content .content-row.score .content-item .first-text{
          vertical-align:bottom;
        }
        .home .section.section4 .content .content-row.score .content-item:first-child p {
          width: 220px; }
        .home .section.section4 .content .content-row.score .content-item:last-child p {
          width: 300px; }
.home .section.section5 {
  background-image: url(../imgs/section5.jpg); }
  .home .section.section5 .content {
    padding-top: 60px; }
    .home .section.section5 .content h2 {
      font-size: 36px;
      color: #0c86e3; }
    .home .section.section5 .content p {
      margin-top: 20px;
      font-size: 16px;
      color: #999; }
.home .section.section6 {
  background-image: url(../imgs/map_covered.jpg); }
  .home .section.section6 .content {
    padding-top: 85px; }
    .home .section.section6 .content div:nth-child(1){
      color: #00FFDE;
      font-size: 60px;
      font-weight: bold;}
    .home .section.section6 .content h2 {
      font-size: 36px; }
    .home .section.section6 .content h4 {
      font-size: 24px;
      margin-bottom: 20px; }
    .home .section.section6 .content p {
      font-size: 18px;
      color: white;
      line-height: 30px;
      font-weight: normal;
      margin: 0; }
    .home .section.section6 .content .content-row {
      margin-top: 33px; }
      .home .section.section6 .content .content-row .content-item {
        display: inline-block;
        vertical-align: top;
        margin: 0 20px;
        width: 220px; }
    .home .section.section6 .content .contact {
      text-align: left;
      width: 1067px;
      margin: auto;
      margin-top: 36px;
      padding: 22px 110px;
      background-color: white; }
      .home .section.section6 .content .contact p {
        font-size: 16px;
        color: #555; }
      .home .section.section6 .content .contact .info, .home .section.section6 .content .contact .figure {
        display: inline-block;
        vertical-align: top; }
      .home .section.section6 .content .contact .info .holder {
        display: inline-block;
        width: 48px; }
      .home .section.section6 .content .contact .figure {
        position: relative;
        float: right; }
.home .section.slide1 h1 {
  font-size: 52px;
  padding-top: 240px; }
.home .section.slide1 h3 {
  font-size: 42px;
  font-weight: 300;
  margin-top: 61px; }
.home .section.slide2 .content {
  position: relative;
  right: -440px;
  margin: 0 auto;
  padding-top: 305px;
  text-align: left; }
  .home .section.slide2 .content h1 {
    font-size: 45px;
    font-weight: 300;
    padding-top: 60px;
    letter-spacing: 3px; 
    line-height: 1.5;}
.home .section.slide3 .content {
  margin: 0 auto;
  padding-top: 90px;
  width: 1100px; }
  .home .section.slide3 .content .figure {
    margin-bottom: 76px; }
  .home .section.slide3 .content .info {
    font-size: 45px;
    color: #fff;
    margin-bottom: 19px;
  }
  .home .section.slide3 .content .info1 {
    font-size: 60px;
    color: #fff;
  }
.home .section.slide4 h1, .home .section.slide4 h4 {
  color: #11f5dd; }
.home .section.slide4 h1 {
  font-size: 50px;
  padding-top: 140px; }
.home .section.slide4 .info .info-item {
  display: inline-block;
  background-color: rgba(12, 134, 227, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.07);
  margin: 45px 20px 20px;
  padding: 10px 35px;
  color: white;
  vertical-align: top;
  height: 450px;
  width: 300px; }
  .home .section.slide4 .info .info-item h4 {
    font-size: 30px;
    font-weight: normal;
    padding: 10px 40px 4px; }
  .home .section.slide4 .info .info-item img {
    margin: 0 6px; }
  .home .section.slide4 .info .info-item .item-row {
    min-height: 22px;
    margin: 16px 0;
    font-size: 16px; }
    .home .section.slide4 .info .info-item .item-row .btn {
      padding: 10px 55px; }

#fp-nav, .page-indicator {
  position: fixed;
  right: 20px;
  color: white;
  z-index: 2; }
  #fp-nav ul li, .page-indicator ul li {
    width: 100%;
    height: 100%;
    margin: 0; }
    #fp-nav ul li a.active, .page-indicator ul li a.active {
      border-left: 3px solid white; }
    #fp-nav ul li a, .page-indicator ul li a {
      display: inline-block;
      color: white;
      border-left: 3px solid rgba(255, 255, 255, 0.3);
      padding: 20px 10px;
      margin-right: 12px; }
      #fp-nav ul li a:hover, #fp-nav ul li a:focus, .page-indicator ul li a:hover, .page-indicator ul li a:focus {
        color: white;
        text-decoration: none; }
  #fp-nav.deep, .page-indicator.deep {
    color: #0c86e3; }
    #fp-nav.deep ul li a.active, .page-indicator.deep ul li a.active {
      border-left: 3px solid #0c86e3; }
    #fp-nav.deep ul li a, .page-indicator.deep ul li a {
      color: #0c86e3;
      border-left: 3px solid rgba(12, 134, 227, 0.3); }
      #fp-nav.deep ul li a:hover, #fp-nav.deep ul li a:focus, .page-indicator.deep ul li a:hover, .page-indicator.deep ul li a:focus {
        color: #0c86e3; }

.parent .section.parent-section1 {
  background-image: url(../imgs/parent-section1.jpg); }
.parent .section.parent-section2 {
  background-image: url(../imgs/parent-section2.jpg); }
.parent .section.parent-section3 {
  background-image: url(../imgs/parent-section3.jpg); }

.student .section.student-section1 {
  background-image: url(../imgs/student-section1.jpg); }
.student .section.student-section2 {
  background-image: url(../imgs/student-section2.jpg); }
.student .section.student-section3 {
  background-image: url(../imgs/student-section3.jpg); }
.student .section.student-section4 {
  background-image: url(../imgs/student-section4.jpg); }

.teacher .section.teacher-section1 {
  background-image: url(../imgs/teacher-section1.jpg); }
.teacher .section.teacher-section2 {
  background-image: url(../imgs/teacher-section2.jpg); }
.teacher .section.teacher-section3 {
  background-image: url(../imgs/teacher-section3.jpg); }
.teacher .section.teacher-section4 {
  background-image: url(../imgs/teacher-section4.jpg); }

.branding .section.branding-section1 {
  background-image: url(../imgs/branding-section1.jpg); }
  .branding .section.branding-section1 h1 {
    font-size: 80px; }
  .branding .section.branding-section1 h4 {
    font-size: 50px;
    color: #11f5dd;
    font-weight: normal;
    margin: 35px 0 60px; }
  .branding .section.branding-section1 .video {
    margin: 0 auto 160px;
    width: 1022px; }
.branding .section.info {
  max-width: 1045px;
  margin: 0 auto;
  padding: 110px 0; }
  .branding .section.info h4 {
    font-size: 30px;
    color: #0c86e3;
    margin: 10px 0 60px; }
  .branding .section.info p {
    font-size: 20px;
    color: #555;
    text-align: left;
    line-height: 36px;
    margin: 0; }
.branding .section.branding-section2 {
  background-image: url(../imgs/branding-section2.jpg);
  min-height: 650px; }
  .branding .section.branding-section2 h4 {
    font-size: 36px;
    color: #0c86e3;
    padding: 60px 0 50px; }
  .branding .section.branding-section2 .cards {
    /* max-width: 900px; */
    margin: 0 auto;
    text-align: center; }
.branding .section.branding-section3 {
  background-image: url(../imgs/branding-section3.jpg);
  height: 500px; }
  .branding .section.branding-section3 h4 {
    font-size: 36px;
    padding: 90px 0 20px; }
  .branding .section.branding-section3 .cards {
    position: relative;
    top: 80px; }
.branding .section.events {
  position: relative;
  margin: 400px 0 90px;
  min-height: 100px; }
  .branding .section.events h4 {
    font-size: 36px;
    color: #373737; }
  .branding .section.events .arrow {
    position: absolute;
    top: 480px;
    width: 55px;
    height: auto;
    cursor: pointer;
    z-index: 2; }
    .branding .section.events .arrow img {
      width: 100%;
      height: auto; }
    .branding .section.events .arrow.left {
      left: 10px; }
    .branding .section.events .arrow.right {
      right: 90px; }
  .branding .section.events .boxes-outter-container {
    margin: 60px 0;
    padding: 40px 75px 0; }
  .branding .section.events .boxes-inner-container {
    overflow: hidden; }
  .branding .section.events .boxes-inner-container .boxes {
    text-align: left;
    white-space: nowrap;
    overflow: auto;
    margin-bottom: -18px;
    min-height: 670px;
    padding-top: 140px; }
    .branding .section.events .boxes-inner-container .boxes .box {
      display: inline-block;
      width: 320px;
      color: white;
      position: relative;
      text-align: left;
      margin: 4px; }
      .branding .section.events .boxes-inner-container .boxes .box:hover .info {
        display: block; }
      .branding .section.events .boxes-inner-container .boxes .box .landing img {
        width: 100%;
        height: 500px; }
      .branding .section.events .boxes-inner-container .boxes .box .title {
        position: absolute;
        bottom: 12px;
        padding: 0 25px;
        z-index: 2; }
        .branding .section.events .boxes-inner-container .boxes .box .title p {
          font-size: 18px;
          line-height: 30px;
          white-space: normal; }
      .branding .section.events .boxes-inner-container .boxes .box .cover {
        width: 100%;
        height: 150px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-size: 100% 100%;
        background-image: url(../imgs/cover.png);
        z-index: 1; }
      .branding .section.events .boxes-inner-container .boxes .box .info {
        display: none;
        position: absolute;
        top: 0;
        padding: 18px 25px;
        height: 100%;
        width: 100%;
        background-color: #0c86e3;
        white-space: normal; }
        .branding .section.events .boxes-inner-container .boxes .box .info h5 {
          font-size: 25px;
          line-height: 50px; }
        .branding .section.events .boxes-inner-container .boxes .box .info p {
          font-size: 18px;
          line-height: 30px; }
      .branding .section.events .boxes-inner-container .boxes .box .timeline {
        position: absolute;
        top: -100px;
        text-align: center;
        width: 100%; }
        .branding .section.events .boxes-inner-container .boxes .box .timeline h5 {
          font-size: 18px;
          color: #0c86e3; }
        .branding .section.events .boxes-inner-container .boxes .box .timeline .border {
          border-bottom: 2px solid #d4e1e3;
          position: relative;
          top: -11px;
          z-index: -1;
          left: -200px;
          width: 200%; }
.branding .section.branding-section4 {
  background-image: url(../imgs/branding-section4.jpg); }
  .branding .section.branding-section4 h4 {
    font-size: 36px;
    padding: 90px 0 30px;
    margin-bottom: 40px; }
  .branding .section.branding-section4 .cards {
    max-width: 1100px;
    margin: 20px auto 140px;
    text-align: center; }
    .branding .section.branding-section4 .cards .card {
      position: relative;
      width: 255px;
      display: inline-block;
      margin: 14px 4px; }
      .branding .section.branding-section4 .cards .card .info {
        position: absolute;
        /* top: 270px; */
        top:220px;
        width: 100%;
        padding: 2px 20px; }
        .branding .section.branding-section4 .cards .card .info h5 {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 14px; }
        .branding .section.branding-section4 .cards .card .info p {
          font-size: 12px;
          margin:0;
          color: white; }
.branding .section.news {
  max-width: 1040px;
  margin: 0 auto;
  padding: 80px 0 30px; }
  .branding .section.news h4 {
    font-size: 36px;
    color: #0c86e3;
    padding: 10px 0 40px; }
  .branding .section.news .media {
    text-align: left; }
    .branding .section.news .media .media-object {
      width: 180px;
      height: auto;
      border: 1px solid #ddd; }
    .branding .section.news .media .media-body {
      border-bottom: 1px solid #ddd;
      padding: 20px 0; }
      .branding .section.news .media .media-body h4 {
        font-size: 20px;
        padding: 0 0 12px; }
        .branding .section.news .media .media-body h4 a {
          color: #333; }
      .branding .section.news .media .media-body p {
        font-size: 16px;
        color: #888; }
    .branding .section.news .media:first-child .media-body {
      padding-top: 0; }
  .branding .section.news .more {
    margin: 70px 0; }

.cooperate .section {
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  background-position: 50% 50%;
  height: 550px;
  background-image: url(../imgs/cooperate-bg.jpg); }
  .cooperate .section h4 {
    margin-top: 130px; }
.cooperate .content-container {
  width: 1100px;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: -120px; }
  .cooperate .content-container h4 {
    font-size: 36px;
    font-weight: bold; }
.cooperate .information-card {
  padding-bottom: 80px; }
/*********************/
  .cooperate .information-card .co-img-item{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;
  }
  .cooperate .information-card .co-img-item{
    margin-top: 47px;
  }
  .cooperate .information-card .co-img-item .co-img1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .cooperate .information-card .co-img-item .co-img1 img{
    height:110px;
  }
  .cooperate .information-card .co-img-line1{
    width: 1px;
    height: 110px;
    border: 1px solid #06DE94;
  }
  .cooperate .information-card .co-img-line2{
    width: 1px;
    height: 233px;
    border: 1px solid #0C86E3;
  }
  .cooperate .information-card .co-img2{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    justify-content: space-evenly;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
/******************/
  .cooperate .information-card h3 {
    font-size: 36px;
    font-weight: bold;
    color: #0c86e3;
    padding-top: 41px;
  padding-bottom: 33px; }
  .cooperate .information-card .text {
    margin-bottom: 76px; }
    .cooperate .information-card .text p {
      font-size: 18px;
      line-height: 28px;
      color: #555; }
  .cooperate .information-card .co-img-item .co-img-tit {
    font-size: 30px;
    font-weight: normal;
    color: #0c86e3;
    line-height: 1; }
  .cooperate .information-card .co-img-item .sub {
    color: #0c86e3;
    line-height: 1;
    font-size:24px;
    margin-top: 18px;
    margin-bottom: 34px;
  }
  .cooperate .information-card .co-img-item  .co-img-cont{
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #555555;
    line-height: 36px;
  }
  .cooperate .information-card .row p {
    text-align: left;
    margin: 16px 0;
    text-align: center;
    padding: 0 30px;
    font-size: 18px;
    line-height: 30px;
    color: #555; }
  .cooperate .information-card .figure {
    
    height: 110px; }
.cooperate .process {
  margin-top: 100px; }
  .cooperate .process .circle-container {
    margin-left: 35px; }
    .cooperate .process .circle-container .circle {
      float: left;
      position: relative;
      height: 135px;
      width: 135px;
      margin: 34px;
      text-align: center;
      color: white;
      background-color: #0c86e3;
      padding: 26px 4px;
      border-radius: 50%;
      box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; }
      .cooperate .process .circle-container .circle h4 {
        font-size: 30px;
        margin: 0 0 8px; }
      .cooperate .process .circle-container .circle p {
        font-size: 16px;
        margin: 0; }
      .cooperate .process .circle-container .circle .process-arrow {
        position: absolute;
        top: 60px;
        right: -44px;
        width: 24px; }
.cooperate .application-form {
  margin-top: 80px; }
  .cooperate .application-form h4 {
    margin-bottom: 40px;
    font-weight: bold; }
  .cooperate .application-form label, .cooperate .application-form select {
    margin-right: 12px;
    min-width: 60px; }
  .cooperate .application-form .row-item {
    margin: 36px 0; }
  .cooperate .application-form .form-inline {
    text-align: left; }
  .cooperate .application-form .form-control {
    min-width: 120px; }
  .cooperate .application-form form {
    font-size: 18px; }
    .cooperate .application-form form .submit {
      font-size: 18px; }

/*********************解决方案********************/
.solution .so-head1{
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  background-position: 50% 50%;
  height: 600px;
  background-image: url(../imgs/solution/solution1.png);
}
.solution .so-line{
  height: 8px;
  background: #0C86E3;
  border-radius: 4px;
}
.solution .so-mtit{
  font-size: 36px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #0C86E3;
  line-height: 72px;
  margin-top: 20px;
  line-height: 1;
}
.solution .so-mtit1{
  font-size: 24px;
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  color: #333333;
  line-height: 72px;
  margin-top:18px;
  margin-bottom: 20px;
  line-height: 1;
}
.solution .so-cont{
  font-size: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #555555;
  line-height: 1.8;
}
.solution .so-cont span{
  color:#0C86E3FF;
}
.solution .so-head1 .sh-tit{
  text-align: center;
  padding-top: 210px;
  font-size: 72px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: #FFFFFF;
}
.solution .so-head1 .sh-tit1{
  text-align: center;
  margin-top: 30px;
  font-size: 48px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #FFFFFF;
}
.solution .so-head2{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: relative;
  top: -88px;
}
.solution .so-head2 .so-head2-img1{
  width:750px;
}
.solution .so-head2 .so-head2-img{
  width: 750px;
}
.solution .so-head2 .so-head2-body{
  padding-top: 176px;
  margin: auto;
  width: 580px;
}
.solution .so-head3{
  position: relative;
  top: -176px;
}
.solution .so-head3 .so-head3-body{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: right;
  text-align: -webkit-right;
}
.solution .so-head2 .so-head2-body1{
  padding-top: 258px;
  max-width: 580px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  margin: auto;
  text-align: start;
}
.solution .so-head4{
  font-size: 24px;
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  color: #333333;
  line-height: 1.8;
  text-align: center;
  position: relative;
  top: -80px;
}
.solution .so-head5{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 122px;
}
.solution .so-head5 .so-head5-item{
  width: 257px;
  height: 360px;
  background: #FBFCFE;
  border-radius: 10px;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  box-shadow: 0px 0px 10px 5px rgb(0 20 71 / 10%);
}
.solution .so-head5 .so-head5-item:not(:last-child){
  margin-right: 20px;
}
.solution .so-head5 .so-head5-item .so-item-img1{
  position: relative;
  top: -14px;
  margin-bottom: 17px;
  height:107px;
}
.solution .so-head5 .so-head5-item .so-item-img2{
  position: relative;
  top: -24px;
  margin-bottom: 7px;
  height:117px;
}
.solution .so-head5 .so-head5-item .so-item-img3{
  position: relative;
  top: -24px;
  margin-bottom: 7px;
  height:107px;
}

.solution .so-head5 .so-head5-item .so-item-cont{
  width:205px;
  line-height: 1.8;
  font-size: 17px;
  font-family: Alibaba PuHuiTi;
  color: #555555;
  text-align: left;
}
.solution .so-head5 .so-head5-item .so-item-cont span{
  font-weight: bold;
}
/*********************解决方案********************/

.product-use .section {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  background-position: 0 0;
  height: 400px;
  background-image: url(../imgs/productuse/banner.jpg); }

.main {
  position: absolute;
  z-index: 1;
  width: 100%; }

a:hover {
  text-decoration: none; }

#logo {
  width: 200px;
  height: 100px;
  position: relative;
  left: 50px;
  top: 32px; }

#top-nav {
  float: right; }

#list {
  position: relative;
  right: 90px;
  bottom: 60px; }

.list-font {
  float: left;
  margin-left: 30px;
  padding-left: 20px;
  font-size: 20px;
  height: 150px;
  color: white;
  position: relative; }

#top-nav.deep .list-font .btns {
  color: #0c86e3; }

.btns {
  color: white; }

.btns img {
  display: none;
  margin-top: 3px; }

.btns:hover img, .btns.active img {
  margin: 0 auto;
  display: block; }

.btns:hover, .btns.active {
  color: white; }

.list-font > a:hover, .list-font > a.active {
  font-weight: bold; }

#list-font-last img {
  width: 100%;
  height: 4px; }

.menu {
  width: 420px;
  height: 150px;
  background-color: white;
  position: absolute;
  right: -2px;
  top: 50px;
  display: none; }

.list-text:hover .menu {
  display: block; }

.menu:hover {
  display: block; }

.under {
  width: 65px; }

.under:hover .imgs1 {
  display: block; }

.menu-student {
  height: 100px;
  position: relative;
  left: 45px;
  top: 40px; }

.menu-teacher {
  height: 100px;
  position: absolute;
  left: 175px;
  bottom: -3px; }

.menu-parent {
  height: 100px;
  position: absolute;
  left: 315px;
  bottom: 6px; }

.menu-student a .under, .menu-teacher a .under, .menu-parent a .under {
  color: #959595; }
.menu-student:hover a .under, .menu-student.active a .under, .menu-teacher:hover a .under, .menu-teacher.active a .under, .menu-parent:hover a .under, .menu-parent.active a .under {
  color: #0c86e3; }
  .menu-student:hover a .under .imgs1, .menu-student.active a .under .imgs1, .menu-teacher:hover a .under .imgs1, .menu-teacher.active a .under .imgs1, .menu-parent:hover a .under .imgs1, .menu-parent.active a .under .imgs1 {
    display: block; }

.imgs1 {
  width: 58px;
  margin-top: 3px;
  display: none; }

.imgs2 {
  position: relative;
  left: -1px;
  top: -10px; }

.imgs3 {
  position: relative;
  right: 8px;
  bottom: 18px; }

.imgs4 {
  position: relative;
  right: 7px;
  bottom: 14px; }

.foot {
  background-color: #283e56;
  height: 150px;
  padding-bottom: 20px; }

.logo {
  margin: 0 auto;
  width: 100px;
  padding-top: 20px; }

.logo-image {
  width: 90px;
  height: 35px;
  margin-top: 25px; }

.logo-image img {
  height: 100%; }

.join {
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  margin: 15px auto; }

.join a:visited, .join a {
  color: white !important; }

.footer {
  color: #d6d6d6;
  opacity: 0.7;
  font-size: 14px;
  text-align: center; }

#list-font-last:hover .nav-dropdown {
  display: block; }

.nav-dropdown {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  background-color: white;
  padding: 12px 0;
  white-space: nowrap;
  font-size: 18px; }
  .nav-dropdown ul li {
    padding: 15px 60px;
    margin: 0 1px; }
    .nav-dropdown ul li a {
      color: #888; }
    .nav-dropdown ul li.active, .nav-dropdown ul li.active:hover {
      background-color: #0c86e3; }
      .nav-dropdown ul li.active a, .nav-dropdown ul li.active:hover a {
        color: white; }
    .nav-dropdown ul li:hover a {
      color: #0c86e3; }

.app_stu_1 {
  width: 250px; }

.product-imgs1 {
  display: inline-block;
  margin-right: 8px; }
  .product-imgs1 .wechat_T {
    width: 230px;
    display: inline-block; }


.side-bar {width: 45px;position: fixed;bottom: 20px;right: 0px;font-size: 0;line-height: 0;z-index: 100; background-color: #39a1f1;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}
.side-bar a {width: 45px;height: 45px;display: inline-block;background-color: #39a1f1;margin-bottom: 2px;border-bottom: 1px solid rgba(27,136,241,1)}
.side-bar a:hover {background-color: #2f90e8;}
.side-bar a.icon-qq {background-position: 0 -62px; background: url(../imgs/banner/return.png) no-repeat center;}
.side-bar a.icon-chat {background-position: 0 -130px;position: relative; background: url(../imgs/banner/wechatsm.png) no-repeat center;}
.side-bar a.icon-blog {background-position: 0 -198px; background: url(../imgs/banner/qq.png) no-repeat center;}
.side-bar a.icon-mail {background-position: 0 -266px; background: url(../imgs/banner/tel.png) no-repeat center; border-bottom: 0px}

.wechat-qr {position:absolute; left: -160px; top:-50px; background-color: white; padding: 10px; display: none}

.side-bar a:hover .wechat-qr { display: block}
.qq-qr {position:absolute; left: -160px; top:0px; background-color: white; padding: 10px; display: none}
a:hover .qq-qr {display: block}

.tel-tips {position:absolute; right: 48px;background-color: white;text-align: center; display:none}
a:hover .tel-tips {display:block}