.header, .header .header-box .header-nav .header-nav-item .header-nav-menu {
  background-color: rgba(10, 21, 45, 0.6); }

.main .banner {
  height: 36.458vw;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-left: 10.729vw;
  flex-direction: column; }
  .main .banner h3 {
    font-size: 2.708vw;
    margin-bottom: 1.250vw; }
  .main .banner p {
    width: 27.500vw;
    font-size: 1.250vw;
    text-shadow: 0px 2px 2px rgba(75, 98, 117, 0.3);
    font-family: PingFang SC-Regular, PingFang SC; }
  @media screen and (min-width: 320px) and (max-width: 767px) {
    .main .banner {
      padding: 0 0.77rem;
      height: 9.03rem; }
      .main .banner h3 {
        font-size: 0.49rem;
        margin-bottom: 0.31rem; }
      .main .banner p {
        width: 4.34rem;
        font-size: 0.31rem; } }
  @media screen and (min-width: 768px) and (max-width: 1180px) {
    .main .banner {
      height: 600px;
      padding: 82px 42px 0; }
      .main .banner h3 {
        font-size: 36px;
        margin-bottom: 20px; }
      .main .banner p {
        width: 294px;
        font-size: 21px; } }

.main .title {
  position: relative;
  z-index: 9; }
  .main .title h3 {
    font-size: 2.083vw;
    color: #69d1f3;
    margin-bottom: 0.208vw; }
  .main .title p {
    color: #9A9EA4;
    font-size: 1.042vw;
    padding-left: 1.563vw;
    position: relative;
    letter-spacing: 2px; }
    .main .title p::before {
      content: '';
      width: 0.417vw;
      height: 0.417vw;
      border-radius: 50%;
      border: 0.26vw solid rgba(105, 209, 243, 0.3);
      position: absolute;
      left: 0;
      top: 0.208vw; }
  @media screen and (min-width: 320px) and (max-width: 1180px) {
    .main .title {
      text-align: center;
      line-height: 0.45rem; }
      .main .title h3 {
        font-size: 0.49rem;
        margin-bottom: 5px; }
      .main .title p {
        padding-left: 0.5rem;
        font-size: 0.28rem;
        display: inline-block; }
        .main .title p::before {
          width: 0.13rem;
          height: 0.13rem;
          border: 0.08rem solid rgba(105, 209, 243, 0.3);
          top: 0.05rem; } }
  @media screen and (min-width: 768px) and (max-width: 1180px) {
    .main .title {
      line-height: initial; }
      .main .title h3 {
        font-size: 31px; }
      .main .title p {
        font-size: 21px; } }

.main .product {
  margin-top: 100px;
  text-align: center; }
  .main .product .title {
    display: inline-block; }
  .main .product .map {
    background-color: #fff;
    margin-top: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0; }
    .main .product .map .box {
      width: 1000px;
      height: 600px;
      margin: 0 auto;
      position: relative; }
      .main .product .map .box img {
        width: 100%; }
      .main .product .map .box .box-canvas {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0; }
  @media screen and (min-width: 320px) and (max-width: 767px) {
    .main .product .map {
      height: initial;
      padding: 0.41rem; }
      .main .product .map .box {
        width: 100%;
        height: 7.74rem; }
        .main .product .map .box img {
          width: 100%; } }

.main .field {
  margin-top: 5.208vw;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .main .field-right {
    margin-right: 9.375vw;
    position: relative; }
    .main .field-right .img1 {
      margin-right: calc(16.667vw - 9.375vw);
      width: 30.729vw; }
    .main .field-right .img2 {
      position: absolute;
      right: 0;
      bottom: 4.896vw;
      background-color: #fff;
      padding: 0.521vw;
      width: 20.521vw; }
      .main .field-right .img2 img {
        width: 100%; }
  .main .field-left {
    margin-left: 9.375vw; }
  .main .field .list {
    margin-top: 4.688vw; }
    .main .field .list .item {
      width: 35.417vw;
      padding: 1.146vw 1.354vw;
      display: flex;
      margin-bottom: 4.167vw;
      cursor: pointer;
      transition: all .5s; }
      .main .field .list .item:last-child {
        margin-bottom: 0; }
      .main .field .list .item .no {
        background: #D7D9DC;
        color: #7C848E;
        width: 3.958vw;
        height: 3.958vw;
        border-radius: 0.260vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Impact-Regular, Impact;
        margin-right: 1.563vw;
        font-size: 1.667vw;
        transition: all .5s; }
      .main .field .list .item h3 {
        font-size: 1.146vw;
        margin-bottom: 0.417vw; }
      .main .field .list .item p {
        width: 25.000vw;
        font-size: 0.938vw;
        color: #9A9EA4; }
      .main .field .list .item:hover {
        border-radius: 0.781vw;
        box-shadow: 0px 0.781vw 1.302vw 1px rgba(156, 167, 188, 0.2); }
        .main .field .list .item:hover .no {
          background-color: #69d1f3;
          color: #fff; }
  @media screen and (min-width: 320px) and (max-width: 1180px) {
    .main .field {
      display: block;
      margin: 0.77rem 0.41rem 0; }
      .main .field .field-left {
        margin-left: 0; }
        .main .field .field-left .list {
          display: none; }
      .main .field .field-right {
        margin-right: 0;
        margin-top: 0.52rem; }
        .main .field .field-right .img1 {
          width: 100%;
          margin-right: 0; }
        .main .field .field-right .img2 {
          width: 5.08rem;
          height: 4.46rem;
          padding: 0.13rem;
          bottom: 0;
          background-color: rgba(255, 255, 255, 0.8); }
          .main .field .field-right .img2 img {
            width: 100%;
            height: 100%; }
      .main .field .list {
        margin-top: 0.77rem; }
        .main .field .list .item {
          margin-bottom: 0.65rem;
          width: initial;
          padding: 0 0; }
          .main .field .list .item .no {
            width: 0.85rem;
            height: 0.85rem;
            font-size: 0.41rem;
            margin-right: 0.39rem; }
          .main .field .list .item h3 {
            font-size: 0.39rem; }
          .main .field .list .item p {
            width: 7.8rem;
            font-size: 0.31rem; }
          .main .field .list .item:hover {
            border-radius: 0.781vw;
            box-shadow: none; }
            .main .field .list .item:hover .no {
              background: #D7D9DC;
              color: #7C848E; } }
  @media screen and (min-width: 768px) and (max-width: 1180px) {
    .main .field .list .item h3 {
      font-size: 26px; }
    .main .field .list .item .no {
      width: 64px;
      height: 64px;
      font-size: 31px; }
    .main .field .list .item p {
      font-size: 21px; } }

.main .about-us {
  margin-top: 5.208vw;
  position: relative; }
  .main .about-us .top {
    position: absolute;
    top: 0;
    left: 50%; }
    .main .about-us .top .title {
      margin-left: -1.042vw;
      padding-top: 1.250vw;
      position: relative;
      width: 20.833vw; }
      .main .about-us .top .title h3, .main .about-us .top .title p {
        position: relative;
        z-index: 9; }
  .main .about-us .about-content {
    display: flex; }
    .main .about-us .about-content .about-us-left {
      margin-left: 9.375vw;
      position: relative;
      z-index: 10;
      width: 32.813vw; }
      .main .about-us .about-content .about-us-left img {
        width: 100%; }
    .main .about-us .about-content .about-us-right {
      margin-left: 6.250vw;
      margin-right: 9.375vw;
      position: relative; }
      .main .about-us .about-content .about-us-right .content {
        font-size: 0.938vw;
        margin-top: 9.375vw;
        color: #444;
        width: 41.667vw;
        white-space: pre-wrap; }
  @media screen and (min-width: 320px) and (max-width: 1180px) {
    .main .about-us {
      margin-top: 0.39rem; }
      .main .about-us .top {
        position: initial; }
        .main .about-us .top .title {
          width: 6.31rem;
          margin: 0 auto;
          padding-top: 0.54rem;
          line-height: 0.36rem; }
      .main .about-us .about-content {
        display: block; }
        .main .about-us .about-content .about-us-left {
          width: initial;
          margin: 0.39rem 0.41rem 0; }
          .main .about-us .about-content .about-us-left img {
            width: 100%; }
        .main .about-us .about-content .about-us-right {
          margin: 0.41rem; }
          .main .about-us .about-content .about-us-right .content {
            margin-top: 0;
            font-size: 0.36rem;
            width: initial; } }
  @media screen and (min-width: 768px) and (max-width: 1180px) {
    .main .about-us .top .title {
      line-height: initial; }
    .main .about-us .about-content .about-us-right .content {
      font-size: 21px; } }