.introduce-ci {
  padding-top: 60px;
  text-align: center;
  background-color: white;
}

.only-mobile {
  display: block;
}

.only-tablet,
.only-desktop,
.without-mobile {
  display: none;
}

.introduce-ci-inner {
  margin: 0 auto;
}

.ci-hero {
  padding: 160px 20px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ci-hero h2 {
  font-size: var(--font-h5);
  font-weight: var(--font-weight-bold);
  margin-bottom: 51px;
}

.ci-hero img {
  width: 200px;
  margin-bottom: 23px;
}

.ci-hero span {
  font-size: var(--font-b4);
  color: #808080;
  margin-bottom: 51px;
}

.ci-hero p {
  font-size: var(--font-b4);
  line-height: 1.45;
  color: #0000008c;
}

.background-F6F8FB {
  background-color: #f6f8fb;
}

.ci-main {
  padding: 120px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 69px;
}

.ci-main h2 {
  font-size: var(--font-title);
  font-weight: var(--font-weight-bold);
  text-align: start;
}

.ci-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.card-box {
  background-color: white;
  border-radius: 29px;
  height: 260px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card span {
  color: #808080;
  font-size: var(--font-b4);
}

.download {
  padding: 69px 20px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
}

.download button {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  width: 184px;
  height: 44px;
  border-radius: 100px;
  color: #101010;
  border: 1px solid #e2e2e2;
  background-color: white;
  font-size: var(--font-b3);
  font-weight: var(--font-weight-semibold);
}

.color-guide {
  background-color: white;
  padding: 120px 20px;
}

.color-guide h2 {
  font-size: var(--font-title);
  font-weight: var(--font-weight-bold);
  text-align: start;
  margin-bottom: 40px;
}

.color-boxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.color-box {
  height: 256px;
  border-radius: 29px;
  padding: 40px 39px;
  text-align: start;
}

.color-box h3 {
  font-size: var(--font-b1);
  font-weight: var(--font-weight-bold);
  margin-bottom: 58px;
}

.span-box {
  display: flex;
  flex-direction: column;
  gap: 17px;
  color: #6c6c6c;
  font-size: var(--font-b2);
  font-weight: var(--font-weight-medium);
}

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

.yellow {
  background-color: var(--brand-primary);
}

.sub-blue {
  background-color: #c0e4f0;
}

@media (min-width: 800px) {
  .only-mobile,
  .only-desktop {
    display: none;
  }

  .without-mobile,
  .only-tablet {
    display: block;
  }

  .ci-hero h2 {
    font-size: var(--font-h4);
  }

  .ci-hero p {
    font-size: var(--font-b1);
  }

  .ci-cards {
    flex-direction: row;
  }

  .card {
    width: 50%;
  }

  .download {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  .color-boxes {
    flex-direction: row;
  }

  .color-box {
    padding: 40px;
    height: 252px;
  }

  .color-box h3 {
    font-size: var(--font-b2);
    margin-bottom: 70px;
  }

  .span-box {
    font-size: var(--font-b4);
  }

  .blue,
  .yellow {
    width: 35%;
  }
  .sub-blue {
    width: 30%;
  }
}
@media (min-width: 1280px) {
  .only-mobile,
  .only-tablet {
    display: none;
  }

  .without-mobile,
  .only-desktop {
    display: block;
  }

  .introduce-ci-inner {
    max-width: 1240px;
  }

  .blue,
  .yellow {
    width: 37.5%;
  }
  .sub-blue {
    width: 25%;
  }
}