@charset "UTF-8";
@import "../component/output.css";

/*페이지 레이아웃*/
#wrap {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  min-height: 100%;
}

#container{
	position:relative;
	flex: 1;
}

#container .contents {
  position: relative;
  /*padding-top: 3.6rem;*/
  padding-bottom: 8rem;
}

#container .main-contents {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-top: 4rem;
  margin-bottom: 6rem;
}

.container-inner {
	width: 100%;
}

.page-title-wrap {
  margin-bottom: var(--krds-number-10);
}

/*스킵*/
#skip {
	position: relative;
	z-index: 999;
}
#skip a {
	position: absolute;
	top: -4.2rem;
	left: 0;
	height: 4.2rem;
	width: 100%;
	line-height: 4.2rem;
	font-size: 1.4rem;
	color: var(--krds-light-color-text-basic-inverse);
	background: var(--krds-color-high-contrast-information-80);
	text-align: center;
	transition: all 0.4s ease;
	z-index: 1000;
}

#skip a:focus,
#skip a:active {
  top: 0;
}


/***메뉴***/
.krds-main-menu .gnb-menu > li {
	width: 100%;
}

.left-menu {
	width: 32rem;
	padding-left: 2.4rem;
}


/***로그인***/
.login-inner {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 100%;
	max-width: 65rem;
	margin: 0 auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	padding: 0rem 2.4rem;
}


/***메인***/
.main-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 4rem 2rem;
	box-sizing: border-box;
}

.content-inner	{
	display: flex;
	align-items: normal;
	justify-content: flex-start;
	flex-direction: row;
	margin: 0 auto;
	width: 124.8rem;
	gap: 5.4rem;
}

/*메인/인트로 정보 그룹*/
.intro-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.main-inner{
	height: 14rem;
	width: 100%;
	padding: 0.5rem;
}

.main-info {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	justify-content: space-between;
}

.main-info.row {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.4rem;
	height: 100%;
}

.main-info.row > p {
	text-align: center;
}

.main-info > * {
  position: relative;
  z-index: 1;
}

.main-info-group {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.main-more > a,
.risklevel-list .time > span{
	display: flex;
	align-items: center;
	gap: .8rem;
}

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

/*현위치 기반 산불위험정보*/
.location-tit {
	display: flex;
	align-items: center;
	gap: .8rem;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 5px;
}

/*현위치 기반 산불위험정보 배경*/
.bg-m {
	position: relative;
	background: url(../../images/component/icon/bg_person.png) no-repeat center !important;
}

/* 위험 등급 컬러칩*/
:root {
  --risk-color-attention: #b0d6ff;  /* 관심 */
  --risk-color-caution: #fff9da;    /* 주의 */
  --risk-color-warning: #ffebd4;    /* 경계 */
  --risk-color-severe: #ffdddd;     /* 심각 */
	--risk-color-attention-second: #0177f5;  /* 관심 */
  --risk-color-caution-second: #ffdb0f;    /* 주의 */
  --risk-color-warning-second: #ff9720;    /* 경계 */
  --risk-color-severe-second: #ff0d0d;     /* 심각 */
}

/* 현위치 기반  산불위험정보 */
.risk-list_attention {
	background: var( --risk-color-attention);
	border: .1rem solid var(--risk-color-attention-second);
	border-radius: .8rem;
	padding: .4rem 1.2rem;
}

.risk-list_caution {
	background: var( --risk-color-caution);
	border: .1rem solid var(--risk-color-caution-second);
	border-radius: .8rem;
	padding: .4rem 1.2rem;
}

.risk-list_warning {
	background: var( --risk-color-warning);
	border: .1rem solid var(--risk-color-warning-second);
	border-radius: .8rem;
	padding: .4rem 1.2rem;
}

.risk-list_severe {
	background: var( --risk-color-severe);
	border: .1rem solid var(--risk-color-severe-second);
	border-radius: .8rem;
	padding: .4rem 1.2rem;
}

/*산불위험등급*/
.risk-group {
	display: flex;
	flex-direction: column;
	justify-content:flex-end;
	text-align: right;
	height: 100%;
	/* ygjung */
	margin-top: .3rem;
	/* //-ygjung */
}

.risk-group img{
  height: inherit;
  margin: auto;
}

/*빠른 조회 서비스*/
.short-group {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.short-tit {
	position: relative;
	padding-left: 10.5rem;
}

.short-tit::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background: url(../../images/component/icon/check.svg) no-repeat;
	width: 8.5rem;
	height: 7.8rem;
}

.short-tit > em {
	color: #53B089;
}

.main-info,
.short-list > li{
	background: var(--krds-light-color-background-white);
	border: 0.1rem solid #d5dbe6;
	box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.08);
	border-radius: 1.2rem;
	padding: 1.6rem;
	box-sizing: border-box;
}

.short-list,
.risklevel-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem;
}

.short-list > li {
	width: calc(50% - 1rem);
	position: relative;
	display: flex;
	flex-shrink: 0;
	height: 15.5rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	gap: 1.4rem;
}

.short-list > li > a {
	display: inline-block;
	position: absolute;
	top: 1.4rem;
	right: 1.4rem;
	background: url(../../images/component/icon/ico-short.svg) no-repeat;
	background-size: contain;
	width: 3.2rem;
	height: 3.2rem;
}

.short-list > li > a span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.short-list > li > img {
	width: 6.4rem;
}

.short-list > li > span {
	line-height: 2rem;
	display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/*최고등급 위험지역*/
.current {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.current > p {
	text-align: center;
	font-size: 1.5rem;
}

.level-text > li {
	font-size: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.2rem;
}

.level-text > li > em {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.level-text > li > p {
	flex: 0 0 5rem;
	text-align: center;
}

.level-text > li > span {
	display: flex;
	align-items: center;
	width: 14rem;
	justify-content: space-between;
}

/* 메인 최근 공지사항 */
.mnotice > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.48rem 0rem;
	/*cursor: pointer;*/
	font-size: 1.5rem;
}

.mnotice > li > a { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mnotice > li > a > p { display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: 259px; }
.mnotice > li > a > span { text-align: right; display: block; padding-left: 10px;}
.mnotice > li > span > img {width: 5rem;}

/*대형산불위험예보 발령현황*/
.region-text {
	display: flex;
	height: 100%;
	gap: 5px;
}
.region-text > li {
	width: calc(100% / 2);
}

/*날씨예보*/
.weather-wrap {
	background: #EEF2F7;
	height: 35.5rem;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.weather-map {
	background: url(../../images/map/weatherMap.svg)no-repeat center;
	width: 34rem;
	height: 35rem;
	position: absolute;
}

.weather-map > dl {
	display: block;
	height: 3.5rem;
	width: 5.5rem;
	text-align: center;
	position: absolute;
}

.weather-map > dl dt {
	position: absolute;
	width: 100%;
	bottom: -.5rem;
	text-align: right;
	font-size: 1.2rem;
	font-weight: 700;
}

.weather-map > dl dd img {
	width: 3.5rem;
}

/*날씨 위치*/
.gangreung {top: 5.5rem; left: 22.5rem;}
.uljin {top:12.5rem; left: 25.3rem;}
.daejeon {top: 16.5rem; left: 14rem;}
.mokpo {top: 28.5rem; left: 7rem;}
.seosan {top: 12.5rem; left: 7.5rem;}
.chuncheon{top: 4rem; left: 16rem;}
.incheon{position: absolute; top: -11.5rem; left: 9rem;}	
.gwangju{top: 25.5rem; left: 10.5rem;}	
.jeju{position: absolute; top: 30.5rem; left: 0rem;}	
.ulsan{top: 22.5rem; left: 25.5rem;}	
.daegu{top: 18.5rem; left: 21rem;}	
.jeonju{top: 21.5rem; left: 12rem;}
.yeosu{top: 28rem; left: 15rem;}	
.andong{top: 15.5rem; left: 22rem;}	
.masan{top: 25rem; left: 22rem;}	
.chungju{top: 13rem; left: 14.5rem;}
.pohang{top: 18rem; left: 25.5rem;}
.suwon{top: 10rem; left: 11.5rem;}
.seoul{top: 7rem; left: 12rem;}
.baengnyeongdo{top: 6.5rem; left: 4rem;}

.forest-fire-map {
	height: 35.5rem;
}


.timeline {
  position: relative;
  width: 2px;
  background-color: #3ba2ff;
  height: 80%;
}

.timeline .dot {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #3ba2ff;
	margin-bottom: 5.4rem;
  border-radius: 50%;
}

.risklevel-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}

/**/
.risklevel-list .level-attention { background: var(--risk-color-attention); }
.risklevel-list .level-caution   { background: var(--risk-color-caution); }
.risklevel-list .level-warning   { background: var(--risk-color-warning); }
.risklevel-list .level-severe    { background: var(--risk-color-severe); }

.risklevel-list > li {
	width: 100%;
	flex-shrink: 0;
	padding: 1rem 1.6rem 1rem 2.5rem;
	border-radius: 1.2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.risklevel-list > li::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0.8rem;
	height: 100%;
	z-index: 1;
	border-radius: 1.2rem 0 0 1.2rem;
}

.risklevel-list .level-attention::after {
  background-color: var(--risk-color-attention-second);
}
.risklevel-list .level-caution::after {
  background-color: var(--risk-color-caution-second);
}
.risklevel-list .level-warning::after {
  background-color: var(--risk-color-warning-second);
}
.risklevel-list .level-severe::after {
  background-color: var(--risk-color-severe-second);
}

.risk-text > li {
	position: relative;
	padding-right: 2rem;
	font-size: 1.2rem;
}

.risk-text > li::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	height: 1.2rem;
	width: 1.2rem;
}

.risk-text .level-attention::before {
  background-color: var(--risk-color-attention-second);
}
.risk-text .level-caution::before {
  background-color: var(--risk-color-caution-second);
}
.risk-text .level-warning::before {
  background-color: var(--risk-color-warning-second);
}
.risk-text .level-severe::before {
  background-color: var(--risk-color-severe-second);
}


.scale-bar {
	font-size: 1rem;
  color: #1f1f1f;
  display: inline-block;
}

/* .bar {
  display: flex;
  width: calc(100% - 4.2rem);
  height: .8rem;
  border: .1rem solid #1f1f1f;
  box-sizing: border-box;
	position: relative;
}

.bar .block:nth-child(1),
.labels > span:nth-child(1) {
	width: 8%
}
.bar .block:nth-child(2),
.labels > span:nth-child(2) {
	width: 8%
}
.bar .block:nth-child(3),
.labels > span:nth-child(3) {
	width: 32%
}
.bar .block:nth-child(4),
.labels > span:nth-child(4) {
	width: 32% 
}
.bar .block:nth-child(5),
.labels > span:nth-child(5) {
	width: 40%
}

.bar .block:nth-child(5)::before {
	content: 'km';
	position: absolute;
	right: -2rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.4rem;

} */

.black {
  background-color: #1f1f1f;
}

.white {
  background-color: #fff;
}

.labels {
  display: flex;
	width: 100%;
}

/***공지사항 상세***/
.bord {
	width:100%;
	border-top:.2rem solid var(--krds-color-light-secondary-80);
}
.bord > h4{
	display:flex;
	padding: 1.6rem;
  background-color: var(--krds-light-color-surface-secondary-subtler);
}

.bordlist dl{
	display: flex;
}

.view_info {
	border-bottom: .1rem solid #cbd7e7;
	border-left: 0;
	border-right: 0;
	padding: 1.6rem;
	width: 100%;
	display: flex;
}

.view_info dl {
	min-width: 26rem;
	position: relative;
	margin-left: 1.6rem;
}

.view_info dl::before,
.view_file > dl > dt::before {
	content: "";
	display: inline-block;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: #33467e;
	margin-left: -10px;
	margin-right: 6px;
	vertical-align: middle;
}

.view_info dl dt {
	display: inline-block;
	color: #33467e;
	font-weight: 600;
}
.view_info dl dd {
	display: inline-block;
}
.view_body {
	padding: 2rem 2.4rem 5rem;
	border-bottom: .1rem solid #cbd7e7;
}
.view_body > div {
	min-height: 38rem;
}

/* 이길용 */
.view_image {
	max-width: 60rem;
  text-align: center;
  margin: auto;
}

.view_file > dl {
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	border-bottom: .1rem solid #cbd7e7;;
}

.view_file > dl > dt {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	position: relative;
	margin-left: 1.6rem;
	color: #33467e;
	font-weight: 600;
}


/*이전글 다음글*/
.prevNext_list {
	border: .1rem solid #cbd7e7;
	border-radius: 1.2rem;
	padding: 1.2rem 2rem;
}

.prevNext_list > dl {
	overflow: hidden;
	padding: 2rem;
}

.prevNext_list > dl:first-child {
	border-bottom: .1rem solid #cbd7e7;

}

.prevNext_list > dl > dt {
	display: inline-block;
	vertical-align: middle;
	text-align: right;
	position: relative;
}

.prevNext_list > dl > dd {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
	padding-left: 3rem;
	width: calc(100% - 7.5rem);
}



/*ellipsis*/
.ellips {
	width: calc(100%);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
/* //이길용 */

.cell-ellipsis {
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.detail-wrap {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}



.file_list > li > a {display: block; position: relative; padding-left: 25px;}
.box_list {width: 100%; text-align: right; margin-top: 25px;}
.list_btn {border: 1px solid #7D7D7D; min-width:50px; padding:0px 20px; height: 40px; line-height: 40px; position: relative; display: block;}



/*sns*/
.sns-map-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-top: 2.4rem;
}

.sns-time {
  padding: .8rem 1.6rem;
	text-align: center;
	background: var(--krds-light-color-surface-secondary-subtler);
	border-bottom: .1rem solid var(--krds-light-color-border-secondary-light);
	border-top: .2rem solid var(--krds-color-light-secondary-80);
}

.sns-img {
	width: calc(100%);
	padding: 1.6rem;
	display: block;
	text-align: center;
}

.sns-img a{
	display: block;
}

/* 과거자료검색 */
.day-range {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
	width: 100%;
	font-size: 1.5rem;
}

.day-range button {
  border: none;
  outline: none;
  color: #fff;
  height: 4rem;
  cursor: pointer;
  transition: background 0.2s;
	width: calc(100% / 6);
}

.day-range button:nth-child(1) {
  background: var(--krds-color-high-contrast-primary-20);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.day-range button:nth-child(2) {
  background: var(--krds-color-high-contrast-primary-30);
}

.day-range button:nth-child(3) {
  background: var(--krds-color-high-contrast-primary-40);
}

.day-range button:nth-child(4) {
  background: var(--krds-color-high-contrast-primary-80);
	color: #fff;
}

.day-range button:nth-child(5) {
  background: #ffe0a3;
}

.day-range button:nth-child(6) {
  background: #ffc95c;
}

.day-range button:nth-child(7) {
  background: #ffb114;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.day-range button:hover {
  filter: brightness(1.1);
}


.sch-filter-box {
  padding: var(--krds-padding-10);
  border-radius: var(--krds-radius-xlarge1);
  background: var(--search-box-filter-color-background);
  margin-top: var(--krds-pc-gap-layout-h2-h3);
}

.sch-filter-box .filter-form {
  display: flex;
  align-items: normal;
  gap: var(--krds-gap-7);
  max-width: 100%;
  flex-wrap: wrap;
}

.sch-filter-box .filter-form > div {
  display: inline-flex;
  align-items: center;
  gap: var(--krds-gap-4);
  width: 100%;
  max-width: 26.5rem;
}

.sch-filter-box .filter-form > div:nth-child(4) {
  max-width: fit-content;
}

.sch-filter-box .filter-form > div:nth-child(4) .krds-input {
  width: 37rem;
}

.sch-filter-box .filter-form .label {
  font-weight: var(--krds-font-weight-bold);
  white-space: nowrap;
  min-width: 6.3rem;
}

.sch-filter-box .filter-form .krds-form-select {
  width: 100%;
  /* max-width: 18rem; */
}


/***산불위험통계***/
/*main-row 테이블*/
.main-row.active th,
.main-row.active td {
  background-color: var(--krds-color-light-primary-5) !important;
	color: var(--krds-light-color-text-primary) !important;
}

.main-row > th {
  position: relative;
  padding-right: 2.4rem; /* 아이콘 들어갈 공간 확보 */
  cursor: pointer;
}

.main-row > th::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 3rem;
  height: 2.6rem;
  transform: translateY(-50%);
  background: no-repeat center / contain;
  background-image: url(../../images/component/icon/ico_angle.svg);
  background-color: #dcdfe1;
  border-radius: 0.3rem;
}

.main-row.active > th::after {
  transform: translateY(-50%) rotate(-180deg);
}

/*detail-row 테이블*/
.main-row > td > span,
.detail-row > td > span {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	align-items: center;
}

.detail-row {
  display: none;
}

.detail-row.active {
  display: table-row;
}

.detail-row.active .detail-content {
  width: 100%;            
}

.detail-row th,
.detail-row td {
	width: calc(100% / 12);
}

.detail-content {
  width: 0;                
  overflow: hidden;
  transition: width 0.3s ease;
  display: inline-block;   
  white-space: nowrap;     
}


/*테이블*/
 /* .tbl {
   white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.tbl th,
.tbl td {
  white-space: normal;
}

.tbl td {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767px) {
  .tbl th,
  .tbl td {
    white-space: normal;
  }
}  */

/*산불위험통계 테이블 colgroup값 고정*/
.fire-risk-table thead th:nth-child(1) { min-width: 15rem;}
.fire-risk-table thead th:nth-child(2) { width: 10%; }
.fire-risk-table thead th:nth-child(3) { width: 12%; }
.fire-risk-table thead th:nth-child(4) { width: 7%; }
.fire-risk-table thead th:nth-child(5) { width: 7%; }
.fire-risk-table thead th:nth-child(6) { width: 7%; }
.fire-risk-table thead th:nth-child(7) { width: 7%; }
.fire-risk-table thead th:nth-child(8) { width: 10%; }
.fire-risk-table thead th:nth-child(9) { width: 7%; }
.fire-risk-table thead th:nth-child(10) { width: 7%; }
.fire-risk-table thead th:nth-child(11) { width: 7%; }
.fire-risk-table thead th:nth-child(12) { width: 7%; }

.fire-risk-table tbody td:nth-child(1) { min-width: 15rem;}
.fire-risk-table tbody td:nth-child(2) { width: 10%; }
.fire-risk-table tbody td:nth-child(3) { width: 12%; }
.fire-risk-table tbody td:nth-child(4) { width: 7%; }
.fire-risk-table tbody td:nth-child(5) { width: 7%; }
.fire-risk-table tbody td:nth-child(6) { width: 7%; }
.fire-risk-table tbody td:nth-child(7) { width: 7%; }
.fire-risk-table tbody td:nth-child(8) { width: 10%; }
.fire-risk-table tbody td:nth-child(9) { width: 7%; }
.fire-risk-table tbody td:nth-child(10) { width: 7%; }
.fire-risk-table tbody td:nth-child(11) { width: 7%; }
.fire-risk-table tbody td:nth-child(12) { width: 7%; }


/*search-list 레이아웃*/
.search-wrap {
	background: var(--krds-color-light-alpha-white100);
	border-radius: .8rem;
	padding: 1.6rem;
}

.search-section {
  background-color: var(--krds-light-color-surface-secondary-subtler);
  border-radius: var(--krds-radius-large2);
	border: .1rem solid var(--krds-color-light-secondary-10);
  padding: var(--krds-pc-padding-card-xsmall);
}

.search-section {
  display: flex;
  flex-direction: column;
  row-gap: 1.6rem;
  margin-bottom: 3.2rem;
}

.search-section h4 {
  position: relative;
  padding-top: 2rem; 
}

.search-section h4:first-of-type {
  padding-top: 0;
}

.search-section h4:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--krds-light-color-border-gray-light);
}

.search-list-top {
  padding-bottom: var(--krds-number-14);
}

.search-list-bottom {
	text-align: right;
}

.search-list-bottom.line {
  padding-top: 2.4rem;
  border-top: 0.1rem solid var(--krds-light-color-border-gray-light);
  justify-content: flex-end;
}

.search-list-bottom.gap {
	padding-top: 2.4rem;
  justify-content: flex-end;
	gap: .8rem;
}

/*검색결과 레이아웃*/
.itemlist {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.itemlist .font {
  font-size: 1.7rem;
  font-weight: 700;
}

.itemlist .font-lg {
  font-size: 2.1rem;
  font-weight: 700;
}

.itemlist .pr-color{
  color: var(--krds-color-light-primary-60);
}

/*button-list 레이아웃*/
.button-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/*tab-list 레이아웃*/
.tab-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .8rem;
  flex-basis: 100%
}

/*tree_list 레이아웃*/
.tree_list_wrap {
	overflow: auto;
	height: 50rem;
	padding: 0 1rem;
}

.tree_list {
	margin-bottom: 1rem;
}
.tree_list li {
	margin-bottom: .8rem;
}

.tree_list span {
	vertical-align: text-bottom;
}

.tree_list label {
	vertical-align: middle;
}

.tree_tit {
	position: relative;
	margin-bottom: .8rem;
	display: flex;
	align-items: center;
}

.btn_tree {
	width: 4.8rem;
	height: 2rem;
	background-image: url(/images/component/icon/folder_open.png), url(/images/component/icon/tree_minus.png);
	background-repeat: no-repeat;
	background-position: left center, right center;
}

.btn_tree.off {
	background-image: url(/images/component/icon/folder.png), url(/images/component/icon/tree_pluss.png);
}

.btn_tree.off + ul,
.tree_tit + ul {
  display: none;
}

.tree_dep2,
.tree_dep3 {
  display: none;
}

.tree_dep2.open,
.tree_dep3.open {
  display: block;
}

.tree_tit > span {
	margin-left: 1.2rem;
}

.tree_dep2 {
	margin: 0 0 0 2.6rem;
	display: block;
}

.tree_dep2 li {
	position: relative;
}

.tree_dep2 ul {
	margin: .4rem 0 0 3rem;
}

.tree_type {
	position: absolute;
	display: inline-block;
	width: 4.2rem;
	padding: .1rem 0;
	text-align: center;
	font-size: 1.5rem;
	right: 4px;
	top: 0;
	border-radius: .6rem;
}

.tree_type.f1 {
	background-color: #dcedff;
	color: #003675;
} 

.tree_type.f2 {
	background-color: #edf8f8;
	color: #038f35;
} 

/*도움말*/
.page-info-txt {
    position: relative;
    font-size: 1.5rem;
    margin-bottom: 3rem;
    background-color: #ffffff;
    border: 1px solid #b7b7b7;
    padding: 1.6rem 1.6rem 1.6rem 9rem;
    border-radius: 1rem;
    display: flex;
}

.page-info-txt::before {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: url(/images/component/icon/info-icon-blue.png) no-repeat left 0 top 0;
    left: 4rem;
    background-size: 100%;
}

/***form 레이아웃***/
.fieldset {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--krds-gap-4);
}

.form-col-group {
  display: flex;
  gap: var(--krds-gap-5);
}
.form-col-group .form-group {
  width: fit-content;
}

.form-layout {
	display: flex;
	gap: .8rem;
}

.form-login > button {
	width: 100%;
}

.button-border0 {
  border: none !important;
  height: auto !important;
  width: auto !important;
}

.form-table > tbody {
	border-top: .1rem solid var(--krds-light-color-border-gray-light);
}

.form-table > tbody > tr > th{
	 background: var(--krds-color-light-secondary-10) !important;
}

.notice {
	width: 14rem;
}

.form-group.notice02,
.form-group.notice02 .form-conts{
	width: 36rem;
}

.form-group.sns,
.form-group.sns .form-conts.calendar-conts {
	width: 21rem;
}

.form-info {
	display: flex;
	gap: 1.6rem;
	width: 100%;
	align-items: flex-end;
}

/*필수표기*/
.required {
  color: var(--krds-color-high-contrast-danger-60);
}

.pt_16 {
	padding-top: 1.6rem !important;
}


/***소속기관, 관련누리집 바로가기***/
.org-layer {
  display: none;
  position: absolute;
  left: 50%;
  top: -50%;
  transform: translate(-50%, -50%);
  width: 90rem;
  max-width: 95vw;
  background: #fff;
  box-shadow: 0 .4rem 3.2rem rgba(0, 0, 0, 0.2);
  z-index: 99;
  border-radius: 1.6rem;
  padding: 2.4rem;
  box-sizing: border-box;
}

.org-layer h2 {
  margin-bottom: 2.4rem;
  text-align: left;
}

.org-layer .close-btn {
  position: absolute;
  top: 2.4rem;	
  right: 2.4rem;
  background: none;
  border: none;
  font-size: 4rem;
  cursor: pointer;
  line-height: 1;
}

.org-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}

.org-grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  border: .1rem solid #eee;
  border-radius: 8px;
  font-size: 1.6rem;
  text-align: center;
}

.org-grid > div > a {
  display: flex;	
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}



/* ygjung */
#map {
	overflow: hidden;
	background-color: #EEF2F7;
	height: 200px;
	border-radius: 5px;
	align-content: center;
	position: relative;
}

.dtlShow {
	height: 35px;
	background-color: #eee;
	font-weight: bold;
	font-size: 14px;
	text-align: left;
	text-indent: 15px;
	border-radius: 5px;
	align-content: center;
}

.locationComment {
	font-size: 13px
	;text-align: left;
}

.loading-widget {
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	position: absolute;
	z-index: 1;
	background-color: #000;
	opacity: 10%;
}

.ui-datepicker-trigger {
	position: absolute;
	top: 50%;
	right: var(--krds-padding-7);
	transform: translateY(-50%);
}
/* //-ygjung */


/***팝업***/
.popup-box {
  position: fixed;
  /*top: 50%;
  left: 50%;
  width: 50rem;*/
  background: #fff;
  border-radius: 12px;
  /*transform: translate(-50%, -50%);*/
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  z-index: 9999;
  /*display: none;*/
  overflow: hidden;
}

.popup-box.show {
  display: block;
  /*animation: popupFade 0.25s ease-out;*/
}

@keyframes popupFade {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.popup-header {
  padding: 1rem 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: .1rem solid var(--krds-light-color-border-gray-light);
}

.popup-header .modal-title {
  text-align: center;
  width: 100%;
}

.popup-header button {
	min-width: 3rem;
}

.popup-title {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
}

.popup-close-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
}

.popup-conts {
  padding: 1.1rem 1.3rem;
  overflow-y: auto;
}

.popup-footer {
  padding: 0.85rem 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: .1rem solid var(--krds-light-color-border-gray-light);
}

.popup-24h-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

/**/
.point {
    color: #003675;
    text-decoration: underline;
    font-weight: var(--krds-font-weight-bold);
}

.pad-bottm {
	padding-bottom: var(--krds-number-9);
}

.pad-bottm08 {
	padding-bottom: .8rem;
}

.mg-top {
	margin-top: 1.6rem;
}

@keyframes slideDown {
  from { max-height: 0; opacity: 0; }
  to { max-height: 500px; opacity: 1; } /* 필요에 맞게 조절 */
}


@media screen and (max-width: 1150px) {
	.intro-group {
		display: flex;
		flex-wrap: wrap;
	}
  
	.main-info,
	.main-info-group {
		flex: 1 1 calc(50% - 3rem);
	}

	.short-group,
	.main-info-half {
		width: 100%;
	}

	.main-info-half {
		flex-direction: row;
	}

}

@media screen and (max-width: 1024px) {
	/* .intro-group {
		display: grid;
		grid-template-columns: 1fr;
	} 

	.main-info-half {
		flex-direction: column;
	}*/

	.main-info,
	.main-info-group {
		width: 100%;
		flex: auto;
	}

	.short-tit {
		margin-bottom: 2.4rem;
	}

	.form-group.notice,
	.form-group.notice .form-tit{
		width: 100%;
	}

	.form-group.notice02,
	.form-group.notice02 .form-conts,
	.krds-btn.medium.notice02 {
		width: 100%;
	}

	.form-group.sns,
	.form-group.sns .form-conts.calendar-conts {
		width: 100%;
	}
	.krds-btn.medium.notice{
		width: 100%;
	}

	.sns-map-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
	
	.content-inner {
		align-items: normal;
		margin: auto;
		width: 100%;
		gap: 0;
	}

	.left-menu {
		display: none;
	}

  .org-layer {
    width: 70rem;
    height: auto;
  }
  .org-grid {
    grid-template-columns: repeat(3, 1fr);
  }

	/*팝업*/
	.popup-box {
    width: 42rem;
  }
  .popup-conts {
    height: 30rem;
  }
  
  .popup-box:nth-child(1) {
    top:30px !important;
    left: 50% !important;
    height:auto !important;
    transform: translateX(-50%);
  }

  .popup-box:nth-child(2) {
    top:130px !important;
    left: 50% !important;
    height:auto !important;
    transform: translateX(-50%);
  }

  .popup-box:nth-child(3) {
    top:230px !important;
    left: 50% !important;
    height:auto !important;
    transform: translateX(-50%);
  }

  .popup-box:nth-child(4) {
    top:330px !important;
    left: 50% !important;
    height:auto !important;
    transform: translateX(-50%);
  }

  .popup-box:nth-child(5) {
    top:430px !important;
    left: 50% !important;
    height:auto !important;
    transform: translateX(-50%);
  }

  .popup-box:nth-child(6) {
    top:530px !important;
    left: 50% !important;
    height:auto !important;
    transform: translateX(-50%);
  }
  
  /* .mnotice > li > a > p {
  	max-width: 325px;
  } */
}

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

	/* .form-group.notice,
	.form-group.notice .form-tit{
		width: 100%;
	}

	.form-group.notice02,
	.form-group.notice02 .form-conts,
	.krds-btn.medium.notice02 {
		width: 100%;
	}

	.form-group.sns,
	.form-group.sns .form-conts.calendar-conts {
		width: 100%;
	}
	.krds-btn.medium.notice{
		width: 100%;
	} */

	.sns-map-list {
    grid-template-columns: repeat(4, 1fr);
  }

	.form-tit {
		min-width: 5rem;
	}

	.form-tit.sub {
		min-width: .8rem;
	}

}

@media (max-width: 960px) {
  .fieldset,
  .form-col-group {
    flex-direction: column;
  }
  .form-col-group .form-group .form-group {
    width: 100%;
  }
}

@media (max-width: 768px) {
  
	.form-info.sub {
		flex-direction: column;
	}

  .tab-list > button {
    flex: 1 1 auto !important;
    min-width: max-content;
  }

  .tab-list > button {
    flex: 1 1 calc(50% - 0.8rem); /* gap 고려해서 2개씩 */
    width: calc(50% - 0.8rem);
    text-align: center;
  }

  .form-group.label {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

	.main-info-half {
		flex-direction: column;
	}
	
  .view_info{
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
	}

	.view_info dl {
		width: calc(100%);
		height: 3.2rem;
		line-height: 3.2rem;
	}

	.view_info dl:last-child {
		border-bottom: 0;
	}

	.sns-map-list {
    grid-template-columns: repeat(2, 1fr);
  }

	.search-section {
		padding: 2.4rem;
	}

	.w-sm {
		width: 100%;
	}

	.org-layer {
    width: 90vw;
    height: auto;
    padding: 2.4rem;
  }

  .org-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
  }

	/*팝업*/
	.popup-box {
    width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
	}

  .popup-title {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .org-layer {
    padding: 2rem;
    border-radius: 1.2rem;
  }
  .org-layer h2 {
    font-size: 1.25rem;
  }
  .org-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .org-grid > div {
    height: 6rem;
    font-size: 0.95rem;
  }

	.main-info-group {
		flex: none;
		width: 100%;
	}

	.location-tit {
		font-size: 1.5rem;
	}

	.level-text > li > span {
		width: 11rem;
	}

	/*팝업*/
	.popup-box {
    width: 92vw;
  }

  .popup-header,
  .popup-footer {
    padding: 0.75rem 1rem;
  }

  .popup-conts {
    padding: 0.9rem 1rem;
  }
}