: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_kit {
  position: relative;
  z-index: 1;
  padding: 14.86rem 0px 15.39rem;
  background-color: var(--light);
}

.pd_kit .tcon .tag {
  display: flex;
  width: max-content;
  color: rgba(34, 34, 34, 0.5);
}

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

.pd_kit .tcon h2 + p {
  margin-top: 2.84rem;
  color: rgba(51, 51, 51, 0.7);
  line-height: 2.4rem;
}

.pd_kit .list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  gap: 3rem;
  margin-top: 5.5rem;
}

.pd_kit .item {
  display: block;
  height: 35.19rem;
  overflow: hidden;
  border: 1px solid #e2e2e2;
  border-radius: 1.4rem;
  background-color: #fff;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}

.pd_kit .item .pic {
  height: 24rem;
  margin: -1px -1px 0px;
  border-radius: 1.4rem;
  background-color: #111;
}

.pd_kit .item h3 {
  margin-top: 1.86rem;
  padding: 0px 2rem 0px 2.9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #0a0b0d;
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 3.1rem;
  transition: color 0.3s;
}

.pd_kit .item p {
  margin-top: 0.53rem;
  padding: 0px 2rem 0px 2.9rem;
  color: rgba(51, 51, 51, 0.7);
  font-size: 1.6rem;
  line-height: 2.3rem;
}

.pd_kit .item:hover {
  border-color: rgba(255, 122, 0, 0.5);
  box-shadow: 0px 1.6rem 3.6rem rgba(10, 11, 13, 0.08);
  transform: translateY(-0.4rem);
}

.pd_kit .item:hover .pic img {
  transform: scale(1.05);
}

.pd_kit .item:hover h3 {
  color: var(--primary);
}

.pd_kit .sub_title {
  margin-top: 9.66rem;
  color: var(--title);
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 5.1rem;
}

.pd_kit .sub_title + .list {
  margin-top: 4.65rem;
}

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

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

  .pd_kit .list {
      gap: 2rem;
    }

  .pd_kit .item {
      height: 100%;
      padding-bottom: 3rem;
    }

  .pd_kit .item .pic {
      height: auto;
      aspect-ratio: 337.5 / 240;
    }

  .pd_kit .item h3,
    .pd_kit .item p {
      padding: 0px 2rem;
      white-space: normal;
    }

  .pd_kit .item h3 {
      font-size: 2.2rem;
      line-height: 1.3;
    }

  .pd_kit .item p {
      font-size: 1.7rem;
      line-height: 1.4;
    }

  .pd_kit .sub_title {
      margin-top: 8rem;
    }
}

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

  .pd_kit .tcon h2 + p {
      margin-top: 10px;
      line-height: 1.6;
    }

  .pd_kit .list {
      grid-template-columns: repeat(2, minmax(0px, 1fr));
      gap: 12px;
      margin-top: 24px;
    }

  .pd_kit .item {
      height: 100%;
      padding-bottom: 16px;
      border-radius: 12px;
    }

  .pd_kit .item .pic {
      height: auto;
      aspect-ratio: 337.5 / 240;
      border-radius: 12px;
    }

  .pd_kit .item h3,
    .pd_kit .item p {
      padding: 0px 12px;
      white-space: normal;
    }

  .pd_kit .item h3 {
      margin-top: 12px;
      font-size: 15px;
      line-height: 20px;
    }

  .pd_kit .item p {
      margin-top: 4px;
      font-size: 12px;
      line-height: 17px;
    }

  .pd_kit .sub_title {
      margin-top: 48px;
      font-size: 24px;
      line-height: 32px;
    }

  .pd_kit .sub_title + .list {
      margin-top: 20px;
    }
}