: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);
}

@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_docs {
  background-color: var(--bg);
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 19.46rem 0px 20rem;
}

.pd_docs .glow_l,
.pd_docs .glow_r {
  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_docs .glow_l {
  left: -28.98rem;
  top: 39.63rem;
  width: 73.55rem;
  height: 73.55rem;
  opacity: 0.36;
}

.pd_docs .glow_r {
  right: -62.47rem;
  top: -24.16rem;
  width: 120.84rem;
  height: 120.84rem;
  opacity: 0.46;
}

.pd_docs .content {
  display: flex;
  justify-content: space-between;
  gap: 6rem;
}

.pd_docs .video_box,
.pd_docs .docs_box {
  flex: 0 1 68.07rem;
  min-width: 0px;
}

.pd_docs .tcon .tag {
  display: flex;
  width: max-content;
  margin-left: -0.08rem;
}

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

.pd_docs .tcon h2 + p {
  margin-top: 2.69rem;
  color: rgba(255, 255, 255, 0.7);
}

.pd_docs .video {
  position: relative;
  display: block;
  height: 36.47rem;
  margin-top: 4.28rem;
  overflow: hidden;
  border-radius: 2.2rem;
  background-color: #111;
}

.pd_docs .video .img {
  width: 100%;
  height: 100%;
}

.pd_docs .video::after {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.06);
}

.pd_docs .play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 7.4rem;
  height: 7.4rem;
  margin: -3.7rem 0px 0px -3.7rem;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.3s, background-color 0.3s;
}

.pd_docs .play::after {
  content: '';
  position: absolute;
  left: 3.34rem;
  top: 2.72rem;
  width: 1.28rem;
  height: 1.96rem;
  background-color: #211d1b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='576.4 5664.7 12.8 19.6'%3E%3Cpath d='M588.66,5673.41l-9.88-8.34c-.93-.79-2.37-.13-2.37,1.1v16.69c0,1.22,1.43,1.89,2.37,1.1l9.88-8.34c.68-.57.68-1.62,0-2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='576.4 5664.7 12.8 19.6'%3E%3Cpath d='M588.66,5673.41l-9.88-8.34c-.93-.79-2.37-.13-2.37,1.1v16.69c0,1.22,1.43,1.89,2.37,1.1l9.88-8.34c.68-.57.68-1.62,0-2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pd_docs .video:hover .play {
  transform: scale(1.1);
  background-color: var(--primary);
}

.pd_docs .video:hover img {
  transform: scale(1.04);
}

.pd_docs .docs {
  margin-top: 4.9rem;
}

.pd_docs .docs li + li {
  margin-top: 1.52rem;
}

.pd_docs .docs button {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  height: 10rem;
  padding: 0px 3.41rem 0px 3.54rem;
  border: 1px solid rgba(191, 197, 204, 0.08);
  border-radius: 1.4rem;
  text-align: left;
  background-color: var(--bg2);
  transition: border-color 0.3s, background-color 0.3s;
}

.pd_docs .docs .txt {
  flex: 1;
  min-width: 0px;
}

.pd_docs .docs strong {
  display: block;
  color: #fff;
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.8rem;
}

.pd_docs .docs em {
  display: block;
  margin-top: 0.37rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.53rem;
  line-height: 2.1rem;
}

.pd_docs .docs .more {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1.59rem;
  white-space: nowrap;
  color: #fff;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.3rem;
}

.pd_docs .docs .more::after {
  content: '';
  flex-shrink: 0;
  width: 3.7rem;
  height: 3.7rem;
  border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10' fill='none' stroke='%23150a00' stroke-width='1.5'%3E%3Cpath d='M0 5h14.8M10.1.3 14.8 5l-4.7 4.7'/%3E%3C/svg%3E") no-repeat center / 1.48rem auto;
  transition: background-color 0.3s, background-position 0.3s;
}

.pd_docs .docs button:hover {
  border-color: var(--primary);
  box-shadow: inset 0px 0px 0px 0.025rem var(--primary);
}

.pd_docs .docs button:hover .more::after {
  background-color: var(--primary_hover);
  background-position: calc(50% + 0.3rem) center;
}

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

  .pd_docs .content {
      flex-direction: column;
      gap: 9rem;
    }

  .pd_docs .video_box,
    .pd_docs .docs_box {
      flex: none;
    }

  .pd_docs .tcon h2 + p {
      font-size: 2rem;
      line-height: 1.6;
    }

  .pd_docs .video {
      height: auto;
      aspect-ratio: 680.73 / 364.68;
    }

  .pd_docs .docs {
      margin-top: 4rem;
    }

  .pd_docs .docs strong {
      font-size: 2.2rem;
    }

  .pd_docs .docs em {
      font-size: 1.7rem;
    }

  .pd_docs .docs .more {
      font-size: 1.8rem;
    }
}

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

  .pd_docs .glow_l {
      left: -300px;
      top: 200px;
      width: 560px;
      height: 560px;
    }

  .pd_docs .glow_r {
      right: -420px;
      top: auto;
      bottom: -200px;
      width: 700px;
      height: 700px;
    }

  .pd_docs .content {
      flex-direction: column;
      gap: 56px;
    }

  .pd_docs .video_box,
    .pd_docs .docs_box {
      flex: none;
    }

  .pd_docs .tcon .tag {
      margin-left: 0px;
    }

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

  .pd_docs .tcon h2 + p {
      margin-top: 12px;
    }

  .pd_docs .video {
      height: auto;
      aspect-ratio: 680.73 / 364.68;
      margin-top: 24px;
      border-radius: 14px;
    }

  .pd_docs .play {
      width: 56px;
      height: 56px;
      margin: -28px 0px 0px -28px;
    }

  .pd_docs .play::after {
      left: 25px;
      top: 20px;
      width: 10px;
      height: 16px;
    }

  .pd_docs .docs {
      margin-top: 24px;
    }

  .pd_docs .docs li + li {
      margin-top: 10px;
    }

  .pd_docs .docs button {
      gap: 12px;
      height: auto;
      min-height: 76px;
      padding: 14px 14px 14px 18px;
      border-radius: 12px;
    }

  .pd_docs .docs strong {
      font-size: 15px;
      line-height: 21px;
    }

  .pd_docs .docs em {
      margin-top: 3px;
      font-size: 12px;
      line-height: 17px;
    }

  .pd_docs .docs .more {
      gap: 8px;
      font-size: 0px;
    }

  .pd_docs .docs .more::after {
      width: 34px;
      height: 34px;
      background-size: 13px auto;
    }
}