.scroll-fade-up {
  transform: translateY(80rem);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.1s ease-out;
}
.in-view {
  transform: translate(0);
  opacity: 1;
}
.rem-container h1 {
  color: var(--Text-Primary, #000);
  font-size: 80rem;
  font-style: normal;
  font-weight: 700;
  line-height: 88rem;
}

.th h1,
.ru h1,
.pt h1,
.kr h1 {
  font-size: 60rem;
  line-height: 1.25;
}

.rem-container h2 {
  color: var(--Text-Primary, #000);
  font-size: 48rem;
  font-style: normal;
  font-weight: 700;
  line-height: 56rem;
}

.ebc-btn-large {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 48rem;
  padding: 0 24rem;
  gap: 8rem;
  border-radius: 24rem;
  background: var(--Brand-Secondary-Red, #a52933);
  color: var(--Text-Primary_White, #fff);
  text-align: center;
  font-size: 16rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}

.ebc-btn-large:hover {
  background: var(--Functional-Active-Hover, #cc333f);
  color: var(--Text-Primary_White, #fff);
}

.ebc-btn-large:active {
  background: var(--Functional-Active-Pressed, #7b1e26);
  color: var(--Text-Primary_White, #fff);
}

.ebc-btn-large .iconfont {
  font-size: 20rem;
  line-height: 1;
}
.ar .ebc-btn-large .iconfont {
  transform: rotate(180deg);
}

.section1 {
  height: 616rem;
}
.section1-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  gap: 50rem;
}

.section1 .h1-intro {
  margin-top: 24rem;
  color: var(--Text-Secondary, rgba(0, 0, 0, 0.64));
  font-size: 20rem;
  font-style: normal;
  font-weight: 400;
}

.section1-btn {
  margin-top: 96rem;
  padding: 0 24rem 0 30rem;
}
.section1-bg {
  width: 560rem;
  flex-shrink: 0;
}

.section2 {
  background: linear-gradient(180deg, #fafafa 0%, #fff 20%);
}
.section2-title,
.section3-title,
.section4-title {
  text-align: center;
}
.section2-inner,
.section3-inner,
.section4-inner {
  padding: 120rem 360rem;
}

.title-intro {
  margin-top: 24rem;
  color: var(--Text-Secondary, rgba(0, 0, 0, 0.64));
  text-align: center;
  font-size: 18rem;
  font-style: normal;
  font-weight: 400;
  line-height: 26rem;
}

.section2-content {
  margin-top: 80rem;
  padding: 38rem;
  border-radius: 20rem;
  background: var(--Neutral-BG_B, #f7f7f7);
  display: flex;
  justify-content: space-between;
  gap: 40rem;
}

.section2-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 64rem;
}

.section2-item-icon {
  width: 32rem;
}

.jp .section2-list{
    gap: 48rem;
}

.section2-item-title {
  margin-top: 12rem;
  color: var(--Text-Primary, #000);
  font-size: 20rem;
  font-style: normal;
  font-weight: 500;
  line-height: 26rem;
}
.section2-item-intro {
  margin-top: 12rem;
  color: var(--Text-Primary, #000);
  font-size: 14rem;
  font-style: normal;
  font-weight: 400;
  line-height: 22rem;
}

.section2-card {
  flex-shrink: 0;
  position: relative;
  height: 526rem;
  width: 730rem;
  padding: 68rem 46rem 60rem;
  border-radius: 16rem;
  background: #fff
    url("/ebc-static/image/activity/creator-incentives/section2_bg.png");
  background-size: 640rem 385rem;
  background-repeat: no-repeat;
  background-position: center;
}
.ar .section2-card {
  background: #fff
    url("/ebc-static/image/activity/creator-incentives/section2_bg_ar.png");
  background-size: 640rem 385rem;
  background-repeat: no-repeat;
  background-position: center;
}
.section2-card-box {
  position: absolute;
  left: 60rem;
  top: 70rem;
}
.ar .section2-card-box {
  left: unset;
  right: 60rem;
}

.section2-card-label {
  color: var(--Text-Primary, #000);
  font-size: 16rem;
  font-style: normal;
  font-weight: 500;
  line-height: 24rem;
}

.section2-card-actived-value {
  margin-top: 8rem;
  color: var(--Brand-Secondary-Red, #a52933);
  font-size: 48rem;
  font-style: normal;
  font-weight: 700;
  line-height: 48rem;
}
.section2-card-list {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: 100%;
}

.section2-card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 14.28%;
  /* height: 100%; */
}

.section2-card-item-value {
  margin-bottom: 15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28rem;
  padding: 0 12rem;
  color: var(--Text-Primary_White, #fff);
  background: #b8987a;
  font-size: 14rem;
  font-style: normal;
  font-weight: 400;
  border-radius: 6rem;
  transition: all 0.3s;
}

.section2-card-item-line {
  border-left: 1px dashed transparent;
  /* transform: translate(1px); */
  transition: all 0.3s;
}

.lv-1 .section2-card-item-line {
  height: 90rem;
}
.lv-2 .section2-card-item-line {
  height: 102rem;
}
.lv-3 .section2-card-item-line {
  height: 120rem;
}
.lv-4 .section2-card-item-line {
  height: 146rem;
}
.lv-5 .section2-card-item-line {
  height: 178rem;
}
.lv-6 .section2-card-item-line {
  height: 222rem;
}
.lv-7 .section2-card-item-line {
  height: 287rem;
}

.section2-card-item-dot {
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  border: 3px solid #b8987a;
  background-color: #fff;
  transition: all 0.3s;
}

.section2-card-item-level {
  margin-bottom: 32rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50rem;
  height: 26rem;
  border-radius: 13rem;
  color: var(--Brand-Secondary-Red, #a52933);
  background: var(--Neutral-BG_A, #fff);
  font-size: 14rem;
  font-style: normal;
  font-weight: 400;
  transition: all 0.3s;
}

.section2-card-item-actived .section2-card-item-value,
.section2-card-item:hover .section2-card-item-value {
  background: var(--Brand-Secondary-Red, #a52933);
}
.section2-card-item-actived .section2-card-item-dot,
.section2-card-item:hover .section2-card-item-dot {
  border-color: #a52933;
}
.section2-card-item-actived .section2-card-item-line,
.section2-card-item:hover .section2-card-item-line {
  border-left: 1px dashed #a52933;
}
.section2-card-item-actived .section2-card-item-level,
.section2-card-item:hover .section2-card-item-level {
  color: var(--Text-Primary_White, #fff);
  background: var(--Brand-Secondary-Red, #a52933);
}

.section2-card-tips {
  position: absolute;
  right: 48rem;
  bottom: 50rem;
  color: var(--Text-Tertiary, rgba(0, 0, 0, 0.48));
  font-size: 14rem;
  font-style: normal;
  font-weight: 400;
  line-height: 22rem;
}

.section3 {
  background: var(--Neutral-BG_B, #f7f7f7);
}

.section3-list {
  margin-top: 80rem;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.section3-item {
  display: flex;
  justify-content: space-between;
  padding: 28rem 40rem 32rem 40rem;
  flex-shrink: 0;
  width: 18.5%;
  height: 320rem;
  border-radius: 16rem;
  background: var(--Neutral-BG_A, #fff);
  overflow: hidden;
  transition: all 0.5s ease;
}
.section3-item-actived {
  padding: 28rem 28rem 32rem 40rem;
  width: 58.33%;
}

.section3-item-content {
  position: relative;
  max-width: 280rem;
}

.section3-item .icon-chevron_right {
  position: absolute;
  bottom: 0;
  font-size: 32rem;
  color: #c2c2c2;
}
.ar .section3-item .icon-chevron_right {
  transform: rotate(180deg);
}

.section3-item-title {
  margin-top: 16rem;
  color: var(--Text-Primary, #000);
  font-size: 24rem;
  font-style: normal;
  font-weight: 500;
  line-height: 36rem;
  transition: all 0.3s ease; /* 添加过渡效果 */
}
.ru .section3-item-title{
  font-size: 20rem;
  line-height: 1.3;
}

.section3-item-intro {
  display: none;
  margin-top: 16rem;
  color: var(--Text-Primary, #000);
  font-size: 14rem;
  font-style: normal;
  font-weight: 400;
  line-height: 22rem;
  /* max-height: 0;  */
  width: 280rem;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease; /* 过渡效果 */
}

.section3-item-img {
  flex-shrink: 0;
  width: 0;
  height: 0; /* 初始状态 */
  border-radius: 12rem;
  object-fit: cover;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease; /* 过渡效果 */
}

.section3-item-actived .section3-item-title {
  /* 可根据需要添加激活状态的标题样式 */
}

.section3-item-actived .section3-item-intro {
  /* max-height: 200rem; 设置足够大的值容纳内容 */
  opacity: 1;
  display: block;
}

.section3-item-actived .section3-item-img {
  height: 264rem; /* 恢复原始高度 */
  width: 264rem;
  opacity: 1;
}

.section3-item-actived .icon-chevron_right {
  opacity: 0;
  height: 0;
}

.section4-btn-box {
  margin-top: 40rem;
  display: flex;
  justify-content: center;
}
.section4-btn {
  padding: 0 48rem;
}

.section4-steps {
  margin-top: 64rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section4-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 363rem;
  padding: 0 50rem;
  height: 236rem;
  border-radius: 16rem;
  background: var(--Neutral-BG_B, #f7f7f7);
}
.pt .section4-step,
.es .section4-step,
.ru .section4-step,
.ug .section4-step,
.mn .section4-step {
  padding: 0 40rem;
  height: 256rem;
}

.section4-step-icon-box {
  flex-shrink: 0;
  margin-top: 48rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80rem;
  height: 80rem;
  border-radius: 50%;
  background-color: #fff;
}
.en .section4-step-icon-box {
  margin-top: 30rem;
}
.section4-step-icon {
  width: 40rem;
  height: 40rem;
}
.section4-step-title {
  margin-top: 24rem;
  color: var(--Text-Primary, #000);
  font-size: 24rem;
  font-style: normal;
  font-weight: 500;
  line-height: 34rem;
  text-align: center;
}

.section4-steps .icon-chevron_right {
  font-size: 32rem;
  color: #c2c2c2;
}
.ar .section4-steps .icon-chevron_right {
  transform: rotate(180deg);
}

.step1 {
  background-image: url("/ebc-static/image/activity/creator-incentives/1.png");
  background-repeat: no-repeat;
  background-size: 138rem 103rem;
  background-position: right bottom;
}

.step2 {
  background-image: url("/ebc-static/image/activity/creator-incentives/2.png");
  background-repeat: no-repeat;
  background-size: 138rem 103rem;
  background-position: right bottom;
}

.step3 {
  background-image: url("/ebc-static/image/activity/creator-incentives/3.png");
  background-repeat: no-repeat;
  background-size: 138rem 103rem;
  background-position: right bottom;
}

.section4-notice {
  margin-top: 64rem;
  padding: 48rem 40rem;
  border-radius: 16rem;
  background: var(--Neutral-BG_B, #f7f7f7)
    url("/ebc-static/image/activity/creator-incentives/notice.png");
  background-repeat: no-repeat;
  background-size: 444rem 77rem;
  background-position: right bottom;
}

.section4-tips {
  margin-top: 64rem;
  color: var(--Text-Quaternary, rgba(0, 0, 0, 0.24));
  text-align: left;
  font-size: 12rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal; 
}

.section4-notice-title {
  color: var(--Text-Primary, #000);
  font-size: 24rem;
  font-style: normal;
  font-weight: 500;
  line-height: 36rem;
}

.section4-notice-li {
  margin-top: 24rem;
  color: var(--Text-Secondary, rgba(0, 0, 0, 0.64));
  font-size: 14rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24rem;
}
.section4-notice-li a {
  color: var(--Text-Secondary, rgba(0, 0, 0, 0.64));
}
.section4-notice-li + .section4-notice-li {
  margin-top: 8rem;
}

@media (max-width: 996px) {
  .rem-container h1 {
    font-size: 64rem;
    font-weight: 700;
    line-height: 80rem;
    text-align: center;
  }
  .rem-container h2 {
    font-size: 48rem;
    font-style: normal;
    font-weight: 700;
    line-height: 72rem;
  }
  .ebc-btn-large {
    height: 96rem;
    border-radius: 48rem;
    font-size: 32rem;
    font-style: normal;
    font-weight: 500;
    line-height: 56rem;
    padding: 0 48rem;
    width: 100%;
  }

  .section1 {
    height: auto;
  }
  .section1-inner {
    padding-top: 80rem;
    padding-bottom: 112rem;
    flex-direction: column;
    gap: 16rem;
  }

  .section1-left {
    order: 2;
  }
  .section1-bg {
    width: 603rem;
    order: 1;
  }

  .ebc-btn-large .iconfont {
    font-size: 40rem;
  }

  .section1 .h1-intro {
    margin-top: 16rem;
    font-size: 28rem;
    line-height: 44rem;
    padding: 0 50rem;
    text-align: center;
  }

  .section2-content {
    margin-top: 80rem;
    padding: 0;
    flex-direction: column;
    background: none;
    gap: 100rem;
  }

  .title-intro {
    margin-top: 16rem;
    
    padding: 0 50rem;
    font-size: 24rem;
    font-style: normal;
    font-weight: 400;
    line-height: 40rem;
  }
  .jp .section2-list,
  .section2-list {
    order: 2;
    padding: 80rem 32rem;
    gap: 80rem;
    border-radius: 32rem;
    background: var(--Neutral-BG_B, #f7f7f7);
  }

  .section2-item {
    position: relative;
    padding-left: 80rem;
  }
  .ar .section2-item {
    padding-left: unset;
    padding-right: 80rem;
  }

  .section2-item-title {
    margin-top: 0;
    font-size: 36rem;
    font-weight: 500;
    line-height: 52rem;
  }
  .section2-item-intro {
    margin-top: 16rem;
    color: var(--Text-Secondary, rgba(0, 0, 0, 0.64));
    font-size: 28rem;
    font-weight: 400;
    line-height: 44rem;
  }

  .section2-item-icon {
    position: absolute;
    left: 0;
    top: 2rem;
    width: 56rem;
    height: 56rem;
  }
  .ar .section2-item-icon {
    left: unset;
    right: 0;
  }

  .section2-card {
    width: 686rem;
    height: 770rem;
    padding: 0;
    background: #fff
      url("/ebc-static/image/activity/creator-incentives/section2_bg_m.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }
  .ar .section2-card {
    background: #fff
      url("/ebc-static/image/activity/creator-incentives/section2_bg_m_ar.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
  }
  .section2-card-box {
    left: 0;
    top: 0;
  }
  /* .ru .section2-card-box{
    top: -30rem;
  } */

  .section2-card-label {
    font-size: 28rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .section2-card-actived-value {
    font-size: 72rem;
    line-height: 80rem;
  }

  .section2-card-item-level {
    height: 50rem;
    width: 75rem;
    border-radius: 25rem;
    font-size: 24rem;
  }
  .section2-card-item-dot {
    width: 30rem;
    height: 30rem;
  }

  .lv-1 .section2-card-item-line {
    height: 190rem;
  }
  .lv-2 .section2-card-item-line {
    height: 214rem;
  }
  .lv-3 .section2-card-item-line {
    height: 250rem;
  }
  .lv-4 .section2-card-item-line {
    height: 301rem;
  }
  .lv-5 .section2-card-item-line {
    height: 370rem;
  }
  .lv-6 .section2-card-item-line {
    height: 463rem;
  }
  .lv-7 .section2-card-item-line {
    height: 592rem;
  }
  .section2-card-item-value {
    color: #b8987a;
    font-size: 28rem;
    font-weight: 500;
    line-height: 44rem;
    background: none;
  }
  .section2-card-item-actived .section2-card-item-value,
  .section2-card-item:hover .section2-card-item-value {
    background: none;
    color: #a52933;
  }
  .section2-card-tips {
    left: 0;
    bottom: -40rem;
    font-size: 28rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
  }
  .ru .section2-card-tips{
    bottom: -60rem;
  }

  .section3-list {
    flex-direction: column;
    gap: 32rem;
  }

  .section3-item,
  .section3-item-actived {
    flex-direction: column;
    width: 100%;
    height: auto;
    border-radius: 32rem;
    padding: 56rem 32rem;
  }
  .section3-item-content {
    max-width: unset;
  }
  .section3-item-title {
    margin-top: 0;
    font-size: 36rem;
    font-weight: 500;
    line-height: 52rem;
  }
  .ru .section3-item-title{
    font-size: 36rem;
  }
  .section3-item .icon-chevron_right {
    display: none;
  }
  .section3-item-actived .section3-item-img,
  .section3-item-img {
    margin-top: 48rem;
    width: unset;
    height: unset;
    opacity: 1;
  }
  .section3-item-actived .section3-item-intro,
  .section3-item-intro {
    display: block;
    font-size: 28rem;
    font-weight: 400;
    line-height: 48rem;
    opacity: 1;
    max-height: unset;
    width: unset;
  }

  .section4-btn {
    width: auto;
    min-width: 330rem;
  }

  .section4-steps {
    margin-top: 80rem;
    flex-direction: column;
  }
  .pt .section4-step,
  .es .section4-step,
  .ru .section4-step,
  .ug .section4-step,
  .mn .section4-step,
  .section4-step {
    width: 100%;
    flex-direction: row;
    height: 224rem;
    gap: 32rem;
    background-size: 235rem 176rem;
    border-radius: 32rem;
  }
  .section4-step-icon-box {
    margin-top: 0;
    width: 96rem;
    height: 96rem;
  }
  .en .section4-step-icon-box {
    margin-top: 0;
  }
  .section4-step-icon {
    width: 48rem;
    height: 48rem;
  }
  .section4-step-title {
    margin-top: 0;
    font-size: 36rem;
    line-height: 52rem;
    text-align: left;
  }
  .ar .section4-steps .icon-chevron_right,
  .section4-steps .icon-chevron_right {
    font-size: 48rem;
    transform: rotate(90deg);
    margin: 8rem;
  }

  .section4-notice {
    margin-top: 160rem;
    padding: 80rem 32rem;
    border-radius: 32rem;
  }
  .section4-notice-title {
    text-align: center;
    font-size: 36rem;
    line-height: 52rem;
  }

  .section4-notice-li {
    margin-top: 32rem;
    font-size: 28rem;
    line-height: 48rem;
  }
  .section4-notice-li + .section4-notice-li {
    margin-top: 16rem;
  }

  .section4-tips{
    margin-top: 80rem;
    font-size: 24rem;
  }
}