:root {
  --color-bg1: rgb(8, 10, 15);
  --color-bg2: rgb(0, 17, 32);
  --color1: 18, 113, 255;
  --color2: 107, 74, 255;
  --color3: 100, 100, 255;
  --color4: 50, 160, 220;
  --color5: 80, 47, 122;
  --color-interactive: 140, 100, 255;
  --circle-size: 80%;
  --blending: hard-light;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.wrap {
  height: 100%;
}

img {
  display: block;
}

#pc {
  height: 100%;
  overflow: hidden;
  position: relative;
}

#pc .video {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}

#pc .video .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

#pc .video .cover .top-logo {
  box-sizing: border-box;
  padding: 9.4270vw 0 0;
}

#pc .video .cover .top-logo img {
  width: 47.5520vw;
  margin: 0 auto;
}

#pc .video .cover .ori {
  font-weight: 400;
  font-size: 1.8229vw;
  line-height: 1.8229vw;
  color: #FFFFFF;
  text-align: center;
}

#pc .video .cover .party {
  font-weight: normal;
  font-size: 2.0833vw;
  line-height: 2.0833vw;
  color: #FFFFFF;
  font-style: italic;
  margin-top: 1.5625vw;
  text-align: center;
}

#pc .video .cover .arrow {
  margin-top: 0.520833vw;
  cursor: pointer;
}

#pc .video .cover .arrow img {
  width: 9.16666vw;
  margin: 0 auto;
}

#pc .indulge-body {
  height: 100%;
  overflow: hidden;
  position: relative;
  background-image: url('../../img/index/bg2.png');
  background-size: 100% 100%;
}

#pc .indulge {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-sizing: border-box;
  padding-top: 3.333333vw;
  height: 100%;
  display: none;
  opacity: 0;
  transition: all 0.3s;
}

#pc .indulge .title {
  color: #eeede7;
  font-family: Reey;
  font-size: 2.083333vw;
  text-align: center;
}

#pc .mr {
  margin-right: 1.04166vw;
}

#pc .indulge .title span {
  padding: 0;
  color: #E4CAA0;
  text-shadow: 0 0 0.52083vw #eeede7,
    0 0 15.625vw #eeede7;
}

#pc .indulge .title .shadow {
  color: #fff;
}

#pc .indulge .content {
  display: flex;
  justify-content: space-between;
  margin-top: 3.33333vw;
  height: 37.86458vw;
  position: relative;
}

#pc .indulge .content .card {
  animation: flicker 2s infinite;
  width: 6.71875vw;
  height: 9.58333vw;
  background-color: #0E1621;
  border-radius: 3.125vw;
  position: absolute;
  top: 2.6041vw;
  left: 21.197916vw;
  transition: all 0.3s;
}

#pc .indulge .content .card:nth-of-type(2) {
  left: 46.640625vw;
}

#pc .indulge .content .card:nth-of-type(3) {
  left: 72.2916666vw;
}

#pc .indulge .content .card .icon {
  position: absolute;
  top: 3.2552vw;
  left: 1.82291vw;
  width: 3.07291vw;
  transition: all 0.3s;
}

#pc .indulge .content .card .card-title {
  font-weight: 400;
  font-size: 1.5625vw;
  color: #D9CEA1;
  line-height: 1.5625vw;
  background: linear-gradient(103deg, #F6BF75 0%, #D77185 35.009765625%, #8766AC 64.990234375%, #4150B1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  top: 13.3854vw;
  left: 50%;
  transform: translate(-50%, 0);
  white-space: nowrap;
  transition: all 0.3s;
}

#pc .indulge .content .card .info {
  width: 20vw;
  font-weight: bold;
  font-size: 1.45833vw;
  color: #D9CEA1;
  line-height: 2.2vw;
  text-align: center;
  position: absolute;
  top: 6.5625vw;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
  transition: all 0.6s;
}

#pc .indulge .content .card .info a {
  color: #D9CEA1;
}

#pc .indulge .content .card1:hover {
  width: 27.604166vw;
  height: 21vw;
  border-radius: 1vw;
  top: 0;
  left: 10.75520vw;
}

#pc .indulge .content .card2:hover {
  width: 27.604166vw;
  height: 35vw;
  border-radius: 1vw;
  top: 0;
  left: 36.19791vw;
}

#pc .indulge .content .card3:hover {
  width: 27.604166vw;
  height: 20vw;
  border-radius: 1vw;
  top: 0;
  left: 61.8489vw;
}

#pc .indulge .content .card:hover .icon {
  width: 1.7708vw;
  top: 2.2395vw;
  left: 8.22916vw;
}

#pc .indulge .content .card:hover .card-title {
  top: 2.7083vw;
  left: 10.98958vw;
  transform: translate(0, 0);
}

#pc .indulge .content .card1:hover .card-title {
  top: 2.4083vw;
}

#pc .indulge .content .card3:hover .card-title {
  top: 2.4083vw;
}

#pc .indulge .content .card:hover .info {
  opacity: 1;
}

#pc .indulge .content .card .info span {
  font-family: AbhayaLibreRegular;
}

@keyframes flicker {
  0% {
    box-shadow: 0 0 0.26041vw rgba(255, 255, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 1.30208vw rgba(255, 255, 255, 1);
  }

  100% {
    box-shadow: 0 0 0.26041vw rgba(255, 255, 255, 0.3);
  }
}

#pc .swiper-container {
  height: 100%;
  width: 100%;
  cursor: auto !important;
}

#pc .swiper-container .swiper-wrapper {
  height: 100%;
  width: 100%;
}

#pc .swiper-container .swiper-wrapper .swiper-slide {
  height: 100%;
  width: 100%;
  position: relative;
}

#pc .switch {
  position: fixed;
  width: 3.0208vw;
  bottom: 2.08333vw;
  right: 1.041666vw;
  z-index: 9999;
  cursor: pointer;
}

#pc .pre {
  bottom: 6.14583vw;
  display: none;
}

#pc .about-body {
  height: 100%;
  overflow: hidden;
  /* opacity: 0; */
}

#pc .about {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: flex;
}

#pc .about .left {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 8.125vw;
  margin-right: 5.78125vw;
}

#pc .about .left img {
  width: 100%;
}

#pc .about .left .img1 {
  width: 14.4791vw;
  margin-right: 1.61458vw;
}

#pc .about .left .img2 {
  width: 20.78125vw;
}

#pc .about .right {
  width: 39.79166vw;
  padding-top: 6.77083vw;
}

#pc .about .right .title {
  width: 19.6875vw;
  height: 11.979166vw;
  background-image: url(../../img/index/circle.png);
  background-size: 100% 100%;
  margin: 0 auto;
  margin-bottom: 3.125vw;
}

#pc .about .right .info {

  font-weight: 400;
  font-size: 1.458333vw;
  color: #FFFFFF;
  line-height: 2.60416vw;
  font-family: AbhayaLibreRegular;
  text-align: center;
}

@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveVertical {
  0% {
    transform: translateY(-50%);
  }

  50% {
    transform: translateY(50%);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }

  50% {
    transform: translateX(50%) translateY(10%);
  }

  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}


.gradient-bg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  top: 0;
  left: 0;
}

.svgBlur {
  display: none;
}

.noiseBg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: soft-light;
  opacity: 0.3;
}

.gradients-container {
  filter: url(#goo) blur(40px);
  width: 100%;
  height: 100%;
}

.g1 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: center center;
  animation: moveVertical 30s ease infinite;

  opacity: 1;
}

.g2 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: calc(50% - 400px);
  animation: moveInCircle 20s reverse infinite;

  opacity: 1;
}

.g3 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2 + 200px);
  left: calc(50% - var(--circle-size) / 2 - 500px);

  transform-origin: calc(50% + 400px);
  animation: moveInCircle 40s linear infinite;

  opacity: 1;
}

.g4 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);

  transform-origin: calc(50% - 200px);
  animation: moveHorizontal 40s ease infinite;

  opacity: 0.7;
}

.g5 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: calc(var(--circle-size) * 2);
  height: calc(var(--circle-size) * 2);
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));

  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: moveInCircle 20s ease infinite;

  opacity: 1;
}

.interactive {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);

  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;

  opacity: 0.7;
}

#pc .footer {
  height: 100%;
  background-color: #050A11;
  box-sizing: border-box;
  padding-bottom: 50px;
  /* opacity: 0; */
}

#pc .footer img {
  width: 100%;
}

#pc .footer .foot {
  font-weight: 400;
  font-size: 1.6666vw;
  color: #FFFFFF;
  line-height: 3.64583vw;
  text-align: center;
}

#pc .footer .foot-menu {
  height: calc(100% - 3.64583vw);
}

#pc .footer .foot-menu .swiper-container-footer {
  height: 34.01041vw;
}

#pc .footer .foot-menu .process {
  background-color: rgba(217, 206, 161, 0.5);
  width: 62.5vw;
  height: 0.053vw;
  margin: 0 auto;
  position: relative;
  margin-top: 4.6875vw;
}

#pc .footer .foot-menu .process div {
  transition: all 0.3s;
  position: absolute;
  top: -0.104166vw;
  height: 0.260416vw;
  left: 0;
  width: 25%;
  background: #D9CEA1;
}

#pc .footer .menu-text {
  margin-top: 4.2916vw;
  color: #D9CEA1;
  font-size: 1.77083vw;
  font-family: AbhayaLibreRegular;
  display: flex;
  justify-content: center;
}

#pc .footer .menu-text div {
  line-height: 2.8125vw;
  padding: 0 1.5625vw;
  cursor: pointer;
}

/* #pc .footer .swiper-container-footer {
  width: 100%;
} */
#pc .footer .swiper-container-footer .swiper-slide {
  width: 100% !important;
}

.logo-icon {
  width: 2vw;
  display: inline-block;
  position: relative;
  top: 0.7vw;
  margin-right: 0.5vw;
}