@import url('s768/contact.css');

#header {
  --header-bg: var(--header-bg-none);
  --nav-color: var(--nav-color-dark);
}

#contact-main {
  --pd: 160px;
  .top-wrapper {
    background-image: url('../images/contact/banner_lxwm.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-top: var(--header-height);
    box-sizing: border-box;
    aspect-ratio: 1920/700;

    display: flex;

    font-size: 24px;

    .top-left {
      padding-left: var(--pd);
      padding-right: calc(var(--pd) / 2);
      padding-top: 95px;
      background-color: rgba(0, 112, 91, 0.4);
      max-width: calc(50% - 40px);
      box-sizing: border-box;

      color: #ffffff;

      .title {
        display: flex;
        align-items: flex-end;
        gap: 28px;
        margin-bottom: 60px;

        .title-main {
          font-size: 56px;
          font-weight: bold;
        }
      }

      .desc {
        display: flex;
        flex-direction: column;
        line-height: 1.8;
        p {
          margin: 0;
        }
      }
    }

    .top-right {
      flex-grow: 1;
      padding: 0 200px;
      padding-top: 85px;
      background-color: rgba(255, 255, 255, 0.6);
      --item-h: 60px;

      & > form.form {
        --color: #093e36;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: var(--color);

        .form-item {
          display: flex;
          align-items: start;
          gap: 24px;

          & > *:first-child {
            display: block;
            padding: 2px;
            width: 50px;
            flex-shrink: 0;
            margin-top: 10px;
          }

          & > *:last-child {
            flex-grow: 1;
            width: calc(100% - 50px);
          }

          & > input,
          & > textarea {
            height: var(--item-h);
            outline: none;
            border: none;
            border-radius: 10px;
            font-size: 24px;
            padding: 0 32px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            color: var(--color);
          }

          & > textarea {
            height: 90px;
            padding: 10px 32px;
            resize: none;
          }

          & input[type='radio'] {
            display: none;
          }

          .radio-group {
            flex-grow: 1;
            height: var(--item-h);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;

            .radio-group-item {
              display: flex;
              flex-grow: 1;
              justify-content: center;
              align-items: center;

              background-color: #ffffff;
              border-radius: 10px;
              border: 1px solid #00705c;
              cursor: pointer;
              user-select: none;
              overflow: hidden;

              & > label {
                cursor: pointer;
                display: block;
                width: 100%;
                line-height: var(--item-h);
                text-align: center;
              }

              &:has(:checked) {
                background-color: #046f5f;
                color: #ffffff;
              }
            }
          }

          .form-item-tip {
            font-size: 12px;
            padding: 2px 0;
            color: #000000;

            a {
              text-decoration: none;
              color: #046f5f;
            }

            a:hover {
              text-decoration: underline;
            }
          }

          &.form-opts {
            & button {
              height: var(--item-h);
              display: flex;
              gap: 18px;
              align-items: center;
              background-color: #046f5f;
              border-radius: 30px;
              border: 1px solid #0de3c3;

              padding: 0 32px;

              font-size: 24px;
              color: #ffffff;
              line-height: var(--item-h);

              cursor: pointer;
              user-select: none;

              & img {
                height: 24px;
              }
            }
          }
        }
      }
    }

    .top-bottom {
      --h: 120px;
      position: absolute;
      width: calc(100% - var(--pd) * 2);
      height: var(--h);
      bottom: calc(45px - var(--h));
      display: flex;
      justify-content: space-between;
      margin: 0 var(--pd);
      box-sizing: border-box;
      z-index: 1;
      background-color: #ffffff;
      padding: 0 60px;
      overflow: hidden;

      box-shadow:
        -5px -5px 5px rgba(0, 0, 0, 0.05),
        5px 5px 5px rgba(0, 0, 0, 0.05);

      .bottom-item {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 18px;
        color: #000000;
        white-space: nowrap;

        img {
          width: 60px;
          height: 60px;
        }

        .desc-title {
          margin-bottom: 10px;
        }

        .desc-content {
          font-size: 22px;
          color: #00705c;
        }
      }
    }
  }

  .content-wrapper {
    position: relative;
    height: 400px;

    #container {
      width: 100%;
      height: 100%;
    }
  }
}