/* latin */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Montserrat-Medium.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Montserrat-SemiBold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@media screen and (max-width: 1919px) {
  html {
    font-size: 0.833333vw;
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 1rem;
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 4.266667vw;
  }
}

@media screen and (max-width: 1024px) {
  html { max-width: 375px; margin-left: auto; margin-right: auto; }
}

*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
img { max-width: 100%; }
/* picture img { display: block; width: 100%; height: 100%; } */
ul { list-style: none; }
button, a { text-decoration: none; border: 0 solid transparent; cursor: pointer; background-color: transparent; font: inherit; color: inherit; outline: 0; }

body {
  margin: 0;
  font-family: Montserrat, -apple-system, "PingFang SC", "Source Han Sans CN", BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: #111111;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: 96rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* @media screen and (max-width: 1536px) {
  .container {
    max-width: 1280px;
  }
} */

/* @media screen and (max-width: 1280px) {
  .container { width: 1024px; }
} */

@media screen and (max-width: 1024px) {
  .container { max-width: 375px; width: 100%; }
}

@media screen and (max-width: 1024px) {
  .banner-heading { transform: none !important; top: 0 !important; text-align: center; }
}

.banner-title {
  font-size: 1.75rem;
  letter-spacing: 1.5em;
}

@media screen and (min-width: 1024px) {
  .banner-e { font-size: 4rem; }
}

@media screen and (max-width: 1024px) {
  .banner-title {
    font-size: 1rem;
    margin-left: auto; margin-right: auto;
    letter-spacing: 1em;
    position: relative;
    left: 8px;
  }
}

.feature-block {
  height: 18.125rem;
  position: relative;
}

/* .feature-block.size-1::after {
  padding-top: 128.571428%;
}

.feature-block.size-2::after {
  padding-top: 60%;
} */

.feature-picture {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.feature-img { border-radius: ; display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .feature-block {
    height: 8.75rem;
  }
  /* .feature-block.size-1::after {
    padding-top: 100%;
  }
  .feature-block.size-2::after {
    padding-top: 50%;
  } */
}

.section3-screen {
  position: absolute;
  width: 60%;
  left: 23.75rem;
  top: 17.5rem;
}

.section3-container {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin-left: auto; margin-right: auto;
}

@media screen and (max-width: 1024px) {
  .section3-screen { display: none; }
}

.section5-container {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin-left: auto;
  margin-right: auto;
}

.section5-picture::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 25%);
}

@media (max-width: 1024px) {
  .section5-container { text-align: center; }
}

.splide1nav { margin-top: 26.25rem; }
@media (max-width: 1024px) {
  .splide1nav { margin-top: 0; }
}
.slide-explain { width: 45%; }
.slide-image { width: 55%; }

@media screen and (max-width: 1024px) {
  .section7 {
    background-size: auto 640px;
    background-position: 50% 100%;
    height: 960px;
  }
}

@media screen and (max-width: 768px) {
  .section7 {
    background-size: auto 320px;
    height: 600px;
  }
}

.ripple, .ripple2, .ripple3, .ripple4 {
  border-radius: 9999px;
  width: 100%; height: 100%;
}

.ripple {
  width: 16rem;
  height: 16rem;
  background-color: rgba(255, 110, 0, 0);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6rem;
  padding: 3rem;
}

.ripple2 { padding: 2rem; background-color: rgba(255, 110, 0, 0); }
.ripple3 { padding: 1.75rem; background-color: rgba(255, 110, 0, 0); }
.ripple4 { position: relative; background-color: rgba(255, 110, 0, 0); }
.ripple4::before, .ripple4::after {
  content: '';
  opacity: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: rgba(255, 110, 0, 0.5);;
  border-radius: 100%;
  animation-name: ripple;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.65,0,.34,1);
  z-index: -1;
}

.ripple4::after {
  animation-delay: 300ms;
}

@media screen and (max-width: 1024px) {
  .ripple {
    width: 8rem; height: 8rem;
    padding: 1.5rem;
    bottom: 0.75rem;
  }
  .ripple2 { padding: 1rem; }
  .ripple3 { padding: 0.75rem; }
}

@keyframes ripple {
  from { opacity: 1; transform: scale3d(0.5,0.5,1); }
  to { opacity: 0; transform: scale3d(8,8,1); }
}

.section3, .section5, .section7 {
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 50% 0%;
}

.section3, .section5, .section9 {
  height: 60rem;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

.section7 {
  height: 62.5rem;
}

.section5-picture, .section7-picture, .section9-picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section5-bg, .section7-bg, .section9-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
}

@media (max-width: 1024px) {
  .section5 { height: 30rem; }
  .section7 { height: 32.5rem; }
  .section3, .section9 { height: 37.5rem; }

  .section5-bg {
    transform: translateX(-48%);
  }

  .section9-bg {
    transform: translateX(-48%);
  }

  .section7-picture {
    position: absolute;
    top: auto;
    bottom: 0;
    height: 20rem;
  }
}

.splide2 .splide__slide::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  transition: background-color 250ms;
}

.splide2 .splide__slide.is-active::after { background-color: rgba(0, 0, 0, 0); }


/* Utilities */
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.white, .group:hover .group-hover\:white, .hover\:white:hover { color: white; }
.white-50 { color: rgba(255, 255, 255, 0.5); }
.white-70 { color: rgba(255, 255, 255, 0.7); }
.bg-white { background-color: white; }
.black { color: black; }
.black-50 { color: rgba(0, 0, 0, 0.5); }
.black-30 { color: rgba(0, 0, 0, 0.3); }
.border-6B748A-30 { border-color: rgba(107, 116, 138, 0.3); }
.border-black { border-color: rgba(0, 0, 0, 1); }
.primary, .hover\:primary:hover, .active\:primary.is-active, .active\:primary.active { color: #ff6e00; }
.border-primary, .hover\:border-primary:hover, .active\:border-primary.is-active, .active\:border-primary.active { border-color: #ff6e00; }
.bg-primary, .hover\:bg-primary:hover { background-color: #ff6e00; }
.bg-whitesmoke { background-color: #f7f7f7; }
.hover\:bg-black:hover { background-color: rgba(0, 0, 0, 1); }
.gray { color: #b2b2b2; }
.abs-center-x { left: 50%; transform: translateX(-50%); }
.abs-center-y { top: 50%; transform: translateY(-50%); }
.stroke-current { stroke: currentColor; }
.rotate-180 { transform: rotate(180deg); }
.offset-1\/2 { margin-left: 50%; }
.between-y-4 + .between-y-4 { margin-top: 1rem; }
.bg-transparent { background-color: transparent; }
.pingfang { font-family: 'pingfang sc'; }
@media screen and (max-width: 1024px) {
  .lg\:offset-0 { margin-left: 0; }
  .lg\:text-2\.5xl { font-size: 1.75rem !important; line-height: 2rem !important; }
  .lg\:text-2xs { font-size: 10px !important; line-height: 1rem !important; }
  .lg\:text-3xs { font-size: 0.5rem !important; line-height: 0.875rem !important; }
  .lg\:text-center { text-align: center !important; }

  .lg\:text-left { text-align: left !important; }
}
.overlay::before {
  content: '';
  background-image: linear-gradient(0deg, #b6b6b6, transparent);
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 50%;
  mix-blend-mode: multiply;
}

.before-disc { padding-left: 24px; position: relative; }
.before-disc::before {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background-color: #ffffff;
  top: 50%; left: 0;
  margin-top: -4px;
  margin-left: 8px;
}

.slide-in, .fade-in { visibility: hidden; }

/* Splide library */

@keyframes splide-loading {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.splide__track--fade>.splide__list {
  display: block
}

.splide__track--fade>.splide__list>.splide__slide {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 0
}

.splide__track--fade>.splide__list>.splide__slide.is-active {
  opacity: 1;
  position: relative;
  z-index: 1
}

.splide--rtl {
  direction: rtl
}

.splide__track--ttb>.splide__list {
  display: block
}

.splide__container {
  box-sizing: border-box;
  position: relative
}

.splide__list {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto
}

.splide__progress__bar {
  width: 0
}

.splide {
  position: relative;
  visibility: hidden
}

.splide.is-initialized,
.splide.is-rendered {
  visibility: visible
}

.splide__slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative
}

.splide__slide img {
  vertical-align: bottom
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
  display: none
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0
}

:lang(en) .banner-title {
  letter-spacing: 0.1em;
}