@charset "UTF-8";
body {
  width: 19.2rem;
  opacity: 0; }

* {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  font-family: "PingFang SC Medium", "PingFang SC", "Microsoft YaHei", "寰蒋闆呴粦", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif; }

.flex {
  display: flex; }

ul {
  list-style: none; }

img {
  border: none; }

a {
  text-decoration: none;
  color: black; }

input, textarea {
  outline: none; }

.hide {
  display: none; }

@media screen and (max-width: 600px) {
  body {
    width: 7.5rem; } }
.contact-container {
  width: 15.55rem;
  margin: 0 auto;
  margin-bottom: 1.58rem; }
  .contact-container .location {
    justify-content: space-between; }
    .contact-container .location .map {
      width: 10.26rem;
      height: 5.74rem;
      background: url(../../images/test/map.png) no-repeat;
      background-size: 100% auto;
      position: relative; }
      .contact-container .location .map > div {
        position: absolute;
        width: .15rem;
        height: .15rem;
        background: rgba(210, 12, 24, 0.4);
        border-radius: 50%;
        cursor: pointer; }
        .contact-container .location .map > div.active .box {
          display: block; }
        .contact-container .location .map > div span {
          width: .09rem;
          display: inline-block;
          height: .09rem;
          background-color: #D20C18;
          border-radius: 50%;
          position: absolute;
          left: .03rem;
          top: .03rem; }
        .contact-container .location .map > div .box {
          display: none;
          position: absolute;
          right: -.08rem;
          transform: translateX(100%);
          padding: .11rem .11rem .12rem .17rem;
          width: .64rem;
          box-sizing: border-box;
          line-height: 1;
          top: -.12rem;
          font-size: .18rem;
          color: #fff;
          background: linear-gradient(90deg, #890001 0%, #D70C19 99%);
          border-radius: .04rem; }
          .contact-container .location .map > div .box::after {
            content: '';
            width: .07rem;
            height: .07rem;
            background: #890001;
            position: absolute;
            left: -.03rem;
            top: .17rem;
            transform: rotateZ(45deg); }
      .contact-container .location .map .bj0 {
        top: 31.5331010453%;
        left: 82.261208577%; }
      .contact-container .location .map .bj1 {
        top: 37.1080139373%;
        left: 12.6705653021%; }
      .contact-container .location .map .bj2 {
        top: 51.2195121951%;
        left: 82.7485380117%; }
      .contact-container .location .map .bj3 {
        top: 37.9790940767%;
        left: 84.0155945419%; }
      .contact-container .location .map .bj4 {
        top: 47.0383275261%;
        left: 81.8713450292%; }
      .contact-container .location .map .bj5 {
        top: 46%;
        left: 80%; }
    .contact-container .location .location-des {
      width: 4.48rem;
      color: #999999; }
      .contact-container .location .location-des > div {
        margin-bottom: .24rem; }
        .contact-container .location .location-des > div:last-child {
          margin-bottom: 0; }
        .contact-container .location .location-des > div.active .name {
          position: relative;
          color: #fff; }
          .contact-container .location .location-des > div.active .name::after {
            content: '';
            position: absolute;
            width: .06rem;
            height: .28rem;
            background: #D20C18;
            left: 0;
            top: 0; }
          .contact-container .location .location-des > div.active .name i {
            transform: rotateZ(180deg); }
        .contact-container .location .location-des > div.active .details {
          display: block; }
        .contact-container .location .location-des > div .name {
          cursor: pointer;
          position: relative;
          padding-bottom: .2rem;
          padding-left: .22rem;
          font-size: .24rem;
          line-height: 1;
          border-bottom: 0.01rem solid rgba(255, 255, 255, 0.1); }
          .contact-container .location .location-des > div .name i {
            position: absolute;
            left: 1.32rem;
            top: .04rem;
            line-height: 1;
            color: #D20C18;
            font-size: .2rem; }
        .contact-container .location .location-des > div .details {
          display: none;
          padding: .25rem .35rem .34rem .2rem;
          font-size: .24rem; }
          .contact-container .location .location-des > div .details p {
            margin-bottom: .25rem;
            font-size: .2rem; }
            .contact-container .location .location-des > div .details p:last-child {
              margin-bottom: 0; }
  .contact-container .qrcode {
    margin-top: .48rem; }
    .contact-container .qrcode > div:first-child {
      flex: 1; }
    .contact-container .qrcode .codes {
      box-sizing: border-box;
      width: 4.48rem;
      padding-left: .2rem; }
      .contact-container .qrcode .codes > div {
        margin-right: .42rem; }
        .contact-container .qrcode .codes > div:last-child {
          margin-right: 0; }
        .contact-container .qrcode .codes > div img {
          width: 1.42rem; }
        .contact-container .qrcode .codes > div p {
          font-size: .18rem;
          line-height: 1;
          color: #fff;
          margin-top: .24rem;
          text-align: center; }

@media screen and (max-width: 600px) {
  .contact-container .location {
    width: 100vw; }
    .contact-container .location .map {
      width: 100%; } }

/*# sourceMappingURL=about-contact.css.map */