body {
  padding: 0;
  margin: 0;
  overflow: initial;
}

html.noflow,
body.noflow {
  overflow: hidden;
}

.x8a {
  background: #fff;
  color: black;
  opacity: 1;
  transition: opacity 0.2s ease;
  will-change: opacity;
}

.x8a.is-loading {
  opacity: 0;
}

.x8a.is-loading * {
  transition: none !important;
}

.x8a section {
  position: relative;
}

.x8a div,
.x8a h2,
.x8a h3,
.x8a h4,
.x8a ul,
.x8a ol,
.x8a li,
.x8a p,
.x8a form,
.x8a table,
.x8a th,
.x8a td,
.x8a figure,
.x8a button {
  border: none;
  margin: 0px;
  padding: 0px;
  color: inherit;
  font-weight: normal;
}

.x8a h2,
.x8a h3,
.x8a h4 {
  line-height: 1.25;
}

.x8a p,
.x8a span {
  line-height: 1.4;
}

.x8a button {
  background-color: transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25;
}

.x8a sup {
  position: relative !important;
  font-size: 50% !important;
  line-height: 0 !important;
  vertical-align: super !important;
  top: 0 !important;
}

.x8a sup.smaller {
  font-size: 30% !important;
  top: -0.4166666667vw !important;
}

.x8a sup.placeholder {
  display: none;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .x8a sup.placeholder {
    display: inline-block;
    opacity: 0;
  }
}

.x8a picture,
.x8a img,
.x8a video,
.x8a canvas {
  display: block;
  width: 100%;
  max-width: none;
}

.x8a a {
  color: inherit;
  text-decoration: none;
}

.x8a *,
.x8a *::before,
.x8a *::after {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

.x8a *:focus,
.x8a *:active {
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.x8a .nowrap {
  white-space: nowrap;
}

.x8a .object-fit {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.x8a .ff-demi {
  font-family: "HONOR Sans World DemiBold";
}

.x8a .ff-medi {
  font-family: "HONOR Sans World Medium";
}

.x8a .ff-regular {
  font-family: "HONOR Sans World Regular";
}

.x8a .ff-extraLight {
  font-family: "HONOR Sans World Regular";
}

.x8a .linear-pur {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to right,
    #8682df 0%,
    #8682df 35%,
    #b9b9f1 55%,
    #8784dc 75%
  );
}

.x8a .linear {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

.x8a .show-fold {
  display: none;
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .x8a .show-fold {
    display: block;
  }
}

.x8a {
  font-family: "HONOR Sans World Regular";
  line-height: 1.5;
}

.x8a .ff-18 {
  font-size: 0.9375vw;
}

.x8a .ff-32 {
  font-size: 1.666667vw;
}

.x8a .ff-48 {
  font-size: 2.5vw;
}

.x8a .ff-60 {
  font-size: 3.125vw;
}

.x8a .pc-show {
  display: block;
}

.x8a .mob-show {
  display: none;
}

.x8a .sec-sticky {
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
  overflow: hidden;
  contain: strict;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .ff-18 {
    font-size: 3.5vw;
  }

  .x8a .ff-32 {
    font-size: 6.4vw;
  }

  .x8a .ff-48 {
    font-size: 8vw;
  }

  .x8a .ff-60 {
    font-size: 10.666667vw;
  }

  .x8a .pc-show {
    display: none;
  }

  .x8a .mob-show {
    display: block;
  }
}

@media (width: 768px) and (orientation: portrait),
  (width: 1024px) and (orientation: portrait) {
  .x8a .x8a .ff-18 {
    font-size: 2.533333vw;
  }

  .x8a .x8a .ff-32 {
    font-size: 4.4vw;
  }

  .x8a .x8a .ff-48 {
    font-size: 6.533333vw;
  }
}

.x8a .sec2 {
  padding: 7.8125vw 0 10.9375vw;
}

.x8a .sec2 h2 {
  text-align: center;
}

.x8a .sec2 .sec2-list {
  margin-top: 3.125vw;
  display: grid;
  grid-template-columns: 29.010417vw 23.802083vw 25.833333vw;
  grid-template-rows: 24.21875vw 13.854167vw 16.09375vw;
  -moz-column-gap: 1.041667vw;
  column-gap: 1.041667vw;
  row-gap: 1.041667vw;
  justify-content: center;
  grid-template-areas: "a b b" "c d d" "c e f";
}

.x8a .sec2 .sec2-list .item {
  position: relative;
  overflow: hidden;
  border-radius: 0.885417vw;
  cursor: pointer;
}

.x8a .sec2 .sec2-list .item .item-title {
  max-width: 95%;
  position: absolute;
  top: 2.083333vw;
  left: 1.875vw;
}

.x8a .sec2 .sec2-list .item .item-bg {
  transition: all 0.7s;
}

.x8a .sec2 .sec2-list .item:hover .item-bg {
  transform: scale(1.09);
}

.x8a .sec2 .sec2-list .item1 {
  grid-area: a;
  width: calc(100% + 15.052083vw);
}

.x8a .sec2 .sec2-list .item2 {
  grid-area: b;
  width: calc(100% - 15.052083vw);
  transform: translateX(15.052083vw);
}

.x8a .sec2 .sec2-list .item3 {
  grid-area: c;
}

.x8a .sec2 .sec2-list .item4 {
  grid-area: d;
}

.x8a .sec2 .sec2-list .item5 {
  grid-area: e;
}

.x8a .sec2 .sec2-list .item6 {
  grid-area: f;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec2 {
    padding: 10.666667vw 0;
  }

  .x8a .sec2 h2 {
    text-align: center;
  }

  .x8a .sec2 .sec2-list {
    display: flex;
    width: 84vw;
    margin: 10.666667vw auto 0;
    flex-wrap: wrap;
    -moz-column-gap: 3.733333vw;
    column-gap: 3.733333vw;
    row-gap: 3.733333vw;
    justify-content: space-between;
  }

  .x8a .sec2 .sec2-list .item {
    width: 100%;
    transform: translate(0);
  }

  .x8a .sec2 .sec2-list .item .item-title {
    top: 4.8vw;
    left: 4.8vw;
    font-size: 4.8vw;
  }

  .x8a .sec2 .sec2-list .item:hover .item-bg {
    transform: scale(1);
  }

  .x8a .sec2 .sec2-list .item5 {
    width: 44.266667vw;
  }

  .x8a .sec2 .sec2-list .item6 {
    flex: 1;
  }
}

.x8a .sec3 {
  height: 200vh;
}

.x8a .sec3 .text-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-49.5%, calc(-50% - 19.666667vw)) translateY(15vw);
  opacity: 0;
  transition: all 0.7s;
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .x8a .sec3 .text-wrap {
    top: 59%;
  }
}

.x8a .sec3 .text-wrap .sec-title-s {
  width: 48.958333vw;
  margin: 0.520833vw auto 0;
  opacity: 0;
  transition: all 0.7s;
}

.x8a .sec3 .text-wrap .text-list {
  width: 48.958333vw;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .x8a .sec3 .text-wrap .text-list {
    align-items: flex-end;
  }
}

.x8a .sec3 .text-wrap .text-list .text {
  width: 24.270833vw;
  opacity: 0;
  transition: all 0.7s;
}

.x8a .sec3 .text-wrap .text-list .list {
  display: flex;
  text-align: center;
  -moz-column-gap: 3.75vw;
  column-gap: 3.75vw;
  margin-top: -0.520833vw;
  opacity: 0;
  transition: all 0.7s;
}

.x8a .sec3 .text-wrap .text-list .list .item-title {
  color: #45a6ff;
}

.x8a .sec3 .text-wrap .text-list .list .item-text {
  font-size: 0.729167vw;
}

.x8a .sec3 .img-wrap {
  position: absolute;
  bottom: -1vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.x8a .sec3 .img-wrap .pad-screen {
  width: 90.78125vw;
  height: 34.895833vw;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  transition: all 0.7s;
}

.x8a .sec3 .img-wrap .pad-screen img {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  transition: all 0.7s;
}

.x8a .sec3 .img-wrap .pad {
  width: 46.770833vw;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 40vw) scale(2.5);
  transform-origin: center top;
  z-index: 2;
  margin: 0 auto;
  transition: all 0.7s;
}

.x8a .sec3 .img-wrap .pad .shadow-left {
  width: 16.197917vw;
  z-index: 2;
  position: absolute;
  left: -13.177083vw;
  top: -4.427083vw;
  opacity: 0;
  transition: all 0.4s;
}

.x8a .sec3 .img-wrap .pad .shadow-right {
  width: 16.197917vw;
  z-index: 2;
  position: absolute;
  right: -14.177083vw;
  top: -5.027083vw;
  opacity: 0;
  transition: all 0.4s;
}

.x8a .sec3.step1 .text-wrap {
  transform: translate(-49.5%, calc(-50% - 16.666667vw));
  opacity: 1;
}

.x8a .sec3.step1 .text-wrap .sec-title-s {
  opacity: 1;
  transition-delay: 0.1s;
}

.x8a .sec3.step1 .text-wrap .text-list .text {
  opacity: 1;
  transition-delay: 0.1s;
}

.x8a .sec3.step1 .text-wrap .text-list .list {
  opacity: 1;
  transition-delay: 0.2s;
}

.x8a .sec3.step1 .img-wrap .pad-screen {
  -webkit-clip-path: inset(0 22.979167vw round 1vw);
  clip-path: inset(0 22.979167vw round 1vw);
}

.x8a .sec3.step1 .img-wrap .pad-screen img {
  -webkit-clip-path: inset(1vw 0 5vw);
  clip-path: inset(1vw 0 5vw);
}

.x8a .sec3.step1 .img-wrap .pad {
  transform: translate(-50%, 0) scale(1);
}

.x8a .sec3.step1 .img-wrap .pad .shadow-left,
.x8a .sec3.step1 .img-wrap .pad .shadow-right {
  opacity: 1;
  transition-delay: 0.6s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec3 .sec-sticky {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .x8a .sec3 .text-wrap {
    width: 89.333333vw;
    position: static;
    transform: translate(0);
    opacity: 1;
  }

  .x8a .sec3 .text-wrap h2 {
    text-align: left;
    transform: translateY(10vw);
    opacity: 0;
    transition: all 0.7s;
  }

  .x8a .sec3 .text-wrap .sec-title-s {
    transform: translateY(10vw);
  }

  .x8a .sec3 .text-wrap .sec-title-s,
  .x8a .sec3 .text-wrap .text-list {
    width: 100%;
    transition: all 0.7s;
  }

  .x8a .sec3 .text-wrap .text-list {
    flex-direction: column;
    align-items: center;
    opacity: 1;
  }

  .x8a .sec3 .text-wrap .text-list .text {
    width: 100%;
    transform: translateY(10vw);
  }

  .x8a .sec3 .text-wrap .text-list .list {
    flex-direction: column;
    text-align: center;
    margin-top: 2.133333vw;
    row-gap: 4.533333vw;
    transform: translateY(10vw);
  }

  .x8a .sec3 .text-wrap .text-list .list .item-text {
    font-size: 3.2vw;
  }

  .x8a .sec3 .img-wrap {
    position: static;
    transform: translate(0);
    margin-top: 10.666667vw;
  }

  .x8a .sec3 .img-wrap .pad-screen {
    width: 89.6vw;
    height: 65.333333vw;
  }

  .x8a .sec3 .img-wrap .pad {
    width: 80.266667vw;
    transform: translate(-50%, 53vh) scale(2);
  }

  .x8a .sec3 .img-wrap .pad .shadow-left {
    width: 28vw;
    left: -22.666667vw;
    top: -8.4vw;
  }

  .x8a .sec3 .img-wrap .pad .shadow-right {
    width: 28vw;
    right: -22.666667vw;
    top: -8.4vw;
  }

  .x8a .sec3.step1 .text-wrap {
    transform: translate(0);
  }

  .x8a .sec3.step1 .text-wrap h2 {
    opacity: 1;
    transform: translate(0);
  }

  .x8a .sec3.step1 .text-wrap .sec-title-s {
    opacity: 1;
    transform: translate(0);
    transition-delay: 0.1s;
  }

  .x8a .sec3.step1 .text-wrap .text-list .text {
    opacity: 1;
    transform: translate(0);
    transition-delay: 0.1s;
  }

  .x8a .sec3.step1 .text-wrap .text-list .list {
    opacity: 1;
    transform: translate(0);
    transition-delay: 0.2s;
  }

  .x8a .sec3.step1 .img-wrap .pad-screen {
    -webkit-clip-path: inset(0 5.97917vw round 1vw);
    clip-path: inset(0 5.97917vw round 1vw);
  }

  .x8a .sec3.step1 .img-wrap .pad-screen img {
    -webkit-clip-path: inset(1vw 0 14vw);
    clip-path: inset(1vw 0 14vw);
    transition-delay: 0.2s;
  }
}

.x8a .sec4 {
  height: 200vh;
}

.x8a .sec4 .pad-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.x8a .sec4 .pad-wrap .pad-screen {
  height: 63vh;
  width: 90.78125vw;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  transition: all 0.7s;
}

.x8a .sec4 .pad-wrap .pad-screen img {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: all 0.7s;
}

.x8a .sec4 .pad-wrap .pad-border {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 60vw) scale(2);
  bottom: 0.677083vw;
  z-index: 2;
  transition: all 0.7s ease;
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .x8a .sec4 .pad-wrap .pad-border {
    transform: translate(-50%, 68vw) scale(2);
  }
}

.x8a .sec4 .pad-wrap .pad-border .sec4-border {
  width: 80.208333vw;
  margin: 0 auto;
}

.x8a .sec4 .pad-wrap .pad-border .sec4-shadow {
  width: 72.0328125vw;
  height: 17.7375vw;
  position: absolute;
  left: 50%;
  bottom: -16.41vw;
  transform: translate(-50.4%, 0);
  z-index: -1;
  opacity: 0;
  transition: all 0.5s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec4 .pad-wrap .pad-border .sec4-shadow {
    width: 83.6744791667vw;
    height: 20.6041666667vw;
    bottom: -19.46vw;
  }
}

.x8a .sec4 .sec4-content {
  display: flex;
  justify-content: center;
  -moz-column-gap: 5.729167vw;
  column-gap: 5.729167vw;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 10vw);
  top: 73vh;
  transition: all 0.7s;
}

.x8a .sec4 .sec4-content h2 {
  width: 21.875vw;
  transition: all 0.7s;
  opacity: 0;
}

.x8a .sec4 .sec4-content .sec4-list {
  display: flex;
  -moz-column-gap: 2.03125vw;
  column-gap: 2.03125vw;
  font-size: 0.729167vw;
  line-height: 1.57;
  transition: all 0.7s;
  opacity: 0;
}

.x8a .sec4 .sec4-content .sec4-list .item .item-text {
  width: -moz-max-content;
  width: max-content;
}

.x8a .sec4 .sec4-content .sec4-list .item1 .item-icon {
  width: 3.59375vw;
  margin: 0 auto;
  margin-top: 0.9375vw;
}

.x8a .sec4 .sec4-content .sec4-list .item1 .item-text {
  margin-top: 0.9375vw;
}

.x8a .sec4 .sec4-content .sec4-list .item2 .item-icon {
  width: 2.760417vw;
  margin: 0 auto;
  margin-top: 0.729167vw;
}

.x8a .sec4 .sec4-content .sec4-list .item2 .item-text {
  margin-top: 0.520833vw;
}

.x8a .sec4 .sec4-content .sec4-list .item3 .item-icon {
  width: 7.96875vw;
}

.x8a .sec4 .sec4-content .sec4-list .item3 .item-text {
  margin-top: 0.625vw;
}

.x8a .sec4 .sec4-content .sec4-list .item4 .item-icon {
  width: 7.96875vw;
}

.x8a .sec4 .sec4-content .sec4-list .item4 .item-text {
  margin-top: 0.625vw;
}

.x8a .sec4.step1 .pad-wrap .pad-screen {
  -webkit-clip-path: inset(0 6vw);
  clip-path: inset(0 6vw);
}

.x8a .sec4.step1 .pad-wrap .pad-screen img {
  -webkit-clip-path: polygon(
    24% calc(var(--top) * 1px),
    76% calc(var(--top) * 1px),
    84.5% calc(100% - 3.5vh),
    15.5% calc(100% - 3.5vh)
  );
  clip-path: polygon(
    24% calc(var(--top) * 1px),
    76% calc(var(--top) * 1px),
    84.5% calc(100% - 3.5vh),
    15.5% calc(100% - 3.5vh)
  );
}

.x8a .sec4.step1 .pad-wrap .pad-border {
  transform: translateX(-50%);
}

.x8a .sec4.step1 .pad-wrap .pad-border .sec4-shadow {
  opacity: 0.8;
  transition: all 0.3s ease 0.7s;
}

.x8a .sec4.step1 .sec4-content {
  transform: translateX(-50%);
}

.x8a .sec4.step1 .sec4-content h2 {
  opacity: 1;
}

.x8a .sec4.step1 .sec4-content .sec4-list {
  opacity: 1;
  transition-delay: 0.1s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec4 .sec-sticky {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 9.333333vw;
  }

  .x8a .sec4 .pad-wrap {
    position: relative;
    transform: translate(0);
    left: 0;
    z-index: 2;
    margin-top: -7vw;
  }

  .x8a .sec4 .pad-wrap .pad-screen {
    width: 89.6vw;
    height: auto;
    margin: 0 auto;
  }

  .x8a .sec4 .pad-wrap .pad-border {
    opacity: 0;
    transform: translate(-50%, 30vw) scale(2);
  }

  .x8a .sec4 .sec4-content {
    width: 89.6vw;
    position: static;
    transform: translate(0);
    opacity: 1;
    flex-direction: column;
    align-items: center;
    row-gap: 11.2vw;
  }

  .x8a .sec4 .sec4-content h2 {
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    transform: translateY(10vw);
    transition: all 0.7s;
  }

  .x8a .sec4 .sec4-content .sec4-list {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10.666667vw;
    transform: translateY(10vw);
    transition: all 0.7s;
  }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) and (width: 1024px) and (orientation: portrait),
  (max-aspect-ratio: 660/758) and (max-width: 1025px) and (width: 768px) and (orientation: portrait) {
  .x8a .sec4 .sec4-content .sec4-list {
    transform: translateY(1vw);
  }
}

@media (width: 662px) {
  .x8a .sec4.step1 .pad-wrap .pad-screen img {
    -webkit-clip-path: polygon(
      24% calc(var(--top) * 1px),
      76% calc(var(--top) * 1px),
      84.5% calc(100% - 3vh),
      15.5% calc(100% - 3vh)
    );
    clip-path: polygon(
      24% calc(var(--top) * 1px),
      76% calc(var(--top) * 1px),
      84.5% calc(100% - 3vh),
      15.5% calc(100% - 3vh)
    );
  }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec4 .sec4-content .sec4-list .item {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .x8a .sec4 .sec4-content .sec4-list .item .item-text {
    font-size: 3.2vw;
    margin-top: 4.533333vw;
  }

  .x8a .sec4 .sec4-content .sec4-list .item1 .item-icon {
    margin-top: 0.8vw;
    width: 18.4vw;
  }

  .x8a .sec4 .sec4-content .sec4-list .item1 .item-text {
    margin-top: 5.066667vw;
  }

  .x8a .sec4 .sec4-content .sec4-list .item2 .item-icon {
    width: 13.066667vw;
    margin-top: 0;
  }

  .x8a .sec4 .sec4-content .sec4-list .item2 .item-text {
    margin-top: 3.733333vw;
  }

  .x8a .sec4 .sec4-content .sec4-list .item3 .item-icon {
    width: 34.6666666667vw;
  }

  .x8a .sec4 .sec4-content .sec4-list .item4 .item-icon {
    width: 34.6666666667vw;
  }

  .x8a .sec4.step1 .pad-wrap .pad-border {
    opacity: 1;
  }

  .x8a .sec4.step1 .pad-wrap .pad-screen img {
    -webkit-clip-path: polygon(
      19% calc(var(--top) * 1px),
      81% calc(var(--top) * 1px),
      91.5% calc(100% - 3vw),
      8.5% calc(100% - 3vw)
    );
    clip-path: polygon(
      19% calc(var(--top) * 1px),
      81% calc(var(--top) * 1px),
      91.5% calc(100% - 3vw),
      8.5% calc(100% - 3vw)
    );
  }

  .x8a .sec4.step1 .sec4-content {
    transform: translate(0);
  }

  .x8a .sec4.step1 .sec4-content h2 {
    transform: translate(0);
  }

  .x8a .sec4.step1 .sec4-content .list {
    transform: translate(0);
    transition-delay: 0.1s;
  }
}

.x8a .sec5 {
  height: 150vh;
}

@media (width: 1024px) and (orientation: portrait),
  (width: 768px) and (orientation: portrait) {
  .x8a .sec5 {
    margin-top: 11vw;
  }
}

.x8a .sec5 .text-wrap {
  width: 38.385417vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 15.46875vw), calc(-50% - 3.958333vw));
  z-index: 9;
}

.x8a .sec5 .text-wrap h2 {
  transform: translateY(10vw);
  opacity: 0;
  transition: all 0.7s;
}

.x8a .sec5 .text-wrap .sec-title-s {
  margin-top: 0.78125vw;
  transform: translateY(10vw);
  opacity: 0;
  transition: all 0.7s;
}

.x8a .sec5 .text-wrap .sec5-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.8125vw;
  width: 20.833333vw;
  row-gap: 1.458333vw;
  transform: translateY(10vw);
  opacity: 0;
  transition: all 0.7s;
}

.x8a .sec5 .text-wrap .sec5-list .item {
  width: 50%;
}

.x8a .sec5 .text-wrap .sec5-list .item .item-title {
  color: #45a6ff;
}

.x8a .sec5 .pad-wrap {
  width: 62.34375vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 12.760417vw), calc(-50% + 2.864583vw))
    translate(-70vw, 50vw) scale(1.6);
  transition: all 0.7s;
}

.x8a .sec5 .pad-wrap .pad {
  position: relative;
  z-index: 2;
}

.x8a .sec5 .pad-wrap .pad-mask {
  position: absolute;
  width: 99.635417vw;
  top: -24.375vw;
  left: -10.833333vw;
}

.x8a .sec5.step1 .text-wrap h2 {
  opacity: 1;
  transform: translateY(0);
}

.x8a .sec5.step1 .text-wrap .sec-title-s {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.x8a .sec5.step1 .text-wrap .sec5-list {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.x8a .sec5.step1 .pad-wrap {
  transform: translate(calc(-50% + 12.760417vw), calc(-50% + 2.864583vw))
    scale(1);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec5 .sec-sticky {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .x8a .sec5 .text-wrap {
    position: static;
    transform: translate(0);
    width: 89.333333vw;
  }

  .x8a .sec5 .text-wrap h2 {
    line-height: 1.3;
  }

  .x8a .sec5 .text-wrap .sec-title-s {
    margin-top: 4vw;
  }

  .x8a .sec5 .text-wrap .sec5-list {
    display: none;
  }

  .x8a .sec5 .sec5-list {
    width: 89.333333vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 2.666667vw;
    transform: translateY(10vw);
    opacity: 0;
    transition: all 0.7s;
  }

  .x8a .sec5 .sec5-list .item {
    width: 45%;
  }

  .x8a .sec5 .sec5-list .item .item-title {
    color: #45a6ff;
    font-size: 5.333333vw;
  }

  .x8a .sec5 .pad-wrap {
    position: relative;
    width: 90.333333vw;
    left: 0;
    top: 0;
    transform: translate(-150%, 50vw) scale(2);
    margin-top: -10.133333vw;
  }

  .x8a .sec5 .pad-wrap .pad-mask {
    width: 149.866667vw;
    top: -39.2vw;
    right: -19.466667vw;
  }

  .x8a .sec5.step1 .pad-wrap {
    transform: translate(0) scale(1);
  }

  .x8a .sec5.step1 .sec5-list {
    opacity: 1;
    transition-delay: 0.2s;
    transform: translate(0);
  }
}

.x8a .sec6 {
  height: 52.8645833333vw;
  overflow: hidden;
}

.x8a .sec6 .text-wrap {
  width: 33.385417vw;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(238, 238, 238, 0.7) 70%,
    rgba(238, 238, 238, 0.7) 100%
  );
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 22.8125vw), -50%);
  padding: 3.645833vw 2.825vw 3.645833vw 5.9375vw;
}

.x8a .sec6 .text-wrap h2 {
  opacity: 0;
  transform: translateY(10vw);
  transition: all 0.7s;
}

.x8a .sec6 .text-wrap .sec-title-s {
  margin-top: 0.833333vw;
  opacity: 0;
  transform: translateY(10vw);
  transition: all 0.7s;
}

.x8a .sec6 .text-wrap .sec6-list {
  display: flex;
  margin-top: 2.083333vw;
  flex-wrap: wrap;
  row-gap: 0.9375vw;
  -moz-column-gap: 3.125vw;
  column-gap: 3.125vw;
  opacity: 0;
  transform: translateY(10vw);
  transition: all 0.7s;
}

.x8a .sec6 .text-wrap .sec6-list .item .item-title {
  font-size: 1.666667vw;
  color: #45a6ff;
}

.x8a .sec6 .text-wrap .sec6-list .item .item-title span {
  font-size: 1.145833vw;
}

.x8a .sec6 .text-wrap .sec6-list .item:nth-child(2n + 1) {
  width: 32%;
}

.x8a .sec6 .text-wrap .sec6-list .item:nth-child(2n) {
  width: 50%;
}

.x8a .sec6.step1 .text-wrap h2 {
  opacity: 1;
  transform: translate(0);
}

.x8a .sec6.step1 .text-wrap .sec-title-s {
  opacity: 1;
  transform: translate(0);
  transition-delay: 0.1s;
}

.x8a .sec6.step1 .text-wrap .sec6-list {
  opacity: 1;
  transform: translate(0);
  transition-delay: 0.2s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec6 {
    height: auto;
    margin-top: 10vw;
  }

  .x8a .sec6 .bg {
    width: 100%;
    height: 84.8vw;
  }

  .x8a .sec6 .text-wrap {
    width: 100%;
    position: static;
    transform: translate(0);
    margin: -13.6vw auto 0;
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(238, 238, 238, 0.7) 70%,
      rgba(238, 238, 238, 0.7) 100%
    );
    padding: 5.066667vw 5.066667vw 18.666667vw;
    border-radius: 3.2vw 3.2vw 0 0;
  }

  .x8a .sec6 .text-wrap .sec-title-s {
    margin-top: 4vw;
  }

  .x8a .sec6 .text-wrap .sec6-list {
    margin-top: 6.933333vw;
    row-gap: 4.266667vw;
    -moz-column-gap: 0;
    column-gap: 0;
    justify-content: space-between;
  }

  .x8a .sec6 .text-wrap .sec6-list .item .item-title {
    font-size: 5.333333vw;
  }

  .x8a .sec6 .text-wrap .sec6-list .item .item-title span {
    font-size: 3.733333vw;
  }

  .x8a .sec6 .text-wrap .sec6-list .item:nth-of-type(2n + 1) {
    width: 50%;
  }

  .x8a .sec6 .text-wrap .sec6-list .item:nth-of-type(2n) {
    width: 50%;
  }
}

.x8a .sec7 .sec-sticky {
  position: relative;
  top: 0;
  height: 56.25vw;
}

.x8a .sec7 .bg {
  width: 93.75vw;
  height: 100%;
  top: 0;
  right: 0;
  position: absolute;
}

.x8a .sec7 .text-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 21.875vw), -50%);
  width: 28.489583vw;
}

.x8a .sec7 .text-wrap h2 {
  opacity: 0;
  transform: translateY(10vw);
  transition: all 0.7s;
}

.x8a .sec7 .text-wrap .sec-title-s {
  margin-top: 0.833333vw;
  width: 26.770833vw;
  opacity: 0;
  transform: translateY(10vw);
  transition: all 0.7s;
}

.x8a .sec7 .text-wrap .sec7-list {
  display: flex;
  margin-top: 3.645833vw;
  -moz-column-gap: 2.5vw;
  column-gap: 2.5vw;
  opacity: 0;
  transform: translateY(10vw);
  transition: all 0.7s;
}

.x8a .sec7 .text-wrap .sec7-list .item {
  display: flex;
  align-items: center;
  -moz-column-gap: 1.041667vw;
  column-gap: 1.041667vw;
}

.x8a .sec7 .text-wrap .sec7-list .item .item-text {
  white-space: nowrap;
}

.x8a .sec7 .text-wrap .sec7-list .item1 .item-icon {
  width: 4.114583vw;
}

.x8a .sec7 .text-wrap .sec7-list .item2 .item-icon {
  width: 3.229167vw;
}

.x8a .sec7 .pad-wrap {
  width: 42.135417vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 16.458333vw), calc(-50% + 0.46875vw));
}

.x8a .sec7 .pad-wrap .circle-wrap-left img {
  width: 8.59375vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.x8a .sec7 .pad-wrap .pad {
  position: relative;
  z-index: 2;
}

@keyframes circleAni {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }

  25% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

.x8a .sec7 .pad-wrap .circle-wrap-left1 {
  position: absolute;
  top: 4.84375vw;
  left: 7.291667vw;
}

.x8a .sec7 .pad-wrap .circle-wrap-left2 {
  position: absolute;
  bottom: 10.729167vw;
  left: 3.020833vw;
}

.x8a .sec7 .pad-wrap .circle1 {
  animation: circleAni 2.1s infinite linear;
}

.x8a .sec7 .pad-wrap .circle2 {
  animation: circleAni 2.1s 0.7s infinite linear;
}

.x8a .sec7 .pad-wrap .circle3 {
  animation: circleAni 2.1s 1.4s infinite linear;
}

.x8a .sec7 .pad-wrap .circle-wrap-right {
  position: relative;
}

.x8a .sec7 .pad-wrap .circle-wrap-right img {
  width: 10.052083vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.x8a .sec7 .pad-wrap .circle-wrap-right1 {
  position: absolute;
  top: 7.447917vw;
  right: 2.083333vw;
}

.x8a .sec7 .pad-wrap .circle-wrap-right2 {
  position: absolute;
  right: 5.625vw;
  bottom: 6.458333vw;
}

.x8a .sec7.step1 .text-wrap h2 {
  opacity: 1;
  transform: translate(0);
}

.x8a .sec7.step1 .text-wrap .sec-title-s {
  opacity: 1;
  transform: translate(0);
  transition-delay: 0.1s;
}

.x8a .sec7.step1 .text-wrap .sec7-list {
  opacity: 1;
  transform: translate(0);
  transition-delay: 0.2s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec7 {
    height: 200vh;
  }

  .x8a .sec7 .sec-sticky {
    position: sticky;
    top: 52px;
    height: calc(100vh - 52px);
    overflow: hidden;
    contain: strict;
  }

  .x8a .sec7 .bg {
    width: 100%;
    top: auto;
    bottom: 0;
  }

  .x8a .sec7 .text-wrap {
    width: 89.333333vw;
    left: 50%;
    transform: translateX(-50%);
    top: 8vw;
  }

  .x8a .sec7 .text-wrap .sec-title-s {
    width: 100%;
    margin-top: 4vw;
  }

  .x8a .sec7 .text-wrap .sec7-list {
    flex-direction: column;
    row-gap: 6.4vw;
    margin-top: 10.666667vw;
  }

  .x8a .sec7 .text-wrap .sec7-list .item .item-icon {
    width: 13.6vw;
    margin-right: 4.266667vw;
  }

  .x8a .sec7 .text-wrap .sec7-list .item .item-text {
    font-size: 3.2vw;
  }

  .x8a .sec7 .pad-wrap {
    width: 71.733333vw;
    top: auto;
    bottom: 21.333333vw;
    left: 50%;
    transform: translateX(calc(-50% - 1.066667vw)) translateY(10vw);
    opacity: 0;
    transition: all 0.7s;
  }

  .x8a .sec7 .pad-wrap .circle-wrap-left img {
    width: 14.933333vw;
  }

  .x8a .sec7 .pad-wrap .circle-wrap-left1 {
    top: 8.266667vw;
    left: 12.533333vw;
  }

  .x8a .sec7 .pad-wrap .circle-wrap-left2 {
    left: 5.6vw;
    bottom: 17.866667vw;
  }

  .x8a .sec7 .pad-wrap .circle-wrap-right img {
    width: 17.333333vw;
  }

  .x8a .sec7 .pad-wrap .circle-wrap-right1 {
    top: 13.066667vw;
    right: 4vw;
  }

  .x8a .sec7 .pad-wrap .circle-wrap-right2 {
    bottom: 11.2vw;
    right: 9.866667vw;
  }

  .x8a .sec7.step2 .text-wrap .sec7-list {
    opacity: 0;
  }

  .x8a .sec7.step2 .pad-wrap {
    opacity: 1;
    transform: translateX(calc(-50% - 1.066667vw));
    transition-delay: 0.3s;
  }
}

.x8a .sec8 {
  height: 200vh;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8 {
    height: 196vw;
  }

  .x8a .sec8 .sec-sticky {
    height: 196vw;
    position: relative;
    top: 0;
  }

  .x8a .sec8 #trigger-sec8 {
    position: absolute;
    top: 10vh;
  }
}

.x8a .sec8 .pad {
  width: 47.34375vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 7.166667vw), calc(-50% - 3.552083vw));
  z-index: 2;
  transition: all 0.7s;
  transform-origin: 70%;
}

@media (width: 1024px) and (orientation: landscape) {
  .x8a .sec8 .pad {
    top: 54%;
    left: 58%;
  }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8 .pad {
    width: 72vw;
    transform: translate(calc(-50% - 8.166667vw), calc(-50% + 39.947917vw));
  }
}

.x8a .sec8 .hand {
  width: 37.8125vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + 11.0625vw), calc(-50% + 1.989583vw))
    translate(35vw, 12vw) rotate(-30deg);
  transition: all 0.7s;
}

@media (width: 1024px) and (orientation: landscape) {
  .x8a .sec8 .hand {
    top: 55%;
    left: 60%;
  }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8 .hand {
    width: 61.8666666667vw;
    transform: translate(calc(-50% + 55.0625vw), calc(-50% + 80.989583vw))
      rotate(-20deg);
  }
}

.x8a .sec8 .hand-above {
  z-index: 4;
}

.x8a .sec8 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 5;
}

@media (width: 2520px) and (orientation: landscape) {
  .x8a .sec8 .mask img {
    -o-object-position: 85%;
    object-position: 85%;
  }
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .x8a .sec8 .mask img {
    -o-object-position: 82%;
    object-position: 82%;
  }
}

.x8a .sec8 .text-wrap {
  width: 26.770833vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 19.104167vw), calc(-50% + 8.833333vw));
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8 .text-wrap {
    width: 86.1333333333vw;
    transform: translate(-50%, calc(-50% - 37vw));
    z-index: 10;
  }
}

.x8a .sec8 .text-wrap .sec8-title {
  transform: translate(0, 5vw);
  opacity: 0;
  transition: all 0.7s ease;
}

.x8a .sec8 .text-wrap .sec-title-s {
  margin-top: 0.833333vw;
  transform: translate(0, 5vw);
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8 .text-wrap .sec-title-s {
    margin-top: 4vw;
  }
}

.x8a .sec8 .sec8-list {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 1vw));
  right: 11.583333vw;
  z-index: 6;
}

@media (width: 1024px) and (orientation: landscape) {
  .x8a .sec8 .sec8-list {
    top: 42%;
    right: 10.583333vw;
  }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8 .sec8-list {
    transform: translateY(calc(-50% + 62vw));
    right: 60.583333vw;
  }
}

.x8a .sec8 .sec8-list .item-num {
  font-size: 3.333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8 .sec8-list .item-num {
    font-size: 8.5333333333vw;
  }
}

.x8a .sec8 .sec8-list .item1 {
  margin-bottom: 1.0416666667vw;
  transform: translate(0, 5vw);
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8 .sec8-list .item1 .item-text {
    font-size: 3.2vw;
  }
}

.x8a .sec8 .sec8-list .item2 {
  transform: translate(0, 5vw);
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8 .sec8-list .item2 {
    position: absolute;
    top: 0;
    transform: translate(0, 15vw);
  }

  .x8a .sec8 .sec8-list .item2 .item-text {
    font-size: 3.2vw;
  }
}

.x8a .sec8.step1 .text-wrap .sec8-title {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.7s ease;
}

.x8a .sec8.step1 .text-wrap .sec-title-s {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.7s ease 0.1s;
}

.x8a .sec8.step1 .sec8-list .item1 {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.7s ease;
}

.x8a .sec8.step2 .pad {
  transform: translate(calc(-50% - 7.166667vw), calc(-50% - 3.552083vw))
    rotate(23.5deg);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8.step2 .pad {
    transform: translate(calc(-50% - 8.166667vw), calc(-50% + 46.947917vw))
      rotate(23.5deg);
  }
}

.x8a .sec8.step2 .hand {
  transform: translate(calc(-50% + 11.0625vw), calc(-50% + 1.989583vw))
    rotate(0);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec8.step2 .hand {
    transform: translate(calc(-50% + 18.0625vw), calc(-50% + 54.989583vw))
      rotate(0);
  }
}

.x8a .sec8.step2 .sec8-list .item1 {
  transform: translate(0, -10vw);
  opacity: 0;
  transition: all 0.7s ease;
}

.x8a .sec8.step2 .sec8-list .item2 {
  transform: translate(0, -5vw);
  opacity: 1;
  transition: all 0.7s ease;
}

.x8a .sec14 .sec14-content {
  padding: 5.2083333333vw 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec14 .sec14-content {
    width: 100%;
    display: block;
    padding: 16vw 0;
  }
}

.x8a .sec14 .sec14-content .sec14-swiper {
  width: 62.5vw;
  padding-bottom: 1.5625vw;
}

.x8a .sec14 .sec14-content .sec14-swiper .sec14-swiper-pagination {
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
}

.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .sec14-swiper-pagination
  .swiper-pagination-bullet {
  width: 0.3125vw;
  height: 0.3125vw;
}

.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .sec14-swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 0.9375vw;
  height: 0.3125vw;
  border-radius: 0.15625vw;
}

.x8a .sec14 .sec14-content .sec14-swiper .swiper-slide .slide-content {
  width: 100%;
  height: 36.4583333333vw;
  background-color: #f4f7fc;
  border-radius: 1.25vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .swiper-slide
  .slide-content
  .slide-text {
  width: 52.2916666667vw;
  text-align: center;
}

.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .swiper-slide
  .slide-content
  .slide-text
  .sec14-title {
  font-size: 2.0833333333vw;
  margin-bottom: 0.625vw;
}

.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .swiper-slide
  .slide-content
  .slide-img {
  margin-top: 1.1458333333vw;
}

.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .swiper-slide1
  .slide-content
  .slide-img,
.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .swiper-slide2
  .slide-content
  .slide-img {
  width: 30.6291666667vw;
  height: 20.228125vw;
}

.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .swiper-slide3
  .slide-content
  .slide-img,
.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .swiper-slide4
  .slide-content
  .slide-img,
.x8a
  .sec14
  .sec14-content
  .sec14-swiper
  .swiper-slide5
  .slide-content
  .slide-img {
  width: 32.5395833333vw;
  height: 21.7395833333vw;
  transform: translate(1vw, 0.8vw);
}

.x8a .sec14 .sec14-content .sec14-swiper .swiper-button-prev {
  background-image: none;
  width: 2.5vw;
  height: 2.5vw;
  z-index: 10;
  left: 5.7291666667vw;
  top: 55%;
}

.x8a .sec14 .sec14-content .sec14-swiper .swiper-button-prev::after {
  display: none;
}

.x8a .sec14 .sec14-content .sec14-swiper .swiper-button-next {
  background-image: none;
  width: 2.5vw;
  height: 2.5vw;
  z-index: 10;
  right: 5.7291666667vw;
  top: 55%;
}

.x8a .sec14 .sec14-content .sec14-swiper .swiper-button-next::after {
  display: none;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec14 .sec14-content .slide-content {
    margin-bottom: 21.3333333333vw;
  }

  .x8a .sec14 .sec14-content .slide-content .slide-text {
    padding-left: 5.0666666667vw;
    text-align: left;
    width: 89.6vw;
  }

  .x8a .sec14 .sec14-content .slide-content .slide-text .sec14-title {
    font-size: 8.5333333333vw;
    margin-bottom: 4vw;
    text-align: left;
  }

  .x8a .sec14 .sec14-content .slide-content .slide-text .sec14-text {
    margin-bottom: 4vw;
  }

  .x8a .sec14 .sec14-content .slide-content .slide-img {
    margin: 0 auto;
  }

  .x8a .sec14 .sec14-content .slide-content.slide-content1 .slide-img,
  .x8a .sec14 .sec14-content .slide-content.slide-content2 .slide-img {
    width: 89.0613333333vw;
    height: 58.8186666667vw;
  }

  .x8a .sec14 .sec14-content .slide-content.slide-content3 .slide-img,
  .x8a .sec14 .sec14-content .slide-content.slide-content4 .slide-img,
  .x8a .sec14 .sec14-content .slide-content.slide-content5 .slide-img {
    width: 94.6746666667vw;
    height: 63.3173333333vw;
  }

  .x8a .sec14 .sec14-content .slide-content.slide-content3 .slide-text,
  .x8a .sec14 .sec14-content .slide-content.slide-content5 .slide-text {
    width: 94.9333333333vw;
  }
}

/* .x8a .sec13.is-active1 .sec13-content .sec13-text .sec13-title {
transform: translate(0, 0);
opacity: 1;
transition: all 0.7s ease;
}
.x8a .sec13.is-active1 .sec13-content .sec13-text .sec13-txt {
transform: translate(0, 0);
opacity: 1;
transition: all 0.7s ease 0.1s;
}
.x8a .sec13 .sec13-content {
padding: 5.2083333333vw 0;
display: flex;
justify-content: flex-end;
align-items: center;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.x8a .sec13 .sec13-content {
padding: 0 0 13.3333333333vw;
flex-direction: column-reverse;
justify-content: center;
align-items: flex-start;
}
}
.x8a .sec13 .sec13-content .sec13-text {
width: 29.375vw;
margin-right: 3.125vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.x8a .sec13 .sec13-content .sec13-text {
width: 85.0666666667vw;
margin-left: 5.0666666667vw;
margin-right: 0;
}
}
.x8a .sec13 .sec13-content .sec13-text .sec13-title {
transform: translate(0, 10vw);
opacity: 0;
transition: all 0.7s ease;
}
.x8a .sec13 .sec13-content .sec13-text .sec13-txt {
width: 26.4583333333vw;
margin-top: 0.78125vw;
transform: translate(0, 10vw);
opacity: 0;
transition: all 0.7s ease;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.x8a .sec13 .sec13-content .sec13-text .sec13-txt {
margin-top: 4vw;
width: 90%;
}
}
.x8a .sec13 .sec13-content .sec13-bgd {
width: 54.375vw;
height: 38.18125vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.x8a .sec13 .sec13-content .sec13-bgd {
width: 100%;
height: 70.2186666667vw;
margin-bottom: 13.3333333333vw;
}
} */
/* .x8a .sec12.is-active1 .sec12-content .sec12-text .sec12-title {
transform: translate(0, 0);
opacity: 1;
transition: all 0.7s ease;
}
.x8a .sec12.is-active1 .sec12-content .sec12-text .sec12-txt {
transform: translate(0, 0);
opacity: 1;
transition: all 0.7s ease 0.1s;
}
.x8a .sec12.is-active1 .sec12-content .sec12-img-wrapper .sec12-img1 {
transform: rotate(14deg);
transition: all 0.7s ease;
}
.x8a .sec12.is-active1 .sec12-content .sec12-img-wrapper .sec12-img2 {
opacity: 1;
transition: all 0.7s ease;
}
.x8a .sec12 .sec12-content .sec12-bgd {
width: 100%;
height: 56.25vw;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.x8a .sec12 .sec12-content .sec12-bgd {
height: 216.5333333333vw;
}
}
.x8a .sec12 .sec12-content .sec12-text {
width: 28.3854166667vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 18vw), -50%);
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.x8a .sec12 .sec12-content .sec12-text {
transform: translate(0, calc(-50% + 47vw));
left: 5.3333333333vw;
width: 91.7333333333vw;
}
}
.x8a .sec12 .sec12-content .sec12-text .sec12-title {
transform: translate(0, 10vw);
opacity: 0;
transition: all 0.7s ease;
}
.x8a .sec12 .sec12-content .sec12-text .sec12-txt {
margin-top: 0.78125vw;
width: 98%;
transform: translate(0, 10vw);
opacity: 0;
transition: all 0.7s ease;
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.x8a .sec12 .sec12-content .sec12-text .sec12-txt {
margin-top: 4vw;
}
}
.x8a .sec12 .sec12-content .sec12-img-wrapper {
width: 30.4166666667vw;
height: 20.2083333333vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 18vw), -50%);
}
@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
.x8a .sec12 .sec12-content .sec12-img-wrapper {
transform: translate(-50%, calc(-50% - 20vw));
width: 70.7866666667vw;
height: 47.0293333333vw;
}
}
.x8a .sec12 .sec12-content .sec12-img-wrapper .sec12-img1 {
width: 100%;
height: 100%;
transform-origin: 120% 35%;
transition: all 0.7s ease;
}
.x8a .sec12 .sec12-content .sec12-img-wrapper .sec12-img2 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.7s ease;
} */
.x8a .sec11.is-active1 .sec11-content .mid-wrapper .sec11-magicos {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.7s ease;
}

.x8a .sec11.is-active1 .sec11-content .mid-wrapper .sec11-text {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.7s ease 0.1s;
}

.x8a .sec11 .sec11-content .sec11-bgd {
  width: 100%;
  height: 53.5416666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec11 .sec11-content .sec11-bgd {
    height: 177.8666666667vw;
  }
}

.x8a .sec11 .sec11-content .mid-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.x8a .sec11 .sec11-content .mid-wrapper .sec11-magicos {
  width: 24.3453125vw;
  height: 21.6145833333vw;
  margin: 0 auto;
  transform: translate(0, 5vw);
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec11 .sec11-content .mid-wrapper .sec11-magicos {
    width: 62.08vw;
    height: 55.1173333333vw;
    margin: 0 auto;
  }
}

.x8a .sec11 .sec11-content .mid-wrapper .sec11-text {
  text-align: center;
  width: 25.4166666667vw;
  margin-top: 1.9270833333vw;
  transform: translate(0, 5vw);
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec11 .sec11-content .mid-wrapper .sec11-text {
    width: 74.4vw;
    margin-top: 4.5333333333vw;
  }
}

.x8a .sec10 {
  height: 130vh;
  position: relative;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec10 {
    height: auto;
  }
}

.x8a .sec10.is-active1 .sec10-content .sec10-product-wrapper .sec10-turbo {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: all 0.7s ease;
}

.x8a .sec10.is-active1 .sec10-content .sec10-product-wrapper .sec10-in-wrapper {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: all 0.7s ease;
}

.x8a
  .sec10.is-active1
  .sec10-content
  .sec10-product-wrapper
  .sec10-in-wrapper
  .sec10-in2 {
  opacity: 1;
  transition: all 0.5s ease 0.2s;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec10.is-active1 .sec10-content .sec10-product-wrapper .sec10-txt-mob {
    transform: translate(-50%, calc(-50% + 87vw));
    opacity: 1;
    transition: all 0.5s ease 0.2s;
  }
}

.x8a .sec10 .sec10-content {
  width: 100%;
  height: calc(100vh - 52px);
  overflow: hidden;
  position: sticky;
  top: 52px;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec10 .sec10-content {
    height: 216.5333333333vw;
    position: relative;
    top: 0;
  }
}

.x8a .sec10 .sec10-content .sec10-bgd {
  width: 100%;
  height: 100%;
}

.x8a .sec10 .sec10-content .sec10-bgd .sec9-picture {
  height: 100%;
}

.x8a .sec10 .sec10-content .sec10-product-wrapper {
  width: 42.3205208333vw;
  height: 27.949296875vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-52%, -47%);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec10 .sec10-content .sec10-product-wrapper {
    width: 94.9333333333vw;
    height: 62.696vw;
    transform: translate(-50%, -55%);
  }
}

.x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-product {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-turbo {
  width: 33.90625vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  text-align: center;
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-turbo {
    width: 77.3333333333vw;
  }
}

.x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-turbo .turbo {
  width: 18.5416666667vw;
  height: 3.0208333333vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-turbo .turbo {
    width: 52.5333333333vw;
    height: 8.5333333333vw;
  }
}

.x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-turbo .sec10-title {
  margin-bottom: 1.8229166667vw;
  color: #fff;
}

.x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-turbo .sec10-txt {
  color: #fff;
}

.x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-in-wrapper {
  width: 121.1744791667vw;
  height: 62.0048177083vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-in-wrapper {
    width: 129.8666666667vw;
    height: 132.3546666667vw;
  }
}

.x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-in-wrapper .sec10-in2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec10 .sec10-content .sec10-product-wrapper .sec10-txt-mob {
    width: 89.0666666667vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 74vw));
    text-align: center;
    opacity: 0;
    transition: all 0.7s ease;
  }
}

.x8a .sec9.is-active1 .sec9-content .sec9-text .sec9-title {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.7s ease;
}

.x8a .sec9.is-active1 .sec9-content .sec9-text .sec9-txt {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.7s ease 0.1s;
}

.x8a .sec9.is-active1 .sec9-content .sec9-text .data-wrapper {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 0.7s ease 0.2s;
}

.x8a .sec9 .sec9-content {
  padding: 5.2083333333vw 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec9 .sec9-content {
    flex-direction: column-reverse;
    justify-content: center;
    padding: 10.6666666667vw 0 0;
  }
}

.x8a .sec9 .sec9-content .sec9-bgd {
  width: 54.375vw;
  height: 38.18125vw;
  margin-right: 8.4375vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec9 .sec9-content .sec9-bgd {
    margin-right: 0;
    width: 100%;
    height: 78.9333333333vw;
  }
}

.x8a .sec9 .sec9-content .sec9-text {
  width: 26.71875vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec9 .sec9-content .sec9-text {
    width: 89.3333333333vw;
    margin: 0 auto;
  }
}

.x8a .sec9 .sec9-content .sec9-text .sec9-title {
  margin-bottom: 0.8333333333vw;
  transform: translate(0, 10vw);
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec9 .sec9-content .sec9-text .sec9-title {
    margin-bottom: 4vw;
  }
}

.x8a .sec9 .sec9-content .sec9-text .sec9-txt {
  margin-bottom: 3.59375vw;
  transform: translate(0, 10vw);
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec9 .sec9-content .sec9-text .sec9-txt {
    margin-bottom: 9.3333333333vw;
  }
}

.x8a .sec9 .sec9-content .sec9-text .data-wrapper {
  transform: translate(0, 10vw);
  opacity: 0;
  transition: all 0.7s ease;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec9 .sec9-content .sec9-text .data-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
}

.x8a .sec9 .sec9-content .sec9-text .data-wrapper .every-data {
  margin-bottom: 1.0416666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec9 .sec9-content .sec9-text .data-wrapper .every-data {
    width: 50%;
    margin-bottom: 6.4vw;
  }
}

.x8a .sec9 .sec9-content .sec9-text .data-wrapper .every-data .txt2 {
  font-size: 1.6666666667vw;
  color: #45a6ff;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .sec9 .sec9-content .sec9-text .data-wrapper .every-data .txt2 {
    font-size: 5.3333333333vw;
  }
}

.x8a .section-kv {
  width: 100%;
  height: 56.25vw;
  position: relative;
  overflow: hidden;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv {
    height: 177.8666666667vw;
    overflow: hidden;
  }
}

.x8a .section-kv #trigger-ga {
  position: absolute;
  top: 20vh;
}

.x8a .section-kv .text-wrapper {
  width: 46.3541666667vw;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 1.0416666667vw;
  text-align: center;
}

@media (width: 1024px) and (orientation: landscape) {
  .x8a .section-kv .text-wrapper {
    width: 46.208333vw;
    right: 2vw;
  }
}

@media (min-aspect-ratio: 661/758) and (max-width: 1000px) {
  .x8a .section-kv .text-wrapper {
    width: 53.354167vw;
    right: -2vw;
  }
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv .text-wrapper {
    width: 92vw;
    top: 20%;
    right: auto;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.x8a .section-kv .text-wrapper .sec1-name {
  width: 23.6979166667vw;
  height: 2.3510416667vw;
  margin: 0 auto;
  margin-bottom: 1.0416666667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv .text-wrapper .sec1-name {
    width: 61.6vw;
    height: 6.4vw;
    margin-bottom: 4vw;
  }
}

.x8a .section-kv .text-wrapper .txt-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: scale(0.7);
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv .text-wrapper .txt-wrapper {
    width: 112vw;
    transform: scale(0.7);
  }
}

.x8a .section-kv .text-wrapper .txt-wrapper .every-txt {
  text-align: center;
}

.x8a .section-kv .text-wrapper .txt-wrapper .every-txt p {
  font-size: 0.9375vw;
  white-space: nowrap;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv .text-wrapper .txt-wrapper .every-txt p {
    font-size: 2.1333333333vw;
  }
}

.x8a .section-kv .text-wrapper .txt-wrapper .line {
  width: 1px;
  height: 2.3vw;
  border-right: 1px solid #000;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv .text-wrapper .txt-wrapper .line {
    height: 5.3333333333vw;
  }
}

.x8a .section-kv .bottom-wrapper {
  width: 42.5vw;
  position: absolute;
  bottom: 1.25vw;
  right: 1.25vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv .bottom-wrapper {
    width: 136vw;
    bottom: 4.25vw;
    right: 4.25vw;
  }
}

.x8a .section-kv .bottom-wrapper .magicos {
  width: 6.9270833333vw;
  height: 1.6145833333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv .bottom-wrapper .magicos {
    width: 11.4666666667vw;
    height: 2.9333333333vw;
  }
}

.x8a .section-kv .bottom-wrapper p {
  width: 100%;
  font-size: 0.625vw;
  transform: scale(0.5);
  color: rgba(0, 0, 0, 0.6);
  transform-origin: right top;
  margin-top: 0.5208333333vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv .bottom-wrapper p {
    transform: scale(0.3);
  }
}

.x8a .section-note {
  padding: 7.4166666667vw 0;
  background: #fff;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .x8a .section-note {
    padding: 13.3333333333vw 0 26.6666666667vw;
  }
}

.x8a .section-note .note-container {
  width: 72.5vw;
  margin: 0 auto;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .x8a .section-note .note-container {
    width: 84vw;
  }
}

.x8a .section-note .line {
  width: 100%;
  border-top: 1px solid rgb(0, 0, 0);
}

.x8a .section-note .decimal {
  list-style: decimal;
  padding-left: 1.5625vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .x8a .section-note .decimal {
    padding-left: 4vw;
  }
}

.x8a .section-note .decimal li {
  margin-bottom: 0.5208333333vw;
  list-style: decimal;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .x8a .section-note .decimal li {
    margin-bottom: 1.3333333333vw;
  }
}

.x8a .section-note .decimal li:not(last-of-type) {
  margin-bottom: 0;
}

.x8a .section-note .star {
  list-style: none;
  padding-left: 1.5625vw;
  margin-top: 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .x8a .section-note .star {
    padding-left: 4vw;
  }
}

.x8a .section-note .star li::after {
  content: "*";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(calc(-100% - 0.1041666667vw));
}

.x8a .section-note p {
  padding: 0 0.5208333333vw;
  margin: 3.6458333333vw 0 1.0416666667vw;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .x8a .section-note p {
    padding: 0;
    margin: 9.3333333333vw 0 4vw;
  }
}

.x8a .section-note p,
.x8a .section-note li {
  position: relative;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.6;
}

@media (max-aspect-ratio: 12/10) and (max-width: 1025px) {
  .x8a .section-note p,
  .x8a .section-note li {
    font-size: 12px;
  }
}

@media (width: 768px) and (orientation: portrait),
  (width: 1024px) and (orientation: portrait) {
  .x8a .ff-18 {
    font-size: 2.533333vw;
  }

  .x8a .ff-32 {
    font-size: 4.4vw;
  }

  .x8a .ff-48 {
    font-size: 6.533333vw;
  }

  .x8a .sec3 .text-wrap .text-list .list .item-text {
    font-size: 2.2vw;
  }

  .x8a .sec3 .img-wrap {
    margin-top: 3vw;
  }

  .x8a .sec4 .sec-sticky {
    row-gap: 3vw;
  }

  .x8a .sec5 .sec5-list {
    row-gap: 1.666667vw;
  }
}

.x8a .section-kv .kvBuyBtn {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 0.9375vw;
  border-radius: 2.6041666667vw;
  border: 1.5px solid #7f7f7f;
  color: #000;
  padding: 0.5208333333vw 1.5625vw;
  line-height: 1;
  transition: border-color 0.1s linear;
  margin-top: 1.8229166667vw;
}

@media (max-aspect-ratio: 660/758) and (max-width: 1025px) {
  .x8a .section-kv .kvBuyBtn {
    font-size: 3.7333333333vw;
    transform: none;
    padding: 2.1333333333vw 4.8vw;
    border-radius: 8vw;
    margin-top: 6.6666666667vw;
  }
}

@media (min-width: 1366px) {
  .x8a .section-kv .kvBuyBtn:hover {
    border-color: #000;
  }
}