@property --hero-text-glitch-amount {
  initial-value: 0;
  inherits: true;
  syntax: '<number>';
}
:root {
  --hero-text-scroll-amount: 0vh;
  --hero-text-glitch-step: 0.15px;
  --hero-text-glitch-duration: 0.05s;
  --hero-text-glitch-min: 4;
  --hero-text-glitch-max: 40;
  --scroll-down-button-amount: -50%;
  --labels-rotation-start: 20;
  --labels-rotation-end: 90;
  --labels-transform-amount: 500;
  --default-transform-smoothness: 0.5s;
  --asterisk-rotation: 360deg;
  --default-parallax-smoothness: 0.1s;
  --default-parallax-amount: 40vh;
  --circles-smoothness: 3s;
  --circles-image-size: 9%;
  --circles-line-color: #D002B1;
  --circles-line-duration: 4s;
  --circles-line-delay: 0.5s;
}
html:after {
  content: "";
  display: block;
  position: relative;
  height: var(--hero-text-scroll-amount);
  pointer-events: none;
}
body {
  position: sticky;
  top: 0px;
}
.hero-banner > * > h1 {
  transition: --hero-text-glitch-amount var(--hero-text-glitch-duration) 0s;
  text-shadow: 0 calc(var(--hero-text-glitch-amount) * (var(--hero-text-glitch-step) * 1)) red,
    0 calc(var(--hero-text-glitch-amount) * (var(--hero-text-glitch-step) * 2)) orange,
    0 calc(var(--hero-text-glitch-amount) * (var(--hero-text-glitch-step) * 3)) yellow,
    0 calc(var(--hero-text-glitch-amount) * (var(--hero-text-glitch-step) * 4)) green,
    0 calc(var(--hero-text-glitch-amount) * (var(--hero-text-glitch-step) * 5)) blue,
    0 calc(var(--hero-text-glitch-amount) * (var(--hero-text-glitch-step) * 6)) indigo,
    0 calc(var(--hero-text-glitch-amount) * (var(--hero-text-glitch-step) * 7)) violet;
}
body.hero-banner-moved {
  transition: --hero-text-glitch-amount calc(var(--hero-text-glitch-delay) * 0.5);
}
.scroll-btn {
  animation: scroll-btn-animate 3.6s infinite ease;
}
@keyframes scroll-btn-animate {
  0%, 11% { transform: translateY(0); }
  22% { transform: translateY(var(--scroll-down-button-amount)); }
  27% { transform: translateY(0); }
  33% { transform: translateY(var(--scroll-down-button-amount)); }
  44%, 100% { transform: translateY(0); }
}
.talk-row > div {
  --rotation: 0;
  --transform-origin: 0%;
}
.talk-row > div > label {
  transition: transform var(--default-transform-smoothness) linear, transform-origin var(--default-transform-smoothness) linear;
  transform-origin: calc(50% + var(--transform-origin)) 50%;
  transform: calc((0deg * var(--rotation)) + 0deg);
}
.social-block .star-ic h3 {
  transition: transform var(--default-transform-smoothness) linear;
  --rotation: 0;
  transform: rotateZ(calc(var(--asterisk-rotation) * var(--rotation)));
  transform-origin: 50% 113px;
}
.vibe-wrp .vibe-block > .vide-imgbox,
.connect-across-wrp .row > div:nth-child(2),
.social-block .social-data p,
.talk-row .talk-mobilebox,
.talk-about-wrp h2,
.connect-across-data p,
.vibe-block h2,
.vibe-block p,
.private-group-wrp .private-data h2,
.private-group-wrp .private-data p,
.reply-block .replay-row ul li,
.reply-block .reply-title p,
.download-wrp .download-block {
  transition: margin-top var(--default-parallax-smoothness);
  margin-top: calc((1 - var(--parallax)) * var(--default-parallax-amount));
}
.social-block .social-data p,
.connect-across-data p,
.vibe-block p,
.private-group-wrp .private-data p,
.private-group-wrp .private-img {
  opacity: calc(var(--parallax));
}
.private-group-wrp .private-data {
  position: relative;
  z-index: 1;
}
.reply-block .replay-row ul li:nth-child(2) {
  margin-top: calc((1 - var(--parallax)) * var(--default-parallax-amount) * 2);
}
.reply-block .replay-row ul li:nth-child(3) {
  margin-top: calc((1 - var(--parallax)) * var(--default-parallax-amount) * 3);
}
/* D: 966X621, M: 390X635 */
/* D: 966X621, M: 390X635 */
.make-friend-wrp figure {
  display: block;
  width: 100%;
  padding-top: calc((621 / 966) * 100%);
  position: relative;
}
.make-friend-wrp figure, .make-friend-wrp figure * {
  box-sizing: border-box;
}
.make-friend-wrp figure > img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  display: block;
  transform: translateX(-50%) translateY(-40%);
}
.make-friend-wrp figure {
  --left-1: 27%;
  --top-1: 12.6%;
  --left-2: 83%;
  --top-2: 7.6%;
  --left-3: 64%;
  --top-3: 23.6%;
  --left-4: 95%;
  --top-4: 46.6%;
  --left-5: 85%;
  --top-5: 91.6%;
  --left-6: 24%;
  --top-6: 91.6%;
  --left-7: 5%;
  --top-7: 69.6%;
  --left-8: 8%;
  --top-8: 35%;
  --line-1: linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), var(--circles-line-color) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%);
  --line-2: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), var(--circles-line-color) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%);
}
.make-friend-wrp figure[stack="2"] {
  --left-1: calc(27% - 6%);
  --top-1: calc(12.6% + 5%);
  --left-2: calc(83% + 8%);
  --top-2: calc(7.6% - 10%);
  --left-3: calc(64% + 10%);
  --top-3: calc(23.6% - 5%);
  --left-4: calc(95% - 12%);
  --top-4: calc(46.6% - 12%);
  --left-5: calc(85% + 5%);
  --top-5: calc(91.6% + 10%);
  --left-6: calc(24% + 25%);
  --top-6: calc(91.6% + 10%);
  --left-7: calc(5% + 10%);
  --top-7: calc(69.6% + 8%);
  --left-8: calc(8% + 18%);
  --top-8: calc(35% - 0%);
}
.make-friend-wrp figure > div {
  --multiplier: 1;
  position: absolute;
  width: calc(var(--multiplier) * var(--circles-image-size));
  padding-top: calc(var(--multiplier) * var(--circles-image-size));
  left: var(--left);
  top: var(--top);
  transform: translateX(-50%) translateY(-50%);
  background-color: #ffffff;
  background-image: var(--image);
  background-size: cover;
  border-radius: 50%;
  transition: left var(--circles-smoothness), top var(--circles-smoothness), width var(--circles-smoothness), padding-top var(--circles-smoothness);
}
.make-friend-wrp figure > div:nth-of-type(1) {
  --image: var(--image-1);
  --left: var(--left-1);
  --top: var(--top-1);
}
.make-friend-wrp figure > div:nth-of-type(2) {
  --image: var(--image-2);
  --left: var(--left-2);
  --top: var(--top-2);
  --multiplier: 1.1;
}
.make-friend-wrp figure > div:nth-of-type(3) {
  --image: var(--image-3);
  --left: var(--left-3);
  --top: var(--top-3);
  --multiplier: 0.96;
}
.make-friend-wrp figure > div:nth-of-type(4) {
  --image: var(--image-4);
  --left: var(--left-4);
  --top: var(--top-4);
  --multiplier: 1.2;
}
.make-friend-wrp figure > div:nth-of-type(5) {
  --image: var(--image-5);
  --left: var(--left-5);
  --top: var(--top-5);
  --multiplier: 1.2;
}
.make-friend-wrp figure > div:nth-of-type(6) {
  --image: var(--image-6);
  --left: var(--left-6);
  --top: var(--top-6);
  --multiplier: 1.15;
}
.make-friend-wrp figure > div:nth-of-type(7) {
  --image: var(--image-7);
  --left: var(--left-7);
  --top: var(--top-7);
  --multiplier: 1.15;
}
.make-friend-wrp figure > div:nth-of-type(8) {
  --image: var(--image-8);
  --left: var(--left-8);
  --top: var(--top-8);
  --multiplier: 1.1;
}
.make-friend-wrp figure > span {
  display: block;
}
.make-friend-wrp figure > span:before,
.make-friend-wrp figure > span:after {
  content: "";
  position: absolute;
  background-image: var(--line);
  z-index: -1;
  transition: left var(--circles-smoothness), top var(--circles-smoothness), width var(--circles-smoothness), height var(--circles-smoothness);
  opacity: 0.2;
  animation: line-animate var(--circles-line-duration) infinite;
}
/* 1 to 4 */
.make-friend-wrp figure > span:nth-of-type(1):before {
  left: var(--left-1);
  top: var(--top-1);
  width: calc(var(--left-4) - var(--left-1));
  height: calc(var(--top-4) - var(--top-1));
  --line: var(--line-1);
  animation-delay: calc(var(--circles-line-delay) * -1);
}
/* 1 to 5 */
.make-friend-wrp figure > span:nth-of-type(1):after {
  left: var(--left-1);
  top: var(--top-1);
  width: calc(var(--left-5) - var(--left-1));
  height: calc(var(--top-5) - var(--top-1));
  --line: var(--line-1);
  animation-delay: calc(var(--circles-line-delay) * -2);
}
/* 2 to 6 */
.make-friend-wrp figure > span:nth-of-type(2):before {
  left: var(--left-6);
  top: var(--top-2);
  width: calc(var(--left-2) - var(--left-6));
  height: calc(var(--top-6) - var(--top-2));
  --line: var(--line-2);
  animation-delay: calc(var(--circles-line-delay) * -3);
}
/* 2 to 7 */
.make-friend-wrp figure > span:nth-of-type(2):after {
  left: var(--left-7);
  top: var(--top-2);
  width: calc(var(--left-2) - var(--left-7));
  height: calc(var(--top-7) - var(--top-2));
  --line: var(--line-2);
  animation-delay: calc(var(--circles-line-delay) * -4);
}
/* 3 to 6 */
.make-friend-wrp figure > span:nth-of-type(3):before {
  left: var(--left-6);
  top: var(--top-3);
  width: calc(var(--left-3) - var(--left-6));
  height: calc(var(--top-6) - var(--top-3));
  --line: var(--line-2);
  animation-delay: calc(var(--circles-line-delay) * -5);
}
/* 3 to 5 */
.make-friend-wrp figure > span:nth-of-type(3):after {
  left: var(--left-3);
  top: var(--top-3);
  width: calc(var(--left-5) - var(--left-3));
  height: calc(var(--top-5) - var(--top-3));
  --line: var(--line-1);
  animation-delay: calc(var(--circles-line-delay) * -6);
}
/* 4 to 6 */
.make-friend-wrp figure > span:nth-of-type(4):before {
  left: var(--left-6);
  top: var(--top-4);
  width: calc(var(--left-4) - var(--left-6));
  height: calc(var(--top-6) - var(--top-4));
  --line: var(--line-2);
  animation-delay: calc(var(--circles-line-delay) * -7);
}
/* 5 to 8 */
.make-friend-wrp figure > span:nth-of-type(5):before {
  left: var(--left-8);
  top: var(--top-8);
  width: calc(var(--left-5) - var(--left-8));
  height: calc(var(--top-5) - var(--top-8));
  --line: var(--line-1);
  animation-delay: calc(var(--circles-line-delay) * -8);
}
/* 8 to 2 */
.make-friend-wrp figure > span:nth-of-type(8):before {
  left: var(--left-8);
  top: var(--top-2);
  width: calc(var(--left-2) - var(--left-8));
  height: calc(var(--top-8) - var(--top-2));
  --line: var(--line-2);
  animation-delay: calc(var(--circles-line-delay) * -9);
}
@keyframes line-animate {
  0%, 20% { opacity: 0.2; }
  30%, 60% { opacity: 0.5; }
  70% { opacity: 0.5; }
  80%, 100% { opacity: 0.2; }
}

@media (max-width: 767px) {
  body {
    --circles-image-size: 13%;
  }
  .social-block .star-ic h3 {
    transform-origin: 50% 40px;
  }
  .make-friend-wrp figure {
    padding-top: calc((635 / 390) * 100%);
  }
}

.marquee-show {
  color: black;
  opacity: 1;
  transition: all 1s ease;
}

.marquee-fade {
  color: black;
  opacity: 0;
  transition: all 1s ease;
}