.main-page {
  background-image: url('/assets/images/main/main_bg.webp');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.main-page .content {
  padding-bottom: 5.9375rem;
}

.main-mv {
  height: 67.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}
.main-mv h2 {
  background: var(
    --gradient-2,
    linear-gradient(90deg, #f0f0f0 0%, #0ad8f8 69.49%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-size: 6.25rem;
  font-weight: 300;
}

.main-tit__area em {
  font-size: 1.375rem;
  color: #fff;
}
.main-tit__area h2 {
  margin-top: 1.875rem;
  font-size: 4.375rem;
  color: rgba(239, 239, 239, 0.2);
}
.main-tit__area h2 span {
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200% auto;
  background-position: -100% -100%;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(var(--green)),
    color-stop(50%, var(--green)),
    color-stop(50%, rgba(239, 239, 239, 0.2)),
    to(rgba(239, 239, 239, 0.2))
  );
  background-image: linear-gradient(
    90deg,
    var(--green) 0%,
    var(--green) 50%,
    rgba(239, 239, 239, 0.2) 50%,
    rgba(239, 239, 239, 0.2) 100%
  );
}
.main-tit__area p {
  color: #fff;
  line-height: 1.62;
  margin-top: 3.125rem;
  font-size: 1.875rem;
  font-weight: 300;
}

.main-where .main-tit__area h2,
.main-about .main-tit__area h2 {
  color: rgba(10, 216, 248, 0.2);
  margin-top: 0;
}
.main-where .main-tit__area h2 span,
.main-about .main-tit__area h2 span {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(var(--blue)),
    color-stop(50%, var(--blue)),
    color-stop(50%, rgba(10, 216, 248, 0.2)),
    to(rgba(10, 216, 248, 0.2))
  );
  background-image: linear-gradient(
    90deg,
    var(--blue) 0%,
    var(--blue) 50%,
    rgba(10, 216, 248, 0.2) 50%,
    rgba(10, 216, 248, 0.2) 100%
  );
}

.main-where {
  padding-block: 16.25rem 30rem;
  text-align: center;
}
.main-where .main-tit__area p {
  margin-top: 6.25rem;
}
.main-where .video {
  margin: 8.125rem auto 0;
  width: 89.0625rem;
  display: block;
  border-radius: 0.9375rem;
  aspect-ratio: 16/9;
}
.main-where .video iframe {
  width: 100%;
  height: 100%;
}

.main-challenge {
  margin-top: 51.1875rem;
}
.main-challenge .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.main-technology {
  margin-top: 27.1875rem;
  text-align: center;
}
.main-technology .main-tit__area p {
  margin-top: 6.25rem;
  font-size: 5.3125rem;
  font-weight: 300;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#2cff5d),
    color-stop(48.5%, #0ad8f8),
    color-stop(87%, #f0f0f0)
  );
  background: linear-gradient(90deg, #2cff5d 0%, #0ad8f8 48.5%, #f0f0f0 87%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.4;
}

.main-counting {
  margin-top: 41rem;
}

.main-counting__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.125rem;
}
.main-counting__list li {
  padding: 3.75rem;
  border-radius: 0.9375rem;
  background-color: #fff;
  -webkit-box-shadow: 0.25rem 0.25rem 0.25rem 0.25rem rgba(3, 27, 47, 0.3);
  box-shadow: 0.25rem 0.25rem 0.25rem 0.25rem rgba(3, 27, 47, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8.125rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.main-counting__list li em {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}
.main-counting__list li p {
  font-size: 7.5rem;
  font-weight: 300;
  line-height: 1;
}
.main-counting__list li p span {
  line-height: 1;
}
.main-counting__list li button {
  height: 3.4375rem;
  border-radius: 0.9375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-inline: 2rem;
  border: 0.0625rem solid var(--dark);
  font-size: 1.25rem;
  font-weight: 400;
  transition: all ease 0.3s;
}

.main-counting__list li button:hover {
  background-color: #031b2f;
  color: #fff;
}

.main-counting__modal {
  width: 81.25rem;
  height: 39.375rem;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 101;
  display: none;
}
.main-counting__modal > div {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: none;
  border-radius: 0.9375rem;
  background-image: url('/assets/images/main/main_counting_modal_bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 6.25rem;
  text-align: center;
  overflow-y: scroll;
}
.main-counting__modal > div.active {
  display: block;
}
.main-counting__modal > div ul {
  margin-top: 6.25rem;
  max-width: 600px;
  margin-inline: auto;
}
.main-counting__modal > div:first-of-type ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 100%;
}
.main-counting__modal > div:first-of-type ul li {
  border-right: 0.0625rem solid var(--dark);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5rem;
  padding-block: 1.125rem 5.625rem;
}
.main-counting__modal > div:first-of-type ul li:last-child {
  border-right: none;
}
.main-counting__modal > div:first-of-type ul li p {
  color: #031b2f;
  font-size: 1.5625rem;
  font-weight: 300;
  line-height: 2;
}
.main-counting__modal > div:not(:first-of-type) ul li {
  text-align: left;
}
.main-counting__modal > div:not(:first-of-type) ul li p {
  line-height: 1.83;
  display: inline-block;
}
.main-counting__modal > div:not(:first-of-type) ul li p::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.9375rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--dark);
}
.main-counting__modal > div li {
  font-size: 1.5625rem;
  font-weight: 300;
  line-height: 1;
}
.main-counting__modal > div strong {
  font-size: 7.5rem;
  font-weight: 300;
  line-height: 1;
}
.main-counting__modal > div em {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.78;
}
.main-counting__modal::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 67.5rem;
  background-color: rgba(1, 27, 49, 0.8);
  z-index: -1;
}

.main-counting__close {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
}

.main-battery {
  margin-top: 33rem;
}
.main-battery .main-tit__area h2 {
  margin-top: 0;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #0ad8f8 10%,
    #2cff5d 40.5%,
    #fff 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 300;
  font-size: 100px;
}
.main-battery .main-tit__area p {
  margin-top: 1.875rem;
}

.main-about {
  margin-top: 95rem;
}
.main-about .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7.5rem;
}
.main-about picture {
  display: block;
  border-radius: 0.9375rem;
  overflow: hidden;
  width: 53.75rem;
}
.main-about picture img {
  width: 100%;
}
.main-about .main-tit__area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.main-about .main-tit__area a {
  width: 10.625rem;
  height: 3.4375rem;
  background-image: url(/assets/images/main/btn_readmore.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: 40px;
}
.main-about .main-tit__area a:hover {
  background-image: url(/assets/images/main/btn_readmore_hover.svg);
}
.main-clients {
  margin-top: 23.125rem;
}

.main-insights {
  margin-top: 19.375rem;
}
.main-insights .main-tit__area h2 {
  color: var(--blue);
  margin-top: 0;
}