@charset "UTF-8";
#container {
  margin-top: 11.2rem;
}

/* location */
.subFunc {
  background: no-repeat center/cover;
  border-bottom: 1px solid var(--gray-300);
}
.subFunc.bg1 {
  background-image: url(../images/sub/bg_sub_visual1.jpg);
}
.subFunc.bg2 {
  background-image: url(../images/sub/bg_sub_visual2.jpg);
}
.subFunc.bg3 {
  background-image: url(../images/sub/bg_sub_visual3.jpg);
}
.subFunc.bg4 {
  background-image: url(../images/sub/bg_sub_visual4.jpg);
}
.subFunc.bg5 {
  background-image: url(../images/sub/bg_sub_visual5.jpg);
}
.subFunc.bg6 {
  background-image: url(../images/sub/bg_sub_visual6.jpg);
}

.menuTit {
  font-size: 4.8rem;
  color: #fff;
  line-height: 136.2318%;
  letter-spacing: -1.38px;
}

.siteLocation,
.location,
.locationTab,
.funcItem {
  display: flex;
  align-items: center;
}

.siteLocation {
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8.8rem 2%;
}

.location .home {
  flex-shrink: 0;
}
.location .home a {
  display: block;
}
.location .home a .bi {
  width: 3.2rem;
  height: 3.2rem;
  background: #fff;
  border-radius: 50%;
}
.location .home a .bi::before {
  width: 1.6rem;
  background: var(--primary-400);
}

.locationTab > li {
  display: flex;
  align-items: center;
  position: relative;
}
.locationTab > li::before {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 1.4rem;
  -webkit-mask: url(../images/icon/arrow-right.svg) no-repeat center/contain;
  mask: url(../images/icon/arrow-right.svg) no-repeat center/contain;
  background: #fff;
}
.locationTab > li a {
  display: block;
  font-size: var(--font-sm);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.3px;
}

.funcItem {
  gap: 0.8rem;
  margin-left: 2.8rem;
}
.funcItem li button {
  width: 3.2rem;
  height: 3.2rem;
}
.funcItem li button .bi {
  width: 2.2rem;
  height: 2.2rem;
}
.funcItem li button .bi::before {
  background: #fff;
}

/* layout */
#contentGroup {
  min-height: 50rem;
  padding: 8rem 0;
}

.pageTopWrap {
  max-width: 1280px;
  margin: 0 auto;
  margin-bottom: 5rem;
  padding: 0 2%;
}

.defaultLayout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2%;
}

h3.pageTit {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  border: 0;
}

/* tabNav */
.tabNav ul {
  display: flex;
}
.tabNav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.tabNav ul li a.active {
  font-weight: 700;
}
.tabNav.depth2 {
  padding: 0 2%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.72);
}
.tabNav.depth2 ul {
  max-width: 1280px;
  margin: 0 auto;
}
.tabNav.depth2 ul li {
  flex-shrink: 0;
}
.tabNav.depth2 ul li a {
  position: relative;
  height: 6.4rem;
  padding: 0 2rem;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--gray-600);
}
.tabNav.depth2 ul li a.active {
  font-weight: 700;
  color: var(--primary-500);
}
.tabNav.depth2 ul li a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-500);
}
.tabNav.depth3 ul {
  gap: 0 1.2rem;
}
.tabNav.depth3 ul li a {
  min-width: 18rem;
  height: 6rem;
  padding: 0 2.8rem;
  font-size: var(--font-md);
  letter-spacing: -0.17px;
  color: var(--gray-500);
  border: 1px solid var(--gray-300);
  border-radius: 4em;
}
.tabNav.depth3 ul li a.active {
  border: 2px solid var(--primary-400);
  color: var(--primary-400);
}

.moTabNavBtn {
  display: none;
}

/* tabBtn */
.tabBtn {
  margin-bottom: 4rem;
  border-bottom: 1px solid var(--gray-300);
}
.tabBtn ul {
  display: flex;
}
.tabBtn ul li {
  flex: 1;
}
.tabBtn ul li a,
.tabBtn ul li button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 5.6rem;
  padding: 0 0.8rem;
  font-size: var(--font-md);
  color: var(--gray-500);
  box-sizing: border-box;
}
.tabBtn ul li a::after,
.tabBtn ul li button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.3rem;
  transition: 0.2s;
}
.tabBtn ul li a.active,
.tabBtn ul li button.active {
  font-weight: 700;
}
.tabBtn ul li a.active::after,
.tabBtn ul li button.active::after {
  background: var(--primary-500);
}

/* tabFilter */
.tabFilter {
  margin-bottom: 3rem;
}
.tabFilter ul {
  display: flex;
  border: 1px solid var(--gray-300);
  border-radius: 0.4rem;
  box-sizing: border-box;
}
.tabFilter ul li {
  flex: 1;
  border-left: 1px solid var(--gray-300);
}
.tabFilter ul li:first-child {
  border-left: none;
}
.tabFilter ul li:first-child a,
.tabFilter ul li:first-child button {
  border-radius: 0.4rem 0 0 0.4rem;
}
.tabFilter ul li:last-child a,
.tabFilter ul li:last-child button {
  border-radius: 0 0.4rem 0.4rem 0;
}
.tabFilter ul li a,
.tabFilter ul li button {
  display: block;
  width: 100%;
  padding: 0 1rem;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
  line-height: 4.8rem;
  box-sizing: border-box;
  text-align: center;
}
.tabFilter ul li a.active,
.tabFilter ul li button.active {
  background: rgba(25, 44, 169, 0.08);
  color: var(--primary-500);
  font-weight: 700;
}
.tabFilter.scroll ul {
  overflow-x: auto;
}
.tabFilter.scroll ul li {
  flex: 1 0 auto;
}

/* tabCategory */
.tabCategory {
  margin-bottom: 4rem;
}
.tabCategory ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.8rem;
}
.tabCategory ul li a,
.tabCategory ul li button {
  display: block;
  padding: 0 1.6rem;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
  line-height: 4rem;
  border-radius: 4em;
  box-sizing: border-box;
}
.tabCategory ul li a.active,
.tabCategory ul li button.active {
  background: var(--primary-500);
  color: #fff;
  font-weight: 700;
}

.tabContent {
  display: none;
}

@media screen and (max-width: 1024px) {
  #container {
    margin-top: 7.5rem;
  }
  /* location */
  .subFunc {
    padding: 0;
    background: none !important;
  }
  .menuTit {
    width: 100%;
    padding: 3.75rem 0;
    font-size: 3.75rem;
    color: var(--gray-600);
  }
  .siteLocation {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 0 5.5555%;
  }
  .location {
    width: 100%;
    padding: 1.75rem 0;
  }
  .location .home a .bi {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--gray-100);
  }
  .location .home a .bi::before {
    width: 2rem;
  }
  .locationTab {
    flex-grow: 1;
    min-width: 0px;
  }
  .locationTab > li::before {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0.75rem;
    flex-shrink: 0;
    background: var(--gray-600);
  }
  .locationTab > li a {
    font-size: 1.875rem;
    color: var(--gray-600);
    white-space: nowrap;
  }
  .locationTab > li:last-child {
    min-width: 0px;
  }
  .locationTab > li:last-child a {
    min-width: 0px;
  }
  .locationTab > li:last-child a span {
    display: block;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
  }
  .funcItem {
    display: none;
  }
  /* layout */
  #contentGroup {
    padding: 6.25rem 0;
  }
  .pageTopWrap {
    margin-bottom: 3.75rem;
    padding: 0 5.5555%;
  }
  .defaultLayout {
    padding: 0 5.5555%;
  }
  /* tabNav */
  .tabNav ul {
    padding: 0 5.5555%;
  }
  .tabNav.depth2 {
    padding: 0;
  }
  .tabNav.depth2 ul {
    overflow-x: auto;
  }
  .tabNav.depth2 ul::-webkit-scrollbar {
    display: none;
  }
  .tabNav.depth2 ul li a {
    height: 5.5rem;
    padding: 0 1rem;
    font-size: 2.125rem;
  }
  .tabNav.depth3 {
    position: relative;
  }
  .tabNav.depth3 div {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 0.5rem;
    z-index: 10;
  }
  .tabNav.depth3 ul {
    display: block;
    padding: 2rem 1.5rem;
    background: #fff;
    border: 1px solid var(--primary-400);
    border-radius: 1rem;
    box-sizing: border-box;
  }
  .tabNav.depth3 ul li a {
    justify-content: flex-start;
    min-width: auto;
    height: 4.25rem;
    padding: 0 1.5rem;
    font-size: 2.125rem;
    letter-spacing: 0;
    border: none;
    border-radius: 0.5rem;
  }
  .tabNav.depth3 ul li a.active {
    font-weight: 500;
    border: none;
  }
  .moTabNavBtn {
    display: block;
    width: 100%;
    height: 7rem;
    padding: 0 3rem;
    border: 1px solid var(--primary-400);
    border-radius: 4em;
    box-sizing: border-box;
  }
  .moTabNavBtn span {
    display: block;
    position: relative;
    font-size: 2.125rem;
    font-weight: 500;
    color: var(--primary-400);
    line-height: 3rem;
    text-align: left;
  }
  .moTabNavBtn span::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 100%;
    -webkit-mask: url(../images/icon/arrow-down.svg) no-repeat center/contain;
    mask: url(../images/icon/arrow-down.svg) no-repeat center/contain;
    background: currentColor;
    transition: 0.2s;
  }
  .moTabNavBtn.active span::after {
    transform: rotate(180deg);
  }
  /* tabBtn */
  .tabBtn {
    margin-bottom: 3rem;
  }
  .tabBtn ul {
    overflow-x: auto;
  }
  .tabBtn ul::-webkit-scrollbar {
    display: none;
  }
  .tabBtn ul li {
    flex: 1 0 auto;
  }
  .tabBtn ul li a,
  .tabBtn ul li button {
    height: 6rem;
    padding: 0 1rem;
    font-size: 2rem;
  }
  .tabBtn ul li a::after,
  .tabBtn ul li button::after {
    height: 0.375rem;
  }
  /* tabFilter */
  .tabFilter {
    margin-bottom: 2.5rem;
  }
  .tabFilter ul {
    overflow-x: auto;
    border-radius: 0.5rem;
  }
  .tabFilter ul::-webkit-scrollbar {
    display: none;
  }
  .tabFilter ul li {
    flex: 1 0 auto;
  }
  .tabFilter ul li:first-child a,
  .tabFilter ul li:first-child button {
    border-radius: 0.5rem 0 0 0.5rem;
  }
  .tabFilter ul li:last-child a,
  .tabFilter ul li:last-child button {
    border-radius: 0 0.5rem 0.5rem 0;
  }
  .tabFilter ul li a,
  .tabFilter ul li button {
    padding: 0 1.75rem;
    font-size: 1.875rem;
    line-height: 5rem;
  }
  /* tabCategory */
  .tabCategory {
    margin-bottom: 5rem;
  }
  .tabCategory ul {
    gap: 0.5rem;
  }
  .tabCategory ul li a,
  .tabCategory ul li button {
    padding: 0 1.5rem;
    font-size: 1.875rem;
    line-height: 3.75rem;
    border: 1px solid var(--gray-300);
  }
  .tabCategory ul li a.active,
  .tabCategory ul li button.active {
    border-color: var(--primary-500);
  }
}
/* content */
.btnGroup {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin-top: 4rem;
}
.btnGroup.right {
  justify-content: flex-end;
}
.btnGroup.board .btn {
  min-width: 10.4rem;
}
.btnGroup.form .btn {
  min-width: 14rem;
}
.btnGroup.find .btn {
  min-width: 18rem;
}

.conStack {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.conStack + .conStack {
  margin-top: 3.2rem;
}

.conSplit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.conSplit .btnGroup {
  flex-shrink: 1;
  margin: 0;
}

.conTit,
.conTit2 {
  position: relative;
  margin-top: 8rem;
  margin-bottom: 2rem;
  font-size: 3rem;
  font-weight: 700;
  word-break: keep-all;
}
.conTit:first-child,
.conTit2:first-child {
  margin-top: 0;
}

.conTit2 {
  margin-top: 6rem;
  padding-left: 2.4rem;
  font-size: 2.3rem;
  color: var(--gray-600);
}
.conTit2::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  left: 0;
  width: 1.6rem;
  height: 1.6rem;
  background: url(../images/sub/icon_bullet_tit.svg) no-repeat center/contain;
}
.conTit2 > i {
  float: left;
  position: relative;
  margin: 0 0.6rem;
}
.conTit2 > span {
  overflow: hidden;
  display: block;
}

.conTit + .conTit2 {
  margin-top: 0;
}

.conTxt {
  font-size: var(--font-md);
  color: var(--gray-600);
  word-break: keep-all;
}
.conTxt.sm {
  font-size: var(--font-sm);
}
.conTxt.lg {
  font-size: var(--font-lg);
  font-weight: 500;
}

.listStyle li {
  position: relative;
  margin-top: 0.4rem;
  padding-left: 2.5rem;
  font-size: var(--font-md);
  color: var(--gray-500);
  word-break: keep-all;
}
.listStyle li:first-child {
  margin-top: 0;
}
.listStyle li::before {
  content: "·";
  position: absolute;
  top: 0;
  left: 1rem;
  font-weight: 900;
}
.listStyle li ul,
.listStyle li ol {
  margin-top: 0.8rem;
}
.listStyle li ul li::before,
.listStyle li ol li::before {
  content: "-";
  font-weight: 400;
}
.listStyle li.dot::before {
  content: "·";
  font-weight: 900;
}
.listStyle li .noneList > li {
  padding: 0;
}
.listStyle li .noneList > li::before {
  display: none;
}

ul.prefix > li,
ol.prefix > li {
  padding: 0;
}
ul.prefix > li::before,
ol.prefix > li::before {
  display: none;
}
ul.prefix > li > i,
ol.prefix > li > i {
  float: left;
  position: relative;
  margin: 0 0.6rem;
}
ul.prefix > li > span,
ol.prefix > li > span {
  overflow: hidden;
  display: block;
}
ul.prefix > li > ul,
ul.prefix > li > ol,
ol.prefix > li > ul,
ol.prefix > li > ol {
  padding-left: 2.5rem;
}

.txtNote {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--font-md);
  color: var(--point);
  word-break: keep-all;
}
.txtNote::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

.txtRef {
  position: relative;
  padding-left: 2.5rem;
  font-size: var(--font-md);
  color: var(--point);
  word-break: keep-all;
}
.txtRef::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 2rem;
  height: 2rem;
  -webkit-mask: url(../images/icon/exclam-circle.svg) no-repeat center/contain;
  mask: url(../images/icon/exclam-circle.svg) no-repeat center/contain;
  background: currentColor;
}

.tableDrag {
  display: none;
}

.tableStyle {
  table-layout: fixed;
  width: 100%;
  margin: 2rem 0;
  border-top: 1px solid var(--gray-600);
}
.tableStyle th,
.tableStyle td {
  padding: 2.1rem 1rem;
  vertical-align: middle;
  font-size: var(--font-md);
  color: var(--gray-500);
  text-align: center;
  word-break: keep-all;
  background: #fff;
  border-left: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
  box-sizing: border-box;
}
.tableStyle th:first-child,
.tableStyle td:first-child {
  border-left: none;
}
.tableStyle th.text-left, .tableStyle th.text-right,
.tableStyle td.text-left,
.tableStyle td.text-right {
  padding: 2.1rem 2rem;
}
.tableStyle th.text-break,
.tableStyle td.text-break {
  word-break: break-all;
}
.tableStyle th.bdl,
.tableStyle td.bdl {
  border-left: 1px solid var(--gray-300);
}
.tableStyle th {
  font-weight: 500;
  color: var(--gray-600);
  background: var(--primary-100);
}

.pageGuide {
  margin-bottom: 6rem;
  padding: 4rem;
  border-radius: 1.2rem;
  background: var(--primary-100);
  word-break: keep-all;
}
.pageGuide.file {
  margin-top: 6rem;
  margin-bottom: 0;
}
.pageGuide.file .btnGroup {
  margin: 0;
}
.pageGuide.file .btnGroup .btn {
  width: 36rem;
}
.pageGuide.file.wide .btnGroup .btn {
  width: 38rem;
}
.pageGuide.search {
  margin-bottom: 4rem;
}

.toggleCon {
  display: none;
}

@media screen and (max-width: 1024px) {
  /* content */
  .btnGroup {
    gap: 2rem;
    margin-top: 5rem;
  }
  .btnGroup.board .btn {
    min-width: 11rem;
  }
  .btnGroup.form .btn {
    min-width: 15rem;
  }
  .btnGroup.find .btn {
    min-width: 18.75rem;
  }
  .conStack {
    gap: 1rem;
  }
  .conStack + .conStack {
    margin-top: 3.5rem;
  }
  .conSplit {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .conSplit .btnGroup {
    width: 100%;
    margin-top: 5rem;
  }
  .conTit,
  .conTit2 {
    margin-top: 7.5rem;
  }
  .conTit2 {
    margin-top: 5rem;
    padding-left: 3rem;
    font-size: 2.625rem;
  }
  .conTit2::before {
    top: 1rem;
    width: 2rem;
    height: 2rem;
  }
  .conTxt {
    font-size: 1.875rem;
  }
  .conTxt.lg {
    font-size: 2.125rem;
  }
  .listStyle li {
    font-size: 1.875rem;
  }
  .txtNote {
    font-size: 1.875rem;
  }
  .txtRef {
    font-size: 1.875rem;
  }
  .tableStyle th,
  .tableStyle td {
    padding: 2rem 1.25rem;
    font-size: 1.75rem;
  }
  .tableStyle th.text-left, .tableStyle th.text-right,
  .tableStyle td.text-left,
  .tableStyle td.text-right {
    padding: 2rem 1.25rem;
  }
  .pageGuide {
    margin-bottom: 5rem;
    padding: 3rem;
    border-radius: 1rem;
  }
  .pageGuide.file {
    margin-top: 5rem;
    margin-bottom: 0;
  }
  .pageGuide.file .btnGroup {
    flex-direction: column;
    gap: 1.5rem;
  }
  .pageGuide.file .btnGroup .btn {
    width: 100%;
  }
  .pageGuide.file.wide .btnGroup .btn {
    width: 100%;
  }
  .pageGuide.search {
    margin-bottom: 5rem;
    padding: 3rem 2rem;
  }
}
@media screen and (max-width: 960px) {
  .tableDrag {
    margin-top: 1.25rem;
    padding: 0.75rem 0;
    font-size: 1.625rem;
    font-weight: 300;
    color: var(--gray-500);
    text-align: center;
    border-top: 1px solid var(--gray-200);
  }
  .scrollTblWrap {
    width: 100%;
    margin: 2rem 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .scrollTblWrap table {
    width: 900px;
    margin: 0 !important;
  }
}
/* 게시판 */
.boardSchForm {
  display: flex;
  margin-bottom: 5rem;
  border: 1px solid var(--gray-500);
  border-radius: 0.8rem;
  box-sizing: border-box;
}
.boardSchForm > div {
  position: relative;
}
.boardSchForm > div::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 2.4rem;
  background: #ddd;
  transform: translateY(-50%);
}
.boardSchForm > div:first-child::before {
  display: none;
}
.boardSchForm > div select,
.boardSchForm > div input {
  width: 100%;
  height: 6rem;
  font-size: var(--font-md);
  font-weight: 500;
  border: none;
  border-radius: 0.8rem;
  box-sizing: border-box;
  background: transparent;
}
.boardSchForm .schSelect {
  flex-shrink: 0;
  min-width: 16.8rem;
}
.boardSchForm .schSelect .selectbox::after {
  right: 2.4rem;
}
.boardSchForm .schSelect .selectbox select {
  padding: 0 2.4rem;
  padding-right: 4.4rem;
  color: var(--gray-500);
}
.boardSchForm .schInput {
  flex-grow: 1;
  position: relative;
}
.boardSchForm .schInput input {
  padding: 0 2rem;
  padding-right: 8rem;
  color: var(--gray-600);
}
.boardSchForm .schInput input::placeholder {
  color: var(--gray-400);
}
.boardSchForm .schInput button {
  position: absolute;
  top: 0;
  right: 2rem;
  width: 6rem;
  height: 100%;
  color: var(--gray-600);
  z-index: 1;
}

.boardFilter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.boardFilter .count {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--gray-600);
}
.boardFilter .count b {
  font-weight: 700;
  color: #0b50d0;
}
.boardFilter .sorting {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.boardFilter .btnSelect {
  position: relative;
}
.boardFilter .btnSelect .selCode {
  display: block;
  min-width: 15.4rem;
  height: 4.8rem;
  padding: 0 1.6rem;
  border: 1px solid var(--gray-500);
  border-radius: 0.8rem;
  box-sizing: border-box;
}
.boardFilter .btnSelect .selCode span {
  display: block;
  position: relative;
  padding-right: 3rem;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-600);
  text-align: left;
}
.boardFilter .btnSelect .selCode span::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 100%;
  -webkit-mask: url(../images/icon/arrow-down.svg) no-repeat center/contain;
  mask: url(../images/icon/arrow-down.svg) no-repeat center/contain;
  background: var(--gray-600);
  transition: 0.2s;
}
.boardFilter .btnSelect .selCode.on span::after {
  transform: rotate(180deg);
}
.boardFilter .btnSelect .selOption {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  margin-top: 0.4rem;
  z-index: 10;
}
.boardFilter .btnSelect .selOption ul {
  padding: 1.6rem 0.8rem;
  background: #fff;
  border-radius: 0.8rem;
  border: 1px solid var(--gray-300);
  box-sizing: border-box;
}
.boardFilter .btnSelect .selOption ul li button {
  display: block;
  width: 100%;
  padding: 0 0.8rem;
  font-size: var(--font-md);
  color: var(--gray-600);
  height: 3.2rem;
  text-align: left;
  border-radius: 0.4rem;
  transition: background 0.15s;
}
.boardFilter .btnSelect .selOption ul li button:hover, .boardFilter .btnSelect .selOption ul li button:focus {
  background: var(--gray-100);
}
.boardFilter .btnSelect.mo .selCode {
  display: none;
}
.boardFilter .btnSelect.mo .selOption {
  display: block;
  position: static;
  margin: 0;
}
.boardFilter .btnSelect.mo .selOption ul {
  display: flex;
  gap: 0.4rem;
  padding: 0;
  border: none;
  border-radius: 0;
}
.boardFilter .btnSelect.mo .selOption ul li button {
  padding: 0 0.4rem;
  color: var(--gray-500);
  border-radius: 0;
}
.boardFilter .btnSelect.mo .selOption ul li button:hover, .boardFilter .btnSelect.mo .selOption ul li button:focus {
  background: none;
}
.boardFilter .btnSelect.mo .selOption ul li button span {
  display: block;
  position: relative;
  line-height: 1.2;
}
.boardFilter .btnSelect.mo .selOption ul li button span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  transition: background 0.15s;
}
.boardFilter .btnSelect.mo .selOption ul li button.active {
  font-weight: 700;
  color: var(--gray-600);
}
.boardFilter .btnSelect.mo .selOption ul li button.active span::before {
  background: var(--gray-600);
}

.pageNav {
  margin-top: 4rem;
}
.pageNav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}
.pageNav ul li a,
.pageNav ul li strong {
  display: block;
  position: relative;
  width: 4rem;
  font-size: var(--font-md);
  color: var(--gray-500);
  text-align: center;
  line-height: 4rem;
}
.pageNav ul li strong {
  background: var(--secondary-200);
  border-radius: 0.6rem;
  color: #fff;
}
.pageNav ul li.pageBtn a {
  width: auto;
  font-size: initial;
  color: initial;
  text-align: initial;
  line-height: initial;
}
.pageNav ul li.pageBtn .item {
  display: flex;
  align-items: center;
  font-size: var(--font-md);
  color: var(--gray-500);
  text-align: center;
  line-height: 4rem;
}
.pageNav ul li.pageBtn .bi {
  width: 2rem;
  height: 2rem;
  margin: 0 0.8rem;
}
.pageNav ul li.pageBtn.disabled .item {
  color: var(--gray-400);
}

@media screen and (max-width: 1024px) {
  .boardSchForm {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 5rem;
    border: none;
    border-radius: 0;
  }
  .boardSchForm > div::before {
    display: none;
  }
  .boardSchForm > div select,
  .boardSchForm > div input {
    height: 6.5rem;
    font-size: 2rem;
    border: 1px solid var(--gray-500);
    border-radius: 1rem;
  }
  .boardSchForm .schSelect .selectbox::after {
    right: 3rem;
    width: 3rem;
  }
  .boardSchForm .schSelect .selectbox select {
    padding: 0 3rem;
    padding-right: 6rem;
  }
  .boardSchForm .schInput input {
    padding: 0 3rem;
    padding-right: 7.75rem;
  }
  .boardSchForm .schInput button {
    right: 1.25rem;
    width: 6.5rem;
  }
  .boardSchForm .schInput button .bi {
    width: 3rem;
    height: 3rem;
  }
  .boardFilter {
    margin-bottom: 2.5rem;
  }
  .boardFilter .count {
    font-size: 2.125rem;
  }
  .boardFilter .btnSelect .selCode {
    min-width: 13rem;
    height: 5rem;
    padding: 0 2rem;
    border-radius: 0.5rem;
  }
  .boardFilter .btnSelect .selCode span {
    padding-right: 3.5rem;
    font-size: 1.875rem;
  }
  .boardFilter .btnSelect .selCode span::after {
    width: 2.5rem;
  }
  .boardFilter .btnSelect .selOption {
    margin-top: 0.5rem;
  }
  .boardFilter .btnSelect .selOption ul {
    padding: 2rem 1rem;
    border-radius: 0.5rem;
  }
  .boardFilter .btnSelect .selOption ul li button {
    padding: 0 1rem;
    font-size: 1.875rem;
    height: 4.25rem;
    border-radius: 0.5rem;
  }
  .boardFilter .btnSelect.mo .selCode {
    display: block;
  }
  .boardFilter .btnSelect.mo .selOption {
    display: none;
    position: absolute;
    margin-top: 0.5rem;
  }
  .boardFilter .btnSelect.mo .selOption ul {
    display: block;
    padding: 2rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-300);
    box-sizing: border-box;
  }
  .boardFilter .btnSelect.mo .selOption ul li button {
    padding: 0 1rem;
    color: var(--gray-600);
    border-radius: 0.5rem;
  }
  .boardFilter .btnSelect.mo .selOption ul li button:hover, .boardFilter .btnSelect.mo .selOption ul li button:focus {
    background: var(--gray-100);
  }
  .boardFilter .btnSelect.mo .selOption ul li button span::before {
    display: none;
  }
  .boardFilter .btnSelect.mo .selOption ul li button.active {
    font-weight: 400;
  }
  .pageNav {
    margin-top: 3rem;
  }
  .pageNav ul {
    gap: 0.5rem;
  }
  .pageNav ul li a,
  .pageNav ul li strong {
    font-size: 1.875rem;
  }
  .pageNav ul li strong {
    border-radius: 0.75rem;
  }
  .pageNav ul li.pageBtn:first-child {
    margin-right: 1.5rem;
  }
  .pageNav ul li.pageBtn:last-child {
    margin-left: 1.5rem;
  }
  .pageNav ul li.pageBtn .item {
    height: 4rem;
  }
  .pageNav ul li.pageBtn .txt {
    display: none;
  }
  .pageNav ul li.pageBtn .bi {
    width: 2rem;
    height: 2rem;
    margin: 0 0.5rem;
  }
}
/* 게시판-일반 */
.boardList {
  width: 100%;
}
.boardList table {
  width: 100%;
  table-layout: fixed;
  text-align: center;
}
.boardList table thead {
  border-top: 1px solid var(--gray-500);
  border-bottom: 1px solid var(--gray-500);
}
.boardList table tbody tr {
  border-bottom: 1px solid var(--gray-300);
}
.boardList table tbody tr:hover {
  background-color: var(--gray-100);
}
.boardList table tbody tr.noDataRow {
  padding: 0;
}
.boardList table tbody tr.noDataRow td {
  width: 100%;
  padding: 0;
}
.boardList table tbody tr.noDataRow td .noData {
  border-radius: 0;
}
.boardList table th,
.boardList table td {
  vertical-align: middle;
  padding: 1.7rem 1rem;
  font-size: var(--font-md);
  color: var(--gray-500);
  text-align: center;
  box-sizing: border-box;
}
.boardList table th .mo,
.boardList table td .mo {
  display: none;
}
.boardList table th {
  padding: 2.1rem 1rem;
  font-weight: 500;
  color: var(--gray-600);
}
.boardList table td.subject {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  width: auto;
}
.boardList table td.subject a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  color: var(--gray-500);
}
.boardList table td.subject .sm-txt {
  margin-right: 0.8rem;
  font-size: var(--font-sm);
  color: var(--gray-400);
}
.boardList table td.subject .secret {
  display: inline-block;
  margin-right: 2.4rem;
}
.boardList table td.subject .secret .bi {
  width: 2rem;
  height: 2rem;
  margin-right: 1.2rem;
}
.boardList .num {
  width: 8rem;
}
.boardList .file {
  width: 9rem;
}
.boardList .fileType {
  width: 12rem;
}
.boardList .hits {
  width: 10rem;
}
.boardList .date {
  width: 15rem;
}
.boardList .period {
  width: 18rem;
}
.boardList .periodYear {
  width: 26rem;
}
.boardList .writer {
  width: 13rem;
}
.boardList .writerOrg {
  width: 19rem;
}
.boardList .category {
  width: 14rem;
}
.boardList .category .bdg {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.boardList .count {
  width: 12rem;
}
.boardList .state {
  width: 12rem;
}
.boardList .code {
  width: 13rem;
}
.boardList .action {
  width: 15rem;
}
.boardList .flexBox {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

/* 게시판-faq */
.faqList .item {
  margin-top: 2rem;
  padding: 2rem 4rem;
  border-radius: 1.2rem;
  border: 1px solid var(--gray-300);
  box-sizing: border-box;
  word-break: keep-all;
}
.faqList .item:first-child {
  margin: 0;
}
.faqList .toggleTit button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;
  text-align: left;
  color: var(--gray-500);
}
.faqList .toggleTit button span {
  position: relative;
  padding: 0.9rem 0;
  padding-left: 4rem;
  font-size: var(--font-lg);
  font-weight: 700;
  line-height: 1.4;
}
.faqList .toggleTit button span::before {
  content: "Q";
  position: absolute;
  top: 0.6rem;
  left: 0;
  width: 3.2rem;
  color: #fff;
  text-align: center;
  font-family: "Cafe24ClassicType";
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 3.2rem;
  background: var(--gray-500);
  border-radius: 50%;
}
.faqList .toggleTit button .bi {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  transition: 0.2s;
}
.faqList .item.active .toggleTit button .bi {
  transform: rotate(180deg);
}
.faqList .toggleCon {
  margin-top: 1.6rem;
}
.faqList .toggleCon .boardContent {
  padding: 2rem 2.8rem;
  background: var(--primary-100);
  border: none;
  border-radius: 1rem;
}
.faqList .toggleCon .boardContent .boardInner {
  position: relative;
  min-height: 3.2rem;
  padding-left: 4.8rem;
  font-size: var(--font-md);
  color: var(--gray-600);
  line-height: 1.4;
}
.faqList .toggleCon .boardContent .boardInner::before {
  content: "A";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.2rem;
  color: #fff;
  text-align: center;
  font-family: "Cafe24ClassicType";
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 3.2rem;
  background: var(--primary-500);
  border-radius: 50%;
}

/* 게시판-갤러리 */
.galleryList ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 2.0833%;
}
.galleryList ul li {
  flex: 0 0 23.437525%;
  min-width: 0;
}
.galleryList ul li a {
  display: block;
}
.galleryList ul li .img {
  overflow: hidden;
  display: block;
  width: 100%;
  aspect-ratio: 300/260;
  border: 1px solid var(--gray-300);
  border-radius: 0.8rem;
  box-sizing: border-box;
}
.galleryList ul li .img img {
  width: 100%;
  height: 100%;
}
.galleryList ul li .txt {
  display: block;
  margin-top: 2rem;
  padding: 0 0.8rem;
  box-sizing: border-box;
}
.galleryList ul li .tit {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--gray-500);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.galleryList ul li .date {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--font-md);
  color: var(--gray-400);
  font-weight: 500;
}

@media screen and (max-width: 1024px) {
  /* 게시판-일반 */
  .boardList table {
    border-top: 1px solid var(--gray-500);
  }
  .boardList table thead {
    display: none;
  }
  .boardList table tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding: 2.5rem;
  }
  .boardList table th,
  .boardList table td {
    padding: 0;
    font-size: 1.625rem;
    font-weight: 300;
    text-align: left;
  }
  .boardList table th .mo,
  .boardList table td .mo {
    display: inline-block;
    margin-right: 0.25rem;
  }
  .boardList table td.subject {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 2.125rem;
    font-weight: 700;
    text-align: left !important;
  }
  .boardList table td.subject .sm-txt {
    display: block;
    font-size: 1.875rem;
    font-weight: 400;
    margin: 0.25rem 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .boardList table td.subject .secret {
    display: block;
    margin: 0 0 1rem;
  }
  .boardList table td.subject .secret .bi {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 1rem;
  }
  .boardList table td.subject .secret .bdg {
    font-weight: 400;
  }
  .boardList .num,
  .boardList .file,
  .boardList .hits {
    display: none;
  }
  .boardList .fileType,
  .boardList .date,
  .boardList .period,
  .boardList .periodYear,
  .boardList .writer,
  .boardList .writerOrg,
  .boardList .count,
  .boardList .state {
    width: auto;
  }
  .boardList .category {
    width: 100%;
    margin-bottom: 1rem;
  }
  .boardList .code {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 1.875rem;
  }
  .boardList .action {
    width: 100%;
    margin-top: 1rem;
    text-align: right;
  }
  .boardList .inline {
    width: auto;
  }
  .boardList .inline + .inline {
    position: relative;
    margin-left: 0.75rem;
    padding-left: 0.75rem;
  }
  .boardList .inline + .inline::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1.25rem;
    background: #ddd;
    transform: translateY(-50%);
  }
  .boardList .block {
    width: 100%;
  }
  .boardList .flexBox {
    justify-content: flex-start;
    gap: 0.75rem;
  }
  /* 게시판-faq */
  .faqList .item {
    padding: 2rem;
    border-radius: 1.5rem;
  }
  .faqList .toggleTit button {
    gap: 1rem;
  }
  .faqList .toggleTit button span {
    padding: 0.25rem 0;
    padding-left: 4.5rem;
    font-size: 2.125rem;
    min-height: 3.5rem;
    box-sizing: border-box;
  }
  .faqList .toggleTit button span::before {
    top: 0;
    width: 3.5rem;
    font-size: 2.375rem;
    line-height: 3.5rem;
  }
  .faqList .toggleTit button .bi {
    width: 2.5rem;
    height: 2.5rem;
  }
  .faqList .toggleCon {
    margin-top: 1.5rem;
  }
  .faqList .toggleCon .boardContent {
    padding: 2rem;
    border-radius: 1.25rem;
  }
  .faqList .toggleCon .boardContent .boardInner {
    padding-left: 4.5rem;
    font-size: 1.875rem;
    min-height: 3.5rem;
    box-sizing: border-box;
  }
  .faqList .toggleCon .boardContent .boardInner::before {
    width: 3.5rem;
    font-size: 2.375rem;
    line-height: 3.5rem;
  }
  /* 게시판-갤러리 */
  .galleryList ul {
    gap: 3rem 5%;
  }
  .galleryList ul li {
    flex: 0 0 30%;
  }
  .galleryList ul li .img {
    border-radius: 1rem;
  }
  .galleryList ul li .txt {
    padding: 0 0.5rem;
  }
  .galleryList ul li .tit {
    font-size: 2.375rem;
    line-height: 126.316%;
    white-space: pre-line;
    word-break: keep-all;
  }
  .galleryList ul li .date {
    margin-top: 0.75rem;
    font-size: 1.875rem;
  }
}
@media screen and (max-width: 720px) {
  /* 게시판-갤러리 */
  .galleryList ul li {
    flex: 0 0 47.5%;
  }
}
/* 게시판-조회 */
.boardTitle {
  position: relative;
  padding: 4rem;
  border-top: 1px solid var(--gray-600);
  border-bottom: 1px solid var(--gray-300);
}
.boardTitle h4 {
  font-size: 3rem;
  font-weight: 500;
  color: var(--gray-600);
  word-break: keep-all;
}
.boardTitle .sTit {
  margin-bottom: 0.4rem;
  font-size: 2rem;
  font-weight: 300;
  color: var(--gray-500);
}
.boardTitle .category {
  margin-bottom: 1.2rem;
}
.boardTitle .info {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.2rem;
}
.boardTitle .info .count {
  display: flex;
  margin: 0 -1.2rem;
}
.boardTitle .info .count li {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 1.2rem;
  font-size: var(--font-md);
  font-weight: 300;
  color: var(--gray-500);
}
.boardTitle .info .count li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1.2rem;
  background: #ddd;
  transform: translateY(-50%);
}
.boardTitle .info .count li:first-child::before {
  display: none;
}
.boardTitle .info .count li .bi {
  width: 2rem;
  height: 2rem;
  margin-right: 0.4rem;
}
.boardTitle .info .count li .bi::before {
  background-color: var(--gray-400);
}
.boardTitle .info .date {
  font-size: var(--font-md);
  color: var(--gray-500);
}

.boardContent {
  padding: 4rem;
  border-bottom: 1px solid var(--gray-300);
}
.boardContent .boardInner {
  overflow: hidden;
  font-size: var(--font-lg);
  font-weight: 400;
  color: var(--gray-500);
  word-wrap: break-word;
  word-break: keep-all;
  box-sizing: border-box;
}
.boardContent .boardInner .img {
  margin: 2rem 0;
  text-align: center;
}
.boardContent .boardInner .img img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}

.attachFile {
  display: flex;
  border-bottom: 1px solid var(--gray-300);
}
.attachFile h5 {
  flex-shrink: 0;
  width: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100);
}
.attachFile h5 span {
  font-size: var(--font-md);
  font-weight: 500;
}
.attachFile ul {
  flex-grow: 1;
  min-width: 0;
  padding: 1.2rem 2rem;
  box-sizing: border-box;
}
.attachFile ul li a {
  display: block;
  position: relative;
  padding: 1.1rem 0;
  padding-right: 12rem;
  box-sizing: border-box;
}
.attachFile ul li .name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-md);
  color: var(--gray-600);
  font-weight: 400;
}
.attachFile ul li .download {
  position: absolute;
  top: 50%;
  right: 0;
  padding-right: 2.4rem;
  transform: translateY(-50%);
}
.attachFile ul li .download::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 100%;
  -webkit-mask: url(../images/icon/download.svg) no-repeat center/contain;
  mask: url(../images/icon/download.svg) no-repeat center/contain;
  background: var(--primary-400);
}
.attachFile ul li .download i {
  display: block;
  position: relative;
  font-size: var(--font-md);
  color: var(--primary-400);
  line-height: 1.2;
}
.attachFile ul li .download i::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}

.postNav {
  margin-top: 4rem;
  border-top: 1px solid var(--gray-300);
}
.postNav dl {
  display: flex;
  line-height: 6rem;
  border-bottom: 1px solid var(--gray-300);
}
.postNav dl dt {
  flex-shrink: 0;
  width: 8rem;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
  text-align: center;
}
.postNav dl dd {
  flex-grow: 1;
  min-width: 0;
  position: relative;
  padding: 0 1.6rem;
  font-size: var(--font-md);
  color: var(--gray-400);
}
.postNav dl dd::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 2rem;
  background: #ddd;
  transform: translateY(-50%);
}
.postNav dl dd a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--gray-500);
}

.answerArea {
  margin-top: 8rem;
  background: var(--primary-100);
}
.answerArea .boardTitle h5 {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--gray-600);
  word-break: keep-all;
}

@media screen and (max-width: 1024px) {
  .boardTitle {
    padding: 2.5rem;
  }
  .boardTitle h4 {
    font-size: 2.5rem;
  }
  .boardTitle .sTit {
    margin-bottom: 0.25rem;
    font-size: 1.75rem;
  }
  .boardTitle .category {
    margin-bottom: 0.75rem;
  }
  .boardTitle .info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
  }
  .boardTitle .info .count {
    margin: 0 -1rem;
  }
  .boardTitle .info .count li {
    padding: 0 1rem;
    font-size: 1.625rem;
  }
  .boardTitle .info .count li::before {
    height: 1.25rem;
  }
  .boardTitle .info .count li .bi {
    width: 2rem;
    height: 2rem;
    margin-right: 0.25rem;
  }
  .boardTitle .info .date {
    font-size: 1.75rem;
  }
  .boardContent {
    padding: 2.5rem;
  }
  .boardContent .boardInner {
    font-size: 1.875rem;
  }
  .attachFile {
    flex-direction: column;
    padding: 1.25rem 1rem;
  }
  .attachFile h5 {
    display: block;
    width: 100%;
    background: none;
    border: none;
  }
  .attachFile h5 span {
    font-size: 1.875rem;
  }
  .attachFile ul {
    width: 100%;
    margin-top: 1rem;
    padding: 0;
  }
  .attachFile ul li a {
    padding: 0.75rem 1rem;
    padding-left: 4rem;
  }
  .attachFile ul li .name {
    font-size: 1.875rem;
    letter-spacing: -0.025em;
    word-break: keep-all;
  }
  .attachFile ul li .download {
    right: auto;
    left: 1rem;
    width: 2rem;
    height: 100%;
    padding: 0;
  }
  .attachFile ul li .download i {
    display: none;
  }
  .postNav {
    margin-top: 2.5rem;
  }
  .postNav dl {
    line-height: 6.5rem;
  }
  .postNav dl dt {
    width: 7.5rem;
    font-size: 1.875rem;
  }
  .postNav dl dd {
    padding: 0 1rem;
    font-size: 1.875rem;
  }
  .postNav dl dd::before {
    height: 2.5rem;
  }
  .answerArea {
    margin-top: 5rem;
  }
}
/* 폼-컴포넌트 */
.required {
  display: inline-block;
  vertical-align: top;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0.6rem 0 0 0.8rem;
  font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7' fill='none'%3E%3Cpath d='M4.10059 6.75684H2.54004L2.68945 4.46582L0.780273 5.74414L0 4.39941L2.05859 3.38672L0 2.35742L0.780273 1.0127L2.68945 2.29102L2.54004 0H4.10059L3.95117 2.29102L5.86035 1.0127L6.64062 2.35742L4.58203 3.38672L6.64062 4.39941L5.86035 5.74414L3.95117 4.46582L4.10059 6.75684Z' fill='%23D63D4A'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* selectbox */
.selectbox {
  position: relative;
}
.selectbox::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 100%;
  -webkit-mask: url(../images/icon/arrow-down.svg) no-repeat center/contain;
  mask: url(../images/icon/arrow-down.svg) no-repeat center/contain;
  background: var(--gray-600);
  transition: 0.2s;
  z-index: 1;
}
.selectbox.focus::after {
  transform: rotate(180deg);
}
.selectbox select {
  width: 100%;
  background: transparent;
  border: 1px solid var(--gray-500);
  border-radius: 0.8rem;
  box-sizing: border-box;
  cursor: pointer;
}
.selectbox select:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  border-color: var(--gray-200);
}

@media screen and (max-width: 1024px) {
  /* selectbox */
  .selectbox::after {
    width: 2.5rem;
  }
  .selectbox select {
    border-radius: 1rem;
  }
}
/* 폼 */
.formArea {
  margin-top: 8rem;
}
.formArea:first-child {
  margin-top: 0;
}
.formArea .titArea {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 6rem;
  margin-bottom: 2rem;
}
.formArea .titArea .conTit {
  margin: 0;
}
.formArea .titArea:first-child {
  margin-top: 0;
}
.formArea .titArea .txtNote {
  text-align: right;
}

.formStyle {
  width: 100%;
  border: 1px solid var(--gray-600);
  border-width: 1px 0;
}

.formItem {
  display: flex;
}
.formItem:last-child .formTitle,
.formItem:last-child .formField {
  border-bottom: none;
}

.formTitle {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 16rem;
  border-bottom: 1px solid var(--gray-300);
}
.formTitle.bg {
  background: var(--gray-100);
}
.formTitle label,
.formTitle .label {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
  word-break: keep-all;
  text-align: center;
}

.formField {
  flex: 1;
  padding: 1rem 2rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--gray-300);
}
.formField + .formTitle {
  border-left: 1px solid var(--gray-300);
}

.formStyle .inp,
.formStyle .selectbox select {
  width: 100%;
  min-height: 4.8rem;
  padding: 0 1.6rem;
  font-size: var(--font-md);
  color: var(--gray-500);
  border: 1px solid #e8e9ec;
  border-radius: 0.8rem;
  box-sizing: border-box;
}
.formStyle .inp::placeholder {
  color: #8e8f97;
}
.formStyle .selectbox::after {
  right: 1.6rem;
}
.formStyle .selectbox select {
  padding-right: 3.6rem;
}
.formStyle .wp50 {
  max-width: 50%;
}
.formStyle .editor textarea {
  width: 100%;
  height: 27rem;
  padding: 1.6rem;
  font-size: var(--font-md);
  color: var(--gray-500);
  border: 1px solid #e8e9ec;
  border-radius: 0.8rem;
  box-sizing: border-box;
  resize: none;
}
.formStyle .editor textarea::placeholder {
  color: #8e8f97;
}
.formStyle .dataTxt {
  font-size: var(--font-md);
  color: var(--gray-500);
}
.formStyle .btn,
.formStyle .btnPopOpen {
  flex-shrink: 0;
}
.formStyle .groupCon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 4.8rem;
}
.formStyle .groupTxtBtn {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.formStyle .groupEmail {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.formStyle .groupEmail .inpBox {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.formStyle .groupEmail .inp,
.formStyle .groupEmail .selectbox {
  flex: 1;
}
.formStyle .groupEmail .domain {
  flex: 0 0 27%;
}
.formStyle .groupPwd {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.formStyle .groupPwd .inpBox {
  position: relative;
}
.formStyle .groupPwd .inpBox .inp {
  padding-right: 3.6rem;
}
.formStyle .groupPwd .inpBox .btn {
  position: absolute;
  top: 0;
  right: 1.6rem;
  height: 100%;
  background: transparent;
  z-index: 1;
}
.formStyle .groupPwd .inpBox .btn .bi {
  width: 2rem;
  height: 100%;
  color: var(--gray-600);
}
.formStyle .groupPwd .inpBox .btn span {
  display: none;
}
.formStyle .groupPwd .conTxt {
  color: var(--gray-500);
}
.formStyle .groupOrg {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.formStyle .groupOrg .inpRow {
  display: flex;
  gap: 2rem;
}
.formStyle .groupOrg .inpRow .inpBox {
  flex: 1;
}
.formStyle .groupOrg .inpBox {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.formStyle .groupOrg .inpBox label {
  flex-shrink: 0;
  padding-left: 1.2rem;
  font-size: var(--font-md);
  color: var(--gray-500);
}
.formStyle .groupOrg .conTxt {
  color: var(--gray-500);
}
.formStyle .groupInps {
  display: flex;
  gap: 0.8rem;
}
.formStyle .groupInps .inp {
  flex: 1;
}
.formStyle .groupFileBtn {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.formStyle .groupFileBtn .fileRow {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.formStyle .groupFileBtn .fileItem {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.formStyle .groupFileBtn .fileItem .fileArea {
  flex-grow: 1;
  position: relative;
}
.formStyle .groupFileBtn .fileItem .fileArea span {
  display: block;
}
.formStyle .groupFileBtn .fileItem .fileArea span input {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.formStyle .groupFileBtn .fileItem .fileArea input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.formStyle .groupFileBtn .fileItem .btnDelete {
  flex-shrink: 0;
}
.formStyle .groupFileBtn .btnAdd {
  text-align: center;
}
.formStyle .groupCaptcha {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.formStyle .groupCaptcha .code {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.formStyle .groupCaptcha .code img {
  max-height: 5rem;
}
.formStyle .groupCaptcha .code .btn .bi {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--gray-500);
}
.formStyle .groupCaptcha .code .btn span {
  display: none;
}

/* 동의 */
.clauseBox {
  padding: 4rem;
  border: 1px solid var(--gray-300);
  box-sizing: border-box;
  border-radius: 1.2rem;
}
.clauseBox .clauseTxt {
  overflow-y: auto;
  max-height: 50rem;
  padding: 3rem;
  background: var(--gray-100);
  border-radius: 1.2rem;
  box-sizing: border-box;
  word-break: keep-all;
}
.clauseBox .clauseTxt h5,
.clauseBox .clauseTxt h6 {
  margin-top: 4rem;
  margin-bottom: 1rem;
  font-size: 2.3rem;
  font-weight: 500;
  color: var(--gray-600);
}
.clauseBox .clauseTxt h5:first-child,
.clauseBox .clauseTxt h6:first-child {
  margin-top: 0;
}
.clauseBox .clauseTxt h6 {
  margin-top: 2rem;
  font-size: 1.9rem;
}
.clauseBox .clauseTxt h5 + h6 {
  margin-top: 0;
}
.clauseBox .clauseTxt ul li {
  font-size: var(--font-md);
  color: var(--gray-500);
}
.clauseBox .clauseTxt ul li i {
  float: left;
  position: relative;
  margin-right: 0.6rem;
  font-style: normal;
}
.clauseBox .clauseTxt ul li span {
  overflow: hidden;
  display: block;
}
.clauseBox .clauseTxt .conTxt {
  color: var(--gray-500);
}

.clauseCheck {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

.clauseAll {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.8rem;
  padding-top: 2.8rem;
  border-top: 1px solid var(--gray-300);
}
.clauseAll .checkList li > label {
  font-size: var(--font-lg);
  font-weight: 500;
}

/* 메세지 박스 */
.useMsgBox {
  max-width: 68rem;
  margin: 0 auto;
  padding: 7rem 8rem;
  border: 1px solid var(--gray-300);
  border-radius: 2rem;
  box-sizing: border-box;
}
.useMsgBox .msgCon {
  text-align: center;
  word-break: keep-all;
}
.useMsgBox .msgCon .icon {
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 0 auto 4rem;
  background: no-repeat center/contain;
}
.useMsgBox .msgCon .icon.login {
  background-image: url(../images/sub/icon_use_login.svg);
}
.useMsgBox .msgCon .icon.complete {
  background-image: url(../images/sub/icon_use_complete.svg);
}
.useMsgBox .msgCon .icon.find {
  background-image: url(../images/sub/icon_use_find.svg);
}
.useMsgBox .btnGroup {
  padding-top: 4rem;
  border-top: 1px solid var(--gray-300);
}
.useMsgBox .btnGroup .btn {
  flex: 1;
  padding: 0;
}

@media screen and (max-width: 1024px) {
  .formArea {
    margin-top: 7.5rem;
  }
  .formArea .titArea {
    display: block;
    margin-top: 5rem;
    margin-bottom: 2.5rem;
  }
  .formArea .titArea .txtNote {
    margin-top: 0.5rem;
    text-align: left;
  }
  .formArea .titArea .txtNote br {
    display: none;
  }
  .formArea .titArea .conTxt {
    margin-top: 0.5rem;
  }
  .formItem {
    display: flex;
    flex-wrap: wrap;
  }
  .formItem.moWrap {
    gap: 1.25rem;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--gray-300);
  }
  .formItem.moWrap .formTitle,
  .formItem.moWrap .formField {
    width: 100%;
    padding: 0;
    border: none;
  }
  .formItem.moWrap .formTitle {
    align-items: flex-start;
    background: none;
  }
  .formItem.moWrap .formTitle br {
    display: none;
  }
  .formTitle {
    flex-shrink: 0;
    width: 11rem;
  }
  .formTitle label,
  .formTitle .label {
    font-size: 1.875rem;
  }
  .formTitle .moBr {
    display: block;
  }
  .formField {
    flex: 1 0 calc(100% - 12.5rem);
    padding: 1rem;
  }
  .formField + .formTitle {
    border-left: none;
  }
  .formStyle .inp,
  .formStyle .selectbox select {
    min-height: 5.5rem;
    padding: 0 2rem;
    font-size: 1.875rem;
    border-radius: 0.75rem;
  }
  .formStyle .selectbox {
    width: 100%;
  }
  .formStyle .selectbox::after {
    right: 2rem;
  }
  .formStyle .selectbox select {
    padding-right: 4.5rem;
  }
  .formStyle .wp50 {
    max-width: 100%;
  }
  .formStyle .editor textarea {
    padding: 2rem;
    height: 29rem;
    font-size: 1.875rem;
    border-radius: 0.75rem;
  }
  .formStyle .dataTxt {
    font-size: 1.875rem;
  }
  .formStyle .groupCon {
    min-height: 5.5rem;
  }
  .formStyle .groupTxtBtn {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .formStyle .groupEmail {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .formStyle .groupEmail .inpBox {
    gap: 0.5rem;
    width: 100%;
  }
  .formStyle .groupPwd {
    gap: 1rem;
  }
  .formStyle .groupPwd .inpBox .inp {
    padding-right: 4.5rem;
  }
  .formStyle .groupPwd .inpBox .btn {
    right: 2rem;
  }
  .formStyle .groupPwd .inpBox .btn .bi {
    width: 2.5rem;
  }
  .formStyle .groupPwd .conTxt {
    font-size: 1.75rem;
  }
  .formStyle .groupOrg {
    gap: 1rem;
  }
  .formStyle .groupOrg .inpRow {
    flex-direction: column;
    gap: 1rem;
  }
  .formStyle .groupOrg .inpBox {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .formStyle .groupOrg .inpBox label {
    padding-left: 0;
    font-size: 1.875rem;
  }
  .formStyle .groupOrg .conTxt {
    font-size: 1.875rem;
  }
  .formStyle .groupInps {
    flex-direction: column;
    gap: 0.75rem;
  }
  /* 동의 */
  .clauseBox {
    padding: 2.5rem;
    border-radius: 0.75rem;
  }
  .clauseBox .clauseTxt {
    padding: 1.5rem;
    border-radius: 0.75rem;
  }
  .clauseBox .clauseTxt h5 {
    font-size: 1.875rem;
  }
  .clauseBox .clauseTxt .conTxt,
  .clauseBox .clauseTxt .txtNote {
    font-size: 1.625rem;
  }
  .clauseAll {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }
  .clauseAll .checkList li > label {
    font-size: 2.125rem;
  }
  /* 메세지 박스 */
  .useMsgBox {
    padding: 5rem 3.75rem;
  }
  .useMsgBox .msgCon .icon {
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: 3.5rem;
  }
  .useMsgBox .btnGroup {
    gap: 1rem;
    margin-top: 3.75rem;
  }
}
@media screen and (max-width: 720px) {
  .formStyle .groupCon .radioList {
    flex-direction: column;
  }
  .formStyle .groupFileBtn {
    gap: 1.5rem;
  }
  .formStyle .groupFileBtn .fileRow {
    gap: 1rem;
  }
  .formStyle .groupFileBtn .fileItem {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
  }
  .formStyle .groupFileBtn .fileItem .fileArea {
    width: 100%;
  }
  .formStyle .groupCaptcha {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .formStyle .groupCaptcha .code {
    gap: 1rem;
  }
  .formStyle .groupCaptcha .code img {
    min-width: 0;
    max-height: 5.5rem;
  }
  .formStyle .groupCaptcha .code .btn .bi {
    width: 3rem;
    height: 3rem;
  }
}
/* 01 교육안내 */
/* 관심 */
.btnWish {
  flex-shrink: 0;
}
.btnWish i {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  text-indent: -9999em;
  -webkit-mask: url(../images/icon/heart.svg) no-repeat center/contain;
  mask: url(../images/icon/heart.svg) no-repeat center/contain;
  background: var(--gray-400);
}
.btnWish.active i {
  -webkit-mask-image: url(../images/icon/heart-fill.svg);
  mask-image: url(../images/icon/heart-fill.svg);
  background: var(--point);
}

/* 교육-목록 */
.curriculumList {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
}
.curriculumList .item {
  width: calc((100% - 2.4rem) / 2);
  padding: 2.8rem 2.5%;
  border: 1px solid var(--gray-300);
  border-radius: 1.2rem;
  box-sizing: border-box;
}
.curriculumList .item .head {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 2rem;
}
.curriculumList .item .head .state {
  flex-grow: 1;
  border-radius: 0.4rem;
}
.curriculumList .item .head .state i {
  display: block;
  font-size: var(--font-md);
  font-weight: 500;
  line-height: 3.6rem;
  color: #fff;
  text-align: center;
}
.curriculumList .item .title a {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
}
.curriculumList .item .title .category {
  flex-shrink: 0;
}
.curriculumList .item .title strong {
  flex-grow: 1;
  position: relative;
  padding-right: 3rem;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--gray-600);
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.curriculumList .item .title strong::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 100%;
  -webkit-mask: url(../images/icon/arrow-right.svg) no-repeat center/contain;
  mask: url(../images/icon/arrow-right.svg) no-repeat center/contain;
  background: currentColor;
}
.curriculumList .item .info {
  margin-top: 2rem;
}
.curriculumList .item .info dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  width: 100%;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
}
.curriculumList .item .info dl dt {
  flex: 0 0 11.6rem;
  position: relative;
  padding-left: 2.5rem;
  box-sizing: border-box;
}
.curriculumList .item .info dl dt:nth-of-type(2n) {
  margin-left: 1rem;
}
.curriculumList .item .info dl dt::before {
  content: "·";
  position: absolute;
  top: 0;
  left: 1rem;
  font-weight: 900;
}
.curriculumList .item .info dl dd {
  flex: 0 0 calc((100% - 1rem) / 2 - 11.6rem);
  padding-left: 2rem;
  font-weight: 500;
  letter-spacing: -0.34px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 교육-조회 */
.curriculumView .infoGroup {
  border: 1px solid var(--gray-300);
  border-radius: 1.2rem;
  box-sizing: border-box;
}
.curriculumView .state {
  border-radius: 1.2rem 1.2rem 0 0;
}
.curriculumView .state i {
  display: block;
  font-size: var(--font-md);
  font-weight: 500;
  line-height: 5rem;
  color: #fff;
  text-align: center;
}
.curriculumView .groupInner {
  padding: 4rem;
  box-sizing: border-box;
}
.curriculumView .titBox {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  padding-right: 4rem;
}
.curriculumView .titBox h4 {
  flex-grow: 1;
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--gray-600);
  word-break: keep-all;
}
.curriculumView .titBox .category {
  flex-shrink: 0;
}
.curriculumView .titBox .btnWish {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.curriculumView .summaryBox {
  margin-top: 2.4rem;
  padding: 2rem 2.4rem;
  border-radius: 0.8rem;
  border: 1px solid var(--gray-300);
  background: var(--primary-100);
  font-size: var(--font-md);
  color: var(--gray-500);
  word-break: keep-all;
}
.curriculumView .summaryBox .tit {
  font-weight: 700;
}
.curriculumView .summaryBox .txt {
  margin-top: 0.8rem;
  font-weight: 500;
}
.curriculumView .detailBox {
  margin-top: 2.4rem;
}
.curriculumView .detailBox dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0;
  width: 100%;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
}
.curriculumView .detailBox dl dt {
  flex: 0 0 11.6rem;
  position: relative;
  padding-left: 2.5rem;
  box-sizing: border-box;
}
.curriculumView .detailBox dl dt:nth-of-type(2n) {
  margin-left: 1rem;
}
.curriculumView .detailBox dl dt::before {
  content: "·";
  position: absolute;
  top: 0;
  left: 1rem;
  font-weight: 900;
}
.curriculumView .detailBox dl dd {
  flex: 0 0 calc((100% - 1rem) / 2 - 11.6rem);
  padding-left: 2rem;
  font-weight: 500;
  letter-spacing: -0.34px;
  box-sizing: border-box;
  word-break: keep-all;
}
.curriculumView .applyBox {
  margin-top: 2.4rem;
}
.curriculumView .applyBox > div {
  padding: 2rem;
  border-radius: 0.8rem;
}
.curriculumView .applyBox > div.apply-wait {
  background: rgba(28, 144, 253, 0.05);
}
.curriculumView .applyBox > div.apply-reject {
  background: var(--primary-100);
}
.curriculumView .applyBox > div.apply-approve {
  background: rgba(217, 249, 247, 0.5);
}
.curriculumView .applyBox .listStyle li {
  font-weight: 500;
}
.curriculumView .tabBtn {
  margin-top: 6rem;
}

/* 달력 */
.calendarBox .calHeader {
  margin-bottom: 3.2rem;
}
.calendarBox .calHeader .title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.calendarBox .calHeader .title h4 {
  font-size: 2.3rem;
  color: var(--gray-600);
}
.calendarBox .calHeader .title h4 span {
  display: inline-block;
  vertical-align: middle;
  padding: 0 1rem;
}
.calendarBox .calHeader .title button i {
  display: block;
  width: 6.1rem;
  height: 4rem;
  background: url(../images/sub/icon_cal_arrow.svg) no-repeat center/contain;
  text-indent: -9999em;
}
.calendarBox .calHeader .title button.next i {
  transform: scaleX(-1);
}
.calendarBox .calBody {
  table-layout: fixed;
  width: 100%;
}
.calendarBox .calBody th,
.calendarBox .calBody td {
  padding: 0.8rem 0.4rem 1.2rem;
  vertical-align: top;
  border: 1px solid var(--gray-300);
  border-right: none;
  border-bottom: none;
  box-sizing: border-box;
}
.calendarBox .calBody th {
  padding: 2.8rem 0;
  font-size: var(--font-md);
  color: var(--gray-500);
  font-weight: 500;
  text-align: center;
  border-color: var(--gray-600);
  border-width: 1px 0 0 0;
}
.calendarBox .calBody tr:last-child td {
  border-bottom: 1px solid var(--gray-300);
}
.calendarBox .calBody .date {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--gray-500);
}
.calendarBox .calBody .date span {
  width: 4rem;
  line-height: 4rem;
  text-align: center;
}
.calendarBox .calBody .date i {
  display: none;
}
.calendarBox .calBody .event {
  min-height: 17.6rem;
}
.calendarBox .calBody .event ul li {
  position: relative;
  margin-top: 0.4rem;
  padding-left: 0.4rem;
  border-radius: 0.4rem;
  box-sizing: border-box;
}
.calendarBox .calBody .event ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.8rem;
  height: 100%;
  border-radius: 0.4rem;
}
.calendarBox .calBody .event ul li a {
  display: block;
  position: relative;
  padding: 0.6rem 0.8rem;
  border-radius: 0 0.4rem 0.4rem 0;
  box-sizing: border-box;
}
.calendarBox .calBody .event ul li a span {
  overflow: hidden;
  display: block;
  max-height: 2.8em;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--gray-600);
  line-height: 1.4;
  word-break: keep-all;
}
.calendarBox .calBody .event ul li.type1::before {
  background: var(--purple);
}
.calendarBox .calBody .event ul li.type1 a {
  background: var(--purple-light);
}
.calendarBox .calBody .event ul li.type2::before {
  background: var(--grass);
}
.calendarBox .calBody .event ul li.type2 a {
  background: var(--grass-light);
}
.calendarBox .calBody .event ul li.type3::before {
  background: var(--orange);
}
.calendarBox .calBody .event ul li.type3 a {
  background: var(--orange-light);
}
.calendarBox .calBody .event ul li.type4::before {
  background: var(--pink);
}
.calendarBox .calBody .event ul li.type4 a {
  background: var(--pink-light);
}
.calendarBox .calBody td:first-child {
  border-left: none;
}
.calendarBox .calBody td:first-child .date {
  color: #cc0f2e;
}
.calendarBox .calBody td:last-child .date {
  color: #4c6ec3;
}
.calendarBox .calBody td.holiday .date {
  color: #cc0f2e;
}
.calendarBox .calBody td.today .date {
  color: #fff;
}
.calendarBox .calBody td.today .date span {
  background: var(--primary-400);
  border-radius: 50%;
}
.calendarBox .calBody td.off .date,
.calendarBox .calBody td.off .event {
  display: none;
}

/* 교육후기-팝업 */
.crsSchForm {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.crsSchForm .schRow {
  display: flex;
  justify-content: space-between;
}
.crsSchForm .schItem {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.crsSchForm .schItem.range {
  width: 52.6rem;
}
.crsSchForm .schItem .label {
  flex-shrink: 0;
  font-size: var(--font-md);
  color: var(--gray-600);
  font-weight: 500;
}
.crsSchForm .schItem .field {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.crsSchForm .schItem .field input,
.crsSchForm .schItem .field .selectbox select {
  width: 100%;
  min-height: 4.8rem;
  padding: 0 1.6rem;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
  background-color: #fff;
  border: 1px solid var(--gray-500);
  border-radius: 0.8rem;
  box-sizing: border-box;
}
.crsSchForm .schItem .field input::placeholder {
  color: var(--gray-400);
}
.crsSchForm .schItem .field .selectbox {
  width: 100%;
}
.crsSchForm .schItem .field .selectbox::after {
  right: 1.6rem;
}
.crsSchForm .schItem .field .selectbox select {
  min-width: 17rem;
  padding-right: 3.6rem;
}
.crsSchForm .schBar {
  display: flex;
  background-color: #fff;
  border: 1px solid var(--gray-500);
  border-radius: 0.8rem;
  box-sizing: border-box;
}
.crsSchForm .schBar > div {
  position: relative;
}
.crsSchForm .schBar > div::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 2.4rem;
  background: #ddd;
  transform: translateY(-50%);
}
.crsSchForm .schBar > div:first-child::before {
  display: none;
}
.crsSchForm .schBar > div select,
.crsSchForm .schBar > div input {
  width: 100%;
  height: 4.8rem;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
  border: none;
  border-radius: 0.8rem;
  box-sizing: border-box;
  background: transparent;
}
.crsSchForm .schSelect {
  flex-shrink: 0;
  min-width: 16.8rem;
}
.crsSchForm .schSelect .selectbox::after {
  right: 2.4rem;
}
.crsSchForm .schSelect .selectbox select {
  padding: 0 2.4rem;
  padding-right: 4.4rem;
  color: var(--gray-500);
}
.crsSchForm .schInput {
  flex-grow: 1;
  position: relative;
}
.crsSchForm .schInput input {
  padding: 0 2rem;
  padding-right: 5.2rem;
}
.crsSchForm .schInput input::placeholder {
  color: var(--gray-400);
}
.crsSchForm .schInput button {
  position: absolute;
  top: 0;
  right: 0.4rem;
  width: 4.8rem;
  height: 100%;
  color: var(--gray-600);
  z-index: 1;
}

@media screen and (max-width: 1024px) {
  /* 관심 */
  .btnWish i {
    width: 3.5rem;
    height: 3.5rem;
  }
  /* 교육-목록 */
  .curriculumList {
    gap: 2rem;
  }
  .curriculumList .item {
    width: 100%;
    padding: 2.5rem;
    border-radius: 1.5rem;
  }
  .curriculumList .item .head {
    gap: 1.25rem;
    margin-bottom: 1.5rem;
  }
  .curriculumList .item .head .state {
    border-radius: 0.5rem;
  }
  .curriculumList .item .head .state i {
    font-size: 1.875rem;
    line-height: 3.5rem;
  }
  .curriculumList .item .title a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .curriculumList .item .title strong {
    width: 100%;
    font-size: 2.125rem;
  }
  .curriculumList .item .info {
    margin-top: 1.5rem;
  }
  .curriculumList .item .info dl {
    gap: 0.5rem 0;
    font-size: 1.875rem;
  }
  .curriculumList .item .info dl dt {
    flex: 0 0 12.5rem;
  }
  .curriculumList .item .info dl dt:nth-of-type(2n) {
    margin-left: 0;
  }
  .curriculumList .item .info dl dd {
    flex: 0 0 calc(100% - 12.5rem);
  }
  /* 교육-조회 */
  .curriculumView .infoGroup {
    border: none;
    border-radius: 0;
  }
  .curriculumView .state {
    margin-bottom: 2.5rem;
    border-radius: 1rem 1rem 0 0;
  }
  .curriculumView .state i {
    font-size: 1.875rem;
    line-height: 4.5rem;
  }
  .curriculumView .groupInner {
    padding: 0;
  }
  .curriculumView .titBox {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .curriculumView .titBox h4 {
    font-size: 2.375rem;
  }
  .curriculumView .summaryBox {
    margin-top: 2.5rem;
    border-radius: 1rem;
    font-size: 1.875rem;
  }
  .curriculumView .summaryBox .txt {
    margin-top: 1rem;
  }
  .curriculumView .detailBox {
    margin-top: 2.5rem;
  }
  .curriculumView .detailBox dl {
    gap: 0.75rem 0;
    font-size: 1.875rem;
  }
  .curriculumView .detailBox dl dt {
    flex: 0 0 12.5rem;
  }
  .curriculumView .detailBox dl dt:nth-of-type(2n) {
    margin-left: 0;
  }
  .curriculumView .detailBox dl dd {
    flex: 0 0 calc(100% - 12.5rem);
  }
  .curriculumView .applyBox {
    margin-top: 2.5rem;
  }
  .curriculumView .applyBox > div {
    border-radius: 1rem;
  }
  .curriculumView .tabBtn {
    margin-top: 5rem;
  }
  /* 달력 */
  .calendarBox .calHeader {
    margin-bottom: 2.75rem;
  }
  .calendarBox .calHeader .title {
    gap: 2.75rem;
  }
  .calendarBox .calHeader .title h4 {
    font-size: 2.875rem;
  }
  .calendarBox .calHeader .title h4 span {
    padding: 0 1.25rem;
  }
  .calendarBox .calHeader .title button i {
    width: 5.125rem;
  }
  .calendarBox .calBody {
    border-top: 1px solid var(--gray-600);
  }
  .calendarBox .calBody thead {
    display: none;
  }
  .calendarBox .calBody th,
  .calendarBox .calBody td {
    display: block;
    padding: 2rem 0;
    border: none;
    border-bottom: 1px solid var(--gray-600);
  }
  .calendarBox .calBody tr:last-child td {
    border-bottom: 1px solid var(--gray-600);
  }
  .calendarBox .calBody .date {
    justify-content: flex-start;
    gap: 1.5rem;
    font-size: 1.875rem;
    color: var(--gray-300);
  }
  .calendarBox .calBody .date span {
    width: auto;
    line-height: 1.5;
  }
  .calendarBox .calBody .date i {
    display: block;
    font-weight: 500;
  }
  .calendarBox .calBody .event {
    min-height: auto;
  }
  .calendarBox .calBody .event ul li {
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    border-radius: 0.5rem;
  }
  .calendarBox .calBody .event ul li:first-child {
    margin-top: 1rem;
  }
  .calendarBox .calBody .event ul li::before {
    width: 1rem;
    height: 100%;
    border-radius: 0.5rem;
  }
  .calendarBox .calBody .event ul li a {
    padding: 0.75rem 2rem;
    border-radius: 0 0.5rem 0.5rem 0;
  }
  .calendarBox .calBody .event ul li a span {
    max-height: none;
    font-size: 1.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .calendarBox .calBody td:first-child .date, .calendarBox .calBody td:last-child .date, .calendarBox .calBody td.holiday .date {
    color: var(--gray-300);
  }
  .calendarBox .calBody td.on .date {
    color: var(--gray-500);
  }
  .calendarBox .calBody td.today .date {
    color: var(--primary-400);
  }
  .calendarBox .calBody td.today .date span {
    background: none;
    border-radius: 0;
  }
  .calendarBox .calBody td.off {
    display: none;
  }
  /* 교육후기-팝업 */
  .crsSchForm {
    gap: 1.5rem;
  }
  .crsSchForm .schRow {
    flex-direction: column;
  }
  .crsSchForm .schItem {
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--gray-300);
  }
  .crsSchForm .schItem:first-child {
    padding-top: 0;
  }
  .crsSchForm .schItem.range {
    width: 100%;
  }
  .crsSchForm .schItem .label {
    font-size: 1.875rem;
  }
  .crsSchForm .schItem .field {
    gap: 1rem;
  }
  .crsSchForm .schItem .field input,
  .crsSchForm .schItem .field .selectbox select {
    min-height: 5.5rem;
    padding: 0 1.5rem;
    font-size: 1.875rem;
    border-radius: 1rem;
  }
  .crsSchForm .schItem .field .selectbox::after {
    right: 1.5rem;
  }
  .crsSchForm .schItem .field .selectbox select {
    min-width: auto;
    padding-right: 4rem;
  }
  .crsSchForm .schItem .field.groupRange {
    flex-direction: column;
  }
  .crsSchForm .schItem .field.groupRange .tilde {
    display: none;
  }
  .crsSchForm .schBar {
    flex-direction: column;
    gap: 1rem;
    background: none;
    border: none;
    border-radius: 0;
  }
  .crsSchForm .schBar > div::before {
    display: none;
  }
  .crsSchForm .schBar > div select,
  .crsSchForm .schBar > div input {
    height: 5.5rem;
    font-size: 1.875rem;
    background-color: #fff;
    border: 1px solid var(--gray-500);
    border-radius: 1rem;
  }
  .crsSchForm .schSelect .selectbox::after {
    right: 1.5rem;
  }
  .crsSchForm .schSelect .selectbox select {
    padding: 0 1.5rem;
    padding-right: 4rem;
  }
  .crsSchForm .schInput input {
    padding: 0 1.5rem;
    padding-right: 6rem;
  }
  .crsSchForm .schInput button {
    right: 0.5rem;
    width: 5.5rem;
    height: 100%;
  }
}
/* 02 참여마당 */
/* 민원신청 */
.civilFrame {
  width: 100%;
  height: 1000px;
}
.civilFrame iframe {
  width: 100%;
  height: 100%;
}

/* 공익신고제도안내 */
.reportStep {
  display: flex;
  max-width: 1170px;
  margin: 4rem auto 0;
}
.reportStep > li {
  flex: 1;
  position: relative;
  padding-left: 7rem;
}
.reportStep > li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7rem;
  height: 5.8rem;
  background: var(--primary-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='44' viewBox='0 0 27 44' fill='none'%3E%3Cpath d='M5 5L21.9999 21.9999L5 38.9998' stroke='%23D1D3D9' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/auto 4.4rem;
  transform: translateY(-50%);
}
.reportStep > li:first-child {
  padding: 0;
}
.reportStep > li:first-child::before {
  display: none;
}
.reportStep > li .box {
  height: 100%;
  padding: 2.4rem;
  border-radius: 1.2rem;
  border: 1px solid var(--primary-500);
  box-sizing: border-box;
  text-align: center;
}
.reportStep > li .tit {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--gray-500);
}
.reportStep > li .txt {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--gray-300);
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
}
.reportStep > li .txt ul li {
  margin-top: 0.4rem;
}
.reportStep > li .txt ul li:first-child {
  margin-top: 0;
}

.reportImg {
  margin-top: 4rem;
  text-align: center;
}

/* 설문조사 */
.btn-ing {
  background: var(--primary-400);
  color: #fff;
}
.btn-done {
  background: var(--gray-400);
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-end {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
  pointer-events: none;
}

/* 목록 */
.surveyList {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.surveyList .item {
  border: 1px solid var(--gray-300);
  border-radius: 1.6rem;
  box-sizing: border-box;
}
.surveyList .item .box {
  position: relative;
  padding: 2.8rem 3.2rem;
  padding-right: 18rem;
  border-left: 1rem solid;
  border-radius: 1.6rem;
  box-sizing: border-box;
}
.surveyList .item.survey-ing .box {
  border-color: var(--primary-400);
}
.surveyList .item.survey-done .box {
  border-color: var(--gray-400);
}
.surveyList .item.survey-end .box {
  border-color: var(--gray-300);
}
.surveyList .item .title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 3.4rem;
}
.surveyList .item .title strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-lg);
}
.surveyList .item .title .counting {
  flex-shrink: 0;
}
.surveyList .item .title .counting i {
  display: inline-block;
  padding: 0 1.6rem;
  line-height: 3.4rem;
  font-size: var(--font-md);
  font-weight: 700;
  color: #db5c01;
  background: #ffe9d9;
  border-radius: 4rem;
}
.surveyList .item .date {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 0.8rem;
  font-size: var(--font-md);
  color: var(--gray-400);
}
.surveyList .item .date span {
  flex-shrink: 0;
}
.surveyList .item .date .period {
  flex-shrink: 1;
  font-weight: 500;
}
.surveyList .item .btns {
  position: absolute;
  top: 50%;
  right: 3.2rem;
  transform: translateY(-50%);
  z-index: 1;
}
.surveyList .item .btns .btn {
  min-width: 10.4rem;
}

@media screen and (max-width: 1024px) {
  /* 민원신청 */
  .civilFrame {
    height: 700px;
  }
  /* 공익신고제도안내 */
  .reportStep {
    flex-direction: column;
    margin-top: 2.5rem;
  }
  .reportStep > li {
    padding: 5rem 0 0;
  }
  .reportStep > li::before {
    top: 0;
    left: 50%;
    width: 6.25rem;
    height: 5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='23' viewBox='0 0 36 23' fill='none'%3E%3Cpath d='M30.9995 5L17.9996 17.9999L4.99977 5' stroke='%23D1D3D9' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 4.25rem auto;
    transform: translate(-50%, 0);
  }
  .reportStep > li .box {
    padding: 2rem 3.25rem;
    border-radius: 1.5rem;
  }
  .reportStep > li .tit {
    font-size: 2.125rem;
  }
  .reportStep > li .txt {
    margin-top: 1.25rem;
    padding-top: 1.5rem;
    font-size: 1.875rem;
  }
  .reportStep > li .txt ul li {
    margin-top: 0.5rem;
  }
  .reportStep > li .txt p br {
    display: none;
  }
  .reportImg {
    margin-top: 2.5rem;
  }
  /* 설문조사 */
  /* 목록 */
  .surveyList .item {
    border-radius: 2rem;
  }
  .surveyList .item .box {
    padding: 2.5rem 3.5rem;
    border-left: none;
    border-top: 0.75rem solid;
    border-radius: 2rem;
  }
  .surveyList .item .title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    height: auto;
  }
  .surveyList .item .title strong {
    width: 100%;
    font-size: 2.125rem;
  }
  .surveyList .item .title .counting i {
    padding: 0 2rem;
    line-height: 3.75rem;
    font-size: 1.875rem;
  }
  .surveyList .item .date {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 1rem;
    font-size: 1.875rem;
  }
  .surveyList .item .btns {
    position: static;
    transform: none;
    margin-top: 2rem;
    text-align: right;
  }
  .surveyList .item .btns .btn {
    min-width: 12.5rem;
  }
}
/* 03 정보마당 */
/* 정보공개방 */
.discloseTab {
  margin-top: 6rem;
}

.discloseInfo {
  display: flex;
  align-items: center;
  margin-bottom: 4rem;
}
.discloseInfo dl {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  margin-left: 2rem;
  padding-left: 2rem;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
}
.discloseInfo dl::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 2rem;
  background: var(--gray-300);
  transform: translateY(-50%);
}
.discloseInfo dl:first-child {
  margin-left: 0;
  padding-left: 0;
}
.discloseInfo dl:first-child::before {
  display: none;
}
.discloseInfo dl dt {
  min-width: 10.2rem;
  padding: 0 1.2rem;
  background: var(--primary-100);
  border-radius: 0.4rem;
  line-height: 3.4rem;
  text-align: center;
  box-sizing: border-box;
}
.discloseInfo dl dd {
  padding: 0 1.6rem;
}

@media screen and (max-width: 1024px) {
  /* 정보공개방 */
  .discloseTab {
    margin-top: 5rem;
  }
  .discloseInfo {
    margin-bottom: 5rem;
  }
  .discloseInfo dl {
    margin: 0;
    padding: 0;
    font-size: 1.75rem;
  }
  .discloseInfo dl::before {
    display: none;
  }
  .discloseInfo dl dt {
    padding: 0 1.5rem;
    line-height: 3.75rem;
  }
}
@media screen and (max-width: 720px) {
  /* 정보공개방 */
  .discloseInfo {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
/* 04 기관소개 */
/* 인사말 */
.greetings {
  word-break: keep-all;
}
.greetings .titArea {
  padding: 2.8rem 5.2rem 2rem;
}
.greetings .titArea h4 {
  font-size: 2.7rem;
  font-weight: 500;
  color: var(--gray-500);
}
.greetings .conArea {
  position: relative;
  padding: 4rem 5.2rem;
  background: linear-gradient(148deg, rgba(199, 199, 222, 0.69) 9.16%, rgba(231, 231, 239, 0.61) 85.32%);
}
.greetings .conArea .txt {
  max-width: 60.2891%;
}
.greetings .conArea .txt p {
  margin-top: 1.2rem;
  font-size: var(--font-md);
  color: var(--gray-500);
}
.greetings .conArea .txt p:first-child {
  margin-top: 0;
}
.greetings .conArea .sign {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35.546875%;
  z-index: 1;
}
.greetings .conArea .sign p {
  display: flex;
  align-items: flex-end;
  gap: 1.3rem;
  position: absolute;
  bottom: 1.3rem;
  right: 3.5rem;
  z-index: 1;
}
.greetings .conArea .sign p span {
  font-size: var(--font-lg);
  font-weight: 500;
  color: #fff;
  line-height: 4.5rem;
}
.greetings .conArea .sign p strong {
  width: 7.6rem;
  height: 5.4rem;
  background: url(../images/sub/img_greetings_sign.png) no-repeat center/contain;
  text-indent: -9999em;
}

/* 비전 */
.statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 1180px;
  margin: 0 auto;
}
.statement .boxs {
  position: relative;
  width: 100%;
}
.statement .label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 15rem;
  color: rgba(148, 153, 181, 0.14);
  font-weight: 700;
  text-align: center;
  z-index: 0;
}
.statement .vision .txtArea {
  position: relative;
  padding-top: 11.6rem;
  padding-bottom: 7.2rem;
}
.statement .vision .txtArea h4 {
  font-size: 2.5rem;
  color: var(--primary-500);
  text-align: center;
}
.statement .vision .txtArea h4 br {
  display: none;
}
.statement .ci {
  text-align: center;
}
.statement .mission .label {
  font-size: 14rem;
}
.statement .mission .txtArea {
  display: flex;
  gap: 2rem;
  position: relative;
  padding-top: 12rem;
}
.statement .mission .txtArea dl {
  flex: 1;
  padding: 3.2rem 4rem;
  background: rgba(255, 255, 255, 0.47);
  backdrop-filter: blur(2px);
  border: 1px solid var(--primary-500);
  border-radius: 2rem;
  box-sizing: border-box;
}
.statement .mission .txtArea dl dt {
  position: relative;
  padding-top: 7.8rem;
  font-size: 2.5rem;
  color: var(--gray-600);
  word-break: keep-all;
  background: no-repeat top left/5rem;
}
.statement .mission .txtArea dl dt.book {
  background-image: url(../images/sub/icon_mission_book.svg);
}
.statement .mission .txtArea dl dt.laptop {
  background-image: url(../images/sub/icon_mission_laptop.svg);
}
.statement .mission .txtArea dl dt.hat {
  background-image: url(../images/sub/icon_mission_hat.svg);
}
.statement .mission .txtArea dl dt .br {
  display: block;
}
.statement .mission .txtArea dl dd {
  margin-top: 2.8rem;
  padding-top: 2.8rem;
  border-top: 1px solid var(--gray-300);
}
.statement .mission .txtArea dl dd .listStyle li {
  margin-top: 1.2rem;
  font-weight: 500;
}
.statement .mission .txtArea dl dd .listStyle li:first-child {
  margin-top: 0;
}
.statement .mission .txtArea dl dd .listStyle li b {
  color: var(--primary-400);
}

/* 연혁 */
.historyList {
  display: flex;
  gap: 6.5573%;
  max-width: 1220px;
  margin: 0 auto;
}
.historyList .titArea {
  flex-shrink: 0;
  width: 29.5081%;
}
.historyList .titArea h4 {
  font-family: "Puradak";
  font-size: 6.4rem;
  font-weight: 400;
  color: var(--primary-500);
}
.historyList .titArea h4 span {
  display: block;
  margin-top: 0.8rem;
  font-size: 4.8rem;
  font-weight: 400;
  color: var(--gray-400);
  text-align: right;
}
.historyList .titArea .sTit {
  margin-bottom: 2.4rem;
}
.historyList .listArea {
  flex-grow: 1;
  position: relative;
  padding-top: 9.2rem;
}
.historyList .listArea::before, .historyList .listArea::after {
  content: "";
  position: absolute;
  top: 0;
  left: 11rem;
  width: 2px;
  height: 100%;
  background: var(--primary-300);
}
.historyList .listArea::after {
  height: 9.2rem;
  background: #fff;
}
.historyList .listArea dl {
  display: flex;
}
.historyList .listArea dl dt {
  flex-shrink: 0;
  width: 11rem;
}
.historyList .listArea dl dt span {
  display: block;
  position: relative;
  font-size: 3.1rem;
  font-weight: 700;
  color: var(--gray-500);
  line-height: 4.8rem;
}
.historyList .listArea dl dt span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.1rem;
  width: 2rem;
  height: 2rem;
  background: #fff;
  border: 5px solid var(--primary-300);
  border-radius: 50%;
  box-sizing: border-box;
  transform: translateY(-50%);
  z-index: 2;
}
.historyList .listArea dl dd {
  flex-grow: 1;
  min-width: 0;
  position: relative;
  padding: 2.4rem 2rem 0 3rem;
}
.historyList .listArea dl dd ul {
  padding: 3rem 1.2rem 2rem;
  border-top: 1px solid var(--gray-300);
}
.historyList .listArea dl dd ul li {
  display: flex;
  margin-top: 1.2rem;
  font-size: var(--font-lg);
  font-weight: 500;
  color: var(--gray-500);
}
.historyList .listArea dl dd ul li:first-child {
  margin-top: 0;
}
.historyList .listArea dl dd ul li .date {
  flex-shrink: 0;
  width: 12.8rem;
  position: relative;
  padding-left: 1.6rem;
  box-sizing: border-box;
}
.historyList .listArea dl dd ul li .date::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--primary-300);
  border-radius: 50%;
  transform: translateY(-50%);
}
.historyList .listArea dl dd ul li .txt {
  flex-grow: 1;
}
.historyList .listArea dl:first-child dd::before, .historyList .listArea dl:last-child dd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2.4rem;
  background: #fff;
  box-sizing: border-box;
  z-index: 1;
}
.historyList .listArea dl:last-child dd::before {
  top: auto;
  bottom: 0;
  height: calc(100% - 2.4rem);
}

/* 조직 및 기능 */
.orgChart {
  max-width: 940px;
  margin: 0 auto 6rem;
}
.orgChart .name {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 6rem;
  padding: 1rem 0;
  font-size: var(--font-lg);
  color: #fff;
  text-align: center;
  border-radius: 6em;
  box-sizing: border-box;
}
.orgChart .director {
  display: flex;
  justify-content: center;
}
.orgChart .director .name {
  width: 26rem;
  font-weight: 700;
  background: var(--primary-500);
}
.orgChart .director .name br {
  display: none;
}
.orgChart .group {
  position: relative;
  padding-top: 4rem;
}
.orgChart .group::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 4rem;
  background: var(--gray-300);
}
.orgChart .unit {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.orgChart .unit::before {
  content: "";
  position: absolute;
  top: 3rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gray-300);
}
.orgChart .team {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 26rem;
}
.orgChart .team .name {
  font-weight: 500;
  background: var(--primary-300);
}
.orgChart .team .work {
  flex: 1;
  position: relative;
  padding-top: 2rem;
}
.orgChart .team .work::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 2rem;
  background: var(--gray-300);
}
.orgChart .team .work .listStyle {
  height: 100%;
  padding: 2.4rem 2rem 2.4rem 1.4rem;
  border: 1px solid var(--primary-400);
  border-radius: 1.6rem;
  box-sizing: border-box;
}
.orgChart .team .work .listStyle li {
  margin-top: 0.8rem;
}
.orgChart .team .work .listStyle li:first-child {
  margin: 0;
}

/* 시설안내 */
/* 전경 */
.buildingMap {
  position: relative;
}
.buildingMap .img {
  overflow: hidden;
  aspect-ratio: 1280/458;
  border-radius: 2rem;
}
.buildingMap .img img {
  width: 100%;
  height: 100%;
}
.buildingMap .links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.buildingMap .links a {
  display: block;
  position: absolute;
  background: var(--primary-400);
  border-radius: 5em;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.buildingMap .links a.central {
  top: 34.716157%;
  left: 68.671875%;
}
.buildingMap .links a.dorm {
  top: 24.235807%;
  left: 43.515625%;
}
.buildingMap .links a span {
  display: block;
  padding: 0 3.2rem;
  font-size: var(--font-lg);
  font-weight: 700;
  color: #fff;
  line-height: 4.2rem;
}

/* 시설 */
.floorMap {
  padding: 3.2rem 4.8rem;
  border: 1px solid var(--gray-300);
  border-radius: 2rem;
  box-sizing: border-box;
}
.floorMap .img {
  text-align: center;
}
.floorMap .labelArea {
  display: flex;
  margin-top: 6rem;
}
.floorMap .labelArea ol,
.floorMap .labelArea ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem 0;
}
.floorMap .labelArea ol li,
.floorMap .labelArea ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding-right: 0.4rem;
}
.floorMap .labelArea ol li i,
.floorMap .labelArea ul li i {
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
}
.floorMap .labelArea ol li span,
.floorMap .labelArea ul li span {
  font-size: var(--font-md);
  color: var(--gray-500);
  font-weight: 500;
  display: flex;
  align-items: center;
  min-height: 2.8rem;
}
.floorMap .labelArea .facility {
  flex: 1;
  padding-right: 2rem;
  box-sizing: border-box;
}
.floorMap .labelArea .facility ol li i {
  font-size: var(--font-md);
  font-weight: 500;
  color: #fff;
  line-height: 2.8rem;
  text-align: center;
  background: var(--primary-400);
}
.floorMap .labelArea .utility {
  width: 31.47208%;
  padding-left: 2rem;
  border-left: 1px solid var(--gray-300);
  box-sizing: border-box;
}
.floorMap .labelArea .utility ul {
  grid-template-columns: repeat(2, 1fr);
}
.floorMap .labelArea .utility ul li i {
  background: var(--gray-300) no-repeat center;
}
.floorMap .labelArea .utility ul li i.elevator {
  background-image: url(../images/sub/icon_utility_elevator.svg);
  background-size: 1.5rem;
}
.floorMap .labelArea .utility ul li i.stairs {
  background-image: url(../images/sub/icon_utility_stairs.svg);
  background-size: 1.6rem auto;
}
.floorMap .labelArea .utility ul li i.shower {
  background-image: url(../images/sub/icon_utility_shower.svg);
  background-size: 1.4rem auto;
}
.floorMap .labelArea .utility ul li i.wc-disabled {
  background-image: url(../images/sub/icon_utility_wc-disabled.svg);
  background-size: 1.4rem auto;
}
.floorMap .labelArea .utility ul li i.wc-man {
  background-image: url(../images/sub/icon_utility_wc-man.svg);
  background-size: 1.2rem auto;
}
.floorMap .labelArea .utility ul li i.wc-woman {
  background-image: url(../images/sub/icon_utility_wc-woman.svg);
  background-size: 1.2rem auto;
}
.floorMap.dorm {
  display: flex;
}
.floorMap.dorm .img {
  flex: 1;
}
.floorMap.dorm .labelArea {
  flex-shrink: 0;
  flex-direction: column;
  width: 35.2rem;
  margin-top: 0;
}
.floorMap.dorm .labelArea ol,
.floorMap.dorm .labelArea ul {
  grid-template-columns: repeat(2, 1fr);
}
.floorMap.dorm .labelArea .facility {
  padding-right: 0;
}
.floorMap.dorm .labelArea .utility {
  width: 100%;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  padding-left: 0;
  border-left: none;
  border-top: 1px solid var(--gray-300);
}

.facilityList > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 1.484375%;
}
.facilityList > ul > li .img {
  overflow: hidden;
  border-radius: 0.8rem;
  border: 1px solid var(--gray-300);
  box-sizing: border-box;
}
.facilityList > ul > li .img img {
  width: 100%;
  height: 100%;
}
.facilityList > ul > li .name {
  margin-top: 2.4rem;
  font-size: 2.1rem;
  color: var(--gray-500);
  font-weight: 700;
}
.facilityList > ul > li .info {
  margin-top: 0.8rem;
}
.facilityList > ul > li .info li {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-400);
}
.facilityList > ul > li .info li .type {
  flex-shrink: 0;
}
.facilityList > ul > li .info li .price {
  text-align: right;
}
.facilityList.rental > ul {
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem 1.875%;
}

/* 오시는 길 */
.locationMap {
  height: 52rem;
  border-radius: 2rem;
  border: 1px solid var(--gray-300);
  box-sizing: border-box;
}

.locationInfo {
  margin-bottom: 6rem;
}
.locationInfo dl {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1.2rem;
  font-size: var(--font-lg);
  color: var(--gray-500);
}
.locationInfo dl dt {
  flex-shrink: 0;
  width: 10rem;
  position: relative;
  padding-left: 2.5rem;
  box-sizing: border-box;
}
.locationInfo dl dt::before {
  content: "·";
  position: absolute;
  top: 0;
  left: 1rem;
  font-weight: 900;
}
.locationInfo dl dd {
  flex: 1;
  font-weight: 500;
  word-break: keep-all;
}

.shuttleBus {
  display: flex;
  justify-content: space-between;
  gap: 2.8rem;
  margin-top: 4rem;
}
.shuttleBus .item {
  flex: 1;
}
.shuttleBus .item .img {
  display: block;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid var(--gray-300);
  box-sizing: border-box;
}
.shuttleBus .item .img img {
  width: 100%;
  height: 100%;
}
.shuttleBus .item .tit {
  display: block;
  margin-top: 2rem;
  font-size: var(--font-lg);
  color: var(--font-600);
  text-align: center;
}

@media screen and (max-width: 1200px) {
  /* 시설 */
  .floorMap .labelArea ol,
  .floorMap .labelArea ul {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 1024px) {
  /* 인사말 */
  .greetings .titArea {
    padding: 1rem 5.5555% 2.5rem;
  }
  .greetings .titArea h4 {
    font-size: 2.625rem;
  }
  .greetings .conArea {
    padding: 3rem 0 0;
  }
  .greetings .conArea .txt {
    max-width: 100%;
    padding: 0 5.5555%;
  }
  .greetings .conArea .txt p {
    margin-top: 1rem;
    font-size: 1.875rem;
  }
  .greetings .conArea .txt p br {
    display: none;
  }
  .greetings .conArea .sign {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-between;
    position: static;
    width: 100%;
    padding-left: 5.5555%;
    box-sizing: border-box;
  }
  .greetings .conArea .sign .img {
    width: 18.75rem;
    height: 19.25rem;
  }
  .greetings .conArea .sign p {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 1.25rem;
  }
  .greetings .conArea .sign p span {
    font-size: 1.875rem;
    color: var(--gray-600);
    line-height: 1.5;
  }
  .greetings .conArea .sign p strong {
    width: 7.375rem;
    height: 5.25rem;
    background-image: url(../images/sub/img_greetings_sign_mo.png);
  }
  /* 비전 */
  .statement {
    gap: 2rem;
  }
  .statement .label {
    font-size: 10.5rem;
  }
  .statement .vision .txtArea {
    padding-top: 8.75rem;
    padding-bottom: 2.5rem;
  }
  .statement .vision .txtArea h4 {
    font-size: 2.875rem;
  }
  .statement .vision .txtArea h4 br {
    display: block;
  }
  .statement .ci {
    max-width: 25.75rem;
  }
  .statement .mission .label {
    font-size: 8.5rem;
  }
  .statement .mission .txtArea {
    flex-direction: column;
    gap: 2.5rem;
    padding-top: 7.75rem;
  }
  .statement .mission .txtArea dl {
    padding: 3rem 2.5rem;
    border-radius: 2.5rem;
  }
  .statement .mission .txtArea dl dt {
    padding-top: 7rem;
    font-size: 2.625rem;
  }
  .statement .mission .txtArea dl dt .br {
    display: none;
  }
  .statement .mission .txtArea dl dd {
    margin-top: 2rem;
    padding-top: 2rem;
  }
  .statement .mission .txtArea dl dd .listStyle li {
    margin-top: 0.5rem;
  }
  .statement .mission .txtArea dl dd .listStyle li br {
    display: none;
  }
  /* 연혁 */
  .historyList {
    flex-direction: column;
    gap: 5rem;
  }
  .historyList .titArea {
    width: 31.8125rem;
  }
  .historyList .titArea h4 {
    font-size: 5.75rem;
  }
  .historyList .titArea h4 span {
    margin-top: 0;
    padding-right: 5.6974%;
    font-size: 4rem;
  }
  .historyList .titArea .sTit {
    margin-bottom: 1.5rem;
  }
  .historyList .listArea {
    padding-top: 0;
  }
  .historyList .listArea::before, .historyList .listArea::after {
    left: 9.75rem;
  }
  .historyList .listArea::after {
    display: none;
  }
  .historyList .listArea dl dt {
    width: 9.75rem;
  }
  .historyList .listArea dl dt span {
    font-size: 2.75rem;
    line-height: 4.25rem;
  }
  .historyList .listArea dl dt span::after {
    right: -1.375rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .historyList .listArea dl dd {
    padding: 2rem 0 0 2.25rem;
  }
  .historyList .listArea dl dd ul {
    padding: 1.25rem 0 1rem 0.5rem;
  }
  .historyList .listArea dl dd ul li {
    flex-direction: column;
    margin-top: 1.5rem;
    font-size: 2.125rem;
  }
  .historyList .listArea dl dd ul li .date {
    width: 100%;
    padding-left: 2rem;
  }
  .historyList .listArea dl dd ul li .date::before {
    width: 0.75rem;
    height: 0.75rem;
  }
  .historyList .listArea dl dd ul li .txt {
    padding-left: 2rem;
  }
  .historyList .listArea dl:first-child dd::before, .historyList .listArea dl:last-child dd::before {
    height: 2rem;
  }
  .historyList .listArea dl:last-child dd::before {
    height: calc(100% - 2rem);
  }
  /* 조직 및 기능 */
  .orgChart {
    max-width: 720px;
    margin-bottom: 5rem;
  }
  .orgChart .name {
    min-height: 5.75rem;
    padding: 1.25rem;
    font-size: 2.125rem;
  }
  .orgChart .director {
    justify-content: flex-start;
  }
  .orgChart .director .name {
    width: 56.875%;
  }
  .orgChart .group {
    padding-top: 3.75rem;
  }
  .orgChart .group::before {
    left: 28.4375%;
    height: 3.75rem;
  }
  .orgChart .unit {
    flex-direction: column;
    align-items: flex-start;
    gap: 3.75rem;
    padding-left: 28.4375%;
  }
  .orgChart .unit::before {
    top: 0;
    left: 28.4375%;
    width: 1px;
    height: 100%;
  }
  .orgChart .team {
    width: 100%;
    padding-left: 2.25rem;
    box-sizing: border-box;
  }
  .orgChart .team::before {
    content: "";
    position: absolute;
    top: 2.875rem;
    left: 0;
    width: 2.25rem;
    height: 1px;
    background: var(--gray-300);
  }
  .orgChart .team:last-child::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: calc(100% - 3rem);
    background: #fff;
  }
  .orgChart .team .work .listStyle {
    padding: 2rem 1.5rem 2rem 1rem;
  }
  .orgChart .team .work .listStyle li {
    margin-top: 0.25rem;
    font-weight: 500;
  }
  /* 시설안내 */
  /* 전경 */
  .buildingMap .links a span {
    padding: 0 2.5rem;
    font-size: 2.125rem;
    line-height: 3.75rem;
  }
  /* 시설 */
  .floorMap {
    padding: 4rem 2.5rem;
  }
  .floorMap .labelArea {
    flex-direction: column;
    margin-top: 2.5rem;
  }
  .floorMap .labelArea ol,
  .floorMap .labelArea ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0;
  }
  .floorMap .labelArea ol li,
  .floorMap .labelArea ul li {
    gap: 0.5rem;
    padding-right: 0.25rem;
  }
  .floorMap .labelArea ol li i,
  .floorMap .labelArea ul li i {
    width: 3rem;
    height: 3rem;
  }
  .floorMap .labelArea ol li span,
  .floorMap .labelArea ul li span {
    font-size: 1.875rem;
    min-height: 3rem;
  }
  .floorMap .labelArea .facility {
    padding-right: 0;
  }
  .floorMap .labelArea .facility ol li i {
    font-size: 1.875rem;
    line-height: 3rem;
  }
  .floorMap .labelArea .utility {
    width: 100%;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--gray-300);
  }
  .floorMap .labelArea .utility ul li i.elevator {
    background-size: 1.625rem;
  }
  .floorMap .labelArea .utility ul li i.stairs {
    background-size: 1.75rem auto;
  }
  .floorMap .labelArea .utility ul li i.shower {
    background-size: 1.5rem auto;
  }
  .floorMap .labelArea .utility ul li i.wc-disabled {
    background-size: 1.5rem auto;
  }
  .floorMap .labelArea .utility ul li i.wc-man {
    background-size: 1.25rem auto;
  }
  .floorMap .labelArea .utility ul li i.wc-woman {
    background-size: 1.25rem auto;
  }
  .floorMap.dorm {
    flex-direction: column;
  }
  .floorMap.dorm .labelArea {
    width: 100%;
    margin-top: 2.5rem;
  }
  .floorMap.dorm .labelArea .utility {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }
  .facilityList > ul, .facilityList.rental > ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.875%;
  }
  .facilityList > ul > li .img {
    border-radius: 1rem;
  }
  .facilityList > ul > li .name {
    margin-top: 2rem;
    font-size: 2.375rem;
  }
  .facilityList > ul > li .info {
    margin-top: 0.5rem;
  }
  .facilityList > ul > li .info li {
    font-size: 1.875rem;
  }
  /* 오시는 길 */
  .locationMap {
    height: 61.1111vw;
    max-height: 65rem;
  }
  .locationInfo {
    margin-bottom: 5rem;
  }
  .locationInfo dl {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 2.125rem;
  }
  .locationInfo dl dt {
    width: 100%;
  }
  .locationInfo dl dd {
    padding-left: 2.5rem;
  }
  .shuttleBus {
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 2.5rem;
  }
  .shuttleBus .item .tit {
    margin-top: 1.5rem;
    font-size: 2.125rem;
  }
}
@media screen and (max-width: 720px) {
  /* 인사말 */
  .greetings .titArea h4 .moBr {
    display: block;
  }
  /* 조직 및 기능 */
  .orgChart .director .name br {
    display: block;
  }
  /* 시설안내 */
  /* 전경 */
  .buildingMap .img {
    aspect-ratio: 640/272;
  }
  .buildingMap .links a.central {
    top: 34.558823%;
    left: 69.6875%;
  }
  .buildingMap .links a.dorm {
    top: 16.911764%;
    left: 33.75%;
  }
  /* 시설 */
  .facilityList > ul, .facilityList.rental > ul {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
/* 05 마이페이지 */
/* 교육신청확인 */
.btn-grass {
  border: 1px solid #2f8851;
  color: #2f8851;
}
.btn-sky {
  border: 1px solid #155fff;
  color: #155fff;
}
.btn-pink {
  border: 1px solid #b33477;
  color: #b33477;
}

.boardList .my-state .btn {
  min-width: 8.8rem;
}

/* 진행중인교육 */
.curriculumList .item .head .progress {
  flex-grow: 1;
}
.curriculumList .item .head .progress .time {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.curriculumList .item .head .progress .time span {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-500);
  letter-spacing: -0.85px;
}
.curriculumList .item .head .progress .time span b {
  font-weight: 500;
}
.curriculumList .item .head .progress .time span.start {
  color: #483ddf;
}
.curriculumList .item .head .progress .time span.start b {
  font-weight: 700;
}
.curriculumList .item .head .progress .bar {
  overflow: hidden;
  position: relative;
  height: 1rem;
  background: var(--gray-100);
  border-radius: 1em;
}
.curriculumList .item .head .progress .bar .ing {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #483ddf;
}
.curriculumList .item .btns {
  display: flex;
  gap: 0.8rem;
  margin-top: 2.8rem;
}
.curriculumList .item .btns .btn {
  flex: 1;
  gap: 0.4rem;
  padding: 0;
}
.curriculumList .item .btns + .btns {
  margin-top: 0.8rem;
}

@media screen and (max-width: 1024px) {
  /* 교육신청확인 */
  .boardList .my-state .btn {
    min-width: 10rem;
  }
  /* 진행중인교육 */
  .curriculumList .item .head .progress .time span {
    font-size: 1.875rem;
  }
  .curriculumList .item .head .progress .bar {
    margin-top: 0.25rem;
  }
  .curriculumList .item .btns {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
  }
  .curriculumList .item .btns .btn {
    flex: 1 0 calc(50% - 0.25rem);
    gap: 0.5rem;
  }
  .curriculumList .item .btns + .btns {
    margin-top: 0.5rem;
  }
}
/* 06 부가서비스 */
/* 개인정보처리방침*/
.privacyWrap .conSplit {
  justify-content: flex-start;
}

/* 로그인 */
/* 상단 문구 */
.loginGuide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  position: relative;
  min-height: 6rem;
  margin-bottom: 10rem;
}
.loginGuide h4 {
  font-size: 3.3rem;
  letter-spacing: 1px;
}
.loginGuide .txt {
  font-size: var(--font-md);
  word-break: keep-all;
}
.loginGuide .btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* 기관로그인 */
.useMsgBox .loginArea .msgCon .icon {
  margin-bottom: 5rem;
}
.useMsgBox .loginArea .msgCon .tit {
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;
}
.useMsgBox .loginArea .msgCon .tit p {
  font-size: 2.1rem;
  color: var(--gray-600);
  font-weight: 500;
  letter-spacing: -0.42px;
}
.useMsgBox .loginArea .msgCon .result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 8.8rem;
  background: #f5f6f9;
  border-radius: 0.8rem;
  border: 1px solid #e3e4e9;
  box-sizing: border-box;
}
.useMsgBox .loginArea .msgCon .result p {
  font-size: var(--font-lg);
  color: #8e8f97;
  text-align: center;
  letter-spacing: -0.42px;
}
.useMsgBox .loginArea .loginForm {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 38.4rem;
  margin: 0 auto;
}
.useMsgBox .loginArea .loginForm .inp {
  width: 100%;
  min-height: 5.6rem;
  padding: 0 1.6rem;
  font-size: var(--font-lg);
  color: var(--gray-500);
  border: 1px solid #e8e9ec;
  border-radius: 0.8rem;
  box-sizing: border-box;
}
.useMsgBox .loginArea .loginForm .inp::placeholder {
  color: #8e8f97;
}
.useMsgBox .loginArea .loginForm .groupPwd {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.useMsgBox .loginArea .loginForm .groupPwd .inpBox {
  position: relative;
}
.useMsgBox .loginArea .loginForm .groupPwd .inpBox .inp {
  padding-right: 3.6rem;
}
.useMsgBox .loginArea .loginForm .groupPwd .inpBox .btn {
  position: absolute;
  top: 0;
  right: 1.6rem;
  height: 100%;
  background: transparent;
  z-index: 1;
}
.useMsgBox .loginArea .loginForm .groupPwd .inpBox .btn .bi {
  width: 2rem;
  height: 100%;
  color: var(--gray-600);
}
.useMsgBox .loginArea .loginForm .groupPwd .inpBox .btn span {
  display: none;
}
.useMsgBox .loginArea .loginForm .groupPwd .label {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--gray-600);
  letter-spacing: -0.42px;
}
.useMsgBox .loginArea .loginForm .groupPwd .label.sm {
  font-size: 2.1rem;
  font-weight: 500;
}
.useMsgBox .loginArea .loginForm .groupPwd .conTxt {
  font-size: var(--font-lg);
  color: var(--point);
  letter-spacing: -0.42px;
}
.useMsgBox .loginArea .btnGroup .btn {
  max-width: 32.4rem;
}
.useMsgBox .loginArea .links {
  display: flex;
  justify-content: center;
  margin-top: 2.6rem;
}
.useMsgBox .loginArea .links li {
  position: relative;
}
.useMsgBox .loginArea .links li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1.6rem;
  background: var(--gray-300);
  transform: translateY(-50%);
}
.useMsgBox .loginArea .links li:first-child::before {
  display: none;
}
.useMsgBox .loginArea .links li a {
  display: block;
  padding: 0 1rem;
  font-size: var(--font-md);
  color: var(--gray-500);
}

/* 아이디/비번찾기 */
.useMsgBox.find {
  max-width: 54.6rem;
}
.useMsgBox.find .loginArea .msgCon .icon {
  margin-bottom: 4rem;
}
.useMsgBox.find .loginArea .msgCon .tit {
  margin-bottom: 2.8rem;
}
.useMsgBox.find .loginArea .loginForm.pw {
  gap: 4rem;
}

@media screen and (max-width: 1024px) {
  /* 상단 문구 */
  .loginGuide {
    display: block;
    min-height: auto;
    margin-bottom: 6.25rem;
  }
  .loginGuide h4 {
    margin-bottom: 2.5rem;
    font-size: 3.125rem;
  }
  .loginGuide .txt {
    font-size: 1.875rem;
  }
  .loginGuide .btn {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    position: static;
    transform: none;
    margin-top: 3.75rem;
  }
  /* 기관로그인 */
  .useMsgBox .loginArea .msgCon .icon {
    margin-bottom: 4rem;
  }
  .useMsgBox .loginArea .msgCon .tit {
    gap: 1.5rem;
  }
  .useMsgBox .loginArea .msgCon .tit p {
    font-size: 2.375rem;
  }
  .useMsgBox .loginArea .msgCon .tit p .moBr {
    display: block;
  }
  .useMsgBox .loginArea .msgCon .result {
    height: 9rem;
    border-radius: 1rem;
  }
  .useMsgBox .loginArea .msgCon .result p {
    font-size: 2.125rem;
  }
  .useMsgBox .loginArea .loginForm {
    gap: 1.5rem;
    max-width: 100%;
  }
  .useMsgBox .loginArea .loginForm .inp {
    min-height: 6.25rem;
    padding: 0 2rem;
    font-size: 2.125rem;
    border-radius: 0.75rem;
  }
  .useMsgBox .loginArea .loginForm .groupPwd {
    gap: 2rem;
  }
  .useMsgBox .loginArea .loginForm .groupPwd .inpBox .inp {
    padding-right: 4.5rem;
  }
  .useMsgBox .loginArea .loginForm .groupPwd .inpBox .btn {
    right: 2rem;
  }
  .useMsgBox .loginArea .loginForm .groupPwd .inpBox .btn .bi {
    width: 2.5rem;
  }
  .useMsgBox .loginArea .loginForm .groupPwd .label {
    font-size: 2.625rem;
  }
  .useMsgBox .loginArea .loginForm .groupPwd .label.sm {
    font-size: 2.375rem;
  }
  .useMsgBox .loginArea .loginForm .groupPwd .conTxt {
    font-size: 2.125rem;
  }
  .useMsgBox .loginArea .loginForm .groupPwd .conTxt br {
    display: none;
  }
  .useMsgBox .loginArea .btnGroup .btn {
    max-width: 100%;
  }
  .useMsgBox .loginArea .links {
    margin-top: 2.5rem;
  }
  .useMsgBox .loginArea .links li::before {
    height: 2rem;
  }
  .useMsgBox .loginArea .links li a {
    padding: 0 0.75rem;
    font-size: 1.875rem;
  }
  /* 아이디/비번찾기 */
  .useMsgBox.find .loginArea .msgCon .icon {
    margin-bottom: 3.5rem;
  }
  .useMsgBox.find .loginArea .msgCon .tit {
    margin-bottom: 2.5rem;
  }
  .useMsgBox.find .loginArea .loginForm.pw {
    gap: 3.5rem;
  }
}
/* 회원가입 */
/* 기관코드-팝업 */
.orgSchForm .schTit {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.orgSchForm .schTit .tit {
  font-size: 2.5rem;
  color: var(--gray-600);
  font-weight: 700;
}
.orgSchForm .schTit .txt {
  font-size: var(--font-md);
  color: var(--gray-600);
}
.orgSchForm .schTit .txt br {
  display: none;
}
.orgSchForm .schColumn {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--gray-300);
}
.orgSchForm .schItem {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.orgSchForm .schItem .tit {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--gray-600);
}
.orgSchForm .schItem .tit br {
  display: none;
}
.orgSchForm .schItem input {
  width: 100%;
  min-height: 4.8rem;
  padding: 0 1.6rem;
  font-size: var(--font-md);
  color: var(--gray-500);
  border: 1px solid var(--gray-500);
  border-radius: 0.8rem;
  box-sizing: border-box;
}
.orgSchForm .btnGroup {
  margin-top: 0;
}

/* 완료 */
.useMsgBox.join {
  max-width: 64rem;
}
.useMsgBox .completeArea .msgCon .icon {
  margin-bottom: 5rem;
}
.useMsgBox .completeArea .msgCon .tit {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.useMsgBox .completeArea .msgCon .tit p {
  font-size: 2.5rem;
  color: var(--gray-600);
  font-weight: 700;
  letter-spacing: -0.42px;
}
.useMsgBox .completeArea .msgCon .txt {
  margin-top: 5rem;
  font-size: var(--font-md);
  color: var(--gray-600);
  letter-spacing: -0.42px;
}
.useMsgBox .completeArea .msgCon .txt br {
  display: none;
}
.useMsgBox .completeArea .btnGroup .btn {
  max-width: 18rem;
}

/* 회원탈퇴-팝업 */
.useMsgBox.delete {
  padding: 0;
  border: none;
}
.useMsgBox.delete .loginArea .msgCon .icon {
  margin-bottom: 4rem;
}
.useMsgBox.delete .loginArea .msgCon .tit.gap {
  gap: 1.2rem;
}
.useMsgBox.delete .loginArea .btnGroup .btn {
  flex: 0 0 auto;
}

@media screen and (max-width: 1024px) {
  /* 기관코드-팝업 */
  .orgSchForm .schTit {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .orgSchForm .schTit .tit {
    font-size: 2.875rem;
  }
  .orgSchForm .schTit .txt {
    font-size: 1.875rem;
  }
  .orgSchForm .schTit .txt br {
    display: block;
  }
  .orgSchForm .schColumn {
    gap: 2.5rem;
    margin-top: 1.5rem;
    padding-top: 2rem;
  }
  .orgSchForm .schItem {
    gap: 1rem;
  }
  .orgSchForm .schItem .tit {
    font-size: 1.875rem;
  }
  .orgSchForm .schItem .tit br {
    display: block;
  }
  .orgSchForm .schItem input {
    min-height: 5.5rem;
    padding: 0 2rem;
    font-size: 1.875rem;
    border-radius: 0.75rem;
  }
  .boardList table td.org-name {
    margin: 0;
  }
  .boardList table td.org-name a {
    max-height: 3em;
    white-space: pre-line;
  }
  /* 완료 */
  .useMsgBox .completeArea .msgCon .icon {
    margin-bottom: 4rem;
  }
  .useMsgBox .completeArea .msgCon .tit {
    gap: 1.5rem;
  }
  .useMsgBox .completeArea .msgCon .txt {
    margin-top: 4rem;
    font-size: 1.875rem;
  }
  .useMsgBox .completeArea .msgCon .txt br {
    display: block;
  }
  .useMsgBox .completeArea .btnGroup .btn {
    max-width: 100%;
  }
  /* 회원탈퇴-팝업 */
  .useMsgBox.delete .loginArea .msgCon .icon {
    margin-bottom: 3.5rem;
  }
  .useMsgBox.delete .loginArea .msgCon .tit.gap {
    gap: 1.5rem;
  }
}
/* 통합검색 */
.schCategory {
  padding: 0 2%;
  border-bottom: 1px solid var(--gray-300);
}
.schCategory ul {
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
}
.schCategory ul li {
  flex-shrink: 0;
}
.schCategory ul li button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 6.4rem;
  padding: 0 2rem;
  font-size: var(--font-lg);
  color: var(--gray-600);
  font-weight: 500;
  box-sizing: border-box;
}
.schCategory ul li button.active {
  font-weight: 700;
  color: var(--primary-400);
}
.schCategory ul li button.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary-400);
}

.totalFormWrap {
  margin-bottom: 9.2rem;
  padding: 0 2%;
}
.totalFormWrap .inner {
  max-width: 1280px;
  margin: 0 auto;
}
.totalFormWrap .schForm {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 8rem;
}
.totalFormWrap .schForm input {
  width: 100%;
  height: 7.6rem;
  padding: 0 10rem 0 4rem;
  font-size: var(--font-lg);
  color: var(--gray-500);
  border: 1px solid var(--primary-400);
  border-radius: 7em;
  box-sizing: border-box;
}
.totalFormWrap .schForm input::placeholder {
  color: currentColor;
}
.totalFormWrap .schForm button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 6rem;
  height: 6rem;
  background: var(--primary-400);
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.totalFormWrap .schForm button .bi {
  width: 3rem;
  height: 3rem;
}
.totalFormWrap .schForm button .bi::before {
  background: #fff;
}
.totalFormWrap .resultTxt {
  font-size: 3.2rem;
  color: var(--gray-600);
  font-weight: 400;
  text-align: center;
  line-height: 133.3%;
}
.totalFormWrap .resultTxt strong {
  color: var(--primary-400);
}

.totalResultWrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2%;
}
.totalResultWrap .resultGroup {
  padding: 5rem 2rem;
  border-top: 1px solid var(--gray-600);
}
.totalResultWrap .resultGroup:first-child {
  border-top: none;
}
.totalResultWrap .resultGroup h4 {
  margin-bottom: 2rem;
  font-size: 2.5rem;
  color: var(--gray-600);
}
.totalResultWrap .resultGroup h4 b {
  font-weight: 700;
  color: var(--primary-400);
}
.totalResultWrap .resultGroup .btnGroup .btn {
  width: 22.4rem;
}
.totalResultWrap .itemList .item {
  padding: 2rem 0;
  border-bottom: 1px solid var(--gray-300);
}
.totalResultWrap .itemList .item:first-child {
  border-top: 1px solid var(--gray-300);
}
.totalResultWrap .itemList .item .post .keyword {
  color: var(--primary-400) !important;
  font-weight: 700;
}
.totalResultWrap .itemList .item .post a {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 0;
}
.totalResultWrap .itemList .item .post a:focus .tit,
.totalResultWrap .itemList .item .post a:focus .txt, .totalResultWrap .itemList .item .post a:hover .tit,
.totalResultWrap .itemList .item .post a:hover .txt {
  text-decoration: underline;
}
.totalResultWrap .itemList .item .post .category {
  flex-shrink: 0;
  margin-right: 1.6rem;
}
.totalResultWrap .itemList .item .post .tit {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-right: 18rem;
}
.totalResultWrap .itemList .item .post .tit strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--font-lg);
  color: var(--gray-500);
  line-height: 3.6rem;
}
.totalResultWrap .itemList .item .post .tit .date {
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--gray-400);
  line-height: 3.6rem;
}
.totalResultWrap .itemList .item .post .txt {
  overflow: hidden;
  width: 100%;
  max-height: 3em;
  font-size: var(--font-md);
  color: var(--gray-400);
}
.totalResultWrap .itemList .item .info {
  display: flex;
  align-items: center;
  margin-top: 1.6rem;
}
.totalResultWrap .itemList .item .info li {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: 1.2rem;
  padding-left: 1.2rem;
  font-size: var(--font-sm);
  color: var(--gray-500);
}
.totalResultWrap .itemList .item .info li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1.4rem;
  background: #ddd;
  transform: translateY(-50%);
}
.totalResultWrap .itemList .item .info li:first-child {
  margin-left: 0;
  padding-left: 0;
}
.totalResultWrap .itemList .item .info li:first-child::before {
  display: none;
}
.totalResultWrap .itemList .item .info li.page span {
  display: flex;
  align-items: center;
  position: relative;
}
.totalResultWrap .itemList .item .info li.page span::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 0.2rem;
  -webkit-mask: url(../images/icon/arrow-right.svg) no-repeat center/contain;
  mask: url(../images/icon/arrow-right.svg) no-repeat center/contain;
  background: var(--gray-500);
}
.totalResultWrap .itemList .item .info li.page span:first-child::before {
  display: none;
}
.totalResultWrap .noResult {
  max-width: 564px;
  margin: 0 auto;
  padding: 8rem 0;
}
.totalResultWrap .noResult h4 {
  padding-top: 24rem;
  font-size: 2.4rem;
  color: var(--gray-600);
  font-weight: 400;
  text-align: center;
  background: url(../images/sub/img_no_result.png) no-repeat top center/22.8rem auto;
}
.totalResultWrap .noResult h4 strong {
  color: var(--primary-400);
}
.totalResultWrap .noResult .keywordInfo {
  display: flex;
  align-items: center;
  margin-top: 4.8rem;
  padding: 3.2rem;
  border-radius: 1.2rem;
  background: var(--primary-100);
  border: 1px solid var(--gray-300);
}
.totalResultWrap .noResult .keywordInfo .tit {
  flex-shrink: 0;
  position: relative;
  padding: 0 2.4rem;
  padding-top: 3.8rem;
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--primary-500);
  line-height: 140%;
}
.totalResultWrap .noResult .keywordInfo .tit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2.4rem;
  width: 3.2rem;
  height: 3.2rem;
  -webkit-mask: url(../images/sub/icon_keyword_info.svg) no-repeat center/contain;
  mask: url(../images/sub/icon_keyword_info.svg) no-repeat center/contain;
  background: currentColor;
}
.totalResultWrap .noResult .keywordInfo .listStyle {
  position: relative;
  padding-left: 1.4rem;
}
.totalResultWrap .noResult .keywordInfo .listStyle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--gray-300);
  transform: translateY(-50%);
}
.totalResultWrap .noResult .keywordInfo .listStyle li {
  padding-left: 1.6rem;
  font-weight: 500;
}
.totalResultWrap .noResult .keywordInfo .listStyle li::before {
  left: 0.6rem;
}
.totalResultWrap .pageNav {
  margin-top: 0;
}

@media screen and (max-width: 1024px) {
  .schCategory {
    padding: 0 2%;
    border-bottom: 1px solid var(--gray-300);
  }
  .schCategory ul {
    overflow-x: auto;
    padding: 0 5.5555%;
  }
  .schCategory ul::-webkit-scrollbar {
    display: none;
  }
  .schCategory ul li button {
    height: 5.5rem;
    padding: 0 1rem;
    font-size: 2.125rem;
  }
  .totalFormWrap {
    margin-bottom: 9.25rem;
    padding: 0 5.5555%;
  }
  .totalFormWrap .schForm {
    margin-bottom: 5.5rem;
  }
  .totalFormWrap .schForm input {
    height: 8rem;
    padding: 0 10rem 0 4rem;
    font-size: 2.125rem;
  }
  .totalFormWrap .schForm button {
    right: 1.25rem;
  }
  .totalFormWrap .resultTxt {
    font-size: 3.5rem;
    word-break: keep-all;
  }
  .totalResultWrap {
    padding: 0 5.5555%;
  }
  .totalResultWrap .resultGroup {
    padding: 5rem 0;
  }
  .totalResultWrap .resultGroup h4 {
    font-size: 2.875rem;
  }
  .totalResultWrap .resultGroup .btnGroup .btn {
    width: 23.5rem;
  }
  .totalResultWrap .itemList .item {
    padding: 2.5rem;
  }
  .totalResultWrap .itemList .item .post a {
    display: block;
  }
  .totalResultWrap .itemList .item .post a > * {
    display: block;
  }
  .totalResultWrap .itemList .item .post .category {
    margin: 0 0 1.25rem;
  }
  .totalResultWrap .itemList .item .post .tit {
    padding-right: 0;
  }
  .totalResultWrap .itemList .item .post .tit strong {
    font-size: 2.125rem;
    line-height: 1.5;
  }
  .totalResultWrap .itemList .item .post .tit .date {
    display: block;
    position: static;
    margin-top: 1rem;
    font-size: 1.875rem;
    line-height: 1.5;
  }
  .totalResultWrap .itemList .item .post .txt {
    margin-top: 1.75rem;
    font-size: 1.875rem;
    max-height: 6em;
    font-size: 1.875rem;
  }
  .totalResultWrap .itemList .item .info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .totalResultWrap .itemList .item .info li {
    margin-left: 0;
    padding-left: 0;
    font-size: 1.625rem;
  }
  .totalResultWrap .itemList .item .info li::before {
    display: none;
  }
  .totalResultWrap .itemList .item .info li.page span::before {
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 0.25rem;
  }
  .totalResultWrap .noResult {
    padding: 10rem 0;
  }
  .totalResultWrap .noResult h4 {
    padding-top: 27rem;
    font-size: 2.625rem;
    background-image: url(../images/sub/img_no_result_mo.png);
    background-size: 25rem auto;
  }
  .totalResultWrap .noResult .keywordInfo {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 6rem;
    padding: 2.5rem 2rem;
    border-radius: 1.5rem;
  }
  .totalResultWrap .noResult .keywordInfo .tit {
    width: 100%;
    padding: 1rem 0 2rem;
    padding-left: 4.5rem;
    font-size: 2rem;
    box-sizing: border-box;
  }
  .totalResultWrap .noResult .keywordInfo .tit::before {
    top: 0.5rem;
    left: 0;
    width: 3.5rem;
    height: 3.5rem;
  }
  .totalResultWrap .noResult .keywordInfo .tit br {
    display: none;
  }
  .totalResultWrap .noResult .keywordInfo .listStyle {
    width: 100%;
    padding: 1.5rem 0 0;
  }
  .totalResultWrap .noResult .keywordInfo .listStyle::before {
    top: 0;
    left: auto;
    width: 100%;
    height: 1px;
  }
}