.home,
.home * {
  box-sizing: border-box;
}
.home {
  background: #3f3f3f;
  height: 6313px;
  position: relative;
}
/*--------------*/
/*--------------*/
/*--------------*/
.main-4 {
  background: #000000;
  height: 2100px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 4891px;
  overflow: hidden;
}
.main-4-frame {
  width: 2000px;
  height: 2300px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0px;
  overflow: hidden;
}
.ho {
  width: 1427px;
  position: absolute;
  left: calc(50% - 715px);
  top: 1198px;
}
.hotexts {
  width: 649.27px;
  height: 418px;
  position: absolute;
  left: 609.73px;
  top: 212px;
}
.hotexts-2 {
  color: #d9d9d9;
  text-align: left;
  font-family: var(--var-sds-typography-body-font-family, "-", sans-serif);
  font-size: var(--var-sds-typography-body-size-medium, 16px);
  line-height: 140%;
  font-weight: 400;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 84px;
  width: 649.27px;
  height: 334px;
}
.hotexts-2-span {
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.hotexts-2-span2 {
  font-family: "Inter-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.hotexts-1 {
  color: #ffffff;
  text-align: left;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Bold",
    sans-serif
  );
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: 700;
  position: absolute;
  left: calc(50% - 324.63px);
  top: 0px;
  width: 111.81px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.hotexts-104 {
  width: 59.44px;
  height: 57.43px;
  position: absolute;
  left: 127.21px;
  top: 0.28px;
  object-fit: cover;
  aspect-ratio: 59.44/57.43;
}
.hotextsweb {
  background: #864770;
  border-radius: 71px;
  width: 58.43px;
  height: 58.43px;
  position: absolute;
  left: calc(50% - 122.88px);
  top: 0.29px;
  aspect-ratio: 1;
}
.hotextswebtexts {
  color: #ffffff;
  text-align: center;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Bold",
    sans-serif
  );
  font-size: 16px;
  line-height: 105%;
  letter-spacing: 0.05em;
  font-weight: 700;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  width: 76px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hophoto {
  width: 472px;
  height: 616.44px;
  position: absolute;
  left: 47px;
  top: -108px;
  overflow: visible;
}
.hotextsblock {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  width: 648px;
  height: 100px;
  position: absolute;
  left: calc(50% - 103.5px);
  bottom: 0px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}
.hotexts-vector {
  width: 22px;
  height: 24.4px;
  position: absolute;
  left: calc(50% - -194.5px);
  bottom: 10px;
  overflow: visible;
}
.chang {
  width: 1427px;
  position: absolute;
  left: calc(50% - 715px);
  top: 599px;
}
.changtexts {
  width: 649.27px;
  height: 418px;
  position: absolute;
  left: 175px;
  top: 200px;
}
.changtexts-2 {
  color: #d9d9d9;
  text-align: left;
  font-family: var(--var-sds-typography-body-font-family, "-", sans-serif);
  font-size: var(--var-sds-typography-body-size-medium, 16px);
  line-height: 140%;
  font-weight: 400;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 84px;
  width: 649.27px;
  height: 334px;
}
.changtexts-2-span {
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.changtexts-2-span2 {
  font-family: "Inter-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.changtexts-1 {
  color: #ffffff;
  text-align: left;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Bold",
    sans-serif
  );
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: 700;
  position: absolute;
  left: calc(50% - 324.63px);
  top: 0px;
  width: 111.81px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.changtexts-104 {
  width: 59.44px;
  height: 57.43px;
  position: absolute;
  left: 127.21px;
  top: 0.28px;
  object-fit: cover;
  aspect-ratio: 59.44/57.43;
}
.changtextsweb {
  background: #864770;
  border-radius: 71px;
  width: 58.43px;
  height: 58.43px;
  position: absolute;
  left: calc(50% - 122.88px);
  top: 0.29px;
  aspect-ratio: 1;
}
.changtextswebtexts {
  color: #ffffff;
  text-align: center;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Bold",
    sans-serif
  );
  font-size: 16px;
  line-height: 105%;
  letter-spacing: 0.05em;
  font-weight: 700;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  width: 76px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.changphoto {
  width: 472px;
  height: 616.44px;
  position: absolute;
  left: 809px;
  top: -108px;
  overflow: visible;
}
.changtextsblock {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  width: 648px;
  height: 100px;
  position: absolute;
  left: calc(50% - 538.23px);
  bottom: 0px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}
.changtexts-vector {
  width: 22px;
  height: 24.4px;
  position: absolute;
  left: calc(50% - 240.23px);
  bottom: 10px;
  overflow: visible;
}
.chen {
  width: 1427px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0px;
}
.chentexts {
  width: 649px;
  height: 630px;
  position: absolute;
  left: 610px;
  top: 212px;
}
.chentexts-2 {
  color: #d9d9d9;
  text-align: left;
  font-family: var(--var-sds-typography-body-font-family, "-", sans-serif);
  font-size: var(--var-sds-typography-body-size-medium, 16px);
  line-height: 140%;
  font-weight: 400;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 84px;
  width: 649px;
  height: 547px;
}
.chentexts-2-span {
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.chentexts-2-span2 {
  font-family: "Inter-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.chentexts-1 {
  color: #ffffff;
  text-align: left;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Bold",
    sans-serif
  );
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: 700;
  position: absolute;
  left: calc(50% - 324.63px);
  top: 0px;
  width: 111.81px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.chentexts-104 {
  width: 59.44px;
  height: 57.43px;
  position: absolute;
  left: 127.21px;
  top: 0.28px;
  object-fit: cover;
  aspect-ratio: 59.44/57.43;
}
.chentextsweb {
  background: #864770;
  border-radius: 71px;
  width: 58.43px;
  height: 58.43px;
  position: absolute;
  left: calc(50% - 122.88px);
  top: 0.29px;
  aspect-ratio: 1;
}
.chentexts-104:hover, .chentextsweb:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
.chentextswebtexts {
  color: #ffffff;
  text-align: center;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Bold",
    sans-serif
  );
  font-size: 16px;
  line-height: 105%;
  letter-spacing: 0.05em;
  font-weight: 700;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  width: 76px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chenphoto {
  width: 472px;
  height: 616.44px;
  position: absolute;
  left: 47px;
  top: -108px;
  overflow: visible;
}
.chentextsblock {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  width: 648px;
  height: 100px;
  position: absolute;
  left: calc(50% - 103.5px);
  bottom: 0px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}
.chentexts-vector {
  width: 22px;
  height: 24.4px;
  position: absolute;
  left: calc(50% - -194.5px);
  bottom: 10px;
  overflow: visible;
}
.main-4-about {
  color: #ffffff;
  text-align: left;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Bold",
    sans-serif
  );
  font-size: 36px;
  line-height: 120%;
  font-weight: 700;
  position: absolute;
  left: calc(50% - -400px);
  top: 16px;
  width: 203px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
/*--------------*/
/*--------------*/
/*--------------*/
.main-3 {
  background: #000000;
  height: 1421px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 3470px;
  overflow: hidden;
}
.main-3-frame {
  width: 2000px;
  height: 1460px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0px;
  overflow: hidden;
}
.main-3-right {
  width: 854.29px;
  height: 688.72px;
  position: absolute;
  left: calc(50% - 304px);
  top: 532px;
}
.esp-32-s-3-1 {
  width: 762.4px;
  height: 538.98px;
  position: absolute;
  left: 0px;
  top: 160.48px;
  transform-origin: 0 0;
  transform: rotate(-11.46deg) scale(1, 1);
  object-fit: cover;
  aspect-ratio: 762.4/538.98;
}
.tca-9548-a-1 {
  width: 464.1px;
  height: 328.1px;
  position: absolute;
  left: 379.41px;
  top: 217px;
  box-shadow: 1px -6px 127.6px -66px rgba(0, 0, 0, 0.8);
  transform-origin: 0 0;
  transform: rotate(0.421deg) scale(1, 1);
  object-fit: cover;
  aspect-ratio: 464.1/328.1;
}
.mpu-6050-1 {
  width: 356.46px;
  height: 252px;
  position: absolute;
  left: 417px;
  top: 349px;
  box-shadow: -5px -15px 100px -50px rgba(0, 0, 0, 0.8);
  object-fit: cover;
  aspect-ratio: 356.46/252;
}
.main-3-block-2 {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(50, 13, 30, 0) 100%
  );
  width: 622px;
  height: 98px;
  position: absolute;
  left: calc(50% - -338.86px);
  top: 0px;
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}
.main-3-left {
  width: 574px;
  height: 532.05px;
  position: absolute;
  left: calc(50% - 525px);
  top: 331px;
}
.mg-995-1 {
  width: 541.27px;
  height: 382.66px;
  position: absolute;
  left: 32.73px;
  top: 0px;
  object-fit: cover;
  aspect-ratio: 541.27/382.66;
}
.vb-1 {
  width: 375.18px;
  height: 265.23px;
  position: absolute;
  left: 0px;
  top: 266.82px;
  object-fit: cover;
  aspect-ratio: 375.18/265.23;
}
.ws-2812-1 {
  width: 180.5px;
  height: 127.6px;
  position: absolute;
  left: 187.24px;
  top: 294.67px;
  box-shadow: -25px 20px 40px -30px rgba(0, 0, 0, 0.8);
  object-fit: cover;
  aspect-ratio: 180.5/127.6;
}
.main-3-block-1 {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(50, 13, 30, 0) 100%
  );
  width: 422.57px;
  height: 191.33px;
  position: absolute;
  left: calc(50% - 255.28px);
  top: 422.57px;
  transform-origin: 0 0;
  transform: rotate(-90deg) scale(1, 1);
}
.main-3-vectors {
  height: auto;
  position: absolute;
  left: 284px;
  top: 50px;
  overflow: visible;
}
.main-3-words-2 {
  width: 593px;
  height: 207px;
  position: absolute;
  left: calc(50% - 539px);
  top: 947px;
}
.main-3-words-2-2 {
  color: #d9d9d9;
  text-align: right;
  font-family: var(--var-sds-typography-body-font-family, "-", sans-serif);
  font-size: var(--var-sds-typography-body-size-medium, 16px);
  line-height: 140%;
  font-weight: 400;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 80px;
  width: 593px;
  height: 127px;
}
.main-3-words-2-2-span {
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.main-3-words-2-2-span2 {
  font-family: "Inter-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.main-3-words-2-1 {
  color: #ffffff;
  text-align: right;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Regular",
    sans-serif
  );
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: var(--var-sds-typography-subtitle-font-weight, 400);
  position: absolute;
  left: calc(50% - 224.36px);
  top: 0px;
  width: 520.86px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.main-3-words-1 {
  width: 485px;
  height: 201px;
  position: absolute;
  left: calc(50% - -145px);
  top: 242px;
}
.main-3-words-1-2 {
  color: #d9d9d9;
  text-align: justified;
  font-family: var(--var-sds-typography-body-font-family, "-", sans-serif);
  font-size: var(--var-sds-typography-body-size-medium, 16px);
  line-height: 140%;
  font-weight: 400;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 80px;
  width: 485px;
  height: 121px;
}
.main-3-words-1-2-span {
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.main-3-words-1-2-span2 {
  font-family: "Inter-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.main-3-words-1-1 {
  color: #ffffff;
  text-align: left;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Regular",
    sans-serif
  );
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: var(--var-sds-typography-subtitle-font-weight, 400);
  position: absolute;
  left: calc(50% - 242.5px);
  top: 0px;
  width: 426px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.main-3-logos {
  width: 150px;
  height: 600px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 357px;
  overflow: hidden;
}
.easyeda {
  width: 129.76px;
  height: 92px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 466px;
  object-fit: cover;
  aspect-ratio: 129.76/92;
}
.blender {
  width: 106px;
  height: 106px;
  position: absolute;
  left: calc(50% - 55px);
  top: 321px;
  object-fit: cover;
  aspect-ratio: 1;
}
.creo {
  width: 115px;
  height: 115px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 166px;
  object-fit: cover;
  aspect-ratio: 1;
}
.ide {
  width: 110px;
  height: 110px;
  position: absolute;
  left: calc(50% - 56px);
  top: 19px;
  object-fit: cover;
  aspect-ratio: 1;
}
.main-3-logosback {
  background: rgba(0, 0, 0, 0.1);
  width: 609px;
  height: 161px;
  position: absolute;
  left: calc(50% - -80px);
  top: calc(50% - 324px);
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}
.button-more {
  background: #ffffff;
  border-radius: 9999px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 122px;
  height: 50px;
  position: absolute;
  left: calc(50% - 380px);
  top: 1171px;
  overflow: hidden;
}
.button-more-subtitle {
  color: #1e1e1e;
  text-align: center;
  font-family: var(--body-strong-font-family, "Inter-SemiBold", sans-serif);
  font-size: var(--body-strong-font-size, 16px);
  line-height: var(--body-strong-line-height, 140%);
  font-weight: var(--body-strong-font-weight, 600);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-more:hover {
  transform: scale(1.1);
  transition: 0.3s ease;
}

/*--------------*/
/*--------------*/
/*--------------*/
.main-2 {
  background: #320d1e;
  height: 1102px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 2368px;
  overflow: hidden;
}
.frame-2 {
  width: 2000px;
  height: 1102px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0px;
  overflow: hidden;
}
.block-2 {
  background: linear-gradient(
    90deg,
    rgba(50, 13, 30, 1) 0%,
    rgb(137, 74, 115) 100%
  );
  width: 722px;
  height: 58px;
  position: absolute;
  left: calc(50% - 720px);
  top: 1044px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}
.block-1 {
  background: linear-gradient(
    90deg,
    rgba(50, 13, 30, 1) 0%,
    rgba(134, 71, 112, 1) 100%
  );
  width: 919px;
  height: 58px;
  position: absolute;
  left: calc(50% - -720px);
  top: 58px;
  transform-origin: 0 0;
  transform: rotate(180deg) scale(1, 1);
}
.div {
  width: 489px;
  height: 679px;
  position: absolute;
  left: calc(50% - 655px);
  top: 0px;
  overflow: hidden;
}
.back-1 {
  background: radial-gradient(
    closest-side,
    rgba(50, 13, 30, 0) 0%,
    rgba(134, 71, 112, 1) 100%
  );
  border-radius: 25px;
  width: 489px;
  height: 679px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
}
.div2 {
  border-radius: 20px;
  width: 459px;
  height: 649px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  object-fit: cover;
  aspect-ratio: 459/649;
}
.div3 {
  width: 679px;
  height: 489px;
  position: absolute;
  left: calc(50% - 22px);
  top: 613px;
  overflow: hidden;
}
.back {
  background: radial-gradient(
    closest-side,
    rgba(50, 13, 30, 0) 0%,
    rgba(134, 71, 112, 1) 100%
  );
  border-radius: 25px;
  width: 679px;
  height: 489px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
}
._1 {
  border-radius: 20px;
  width: 649.06px;
  height: 459px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
  object-fit: cover;
  aspect-ratio: 649.06/459;
}
.div4 {
  position: absolute;
  inset: 0;
}
.div5 {
  color: #d9d9d9;
  text-align: left;
  font-family: var(--var-sds-typography-body-font-family, "-", sans-serif);
  font-size: var(--var-sds-typography-body-size-medium, 16px);
  line-height: 140%;
  font-weight: 400;
  position: absolute;
  left: calc(50% - 605px);
  top: 832px;
  width: 485px;
  height: 97px;
}
.div-5-span {
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div-5-span2 {
  font-family: "Inter-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div6 {
  color: #ffffff;
  text-align: left;
  font-family: var(
    --var-sds-typography-subtitle-font-family,
    "Inter-Regular",
    sans-serif
  );
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: var(--var-sds-typography-subtitle-font-weight, 400);
  position: absolute;
  left: calc(50% - 605px);
  top: 762px;
  width: 426px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.xbox-xbox {
  color: #d9d9d9;
  text-align: justified;
  font-family: var(--var-sds-typography-body-font-family, "-", sans-serif);
  font-size: var(--var-sds-typography-body-size-medium, 16px);
  line-height: 140%;
  font-weight: var(--var-sds-typography-body-font-weight-regular, 400);
  position: absolute;
  left: calc(50% - -8px);
  top: 266px;
  width: 537px;
  height: 218px;
}
.xbox-xbox-span {
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.xbox-xbox-span2 {
  font-family: var(--body-base-font-family, "Inter-Regular", sans-serif);
  font-size: var(--body-base-font-size, 16px);
  line-height: var(--body-base-line-height, 140%);
  font-weight: var(--body-base-font-weight, 400);
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div7 {
  color: #ffffff;
  text-align: left;
  font-family: var(--var-sds-typography-subtitle-font-family,"Inter-Regular",sans-serif);
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: var(--var-sds-typography-subtitle-font-weight, 400);
  position: absolute;
  left: calc(50% - -8px);
  top: 196px;
  width: 338.36px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
/*--------------*/
/*--------------*/
/*--------------*/
.main-1 {
  background: #320d1e;
  height: 1568px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 800px;
  overflow: hidden;
}
.frame-1 {
  width: 2000px;
  height: 1568px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: hidden;
}
.group-1 {
  position: absolute;
  inset: 0;
}
.block-4 {
  background: linear-gradient(
    90deg,
    rgba(50, 13, 30, 1) 0%,
    rgba(134, 71, 112, 1) 100%
  );
  width: 1000px;
  height: 58px;
  position: absolute;
  left: calc(50% - 720px);
  top: 1124px;
}
.block-3 {
  background: linear-gradient(
    90deg,
    rgba(50, 13, 30, 1) 0%,
    rgba(134, 71, 112, 1) 100%
  );
  width: 1163px;
  height: 58px;
  position: absolute;
  left: calc(50% - -723px);
  top: 842px;
  transform-origin: 0 0;
  transform: rotate(180deg) scale(1, 1);
}
.block-22 {
  background: linear-gradient(
    90deg,
    rgba(50, 13, 30, 1) 0%,
    rgba(134, 71, 112, 1) 100%
  );
  width: 1160px;
  height: 58px;
  position: absolute;
  left: calc(50% - 720px);
  top: 513px;
}
.block-12 {
  background: linear-gradient(
    90deg,
    rgba(50, 13, 30, 1) 0%,
    rgba(134, 71, 112, 1) 100%
  );
  width: 1013px;
  height: 58px;
  position: absolute;
  left: calc(50% - -723px);
  top: 339px;
  transform-origin: 0 0;
  transform: rotate(-180deg) scale(1, 1);
}
.r {
  background: #854670;
  border-radius: 173px;
  opacity: 0.5;
  width: 479.68px;
  height: 449.89px;
  position: absolute;
  left: calc(50% - -141px);
  top: 1195.1px;
  transform-origin: 0 0;
  transform: rotate(-44.314deg) scale(1, 1);
  filter: blur(100px);
}
.l {
  background: #854670;
  border-radius: 173px;
  opacity: 0.5;
  width: 512.82px;
  height: 506.39px;
  position: absolute;
  left: calc(50% - 794px);
  top: 984.25px;
  transform-origin: 0 0;
  transform: rotate(-44.314deg) scale(1, 1);
  filter: blur(100px);
}
.r-1 {
  width: 943.48px;
  height: 667px;
  position: absolute;
  left: calc(50% - 167.24px);
  top: 953px;
  object-fit: cover;
  aspect-ratio: 943.48/667;
}
.l-1 {
  width: 655px;
  height: 463px;
  position: absolute;
  left: calc(50% - 703px);
  top: 702px;
  object-fit: cover;
  aspect-ratio: 655/463;
}
.fl {
  background: #854670;
  border-radius: 173px;
  opacity: 0.5;
  width: 615.98px;
  height: 381.15px;
  position: absolute;
  left: calc(50% - -159px);
  top: 528.05px;
  transform-origin: 0 0;
  transform: rotate(-39.927deg) scale(1, 1);
  filter: blur(100px);
}
.fr {
  background: #854670;
  border-radius: 173px;
  opacity: 0.5;
  width: 555.66px;
  height: 387.86px;
  position: absolute;
  left: calc(50% - 597.34px);
  top: 92px;
  transform-origin: 0 0;
  transform: rotate(13.773deg) scale(1, 1);
  filter: blur(100px);
}
.fl-1 {
  width: 711.5px;
  height: 503px;
  position: absolute;
  left: calc(50% - -107px);
  top: 323px;
  object-fit: cover;
  aspect-ratio: 711.5/503;
}
.fr-1 {
  width: 935px;
  height: 661px;
  position: absolute;
  left: calc(50% - 733.5px);
  top: -60px;
  object-fit: cover;
  aspect-ratio: 935/661;
}
.div8 {
  color: #d9d9d9;
  text-align: justified;
  font-family: var(--var-sds-typography-body-font-family, "-", sans-serif);
  font-size: var(--var-sds-typography-body-size-medium, 16px);
  line-height: 140%;
  font-weight: var(--var-sds-typography-body-font-weight-regular, 400);
  position: absolute;
  left: calc(50% - 543px);
  top: 1318px;
  width: 423px;
  height: 147px;
}
.div-8-span {
  font-family: var(--body-base-font-family, "Inter-Regular", sans-serif);
  font-size: var(--body-base-font-size, 16px);
  line-height: var(--body-base-line-height, 140%);
  font-weight: var(--body-base-font-weight, 400);
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div-8-span2 {
  font-family: "Inter-Bold", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div9 {
  color: #ffffff;
  text-align: left;
  font-family: var(--var-sds-typography-subtitle-font-family,"Inter-Regular",sans-serif);
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: var(--var-sds-typography-subtitle-font-weight, 400);
  position: absolute;
  left: calc(50% - 543px);
  top: 1248px;
  width: 356px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div10 {
  color: #d9d9d9;
  text-align: left;
  font-family: var(--body-base-font-family, "Inter-Regular", sans-serif);
  font-size: var(--body-base-font-size, 16px);
  line-height: var(--body-base-line-height, 140%);
  font-weight: var(--body-base-font-weight, 400);
  position: absolute;
  left: calc(50% - 100px);
  top: 954px;
  width: 429px;
  height: 69px;
}
.div11 {
  color: #ffffff;
  text-align: left;
  font-family: var(--var-sds-typography-subtitle-font-family,"Inter-Regular",sans-serif);
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: var(--var-sds-typography-subtitle-font-weight, 400);
  position: absolute;
  left: calc(50% - 100px);
  top: 884px;
  width: 356px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div12 {
  color: #d9d9d9;
  text-align: left;
  font-family: var(--body-base-font-family, "Inter-Regular", sans-serif);
  font-size: var(--body-base-font-size, 16px);
  line-height: var(--body-base-line-height, 140%);
  font-weight: var(--body-base-font-weight, 400);
  position: absolute;
  left: calc(50% - 543px);
  top: 657px;
  width: 423px;
  height: 65px;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div13 {
  color: #ffffff;
  text-align: left;
  font-family: var(--var-sds-typography-subtitle-font-family,"Inter-Regular",sans-serif);
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: var(--var-sds-typography-subtitle-font-weight, 400);
  position: absolute;
  left: calc(50% - 543px);
  top: 587px;
  width: 356px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div14 {
  color: #d9d9d9;
  text-align: justified;
  font-family: var(--body-base-font-family, "Inter-Regular", sans-serif);
  font-size: var(--body-base-font-size, 16px);
  line-height: var(--body-base-line-height, 140%);
  font-weight: var(--body-base-font-weight, 400);
  position: absolute;
  left: calc(50% - -217px);
  top: 185px;
  width: 439px;
  height: 85px;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.div15 {
  color: #ffffff;
  text-align: left;
  font-family: var(--var-sds-typography-subtitle-font-family,"Inter-Regular",sans-serif);
  font-size: var(--var-sds-typography-subtitle-size-base, 32px);
  line-height: 120%;
  font-weight: var(--var-sds-typography-subtitle-font-weight, 400);
  position: absolute;
  left: calc(50% - -217px);
  top: 115px;
  width: 356px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
/*--------------*/
/*--------------*/
/*--------------*/
.main-0 {
  padding: 119px 0px 119px 0px;
  height: 800px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.mian-contents {
  width: 1440px;
  height: 562px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 119px;
}
.main-pic {
  width: 795px;
  height: 562px;
  position: absolute;
  left: calc(50% - 75px);
  top: 0px;
}
.pic {
  width: 741px;
  height: 562px;
  position: absolute;
  right: 54px;
  top: 50%;
  translate: 0 -50%;
  overflow: hidden;
  object-fit: cover;
}
.mian-text {
  padding: 0px 0px 0px 90px;
  width: 645px;
  height: 303px;
  position: absolute;
  left: calc(50% - 720px);
  top: 129.5px;
}
.subtitle {
  color: #d9d9d9;
  text-align: left;
  font-family: var(--subtitle-font-family, "Inter-Regular", sans-serif);
  font-size: var(--subtitle-font-size, 32px);
  line-height: var(--subtitle-line-height, 120%);
  font-weight: var(--subtitle-font-weight, 400);
  position: absolute;
  left: 90px;
  top: 0px;
  width: 555px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.title {
  color: #ffffff;
  text-align: left;
  font-family: var(--title-hero-font-family, "Inter-Bold", sans-serif);
  font-size: var(--title-hero-font-size, 72px);
  line-height: var(--title-hero-line-height, 120%);
  letter-spacing: var(--title-hero-letter-spacing, -0.03em);
  font-weight: var(--title-hero-font-weight, 700);
  position: absolute;
  left: 90px;
  top: 48px;
  width: 555px;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.subtitle2 {
  color: #d9d9d9;
  text-align: left;
  font-family: var(--subtitle-font-family, "Inter-Regular", sans-serif);
  font-size: var(--subtitle-font-size, 32px);
  line-height: var(--subtitle-line-height, 120%);
  font-weight: var(--subtitle-font-weight, 400);
  position: absolute;
  left: 90px;
  top: 144px;
  width: 555px;
  height: 107px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
.button-video {
  background: #ffffff;
  border-radius: 9999px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 176px;
  position: absolute;
  left: 90px;
  top: 270px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.button-video:hover {
  transform: scale(1.08);
}
.subtitle3 {
  color: #1e1e1e;
  text-align: center;
  font-family: var(--body-strong-font-family, "Inter-SemiBold", sans-serif);
  font-size: var(--body-strong-font-size, 16px);
  line-height: var(--body-strong-line-height, 140%);
  font-weight: var(--body-strong-font-weight, 600);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.transition {
  background: linear-gradient(
    180deg,
    rgba(50, 13, 30, 0) 0%,
    rgba(50, 13, 30, 1) 100%
  );
  height: 159px;
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
}
/*--------------*/
/*--------------*/
/*--------------*/
.header {
  background: rgba(30, 30, 30, 0.5);
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease-in-out;
}
.header.hidden {
  transform: translateY(-100%);
}
.logo {
  padding: 23px 24px 23px 24px;
  width: 239px;
  height: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.dr {
  width: 191px;
  height: 54px;
  position: absolute;
  left: 24px;
  top: 23px;
  object-fit: cover;
  aspect-ratio: 191/54;
}
.text {
  padding: 10px 30px 10px 1px;
  width: 496px;
  height: 60px;
  position: absolute;
  right: 0px;
  top: 20px;
  overflow: hidden;
}
.div16 {
  color: #ffffff;
  text-align: center;
  font-family: var(--body-base-font-family, "Inter-Regular", sans-serif);
  font-size: var(--body-base-font-size, 16px);
  line-height: var(--body-base-line-height, 140%);
  font-weight: var(--body-base-font-weight, 400);
  position: absolute;
  left: 9.12px;
  top: 10px;
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
}
.div16:hover {
  transform: scale(1.08);
}
.div17 {
  color: #ffffff;
  text-align: center;
  font-family: var(--body-base-font-family, "Inter-Regular", sans-serif);
  font-size: var(--body-base-font-size, 16px);
  line-height: var(--body-base-line-height, 140%);
  font-weight: var(--body-base-font-weight, 400);
  position: absolute;
  left: 124.12px;
  top: 10px;
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
}
.div17:hover {
  transform: scale(1.08);
}
.div18 {
  color: #ffffff;
  text-align: center;
  font-family: var(--body-base-font-family, "Inter-Regular", sans-serif);
  font-size: var(--body-base-font-size, 16px);
  line-height: var(--body-base-line-height, 140%);
  font-weight: var(--body-base-font-weight, 400);
  position: absolute;
  left: 241.62px;
  top: 10px;
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
}
.div18:hover {
  transform: scale(1.08);
}
.button-main-block {
  padding: 0px 22px 0px 22px;
  width: 120px;
  height: 40px;
  position: absolute;
  left: 347.88px;
  top: 10px;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}
.button-main-block:hover {
  transform: scale(1.08);
}
.button-main {
  background: #ffffff;
  border-radius: 9999px;
  width: 76px;
  height: 40px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0px;
  overflow: hidden;
}
.div19 {
  color: #000000;
  text-align: center;
  font-family: var(--body-strong-font-family, "Inter-SemiBold", sans-serif);
  font-size: var(--body-strong-font-size, 16px);
  line-height: var(--body-strong-line-height, 140%);
  font-weight: var(--body-strong-font-weight, 600);
  position: absolute;
  left: 22px;
  top: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.5s ease-in-out;
}
.page-transition.active {
  opacity: 1;
  pointer-events: all;
}
/*--------------*/
/*--------------*/
/*--------------*/
.chen, .chang, .ho {
  overflow: hidden;
  height: 521px;
  transition: height 0.5s ease, transform 0.5s ease;
}

.chen.expanded,
.chang.expanded,
.ho.expanded {
  height: 900px; 
}

.chentextsblock,
.changtextsblock,
.hotextsblock {
  transition: transform 0.5s ease;
  transform: translateY(0);
}

.expanded .chentextsblock,
.expanded .changtextsblock,
.expanded .hotextsblock {
  transform: translateY(200px); 
}

.chentexts-vector,
.changtexts-vector,
.hotexts-vector {
  cursor: pointer;
  transition: transform 0.3s ease;
  display: inline-block;
}

.chentexts-vector:hover:not(.rotate),
.changtexts-vector:hover:not(.rotate),
.hotexts-vector:hover:not(.rotate) {
  transform: scale(1.3);
}

.rotate {
  transform: rotate(180deg);
}

.rotate:hover {
  transform: rotate(180deg) scale(1.3);
}