@import url(/css/main.css);

/* 테이블 외곽: main.css table의 border-left/right가 첫/마지막 열 옆으로 보임 */
#st-info-table {
  border-left: none;
  border-right: none;
}
#st-info-table th {
  border-left: none !important;
  border-right: 1px solid #595757;
}
/* th 오른쪽에 붙어 보이던 세로선 = 첫 데이터 td의 인라인 border-left (th가 아님) */
#st-info-table tbody th + td {
  border-left: none !important;
}
#st-info-table td:last-child {
  border-right: none;
}
#st-info-table th:last-child {
  border-right: none;
}

/* img {
  overflow-x: hidden;
} */

section.services .inner,
section.workflow .inner,
section.service-info .inner {
  margin-bottom: 70px;
}

section.main {
  background:
    linear-gradient(45deg, rgb(255 255 255 / 1), rgb(255 255 255 / 0.2)),
    url("/images/service_t_heading_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 100px;
  padding-top: 150px;
  padding-bottom: 150px;
}

section.main .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

section.main .inner .btn {
  margin-left: 25px;
}

section.services {
  padding-top: 60px;
  /* padding-bottom: 100px; */
}

.BD,
.Available-applications,
.Bioinformatics-Analysis {
  padding-bottom: 100px;
}

section.BD {
}

section.Available-applications {
  background-color: #f7f7f7;
  padding-top: 100px;
}

section.Bioinformatics-Analysis {
}

.Service.head-title.small {
  font-size: 30px;
}

.Service.sub-title {
  font-weight: 600;
  font-style: normal;
  font-family: "Pretendard";
  color: #2e2e2e;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0px;
  padding: 0px;
  margin-left: 25px;
  margin-bottom: 10px;
}

/* .Service.sub-title:nth-child(1) {
  padding: 0 0 15px 0;
} */

.Service.sub-title.small {
  font-size: 18px;
}

.Service.main-text {
  font-weight: 500;
  font-style: normal;
  font-family: "Pretendard";
  color: #000000;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 0px;
  padding: 0px;
  margin-left: 25px;
}

.services .container-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.services .container-2 {
  max-width: 580px;
}

.services .container-block {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 15px;
  border: 1px solid #ffa069;
  box-shadow: 0 0 5px 5px rgba(252, 134, 65, 0.1);
  margin: 15px 7px;
  padding: 23px;
}

.services .sub-title {
  margin-left: 0;
}

.services .main-text {
  margin-left: 0;
  font-size: 16px;
}

.table-test {
  display: flex;
}

.table-container th {
  width: 30%;
}

.workflow .inner {
  margin-bottom: 100px;
}

.workflow .inner .sub-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  margin: 0px 15x;
}

.workflow .inner .sub-group .group {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
}

.workflow .inner .sub-group .group .group-2 {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.workflow .inner .sub-group .group img {
  max-height: 90px;
  padding: 0;
  margin: 0;
}

.workflow .inner .sub-group .icon {
  filter: invert(31%) sepia(90%) saturate(2487%) hue-rotate(358deg)
    brightness(98%) contrast(77%);
  background-image: url("/images/icons/arrow_forward_FILL0_wght400_GRAD0_opsz48.svg");
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  margin-left: 15px;
}

.workflow .main-text {
  margin-top: 10px;
  margin-left: 0;
}

.sample img {
  width: 90%;
  margin: auto;
}

.promotion-image img:nth-child(1) {
  margin-top: -20px;
}

.Bioinformatics-Analysis .inner .text-line {
  overflow: hidden;
}

.Bioinformatics-Analysis .inner .text-line img {
  /* max-width: 300px;
  min-height: 300px; */
}

.Bioinformatics-Analysis .inner .text-line .main-text::before {
  content: "•";
  font-family: "Roboto", sans-serif;
  padding-right: 5px;
  font-weight: 700;
}

.Bioinformatics-Analysis .inner .text-line .sub-group.sub-group-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.Bioinformatics-Analysis
  .inner
  .text-line
  .sub-group.sub-group-1
  .reSize-group-1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.Bioinformatics-Analysis
  .inner
  .text-line
  .sub-group.sub-group-1
  .reSize-group-1:nth-child(2) {
  justify-content: center;
  align-items: flex-start;
}

.Bioinformatics-Analysis
  .inner
  .text-line
  .sub-group.sub-group-1
  .reSize-group-1:nth-child(2)
  .group {
  margin: auto;
}

.Bioinformatics-Analysis
  .inner
  .text-line
  .sub-group.sub-group-1
  .reSize-group-1
  .reSize-group-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* margin: 0 10px; */

  flex-wrap: wrap;
}

.Bioinformatics-Analysis
  .inner
  .text-line
  .sub-group.sub-group-1
  .reSize-group-1
  .reSize-group-2
  .reSize-group-3 {
  display: flex;
  flex-direction: row;
  justify-content: center;

  flex-wrap: wrap;
}

.Bioinformatics-Analysis
  .inner
  .text-line
  .sub-group.sub-group-1
  .reSize-group-1
  .reSize-group-2
  .reSize-group-3:nth-child(2)
  img {
  max-width: 200px;
  max-height: 220px;
  /* min-width: 300px;
  min-height: 200px; */
}

.Bioinformatics-Analysis
  .inner
  .text-line
  .sub-group.sub-group-1
  .reSize-group-1
  .reSize-group-2
  .reSize-group-3
  .group {
  margin: 0 40px;
}

.promotion-image {
  /* background-color: #f7f7f7; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.promotion-image img {
  width: 100%;
  margin: auto 0;
}

.promotion-image img:nth-child(1) {
  margin-top: -20px;
}

.try {
  padding-top: 100px;
  padding-bottom: 80px;
  height: 300px;
  background-color: #f0752e;
}

.try .inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.try .inner .try-text {
  font-weight: 500;
  font-style: normal;
  font-family: "Pretendard";
  color: #ffffff;
  font-size: 32px;
  letter-spacing: 0px;
  margin: 0 auto;
  text-align: center;
}

.try .inner .try-title {
  font-weight: 800;
  font-style: normal;
  font-family: "Pretendard";
  color: #ffffff;
  font-size: 64px;
  line-height: 1.3;
  letter-spacing: 0px;
  padding-bottom: 20px;
  margin: 0 auto;
  text-align: center;
}

.try .inner .btn {
  background-color: #ffffff;
  border: 3px solid #000000;
  border-radius: 15px;
  color: #000000;
  font-weight: 900;
  font-family: "Pretendard";
  transition: all 0.5s;
  box-sizing: border-box;
  padding: 15px 40px;
  font-size: 20px;
  cursor: pointer;
  margin: 0 auto;
}

.try .inner .btn:hover {
  color: #ec7c44;
  /* background-color: transparent; */
}

.service-container-bioinfo {
  padding: 10px 0px;
}

.flex-container-bioinfo {
  display: flex;
  flex-direction: row; /* 데스크탑: 가로 정렬 */
  gap: 16px;
  flex-wrap: wrap; /* 줄바꿈 허용 (선택 사항) */
  padding: 10px 5px;
  justify-content: center; /* 가운데 정렬 */
}

.grid-item-bioinfo {
  display: flex;
  flex-direction: column; /* 위아래로 쌓기 */
  align-items: center; /* 수평 중앙 정렬 */
  text-align: center;
}

.image-container-bioinfo {
  display: flex;
  flex-direction: row;
}

.grid-image-bioinfo {
  height: 240px;
  width: auto;
  object-fit: cover;
  display: block;
  margin: auto;
}

/* 문구, 이미지에 따라 class 이름 변경 필요 */
@media screen and (max-width: 768px) {
  .workflow .inner .sub-group .group img {
    max-height: 70px;
    max-width: 70px;
    padding: 0;
    margin: 0;
  }
  .workflow .inner .sub-group .group .group-2 {
    max-width: 100px;
  }

  .try .inner .try-text {
    font-size: 22px;
  }

  .try .inner .try-title {
    font-size: 48px;
  }

  .grid-container-bioinfo {
    grid-template-columns: 1fr;
  }

  .grid-image-bioinfo {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .image-container-bioinfo {
    flex-direction: column;
  }
}