body {
  margin: 0;
  padding: 0;
}

.brand-story-main{
  width: 100%;
  position: relative;
  background-color: rgb(255, 255, 255);
}

.brand-story-header {
  width: 100%;
  height: 23.23vw;
  display: flex;
  /* position: sticky;
  top: 0; */
  /* z-index: -98; */
}

.brand-story-header-font {
  width: 7.81vw;
  height: 2.50vw;
  margin-top: 1.82vw;
  margin-left: 4.69vw;
}

.brand-story-header-title {
  width: 53.44vw;
  font-size: 7.81vw;
  font-weight: bold;
  line-height: 7.29vw;
  /* align-self: flex-end; */
  align-self: center;
  margin-left: 16.77vw;
}


.brand-story-header-title :last-child {
  text-align: end;
}

.brand-story-header-font img,
.brand-story-header-log img {
  width: 100%;
  display: block;
}

.brand-story-header-log {
  width: 9.43vw;
  height: 11.15vw;
  margin-left: 2.76vw;
  /* align-self: flex-end; */
  align-self: center;

}

.brand-story-advertisement-banner {
  width: 100%;
  /* position: sticky;
  top: 0; */
  z-index: 2;
}

.brand-story-advertisement-banner img {
  width: 100%;
  display: block;
}

.brand-story-bar {
  width: 100%;
  height: 12.86vw;
  /* padding-top: 71px;
  padding-left: 98px; */
  font-size: 7.81vw;
  font-weight: bold;
  /* position: sticky;
  top: 0; */
  z-index: 3;
  color: #FF22B5;
  display: flex;
  align-items: center;
  background-color: #FAE453;
}

.brand-story-bar-text {
  /* padding-top: 71px; */
  
  padding-left: 5.10vw;
}

.mote-story {
  z-index: 3;
  display: flex;
  /* position: sticky;
  top: 0; */
  justify-content: space-between;
  /* padding: 9.74vw 10.42vw 7.27vw 6.82vw; */
  padding: 20vw 10.42vw 15vw 6.82vw;
  background-color: rgb(255, 255, 255);
}

.mote-story-left {

  width: 34.69vw;
  height: 16.72vw;
  /* display: flex; */
  font-size: 1.41vw;
  color: #8E8E8E;
  position: relative;

}

.mote-story-left img {
  width: 16.98vw;
  height: 12.76vw;
  display: block;
}

.mote-story-left .mote-story-1 {
  width: 24.69vw;
  bottom: 0.52vw;
  left: 9.48vw;
  text-align: center;
  position: absolute;
  /* align-self: flex-end; */

}

.mote-story-right img {
  width: 26.20vw;
  height: 22.40vw;
  display: block;
}

.mono-story {
  z-index: 4;
  display: flex;
  /* position: sticky;
  top: 0; */
  padding-top: 7.27vw;
  padding-left: 6.41vw;
  padding-right: 9.32vw;
  padding-bottom: 4.53vw;
  justify-content: space-between;
  background-color: rgb(255, 255, 255);
}

.mono-story-left {
  width: 31.25vw;
  height: 31.25vw;
  border-radius: 50%;
  position: relative;
  background-color: #FFE24A;

}

.mono-story-left img {
  /* width: 44.53vw;
  height: 32.03vw; */
  display: block;
  position: absolute;

}

.mono-story-left .log-1 {
  width: 20.83vw;
  height: 22.92vw;
  top: 0;
  right: -9.22vw;
  z-index: 0;
}

.mono-story-left .log-2 {
  width: 20.57vw;
  height: 22.92vw;
  top: 6.25vw;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
}

.mono-story-left .log-3 {
  width: 14.9vw;
  height: 16.77vw;
  top: 4.69vw;
  left: -4.06vw;
  z-index: 0;
}

@font-face {
  font-family: "AlimamaAgileVF";
  src: url("/static/font/AlimamaAgileVF-Thin.ttf");
}

.mono-story-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "AlimamaAgileVF";
}

.mono-story-title {
  font-size: 3.75vw;
  color: #000000;
  font-weight: bold;
  margin-bottom: 2.29vw;
}

.mono-story-text {
  font-size: 1.09vw;
  color: #8E8E8E;
}

.advertising-commentary {
  /* top: 0; */
  z-index: 5;
  display: flex;
  /* position: sticky; */
  position: relative;
  overflow: hidden;
  /* padding-top: 4.53vw; */
  padding-top: 20vw;

  padding-left: 9.43vw;
  padding-right: 4.58vw;
  /* padding-bottom: 5.94vw; */
  padding-bottom: 15vw;

  background-color: rgb(255, 255, 255);
}

.advertising-commentary-log {
  margin-right: 1.56vw;
}

.advertising-commentary-log img {
  width: 4.79vw;
  height: 5.89vw;
  display: block;
}

@font-face {
  font-family: "integralcf";
  src: url("/static/font/integralcf-regular.woff2.ttf");
}

.advertising-commentary-text {
  align-self: center;
}

.advertising-commentary-title {
  font-size: 2.97vw;
  color: #000000;
  font-weight: bold;
  font-family: "integralcf";

}

.advertising-commentary-message {

  font-size: 1.09vw;
  color: #8E8E8E;
  margin-top: 2.81vw;
  line-height: 1.72vw;
  font-family: "AlimamaAgileVF";

}

.advertisement-photo {
  width: 27.29vw;
  height: 35.89vw;
  margin-left: auto;
  position: relative;
}

.advertisement_photo_container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 调整列数 */
  grid-template-rows: repeat(5, 1fr); /* 调整行数 */
  overflow: hidden;
}

.tile_img {
  width: 100%;
  height: 100%;
  background-size: 27.29vw 35.89vw; /* 匹配容器大小 */
}

/* .advertisement-photo img:first-child {
  width: 100%;
  display: block;
} */

.ip-green {
  width: 3.39vw;
  height: 4.17vw;
  position: absolute;
  top: 1.93vw;
  left: 2.81vw;
}

.green-lump {
  width: 22.03vw;
  height: 16.67vw;
  position: absolute;
  left: 15.16vw;
  bottom: 1.09vw;
  z-index: -1;
}


.yellow-lump {
  width: 24.11vw;
  height: 18.33vw;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -10.52vw;
  margin: 0 auto;
}

.yellow-lump img {
  width: 100%;
  display: block;
}

.bottom-bar {
  max-width: 100%;
  height: 11.88vw;
  /* position: sticky;
  top: 0; */
  z-index: 6;
  display: flex;
  color: #FAE353;
  font-size: 7.81vw;
  font-weight: bold;
  text-align: center;
  padding-left: 5.10vw;
  background-color: #F633B4;
}


.brand-story-header-row {
  text-shadow: 0px 0px 0.89vw rgba(0, 0, 0, .3);
}

.brand-story-header-row.brand-story-header-row1 .char {
  animation: jump .4s linear infinite alternate;
  animation-delay: calc(-.8s + (var(--char-index)*.1s));
  animation-timing-function: ease-in-out;
}

.brand-story-header-row.brand-story-header-row2 .char {
  animation: jump2 .8s linear infinite alternate;
  animation-delay: calc(.2s + (var(--char-index)*.1s));
  animation-timing-function: ease-in-out;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(20%);
  }
}

@keyframes jump2 {
  0% {
    transform: scale(0.3);
  }

  100% {
    transform: scale(1.2);
  }
}




.brand-story-bar-text .char {
  line-height: 1;
  transform-origin: center bottom;
  animation-timing-function: cubic-bezier(.77,.02,.11,.97);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: calc(0.05s * var(--char-index)); /* You may need to adjust this value */
  animation-duration: calc( 0.2s + ( 0.03s * var(--char-total))); /* You may need to adjust this value */
}

.brand-story-bar-text:hover .char {
  animation-name: bounce-char;
}

@keyframes bounce-end {
  to { transform: translateY(0%) scale(1); }
}

@keyframes bounce-char {
  20% { transform: translateY(0%) scale(1.3, .8); }
  70% { transform: translateY(-40%) scale(.8, 1.2); }
}



.mote-story-animation .char {
  animation: slide-in 0.1s cubic-bezier(.3, 0, .7, 1) both;
  animation-delay: calc(30ms * var(--char-index));
}

@keyframes slide-in {
  from {
    transform: scale(0.4) translateY(80%);
    opacity: 0;
  }
}


/* .mono-story-2 .char {
	animation-duration: calc(var(--transition-speed) * 2);
	animation-fill-mode: both;
	animation-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
	animation-delay: calc((var(--char-index) * var(--transition-step)) * 1);
	animation-timing-function: var(--ease-elastic-5);
  animation-name: twirl;
}

@keyframes twirl {
	0% {
		opacity: 0;
		transform: translateY(200%) rotateY(0deg);
	}
	25% {
		opacity: 1;
	}
	100% {
		transform: translateY(0%) rotateY(360deg);
	}
} */


.mono-story-2 .char {
  animation: slide-in .15s cubic-bezier(.5, 0, .5, 1) both;
  animation-delay: calc(.25s + (20ms * var(--char-index)));
}

@keyframes slide-in {
  from {
    transform: translateX(-3em) translateY(-1.5em) rotate(-135deg) scale(0.5);
    opacity: 0;
  }
}



.mono-story-MONO .char {
  animation-name: rise;
  animation-duration: 3s;
  animation-delay: 0.125s; 
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: 50% 100%;
}

.mono-story-MONO .char::after {
  animation: ghost 3s ease-in calc(var(--distance-percent) * 0.125s) infinite; /* You may need to adjust this value */
  content: attr(data-char);
  opacity: 0;
  transform-origin: 100% 50%;
  visibility: visible;
}



@keyframes rise {
  40% {
    transform: 
      translateY(-40%)
      rotate(calc(var(--distance-sine) * 10deg)
    );
  }
  50% { transform: translateY( 6%); }
  55% { transform: translateY(-4%); }
  60% { transform: translateY( 2%); }
  65% { transform: translateY(-1%); }
  70% { transform: translateY( 0%); }
}

@keyframes ghost {
  8% {
    opacity: 0;
    transform: translateY(0); 
  }
  40% {
    opacity: 0.25;
    transform: 
      translateY(-30%)
      rotate(calc(var(--distance-sine) * -10deg)
    ); 
  }
  60%, 100% {
    opacity: 0;
    transform: translateY(-200%);
  }
}


.advertising-commentary-title .char,
.advertising-commentary-title .char:before,
.advertising-commentary-title .char:after {

  transition: color 0.2s linear;
  animation-duration: 0.6s, 0.4s;

  animation-iteration-count: infinite;
  animation-timing-function: steps(1);
  animation-delay: calc( -0.1s * var(--char-index) );
}


.advertising-commentary-title .char:before,
.advertising-commentary-title .char:after {
  visibility: visible;
  opacity: 0;
  mix-blend-mode: overlay;
  transition-property: opacity;
  animation-name: glitch-anim, glitch-bounce;
  animation-play-state: paused;
}

.advertising-commentary-title .char:before {
  color: #F85959;
  animation-delay: calc( -0.02s * var(--char-index) );
}

.advertising-commentary-title .char:after {
  color: #B7F5DE; 
  animation-delay: calc( -.5s * var(--char-index) );
}

.advertising-commentary-title:hover .char {
  color: rgb(255, 34, 180);
  animation-name: glitch-bounce;
}

.advertising-commentary-title:hover .char:before,
.advertising-commentary-title:hover .char:after {
  opacity: 1; animation-play-state: running;
}


@keyframes glitch-bounce {
  20% { transform: translate(-1%,0%); }
  40% { transform: translate(14%,-2%); }
  50% { transform: translate(-5%,5%); }
  65% { transform: translate(1%,-2%); }
  80% { transform: translate(-3%,2%); }
}

@keyframes glitch-anim {
  0% { clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%); }
  20% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
  40% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  60% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  80% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
}



.advertising-animation .char {
  animation: slide-in .6s cubic-bezier(.5, 0, .5, 1) both;
  animation-delay: calc(3ms * var(--char-index) + 100ms );
}


@keyframes slide-in {
  from {
    transform: translateY(1.5em);
    opacity: 0;
  }
}