:root {
  --screen-width: 1920px;
  --screen-height: 1080px;
  --screen-scale: 1;
  --screen-offset-x: 0px;
  --screen-offset-y: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: #000;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

.screen {
  position: relative;
  width: var(--screen-width);
  height: var(--screen-height);
  overflow: hidden;
  --map-scale: 1;
  --map-tx: 0px;
  --map-ty: 0px;
  transform: translate(var(--screen-offset-x), var(--screen-offset-y))
    scale(var(--screen-scale));
  transform-origin: 0 0;
}

.view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: opacity 600ms ease;
}

.view-national {
  opacity: 1;
}

.view-province {
  opacity: 1;
  pointer-events: none;
}

.view-province .ui-group {
  display: none;
}

.map-group {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.map-group {
  transform-origin: 0 0;
}

.view-national .map-group {
  transform: translate(var(--map-tx), var(--map-ty)) scale(var(--map-scale));
  transition: transform 600ms ease;
}

.view-province .map-group {
  opacity: 0;
  transition: opacity 300ms ease;
}

.screen.is-province .view-province .map-group {
  opacity: 1;
}

.screen.is-province .view-national .map-group {
  opacity: 0;
}

.ui-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.service-panel {
  position: absolute;
  left: 1496px;
  top: 105px;
  width: 410px;
  height: 589px;
  color: #dce8ff;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  pointer-events: auto;
}

.service-panel * {
  pointer-events: auto;
}

.service-title {
  position: relative;
  width: 410px;
  height: 35px;
  background: rgba(0, 41, 93, 0.6);
}

.service-title::before,
.service-title::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
}

.service-title::before {
  top: 1px;
  height: 1px;
  background: #003376;
}

.service-title::after {
  bottom: 1px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(0, 92, 130, 0),
    rgba(12, 110, 153, 0.08) 68.6%,
    rgba(107, 175, 255, 1) 85.97%,
    rgba(0, 59, 98, 0.26)
  );
}

.service-title-block {
  position: absolute;
  top: 0;
  height: 3px;
  background: #1868ff;
}

.service-title-block.left {
  left: 0;
  width: 14px;
}

.service-title-block.right {
  right: 0;
  width: 13px;
  background: #063e8a;
}

.service-title-glow {
  position: absolute;
  left: 0;
  top: 11px;
  width: 186px;
  height: 24px;
  opacity: 0.95;
}

.service-title-icon {
  position: absolute;
  left: 9px;
  top: 10px;
  width: 16px;
  height: 15px;
}

.service-title-text {
  position: absolute;
  left: 32px;
  top: 5px;
  font-size: 20px;
  line-height: 26px;
  color: #cde4ff;
  font-family: "YouSheBiaoTiHei", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.5px;
}

.service-grid {
  position: absolute;
  left: 0;
  top: 59px;
  display: grid;
  grid-template-columns: repeat(2, 202px);
  grid-auto-rows: 128px;
  gap: 6px;
}

.service-card {
  position: relative;
  width: 202px;
  height: 128px;
  text-decoration: none;
  color: inherit;
  background-repeat: no-repeat;
  background-size: 202px 128px;
}

.service-card.card-1 {
  background-image: url("assets/service-card-1.png");
}

.service-card.card-2 {
  background-image: url("assets/service-card-2.png");
}

.service-card.card-3 {
  background-image: url("assets/service-card-3.png");
}

.service-card.card-4 {
  background-image: url("assets/service-card-4.png");
}

.service-card.card-5 {
  background-image: url("assets/service-card-5.png");
}

.service-card.card-6 {
  background-image: url("assets/service-card-6.png");
}

.service-card.card-7 {
  background-image: url("assets/service-card-7.png");
}

.service-card.card-8 {
  background-image: url("assets/service-card-8.png");
}

.layer {
  position: absolute;
  display: block;
  user-select: none;
}

.guangdong-hotspot {
  position: absolute;
  left: 1035px;
  top: 760px;
  width: 130px;
  height: 95px;
  z-index: 999;
  cursor: zoom-in;
}

.screen.is-province .guangdong-hotspot {
  cursor: zoom-out;
}

.debug-panel {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 2000;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #9efcff;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  pointer-events: none;
  display: none;
}

.debug-on .guangdong-hotspot {
  outline: 2px dashed #ff57ff;
  outline-offset: 2px;
  background: rgba(255, 87, 255, 0.1);
}

.debug-on .debug-panel {
  display: block;
}

.layer-n-01 {
  left: 0.5px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 1;
}

.layer-n-02 {
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 2;
}

.layer-n-03 {
  left: 1363px;
  top: 816px;
  width: 109px;
  height: 164px;
  z-index: 3;
}

.layer-n-04 {
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 4;
}

.layer-n-05 {
  left: 10.5px;
  top: 1060px;
  width: 1900px;
  height: 18px;
  z-index: 5;
}

.layer-n-06 {
  left: 477px;
  top: 237px;
  width: 112px;
  height: 96px;
  z-index: 6;
}

.layer-n-07 {
  left: 518px;
  top: 379.5px;
  width: 817px;
  height: 459px;
  z-index: 7;
}

.layer-n-08 {
  left: 923px;
  top: 635.5px;
  width: 255px;
  height: 180px;
  z-index: 8;
}

.layer-n-09 {
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 274px;
  z-index: 9;
}

.layer-n-10 {
  left: 477px;
  top: 119px;
  width: 966px;
  height: 94px;
  z-index: 10;
}

.layer-n-11 {
  left: 14px;
  top: 466px;
  width: 410px;
  height: 199px;
  z-index: 11;
}

.layer-n-12 {
  left: 14px;
  top: 689px;
  width: 410px;
  height: 345px;
  z-index: 12;
}

.layer-n-13 {
  left: 648px;
  top: 926.14px;
  width: 626px;
  height: 110px;
  z-index: 13;
}

.layer-n-14 {
  left: 1496px;
  top: 105px;
  width: 410px;
  height: 589px;
  z-index: 14;
}

.layer-n-15 {
  left: 14px;
  top: 105px;
  width: 410px;
  height: 337px;
  z-index: 15;
}

.layer-n-16 {
  left: 448px;
  top: 833.844px;
  width: 188px;
  height: 201px;
  z-index: 16;
}

.layer-n-17 {
  left: 1496px;
  top: 741px;
  width: 410px;
  height: 293px;
  z-index: 17;
}

.layer-p-01 {
  left: 0.5px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 1;
}

.layer-p-02 {
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 2;
}

.layer-p-03 {
  left: 0px;
  top: 0px;
  width: 1730px;
  height: 1030px;
  z-index: 3;
}

.layer-p-04 {
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 4;
}

.layer-p-05 {
  left: 10.5px;
  top: 1060px;
  width: 1900px;
  height: 18px;
  z-index: 5;
}

.layer-p-06 {
  left: 477px;
  top: 237px;
  width: 112px;
  height: 96px;
  z-index: 6;
}

.layer-p-07 {
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 274px;
  z-index: 7;
}

.layer-p-08 {
  left: 694.2px;
  top: 437px;
  width: 709px;
  height: 268px;
  z-index: 8;
}

.layer-p-09 {
  left: 792.6px;
  top: 490px;
  width: 145px;
  height: 89px;
  z-index: 9;
}

.layer-p-10 {
  left: 477px;
  top: 119px;
  width: 966px;
  height: 94px;
  z-index: 10;
}

.layer-p-11 {
  left: 14px;
  top: 466px;
  width: 410px;
  height: 199px;
  z-index: 11;
}

.layer-p-12 {
  left: 14px;
  top: 689px;
  width: 410px;
  height: 345px;
  z-index: 12;
}

.layer-p-13 {
  left: 648px;
  top: 926.14px;
  width: 626px;
  height: 110px;
  z-index: 13;
}

.layer-p-14 {
  left: 1496px;
  top: 105px;
  width: 410px;
  height: 589px;
  z-index: 14;
}

.layer-p-15 {
  left: 14px;
  top: 105px;
  width: 410px;
  height: 337px;
  z-index: 15;
}

.layer-p-16 {
  left: 448px;
  top: 833.844px;
  width: 188px;
  height: 201px;
  z-index: 16;
}

.layer-p-17 {
  left: 1496px;
  top: 741px;
  width: 410px;
  height: 293px;
  z-index: 17;
}