:root {
  --danger: #ff6868;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-width: 320px;
  background: #050606;
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
}

body { overflow-x: auto; }

.shot-page {
  position: relative;
  width: 1672px;
  max-width: 100%;
  margin: 0 auto;
  background: #050606;
}

.shot-page > img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.hotspot,
.hero-hotspot,
.nav-hot {
  position: absolute;
  z-index: 5;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
}

.hot-home { left: 2.5%; top: 0; width: 13.7%; height: 8.5%; }

.nav-hot {
  top: 2.23%;
  width: 6.58%;
  height: 4.25%;
  text-indent: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.nav-business { left: 19.50%; }
.nav-merchants { left: 28.44%; }
.nav-access { left: 36.84%; }
.nav-query { left: 45.60%; }
.nav-contact { left: 53.98%; }

.nav-hot,
.hot-home { z-index: 30; }

.nav-hot:focus-visible,
.hot-home:focus-visible {
  outline: 2px solid rgba(8, 201, 111, .85);
  outline-offset: -8px;
}

body.debug-hotspots .hotspot,
body.debug-hotspots .hero-hotspot {
  outline: 2px solid rgba(8, 201, 111, .85);
  background: rgba(8, 201, 111, .12);
}

.hero-access { left: 7.3%; top: 42.0%; width: 13.4%; height: 6.2%; }
.hero-query { left: 23.0%; top: 42.0%; width: 13.4%; height: 6.2%; }
.access-cta-hotspot { left: 63.5%; top: 81.4%; width: 11.2%; height: 5.4%; }

.copyright-cover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(5, 6, 6, .96);
  color: #a9aaa8;
  font-size: clamp(12px, 1vw, 16px);
  text-align: center;
}

.query-live {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.contact-live {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.contact-live input,
.contact-live textarea,
.contact-live select,
.contact-live button {
  position: absolute;
  border: 0;
  border-radius: 4px;
  color: transparent;
  background: transparent;
  font-family: inherit;
  font-size: clamp(12px, 1vw, 16px);
  outline: none;
  pointer-events: auto;
}

.contact-live input::placeholder,
.contact-live textarea::placeholder {
  color: transparent;
}

.contact-live select {
  appearance: none;
}

.contact-live input,
.contact-live textarea,
.contact-live select {
  caret-color: #f3f1ea;
}

.contact-live #contact-name { left: 51.6%; top: 34.1%; width: 34.5%; height: 4.8%; }
.contact-live #contact-phone { left: 51.6%; top: 40.1%; width: 34.5%; height: 4.8%; }
.contact-live #contact-type { left: 51.6%; top: 46.0%; width: 34.5%; height: 4.8%; }
.contact-live #contact-demand { left: 51.6%; top: 51.7%; width: 34.5%; height: 7.1%; padding-top: .7%; resize: none; }
.contact-live #contact-submit { left: 51.6%; top: 59.8%; width: 34.5%; height: 5.4%; cursor: pointer; color: transparent; }

.submit-message {
  position: absolute;
  left: 51.6%;
  top: 65.8%;
  width: 34.2%;
  min-height: 20px;
  color: #08c96f;
  font-size: clamp(12px, .95vw, 16px);
  text-align: center;
  pointer-events: none;
}

.contact-html-panel {
  position: absolute;
  left: 42.2%;
  top: 35.0%;
  width: 45.4%;
  height: 41.7%;
  z-index: 9;
  padding: 0;
  border: 1px solid rgba(210, 173, 98, .36);
  border-radius: 4px;
  background: linear-gradient(135deg, #111211, #080909);
  box-shadow: 0 18px 58px rgba(0, 0, 0, .34);
}

.contact-html-panel h2 {
  position: absolute;
  left: 24px;
  top: 16px;
  margin: 0;
  padding-left: 14px;
  border-left: 4px solid #08c96f;
  color: #f3f1ea;
  font-size: clamp(15px, 1.28vw, 21px);
  line-height: 1.2;
}

.contact-html-panel label {
  position: absolute;
  left: 24px;
  right: 24px;
  height: 39px;
  display: block;
  margin: 0;
  color: #f3f1ea;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 700;
}

.contact-html-panel label:nth-of-type(1) { top: 50px; }
.contact-html-panel label:nth-of-type(2) { top: 94px; }
.contact-html-panel label:nth-of-type(3) { top: 138px; }
.contact-html-panel label:nth-of-type(4) { top: 182px; height: 54px; }

.contact-html-panel label > span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.contact-html-panel input,
.contact-html-panel textarea {
  position: absolute;
  left: 134px;
  right: 0;
  width: auto;
  min-height: 39px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 4px;
  padding: 0 15px;
  color: #f3f1ea;
  background: #080909;
  font: inherit;
  font-size: clamp(12px, .88vw, 14px);
  outline: none;
}

.contact-html-panel textarea {
  min-height: 54px;
  padding-top: 10px;
  resize: none;
}

.contact-html-panel input:focus,
.contact-html-panel textarea:focus {
  border-color: rgba(8, 201, 111, .75);
  box-shadow: 0 0 0 3px rgba(8, 201, 111, .10);
}

.contact-html-panel .contact-submit {
  position: absolute;
  left: 158px;
  right: 24px;
  top: 246px;
  bottom: auto;
  width: auto;
  min-height: 42px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(180deg, #10c674, #078f52);
  font: inherit;
  font-size: clamp(13px, .98vw, 16px);
  font-weight: 700;
  cursor: pointer;
}

.contact-html-panel .submit-message {
  position: absolute;
  left: 158px;
  right: 24px;
  top: 286px;
  bottom: auto;
  width: auto;
  min-height: 0;
  margin: 0;
  color: #08c96f;
  font-size: clamp(12px, .95vw, 15px);
  text-align: center;
}

.contact-html-panel .submit-message.error {
  color: #ffc56d;
}

.contact-html-panel .submit-message:empty {
  display: none;
}

.custom-select {
  position: relative;
  left: 134px;
  width: calc(100% - 134px);
}

.custom-select-button {
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 4px;
  padding: 0 38px 0 15px;
  color: #f3f1ea;
  background: #080909;
  text-align: left;
  font: inherit;
  font-size: clamp(12px, .88vw, 14px);
  cursor: pointer;
}

.custom-select-button::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(243, 241, 234, .82);
  border-bottom: 1px solid rgba(243, 241, 234, .82);
  transform: translateY(-65%) rotate(45deg);
}

.custom-select-button:focus {
  border-color: rgba(8, 201, 111, .75);
  box-shadow: 0 0 0 3px rgba(8, 201, 111, .10);
  outline: none;
}

.custom-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  overflow: hidden;
  border: 1px solid rgba(8, 201, 111, .64);
  border-radius: 4px;
  background: rgba(8, 10, 10, .97);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .50);
}

.custom-options button {
  width: 100%;
  min-height: 34px;
  display: block;
  border: 0;
  padding: 0 15px;
  color: #f3f1ea;
  background: rgba(8, 10, 10, .97);
  text-align: left;
  font: inherit;
  font-size: clamp(12px, .88vw, 14px);
  cursor: pointer;
}

.custom-options button:hover,
.custom-options button:focus {
  background: rgba(8, 201, 111, .18);
  outline: none;
}

.query-live input,
.query-live button {
  position: absolute;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: clamp(12px, 1vw, 16px);
  pointer-events: auto;
}

.query-live input {
  left: 36.0%;
  width: 33.0%;
  height: 4.55%;
  padding: 0 1.4%;
  color: #f3f1ea;
  background: transparent;
  outline: none;
}

.query-live input::placeholder { color: transparent; }

#card-number { top: 32.45%; }
#card-password { top: 38.65%; }

.query-live button {
  left: 36.0%;
  top: 44.95%;
  width: 33.0%;
  height: 4.65%;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.query-live button:disabled { cursor: wait; }

.error-message {
  position: absolute;
  left: 36.0%;
  top: 53.6%;
  width: 33.0%;
  min-height: 20px;
  color: var(--danger);
  font-size: clamp(12px, .9vw, 15px);
  pointer-events: none;
}

.query-result {
  position: absolute;
  left: 19.15%;
  right: 19.15%;
  color: #deded8;
  font-size: clamp(12px, .95vw, 16px);
  text-align: center;
  pointer-events: none;
}

.account-row {
  top: 68.8%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.transaction-row {
  top: 86.2%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 760px) {
  .shot-page {
    width: 760px;
    max-width: none;
  }

}