@charset "UTF-8";

/* hero */
#hero .title-area {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
}
#hero .img-area {
  max-width: 554px;
}
#hero h2 {
  br {
    &.pc {
      display: block;
      @media (max-width: 800px) {
        display: none;
      }
    }
  }
}

/* direct */
#direct .card-list {
  /* display: grid;
  grid-template-columns: repeat(3, 1fr); */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-md);
}
#direct .card-list .card {
  flex: 1 1 290px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-xl);
  padding: var(--pad-lg) var(--pad-md);
  border-radius: var(--r-24);
  background: var(--wh);
  box-shadow: var(--shadow-md);
}
#direct .card .cont-zone {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
#direct .card .img-plc {
  width: 100%;
  aspect-ratio: 250 / 142;
}
#direct .card .img-plc img {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#direct .card .text-plc {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
#direct .card .tit {
  font-size: var(--body-lg);
}
#direct .card .desc {
  font-size: var(--body-sm);
}
#direct .card .contact-btn {
  background: var(--bg-prmr-20);
}
#direct .card .kakao-btn {
  width: 100%;
}
@media (hover: hover) {
  #direct .card .contact-btn:hover {
    background: #dce9ff;
  }
}
#direct .card .contact-btn:active {
  background: #c8dcff;
}

/* solution */
.solution .title-comp p {
  br.mo {
    display: none;
    @media (max-width: 800px) {
      display: block;
    }
  }
}
.solution .contents-area {
  display: flex;
  align-items: center;
  justify-content: center;
}
.solution .card-group {
  display: flex;
  gap: var(--gap-md);
  justify-content: center;
  flex-wrap: wrap;
}
.solution .card-group.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.solution .card {
  flex: 1 0 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-xl);
  max-width: 290px;
  padding: var(--pad-lg) var(--pad-md);
  border-radius: var(--r-20);
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.12);
  background: var(--wh);
  .card-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }
  .cont-area {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }
}
.solution .card .img {
  display: flex;
  justify-content: center;
  height: 110px;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.solution .card .card-tit {
  font-size: var(--body-lg);
  text-align: center;
}
.solution .info-box {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
  padding: var(--pad-xs);
  background: var(--bg-sub);
  border-radius: var(--r-8);
}
.solution .info-box .tit {
  font-size: var(--body-sm);
}
.solution .info-box .desc {
  font-size: var(--c-sm);
}
.solution .check-icon-list {
  gap: var(--gap-2xs);
}
.solution .check-icon-list li {
  align-items: start;
  gap: 0;
  font-size: var(--body-sm);
  font-weight: 400;
  color: var(--text-def);
}
.solution .check-icon-list li::before {
  width: 24px;
  height: 24px;
  background-size: 14px;
}

/* danggn */
#danggn.solution .card {
  max-width: 298px;
}

/* contact */
#contact .width-wrap {
  align-items: center;
  gap: var(--gap-xl);
  text-align: center;
}
#contact .title-area {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#contact .sec-title {
  br {
    &.pc {
      display: block;
      @media (max-width: 800px) {
        display: none;
      }
    }
  }
}
#contact .contents-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-lg);
}

@media all and (max-width: 1200px) {
  /* hero */
  #hero .img-area {
    max-width: 500px;
  }
  /* direct */
  #direct .card-list .card {
    flex-basis: 340px;
    max-width: 340px;
  }

  /* solution */
  .solution .card-group.grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media all and (max-width: 800px) {
  /* hero */
  #hero .width-wrap {
    flex-direction: column;
  }
  #hero .btn-group {
    display: none;
  }
  #hero .img-area {
    align-self: center;
    max-width: 440px;
  }
  /* direct */
  #direct .card-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }
  #direct .card-list .card {
    gap: 32px;
    padding: 20px;
    border-radius: var(--r-12);
    box-shadow: 0 0 16px 0 rgba(51, 51, 51, 0.1);
  }
  #direct .card .cont-zone {
    gap: 20px;
  }
  #direct .card .img-plc {
    aspect-ratio: 303 / 170;
  }
  #direct .card .text-plc {
    gap: 12px;
  }
  #direct .card .tit {
    font-size: 18px;
  }
  #direct .card .desc {
    font-size: 14px;
  }

  /* solution */
  .solution .title-comp p {
    font-size: 16px;
  }
  .solution .card-group {
    flex-direction: column;
    gap: 12px;
  }
  .solution .card-group.grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .solution .card {
    gap: 32px;
    max-width: 400px;
    padding: 20px 16px;
    border-radius: var(--r-12);
    .card-inner,
    .cont-area {
      gap: 12px;
    }
  }
  .solution .card .img {
    height: 90px;
  }
  .solution .card .card-tit {
    font-size: 18px;
  }
  .solution .info-box {
    gap: 4px;
    padding: 12px;
  }
  .solution .info-box .tit {
    font-size: 14px;
  }
  .solution .info-box .desc {
    font-size: 12px;
  }
  .solution .check-icon-list {
    gap: 4px;
  }
  .solution .check-icon-list li {
    font-size: 14px;
  }
  /* danggn */
  #danggn.solution .card {
    max-width: 400px;
  }

  /* contact */
  #contact .width-wrap {
    gap: 32px;
  }
  #contact .title-area {
    gap: 28px;
  }
  #contact .contents-area {
    gap: 20px;
  }
  #contact .btn-group {
    gap: 12px;
  }
  #contact .info-text {
    font-size: 14px;
  }
}
@media all and (max-width: 500px) {
  #direct .card .img-zone {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  /* contact */
  #contact .width-wrap {
    align-items: stretch;
    text-align: left;
  }
  #contact .contents-area {
    align-items: stretch;
  }
  #contact .btn-group {
    flex-direction: column;
    align-items: stretch;
  }
}