@charset "UTF-8";
/* =========================================================
  용인수지노인복지관 : 전체 게시판 공통 스타일시트
========================================================= */
/* =========================================================
  용인수지노인복지관 : 공통 변수
========================================================= */
/* =========================================================
  용인수지노인복지관 : 공통 믹스인 (미디어쿼리)
========================================================= */
/*  ===== list.skin.php  ===== */
#bo_list {
  width: 100%;
}

#bo_gall {
  width: 100%;
  display: flex;
  gap: 50px;
  flex-direction: column;
  align-items: flex-start;
}
#bo_gall form {
  width: 100%;
}

.bo_top_wrap {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

/* Category */
#bo_cate_ul {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

#bo_cate_ul a {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.54px;
  color: #999;
  text-align: center;
  transition: all 0.3s;
  border-radius: 999px;
  background: #F7F7F7;
  border: 1px solid #DDD;
}
#bo_cate_ul a:focus, #bo_cate_ul a:hover, #bo_cate_ul a:active {
  color: #222;
  background: #fff;
  border: 1px solid #222;
}

#bo_cate_ul #bo_cate_on {
  color: #222;
  background: #fff;
  border: 1px solid #222;
}

/* Search */
#bo_list_search {
  width: 100%;
}

#bo_list_search form {
  padding: 20px;
  border-radius: 20px;
  background: #F4F6F8;
}

#bo_list_search .sch-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#bo_list_search .sch-sfl {
  width: 165px;
}

#bo_list_search #sfl {
  width: 100%;
  height: 50px;
  padding: 10px 20px;
  color: #999;
  cursor: pointer;
  appearance: none;
  background: #FFF;
  border-radius: 50px;
  background-size: 10px 6px;
  border: 1px solid #D6DDE6;
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-image: url("../img/layout/select_icon.svg");
}

#bo_list_search .sch_bar {
  display: flex;
  gap: 10px;
  align-items: center;
}

#bo_list_search #stx {
  width: 350px;
  height: 50px;
  padding: 0 20px;
  color: #999;
  background: #FFF;
  border-radius: 9999px;
  border: 1px solid #D6DDE6;
}
#bo_list_search #stx::placeholder {
  color: #999;
}

#bo_list_search .sch_btn {
  width: 50px;
  height: 50px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #223769;
}

.table1 {
  border-top: 2px solid #223769;
}
.table1 th,
.table1 td {
  padding: 20px 10px;
  border: unset;
  border-bottom: 1px solid #D6DDE6;
}
.table1 thead th {
  font-weight: 700;
  line-height: 161.111%; /* 29px */
  letter-spacing: -0.8px;
  background: #F4F6F8;
}

/*  ===== view.skin.php  ===== */
#bo_v {
  width: 100%;
}

/*  ===== write.skin.php  ===== */
#bo_w {
  width: 100%;
}
#bo_w .btn_confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
}
#bo_w .btn_cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  padding: 20px;
  font-size: 0.88rem;
}
#bo_w .btn_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 20px;
  font-size: 0.88rem;
  color: #fff;
  font-weight: 500;
}

/*  ===== 버튼  ===== */
.btn {
  transition: all 0.3s ease-in-out;
}

.btn_wrap {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.btn_wrap_02 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.btn_gap {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 1024px) {
  .table1 th,
  .table1 td {
    font-size: 16px;
  }
}
@media (max-width: 640px) {
  #bo_list_search .sch-group {
    flex-direction: column;
  }
  #bo_list_search .sch-sfl {
    width: 100%;
  }
  #bo_list_search .sch_bar {
    width: 100%;
  }
  #bo_list_search #stx {
    width: unset;
    flex: 1;
  }
}