@charset "UTF-8";
.p-1 {
  display: flex;
  justify-content: space-between; }
  .p-1 .p-wrapper:nth-child(1) {
    position: relative;
    width: 640px; }
.p-1 .p-wrapper:nth-child(1) .p-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 999;
  border-bottom: transparent;
  background: rgba(0, 0, 0, 0.2);
}

.p-1 .p-wrapper:nth-child(1) .p-header .flag span {
  color: #fff;
}

.p-1 .p-wrapper:nth-child(1) .p-header .flag::before {
  content: "";
  background: #fff;
}

.p-1 .p-wrapper:nth-child(1) .p-header .more {
  margin-top:-7px;
  bottom: inhert;
  top: 50%;
  color: #fff !important;
}

    .p-1 .p-wrapper:nth-child(1) #swiper01 .swiper-wrapper .swiper-slide {
      position: relative; }
      .p-1 .p-wrapper:nth-child(1) #swiper01 .swiper-wrapper .swiper-slide .img-box {
        width: 640px;
        height: 430px; }
        .p-1 .p-wrapper:nth-child(1) #swiper01 .swiper-wrapper .swiper-slide .img-box img {
          display: block;
          width: 100%;
          height: 100%; }
      .p-1 .p-wrapper:nth-child(1) #swiper01 .swiper-wrapper .swiper-slide h2 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 16px;
        line-height: 48px;
        padding: 4px 66px 4px 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
    .p-1 .p-wrapper:nth-child(1) #swiper01 #swiper01-pagination {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: initial;
      bottom: initial;
      right: 10px;
      transform: translateY(-50%);
      z-index: 800;
      padding: 26px 0;
      height: auto;
      width: 36px;
      border-radius: 18px;
      text-align: center;
      background: rgba(255, 255, 255, 0.5); }
      .p-1 .p-wrapper:nth-child(1) #swiper01 #swiper01-pagination .swiper-pagination-bullet {
        outline: none;
        margin: 3px 0;
        width: 8px;
        height: 8px;
        border: 2px solid #ffffff;
        background: #ffffff;
        opacity: 1; }
        .p-1 .p-wrapper:nth-child(1) #swiper01 #swiper01-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
          border: 2px solid #0c7ed9;
          background: #0c7ed9; }
    .p-1 .p-wrapper:nth-child(1) .more {
      display: block;
      position: absolute;
      right: 0;
      bottom: 21px;
      width: 56px;
      height: 14px;
      margin-right: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 14px;
      color: #fff;
      z-index: 900;
      box-sizing: border-box; }
      .p-1 .p-wrapper:nth-child(1) .more:hover {
        color: #0c7ed9; }
  .p-1 .p-wrapper:nth-child(2) {
    background: #fff;
    width: 535px; }
    .p-1 .p-wrapper:nth-child(2) .switch-content {
      padding: 10px 24px 0; }
      .p-1 .p-wrapper:nth-child(2) .switch-content ul {
        display: none; }
        .p-1 .p-wrapper:nth-child(2) .switch-content ul:first-child {
          display: block; }
        .p-1 .p-wrapper:nth-child(2) .switch-content ul li {
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .p-1 .p-wrapper:nth-child(2) .switch-content ul li:nth-child(1), .p-1 .p-wrapper:nth-child(2) .switch-content ul li:nth-child(5) {
            padding: 12px 0; }
            .p-1 .p-wrapper:nth-child(2) .switch-content ul li:nth-child(1) a, .p-1 .p-wrapper:nth-child(2) .switch-content ul li:nth-child(5) a {
              font-size: 16px;
              line-height: 24px;
              font-weight: bold;
              color: #000; }
            .p-1 .p-wrapper:nth-child(2) .switch-content ul li:nth-child(1) span, .p-1 .p-wrapper:nth-child(2) .switch-content ul li:nth-child(5) span {
              display: none; }
          .p-1 .p-wrapper:nth-child(2) .switch-content ul li:nth-child(5) {
            margin-top: 16px; }
          .p-1 .p-wrapper:nth-child(2) .switch-content ul li a {
            flex: 1;
            /*max-width: 85%;*/
            display: block;
            font-size: 16px;
            line-height: 36px;
            color: #333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden; }
            .p-1 .p-wrapper:nth-child(2) .switch-content ul li a:hover {
              color: #0c7ed9; }
          .p-1 .p-wrapper:nth-child(2) .switch-content ul li span {
            display: block;
            font-size: 16px;
            line-height: 36px;
            color: #666;
            font-family: arial; }

.p-2 {
  display: flex;
  justify-content: space-between; }
  .p-2 .p-wrapper:nth-child(1) {
    background: #fff;
    width: 400px; }
    .p-2 .p-wrapper:nth-child(1) .video {
      padding: 24px; }
      .p-2 .p-wrapper:nth-child(1) .video a {
        display: block; }
        .p-2 .p-wrapper:nth-child(1) .video a .video-img {
          width: 100%;
          height: 200px;
          overflow: hidden;
          position: relative;
          margin-bottom: 20px; }
          .p-2 .p-wrapper:nth-child(1) .video a .video-img img {
            display: block;
            width: 100%;
            height: 100%; }
            .p-2 .p-wrapper:nth-child(1) .video a .video-img img.play-btn {
              display: none;
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              width: 60px;
              height: 58px;
              margin: auto;
              opacity: .4;
              transition: .5s linear; }
          .p-2 .p-wrapper:nth-child(1) .video a .video-img:hover .play-btn {
            transition: .5s linear;
            opacity: 1; }
        .p-2 .p-wrapper:nth-child(1) .video a .video-desc {
          padding: 0;
          font-size: 16px;
          line-height: 30px;
          color: #000;
          height: 60px;
          margin-bottom: 10px;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; }
  .p-2 .p-wrapper:nth-child(2) {
    background: #fff;
    width: 770px; }
    .p-2 .p-wrapper:nth-child(2) .profession {
      display: flex;
      padding: 24px; }
      .p-2 .p-wrapper:nth-child(2) .profession #swiper02 {
        width: 230px;
        margin-right: 20px; }
        .p-2 .p-wrapper:nth-child(2) .profession #swiper02 .swiper-wrapper .swiper-slide {
          width: 230px;
          height: 290px; }
          .p-2 .p-wrapper:nth-child(2) .profession #swiper02 .swiper-wrapper .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%; }
      .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        overflow: hidden;
        padding-left: 6px; }
        .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03 .swiper-wrapper .swiper-slide a {
          display: flex;
          flex-direction: column;
          align-items: flex-start; }
          .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03 .swiper-wrapper .swiper-slide a h2 {
            color: #000;
            font-size: 24px;
            font-weight: bold;
            line-height: 28px;
            margin-bottom: 16px; }
          .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03 .swiper-wrapper .swiper-slide a p {
            font-size: 16px;
            color: #333;
            line-height: 24px;
            white-space: normal;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-bottom: 24px; }
          .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03 .swiper-wrapper .swiper-slide a span {
            display: block;
            width: 54px;
            height: 24px;
            background: #0c7ed9;
            text-align: center;
            border-radius: 12px;
            overflow: hidden; }
            .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03 .swiper-wrapper .swiper-slide a span i {
              display: block;
              font-size: 24px;
              line-height: 24px;
              color: #fff; }
        .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03-pagination {
          position: relative;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap; }
          .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03-pagination .swiper-pagination-bullet {
            display: block;
            width: 33.33%;
            height: auto;
            outline: none;
            border-radius: 0;
            z-index: 850;
            background: #fff;
            opacity: 1;
            font-size: 16px;
            line-height: 24px;
            text-align: left;
            color: #333;
            border-bottom: 2px solid #333; }
            .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03-pagination .swiper-pagination-bullet i {
              display: inline-block;
              vertical-align: top;
              font-weight: bold;
              padding: 15px 0;
              position: relative;
              box-sizing: border-box; }
              .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03-pagination .swiper-pagination-bullet i::after {
                content: "";
                display: block;
                height: 2px;
                background: transparent;
                position: absolute;
                left: 0;
                right: 0;
                bottom: -2px; }
            .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
              color: #0c7ed9; }
              .p-2 .p-wrapper:nth-child(2) .profession > div:nth-child(2) #swiper03-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active i::after {
                content: "";
                background: #0c7ed9; }

.p-3 .p-wrapper {
  background: #fff; }
  .p-3 .p-wrapper .courses {
    display: flex;
    justify-content: space-between;
    padding: 24px; 
    flex-wrap: wrap;}
  .p-3 .p-wrapper .courses::after {
    content:"";
    display: block;
    width: 372px;
    height: 0; }
    .p-3 .p-wrapper .courses a {
      display: block;
      position: relative; }
      .p-3 .p-wrapper .courses a:hover .courses-infos {
        height: calc(100% - 41px);
        background: rgba(0, 0, 0, 0.6);
        transition: .2s ease-out; }
      .p-3 .p-wrapper .courses a:hover .courses-infos div p  {
        -webkit-line-clamp: 3;
       }
      .p-3 .p-wrapper .courses a img {
        display: block;
        width: 372px;
        height: 240px; }
      .p-3 .p-wrapper .courses a .courses-infos {
        position: absolute;
        height: auto;
        max-height: 100%;
        left: 20px;
        right: 20px;
        bottom: 20px;
        height: 81px;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        padding: 11px 18px 10px;
        transition: .2s ease-out; }
        .p-3 .p-wrapper .courses a .courses-infos div {
          color: #fff;
          overflow: hidden; }
          .p-3 .p-wrapper .courses a .courses-infos div span {
            display: block;
            font-size: 16px;
            line-height: 30px;
            font-weight: bold;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden; }
          .p-3 .p-wrapper .courses a .courses-infos div p {
            font-size: 14px;
            line-height: 30px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            overflow: hidden; }
          .p-3 .p-wrapper .courses a .courses-infos div:nth-child(1) {
            flex: 1; }
          .p-3 .p-wrapper .courses a .courses-infos div:nth-child(2) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative; }
            .p-3 .p-wrapper .courses a .courses-infos div:nth-child(2)::before {
              content: "";
              display: block;
              width: 1px;
              height: 30px;
              position: absolute;
              left: 0;
              top: 50%;
              margin-top: -15px;
              background: #fff; }
          .p-3 .p-wrapper .courses a .courses-infos div i {
            display: block;
            margin-left: 20px; }

.p-4 {
  display: flex;
  justify-content: space-between; }
  .p-4 .p-wrapper:nth-child(1) {
    background: #fff;
    width: 588px; }
    .p-4 .p-wrapper:nth-child(1) .map {
      padding: 14px 24px; }
      .p-4 .p-wrapper:nth-child(1) .map #guangdong-map {
        height: 290px; }
  .p-4 .p-wrapper:nth-child(2) {
    background: #fff;
    width: 588px;
    display: flex;
    flex-direction: column; }
    .p-4 .p-wrapper:nth-child(2) .query {
      padding: 24px;
      box-sizing: border-box;
      flex: 1; }
      .p-4 .p-wrapper:nth-child(2) .query .query-enter {
        display: flex;
        flex-wrap: wrap;
        height: 100%; }
        .p-4 .p-wrapper:nth-child(2) .query .query-enter a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%; }
          .p-4 .p-wrapper:nth-child(2) .query .query-enter a:hover .query-flag img {
            top: 0; }
          .p-4 .p-wrapper:nth-child(2) .query .query-enter a:hover p span:nth-child(1), .p-4 .p-wrapper:nth-child(2) .query .query-enter a:hover p span:nth-child(2) {
            color: #0c7ed9; }
          .p-4 .p-wrapper:nth-child(2) .query .query-enter a .query-flag {
            overflow: hidden; }
            .p-4 .p-wrapper:nth-child(2) .query .query-enter a .query-flag img {
              display: block;
              width: 100%;
              position: relative;
              top: -100%;
              background: #fff; }
          .p-4 .p-wrapper:nth-child(2) .query .query-enter a:nth-child(1) .query-flag {
            width: 92px;
            height: 61px;
            margin-right: 20px;
            margin-left: 14px; }
          .p-4 .p-wrapper:nth-child(2) .query .query-enter a:nth-child(2) .query-flag {
            width: 86px;
            height: 70px;
            margin-right: 24px; }
          .p-4 .p-wrapper:nth-child(2) .query .query-enter a:nth-child(3) .query-flag {
            width: 101px;
            height: 64px;
            margin-right: 8px; }
          .p-4 .p-wrapper:nth-child(2) .query .query-enter a:nth-child(4) .query-flag {
            width: 101px;
            height: 64px;
            margin-right: 8px; }
          .p-4 .p-wrapper:nth-child(2) .query .query-enter a p {
            display: flex;
            flex-direction: column;
            align-items: flex-start; }
            .p-4 .p-wrapper:nth-child(2) .query .query-enter a p span {
              display: block; }
              .p-4 .p-wrapper:nth-child(2) .query .query-enter a p span:nth-child(1) {
                font-size: 18px;
                line-height: 24px;
                color: #333; }
              .p-4 .p-wrapper:nth-child(2) .query .query-enter a p span:nth-child(2) {
                font-size: 14px;
                line-height: 24px;
                color: #999;
                font-family: arial; }

.p-5 .p-wrapper {
  background: #fff; }
  .p-5 .p-wrapper .online {
    display: flex;
    justify-content: space-between;
    padding: 24px 16px; }
    .p-5 .p-wrapper .online a {
      display: block;
      position: relative;
      width: 378px;
      height: 210px; }
      .p-5 .p-wrapper .online a:hover img {
        transform: scale(1.02);
        transition: .3s linear; }
      .p-5 .p-wrapper .online a img {
        display: block;
        width: 100%;
        height: 100%;
        transition: .3s linear; }

.p-6 .p-wrapper {
  background: #fff; }
  .p-6 .p-wrapper .exercise {
    padding: 24px; }
    .p-6 .p-wrapper .exercise .overflow-wrapper {
      overflow: hidden;
      margin-right: -23px;
      margin-bottom: -24px; }
      .p-6 .p-wrapper .exercise .overflow-wrapper a {
        display: block;
        float: left;
        margin-right: 23px;
        width: 250px; }
        .p-6 .p-wrapper .exercise .overflow-wrapper a:hover .title {
          color: #0c7ed9; }
        .p-6 .p-wrapper .exercise .overflow-wrapper a:hover .img-box img {
          transform: translateZ(0) scale(1.05);
          transition: .2s linear; }
        .p-6 .p-wrapper .exercise .overflow-wrapper a .img-box {
          position: relative;
          width: 250px;
          height: 140px;
          margin-bottom: 10px;
          overflow: hidden; }
          .p-6 .p-wrapper .exercise .overflow-wrapper a .img-box img {
            display: block;
            width: 100%;
            height: 100%;
            transition: .2s linear; }
        .p-6 .p-wrapper .exercise .overflow-wrapper a .title {
          font-size: 16px;
          line-height: 20px;
          color: #333;
          margin-bottom: 30px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          max-width: 96%; }
        .p-6 .p-wrapper .exercise .overflow-wrapper a:nth-child(1) {
          width: 606px; }
          .p-6 .p-wrapper .exercise .overflow-wrapper a:nth-child(1) .img-box {
            width: 606px;
            height: 340px; }
            .p-6 .p-wrapper .exercise .overflow-wrapper a:nth-child(1) .img-box:hover::after {
              background: #0069D9 url(../images/arrowRight.png) center no-repeat;
              background-size: 80%;
              border: 4px solid #0069D9;
              transition: .1s linear; }
            .p-6 .p-wrapper .exercise .overflow-wrapper a:nth-child(1) .img-box::after {
              content: "";
              background: rgba(255, 255, 255, 0.2) url(../images/arrowRight.png) center no-repeat;
              background-size: 80%;
              display: block;
              width: 50px;
              height: 50px;
              border: 4px solid #fff;
              position: absolute;
              right: 18px;
              bottom: 18px;
              border-radius: 50%; }
            .p-6 .p-wrapper .exercise .overflow-wrapper a:nth-child(1) .img-box img {
              display: block;
              width: 100%;
              height: 100%; }

.p-ad a {
  display: block; }
  .p-ad a img {
    display: block;
    width: 100%; }

.video-layer {
  border: 4px solid #fff;
  border-radius: 10px;
  box-sizing: border-box; }
  .video-layer video {
    width: 100%;
    display: block;
    object-fit: fill; }

.tips-win {
  background: #fff;
  width: 420px; }
  .tips-win h2 {
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px; }
  .tips-win .list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0; }
    .tips-win .list a {
      display: block;
      font-size: 14px;
      line-height: 18px;
      padding: 2px 4px;
      color: #000; }
      .tips-win .list a:hover {
        color: #0c7ed9; }
    .tips-win .list span {
      font-size: 14px;
      line-height: 18px;
      padding: 2px 4px;
      color: #000; }

@keyframes mymove {
  from {
    top: auto; }
  to {
    top: 20px; } }

@-moz-keyframes mymove /* Firefox */ {
  from {
    top: 0px; }
  to {
    top: 200px; } }

@-webkit-keyframes mymove /* Safari 和 Chrome */ {
  from {
    top: 0px; }
  to {
    top: 200px; } }

@-o-keyframes mymove /* Opera */ {
  from {
    top: 0px; }
  to {
    top: 200px; } }