@charset "utf-8";

#wrap {
	
}
/* li 전체를 좌우 2컬럼(내용 / 다운로드 버튼)으로 고정 */
.detail.comm-detail .attach .file_list li {
  display: flex;
  align-items: flex-start;    /* 위쪽 기준 정렬 */
}

/* 왼쪽: 아이콘 + 제목 + 해시 (세로 스택) */
.detail.comm-detail .attach .file_list li .name {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;            /* 내부 요소 줄바꿈 허용 */
  align-items: flex-start;
}

/* 기존 아이콘은 그대로 두고, 위치만 왼쪽에 고정 */
.detail.comm-detail .attach .file_list li .name .ico {
  /* 원래 있던 background-image, width, height 등은 그대로 사용됨 */
  margin-right: 8px;          /* 제목과 간격만 살짝 */
}

/* 제목 영역: 아이콘 옆에 오고, 너비 확보 */
.detail.comm-detail .attach .file_list li .name .tit {
  flex: 1 1 auto;
  /* 줄바꿈 허용 (기본 block이라면 이 부분은 생략 가능) */
}

/* 🔹 해시 영역: 항상 제목 "아래 줄"에 나오도록 */
.detail.comm-detail .attach .file_list li .name .hash_box_per_file {
  flex-basis: 100%;           /* 무조건 새 줄로 내려가도록 */
  margin-top: 6px;
  padding-left: 6rem;         /* 아이콘 폭만큼 들여쓰기 (아이콘 아래에 맞게) */
  font-size: 13px;
  color: #444;
}

/* 해시 타이틀/값 스타일 */
.detail.comm-detail .attach .file_list li .name .hash_box_per_file .tit {
  margin-bottom: 2px;
  font-weight: 500;
}

.detail.comm-detail .attach .file_list li .name .hash_box_per_file .hash {
  word-break: break-all;
  font-family: "Consolas", "Courier New", monospace;
}

/* 오른쪽: 다운로드 버튼은 항상 맨 끝 */
.detail.comm-detail .attach .file_list li .down {
  flex: 0 0 auto;
  margin-left: 16px;
  display: flex;
  align-items: center;        /* 버튼 세로 가운데 정렬 */
}

.file-hash-label {
    margin-top: 1.8rem;
}

#wrap .wrap {
	margin: 0 10rem;
}

#wrap .icons {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#wrap .icons.icons_search {
	background-image: url("/ko/images/img/icon/search.png");
}

#wrap .icons.icons_menu {
	background-image: url("/ko/images/img/icon/menu.png");
}

#wrap .icons.icons_globe {
	background-image: url("/ko/images/img/icon/globe.png");
}

#wrap .icons.icons_play {
	background-image: url("/ko/images/img/icon/play.png");
}

#wrap .icons.icons_stop {
	background-image: url("/ko/images/img/icon/stop.png");
}

#wrap .icons.icons_home {
	background-image: url("/ko/images/img/icon/home.png");
}

#wrap.active #header {
	
}

#wrap.active #header:after {
	height: 45rem;
}

#wrap.active #header:before {
	opacity: 1;
	visibility: visible;
}

#wrap.active #header .gnb .dp2 {
	top: 10rem;
	opacity: 1;
	visibility: visible;
	transition: all 300ms;
}

#wrap.allmenu #header {
	
}

#wrap.allmenu #header:after {
	height: 45rem;
}

#wrap.allmenu #header:before {
	opacity: 1;
	visibility: visible;
}

#wrap.allmenu #header .gnb .dp2 {
	top: 10rem;
	opacity: 1;
	visibility: visible;
	transition: all 300ms;
}

#header {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 9998;
}

#header:before {
	content: '';
	position: absolute;
	z-index: 5;
	top: 10rem;
	left: 0;
	width: 100%;
	height: 0.1rem;
	background: #eeeeee;
	transition: all 300ms;
	opacity: 0;
	visibility: visible;
	pointer-events: none;
}

#header:after {
	content: '';
	position: absolute;
	z-index: 4;
	top: 10rem;
	left: 0;
	width: 100%;
	height: 0;
	background: #ffffff;
	transition: all 300ms;
	box-shadow: 0 1.4rem 3.6rem rgb(0 0 0/ 6%);
}

#header .wrap {
	position: relative;
	z-index: 6;
	height: 10rem;
	display: flex;
	align-items: center;
	background: #ffffff;
}

#header .logo {
	flex: 0 0 auto;
	margin: 0 2rem 0 0;
}

#header .logo a {
	display: block;
	width: 16.8rem;
	height: 4.8rem;
	background: url("/ko/images/img/logo.png") no-repeat center/contain;
}

#header .care {
	flex: 0 0 auto;
	margin: 0 8rem 0 0;
	display: flex;
	align-items: center;
}

.care a {
	display: inline-block;
	width: 8rem;
}

#header .care img {
width: 8rem;
margin-right: -5rem;
}

#header .gnb {
	flex: 1;
	transition: all 300ms;
}

#header .gnb .dp1 {
	display: flex;
	align-items: center;
}

#header .gnb .dl1 {
	position: relative;
}

#header .gnb .dl1.on .da1 {
	color: #0045C9;
}

#header .gnb .dl1.on .da1:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.25rem;
	background: #0045c9;
}

#header .gnb .da1 {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 10rem;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-size: 1.8rem;
	/* font-size:2.4rem; */
	font-weight: 600;
	color: #33363d;
	min-width: 15rem;
}
/* #header .gnb .da1 span{
	font-size:2.4rem;
} */

#header .gnb .dp2 {
	position: absolute;
	top: 7rem;
	padding: 2rem 0 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: all 100ms;
}

#header .gnb .dl2 {
	
}

#header .gnb .da2 {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 4.8rem;
	/* font-size: clamp(1.4rem, 1.25vw, 1.6rem);; */
	font-size:1.8rem;
	font-weight: 400;
	color: #33363d;
}

/* #header .gnb .da2:hover {
	font-weight: 600;
	color: #0045C9;
} */
#header .gnb .da1:hover ,
#header .gnb .da2:hover,
#header .gnb .da3:hover,
#header .gnb .da4:hover{
	font-weight: 600;
	color: #0045C9!important;
}

/* 웹접근성 포커싱 */
#header .gnb .dl1:focus-within > .dp2 {
	opacity: 1;
	visibility: visible;
}

/* 웹접근성 포커싱 */
#header .gnb .dl1:focus-within > .dp2 {
	opacity: 1;
	visibility: visible;
}

/* 웹접근성 포커싱 */
#header .gnb .dl2:focus-within > .dp3 {
	opacity: 1;
	visibility: visible;
}

/* 웹접근성 포커싱 */
#header .gnb .dl3:focus-within > .dp4 {
	opacity: 1;
	visibility: visible;
}

#header .search {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0 1rem;
}

#header .search input {
	width: 26.1rem;
	height: 4.8rem;
	border-radius: 4.8rem;
	border: 0.1rem solid #a7b3cc;
	padding: 0 2rem;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
}

#header .search button {
	width: 4.8rem;
	height: 4.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4.8rem;
	background: #33363d;
}

#header .search button .icons {
	width: 3rem;
	height: 3rem;
}

#header .util {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0 1rem;
}

#header .util .btn {
	width: 4.8rem;
	height: 4.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4.8rem;
	background: #33363d;
}

#header .util .btn .icons {
	width: 3rem;
	height: 3rem;
}

#footer {
	position: relative;
	padding: 8rem 0;
	border-top: 0.1rem solid #C7C7C7;
}

#footer .wrap {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

#footer .content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#footer .side {
	flex: 0 0 auto;
	margin: auto 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#footer .logo {
	margin: 0 0 6rem;
}

#footer .logo a {
	display: flex;
	width: 27.8rem;
	height: 8rem;
}

#footer .logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#footer .cite {
	line-height: 1.5;
	font-size: clamp(1.6rem, 1.25vw, 1.6rem);
	font-weight: 400;
	color: #909090;
}

#footer .link {
	margin: 2rem 0 0 0;
	display: flex;
	align-items: center;
	gap: 2rem;
}

#footer .link a {
	display: block;
	line-height: 1.5;
	font-size: clamp(1.8rem, 1.41vw, 1.8rem);
	font-weight: 500;
	color: #33363d;
}

#footer .mark {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0 0 2rem;
}

#footer .mark a {
	display: flex;
}

#footer .mark img {
	max-width: 100%;
}

#footer .social {
	display: flex;
	align-items: center;
	gap: 1rem;
}

#footer .social a {
	width: 4.8rem;
	height: 4.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

#footer .social img {
	max-width: 100%;
}

#main {
	margin: 10rem 0 0 0;
	word-break: break-word;
}

#main .visual {
	padding: 1rem 0 0;
	margin: 0 0 4rem;
}

#main .visual .wrap {
	position: relative;
}

#main .visual .video {
	width: 100%;
	height: 81rem;
	background: rgb(0 0 0/ 20%);
	border-radius: 3rem;
	overflow: hidden;
}

#main .visual .video video, #main .visual .video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

#main .visual .control {
	position: absolute;
	z-index: 5;
	bottom: 8rem;
	left: 8rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

#main .visual .control .play, #main .visual .control .stop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 3.2rem;
	border: 0.1rem solid #ffffff;
}

#main .visual .control .play .icons {
	width: 1.3rem;
	height: 1.5rem;
	display: block;
}

#main .visual .control .stop .icons {
	width: 0.8rem;
	height: 1.3rem;
	display: block;
}

#main .quick {
	margin: 0 0 4rem;
}

#main .quick .list {
	
}

#main .quick .list ul {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

#main .quick .list li {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

#main .quick .list li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 18rem;
}

#main .quick .list li img {
	margin: 0 auto 1rem;
	width: 8rem;
	height: 8rem;
	object-fit: contain;
}

#main .quick .list li p {
	line-height: 1.5;
	font-size: clamp(1.5rem, 1.56vw, 2rem);
	font-weight: 600;
	color: #33363d;
}

#main .notice {
	margin: 0 0 4rem;
}

#main .notice .new-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 10rem;
	margin: 0 0 2rem 0;
}

#main .notice .new-header .title {
	line-height: 1.5;
	font-size: clamp(3.2rem, 3.13vw, 4rem);
	font-weight: 700;
	color: #1e2124;
}

#main .notice .new-header .more {
	
}

#main .notice .new-header .more a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.2rem;
	font-size: clamp(1.4rem, 1.09vw, 1.5rem);
	color: #909090;
}

#main .notice .new-header .more a:after {
	content: '';
	width: 3rem;
	height: 3rem;
	background: url("/ko/images/img/icon/more.png") no-repeat center/contain
}

#main .notice .list {
	
}

#main .notice .list ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6rem;
}

/* #main .notice .list li {
	word-break:break-word;
} */

#main .notice .list li .inner {
	display: block;
	border-radius: 3rem;
	overflow: hidden;
	background: #f8f8fa;
}

#main .notice .list li .con {
	padding: 4rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 23.8rem;
}

#main .notice .list li .label {
	margin: 0 0 0.8rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	height: 3.5rem;
	border-radius: 0.4rem;
	border: 0.1rem solid #e7e7e7;
	background: #fff;
	font-size: clamp(1.5rem, 1.09vw, 1.5rem);
	color: #909090;
}

#main .notice .list li .subject {
	margin: 0 0 2rem 0;
	line-height: 1.5;
	font-size: clamp(2.4rem, 1.88vw, 2.4rem);
	font-weight: 700;
	color: #1e2124;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

#main .notice .list li .date {
	text-align: right;
	width: 100%;
	line-height: 1.5;
	font-size: clamp(1.5rem, 1.09vw, 1.5rem);
	font-weight: 600;
	color: #1F3472;
}

#main .notice .list li .img {
	width: 100%;
	height: 36rem;
	border-radius: 3rem 3rem 0 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

#main .notice .list li .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#main .community {
	margin: 0 0 4rem;
}

#main .community .wrap {
	display: flex;
	gap: 5.7rem;
	/* max-height: 50rem; */
}

#main .community .new-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 10rem;
	margin: 0 0 2rem 0;
}

#main .community .new-header .title {
	line-height: 1.5;
	font-size: clamp(3.2rem, 3.13vw, 4rem);
	font-weight: 700;
	color: #1e2124;
}

#main .community .new-header .more {
	
}

#main .community .new-header .more a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.2rem;
	font-size: clamp(1.4rem, 1.09vw, 1.5rem);
	color: #909090;
}

#main .community .new-header .more a:after {
	content: '';
	width: 3rem;
	height: 3rem;
	background: url("/ko/images/img/icon/more.png") no-repeat center/contain
}

#main .community .educate {
	flex: 1;
}

#main .community .educate .list {
	
}

#main .community .educate .list ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

#main .community .educate .list li {/* word-break: break-word; */min-width: 8rem;}

#main .community .educate .list li .inner {
	background: #fafafa;
	display: block;
	border-radius: 3rem;
	overflow: hidden;
}

#main .community .educate .list li .img {
	width: 100%;
	height: 28rem;
	border-radius: 3rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

#main .community .educate .list li .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#main .community .educate .list li .con {
	padding: 2rem;
}

#main .community .educate .list li .subject {
	line-height: 1.5;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 700;
	color: #000000;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

#main .community .educate .list li .date {
	margin: 2rem 0 0 0;
	line-height: 1.5;
	font-size: clamp(1.4rem, 1.09vw, 1.5rem);
	font-weight: 500;
	color: #909090;
}

#main .community .fame {
	position: relative;
	/* flex: 0 0 64rem; */
	/* padding: 6rem 4rem; */
	flex: 0 0 clamp(20rem, 50vw, 80rem);
	padding: 150px 48px 48px 48px;
	height: 100%;
	border-radius: 3rem;
	overflow: hidden;
	/* background: #000; */
	display: flex;
	flex-direction: column;
	/* align-items: Center; */
	/* margin-top:3rem; */
}

#main .community .fame:before {
	content: '';
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: #000000; */
	/* opacity: 0.7; */
}

#main .community .fame .bg {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background: url("/ko/images/img/fame.png") no-repeat center/cover; */
	/* opacity: 0.7; */
	background: url("/ko/images/img/img-awd.png") no-repeat center 0% / cover;
}

#main .community .fame .ico {
	position: relative;
	z-index: 3;
	margin: 0 0 0.4rem;
	align-self: flex-start;
}

#main .community .fame .tit {
	position: relative;
	z-index: 3;
	line-height: 1.5;
	/* font-size: clamp(2.4rem, 1.88vw, 2.4rem); */
	font-size: clamp(2.4rem, 1.88vw, 6rem);
	font-weight: 700;
	color: #ffffff;
	/* margin: 0 0 6.5rem; */
	margin-bottom: 1rem;
}

#main .community .fame .tit h1,
#main .community .fame .tit p {
	font-size: clamp(2.4rem, 1.88vw, 6rem);
	color: #ffffff;
	line-height: 1.5;
}

#main .community .fame .tit p {
	color: #D29D75;
}

#main .community .fame .con {
	position: relative;
	z-index: 3;
	width: 100%;
}

#main .community .fame .con ul {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

#main .community .fame .con li {
	position: relative;
	display: flex;
	align-items: center;
	/* padding: 0 2rem; */
	/* width: 100%; */
	/* height: 4.8rem; */
	width: auto;
	height: 4rem;
	gap: 1rem;
	justify-content: flex-end;
}
#main .community .fame .con li:last-child {
	min-width: 60px;
}
#main .community .fame .con li:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 1.2rem;
	border: 0.1rem solid transparent;
	border-radius: 1.2rem;
	/* background: linear-gradient(80deg, #FF993F, #FFE682, #784600) border-box; */
	/* -webkit-mask: linear-gradient(#fff 0 0) padding-box,
		linear-gradient(#fff 0 0); */
	/* -webkit-mask-composite: xor; */
	/* mask-composite: exclude; */
	/* pointer-events: none; */
}

#main .community .fame .con .type {
	line-height: 1.5;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 700;
	color: #ffffff;
	display: flex;
	align-items: center;
	word-break:keep-all;
}

#main .community .fame .con .part {
	line-height: 1.5;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 500;
	color: #ffffff;
	display: flex;
	align-items: center;
	word-break:keep-all;
}

#main .community .fame .con .part:after {
	content: '';
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 0.4rem;
	background: #ffffff;
	margin: 0 0 0 1rem;
}

#main .community .fame .con .name {
	line-height: 1.5;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 200;
	color: #ffffff;
	display: flex;
	align-items: center;
	min-width: 36px;
}

#main .dataroom {
	position: relative;
	margin: 0 0 4rem;
	padding: 3.7rem 0 5.2rem 0;
	overflow: hidden;
}

#main .dataroom:after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 3rem;
	width: 59rem;
	height: 100%;
	background: url("/ko/images/img/data.png") no-repeat bottom right;
	pointer-events: none;
}

#main .dataroom .wrap {
	display: flex;
	position: relative;
}

#main .dataroom .wrap:before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	width: 67.2rem;
	height: 100%;
	border-radius: 2rem;
	background: #eff5ff;
}

#main .dataroom .left {
	position: relative;
	z-index: 6;
	flex: 0 0 48rem;
	display: flex;
	flex-direction: column;
}

#main .dataroom .right {
	position: relative;
	z-index: 4;
	flex: 1 1;
	max-width: calc(100% - 48rem);
}

#main .dataroom .slider {
	padding: 4rem 0;
}

#main .dataroom .slider .swiper-slide {
	width: auto;
	opacity: 0;
	visibility: hidden;
	transition: all 150ms;
}

#main .dataroom .slider .swiper-slide a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26rem;
	height: 35.7rem;
	border: 0.1rem solid #c7c7c7;
	box-shadow: 0 2rem 2rem rgb(63 70 90/ 15%);
	overflow: hidden;
}

#main .dataroom .slider .swiper-slide img {
	display: block;
	max-width: 100%;
	height: auto;
}

#main .dataroom .slider .swiper-slide-active {
	opacity: 1;
	visibility: visible;
}

#main .dataroom .slider .swiper-slide-active ~ .swiper-slide {
	opacity: 1;
	visibility: visible;
}

#main .dataroom .new-header {
	padding: 4rem;
}

#main .dataroom .new-header .title {
	line-height: 1.5;
	font-size: clamp(2rem, 1.88vw, 2.4rem);
	font-weight: 700;
	color: #1f3472;
	margin: 0 0 0.4rem;
}

#main .dataroom .new-header .text {
	line-height: 1.5;
	font-size: clamp(2.4rem, 2.50vw, 3.6rem);
	font-weight: 700;
	color: #000000;
}

#main .dataroom .pager {
	margin: auto 0 0 0;
	padding: 4rem;
	display: flex;
	align-items: center;
}

#main .dataroom .pager .swiper-pagination-bullet {
	margin: 0 0.5rem;
	width: 1rem;
	height: 1rem;
	border-radius: 1rem;
	border: 0.1rem solid #1f3472;
	text-indent: -999rem;
	overflow: hidden;
}

#main .dataroom .pager .swiper-pagination-bullet-active {
	background: #1f3472;
}

#container {
	position: relative;
	padding: 10rem 0 0 0;
}

#title {
	margin: 0 0 6rem 0;
}

#title .wrap {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 30rem;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#title .wrap .image {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 2rem;
	overflow: hidden;
	background: #e0e0e0;
}

#title .wrap .image:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgb(0 0 0/ 20%);
}

#title .wrap .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#title .wrap .title {
	/* background-image: url("/ko/images/img/title.jpg") */;
	position: relative;
	z-index: 2;
	font-size: clamp(3.2rem, 3.13vw, 3.6rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 2rem 0;
}

/* #title .wrap .title .MENU00000420 { 알림마당
	background-image: url("/ko/images/ncsc/visual_01.jpg");
}

#title .wrap .title .MENU00000418 { 센터소개
	background-image: url("/ko/images/ncsc/visual_02.jpg");
}

#title .wrap .title .MENU00000014 { 
	background-image: url("/ko/images/ncsc/visual_03.jpg");
}

#title .wrap .title .MENU00000419 { 주요업무
	background-image: url("/ko/images/ncsc/visual_04.jpg");
}

#title .wrap .title .MENU00000423 { 자료실
	background-image: url("/ko/images/ncsc/visual_05.jpg");
}

#title .wrap .title .MENU00000421 { 참여마당
	background-image: url("/ko/images/ncsc/visual_06.jpg");
} */

#title .wrap .breadcrumb {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

#title .wrap .breadcrumb p {
	display: flex;
	align-items: center;
	line-height: 2.4rem;
	font-size: clamp(1.2rem, 1.09vw, 1.5rem);
	color: #ffffff;
}

#title .wrap .breadcrumb p:after {
	content: '';
	margin: 0 0.4rem;
	width: 1.6rem;
	height: 1.6rem;
	background: url("/ko/images/img/icon/arrow_wt.png") no-repeat
}

#title .wrap .breadcrumb p:last-of-type:after {
	display: none;
}

#title .wrap .breadcrumb .icons {
	width: 1.6rem;
	height: 1.6rem;
	display: block;
	margin: 0 0.4rem;
}

#content {
	
}

#content .wrap {
	display: flex;
	align-items: flex-start;
	gap: 8rem;
}

#content .aside {
	flex: 0 0 auto;
	width: 32rem;
}

#content .aside .title {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 16rem;
	line-height: 1.5;
	font-size: clamp(2rem, 2.50vw, 3.2rem);
	font-weight: 700;
	color: #ffffff;
	border-radius: 1rem 5rem 0 0;
	background: linear-gradient(101.45deg, #155BB3 0%, #1F3472 100%);
}

#content .aside .menu {
	border: 0.1rem solid #e8e8e8;
	padding: 1.6rem;
}

#content .aside .menu .dp1 {
	
}

#content .aside .menu .dl1 {
	border-bottom: 0.1rem solid #e8e8e8;
}

#content .aside .menu .dl1:last-of-type {
	border-bottom: 0;
}

#content .aside .menu .da1 {
	display: flex;
	align-items: center;
	padding: 0;
	height: 7rem;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 400;
	color: #000;
	transition: all 300ms;
}

#content .aside .menu .da1.arw {
	
}

#content .aside .menu .da1.arw:after {
	content: '';
	margin: 0 0 0 auto;
	flex: 0 0 auto;
	width: 3.2rem;
	height: 3.2rem;
	background: url("/ko/images/img/icon/menu_arw.png") no-repeat center/contain;
}

#content .aside .menu .dp2 {
	padding: 1rem 0 0;
	display: block;
}

#content .aside .menu .dl2 {
	border-bottom: 0.1rem dotted #d8d8d8;
}

#content .aside .menu .da2 {
	display: flex;
	align-items: center;
	padding: 0 1.2rem;
	height: 5.2rem;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);;
	font-weight: 400;
	color: #000;
}

#content .aside .menu .da2:hover {
	background: #fafafa;
}

#content .aside .menu .da2:after {
	content: '';
	margin: 0 0 0 auto;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	background: url("/ko/images/img/icon/menu_link.png") no-repeat center/contain;
}

#content .aside .menu .dl1.on {
	border: 0;
}

#content .aside .menu .dl1.on .da1 {
	padding: 0 1rem;
	background: #f8f8fa;
	color: #1f3472;
}

/* 현재 페이지(li.is-active)인 경우 색 덮어쓰기 */
#content .aside .menu .dl1.is-active .da1 {
	/* background: darkturquoise; */
	color: #fff;
}


/* has-child인 li의 span을 기준점으로 */
.side-list__li.has-child > span {
  position: relative;
}

/* 화살표 클릭 영역 (a::after 있는 부분에 덮어씌우기) */
.side-list__li.has-child > span > .depth-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;         /* span 전체 높이랑 맞춤 */
  width: 20%;       /* 화살표 영역 가로폭 (필요하면 24~40px 정도로 조절) */
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* 제목 텍스트가 화살표 아래까지 안 먹도록 오른쪽 패딩 */
.side-list__li.has-child > span > a {
  display: block;
  padding-right: 32px;   /* depth-toggle width 만큼 */
}


#content .aside .menu .dl1.on .da1.arw:after {
	background: url("/ko/images/img/icon/menu_arw_on.png") no-repeat
		center/contain;
}

/* li 자체를 활성화 */
#content .aside .side-list__li.is-active > span > a{
    /* background-color: darkturquoise !important; */
    color: darkblue! important;
	font-weight:800
}

/* 클릭 영역 전체가 칠해지도록 */
#content .aside .side-list__li > span {
    display: block;
}

/* #content .section{flex:1 1;max-width:calc(100% - 8rem - 32rem);padding:0 0 120px 0;} */
#content .section {
	flex: 1 1;
	max-width: calc(100% - 8rem - 32rem);
	padding: 0 0 120px 0;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#content .section .header {
	margin: 0 0 2rem 0;
	line-height: 9.4rem;
	font-size: clamp(2.2rem, 3.13vw, 3.6rem);
	font-weight: 700;
	color: #000;
	border-bottom: 0.2rem solid #d8d8d8;
}

/* 추가된거1 start */
#content .section {
	flex: 1 1;
	max-width: calc(100% - 8rem - 32rem);
	padding: 0 0 120px 0;
}

#content .section .header {
	margin: 0 0 2rem 0;
	line-height: 9.4rem;
	font-size: clamp(2.2rem, 3.13vw, 3.6rem);
	font-weight: 700;
	color: #000;
	border-bottom: 0.2rem solid #d8d8d8;
}

#content .boxType1 {
	display: flex;
	padding: 6rem;
	align-items: center;
	gap: 4rem;
	align-self: stretch;
	border-radius: 2rem;
	border: 1px solid #E1E4E8;
	background: #FFF;
}

#content .boxType1::after, #content .boxType::before {
	display: none;
}

#content .boxType1 .h3Type2 {
	font-size: clamp(1.8rem, 1.88vw, 2.4rem);
	line-height: 1.5;
}

#content .contents-title {
	display: flex;
	gap: 1rem;
	font-weight: 700;
	margin-top: 4rem;
	margin-bottom: 3rem;
}

#content .contents-title span {
	font-size: clamp(2.1rem, 1.56vw, 2rem);
}

#content .contents-title::after {
	content: "";
	display: flex;
	width: 6px;
	height: 6px;
	background: #CE2A25;
}

#content .content-normal {
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	line-height: 1.8;
	font-weight: 300;
}

#content .content-normal h3 {
	color: #1F3472;
	font-weight:bold;
}

#content .content-normal h6 {
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -0.036rem;
}

#content .section, #tab-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#content .content-img img {
	width: 100%;
}

#content .contents-box {
	display: flex;
	padding: 4rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
	align-self: stretch;
	border-radius: 3rem;
	background: #F8F8FA;
	/* margin-top: 2rem; */
}

#content .contents-box h1 {
	font-size: clamp(1.8rem, 1.88vw, 2.4rem);
	font-weight: 700;
}

#content .contents-box p {
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 300;
}

#content .contents-box span {
	font-size: clamp(1.4rem, 1.09vw, 1.5rem);
	color: #999;
}

#content #contentTab {
	display: flex;
	align-items: flex-start;
	align-self: stretch;
	width: 100%;
}

#content #contentTab li {
	width: 100%;
}

#content #contentTab li .content-tab-button {
	width: 100%;
	display: flex;
	padding: 2rem;
	justify-content: center;
	align-items: center;
	flex: 1 0 0;
	color: #939AA7;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 500;
	line-height: 150%; /* 2.7rem */
	border-radius: 1rem;
	background: #F8F8FA;
	min-height: 8rem;
}

#content #contentTab li .content-tab-button.on {
	border-radius: 1rem;
	border: 2px solid #1F3472;
	background: #FFF;
	box-shadow: 0 4px 10px 0 rgba(35, 67, 164, 0.20);
	/* 아래삭제하면안됨(탭메뉴 타이틀임) */
	color: #1F3472!important; 
}

#content .content-cards .card-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

#content .content-cards .card-item {
	display: flex;
	padding: 2rem;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	flex: 1 0 0;
	align-self: stretch;
	border-radius: 1rem;
	border: 1px solid #A7B3CC;
	background: #FFF;
}

#content .content-cards .card-item .card-tit {
	display: flex;
	padding: 1rem 0;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	align-self: stretch;
	border-bottom: 1px solid #E6E6EF;
	color: #1F3472;
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
	line-height: 150%; /* 3rem */
}

#content .content-cards .card-item .card-txt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	align-self: stretch;
}

#content .content-cards .card-item .card-txt h3 {
	color: #303030;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 600;
	line-height: 150%; /* 2.7rem */
}

#content .content-cards .card-item .card-txt p {
	color: #303030;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 300;
	line-height: 150%; /* 2.4rem */
}

.btn.btn-fill {
	display: flex;
	padding: 2rem;
	align-items: center;
	gap: 1rem;
	align-self: stretch;
	border-radius: 1rem;
	background: #1F3472;
	transition: opacity 0.2s;
}

.btn.btn-fill:hover {
	opacity: 0.9;
}

.btn.btn-fill span {
	color: #FFF;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 150%; /* 2.7rem */
}

#subTab {
	display: flex;
	padding: 1rem;
	align-items: center;
	gap: 2rem;
}

#subTab .sub-tab-button {
	display: flex;
	padding: 1rem 2rem;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	border-radius: 99.9rem;
	color: #939AA7;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 400;
	line-height: 150%; /* 3rem */
	transition: background 0.2s, color 0.2s;
}

#subTab .sub-tab-button:hover {
	background: #1F3472;
	color: #FFF;
}

#subTab .sub-tab-button.on {
	background: #1F3472;
	color: #FFF!important;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 700;
}

#content .section-img {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#content .section-img img {
	width: 100%;
}

#content .sec__desc {
	width: 100%;
	text-align: center;
	color: #909090;
	text-align: center;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
}

#content .contact-box {
	display: flex;
	padding: 2rem;
	align-items: center;
	align-self: stretch;
	border-radius: 1rem;
	border: 2px solid #1F3472;
	background: #FFF;
	box-shadow: 0 4px 10px 0 rgba(35, 67, 164, 0.20);
}

#content .contact-box span {
	color: #1F3472;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 600;
	line-height: 150%; /* 2.7rem */
}

#content .contact-box span a {
	color: #1F3472;
	font-weight: 400;
}

#content .contents-text {
	max-width: 132rem;
}

#content .contents-text p {
	margin: 0 0 2rem;
	line-height: 1.5;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 300;
	color: #000;
	word-break: keep-all;
}

#content .contents-image {
	max-width: 132rem;
}

#content .contents-image img {
	display: block;
	margin: 0 auto 20px;
	max-width: 100%;
	width:auto;
}

#content .contents-image img:last-of-type {
	margin-bottom: 0;
}

#content .contents-table {
	border-top: 0.2rem solid #A7B3CC;
	max-width: 132rem;
	width:100%;
}

#content .contents-table table {
	min-width: 100%;
	border-collapse: collapse;
}

#content .contents-table table tr {
	height: 5rem;
	border-bottom: 0.1rem solid #E8E8E8;
	text-align: center;
}

#content .contents-table table th {
	padding: 2rem 1rem;
	line-height: 1.8;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 600;
	color: #0f0f0f;
	border-right: 0.1rem solid #E8E8E8;
}

#content .contents-table table td {
	padding: 2rem 1rem;
	line-height: 1.8;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 400;
	color: #33363d;
	border-right: 0.1rem solid #E8E8E8;
}

#content .contents-table table td p,
#content .contents-table table td.tdP {
	display: block;
	color: #585858;
	text-align: left;
}

#content .contents-table table th:last-child, #content .contents-table table td:last-child
	{
	border-right: 0;
	border-left: 1px solid #e8e8e8;
}

#content .contents-table table thead {
	
}

#content .contents-table table thead th {
	background: #F8F8FA;
}

#content .contents-table table tbody {
	
}

#content .contents-table table tbody th {
	font-weight: 500;
	background: #F8F8FA;
	width:20rem;
}
#content .contents-table table tbody th img{
	width:auto
}

#content .contents-table table tbody td {
	font-weight: 400;
	background: #FFFFFF;
}

#content .contents-consider {
	max-width: 132rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#content .contents-consider .cons-tit {
	border-radius: 1rem;
	height: 5rem;
	background: #1f3472;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: clamp(1.5rem, 1.56vw, 2rem);
	font-weight: 700;
	color: #ffffff;
}

#content .contents-consider .cons-txt {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#content .contents-consider .cons-txt dl {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	border-radius: 1rem;
	border: 0.1rem solid #a7b3cc;
	padding: 2rem;
}

#content .contents-consider .cons-txt dl dt {
	display: flex;
	line-height: 1.2;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 600;
	color: #1f3472;
	gap: 0.4rem;
}

#content .contents-consider .cons-txt dl dt:before {
	content: '';
	width: 2.9rem;
	height: 2.1rem;
	background: url(../img/img-cons-tit.png) no-repeat center/contain;
}

#content .contents-consider .cons-txt dl dd {
	line-height: 1.5;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 300;
	color: #303030;
}

#content .contents-consider .cons-info {
	border-radius: 1rem;
	border: 0.2rem solid #1f3472;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#content .contents-consider .cons-info .txt1 {
	line-height: 1.5;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 700;
	color: #1f3472;
	text-align: center;
}

#content .contents-consider .cons-info .txt2 {
	line-height: 1.5;
	font-size: clamp(1.6rem, 1.25vw, 1.6rem);
	font-weight: 600;
	color: #909090;
	text-align: center;
}

#content .contents-consider .cons-info .txt3 {
	background: #f8f8fa;
	padding: 2rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

#content .contents-consider .cons-info .txt3 p {
	line-height: 1.5;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 300;
	color: #303030;
	display: flex;
	align-items: center;
}

#content .contents-consider .cons-info .txt3 p:before {
	content: '';
	margin: 0.1rem 1rem 0;
	width: 3px;
	height: 3px;
	border-radius: 3px;
	background: #303030;
}

#content .contents-description {
	/* max-width: 132rem; */
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#content .contents-description .desc {
	border-top: 0.1rem solid #e8e8e8;;
}

#content .contents-description .desc dl {
	display: flex;
	line-height: 1.8;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	border-bottom: 0.1rem solid #e8e8e8;
}

#content .contents-description .desc dl dt {
	width: 40%;
	padding: 2rem 1rem;
	background: #f8f8fa;
	text-align: center;
	font-weight: 600;
	flex-direction: column;
	color: #0f0f0f;
	word-break: keep-all;
	display: flex;
	justify-content: center; /* 가로 가운데 */
	align-items: center;
}

#content .contents-description .desc dl dt b {
	font-weight: 600;
}

#content .contents-description .desc dl dd {
	width: 60%;
	padding: 2rem 1rem;
	background: #ffffff;
	text-align: left;
	font-weight: 300;
	color: #585858;
	border-left: 0.1rem solid #e8e8e8;
	word-break: keep-all;
}

#content .contents-description .text {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

#content .contents-description .text.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

#content .contents-description .text dl {
	display: flex;
	flex-direction: column;
	padding: 2rem;
	border-radius: 1rem;
	border: 0.1rem solid #a7b3cc;
	text-align: center;
}

#content .contents-description .text dl dt {
	padding: 1rem;
	line-height: 1.5;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 700;
	color: #1f3472;
}

#content .contents-description .text dl dd {
	padding: 2rem 1rem 0;
	line-height: 1.5;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 300;
	color: #303030;
	border-top: 0.1rem solid #e8e8e8;
}

#content .contents-cardnews {
	padding: 8rem 0;
	max-width: 132rem;
	overflow: hidden;
}

#content .contents-cardnews ul {
	
}

#content .contents-cardnews li {
	width: 30rem!important;
}

#content .contents-cardnews .inner {
	display: block;
	box-shadow: 0 1rem 2rem rgb(0 0 0/ 10%);
	background: #ffffff;
	border: 0.1rem solid #e8e8e8;
	border-radius: 1.2rem;
	overflow: hidden;
}

#content .contents-cardnews .img {
	width: 100%;
	aspect-ratio: 360/210;
	height: auto;
	overflow: hidden;
}

#content .contents-cardnews .img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#content .contents-cardnews .con {
	padding: 2.4rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#content .contents-cardnews .cate {
	line-height: 1;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 600;
	color: #0045c9;
}

#content .contents-cardnews .subject {
	line-height: 1.2;
	font-size: clamp(1.5rem, 1.25vw, 1.8rem);
	font-weight: 600;
	color: #33363d;
}

#content .contents-consider .qna-con {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
	align-self: stretch;
	width: 100%;
}

#content .contents-consider .qna-con dl {
	display: flex;
	padding: 2rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
	align-self: stretch;
	border-radius: 1rem;
	border: 1px solid #A7B3CC;
	background: #FFF;
}

#content .contents-consider .qna-con dl dt {
	display: flex;
	padding-bottom: 1rem;
	align-items: center;
	gap: 1rem;
	align-self: stretch;
	border-bottom: 1px solid #E6E6EF;
	color: #303030;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 600;
	line-height: 150%; /* 2.7rem */
}

#content .contents-consider .qna-con dl dt strong {
	color: #1F3472;
	text-align: center;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 700;
	line-height: 150%;
}

#content .contents-consider .qna-con dl dd {
	color: #303030;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 150%; /* 2.4rem */
}

#content .contents-box .text-blue.title {
	color: #0045C9;
	text-align: center;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 700;
	line-height: 150%; /* 3rem */
}

#content .contents-box .dot_list li {
	color: #303030;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 150%; /* 2.4rem */
	list-style: disc;
}

#content .video-container {
	border-radius: 2rem;
	overflow: hidden;
}

#content .video-container video {
	width: 100%;
}

#content .row-tbl-title p {
	display: flex;
	padding: 1rem 2rem;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	align-self: stretch;
	border-radius: 1rem;
	background: #1F3472;
	color: #FFF;
	text-align: center;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-style: normal;
	font-weight: 700;
	line-height: 150%; /* 3rem */
}

#content .contents-table table th:last-child, #content .contents-table table td:last-child .basicList
	{
	/* text-align: left; */
}

#content .contents-table table th:last-child, #content .contents-table table td:last-child h3
	{
	/* text-align: left; */
}
h3.alert-tit {
    text-align: left;
    margin-bottom: 1rem;
    font-size: larger;
    font-weight:bold;
}
ul.basicList {
    text-align: left;
}

#content .content-noti-box {
	display: flex;
	padding: 4rem;
	align-items: center;
	gap: 4rem;
	align-self: stretch;
	border-radius: 1rem;
	border: 2px solid #1F3472;
	background: #FFF;
	box-shadow: 0 4px 10px 0 rgba(35, 67, 164, 0.20);
}

#content .content-noti-box p {
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 400;
	line-height: 150%;
}

#content .link-wrap .law-list .icon {
	width: 2.4rem;
	height: 2.4rem;
	aspect-ratio: 1/1;
}

#content .link-wrap .law-list li {
	display: flex;
	align-items: center;
	align-self: stretch;
	border-radius: 0.8rem;
	border: 1px solid #E8E8E8;
	margin-top: 1rem;
}

#content .link-wrap .law-list li a {
	display: flex;
	padding: 2rem;
	align-items: center;
	gap: 2rem;
	align-self: stretch;
	color: #33363D;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 400;
	line-height: 150%; /* 2.7rem */
}

/* 추가된거1 end */

/* 추가된거2 start */
/* 경보안내 */
.alert-card {
	display: grid;
	grid-template-columns: 220px 1fr auto; /* gap: 4rem; */
	padding: 4rem;
	border-radius: 1rem;
	border: 2px solid #1F3472;
	background: #FFF;
	box-shadow: 0 4px 10px 0 rgba(35, 67, 164, 0.20);
	margin-bottom:4rem;
}

@media ( max-width : 960px) {
	.alert-card {
		grid-template-columns: 1fr;
		padding: 3rem;
		gap: 1rem;
	}
	.alert-card__date {
		justify-self: flex-start;
	}
	.alert-card__gauge {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

/* 텍스트 */
.alert-card__title {
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 700;
	line-height: 150%; /* 3rem */
}

.alert-card__desc {
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 300;
	line-height: 150%; /* 3rem */
}

.alert-card__body {
    margin-left: 4rem;
    margin-right: 4rem;
}

.lv {
	font-weight: 800;
}

.lv--1 {
	color: #0045C9;
} /* 관심 */
.lv--2 {
	color: #FF993F;
} /* 주의 */
.lv--3 {
	color: #FF5B25;
} /* 경계 */
.lv--4 {
	color: #E61515;
} /* 심각 */

/* 날짜 */
.alert-card__date {
	display: flex;
	gap: 0.4rem;
	color: #909090;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 150%; /* 2.25rem */
}

.ico-clock {
	color: #909090;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 150%; /* 2.25rem */
	inline-size: 20px;
	block-size: 20px;
	display: inline-block;
	background:
		url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M12.9933 12.5865C13.3863 12.7175 13.811 12.5051 13.942 12.1122C14.073 11.7192 13.8606 11.2945 13.4676 11.1635L13.2305 11.875L12.9933 12.5865ZM10.418 10.9375H9.66797C9.66797 11.2603 9.87454 11.5469 10.1808 11.649L10.418 10.9375ZM11.168 7.01739C11.168 6.60318 10.8322 6.26739 10.418 6.26739C10.0038 6.26739 9.66797 6.60318 9.66797 7.01739H10.418H11.168ZM13.2305 11.875L13.4676 11.1635L10.6551 10.226L10.418 10.9375L10.1808 11.649L12.9933 12.5865L13.2305 11.875ZM10.418 10.9375H11.168V7.01739H10.418H9.66797V10.9375H10.418ZM17.918 10H17.168C17.168 13.7279 14.1459 16.75 10.418 16.75V17.5V18.25C14.9743 18.25 18.668 14.5563 18.668 10H17.918ZM10.418 17.5V16.75C6.69005 16.75 3.66797 13.7279 3.66797 10H2.91797H2.16797C2.16797 14.5563 5.86162 18.25 10.418 18.25V17.5ZM2.91797 10H3.66797C3.66797 6.27208 6.69005 3.25 10.418 3.25V2.5V1.75C5.86162 1.75 2.16797 5.44365 2.16797 10H2.91797ZM10.418 2.5V3.25C14.1459 3.25 17.168 6.27208 17.168 10H17.918H18.668C18.668 5.44365 14.9743 1.75 10.418 1.75V2.5Z' fill='%23909090'/></svg>")
		no-repeat center/contain;
}
/* .ico-clock::before, .ico-clock::after { content:""; position:absolute; inset:auto 0 50% 50%; width:2px; background:currentColor; transform-origin:bottom; } */

/* 게시판 추가 */
#content .borad {
	margin: 0 0 2rem;
}

#content .borad table {
	width: 100%;
	border-collapse: collapse;
	border-top: 0.2rem solid #1F3472;
}

#content .borad table thead {
	
}

#content .borad table tr {
	text-align: center;
	border-bottom: 0.1rem solid #e8e8e8;
}

#content .borad table tr.notice {
	background: #f6f9ff;
}

#content .borad table th {
	position: relative;
	height: 6.6rem;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
}

#content .borad table th:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 0.1rem;
	height: 2.6rem;
	background: #e8e8e8;
	margin-top: -1.3rem;
}

#content .borad table td {
	height: 6rem;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
}

#content .borad table td a.link {
	text-align: left;
	width: 100%;
	display: inline-block;
}

#content .borad table td a.link:hover {
	text-decoration: underline;
}
/* 게시판 뷰 */
#content .detail.comm-detail {
	
}

#content .detail.comm-detail .inner {
	
}

#content .detail.comm-detail .inner .attach .tit a:hover {
	text-decoration: underline;
}

#content .detail.comm-detail .head {
	margin: 0 0 2rem 0;
	padding: 2rem 0;
	text-align: center;
	border-top: 0.2rem solid #1F3472;
	border-bottom: 0.1rem solid #e8e8e8;
}

#content .detail.comm-detail .head .subject {
	line-height: 1.5;
	font-size: clamp(1.8rem, 1.88vw, 2.4rem);
	font-weight: 500;
	color: #1e2124;
}

#content .detail.comm-detail .head .info {
	margin: 2rem 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

#content .detail.comm-detail .head .info p {
	display: flex;
	align-items: center;
	line-height: 1.5;
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
	font-weight: 500;
	color: #979ba4;
	gap: 2rem;
}

#content .detail.comm-detail .head .info p:after {
	content: '';
	width: 0.2rem;
	height: 1.6rem;
	background: #e8e8e8;
	transform: rotate(25deg);
}

#content .detail.comm-detail .head .info p:last-of-type:after {
	display: none;
}

#content .detail.comm-detail .cont {
	margin: 0 0 2rem 0;
	padding: 2rem 0;
	line-height: 1.5;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 400;
	color: #1e2124;
}

#content .detail.comm-detail .attach {
	padding: 2rem;
	border-radius: 1.2rem;
	border: 0.1rem solid #e8e8e8;
}

#content .detail.comm-detail .attach ul {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#content .detail.comm-detail .attach li {
	display: flex;
	align-items: center;
	/* gap: 2rem; */
	margin-bottom: 1rem;
	border-top: 1px solid #e5e5e5;
	padding-top: 1rem;
}
#content .detail.comm-detail .attach li:first-child {
    border-top: none;
}

#content .detail.comm-detail .attach li .name {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 1rem;
}

#content .detail.comm-detail .attach li .name .ico {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
}

#content .detail.comm-detail .attach li .name .ico.pdf {
	background: url("/ko/images/img/icon/pdf.svg") no-repeat center/contain;
}

#content .detail.comm-detail .attach li .name .tit {
	/* line-height: 1.5; */
	font-size: 1.6rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

#content .detail.comm-detail .attach li .name .kb {
	padding: 0.4rem;
	border-radius: 0.2rem;
	background: #F8F8FA;
	line-height: 1;
	font-size: clamp(1.3rem, 1.02vw, 1.3rem);
	color: #909090;
}

#content .detail.comm-detail .attach li .down {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

#content .detail.comm-detail .attach li .down a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.8rem;
	height: 4.8rem;
}

#content .detail.comm-detail .attach li .down a .icons {
	width: 2.4rem;
	height: 2.4rem;
	display: block;
	background: url("/ko/images/img/download-02.svg");
}

#content .detail.comm-detail .button {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 0.1rem solid #e8e8e8;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#content .detail.comm-detail .button .flex {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

#content .detail.comm-detail .button .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.4rem;
	height: 6rem;
	padding: 0 2rem;
	min-width: 16rem;
	border-radius: .4rem;
	border: 0.1rem solid transparent;
	font-size: clamp(1.8rem, 1.41vw, 1.8rem);
	font-wight: 600;
	color: #303030;
}

#content .detail.comm-detail .button .btn_01 {
	border-color: #1F3472;
	background: #1F3472;
	color: #ffffff!important;
}

#content .detail.comm-detail .button .btn_02 {
	border-color: #d4d9e4;
	background: #ffffff;
	color: #33363d;
}

#content .paging {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.8rem;
	margin: 2rem 0;
	padding: 2rem;
}

#content .paging a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: .6rem;
	width: 4rem;
	height: 4rem;
	font-size: clamp(1.3rem, 1.25vw, 1.7rem);
	color: #464c53;
}

#content .paging a:hover {
	color: #1F3472;
}

#content .paging a.current {
	background: #1F3472;
	color: #ffffff!important;
}

#content .paging a.prev {
	width: auto;
	padding: 0 0.8rem;
}

#listArea .pagination a.prev {
	width: auto;
	padding: 0 0.8rem;
}

#content .paging a.prev:before {
	content: '';
	width: 2rem;
	height: 2rem;
	flex: 0 0 auto;
	background: url("/ko/images/icon/paging_arrow.svg") no-repeat center/contain;
	transform: rotate(0);
}

#listArea .pagination a.prev:before {
	content: '';
	width: 2rem;
	height: 2rem;
	flex: 0 0 auto;
	background: url("/ko/images/icon/paging_arrow.svg") no-repeat center/contain;
	transform: rotate(0);
}

#content .paging a.prev:hover:before {
	background: url("/ko/images/icon/paging_arrow_hover.svg") no-repeat center/contain;
	transform: rotate(180deg);
}

#listArea .pagination a.prev:hover:before {
	background: url("/ko/images/icon/paging_arrow_hover.svg") no-repeat center/contain;
	transform: rotate(180deg);
}

#content .paging a.next {
	width: auto;
	padding: 0 0.8rem;
}

#listArea .pagination a.next {
	width: auto;
	padding: 0 0.8rem;
}

#content .paging a.next:after {
	content: '';
	width: 2rem;
	height: 2rem;
	flex: 0 0 auto;
	background: url("/ko/images/icon/paging_arrow.svg") no-repeat center/contain;
	transform: rotate(180deg);
}

#listArea .pagination a.next:after {
	content: '';
	width: 2rem;
	height: 2rem;
	flex: 0 0 auto;
	background: url("/ko/images/icon/paging_arrow.svg") no-repeat center/contain;
	transform: rotate(180deg);
}

#content .paging a.next:hover:after {
	background: url("/ko/images/icon/paging_arrow_hover.svg") no-repeat center/contain;
	transform: rotate(0deg);
}

#listArea .pagination a.next:hover:after {
	background: url("/ko/images/icon/paging_arrow_hover.svg") no-repeat center/contain;
	transform: rotate(0deg);
}

#content .paging p.dot {
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

#listArea .pagination p.dot {
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

#content .paging p.dot:before {
	content: '';
	width: 2rem;
	height: 2rem;
	background: url("/ko/images/icon/dot.svg") no-repeat center/contain;
}

#listArea .pagination p.dot:before {
	content: '';
	width: 2rem;
	height: 2rem;
	background: url("/ko/images/icon/dot.svg") no-repeat center/contain;
}


#content .search {
	margin: 0 0 3rem;
	padding: 3rem;
	border-radius: 1.2rem;
	background: #F8F8FA;
	width: 100%;
	justify-items: center;
}

#content .search .form {
	/* display: flex; */
	align-items: center;
	justify-content: flex-start;
	gap: 1.2rem 2.4rem;
	flex-wrap: wrap;
}

#content .search .form dl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
}

#content .search .form dl dt {
	font-size: clamp(1.4rem, 1.25vw, 1.7rem);
	font-weight: 700;
	color: #000000;
}

#content .search .form dl dd {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

#content .search .form .sel {
	display: flex;
	align-items: center;
	justify-content: center;
}

#content .search .form .sel select {
	width: 18rem;
	max-width: 100%;
	height: 4.8rem;
	border-radius: 0.6rem;
	padding: 0 1.6rem;
	font-size: clamp(1.4rem, 1.25vw, 1.7rem);
	border: 0.1rem solid #e8e8e8
}

#content .search .form .inp {
	flex: 1;
	margin-right:2rem;
}

#content .search .form .inp input {
	/* width: 28rem; */
	width: auto;
	max-width: 100%;
	height: 4.8rem;
	border-radius: 0.6rem;
	padding: 0 1.6rem;
	font-size: clamp(1.4rem, 1.25vw, 1.7rem);
	border: 0.1rem solid #e8e8e8
}

#content .search .form .btn {
	flex: 0 0 auto;
}

#content .search .form .btn button {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 2rem;
	height: 4.8rem;
	border-radius: 0.6rem;
	background: #1F3472;
	color: #ffffff;
	font-size: clamp(1.4rem, 1.25vw, 1.7rem);
	gap: 0.8rem;
}

#content .search .form .btn button .icons {
	width: 2.8rem;
	height: 2.8rem;
	display: block;
}

#content .search .filter {
	margin: 2.4rem 0 0 0;
	padding: 2.4rem 0 0 0;
	display: flex;
	align-items: center;
	border-top: 0.1rem solid #e8e8e8;
}

#content .search .filter .tit {
	margin: 0 1.6rem 0 0;
	font-size: clamp(1.4rem, 1.25vw, 1.7rem);
	font-weight: 700;
	color: #1e2124;
}

#content .search .filter .tit em {
	color: #1F3472;
}

#content .search .filter .btn {
	display: flex;
	align-items: center;
	margin: 0 .8rem 0 0;
}

#content .search .filter .btn .reset {
	width: 4rem;
	height: 4rem;
	border-radius: 4rem;
	border: 0.1rem solid #cdd1d5;
	display: flex;
	align-items: center;
	justify-content: center;
}

#content .search .filter .btn .reset .icons {
	width: 1.6rem;
	height: 1.6rem;
	display: block;
	transition: all 300ms;
}

#content .search .filter .btn .reset:hover .icons {
	transform: rotate(180deg)
}

#content .search .filter .con {
	overflow: hidden;
}

#content .search .filter .con ul {
	overflow: hidden;
	overflow-x: auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	max-width: 100%;
	gap: 0.8rem;
}

#content .search .filter .con li {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4rem;
	height: 4rem;
	border: 0.1rem solid #cdd1d5;
	padding: 0 1.2rem;
	gap: 0.2rem;
	flex: 0 0 auto;
}

#content .search .filter .con li .txt {
	font-size: clamp(1.4rem, 1.25vw, 1.6rem);
}

#content .search .filter .con li .del {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#content .search .filter .con li .del .icons {
	width: 1.6rem;
	height: 1.6rem;
	display: block;
}

#content .borad-info {
	margin: 2rem 0;
	width: 100%;
}

#content .borad-info p {
	font-size: 1.7rem;
	font-weight: 300;
}

#content .borad-info strong {
	font-weight: 600;
	color: #0045C9;
}

#content .list {
	margin-bottom: 2rem;
}

#content .list ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

#content .list.list-ty2 {
	
}

#content .list.list-ty2 ul {
	grid-template-columns: 1fr;
	gap: 2rem;
}

#content .list.list-ty2 li {
	
}

#content .list.list-ty2 li .inner {
	display: flex;
	gap: 2rem;
	padding: 2rem;
	border-radius: 1.2rem;
	border: 0.1rem solid #e8e8e8;
	background: #ffffff;
}

#content .list.list-ty2 li .img {
	width: 100%;
	min-width: 16rem;
	max-width: 32rem;
	aspect-ratio: 160/90;
	overflow: hidden;
}

#content .list.list-ty2 li .img img {
	width: 100%;
	height: 100%;
	display: block;
}

#content .list.list-ty2 li .con {
	padding-top: 2rem;
	width:100%;
}

#content .list.list-ty2 li .type {
	margin-bottom: 0.4rem;
	line-height: 1.5;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 700;
	color: #33363d;
}

#content .list.list-ty2 li .title {
	margin-bottom: 0.4rem;
	line-height: 1.5;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 700;
	color: #33363d;
}

#content .list.list-ty2 li .desc {
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 300;
	color: #909090;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 표시할 줄 수 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}

#content .faq-consider .faq-dl {
	display: grid;
	gap: 1.2rem;
}

#content .faq-consider .faq-dl dl {
	display: flex;
	padding: 2rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
	border-radius: 1rem;
	border: 1px solid #A7B3CC;
	background: #FFF;
	position: relative;
	overflow: hidden;
	margin: 0;
}

#content .faq-consider .faq-dl dl::before {
	content: "";
	position: absolute;
}

#content .faq-consider .faq-dl dt {
	margin: 0;
	width: 100%; /* padding:2.4rem 2.8rem 2.0rem; */
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	cursor: pointer;
	outline: none;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 600;
	line-height: 150%; /* 2.7rem */
	align-items: center;
}

#content .faq-consider .faq-dl dt::before {
	content: "Q.";
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 700;
	color: #1F3472;
}

/* 내용 패널 */
#content .faq-consider .faq-dl dd {
	margin: 0;
	padding: 2rem 0;
	line-height: 1.8;
	border-top: 1px solid #E6E6EF;
	display: none;
	width: 100%;
}

#content .faq-consider .faq-dl dd p {
	color: #303030;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	font-weight: 300;
	line-height: 150%;
}
/* 상태: 열림 */
#content .faq-consider .faq-dl dl.open>dd {
	display: block;
}

#content .faq-consider .faq-dl dl.open>dt::after {
	transform: rotate(-180deg);
}

/* 접근성 포커스 */
#content .faq-consider .faq-dl dt:focus-visible {
	outline: 2px solid var(- -deep);
	outline-offset: 2px;
}

#content .faq-consider .faq-dl dt::after {
	content: "";
	margin-left: auto;
	flex: 0 0 2.2rem;
	width: 3.2rem; /* 혹시 flex 컨텍스트 아닐 때 대비 */
	height: 3.2rem;
	background-color: #155BB3; /* 아이콘 색상은 여기서 결정 */
	/* WebKit 계열 */
	-webkit-mask-image:
		url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 10 L12 15 L7 10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain; /* 표준 */
	mask-image:
		url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 10 L12 15 L7 10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	transition: transform var(- -speed, .24s) ease;
}

/* 책자 */
#content .list.list-ty3 .book-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4rem;
}

#content .list.list-ty3 .book-list li .thumb {
	max-width: 34rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e8e8e8;
	border-radius: .8rem;
	overflow: hidden;
}

#content .list.list-ty3 .book-list li .thumb img {
	width: 100%;
}

#content .list.list-ty3 .book-list li a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	flex-direction: column;
	text-align: center;
}

#content .list.list-ty3 .book-list li strong {
	font-size: clamp(1.8rem, 1.88vw, 2.2rem);
	font-weight: 600;
}

#content .list.list-ty3 .book-list li p {
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	color: #909090;
	margin-top: 1rem;
}

#content .published-card {
	display: flex;
	gap: 2rem;
	margin-top: 4rem;
}

#content .published-card .body-image {
	border: 1px solid #e8e8e8;
	border-radius: .8rem;
	overflow: hidden;
	max-width: 24rem;
	width: 100%;
	height: auto;
}

#content .published-card img {
	display: flex;
	width: 100%;
	object-fit: contain;
}

#content .btn-white {
	background: #fff;
	border: 1px solid #1F3472;
	padding: 1.4rem 2rem;
	border-radius: .6rem;
	color: #1F3472;
	font-weight: 500;
	box-shadow: 0 4px 10px 0 rgba(35, 67, 164, 0.20);
}

#content .show_link {
	background: #1F3472;
	border: 1px solid #1F3472;
	padding: 1.4rem 2rem;
	border-radius: .6rem;
	color: #fff;
	font-weight: 500;
	box-shadow: 0 4px 10px 0 rgba(35, 67, 164, 0.20);
}

#content .cat-grid {
	display: grid;
	gap: 1.6rem;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media ( max-width : 1200px) {
	#content .cat-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media ( max-width : 768px) {
	#content .cat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

#content .cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	min-height: 16rem;
	padding: 2.4rem 1.6rem;
	border-radius: 1rem;
	border: 1px solid #A7B3CC;
	background: #FFF;
	border-radius: 1.6rem;
	background: #fff;
	font-size: clamp(1.5rem, 1.41vw, 1.8rem);
	line-height: 1.4;
	color: #0f2167;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.03s;
}

#content .cat:focus-visible {
	outline: 2px solid #0045C9;
	outline-offset: 2px;
}

#content .cat:active {
	transform: translateY(1px);
}

#content .cat__icon img {
	width: 7rem;
	height: 7rem;
	display: block;
}

#content .cat__label {
	text-align: center;
	font-weight: 700;
}

#content .cat:hover {
	border-color: #0045C9;
	box-shadow: 0 0 0 4px #dde5ff, 0 12px 24px rgba(47, 91, 255, 0.16);
}

#content .cat.is-selected {
	border-color: #0045C9;
	box-shadow: 0 0 0 4px #dde5ff, 0 12px 24px rgba(47, 91, 255, 0.16);
	background: #F3F5FF;
}

#content .cat.is-selected .cat__label {
	color: #0045C9;
}

#content .btn-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 2rem;
}

#content .btn-wrap .down-btn {
	display: flex;
	height: 6.8rem;
	padding: 2rem 4rem;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	border-radius: 1rem;
	border: 2px solid #1F3472;
	background: #1F3472;
	box-shadow: 0 4px 10px 0 rgba(35, 67, 164, 0.20);
	color: #FFF;
	text-align: center;
	font-size: clamp(1.6rem, 1.56vw, 2rem);
	font-weight: 600;
	line-height: 150%; /* 3rem */
	letter-spacing: -0.08rem;
	transition: transform 0.3s;
}

#content .btn-wrap .down-btn:hover {
	transform: translateY(-1rem);
}
/* motion */
@media (prefers-reduced-motion :no-preference) {
	.faq-dl dl.open>dd {
		animation: faq-reveal var(- -speed) ease;
	}
}
	@keyframes faq-reveal {
	from { 
		opacity:0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: none
	}
}
@media all and (max-width:960px) {
	#content .aside {
		display: none;
	}
	#content .section {
		max-width: 100%;
	}
	#content .section .header {
		line-height: 5rem;
		margin: 0 0 1rem;
	}
	#content .cat-grid {
		display: grid;
		gap: 1.6rem;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* 새로운거 */
@media (max-width: 1700px){
	#wrap.allmenu #header .gnb {
		opacity: 1;
		visibility: visible;
	}
	#header {
		
	}
	#header:before {
		display: none !important;
	}
	#header:after {
		display: none !important;
	}
	#header .logo {
		
	}
	#header .logo a {
		width: 13.3rem;
		height: 3.8rem;
	}
	#header .gnb {
		position: fixed;
		top: 10rem;
		left: 0;
		width: 100%;
		max-height: calc(100dvh - 10rem);
		overflow-y: auto;
		background: #fafafa;
		z-index: 9999!important;
		opacity: 0;
		visibility: hidden;
	}
	#header .gnb .dp1 {
		flex-direction: column;
		width: 100%;
		align-items: flex-start;
	}
	#header .gnb .dl1 {
		width: 100%;
		display: flex;
		align-items: flex-start;
		border-bottom: 0.1rem solid #e0e0e0;
		padding-bottom:1rem;
	}
	#header .gnb .da1 {
		min-width: 15rem;
		width: 22rem;
		line-height: 4rem;
		height: 6rem;
		justify-content: flex-start;
		padding: 0 2rem;
	}
	#header .gnb .da1 span{
		font-size:2.4rem;
	}
	
	#header .gnb .dp2 {
		position: relative;
		top: 0 !important;
		padding: 0 !important;
		flex: 1;
	}
	#header .gnb .dl2 {
		
	}
	#header .gnb .da2 {
		text-align: left;
		justify-content: flex-start;
		height: 4rem;
	}
	#header .care {
		margin: 0 auto 0 0;
		width: 4rem;
		height: 4rem;
	}
	#header .search {
		display: none;
	}
	#header .util {
		
	}
	#header .util .btn {
		width: 3.2rem;
		height: 3.2rem;
	}
	#header .util .btn .icons {
		width: 2rem;
		height: 2rem;
	}
	
}


/*1701px 이상=> 2depth까지만 보이게 */
@media (min-width: 1701px) {
	#gnb .dp3,
	#gnb .dp4,
	#gnb .dp5 {
		display: none;
	}
}

/*1700px 이하=> 5depth까지 모두 보이게 */
@media (max-width: 1700px) {

 	/* 2~5 depth를 전부 보이도록 */
	#gnb .dp2,
	#gnb .dp3,
	#gnb .dp4,
	#gnb .dp5 {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#gnb .dp2 > li,
	#gnb .dp3 > li,
	#gnb .dp4 > li,
	#gnb .dp5 > li {
		display: block;
		margin-top:0.5rem;
	}

	/*지금 dp2랑 비슷하게 했음 단계별로만 살짝 차이 주면 됨 */
	#gnb .da2 { padding-left:  0.5rem; font-size: 1.0rem; }
	#gnb .da3 {padding-left: 5rem;font-size: 1.6rem;}
	#gnb .da4 {padding-left: 10rem;font-size: 1.4em;}
	#gnb .da5 { padding-left:  3.5rem; font-size: 0.9rem; }

	#gnb .da3,
	#gnb .da4,
	#gnb .da5 {
		line-height: 1.6;
	}
}

@media all and (max-width:500px){
	#gnb .da2 { padding-left:  0rem; font-size: 1.0rem; }
	#gnb .da3 {padding-left: 2.5rem;font-size: 1.6rem;}
	#gnb .da4 {padding-left: 5rem;font-size: 1.3rem;}
	#gnb .da5 { padding-left:  3.5rem; font-size: 0.9rem; }
}

/* 추가된거2 end */
/* 원래는 769 픽셀이나 header가 겹쳐서 변경 */
@media all and (max-width:1050px) {
/* @media all and (max-width:1050px) { */
	#wrap {
		
	}
	#wrap .wrap {
		margin: 0 2rem;
	}
	#wrap.allmenu #header .gnb {
		opacity: 1;
		visibility: visible;
	}
	#header {
		
	}
	#header:before {
		display: none !important;
	}
	#header:after {
		display: none !important;
	}
	#header .logo {
		
	}
	#header .logo a {
		width: 13.3rem;
		height: 3.8rem;
	}
	#header .gnb {
		position: fixed;
		top: 10rem;
		left: 0;
		width: 100%;
		max-height: calc(100dvh - 10rem);
		overflow-y: auto;
		background: #fafafa;
		z-index: 100;
		opacity: 0;
		visibility: hidden;
	}
	#header .gnb .dp1 {
		flex-direction: column;
		width: 100%;
		align-items: flex-start;
	}
	#header .gnb .dl1 {
		width: 100%;
		display: flex;
		align-items: flex-start;
		border-bottom: 0.1rem solid #e0e0e0;
	}
	#header .gnb .da1 {
		min-width: 13rem;
		width: 14rem;
		line-height: 4rem;
		height: 6rem;
		justify-content: flex-start;
		padding: 0 2rem;
	}
	#header .gnb .dp2 {
		position: relative;
		top: 0 !important;
		padding: 0 !important;
		flex: 1;
	}
	#header .gnb .dl2 {
		
	}
	#header .gnb .da2 {
		text-align: left;
		justify-content: flex-start;
		height: 4rem;
	}
	#header .care {
		margin: 0 auto 0 0;
		width: 4rem;
		height: 4rem;
	}
	#header .search {
		display: none;
	}
	#header .util {
		
	}
	#header .util .btn {
		width: 3.2rem;
		height: 3.2rem;
	}
	#header .util .btn .icons {
		width: 2rem;
		height: 2rem;
	}
	#footer {
		padding: 2rem 0 4rem;
	}
	#footer .wrap {
		flex-direction: column;
		gap: 4rem;
	}
	#footer .logo {
		margin: 0 0 4rem 0;
		width: 19.3rem;
		height: 5.5rem;
	}
	#footer .logo a {
		
	}
	#footer .side {
		flex-direction: row;
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-between;
	}
	#footer .mark {
		margin: 0;
	}
	#footer .mark img {
		max-width: 7.3rem;
	}
	#footer .social {
		
	}
	#footer .social a {
		width: 3.2rem;
		height: 3.2rem;
	}
	#main {
		
	}
	#main .visual {
		padding: 0;
	}
	#main .visual .video {
		height: 30rem;
		border-radius: 1.2rem;
	}
	#main .visual .control {
		bottom: 2rem;
		left: 2rem;
	}
	#main .quick .list ul {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 0;
	}
	#main .quick .list li {
		flex: 0 0 25%;
	}
	#main .quick .list li a {
		height: 10rem;
	}
	#main .quick .list li img {
		width: 4rem;
		height: 4rem;
		object-fit: contain;
	}
	#main .quick .list li p {
		font-weight: 400
	}
	#main .notice .header {
		height: 8.8rem;
	}
	#main .notice .list ul {
		gap: 2rem;
		grid-template-columns: repeat(1, 1fr);
	}
	#main .notice .list li .con {
		padding: 2.4rem;
		min-height: auto;
	}
	#main .notice .list li .img {
		height: 18rem;
	}
	#main .community {
		padding: 4rem 0;
	}
	#main .community .wrap {
		flex-direction: column;
		gap: 5.7rem;
	}
	#main .community .new-header {
		height: 4.8rem;
	}
	#main .community .educate .list li .inner {
		border-radius: 1.2rem;
		background: transparent;
	}
	#main .community .educate .list li .img {
		height: 16rem;
		border-radius: 1.2rem;
	}
	#main .community .educate .list li .con {
		padding: 1rem 0 0;
	}
	#main .community .fame {
		flex: 0 0 auto;
		/* padding: 4rem; */
		padding: 8rem 3.2rem 3.2rem 3.2rem;
		border-radius: 2rem;
	}
	#main .dataroom {
		margin: 0;
		padding: 4rem 0
	}
	#main .dataroom:after {
		right: 0;
		width: 100%;
		background: url("/ko/images/img/data_mo.png") no-repeat right -1rem
			bottom/100% auto
	}
	#main .dataroom .wrap {
		margin: 0 4rem;
		padding: 0 0 5.2rem;
		flex-direction: column;
		gap: 4rem;
	}
	#main .dataroom .wrap:before {
		display: none;
	}
	#main .dataroom .left {
		position: static;
		flex: 0 0 auto;
	}
	#main .dataroom .right {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
	#main .dataroom .new-header {
		padding: 0;
	}
	#main .dataroom .pager {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0;
	}
	#main .dataroom .slider {
		padding: 0;
	}
	#main .dataroom .slider .swiper-slide a {
		width: 100%;
		height: auto;
		aspect-ratio: 175/240;
	}
	#main .dataroom .slider .swiper-slide-active ~ .swiper-slide {
		opacity: 0;
		visibility: hidden;
	}
	#main .dataroom .slider .swiper-slide-active+.swiper-slide {
		opacity: 1;
		visibility: visible;
	}
	#title {
		margin: 0 0 2.5rem 0;
	}
	#title .wrap {
		height: 18rem;
	}
	#title .wrap .image {
		border-radius: 1rem;
	}
	#title .wrap .title {
		margin: 0 0 1rem 0;
	}
	#content {
		
	}
	#content .wrap {
		gap: 0;
	}
	#content .aside {
		display: none;
	}
	#content .section {
		max-width: 100%;
	}
	#content .section .header {
		line-height: 5rem;
		margin: 0 0 1rem;
	}
	#content .boxType1 {
		padding: 3rem;
		gap: 2rem;
		flex-direction: column;
	}
	#content .contents-box {
		padding: 2rem;
		gap: 1rem;
		border-radius: 1.2rem;
		margin-top: 2rem;
	}
	#content .content-cards .card-list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#subTab {
		padding: 0;
		gap: 0rem;
		width: 100%;
		overflow-x: scroll;
	}
	#subTab .sub-tab-button {
		width: max-content;
	}
	#content .contents-table {
		overflow-x: auto;
		white-space: nowrap;
	}
	#content .contents-table table {
		
	}
	#content .contents-table table tr {
		height: 4rem;
	}
	#content .contents-table table th {
		padding: 1rem 1rem;
		line-height: 1.5;
	}
	#content .contents-table table td {
		padding: 1rem 1rem;
		line-height: 1.5;
	}
	#content .contents-consider .cons-info .txt3 {
		grid-template-columns: repeat(1, 1fr);
	}
	#content .contents-description .text {
		grid-template-columns: repeat(1, 1fr);
	}
	#content .contents-description .text.grid-2 {
		grid-template-columns: repeat(1, 1fr);
	}
	#content .contents-cardnews {
		margin: 0 -2rem;
		padding: 2rem 2rem;
	}
	#content .contents-cardnews li {
		width: 65vw;
	}
	#content .content-noti-box {
		padding: 3rem;
		gap: 2rem;
		flex-direction: column;
	}
	#content .search {
		padding: 2rem;
	}
	#content .search .form {
		
	}
	#content .search .form dl {
		flex: 0 0 100%;
		width: 100%;
	}
	#content .search .form dl dt {
		flex: 0 0 auto;
		width: 6rem;
	}
	#content .search .form dl dd {
		flex: 1;
	}
	#content .search .form .sel {
		width: 100%;
	}
	#content .search .form .sel select {
		width: 100%;
	}
	#content .search .form .inp {
		width: 100%;
	}
	#content .search .form .inp input {
		width: 100%;
	}
	#content .search .filter {
		flex-wrap: wrap;
		gap: 0.5rem 0.5rem;
	}
	#content .search .filter .tit {
		flex: 0 0 calc(100% - 4.5rem);
		margin: 0;
	}
	#content .search .filter .btn {
		margin: 0;
	}
	#content .search .filter .con {
		
	}
	#content .search .filter .con li {
		
	}
	#content .borad {
		overflow: hidden;
		overflow-x: auto;
	}
	#content .borad table {
		min-width: 100%;
		width: auto;
	}
	#content .borad table tr {
		white-space: nowrap;
	}
	#content .borad table th, #content .borad table td {
		padding: 0 1rem;
	}
	#content .paging {
		padding: 1rem 0;
		margin: 2rem 0 1rem 0;
		gap: 0.4rem;
	}
	#content .paging a {
		width: 3rem;
		height: 3rem;
	}
	#content .paging p.dot {
		width: 3rem;
		height: 3rem;
	}
	#listArea .pagination p.dot {
		width: 3rem;
		height: 3rem;
	}
	#content .list.list-ty2 li .img {
		max-width: 100%;
	}
	#content .list.list-ty2 li .inner {
		display: block;
	}
	#content .faq-dl dl {
		padding: 1.6rem;
	}
	#content .faq-dl dd {
		
	}
	#content .list.list-ty3 .book-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
	#content .published-card {
		flex-direction: column;
		align-items: center;
	}
	#content .cat__icon img {
		width: 4rem;
		height: 4rem;
		display: block;
	}
	#content .cat {
		gap: 0.4rem;
		min-height: 10rem;
		padding: 2rem 1rem;
		border-radius: .6rem;
		;
	}
	#content .cat-grid {
		gap: 1rem;
	}
}


/* 팝업존 및 퀵메뉴들 */

/* 팝업존 */
/* 전체 팝업 배경 (검은 화면 위 가운데 정렬) */
#popupZone{
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
}

#popupZone .popup-zone-inner {
    max-width: 1040px;
    width: 100%;
}

#popupZone .popup-zone-title {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #FFF;
}

/* 스와이퍼 슬라이드 3개 보이도록 */
#popupZone .popup-zone-swiper {
    width: 100%;
}

#popupZone .swiper-slide a {
    display: block;
    text-decoration: none;
    color: inherit;
}

#popupZone .popup-zone-thumb {
    margin: 0 0 2rem;
    overflow: hidden;
    background: #111;
    border-radius: 1.2rem;
    position: relative;
}

#popupZone .popup-zone-thumb .new-label {
    position: absolute;
    top: 0;
    right: 0;
    padding: .6rem 1.6rem;
    font-weight: 600;
    font-size: 1.8rem;
    background: #0045C9;
    color: #FFF;
    border-radius: 0 0 0 1.2rem;
}

#popupZone .popup-zone-thumb img {
    display: block;
    width: 100%;
    /* height: auto; */
    height: 30rem;
}

#popupZone .popup-zone-text {
    font-size: clamp(1.5rem, 1.41vw, 1.8rem);
    color: #FFF;
    line-height: 1.5;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 두 줄 고정 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

#popupZone .popup-zone-footer {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    font-size: clamp(1.5rem, 1.41vw, 1.8rem);
    justify-content:center;
    margin-top:6rem;
}

#popupZone .popup-zone-footer span {
    color: #FFF;
}

#popupZone .popup-zone-today {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: #fff;
}

#popupZone .popup-zone-close {
    border: none;
    background: none;
    color: #fff;
    font-size: clamp(1.5rem, 1.41vw, 1.8rem);
    cursor: pointer;
}

#leftQuick {
    position: fixed;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9000;
}

#leftQuick .left-menu {
    width: 8rem;
    height: 8rem;
    background: #1658AE;
    border-radius: 99.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: center;
    flex-direction: column;
    padding: 1rem;
    text-align: center;
    margin-top: 1rem;
}

#leftQuick .left-menu img {
    width: 3rem;
    height: 3rem;
}

#leftQuick .left-menu span {
    color: #FFF;
    font-size: 1.2rem;
}

#rightQuick {
    position: fixed;
    right: 1rem;
    bottom: 4rem;
    display: flex;
    z-index: 9999;
    width: 8rem;
    padding: 2rem 1rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-radius: 99.9rem;
    background: #1658AE;
}

#rightQuick .right-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

#rightQuick .right-menu {
    color: #FFF!important;
    font-size: 1.4rem;
}

#rightQuick .right-menu.top-btn {
    margin-top: 3rem;
}

#rightQuick .right-menu span {
    color: #FFF;
    font-size: 1.2rem;
}

/* 반응형: 모바일에서는 1장씩 */
@media (max-width: 900px) {
    #popupZone {
        padding: 1rem;
    }

    #popupZone .popup-zone-inner {
        padding: 1.5rem;
    }

    #rightQuick {
        width: 6rem;
        padding: 2rem 0rem;
        gap: 1rem;
    }

    #leftQuick {
        display: none;
    }
    #main .notice .list li .img img {
		object-fit: contain;
	}
	#main .community .fame .bg {
		background: url(/ko/images/img/img-awd.png) no-repeat center 0% / contain;
	}
    #main .community .fame {
	    padding: 5rem 3.2rem 3.2rem 3.2rem;
	}
	
}

 /* 0422 추가 */
  /* ───── 제도 연혁 섹션 ───── */
  .history-section { margin-top: 10px; } 
  .timeline { position: relative; padding-left: 32px; } 
  /* 세로 라인 */
  .timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 10px; width: 1px; background: #D8D8D8; } 
  .timeline-item { position: relative; margin-bottom: 26px; } 
  .timeline-item:last-child { margin-bottom: 0; } 
  /* 점(bullet) */
  .timeline-item::before { content: ''; position: absolute; left: -27px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 69, 201, 0.3); display: flex; align-items: center; justify-content: center; } 
  .timeline-item::after { content: ''; position: absolute; left: -25px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 1px solid #1F3472; } 
  .timeline-year { display: block; color: #1F3472; font-size: 18px; font-weight: 600; line-height: 150%; /* 27px */ } 
  .timeline-desc { font-size: 16px; font-weight: 300; line-height: 150%; /* 24px */ } 
 .txt-center{text-align: center !important;}