:root {
  --primary: #ff7a00;
  --primary_hover: #ff8f2b;
  --ink: #150a00;
  --bg: #060607;
  --bg2: #0d0e10;
  --bg3: #181b1e;
  --white: #f3f5f7;
  --text: #8b9299;
  --text2: #bfc5cc;
  --line: rgba(191, 197, 204, 0.08);
  --light: #f2f3f4;
  --title: #222222;
  --body: #333333;
}

html {
  scroll-behavior: smooth;
  font-size: clamp(7.5px, 0.520834vw, 10px);
}

.content {
  max-width: 144rem;
  margin: 0px auto;
  position: relative;
}

.content .content {
  padding: 0px;
}

.img.img_cv {
  overflow: hidden;
}

.img.img_cv img {
  object-fit: cover;
}

.img.img_ct img {
  object-fit: contain;
}

.img img {
  width: 100%;
  height: 100%;
  display: block;
  transition: 0.5s;
  aspect-ratio: inherit;
}

.tcon h1,
.tcon h2 {
  color: var(--white);
  font-weight: 600;
  font-size: 4.8rem;
  line-height: 5.8rem;
}

.tcon .tag + h1,
.tcon .tag + h2 {
  margin-top: 1.6rem;
}

.tcon h1 em,
.tcon h2 em {
  color: var(--primary);
}

.tcon p {
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Manrope', sans-serif;
  font-size: 1.8rem;
  line-height: 3rem;
}

.tcon h1 + p,
.tcon h2 + p {
  margin-top: 3.4rem;
}

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

.tcon.dark h1,
.tcon.dark h2 {
  color: var(--title);
}

.tcon.dark p {
  color: rgba(51, 51, 51, 0.75);
}

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

@media screen and (min-width: 769px) and (max-width: 1540px) {
  .content {
      padding: 0px 4rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .content {
      max-width: 960px;
    }

  .tcon h1,
    .tcon h2 {
      font-size: 4.4rem;
      line-height: 1.2;
    }
}

@media screen and (max-width: 768px) {
  .content {
      padding: 0px 20px;
    }

  .tcon .tag + h1,
    .tcon .tag + h2 {
      margin-top: 10px;
    }

  .tcon h1,
    .tcon h2 {
      font-size: 28px;
      line-height: 1.25;
    }

  .tcon p {
      font-size: 15px;
      line-height: 1.7;
    }

  .tcon h1 + p,
    .tcon h2 + p {
      margin-top: 14px;
    }
}

.pd_features {
  background-color: var(--bg);
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 13.07rem 0px 15.45rem;
}

.pd_features::before,
.pd_features::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(255, 122, 0, 0.7) 0%, rgba(255, 122, 0, 0.67) 2%, rgba(255, 122, 0, 0.43) 20%, rgba(255, 122, 0, 0.25) 36%, rgba(255, 122, 0, 0.11) 50%, rgba(255, 122, 0, 0.03) 62%, rgba(255, 122, 0, 0) 69%);
}

.pd_features::before {
  right: -28.98rem;
  top: -4.26rem;
  width: 73.55rem;
  height: 73.55rem;
  opacity: 0.36;
}

.pd_features::after {
  left: -63.66rem;
  top: -20.93rem;
  width: 121.41rem;
  height: 121.41rem;
  opacity: 0.46;
}

.pd_features .tcon .tag {
  display: flex;
  width: max-content;
}

.pd_features .tcon .tag + h2 {
  margin-top: 1.24rem;
}

.pd_features .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem 1.55rem;
  margin-top: 4.12rem;
}

.pd_features .tabs button {
  display: block;
  width: 18.3rem;
  height: 4.2rem;
  border: 1px solid rgba(243, 245, 247, 0.3);
  border-radius: 2.1rem;
  white-space: nowrap;
  color: #fff;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: 0.3s;
}

.pd_features .tabs button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pd_features .tabs li.active button {
  border-color: var(--primary);
  color: var(--title);
  background-color: var(--primary);
}

.pd_features .slider {
  margin-top: 13.9rem;
}

.pd_features .track {
  display: flex;
  align-items: stretch;
  gap: 3rem;
  transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
  touch-action: pan-y;
}

.pd_features .track li {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 62rem;
  min-width: 0px;
  height: 62.56rem;
  padding: 3.4rem 3.1rem 3.1rem 3rem;
  border: 1px solid rgba(191, 197, 204, 0.08);
  border-radius: 1.4rem;
  cursor: pointer;
  user-select: none;
  background-color: var(--bg2);
  transition: flex-basis 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.5s;
}

.pd_features .track li.active {
  flex-basis: 79rem;
  cursor: default;
  background-color: #fff;
}

.pd_features .track li::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 4.02rem;
  width: 0.4rem;
  height: 16.95rem;
  transform: scaleY(0);
  background-color: var(--primary);
  transition: transform 0.5s;
}

.pd_features .track li.active::before {
  transform: scaleY(1);
}

.pd_features .txt .num {
  display: block;
  color: var(--primary);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.5rem;
  letter-spacing: 0.06em;
}

.pd_features .txt h3 {
  margin-top: 2.69rem;
  color: #fff;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 3.3rem;
  transition: color 0.5s;
}

.pd_features .txt p {
  margin-top: 1.48rem;
  max-width: 52rem;
  margin-left: -0.1rem;
  color: rgba(255, 255, 255, 0.62);
  font-family: 'Manrope', sans-serif;
  font-size: 1.6rem;
  line-height: 2.8rem;
  transition: color 0.5s;
}

.pd_features .track li.active h3 {
  color: var(--title);
}

.pd_features .track li.active p {
  max-width: 70rem;
  color: rgba(51, 51, 51, 0.62);
}

.pd_features .pic {
  flex-shrink: 0;
  height: 33rem;
  margin-top: auto;
  border-radius: 1.4rem;
  background-color: #000;
}

.pd_features .pic img {
  pointer-events: none;
}

.pd_features .track li:nth-child(2) .pic img {
  object-position: 10% center;
}

.pd_features .track li:nth-child(3) .pic img {
  object-position: 6% center;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pd_features {
      padding: 11rem 0px 12rem;
    }

  .pd_features .tabs {
      margin-top: 3.6rem;
    }

  .pd_features .tabs button {
      width: auto;
      height: 5rem;
      padding: 0px 2.8rem;
      border-radius: 2.5rem;
      font-size: 1.8rem;
    }

  .pd_features .slider {
      margin-top: 5rem;
    }

  .pd_features .track li {
      flex-basis: 56rem;
      height: auto;
      min-height: 62rem;
    }

  .pd_features .track li.active {
      flex-basis: 72rem;
    }

  .pd_features .txt h3 {
      font-size: 2.8rem;
      line-height: 1.3;
    }

  .pd_features .txt p {
      font-size: 1.9rem;
      line-height: 1.65;
    }

  .pd_features .pic {
      height: 30rem;
      margin-top: 3.6rem;
    }
}

@media screen and (max-width: 768px) {
  .pd_features {
      padding: 64px 0px 70px;
    }

  .pd_features::before {
      right: -300px;
      top: -60px;
      width: 520px;
      height: 520px;
    }

  .pd_features::after {
      left: -420px;
      top: 120px;
      width: 700px;
      height: 700px;
    }

  .pd_features .tcon h2 br {
      display: none;
    }

  .pd_features .tabs {
      flex-wrap: nowrap;
      gap: 8px;
      margin: 24px -20px 0px;
      padding: 0px 20px;
      overflow-x: auto;
      scrollbar-width: none;
    }

  .pd_features .tabs::-webkit-scrollbar {
      display: none;
    }

  .pd_features .tabs button {
      width: auto;
      height: 38px;
      padding: 0px 16px;
      border-radius: 19px;
      font-size: 14px;
    }

  .pd_features .slider {
      margin-top: 28px;
    }

  .pd_features .track {
      gap: 12px;
    }

  .pd_features .track li,
    .pd_features .track li.active {
      flex-basis: 86%;
      height: auto;
      padding: 22px 18px 18px;
      border-radius: 14px;
    }

  .pd_features .track li::before {
      top: 24px;
      width: 3px;
      height: 110px;
    }

  .pd_features .txt .num {
      font-size: 15px;
      line-height: 20px;
    }

  .pd_features .txt h3 {
      margin-top: 12px;
      font-size: 19px;
      line-height: 26px;
    }

  .pd_features .txt p {
      margin: 8px 0px 0px;
      font-size: 14px;
      line-height: 22px;
    }

  .pd_features .pic {
      height: auto;
      aspect-ratio: 16 / 9;
      margin-top: 20px;
      border-radius: 10px;
    }
}