*,
body {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "HarmonyOS Sans";
  src: url("https://gentleone.oss-cn-hongkong.aliyuncs.com/hk/static/fonts/HarmonyOS_Sans_SC_Regular.ttf");
}

@font-face {
  font-family: "HarmonyOS Sans Bold";
  src: url("https://gentleone.oss-cn-hongkong.aliyuncs.com/hk/static/fonts/HarmonyOS_Sans_SC_Bold.ttf");
}

body {
  font-family: "HarmonyOS Sans";
}

html {
  scroll-behavior: smooth;
}

#header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
}

html {
  width: 100%;
}

p {
  margin-bottom: 5px;
}

body {
  --purple: #5c30b4;
  --green: #02ad98;
  --cyan: #68a851;
  --blue: #0c3ebb;
  --orange: #f19541;
  color: #333;
}

.w {
  padding: 0 40px;
}

.tablet-show,
.mobile-show {
  display: none;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}

.fw-bold {
  font-weight: bold;
  font-family: "HarmonyOS Sans Bold";
}

.text-purple {
  color: var(--purple);
}

.text-green {
  color: var(--green);
}

.text-cyan {
  color: var(--cyan);
}

.text-blue {
  color: var(--blue);
}

.text-orange {
  color: var(--orange);
}

.text-white {
  color: #fff;
}

.mt-20 {
  margin-top: 20px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-40 {
  margin-bottom: 40px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-40 {
  margin-left: 40px;
}

.mr-40 {
  margin-right: 40px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.ml-30 {
  margin-left: 30px;
}

.mr-30 {
  margin-right: 30px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-120 {
  margin-top: 120px;
}

.p-20 {
  padding: 20px;
}

.p-40 {
  padding: 40px;
}

.lh-30 {
  line-height: 30px;
}

.lh-40 {
  line-height: 40px;
}

.lh-50 {
  line-height: 50px;
}

h1 {
  font-size: 30px;
  line-height: 40px;
  margin-bottom: 60px;
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end
}

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.show-lg {
  display: block;
}

.show-sm {
  display: none;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-24 {
  font-size: 24px;
}

.fs-26 {
  font-size: 26px;
}

.fs-28 {
  font-size: 28px;
}

.fs-40 {
  font-size: 40px;
}

.border-top-green {
  border-top: 18px solid var(--green);
}

.bg-purple {
  background-color: var(--purple);
}

.border-top-purple {
  border-top: 18px solid var(--purple);
}

.bg-green {
  background-color: var(--green);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-cyan {
  background-color: var(--cyan);
}

.bg-orange {
  background-color: var(--orange);
}

@media (max-width: 997px) {

  .tablet-show {
    display: block!important;
  }

  .tablet-hide {
    display: none!important;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.5rem;
  }

  .mobile-show {
    display: block!important;
  }

  .mobile-hide {
    display: none!important;
  }

  .w {
    padding: 0 20px;
  }

  .container {
    margin: 0;
  }

}