.banner {
  width: 100%;
  height: 36.458vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 18.750vw; }
  .banner h3 {
    font-size: 2.396vw;
    margin-bottom: 1.250vw;
    color: #fff;
    text-align: center; }
  .banner p {
    width: 23.438vw;
    font-size: 1.042vw;
    font-family: PingFang SC-Regular, PingFang SC;
    color: #fff;
    text-align: center; }
  @media screen and (min-width: 320px) and (max-width: 767px) {
    .banner {
      height: 9.03rem;
      padding: 0 0.77rem; }
      .banner h3 {
        font-size: 0.54rem; }
      .banner p {
        width: 7.05rem;
        font-size: 0.34rem; } }
  @media screen and (min-width: 768px) and (max-width: 1180px) {
    .banner {
      height: 600px;
      padding: 0 42px; }
      .banner h3 {
        font-size: 36px;
        margin-bottom: 20px; }
      .banner p {
        width: 440px;
        font-size: 21px; } }

.content {
  padding-top: 10.417vw;
  position: relative;
  background-color: #F9FAFC; }
  .content .details {
    margin-top: 3.385vw;
    display: flex; }
    .content .details .right {
      width: calc((25.417vw + 1.042vw) * 2);
      margin-right: 9.375vw; }
      .content .details .right .item {
        background-color: #fff;
        padding: 0.573vw;
        display: inline-block;
        align-items: center;
        width: 25.2vw;
        font-size: 0;
        margin-right: 1.042vw;
        margin-bottom: 1.042vw; }
        .content .details .right .item:nth-child(2n-0) {
          margin-right: 0; }
        .content .details .right .item .img {
          width: 7.500vw;
          height: 9.375vw;
          display: inline-flex;
          vertical-align: middle;
          justify-content: center;
          align-items: center;
          overflow: hidden; }
          .content .details .right .item .img img {
            width: initial;
            height: 100%;
            transition: all .5s; }
        .content .details .right .item .youb {
          display: inline-block;
          vertical-align: middle;
          margin-left: 1.250vw;
          width: 15.000vw; }
          .content .details .right .item .youb h3 {
            font-size: 1.042vw;
            color: #222;
            margin-bottom: 0.625vw;
            transition: all .5s; }
          .content .details .right .item .youb p {
            font-size: 0.729vw;
            color: #9A9EA4;
            margin-bottom: 1.042vw; }
        .content .details .right .item:hover .youb h3 {
          color: #69d1f3; }
        .content .details .right .item:hover .img img {
          transform: scale(1.1); }
    .content .details .left {
      margin-left: 9.375vw;
      margin-right: 1.615vw;
      width: 26.563vw;
      height: 33.646vw;
      overflow: hidden;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center; }
      .content .details .left img {
        width: initial;
        height: 100%;
        transition: all .8s; }
      .content .details .left:hover img {
        transform: scale(1.1); }
      .content .details .left .bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        padding: 1.042vw 1.563vw;
        background-color: rgba(0, 0, 0, 0.6); }
        .content .details .left .bottom h3 {
          font-size: 1.042vw; }
        .content .details .left .bottom p {
          font-size: 0.729vw;
          opacity: .6; }
  .content .pages {
    margin-top: 40px;
    margin-bottom: 60px; }
    .content .pages .pagination {
      display: flex;
      justify-content: center; }
      .content .pages .pagination li {
        width: 40px;
        height: 40px;
        cursor: pointer;
        border-radius: 5px;
        display: flex;
        font-size: 16px;
        justify-content: center;
        align-items: center;
        border: 1px solid #e6e6e6;
        background-color: #fff;
        margin-right: 10px; }
        .content .pages .pagination li a {
          color: #000; }
      .content .pages .pagination .disabled {
        cursor: not-allowed; }
      .content .pages .pagination .active {
        background-color: #69d1f3;
        border-color: #69d1f3;
        color: #fff; }
    @media screen and (min-width: 320px) and (max-width: 767px) {
      .content .pages {
        margin: 0.39rem 0; }
        .content .pages .pagination li {
          width: 1.03rem;
          height: 1.03rem; } }
    @media screen and (min-width: 768px) and (max-width: 1180px) {
      .content .pages {
        margin: 30px 0; }
        .content .pages .pagination li {
          width: 50px;
          height: 50px;
          font-size: 20px; } }
  .content .top {
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -132px; }
    .content .top .title {
      position: relative; }
      .content .top .title h3 {
        font-size: 40px;
        text-align: center;
        color: #69d1f3;
        margin-bottom: 4px; }
      .content .top .title p {
        color: #9A9EA4;
        font-size: 20px;
        padding-left: 30px;
        position: relative;
        letter-spacing: 2px; }
        .content .top .title p::before {
          content: '';
          width: 8px;
          height: 8px;
          border-radius: 50%;
          border: 5px solid rgba(105, 209, 243, 0.3);
          position: absolute;
          left: 0;
          top: 4px; }
      .content .top .title h3, .content .top .title p {
        position: relative;
        z-index: 9; }
  @media screen and (min-width: 320px) and (max-width: 767px) {
    .content {
      padding: 0.93rem 0.41rem 0; }
      .content .details {
        display: block;
        margin-top: 0.39rem; }
        .content .details .right {
          width: initial;
          margin-right: 0; }
          .content .details .right .item {
            display: block;
            width: initial;
            margin-right: 0; }
            .content .details .right .item .img {
              width: 2.45rem;
              height: 3.05rem; }
            .content .details .right .item .youb {
              width: 5.76rem;
              margin-left: 0.38rem; }
              .content .details .right .item .youb h3 {
                font-size: 0.36rem; }
              .content .details .right .item .youb p {
                font-size: 0.31rem;
                margin-bottom: 0.31rem; }
        .content .details .left {
          width: initial;
          margin-right: 0;
          height: 11.07rem;
          margin-left: 0;
          margin-bottom: 0.41rem; }
          .content .details .left .bottom {
            padding: 0.28rem 0.41rem; }
            .content .details .left .bottom h3 {
              font-size: 0.36rem; }
            .content .details .left .bottom p {
              font-size: 0.31rem; }
      .content .top {
        position: initial;
        margin-left: 0;
        text-align: center; }
        .content .top .title {
          width: 5.16rem;
          padding-top: 0.44rem;
          line-height: 0.16rem;
          text-align: center;
          display: inline-block; }
          .content .top .title h3 {
            font-size: 0.49rem;
            margin-bottom: 5px; }
          .content .top .title p {
            padding-left: 0.5rem;
            font-size: 0.28rem;
            display: inline-block;
            margin-top: 0.19rem; }
            .content .top .title p::before {
              width: 0.13rem;
              height: 0.13rem;
              border: 0.08rem solid rgba(105, 209, 243, 0.3);
              top: -0.05rem; }
          .content .top .title::before {
            font-size: 1.5rem;
            top: 0.54rem;
            left: 0;
            width: 5.55rem; } }
  @media screen and (min-width: 768px) and (max-width: 1180px) {
    .content {
      padding-top: 190px; }
      .content .details {
        display: block;
        padding: 0 46px;
        margin-top: 0; }
        .content .details .left {
          width: initial;
          height: 845px;
          margin: 0 0; }
          .content .details .left .bottom h3 {
            font-size: 26px;
            margin-bottom: 4px; }
          .content .details .left .bottom p {
            font-size: 21px; }
        .content .details .right {
          width: initial;
          margin-right: 0; }
          .content .details .right .item {
            width: initial;
            display: flex;
            align-items: center;
            margin-right: 0;
            margin-bottom: 0;
            margin-top: 36px; }
            .content .details .right .item .img {
              width: 187px;
              height: 232px; }
            .content .details .right .item .youb {
              width: initial;
              flex: 1; }
              .content .details .right .item .youb h3 {
                font-size: 26px;
                margin-bottom: 21px; }
              .content .details .right .item .youb p {
                font-size: 21px; }
              .content .details .right .item .youb img {
                width: 32px; }
      .content .top .title {
        text-align: center;
        line-height: initial; }
        .content .top .title h3 {
          font-size: 31px;
          margin-bottom: 10px; }
        .content .top .title p {
          padding-left: 0.5rem;
          font-size: 21px;
          display: inline-block; }
          .content .top .title p::before {
            width: 0.13rem;
            height: 0.13rem;
            border: 0.08rem solid rgba(105, 209, 243, 0.3);
            top: 0.05rem; } }