@charset "UTF-8";
/* =======================================================================================
공통
======================================================================================= */
.ex-mark {
  color: var(--primary-50);
  font-size: 1.7rem;
}

.example {
  display: block;
  font-size: 1.5rem;
  color: var(--gray-70);
  padding-left: 0.4rem;
  margin-top: 0.8rem;
}
.example dt {
  font-weight: bold;
}

dl.example {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.weight-normal {
  font-weight: normal;
}

.define-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.define-list > li {
  display: flex;
  gap: 2.4rem;
}
.define-list-title {
  width: 10rem;
  font-size: 1.9rem;
  color: var(--gray-90);
}
.define-list-content {
  flex: 1;
  min-width: 0;
}
.define-list-content .desc {
  color: var(--gray-90);
}
.define-list-content .desc ~ * {
  margin-top: 0.8rem;
}

.bg-primary-5 {
  background: var(--primary-5, #ECF2FE);
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* =======================================================================================
01.통합돌봄 한눈에 보기
======================================================================================= */
.promotion-background.box-wrap {
  gap: 2rem;
}
.promotion-background.box-wrap .title {
  font-size: 1.9rem;
  color: var(--secondary-80);
}
.promotion-background.box-wrap .desc {
  min-height: 10.4rem;
  letter-spacing: -0.02em;
}
.promotion-background.box-wrap .example {
  padding-top: 2rem;
  border-top: 1px solid var(--gray-20);
}

.data-table table thead th {
  background: var(--gray-5);
  text-align: center;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  font-size: 1.5rem;
  word-break: keep-all;
}
.data-table table td {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  font-size: 1.5rem;
}

/* =======================================================================================
02.통합돌봄 이용안내
======================================================================================= */
/* =======================================================================================
03.우리지역 통합돌봄, 04.자료실
======================================================================================= */
/* =======================================================================================
05.사이트맵, 통합검색
======================================================================================= */
.total-search-top-box {
  margin-bottom: 6.4rem;
  position: relative;
}
.total-search-top-box .sch-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 5.6rem 0;
}
.total-search-top-box::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  width: 100vw;
  height: 100%;
  background: var(--secondary-5);
  z-index: 0;
}
.total-search-top-box .sch-input {
  position: relative;
}
.total-search-top-box .sch-input .form-control {
  width: 100%;
  height: 8rem;
  border-radius: var(--radius-large);
  font-size: 2.5rem;
  font-weight: bold;
  padding: 0 7.2rem 0 2.4rem;
}
.total-search-top-box .sch-input .ico-sch {
  position: absolute;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
}
.total-search-top-box .sch-input .ico-sch::after {
  width: 4rem;
  height: 4rem;
}
.total-search-top-box .sch-etc .ico-sch1::before {
  width: 2.4rem;
  height: 2.4rem;
}
.total-search-top-box .sch-etc .sch-detail {
  width: 100%;
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: 0.3s ease;
}
.total-search-top-box .sch-etc .sch-detail .row-line {
  border: 0;
}
.total-search-top-box .sch-etc .sch-detail .row-line > li {
  border: 0;
  padding: 0;
}
.total-search-top-box .sch-etc .sch-detail .label {
  width: 12%;
  min-width: 10rem;
}
.total-search-top-box .sch-etc .sch-detail .btns {
  margin: 0;
  justify-content: space-between;
}
.total-search-top-box .sch-etc .sch-detail .btn.sm {
  height: 4.8rem;
}
.total-search-top-box .sch-etc .sch-detail .btn.sm.active {
  background: var(--primary-50);
  border-color: var(--primary-50);
  color: var(--gray-0);
}
.total-search-top-box .sch-etc .sch-detail .btn.sm.active:hover {
  background: var(--primary-60);
}
.total-search-top-box .sch-etc .search-btn.md {
  min-width: 14rem;
}
.total-search-top-box .sch-etc .btn-close {
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 0;
  background: var(--secondary-5);
  padding: 0.8rem 3rem 1.2rem;
  border-radius: 0 0 1rem 1rem;
  border: 0;
  height: auto;
}
.total-search-top-box .sch-etc .btn-close::after {
  rotate: 180deg;
  width: 2rem;
  height: 2rem;
}
.total-search-top-box .sch-etc.active .ico-sch1 {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: 0.3s ease;
  position: absolute;
}
.total-search-top-box .sch-etc.active .sch-detail {
  opacity: 1;
  visibility: visible;
  height: auto;
}

.total-search-cont .tabs .tab {
  width: 100%;
}
.total-search-cont .tabs .tab > li {
  flex: 1 1 0;
  min-width: 0;
}
.total-search-cont .tabs .tab > li ~ li {
  margin-left: -1px;
}
.total-search-cont .tabs .tab > li.active .btn-tab {
  background: var(--primary-70);
  border-color: var(--primary-70);
  color: var(--gray-0);
}
.total-search-cont .tabs .tab .btn-tab {
  height: 5.8rem;
  border: 1px solid var(--primary-10);
}
.total-search-cont .tab-conts-wrap .tab-conts {
  display: none;
  flex-direction: column;
}
.total-search-cont .tab-conts-wrap .tab-conts.active {
  display: flex;
}
.total-search-cont .tab-conts-wrap .tab-conts .btn-more {
  margin-top: 2rem;
}
.total-search-cont .search-list-top {
  display: flex;
  justify-content: space-between;
}
.total-search-cont .search-list-top .sch-info {
  font-size: 2.1rem;
  font-weight: 700;
}
.total-search-cont .search-list-top .sch-info .keyword {
  color: var(--primary-60);
}
.total-search-cont .search-list-top .sch-sort {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}
.total-search-cont .search-list-top .sch-sort .sort-select {
  border: 0;
}
.total-search-cont .search-list-top .sch-sort .li2 {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.total-search-cont .search-list-top .sch-sort .w-sort-btn {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.total-search-cont .search-list-top .sch-sort .w-sort-btn .active {
  text-decoration: underline;
}

.total-search-list {
  border-top: 2px solid var(--gray-80);
}
.total-search-list.no-list .li {
  padding: 7.2rem 0;
}
.total-search-list.no-list .tit {
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;
}
.total-search-list.no-list .list-dot {
  margin: 0 auto;
}
.total-search-list .li {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-bottom: 1px solid var(--gray-30);
  padding: 2.8rem 0;
}
.total-search-list .info-body a {
  display: block;
}
.total-search-list .info-body a:hover {
  text-decoration: underline;
}
.total-search-list .info-body .tit {
  font-size: 1.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.total-search-list .info-body .tit:has(.sns-link-wrap) {
  gap: 2rem;
}
.total-search-list .info-body .tit ~ .txt {
  margin-top: 2.4rem;
}
.total-search-list .info-body .keyword {
  background: var(--primary-5);
  color: var(--primary-60);
  font-weight: bold;
  padding: 0 0.3rem;
}
.total-search-list .info-btm {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.total-search-list .info-btm .i-cate {
  display: flex;
  border-bottom: 1px solid var(--gray-90);
}
.total-search-list .info-btm .i-cate .span ~ .span::before {
  content: "\ea6e";
  font-family: var(--icon);
  padding: 0 0.3rem;
}
.total-search-list .info-btm .btn-area {
  display: flex;
  gap: 2rem;
}
.total-search-list .info-btm .btn-area .btn-txt {
  height: 3.2rem;
}

.sitemap_area {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}
.sitemap_area > li > a {
  height: 6.6rem;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary-60);
  color: var(--primary-60);
  font-size: 2.1rem;
  font-weight: bold;
}
.sitemap_area > li .submenu > ul > li > a {
  display: block;
  padding: 1.6rem 3rem;
  border-bottom: 1px solid var(--gray-30);
  font-weight: bold;
  font-size: 1.9rem;
  position: relative;
}
.sitemap_area > li .submenu > ul > li > a:has(+ div)::before {
  content: "";
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  background: url(../img/layout/head_gnb_ico_arr.svg) no-repeat center/contain;
  position: absolute;
  right: 2rem;
  top: 50%;
  translate: 0 -50%;
  display: none;
}
.sitemap_area > li .submenu > ul > li > div:has(.lnb-detail) {
  border-bottom: 1px solid var(--gray-30);
  background: var(--gray-5);
  padding: 2rem 3rem;
}
.sitemap_area > li .submenu .lnb-detail > li > a {
  display: block;
  padding-left: 2rem;
  position: relative;
}
.sitemap_area > li .submenu .lnb-detail > li > a::before {
  content: "";
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gray-40);
  position: absolute;
  left: 0;
  top: 1rem;
}

.banner-list {
  border-top: 1px dashed var(--gray-30);
}
.banner-list li {
  display: flex;
  gap: 2.4rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px dashed var(--gray-30);
}
.banner-list li img {
  width: 22.4rem;
  height: 7rem;
  border: 1px solid var(--gray-30);
  border-radius: 0.8rem;
  object-fit: cover;
}
.banner-list li .btn {
  margin-left: auto;
}

.process-card {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: repeat(5, 1fr);
  margin: 2.4rem 0;
}
.process-card-item {
  padding: 3.2rem 1.6rem;
  border: 1px solid var(--gray-20);
  border-radius: 1.2rem;
  flex-direction: column;
  gap: 2.4rem;
  display: flex;
  position: relative;
}
.process-card-item::after {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  content: "";
  width: 3.2rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--primary-5) url(../img/component/ico_arr_20_right.svg) no-repeat center/2.4rem 2.4rem;
  border: 1px solid var(--gray-20);
  color: var(--gray-80);
  font-size: 2.4rem;
  font-family: "remixicon";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}
.process-card-item:last-of-type::after {
  display: none;
}
.process-card-head {
  padding-bottom: 2rem;
  border-bottom: 1px dashed var(--gray-30);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.process-card-icon {
  width: 4rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-card-title {
  font-size: 2.2rem;
  color: var(--gray-95);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.process-card-desc {
  color: #063A74;
  font-size: 1.8rem;
  text-wrap: balance;
}
.process-card-body .list-dot {
  gap: 0.4rem;
}

/* =======================================================================================
반응형
======================================================================================= */
@media (max-width: 1200px) {
  .process-card {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .promotion-background.box-wrap .desc {
    min-height: auto;
  }
  .define-list-title {
    width: 6.8rem;
  }
  .banner-list li {
    flex-direction: column;
  }
  .banner-list li strong {
    text-align: center;
  }
  .banner-list li .btn {
    margin-left: inherit;
  }
  .sitemap_area {
    grid-template-columns: 1fr;
  }
  .search-list-top {
    flex-direction: column;
    gap: 1rem;
  }
  .total-search-list .info-btm {
    flex-direction: column;
    gap: 1rem;
  }
}
@media (max-width: 768px) {
  .process-card-title {
    font-size: 2rem;
  }
  .process-card-desc {
    font-size: 1.6rem;
  }
}
@media (max-width: 520px) {
  .process-card {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .process-card {
    grid-template-columns: repeat(1, 1fr);
  }
  .process-card-item::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%) rotate(90deg);
  }
}/*# sourceMappingURL=contents.css.map */