@charset "UTF-8";
/* =========================================================
  용인수지노인복지관 : 전체 서브페이지 공통 스타일시트
========================================================= */
/* =========================================================
  용인수지노인복지관 : 공통 변수
========================================================= */
/* =========================================================
  용인수지노인복지관 : 공통 믹스인 (미디어쿼리)
========================================================= */
/* ==== contents 내용관리  ==== */
#ctt {
  margin: 10px 0;
  padding: 20px;
  background: #fff;
}

.ctt_admin {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

#ctt header h1 {
  position: absolute;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

#ctt_con {
  padding: 10px 0;
  line-height: 1.6em;
}

#ctt_con img {
  max-width: 100%;
  height: auto;
}

.ctt_img {
  text-align: center;
}

/* ==== 서브페이지 공통 레이아웃 구조 ==== */
#main-content {
  width: 100%;
}

#sub_container,
#bbs {
  width: 100%;
  padding: 100px 0 120px;
}

#sub_container:has(#sponsor, #volunteer) {
  padding: 100px 0 0;
}

.subpage_container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.subpage_title {
  width: 100%;
  padding-bottom: 40px;
  text-align: center;
  color: #222222;
}

.subpage_title:has(~ .tab_wrap) {
  padding-bottom: 0;
}

.subpage_main {
  width: 100%;
}

[class*=_conwrap] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  align-self: stretch;
}

.con_sec {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.con_sec.row {
  align-items: flex-start;
  flex-direction: row;
  gap: 80px;
}
.con_sec.row .sec_title {
  width: 100%;
  flex: 1.5;
}
.con_sec.row .sec_box {
  width: 100%;
  flex: 8.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.con_sec.row .sec_box:has(> .dot_li:first-child) {
  padding-top: 10px;
}

/* ==== table ==== */
table {
  width: 100%;
}
table th,
table td {
  padding: 15px 20px;
  color: #333;
  text-align: center;
  font-family: "Pretendard";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 144.444%;
  letter-spacing: -0.32px;
}
table td {
  word-break: keep-all;
}
table .le {
  text-align: left;
}

.table {
  border-top: 2px solid #263f67;
}
.table th,
.table td {
  border: 1px solid #d7dee3;
}
.table th {
  background: #f5f7f8;
}
.table thead th {
  font-weight: 600;
}
.table thead tr:last-child th {
  border-bottom: 0;
}

.table_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}
.table_box .table_title {
  color: #2a5cad;
  font-family: "Pretendard";
  font-size: 1.333rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.table_box .table_wrap {
  width: 100%;
}

/* ==== scroll ==== */
.b_scroll,
.b2_scroll,
.b3_scroll,
.b4_scroll {
  width: 100%;
  position: relative;
}

.b_scroll_tb,
.b2_scroll_tb,
.b3_scroll_tb,
.b4_scroll_tb {
  display: none;
  width: 100%;
}

/* ==== title ==== */
#title {
  border-top: 1px solid #cfcfcf;
  width: 100%;
  overflow: hidden;
}
#title .desc_box {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
#title .desc_box::after {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  background: #f2f7ff;
  border-radius: 0 0 0 30px;
  z-index: -1;
}
#title .loc {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
}
#title .loc .home {
  width: 60px;
  height: 60px;
  border-radius: 0 0 0 30px;
  background: linear-gradient(144deg, #264169 21.16%, #9e3182 188.74%);
  margin-right: 20px;
}
#title .loc .home a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#title .loc li {
  color: #444;
  font-family: "Pretendard";
  font-size: 0.889rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
#title .loc li:last-child {
  color: #223769;
  font-weight: 700;
}
#title .option_btns {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* ==== 3차 메뉴 TAB ==== */
.tab_wrap {
  width: 100%;
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.tab_wrap .tab {
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  border: 1px solid #ccc;
  background: #fff;
}
.tab_wrap li {
  width: 220px;
  border-radius: 50px;
  overflow: hidden;
}
.tab_wrap li a {
  width: 100%;
  padding: 0 30px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  color: #555;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.222rem;
  font-style: normal;
  font-weight: 400;
  line-height: 136.364%;
  letter-spacing: -0.32px;
}
.tab_wrap li.on {
  background: linear-gradient(144deg, #264169 21.16%, #9e3182 188.74%);
}
.tab_wrap li.on a {
  font-weight: 700;
  color: #fff;
}

/* ==== 컨텐츠 페이지 공통 요소 스타일 ==== */
.sec_title {
  display: flex;
  gap: 10px;
  color: #223769;
}
.sec_title::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #223769;
  margin-top: 13px;
}

.top_intro {
  width: 100%;
  display: flex;
  padding: 40px 50px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  align-self: stretch;
  border: 10px solid #F2F7FF;
}
.top_intro .top_intro_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  flex: 1 0 0;
}
.top_intro .top_intro_text p {
  color: #444;
  word-break: keep-all;
}
.top_intro .top_intro_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
}
.top_intro .top_intro_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv_title_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  align-self: stretch;
}
.mv_title_box .mv_title_en {
  color: #cecece;
  text-align: center;
  font-family: "NEXON Lv2 Gothic";
  font-size: 4.444rem;
  font-style: normal;
  font-weight: 700;
  line-height: 70%;
  letter-spacing: -0.8px;
}
.mv_title_box .mv_title_ko {
  color: #333;
  font-family: "NEXON Lv2 Gothic";
  font-size: 1.778rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.mission_con {
  display: flex;
  padding: 20px 180px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  border: 2px solid #1caea1;
  background: #fff;
}
.mission_con p {
  color: #333;
  text-align: center;
  font-family: "Pretendard";
  font-size: 1.333rem;
  font-style: normal;
  font-weight: 700;
  line-height: 116.667%;
  word-break: keep-all;
}

.busi_intro {
  width: 100%;
  position: relative;
}
.busi_intro .busi_intro_slide {
  width: 100%;
  height: 400px;
  border-radius: 30px;
  overflow: hidden;
}
.busi_intro .busi_intro_slide .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.busi_intro .busi_intro_slide .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.busi_intro .busi_intro_items {
  width: 100%;
  padding: 50px 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.busi_intro .busi_intro_btns {
  display: flex;
  align-items: center;
  gap: 12px;
}
.busi_intro .busi_intro_btns button {
  width: 50px;
  height: 50px;
  aspect-ratio: 1/1;
}
.busi_intro .busi_intro_btns .btn_prev {
  background: url("../img/sub/ico_busi_intro_btn_prev.svg") center no-repeat;
  background-size: cover;
}
.busi_intro .busi_intro_btns .btn_next {
  background: url("../img/sub/ico_busi_intro_btn_next.svg") center no-repeat;
  background-size: cover;
}
.busi_intro .busi_intro_text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}
.busi_intro .busi_intro_text p {
  color: #fff;
  word-break: keep-all;
}
.busi_intro .busi_intro_text .busi_intro_title {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.busi_intro .busi_intro_text .busi_intro_des {
  font-family: "Pretendard";
  font-size: 1.111rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.dot_li {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-left: 18px;
}
.dot_li > li {
  width: 100%;
  list-style-type: disc;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 144.444%;
  letter-spacing: -0.32px;
  color: #333;
  word-break: keep-all;
}
.dot_li > li::marker {
  color: #666;
}
.dot_li > li.nodisc {
  list-style-type: none;
}

.graybox_li {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 30px;
  border-radius: 30px;
  background: #F9F9F9;
}
.graybox_li li {
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 144.444%;
  letter-spacing: -0.32px;
  color: #333;
  word-break: keep-all;
}

.step_li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px 0;
}
.step_li li {
  flex: 1 0 0;
  display: flex;
  width: 100%;
  padding: 0 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  gap: 10px;
}
.step_li li .img_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  padding: 6px;
  border-radius: 50%;
}
.step_li li .img_wrap.bg1 {
  background: #264069;
}
.step_li li .img_wrap.bg2 {
  background: #5b3a74;
}
.step_li li .text_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
}
.step_li li .text_wrap span {
  color: #444;
  text-align: center;
  font-family: "Pretendard";
  font-size: 0.889rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.step_li li .text_wrap p {
  color: #333;
  text-align: center;
  word-break: keep-all;
}
.step_li li .text_wrap .sm {
  color: #555;
  font-family: "Pretendard";
  font-size: 0.944rem;
  font-style: normal;
  font-weight: 400;
  line-height: 164.706%;
}
.step_li li.arrow {
  flex: none;
  width: 35px;
  background: url("../img/sub/ico_step_arrow.svg") center no-repeat;
  flex-shrink: 0;
}

.step_li.lot {
  justify-content: flex-start;
}
.step_li.lot li:not(.arrow) {
  flex: none;
  width: calc((100% - 140px) / 4);
}

.dl_basic {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}
.dl_basic .item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.dl_basic .item.col {
  align-items: flex-start;
  flex-direction: column;
}
.dl_basic dt {
  width: 100%;
  max-width: 70px;
  color: #2a5cad;
  font-family: "Pretendard";
  font-size: 1.111rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.dl_basic dd {
  width: 100%;
  color: #333;
  font-family: "Pretendard";
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 144.444%;
  letter-spacing: -0.32px;
}

p.op {
  color: #555;
  font-family: "Pretendard";
  font-size: 0.944rem;
  font-style: normal;
  font-weight: 400;
  line-height: 164.706%;
}

p.op.red {
  color: #d4393c;
}

.tag,
.tag_min {
  display: flex;
  padding: 10px 15px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #ffdbe9;
  background: #fff9fb;
  color: #333;
  font-family: "Pretendard";
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  word-break: keep-all;
  flex-shrink: 0;
}

.tag_min {
  padding: 5px 15px;
}

.tag.yellow,
.tag_min.yellow {
  border-color: #c28700;
  background: #fff2d3;
}

.tag.blue,
.tag_min.blue {
  border-color: #0085ca;
  background: #e3f5ff;
}

.tag.pink,
.tag_min.pink {
  border-color: #f05461;
  background: #ffe9eb;
}

.inquiry {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.inquiry dl {
  display: flex;
  padding: 20px 30px;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  border-radius: 10px;
  border: 1px solid #d7dee3;
  background: #f9f9f9;
}
.inquiry .item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inquiry dt {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #333;
  font-family: "Pretendard";
  font-size: 0.889rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.inquiry dt::before {
  content: "";
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}
.inquiry dt.dep::before {
  background: url("../img/sub/ico_dep.svg") center no-repeat;
}
.inquiry dt.tel::before {
  background: url("../img/sub/ico_tel.svg") center no-repeat;
}
.inquiry dd {
  color: #333;
  font-family: "Pretendard";
  font-size: 0.889rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.32px;
}

.info_box {
  width: 100%;
  display: flex;
  padding: 30px 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 30px;
  background: #F2F7FF;
}
.info_box p {
  width: 100%;
  color: #333333;
  text-align: center;
  font-family: "Pretendard";
  font-size: 1.111rem;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
  word-break: keep-all;
}
.info_box p span {
  color: #004889;
}

.basic_btn {
  width: fit-content;
  display: flex;
  padding: 10px 30px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 15px;
  border: 1px solid #13264e;
  color: #13264e;
  font-family: "Pretendard";
  font-size: 1.111rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.32px;
}

.down_btn {
  width: fit-content;
  display: flex;
  padding: 15px 20px;
  align-items: center;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid;
  background: rgba(255, 255, 255, 0.7);
  font-family: "Pretendard";
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 161.111%;
  letter-spacing: -0.8px;
}
.down_btn::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}
.down_btn.navy {
  border-color: #223769;
  color: #223769;
}
.down_btn.navy::after {
  background: url("../img/sub/ico_download_navy.svg") center no-repeat;
}
.down_btn.purple {
  border-color: #A14570;
  color: #A14570;
}
.down_btn.purple::after {
  background: url("../img/sub/ico_download_purple.svg") center no-repeat;
}

/* =========================================================
  Media Query
========================================================= */
/* ===== PC ===== */
@media (max-width: 1440px) {
  /* ==== scroll ==== */
  .b4_scroll {
    overflow-x: scroll;
  }
  .b4_scroll_wd {
    width: 1440px;
    margin-bottom: 10px;
  }
  .b4_scroll_tb {
    display: block;
    padding: 7px 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-radius: 999px;
    background: #f7f7f7;
    border: 1px solid #ddd;
  }
}
@media (max-width: 1280px) {
  /* ==== scroll ==== */
  .b_scroll {
    overflow-x: scroll;
  }
  .b_scroll_wd {
    width: 1280px;
    margin-bottom: 10px;
  }
  .b_scroll_tb {
    display: block;
    padding: 7px 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-radius: 999px;
    background: #f7f7f7;
    border: 1px solid #ddd;
  }
  .con_sec.row .sec_title {
    flex: 1.7;
  }
  .con_sec.row .sec_box {
    flex: 8.3;
  }
}
/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .heading_content_title {
    font-size: 1.75rem;
  }
  .con_sec.row {
    flex-direction: column;
    gap: 30px;
  }
  .con_sec.row .sec_box:has(> .dot_li:first-child) {
    padding-top: 0;
  }
  .sec_title::before {
    margin-top: 11px;
  }
  .busi_intro .busi_intro_text .busi_intro_des {
    font-size: 1rem;
  }
}
@media (max-width: 960px) {
  /* ==== scroll ==== */
  .b2_scroll {
    overflow-x: scroll;
  }
  .b2_scroll_wd {
    width: 960px;
    margin-bottom: 10px;
  }
  .b2_scroll_tb {
    display: block;
    margin-bottom: 10px;
    padding: 7px 0;
    color: #333;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #f7f7f7;
  }
}
/* ===== Mobile ===== */
@media (max-width: 768px) {
  #sub_container,
  #bbs {
    padding: 80px 0 100px;
  }
  /* ==== scroll ==== */
  .b3_scroll {
    overflow-x: scroll;
  }
  .b3_scroll_wd {
    width: 768px;
  }
  .b3_scroll_tb {
    display: block;
    margin-bottom: 10px;
    padding: 7px 0;
    color: #333;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #f7f7f7;
  }
  /* ==== 3차 메뉴 TAB ==== */
  .tab_wrap {
    padding: 0 20px 20px;
  }
  .tab_wrap .tab {
    width: 100%;
  }
  .tab_wrap .tab li {
    width: 100%;
    flex: 1 0 0;
  }
  /* ==== 컨텐츠 페이지 공통 요소 스타일 ==== */
  [class*=_conwrap] {
    gap: 60px;
  }
  .sec_title::before {
    margin-top: 9px;
  }
  .mission_con {
    width: 100%;
    padding: 20px 40px;
  }
  .busi_intro .busi_intro_items {
    padding: 40px;
  }
  .busi_intro .busi_intro_text {
    gap: 10px;
  }
  .busi_intro .busi_intro_btns {
    gap: 10px;
  }
  .busi_intro .busi_intro_btns button {
    width: 35px;
    height: 35px;
  }
  .step_li {
    justify-content: flex-start;
  }
  .step_li li:not(.arrow) {
    flex: none;
    width: calc((100% - 105px) / 3);
  }
  .step_li.lot li:not(.arrow) {
    width: calc((100% - 140px) / 4);
  }
  .inquiry dl {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
}
@media (max-width: 480px) {
  .heading_content_title {
    font-size: 1.571rem;
  }
  #sub_container,
  #bbs {
    padding: 60px 0 80px;
  }
  #title .loc li {
    display: none;
  }
  #title .loc li:nth-child(1), #title .loc li:nth-child(2) {
    display: block;
    color: #223769;
    font-weight: 700;
  }
  #title .option_btns {
    display: none;
  }
  .tab_wrap {
    padding: 0 20px;
  }
  .tab_wrap .tab {
    height: auto;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
  }
  .tab_wrap .tab li {
    flex: none;
  }
  .tab_wrap li {
    border-radius: 20px;
  }
  .tab_wrap li a {
    height: 45px;
    padding: 0 10px;
    font-size: 1rem;
  }
  [class*=_conwrap] {
    gap: 40px;
  }
  .con_sec.row {
    gap: 15px;
  }
  .top_intro {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
    padding: 30px;
  }
  .top_intro .top_intro_icon {
    width: 50px;
    height: 50px;
  }
  .top_intro .top_intro_text {
    gap: 10px;
  }
  .mv_title_box {
    gap: 10px;
  }
  .mv_title_box .mv_title_en {
    font-size: 3rem;
  }
  .mv_title_box .mv_title_ko {
    font-size: 1.286rem;
  }
  .busi_intro .busi_intro_slide {
    border-radius: 20px;
  }
  .busi_intro .busi_intro_items {
    padding: 20px 30px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .step_li,
  .step_li.lot {
    gap: 0;
    flex-direction: column;
  }
  .step_li li:not(.arrow),
  .step_li.lot li:not(.arrow) {
    width: 100%;
  }
  .step_li li .text_wrap,
  .step_li.lot li .text_wrap {
    gap: 3px;
  }
  .step_li li.arrow,
  .step_li.lot li.arrow {
    width: 100%;
    height: 35px;
    transform: rotate(90deg);
    background-size: 16px;
  }
  .graybox_li {
    padding: 20px;
    border-radius: 20px;
  }
  .dl_basic {
    gap: 15px;
  }
  .dl_basic .item {
    align-items: flex-start;
    gap: 5px;
    flex-direction: column;
  }
  .info_box {
    padding: 20px;
    border-radius: 20px;
  }
  .inquiry dl {
    padding: 20px 10px;
  }
  .down_btn {
    width: auto;
    align-self: stretch;
    justify-content: center;
  }
}
@media (max-width: 360px) {
  .busi_intro .busi_intro_slide {
    height: 450px;
  }
}