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

body {
  position: relative;
  margin: 0;

  & > main {
    width: 100%;
    overflow-x: hidden;
  }
}

:root {
  --header-height: 90px;
  --header-bg-default: rgba(0, 0, 0, 0.4);
  --header-bg-none: rgba(255, 255, 255, 0.75);
  --header-bg: var(--header-bg-default);
  --header-padding: 0 160px;

  --nav-color-default: #fcfcfe;
  --nav-color-dark: #666666;
  --nav-color: var(--nav-color-default);

  --fp-nav-bg-default: #ffffff;
  --fp-nav-bg-dark: #666666;

  --fp-nav-bg: var(--fp-nav-bg-default);
}

#header {
  height: var(--header-height);
  background-color: var(--header-bg);
  position: fixed;
  width: 100vw;
  display: flex;
  align-items: center;
  padding: var(--header-padding);
  box-sizing: border-box;
  z-index: 1;
  transition: all 500ms ease-in-out;
  top: 0;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  #header_logo_img {
    height: 63px;
  }
}

#header .nav-box {
  height: var(--header-height);
}

#header #nav {
  --active-color: #4abc44;
  display: flex;
  align-items: center;
  padding: 0 72px;
  height: 100%;
  gap: 36px;

  a {
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    color: var(--nav-color);
    height: 100%;
    display: flex;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
    transition: all 500ms ease-in-out;

    white-space: nowrap;
  }

  a.is-active {
    border-top-color: var(--active-color);
    background-color: rgba(0, 0, 0, 0.02);
    color: var(--active-color);
    font-weight: bold;
  }
}

#header > .nav-opts {
  display: flex;
  align-items: center;
  gap: 58px;
  display: none;

  .select-box {
    --tw: 22px;
    position: relative;

    .select-title {
      color: var(--nav-color);
      width: var(--tw);
      text-align: center;

      &[data-value='zh'] {
        &::after {
          content: 'ZH';
        }
      }
      &[data-value='en'] {
        &::after {
          content: 'EN';
        }
      }
    }

    &:hover {
      .select-options {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        opacity: 1;
      }
    }

    .select-options {
      --w: 70px;
      position: absolute;
      display: none;
      opacity: 0;
      transition: all 0.3s ease-in-out;
      background-color: rgba(255, 255, 255, 0.9);

      left: calc(0px - var(--w) / 2 + var(--tw) / 2);
      width: var(--w);
      padding: 5px;

      .select-option {
        padding: 5px;
        text-align: center;
        margin: 2px 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

        &:hover {
          background-color: rgba(0, 0, 0, 0.2);
          color: #ffffff;
        }

        &.active {
          background-color: rgba(0, 112, 91, 0.6);
          color: #ffffff;
        }
      }
    }
  }

  img {
    --w: 22px;
    width: var(--w);
    height: var(--w);
  }
}

.btn-more,
.btn-show-detail {
  --w: 190px;
  --h: 52px;
  background-color: #00705c;
  color: #ffffff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--w);
  height: var(--h);

  border-radius: calc(var(--h) / 2);
  font-size: 16px;

  cursor: pointer;
}

.btn-more::before {
  content: '点击查看更多';
  display: block;
  padding-left: calc(var(--h) / 2);
}

.btn-show-detail::before {
  content: '点击查看详情';
  display: block;
  padding-left: calc(var(--h) / 2);
}

.btn-more::after {
  content: '+';
  font-size: 28px;
  font-weight: 900;
  user-select: none;
  width: var(--h);
  height: var(--h);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4ab344;
  border-radius: 50%;

  position: absolute;
  right: -1px;
}

.btn-show-detail::after {
  content: '';
  font-size: 28px;
  font-weight: 900;
  user-select: none;
  width: var(--h);
  height: var(--h);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4ab344;
  border-radius: 50%;

  position: absolute;
  right: -1px;
  background-image: url('../images/contact/tijiao.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

#index-main {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;

  a:has(.btn-more),
  a:has(.btn-show-detail) {
    display: block;
    text-decoration: none;
    width: fit-content;
  }
}

#index-main .index-item,
#footer .index-item {
  /* width: 100%; */
  height: 100dvh;
  overflow: hidden;
}

#index-main .index-item > .index-item-main,
#footer .index-item > .index-item-main {
  /* width: 100%; */
  --pd: 160px;
  margin-top: var(--header-height);
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 var(--pd);
  height: calc(100% - var(--header-height));
}

#fp-nav ul li a span {
  background-color: var(--fp-nav-bg);
}

#index-main .index-item[data-anchor='contact_us'],
#footer .index-item[data-anchor='contact_us'] {
  --toph: 520px;
  background-image: url('../images/home/lxbj.jpg');
  background-color: #093e36;
  background-size: 100% var(--toph);
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;

  .index-item-main {
    --pd-size: var(--pd);
    display: block;
    color: #ffffff;
    padding: 0 var(--pd-size);
    height: calc(100dvh - var(--header-height));
    box-sizing: border-box;
    position: relative;

    .contact-us-content {
      padding-top: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: calc(var(--toph) - var(--header-height));

      .contact-us-title {
        font-size: 36px;
        margin-bottom: 26px;
      }

      p {
        font-size: 22px;
        line-height: 42px;
        margin: 0;
      }

      .contact-us-opts {
        margin-top: 36px;
        display: flex;
        gap: 88px;
        flex-wrap: wrap;

        .contact-us-btn {
          display: flex;
          padding: 15px 30px;
          align-items: center;
          gap: 5px;
          border-radius: 30px;
          font-size: 24px;
          cursor: pointer;
          white-space: nowrap;

          &[data-btype='1'] {
            background-color: rgba(9, 62, 54, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.65);
          }

          &[data-btype='2'] {
            background-color: #046f5f;
            border: 1px solid #0de3c3;
          }

          & > *:has(img) {
            width: 32px;
            height: 32px;

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

    .contact-us-bottom {
      display: grid;
      grid-template-columns: auto 125px;
      height: fit-content;

      position: absolute;
      left: var(--pd-size);
      right: var(--pd-size);
      bottom: 0;

      & > div:first-child {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 20px;
      }

      .contact-us-line {
        display: flex;
        justify-content: space-between;

        &[data-index='1'] {
          margin-top: 42px;
        }

        .item-logo {
          font-size: 25px;
          display: flex;
          align-items: center;
          gap: 20px;
        }

        .item-nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          min-width: 800px;
          a {
            text-decoration: none;
            color: #ffffff;
          }
        }

        .text-item {
          display: flex;
          flex-direction: column;

          & > * {
            font-size: 18px;
            line-height: 2;

            &:first-child {
              font-size: 20px;
              font-weight: bold;
              margin-bottom: 20px;
            }
          }
        }

        .qrcode-item {
          display: flex;
          align-items: center;
          gap: 36px;
          font-size: 16px;
          --qsize: 140px;

          & > * {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 24px;

            img {
              width: var(--qsize);
              height: var(--qsize);
            }
          }
        }

        &.copyright {
          height: 100px;
          align-items: center;
          font-size: 16px;
          position: relative;

          & > div {
            display: flex;
            align-items: center;
            gap: 10px;

            :has(img) {
              display: flex;
              align-items: center;
              gap: 10px;

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

          .border-line {
            position: absolute;
            /* width: calc(100% + 2 * var(--pd)); */
            height: 1px;
            left: -160px;
            right: -160px;
            bottom: 100px;
            background-color: #20534c;
          }
        }
      }
    }

    .backto {
      position: absolute;
      width: var(--pd);
      top: calc(var(--toph) - var(--header-height));
      bottom: 0;
      right: 0;
      background-color: #046f5f;

      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      .backto-tip {
        user-select: none;
        transform: rotate(90deg);
        .backto-tip-content {
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          white-space: nowrap;
          user-select: none;

          & > svg {
            width: 40px;
            height: 40px;
            fill: #ffffff;
            transform: rotate(90deg);
          }
        }
      }
    }
  }
}

.content-page {
  --size: 28px;
  --color: #666666;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
  color: var(--color);

  user-select: none;

  font-size: 18px;

  & > * {
    height: var(--size);
  }

  svg {
    --s: 20px;
    width: var(--s);
    height: var(--s);
    fill: var(--color);
  }

  .page-prev,
  .page-next {
    --size: 22px;
    cursor: pointer;
    border-radius: 50%;
    width: var(--size);
    height: var(--size);
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      background-color: rgba(0, 0, 0, 0.3);

      svg {
        fill: #ffffff;
      }
    }
  }

  .page-num {
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 5px;
    padding: 0 10px;

    a {
      text-decoration: none;
      color: #000000;
    }

    .page-num-item {
      width: var(--size);
      height: var(--size);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;

      cursor: pointer;

      &.is-active {
        background-color: #38a073;
        color: #ffffff;
      }

      &:hover {
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
  }

  .page-total {
    margin: 0 15px;
  }

  .page-go {
    input {
      width: 50px;
      outline: none;
      font-size: 16px;
      border: none;
      height: calc(var(--size) - 5px);
      text-align: center;
      color: var(--color);
    }
  }
}