@charset "UTF-8";
.__zh__title {
  font-size: 2.13542vw;
  font-weight: 500;
  color: #3877EE;
  margin-bottom: 4px;
  background: -webkit-linear-gradient(to left, #6EB5F5 0.68359%, #0087FF 100%);
  /* Chrome, Safari */
  background: linear-gradient(to left, #6EB5F5 0.68359%, #0087FF 100%);
  /* 标准语法 */
  -webkit-background-clip: text;
  /* Chrome, Safari */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Chrome, Safari */ }

.__en__title {
  font-family: "Microsoft Yahei", sans-serif;
  font-size: 1.14583vw;
  font-weight: 400;
  color: #BED2E5;
  opacity: 0.5; }

@media screen and (max-width: 768px) {
  .__zh__title {
    font-size: 5.46667vw;
    font-weight: 500;
    color: #3877EE;
    margin-bottom: 4px;
    background: -webkit-linear-gradient(to left, #6EB5F5 0.68359%, #0087FF 100%);
    /* Chrome, Safari */
    background: linear-gradient(to left, #6EB5F5 0.68359%, #0087FF 100%);
    /* 标准语法 */
    -webkit-background-clip: text;
    /* Chrome, Safari */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Chrome, Safari */ }
  .__en__title {
    font-family: "Microsoft Yahei", sans-serif;
    font-size: 2.93333vw;
    font-weight: 400;
    color: #BED2E5;
    opacity: 0.5; } }

/** 全局变量 */
/*================================================Page Index=================================================*/
/*================================================Main Banner Area=================================================*/
/*================================================About area=================================================*/
/*================================================School all-round management service=================================================*/
/*================================================Multiple service=================================================*/
/*================================================Self Edu=================================================*/
/*================================================colorful=================================================*/
/*================================================news=================================================*/
/*================================================Honor=================================================*/
/*================================================    About area    =================================================*/
/*================================================    School all-round management service    =================================================*/
/*================================================    About area    =================================================*/
/*================================================    School all-round management service    =================================================*/
/*================================================    Multiple service    =================================================*/
/*================================================    Self Edu    =================================================*/
/*================================================    colorful    =================================================*/
/*================================================    news    =================================================*/
/*================================================    Honor    =================================================*/
/*================================================    About area    =================================================*/
/*================================================    School all-round management service    =================================================*/
/*================================================    Multiple service    =================================================*/
/*================================================    Self Edu    =================================================*/
/*================================================    colorful    =================================================*/
/*================================================    news    =================================================*/
/*================================================    Honor    =================================================*/
/**  动画  */
@keyframes bgAnimation {
  0% {
    opacity: 1;
    /* 开始时完全不透明 */ }
  50% {
    transform: scale(1.01);
    opacity: 0.9; }
  100% {
    opacity: 1;
    /* 结束时完全不透明 */ } }

@keyframes animate {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(-100%); } }

@keyframes animate2 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-200%); } }

@keyframes animate3 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-200%); } }

.about-time {
  display: none; }

.banner-container {
  position: relative;
  width: 100%; }
  .banner-container .inner-list {
    position: absolute;
    left: 16%;
    bottom: -18px;
    z-index: 2;
    box-sizing: border-box;
    width: 68%;
    height: 130px;
    background-color: #FFF;
    border-radius: 18px;
    box-shadow: 0 1px 7px 1px rgba(49, 64, 114, 0.58);
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .banner-container .inner-list .divider {
      width: 1px;
      height: 40px;
      background-color: #A0A0A0; }
    .banner-container .inner-list .inner-list-item {
      width: 24%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center; }
      .banner-container .inner-list .inner-list-item img {
        width: 68px;
        height: 68px;
        margin-right: 16px; }
      .banner-container .inner-list .inner-list-item .inner-title {
        width: 240px;
        display: flex;
        flex-direction: column; }
        .banner-container .inner-list .inner-list-item .inner-title span:nth-child(1) {
          font-size: 1rem;
          color: #000;
          margin-bottom: 6px; }
        .banner-container .inner-list .inner-list-item .inner-title span:nth-child(2) {
          font-size: 0.9rem;
          color: #3C3C3C;
          font-family: "Microsoft Yahei";
          line-height: 18px; }
      .banner-container .inner-list .inner-list-item:hover {
        text-decoration: none; }

.home-slides {
  position: relative; }
  .home-slides .owl-dots {
    position: absolute;
    left: 158px;
    bottom: 184px;
    display: flex; }
    .home-slides .owl-dots .owl-dot {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      border-radius: 100%;
      border: 1px solid transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      outline: none;
      transition: all linear 0.2s; }
      .home-slides .owl-dots .owl-dot span {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: #FFF; }
    .home-slides .owl-dots .owl-dot.active {
      border: 1px solid #FFF; }
  .home-slides .main-banner-item {
    position: relative;
    height: 95vh;
    z-index: 1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #4E84D7;
    display: flex;
    flex-direction: column;
    align-items: center; }
    .home-slides .main-banner-item .words {
      margin-top: 250px;
      color: #FFF;
      text-align: center; }
      .home-slides .main-banner-item .words .title-zh {
        font-size: 2.8rem; }
      .home-slides .main-banner-item .words .title-en {
        font-family: "Microsoft Yahei";
        font-size: 1.4rem;
        margin-top: 24px; }
    .home-slides .main-banner-item .banner-btn-more {
      z-index: 1;
      box-sizing: border-box;
      position: relative;
      margin-top: 40px;
      font-size: inherit;
      font-family: inherit;
      color: #0087FF;
      padding: 1em 3em;
      border-radius: 3rem;
      outline: none;
      border: none;
      background-color: #FFF;
      transition: color 0.4s ease-in-out; }
      .home-slides .main-banner-item .banner-btn-more::before {
        content: '';
        z-index: -1;
        position: absolute;
        top: 100%;
        right: 100%;
        width: 1em;
        height: 0.5em;
        border-radius: 28px;
        background-color: #0087FF;
        transform-origin: center;
        transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
        transition: transform 0.45s ease-in-out; }
      .home-slides .main-banner-item .banner-btn-more:hover {
        cursor: pointer;
        color: #FFF;
        text-decoration: none; }
        .home-slides .main-banner-item .banner-btn-more:hover::before {
          transform: translate3d(50%, -50%, 0) scale3d(10, 10, 10); }

@media (min-width: 992px) {
  .about-list .col-lg-3 {
    flex: 0;
    padding-left: 0;
    padding-right: 0; } }

.about-area {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 46px 180px 0;
  background-color: #FFF; }
  .about-area .container-wrapper {
    width: 100%;
    background-size: cover; }
    .about-area .container-wrapper .container-fluid {
      box-sizing: border-box;
      background: url("../img/bg-index-about-top.png") center center no-repeat;
      background-size: cover; }
    .about-area .container-wrapper .container-fluid.about-container {
      padding-top: 50px; }
    .about-area .container-wrapper .section-title {
      width: 100%;
      text-align: center; }
      .about-area .container-wrapper .section-title .main-title {
        font-size: 3rem;
        color: #0087FF;
        margin-bottom: 24px; }
      .about-area .container-wrapper .section-title .sub-title {
        font-size: 1rem;
        color: #777; }
    .about-area .container-wrapper .about-list {
      box-sizing: border-box;
      padding: 0 108px;
      justify-content: space-between; }
      .about-area .container-wrapper .about-list .about-list-item {
        margin: 100px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        white-space: nowrap; }
        .about-area .container-wrapper .about-list .about-list-item .item-img {
          width: auto;
          height: 114px; }
        .about-area .container-wrapper .about-list .about-list-item .count {
          display: flex;
          align-items: baseline; }
          .about-area .container-wrapper .about-list .about-list-item .count .count-box {
            font-size: 50px;
            font-weight: bold;
            color: #1B212E; }
          .about-area .container-wrapper .about-list .about-list-item .count .small {
            font-size: 22px;
            color: #0C182C; }
    .about-area .container-wrapper .about-desc {
      box-sizing: border-box;
      padding: 0 100px;
      display: flex;
      flex-direction: column;
      align-items: center; }
      .about-area .container-wrapper .about-desc .desc-title {
        font-size: 2.8rem;
        color: #1B212E;
        margin-bottom: 38px; }
      .about-area .container-wrapper .about-desc .desc-content {
        text-align: justify;
        font-size: 20px;
        color: #0C182C; }
  .about-area .about-btn-section {
    margin-top: 80px;
    margin-bottom: 110px;
    display: flex;
    justify-content: center; }

@media (min-width: 1200px) {
  .container {
    max-width: 1350px; } }

@media screen and (max-width: 1800px) {
  .container {
    max-width: 1230px; } }

@media screen and (max-width: 1700px) {
  .container {
    max-width: 1120px; } }

@media screen and (max-width: 1600px) {
  .container {
    max-width: 1120px; } }

@media screen and (max-width: 1500px) {
  .container {
    max-width: 1000px; } }

@media screen and (max-width: 1400px) {
  .container {
    max-width: 900px; } }

.school-area {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  background-color: #EFF0F2;
  padding: 90px 180px 138px; }
  .school-area .school-area-h5 {
    display: none; }
  .school-area .container {
    width: 100%;
    box-sizing: border-box; }
    .school-area .container .section-title {
      width: 100%;
      text-align: center; }
      .school-area .container .section-title .main-title {
        font-size: 3rem;
        color: #0087FF;
        margin-bottom: 24px; }
      .school-area .container .section-title .sub-title {
        font-size: 1rem;
        color: #777; }
    .school-area .container .service-list {
      width: 100%;
      height: 120px;
      margin-top: 60px;
      white-space: nowrap;
      overflow-x: scroll; }
      .school-area .container .service-list:hover::-webkit-scrollbar {
        height: 12px;
        cursor: pointer; }
      .school-area .container .service-list:hover::-webkit-scrollbar-track {
        background-color: #F3F8FD; }
      .school-area .container .service-list:hover::-webkit-scrollbar-thumb {
        background-color: #0087FF; }
        .school-area .container .service-list:hover::-webkit-scrollbar-thumb:hover {
          background-color: #0087FF; }
      .school-area .container .service-list:hover * {
        scrollbar-width: 2px !important;
        scrollbar-width: 4px !important;
        scrollbar-color: #F3F8FD; }
      .school-area .container .service-list::-webkit-scrollbar {
        height: 4px;
        cursor: pointer; }
      .school-area .container .service-list::-webkit-scrollbar-track {
        background-color: #F3F8FD; }
      .school-area .container .service-list::-webkit-scrollbar-thumb {
        background-color: #0087FF; }
        .school-area .container .service-list::-webkit-scrollbar-thumb:hover {
          background-color: #0087FF; }
      .school-area .container .service-list * {
        scrollbar-width: 2px !important;
        scrollbar-width: 4px !important;
        scrollbar-color: #F3F8FD; }
      .school-area .container .service-list .service-item-wrapper {
        display: inline-block;
        margin-right: 12px;
        width: 210px;
        height: 90px; }
        .school-area .container .service-list .service-item-wrapper .service-item {
          position: relative;
          text-decoration: none;
          width: 210px;
          height: 90px;
          color: #0087FF;
          background-color: #FFF;
          border-radius: 22px;
          transition-property: background-color, color;
          transition-duration: 0.1s;
          transition-timing-function: linear;
          box-sizing: border-box;
          padding: 0 16px;
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .school-area .container .service-list .service-item-wrapper .service-item .item-left {
            display: flex;
            flex-direction: column; }
            .school-area .container .service-list .service-item-wrapper .service-item .item-left h2 {
              font-size: 17px; }
            .school-area .container .service-list .service-item-wrapper .service-item .item-left span {
              font-size: 12px; }
          .school-area .container .service-list .service-item-wrapper .service-item .icon-to-right {
            font-size: 28px; }
          .school-area .container .service-list .service-item-wrapper .service-item:hover {
            color: #FFF;
            background-color: #0087FF; }
        .school-area .container .service-list .service-item-wrapper .service-item.active {
          color: #FFF;
          background-color: #0087FF; }
    .school-area .container .section-teacher {
      margin-top: 80px;
      display: flex; }
      .school-area .container .section-teacher .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 40px;
        padding-bottom: 8px;
        border-bottom: 1px solid #D7D8DA; }
        .school-area .container .section-teacher .header h1 {
          font-size: 2rem;
          color: #1E2832; }
          .school-area .container .section-teacher .header h1:first-child {
            max-width: 120px; }
      .school-area .container .section-teacher .content .sub-header {
        font-size: 24px;
        color: #0087FF;
        margin-bottom: 30px; }
      .school-area .container .section-teacher .content .list {
        margin-bottom: 50px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        max-height: 240px;
        overflow-y: scroll;
        padding: 0 10px; }
        .school-area .container .section-teacher .content .list::-webkit-scrollbar {
          width: 3px; }
        .school-area .container .section-teacher .content .list::-webkit-scrollbar-track {
          background-color: #F3F8FD; }
        .school-area .container .section-teacher .content .list::-webkit-scrollbar-thumb {
          background-color: #0087FF; }
          .school-area .container .section-teacher .content .list::-webkit-scrollbar-thumb:hover {
            background-color: #0087FF; }
        .school-area .container .section-teacher .content .list * {
          scrollbar-width: 3px;
          scrollbar-color: #F3F8FD; }
        .school-area .container .section-teacher .content .list .list-item {
          position: relative;
          box-sizing: border-box;
          width: 48%;
          font-size: 18px;
          line-height: 32px;
          color: #1E2832; }
          .school-area .container .section-teacher .content .list .list-item::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 14px;
            width: 4px;
            height: 4px;
            background-color: #1E2832;
            border-radius: 100%; }
      .school-area .container .section-teacher .img-wrapper {
        width: 90%;
        position: relative;
        z-index: 1;
        margin: 0 auto; }
        .school-area .container .section-teacher .img-wrapper .teach-bg-1 {
          width: 100%;
          height: auto; }
        .school-area .container .section-teacher .img-wrapper .teach-bg-2 {
          position: absolute;
          width: 260px;
          height: auto;
          left: -60px;
          bottom: -50px;
          z-index: 2; }
        .school-area .container .section-teacher .img-wrapper .teach-bg-3 {
          position: absolute;
          width: 90%;
          height: auto;
          right: -100px;
          bottom: 0; }

.multiple-area {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  background: url("../img/bg-circle.png") center center no-repeat;
  background-size: contain;
  padding: 90px 180px 138px; }
  .multiple-area .container {
    width: 100%;
    box-sizing: border-box; }
    .multiple-area .container .section-title {
      width: 100%;
      text-align: center; }
      .multiple-area .container .section-title .main-title {
        font-size: 3rem;
        color: #0087FF;
        margin-bottom: 24px; }
      .multiple-area .container .section-title .sub-title {
        font-size: 1rem;
        color: #777; }
    .multiple-area .container .list {
      display: none; }
    .multiple-area .container .circle-outer {
      width: 100%;
      height: 700px;
      position: relative; }
      .multiple-area .container .circle-outer .circle-bg {
        position: absolute;
        left: calc(50% - 164px);
        top: calc(50% - 247px);
        width: 328px;
        height: 374px; }
      .multiple-area .container .circle-outer #circle-container {
        position: relative;
        width: 1000px;
        height: 600px;
        margin: 80px auto 0 auto; }
        .multiple-area .container .circle-outer #circle-container .circle-item {
          position: absolute;
          width: 280px;
          height: 80px;
          background: #FFF;
          border: none;
          border-radius: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          padding: 0 20px;
          box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
          cursor: pointer; }
          .multiple-area .container .circle-outer #circle-container .circle-item img {
            height: 54px;
            width: auto; }
          .multiple-area .container .circle-outer #circle-container .circle-item .unhover {
            display: none; }
            .multiple-area .container .circle-outer #circle-container .circle-item .unhover.active {
              display: flex; }
          .multiple-area .container .circle-outer #circle-container .circle-item .hover {
            display: none; }
            .multiple-area .container .circle-outer #circle-container .circle-item .hover.active {
              display: flex; }
          .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title {
            font-size: 18px;
            color: #000;
            display: none; }
          .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title.active {
            display: flex; }
          .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover {
            font-size: 16px;
            color: #FFF;
            display: none; }
            .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover .line {
              display: flex; }
              .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover .line span:last-child {
                margin-left: 16px; }
              .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover .line:last-child {
                margin-top: 4px; }
          .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover.active {
            display: flex;
            flex-direction: column; }
          .multiple-area .container .circle-outer #circle-container .circle-item:hover {
            width: 320px;
            height: 90px;
            background: linear-gradient(0deg, #6EB5F5, #0087FF); }
            .multiple-area .container .circle-outer #circle-container .circle-item:hover img {
              height: 72px;
              width: auto; }

.self-area {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  background-color: #EFF0F2;
  padding: 90px 180px 138px; }
  .self-area .owl-dots {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 100px;
    display: flex; }
    .self-area .owl-dots .owl-dot {
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      border-radius: 100%;
      border: 1px solid transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      outline: none;
      transition: all linear 0.2s; }
      .self-area .owl-dots .owl-dot span {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: #FFF; }
    .self-area .owl-dots .owl-dot.active {
      border: 1px solid #FFF; }
  .self-area .self-container {
    width: 100%;
    box-sizing: border-box;
    position: relative; }
    .self-area .self-container .section-title {
      width: 100%;
      text-align: center; }
      .self-area .self-container .section-title .main-title {
        font-size: 3rem;
        color: #0087FF;
        margin-bottom: 24px; }
      .self-area .self-container .section-title .sub-title {
        font-size: 1rem;
        color: #777; }
    .self-area .self-container .sub-nav-box {
      position: absolute;
      box-sizing: border-box;
      z-index: 2;
      left: 50%;
      transform: translate(-50%);
      bottom: 14px;
      width: calc(100% - 180px);
      height: 60px;
      padding: 0 30px;
      background-color: rgba(255, 255, 255, 0.77);
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .self-area .self-container .sub-nav-box .sub-nav-btn img {
        width: auto;
        height: 20px; }
      .self-area .self-container .sub-nav-box .self-sub-nav {
        position: relative;
        box-sizing: border-box;
        padding: 0 12px; }
        .self-area .self-container .sub-nav-box .self-sub-nav .owl-stage-outer {
          height: 60px;
          line-height: 60px; }
        .self-area .self-container .sub-nav-box .self-sub-nav .sub-item {
          min-width: 200px;
          text-align: center;
          color: #1E2832;
          font-size: 18px;
          cursor: pointer; }
        .self-area .self-container .sub-nav-box .self-sub-nav .owl-item.active.center .sub-item {
          font-size: 22px;
          color: #0087FF; }
    .self-area .self-container .square-list {
      width: 100%;
      margin-top: 80px;
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px; }
      .self-area .self-container .square-list .square-large {
        box-sizing: border-box;
        position: relative;
        width: 400px;
        height: 160px;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 1rem;
        background-color: #FFF;
        box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
        border-radius: 16px;
        text-decoration: none; }
        .self-area .self-container .square-list .square-large .en {
          font-weight: bold;
          color: #0087FF;
          font-family: "Microsoft Yahei";
          margin-bottom: 8px; }
        .self-area .self-container .square-list .square-large .zh {
          font-weight: bold;
          color: #1E2832; }
        .self-area .self-container .square-list .square-large .top-right {
          position: absolute;
          right: 12px;
          top: 4px;
          color: #0087FF;
          font-size: 28px; }
      .self-area .self-container .square-list .small-box {
        height: 160px;
        flex: 0.92;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between; }
        .self-area .self-container .square-list .small-box .small-list {
          width: 100%;
          display: flex;
          justify-content: space-between; }
          .self-area .self-container .square-list .small-box .small-list .square-small {
            width: 32%;
            height: 132px;
            border-radius: 16px;
            background: linear-gradient(0deg, #6EB5F5, #0087FF);
            color: #FFF;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 2px 2px rgba(49, 64, 114, 0.41); }
            .self-area .self-container .square-list .small-box .small-list .square-small .top {
              display: flex;
              align-items: baseline; }
              .self-area .self-container .square-list .small-box .small-list .square-small .top span:first-child {
                font-family: "Microsoft Yahei";
                font-size: 3rem;
                font-weight: bold;
                line-height: 30px; }
              .self-area .self-container .square-list .small-box .small-list .square-small .top span:last-child {
                font-size: 16px; }
            .self-area .self-container .square-list .small-box .small-list .square-small .bottom {
              font-size: 16px; }
            .self-area .self-container .square-list .small-box .small-list .square-small:last-child {
              margin-right: 2px; }
        .self-area .self-container .square-list .small-box .small-extra {
          font-size: 12px;
          color: #1E2832;
          text-decoration: none;
          display: flex;
          align-items: flex-start; }
          .self-area .self-container .square-list .small-box .small-extra span:first-child {
            font-size: 12px; }
          .self-area .self-container .square-list .small-box .small-extra span:last-child {
            font-size: 8px; }
    .self-area .self-container .self-slides {
      position: relative; }
      .self-area .self-container .self-slides .slide {
        margin-top: 4px;
        margin-left: 4px; }
        .self-area .self-container .self-slides .slide .img {
          width: 100%;
          height: auto; }
          .self-area .self-container .self-slides .slide .img:hover {
            animation: bgAnimation 1s; }

@media (min-width: 992px) {
  .col-lg-6 {
    flex: 0 0 48%; } }

.color-area {
  box-sizing: border-boxr;
  width: 100%;
  background: #F4F7FA;
  padding: 70px 180px 100px; }
  .color-area .section-title {
    width: 100%;
    margin-bottom: 80px;
    text-align: center; }
    .color-area .section-title .main-title {
      font-size: 3rem;
      color: #0087FF;
      margin-bottom: 24px; }
  .color-area .color-section {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: center; }
    .color-area .color-section .wrapper-box {
      transition-duration: .5s;
      transition-timing-function: ease-in-out;
      transition-delay: 0s;
      -webkit-transition-duration: .5s;
      -webkit-transition-timing-function: ease-in-out;
      -webkit-transition-delay: 0s;
      width: auto;
      display: flex;
      flex: 0 0 340px;
      overflow: hidden; }
      .color-area .color-section .wrapper-box:first-of-type {
        margin-right: 20px; }
      .color-area .color-section .wrapper-box.active {
        flex: 1; }
    .color-area .color-section .wrapper {
      transition-duration: .5s;
      transition-timing-function: ease-in-out;
      transition-delay: 0s;
      -webkit-transition-duration: .5s;
      -webkit-transition-timing-function: ease-in-out;
      -webkit-transition-delay: 0s;
      display: flex;
      opacity: 0;
      position: absolute;
      left: 0;
      width: 100%; }
      .color-area .color-section .wrapper.active {
        display: flex;
        opacity: 1;
        width: 100%; }
      .color-area .color-section .wrapper.spe {
        display: flex; }
    .color-area .color-section .color-item {
      height: 560px;
      background: linear-gradient(86deg, #6EB5F5, #0087FF);
      border-radius: 20px;
      position: relative; }
      .color-area .color-section .color-item.sm {
        width: 340px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #FFF; }
        .color-area .color-section .color-item.sm .en {
          font-size: 40px;
          font-weight: bold;
          font-family: "Microsoft Yahei", sans-serif;
          text-transform: uppercase;
          text-align: center;
          line-height: 40px; }
        .color-area .color-section .color-item.sm .zh {
          font-size: 32px;
          margin-top: 30px;
          margin-bottom: 60px; }
        .color-area .color-section .color-item.sm .slogan {
          display: flex;
          flex-direction: column;
          align-items: center;
          line-height: 28px; }
        .color-area .color-section .color-item.sm .arrow-link {
          position: absolute;
          right: 30px;
          bottom: 40px; }
          .color-area .color-section .color-item.sm .arrow-link i {
            font-size: 34px;
            color: #FFF;
            transition: all linear 0.2s; }
          .color-area .color-section .color-item.sm .arrow-link:hover {
            text-decoration: none; }
            .color-area .color-section .color-item.sm .arrow-link:hover i {
              font-size: 40px; }
      .color-area .color-section .color-item.lg {
        flex: 0.96;
        box-sizing: border-box;
        padding: 0 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF; }
        .color-area .color-section .color-item.lg .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start; }
          .color-area .color-section .color-item.lg .left .words {
            display: flex;
            flex-direction: column; }
            .color-area .color-section .color-item.lg .left .words .logo {
              width: 50px;
              height: auto; }
            .color-area .color-section .color-item.lg .left .words .zh {
              font-size: 38px;
              margin: 20px 0; }
            .color-area .color-section .color-item.lg .left .words .en {
              text-transform: uppercase;
              font-size: 40px;
              font-weight: bold;
              font-family: "Microsoft Yahei", sans-serif;
              line-height: 36px; }
            .color-area .color-section .color-item.lg .left .words span {
              margin-top: 20px; }
          .color-area .color-section .color-item.lg .left .link {
            display: inline-block;
            box-sizing: border-box;
            padding: 10px 40px;
            border: 1px solid #FFF;
            border-radius: 24px;
            font-size: 14px;
            color: #FFF;
            margin-top: 40px;
            transition: all linear 0.1s; }
            .color-area .color-section .color-item.lg .left .link:hover {
              text-decoration: none;
              background-color: #FFF;
              color: #6EB5F5; }
        .color-area .color-section .color-item.lg .right {
          width: 280px; }
          .color-area .color-section .color-item.lg .right img {
            width: 280px;
            height: auto; }
  .color-area .color-section-1 {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .color-area .color-section-1 .wrapper {
      display: flex; }
    .color-area .color-section-1 .color-item {
      height: 240px;
      background: linear-gradient(86deg, #6EB5F5, #0087FF);
      border-radius: 14px;
      position: relative;
      text-decoration: none;
      margin-bottom: 20px; }
      .color-area .color-section-1 .color-item.sm {
        width: 340px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #FFF; }
        .color-area .color-section-1 .color-item.sm .en {
          font-size: 26px;
          font-weight: bold;
          font-family: "Microsoft Yahei", sans-serif;
          text-transform: uppercase;
          text-align: center;
          line-height: 30px;
          margin-bottom: 0; }
        .color-area .color-section-1 .color-item.sm .zh {
          font-size: 22px;
          margin-top: 16px;
          margin-bottom: 16px; }
        .color-area .color-section-1 .color-item.sm .slogan {
          display: flex;
          flex-direction: column;
          align-items: center;
          line-height: 20px;
          margin-bottom: 20px; }
        .color-area .color-section-1 .color-item.sm .arrow {
          position: absolute;
          right: auto;
          left: 50%;
          transform: translateX(-50%);
          bottom: 10px;
          width: 24px;
          height: auto; }

.news-area {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  background: url("../img/bg-news.png") center center no-repeat;
  background-size: cover;
  padding: 90px 180px 138px; }
  .news-area .news-container {
    width: 100%;
    box-sizing: border-box;
    position: relative; }
    .news-area .news-container .section-title {
      width: 100%;
      margin-bottom: 80px;
      text-align: center; }
      .news-area .news-container .section-title .main-title {
        font-size: 3rem;
        color: #0087FF;
        margin-bottom: 24px; }
      .news-area .news-container .section-title .sub-title {
        font-size: 1rem;
        color: #777; }
    .news-area .news-container .news-section {
      width: 100%;
      display: flex;
      justify-content: space-between; }
      .news-area .news-container .news-section .channel-header {
        margin-bottom: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .news-area .news-container .news-section .channel-header .title {
          font-size: 26px;
          color: #000; }
        .news-area .news-container .news-section .channel-header a {
          font-size: 18px;
          color: #777;
          text-decoration: none; }
      .news-area .news-container .news-section .news-item {
        font-size: 20px;
        border-radius: 20px;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #FFF;
        background-image: none;
        background-repeat: no-repeat;
        background-position-x: center;
        background-position-y: center;
        box-sizing: border-box;
        padding: 0 20px;
        box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1); }
        .news-area .news-container .news-section .news-item .news-date {
          color: #0087FF; }
        .news-area .news-container .news-section .news-item .news-title {
          color: #666;
          word-break: break-all;
          text-align: justify; }
        .news-area .news-container .news-section .news-item:hover {
          background-color: transparent;
          background-image: url("../img/bg-news-default.png");
          background-size: cover;
          animation: bgAnimation 1s; }
          .news-area .news-container .news-section .news-item:hover .news-date {
            color: #FFF; }
          .news-area .news-container .news-section .news-item:hover .news-title {
            color: #FFF; }
      .news-area .news-container .news-section .news-dynamic {
        flex: 0.63; }
        .news-area .news-container .news-section .news-dynamic .news-box {
          display: flex; }
        .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 {
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap; }
          .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item {
            position: relative;
            box-sizing: border-box;
            width: 47%;
            height: 240px;
            margin-bottom: 38px;
            padding-top: 20px;
            padding-bottom: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; }
            .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item .news-title {
              color: #666;
              margin: 18px 0; }
            .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item .watch-detail {
              width: 100px;
              height: 40px;
              text-align: center;
              line-height: 40px;
              border-radius: 20px;
              font-size: 16px;
              background-color: transparent;
              color: transparent;
              text-decoration: none; }
            .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:first-child:hover {
              background-color: transparent;
              background-size: cover;
              animation: bgAnimation 1s; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:first-child:hover .news-date {
                color: #FFF; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:first-child:hover .news-title {
                color: #FFF; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:first-child:hover .watch-detail {
                background-color: #FFF;
                color: #0087FF; }
            .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:hover {
              background-color: transparent;
              background-image: url("../img/bg-news-default.png");
              background-size: cover;
              animation: bgAnimation 1s; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:hover .news-date {
                color: #FFF; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:hover .news-title {
                color: #FFF; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:hover .watch-detail {
                background-color: #FFF;
                color: #0087FF; }
      .news-area .news-container .news-section .news-media {
        flex: 0.33; }
        .news-area .news-container .news-section .news-media .news-box {
          display: flex;
          flex-direction: column; }
        .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim {
          width: 100%;
          height: 120px;
          margin-bottom: 12px;
          border-radius: 10px; }
          .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim .news-title {
            margin-top: 4px;
            max-height: 60px;
            overflow: hidden; }
          .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover {
            background-color: transparent;
            background-image: url("../img/bg-news-default.png");
            background-size: cover;
            animation: bgAnimation 1s; }
            .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover .news-date {
              color: #FFF; }
            .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover .news-title {
              color: #FFF; }
            .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover .watch-detail {
              background-color: #FFF;
              color: #0087FF; }

.honor-area {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  background: url("../img/bg-honor-1.png") center center;
  background-size: cover;
  padding: 40px 0 100px 0; }
  .honor-area .honor-container {
    width: 100%;
    box-sizing: border-box;
    position: relative; }
    .honor-area .honor-container .section-title {
      width: 100%;
      margin-bottom: 80px;
      text-align: center; }
      .honor-area .honor-container .section-title .main-title {
        font-size: 3rem;
        color: #0087FF;
        margin-bottom: 24px; }
      .honor-area .honor-container .section-title .sub-title {
        font-size: 1rem;
        color: #777; }
    .honor-area .honor-container .honor-wall {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .honor-area .honor-container .honor-wall * {
        margin: 0;
        padding: 0;
        box-sizing: border-box; }
      .honor-area .honor-container .honor-wall .honor-content {
        display: flex;
        width: 100%;
        overflow: hidden;
        mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); }
        .honor-area .honor-container .honor-wall .honor-content .honor-item {
          white-space: nowrap;
          animation: animate var(--t) linear infinite;
          animation-delay: calc(var(--t) * -1); }
          .honor-area .honor-container .honor-wall .honor-content .honor-item:nth-child(2) {
            animation: animate2 var(--t) linear infinite;
            animation-delay: calc(var(--t) / -2); }
          .honor-area .honor-container .honor-wall .honor-content .honor-item span {
            display: inline-block;
            margin: 10px;
            width: 560px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 37px;
            font-size: 24px;
            color: #0087FF;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background-color 0.5s; }
            .honor-area .honor-container .honor-wall .honor-content .honor-item span:hover {
              background-color: #0087FF;
              color: #FFF; }
        .honor-area .honor-container .honor-wall .honor-content:hover .honor-item {
          animation-play-state: paused; }

@media screen and (min-width: 1023px) and (max-width: 1600px) {
  .banner-container {
    position: relative;
    width: 100%; }
    .banner-container .inner-list {
      position: absolute;
      left: 16%;
      bottom: -18px;
      z-index: 2;
      box-sizing: border-box;
      width: 68%;
      height: 110px;
      background-color: #FFF;
      border-radius: 18px;
      box-shadow: 0 1px 7px 1px rgba(49, 64, 114, 0.58);
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .banner-container .inner-list .divider {
        width: 1px;
        height: 40px;
        background-color: #A0A0A0; }
      .banner-container .inner-list .inner-list-item {
        width: 30%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center; }
        .banner-container .inner-list .inner-list-item img {
          width: 58px;
          height: 58px;
          margin-right: 8px; }
        .banner-container .inner-list .inner-list-item .inner-title {
          width: 200px;
          display: flex;
          flex-direction: column; }
          .banner-container .inner-list .inner-list-item .inner-title span:nth-child(1) {
            font-size: 1rem;
            color: #000;
            margin-bottom: 6px; }
          .banner-container .inner-list .inner-list-item .inner-title span:nth-child(2) {
            font-size: 0.9rem;
            color: #3C3C3C;
            font-family: "Microsoft Yahei";
            line-height: 18px; }
        .banner-container .inner-list .inner-list-item:hover {
          text-decoration: none; }
  .home-slides .main-banner-item .inner-list {
    padding: 0 40px; }
  .about-area .container-wrapper .about-desc {
    padding: 0 60px; }
  .about-area .container-wrapper .about-list {
    padding: 0 70px; }
  .about-area .about-btn-section {
    margin-top: 80px;
    margin-bottom: 110px;
    display: flex;
    justify-content: center; }
  .school-area .container .service-list .service-item {
    width: 190px;
    height: 90px;
    margin-bottom: 20px;
    border-radius: 18px;
    padding: 0 16px; }
    .school-area .container .service-list .service-item .item-left {
      display: flex;
      flex-direction: column; }
      .school-area .container .service-list .service-item .item-left h2 {
        font-size: 20px; }
      .school-area .container .service-list .service-item .item-left span {
        font-size: 11px; }
    .school-area .container .service-list .service-item .icon-to-right {
      font-size: 24px; }
  .school-area .container .section-teacher {
    margin-top: 80px;
    display: flex; }
    .school-area .container .section-teacher .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 40px;
      padding-bottom: 8px;
      border-bottom: 1px solid #D7D8DA; }
      .school-area .container .section-teacher .header h1 {
        font-size: 2rem;
        color: #1E2832; }
        .school-area .container .section-teacher .header h1:first-child {
          max-width: 120px; }
    .school-area .container .section-teacher .content .sub-header {
      font-size: 24px;
      color: #0087FF;
      margin-bottom: 30px; }
    .school-area .container .section-teacher .content .list {
      margin-bottom: 50px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      max-height: 240px;
      overflow-y: scroll;
      padding: 0 10px; }
      .school-area .container .section-teacher .content .list::-webkit-scrollbar {
        width: 3px; }
      .school-area .container .section-teacher .content .list::-webkit-scrollbar-track {
        background-color: #F3F8FD; }
      .school-area .container .section-teacher .content .list::-webkit-scrollbar-thumb {
        background-color: #0087FF; }
        .school-area .container .section-teacher .content .list::-webkit-scrollbar-thumb:hover {
          background-color: #0087FF; }
      .school-area .container .section-teacher .content .list * {
        scrollbar-width: 3px;
        scrollbar-color: #F3F8FD; }
      .school-area .container .section-teacher .content .list .list-item {
        position: relative;
        box-sizing: border-box;
        width: 48%;
        font-size: 16px;
        line-height: 24px;
        color: #1E2832; }
        .school-area .container .section-teacher .content .list .list-item::before {
          content: '';
          position: absolute;
          left: -8px;
          top: 10px;
          width: 4px;
          height: 4px;
          background-color: #1E2832;
          border-radius: 100%; } }

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .banner-container {
    position: relative;
    width: 100%; }
    .banner-container .inner-list {
      position: absolute;
      left: 10%;
      bottom: -18px;
      z-index: 2;
      box-sizing: border-box;
      width: 80%;
      height: 130px;
      background-color: #FFF;
      border-radius: 18px;
      box-shadow: 0 1px 7px 1px rgba(49, 64, 114, 0.58);
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .banner-container .inner-list .divider {
        width: 1px;
        height: 40px;
        background-color: #A0A0A0; }
      .banner-container .inner-list .inner-list-item {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center; }
        .banner-container .inner-list .inner-list-item img {
          width: 68px;
          height: 68px;
          margin-right: 16px; }
        .banner-container .inner-list .inner-list-item .inner-title {
          max-width: 160px;
          display: flex;
          flex-direction: column; }
          .banner-container .inner-list .inner-list-item .inner-title span:nth-child(1) {
            font-size: 1rem;
            color: #000;
            margin-bottom: 6px; }
          .banner-container .inner-list .inner-list-item .inner-title span:nth-child(2) {
            font-size: 0.9rem;
            color: #3C3C3C;
            font-family: "Microsoft Yahei";
            line-height: 12px; }
  .home-slides {
    position: relative; }
    .home-slides .owl-dots {
      position: absolute;
      left: 158px;
      bottom: 184px;
      display: flex; }
      .home-slides .owl-dots .owl-dot {
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        border: 1px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        outline: none;
        transition: all linear 0.2s; }
        .home-slides .owl-dots .owl-dot span {
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 100%;
          background-color: #FFF; }
      .home-slides .owl-dots .owl-dot.active {
        border: 1px solid #FFF; }
    .home-slides .main-banner-item {
      position: relative;
      height: 650px;
      z-index: 1;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: #4E84D7;
      display: flex;
      flex-direction: column;
      align-items: center; }
      .home-slides .main-banner-item .words {
        margin-top: 250px;
        color: #FFF;
        text-align: center; }
        .home-slides .main-banner-item .words .title-zh {
          font-size: 2.8rem; }
        .home-slides .main-banner-item .words .title-en {
          font-family: "Microsoft Yahei";
          font-size: 1.4rem;
          margin-top: 24px; }
      .home-slides .main-banner-item .banner-btn-more {
        z-index: 1;
        box-sizing: border-box;
        position: relative;
        margin-top: 40px;
        font-size: inherit;
        font-family: inherit;
        color: #0087FF;
        padding: 1em 3em;
        border-radius: 3rem;
        outline: none;
        border: none;
        background-color: #FFF;
        transition: color 0.4s ease-in-out; }
        .home-slides .main-banner-item .banner-btn-more::before {
          content: '';
          z-index: -1;
          position: absolute;
          top: 100%;
          right: 100%;
          width: 1em;
          height: 0.5em;
          border-radius: 28px;
          background-color: #0087FF;
          transform-origin: center;
          transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
          transition: transform 0.45s ease-in-out; }
        .home-slides .main-banner-item .banner-btn-more:hover {
          cursor: pointer;
          color: #FFF;
          text-decoration: none; }
          .home-slides .main-banner-item .banner-btn-more:hover::before {
            transform: translate3d(50%, -50%, 0) scale3d(10, 10, 10); }
  .about-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 46px 20px 0;
    background-color: #FFF; }
    .about-area .container-wrapper {
      width: 100%;
      background-size: cover; }
      .about-area .container-wrapper .container-fluid {
        box-sizing: border-box;
        background: url("../img/bg-index-about-top.png") center center no-repeat;
        background-size: cover; }
      .about-area .container-wrapper .container-fluid.about-container {
        padding-top: 50px; }
      .about-area .container-wrapper .section-title {
        width: 100%;
        text-align: center; }
        .about-area .container-wrapper .section-title .main-title {
          font-size: 3rem;
          color: #0087FF;
          margin-bottom: 24px; }
        .about-area .container-wrapper .section-title .sub-title {
          font-size: 1rem;
          color: #777; }
      .about-area .container-wrapper .about-list {
        box-sizing: border-box; }
        .about-area .container-wrapper .about-list .about-list-item {
          margin: 100px 0;
          display: flex;
          flex-direction: column;
          align-items: center; }
          .about-area .container-wrapper .about-list .about-list-item .item-img {
            width: auto;
            height: 114px; }
          .about-area .container-wrapper .about-list .about-list-item .count {
            display: flex;
            align-items: baseline; }
            .about-area .container-wrapper .about-list .about-list-item .count .count-box {
              font-size: 50px;
              font-weight: bold;
              color: #1B212E; }
            .about-area .container-wrapper .about-list .about-list-item .count .small {
              font-size: 22px;
              color: #0C182C; }
      .about-area .container-wrapper .about-desc {
        box-sizing: border-box;
        padding: 0 100px;
        display: flex;
        flex-direction: column;
        align-items: center; }
        .about-area .container-wrapper .about-desc .desc-title {
          font-size: 2.8rem;
          color: #1B212E;
          margin-bottom: 38px; }
        .about-area .container-wrapper .about-desc .desc-content {
          text-align: left;
          font-size: 20px;
          color: #0C182C; }
    .about-area .about-btn-section {
      margin-top: 80px;
      margin-bottom: 110px;
      display: flex;
      justify-content: center; }
  .school-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background-color: #EFF0F2;
    padding: 90px 20px 138px; }
    .school-area .container {
      width: 100%;
      box-sizing: border-box; }
      .school-area .container .section-title {
        width: 100%;
        text-align: center; }
        .school-area .container .section-title .main-title {
          font-size: 3rem;
          color: #0087FF;
          margin-bottom: 24px; }
        .school-area .container .section-title .sub-title {
          font-size: 1rem;
          color: #777; }
      .school-area .container .service-list {
        width: 100%;
        height: 120px;
        margin-top: 60px;
        white-space: nowrap;
        overflow-x: scroll; }
        .school-area .container .service-list::-webkit-scrollbar {
          height: 4px;
          cursor: pointer; }
        .school-area .container .service-list::-webkit-scrollbar-track {
          background-color: #F3F8FD; }
        .school-area .container .service-list::-webkit-scrollbar-thumb {
          background-color: #0087FF; }
          .school-area .container .service-list::-webkit-scrollbar-thumb:hover {
            background-color: #0087FF; }
        .school-area .container .service-list * {
          scrollbar-width: 2px !important;
          scrollbar-width: 4px !important;
          scrollbar-color: #F3F8FD; }
        .school-area .container .service-list .service-item-wrapper {
          display: inline-block;
          margin-right: 12px;
          width: 210px;
          height: 90px; }
          .school-area .container .service-list .service-item-wrapper .service-item {
            position: relative;
            text-decoration: none;
            width: 210px;
            height: 90px;
            color: #0087FF;
            background-color: #FFF;
            border-radius: 22px;
            transition-property: background-color, color;
            transition-duration: 0.1s;
            transition-timing-function: linear;
            box-sizing: border-box;
            padding: 0 16px;
            display: flex;
            justify-content: space-between;
            align-items: center; }
            .school-area .container .service-list .service-item-wrapper .service-item .item-left {
              display: flex;
              flex-direction: column; }
              .school-area .container .service-list .service-item-wrapper .service-item .item-left h2 {
                font-size: 16px; }
              .school-area .container .service-list .service-item-wrapper .service-item .item-left span {
                font-size: 12px; }
            .school-area .container .service-list .service-item-wrapper .service-item .icon-to-right {
              font-size: 28px; }
            .school-area .container .service-list .service-item-wrapper .service-item:hover {
              color: #FFF;
              background-color: #0087FF; }
      .school-area .container .section-teacher {
        margin-top: 80px;
        display: flex; }
        .school-area .container .section-teacher .header {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-bottom: 40px;
          padding-bottom: 8px;
          border-bottom: 1px solid #D7D8DA; }
          .school-area .container .section-teacher .header h1 {
            font-size: 2rem;
            color: #1E2832; }
        .school-area .container .section-teacher .content .sub-header {
          font-size: 24px;
          color: #0087FF;
          margin-bottom: 30px; }
        .school-area .container .section-teacher .content .list {
          margin-bottom: 50px;
          display: flex;
          padding: 0 10px;
          justify-content: space-between;
          flex-wrap: wrap; }
          .school-area .container .section-teacher .content .list .list-item {
            position: relative;
            box-sizing: border-box;
            width: 49%;
            font-size: 18px;
            color: #1E2832; }
            .school-area .container .section-teacher .content .list .list-item::before {
              content: '';
              position: absolute;
              left: -8px;
              top: 50%;
              width: 4px;
              height: 4px;
              background-color: #1E2832;
              border-radius: 100%; }
        .school-area .container .section-teacher .img-wrapper {
          width: 90%;
          position: relative;
          z-index: 1;
          margin: 0 auto; }
          .school-area .container .section-teacher .img-wrapper .teach-bg-1 {
            width: 100%;
            height: auto; }
          .school-area .container .section-teacher .img-wrapper .teach-bg-2 {
            position: absolute;
            width: 260px;
            height: auto;
            left: -60px;
            bottom: -50px;
            z-index: 2; }
          .school-area .container .section-teacher .img-wrapper .teach-bg-3 {
            position: absolute;
            width: 90%;
            height: auto;
            right: 0;
            bottom: 0; }
  .multiple-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background: url("../img/bg-circle.png") center center no-repeat;
    background-size: contain;
    padding: 90px 20px 40px; }
    .multiple-area .container {
      width: 100%;
      box-sizing: border-box; }
      .multiple-area .container .section-title {
        width: 100%;
        text-align: center; }
        .multiple-area .container .section-title .main-title {
          font-size: 3rem;
          color: #0087FF;
          margin-bottom: 24px; }
        .multiple-area .container .section-title .sub-title {
          font-size: 1rem;
          color: #777; }
      .multiple-area .container .list {
        display: none; }
      .multiple-area .container .circle-outer {
        width: 100%;
        height: 700px;
        position: relative;
        transform: scale(0.76); }
        .multiple-area .container .circle-outer .circle-bg {
          position: absolute;
          left: calc(50% - 164px);
          top: calc(50% - 247px);
          width: 328px;
          height: 374px; }
        .multiple-area .container .circle-outer #circle-container {
          position: relative;
          width: 1000px;
          height: 600px;
          margin: 80px auto 0 auto; }
          .multiple-area .container .circle-outer #circle-container .circle-item {
            position: absolute;
            width: 280px;
            height: 80px;
            background: #FFF;
            border: none;
            border-radius: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 32px;
            box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
            cursor: pointer; }
            .multiple-area .container .circle-outer #circle-container .circle-item img {
              height: 54px;
              width: auto; }
            .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title {
              font-size: 18px;
              color: #000;
              display: none; }
            .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title.active {
              display: flex; }
            .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover {
              font-size: 18px;
              color: #FFF;
              display: none; }
              .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover .line {
                display: flex; }
                .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover .line span:last-child {
                  margin-left: 16px; }
                .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover .line:last-child {
                  margin-top: 4px; }
            .multiple-area .container .circle-outer #circle-container .circle-item .circle-item-title-hover.active {
              display: flex;
              flex-direction: column; }
            .multiple-area .container .circle-outer #circle-container .circle-item:hover {
              width: 320px;
              height: 90px;
              background: linear-gradient(0deg, #6EB5F5, #0087FF); }
              .multiple-area .container .circle-outer #circle-container .circle-item:hover img {
                height: 72px;
                width: auto; }
  .self-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background-color: #EFF0F2;
    padding: 90px 20px 40px; }
    .self-area .owl-dots {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      bottom: 100px;
      display: flex; }
      .self-area .owl-dots .owl-dot {
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        border: 1px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        outline: none;
        transition: all linear 0.2s; }
        .self-area .owl-dots .owl-dot span {
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 100%;
          background-color: #FFF; }
      .self-area .owl-dots .owl-dot.active {
        border: 1px solid #FFF; }
    .self-area .self-container {
      width: 100%;
      box-sizing: border-box;
      position: relative; }
      .self-area .self-container .section-title {
        width: 100%;
        text-align: center; }
        .self-area .self-container .section-title .main-title {
          font-size: 3rem;
          color: #0087FF;
          margin-bottom: 24px; }
        .self-area .self-container .section-title .sub-title {
          font-size: 1rem;
          color: #777; }
      .self-area .self-container .sub-nav-box {
        position: absolute;
        box-sizing: border-box;
        z-index: 2;
        left: 50%;
        transform: translate(-50%);
        bottom: 14px;
        width: calc(100% - 60px);
        height: 60px;
        padding: 0 30px;
        background-color: rgba(255, 255, 255, 0.77);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center; }
        .self-area .self-container .sub-nav-box .sub-nav-btn img {
          width: auto;
          height: 20px; }
        .self-area .self-container .sub-nav-box .self-sub-nav {
          position: relative; }
          .self-area .self-container .sub-nav-box .self-sub-nav .owl-stage-outer {
            height: 60px;
            line-height: 60px; }
          .self-area .self-container .sub-nav-box .self-sub-nav .sub-item {
            color: #1E2832;
            font-size: 18px; }
          .self-area .self-container .sub-nav-box .self-sub-nav .owl-item.active.center .sub-item {
            font-size: 22px;
            color: #0087FF; }
      .self-area .self-container .square-list {
        width: 100%;
        margin-top: 80px;
        margin-bottom: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .self-area .self-container .square-list .square-large {
          box-sizing: border-box;
          position: relative;
          width: 320px;
          height: 160px;
          padding-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 0.8rem;
          background-color: #FFF;
          box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
          border-radius: 16px;
          text-decoration: none; }
          .self-area .self-container .square-list .square-large .en {
            font-weight: bold;
            color: #0087FF;
            font-family: "Microsoft Yahei";
            margin-bottom: 8px; }
          .self-area .self-container .square-list .square-large .zh {
            font-weight: bold;
            color: #1E2832; }
          .self-area .self-container .square-list .square-large .top-right {
            position: absolute;
            right: 12px;
            top: 4px;
            color: #0087FF;
            font-size: 28px; }
        .self-area .self-container .square-list .small-box {
          height: 32%;
          flex: 0.96;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between; }
          .self-area .self-container .square-list .small-box .small-list {
            width: 100%;
            display: flex;
            justify-content: space-between; }
            .self-area .self-container .square-list .small-box .small-list .square-small {
              width: 180px;
              height: 132px;
              border-radius: 16px;
              background: linear-gradient(0deg, #6EB5F5, #0087FF);
              color: #FFF;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              box-shadow: 0 0 2px 2px rgba(49, 64, 114, 0.41); }
              .self-area .self-container .square-list .small-box .small-list .square-small .top {
                display: flex;
                align-items: baseline; }
                .self-area .self-container .square-list .small-box .small-list .square-small .top span:first-child {
                  font-family: "Microsoft Yahei";
                  font-size: 3rem;
                  font-weight: bold;
                  line-height: 30px; }
                .self-area .self-container .square-list .small-box .small-list .square-small .top span:last-child {
                  font-size: 16px; }
              .self-area .self-container .square-list .small-box .small-list .square-small .bottom {
                font-size: 16px; }
              .self-area .self-container .square-list .small-box .small-list .square-small:last-child {
                margin-right: 2px; }
          .self-area .self-container .square-list .small-box .small-extra {
            font-size: 12px;
            color: #1E2832;
            text-decoration: none;
            display: flex;
            align-items: flex-start; }
            .self-area .self-container .square-list .small-box .small-extra span:first-child {
              font-size: 12px; }
            .self-area .self-container .square-list .small-box .small-extra span:last-child {
              font-size: 8px; }
      .self-area .self-container .self-slides {
        position: relative; }
        .self-area .self-container .self-slides .slide {
          margin-top: 4px;
          margin-left: 4px; }
          .self-area .self-container .self-slides .slide .img {
            width: 100%;
            height: auto; }
            .self-area .self-container .self-slides .slide .img:hover {
              animation: bgAnimation 1s; }
  .color-area {
    box-sizing: border-boxr;
    width: 100%;
    background: #F4F7FA;
    padding: 70px 20px 100px; }
    .color-area .section-title {
      width: 100%;
      margin-bottom: 80px;
      text-align: center; }
      .color-area .section-title .main-title {
        font-size: 3rem;
        color: #0087FF;
        margin-bottom: 24px; }
    .color-area .color-section {
      width: 100%; }
      .color-area .color-section .color-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .color-area .color-section .color-list .item {
          width: 32%;
          height: 580px;
          background: linear-gradient(86deg, #6EB5F5, #0087FF);
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly; }
          .color-area .color-section .color-list .item .header {
            display: flex;
            flex-direction: column;
            align-items: center; }
            .color-area .color-section .color-list .item .header h1 {
              font-size: 36px;
              color: #FFFFFF;
              margin-bottom: 24px; }
            .color-area .color-section .color-list .item .header .link {
              display: inline-block;
              box-sizing: border-box;
              padding: 6px 30px;
              border: 1px solid #FFFFFF;
              border-radius: 24px;
              font-size: 14px;
              color: #FFFFFF; }
              .color-area .color-section .color-list .item .header .link:hover {
                text-decoration: none; }
          .color-area .color-section .color-list .item .icon {
            height: 200px;
            width: auto; }
    .color-area .color-section-1 {
      margin: 0 auto; }
      .color-area .color-section-1 .wrapper {
        display: flex; }
      .color-area .color-section-1 .color-item {
        height: 36.93333vw;
        background: linear-gradient(86deg, #6EB5F5, #0087FF);
        border-radius: 1.86667vw;
        position: relative;
        text-decoration: none;
        margin-bottom: 20px; }
        .color-area .color-section-1 .color-item img {
          margin-right: 7.06667vw;
          margin-left: 6.13333vw;
          width: 27.6vw;
          height: 31.06667vw;
          object-fit: contain; }
        .color-area .color-section-1 .color-item .right {
          padding-right: 9.73333vw;
          flex: 1;
          width: 0;
          font-size: 0; }
        .color-area .color-section-1 .color-item.sm {
          width: 86.93333vw;
          display: flex;
          flex-direction: row;
          color: #FFF;
          text-align: left; }
          .color-area .color-section-1 .color-item.sm .en {
            font-weight: bold;
            font-size: 4.4vw;
            color: #FFFFFF;
            line-height: 4.13333vw;
            margin-bottom: 2.13333vw;
            text-align: left; }
          .color-area .color-section-1 .color-item.sm .zh {
            margin: 0;
            margin-bottom: 2.53333vw;
            font-weight: 400;
            font-size: 4.66667vw;
            color: #FFFFFF;
            line-height: 3.33333vw; }
          .color-area .color-section-1 .color-item.sm .slogan {
            display: block;
            margin-bottom: 3.2vw;
            font-size: 2.93333vw;
            color: #FFFFFF;
            line-height: 3.33333vw; }
          .color-area .color-section-1 .color-item.sm .btn-more {
            padding: 1.2vw 1.86667vw;
            color: #fff;
            font-size: 2.26667vw;
            border: 1px solid #fff;
            background: transparent;
            line-height: 1; }
          .color-area .color-section-1 .color-item.sm .arrow {
            position: absolute;
            right: auto;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            width: 24px;
            height: auto; }
  .news-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background: url("../img/bg-news.png") center center no-repeat;
    background-size: cover;
    padding: 90px 20px 138px; }
    .news-area .news-container {
      width: 100%;
      box-sizing: border-box;
      position: relative; }
      .news-area .news-container .section-title {
        width: 100%;
        margin-bottom: 80px;
        text-align: center; }
        .news-area .news-container .section-title .main-title {
          font-size: 3rem;
          color: #0087FF;
          margin-bottom: 24px; }
        .news-area .news-container .section-title .sub-title {
          font-size: 1rem;
          color: #777; }
      .news-area .news-container .news-section {
        width: 100%;
        display: flex;
        justify-content: space-between; }
        .news-area .news-container .news-section .channel-header {
          margin-bottom: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .news-area .news-container .news-section .channel-header .title {
            font-size: 26px;
            color: #000; }
          .news-area .news-container .news-section .channel-header a {
            font-size: 18px;
            color: #777;
            text-decoration: none; }
        .news-area .news-container .news-section .news-item {
          font-size: 20px;
          border-radius: 20px;
          text-decoration: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background-color: #FFF;
          background-image: none;
          background-repeat: no-repeat;
          background-position-x: center;
          background-position-y: center;
          box-sizing: border-box;
          padding: 0 20px;
          box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1); }
          .news-area .news-container .news-section .news-item .news-date {
            color: #0087FF; }
          .news-area .news-container .news-section .news-item .news-title {
            color: #666; }
          .news-area .news-container .news-section .news-item:hover {
            background-color: transparent;
            background-image: url("../img/bg-news-item.png");
            background-size: cover;
            animation: bgAnimation 1s; }
            .news-area .news-container .news-section .news-item:hover .news-date {
              color: #FFF; }
            .news-area .news-container .news-section .news-item:hover .news-title {
              color: #FFF; }
        .news-area .news-container .news-section .news-dynamic {
          flex: 0.63; }
          .news-area .news-container .news-section .news-dynamic .news-box {
            display: flex; }
          .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 {
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap; }
            .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item {
              flex: 0 0 47%;
              height: 240px;
              margin-bottom: 38px; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item .news-title {
                color: #666;
                margin: 18px 0; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item .watch-detail {
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border-radius: 20px;
                font-size: 16px;
                background-color: transparent;
                color: transparent;
                text-decoration: none; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:first-child:hover {
                background-color: transparent;
                background-size: cover;
                animation: bgAnimation 1s; }
                .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:first-child:hover .news-date {
                  color: #FFF; }
                .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:first-child:hover .news-title {
                  color: #FFF; }
                .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:first-child:hover .watch-detail {
                  background-color: #FFF;
                  color: #0087FF; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:not(:first-child):hover {
                background-color: transparent;
                background-image: url("../img/bg-news-default.png");
                background-size: cover;
                animation: bgAnimation 1s; }
                .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:not(:first-child):hover .news-date {
                  color: #FFF; }
                .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:not(:first-child):hover .news-title {
                  color: #FFF; }
                .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:not(:first-child):hover .watch-detail {
                  background-color: #FFF;
                  color: #0087FF; }
        .news-area .news-container .news-section .news-media {
          flex: 0.33; }
          .news-area .news-container .news-section .news-media .news-box {
            display: flex;
            flex-direction: column; }
          .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim {
            width: 100%;
            height: 120px;
            margin-bottom: 12px;
            border-radius: 10px; }
            .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim .news-title {
              margin-top: 4px; }
            .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover {
              background-color: transparent;
              background-image: url("../img/bg-news-default.png");
              background-size: cover;
              animation: bgAnimation 1s; }
              .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover .news-date {
                color: #FFF; }
              .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover .news-title {
                color: #FFF; }
              .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover .watch-detail {
                background-color: #FFF;
                color: #0087FF; }
  .honor-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background: url("../img/bg-honor-1.png") center center;
    background-size: cover;
    padding: 40px 0 100px 0; }
    .honor-area .honor-container {
      width: 100%;
      box-sizing: border-box;
      position: relative; }
      .honor-area .honor-container .section-title {
        width: 100%;
        margin-bottom: 80px;
        text-align: center; }
        .honor-area .honor-container .section-title .main-title {
          font-size: 3rem;
          color: #0087FF;
          margin-bottom: 24px; }
        .honor-area .honor-container .section-title .sub-title {
          font-size: 1rem;
          color: #777; }
      .honor-area .honor-container .honor-wall {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; }
        .honor-area .honor-container .honor-wall * {
          margin: 0;
          padding: 0;
          box-sizing: border-box; }
        .honor-area .honor-container .honor-wall .honor-content {
          display: flex;
          width: 100%;
          overflow: hidden;
          mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
          -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); }
          .honor-area .honor-container .honor-wall .honor-content .honor-item {
            white-space: nowrap;
            animation: animate var(--t) linear infinite;
            animation-delay: calc(var(--t) * -1); }
            .honor-area .honor-container .honor-wall .honor-content .honor-item:nth-child(2) {
              animation: animate2 var(--t) linear infinite;
              animation-delay: calc(var(--t) / -2); }
            .honor-area .honor-container .honor-wall .honor-content .honor-item span {
              display: inline-block;
              margin: 10px;
              width: 560px;
              height: 100px;
              line-height: 100px;
              text-align: center;
              background-color: rgba(255, 255, 255, 0.7);
              border-radius: 37px;
              font-size: 24px;
              color: #0087FF;
              letter-spacing: 0.2em;
              text-transform: uppercase;
              cursor: pointer;
              transition: background-color 0.5s; }
              .honor-area .honor-container .honor-wall .honor-content .honor-item span:hover {
                background-color: #0087FF;
                color: #FFF; }
          .honor-area .honor-container .honor-wall .honor-content:hover .honor-item {
            animation-play-state: paused; } }

@media screen and (max-width: 768px) {
  .banner-container {
    position: relative;
    width: 100%; }
    .banner-container .inner-list {
      position: absolute;
      bottom: -7.4vw;
      left: 50%;
      transform: translateX(-50%) !important;
      z-index: 2;
      box-sizing: border-box;
      width: 89.33333vw;
      height: 14.8vw;
      background-color: #FFF;
      border-radius: 1.73333vw;
      box-shadow: 0px 5px 7px 0px rgba(128, 161, 202, 0.58);
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .banner-container .inner-list .divider {
        width: 1px;
        height: 3.2vw;
        background-color: #A0A0A0;
        transform: scaleX(0.5); }
      .banner-container .inner-list .inner-list-item {
        width: 28%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center; }
        .banner-container .inner-list .inner-list-item:nth-child(3) .inner-title {
          width: 3em; }
        .banner-container .inner-list .inner-list-item:nth-child(5) .inner-title {
          width: 2em; }
        .banner-container .inner-list .inner-list-item img {
          width: 4.8vw;
          height: 4.8vw;
          margin-right: 3.33333vw; }
        .banner-container .inner-list .inner-list-item .inner-title {
          max-width: 160px;
          display: flex;
          flex-direction: column; }
          .banner-container .inner-list .inner-list-item .inner-title span {
            font-weight: 500;
            font-size: 3.33333vw; }
            .banner-container .inner-list .inner-list-item .inner-title span:nth-child(1) {
              font-size: 3.33333vw;
              color: #000;
              margin-bottom: 0; }
            .banner-container .inner-list .inner-list-item .inner-title span:nth-child(2) {
              font-size: 0.9rem;
              color: #3C3C3C;
              font-family: "Microsoft Yahei";
              line-height: 12px;
              display: none; }
  .home-slides {
    position: relative; }
    .home-slides .owl-dots {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
      display: flex; }
      .home-slides .owl-dots .owl-dot {
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        border: 1px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        outline: none;
        transition: all linear 0.2s; }
        .home-slides .owl-dots .owl-dot span {
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 100%;
          background-color: #FFF; }
      .home-slides .owl-dots .owl-dot.active {
        border: 1px solid #FFF; }
    .home-slides .main-banner-item {
      position: relative;
      height: 141.86667vw;
      z-index: 1;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: transparent;
      display: flex;
      flex-direction: column;
      align-items: center; }
      .home-slides .main-banner-item .words {
        margin-top: 38.66667vw;
        color: #FFF;
        text-align: center;
        box-sizing: border-box; }
        .home-slides .main-banner-item .words .title-zh {
          font-size: 5.6vw; }
        .home-slides .main-banner-item .words .title-en {
          margin: 0 auto;
          font-family: "Microsoft Yahei";
          font-size: 2.93333vw;
          width: 56.93333vw;
          margin-top: 2.53333vw; }
      .home-slides .main-banner-item .btn-more {
        margin-top: 5.86667vw !important;
        padding: 1.6vw 4.26667vw;
        font-size: 2.93333vw;
        background: rgba(255, 255, 255, 0.68);
        color: #0087FF;
        line-height: 1.5; }
      .home-slides .main-banner-item .banner-btn-more {
        z-index: 1;
        box-sizing: border-box;
        position: relative;
        margin-top: 40px;
        font-size: inherit;
        font-family: inherit;
        color: #0087FF;
        padding: 0.5em 1em;
        border-radius: 3rem;
        outline: none;
        border: none;
        background-color: #FFF;
        transition: color 0.4s ease-in-out; }
        .home-slides .main-banner-item .banner-btn-more::before {
          content: '';
          z-index: -1;
          position: absolute;
          top: 100%;
          right: 100%;
          width: 1em;
          height: 0.5em;
          border-radius: 28px;
          background-color: #0087FF;
          transform-origin: center;
          transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
          transition: transform 0.45s ease-in-out; }
        .home-slides .main-banner-item .banner-btn-more:hover {
          cursor: pointer;
          color: #FFF;
          text-decoration: none; }
          .home-slides .main-banner-item .banner-btn-more:hover::before {
            transform: translate3d(50%, -50%, 0) scale3d(10, 10, 10); }
  .about-area {
    position: relative;
    margin-top: 9.6vw;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    background-color: #FFF; }
    .about-area .container-wrapper {
      width: 100%;
      background-size: cover; }
      .about-area .container-wrapper .container-fluid {
        box-sizing: border-box;
        background: url("../img/bg-index-about-top.png") center center no-repeat;
        background-size: contain; }
      .about-area .container-wrapper .container-fluid.about-container {
        padding-top: 8.4vw; }
      .about-area .container-wrapper .section-title {
        width: 100%;
        text-align: center;
        font-size: 0; }
        .about-area .container-wrapper .section-title .main-title {
          line-height: 1;
          font-size: 6.66667vw;
          color: #0087FF;
          margin-bottom: 2.26667vw;
          font-weight: 600; }
        .about-area .container-wrapper .section-title .sub-title {
          display: inline-block;
          font-size: 2.93333vw;
          color: #777;
          margin-bottom: 7.86667vw;
          line-height: 1; }
      .about-area .container-wrapper .about-list {
        box-sizing: border-box;
        padding: 0 14.4vw; }
        .about-area .container-wrapper .about-list .about-list-item {
          margin: 0;
          margin-bottom: 8.66667vw;
          display: flex;
          flex-direction: column;
          align-items: center; }
          .about-area .container-wrapper .about-list .about-list-item .item-img {
            width: auto;
            height: 10.66667vw; }
          .about-area .container-wrapper .about-list .about-list-item .count {
            display: flex;
            align-items: baseline; }
            .about-area .container-wrapper .about-list .about-list-item .count .count-box {
              font-size: 5.6vw;
              font-weight: bold;
              color: #1B212E; }
            .about-area .container-wrapper .about-list .about-list-item .count .small {
              font-size: 2.26667vw;
              color: #777; }
          .about-area .container-wrapper .about-list .about-list-item .desc {
            color: #777;
            margin: 0;
            font-size: 2.26667vw; }
        .about-area .container-wrapper .about-list > div:nth-child(n+3) .about-list-item {
          margin: 0; }
      .about-area .container-wrapper .about-time {
        display: block;
        text-align: center;
        margin: 0;
        margin-top: 8.66667vw;
        font-weight: 400;
        font-size: 2.66667vw;
        color: #57687D;
        line-height: 1; }
      .about-area .container-wrapper .about-desc {
        box-sizing: border-box;
        padding: 0 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1; }
        .about-area .container-wrapper .about-desc .desc-title {
          font-size: 4.8vw;
          color: #2F3A47;
          line-height: 1;
          margin-top: 11.2vw;
          margin-bottom: 6.13333vw; }
        .about-area .container-wrapper .about-desc .desc-content {
          margin-bottom: 0;
          text-align: justify;
          font-size: 3.73333vw;
          color: #57687D;
          line-height: 6vw;
          text-align: justify; }
    .about-area .about-btn-section {
      margin-top: 5.73333vw;
      margin-bottom: 14.93333vw;
      display: flex;
      justify-content: center; }
      .about-area .about-btn-section .btn-more {
        padding: 1.6vw 4.26667vw;
        font-size: 2.93333vw;
        line-height: 1.5;
        background: linear-gradient(180deg, #6EB5F5, #0087FF); }
  .school-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background-color: #EFF0F2;
    padding: 10.26667vw 0 6.13333vw; }
    .school-area .container {
      width: 100%;
      box-sizing: border-box;
      padding-left: 0 !important;
      padding-right: 0 !important; }
      .school-area .container .section-title {
        width: 100%;
        text-align: center;
        font-size: 0; }
        .school-area .container .section-title .main-title {
          font-size: 5.6vw;
          color: #0087FF;
          margin-bottom: 2.8vw; }
        .school-area .container .section-title .sub-title {
          font-size: 3.33333vw;
          color: #777;
          vertical-align: top; }
      .school-area .container .school-area-pc {
        display: none; }
      .school-area .container .school-area-h5 {
        display: block;
        margin-bottom: 6.26667vw;
        margin-top: 5.73333vw; }
      .school-area .container .swiper-container {
        height: 51.86667vw; }
      .school-area .container .swiper-pagination {
        display: flex;
        align-items: center;
        justify-content: center; }
      .school-area .container .swiper-pagination-bullet {
        opacity: 1;
        width: 1.06667vw;
        height: 1.06667vw;
        border-radius: 50%;
        background: #148FFD; }
      .school-area .container .swiper-pagination-bullet-active {
        position: relative; }
        .school-area .container .swiper-pagination-bullet-active::after {
          content: '';
          position: absolute;
          transform: translate(-50%, -25%);
          display: inline-block;
          border-radius: 50%;
          width: 2.13333vw;
          height: 2.13333vw;
          background: rgba(20, 143, 253, 0.5);
          z-index: -1; }
      .school-area .container .h5-service-list {
        margin: 0 auto;
        overflow: hidden; }
      .school-area .container .service-item-bg {
        position: relative;
        margin: 0 auto;
        padding: 4.4vw 0 0 3.2vw;
        width: 73.86667vw;
        height: 42.53333vw;
        background: linear-gradient(0deg, #6EB5F5, #0087FF);
        box-shadow: 2px 2px 7px 0px rgba(49, 64, 114, 0.41);
        border-radius: 2vw;
        color: #fff;
        font-size: 0; }
        .school-area .container .service-item-bg .icon-to-right {
          font-size: 4.13333vw; }
        .school-area .container .service-item-bg .service-item-desc span {
          display: block;
          margin-top: 0.8vw;
          width: 34.66667vw;
          font-weight: 800;
          font-size: 4.4vw;
          line-height: 5.33333vw; }
        .school-area .container .service-item-bg .service-item-desc h2 {
          margin: 0;
          margin-top: 1.33333vw;
          font-size: 3.33333vw; }
        .school-area .container .service-item-bg .service-item-image {
          position: absolute;
          height: 16.8vw;
          bottom: -2.93333vw;
          left: -1.2vw; }
        .school-area .container .service-item-bg .service-item-right-image {
          position: absolute;
          top: -3.46667vw;
          right: -3.6vw;
          width: 52.8vw;
          height: 46.26667vw;
          object-fit: cover; }
      .school-area .container .swiper-button-prev,
      .school-area .container .swiper-button-next {
        width: 4.8vw;
        color: #B2B5B8; }
        .school-area .container .swiper-button-prev::after,
        .school-area .container .swiper-button-next::after {
          font-size: 4.8vw; }
      .school-area .container .h5-service-content {
        margin-top: 2.66667vw;
        margin-bottom: 4vw;
        color: #57687D;
        font-size: 3.73333vw; }
      .school-area .container .h5-service-content-list {
        padding-left: 12.4vw;
        list-style: none; }
        .school-area .container .h5-service-content-list .h5-service-content-list-item {
          position: relative; }
          .school-area .container .h5-service-content-list .h5-service-content-list-item::before {
            content: '';
            margin-right: 2.53333vw;
            display: inline-block;
            width: 0.8vw;
            height: 0.8vw;
            border-radius: 50%;
            background-color: #57687D;
            vertical-align: middle; }
      .school-area .container .h5-service-content-btn {
        padding-right: 9.46667vw;
        text-align: right; }
        .school-area .container .h5-service-content-btn .btn-more {
          padding: 1.6vw 4.26667vw;
          font-size: 2.93333vw;
          line-height: 1.5;
          color: #0388FF;
          border-radius: 6.13333vw;
          border: 1px solid #108EFE;
          background: transparent; }
          .school-area .container .h5-service-content-btn .btn-more::after {
            display: none; }
      .school-area .container .section-teacher-1 {
        position: relative;
        margin-top: 40px;
        width: 100%;
        height: 300px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 0;
        margin-left: 0; }
        .school-area .container .section-teacher-1 .header {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-bottom: 0;
          padding-bottom: 8px;
          border-bottom: 1px solid #D7D8DA; }
          .school-area .container .section-teacher-1 .header h1 {
            font-size: 1.2rem;
            color: #1E2832; }
        .school-area .container .section-teacher-1 .content {
          flex: 1;
          width: 100%;
          display: flex;
          flex-direction: column;
          overflow: hidden; }
          .school-area .container .section-teacher-1 .content .sub-header {
            font-size: 24px;
            color: #0087FF;
            margin-bottom: 30px; }
          .school-area .container .section-teacher-1 .content .list {
            box-sizing: border-box;
            flex: 1;
            padding: 10px 10px 0 10px;
            overflow-y: scroll; }
            .school-area .container .section-teacher-1 .content .list::-webkit-scrollbar {
              width: 2px;
              cursor: pointer; }
            .school-area .container .section-teacher-1 .content .list::-webkit-scrollbar-track {
              background-color: #F3F8FD; }
            .school-area .container .section-teacher-1 .content .list::-webkit-scrollbar-thumb {
              background-color: #0087FF; }
              .school-area .container .section-teacher-1 .content .list::-webkit-scrollbar-thumb:hover {
                background-color: #0087FF; }
            .school-area .container .section-teacher-1 .content .list .list-item {
              position: relative;
              box-sizing: border-box;
              width: 100%;
              font-size: 14px;
              line-height: 28px;
              color: #1E2832; }
              .school-area .container .section-teacher-1 .content .list .list-item::before {
                content: '';
                position: absolute;
                left: -8px;
                top: 12px;
                width: 4px;
                height: 4px;
                background-color: #1E2832;
                border-radius: 100%; }
        .school-area .container .section-teacher-1 .img-wrapper {
          position: absolute;
          right: 0;
          bottom: 60px; }
          .school-area .container .section-teacher-1 .img-wrapper .teach-bg-1 {
            width: 100%;
            height: auto;
            display: none; }
          .school-area .container .section-teacher-1 .img-wrapper .teach-bg-2 {
            position: absolute;
            width: 200px;
            height: auto;
            left: -60px;
            bottom: -50px;
            z-index: 2;
            display: none; }
          .school-area .container .section-teacher-1 .img-wrapper .teach-bg-3 {
            position: absolute;
            width: 160px;
            height: auto;
            right: 0;
            bottom: 0; }
        .school-area .container .section-teacher-1 .btn-row {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center; }
          .school-area .container .section-teacher-1 .btn-row .btn-more {
            display: inline-block;
            margin: 0 auto; }
  .multiple-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background: url("../img/bg-circle.png") center center no-repeat;
    background-size: contain;
    padding: 40px 0 40px;
    padding: 7.33333vw 0 10vw; }
    .multiple-area .container {
      width: 100%;
      box-sizing: border-box;
      padding: 0; }
      .multiple-area .container .section-title {
        width: 100%;
        text-align: center;
        font-size: 0; }
        .multiple-area .container .section-title .main-title {
          font-size: 6.66667vw;
          margin-bottom: 1.2vw;
          color: #0087FF; }
        .multiple-area .container .section-title .sub-title {
          font-size: 3.33333vw;
          color: #777;
          color: #57687D;
          vertical-align: top; }
      .multiple-area .container .circle-outer {
        display: none; }
      .multiple-area .container .list {
        width: 100%;
        margin-top: 6.26667vw;
        display: block;
        overflow: hidden; }
        .multiple-area .container .list::-webkit-scrollbar {
          width: 3px; }
        .multiple-area .container .list::-webkit-scrollbar-track {
          background-color: #F3F8FD; }
        .multiple-area .container .list::-webkit-scrollbar-thumb {
          background-color: #0087FF; }
          .multiple-area .container .list::-webkit-scrollbar-thumb:hover {
            background-color: #0087FF; }
        .multiple-area .container .list * {
          scrollbar-width: 3px;
          scrollbar-color: #F3F8FD; }
        .multiple-area .container .list .swiper-container {
          transform: translateX(calc(-10% / 1.2));
          width: 120%;
          height: 63.73333vw; }
        .multiple-area .container .list .swiper-pagination {
          bottom: 1.33333vw;
          display: flex;
          align-items: center;
          justify-content: center; }
        .multiple-area .container .list .swiper-pagination-bullet {
          opacity: 1;
          width: 1.06667vw;
          height: 1.06667vw;
          border-radius: 50%;
          background: #148FFD; }
        .multiple-area .container .list .swiper-pagination-bullet-active {
          position: relative; }
          .multiple-area .container .list .swiper-pagination-bullet-active::after {
            content: '';
            position: absolute;
            transform: translate(-50%, -25%);
            display: inline-block;
            border-radius: 50%;
            width: 2.13333vw;
            height: 2.13333vw;
            background: rgba(20, 143, 253, 0.5);
            z-index: -1; }
        .multiple-area .container .list .swiper-slide {
          width: 35.6vw;
          height: 53.73333vw; }
        .multiple-area .container .list .swiper-slide-active .circle-mobile-item {
          transform: scale(1);
          background: linear-gradient(180deg, #6EB5F5, #0087FF); }
          .multiple-area .container .list .swiper-slide-active .circle-mobile-item .circle-item-title, .multiple-area .container .list .swiper-slide-active .circle-mobile-item .circle-item-title-hover {
            color: #fff; }
        .multiple-area .container .list .circle-mobile-item {
          width: 100%;
          height: 100%;
          background: #FFF;
          border: none;
          border-radius: 10px;
          box-sizing: border-box;
          box-shadow: 2px 2px 7px 0px rgba(93, 174, 247, 0.41);
          border-radius: 2vw;
          text-align: center;
          transform: scale(0.96);
          transition: all 1s;
          cursor: pointer; }
          .multiple-area .container .list .circle-mobile-item:first-child {
            margin-top: 0; }
          .multiple-area .container .list .circle-mobile-item img {
            margin-top: 8vw;
            margin-bottom: 6.13333vw;
            height: 9.33333vw;
            width: auto; }
          .multiple-area .container .list .circle-mobile-item .circle-item-title {
            margin-bottom: 5.06667vw;
            font-weight: 600;
            font-size: 4.4vw;
            color: #2F3A47; }
          .multiple-area .container .list .circle-mobile-item .circle-item-title-hover {
            font-size: 3.33333vw;
            color: #2F3A47; }
            .multiple-area .container .list .circle-mobile-item .circle-item-title-hover .line {
              display: flex;
              align-items: center;
              justify-content: space-around; }
              .multiple-area .container .list .circle-mobile-item .circle-item-title-hover .line span {
                flex: 1; }
        .multiple-area .container .list .item.active {
          width: 320px;
          height: 90px;
          background: linear-gradient(0deg, #6EB5F5, #0087FF); }
          .multiple-area .container .list .item.active img {
            height: 72px;
            width: auto; }
      .multiple-area .container .btn-more {
        display: inline-block;
        margin-top: 7.33333vw;
        padding: 1.6vw 4.26667vw;
        font-size: 2.93333vw;
        line-height: 1.5;
        color: #FFFFFF;
        background: #0087FF; }
        .multiple-area .container .btn-more::after {
          display: none; }
  .self-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background-color: #EFF0F2;
    padding: 7.06667vw 5.13333vw 4vw; }
    .self-area .owl-dots {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      bottom: 100px;
      display: none; }
      .self-area .owl-dots .owl-dot {
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        border-radius: 100%;
        border: 1px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        outline: none;
        transition: all linear 0.2s; }
        .self-area .owl-dots .owl-dot span {
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 100%;
          background-color: #FFF; }
      .self-area .owl-dots .owl-dot.active {
        border: 1px solid #FFF; }
    .self-area .self-container {
      padding: 0;
      width: 100%;
      box-sizing: border-box;
      position: relative; }
      .self-area .self-container .section-title {
        width: 100%;
        text-align: center;
        font-size: 0; }
        .self-area .self-container .section-title .main-title {
          font-size: 5.6vw;
          color: #0087FF;
          margin-bottom: 1.46667vw; }
        .self-area .self-container .section-title .sub-title {
          font-size: 3.33333vw;
          color: #777;
          vertical-align: top;
          line-height: 1; }
      .self-area .self-container .sub-nav-box {
        position: absolute;
        box-sizing: border-box;
        z-index: 2;
        left: 50%;
        transform: translate(-50%);
        bottom: 14px;
        width: 76.8vw;
        height: 4.66667vw;
        padding: 0 2.66667vw;
        background-color: rgba(255, 255, 255, 0.77);
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center; }
        .self-area .self-container .sub-nav-box .sub-nav-btn {
          height: 1.33333vw; }
          .self-area .self-container .sub-nav-box .sub-nav-btn img {
            width: auto;
            height: 1.33333vw;
            vertical-align: top; }
        .self-area .self-container .sub-nav-box .self-sub-nav {
          position: relative; }
          .self-area .self-container .sub-nav-box .self-sub-nav .owl-stage-outer {
            width: 100%;
            height: 4.66667vw;
            line-height: 1;
            overflow: hidden; }
          .self-area .self-container .sub-nav-box .self-sub-nav .sub-item {
            margin-right: 4.4vw;
            display: inline-block;
            min-width: 10.26667vw;
            color: #1E2832;
            font-size: 2.26667vw;
            line-height: 4.66667vw;
            vertical-align: top; }
          .self-area .self-container .sub-nav-box .self-sub-nav .owl-item.active.center .sub-item {
            font-size: 2.53333vw;
            line-height: 4.66667vw;
            color: #0087FF; }
      .self-area .self-container .square-list {
        width: 100%;
        margin-top: 5.6vw;
        margin-bottom: 0;
        display: flex;
        align-items: flex-start;
        font-size: 0; }
        .self-area .self-container .square-list .square-large {
          display: block;
          padding: 1.86667vw 2.13333vw;
          width: 36.26667vw;
          height: 16.8vw;
          box-sizing: border-box;
          margin-right: 1.2vw;
          background-color: #FFF;
          box-shadow: 0.26667vw 0.26667vw 0.93333vw 0px rgba(87, 139, 185, 0.41);
          border-radius: 1.86667vw;
          text-decoration: none; }
          .self-area .self-container .square-list .square-large .en {
            font-size: 4.4vw;
            font-weight: bold;
            color: #0087FF;
            font-family: "Microsoft Yahei";
            line-height: 0.9;
            margin-bottom: 1.06667vw; }
          .self-area .self-container .square-list .square-large .zh {
            margin: 0;
            font-size: 3.73333vw;
            font-weight: bold;
            color: #1E2832; }
          .self-area .self-container .square-list .square-large .top-right {
            display: none;
            position: absolute;
            right: 12px;
            top: 4px;
            color: #0087FF;
            font-size: 28px; }
        .self-area .self-container .square-list .small-box {
          flex: 1;
          position: relative;
          height: auto;
          width: 100%;
          flex: 1; }
          .self-area .self-container .square-list .small-box .small-list {
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between; }
            .self-area .self-container .square-list .small-box .small-list .square-small {
              width: 49%;
              padding: 1.33333vw 0;
              height: auto;
              margin-right: 0.26667vw;
              border-radius: 1.86667vw;
              background: linear-gradient(0deg, #6EB5F5, #0087FF);
              color: #FFF;
              text-align: center;
              box-shadow: 0 0 1px 1px rgba(49, 64, 114, 0.2); }
              .self-area .self-container .square-list .small-box .small-list .square-small .top {
                display: flex;
                align-items: baseline;
                line-height: 1; }
                .self-area .self-container .square-list .small-box .small-list .square-small .top span:first-child {
                  margin-bottom: 7;
                  font-family: "Microsoft Yahei";
                  font-size: 5.6vw;
                  font-weight: bold;
                  line-height: 1; }
                .self-area .self-container .square-list .small-box .small-list .square-small .top span:last-child {
                  text-align: center;
                  font-size: 2.93333vw; }
              .self-area .self-container .square-list .small-box .small-list .square-small .bottom {
                display: inline-block;
                width: 80%;
                font-size: 2.93333vw;
                line-height: 3.73333vw;
                transform-origin: 0; }
              .self-area .self-container .square-list .small-box .small-list .square-small:last-child {
                margin-right: 0; }
          .self-area .self-container .square-list .small-box .small-extra {
            position: absolute;
            right: 2.13333vw;
            font-weight: 500;
            font-size: 2.26667vw;
            bottom: -0.26667vw;
            right: 0;
            transform: translateY(100%);
            font-size: 2.4vw;
            color: #1E2832;
            text-decoration: none;
            color: #57687D; }
            .self-area .self-container .square-list .small-box .small-extra span:first-child {
              font-size: 2.26667vw; }
            .self-area .self-container .square-list .small-box .small-extra span:last-child {
              font-size: 1.46667vw;
              vertical-align: top; }
      .self-area .self-container .self-slides {
        position: relative;
        margin-top: 1.6vw; }
        .self-area .self-container .self-slides .slide {
          margin-top: 0px;
          margin-left: 0px; }
          .self-area .self-container .self-slides .slide .img {
            width: 100%;
            height: auto; }
            .self-area .self-container .self-slides .slide .img:hover {
              animation: bgAnimation 1s; }
  .color-area {
    box-sizing: border-boxr;
    width: 100%;
    background: #fff;
    padding: 0;
    padding-top: 5.6vw; }
    .color-area .section-title {
      width: 100%;
      margin-bottom: 5.86667vw;
      text-align: center;
      font-size: 0; }
      .color-area .section-title .main-title {
        font-size: 5.6vw;
        color: #0087FF; }
    .color-area .swiper-wrapper {
      height: 46.8vw; }
    .color-area .swiper-pagination {
      bottom: 1.33333vw;
      display: flex;
      align-items: center;
      justify-content: center; }
    .color-area .swiper-pagination-bullet {
      opacity: 1;
      width: 1.06667vw;
      height: 1.06667vw;
      border-radius: 50%;
      background: #148FFD; }
    .color-area .swiper-pagination-bullet-active {
      position: relative; }
      .color-area .swiper-pagination-bullet-active::after {
        content: '';
        position: absolute;
        transform: translate(-50%, -25%);
        display: inline-block;
        border-radius: 50%;
        width: 2.13333vw;
        height: 2.13333vw;
        background: rgba(20, 143, 253, 0.5);
        z-index: -1; }
    .color-area .color-section {
      max-width: 1180px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .color-area .color-section .wrapper:first-child {
        margin-right: 0;
        margin-bottom: 20px; }
      .color-area .color-section .color-item {
        height: 36.93333vw;
        background: linear-gradient(86deg, #6EB5F5, #0087FF);
        border-radius: 14px;
        position: relative; }
        .color-area .color-section .color-item.sm {
          width: 75.6vw;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #FFF; }
          .color-area .color-section .color-item.sm .en {
            font-size: 26px;
            font-weight: bold;
            font-family: "Microsoft Yahei", sans-serif;
            text-transform: uppercase;
            text-align: center;
            line-height: 30px;
            margin-bottom: 0; }
          .color-area .color-section .color-item.sm .zh {
            font-size: 22px;
            margin-top: 16px;
            margin-bottom: 16px; }
          .color-area .color-section .color-item.sm .slogan {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 20px;
            margin-bottom: 20px; }
          .color-area .color-section .color-item.sm .arrow-link {
            position: absolute;
            right: auto;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px; }
            .color-area .color-section .color-item.sm .arrow-link .arrow {
              width: 24px;
              height: auto; }
        .color-area .color-section .color-item.lg {
          flex: 0.96;
          box-sizing: border-box;
          padding: 0 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFF; }
          .color-area .color-section .color-item.lg .left {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start; }
            .color-area .color-section .color-item.lg .left .words {
              display: flex;
              flex-direction: column; }
              .color-area .color-section .color-item.lg .left .words .logo {
                width: 50px;
                height: auto; }
              .color-area .color-section .color-item.lg .left .words .zh {
                font-size: 38px;
                margin: 20px 0; }
              .color-area .color-section .color-item.lg .left .words .en {
                text-transform: uppercase;
                font-size: 40px;
                font-weight: bold;
                font-family: "Microsoft Yahei", sans-serif;
                line-height: 36px; }
              .color-area .color-section .color-item.lg .left .words span {
                margin-top: 20px; }
            .color-area .color-section .color-item.lg .left .link {
              display: inline-block;
              box-sizing: border-box;
              padding: 10px 40px;
              border: 1px solid #FFF;
              border-radius: 24px;
              font-size: 14px;
              color: #FFF;
              margin-top: 40px; }
              .color-area .color-section .color-item.lg .left .link:hover {
                text-decoration: none; }
          .color-area .color-section .color-item.lg .right {
            width: 280px; }
            .color-area .color-section .color-item.lg .right img {
              width: 280px;
              height: auto; }
    .color-area .color-section-1 {
      margin: 0 auto; }
      .color-area .color-section-1 .wrapper {
        display: flex; }
      .color-area .color-section-1 .color-item {
        height: 40vw;
        background: linear-gradient(86deg, #6EB5F5, #0087FF);
        border-radius: 1.86667vw;
        position: relative;
        text-decoration: none;
        margin-bottom: 2.66667vw; }
        .color-area .color-section-1 .color-item img {
          margin-right: 7.06667vw;
          margin-left: 6.13333vw;
          width: 27.6vw;
          height: 31.06667vw;
          object-fit: contain; }
        .color-area .color-section-1 .color-item .right {
          padding-right: 9.33333vw;
          flex: 1;
          width: 0;
          font-size: 0; }
        .color-area .color-section-1 .color-item.sm {
          margin: 0 auto;
          width: 86.93333vw;
          display: flex;
          flex-direction: row;
          color: #FFF;
          text-align: left; }
          .color-area .color-section-1 .color-item.sm .en {
            font-weight: bold;
            font-size: 3.46667vw;
            color: #FFFFFF;
            line-height: 1;
            margin-bottom: 0.8vw;
            text-align: left; }
          .color-area .color-section-1 .color-item.sm .zh {
            margin: 0;
            margin-bottom: 1.33333vw;
            font-weight: 400;
            font-size: 4.13333vw;
            color: #FFFFFF;
            line-height: 1; }
          .color-area .color-section-1 .color-item.sm .slogan {
            display: block;
            margin-bottom: 4.53333vw;
            font-size: 2.93333vw;
            color: #FFFFFF;
            line-height: 3.33333vw; }
          .color-area .color-section-1 .color-item.sm .btn-more {
            padding: 0.84vw 1.29333vw;
            color: #fff;
            font-size: 1.6vw;
            border: 1px solid #fff;
            background: transparent;
            line-height: 1.5; }
          .color-area .color-section-1 .color-item.sm .arrow {
            position: absolute;
            right: auto;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            width: 24px;
            height: auto; }
  .news-area {
    margin-top: 9.2vw;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background: url("../img/bg-news.png") center center no-repeat;
    background-size: cover;
    padding: 0; }
    .news-area .news-container {
      padding: 0vw 5.46667vw;
      width: 100%;
      box-sizing: border-box;
      position: relative; }
      .news-area .news-container .section-title {
        width: 100%;
        margin-bottom: 3.33333vw;
        text-align: center;
        font-size: 0; }
        .news-area .news-container .section-title .main-title {
          font-size: 5.6vw;
          color: #0087FF; }
        .news-area .news-container .section-title .sub-title {
          font-size: 1rem;
          color: #777; }
      .news-area .news-container .news-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; }
        .news-area .news-container .news-section .channel-header {
          margin-bottom: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .news-area .news-container .news-section .channel-header .title {
            position: relative;
            font-weight: 400;
            font-size: 4.4vw;
            color: #2F3A47; }
            .news-area .news-container .news-section .channel-header .title::after {
              content: '';
              position: absolute;
              bottom: -1.2vw;
              left: 0;
              width: 5.46667vw;
              height: 0.53333vw;
              background: #0388FF; }
          .news-area .news-container .news-section .channel-header a {
            font-size: 2.93333vw;
            color: #777;
            text-decoration: none; }
        .news-area .news-container .news-section .news-item {
          font-size: 3.33333vw;
          border-radius: 1.86667vw;
          text-decoration: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background-color: #FFF;
          background-image: none;
          background-repeat: no-repeat;
          background-position-x: center;
          background-position-y: center;
          box-sizing: border-box;
          padding: 3.2vw 8.53333vw 3.46667vw 6vw;
          box-shadow: 0px 0px 2.66667vw 0px rgba(119, 155, 192, 0.39); }
          .news-area .news-container .news-section .news-item .news-date {
            margin-bottom: 2.53333vw;
            color: #0087FF;
            font-size: 3.33333vw;
            line-height: 1; }
          .news-area .news-container .news-section .news-item .news-title {
            color: #666;
            font-size: 3.33333vw;
            line-height: 4vw; }
          .news-area .news-container .news-section .news-item:hover {
            background-color: transparent;
            background-image: url("../img/bg-news-item.png");
            background-size: cover;
            animation: bgAnimation 1s; }
            .news-area .news-container .news-section .news-item:hover .news-date {
              color: #FFF; }
            .news-area .news-container .news-section .news-item:hover .news-title {
              color: #FFF; }
        .news-area .news-container .news-section .news-dynamic {
          flex: 1; }
          .news-area .news-container .news-section .news-dynamic .news-box {
            display: flex;
            flex-direction: column; }
          .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 {
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap; }
            .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item {
              box-sizing: border-box;
              flex: auto;
              width: 100%;
              height: auto;
              margin-bottom: 2.53333vw;
              padding: 3.2vw 8.53333vw 3.46667vw 6vw; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item:last-child {
                margin-bottom: 0; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item .news-title {
                color: #666;
                margin: 0; }
              .news-area .news-container .news-section .news-dynamic .news-box.news-box-1 .news-item .watch-detail {
                display: none; }
        .news-area .news-container .news-section .news-media {
          margin-top: 4.4vw;
          flex: 0.33; }
          .news-area .news-container .news-section .news-media .news-box {
            display: flex;
            flex-direction: column; }
          .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim {
            width: 100%;
            height: auto;
            margin-bottom: 2.53333vw;
            border-radius: 1.86667vw; }
            .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim .news-title {
              margin-top: 0; }
            .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover {
              background-color: transparent;
              background-image: url("../img/bg-news-default.png");
              background-size: cover;
              animation: bgAnimation 1s; }
              .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover .news-date {
                color: #FFF; }
              .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover .news-title {
                color: #FFF; }
              .news-area .news-container .news-section .news-media .news-box.news-box-2 .news-item-slim:hover .watch-detail {
                background-color: #FFF;
                color: #0087FF; }
  .news-title {
    min-height: 8vw; }
  .honor-area {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    background: url("../img/bg-honor-1.png") center center;
    background-size: cover;
    padding: 40px 0 100px 0; }
    .honor-area .honor-container {
      width: 100%;
      box-sizing: border-box;
      position: relative; }
      .honor-area .honor-container .section-title {
        width: 100%;
        margin-bottom: 80px;
        text-align: center; }
        .honor-area .honor-container .section-title .main-title {
          font-size: 5.6vw;
          color: #0087FF;
          margin-bottom: 24px; }
        .honor-area .honor-container .section-title .sub-title {
          font-size: 1rem;
          color: #777; }
      .honor-area .honor-container .honor-wall {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; }
        .honor-area .honor-container .honor-wall * {
          margin: 0;
          padding: 0;
          box-sizing: border-box; }
        .honor-area .honor-container .honor-wall .honor-content {
          display: flex;
          width: 100%;
          overflow: hidden;
          mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
          -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent); }
          .honor-area .honor-container .honor-wall .honor-content .honor-item {
            white-space: nowrap;
            animation: animate var(--t) linear infinite;
            animation-delay: calc(var(--t) * -1); }
            .honor-area .honor-container .honor-wall .honor-content .honor-item:nth-child(2) {
              animation: animate2 var(--t) linear infinite;
              animation-delay: calc(var(--t) / -2); }
            .honor-area .honor-container .honor-wall .honor-content .honor-item span {
              display: inline-block;
              margin: 10px;
              width: 560px;
              height: 100px;
              line-height: 100px;
              text-align: center;
              background-color: rgba(255, 255, 255, 0.7);
              border-radius: 37px;
              font-size: 24px;
              color: #0087FF;
              letter-spacing: 0.2em;
              text-transform: uppercase;
              cursor: pointer;
              transition: background-color 0.5s; }
              .honor-area .honor-container .honor-wall .honor-content .honor-item span:hover {
                background-color: #0087FF;
                color: #FFF; }
          .honor-area .honor-container .honor-wall .honor-content:hover .honor-item {
            animation-play-state: paused; } }

.main-banner-item-mobile {
  display: none !important; }

.home-slides .owl-dots {
  width: 100vw;
  justify-content: center;
  left: 0 !important; }

@media screen and (max-width: 768px) {
  .main-banner-item {
    display: none !important; }
  .main-banner-item-mobile {
    display: flex !important; } }