@charset "UTF-8";

/* join */

.process {
  max-width: 700px;
  width: 100%;
  margin: 0 auto 50px;
}

.process ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.process ul li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #C7C7C7;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  justify-content: center;
  gap: 20px;
  background: #fff;
}

.process ul li.active {
  border: 3px solid #0059A5;
}

.process ul li.active img {
  filter: none;
}

.process ul li.active span {
  color: #0059A5;
  font-family: 'score7', sans-serif;
  font-weight: bold;
}

.process ul:before {
  position: absolute;
  content: "";
  background: #C7C7C7;
  height: 3px;
  width: 100%;
  left: 0;
  top: 50%;
}

.process ul li.active:before {
  position: absolute;
  content: "";
  background: #0059A5;
  height: 3px;
  width: 22%;
  left: 150px;
  top: 50%;
}

.process ul li img {
  filter: grayscale(1) opacity(0.2);
}

.process ul li span {
  font-family: 'score5', 'sans-serif';
  color: #C7C7C7;
}

.subWrap section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.cont-title {
  font-weight: 500;
  background: url(./../img/sub/tit-dot.png)no-repeat;
  padding-top: 14px;
  color: #002646;
  font-size: 1.4rem;
  font-weight: 600;
}

.scroll-bx {
  background: #fff;
  border-radius: 5px;
  border: 1px solid #C7C7C7;
  padding: 20px;
}

.scroll-bx p {
  margin-top: 10px;
}

.scroll-y {
  overflow-y: scroll;
  max-height: 300px;
  height: 300px;
}

.join-Btn {
  transition: all ease .3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.join-Btn a {
  transition: all ease .3s;
  flex: 1;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #C7C7C7;
  border-radius: 5px;
  gap: 15px;
  padding: 15px;
}

.join-Btn a p {
  text-align: center;
  font-weight: bold;
  font-size: 1.35rem;
}

.join-Btn a span {
  text-align: center;
  word-break: keep-all;
}

.join-Btn a:hover {
  background: #0059A5;
  border: 1px solid #0059A5;
}

.join-Btn a:hover p {
  color: #fff;
}

.join-Btn a:hover span {
  color: #fff;
}

.subWrap section.certify {
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-items: center;
  text-align: center;
  padding: 100px 0 100px 0;
  box-shadow: 0px 0px 10px rgba(0, 38, 70, 0.08);
  border-radius: 5px;
  gap: 50px;
}

.subWrap section.certify.phone {
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  display: flexvv;
  align-items: center;
  flex-direction: column;
  justify-items: center;
  text-align: center;
  padding: 300px 0 100px 0;
  box-shadow: 0px 0px 10px rgba(0, 38, 70, 0.08);
  border-radius: 5px;
  background: url(./../img/sub/phone.svg)no-repeat left 51% top 120px;
}

.certify p {
  color: #002646;
  font-size: 1.5rem;
  font-weight: 600;
}

.certify span {
  font-weight: 500;
  color: #585858;
}

.certify .warring {
  color: #BF0000;
  font-size: 1.2rem;
}

.form-type {
  box-shadow: 0px 0px 10px rgba(0, 38, 70, 0.1);
  border-radius: 5px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.form-type .group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group div[class ^=flex] {
  gap: 10px;
}

.form-type .group>.item {
  display: flex;
  flex-direction: column;
}


.form-type .group .flex-item {
  display: flex;
  flex-direction: unset;
  justify-content: space-between;
  flex-wrap: wrap;
}

.form-type .group .flex-item .item-flex {
  flex: 1 1 49%;
}

.form-type i {
  font-style: normal;
  color: #66717E;
}

.form-type .group .item .item-flex {
  display: flex;
  align-items: center;
}

.form-type .group .item .item-flex>div {
  flex: 1;
}

.form-type .group .item .item-flex>div.item-flex-sub {
  flex: 1;
}

.form-type .group .item .item-flex>div.item-flex-sub div {
  flex: 1;
  align-items: center;
}

.form-type .group .item .item-flex>div.item-flex-sub div.phon-wrap{
  flex: 1 1 15%;
}

.form-type .group .item .item-flex>div.item-flex-sub div input {
  width: 100%;
}

.form-type .group .item .item-flex>div>div>div {
  flex: 1;
  align-items: center;
  display: flex;
}

.form-type .group .item .item-flex>div>div>label {
  flex: 110px 0 0;
  background: #EDF0F6;
  color: #002646;
  font-weight: 500;
  padding: 15px 10px;
  border-radius: 5px;
}

.form-type .group .item .item-flex.adress {
  align-items: inherit;
}

.form-type .group .item .item-flex>div.item-input {
  display: flex;
  flex-direction: column;
}

.form-type .group .item .item-flex>label {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #DAE4F5;
  flex: 180px 0 0;
  padding: 15px 10px;
  border-radius: 5px;
  color: #002646;
  font-weight: 500;
}

.form-type .group .item .item-flex .input-flex {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.form-type .group .item .item-flex .input-flex .checkbox {
  flex: 100;
  justify-content: flex-start !important;
}

.form-type .group .item .item-flex .input-flex .checkbox .check {
  flex: none;
}

.form-type .group .item .item-flex .input-flex .checkbox input {
  flex: 1;
}

.form-type .group .item input {
  padding: 15px 10px;
}

.form-type .group .item input:focus {
  box-shadow: inset 0px 0px 0px 2px #007ec8;
}

.form-type .group div[class ^=item] {
  gap: 10px;
}

.email-group input {
  flex: 1 1 50%;
}

.email-group select {
  flex: 1 1 50%;
  border: 1px solid #cbcbcb;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px !important;
  height: auto;
  padding: 16px 10px;
  background: #fff url('../img/select_bg.svg')no-repeat 98%;
}

.content-wrap {
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.content-wrap-02 {
  max-width: 1145px;
}

.max-wrap {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}


/* 동네방네 프로젝트 */

.d-project .explan li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.d-project .explan li:nth-child(2) img {
  order: 1;
}

.d-project .explan li p {
  flex: 1;
  line-height: 1.8;
}

.d-project .way {
  display: flex;
  align-items: center;
  gap: 15px;
}

.d-project .way li {
  flex: 1 1 50%;
  box-shadow: 0px 0px 10px rgb(0 38 70 / 10%);
  display: flex;
  flex-direction: column;
  height: 250px;
  padding: 50px;
  justify-content: flex-start;
  gap: 20px;
  border-radius: 5px;
}

.d-project .way li h5 {
  text-align: center;
  color: #0059A5;
  font-size: 1.2rem;
  padding-top: 110px;
}

.d-project .way li:nth-of-type(1) h5 {
  background: url(../img/sub/d-project04.svg)no-repeat center top;
}

.d-project .way li:nth-of-type(2) h5 {
  background: url(../img/sub/d-project05.svg)no-repeat center top;

}

.d-project .way li p {
  line-height: 1.5;
}

.top-box {
  position: relative;
  box-shadow: 0px 0px 10px rgb(0 38 70 / 10%);
  padding: 50px;
}

.top-box:after {
  position: absolute;
  content: '';
  background: url(../img/sub/top-box-bg.svg)no-repeat;
  width: 190px;
  height: 180px;
  bottom: 0;
  right: 200px;
}

.top-box p {
  position: relative;
  font-family: 'score7', sans-serif !important;
  font-size: 25px;
  max-width: 965px;
  margin: 0 auto;
  padding: 30px 70px;
  display: inline-block;
  margin-left: 170px;
  z-index: 9;
}

.top-box p i {
  position: relative;
  font-family: 'score7', sans-serif !important;
  font-size: 25px;
  font-style: normal;
  margin: 0 auto;
  color: #0059A5;
}

.top-box p:before {
  position: absolute;
  content: '';
  background: url(../img/sub/mark-be.svg)no-repeat left top;
  width: 56px;
  height: 36px;
  left: 0;
}

.top-box p:after {
  position: absolute;
  content: '';
  background: url(../img/sub/mark-af.svg)no-repeat right top;
  width: 56px;
  height: 36px;
  right: 0;
}

.top-box p em {}

.admin-de {
  border-top: 2px solid #0059A5;
  border-bottom: 1px solid #C7C7C7;
  margin: 20px 0;
  padding: 50px;
}

.admin-de p {
  text-align: center;
  color: #0059A5;
  font-size: 25px;
  font-weight: 600;
}

.admin-de span {
  display: block;
  text-align: center;
  color: #002646;
  font-size: 25px;
  font-weight: bold;
  margin: 25px 0;
}

.admin-de em {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #002646;
}

/* view */
.list-view {
  box-shadow: 0px 0px 10px rgba(0, 38, 70, 0.08);
  border-radius: 5px;
  padding: 70px 50px;
  margin-top: 70px;
}

.list-view .s-title {
  margin: 0 0 20px 0;
}

.list-view .s-name {}

.list-view .s-name li {
  position: relative;
  color: #585858;
  padding-left: 15px;
}

.list-view .s-name li~li:before {
  position: absolute;
  content: '';
  width: 3.5px;
  height: 3.5px;
  background: #585858;
  border-radius: 50%;
  top: 50%;
  left: 0%;
  transform: translateY(-50%)
}

.list-view .view-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0;
  gap: 15px;
  flex-wrap: wrap;
}

.list-view .view-input .view-file {
  flex: 1 1 32%;
  background: #F7F7F7;
  border-radius: 5px;
  padding: 10px;
}

.list-view .view-input .view-file .file p {
  border: 0;
  color: #C7C7C7;
  margin-top: 0;
}

.list-view .view-input .view-date {
  display: flex;
  align-items: center;
  flex: 1 1 60%;
  background: #F7F7F7;
  padding: 16px;
  gap: 15px;
  justify-content: space-between;
}

.list-view .view-input .view-date span {
  color: #002646;
  font-weight: 500;
}

.list-view .view-input .view-date .docs-datepicker {
  flex: 1;
}

.list-view .view-input .view-date .docs-datepicker .input-group input {
  width: 100%;
}

.list-view .view-detai {
  border-top: 2px solid #707070;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #C7C7C7;
  margin-bottom: 70px;
}

.project-form {
  margin: 50px 0;
  gap: 10px !important;
}

.tree-group {
  flex-wrap: wrap;
}

.project-form div[class *=group] {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex: 1;
  flex-wrap: wrap;
}

.project-form div[class *=group] .docs-date {
  flex: 1;
}

.project-form>div[class *=group] .item {
  display: flex;
/*   justify-content: space-between; */
  flex: 1;
  border: 1px solid #A8B2BE;
  border-radius: 5px;
  padding: 20px 20px 20px 0;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.project-form>div[class *=group] .s-item .item {
  display: flex;
  justify-content: space-between;
  flex: 1;
  border: none;
  gap: 10px;
  padding: 0;
  flex-wrap: wrap;
}

.project-form div[class *=group] .item p {
  flex: 1;
  padding: 0 10px;
}

.project-form div[class *=group] .item>label {
  flex: 100px 0 0;
  padding-left: 30px;
  position: relative;
  color: #0059A5;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.project-form div[class *=group] .item>input {
  flex: 1;
  padding: 0 10px;
  background: transparent;
}

.project-form div[class *=group] .item>button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.project-form div[class *=group] .item>label:before {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #0059A5;
}

.project-form div[class *=group] .item>div {
  flex: 1;
  display: flex;
  padding: 0 10px;
}

.project-form div[class *=group] .item>div[class *=group] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.project-form div[class *=group] .item>div[class *=group] .s-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.project-form div[class *=group] .item>div[class *=group] .s-item .check {
  display: flex;
  flex: 150px 0 0;
}

.project-form div[class *=group] .ss-group {
  flex: 1;
  flex-wrap: wrap;
}

.project-form div[class *=group] .ss-group .item {
  align-items: center;
  gap: 10px;
  padding: 0;
}

.project-form div[class *=group] .ss-group .item input {
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  padding: 10px 15px;
}

.project-form div[class *=group] .item select {
  border-radius: 5px;
  flex: 1;
  padding: 15px 10px;
  background: #fff url('../img/select_bg.svg')no-repeat 98%;
  background-size: 10px;
}

select {
  -webkit-appearance: none;
  /* for chrome */

  -moz-appearance: none;
  /*for firefox*/

  appearance: none;
}

.searh-wrap {
  max-width: 750px;
  margin: 50px auto;
  display: flex;
  gap: 10px;
}

.searh-wrap select {
  border-radius: 5px;
  padding: 20px 10px;
  flex: 1 1 30%;
  background: #fff url('../img/select_bg.svg')no-repeat 90%;
}

.searh-wrap input {
  flex: 1 1 50%;
}

.searh-wrap .search {
  background: #66717E url(../img/search-btn.svg)no-repeat center;
  text-indent: -9999px;
  display: block;
  width: 75px;
  border-radius: 5px;
}

.search-form p {
  text-align: center;
  color: #002646;
  font-weight: 600;
}

.search-form p span {
  font-size: 25px;
  color: #BF0000;
  font-weight: bold;
}

.search-form .searh-wrap {
  max-width: 650px;
}

.search-form .searh-wrap select {
  color: #989898;
}

.search-form .tbl-list {
  border-top: 1px solid #002646;
  border-bottom: 1px solid #B0B8C6;
}

.search-form .tbl-list ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  align-items: initial;
}

.search-form .tbl-list ul li {
  display: flex;
  gap: 10px;
  flex: 1;
}

.search-form .tbl-list ul li span {
  background: #DAE4F5;
  color: #002646;
  font-weight: 500;
  padding: 25px;
  display: flex;
  align-items: center;
}

.search-form .tbl-list ul li em {
  display: flex;
  align-items: center;
}

/* tbl-list01 */



.tbl-list01 {
  border-top: 1px solid #002646;
}

.tbl-list01 ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  align-items: initial;
  border-bottom: 1px solid #B0B8C6;
}

.tbl-list01 ul li {
  display: flex;
  gap: 10px;
  flex: 1;
  padding: 10px 0;
}

.tbl-list01 > ul > li > span, .tbl-list01 > ul > li > label {
  background: #DAE4F5;
  color: #002646;
  font-weight: 500;
  padding: 15px;
  display: flex;
  align-items: center;
  flex: 130px 0 0;
  border-radius: 5px;
  gap: 5px;
}

.tbl-list01 ul li em {
  display: flex;
  align-items: center;
  flex: 1;
}

.tbl-list01 ul li em textarea {
  border: 1px solid #cbcbcb;
  width: 100%;
  resize: none;
  border-radius: 5px;
  outline: none;
  padding: 10px;
}

.tbl-list01 ul li em p {
  height: auto;
  padding: 10px;
  color: 989898;
}

.tbl-list01 ul li em input {
  height: 100%;
}

.tbl-list01 ul li em .file label.file-label {
  flex: 80px 0 0;
  padding: 10px;
}

.public {
  text-align: center;
  font-weight: 600;
  margin: 0 auto 50px;
  border-radius: 5px;
  padding: 25px 50px;
  background-color: #d5ecff;
}

.public p {
  font-size: 1.5rem;
  word-break: keep-all;
  text-align: left;
}

.public span {
  font-size: 1.5rem;
  color: #3f51b5;
  font-weight: bold;
}



@media screen and (max-width: 1400px) {
  .top-box:after {
    right: 40px;
  }

  .top-box p {
    margin-left: 0;
  }

  .form-type .group .item .item-flex>div.item-flex-sub {
    flex-direction: column;
  }

  .form-type .group .item .item-flex .input-flex .checkbox {
    flex-wrap: wrap;
  }

  .form-type .group .item .item-flex .input-flex .checkbox input {
    flex: 100%;
  }
}

@media screen and (max-width: 970px) {
  .top-box:after {
    filter: opacity(0.5);
  }

  .search-form .tbl-list ul {
    flex-direction: column;
    gap: 0;
  }

  .search-form .tbl-list ul li span {
    flex: 100px 0 0;
  }

  .search-form .tbl-list ul li~li {
    border-top: 1px solid #B0B8C6;
  }
}

@media screen and (max-width: 768px) {
  .process {
    max-width: 330px;
  }

  .process ul li {
    width: 70px;
    height: 70px;
    gap: 5px;
  }

  .process ul li.active:before {
    left: 70px;
  }

  .process ul li img {
    width: 25px;
  }

  .process ul li span {
    font-size: 0.8rem;
  }

  .cont-title {
    font-size: 1.1rem;
    background-size: 25px;
    padding-top: 8px;
  }

  .sub-tit i {
    font-size: 0.9rem;
  }

  .join-Btn a p {
    font-size: 1rem;
  }

  .join-Btn a {
    flex: 1 1 30%;
    padding: 0 15px;
  }

  .subWrap section.certify {
    padding: 50px 20px;
    box-sizing: border-box;
    gap: 20px;
  }

  .certify p {
    font-size: 1rem !important;
    word-break: keep-all;
  }

  .certify button {
    padding: 20px 50px;
    font-size: 0.9rem;
  }

  .subWrap section.certify.phone {
    padding: 150px 0 50px 0;
    background-size: 50px;
    background-position: center 50px;
  }

  .form-type .group .item .item-flex>label {
    flex: 130px 0 0;
  }

  .form-type {
    padding: 30px;
  }

  .d-project .explan li img {
    width: 20%;
  }

  .d-project .explan {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .d-project .way {
    flex-direction: column;
  }

  .d-project .way li h5 {
    background-size: 50px !important;
    padding-top: 70px;
  }

  .d-project .way li h5 {
    font-size: 1rem;
  }

  .d-project .way li {
    width: 100%;
    padding: 25px;
  }

  .d-project .way li p {
    text-align: center;
    word-break: keep-all;
  }

  .top-box p,
  .top-box p i {
    font-size: 1rem;
    text-align: center;
  }

  .top-box p,
  .top-box p {
    padding: 0px 40px;
  }

  .top-box {
    padding: 50px 10px;
  }

  .top-box:after {
    background-size: 100px;
    width: 100px;
    height: 100px;
  }

  .top-box p:before,
  .top-box p:after {
    background-size: 30px !important;
  }

  .admin-de p {
    font-size: 1.1rem;
  }

  .admin-de span {
    font-size: 1.1rem;
  }

  .admin-de em {
    font-size: 0.9rem;
  }

  .paging a {
    line-height: 1.2;
  }

  .paging a {
    background-size: 10px 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .list-view .view-input .view-date {
    flex-wrap: wrap;
  }

  .list-view .view-input .view-date span:first-child {
    flex: 100%;
  }

  .list-view .view-input .view-date .docs-datepicker {
    flex: 1;
  }

  .list-view {
    padding: 50px 20px;
    margin-top: 20px;
  }

  .project-form div[class *=group] .item>.s-group {
    background-color: #dfe5eb;
    border-radius: 5px;
    padding: 10px;
    margin-left: 20px;
  }

  .project-form div[class *=group] .item>.s-group label {
    flex: 100%;
  }

  .project-form div[class *=group] .item>div[class *=group] .s-item .check {
    flex: 100%;
  }

  .project-form>div[class *=group] .item {
    flex: 100%;
  }

  .project-form div[class *=group] .item>label {
    flex: 100%;
  }

  .project-form div[class *=group] .item>input,
  .project-form div[class *=group] .item p,
  .project-form div[class *=group] .item>div {
    padding: 0 0 0 30px;
  }

  .project-form div[class *=group] .item>div.file {
    flex-direction: column;
  }

  .project-form .file label.file-label {
    flex: 100%;
  }

  .file p.active {
    /* width:auto; */
  }

  .searh-wrap .search {
    background-size: 15px;
    width: 50px;
  }

  .form-type .group .item .item-flex>div.item-flex-sub div {
    flex-direction: column;
    align-items: inherit;
    text-align: center;
  }

  .form-type .group .item .item-flex>div>div>label {
    flex: 1 1 100%;
  }

  .phon-wrap {
    flex-direction: initial !important;
    flex-wrap: wrap;
  }

  .phon-wrap input {
    flex: 50%;
  }

  .search-form p span {
    font-size: 1rem;
  }

  .public {
    font-size: 1rem;
    flex-wrap: wrap;
  }

  .public img {
    width: 30px;
  }

  .public span,
  .public p {
    font-size: 1rem;
  }

  .tbl-list01 > ul > li > span, .tbl-list01 ul li label{
    flex:60px 0 0;
  }
  .tbl-list01 ul {
    flex-direction: column;
    border-bottom: 0;
    gap: 0;
  }

  .tbl-list01 ul li span {
    flex: 1;
  }

  .tbl-list01 ul li {
    border-bottom: 1px solid #B0B8C6;
    flex-direction: column;
  }

  .tbl-list01 ul li .item-flex{
    flex-direction: column;
  }

  .tbl-list01 ul li span, .tbl-list01 ul li label{
    flex:1;
    width:100%;
    box-sizing: border-box;
  }

  .tbl-list01 ul li span ~ div{
    width:100%;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (max-width: 450px) {
  .form-type {
    box-shadow: none;
    padding: 0;
  }

  .form-type .group .item .item-flex {
    flex-wrap: wrap;
  }

  .form-type .group .item .item-flex>label {
    flex: 100%;
  }

  .top-box:after {
    display: none;
  }

  .m-d-none {
    display: none;
  }

  .list-view .view-input .view-date .docs-datepicker .input-group input {
    width: 100%;
  }

  .searh-wrap {
    flex-wrap: wrap;
  }

  .searh-wrap select {
    flex: 100%;
    padding: 15px 10px;
  }

  .searh-wrap input {
    padding: 15px 10px;
  }
}

@media screen and (max-width: 380px) {
  .join-Btn {
    gap: 10px;
    margin-top: 25px;
  }

  .join-Btn a {
    flex: 100%;
    padding: 15px;
    height: 70px;
  }
}

/* 마을교육공동체 */

.community {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.community-tit {
  text-align: center;
  margin-bottom: 45px;
  font-size: 25px;
}

.community-txt {
  border-top: 2px solid #002646;
  width: 704px;
}

.community-txt li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #C7C7C7;
  padding: 20px;
}

.community-txt li span {
  font-size: 20px;
  font-weight: 500;
  width: 155px;
  font-family: 'score7', sans-serif !important;
}

.community-txt li div p {
  margin-bottom: 7px;
  font-size: 18px;
  word-break: keep-all;
  line-height: 1.5;
}

.community-txt li div p:last-child {
  margin-bottom: 0;
}

.color-bg-01 {
  background-color: #F0F6FF;
  padding: 58px 0;
}

.diagram .diagram-tit-01 {
  font-size: 45px;
  text-align: center;
  font-weight: bold;
  color: rgb(0, 89, 165);
  opacity: 0.4;
  margin-bottom: 43px;
}

.diagram .diagram-cont-box {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.diagram .diagram-cont-box>li {
  background-color: #fff;
  width: 50%;
  height: 430px;
  border-radius: 3px;
  box-shadow: 0px 0px 10px rgba(0, 38, 70, 0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.diagrambox-top {
  display: flex;
  flex-direction: column;
  align-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.diagram .diagram-cont-box>li:first-child {
  margin-right: 107px;
}

.diagram .diagram-cont-box>li+li::before {
  content: "협력";
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background-color: #0059A5;
  position: absolute;
  top: 172.5px;
  left: -95px;
  text-align: center;
  color: #fff;
  line-height: 85px;
  font-size: 20px;
  font-weight: bold;
}

.color-bg-01 .diagram .diagram-cont-box>li::after {
  content: "지원과\A협력";
  white-space: pre;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background-color: #002646;
  position: absolute;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  bottom: -100px;
  left: 143px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.diagram .diagram-cont-box>li>ul>li {
  margin-top: 10px;
  padding-left: 50px;
}

.diagram .diagram-cont-box>li>ul>li::before {
  content: "";
  width: 3px;
  height: 11px;
  background-color: #0059A5;
  display: inline-block;
  margin-right: 8px;
  border-radius: 3px;
}

.color-bg-01 .diagram .diagram-cont-box>li:nth-of-type(1) h4 {
  color: #0059A5;
}

.color-bg-01 .diagram .diagram-cont-box>li:nth-of-type(2) h4 {
  color: #66717E;
}

.color-bg-02 .diagram .diagram-cont-box>li:nth-of-type(1) h4 {
  color: #0006A5;
}

.color-bg-02 .diagram .diagram-cont-box>li:nth-of-type(2) h4 {
  color: #002646;
}

.color-bg-02 {
  background-color: #DAE4F5;
  padding: 58px 0;
  margin-bottom: 150px;
}

.diagram .diagram-tit-02 {
  font-size: 45px;
  text-align: center;
  font-weight: bold;
  color: rgb(0, 38, 95);
  opacity: 0.4;
  margin-top: 43px;
}

.fc-toolbar {
  text-align: center;
  display: flex;
  margin: 10px 0 15px;
  justify-content: center;
}

.calendar tbody tr td .inner ul {
  margin-top: 30px !important;
}

.calendar tbody tr td .inner ul li {
  display: block;
  text-align : center;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.calendar tbody tr td .inner ul li p {
  min-width: 70px;
  background-color: #fff;
  border: 1px solid #BF0000;
  padding: 9px 0;
  border-radius: 5px;
  color: #BF0000;
  text-align: center;
  font-weight: 300;
  cursor: pointer;
  margin:0.7px;
}

.calendar tbody tr td .inner ul li p:hover {
  box-shadow: 0px 0px 10px rgba(131, 131, 131, 0.3);
}

.calendar tbody tr td .inner ul li p.applying {
  border: 1px solid #0059A5;
  color: #0059A5;
}

.calendar tbody tr td .inner ul li p.possible {
  border: 1px solid #00A526;
  color: #00A526;
}

.fc-toolbar {
  text-align: center;
  position: relative;
  margin: 10px 0 15px;
}

.fc-toolbar>*>* {
  float: left;
}

.fc-toolbar .fc-left {
  float: left;
}

.fc-toolbar .fc-center {
  display: inline-block;
  position: relative;
  display: flex;
  align-items: center;
}

.fc-toolbar .fc-center h2 {
  margin: 0 30px;
}

.fc-toolbar .fc-right {
  position: absolute;
  top: 0;
  right: 0;
}

.fc-button {
  border-radius: 38px;
  min-width: 38px;
  height: 38px;
  background-color: #0059A5;
  border: 1px solid #0059A5;
}

.fc-prev-button:before {
  content: "";
  position: absolute;
  margin: -8px 0 0 -5px;
  width: 10px;
  height: 17px;
  background: url(../img/sub/calender-arrow-prve.svg) no-repeat;
}

.fc-next-button:before {
  content: "";
  position: absolute;
  margin: -8px 0 0 -5px;
  width: 10px;
  height: 17px;
  background: url(../img/sub/calender-arrow-next.svg) no-repeat;
}

@media screen and (max-width: 1480px) {
  .calendar tbody tr td .inner ul li {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

}

@media screen and (max-width: 1200px) {
  .community-txt li {
    display: block;
  }

}

@media screen and (max-width: 850px) {
  .system-diagram {
    max-width: 100%;
    padding: 0 15px;
  }

  .color-bg-02 {
    margin-bottom: 100px;
    padding-bottom: 30px;
  }

  .color-bg-01 {
    padding-top: 30px;
  }

  .diagrambox-top img {
    height: 100px;
  }

  .diagram .diagram-cont-box>li {
    height: 100%;
    padding: 30px 15px;
  }

  .diagram .diagram-cont-box>li h4 {
    font-size: 1rem;
  }

}

@media screen and (max-width: 800px) {}

@media screen and (max-width: 768px) {
  .color-bg-01 .diagram .diagram-cont-box>li::after {
    left: 110px;
  }

  .diagram .diagram-tit-01,
  .diagram .diagram-tit-02 {
    font-size: 1.5rem;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .fc-toolbar .fc-center h2 {
    margin: 6px 30px;
    font-size: 1.1rem;
  }

  .fc-button {
    min-width: 25px;
    height: 25px;
  }

  .fc-next-button:before,
  .fc-prev-button:before {
    background-size: 70%;
    margin: -6px 0 0 -2px;
  }

  .fc-prev-button:before {
    margin: -6px 0 0 -4px;
  }

  .community-txt {
    width: 400px;
  }

  .community-img {
    width: 40%;
  }

  .community-txt li {
    gap: 10px;
    padding: 15px 0;
  }

  .community-txt li span {
    font-size: 0.9rem;
    display: block;
    margin-bottom: 5px;
    padding-left: 5px;
  }

  .community-txt li div p {
    font-size: 0.8rem;
    margin-bottom: 0px;
  }

  .diagrambox-top img {
    height: 50px;
  }
}

@media screen and (max-width: 600px) {

  .diagram .diagram-cont-box>li {
    /* height: 360px; */
  }

  .diagram .diagram-cont-box>li:first-child {
    margin-right: 60px;
  }

  .diagram .diagram-cont-box>li+li::before {
    width: 60px;
    height: 60px;
    top: 172.5px;
    left: -60px;
    line-height: 60px;
    font-size: 15px;
  }

  .diagram .diagram-cont-box>li>ul>li {
    padding: 0 10px 0 20px;
  }

  .color-bg-01 .diagram .diagram-cont-box>li::after {
    width: 60px;
    height: 60px;
    font-size: 15px;
    left: 77px;
    bottom: -89px;
  }

}

@media screen and (max-width: 500px) {
  .community-txt {
    width: 100%;
  }

  .community {
    display: flex;
    flex-direction: column;
  }

  .community-tit {
    font-size: 1.1rem;
  }

  .community-img {
    width: 40%;
    margin: 0 auto 20px;
  }

  .diagram .diagram-cont-box>li>ul>li {
    padding: 0 10px;
  }

}

@media screen and (max-width: 425px) {
  .diagram .diagram-cont-box {
    display: block;
  }

  .color-bg-01 .diagram .diagram-cont-box>li:first-child::after {
    content: none;
  }

  .color-bg-01 .diagram .diagram-cont-box>li::after {
    left: 50%;
    transform: translate(-50%);
  }

  .diagram .diagram-cont-box>li {
    margin-right: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  .diagram .diagram-cont-box>li:first-child {
    margin-bottom: 80px;
  }

  .diagram .diagram-cont-box>li+li::before {
    top: -70px;
    left: 50%;
    transform: translate(-50%);
  }
}

/* 마을교육이럭관리 */

.top_tab {
  border-bottom: 1px solid #C7C7C7;
  vertical-align: top;
  display: flex;
  justify-content: space-around
}

.top_tab li {
  padding-bottom: 26px;
}

.top_tab li a {
  font-size: 18px;
  font-weight: 500;
}

.top_tab .active {
  position: relative;
  border-bottom: 3px solid #0b61a1;
}

.tabContent.active {
  display: block;
}

.tabContent {
  display: none;
}

.learning-status section {
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 38, 70, 0.1);
  width: 50%;
  border-radius: 5px;
}

.learning-status .f-left {
  margin: 0 auto;
  align-items: center;
  flex-direction: column;
  justify-items: center;
  text-align: center;
  padding: 300px 0 100px 0;
  background: url(./../img/sub/Record.svg)no-repeat left 51% top 60px;
}

.learning-status .f-left p {
  font-size: 20px;
  font-weight: bold;
}

.learning-status .f-left p b {
  font-size: 20px;
  color: #0059A5;
  font-weight: bold;
}

.learning-status .f-left span {
  font-size: 18px;
  font-weight: bold;
  color: #66717E;
}

.note {
  background-color: #EDF0F6;
  width: 100%;
  border-radius: 5px;
  padding: 30px 20px;
  box-sizing: border-box;
}

.note>p {
  font-size: 18px;
  font-weight: 500;
  color: #003562;
}

.etc {
  width: 100%;
  background-color: #DAE4F5;
  padding: 30px 20px;
  border-radius: 5px;
  box-sizing: border-box;
}

.etc .etc-inner li span {
  font-size: 18px;
  font-weight: 500;
  margin-right: 15px;
  color: #002646;
}

.etc .etc-inner li button {
  padding: 10px 30px;
}

.input-flex textarea {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  min-height: 100px;
  padding: 15px;
  border-color: #cbcbcb;
  border-radius: 5px;
}

.certificate-box {
  background-color: #EDF0F6;
  padding: 25px 25px;
  border-radius: 5px;
}

.certificate-box .certificate-tit {
  font-size: 18px;
  font-weight: 600;
}

.certificate-box .photo {
  background-color: #fff;
  width: 128px;
  height: 145px;
  border-radius: 5px;
}

.certificate-box .info-txt .name {
  font-size: 18px;
  font-weight: bold;
}

.certificate-box .info-tx-right li {
  flex: 1 1 40%;
  flex-wrap: wrap;
}

.certificate-box .info-tx-right .tx-left {
  font-weight: bold;
  width: 100px;
}

.certificate-box .info-tx-right .tx-left::before {
  background-color: #003562;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 4px;
  margin-right: 5px;
}

.bg-white {
  background-color: #fff;
  padding: 50px;
  border-radius: 5px;
}

.bg-white h4:before {
  content: "";
  width: 30px;
  height: 3px;
  background-color: #003562;
  display: block;
  margin: 0 auto 5px;
  text-align: center;
  border-radius: 5px;
}

.course-time {
  background-color: #003562;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: 600;
}

.toggleBG {
  background: #CCCCCC;
  width: 60px;
  height: 25px;
  border: 1px solid #CCCCCC;
  border-radius: 15px;
}

.toggleFG {
  background: #FFFFFF;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 15px;
  position: relative;
  left: 0px;
  min-width: 20px;
  padding: 0;
  display: block;
  top: 0;
  text-align: left;
  font-size: 0;
  margin: 2.5px 2px;
}

@media screen and (max-width: 768px) {
  .top_tab li a {
    font-size: 0.9rem;
    word-break: keep-all;
    display: block;
    padding-bottom: 15px;
    flex: 1;
    height: 30px;
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .top_tab li {
    padding-bottom: 0;
    flex: 1 1 30%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top_tab {
    /* flex-wrap: wrap; */
    justify-content: space-around;
    align-items: center;
  }

  .learning-status .f-left {
    background-size: 50%;
  }

  .learning-status .f-left p,
  .learning-status .f-left p b {
    font-size: 1rem;
  }

  .learning-status .f-left span {
    font-size: 0.85rem;
  }

  .learning-status .f-left {
    padding: 247px 0 50px 0;
    /* margin-bottom: 20px; */
  }

  .note>p,
  .note>p>b {
    font-size: 1rem !important;
  }

  .etc .etc-inner li span {
    font-size: 1rem;
  }

  .certificate-box .info-tx-right li {
    flex: 1 1 100%;
  }

  .bg-white {
    padding: 30px;
  }

  .calendar tbody tr td .inner ul li p {
    min-width: 40px;
    font-size: 0.75rem;
  }

  .cont-title2 {
    font-size: 1rem !important;
  }

}

@media screen and (max-width: 500px) {
  .learning-status {
    display: revert;
  }

  .learning-status section {
    width: 100%;
  }

  .learning-status .f-left {
    margin-bottom: 20px;
  }
}

/* 마을교사 */
.village-teacher {
  border-top: 2px solid #003562;
}

.village-teacher li {
  border-bottom: 1px solid #C7C7C7;
  padding: 30px 0 30px 100px;
  align-items: center;
}

.village-teacher li .title {
  font-size: 18px;
  font-weight: bold;
  color: #002646;
  margin-bottom: 25px;
}

.village-teacher li>p {
  width: 200px;
}

.profile-top .pt-btn .user-img {
  background: #fff url(../img/sub/user-img.svg) no-repeat center;
  display: block;
  width: 80px;
  height: 97px;
  border: 1px solid #C7C7C7;
  padding: 112px 64px;
  border-radius: 5px;
}

.pt-btn .btn-type04 {
  flex: 210px 0 0;
}

.profile_table th img {
  vertical-align: middle;
  margin-right: 5px;
}

.profile_table td select {
  padding: 8.5px 10px;
}

.profile-file {
  border: 1px solid #C7C7C7;
  background-color: #fff;
  padding: 40px 100px;
  border-radius: 5px;
}

.file-txt p {
  font-weight: bold;
  margin-bottom: 10px;
}

.file-btn {
  padding: 0 40px;
}

.profile_table td .docs-date {
  padding: 7px;
  width: 50%;
}

.bg-blue {
  background-color: #EDF0F6;
  padding: 20px;
}

.receipt h4 b {
  font-size: 24px;
  font-weight: 600;
  color: #BF0000;
}

.receipt p {
  font-weight: bold;
}

.p-100 {
  padding: 20px 100px;
}

.two-search {
  flex: 1 1 70%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sc-btn {
  flex: 1 1 10%;
}

.sc-tit {
  font-weight: bold;
  flex: 1;
}

.pd-14 {
  padding: 14px 10px;
}

.w-50 {
  width: 50%;
}

.flex-20 {
  flex: 1 1 20%;
}

.flex-1 {
  flex: 1;
}

.flex-90 {
  flex: 1 1 90%;
}

.sc-btn {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  .profile-top {
    display: block;
  }

  .profile_table tbody th {
    font-size: 12px !important;
  }

  .profile-top .pt-btn .user-img {
    margin: 0 auto;
  }

  .pt-btn {
    margin-bottom: 20px;
  }

  .profile-top .pt-btn .user-img {
    height: 0;
  }

  .profile_table td .docs-date {
    width: 100%;
  }

  .m-block {
    display: block;
  }

  .btn-left {
    margin-bottom: 10px;
    display: block;
  }

  .btn-right {
    display: flex;
    flex-wrap: wrap !important;
    gap: 5px;
    width: 100%;
  }

  .receipt img {
    width: 10%;
  }

  .receipt h4 b {
    font-size: 0.85rem;
  }

  .p-100 {
    padding: 20px 20px;
  }

  .satisfaction {
    display: block;
  }

  .w-50 {
    width: 100%;
    box-sizing: border-box;
  }

  .two-search {
    flex-direction: column !important;
  }

  .sc-btn {
    font-size: 12px;
  }

  .profile_table th img {
    display: block;
  }

}

/* 마을학교 */
.village-school li {
  border: 1px solid #002646;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  flex: 1 1 30%;
  background-color: #fff;
}

.village-school li .village-img {
  background-color: #002646;
  display: flex;
  justify-content: center;
  height: 180px;
}

.village-school li:nth-child(2) {
  border: 1px solid #003562;
}

.village-school li:nth-child(2) .village-img {
  background-color: #003562;
}

.village-school li:nth-child(3) {
  border: 1px solid #0059A5
}

.village-school li:nth-child(3) .village-img {
  background-color: #0059A5
}

.village-school li .village-txt {
  text-align: center;
  padding: 20px 40px;
}

.village-bt {
  background: #EDF0F6 url(../img/sub/bell-ico.svg) no-repeat right;
}

.flex-140 {
  flex: 140px 0 0;
}

.form-type02 {
  box-shadow: none;
  padding: 0;
}

.check01 input {
  width: 44px;
}

.tbl-list02 ul li em {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.tbl-list02 ul li em p {
  color: #002646;
}

.tbl-list02 ul li em p .attachment {
  color: #0059A5;
  font-weight: bold;
  text-decoration: underline;
}

.bg-blue h3 {
  font-size: 25px;
  color: #002646;
}

section.phone02 {
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 210px 0 0;
  background: url(./../img/sub/phone_ico.svg)no-repeat left 51% top 25px;
}

section.phone02 p {
  font-size: 28px;
  font-weight: bold;
  color: #002646;
}

section.phone02 span {
  font-size: 18px;
  font-weight: bold;
  color: #585858;
}

.check-bg {
  background-color: #EDF0F6;
  padding: 20px 60px;
  border-radius: 5px;
}

section.application {
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding: 130px 0 0;
  background: url(./../img/sub/application_ico.svg)no-repeat left 51% top 25px;
  gap: 30px;
}

section.application p {
  font-size: 20px;
}

section.application span {
  color: #002646;
  line-height: 1.5em;
}

.flex-84 {
  flex: 0 0 86% !important;
}

.cont-title2 {
  font-size: 20px;
  color: #002646;
  flex: 100%;
}

.cont-title2::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 3px;
  background-color: #002646;
  margin-bottom: 5px;
  margin-right: 5px;
  border-radius: 5px;
}

.target em p {
  border-radius: 5px;
  padding: 15px !important;
  color: #fff !important;
  margin-right: 7px;
}

.target em p.kindergarden {
  background-color: #FF8900;
}

.target em p.elementary {
  background-color: #298BFF;
}

.target em p.middle-sc {
  background-color: #00A526;
}

.target em p.high-sc {
  background-color: #002646;
}

.class-cont em {
  line-height: 2em;
}

.tbl-list01 ul li div {
  flex: 1;
  display: flex;
  gap: 10px;
}

.tbl-list01 ul li div>div {
  flex: 1;
  align-items: center;
}

.tbl-list01 ul li div>div.check{
  flex: none;
}

.tbl-list01 ul li div>div.item-input{
  flex-direction: column;
  align-items: baseline;
}

.tbl-list01 ul li div>div.input-flex input{flex: 100%;}

.tbl-list01 ul li div>div.phon-wrap{
  flex:1 1 20%;
}

.tbl-list01 > ul li > div>div label {
  flex: 110px 0 0;
  background: #EDF0F6;
  color: #002646;
  font-weight: 500;
  padding: 16px 10px;
  border-radius: 5px;
}

.tbl-list01 ul li div>div input {
  padding: 15px 10px;
}

/* new css */

.socio-wrap {
  position: relative;
  background: #002646;
  padding: 250px 0;
}

.socio-wrap .item-img span {
  display: inline-block;
  position: absolute;
  transition: all ease-in-out .3s;
}

.socio-wrap .item-img span:nth-of-type(1) {
  top: 30px;
  left: 30px;
}

.socio-wrap .item-img span:nth-of-type(2) {
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.socio-wrap .item-img span:nth-of-type(3) {
  top: 30px;
  right: 30px;
}

.socio-wrap .item-img span:nth-of-type(4) {
  bottom: 30px;
  right: 30px;
}

.socio-wrap .item-img span:nth-of-type(5) {
  bottom: 0px;
  left: 50%;
  transform: translate(-50%);
}

.socio-wrap .item-img span:nth-of-type(6) {
  bottom: 30px;
  left: 30px;
}

.socio-wrap .item-img-star span {
  display: inline-block;
  position: absolute;
  transition: all ease-in-out .3s;
}

.socio-wrap .item-img-star span:nth-of-type(1) {
  animation: item-img-star ease-in 2s infinite;
  bottom: 100px;
  right: 25%;
}

.socio-wrap .item-img-star span:nth-of-type(2) {
  animation: item-img-star ease-in 2s infinite;
  animation-delay: .5s;
  bottom: 100px;
  left: 25%;
}

.socio-wrap .item-img-star span:nth-of-type(3) {
  animation: item-img-star ease-in 2s infinite;
  animation-delay: .5s;
  bottom: 50%;
  left: 10%;
}

.socio-wrap .item-img-star span:nth-of-type(4) {
  animation: item-img-star ease-in 2s infinite;
  animation-delay: .5s;
  top: 100px;
  left: 25%;
}

.socio-wrap .item-img-star span:nth-of-type(5) {
  animation: item-img-star ease-in 2s infinite;
  animation-delay: .5s;
  top: 100px;
  right: 25%;
}

.socio-wrap .item-img-star span:nth-of-type(6) {
  animation: item-img-star ease-in 2s infinite;
  animation-delay: .5s;
  top: 50%;
  right: 10%;
}

.socio-wrap .item-txt h5 {
  color: #FFB443;
  text-align: center;
  font-size: 1.5rem;
}

.socio-wrap .item-txt p {
  color: #fff;
  text-align: center;
  line-height: 2;
  margin-top: 20px;
}

@keyframes item-img-star {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.iframe-map {
  position: relative;
}

.iframe-map .mapibox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.iframe-map .mapibox .marker {
  order: 2;
}

.mapibox .pop-box {
  position: relative;
  max-width: 300px;
  width: 260px;
  order: 1;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px 10px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mapibox .pop-box::before {
  position: absolute;
  content: '';
  border-top: 10px solid #fff;
  border-bottom: 10px solid transparent;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);
  transform: translate(-50%, -50%);
  bottom: -30px;
  left: 50%;
}

.mapibox .pop-box .pop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mapibox .pop-box .pop-top h3 {
  color: #003562;
  font-weight: 600;
}

.mapibox .pop-box .pop-cont {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mapibox .pop-box .pop-cont * {
  font-size: 14px;
}

.mapibox .pop-box .pop-cont .pop-list-01 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mapibox .pop-box .pop-cont .pop-list-01 li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.mapibox .pop-box .pop-cont .pop-list-01 li span {
  background-color: #DAE4F5;
  color: #002646;
  font-weight: 500;
  padding: 10px 20px;
  flex: 0 0 50px;
  text-align: center;
  border-radius: 5px;
}

.mapibox .pop-box .pop-cont .pop-list-02 p {
  position: relative;
  color: #002646;
  font-weight: 600;
  padding-left: 10px;
}

.mapibox .pop-box .pop-cont .pop-list-02 p:before {
  position: absolute;
  content: '';
  background-color: 002646;
  width: 5px;
  height: 2px;
  left: 0;
  top: 7px;
}

.mapibox .pop-sucess {
  background-color: #002646;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  width: 90px;
  margin: 0 auto;
}

.view-wrap {
  border-bottom: 1px solid #C7C7C7;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.view-wrap .view-top-tit {
  background-color: #EDF0F6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 35px 15px;
  border-radius: 5px;
}

.view-wrap .view-top-tit h3 {
  color: #002646;
  font-size: 1.5rem;
  font-weight: 600;
}

.view-wrap .view-top-tit ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 25px;
}

.view-wrap .view-top-tit ul li {
  display: flex;
  align-items: center;
  gap: 15px;
}

.view-wrap .view-top-tit ul li span {
  background-color: #66717E;
  padding: 5px 15px;
  color: #fff;
  border-radius: 5px;
}

.view-wrap .view-top-tit ul li em {
  word-break: keep-all;
}

.view-wrap .img-wrap {
  text-align: center;
  padding: 0 35px;
}

.view-wrap .img-wrap img {
  width: 100%;
  height: 100%;
}

.view-wrap p {
  padding: 0 35px 30px;
  word-break: keep-all;
  line-height: 1.8;
}

.multi-wrap {
  border-top: 2px solid #707070;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.multi-wrap .mutibox {}

.multi-wrap .mutibox .muti-title {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #C7C7C7;
  padding-bottom: 20px;
  align-items: center;
}

.multi-wrap .mutibox .muti-title picture {
  position: relative;
  display: inline-block;
  max-width: 300px;
  height: 200px;
  flex: 1;
}

.multi-wrap .mutibox picture:before {
  position: absolute;
  content: '';
  background: url(/img/sub/play.png)no-repeat;
  width: 70px;
  height: 70px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.multi-wrap .mutibox .muti-title picture img {
  height: 100%;
  display: block;
}

.multi-wrap .mutibox .muti-title .multi-txt {
  flex: 1;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.multi-wrap .mutibox .muti-title .multi-txt .title-txt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.multi-wrap .mutibox .muti-title .title-txt .title {
  display: flex;
  gap: 20px;
  align-items: center;
}

.multi-wrap .mutibox .muti-title .title-txt .title h3 {
  font-size: 1.2rem;
}

.multi-wrap .mutibox .muti-title .title-txt .title span {
  padding-left: 30px;
  background: url(/img/sub/time-ico.png)no-repeat;
  background-size: contain;
}

.multi-wrap .mutibox .muti-title .title-txt em {
  color: #66717E;
}

.multi-wrap .mutibox .muti-title em {
  color: #66717E;
}

.multi-wrap .mutibox .multi-content {
  margin-top: 30px;
  background: #EDF0F6;
  padding: 30px;
  display: none;
}

.multi-wrap .mutibox .multi-content picture {
  display: block;
  position: relative;
}

.multi-wrap .mutibox .multi-content picture img {
  width: 100%;
  height: 450px;
}

.multi-wrap .mutibox .multi-content .txt {
  margin-top: 50px;
}

.multi-wrap .mutibox button.multi-btn {
  background: url(/img/sub/com-btn.png)no-repeat center;
  width: 60px;
  height: 60px;
  text-indent: -9999px;
}

.multi-wrap .mutibox.active button.multi-btn {
  transform: rotate(180deg);
}

.flex-box,
.time-box {
  display: flex;
  gap: 10px;
}

.flex-box {
  flex-wrap: wrap;
}

.flex-box>div,
.flex-box input {
  flex: 1 1 10%;
}

.flex-box div[class $=datepicker]>input {
  width: 100%;
}

.form_box label {
  flex: 0 0 75px;
}

.chart-wrap {
  position: relative;
}

.chart-contain {
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.chart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.chart-pie {
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  transition: 0.3s;
  flex: 1;
  margin-bottom: 10px;
}

.chart span {
  background: #fff;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  font-size: 16px;
  transform: translate(-50%, -50%);
}

.chart em {
  color: #111;
  font-weight: bold;
}

.tbl-list01 ul li .tbl-list {
  flex: 0;
}

.tbl-list01 ul li .tbl-list span {
  background: transparent !important;
  flex: 15;
  padding: 0px;
}

.tbl-list01 ul li .tbl-list>div label {
  background: transparent !important;
  padding-right: 23px;
}

.group-wrap {}

.group-wrap .group-item {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.group-wrap .group-item>li {
  flex: 1 1 40%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20px;
  border: 1px solid #0059A5;
  padding: 30px;
  border-radius: 5px;
}

.group-wrap .group-item li img {
  height: 120px;
}

.group-wrap .group-item li h4 {
  flex: unset;
  margin: 0;
  color: #0059A5;
}

.group-wrap .group-item>li:nth-child(2) {
  border: 1px solid #003562;
}

.group-wrap .group-item li:nth-child(2) h4 {
  flex: unset;
  margin: 0;
  color: #003562;
}

.group-wrap .group-item li div {
  flex: 1;
  line-height: 1.8;
}

.group-wrap .group-item li div ul li span {
  color: #003562;
  font-weight: 600;
}

.group-wrap .group-process {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  padding: 20px;
}

.group-wrap .group-process ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-wrap .group-process ul li {
  text-align: center;
}

.group-wrap .group-process ul li img {
  flex: 1;
}

.group-wrap .group-process ul li h5 {
  margin-top: 20px;
  color: #0059A5;
  font-weight: 600;
  font-size: 1.1rem;
}

.group-wrap .group-process ul li p {
  flex: 1;
  margin-top: 10px;
}

.group-Item{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 25px;margin: 30px 0 50px;}

.group-Item .item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #34A2FF;
  border-radius: 5px;
  padding: 10px 15px 35px;
  gap: 20px;
}

.group-Item .item:nth-of-type(2){
  border: 1px solid #008AFF;
}

.group-Item .item:nth-of-type(3){
  border: 1px solid #0059A5;
}

.group-Item .item:nth-of-type(4){
  border: 1px solid #003765;
}

.group-Item .item h4{
  background: #34A2FF;
  color: #fff;
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 5px;
  margin: 0;
}

.group-Item .item:nth-of-type(2) h4{
  background: #008AFF;
}

.group-Item .item:nth-of-type(3) h4{
  background: #0059A5;
}

.group-Item .item:nth-of-type(4) h4{
  background: #003765;
}

.group-Item .item ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group-Item .item ul li{
  position:relative;
  padding-left:8px;
}

.group-Item .item ul li:after{
  position: absolute;
  content: '';
  width:2px;
  height:10px;
  background:#0059A5;
  left:0;
  top:5px;
}

.group{box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);border-radius: 5px;padding: 25px;display: flex;flex-direction: column;gap: 15px;margin-top: 25px;}

.group h5{
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.group .group-cont{
  background: #F7F7F7;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.group .group-cont span{
  position: relative;
  background: url(/img/sub/item-before.svg)no-repeat;
  background-size: contain;
  padding-left: 25px;
  flex: 0 0 160px;
  border-right: 1px solid #003562;
}

.group .group-cont span:after{
  position: absolute;
  content: '';
}

/* 20230403 추가 */
.alert-success{
  color:#00a38d;
  font-weight:500;
}

.alert-danger{
  color:#f40031;
  font-weight:500;
}



@media screen and (max-width: 1440px) {
  .village-teacher li {
    padding: 15px;
  }

  .subWrap .nav>ul>li:not(:first-child) {
    flex: 200px 0 0 !important;
  }

  .tbl-list01 ul li .item-flex-sub {
    flex-direction: column;
  }

  .chart-wrap {
    padding: 20px;
  }

  .chart-contain {
    gap: 40px;
}

}

@media screen and (max-width: 768px) {
  .village-bt {
    align-items: flex-start !important;
  }

  .village-school ul {
    flex-wrap: wrap;
  }

  .subWrap .nav .three-nav {
    width: 100%;
  }

  .subWrap .nav>ul {
    flex-wrap: wrap;
  }

  .subWrap .nav>ul>li:not(:first-child) {
    flex: auto !important;
  }

  .inputtype01 {
    padding: 9px 10px;
  }

  .bg-blue h3 {
    font-size: 1.2rem;
  }

  .check-bg {
    padding: 10px 30px;
  }

  section.application p {
    font-size: 1rem;
  }

  .tbl-list01 ul li .item-flex-sub>div {
    flex-direction: column;
    align-items: inherit;
    text-align: center;
  }

  .tbl-list01 ul li div>div label {
    flex: 1 1 100%;
  }

  .community-tit {
    font-size: 1.1rem;
    margin-bottom: 15px;
  }

  /* css new */
  .socio-wrap {
    padding: 120px 20px;
  }

  .socio-wrap .item-img span img {
    height: 40px;
  }

  .socio-wrap .item-img-star span img {
    height: 30px;
  }

  .socio-wrap .item-txt h5 {
    font-size: 1rem;
  }

  .mapibox .pop-box {
    max-width: 260px;
    width: calc(100vw / 1.5);
  }

  .mapibox .pop-box .pop-cont * {
    font-size: 0.8rem;
  }

  .view-wrap .view-top-tit ul {
    gap: 10px;
  }

  .view-wrap .view-top-tit h3 {
    font-size: 1.2rem;
  }

  .view-wrap .img-wrap {
    padding: 0 15px;
  }

  .view-wrap p {
    padding: 0 15px 15px;
  }

  .multi-wrap .mutibox .muti-title picture {
    height: 100px;
  }

  .multi-wrap .mutibox button.multi-btn {
    background-size: 35px;
    width: 35px;
  }

  .multi-wrap .mutibox .muti-title .title-txt .title h3 {
    font-size: 1rem;
  }

  .flex-box>div,
  .flex-box input {
    flex: 1 1 50%;
  }

  .form_box label {
    flex: 0 0 60px;
  }

  .bg-blue>div {
    flex-wrap: wrap;
    flex: 100%;
  }

  .group-wrap .group-process ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25%, auto));
    gap: 15px 0;
  }

  .group-wrap .group-process ul li {
    flex: 1 1 20%;
  }

  .group-wrap .group-process ul li>img {
    width: 35px
  }

  .group-wrap .group-item li h4 {
    font-size: 1rem;
  }

  .group-wrap .group-process ul li h5 {
    font-size: 1rem;
  }

  .group-Item .item{
    flex:1 1 30%;
  }

  .group .group-cont span{
    flex:0 0 120px;
  }

  .certificate-box .certificate-tit{
    font-size:0.9rem;
  }
  .satis{
    margin: 20px 0 0 !important;
    padding: 15px 10px;
  }

  .satis .checkbox{
    justify-content: start !important;
  }

  .chart-pie {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transition: 0.3s;
    flex: 1;
    margin-bottom: 10px;
  }

  .chart span {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
  }

  .chart-contain {
    gap: 55px;
  }
}

@media screen and (max-width: 600px) {
  .village-teacher li {
    display: block;
  }

  .village-teacher li .title {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .village-school li .village-img img {
    width: 35%;
  }

  .profile-file {
    padding: 23px 27px;
  }

  .file-block {
    display: block !important;
  }

  .file-block .input-flex {
    margin-left: 0 !important;
    margin-top: 15px;
  }

  .group{
    padding:0;
  }
}

@media screen and (max-width: 375px) {
  .subWrap .nav>ul>li:not(:first-child) {
    border-right: 0;
  }

  .multi-wrap .mutibox .muti-title picture {
    flex: 100%;
    height: 150px;
    max-width: 100%;
  }

  .multi-wrap .mutibox .muti-title {
    flex-wrap: wrap;
  }

  .multi-wrap .mutibox .muti-title picture img {
    width: 100%;
  }

  .multi-wrap .mutibox .multi-content picture img {
    height: 200px;
  }

  .multi-wrap .mutibox picture:before {
    width: 50px;
    height: 50px;
    background-size: contain;
  }

  .form_box {
    flex-direction: column;
  }

  .form_box label,
  .form_box>div {
    flex: 1;
    width: 100%;
  }

  .btn-type03, .file label.file-label{
    flex:80px 0 0;
  }
}

/* 2023-04-04 */
.fs-nomal {
  font-style: normal;
  margin-left: 7px;
}

.select-box{
  flex: 1 1 50%;
    border: 1px solid #cbcbcb;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px !important;
    height: auto;
    padding: 16px 10px;
    background: #fff url(../img/select_bg.svg)no-repeat 98%;

}

@page {
size: 210mm 297mm;
margin: 0;
}

@media print {
html, body {
	page-break-after: always;
    page-break-before: always;
}
}

.bg-white-custom {
  background-color: #fff;
  border-radius: 5px;
}

.bg-white-custom h4:before {
  content: "";
  width: 30px;
  height: 3px;
  background-color: #003562;
  display: block;
  text-align: left;
  border-radius: 5px;
}

.tbl-list01 ul li div.file-list {
	flex-direction: column;
}
.tbl-list01 ul li div>div.form-upload {
	display:block;
}
#fileInfo {
	flex-direction: column;
}
#fileInfo .form-upload{
	width:100%;
}
#fileInfo .btn-type08 {
	flex: 130px 0 0;
	padding:15px 10px;
}

.form-upload {
    margin-bottom: 5px;
}

.form-control.disabled {
    background-color: #eee;
    opacity: 1;
    cursor: not-allowed
}

.file-form-group {
    position: relative;
    white-space: nowrap;
    display: table
}

.form-previewbox, .form-checkbox, .form-input__addon, .form-group__upload {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

.form-previewbox {
    width: 100px;
    padding-right: 10px;
}

.form-previewbox img {
    width: 100%;
}

.form-checkbox, .form-input__addon {
    width: 1%;
    padding-right: 10px;
}

.form-group__upload {
    vertical-align: middle;
    padding-right: 10px;
}

.form-checkbox {
    padding-left: 10px;
}

.form-group__upload .form-control {
    height: 34px;
}

.form-upload__label {
    display: inline-block;
    margin-right: 0;
    font-size: 0;
    text-indent: 100%;
    vertical-align: middle
}

.form-upload__label.file {
    margin-top: -10px
}

.form-upload__file {
    display: inline-block;
    width: inherit;
    min-width: 80%;
    padding-left: 0;
    line-height: 16px
}

.form-upload__file--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: inherit;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: none
}

.form-upload__clear {
    display: none;
    position: absolute;
    right: 8px;
    top: 9px;
    font-size: 0;
    line-height: 0;
    color: transparent
}

.form-upload__clear.active {
    display: block
}

.form-upload.focus [data-button=upload] {
    outline: 2px dotted #2b69fc
}
.tbl-list01 ul li div>div .form-input__addon {
	flex: 130px 0 0;
}
.form-group__upload .form-control {
	width:100%;
}
.form-group__upload textarea.form-control {
	display:none;
	border:1px solid #cbcbcb;
	padding: 15px 10px;
}