/**
 * company/celltrion/brand 페이지 전용 스타일
 * (common.css에서 분리)
 */
.introduce .brandItem {
  display: flex;
  column-gap: 1.5rem;
  margin-bottom: 12.5rem;
}
.introduce .brandItem:last-child {
  margin-bottom: 0;
}
.introduce .brandItem h2 {
  width: 21.375rem;
  font-size: 2.5rem;
  line-height: 3.5rem;
  letter-spacing: -0.08px;
  line-height: 1.04;
  font-weight: 700;
}
.introduce .brandItem h3 {
  font-size: 1.5rem;
  line-height: 1.42;
  letter-spacing: -0.05px;
  font-weight: 700;
}
.introduce .brandItem .symbol {
  width: 100%;
}
.introduce .brandItem .symbol > div {
  width: 100%;
  border: 1px solid #d2d2d2;
  border-radius: 30px;
  background-color: #fff;
  padding: 11.028rem 0;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 2.5rem;
}
.introduce .brandItem .symbol > div.ci {
  padding: 0;
  border: none;
  margin-bottom: 3.5rem;
}
.introduce .brandItem .symbol > div.ci img {
  display: block;
  width: 100%;
  max-width: 100%;
}
.introduce .brandItem .symbol > div img {
  display: block;
  width: 100%;
  max-width: 40.808rem;
  margin: 0 auto;
}
.introduce .brandItem .symbol p {
  font-size: 1.125rem;
  letter-spacing: -0.02px;
  line-height: 1.78;
  color: #666;
}
.introduce .brandItem .symbol button {
  display: flex;
  align-items: center;
  gap: 4px;
}
.introduce .brandItem .symbol button:hover {
  background-color: #20c85a;
  border: 1px solid #20c85a;
}
.introduce .brandItem .btn_glink_line {
  margin-left: auto;
}
.introduce .brandItem .color {
  width: 100%;
}
.introduce .brandItem .color > ul {
  margin-top: 1.5rem;
}
.introduce .brandItem .color > ul:nth-of-type(1) {
  width: 100%;
  display: flex;
  gap: 3.5rem;
  margin-bottom: 7.5rem;
  flex-wrap: wrap;
}
.introduce .brandItem .color > ul:nth-of-type(1) li {
  width: calc((100% - 3.5rem) / 2);
}
.introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(1) p {
  background-color: #96F0A5;
}
.introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(2) p {
  background-color: #5FE65A;
}
.introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(3) p {
  background-color: #00CD00;
}
.introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(4) p {
  background-color: #00963C;
}
.introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(5) p {
  background-color: #00733C;
}
.introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(6) p {
  background-color: #00552D;
}

.introduce .brandItem .color > ul:nth-of-type(2) {
  width: 100%;
  display: flex;
  column-gap: 5rem;
  row-gap: 5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.introduce .brandItem .color > ul:nth-of-type(2) li {
  width: calc((100% - 10rem) / 3);
}
.introduce .brandItem .color > ul:nth-of-type(2) li p {
  padding: 2.5rem 0 0 0;
  margin-bottom: 0.75rem;
}
.introduce .brandItem .color > ul:nth-of-type(2) li strong {
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: -0.02px;
  font-weight: 700;
  margin: 0.75rem 0 1.25rem 0;
}
.introduce .brandItem .color > ul:nth-of-type(2) li span:nth-of-type(1) {
  margin-top: 0.75rem;
}

.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(1) p {
  background-color: #5573FF;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(2) p {
  background-color: #00466E;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(3) p {
  background-color: #D7FA00;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(4) p {
  background-color: #FF875A;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(5) p {
  background-color: #B437FF;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(6) p {
  background-color: #5A6469;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(7) p {
  background-color: #E1FAFF;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(8) p {
  background-color: #9BB9B4;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(9) p {
  background-color: #C8C8C8;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(10) p {
  background-color: #F0F5D2;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(11) p {
  background-color: #F0DCCD;
}
.introduce .brandItem .color > ul:nth-of-type(2) li:nth-of-type(12) p {
  background-color: #554137;
}
.introduce .brandItem .color > ul p {
  font-size: 1.5rem;
  line-height: 2.125rem;
  letter-spacing: -0.05px;
  line-height: 1.42;
  color: #fff;
  font-weight: 700;
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 10px;
}
.introduce .brandItem .color > ul span {
  display: block;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: -0.02px;
  color: #666;
  font-weight: 600;
}
.introduce .brandItem.logoBox {
  background: #e7f1f4;
  border-radius: 1.875rem;
  padding: 5rem;
}
.introduce .brandItem.logoBox h2 {
  font-size: 3.125rem;
  width: min(30rem, 100%);
  flex-shrink: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.introduce .brandItem.logoBox .symbol {
  width: auto;
  flex: 1;
  min-width: 0;
}
.introduce .brandItem.logoBox .symbol div {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
}
.introduce .brandItem.logoBox .symbol div .btn_glink_line {
  margin-bottom: 2.4375rem;
}
.introduce .brandItem.logoBox .symbol div .btn_glink_line:last-child {
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .introduce .brandItem.logoBox {
    flex-direction: column;
    padding: 2.5rem 1.25rem 3.75rem;
  }
  .introduce .brandItem.logoBox h2 {
    font-size: 2rem;
    letter-spacing: -0.06px;
    margin-bottom: 4.563rem;
  }
  .introduce .brandItem.logoBox .symbol {
    width: 100%;
  }
  .introduce .brandItem.logoBox .symbol .btn_glink_line {
    margin-left: 0;
    font-size: 1rem;
    margin-bottom: 2rem;
  }
}

@media (max-width: 767px) {
  .introduce .brandItem {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
    margin-bottom: 7.5rem;
  }

  .introduce .brandItem h2 {
    width: 100%;
    font-size: 1.5rem;
    line-height: 1.42;
    letter-spacing: -0.05px;
  }

  .introduce .brandItem h3 {
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: -0.02px;
  }

  .introduce .brandItem .symbol {
    width: 100%;
  }

  .introduce .brandItem .symbol > div {
    padding: 3.687rem 4.875rem;
    margin-bottom: 1.5rem;
  }

  .introduce .brandItem .symbol > div.ci {
    padding: 0;
    border: none;
    margin-bottom: 3.5rem;
  }

  .introduce .brandItem .symbol > div.ci img {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .introduce .brandItem .symbol p {
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: -0.02px;
  }

  .introduce .brandItem .color {
    width: 100%;
  }

  .introduce .brandItem .color > ul {
    margin-top: 1.5rem;
  }

  .introduce .brandItem .color > ul:nth-of-type(1) {
    width: 100%;
    flex-direction: column;
    gap: 2.563rem;
    margin-bottom: 3.563rem;
  }

  .introduce .brandItem .color > ul:nth-of-type(1) li {
    width: 100%;
  }

  .introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(1) p {
    background-color: #96F0A5;
  }

  .introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(2) p {
    background-color: #5FE65A;
  }

  .introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(3) p {
    background-color: #00CD00;
  }

  .introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(4) p {
    background-color: #00963C;
  }

  .introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(5) p {
    background-color: #00733C;
  }

  .introduce .brandItem .color > ul:nth-of-type(1) li:nth-of-type(6) p {
    background-color: #00552D;
  }

  .introduce .brandItem .color > ul:nth-of-type(2) {
    flex-direction: column;
    column-gap: initial;
    row-gap: 2.563rem;
  }

  .introduce .brandItem .color > ul:nth-of-type(2) li {
    width: 100%;
  }

  .introduce .brandItem .color > ul:nth-of-type(2) li p {
    padding: 2.5rem 0 0 0;
    margin-bottom: 1rem;
  }

  .introduce .brandItem .color > ul:nth-of-type(2) li strong {
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: -0.02px;
    font-weight: 700;
    margin: 0.75rem 0 1.25rem 0;
  }

  .introduce .brandItem .color > ul:nth-of-type(2) li span:nth-of-type(1) {
    margin-top: 0.75rem;
  }

  .introduce .brandItem .color > ul p {
    font-size: 1.125rem;
    line-height: 1.56;
    letter-spacing: -0.02px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
  }

  .introduce .brandItem .color > ul span {
    font-size: 0.875rem;
    line-height: 1.57;
    letter-spacing: -0.01px;
  }
}

@media (max-width: 880px) {
  .introduce .brandItem .color > ul:nth-of-type(1) {
    width: 100%;
    flex-direction: column;
    gap: 2.563rem;
    margin-bottom: 3.563rem;
  }

  .introduce .brandItem .color > ul:nth-of-type(1) li {
    width: 100%;
  }

  .introduce .brandItem .color > ul:nth-of-type(2) {
    flex-direction: column;
    column-gap: initial;
    row-gap: 2.563rem;
  }

  .introduce .brandItem .color > ul:nth-of-type(2) li {
    width: 100%;
  }
}
