:root {
  --color-primary: #4f46e5;
  --color-secondary: #6b7280;
  --color-background: #f9fafb;
  --color-text: #111827;
  --color-border: #e5e7eb;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.row .col-1 {
  width: 0;
  flex: 1;
}

.toolbar {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 40px;
  box-sizing: border-box;
  padding: 0 40px;
}

.btn-home {
  display: inline-block;
  width: min(10vw, 10vh);
  aspect-ratio: 1/1;
  background-image: url('./btn-home-BR7YWbq_.png?v=21');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.btn-back {
  display: inline-block;
  width: min(10vw, 10vh);
  aspect-ratio: 1/1;
  background-image: url('./btn-back-BWQ01RGS.png?v=120');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.btn-home2 {
  display: inline-block;
  width: min(10vw, 10vh);
  aspect-ratio: 1/1;
  background-image: url('./btn-home-n-4EBQk2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.btn-back2 {
  display: inline-block;
  width: min(10vw, 10vh);
  aspect-ratio: 1/1;
  background-image: url('./btn-back-Cr0e_fNt.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.btn-home:hover,
.btn-back:hover,
.btn-home2:hover,
.btn-back2:hover {
  transform: scale(1.1);
}

.btn-home:active,
.btn-back:active,
.btn-home2:active,
.btn-back2:active {
  transform: scale(0.95);
}
.fade-enter-active {
  animation: fadeIn 1.5s ease forwards;
}
.fade-leave-active {
  animation: fadeOut 1s ease forwards;
}
@keyframes fadeIn {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@keyframes fadeOut {
from {
    opacity: 1;
}
to {
    opacity: 0;
}
}

.home[data-v-cb6ebb8e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("./main1-bg-D-if1BXf.jpg");
  background-size: cover;
  background-position: bottom center;
}
.logo[data-v-cb6ebb8e] {
  width: min(60vw, 70vh);
  aspect-ratio: 1645 / 403;
  background-image: url("./main1-logo-BF4Lw2Bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: max(10vh, 10px);
}
.btn-enter[data-v-cb6ebb8e] {
  display: block;
  aspect-ratio: 385 / 169;
  width: min(30vw, 24vh);
  height: auto;
  background-image: url('./main1-btn-enter-CLo7mnHd.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
  overflow: hidden;
  animation: ani-breath-cb6ebb8e 3s ease-in-out infinite;
  /* 禁止动画抖动 */
  transform-origin: center center;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.btn-enter[data-v-cb6ebb8e]:hover {
  animation-play-state: paused;
}
@keyframes ani-breath-cb6ebb8e {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1);
}
65% {
    transform: scale(1.1);
}
75% {
    transform: scale(0.92);
}
85% {
    transform: scale(1.05);
}
95% {
    transform: scale(0.95);
}
100% {
    transform: scale(1);
}
}

.guide[data-v-2ab96e28] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('./main2-bg-BXBmRYMV.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.logo[data-v-2ab96e28] {
  display: none;
  position: relative;
  aspect-ratio: 1/1;
  width: min(50vw, 50vh);
  background-image: url('./main2-logo-DmO6knF5.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  transform-origin: center;
  animation-fill-mode: forwards !important;
  animation: bubbleUp 0.8s 1 ease-in-out;
}
.logo .item[data-v-2ab96e28] {
  display: none;
  position: absolute;
  z-index: 3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
  transition: transform 0.3s ease;
}
.logo .item[data-v-2ab96e28]:hover {
  transform: scale(1.1);
}
.logo .item[data-v-2ab96e28]:active {
  transform: scale(0.9);
}
.logo .p1[data-v-2ab96e28] {
  width: 100%;
  aspect-ratio: 889 / 172;
  left: -90%;
  top: -10%;
  background-image: url('./main2-icon-1-Bk8_crp-.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.logo .p2[data-v-2ab96e28] {
  width: 110%;
  aspect-ratio: 894 / 192;
  left: 80%;
  top: -10%;
  background-image: url('./main2-icon-2-CnNK0Mki.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.logo .p3[data-v-2ab96e28] {
  width: 110%;
  aspect-ratio: 895 / 172;
  bottom: 40%;
  left: -120%;
  background-image: url('./main2-icon-3-D83lsVWI.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
}
.logo .p4[data-v-2ab96e28] {
  width: 110%;
  aspect-ratio: 889 / 182;
  bottom: 40%;
  left: 100%;
  background-image: url('./main2-icon-4-UkIMlGFc.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.logo .p5[data-v-2ab96e28] {
  aspect-ratio: 940 / 205;
  bottom: -10%;
  left: 80%;
  width: 114%;
  background-image: url('./main2-icon-5-B6G3HF4O.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.logo .p6[data-v-2ab96e28] {
  aspect-ratio: 938 / 211;
  width: 100%;
  left: -90%;
  bottom: -10%;
  background-image: url('./main2-icon-6-DsrGzVU4.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
}
.ani[data-v-2ab96e28] {
  animation: ani-bubble-2ab96e28 0.4s 1 ease-in-out;
}
@keyframes ani-bubble-2ab96e28 {
0% {
    opacity: 0;
    transform: scale(0.3) rotate(-10deg) translateY(40px);
}
70% {
    transform: scale(1.05) rotate(2deg) translateY(-5px);
}
100% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateY(0);
}
}