@charset 'utf-8';
@import url('./common.css');


.subPageWrap {width: 100%; margin-top: 120px;}

/*subpage visual*/
.subVisualWrap {margin: 1rem auto; width: 100%; max-width: 95vw; border-radius: 1rem; height: 300px; overflow: hidden;}
.subVisualWrap .subVisual {text-align: center; background: url('../img/subPageBg_04.jpg') center center / cover no-repeat; width: 100%;  height: 100%; position: relative; }
.subVisualWrap .subVisual.ver1 {background-image: url('../img/subPageBg_01.jpg');}
.subVisualWrap .subVisual.ver2 {background-image: url('../img/subPageBg_02.jpg');}
.subVisualWrap .subVisual.ver3 {background-image: url('../img/subPageBg_03.jpg');}
.subVisualWrap .subVisual.ver4 {background-image: url('../img/subPageBg_04.jpg');}
.subVisualWrap .subVisual::after {content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.65); position: absolute; top: 0; left: 0; z-index: 0;}
.subVisualWrap .subVisual .subVisualText {width: 100%; height: 100%; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; color: #fff; gap:1.5rem; position: relative; z-index: 1;}
.subVisualWrap .subVisual .subVisualText .topArea {}
.subVisualWrap .subVisual .subVisualText .topArea .subject {font-size: 1.2rem; font-weight: 500; display: flex; flex-flow: column wrap; align-items: center; justify-content: flex-start;}
.subVisualWrap .subVisual .subVisualText .topArea .subject::after {content: ''; display: inline-block; width: 30px; height: 2px; background-color:#5893ff; margin:0.7rem 0}
.subVisualWrap .subVisual .subVisualText .topArea .mainTitle {font-size: 2.5rem; }
.subVisualWrap .subVisual .subVisualText .topArea .mainTitle sup {font-size: 0.7em; color: #ff9b00;}
.subVisualWrap .subVisual .subVisualText .topArea .detail {font-size: 0.9em; font-weight: 500; color:#d7d7d7;}
.subVisualWrap .subVisual .subVisualText .topArea .detail sup {font-size: 0.8em; color: #ff9b00;}
.subVisualWrap .subVisual .subVisualText .botArea {font-size: 1.1rem; color:#fff; line-height: 1.5;}

/*subpage subHeader*/
.subHeaderWrap {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid #b1b1b1; max-width: 1440px; margin: 0 auto;}
.subHeaderWrap .subTitle {position: relative; font-size: 1.7rem; font-family: 'Paperlogy'; font-weight: 700; display: inline-block; line-height: 1.2;}
.subHeaderWrap .subTitle::before {content: ''; display: inline-block; width: 8px; border-radius: 50%; aspect-ratio: 1; background-color: var(--main-blue); position: absolute; left: -10px; top: 0; }
.subHeaderWrap .breadcrumb {display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; gap: 1rem;  }
.subHeaderWrap .breadcrumb a {font-size: 0.9rem; color: #b1b1b1;font-weight: 500;}
.subHeaderWrap .breadcrumb a::after {content: "\f105"; font-family: 'fontAwesome'; font-weight: 500; font-size: 14px; margin-left: 1rem;}
.subHeaderWrap .breadcrumb a:last-child::after {margin-left: 0; display: none;}
.subHeaderWrap .breadcrumb a.home {font-size: 0.8em;}
.subHeaderWrap .breadcrumb a.active {color: var(--main-blue); font-weight: 600;}

.contentWrap {width: 100%;  margin: 0 auto; max-width: 1440px;}
.subPageWrap .section { margin-bottom: 4rem;}
.contentWrap .section:first-child {margin-top: 2rem;}
.sr-only {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0,0,0,0);  white-space: nowrap;  border: 0; }
.subPageWrap .section .secTitle {font-size: 1.5rem; font-weight: 700; color: #1d1d1d; margin-bottom: 1.5rem; position: relative;font-family: 'Paperlogy'; padding-left: 2.5rem;}
.subPageWrap .section .secTitle::before {content: ''; display: inline-block; background: url('../img/secTitle_img01.svg') center center / cover no-repeat; width: 34px; height: 12px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.subPageWrap .section .secTitle.ver2 {color: #fff;}
.subPageWrap .section .secTitle.ver2::before {background-image: url('../img/secTitle_img02.svg');}
.subPageWrap .section .secTitle.row {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; }
.subPageWrap .section .secTitle.row .unitArea {display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 1rem; font-family: 'pretendard'; font-size: 0.7em; font-weight: 500; color: #636363;}
.subPageWrap .section .secTitle.row .unitArea .unit::after {   content: '';  display: inline-block;  width: 1px;   height: 12px;  background-color: #bdbdbd;   margin-left: 1rem;}
.subPageWrap .section .secTitle.row .unitArea .unit:last-child::after {display: none;}
.subPageWrap .section .secTitle.row .unitArea .unit .num {font-weight: 700; font-size: 1.1em; margin-left: 0.3rem;}


/* 서브페이지 탭메뉴 */
.tapWrap {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;  padding: 0.5rem; border-radius: 5rem; background-color:#F2F2F2 ; margin: 1rem 0; }
.tapWrap .tabBtn {font-size: 1rem; font-weight: 500; color: #1d1d1d; padding: 0.7rem; border-radius: 5rem; transition: all 0.2s ease-in-out; display: inline-block; flex:1; text-align: center; cursor: pointer; position: relative;}
.tapWrap .tabBtn:hover {font-weight: 600;}
.tapWrap .tabBtn.active {background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.15); font-weight: 600;}
.tapWrap .tabBtn::after {content: ''; display: inline-block; width: 1px; height: 14px; background-color:#b1b1b1 ; position: absolute; right: 0;top: 50%;  transform: translate(50%, -50%);}
.tapWrap .tabBtn:last-child::after {display: none;}
.tapWrap .tabBtn.active::after {display: none;}
.tapWrap .tabBtn:has(+ .tabBtn.active)::after { display: none; }

/* 검색영역 */
.searchWrap {width: 100%; text-align: center; margin: 3rem 0;}
.searchWrap .searchTitle {width: auto; display: inline-block; font-size: 1.6rem; font-family: 'Paperlogy'; font-weight: 700; background: linear-gradient(to right, #0084FF, #25F0FF); position: relative;  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem;}
.searchWrap .searchTitle .img {display: inline-block; width: 77px; position: absolute; bottom: -2rem;}
.searchWrap .searchArea {display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 1rem;}
.searchWrap .searchArea .selectCate {padding: 0.5rem 3rem 0.5rem 1rem; height: 40px; border-radius: 3rem;border: 1px solid #b1b1b1; appearance: none;  -webkit-appearance: none;  -moz-appearance: none; background: url('../img/icon/angle-down-solid-full.svg') no-repeat right 1rem center / 16px;}
.searchWrap .searchArea .selectCate option {}
.searchWrap .searchArea .inputArea {width: 40%; position: relative; height: 40px; }
.searchWrap .searchArea .inputArea input {padding: 0.5rem 3rem 0.5rem 1rem; border-radius: 3rem; border: 1px solid #b1b1b1; width: 100%; height:100%;}
.searchWrap .searchArea .inputArea .searchBtn { position: absolute; top: 50%; transform: translate(0,-50%); right: 5px; width: 30px; aspect-ratio: 1; border-radius: 50%; background-color: var(--main-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; cursor: pointer;}
.searchWrap .searchArea .inputArea .resetBtn { position: absolute; top: 50%; transform: translate(0,-50%); right: 40px;  width: 30px; aspect-ratio: 1; border-radius: 50%; background-color: var(--main-grey); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; cursor: pointer;}

.resultWrap {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;}
.resultWrap .leftArea {display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start;}
.resultWrap .resultPage {display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 0.5rem; padding: 3px 1rem; background-color: #c7c7c7; border-radius: 2rem; font-size: 0.8rem; color: #fff;}
.resultWrap .resultPage .accent {font-weight: 700; }
.resultWrap .resultPage .normal {}
.resultWrap .resultPage .slash {}
.resultWrap .resultBox {font-weight: 500; color: #1d1d1d;display: flex;   align-items: center;}
.resultWrap .resultBox::after {content: ''; width: 1px; height: 14px; background-color: #b1b1b1; display: inline-block; margin: 0 1rem;}
.resultWrap .resultBox .num {padding: 4px 1rem; background-color: #002446; color: #fff; text-align: center; border-radius: 2rem; line-height: 0.9; display: inline-block; margin: 0 0.5rem; font-weight: 600;}
.resultWrap .resultSelect {padding: 0.3rem 2rem 0.3rem 1rem;  border-radius: 3rem;border: 1px solid #b1b1b1; appearance: none;  -webkit-appearance: none;  -moz-appearance: none; background: url('../img/icon/angle-down-solid-full.svg') no-repeat right 1rem center / 16px;}

/* 게시판 */
.boardTable { width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 2rem;}
.boardTable thead {width: 100%; background: #dbe8ff; }
.boardTable thead tr {}
.boardTable thead tr th {padding: 0.5rem; border-right: 1px solid #fff;}
.boardTable thead tr th:first-child {border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;}
.boardTable thead tr th:last-child {border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; border-right: none;}
.boardTable tbody {font-size: 0.9rem;}
.boardTable tbody tr {border-bottom: 1px solid var(--main-grey); width: 100%; text-align: center;}
.boardTable tbody tr td {padding: 1rem 0.5rem;}
.boardTable tbody tr td.title {text-align: left; font-weight: 500;}
.boardTable tbody tr td.title a {width: 100%;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis; transition: all 0.2s ease-in-out;}
.boardTable tbody tr td.title a:hover { color: #0084FF;}
.boardTable tbody tr td .icon {display: inline-flex; align-items: center; justify-content: center; width: 28px; aspect-ratio: 1; border-radius: 50%; color: #fff; background-color: var(--main-blue); }
.boardTable tbody tr td .icon i {font-size: 0.9rem;   line-height: 0.9;}
.boardTable .badge {font-size: 0.8rem; padding: 0.2rem 0.5rem; line-height: 1; text-align: center; background-color: var(--main-blue); color: #fff; border-radius: 2rem; font-weight: 500;}
.boardTable .badge01 {font-size: 0.8rem; padding: 0.2rem 0.5rem; line-height: 1; text-align: center;   border-radius: 2rem; font-weight: 500; background-color: #E2FFE3; color: #00A838;}
.boardTable .badge02 {font-size: 0.8rem; padding: 0.2rem 0.5rem; line-height: 1; text-align: center;  border-radius: 2rem; font-weight: 500; background-color: #CFE5FF; color: #003CFF;}
.boardTable .badge03 {font-size: 0.8rem; padding: 0.2rem 0.5rem; line-height: 1; text-align: center;  border-radius: 2rem; font-weight: 500;background-color: #FFCFDD; color: #C7003F;}
.boardTable .badge04 {font-size: 0.8rem; padding: 0.2rem 0.5rem; line-height: 1; text-align: center; border-radius: 2rem; font-weight: 500; background-color: #fff2e2; color: #ff7b00;}
.boardTable .badge05 {font-size: 0.8rem; padding: 0.2rem 0.5rem; line-height: 1; text-align: center; border-radius: 2rem; font-weight: 500; background-color: #d4f9ff; color: #207292;}
.boardTable .badge06 {font-size: 0.8rem; padding: 0.2rem 0.5rem; line-height: 1; text-align: center; border-radius: 2rem; font-weight: 500; background-color: #f2dcff; color: #77248b;}
.boardTable .badge07 {font-size: 0.8rem; padding: 0.2rem 0.5rem; line-height: 1; text-align: center;  border-radius: 2rem; font-weight: 500;background-color: #c2ffe1; color: #008765;}




/* 게시글 */
.boardWrap {width: 100%; margin-bottom: 1rem;}
.boardWrap .boardTitle {width: 100%; text-align: center; padding: 1rem; background-color: var(--main-navy); color: #fff; font-size: 1.1rem; border-radius: 0.5rem 0.5rem 0 0; font-weight: 500;}
.boardWrap .infoWrap {width: 100%; background-color: #F8F8F8; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap: 1.5rem; border-radius: 0 0 0.5rem 0.5rem; padding: 0.7rem;}
.boardWrap .infoWrap .infoBox {font-size: 0.9rem; position: relative;margin-right: 1.5rem;}
.boardWrap .infoWrap .infoBox::after {content: ''; display: inline-block; width: 1px; height: 14px; background-color: #b4b4b4; margin-left:  1.5rem;position: absolute;   top: 50%;  transform: translate(0, -50%);}
.boardWrap .infoWrap .infoBox:last-child::after {display: none;}
.boardWrap .infoWrap .infoBox:last-child {margin-right: 0;}
.boardWrap .infoWrap .infoBox .bold {font-weight: 600; color: var(--main-navy); display: inline-block; margin-right: 0.5rem;}
.boardWrap .boardCont {padding: 2rem;}
.boardWrap .boardCont .imgArea {width: 100%; text-align: center; margin-bottom: 2rem;}
.boardWrap .boardCont .imgArea img {}
.boardWrap .boardCont .textArea {font-size: 1rem; color: #1d1d1d;  line-height: 1.5;}
.boardWrap .attachWrap {width: 100%; display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: flex-start; border-radius: 0.5rem; overflow: hidden;}
.boardWrap .attachWrap .attachTitle {padding: 0.5rem 1rem; text-align: center; width: auto;background-color: var(--main-navy); color: #fff; font-weight: 600; font-size: 0.85rem; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;}
.boardWrap .attachWrap .attachTitle .icon {display: inline-block; margin-right: 5px;}
.boardWrap .attachWrap .fileName { background-color: #F8F8F8; padding: 0.7rem 1rem; flex: 1; text-align: left; }
.boardWrap .attachWrap .fileName .file { text-align: left; cursor: pointer; font-size: 0.85rem; display: block; margin-bottom: 0.5rem; position: relative; padding-left: 0.7rem; color: #1d1d1d; font-weight: 400; display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
.boardWrap .attachWrap .fileName .file::before {content: ''; width: 5px; aspect-ratio: 1; border-radius: 50%; background-color: var(--main-navy); display: inline-block;  position: absolute; top: 50%; left: 0; transform: translate(0, -50%);}
.boardWrap .attachWrap .fileName .file:last-child {margin-bottom: 0;}
.boardWrap .attachWrap .fileName .file .capa {font-size: 0.9em; color: #777;}
.boardWrap .attachWrap.ver2 {border-bottom: 3px solid var(--main-navy);}

/* 버튼 */
.buttonWrap {width: 100%; text-align: right; margin-top: 1rem;}
.toList {padding: 0.5rem 1.5rem; border-radius: 0.5rem; background-color: #fff; font-size: 0.9rem; border: 1px solid var(--main-grey);cursor: pointer; font-weight: 500;}
.toList:hover {background-color: #dfecff; color: var(--main-navy);}
.toList .icon {display: inline-block; margin-right: 5px; }

/* 서브페이지 페이지네이션 */
.pagination {margin: 0 auto; width: fit-content;  display: flex; align-items: center;  justify-content: center; gap: 1rem; padding: 0.7rem 1.5rem 0.7rem 0.9rem;  border-radius:3rem; background-color: #fff;  border: 1px solid #e9e9e9;  box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.pagination .pageNav { display: flex;  align-items: center;  gap: 0.5rem; }
.pagination .pageNav::after { content: '';  display: inline-block; width: 1px; height: 14px; background-color: #ddd; }
.pagination .pageBtn {  appearance: none;  border: 0;  background: transparent;  cursor: pointer; height: 34px;  min-width: 34px;  padding: 0 10px;  border-radius: 999px;  font-size: 14px;  font-weight: 600;  color: #222;  display: inline-flex;   align-items: center;  justify-content: center;  transition: all 0.2s ease-in-out;}
.pagination .pageBtn:hover {  background-color: #f3f6ff; }
.pagination .pageBtn:focus-visible { outline: 2px solid #3b82f6;  outline-offset: 2px;}
.pagination .pageBtn.arrow {  font-size: 18px;  font-weight: 700;  padding: 0 8px;  min-width: 34px; }
.pagination .pageBtn:disabled {  opacity: 0.35;  cursor: not-allowed; }
.pagination .pageDots {  display: inline-flex;  align-items: center;  height: 34px;  padding: 0 6px;  color: #777;  font-weight: 700; }
.pagination .pageBtn.active {  background-color: var(--main-blue);  color: #fff;  box-shadow: 0 6px 14px rgba(47,107,255,0.25);}
.pagination .pageBtn.active:hover {  background-color: var(--main-blue);}
.pagination .pageGoto {  display: inline-flex;  align-items: center;  gap: 10px;   white-space: nowrap; }
.pagination .gotoLabel { font-size: 13px;  font-weight: 700; letter-spacing: 0.02em;  color: #222;}
.pagination .gotoLabel.search { cursor: pointer;}
.pagination .gotoLabel.search .icon {display: inline-block; }
.pagination .gotoLabel.search:hover .icon {animation: arrowMove 0.8s ease-in-out infinite;}
@keyframes arrowMove {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}
.pagination .gotoInput { width: 66px;  height: 30px;  border-radius: 999px;  border: 1px solid #3b82f6;   padding: 0 12px;  font-size: 14px;  font-weight: 700;   text-align: center;  outline: none; }
.pagination .gotoInput:focus {  box-shadow: 0 0 0 4px rgba(59,130,246,0.18); }
.pagination .gotoInput::-webkit-outer-spin-button, .gotoInput::-webkit-inner-spin-button {  -webkit-appearance: none;  margin: 0; }
.pagination .gotoInput[type="number"] {  -moz-appearance: textfield;}

/* 갤러리 게시판 */
.galleryWrap {width: 100%;display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 2rem;}
.galleryWrap .gallBox {display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; background-color: #ECF2FE; cursor: pointer; border-radius: 1rem; overflow: hidden;} 
.galleryWrap .gallBox:hover {box-shadow: 0 12px 24px rgba(0,0,0,0.1);}
.galleryWrap .gallBox .imgArea {width: 30%;  overflow: hidden; border-radius: 1rem;}
.galleryWrap .gallBox .imgArea img {width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out;}
.galleryWrap .gallBox:hover .imgArea img {transform: scale(1.1);}
.galleryWrap .gallBox .textArea {padding: 1rem;  flex: 1; display: flex; flex-flow: column wrap; align-items: flex-start; justify-content: space-between; gap:0.5rem; }
.galleryWrap .gallBox .textArea .topArea .pinArea {margin-bottom: 0.5rem;}
.galleryWrap .gallBox .textArea .gallTitle {font-size: 1.3rem;font-weight:700;color:#1d1d1d; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis; min-height: 61px;}
.galleryWrap .gallBox .textArea .text {font-size:0.9rem;color:#555;display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis;}
.galleryWrap .gallBox .textArea .date {font-size:0.8rem;color:#555;}

.galleryWrap2 {width: 100%;display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 2rem;}
.galleryWrap2 .gallBox {display: flex; flex-flow: column wrap; align-items: stretch; justify-content: space-between;cursor: pointer; overflow: hidden; border-radius: 1rem; overflow: hidden;} 
.galleryWrap2 .gallBox:hover {box-shadow: 0 12px 24px rgba(0,0,0,0.1);}
.galleryWrap2 .gallBox .imgArea {width: 100%; aspect-ratio: 2/1;  overflow: hidden; border-radius: 1rem;}
.galleryWrap2 .gallBox .imgArea img {width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease-in-out;}
.galleryWrap2 .gallBox:hover .imgArea img {transform: scale(1.1);}
.galleryWrap2 .gallBox .textArea {padding: 1rem;  flex: 1; display: flex; flex-flow: column wrap; align-items: flex-start; justify-content: space-between; gap:0.5rem; }
.galleryWrap2 .gallBox .textArea .gallTitle {font-size: 1.3rem;font-weight:700;color:#1d1d1d; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;  text-overflow: ellipsis; min-height: 61px;}
.galleryWrap2 .gallBox .textArea .date {font-size:0.8rem;color:#555;}

/* 서브페이지 준비중 안내 */
.pageNotiWrap {width: 100%; margin: 0 auto; max-width: 600px; font-family: 'Paperlogy';}
.pageNotiWrap .imgArea {position: relative; bottom: -10px; z-index: 1;}
.pageNotiWrap .notiArea {border: 2px solid var(--main-blue); border-radius: 1rem; overflow: hidden; position: relative; z-index: 2;}
.pageNotiWrap .notiArea .menuBar {background-color: var(--main-blue); color: #fff; padding: 0.5rem; font-weight: 600; text-align: center; font-size: 1rem; }
.pageNotiWrap .notiArea .textArea {background-color: #fff; padding: 2rem; text-align: center; font-size: 1.2rem; color: #333; text-align: center; width: 100%;}
.pageNotiWrap .notiArea .textArea .notiDeco {width: 100%; margin:0 auto; font-size: 1em; background: linear-gradient(to right, #0084FF, #25F0FF); position: relative;  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content;}
.pageNotiWrap .notiArea .textArea .accent {font-size: 1.3em; font-weight: 700; margin:0.5rem 0;}
.pageNotiWrap .notiArea .textArea .normal {font-weight: 500; font-size: 1em; color: #707070;}

/* 각 페이지 간략 안내 */
.subNotiWrap {width: 100%; border-top: 1px solid var(--main-blue); border-bottom: 1px solid var(--main-blue); padding: 2rem 1rem; font-family: 'Paperlogy'; font-size: 1.2rem; overflow: hidden; margin-bottom: 3rem; }
.subNotiWrap .textArea { position: relative; width:  fit-content; margin: 0 auto;text-align: center; line-height: 1.5;}
.subNotiWrap .textArea .accent {color: var(--main-blue); font-weight: 700;}
.subNotiWrap .textArea .img {position: absolute; bottom: -2.5rem; right: -8vw;}
.subNotiWrap.ver2 {border-top: none; border-bottom: none;  background: linear-gradient(-45deg, #eef4ff, #f4feff); border-radius: 1rem;}

/* 지도 탭 컨텐츠 */
.stateWrap {position: relative; width: 100%;display: flex; flex-flow: row nowrap; align-items: flex-start; justify-content: space-between; gap: 4rem;}
.stateWrap .leftArea {position: -webkit-sticky;  position: sticky; top: 80px; z-index: 1; width: 375px; height: 556.53px; background: url('../img/mainMap.svg') center center / cover no-repeat;    margin-bottom: 70px;}
.stateWrap .leftArea .mapTextWrap {position: relative; width: 100%; height: 100%;}
.stateWrap .leftArea .mapTextWrap .tab-btn {position: absolute; font-size: 0.9rem; font-weight: 500; color: #002e6b; cursor: pointer;width: 50px; aspect-ratio: 1; border-radius: 50%; font-size: 0.9rem;}
.stateWrap .leftArea .mapTextWrap .tab-btn.active { background-color: var(--main-blue); color: #fff;  font-weight: bold;   z-index: 2; font-size: 1rem;  border: 5px solid #fff; box-shadow: 0px 2px 11px 6px rgba(0, 0, 0, 0.1);}
.stateWrap .tab-btn.active::after {content:'';  position: absolute;  left: 0;  right: 0;  margin: 0 auto;  width: 0;   height: 0; bottom: -11px;  border-top: 10px solid #ffffff;  border-left: 14px solid transparent;  border-right: 14px solid transparent;}
.stateWrap .leftArea .boardWrap {display: none;  position: absolute; bottom: -10vh; right: -2vw; border-radius: 1rem; overflow: hidden; border: 1px solid var(--main-navy);    width:auto;}
.stateWrap .leftArea .boardWrap.active {display: block; animation: fadeIn2 1s ease-in-out; }
@keyframes fadeIn2 {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
}
.stateWrap .leftArea .boardWrap .boardTitle {background-color: var(--main-navy); text-align: center; padding: 0.5rem; font-size: 1rem;}
.stateWrap .leftArea .boardWrap .boardTitle .icon {font-size: 0.8em; margin-right: 5px;}
.stateWrap .leftArea .boardWrap .boardArea {padding: 1rem; background-color: #fff;}
.stateWrap .leftArea .boardWrap .boardArea .text { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; margin-bottom: 7px; font-size: 0.9rem;}
.stateWrap .leftArea .boardWrap .boardArea .text::before {content: ''; width: 4px; aspect-ratio: 1; border-radius: 50%; background-color: var(--main-navy); margin-right: 5px;}
.stateWrap .leftArea .boardWrap .boardArea .text:last-child {margin-bottom: 0;}
.stateWrap .leftArea .boardWrap .boardArea .text .subject {width: fit-content; font-weight: 700; color: var(--main-navy); min-width: 90px; margin-right: 10px;}
.stateWrap .leftArea .boardWrap .boardArea .text .status {flex: 1;}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.stateWrap .rightArea {flex: 1; height: 100%; }
/* 서울 */
.stateWrap .tab-btn[data-city="SE"] {top: 94px;  left: 66px;}
.stateWrap .tab-btn[data-city="SE"].active {top: 72px; }
/* 부산 */
.stateWrap .tab-btn[data-city="BS"] {    bottom: 154px;  right: 80px;}
.stateWrap .tab-btn[data-city="BS"].active {    bottom: 170px;  }
/* 대구 */
.stateWrap .tab-btn[data-city="DG"] {bottom: 228px;  right: 121px;}
.stateWrap .tab-btn[data-city="DG"].active {bottom: 250px;}
/* 인천 */
.stateWrap .tab-btn[data-city="IC"] {top: 106px;  left: 28px;}
.stateWrap .tab-btn[data-city="IC"].active { top: 67px;  left: 36px;}
/* 광주 */
.stateWrap .tab-btn[data-city="GJ"] {    bottom: 152px;  left: 51px;}
.stateWrap .tab-btn[data-city="GJ"].active {    bottom: 180px;}
/* 대전 */
.stateWrap .tab-btn[data-city="DJ"] {top: 230px;  left: 103px;}
.stateWrap .tab-btn[data-city="DJ"].active {top: 200px; left: 108px;}
/* 울산 */
.stateWrap .tab-btn[data-city="US"] {    bottom: 199px;  right: 58px;}
.stateWrap .tab-btn[data-city="US"].active {    bottom: 221px;}
/* 세종 */
.stateWrap .tab-btn[data-city="SJ"] {    top: 194px;  left: 85px;}
.stateWrap .tab-btn[data-city="SJ"].active {    top: 172px; left: 92px;}
/* 경기 */
.stateWrap .tab-btn[data-city="GG"] {    top: 120px;  left: 105px;}
.stateWrap .tab-btn[data-city="GG"].active {    top: 98px;}
/* 강원 */
.stateWrap .tab-btn[data-city="GW"] {    top: 68px;  right: 149px;}
.stateWrap .tab-btn[data-city="GW"].active {    top: 46px;}
/* 충북 */
.stateWrap .tab-btn[data-city="CB"] {    top: 167px;  left: 129px;}
.stateWrap .tab-btn[data-city="CB"].active {    top: 145px;}
/* 충남 */
.stateWrap .tab-btn[data-city="CN"] {    top: 214px;  left: 48px;}
.stateWrap .tab-btn[data-city="CN"].active {    top: 192px;}
/* 전북 */
.stateWrap .tab-btn[data-city="JB"] {    bottom: 214px;  left: 77px;}
.stateWrap .tab-btn[data-city="JB"].active {    bottom: 236px;}
/* 전남 */
.stateWrap .tab-btn[data-city="JN"] {    bottom: 123px;  left: 83px;}
.stateWrap .tab-btn[data-city="JN"].active {    bottom: 146px;}
/* 경북 */
.stateWrap .tab-btn[data-city="GB"] {    bottom: 298px;  right: 108px;}
.stateWrap .tab-btn[data-city="GB"].active {    bottom: 320px;}
/* 경남 */
.stateWrap .tab-btn[data-city="GN"] {bottom: 177px;  right: 138px;}
.stateWrap .tab-btn[data-city="GN"].active {bottom: 199px;}
/* 제주 */
.stateWrap .tab-btn[data-city="JJ"] {    bottom: -5px;  left: 6px;}
.stateWrap .tab-btn[data-city="JJ"].active {    bottom: 16px;}


.stateWrap .tab-content {  display: none; width: 100%; flex-flow: column wrap; align-items: stretch; justify-content: space-between; gap: 1rem;}
.stateWrap .tab-content.active {  display: flex;  animation: fadeIn 1s ease-in-out;  }
.stateWrap .tab-content .tabBox {padding: 2rem; border-radius: 0.5rem; background-color: #F9F9F9; box-shadow: 1px 2px 8px 2px rgba(0, 0, 0, 0.1); margin-bottom: 1rem; display: flex; flex-flow: column wrap; align-items: stretch; justify-content: flex-start; gap: 1.5rem; font-size:1.1rem;}
.stateWrap .tab-content .tabBox:last-child {margin-bottom: 0;}

.stateWrap .tab-content .unitWrap {width: 100%;  color: #36435E;}
.stateWrap .tab-content .planTitle {font-size: 1.25rem; font-weight: 700; border-radius: 0.5rem; width: 100%; text-align: center; padding: 0.4rem; box-shadow: 1px 2px 8px 2px rgba(0, 0, 0, 0.1);}
.stateWrap .tab-content .unitWrap .unitTitle {font-weight: 600; font-size: 1em;   padding-left: 10px;  margin-bottom: 0.5rem;   line-height: 1.1;border-left: 3px solid ;}
.stateWrap .tab-content .unitWrap .unitSlogan {font-size: 0.95em; font-weight: 600; width: fit-content; background: linear-gradient(180deg, transparent 60%, #ddd 30%); padding: 0 4px; margin-bottom: 10px;}
.stateWrap .tab-content .unitWrap .unitList {}
.stateWrap .tab-content .unitWrap .unitList .listItem {display: flex; width: 100%; flex-flow: row nowrap; align-items: flex-start; justify-content: flex-start; gap: 10px; margin-bottom:6px;}
.stateWrap .tab-content .unitWrap .unitList .listItem:last-child {margin-bottom: 0;}
.stateWrap .tab-content .unitWrap .unitList .listItem .icon {width: 16px; height: 16px; margin-top: 3px;}
.stateWrap .tab-content .unitWrap .unitList .listItem .icon img {}
.stateWrap .tab-content .unitWrap .unitList .listItem .listText {flex: 1; font-size: 16px;}
.stateWrap .tab-content .unitWrap .unitList .listItem .listText .text {font-size: 1em; color: #36435E; font-weight: 500;}
.stateWrap .tab-content .unitWrap .unitList .listItem .listText sup {color:#256EF4; font-weight: 600;}
.stateWrap .tab-content .unitWrap .unitList .listItem .listText .accent {color:#256EF4; font-weight: 600;}
.stateWrap .tab-content .unitWrap .unitList .listItem .listText .caption {font-size: 0.85em; line-height: 1.4;}
.stateWrap .tab-content .unitWrap .planWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content:flex-start; gap: 1rem;}
.stateWrap .tab-content .unitWrap .planWrap.ver1 .planBox {}
.stateWrap .tab-content .unitWrap .planWrap.ver2 .planBox {width: calc( ( 100% - 1rem ) / 2 );}
.stateWrap .tab-content .unitWrap .planWrap.ver3 .planBox {width: calc( ( 100% - 2rem ) / 3 );}
.stateWrap .tab-content .unitWrap .planWrap.ver4 .planBox {width: calc( ( 100% - 3rem ) / 4 );}
.stateWrap .tab-content .unitWrap .planWrap .planBox.flex {width: auto; flex: 1;}
.stateWrap .tab-content .unitWrap .planWrap .planBox {display: flex; flex-flow: column wrap; align-items: stretch; justify-content: flex-start; gap:10px;}
.stateWrap .tab-content .unitWrap .planWrap .planBox .titleArea {width: 100%; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap:6px; font-size:17px; color: #36435E; border-radius: 8px; padding:8px 0;}
.stateWrap .tab-content .unitWrap .planWrap .planBox .titleArea .title {font-size: 1em; font-weight: 700; word-break: keep-all; text-align: center;}
.stateWrap .tab-content .unitWrap .planWrap .planBox .titleArea .icon {width: 20px; height: 20px;}
.stateWrap .tab-content .unitWrap .planWrap .planBox .titleArea .icon img {}
.stateWrap .tab-content .unitWrap .planWrap .planBox .planList {font-size: 0.85em;}
.stateWrap .tab-content .unitWrap .planWrap .planBox .planList .planItem {font-weight: 500; display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; gap: 5px; margin-bottom: 4px;}
.stateWrap .tab-content .unitWrap .planWrap .planBox .planList .planItem:last-child {margin-bottom: 0;}
.stateWrap .tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {display: inline-block; width: 5px; height: 5px;  border-radius: 50%; margin-top: 8px;}
.stateWrap .tab-content .unitWrap .planWrap .planBox .planList .planItem .text {flex: 1;}

/* 지역별 컬러 */
.stateWrap #SE.tab-content .planTitle {color: #F8496C; background-color: #ffebef; }
.stateWrap #SE.tab-content .unitWrap .unitTitle {color: #d72c4f; border-color:#d72c4f; }
.stateWrap #SE.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(26%) sepia(61%) saturate(2224%) hue-rotate(324deg) brightness(95%) contrast(95%);}
.stateWrap #SE.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffebef 30%);}
.stateWrap #SE.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffebef; }
.stateWrap #SE.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #d72c4f;}

.stateWrap #BS.tab-content .planTitle {color: #E6007E;  background-color: #ffebf6;}
.stateWrap #BS.tab-content .unitWrap .unitTitle {color: #bf0069; border-color:#bf0069; }
.stateWrap #BS.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(15%) sepia(100%) saturate(3610%) hue-rotate(315deg) brightness(77%) contrast(111%);}
.stateWrap #BS.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffebf6 30%);}
.stateWrap #BS.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffebf6; }
.stateWrap #BS.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #bf0069;}

.stateWrap #DG.tab-content .planTitle {color: #C00000; background-color: #ffeaea; }
.stateWrap #DG.tab-content .unitWrap .unitTitle {color: #910000; border-color:#910000; }
.stateWrap #DG.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(9%) sepia(88%) saturate(5369%) hue-rotate(2deg) brightness(79%) contrast(112%);}
.stateWrap #DG.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffeaea 30%);}
.stateWrap #DG.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffeaea; }
.stateWrap #DG.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #910000;}

.stateWrap #IC.tab-content .planTitle {color: #2D2B6F; background-color: #eae9ff; }
.stateWrap #IC.tab-content .unitWrap .unitTitle {color: #0d0b4b; border-color:#0d0b4b; }
.stateWrap #IC.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(9%) sepia(54%) saturate(3041%) hue-rotate(232deg) brightness(92%) contrast(112%);}
.stateWrap #IC.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #eae9ff 30%);}
.stateWrap #IC.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #eae9ff; }
.stateWrap #IC.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #0d0b4b;}

.stateWrap #GJ.tab-content .planTitle {color: #E8340C; background-color: #ffe7e1; }
.stateWrap #GJ.tab-content .unitWrap .unitTitle {color: #a11e00; border-color:#a11e00; }
.stateWrap #GJ.tab-content .unitWrap .unitList .listItem .icon img {filter:invert(18%) sepia(99%) saturate(1762%) hue-rotate(355deg) brightness(92%) contrast(112%);}
.stateWrap #GJ.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffe7e1 30%);}
.stateWrap #GJ.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffe7e1; }
.stateWrap #GJ.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #a11e00;}

.stateWrap #DJ.tab-content .planTitle {color: #00763B; background-color: #ebfff5; }
.stateWrap #DJ.tab-content .unitWrap .unitTitle {color: #004623; border-color:#004623; }
.stateWrap #DJ.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(18%) sepia(31%) saturate(3216%) hue-rotate(125deg) brightness(87%) contrast(101%);}
.stateWrap #DJ.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ebfff5 30%);}
.stateWrap #DJ.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ebfff5; }
.stateWrap #DJ.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #004623;}

.stateWrap #US.tab-content .planTitle {color: #B71F60; background-color: #ffeef6; }
.stateWrap #US.tab-content .unitWrap .unitTitle {color: #80063b; border-color:#80063b; }
.stateWrap #US.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(13%) sepia(55%) saturate(3277%) hue-rotate(313deg) brightness(96%) contrast(112%);}
.stateWrap #US.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffeef6 30%);}
.stateWrap #US.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffeef6; }
.stateWrap #US.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #80063b;}

.stateWrap #SJ.tab-content .planTitle {color: #AE125C; background-color: #ffedf6; }
.stateWrap #SJ.tab-content .unitWrap .unitTitle {color: #7e003b; border-color:#7e003b; }
.stateWrap #SJ.tab-content .unitWrap .unitList .listItem .icon img {filter:invert(9%) sepia(80%) saturate(3601%) hue-rotate(317deg) brightness(100%) contrast(111%);}
.stateWrap #SJ.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffedf6 30%);}
.stateWrap #SJ.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffedf6; }
.stateWrap #SJ.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #7e003b;}

.stateWrap #GG.tab-content .planTitle {color: #004097; background-color: #e9f2ff; }
.stateWrap #GG.tab-content .unitWrap .unitTitle {color: #002a66; border-color:#002a66; }
.stateWrap #GG.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(13%) sepia(32%) saturate(5060%) hue-rotate(204deg) brightness(92%) contrast(105%);}
.stateWrap #GG.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #e9f2ff 30%);}
.stateWrap #GG.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #e9f2ff; }
.stateWrap #GG.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #002a66;}

.stateWrap #GW.tab-content .planTitle {color: #E60A34; background-color: #ffeaee; }
.stateWrap #GW.tab-content .unitWrap .unitTitle {color: #a8001f; border-color:#a8001f; }
.stateWrap #GW.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(13%) sepia(54%) saturate(6193%) hue-rotate(339deg) brightness(85%) contrast(112%);}
.stateWrap #GW.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffeaee 30%);}
.stateWrap #GW.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffeaee; }
.stateWrap #GW.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #a8001f;}

.stateWrap #CB.tab-content .planTitle {color: #724598; background-color: #f8eeff; }
.stateWrap #CB.tab-content .unitWrap .unitTitle {color: #470081; border-color:#470081; }
.stateWrap #CB.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(8%) sepia(80%) saturate(5140%) hue-rotate(273deg) brightness(94%) contrast(116%);}
.stateWrap #CB.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #f8eeff 30%);}
.stateWrap #CB.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #f8eeff; }
.stateWrap #CB.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #470081;}

.stateWrap #CN.tab-content .planTitle {color: #FE4101; background-color: #ffe7e0; }
.stateWrap #CN.tab-content .unitWrap .unitTitle {color: #a02800; border-color:#a02800; }
.stateWrap #CN.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(16%) sepia(100%) saturate(2826%) hue-rotate(16deg) brightness(91%) contrast(101%);}
.stateWrap #CN.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffe7e0 30%);}
.stateWrap #CN.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffe7e0; }
.stateWrap #CN.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #a02800;}

.stateWrap #JB.tab-content .planTitle {color: #014594; background-color: #e3f0ff; }
.stateWrap #JB.tab-content .unitWrap .unitTitle {color: #002a5a; border-color:#002a5a; }
.stateWrap #JB.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(11%) sepia(75%) saturate(2343%) hue-rotate(197deg) brightness(96%) contrast(104%);}
.stateWrap #JB.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #e3f0ff 30%);}
.stateWrap #JB.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #e3f0ff; }
.stateWrap #JB.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #002a5a;}

.stateWrap #JN.tab-content .planTitle {color: #F47520; background-color: #ffefe4; }
.stateWrap #JN.tab-content .unitWrap .unitTitle {color: #b44800; border-color:#b44800; }
.stateWrap #JN.tab-content .unitWrap .unitList .listItem .icon img {filter:  invert(40%) sepia(94%) saturate(6915%) hue-rotate(34deg) brightness(99%) contrast(103%);}
.stateWrap #JN.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffefe4 30%);}
.stateWrap #JN.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffefe4; }
.stateWrap #JN.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #b44800;}

.stateWrap #GB.tab-content .planTitle {color: #0068B7; background-color: #e2f2ff; }
.stateWrap #GB.tab-content .unitWrap .unitTitle {color: #003e6d; border-color:#003e6d; }
.stateWrap #GB.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(18%) sepia(67%) saturate(1625%) hue-rotate(181deg) brightness(93%) contrast(104%);}
.stateWrap #GB.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #e2f2ff 30%);}
.stateWrap #GB.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #e2f2ff; }
.stateWrap #GB.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #003e6d;}

.stateWrap #GN.tab-content .planTitle {color: #EA5529; background-color: #ffe6df; }
.stateWrap #GN.tab-content .unitWrap .unitTitle {color: #9c3718; border-color:#9c3718; }
.stateWrap #GN.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(22%) sepia(48%) saturate(2400%) hue-rotate(350deg) brightness(99%) contrast(92%);}
.stateWrap #GN.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffebef 30%);}
.stateWrap #GN.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffebef; }
.stateWrap #GN.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #9c3718;}

.stateWrap #JJ.tab-content .planTitle {color: #E27C00; background-color: #ffebd4; }
.stateWrap #JJ.tab-content .unitWrap .unitTitle {color: #915000; border-color:#915000; }
.stateWrap #JJ.tab-content .unitWrap .unitList .listItem .icon img {filter: invert(24%) sepia(88%) saturate(2112%) hue-rotate(34deg) brightness(93%) contrast(103%);}
.stateWrap #JJ.tab-content .unitWrap .unitSlogan {background: linear-gradient(180deg, transparent 60%, #ffebd4 30%);}
.stateWrap #JJ.tab-content .unitWrap .planWrap .planBox .titleArea {background-color: #ffebd4; }
.stateWrap #JJ.tab-content .unitWrap .planWrap .planBox .planList .planItem .dot {background-color: #915000;}

.stateWrap .tab-content .nameWrap {width: 100%; font-size: 1rem; position: relative; padding-bottom: 1rem; border-bottom: 1px solid #B5B5B5; margin-bottom:1rem;}
.stateWrap .tab-content .nameWrap .title {font-size: 1.5em; display: inline-flex; align-items: center; justify-content: flex-end; font-weight: 700; margin-bottom: 5px;}
.stateWrap .tab-content .nameWrap .title .accent {font-weight: 700; color: var(--main-blue);}
.stateWrap .tab-content .nameWrap .subText {font-size: 1em; font-weight: 500; }
.stateWrap .tab-content .nameWrap .directBtn {font-size: 0.9em; color: #fff; width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(-45deg, #0084FF, #00D8C6); position: absolute; right: 0; top:0;}
.stateWrap .tab-content .contWrap {width: 100%; color: #36435E; font-weight: 500;}
.stateWrap .tab-content .contWrap .contTitle {font-weight: 600; font-size: 1.1rem; color: var(--main-navy); border-left: 3px solid var(--main-navy); padding-left: 10px; margin-bottom: 0.5rem; line-height: 1.1;}
.stateWrap .tab-content .contWrap .visionArea {width: 100%;}
.stateWrap .tab-content .contWrap .visionArea .textArea { margin-left:13px; line-height:1.4; font-size: 1.2rem; font-weight: 700; background: linear-gradient(-45deg, #0084FF, #0beeaa);  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; white-space: pre-line; margin-top: -1.5rem;}
/* .stateWrap .tab-content .contWrap .visionArea .textArea {font-size: 1rem; padding: 0 4px; font-weight: 600; color: var(--main-blue); background: linear-gradient(transparent 60%, #FFFCA9 30%); width: fit-content;} */


.stateWrap .tab-content .contWrap { display:flex; flex-flow:column; gap:1.25rem; }
.stateWrap .tab-content .contWrap .rowWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 1.5rem;}
.stateWrap .goalWrap {flex: 1;   display: flex;   flex-flow: column wrap;  align-items: stretch;  justify-content: flex-start;}
.stateWrap .goalWrap .goalArea {flex: 1; display:flex; flex-flow:column wrap; gap:0.75rem; counter-reset: goal;}
.stateWrap .goalWrap .goalArea .goalBox {flex:1; display:flex; flex-flow: row nowrap; align-items:stretch; justify-content: flex-start; gap:0.9rem; background-color:#fff; border-radius:0.5rem; box-shadow:0 1px 0 rgba(0,0,0,0.04); counter-increment: goal;}
.stateWrap .goalWrap .goalArea .goalBox .num {padding: 0.7rem; border-radius:0.5rem; background-color: #C3E0FC; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:1rem; }
.stateWrap .goalArea .goalBox .num::before { content:counter(goal,decimal-leading-zero); }
.stateWrap .goalWrap .goalArea .goalBox .text { font-size:0.95rem; font-weight:600; color:#36435E; line-height:1.3;     display: flex;  align-items: center; padding: 0.5rem 0.5rem 0.5rem 0;}

.stateWrap .proWrap {flex: 1;   display: flex;   flex-flow: column wrap;  align-items: stretch;  justify-content: flex-start;}
.stateWrap .proWrap .proArea {display:flex; flex-flow:column wrap; gap:0.25rem; counter-reset: project; align-items: stretch; justify-content: flex-start; flex: 1;}
.stateWrap .proWrap .proArea .proBox { flex:1; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.6rem 0.4rem; border-bottom:1px dotted #9e9e9e; counter-increment: project; }
.stateWrap .proWrap .proArea .proBox .text { display:inline-flex; align-items:center; gap:0.6rem; font-size:0.95rem; font-weight:600; color:#36435E; line-height:1.2; }
.stateWrap .proWrap .proArea .proBox .text .num {color:var(--main-blue); font-weight:800; font-size:0.9rem; }
.stateWrap .proArea .proBox .num::before { content:counter(project,decimal-leading-zero); }
.stateWrap .proWrap .proArea .proBox .icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; opacity:0.95; }
.stateWrap .proWrap .proArea .proBox .icon img { width:100%; height:100%; object-fit:contain; }

.stateWrap .tab-content .contWrap .rowWrap.ver2 {flex-flow: column wrap;}
.stateWrap .proWrap.ver2 .proArea {width: 100%; gap: 0.7rem 1rem; flex-flow: row wrap;}
.stateWrap .proWrap.ver2 .proArea .proBox {flex: unset; width: calc( ( 100% - 1rem ) / 2 ); padding: 0 0.4rem 0.6rem;}

.stateWrap .statusArea { width:100%;}
.stateWrap .statusArea .contTitle {    display: flex;    flex-flow: row wrap;   align-items: center;   justify-content: space-between;}
.stateWrap .statusArea .contTitle .label {font-size: 0.7em; font-weight: 500; color:#707070;}
.stateWrap .statusArea .statusGrid { display:flex;flex-flow: row wrap; justify-content: space-between; gap:1rem; align-items:stretch; }
.stateWrap .statusArea .statusItem {flex:1; display:flex; flex-flow:column wrap; align-items:stretch; justify-content:center; gap:0.5rem; }
.stateWrap .statusArea .statusItem:last-child { border-right:none; }
.stateWrap .statusArea .statusItem .label { font-size:1.1rem; color:#707070; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding-bottom: 0.3rem; border-bottom: 1px solid #ccc;}
.stateWrap .statusArea .statusItem .label .icon {}
.stateWrap .statusArea .statusItem .value { font-size:1.35rem; font-weight:800; color:#1f2d4d; width: 100%; text-align: right; }
.stateWrap .statusArea .statusItem .value a {font-size: 0.7em; color: #A4A4A4; margin-left: 3px; display: inline-block;}

.stateWrap .quickArea { width:100%;}
.stateWrap .quickArea .quickGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.75rem; }
.stateWrap .quickArea .quickBtn { border:1px solid rgba(0,0,0,0.10); background-color:#fff; border-radius:0.5rem; height:42px; display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:0.9rem; font-weight:700; color:#2c3a57; transition:background-color .15s ease,border-color .15s ease,transform .15s ease; }
.stateWrap .quickArea .quickBtn .icon {font-size: 0.8rem; display:inline-flex; align-items:center; justify-content:center;  }
.stateWrap .quickArea .quickBtn:hover { background-color:rgba(0,132,255,0.08); border-color:rgba(0,132,255,0.35); transform:translateY(-1px); }

.show550 {display: none;}

/* 지역 과제 탭 */
.stateTables .tabPanel { display:none; }
.stateTables .tabPanel.active { display:block;  animation: fadeIn 1s ease-in-out;  }
.stateTables .nameWrap {padding: 1.5rem 1rem; background: url('../img/subPageTitleBg01.jpg') center center / cover no-repeat; color: #fff; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; font-size: 1.5rem; border-radius: 1rem; margin: 2rem 0;}
.stateTables .nameWrap .titleArea {display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap: 1rem;     flex: 1;}
.stateTables .nameWrap .titleArea .title {font-size: 1em; margin-right: 1rem; font-weight: 700;}
.stateTables .nameWrap .titleArea .unit {font-size: 0.7em; font-weight: 500; color: #f7f7f7;}
.stateTables .nameWrap .titleArea .unit .num {font-size: 1.2em; display: inline-block; margin-left: 10px; margin-right: 5px; font-weight: 700;}
.stateTables .nameWrap .titleArea .unit::after {content:''; display: inline-block; width: 1px; height: 12px; background-color: #dfdfdf;  margin-left: 1rem;}
.stateTables .nameWrap .titleArea .unit:last-child::after {display: none;}
.stateTables .nameWrap .home {border: 1px solid #fff; border-radius: 8px; padding: 0.5rem; color: #fff; font-size: 0.6em; cursor: pointer; font-weight: 600; width: auto;}
.stateTables .nameWrap .home:hover {background-color: #fff; color: var(--main-blue);}
.tableWrap {width:100%;overflow:auto;  font-size: 1rem; }
.riseTable {width:100%; min-width:729px; border-collapse:separate;border-spacing:0;}
.riseTable th {padding: 1rem 0.5rem;}
.riseTable td {padding:1rem 0.5rem;border-bottom:1px solid  #ddd;;border-right:1px solid  #ddd;}
.riseTable td:last-child {border-right: none;}
.riseTable thead {background: linear-gradient(45deg, #f1faff, #c8e5ff); }
.riseTable thead th {color:var(--main-navy); font-weight:800;text-align:center;vertical-align:middle;white-space:nowrap;}
.riseTable .projectCell {width:15%; font-size: 1.1em; text-align:center;font-weight:800;color:var(--main-blue);vertical-align:middle; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; word-break: keep-all;}
.riseTable .taskCell {width:15%; text-align: center; font-weight:600;}
.riseTable .metricCell {width:25%;}
.riseTable .yearCell {text-align:right; color:var(--main-navy); font-weight:500;vertical-align:middle;}
.riseTable .taskBadge {display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:rgba(0,0,0,0.22);color:#fff;font-weight:600;margin-bottom:5px;}
.riseTable .taskTitle {display:block;line-height:1.2; word-break: keep-all;}
.riseTable .groupSep td,.groupSep th {border-top:2px solid rgba(0,0,0,0.08);}

/* 연도별 탭 */
.yearTables .tabPanel { display: none; transition: all 0.3s ease-in-out; opacity: 0;}
.yearTables .tabPanel.active { display: block; opacity: 1; text-align: center; width: 100%;   animation: fadeIn 1s ease-in-out;  }
.yearTables .tabPanel .yearNoti {width: 100%; font-size: 0.9rem;}
.yearTables .tabPanel .yearNoti .noti {width: 100%; border-left: 3px solid; padding-left: 5px; text-align: left; font-weight: 600; margin-bottom: 0.5rem;}
.yearTables .tabPanel .yearNoti .noti:last-child {margin-bottom: 0;}
.yearTables .tabPanel .yearNoti .noti.color01 {color:#1C86FF; border-color:#1C86FF;}
.yearTables .tabPanel .yearNoti .noti.color02 {color: #004EA8; border-color: #004EA8;}
.yearTables .tabPanel .yearNoti .noti.color03 {color:#00244D; border-color:#00244D;}
.yearTables .tabPanel .imgArea {margin-bottom: 3rem;}
.yearTableWrap {width:100%; overflow:auto;   font-size: 1rem; }
.yearTable {width:100%; min-width: 729px; border-collapse:separate;border-spacing:0; font-size: 1rem; color: #3a3a3a; }
.yearTable th {padding: 1rem 0.5rem;}
.yearTable td {padding:1rem 0.5rem;border-bottom:1px solid  #ddd;;border-right:1px solid  #ddd;}
.yearTable td:last-child {border-right: none;}
.yearTable thead {background: linear-gradient(45deg, #f1faff, #c8e5ff); }
.yearTable thead th {color:var(--main-navy); font-weight:800;text-align:center;vertical-align:middle;white-space:nowrap;}
.yearTable .typeCell {}
.yearTable .noCell {}
.yearTable .foundCell {}
.yearTable .nameCell {width: 15%; font-weight: 600; transition: all 0.2s ease-in-out;}
.yearTable .nameCell:hover {color: var(--main-blue);}
.yearTable .nameCell::after {content:'\f0c1'; font-family: 'fontAwesome'; font-size: 0.7em; color: #888; display: inline-flex;  margin-left: 5px; cursor: pointer;}
.yearTable .nameCell:hover::after {color: var(--main-blue);}
.yearTable .visionCell {width: 40%; word-break: keep-all;}
.yearTable .addrCell {width: 20%; word-break: keep-all;}
.yearTable .yrCell {width: 7%; text-align: center;}

/* 테이블 캡션 */
.tableCaption {width: 100%; font-size: 0.85rem; font-weight: 500; text-align: right; margin: 0.5rem 0;}
.tableCaption .caption {margin-bottom: 8px; line-height: 1;}
.tableCaption .caption:last-child {margin-bottom: 0;}
.tableCaption .caption .icon {font-size: 0.8em; display: inline-block; color: #ff8800;}

/*준비중 알림 섹션*/
.alertWrap {width: 100%; background-color: #fff; border-radius: 1rem; padding: 2rem; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; gap: 2rem; border: 1px solid #ddd; color: #333;}
.alertWrap .textArea {font-family: 'Paperlogy'; font-size: 1.3rem; font-weight: 500;}
.alertWrap .textArea .accent {font-weight: 700; color: var(--main-blue);}
.alertWrap .textArea .text {margin-bottom: 0.3rem;}
.alertWrap .textArea .text:last-child {margin-bottom: 0;}
.alertWrap .imgArea {}
.alertWrap .imgArea img {max-width: 400px;}
.alertWrap.ver2 {padding: 3rem 1rem;}
.alertWrap.ver2 .textArea {text-align: center;}



/* 참여대학 페이지  */
.univBody {}
.univBody .subNotiWrap {margin-bottom: 1rem;}
.univBody .subHeaderWrap {justify-content: center;}
.univBody .univWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: flex-start; gap: 1.5rem; margin-top: 1.5rem;}
.univBody .univWrap .univBox {width: calc( ( 100% - 6rem ) / 5 ); padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; text-align: center; transition: all 0.2s ease-in-out;}
.univBody .univWrap .univBox:hover {background-color: #ebf5ff;}
.univBody .univWrap .univBox .logoArea {width: 100%; height: 80px; display: inline-flex; align-items: center; justify-content: center;}
.univBody .univWrap .univBox .logoArea img {max-height: 60px;}
.univBody .univWrap .univBox .textArea {width: 100%; font-size: 1rem; font-weight: 500; color: #333; padding-top: 0.5rem; border-top: 1px solid #ddd; }
.univBody .univWrap .univBox:hover .textArea {font-weight: 700;}

/* RISE 정책소개 */
.riseIntroWrap {width: 100%; position: relative; font-size: 1.2rem; }
.riseIntroWrap .riseTitle {font-size: 1em; color: #fff; background: linear-gradient(45deg, #02D0DA, #1947FF); padding: 0.3rem 2rem; border-radius: 4rem; width: fit-content; position: absolute; left: 50%; top: -23px; transform: translate(-50%,0);} 
.riseIntroWrap .riseTitle .accent {font-size: 1.2em; font-weight: 700;}
.riseIntroWrap .riseText {width: 100%; padding: 2.5rem 1.5rem 1.5rem; background-color: #E9F1FF; color: #333; line-height: 1.5; border-radius: 1rem; text-align: center; font-weight: 600;}
.riseIntroWrap .riseText .accent {color: var(--main-blue); background: linear-gradient(transparent 60%, #FFFFBD 30%); padding: 0 5px; font-weight: 700;}

.riseWrap .visionWrap {width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;}
.riseWrap .visionWrap .visionBox {width: 20%; aspect-ratio: 1; display: inline-flex; flex-flow: column wrap; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid #BBD2FC; border-radius: 50%;}
.riseWrap .visionWrap .visionBox.ver2 {border-color: #256EF4; }
.riseWrap .visionWrap .visionBox:nth-child(2) {margin-left: -2rem;}
.riseWrap .visionWrap .visionBox:nth-child(3) {margin-left: -2rem;}
.riseWrap .visionWrap .visionBox.line {width: auto; flex: 1; border: none; aspect-ratio: unset; height: 1px; border-bottom: 2px dotted #ddd; border-radius: 0; position: relative; }
.riseWrap .visionWrap .visionBox.line .arrow {font-size: 2.5em; color: #bebebe; margin-bottom: -5px; animation: fadeIn3 2s ease-in-out infinite; }
@keyframes fadeIn3 {
    0% { opacity: 0; transform: translateX(0px); }
    50% { opacity: 1; transform: translateX(14px); }
    100% { opacity: 0; transform: translateX(0px); }
}
.riseWrap .visionWrap .visionBox.line .dot {width: 14px; height: 14px; border-radius: 50%;  position: absolute;}
.riseWrap .visionWrap .visionBox.line .dot.no1 {background-color: #BBD2FC; left: -7px;}
.riseWrap .visionWrap .visionBox.line .dot.no2 {background-color: #256EF4; right: -7px;}
.riseWrap .visionWrap .visionBox .icon {}
.riseWrap .visionWrap .visionBox .vText {background-color: #BBD2FC; padding: 4px 1rem; font-weight: 600; font-size: 1.1rem; color: #fff; border-radius: 2rem; text-align: center;}
.riseWrap .visionWrap .visionBox .vText.ver2 {background-color:unset;color: #256EF4; padding: 0; border-radius: 0; font-weight: 800;}

.contentWrap.riseWrap {max-width: 100vw;}
.contentWrap.riseWrap .section {max-width: 1440px; margin: 4rem auto;}
.contentWrap.riseWrap .section.goal {max-width: 100vw; background: url('../img/goalBg01.png') bottom center / cover no-repeat; padding: 3rem 0 5rem;}
.contentWrap.riseWrap .section.goal > * {max-width: 1440px; margin: 0 auto;}
.contentWrap.riseWrap .section.goal .secTitle {margin: 1rem auto; }
.section.goal .goalWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 3rem;}
.section.goal .goalWrap .goalBox {padding: 2rem 2rem 4rem; border-radius: 1rem; position: relative; overflow: hidden; flex: 1; background-color: rgba(0,0,0,0.4); border: 1px solid #fff; backdrop-filter: blur(10px);}
.section.goal .goalWrap .goalBox .titleArea {display: inline-flex; align-items: center; justify-content: center; flex-flow: column wrap;}
.section.goal .goalWrap .goalBox .title {color: #fff; font-weight: 600; font-size: 1.2rem; line-height: 1.5;}
.section.goal .goalWrap .goalBox .title .quote {font-size: 0.7em; }
.section.goal .goalWrap .goalBox .title.ver1 { display: inline-flex; align-items: flex-start; gap: 5px; background: linear-gradient(to right, #b1ffd2, #25F0FF);  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; font-weight: 800;}
.section.goal .goalWrap .goalBox .title .text {font-size: 1.2em;}
.section.goal .goalWrap .goalBox .title.ver2 {}
.section.goal .goalWrap .goalBox .img {position: absolute; bottom: -10px; right: 0;}
.section.goal .goalWrap .goalBox .img img {max-height: 120px;}
.section.goal .goalWrap .plus {display: inline-flex; align-items: center;color: #fff; font-size: 2em;}

.majorWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 2rem; font-weight: 500;}
.majorWrap .majorBox {flex: 1; border-radius: 1rem; padding: 2rem; background-color: #F3F3F3; color: #333; box-shadow: 3px 4px 10px 0px rgba(0, 0, 0, 0.2); font-size: 1.1rem;}
.majorWrap .majorBox .titleArea {text-align: center; margin-bottom: 2rem;}
.majorWrap .majorBox .titleArea .icon {display: block;}
.majorWrap .majorBox .titleArea .title {display: block; min-height: 60px;}
.majorWrap .majorBox .majorArea {width: 100%; }
.majorWrap .majorBox .majorArea li {display: flex; align-items: flex-start; flex-flow: row nowrap; justify-content: flex-start; width: auto; margin-bottom: 0.5rem; font-size: 1.05em;}
.majorWrap .majorBox .majorArea li .text{  flex: 1;   min-width: 0; word-break: keep-all;}
.majorWrap .majorBox .majorArea li:last-child {margin-bottom: 0;}
.majorWrap .majorBox .majorArea li::before {content: ''; display: inline-flex; flex: 0 0 8px;  width: 8px; aspect-ratio: 1; background-color: #93B9FF; border-radius: 2px; margin-top: 8px; margin-right:10px;}
.majorWrap .majorBox .majorArea.ver1 li::before {background-color: #93B9FF;}
.majorWrap .majorBox .majorArea.ver2 li::before {background-color: #D29FFF;}
.majorWrap .majorBox .majorArea.ver3 li::before {background-color: #74D78E;}
.majorWrap .majorBox .majorArea.ver4 li::before {background-color: #FFA4A4;}

.policyWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 2rem;}
.policyWrap .policyBox {flex: 1; font-size: 1.3rem; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start;}
.policyWrap .policyBox .title {color: #fff; font-weight: 600; background: linear-gradient(45deg, #2571FF, #002873); padding: 0.5rem ; text-align: center; border-radius: 0.5rem; margin-bottom: 0.5rem;}
.policyWrap .policyBox.ver2 .title {color: #fff; font-weight: 600; background: linear-gradient(45deg, #7EE8CA, #00AE7D);}
.policyWrap .policyBox .title .icon {font-size: 0.8em; margin-right: 5px;}
.policyWrap .policyBox .title .icon i {}
.policyWrap .policyBox .policyArea {display: flex; flex-flow: column nowrap;  flex: 1;   align-items: stretch; justify-content: stretch;}
.policyWrap .policyBox.ver2 .policyArea{flex: 1;}
.policyWrap .policyBox .policyArea .box {border-bottom: 1px solid #ddd; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap: 0.5rem; padding: 1rem 0;}
.policyWrap .policyBox.ver2 .policyArea .box { flex: 1;  flex-flow: column nowrap; align-items: center; justify-content: center;}
.policyWrap .policyBox .policyArea .box .num {width: 40px; color: #fff; aspect-ratio: 1; border-radius: 0.5rem; background-color: var(--main-blue); display: inline-flex; align-items: center; font-weight: 600; justify-content: center;}
.policyWrap .policyBox .policyArea .box .polTitle {font-weight: 700;}
.policyWrap .policyBox.ver2 .policyArea .box .polTitle {text-align: center; }
.policyWrap .policyBox .policyArea .box .text {font-size: 0.9em; font-weight: 500; color: #575757;}
.policyWrap .plus {width: auto; display: inline-flex; align-items: center;}
.policyWrap .plus img {max-width: 44px;}

.dataWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: flex-end; justify-content: space-between; font-size: 1.25rem; padding: 1rem 2rem; border-radius: 1rem; background: linear-gradient(-45deg, #D9F2FF, #D2FFEF); color: #333;}
.dataWrap .leftArea {display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 1rem;}
.dataWrap .leftArea .img {display: inline-flex;}
.dataWrap .leftArea .img img {max-height: 90px;}
.dataWrap .leftArea .titleArea {}
.dataWrap .leftArea .titleArea .title {font-size: 1.1em; font-weight: 700; margin-bottom: 0.5rem;}
.dataWrap .leftArea .titleArea .text {font-size: 0.85em; font-weight: 500; }
.dataWrap .dataBtn {font-size: 0.7em; border: 1px solid var(--main-blue); color: var(--main-blue); padding: 0.5rem 1rem; border-radius: 0.3rem; display: inline-flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 600;}
.dataWrap .dataBtn:hover {background-color: #fff;}
.dataWrap .dataBtn .icon {}

/* 글로컬 정책 소개 서브페이지 */
.gVisionWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 2rem; color: #333;}
.gVisionWrap .imgArea {width: auto;}
.gVisionWrap .imgArea img {}
.gVisionWrap .gVisionArea {flex: 1; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: space-between; font-size: 1.2rem; font-weight: 600; }
.gVisionWrap .gVisionArea li {display: flex; align-items: center; flex-flow: row nowrap; justify-content: center; width: auto; font-size: 1em; flex: 1; border-bottom: 1px solid #ddd;}
.gVisionWrap .gVisionArea li .text{  flex: 1;  min-width: 0; }
.gVisionWrap .gVisionArea li .text .accent {font-weight: 800; color: var(--main-blue);}
.gVisionWrap .gVisionArea li .icon {display: inline-block; transform: rotate(180deg); color: var(--main-blue); margin-right: 5px; font-size: 1.5em;}
.gVisionWrap .gVisionArea li:first-child {border-top: 1px solid #ddd;}
.gVisionWrap .gVisionArea li:last-child {margin-bottom: 0; font-size: 1.1em;}
.gVisionWrap .gVisionArea li::before {content: ''; display: inline-flex; flex: 0 0 8px; border-radius: 50%;  width: 8px; aspect-ratio: 1; background-color: var(--main-blue); margin-right:10px;}
.gVisionWrap .gVisionArea li:last-child::before  {display: none;}

.gNotiWrap {width: 100%; padding: 0.5rem; border-radius: 0.5rem; background-color: #FFFEDB; display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 1rem; margin-top: 1rem;}
.gNotiWrap .title {color: var(--main-navy); font-weight: 700;}
.gNotiWrap .title .icon {display: inline-block; margin-right: 5px;}
.gNotiWrap .text {font-weight: 500; color: #525252;}
.gNotiWrap .text b {font-weight: 700;}

.gPolicyWrap {width: 100%; display: flex; flex-flow: row wrap; align-items: stretch; justify-content: space-between; gap: 2rem;}
.gPolicyWrap .policyBox {flex: 1; font-size: 1.3rem; display: flex; flex-flow: column nowrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;}
.gPolicyWrap .policyBox .titleArea {color: #fff; font-weight: 600; background: linear-gradient(45deg, #2571FF, #002873); padding: 0.5rem ; text-align: center; border-radius: 0.5rem; margin-bottom: 0.5rem; display: flex; flex-flow: column wrap; gap: 5px; align-items: center;}
.gPolicyWrap .policyBox.ver2  .titleArea { background: linear-gradient(45deg,#002873, #2571FF); }
.gPolicyWrap .policyBox .titleArea .subject {background-color: #fff; font-size: 0.7em; color: #018AFB; padding: 4px 10px; border-radius: 3rem; width: fit-content; font-weight: 600;}
.gPolicyWrap .policyBox .titleArea .subject .icon {margin-right: 5px;}
.gPolicyWrap .policyBox .titleArea .title {}
.gPolicyWrap .policyBox .policyArea {display: flex; flex-flow: column nowrap;  flex: 1;   align-items: stretch; justify-content: stretch; gap: 1rem;}
.gPolicyWrap .policyBox .policyArea .box {display: flex; flex-flow: row wrap; align-items: stretch; justify-content: flex-start; gap: 0.5rem;     flex: 1;}
.gPolicyWrap .policyBox .policyArea .box .num {width: 40px; color: #fff; aspect-ratio: 1; border-radius: 0.5rem; background-color: var(--main-blue); display: inline-flex; align-items: center; font-weight: 600; justify-content: center;}
.gPolicyWrap .policyBox.ver2 .policyArea .box .num {background-color: var(--main-navy);}
.gPolicyWrap .policyBox .policyArea .box .textArea {flex: 1;}
.gPolicyWrap .policyBox .policyArea .box .textArea .polTitle {font-weight: 700; width: 100%; margin-bottom: 5px;}
.gPolicyWrap .policyBox .policyArea .box .textArea .text {font-size: 0.9em; font-weight: 500; color: #575757; width: 100%;}

.errorWrap {width: 100%; max-width: 80vw; margin: 0 auto; }
.errorWrap .textArea {text-align: center; font-size: 1rem; margin-bottom: 3rem; font-family: 'Paperlogy'; }
.errorWrap .textArea .title {font-size: 2em; font-weight: 700; margin-bottom: 1rem;color: var(--main-blue);}
.errorWrap .textArea .text {font-size: 1.2em; line-height: 1.4; font-weight: 500; color: #656565;}
.errorWrap .btnWrap {display: flex; flex-flow: row wrap; align-items: stretch; justify-content: center; gap: 0.5rem; margin-top: 2rem;}
.errorWrap .btnWrap .btn {font-size: 1rem; padding: 0.7rem 1.5rem; border-radius: 0.5rem; border: 1px solid var(--main-blue); color: var(--main-blue); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-family: 'pretendard'; cursor: pointer;}
.errorWrap .btnWrap .btn:hover {background-color: var(--main-blue); color: #fff; }
.errorWrap .imgArea {text-align: center; margin-bottom: 3rem;}








/* responsive */
@media only screen and (max-width: 1440px){
	.subVisualWrap .subVisual .subVisualText .topArea .mainTitle {font-size: 2.2rem; }
	.subVisualWrap .subVisual .subVisualText .botArea {font-size: 1rem;}
	.subHeaderWrap {max-width: 95vw; }
	.subHeaderWrap .subTitle {font-size: 1.5rem; }
	.contentWrap {max-width: 95vw;}           
	.subPageWrap .section .secTitle {font-size: 1.35rem; padding-left: 2.2rem;}
	.subPageWrap .section .secTitle::before {  width: 28px;  height: 10px;}

	.galleryWrap .gallBox .textArea .gallTitle {font-size: 1.1rem;min-height: 52px;}

	.subNotiWrap .textArea .img {right: -12vw;}
	.stateWrap {gap: 2rem;}
	.stateWrap .leftArea .boardWrap { bottom: -5vh;  right: -1vw;}

	.contentWrap.riseWrap .section {max-width: 95vw; }
	.contentWrap.riseWrap .section.goal > * {max-width: 95vw; }
}

@media only screen and (max-width: 1280px){
	.univBody .univWrap .univBox {width: calc( ( 100% - 4.5rem ) / 4 ); }
	.univBody .univWrap .univBox .logoArea {height: 70px;}
	.univBody .univWrap .univBox .logoArea img {max-height: 54px;}

	.section.goal .goalWrap .goalBox {padding: 1.5rem 1rem 3rem;}
	.section.goal .goalWrap .goalBox .img img {max-height: 100px;}

	.majorWrap .majorBox {padding: 1.5rem; font-size: 1rem;}
	.majorWrap .majorBox .titleArea .title {min-height: 55px;}
	.majorWrap .majorBox .titleArea .icon img {max-width: 60px;}

	.policyWrap .policyBox {font-size: 1.1rem;}

	.stateWrap .tab-content .unitWrap .planWrap.ver4 .planBox {width: calc((100% - 1rem) / 2);}
	.stateWrap .tab-content .unitWrap .planWrap.ver3 .planBox {width: calc((100% - 1rem) / 2);}
	.stateWrap .tab-content .unitWrap .planWrap .planBox.flex {flex: unset; width: calc((100% - 1rem) / 2);}
}


@media only screen and (max-width: 1024px){
	.subPageWrap {margin-top: 100px;}

	.subVisualWrap {height: auto; }
	.subVisualWrap .subVisual {padding: 2.5rem 0; }
	.subVisualWrap .subVisual .subVisualText {gap: 1rem;}
	.subVisualWrap .subVisual .subVisualText .topArea .mainTitle {font-size: 2rem;}
	.subVisualWrap .subVisual .subVisualText .botArea {font-size: 0.95rem; }
	.subHeaderWrap .subTitle {font-size: 1.3rem;}
	.subHeaderWrap .breadcrumb a {font-size: 0.8rem;}
	.subPageWrap .section .secTitle {font-size: 1.2rem; padding-left: 1.7rem;}
	.subPageWrap .section .secTitle::before {  width: 22.5px;  height: 8px;}

	.tapWrap .tabBtn {font-size: 0.85rem;}
	.tapWrap.state {flex-flow: row wrap; border-radius: 1rem;}
	.tapWrap.state .tabBtn {width: calc( 100% / 9 ); flex: unset; border-radius: 0.5rem;}

	.searchWrap .searchTitle {font-size: 1.4rem;}
	.searchWrap .searchArea .inputArea {width: auto; flex: 1;}

	.resultWrap .resultBox {font-size: 0.9rem;}

	.boardTable {font-size: 0.9rem;}
	.boardTable tbody tr td {padding: 0.7rem 0.5rem;}
	.boardTable tbody {font-size: 0.8rem;}
	.boardTable tbody tr td .icon {width: 20px;}
	.boardTable tbody tr td .icon i {font-size: 0.6rem;}
	.boardTable .badge01, .boardTable .badge02, .boardTable .badge03, .boardTable .badge04, .boardTable .badge05 {font-size: 0.65rem;}

	.boardWrap .boardTitle {font-size: 0.95rem;}
	.boardWrap .infoWrap .infoBox {font-size: 0.8rem;margin-right: 1rem;}
	.boardWrap .infoWrap {gap: 1rem;}
	.boardWrap .infoWrap .infoBox::after {margin-left: 1rem;}
	.boardWrap .boardCont .textArea {font-size: 0.9rem;}

	.galleryWrap, .galleryWrap2 {gap:1.5rem;}

	.subNotiWrap .textArea {word-break: keep-all;}
	.subNotiWrap .textArea .img {display: none;}
	.stateWrap {flex-flow: column wrap; align-items: center;}
	.stateWrap .leftArea { top: unset; margin-bottom: 0;}
	.stateWrap .leftArea .boardWrap {  bottom: 0vh;  right: -18vw;}

	.alertWrap .imgArea img {max-width: 300px;}
	.alertWrap .textArea {font-size: 1.1rem;}

	.riseIntroWrap.ver1 .riseTitle {width: 80%; text-align: center;}
	.riseIntroWrap .riseTitle {text-align: center;}
	.riseWrap .visionWrap .visionBox .icon img {max-height:50px;}
	.riseWrap .visionWrap .visionBox .vText {font-size: 1rem;}
	.riseWrap .visionWrap .visionBox:nth-child(2) {margin-left: -1rem;}
	.riseWrap .visionWrap .visionBox:nth-child(3) {margin-left: -1rem;}
	
	.section.goal .goalWrap {gap: 2rem;}
	.section.goal .goalWrap .goalBox .title {font-size: 1.05rem;}
	.section.goal .goalWrap .goalBox .img img {max-height: unset; max-width: 90px;}

	.majorWrap {gap: 1.5rem;}
	.majorWrap .majorBox {padding: 1rem; font-size: 0.95rem;}
	.majorWrap .majorBox .majorArea li::before { flex: 0 0 6px;  width: 6px; margin-right: 6px;}

	.policyWrap .policyBox {font-size: 1.05rem;}

	.dataWrap {font-size: 1rem; padding: 1rem;}
	.dataWrap .leftArea .titleArea .title {margin-bottom: 5px;}
	.dataWrap .leftArea .img img {max-height: 60px;}
	.dataWrap .dataBtn {padding: 0.5rem;}

	.gVisionWrap .imgArea img {max-width: 240px;}

	.gNotiWrap {flex-flow: column wrap; gap: 5px; align-items: flex-start; padding: 0.7rem; word-break: keep-all;}

	.gPolicyWrap .policyBox {font-size: 1.05rem;}

	.errorWrap .textArea {font-size: 0.9rem; margin-bottom: 2rem;}
	.errorWrap .imgArea {margin-bottom: 2rem;}
	.errorWrap .imgArea img {max-height: 270px;}

	.subPageWrap .section .secTitle.row .unitArea {gap: 0.7rem;}
	.subPageWrap .section .secTitle.row .unitArea .unit::after {margin-left: 0.7rem;}

}

@media only screen and (max-width: 768px){
	.subPageWrap {margin-top: 90px;}

	.subVisualWrap .subVisual .subVisualText .topArea .mainTitle {font-size: 1.8rem;}
	.subVisualWrap .subVisual .subVisualText .botArea {font-size: 0.8rem;}
	.subHeaderWrap {padding: 0.7rem 0;}
	.subHeaderWrap .subTitle {font-size: 1.15rem;}
	.subHeaderWrap .subTitle::before {width: 6px; left: -7px;}

	.contentWrap .section:first-child {margin-top: 1rem;}
	.subPageWrap .section .secTitle {font-size: 1.05rem;margin-bottom: 1rem;}

	.tapWrap {padding: 0.3rem;}
	.tapWrap .tabBtn {padding: 0.5rem; font-size: 0.8rem;}

	.searchWrap .searchTitle {font-size: 1.15rem;}

	.resultWrap .resultBox {font-size: 0.8rem;}
	.resultWrap .resultBox .num {padding: 4px 0.5rem; font-size: 0.7rem;}
	.resultWrap .resultPage {font-size: 0.65rem;}

	.boardTable {font-size: 0.8rem;}
	.boardTable thead tr th.subject {width: 15%;}
	.boardTable .badge01, .boardTable .badge02, .boardTable .badge03, .boardTable .badge04, .boardTable .badge05 {padding: 2px 8px;}

	.pagination {width: 100%; max-width: 90vw;}

	.galleryWrap {  grid-template-columns: 1fr; gap: 1rem; }
	.galleryWrap .gallBox {border-radius: 0.5rem;}
	.galleryWrap .gallBox .imgArea {border-radius: 0.5rem;}
	.galleryWrap2 {grid-template-columns: repeat(2, 1fr); gap: 1rem;}
	.galleryWrap2 .gallBox {border-radius: 0.5rem;}
	.galleryWrap2 .gallBox .imgArea {border-radius: 0.5rem;}

	.pageNotiWrap {max-width: 70vw;}
	.pageNotiWrap .notiArea .textArea {font-size: 1rem;}

	.stateWrap .leftArea .boardWrap {width: 100%; margin-bottom: 0;border-radius: 0.5rem;}
	.stateWrap .leftArea .boardWrap .boardArea {width: 100%; display: flex; flex-flow: row wrap;  align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem; }
	.stateWrap .leftArea .boardWrap .boardArea .text {margin-bottom: 0; width: calc( ( 100% - 0.5rem ) / 2 );}
	.stateWrap .leftArea .boardWrap .boardArea .text .subject {min-width: unset;}

	.stateTables .nameWrap {font-size: 1.35rem;}
	.stateTables .nameWrap .titleArea {gap: 5px 1rem;}
	.stateTables .nameWrap .titleArea .title {display: block; width: 100%; margin-right: 0;}

	.projectCell {font-size: 0.95em; word-break: keep-all;}
	.taskBadge {  width: 22px;  height: 22px; font-size: 0.85rem;}
	.riseTable thead {font-size: 0.95rem;}
	.riseTable td {font-size: 0.9rem;}

	.yearTable {font-size: 0.9rem; }

	.alertWrap {padding: 1.5rem; flex-flow: column wrap;}
	.alertWrap .textArea .text {text-align: center;}

	.univBody .univWrap {gap: 1rem;}
	.univBody .univWrap .univBox {  width: calc((100% - 2rem) / 3); padding: 0.5rem 1rem;}
	.univBody .univWrap .univBox .textArea {font-size: 0.9rem;}

	.contentWrap.riseWrap .section:first-child {margin-top: 3rem;}
	.riseIntroWrap {font-size: 1.05rem;}
	.riseWrap .visionWrap .visionBox {width: 22%;}
	.riseWrap .visionWrap .visionBox .icon img {max-height: 40px;}
	.riseWrap .visionWrap .visionBox .vText {font-size: 0.85rem; background-color: unset; padding: 0; border-radius: 0; color: #BBD2FC;}
	.riseWrap .visionWrap .visionBox.line .arrow {font-size: 1.5em; margin-bottom: -3px;}

	.section.goal .goalWrap .goalBox {padding: 1rem 1rem 4rem; border-radius: 0.5rem;}
	.section.goal .goalWrap .goalBox .title {font-size: 0.95rem;}
	
	.majorWrap {gap: 1.5rem;}
	.majorWrap .majorBox {flex: unset; width: calc( ( 100% - 1.5rem ) / 2 ); border-radius: 0.5rem;}
	.majorWrap .majorBox .titleArea {margin-bottom: 1rem;}
	.majorWrap .majorBox .titleArea .icon img {max-width: 46px;}

	.policyWrap {flex-flow: column wrap;}
	.policyWrap .policyBox .policyArea {flex: unset; width: 100%; flex-flow: row wrap; gap: 2rem; border-bottom: 3px solid #ddd;}
	.policyWrap .policyBox .policyArea .box {flex: 1; flex-flow: column wrap; border-bottom: none; position: relative;}
	.policyWrap .policyBox .policyArea .box::after {content: ''; display: inline-block; width: 1px; height: 70%; background-color: #ddd; position: absolute; top: 50%; right: -0.7rem; transform: translate(-50%,-50%);}
	.policyWrap .policyBox .policyArea .box:last-child:after {display: none;}
	.policyWrap .policyBox .policyArea .box .text {text-align: center; word-break: keep-all;}
	.policyWrap .plus {justify-content: center;}

	.dataWrap {flex-flow: column wrap; align-items: center; gap: 1rem;border-radius: 0.5rem; }
	.dataWrap .leftArea {flex-flow: column wrap; gap: 0.5rem;}
	.dataWrap .leftArea .titleArea .title {text-align: center;}
	.dataWrap .leftArea .titleArea .text {text-align: center; word-break: keep-all;}

	.contentWrap.glocal .section:first-child {margin-top: 3rem;}
	.gVisionWrap {gap:1rem;}
	.gVisionWrap .gVisionArea {font-size: 1rem;}
	.gVisionWrap .imgArea img {max-width: 180px;}
	.gVisionWrap .gVisionArea li .icon {font-size: 1.2em;}

	.gPolicyWrap {flex-flow: column wrap;}

	.errorWrap .textArea {font-size: 0.8rem;}
	.errorWrap .textArea .title, .errorWrap .textArea .text {word-break: keep-all;}
	.errorWrap .btnWrap {margin-top: 1.5rem;}
	.errorWrap .btnWrap .btn {padding: 0.5rem 1rem; font-size: 0.8rem;}
	.errorWrap .imgArea img {max-height: 200px;}

	.subPageWrap .section .secTitle.row {  flex-flow: column wrap; align-items: flex-start; justify-content: flex-start;}
	.subPageWrap .section .secTitle.row .unitArea {font-size: 0.8em;}

	.stateWrap .tab-content .tabBox {padding: 1.5rem; font-size: 1rem;}
	.stateWrap .tab-content .planTitle {font-size: 1.1rem;}
	.stateWrap .tab-content .unitWrap .planWrap .planBox .titleArea {flex-direction: column; padding:8px;}

}

@media only screen and (max-width: 550px){
	.subPageWrap {margin-top: 80px;}
	.subHeaderWrap {flex-flow: column wrap; align-items: center; justify-content: flex-start; gap: 10px;}

	.pagination { gap: 12px; padding: 12px 14px; flex-flow: column wrap;}
	.pagination .pageNav::after {display: none;}
	.pagination .pageBtn.num { min-width: 32px; height: 32px; padding: 0 8px;}
	.pagination .gotoLabel {  font-size: 12px; }
	.pagination .gotoInput {width: 58px; height: 28px;}
	.pagination .pageGoto {display: none;}

	.subVisualWrap {border-radius: 0.5rem;}
	.subVisualWrap .subVisual {padding: 2rem;}
	.subVisualWrap .subVisual .subVisualText .topArea .mainTitle {font-size: 1.5rem;}
	.subVisualWrap .subVisual .subVisualText .topArea .detail {font-size: 0.8em;}
	.subVisualWrap .subVisual .subVisualText .botArea br {display: none;}
	.boardTable thead tr th.subject {width: 20%;}

	.searchWrap {margin: 2rem 0;}
	.searchWrap .searchArea .inputArea {width: 100%; flex: none;}
	.searchWrap .searchTitle .img {display: none;}

    .boardTable thead {  display: none; }
    .boardTable, .boardTable tbody, .boardTable tr, .boardTable td {  display: block;  width: 100%; }
    .boardTable thead { display: none; }
    .boardTable, .boardTable tbody, .boardTable tr {  display: block;  width: 100%;  }
    .boardTable tbody tr {  border: 1px solid var(--main-grey);  border-radius: 12px;  padding: 14px;  margin-bottom: 12px;  background: #fff;  }
    .boardTable tbody tr td { --label-w: 72px; display: grid;  grid-template-columns: var(--label-w) 1fr;  column-gap: 12px;   align-items: center; padding:0; border: 0; text-align: left; margin-bottom: 0.5rem;}
    .boardTable tbody tr td:last-child {margin-bottom: 0;}
    .boardTable tbody tr td::before {  content: attr(data-label);  grid-column: 1;  font-weight: 700;  color: #666; background-color: #d3eaff;  width: 100%;   text-align: center;   border-radius: 4px;   padding: 4px;}
    .boardTable tbody tr td > * {  grid-column: 2;  min-width: 0;   }
    .boardTable tbody tr td.title a {  -webkit-line-clamp: 2; }
    .boardTable .badge01, .boardTable .badge02, .boardTable .badge03, .boardTable .badge04, .boardTable .badge05 {width: fit-content; font-size: 0.75rem; padding: 3px 0.5rem;}

    .boardWrap .boardCont {padding: 1.5rem;}
	
	.galleryWrap .gallBox:hover {box-shadow: none;}
	.galleryWrap .gallBox .textArea .gallTitle {font-size: 1rem; min-height: unset;}
	.galleryWrap .gallBox .textArea .text {font-size: 0.8rem;}
	.galleryWrap2 {  grid-template-columns: 1fr; gap: 1.5rem;}
	.galleryWrap2 .gallBox:hover {box-shadow: none;}
	.galleryWrap2 .gallBox .textArea {padding: 0; margin-top: 0.5rem;}
	.galleryWrap2 .gallBox .textArea .gallTitle {font-size: 1rem; min-height: unset;}

	.resultWrap .resultPage {padding: 3px 6px; gap: 5px;}
	.resultWrap .resultBox::after {margin: 0 0.5rem;}

	.pageNotiWrap {max-width: 80vw;}
	.pageNotiWrap .notiArea {border-radius: 0.5rem;}
	.pageNotiWrap .notiArea .textArea {padding: 1rem; }
	
	.subNotiWrap {padding: 1rem;}
	.subNotiWrap .textArea {font-size: 1rem;}
	.contentWrap .section.map {overflow: hidden;}
	.stateWrap .tab-content .tabBox {padding: 1rem; border-radius: 0.5rem; box-shadow: none;}
	.stateWrap .tab-content .contWrap .rowWrap {flex-flow: column wrap; gap: 1.25rem;}
	.stateWrap .tab-content .nameWrap .directBtn {width: 30px; height: 30px; border-radius: 4px; font-size: 0.8em;}
	.stateWrap .statusArea .statusItem {flex: unset; width: calc( ( 100% - 1rem ) / 2 );}
	.stateWrap .quickArea .quickGrid {grid-template-columns: repeat(2, 1fr);}

	/* .stateWrap .leftArea .boardWrap {  width: 50%; bottom: unset;  top: -6vw;  right: -10vw;}
	.stateWrap .leftArea .boardWrap .boardArea {flex-flow: column wrap;}
	.stateWrap .leftArea .boardWrap .boardArea .text::before {display: none;}
	.stateWrap .leftArea .boardWrap .boardArea .text {width: 100%;}
	.stateWrap .leftArea .boardWrap .boardArea .text .status {flex: unset; width: fit-content;} */

	.stateWrap .leftArea {margin-bottom: 100px;}
	.stateWrap .leftArea .mapBoard {position: absolute; bottom: -120px; left: 0;}
	.stateWrap .leftArea .boardWrap {  width: 100%; position: unset;}
	.stateWrap .goalWrap .goalArea .goalBox {border-radius: 4px;}
	.stateWrap .goalWrap .goalArea .goalBox .num {border-radius: 4px;}
	.stateWrap .goalWrap .goalArea .goalBox .text {font-size: 0.85rem;}
	.stateWrap .proWrap .proArea {gap:0;}
	.stateWrap .proWrap .proArea .proBox {padding: 0.4rem;}
	.stateWrap .proWrap.ver2 .proArea .proBox {width: 100%;}
	.stateWrap .proWrap .proArea .proBox .text {font-size: 0.85rem;}
	.stateWrap .quickArea .quickBtn {border-radius: 4px;}
	.stateWrap .tab-content .nameWrap {font-size: 0.9rem;}
	.stateWrap .tab-content .contWrap .contTitle {font-size: 1rem;}
	.stateWrap .tab-content .contWrap .visionArea .textArea {font-size: 0.9rem;}
	.stateWrap .statusArea .statusItem .label {font-size: 0.85rem;}

	.stateTables .nameWrap {border-radius: 0.5rem; font-size: 1.2rem;}

	.tableWrap {font-size: 0.9rem;}
	.riseTable thead th {font-size: 0.9em; padding: 0.75rem;}
	.tableCaption {text-align: left;}

	.show550 {display: block;}

	.tapWrap.state {border-radius: 0.5rem;}
	.tapWrap.state .tabBtn {width: calc( 100% / 6 ); flex: unset; border-radius: 4px;}

	.alertWrap {border-radius: 0.5rem; gap: 1rem;}
	.alertWrap .imgArea img {max-width: 250px;}

	.univBody .univWrap .univBox {  width: calc((100% - 1rem) / 2);}
	.univBody .univWrap .univBox .textArea {font-size: 0.8rem;}

	.riseIntroWrap {font-size: 0.9rem;}
	.riseIntroWrap.ver1 .riseTitle {width: 70%; top: -32px;}
	.riseIntroWrap.ver1 .riseText {  padding: 2.5rem 1rem 1rem;}
	.riseIntroWrap.ver2 .riseTitle {width: 60%;     top: -20px;}
	.riseIntroWrap .riseText {padding: 1.5rem 1rem 1rem; border-radius: 0.5rem; word-break: keep-all;}
	.riseWrap .visionWrap {justify-content: center; gap: 1.5rem;}
	.riseWrap .visionWrap .visionBox {border: 0; border-radius: 0;flex-flow: column nowrap; width:auto; position: relative;}
	.riseWrap .visionWrap .visionBox .vText {font-size: 0.95rem; color: #6198ff;}
	.riseWrap .visionWrap .visionBox .icon img {max-height: 36px;}
	.riseWrap .visionWrap .visionBox:nth-child(2) {margin-left: 0;}
	.riseWrap .visionWrap .visionBox:nth-child(3) {margin-left: 0;}
	.riseWrap .visionWrap .visionBox:first-child::after {width: 1px; height: 50px; content: ''; display: inline-block;background-color: #6198ff; position: absolute; right: -0.75rem; }
	.riseWrap .visionWrap .visionBox:nth-child(2)::after {width: 1px; height: 50px; content: ''; display: inline-block;background-color: #6198ff; position: absolute; right: -0.75rem; }
	.riseWrap .visionWrap .visionBox.line {flex: unset; border: none;}
	.riseWrap .visionWrap .visionBox.line .dot {display: none;}

	.section.goal .goalWrap {flex-flow: column wrap; align-items: center; gap: 1rem;}
	.section.goal .goalWrap .goalBox {flex: unset; width: 100%; padding: 0.6rem 1rem 1rem;}

	.majorWrap .majorBox {flex: unset; width: 100%; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 1rem; font-size: 0.9rem;}
	.majorWrap .majorBox .titleArea {width: 30%; margin-bottom: 0;}
	.majorWrap .majorBox .titleArea .title {min-height: unset;}
	.majorWrap .majorBox .majorArea {width: auto; flex: 1;}

	.policyWrap .policyBox .policyArea {gap: 1.5rem;}
	.policyWrap .policyBox .policyArea .box .num {width: 36px; border-radius: 4px;}

	.gNotiWrap {font-size: 0.9rem;}

	.gVisionWrap {flex-flow: column wrap; align-items: center;}
	.gVisionWrap .gVisionArea {width: 100%; font-size: 0.9rem;}
	.gVisionWrap .gVisionArea li {padding: 0.5rem 0;}

	.gPolicyWrap .policyBox {font-size: 0.95rem;}
	.gPolicyWrap .policyBox .policyArea {gap: 0.5rem;}
	.gPolicyWrap .policyBox .titleArea {border-radius: 4px;}
	.gPolicyWrap .policyBox .policyArea .box .num {border-radius: 4px;}

	.subPageWrap .section .secTitle.row {word-break: keep-all;}
	.subPageWrap .section .secTitle.row .unitArea {gap: 0.5rem;}
	.subPageWrap .section .secTitle.row .unitArea .unit::after {margin-left:0.5rem ;}

	.stateWrap .tab-content .unitWrap .planWrap .planBox .titleArea .icon {width: 16px; height: 16px;}
	.stateWrap .tab-content .unitWrap .planWrap .planBox .titleArea .title {font-size:0.95em;}
}

@media only screen and (max-width: 425px){
	.searchWrap .searchTitle .img {display: none;}

	.subNotiWrap {margin-bottom: 1.5rem;}
	.stateWrap {align-items: flex-start;}
	.stateWrap .rightArea {flex: unset; width: 100%;}
	.stateWrap .leftArea { display: flex;  align-items: center;   justify-content: center;  width: 100%;   height: 590px;}
	.stateWrap .tab-btn[data-city="GJ"] {  bottom: 165px;  left: 44px;}
	.stateWrap .tab-btn[data-city="GJ"].active {  bottom: 192px;}
	.stateWrap .tab-btn[data-city="BS"].active {  bottom: 182px;}
	.stateWrap .tab-btn[data-city="US"] {  bottom: 210px;  right: 49px;}
	.stateWrap .tab-btn[data-city="US"].active {  bottom: 234px; }
	.stateWrap .tab-btn[data-city="DG"] {   bottom: 243px;  right: 126px;}
	.stateWrap .tab-btn[data-city="DG"].active { bottom: 263px;}
	.stateWrap .tab-btn[data-city="DJ"] {  top: 239px;  left: 112px;}
	.stateWrap .tab-btn[data-city="DJ"].active {  top: 218px;  left:112px;}
	.stateWrap .tab-btn[data-city="SJ"] { top: 206px;}
	.stateWrap .tab-btn[data-city="SJ"].active {  top: 190px;  left: 97px;}
	.stateWrap .tab-btn[data-city="CN"] {  left: 40px;}
	.stateWrap .tab-btn[data-city="CB"] { left: 149px;}

	.riseIntroWrap.ver2 .riseTitle {  width: 85%;}

	.stateTables .nameWrap {flex-flow: column wrap; align-items: center; gap:0.3rem;}
	.stateTables .nameWrap .titleArea {justify-content: center; order: 2;}
	.stateTables .nameWrap .titleArea .title {text-align: center;}
	.stateTables .nameWrap .home {border-radius:0; border: none; font-size: 0.8em; text-align: center; order: 1; padding: 0;}
}

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

	.resultWrap .leftArea {flex-flow: column wrap; gap: 0.4rem; align-items: flex-start;}
	.resultWrap .resultBox::after {display: none;}
	.resultWrap .resultPage {width: 100%;  justify-content: center;}
	.pagination {padding: 12px 0px;}

	.stateWrap .leftArea {width: 374px;  height: 542px;}
	.stateWrap .tab-btn[data-city="DJ"] {  top: 218px;}
	.stateWrap .tab-btn[data-city="DJ"].active {  top: 198px;  left: 107px;}
	.stateWrap .tab-btn[data-city="SJ"].active { top: 169px;}
	.stateWrap .tab-btn[data-city="GJ"] {  bottom: 146px;}
	.stateWrap .tab-btn[data-city="GJ"].active  {bottom: 176px;}
	.stateWrap .tab-btn[data-city="US"] {  bottom: 197px;}
	.stateWrap .tab-btn[data-city="US"].active { bottom: 222px;}
	.stateWrap .tab-btn[data-city="DG"] { bottom: 227px;}
	.stateWrap .tab-btn[data-city="IC"] {  top: 87px;}
	.stateWrap .tab-btn[data-city="IC"].active {  left: 37px;  top: 55px;}
	.stateWrap .tab-btn[data-city="SE"].active {  top: 59px;}
	.stateWrap .tab-btn[data-city="CB"] {  left: 135px;}

	.stateWrap .leftArea .mapBoard {width: 90%;}

	.riseIntroWrap.ver1 .riseTitle {width: 85%;}

	.subPageWrap .section .secTitle.row .unitArea {font-size: 0.75em;}

}

@media only screen and (max-width: 320px){
	.stateWrap .leftArea {margin-bottom: 120px; width: 359px;}
	.stateWrap .leftArea .mapBoard {width: 80%; bottom: -145px;}
	.stateWrap .leftArea .boardWrap .boardTitle {font-size: 0.9rem;}
	.stateWrap .leftArea .boardWrap .boardArea .text {font-size: 0.8rem;}

	.riseIntroWrap .riseText .accent {display: inline-block;}

	.stateWrap .tab-content .unitWrap .planWrap .planBox .titleArea .title {word-break: break-all;}
}