.visual-section {
  background: url("/images/support/support-main.png") no-repeat
    center/cover;
}

.search-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px 0;
  text-align: center;
  padding: 40px 0;
  border-top: 1px solid var(--colorGray700);
  border-bottom: 1px solid var(--colorGray300);
  margin-bottom: 40px;
}

.search-desc {
  font-size: var(--fontSizeXl);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightMd);
}

.search-desc span {
  color: var(--colorPrimary);
}

.search-keyword-area.search-keyword-check-ip-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 360px;
  height: 50px;
  line-height: 50px;
  border: 1px solid var(--colorGray300);
  border-radius: var(--borderRadiusLg);
  padding: 0 8px 0 20px;
  overflow: hidden;
}

.search-keyword-check-ip-area:focus-within{
  border: 1px solid var(--colorPrimary);
}

.search-keyword-area input {
  border: 0;
  width: auto;
  height: 100%;
  padding: 0;
  font-size: var(--fontSizeMd);
  color: var(--colorGray700);
  line-height: var(--lineHeightBase);
}

.search-keyword-area input::placeholder{
  font-size: var(--fontSizeMd);
  color: var(--colorGray400);
  line-height: var(--lineHeightBase);
}

.search-keyword-area button {
  width: 32px;
  height: 32px;
  border-radius: var(--borderRadiusMd);
  background-color: var(--colorPrimary);
}
.search-keyword-area button img {
  width: 12px;
  height: 12px;
}
.ip-desc-box {
  width: 100%;
  border: 1px solid var(--colorGray200);
  border-radius: var(--borderRadiusXl);
  overflow: hidden;
}

.ip-desc-box ul li {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  font-size: var(--fontSizeLg);
}

/*TODO: 명칭 변경 ipCheckTitle -> .ip-desc-box ul li p:first-child */
.ip-desc-box ul li p:first-child {
  width: 240px;
  text-align: center;
  color: var(--colorWhite);
  background-color: var(--colorGray700);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
}

/*TODO: 명칭 변경 ipCheckContent -> .ip-desc-box ul li p:last-child */
.ip-desc-box ul li p:last-child {
  width: calc(100% - 240px);
  padding: 24px 40px;
  word-break: break-word;
}

.ip-desc-box ul li:not(:last-child) p:first-child {
  border-bottom: 1px solid var(--colorGray600);
}

.ip-desc-box ul li:not(:last-child) p:last-child {
  border-bottom: 1px solid var(--colorGray200);
}

@media all and (max-width: 1023px) {
  .search-group {
    gap: 20px 0;
  }
  .search-desc {
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightMd);
  }
  .ip-desc-box ul li {
    font-size: var(--fontSizeMd);
  }
}

@media all and (max-width: 767px) {
  .search-group {
    padding: 20px 15px;
  }
  .search-desc {
   font-size: var(--fontSizeMd);
    line-height: var(--lineHeightBase);
  }
  .search-keyword-area.search-keyword-check-ip-area {
    min-width: auto;
    width: 100%;
  }
  .ip-desc-box ul li {
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightSm);
  }
  .ip-desc-box ul li p:first-child {
    width: 120px;
    padding: 20px;
  }
  .ip-desc-box ul li p:last-child {
    width: calc(100% - 120px);
    padding: 20px;
  }
}