@charset "UTF-8";

hr {
	width: calc(100% - 20px);
	margin: auto;
	border: none; /* 기본 테두리 제거 */
	height: 1px; /* 선 두께 */
	background-color: #ddd; /* 원하는 색상 */
}

hr:last-child {
	display: none;
}

/* disabled 된 커스텀 버튼 */
.input:disabled, .input[readonly] {
	background-color: #f6f6f6 !important;
	color: var(--disabled-color);
	cursor: not-allowed;
	pointer-events: none; /* readonly는 보통 유지하긴 함 */
	opacity: var(--disabled-opacity);
}

.color-box {
	width: 20px;
	height: 20px;
	border-radius: 5px;
}

/* 배경색 */
.bg-blue {
	background-color: #007bff;
}

.bg-green {
	background-color: #28a745;
}

.bg-red {
	background-color: #dc3545;
}

.bg-yellow {
	background-color: #fff47d;
}

.bg-purple {
	background-color: #6f42c1;
}

.bg-white {
	background-color: #ffffff;
}

.bg-gray {
	background-color: #6c757d;
}

.bg-black {
	background-color: #000000;
}

.bg-pink {
	background-color: #ffe6e6;
}

.bg-pink-100 {
	background-color: #fdd7aa;
}

.bg-pink-500 {
	background-color: #fa7070;
}

.bg-blue-100 {
	background-color: #cce5ff;
}

.bg-blue-500 {
	background-color: #007bff;
}

.bg-blue-900 {
	background-color: #002752;
}

.bg-green-100 {
	background-color: #c8ffd4;
}

.bg-green-500 {
	background-color: #82cd47;
}

.bg-green-600 {
	background-color: #a8ff3e;
}

/*투명도 섞인 배경*/
.bg-pink-op {
	background-color: #fa70704d;
}

.bg-gray-op {
	background-color: #e5e5e54d;
}

.bg-green-op {
	background-color: #82cd474d;
}

.bg-yellow-op {
	background-color: #fff47d4d;
}

.bg-pink-100-op {
	background-color: #ffe6e64d;
}

.bg-pink-300-op {
	background-color: #fdd7aa4d;
}

/*Annotation result*/
.disease {
	background-color: rgba(228, 26, 28, 0.3);
}

.drug {
	background-color: rgba(77, 175, 74, 0.3);
}

.dna {
	background-color: rgba(255, 255, 51, 0.3);
}

.gene {
	background-color: rgba(152, 78, 163, 0.3);
}

.species {
	background-color: rgba(255, 127, 0, 0.3);
}

.celltype {
	background-color: rgba(153, 153, 153, 0.3);
}

.default {
	background-color: rgba(0, 0, 0, 0.3);
}

/*버튼*/
.bt_navy {
	background-color: #132058;
	padding: 5px 20px;
	border-radius: 5px;
	color: #fff;
}

.bt_navy_w {
	background-color: #132058;
	border-radius: 5px;
	color: #fff;
	width: 100%;
	padding: 10px 10px;
}

.bt_red {
	background-color: #dc3545;
	padding: 5px 20px;
	border-radius: 5px;
	color: #fff;
	word-break: keep-all;
}

.bt_gray {
	background-color: gray;
	padding: 8px 20px;
	border-radius: 5px;
	color: #fff;
}

.bt_green {
	background-color: #188038;
	padding: 5px 20px;
	border-radius: 5px;
	color: #fff;
}

.bt_blue {
	background-color: #003FA3;
	padding: 5px 20px;
	border-radius: 5px;
	color: #fff;
}

.border-blue {
	border: 1px solid #003EA3;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 5px 10px;
	color: #003EA3;
}

.border-blue-sm {
	border: 1px solid #003EA3;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 5px 10px;
	color: #003EA3;
}

.border-blue2 {
	border: 1px solid #003EA3;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 5px 20px;
	color: #003EA3;
	width: 120px;
}

.border-blue3 {
	border: 1px solid #003EA3;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 5px 20px;
	color: #003EA3;
	width: 50%;
}

.border-navy {
	border: 1px solid #132058;
	background-color: #ffffff;
	border-radius: 5px;
	padding: 5px 20px;
	color: #132058;
}

.bt_item {
	display: flex;
	gap: 10px;
}

/*폰트 */

/* 블랙 & 화이트 */
.text-black {
	color: #000000;
}

.text-white {
	color: #ffffff;
}

/* 그레이 계열 */
.text-gray {
	color: #6c757d;
}

.text-lightgray {
	color: #adb5bd;
}

.text-darkgray {
	color: #343a40;
}

/* 레드 계열 */
.text-red {
	color: #dc3545;
}

.text-crimson {
	color: #e63946;
}

.text-pink {
	color: #e83e8c;
}

/* 오렌지 & 옐로우 */
.text-orange {
	color: #fd7e14;
}

.text-yellow {
	color: #ffc107;
}

.text-gold {
	color: #ffb400;
}

/* 그린 계열 */
.text-green {
	color: #28a745;
}

.text-olive {
	color: #808000;
}

.text-teal {
	color: #20c997;
}

/* 블루 계열 */
.text-blue {
	color: #007bff;
}

.text-skyblue {
	color: #87ceeb;
}

.text-navy {
	color: #132058;
}

/* 퍼플 & 브라운 */
.text-purple {
	color: #6f42c1;
}

.text-violet {
	color: #8a2be2;
}

.text-brown {
	color: #795548;
}

.font-14 {
	font-size: 14px;
}

.mt-2 {
	margin-top: .5rem;
}

.w-200 {
	width: 200px;
}

.flex-05 {
	flex: 0.5 !important;
}

.justify-content {
	display: flex;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.justify-end {
	display: flex;
	justify-content: end;
	gap: 10px;
	width: 100%;
}

.fit-content {
	display: flex;
	justify-content: end;
	gap: 10px;
}

.justify-space-between {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}

.justify-right {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	width: 100%;
}

.justify-right.show-delete {
	width: 100%;
}

.justify-left {
	display: flex;
	justify-content: left;
	gap: 10px;
}

.justify-end .bt_item {
	display: flex;
	gap: 10px;
}

.text-sm {
	display: inline-block;
	float: right;
}

.gap-5 {
	gap: 5px;
}

.gap-10 {
	gap: 10px !important;
}

.gap-15 {
	gap: 15px;
}

.gap-30 {
	gap: 30px !important;
}

.gap-50 {
	gap: 50px !important;
}

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

.flex {
	display: flex;
	align-items: center;
}

.align-center {
	align-items: center !important
}

.pad-10 {
	padding: 10px;
}

.pad-30 {
	padding: 30px;
}

.pad-3rem {
	padding: 3rem;
}

.fl-st {
	align-items: flex-start !important
}

.border-r5 {
	border-radius: 5px 0px 0px 0;
}

.underline {
	text-decoration-line: underline;
}
/* 논문초록 */
.page-nav {
	display: flex;
}

.page-nav-item {
	display: flex;
	align-items: center;
}

.title-text-span {
	padding: 10px;
	background-color: #ffffff;
	border-radius: 5px;
	border: 1px dotted #ddd;
	font-size: 14px;
	box-sizing: border-box;
}

.page-nav-item span {
	display: flex;
	align-items: center;
	font-size: 15px;
}

.page-nav-item span a {
	display: flex;
	align-items: center;
}

.page-nav-item span a::after {
	content: "";
	display: flex;
	width: 25px;
	height: 21px;
	background-image: url(../images/icon/next.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

.graph-group {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.graph-group-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.graph-group-row .graph-search-radiogroup {
	width: 100%;
}

.title-sm {
	display: flex;
	width: 100px;
}

.title-ml {
	display: flex;
	min-width: 150px;
	margin: 0 5px;
}

.title-sm-w {
	display: flex;
	width: 50px;
}

.title-lg {
	display: flex;
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	color: #6b737a;
	margin-left: 5px;
}

.bt_item-group {
	display: flex;
	gap: 10px;
}

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

.textarea-box {
	display: flex;
	width: calc(100% - 100px);
	padding: 0;
}

.textarea-commonness {
	width: 100%;
	white-space: pre-wrap; /* 줄바꿈 유지, 불필요한 공백 최소화 */
	text-align: left;
	text-indent: 0; /* 들여쓰기 제거 */
	resize: none;
	padding: 10px;
	border-radius: 5px;
}

.sentence {
	border: 1px solid #003EA3;
	background-color: #ffffff;
	color: #003EA3;
}

.text-commonness {
	width: 100%;
	resize: none;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 5px;
}

.graph-group .input-box {
	display: flex;
	width: calc(100% - 100px);
	padding: 0;
}

.warning {
	background-color: #fef2f2;
	border: 2px solid #000;
	padding: 10px;
}

.text-warning {
	font-size: 14px;
	color: #dc3545;
	display: inline-block;
	margin-left: 120px;
}

.result-gruop {
	background-color: #fff;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.result-text {
	padding: 10px 0;
	line-height: 1.8;
}

.result-gruop-item ul {
	flex-wrap: wrap;
	gap: 5px;
}

.result-gruop-item .flex li {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-right: 10px;
	padding: 5px;
	border: 3px solid #ffffff00;
}

.result-gruop-item .flex li.on {
	border: 3px solid #000;
	border-radius: 5px;
}

.result-text span.on {
	border: 2px solid #000;
	padding: 1px
}

.rounded-full {
	border-radius: 9999px;
	width: 15px;
	height: 15px;
}

.result-gruop-item {
	margin: 30px 0;
}

.result-gruop-2 {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.result-gruop-2 ul {
	display: flex;
	flex-direction: column;
}

.result-gruop-2 ul li {
	display: flex;
	gap: 15px;
	border-top: 1px solid #ddd;
}

.result-flex-gruop {
	display: flex;
	gap: 15px;
	width: 100%;
	flex-wrap: wrap;
	padding: 15px 0;
}

.result-gruop-2 ul li:first-child {
	border-top: none;
}

.text-box-item {
	background-color: #e5e5e54d;
	border-radius: 5px;
}

/* disease 마우스오버 */
.text-box-item.disease:hover {
	background-color: rgba(228, 26, 28, 0.3);
	cursor: pointer;
}

/* drug 마우스오버 */
.text-box-item.drug:hover {
	background-color: rgba(77, 175, 74, 0.3);
	cursor: pointer;
}

/* DNA 마우스오버 */
.text-box-item.dna:hover {
	background-color: rgba(255, 255, 51, 0.3);
	cursor: pointer;
}

/* gene 마우스오버 */
.text-box-item.gene:hover {
	background-color: rgba(152, 78, 163, 0.3);
	cursor: pointer;
}

/* species 마우스오버 */
.text-box-item.species:hover {
	background-color: rgba(255, 127, 0, 0.3);
	cursor: pointer;
}

/* cell type 마우스오버 */
.text-box-item.celltype:hover {
	background-color: rgba(153, 153, 153, 0.3);
	cursor: pointer;
}

.textmarg div a {
	display: flex;
	align-items: center;
	gap: 5px;
}

.copy-target::after {
	content: "";
	display: inline-block;
	width: 20px; /* 원하는 가로 크기 */
	height: 20px; /* 원하는 세로 크기 */
	background-image: url('../images/icon/copy_black.png');
	background-size: contain; /* 이미지 비율 유지 */
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
}

/* 실제 클릭 받을 버튼 */
.copy-btn {
	position: absolute;
	right: -2px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: transparent;
	border: none;
	cursor: pointer;
	opacity: 0; /* 기본은 안보이게 */
}

.text-box-item:hover .textmarg .copy-wrap .copy-target::after {
	opacity: 1; /* 호버 시 나타남 */
}

.textmarg div a:hover {
	text-decoration: underline;
}

.text-box-line {
	height: 1px;
	width: 100%;
	background-color: #000;
}

.textmarg {
	padding: 5px;
	margin: 5px;
}

.font-w-bold {
	font-weight: bold;
}

.width-150 {
	flex: 0 0 210px;
	text-transform: capitalize;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.result-gruop-3 {
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	color: #888888;
	font-size: 14px;
}

#autoTextarea {
	width: 100%;
	resize: none; /* 사용자가 드래그로 크기 조절 불가 */
	min-height: 150px; /* 최소 높이 */
	padding: 10px;
	box-sizing: border-box;
	max-height: 500px;
}

.result-gruop-cont {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.copy-wrap {
	position: relative;
	display: inline-block;
}

.select-text {
	cursor: pointer; /* 마우스 포인터 모양 변경 */
	position: relative;
}

.select-text:hover {
	text-decoration: underline; /* 밑줄 표시 */
}

.tooltip {
	position: absolute;
	background-color: #000;
	display: flex;
	left: 50%;
	transform: translate(-50%, -100%);
	opacity: 0.8;
	color: #fff;
	padding: 10px 20px;
	width: max-content;
	border-radius: 5px;
	top: -13px;
	flex-direction: column;
}

.tooltip-group {
	padding: 10px 0;
	border-top: 1px dotted;
}

.tooltip-group:first-child {
	border-top: none;
}

.tooltip-bottom {
	position: absolute;
	left: 45%;
	bottom: -30px;
	color: #000;
	font-size: 2rem;
}

.width-100 {
	width: 100px;
}

.ml-1 {
	margin-left: 5px;
}

.ml-1 img {
	height: 25px;
}

.tooltip-flex {
	display: flex;
	justify-content: space-between;
}

/*라디오*/
.radio-buttons {
	display: flex;
	gap: 10px;
}

.radio-buttons-rad {
	display: flex;
	gap: 10px;
}

.radio-buttons input[type="radio"], .radio-buttons-rad input[type="radio"]
	{
	display: none; /* 기본 라디오 숨김 */
}

.radio-buttons label {
	padding: 10px 20px;
	border: 1px solid #003fa3;
	border-radius: 5px;
	cursor: pointer;
	background: #ffffff;
	color: #003fa3;
	transition: all 0.2s ease;
}

.graph-search-radiogroup {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: calc(100% - 170px);
}

.scroll {
	width: 100%;
	overflow-x: auto;
	padding-bottom: 25px;
}

.radio-buttons-rad label {
	padding: 5px;
	width: 45px;
	height: 45px;
	text-align: center;
	line-height: 2;
	border-radius: 100%;
	background-color: #e4eaf5;
	border: 1px solid #e4eaf5;
	color: #000;
	min-width: 45px;
	cursor: pointer;
}

/* 선택된 버튼 */
.radio-buttons-rad input[type="radio"]:checked+label {
	background: #003fa3;
	color: #fff;
	border-color: #003fa3;
}

.text-group-sm {
	position: relative;
	display: block;
	max-height: 24px;
}

/* 선택된 버튼 */
.radio-buttons input[type="radio"]:checked+label {
	background: #003fa3;
	color: #fff;
	border-color: #003fa3;
}

.radio-buttons label.entire, .radio-buttons label.no-answer,
	.radio-buttons label.answer-complete {
	padding: 5px 10px;
}

/*표 데이터*/
.upload-box {
	border: 1px dashed #94a3b8;
	border-radius: 5px;
	padding: 40px;
	text-align: center;
	color: #64748b;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	position: relative;
}

.upload-box p {
	display: flex;
}

.upload-box-group {
	display: flex;
	flex-direction: column;
	width: calc(100% - 100px);
	gap: 10px;
}

.upload-box-group.admin .upload-box {
	padding: 10px;
}

.upload-box.dragover {
	border-color: #2563eb;
	background: #e0f2fe;
	color: #1e3a8a;
}

.upload-box span {
	color: #2563eb;
	font-weight: 600;
	cursor: pointer;
}

.file-download {
	display: flex;
}

.filelist-name {
	display: flex;
	width: 100%;
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 13px;
	background-color: #fff;
}

.filelist-name ul {
	width: 100%;
	display: flex;
}

.filelist-name ul li.file-icon-group {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.filelist-name ul li div {
	display: flex;
	gap: 3px;
	align-items: end;
}

.file-icon {
	display: flex;
	align-items: center;
}

.file-icon-sm {
	display: flex;
	align-items: center;
	width: 18px;
}

.file-icon-img {
	background-image: url(../images/icon/file-text.svg);
	background-repeat: no-repeat;
	height: 18px;
	background-size: cover;
}

.file-name {
	display: flex;
	flex-direction: column;
	font-size: 13px
}

.filelist-name ul li .close {
	display: flex;
	width: 22px;
	opacity: 1;
}

.file-titlename {
	align-items: center;
}

.preview_group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.deta-graph-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.imageuplode-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.relative {
	width: 100%;
	height: 100%;
	margin: auto;
	cursor: pointer;
}

.auto {
	margin: auto;
}

.preview_item {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*표 데이터 테이블(마지막표)*/
.table-wrap {
	width: 100%;
	overflow: auto;
	padding: 30px;
}

.table-wrap table {
	border-collapse: collapse;
	min-width: 600px;
	width: 1300px;
	font-size: 13px;
}

.table-wrap th, .table-wrap td {
	border: 1px solid #ddd;
	padding: 8px 12px;
	text-align: left;
	white-space: nowrap; /* 줄바꿈 방지 → 가로로 길어짐 */
}

.x-title {
	text-align: center !important;
}

.table-default thead {
	background-color: rgb(130, 173, 169);
	height: 50px;
	color: #ffffff;
}

.table-default tr {
	height: 50px;
	border-bottom: 1px solid #ddd;
}

.table-default tbody {
	background-color: #ffffff;
}

.table-wrap td:hover .copy-target-2::after {
	opacity: 1; /* 호버 시 나타남 */
}

.table-wrap td:hover {
	background-color: #e5e5e5;
}

.table-input {
	position: relative;
}

.copy-target-2::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(../images/icon/copy_black.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
	transform-origin: center center;
	transform: translate(-50%, -50%) scale(1);
	top: 50%;
	position: absolute;
	left: 95%;
}

.copy-btn-2 {
	position: absolute;
	left: 90%;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: transparent;
	border: none;
	cursor: pointer;
	opacity: 0;
}

/* 버튼 hover 시 -> 아이콘 확대 */
.copy-btn-2:hover+.copy-target-2::after, .copy-target-2:hover::after {
	transform: translate(-50%, -50%) scale(1.3);
}

.plus-x {
	position: absolute;
	top: -12.5px;
	right: -14.5px;
	background-color: #1a7e35;
	color: #fff;
	width: 25px;
	height: 25px;
	text-align: center;
	font-size: 14px;
	border: 1px solid #1a7e35;
	cursor: pointer;
	border-radius: 5px;
	z-index: 999;
}

.plus-y {
	position: absolute;
	bottom: -12.5px;
	left: -14.5px;
	background-color: rgb(136, 68, 255);
	color: #fff;
	width: 25px;
	height: 25px;
	text-align: center;
	font-size: 14px;
	border: 1px solid rgb(136, 68, 255);
	cursor: pointer;
	border-radius: 5px;
	z-index: 999;
}

.delete-x {
	position: absolute;
	top: -25px;
	left: calc(50% - 25.5px);
	background-color: rgb(255, 255, 255);
	color: #dc3545;
	width: 45px;
	height: 25px;
	text-align: center;
	font-size: 12px;
	border: 1px solid #dc3545;
	cursor: pointer;
	border-radius: 5px;
	line-height: 1.6;
	z-index: 999;
}

.delete-y {
	position: absolute;
	top: -25px;
	/* left: -10%; */
	background-color: rgb(255, 255, 255);
	color: #dc3545;
	width: 45px;
	height: 25px;
	text-align: center;
	font-size: 12px;
	border: 1px solid #dc3545;
	cursor: pointer;
	border-radius: 5px;
	line-height: 1.6;
	z-index: 999;
}

.delete-x:hover, .delete-y:hover {
	background-color: #dc3545;
	color: #fff;
}

.table-wrap td {
	position: relative;
}

/* 한약실험정보 데이터*/
.filter-area {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.filter-area-top {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 10px;
	border-radius: 5px;
}

.detailed-filter {
	border: 1px dotted #d4d6d8;
	border-radius: 5px;
	background-color: #f8fbff;
	display: flex;
	flex-direction: column;
}

.search-info-group {
	display: flex;
	gap: 10px;
	align-items: center;
}

.search-choice {
	display: flex;
	gap: 10px;
	width: 100%;
	flex: 6;
	flex-wrap: wrap;
}

.search-choice .search-choice-item {
	padding: 8px 15px;
	background-color: #d7edff;
	border-radius: 50px;
	color: #037dff;
	display: flex;
	gap: 5px;
	font-size: 14px;
}

.search-choice-item h4 {
	display: flex;
	min-width: fit-content;
	font-weight: 600;
	align-items: baseline;
}

.search-choice-item span {
	font-weight: 400;
}

.search-choice-item h4::after {
	content: ":";
	margin-left: 5px;
}

.search-group {
	flex: 1;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
}

.search-sub-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
}

.search-info-group-half {
	display: flex;
	width: calc(100% - 50% - 5px);
	gap: 10px;
	width: calc(100% - 50% - 5px);
}

.search-group-half {
	display: flex;
	flex-direction: column;
	width: calc(100% - 50% - 5px);
	gap: 5px;
}

.custom-select-wrapper {
	border: 1px solid #ddd;
	border-radius: 5px;
	width: 100%;
	position: relative;
}

/* 커스텀 꺽쇄 */
.custom-select-wrapper::after {
	content: "▼"; /* 아이콘 대신 SVG나 이미지도 가능 */
	font-size: 10px;
	color: #333;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none; /* 클릭 방해 안 되게 */
}

.custom-select-wrapper input {
	width: 100%;
}

.search-box {
	border: 1px solid #ddd;
	padding: 5px 10px;
	border-radius: 5px;
	position: relative;
	width: 100%;
	height: 34px;
	display: flex;
}

.disease-search-box {
	border: 1px solid #ddd;
	padding: 5px;
	border-radius: 5px;
	position: relative;
	width: 100%;
}

.disease-search-box button {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	width: 24px;
	height: 24px;
	background-color: #132058;
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: 80% auto;
	-webkit-mask-size: 80% auto;
	mask-image: url(../images/icon/search.png);
	-webkit-mask-image: url(../images/icon/search_icon.svg);
	cursor: pointer;
}

.disease-search-box input {
	color: #132058;
	width: 100%;
	font-size: 15px;
}

.search-box button {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	width: 24px;
	height: 24px;
	background-color: #132058;
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: 80% auto;
	-webkit-mask-size: 80% auto;
	mask-image: url(../images/icon/search.png);
	-webkit-mask-image: url(../images/icon/search_icon.svg);
	cursor: pointer;
}

.search-box input {
	color: #132058;
	width: 100%;
	font-size: 13px;
}

.sub-op {
	justify-content: flex-end;
	align-items: end;
}

.custom-select {
	display: flex;
	width: 100%;
	color: #132058;
	cursor: pointer;
	padding: 5px 10px;
	font-size: 13px;
	height: 34px;
}

.checkbox-group {
	display: flex;
	gap: 10px;
}

.checkbox-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 13px;
	color: #333;
	position: relative;
	gap: 5px;
}

.checkbox-item input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 25px;
	height: 25px;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
	    position: relative;
}

.checkbox-item input[type="checkbox"]:checked {
	background: #003fa3;
	border-color: #003fa3;
}

.checkbox-item input[type="checkbox"]:checked::after {
	content: "";
	background-image: url('../images/icon/check-w.svg'); /* 원하는 X 이미지 경로 */
	background-repeat: no-repeat; background-position : center;
	color: #fff;
    position: absolute;
    background-size: 50% 50%;
    left: -2px;
    top: -3px;
    background-position: center;
    width: 27px;
    height: 27px;
}

.view_item {
	align-items: center;
	display: flex;
	height: 28px;
	justify-content: center;
}

/*버튼*/

/*썸네일,리스트,표 버튼*/
.view_item.view_type_list {
	display: flex;
}

.type_item {
	border: 1px solid #bfbfbf;
	float: left;
	margin-left: -1px;
	padding: 0;
}

.type_item:first-child {
	border-radius: 2px 0 0 2px;
}

.type_item a {
	display: block;
	height: 26px;
	overflow: hidden;
	position: relative;
	text-indent: -9999px;
	width: 26px;
}

.type_img::after {
	background-position: -50px -80px;
}

.type_item a::after {
	background: url(../images/icon/icon_list_pack_v250102.png) no-repeat;
	content: "";
	display: inline-block;
	height: 14px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
}

.type_item:last-child {
	border-radius: 0 2px 2px 0;
}

.type_item .type_list:after {
	background-position: -30px -60px;
}

.type_item .type_list.on:after {
	background-position: -30px -80px;
}

/*표형*/
.type_item .type_graph:after {
	background-position: -70px -60px;
}

.type_item .type_graph.on:after {
	background-position: -70px -80px;
}

/*썸네일형*/
.type_item .type_img:after {
	background-position: -50px -60px;
}

.type_item .type_img.on:after {
	background-position: -50px -80px;
}

.sm-item-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

/*디폴트 리스트형*/
.list_area-default {
	display: flex;
	flex-direction: column;
}

.list_area-default .graph-div-group {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 10px;
}

.list_area-default .default-date {
	display: flex;
	width: 100%;
	gap: 10px;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.list_area-default .default-date-group {
	display: flex;
	width: calc(100% - 155px);
	gap: 10px;
}

.group-graph.none {
	justify-content: center;
	height: 192px;
	align-items: center;
	background-color: #fff;
	border: 1px solid #ddd;
}

.graph-div-group .no-image {
	justify-content: center;
	height: 150px;
	align-items: center;
	background-color: #fff;
	width: 100%;
	display: flex;
}

.list_area-default .date-picture {
	display: flex;
	width: 185px;
	max-height: 100%;
	cursor: pointer;
}

.list_area-default .date-picture img {
	border-radius: 5px;
	width: 100%;
	max-height: 170px;
	object-fit: fill;
	min-height: 170px;
	border: 1px solid #ddd;
}

.list_area-default .default-group {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
}

.list_area-default .dataset {
	padding: 3px 8px;
	background-color: #007bff;
	border-radius: 5px;
	width: fit-content;
	color: #fff;
	font-size: 12px;
}

.list_area-default .dataset-top {
	display: flex;
	gap: 5px;
	width: 100%;
}

.list_area-default .search-choice-item {
	display: flex;
	font-size: 12px;
	background-color: #ffffff;
	padding: 3px 8px;
	border-radius: 50px;
	border: 1px solid #007bff;
	color: #007bff;
	gap: 5px;
}

.list_area-default .graph-date-list-title {
	font-size: 18px;
	font-weight: 600;
}

.list_area-default .graph-date-group {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}

.list_area-default .graph-date-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.list_area-default .graph-date-item {
	display: flex;
	gap: 5px;
}

.list_area-default .source {
	padding: 3px 6px;
	background-color: #f3f9ff;
	border-radius: 5px;
	width: 100%;
	color: #007bff;
	font-size: 12px;
	border: 1px dotted #ddd;;
}

.list_area-default .graph-date-text {
	font-weight: 400;
	flex: 1;
	display: flex;
	width: 100%;
	gap: 5px;
}

.list_area-default .graph-date-text span {
	margin: 5px 0px;
}

.list_area-default .graph-date-text h4 {
	font-weight: 500;
}

.list_area-default .graph-date-text h4::after {
	content: ":";
	margin-left: 5px;
}

.list_area-default span.text-en {
	color: #959595;
	font-weight: 400;
	margin-left: 5px;
}

.list_area-default .btn_bottom {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-end;
	min-width: 145px;
}

/*표 형*/
.list_area .graph-title {
	display: flex;
	width: 100%;
	justify-content: space-between;
	background-color: #e4eaf5;
}

.list_area .graph-title-text {
	flex: 1;
	display: flex;
	justify-content: center;
	color: #6b737a;
	font-weight: 600;
	font-size: 14px;
	padding: 10px;
}

.list_area .graph-date-text {
	white-space: nowrap; /* 한 줄로 유지 */
	overflow: hidden; /* 넘치는 부분 숨기기 */
	text-overflow: ellipsis; /* 말줄임표 표시 */
	display: block; /* block 또는 inline-block */
	max-width: 100%; /* 부모 요소 폭을 최대치로 제한 */
	flex: 1;
	border-right: 1px solid #ddd;
	padding: 10px 15px;
}

.list_area .graph-date-text:last-child {
	border-right: none;
}

.graph-date a {
	display: contents;
	text-decoration: none;
	color: inherit;
}

.graph-date-text:hover {
	background: #f7f9fc;
}

.list_area .graph-date {
	display: flex;
	border-bottom: 1px solid #ddd;
	font-size: 13px;
}

.list_area .graph-date:last-child {
	border-bottom: none;
}

.list_area .graph-date a {
	display: flex;
	width: 100%;
	flex-direction: row;
}

.list_area .graph-date:hover {
	background-color: #f6f6f6;
}

.list_area .group-graph {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

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

.pagination {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	justify-content: center;
	padding: 5px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.page-btn, .page-ellipsis {
	min-width: 35px;
	height: 35px;
	padding: 0 10px;
	border-radius: 5px;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	gap: 10px;
}

.page-btn:hover {
	background: #f3f4f6; /* hover 시 살짝 회색 */
}

.page-btn.is-active {
	background: #132058;
	color: #fff;
	border-color: #132058;
	cursor: default;
}

.page-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
	background: #f9fafb;
	gap: 10px;
}

.page-ellipsis {
	border: none;
	background: transparent;
	cursor: default;
}

.page-btn span img {
	width: 15px;
	display: flex;
}

.page-btn span.right_next {
	display: flex;
	gap: 10px;
	align-items: center;
}

.list_area .graph-date .graph-date-picture {
	display: none;
}

.list_area .graph-date .gallery-title {
	display: none;
}

.list_area {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.list_area .graph-div-group {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.graph-area-echarts {
	border-radius: 5px;
	width: 100%;
}

.graph-div {
	background-color: #f6f8f9;
	border: 1px solid #ddd;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border-radius: 5px;
}

.graph-div-co {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-radius: 5px;
}

.graph-div-item {
	display: flex;
	width: 100%;
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 10px;
	max-height: 500px;
	overflow: auto;
}

.graph-div-item ul {
	display: flex;
	gap: 10px;
	width: 100%;
	flex-wrap: wrap;
}

.graph-div-item ul li {
	display: flex;
	align-items: center;
}

.graph-div-item ul li span {
	background-color: #5a99ff;
	padding: 5px 10px;
	border-radius: 50px;
	width: max-content;
	height: 100%;
	font-size: 12px;
	color: #fff;
}

.graph-div-item.none ul {
	justify-content: center;
}

.graph-div-item.none {
	padding: 9px;
}

.graph-div-item.none li span {
	background: none;
	color: #000;
	width: 100%;
	border-radius: 0;
	font-size: 13px;
	padding: 0;
}
/*썸네일형*/
.list_area.gallery .graph-date-text.xl-text {
	font-size: 17px;
	font-weight: 600;
}

.list_area.gallery .graph-date-text .gallery-title {
	display: inline-block;
	margin-right: 5px;
}

.list_area.gallery .graph-date a {
	flex-direction: column;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	align-items: flex-start;
}

.list_area.gallery .graph-date .graph-date-picture {
	display: flex;
	height: 250px;
	width: 100%;
	overflow: hidden; /* 넘치는 부분 잘라내기 */
}

.list_area.gallery .graph-div-group {
	display: flex;
	flex-wrap: wrap; /* 줄바꿈 허용 */
	gap: 15px; /* 카드 사이 간격 */
	padding: 20px;
}

.list_area.gallery .graph-title {
	display: none;
}

.list_area.gallery .graph-date .hideun {
	display: none;
}

.list_area.gallery .graph-date-text {
	flex: 1;
	font-size: 13px;
	border: none;
	padding: 0;
}

.list_area.gallery .graph-date-group {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.list_area.gallery .dataset {
	position: absolute;
	top: 16px;
	padding: 5px 10px;
	border-radius: 5px;
	background-color: #007bff;
	right: 16px;
	color: #fff;
	font-size: 13px;
}

.list_area.gallery .graph-date-list {
	display: flex;
	gap: 10px;
	width: 100%;
}

.list_area.gallery .graph-date {
	border-bottom: none;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 15px;
	box-sizing: border-box;
	width: calc(33.333% - 10px);
	background-color: #f8fbff;
	position: relative;
}

.list_area.gallery .graph-date-picture img {
	border: 1px solid #ddd;
	border-radius: 10px;
	height: 100%;
	width: 100%;
	object-fit: cover; /* 네모에 맞게 꽉 채우기 (비율 유지, 잘림 발생 가능) */
}

.list_area.gallery .graph-date-title {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 5px;
}

.list_area.gallery .graph-date-title span {
	font-size: 12px;
}

/*display: none;*/
.list_area-default {
	display: none;
}

.list_area {
	display: none;
}

.list_area.gallery {
	display: none;
}

.list_area-default.on {
	display: block;
}

.list_area.on {
	display: block;
}

.list_area.gallery.on {
	display: block;
}

/* 레이어 팝업 배경 반투명 오버레이 */
.popup-overlay {
	display: none; /* 기본은 숨김 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 100;
}

/* 팝업 박스 */
.popup {
	background: #fff;
	width: 1200px;
	max-width: 100%;
	margin: 4% auto;
	border-radius: 10px;
	position: relative;
	animation: fadeIn 0.3s ease;
	height: calc(100% - 15%);
}

/* 닫기 버튼 */
.popup-close {
	position: absolute;
	top: 5px;
	right: 10px;
	background: none;
	border: none;
	font-size: 25px;
	cursor: pointer;
}

.popup-top {
	display: flex;
	width: 100%;
	padding: 20px;
	border-bottom: 1px solid #aaaaaa;
}

.thumbnail {
	display: flex;
	gap: 10px;
}

.thumbnail img {
	width: 50px;
	height: 50px;
	border-radius: 10px;
}

.popup-title {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.popup-title div {
	display: flex;
	gap: 5px;
}

.popup-label {
	border: 1px solid #007bff;
	padding: 2px 8px;
	font-size: 12px;
	border-radius: 50px;
	color: #007bff;
	font-weight: 600;
}

.popup-middle {
	display: flex;
	flex-direction: column;
	height: calc(100% - 152px);
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #1b1b1b38 transparent;
}

.popup-title p {
	font-size: 14px;
}

.popup-img {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 0px;
}

.sub-img-box {
	display: flex;
	gap: 10px;
	padding: 10px;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	flex-wrap: wrap;
	max-height: 250px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #1b1b1b38 transparent;
}

.sub-img-box img {
	width: 100%;
	height: 100%; /* 비율 자동 */
	border-radius: 5px;
	cursor: pointer;
	display: block;
	object-fit: cover;
}

.img-bax-item {
	display: inline-block;
	overflow: hidden;
	border-radius: 8px;
	width: 153px;
	height: 114px;
}

.popup-img-text {
	display: flex;
	padding: 10px 10px 0;
	font-size: 13px;
	width: 100%;
}

.img-text {
	display: flex;
	width: 100%;
	justify-content: left;
}

.img-text span {
	width: 100%;
	font-weight: 600;
	color: #878787;
}

.no-pointer::after {
	content: "";
	display: flex;
	width: 25px;
	height: 21px;
	background-image: url(../images/icon/next.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

.popup-img-group {
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #f4faff;
}

.popup-img-group div.popup-img-title {
	line-height: 2;
	border-bottom: 1px solid #ddd;
	padding: 5px 10px;
	font-size: 14px;
}

.popup-img-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
}

.popup-img-title span {
	font-size: 13px;
	color: #878787;
}

.popup-info {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 0 10px;
}

.popup-info-group {
	border: 1px solid #ddd;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 0px;
	background-color: #f4faff;
}

.popup-info-group h4 {
	line-height: 2;
	padding: 5px 10px;
	font-size: 14px;
	position: relative;
}

.popup-info-group h4.toggleclose::after {
	content: "+";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: bold;
	font-size: 18px;
	color: #333;
	transition: transform 0.2s ease, color 0.2s ease;
	cursor: pointer;
}

h4.toggleclose ~ .sub-info-list {
	display: none; /* toggleclose일 때는 닫힘 */
}

/* 활성화 시(열림 상태) 아이콘 회전 or 변경 */
.popup-info-group h4.toggleclose.active::after {
	content: "−"; /* 또는 rotate(45deg)로 X모양도 가능 */
	color: #333; /* 열렸을 때 색 변경 */
}

.popup-info-group h4.toggleclose {
	cursor: pointer;
	border: none;
}

.sub-info-box {
	display: flex;
	gap: 10px;
}

.info-bax-item {
	padding: 5px 10px;
	flex: 1;
	display: flex;
	flex-direction: column;
	border-radius: 5px;
}

.info-bax-item lable {
	font-size: 13px;
	color: #000000;
	font-weight: 600;
	width: fit-content;
	border-bottom: 1px solid #000000;
}

.info-bax-item span {
	font-size: 13px;
	font-weight: 400;
	color: #878787;
	line-height: 1.8;
}

.sub-info-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
}

.popup-info-group h4.toggleclose.active:first-child {
	border-bottom: 1px solid #ddd;
}

h4:not(.toggleclose)+.sub-info-list {
	border-top: 1px solid #ddd; /* 스타일 예시 */
}

h4.toggleclose ~ hr, h4.toggleclose.active ~ hr:last-child {
	display: none;
}

h4.toggleclose.active ~ hr {
	display: block;
}

.sub-info-box-half {
	width: calc(100% - 50% - 5px);
}

.tbl {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #ddd;
}

.tbl th {
	background: #f6f8f9;
	color: #535353;
}

.tbl th, .tbl td {
	border: 1px solid #ddd;
	padding: 6px 8px;
	text-align: left;
	font-size: 14px;
}

.popup-info:last-child {
	padding-bottom: 20px;
}

.popup-bottom {
	padding: 10px;
	border-top: 1px solid #aaaaaa;
	text-align: end;
}

.btn-csv {
	padding: 10px;
	background-color: #0f5132;
	width: 140px;
	border-radius: 5px;
	color: #fff;
	font-size: 13px;
	justify-content: center;
}

.language-group {
	display: flex;
	gap: 10px;
	width: 100%;
	justify-content: flex-end;
}

.btnfit-group {
	display: flex;
	gap: 10px;
}

.btnfit-group button {
	border: 1px solid #9f9f9f;
	border-radius: 5px;
	padding: 0 10px;
	background-color: #ddd;
	font-size: 13px;
}

.zoomval {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	color: #374151;
	min-width: 48px;
	text-align: right;
}

/*이미지 누르면 확대*/
.image-popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 1000;
}

.image-popup .popup-content {
	position: relative;
	max-width: 800px;
	width: 800px;
	background: #fff;
	border-radius: 8px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.image-popup img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 600px;
	object-fit: contain;
	border-radius: 6px;
}

.popup-content-top {
	width: 100%;
}

.popup-con-img {
	height: 600px;
	overflow: auto;
	scrollbar-width: thin; /* Firefox 전용: 얇게 */
	scrollbar-color: #1b1b1b38 transparent;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.3);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
}

.img-nav.prev {
	left: 10px;
}

.img-nav.next {
	right: 10px;
}

.icon-chevron {
	width: 50px;
	height: 50px;
}

.img-nav:hover {
	background: rgba(0, 0, 0, 0.5);
}

.popup-close2 {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 20px;
	font-weight: bold;
	color: #ffffff;
	cursor: pointer;
	background-color: #0000006e;
	border-radius: 50%;
	height: 30px;
	width: 30px;
	z-index: 100;
}

/*/////////////////////////////////////////*/
/* 공지사항 목록 */
.search-inp {
	display: flex;
	gap: 10px;
	justify-content: end;
}

.search-inp .inp-text {
	display: flex;
	gap: 10px;
	justify-content: end;
	border: 1px solid #ddd;
	padding: 7px;
	border-radius: 5px;
	background-color: #fff;
	font-size: 14px;
}

form {
	display: contents;
}

.announcement-graph-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.announcement-nolist-noitem {
	min-height: calc(540px - 44px);
	justify-content: center;
	align-items: center;
	display: flex;
}

.announcement-item {
	display: flex;
	flex-direction: column;
	min-height: 540px;
}

.announcement-title ul {
	display: flex;
	background-color: #132058;
	color: #fff;
}

.announcement-title ul li {
	flex: 1;
	display: flex;
	justify-content: center;
	padding: 10px;
}

.announcement-title ul li:first-child, .announcement-title ul li:last-child
	{
	flex: 0.5;
}

.announcement-list ul {
	display: flex;
	background-color: #fff;
}

.bor-bottom{
    border-bottom: 1px solid #ddd;
}
.announcement-list ul a {
	display: flex;
	width: 100%;
}

.announcement-list ul li {
	flex: 1;
	display: flex;
	justify-content: center;
	padding: 10px;
	align-items: center;
}

.announcement-list ul li.num {
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
}

.announcement-list ul li.num .top-action {
	border: 1px solid #dc3545;
	border-radius: 5px;
	color: #dc3545;
	max-width: 40px;
	font-size: 12px;
}

/* 첫 번째 li */
.announcement-list-item {
	font-size: 14px;
	display: flex;
	flex-direction: column;
    line-height: 2;
}

.announcement-list ul li:first-child, .announcement-list ul li:last-child
	{
	flex: 0.5;
}

.announcement-list ul li.title, .announcement-title ul li.title {
	flex: 2;
}

.announcement-list ul li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	text-align: center;
}

.announcement-list span.file img {
	width: 18px;
}

.announcement-list span {
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
}

.announcement-sub {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.announcement-sub.w-65 {
	width: 65%;
}

.filter-area-top.w-35 {
	width: 35%;
}

.announcement-page {
	display: flex;
	flex-direction: column;
	gap: 15px;
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 5px;
}

.announcement-page h2 {
	padding: 15px 10px;
}

.announcement-text {
	border-bottom: 1px solid #ddd;
}

.announcement-page-group {
	display: flex;
	gap: 20px;
	padding: 0 10px 15px;
}

.page-title {
	font-weight: bolder;
}

.page-item {
	position: relative;
	display: flex;
	gap: 10px;
}

.page-item::after {
	content: '';
	display: block;
	width: 1px;
	height: 15px;
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	background-color: #bfbfbf;
}

/* 마지막 요소는 구분자 제거 */
.page-item:last-child::after {
	content: none;
}

.announcement-view {
	display: flex;
}

.announcement-con {
	padding: 30px 15px;
	width: 100%;
	line-height: 1.7;
	font-size: 15px;
}

.announcement-con ul li {
	list-style: disc;
	list-style-position: inside !important;
}

.announcement-con ol li {
	list-style: auto;
	list-style-position: inside !important;
}

.attachment {
	align-items: center;
	border: 1px solid #ddd;
	padding: 10px;
	background-color: #f8f8f8;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.attachment a {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #fff;
	padding: 5px;
}

.attachment-group {
	display: flex;
	gap: 2px;
	align-items: center;
}

.attachment-group:hover {
	text-decoration: underline;
}

.attachment-group img {
	width: 22px;
}

.attachment-text {
	display: flex;
}

.attachment-text .text {
	font-size: 13px;
}

.attachment-text ul {
	display: flex;
	flex-direction: column;
}

.file-download img {
	width: 25px;
	margin-right: 5px;
}

.file-download button {
	cursor: pointer;
	display: flex;
	font-size: 13px;
	align-items: center;
}

.announcement-inp {
	display: flex;
	width: calc(100% - 100px);
	padding: 0;
}

.announcement-editeo {
	display: flex;
	width: calc(100% - 100px);
	padding: 0;
}

.editeo {
	width: 100%;
}

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

.announcement-row-group {
	flex-direction: row;
	display: flex;
	gap: 10px;
}

/*공지버튼*/
.announcement-btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
}

/* 토글 스위치 기본 */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 50px; /* 전체 너비 */
	height: 28px; /* 전체 높이 */
}

/* 체크박스 숨기기 */
.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* 슬라이더 디자인 */
.toggle-switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	border-radius: 28px;
	transition: 0.3s;
}

/* 원 모양 */
.toggle-switch .slider::before {
	content: "";
	position: absolute;
	height: 22px;
	width: 22px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	border-radius: 50%;
	transition: 0.3s;
}

/* 체크되었을 때 색상 및 위치 */
.toggle-switch input:checked+.slider {
	background-color: #132058;
}

.toggle-switch input:checked+.slider::before {
	transform: translateX(22px);
}

/* 질병 연관 한약재 */
.graph-group-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.disease-search-list {
	display: flex;
	width: 100%;
	background-color: #ffffff;
	flex-direction: column;
	border-radius: 5px;
	max-height: 100%;
	border: 1px solid #ddd;
}

.disease-search-list .disease-title ul {
	width: calc(100% - 15px);
}

.disease-search-list .disease-title ul li {
	margin-left: 5px;
}

.disease-search-list ul {
	display: flex;
	width: 100%;
	cursor: pointer;
}

.disease-search-list ul .tltle-code, .disease-search-list ul .english-name
	{
	margin: 0 5px;
}

.disease-list .herbal-search-row {
	border-bottom: 1px solid #ddd;
	font-size: 13px;
	align-items: center;
}

.herbal-search-row .drg-name, .herbal-search-row .jap-pron,
	.herbal-search-row .cn-pron, .herbal-search-row .korn-pron {
	margin: 0 5px;
}

.disease-list .herbal-search-row:last-child {
	border-bottom: none;
}

.disease-title {
	background-color: #f6f8f9;
	font-weight: 600;
	border-bottom: 1px solid #ddd;
}

.disease-list ul:hover {
	background-color: #f2f6fd;
}

.disease-list ul.activate {
	background-color: #E3ECFA;
	position: relative;
	align-items: center;
}

.disease-list ul.activate li {
	font-weight: 600;
	color: #003ea3;
}

.disease-list ul.activate::after {
	content: "";
	display: flex;
	width: 12px;
	height: 12px;
	background-image: url(../images/icon/ch_Icon.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
	right: 15px;
	top: 15px;
	position: absolute;
}

.disease-list ul.pop-list-detail.activate::after {
	content: none;
}

.disease-search-list ul li {
	display: flex;
	padding: 10px 5px;
	flex: 1;
	min-width: 0;
}

.disease-search-list ul.herbal-search-row li {
	display: flex;
	padding: 10px;
	flex: 1;
}

.disease-search-list ul li:last-child {
	border-right: none;
}

.herbal-search-row .tltle-name {
	width: 15%;
}

.herbal-search-row .english-name, .herbal-search-row .latin-name {
	width: 25%;
}

.herbal-search-row .scientific-name {
	width: 50%;
}

.herbal-search-row .tltle-name:empty::after, .herbal-search-row .english-name:empty::after,
	.herbal-search-row .latin-name:empty::after, .herbal-search-row .scientific-name:empty::after,
	.herbal-search-row .drg-name:empty::after, .herbal-search-row .jap-pron:empty::after,
	.herbal-search-row .cn-pron:empty::after, .herbal-search-row .korn-pron:empty::after
	{
	content: '데이터 없음';
	border: 1px solid #ddd;
	padding: 3px 8px;
	display: flex;
	align-items: center;
	max-height: fit-content;
	align-items: center;
	border-radius: 5px;
	color: #6a6a6a;
	background-color: #f0f0f0;
	font-size: 13px;
}

.herbal-search-row .no {
	align-items: center;
}

.disease-list {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	overflow-x: hidden;
	max-height: 400px;
	min-height: calc(100% - 44px);
}

.disease-list li.tltle-name, .disease-list li.latin-name, .disease-list li.scientific-name
	{
	margin-left: 5px;
}

.file-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/*문의관리 등록수정 텍스트에어리어*/
.textarea-w {
	width: calc(100% - 100px);
	display: flex;
	border: 1px solid #ddd;
	border-radius: 5px;
	height: 100%;
}

.textarea-w textarea {
	width: 100%;
	min-height: 300px;
	max-height: 300px;
	padding: 10px;
	resize: none;
	overflow: auto; /* 내용 넘칠 때 스크롤 */
	font-size: 14px;
}

.announcement-sub-con {
	max-height: 300px;
	overflow: auto;
	width: 100%;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
	text-align: left;
	display: block;
	vertical-align: top;
	padding: 5px;
	font-size: 15px;
}

.inquiry-comment {
	width: 100%;
	min-height: 100px;
	border: 1px solid #ddd;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	background-color: #fff;
}

.inquiry-comment textarea {
	width: 100%;
	min-height: 100px;
	max-height: 100px;
	padding: 10px;
	resize: none;
	overflow: auto; /* 내용 넘칠 때 스크롤 */
	font-size: 14px;
}

#answer[readonly] {
	background-color: #f1f1f1;
	color: #999;
}

.inquiry-comment-con {
	padding: 10px;
	font-size: 14px;
	height: 100%;
	display: flex;
	max-height: 200px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
}

.announcement-page-total {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.inquiry-comment-group {
	background-color: #f8f8f8;
	padding: 10px;
	display: flex;
	gap: 10px;
	flex-direction: column;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.comment-icon:before {
	content: "";
	background-image: url(../images/icon/message-text.svg);
	display: flex;
	width: 18px;
	height: 18px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

.comment-icon {
	display: flex;
	gap: 5px;
	align-items: center;
	margin-left: 5px;
}

.choice-group {
	display: flex;
	width: 100%;
	gap: 5px;
}

.choice-item.on {
	padding: 5px 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #003fa3;
	color: #fff;
	font-size: 14px;
}

.choice-item {
	padding: 5px 10px;
	border: 1px solid #003fa3;
	border-radius: 5px;
	background-color: #fff;
	color: #003fa3;
	font-size: 14px;
	cursor: pointer;
}

.search-expression {
	border: 1px solid #ddd;
	padding: 10px;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	min-height: 100px;
	background-color: #f6f8f9;
	max-height: 300px;
	overflow: auto;
}

.search-expression span {
	font-weight: bold;
	color: #585858;
	font-size: 15px;
}

.tablist {
	display: flex;
	justify-content: space-around;
	gap: 5px;
}

.tablist button.tab {
	width: 100%;
	flex: 1;
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #e4eaf5;
}

.tablist button.tab.on {
	background-color: #003fa3;
	color: #fff;
}

.group-item-content-teb {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.teb-area-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.choice-item.on>.close-btn {
	border: none;
	background: transparent;
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
	color: #ffffff;
	margin-left: 5px;
}

.herbal-search-row.no-data .no-result {
	justify-content: center;
}

/*회원가입*/
.cont-border {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 900px;
	margin: auto;
}

.all-agree-chk {
	display: flex;
	border-bottom: 1px solid #ddd;
	padding-bottom: 15px;
}

.agree-chk-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.agree-chk-list li {
	display: flex;
	width: 100%
}

.agree-chk-item {
	display: flex;
	width: 100%
}

.max-content {
	width: max-content !important;
	gap: 5px;
}

.form-check {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.between {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 48px;
}

.justify-content {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 48px;
}

.join-complete {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
	padding: 30px;
	border: 1px solid #d0def6;
	border-radius: 5px;
	background-color: #e4eaf5;
	text-align: center;
}

/*아이디 비번찾기*/
.tab-container {
	width: 100%;
	max-width: 900px;
	margin: 40px auto;
	display: flex;
	flex-direction: column;
}

.tab-menu {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tab-menu li {
	flex: 1;
	text-align: center;
	padding: 12px 0;
	cursor: pointer;
	font-weight: 500;
	color: #666;
	border-bottom: 2px solid transparent;
	transition: all 0.3s ease;
	border-bottom: 2px solid #ddd;
}

.tab-menu li:hover {
	color: #000;
}

.tab-menu li.active {
	color: #003ea3;
	border-bottom: 2px solid #003ea3;
	font-weight: 600;
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
	padding: 10px 0;
}

.accordion-item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.accordion {
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	width: 100%;
}

.accordion-title {
	background-color: #f8f8f8;
	padding: 12px 16px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.accordion-title::after {
	content: "▼";
	transition: transform 0.3s;
	font-size: 0.8rem;
}

.accordion-title.active::after {
	transform: rotate(180deg);
}

.accordion-content {
	display: none;
	padding: 10px;
	background-color: #fff;
	flex-direction: column;
}

.accordion-content>.form-group {
	margin-top: 10px;
}

.accordion-content>.form-group:first-child {
	margin-top: 0;
}

.accordion-content input[type="password"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.form-group>.form-tit label {
	margin-left: 5px;
}

.form-group p {
	margin-left: 5px;
}

/*통계*/
.card-header h3 {
	font-size: 13px;
}

.content-chart-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.content-chart-card {
	margin-top: 0px !important;
}

.content-chart-list {
	display: flex;
	width: 100%;
	gap: 10px;
}

.content-chart-list div.card {
	width: 50%;
}

/*************메인 아코디언*****************/
.main-accordion-group {
	height: 100%;
	background-color: #fff;
}

.main-accordion-container {
	width: 1400px;
	margin: 0px auto;
	display: flex;
	gap: 30px;
	align-items: flex-start;
	height: 100%;
	padding: 30px 0;
}

/* 아코디언 */
.main-accordion-list {
	flex: 1;
}

.main-accordion-item {
	border-bottom: 1px solid #ddd;
	margin: 10px 0;
	overflow: hidden;
	transition: transform 0.2s;
	padding-bottom: 10px;
}

.main-accordion-title {
	padding: 10px;
	cursor: pointer;
	font-weight: 600;
	color: #102f69;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 20px;
}

.accordion-link {
	color: #007bff;
	position: relative;
	width: fit-content;
	text-decoration-line: underline;
}

.main-accordion-title::after {
	content: '+';
	font-weight: 300;
}

.main-accordion-item.active .main-accordion-title::after {
	content: ''; /* 열려있으면 + 없앰 */
}

.main-accordion-content {
	padding: 10px;
	display: none;
	color: #8b949e;
	line-height: 2;
	transition: max-height 0.3s ease; /* 부드러운 열림/닫힘 */
}

/* 오른쪽 이미지 */
.main-accordion-image-area {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	height: 100%;
	background: linear-gradient(to bottom, rgb(206 206 206/ 60%),
		rgba(102, 166, 255, 0.8));
	border: 1px solid #ddd;
	border-radius: 10px;
	max-width: 700px;
	min-height: 584px;
}

.main-accordion-image-area img {
	height: 540px;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	max-width: 615px;
}

/*사용자통계*/
.signup-wrap-top {
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.kpi {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	gap: 5px;
}

.kpi .label {
	font-size: 12px;
	color: #6b7280;
}

.kpi .value {
	font-weight: 700;
	letter-spacing: -0.3px
}

.kpi .meta {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: #6b7280
}

.kpis {
	display: flex;
	gap: 12px;
	flex-wrap: wrap
}

.delta {
	padding: 2px 8px;
	border-radius: 9999px;
	font-weight: 600
}

.delta.up {
	background: #ecfdf5;
	color: #059669
}

.delta.down {
	background: #fef2f2;
	color: #dc2626
}

.delta.muted {
	background: #f3f4f6;
	color: #6b7280
}

.delta .icon-up {
	margin-right: 6px;
	line-height: 1
}

.icon-up {
	display: inline-block;
	font-size: 12px;
	font-weight: 900;
	color: #059669;
	transform: translateY(-1px)
}

.kpis-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #efefef;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ddd;
}

.inquiry-grid {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
}

.inquiry-card {
	flex: 1 1 260px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px;
	width: 100%;
}

.inquiry-card-header {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}

.inquiry-subtext {
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 6px;
}

.inquiry-chart-wrap {
	position: relative;
	height: 260px;
}

.toggle {
	display: inline-flex;
	border: 1px solid #e5e7eb;
	border-radius: 9999px;
	overflow: hidden;
	background: #fff;
}

.toggle button {
	padding: 6px 12px;
	font-size: 12px;
	color: #6b7280;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.toggle button.active {
	background: #111827;
	color: #fff;
}

.chart-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px;
}

.chart-wrap {
	position: relative;
	height: 320px;
}

.signup-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #efefef;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ddd;
}

.signup-kpis-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.content-chart-group-bor {
	display: flex;
	width: 100%;
	gap: 10px;
}

.content-chart-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px;
	margin-top: 10px;
}

.content-chart-wrap {
	position: relative;
	height: 320px;
}

/*로그관리*/
.search-group-date-group {
	display: flex;
	gap: 5px;
	align-items: center;
}

.search-group-date {
	display: flex;
	gap: 10px;
	align-items: center;
}

.date-wrap input {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 7px;
	width: 150px;
	background-color: #fff;
	font-size: 14px;
}

.datepicker {
	background-image: url(../images/icon/calendar_icon.svg);
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) center;
	background-size: 15px auto;
	padding: 0 30px 0 10px;
	cursor: pointer;
	min-width: 100px !important;
}

.select-wrap {
	position: relative;
	display: inline-block;
	width: 200px;
}

.width-75 {
	width: 75px;
}

.chart-search-group-date {
	display: flex;
	gap: 5px;
	align-items: center;
	padding-bottom: 10px;
	font-size: 14px;
	justify-content: end;
}

.content-chart-list div.chart-search-group-date-top {
	width: auto !important;
}

.chart-search-group-date>.chart-search-group-date-top>.search-title {
	width: 30px;
}

.chart-search-group-date-top {
	display: flex;
	align-items: center;
	gap: 5px;
}

.card-body {
	background-color: #efefef;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ddd;
}

.no-data-text {
	height: 100%;
	vertical-align: middle;
	display: flex;
	justify-content: center;
	align-items: center;
}

#paginationNumbers {
	display: flex;
	gap: 5px;
}

/*****************메인 레이어팝업*/

/* 모달 */
.klims-modal {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 1000;
}

/* 팝업 컨테이너 */
.klims-popup-cont {
	padding: 20px;
	border-radius: 10px;
	max-width: 850px;
	width: 100%;
	position: relative;
}

/* 슬라이더 */
.klims-slider-wrapper {
	overflow: hidden;
	margin: 20px 0;
}

.klims-slider-track {
	display: flex;
	transition: transform 0.5s ease;
}

.klims-slide {
	min-width: 400px;
	margin: 5px
}

.klims-slide img {
	width: 100%;
	border-radius: 20px;
}

/* 좌우 버튼 */
.klims-prev, .klims-next {
	border: 2px solid #fff;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 40px;
	font-size: 24px;
	cursor: pointer;
	text-decoration: none;
	z-index: 999;
	line-height: 1.5;
}

.klims-prev {
	left: -50px;
}

.klims-next {
	right: -50px;
}

/* 자동슬라이드 버튼 */
.klims-controls-auto {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.klims-controls-auto img {
	cursor: pointer;
	background-color: #fff;
	padding: 5px;
	border-radius: 50px;
	width: 30px;
	height: 30px;
}

.klims-controls-group {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	justify-content: center;
}

.klims-close {
	display: flex;
	align-items: center;
	gap: 10px;
}

.klims-close form {
	display: inline-block;
	margin-right: 10px;
}

.klims-close label {
	cursor: pointer;
	color: #fff;
}

.klims-close a {
	text-decoration: none;
	color: #fff;
	padding: 5px 10px;
	border-radius: 80px;
	border: 1px solid #fff;
}

/*로그관리*/
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th,
	table.dataTable tfoot td {
	text-align: center !important;
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date,
	table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
	text-align: center !important;
}