@charset "utf-8";
/* 
- 본 저작물은 행정안전부에서 2024년 작성하여 공공누리 제1유형으로 개방한 '범정부 UI/UX 디자인시스템(KRDS)'을 이용하였으며, 해당 저작물은 'KRDS'디자인시스템 홈페이지(www.krds.or.kr)에서 무료로 다운받으실 수 있습니다.
- KRDS(www.krds.or.kr)기반으로 일부 스타일 및 기능 수정
*/


/* title-text 
=============================================================== */
/* 페이지 단위 타이틀 */
.head_l { 
	font-size: 5.0rem; font-weight: 700;
	@media screen and (max-width: 600px){
		font-size: 4.0rem;
	}
}

.head_m {
	font-size: 4.0rem; font-weight: 700; 
	@media screen and (max-width: 600px){
		font-size: 3.2rem;
	}
}

.head_s { 
	font-size: 3.0rem; font-weight: 700; 
	@media screen and (max-width: 600px){
		font-size: 2.4rem;
	}
}

/* 템플릿 단위, 모듈 단위 */
.title_xl { font-size: 2.5rem; font-weight: 700; }
.title_l  { font-size: 2.1rem; font-weight: 700; }
.title_m  { font-size: 1.9rem; font-weight: 700; }
.title_s  { font-size: 1.7rem; font-weight: 700; }
.title_xs { font-size: 1.5rem; font-weight: 600; }

/* 본문텍스트 */
.body_l  { font-size: 2.0rem; word-break: keep-all; }
.body_m  { font-size: 1.7rem; word-break: keep-all; }
.body_s  { font-size: 1.5rem; word-break: keep-all; }
.body_xs { font-size: 1.3rem; word-break: keep-all; }
@media screen and (max-width: 600px){
	.body_l { font-size: 1.7rem; line-height: 1.5; }
}

/* links */
.link_l { font-size: 1.9rem; color: var(--hl-point); border-bottom: 1px solid var(--hl-point); }
.link_m { font-size: 1.7rem; color: var(--hl-point); border-bottom: 1px solid var(--hl-point); }
.link_s { font-size: 1.5rem; color: var(--hl-point); border-bottom: 1px solid var(--hl-point); }


/* 메인 visual title */
.main_title_01 { 
	font-size: 5.0rem; font-weight: 700; 
	@media screen and (max-width: 600px){
		font-size: 3.0rem;
	}
}
.main_title_02 { font-size: 2.5rem; font-weight: 700; margin-bottom: 24px;}

/* 서브 페이지 title */
.page_title_01 { 
	position: relative; width: 100%; padding: 40px 20px; margin-bottom: 60px;
	font-size: 4.0rem; line-height: 1.5; text-align: center; word-break: keep-all; color: var(--hl-text);
	background: #e5f1f0;
	@media screen and (max-width: 600px){
		font-size: 3.2rem; padding: 20px 16px; margin-bottom: 60px;
	}
	@media screen and (max-width: 460px){
		font-size: 3.0rem; padding: 20px 10px;
	}
	@media screen and (max-width: 380px){
		word-break: break-all;
	}
}

.title_01 { 
	position: relative; display: block; font-size: 3.4rem; word-break: keep-all; margin-bottom: 40px; 
	@media screen and (max-width: 600px){
		font-size: 2.8rem;
	}
}
.title_02 { 
	position: relative; display: inline-block; font-size: 3.0rem; margin-bottom: 40px; 
	&::before { position: absolute; content: ''; display: inline-block; bottom: -10px; width: 100%; height: 4px; background: var(--hl-point-20); }
	@media screen and (max-width: 600px){
		font-size: 2.4rem;
	}
}
.title_03 {
	position: relative; font-size: 2.4rem; padding-left: 20px; margin-bottom: 32px;
	&::before { position: absolute; content: ''; display: inline-block; top: 6px; left: 0; width: 8px; height: 100%; margin-top: -5px; background: var(--hl-point); }
	@media screen and (max-width: 600px){
		font-size: 2.1rem;
	}
}
.title_04 {
	position: relative; font-size: 2.2rem; font-weight: 700; padding-left: 14px; margin-bottom: 20px;
	&::before { position: absolute; content: ''; display: inline-block; top: 6px; left: 0; border-left: 3px solid var(--hl-secondary); height: 24px; }
}
.title_05 {	font-size: 2.0rem; font-weight: 700; margin-bottom: 15px;}
.title_06 {	font-size: 1.7rem; font-weight: 700; margin-bottom: 15px;}
.title_07 {	font-size: 1.5rem; font-weight: 700; margin-bottom: 15px;}



/* 오류, 경고, 완료 */
.txt_err { display: flex; align-items: center; width: 100%; text-align: left; color: var(--hl-danger);  font-size: 1.5rem; margin-top: 10px;} 
.txt_war { display: flex; align-items: center; width: 100%; text-align: left; color: var(--hl-warning); font-size: 1.5rem; margin-top: 10px;} 
.txt_suc { display: flex; align-items: center; width: 100%; text-align: left; color: var(--hl-success); font-size: 1.5rem; margin-top: 10px;} 
.txt_err > img,
.txt_war > img,
.txt_suc > img { width: 18px; height: 18px; margin-right: 5px; }

.text_underline { text-decoration: underline; }




/* button-style
=============================================================== */
.btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    width: auto; padding: 14px 20px;
	background-color: var(--hl-primary);
    border: 1px solid var(--hl-primary); border-radius: 6px;
    font-size: 1.8rem; color: var(--hl-white-fixe); white-space: nowrap;
    cursor: pointer; transition: 0.4s ease-in-out; 
	&:hover { color: var(--hl-white-fixe); background-color: var(--hl-primary-70); border-color: var(--hl-primary-70); }
	&:active { color: var(--hl-white-fixe); background-color: var(--hl-primary-80); border-color: var(--hl-primary-80);}
	&:focus { color: var(--hl-white-fixe); outline-offset: -0.4rem; outline: 2px solid rgba(255, 255, 255, 0.9); transition: none;}

	/* size */
	&.xsm { min-height: 3.2rem; padding: 0.4rem 1.0rem; border-radius: 0.6rem; font-size: 1.5rem; }
	&.sm  { min-height: 4.0rem; padding: 0.6rem 1.2rem; border-radius: 0.6rem; font-size: 1.6rem; }
	&.md  { min-height: 5.0rem; padding: 1.0rem 2.0rem; border-radius: 0.8rem; font-size: 1.7rem; }
	&.lg  { min-height: 5.6rem; padding: 1.0rem 2.0rem; border-radius: 0.8rem; font-size: 1.9rem; }
	&.xlg { min-height: 6.4rem; padding: 1.4rem 2.4rem; border-radius: 0.8rem; font-size: 1.9rem; }

	/* color */
	&.primary {
		border: 1px solid var(--hl-primary); background-color: var(--hl-primary); color: var(--hl-white-fixe);
		&:hover { background-color: var(--hl-primary-70); border-color: var(--hl-primary-70); }
		&:active { background-color: var(--hl-primary-80); border-color: var(--hl-primary-80); }
	}

	&.pri_line {
		background-color: var(--hl-primary-5); border: 1px solid var(--hl-primary); color: var(--hl-primary);
		&:hover { background-color: var(--hl-primary-10); }
		&:active { background-color: var(--hl-primary-20); }
		&:focus { outline-offset: -0.4rem; outline: 2px solid var(--hl-primary); }
	}

	&.pri_ter {
		background-color: var(--hl-white); border: 1px solid var(--hl-gray-90); color: var(--hl-icegray-90);
		&:hover { background-color: var(--hl-gray-5); }
		&:active { background-color: var(--hl-gray-10); }
		&:focus { outline-offset: -0.4rem; outline: 2px solid var(--hl-primary); }
	}

	&.point {
		background-color: var(--hl-point); border: 1px solid var(--hl-point); color: var(--hl-white-fixe);
		&:hover { background-color: var(--hl-point-70); border-color: var(--hl-point-70); }
		&:active { background-color: var(--hl-point-80); border-color: var(--hl-point-80); }
	}

	&.poi_line {
		background-color: var(--hl-point-5); border: 1px solid var(--hl-point); color: var(--hl-point);
		&:hover { background-color: var(--hl-point-10); }
		&:active { background-color: var(--hl-point-20); }
		&:focus { outline-offset: -0.4rem; outline: 2px solid var(--hl-point); }
	}

	&.poi_ter {
		background-color: var(--hl-white); border: 1px solid var(--hl-gray-90); color: var(--hl-icegray-90);
		&:hover { background-color: var(--hl-gray-5); }
		&:active { background-color: var(--hl-gray-10); }
		&:focus { outline-offset: -0.4rem; outline: 2px solid var(--hl-point); }
	}

	&.secondary {
		background-color: var(--hl-secondary); border: 1px solid var(--hl-secondary); color: var(--hl-white-fixe);
		&:hover { background-color: var(--hl-secondary-70); border-color: var(--hl-secondary-70); }
		&:active { background-color: var(--hl-secondary-80); border-color: var(--hl-secondary-80); }
	}
	&.sec_line {
		background-color: var(--hl-secondary-5); border: 1px solid var(--hl-secondary); color: var(--hl-secondary);
		&:hover { background-color: var(--hl-secondary-10); }
		&:active { background-color: var(--hl-secondary-20); }
		&:focus { outline-offset: -0.4rem; outline: 2px solid var(--hl-secondary); }
	}
	&.sec_ter {
		background-color: var(--hl-white); border: 1px solid var(--hl-gray-90); color: var(--hl-icegray-90);
		&:hover { background-color: var(--hl-gray-5); }
		&:active { background-color: var(--hl-gray-10); }
		&:focus { outline-offset: -0.4rem; outline: 2px solid var(--hl-secondary); }
	}

	/* text button */
	&.btn_txt {
		color: var(--hl-text); border: 0; background-color: inherit; padding: 0 0.2rem;
		&:hover { background-color: var(--hl-point-5); }
		&:active { background-color: var(--hl-point-10); }
		&:focus { outline-offset: 0.4rem; outline: 2px solid var(--hl-point); }
		&.underline { text-decoration: underline; }
		&.link { 
			/* 링크이면서 텍스트사이에 있는경우 높이값 초기화 */
			height: auto; text-decoration: underline;
			&:hover { color: var(--hl-primary); }
		}
		&.ico_arr {
			position: relative;	
			&::after { display: inline-flex; content: ''; width: 20px; height: 20px; background: url('../img/ico_arr.svg') no-repeat; }
		}
		&.ico_go {
			position: relative;	
			&::after { display: inline-flex; content: ''; width: 20px; height: 20px; background: url('../img/icon_go.svg') no-repeat; } 
		}
		&.ico_more {
			position: relative;	
			&::after { display: inline-flex; content: ''; width: 20px; height: 20px; background: url('../img/ico_more_20.svg') no-repeat; } 
		}
	}

	&.btn_down { 
		position: relative; color: var(--hl-text); 
		border: 0; border-radius: 0; border-bottom: 2px solid var(--hl-point); padding: 0 16px; 
		background: var(--hl-point-5); transition: 0.3s ease-in-out; 
		&::after { position: absolute; content: ''; top: 0px; right: 10px; opacity: 0; background: url('../img/btn_download.svg') no-repeat; transition: 0.3s ease-in-out; }
		&:focus,
		&:active,
		&:hover {
			color: var(--hl-white-fixe); background: var(--hl-point); padding-right: 40px;
			&::after { opacity: 1; transition-delay: 0.2s; }
		}

		/* size */
		&.xsm {
			&::after { width: 18px; height: 18px;}
			&:focus::after,
			&:active::after,
			&:hover::after { top: 50%; margin-top: -9px; }		
		}
		&.sm {
			&::after { width: 20px; height: 20px;}
			&:focus::after,
			&:active::after,
			&:hover::after { top: 50%; margin-top: -10px; }
		}
		&.md {
			&::after { width: 24px; height: 24px;}
			&:focus::after,
			&:active::after,
			&:hover::after { top: 50%; margin-top: -12px; }
		}
	
		@media screen and (max-width: 900px){
			margin-bottom: 10px; 
		}
	}

	&.btn_right { 
		position: relative; color: var(--hl-text); white-space: normal; 
		border: 0; border-bottom: 2px solid var(--hl-point); border-radius: 0; background: var(--hl-point-5); transition: 0.3s ease-in-out; 
		&::after { position: absolute; content: ''; width: 20px; height: 20px; top: 50%; right: 30px; margin-top: -9px; opacity: 0; background: url('../img/btn_right.svg') no-repeat; transition: 0.3s ease-in-out; }
		&:focus,
		&:active,
		&:hover {
			color: var(--hl-white-fixe); background: var(--hl-point); padding-right: 40px; 
			&::after { opacity: 1; transition-delay: 0.2s; }
		}

		/* size-xsm */
		&.xsm::after { width: 18px; height: 18px; margin-top: -9px; }
		&.xsm:focus::after,
		&.xsm:active::after,
		&.xsm:hover::after { right: 10px; }		
		
		/* size-sm */
		&.sm::after { width: 20px; height: 20px; margin-top: -10px; }
		&.sm:focus::after,
		&.sm:active::after,
		&.sm:hover::after { right: 10px; }
		
		/* size-md */
		&.md::after { width: 24px; height: 24px; margin-top: -12px; }
		&.md:focus::after,
		&.md:active::after,
		&.md:hover::after { right: 10px; }

		@media screen and (max-width: 900px){
			margin-bottom: 10px; 
		}
	}

	&.btn_newPage { 
		position: relative; color: var(--hl-text); white-space: normal;
		border: 0; border-bottom: 2px solid var(--hl-point); border-radius: 0; background: var(--hl-point-5); transition: 0.3s ease-in-out; 
		&::after { position: absolute; content: ''; width: 20px; height: 20px; top: 50%; right: 30px; margin-top: -9px; opacity: 0; background: url('../img/icon_go_w.svg') no-repeat; transition: 0.3s ease-in-out; }
		&:focus,
		&:active,
		&:hover {
			color: var(--hl-white-fixe); background: var(--hl-point); padding-right: 40px; 
			&::after { right: 10px; opacity: 1; transition-delay: 0.2s; }
		}
		&.xsm::after { width: 18px; height: 18px; margin-top: -9px; }
		&.sm::after { width: 20px; height: 20px; margin-top: -10px; }
		&.md::after { width: 24px; height: 24px; margin-top: -12px; }
	}

	&.btn_newPage2 { 
		position: relative; white-space: normal; transition: 0.3s ease-in-out; 
		&::after { position: absolute; content: ''; width: 20px; height: 20px; top: 50%; right: 30px; margin-top: -9px; opacity: 0; background: url('../img/icon_go_w.svg') no-repeat; transition: 0.3s ease-in-out; }
		&:focus,
		&:active,
		&:hover {
			padding-right: 40px; 
			&::after { right: 10px; opacity: 1; transition-delay: 0.2s; }
		}
		&.xsm::after { width: 18px; height: 18px; margin-top: -9px; }
		&.sm::after { width: 20px; height: 20px; margin-top: -10px; }
		&.md::after { width: 24px; height: 24px; margin-top: -12px; }
	}

	&[disabled] {
		background-color: var(--hl-gray-20) !important;
		border-color: var(--hl-gray-30) !important;
		color: var(--hl-gray-50) !important;
		cursor: default;
	}
}

.btn_area_02 { display: flex; gap: 20px; justify-content: center;}
@media screen and (max-width: 500px){
	.btn_area_02 > .btn { width: 50%; }
}
.btn_pdf { 
	position: relative; display: flex; align-items: center; color: var(--hl-white-fixe); border-radius: 6px; 
	padding: 10px 40px 10px 20px; background: var(--hl-point); box-shadow: 0 5px 8px rgba(82,109,170,0.4); transition: all 0.3s; 
	&::after { position: absolute; content: ''; top: 0px; right: 10px; width: 22px; height: 22px; opacity: 0; background: url('../img/btn_download.svg') no-repeat; transition: all 0.3s;}
	&:hover { color: var(--hl-white-fixe); background: var(--hl-point-70); box-shadow: none;}
	&:hover::after { opacity: 1; transform: translateY(14px); transition: all 0.3s;}
}


/* 탭메뉴
=============================================================== */
/* 1Depth */
.tab_aria_01 { 
	margin-bottom: 50px;

	> ul { 
		display: flex; flex-wrap: wrap; 
		&.list__2 > li { width: calc(100%/2); }
		&.list__3 > li { width: calc(100%/3); }
		&.list__4 > li { width: calc(100%/4); }
		&.list__5 > li { width: calc(100%/5); }
		&.list__6 > li { width: calc(100%/6); }
		> li {
			margin: -1px 0 0 -1px; border:1px solid #ccc;
			> a {
				display: flex; position: relative; width: 100%; height: 100%; 
				font-size: 1.7rem; color:#757575; font-weight:bold; text-align: center; 
				padding: 14px 10px; align-items: center; justify-content: center; 
				transition: box-shadow 0.18s ease;

				/* &[aria-selected="true"] {
					position: relative; color: var(--hl-point);
					&::before { display: block; content:""; position: absolute; top: 0; left: -1px; width: 6px; height: 100%; background: var(--hl-point); }
				} */
				&[aria-selected="true"],
				&.on,
				&:hover { box-shadow: inset 0 0 0 5px var(--hl-primary); color: var(--hl-primary); }
			}
		}
		@media screen and (max-width: 800px){
			&.list__5 > li,
			&.list__6 > li { width: calc(100%/3); }
		}
		@media screen and (max-width: 420px){
			&.list__3 > li,
			&.list__4 > li,
			&.list__5 > li,
			&.list__6 > li { width: calc(100%/2); }
		}
	}
}


/* 2Depth */
.tab_aria_02 { 
	margin-bottom: 50px; 
	> ul { 
		display: flex; flex-wrap: wrap; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
		> li {
			width: calc(100% / 6);
			> a { 
				display: flex; position: relative; width: 100%; height: 100%; 
				font-size: 1.7rem; color:#757575; font-weight:bold; text-align: center; 
				padding: 14px 10px; align-items: center; justify-content: center;
				&[aria-selected="true"] {
					position: relative; color: var(--hl-white-fixe); background: var(--hl-secondary); 
					/* &::before { position: absolute; display: block; content:""; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--hl-point); } */
				}
			}
		}
	}

	/* 텍스트 버튼 */
	.btn_select {
        position: relative; width: 100%; height: 100%; font-size: 18px; text-align: left; font-weight: normal; color: var(--hl-gray-90); padding: 10px 50px 10px 20px; border-bottom: 5px solid var(--hl-white); transition: all 0.3s;
		&:hover,
		&:active,
		&[aria-expanded="true"] { color: var(--hl-point); border-bottom: 5px solid var(--hl-point); background: var(--hl-point-5); }
    }

	/* 이미지 버튼 */
    .icon_arr {
        position: absolute; display: inline-block; top: 50%; right: 12px; width: 24px; height: 24px; margin-top: -10px; background: url('../img/arr_down.svg') no-repeat; transition: all 0.3s;
        &.active,
        .btn_select[aria-expanded='true'] & { transform: rotate(180deg); }
    }

	/* option메뉴 */
	.select_wrap {
        position: relative;
		> .li_sort {
			position: absolute; top: 55px; left: 0; width: 100%; background: var(--hl-white); z-index: 100;
			box-shadow: 0px 16px 16px 0px rgba(12, 12, 13, 0.1), 0px 10px 10px 0px rgba(12, 12, 13, 0.05);
			> li {
				padding: 5px 10px;
				> a {
					display: block; padding: 10px; border-radius: 10px; 	
					&:hover,
					&:active,
					&:focus,
					&[aria-selected="true"] { font-weight: bold; background: var(--hl-point-10); cursor: default; }
				}
			}
		}
    }
}


.tab_aria_03 {
	margin-bottom: 50px;
	> ul { 
		width: 100%;
		display: flex; flex-wrap: wrap;
		&.list__2 > li { width: calc(100%/2); }
		&.list__3 > li { width: calc(100%/3); }
		&.list__4 > li { width: calc(100%/4); }
		&.list__5 > li { width: calc(100%/5); }
		&.list__6 > li { width: calc(100%/6); }
		> li { 
			text-align: center; margin: 0 -1px -1px 0;  border: 1px solid #ddd; 
			> a {
				position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; 
				font-size: 2.0rem; color:var(--hl-text); font-weight: 500; text-align: center; word-break: keep-all; padding: 14px 10px; transition: all 0.3s;
				&.on,
				&:active, 
				&:hover,
				&[aria-selected="true"] {
					background: var(--hl-point); color: var(--hl-white-fixe);
				}
				&.on:focus {
					outline-offset: -0.4rem;
					outline: 2px solid var(--hl-white-fixe);
				}
			}
		}
		@media screen and (max-width: 800px){
			&.list__5 > li,
			&.list__6 > li { width: calc(100%/3); }
		}
		@media screen and (max-width: 420px){
			&.list__3 > li,
			&.list__4 > li,
			&.list__5 > li,
			&.list__6 > li { width: calc(100%/2); }
		}
	}
	/* @media screen and (max-width: 800px){
		display: none;
	} */
} 
.tab_select { 
	display: none; width: 100%; 
	.t_select { width: 100%; padding: 12px; background: url('../img/icon_select_arr.svg') no-repeat center right 1.4rem; border-radius: 8px; background-size: 16px;} 
	.t_select > select { padding: 12px; }
	@media screen and (max-width: 800px){
		display: block;
	}
}

.tab_aria_04 {
	margin-bottom: 30px;
	.tab_list { 
		width: 100%; display: flex; 
		> li { 
			text-align: center; border-right: 1px solid var(--hl-white); margin: 0 -1px -1px 0; 
			> a { 
				display: block; height: 100%; font-size: 1.7rem; font-weight: bold; color: #757575;
				padding: 10px 20px; border-bottom: 3px solid var(--hl-point-10); transition: all 0.3s;
				&.on,
				&:active, 
				&:hover,
				&[aria-selected="true"] {
					color: var(--hl-point);
					border-bottom: 3px solid var(--hl-point); 
				}
				@media screen and (max-width: 400px){
					font-size: 1.5rem;
				}
			}
		}
	}
	@media screen and (max-width: 800px){
		.tab_list { min-width: 800px; }
	}
} 
.tab_aria_05 {
	margin-bottom: 20px;
	> ul { 
		display: flex; width: 100%; flex-wrap: wrap; gap: 10px;
		> li { 
			text-align: center;
			> a { 
				display: block; height: 100%; padding: 4px 20px; font-size: 1.5rem; 
				border-radius: 20px; background: #f0f0f0; transition: all 0.3s;
				&.on,
				&:active, 
				&:hover,
				&[aria-selected="true"] {
					background: var(--hl-point); color: var(--hl-white);
				}
				&:focus {
					outline-offset: -0.4rem;
					outline: 2px solid var(--hl-white);
				}
				@media screen and (max-width: 400px){
					font-size: 1.2rem;
				}
			}
		}
	}
} 


/* 테이블
=============================================================== */
.table_area {
	@media all and (max-width:1024px){ 
		overflow-x: auto;
	}
	.badge { margin-right: 10px; }
	
	/* 기본 스타일 */
	.table_01 { 
		border-top: 3px solid var(--hl-point-90);
		& tr {
			&:hover { background-color: var(--hl-gray-5); }
			> th {
				text-align: center; font-size: 1.8rem; word-break: keep-all; padding: 10px; 
				background-color: var(--hl-icegray-5); border-bottom: 1px solid var(--hl-icegray-10); border-left: 1px solid var(--hl-icegray-10); vertical-align: middle; 
				&:first-child { border-left: none;}
				@media all and (max-width:1024px){
					word-break: break-all;
				}
				@media all and (max-width:400px){ 
					font-size: 1.5rem;
				}
			}
			> td { 
				padding: 10px; vertical-align: middle; border-left: 1px solid var(--hl-icegray-10); border-bottom: 1px solid var(--hl-icegray-10); word-break: keep-all;
				&:first-child { border-left: none; }
				@media all and (max-width:1024px){
					word-break: break-all;
				}
				@media all and (max-width:400px){ 
					font-size: 1.5rem;
				}
			}
		}
	}


	/* 모바일에서 block 형식으로 배치 */
	.table_02 {
		border-top: 3px solid var(--hl-point-90); border-bottom: 1px solid #5d5d5d;
		@media all and (max-width:600px){ 
			> colgroup { display: none; }
			> thead { display: none; }
		}
		& tr{
			&:hover { background-color: var(--hl-gray-5); }
			@media all and (max-width:600px){ 
				display: block; width: 100%; padding: 15px 0; border-bottom: 1px solid var(--hl-icegray-10);
			}
			> th { 
				text-align: center; font-size: 1.8rem; padding: 10px; 
				background-color: var(--hl-point-5); border-bottom: 1px solid var(--hl-icegray-10); border-left: 1px solid var(--hl-icegray-10); 
				vertical-align: middle; word-break: keep-all;
				&:first-child { border-left: none;}
				@media all and (max-width:1024px){
					word-break: break-all;
				}
			} 
			> td { 
				padding: 10px; vertical-align: middle; border-left: 1px solid var(--hl-icegray-10); border-bottom: 1px solid var(--hl-icegray-10); word-break: keep-all; 
				&:first-child { border-left: none; }
				@media all and (max-width:1024px){
					word-break: break-all;
				}
				@media all and (max-width:600px){
					position: relative; display: flex; align-items: center; width: 100%; height: auto; font-size: 1.5rem; min-height: 24px; padding: 0 0 0 130px; text-align: left; border: none;
					&:before { content: attr(data-before); display: block; height: 100%; font-size: 1.5rem; width: 110px; font-weight: 900; text-align: right; position: absolute; left: 0px;}
				}
			} 
		}
	}

	/* 국제학술심포지엄 - 리스트형 */	
	.table_03 {
		> tbody {
			> tr { position: relative; display: grid; grid-template-columns: 7.5fr 2.5fr; align-items: center; overflow: hidden; margin-bottom: 15px; background: var(--hl-gray-5); transition: all 0.3s;}
			> tr:hover { box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); }
			> tr::before { position: absolute; content: ''; display: block; left: 0; top: 0; width: 6px; margin-left: -6px; height: 100%; background: var(--hl-point); transition: all 0.3s;}
			> tr:hover::before { margin-left: 0; }
			> tr > td { display: flex; word-break: keep-all; }
			> tr > td:nth-of-type(1) > a { width: 100%; padding: 16px 20px; }
			> tr > td:nth-of-type(2) { width: 100%; display: flex; align-items: center; justify-content: center;}
			> tr > td .date { font-size: 1.5rem; font-weight: 400; }
			> tr > td .title { font-size: 1.9rem; font-weight: 500; color: var(--hl-point); }
			> tr > td .poster { width: 50%; display: flex; flex-direction: column; align-items: center; padding: 16px 10px 16px 10px;}
			> tr > td .poster > img { width: 40px; margin: 0 auto; }
			> tr > td .poster > span { font-size: 1.4rem; font-weight: 400; }
			> tr > td .btn { margin: 16px 20px; }
			> tr > td .poster:hover > span { text-decoration: underline; }
			@media all and (max-width:600px) {
				> tr { grid-template-columns:auto; grid-template-rows: 1fr; justify-items: start; }
				> tr > td:nth-of-type(2) { justify-content: flex-start; }
			}
		}	
	}

	& .link { 
		text-align: left;
		> a { 
			display: block; width: 100%; word-break: keep-all;
			&:hover { text-decoration: underline; }
			&:focus { outline-offset: 0.4rem; }
			@media all and (max-width:1024px){
				word-break: break-all;
			}
		}
	}
}


/* 단계표시기(step indicator)
=============================================================== */
.indicator_area {
	width: 100%;
	.steps { display: flex; width: 100%; justify-content: center; flex-direction: row; align-items: center; background-color: var(--hl-white); border: 1px solid #ddd; border-radius: 10px; padding: 20px 34px 50px 34px; }
	.steps__connector, 
	.steps__step { position: relative; }
	.steps__connector { width: 100%; height: 2px; margin-inline-start: 0; margin-bottom: 6px; transition: background-color var(--trans-dur); background-color: var(--hl-gray-40); transform: translateY(-50%); }
	.steps__connector:before {
		content: ""; display: block; width: 100%; height: 100%; background-color: var(--hl-point);
		transform: scale(0, 1); transform-origin: 0 50%; transition: background-color var(--trans-dur), transform var(--trans-dur) var(--trans-timing);
	}
	[dir=rtl] .steps__connector:before { transform-origin: 100% 50%; }
	.steps__step { display: flex; align-items: center; flex-shrink: 0; z-index: 1; }
	.steps__step_name {
		position: absolute; top: 100%; left: 50%; width: 6em; color: var(--hl-gray-40); font-size: 12px; text-align: center;
		transform: translateX(-50%); transition: color var(--trans-dur) var(--trans-timing), font-weight var(--trans-dur) var(--trans-timing);
	}
	.steps__step_number {
		color: white; border-radius: 50%; text-align: center; width: 1.5em; height: 1.5em;
		margin-inline-end: 0; margin-bottom: 6px; background-color: var(--hl-gray-40);
		transition: background-color var(--trans-dur) var(--trans-timing), box-shadow var(--trans-dur) var(--trans-timing);
	}
	.steps__step_current .steps__step_name, 
	.steps__step_done .steps__step_name {
		color: var(--hl-point);
		font-weight: 700;
	}
	.steps__step_current .steps__step_number, 
	.steps__step_done .steps__step_number {
		background-color: var(--hl-point);
	}
	.steps__step_current .steps__step_number, 
	.steps__step_current .steps__step_name {
		transition-delay: var(--trans-dur);
	}
	.steps__step_current .steps__step_number {
		box-shadow: 0 0 0 3px rgba(97, 103, 201, 0.4);
	}
	.steps__step_done + .steps__connector:before {
		transform: scale(1, 1);
	}
	.btn_group { display: flex; justify-content: center; gap: 20px; margin-top: 2.4rem; }
}

/* 누리집 전자정부 step */
.step_wrap {
	display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row;
	> li {
		flex: 1; position: relative; font-size: 1.5rem;
		&::after { position: absolute; top: 1rem; left: 0; content: ""; width: 100%; height: 0.1rem; background-color: var(--hl-gray-40); }
		> span {
			display: flex; flex-direction: column; position: relative; padding-top: 3.2rem; padding-right: 3.2rem;
			&::before,
			&::after { content: ''; border-radius: 100%; }
			&::before { position: absolute; top: 0; left: 0; z-index: 2; width: 2.4rem; height: 2.4rem; background-color: var(--hl-gray-20); border: 1px solid var(--hl-gray-20); }
		}
		.step { color: var(--hl-gray-70); }
		.step-tit { font-weight: 700; white-space: nowrap; }
		&.done {
			&::after { background-color: var(--hl-point); }
			> span {
				&::before { width: 1.6rem; height: 1.6rem; margin-top: .2rem;  border: 0; background-color: var(--hl-point); }
				&::after { 
					position: absolute; top: 0.4rem; left: 0.2rem; z-index: 3; width: 1.2rem; height: 1.2rem; 
					background: url('../img/ico_check.svg') no-repeat; background-position: center; background-size: contain; 
				}
			}
		}
		&.active > span {
			&::before { background-color: var(--hl-white); border-color: var(--hl-point); }
			&::after {
				position: absolute; top: 0.4rem; left: 0.4rem; z-index: 3; width: 1.6rem; height: 1.6rem;
				background: var(--hl-primary) url('../img/ico_step_active.svg') no-repeat center; background-size: contain;
			}
		}
		&:last-child::after { display: none; }
	}
}

/* 신청 및 처리 절차 */
.step_wrap_02 {
	width: 100%;
	.service_step {
		position: relative; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 1.6rem; padding-bottom: 20px;
		> li {
			position: relative; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 1.6rem; padding-left: 6.6rem; padding-bottom: 20px;
			&:last-of-type::before { display: none; }
			> .num {
				display: flex; align-items: center; justify-content: center; flex-direction: row; 
				position: absolute; top: 0; left: 1.2rem; width: 2.4rem; height: 2.4rem; color: var(--hl-white); border-radius: 100%; background-color: var(--hl-point); z-index: 2; 
			}
			&::before { position: absolute; top: 2.0rem; left: 2.4rem; content: ""; width: 0.1rem; height: 100%; background-color: var(--hl-point-20); }
			> .tit_area {
				display: flex; width: 100%;
				> .tit { color: var(--hl-point); font-weight: 700; }
				> .period {
					position: relative; margin-left: 0.4rem; padding-left: calc(0.4rem + 0.1rem);
					&::before { position: absolute; content: ""; top: 50%; left: 0; width: 0.1rem; height: 1.5rem; background-color: var(--hl-gray-40); transform: translateY(-50%); }
				}
			}
			> .conts_desc { width: 100%; }
		}
	}
}

/* 외래 */
.step_wrap_03 {
	width: 100%;
	> .flex {
		display: flex; align-items: stretch;
		> li {
			position: relative; display: inline-flex; width: calc(100%/4); align-items: center; min-height: 80px; padding: 10px; justify-content: center; 
			background-color: var(--hl-point-5); border-radius: 10px; border: 1px solid var(--hl-point-70);
			&::after { position: absolute; display: inline-block; content: ''; top: 50%; right: -40px; width: 24px; height: 24px; margin-top: -12px; background: url('../img/ico_arr.svg') right 50% no-repeat; }
			&:not(:last-child) { margin-right: 50px; }
			&:last-of-type::after { display: none; }
		}
	}
}

/* box-style 
=============================================================== */
.tBox {
	border-radius: 1.0rem; padding: 2.0rem;
	&.tBox_guide { background-color: var(--hl-icegray-5); }
	&.tBox_01 {
		position: relative; background: var(--hl-point-5);
		&::after { 
			position: absolute; content: ''; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width: 300px; background: #777; 
			-moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; 
			-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); 
			z-index: -1;
		}
	}
	&.tBox_02 {
		position: relative; background: var(--hl-point-5);
		&::before, 
		&::after { 
			position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; 
			-moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777;
			-webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);
			z-index: -1;
		}
		&::after {
			right: 10px; left: auto;
			-webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); 
		}
	}
	&.tBox_03 { border: 1px solid #e6e6e6;  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
	&.tBox_04 { border: 1px solid #ddd; }
	&.tBox_05 { border-radius: 0 !important; border-top: 1px solid #aaaaaa; background: #eeeeee;}
	&.tBox_06 { padding: 10px; border-radius: 6px; background: var(--hl-icegray-5); margin-bottom: 0; }
	&.tBox_07 { font-size: 1.8rem; padding: 20px; line-height: 1.8; border-radius: 10px; background: var(--hl-icegray-5); margin-bottom: 30px; }
	@media all and (max-width:500px){
		&.tBox_07 { font-size: 1.6rem; line-height: 1.5; }
	}
	&.tBox_08 { padding: 20px; background: #f1f3f6; }
}


/* 아코디언
=============================================================== */
.accordion_01 {
	border-top: 2px solid var(--hl-point-50);
	& .accordion-item {
		background-color: var(--hl-white); border-bottom: 1px solid var(--hl-gray-40);
		& .btn-accordion {
			position: relative; width: 100%; min-height: 6.4rem; padding: 2.0rem; font-size: 1.9rem; font-weight: bold; text-align: left;
			&::after {
				position: absolute; top: 2.2rem; right: 20px; content: ""; width: 2.4rem; height: 2.4rem;
				background: url('../img/ico_arr_accordion.svg') no-repeat center; background-size: 2rem; transition: 0.4s ease-in-out; transform: rotate(0deg);
			}
			&.active::after { transform: rotate(180deg); }
		}
		.accordion-collapse { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(0, 1, 0, 1); }
		&.active {
			.accordion-collapse { height: auto; max-height: 1000vh; transition: max-height 1.5s ease-in-out; }
		}
		.accordion-body { padding: 2.0rem; background-color: var(--hl-gray-5);}
	}
}

/* 레이어 팝업
=============================================================== */
.layer_popup_01 { 
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; z-index: 100;
	opacity: 1; visibility: visible; transition: visibility 0.15s 0.3s, z-index 0s 0.3s, opacity 0.2s;
	&[aria-hidden='true']{ opacity: 0; visibility: hidden; pointer-events: none; }

	.layer_area {
		position: relative; display: flex; justify-content: flex-start; flex-direction: row; opacity: 0; top: -200px;
		width: 90rem; height: 100%; min-height: 26.4rem; margin: 0 auto; align-items: center; z-index: 100; transition: all 0.3s; 
		&.open { top: 0; opacity: 1; }
		.layer_box {
			display: flex; align-items: center; justify-content: flex-start; flex-direction: column; position: relative; z-index: 100; width: 100%; min-height: 300px; max-height: 80%;
			border-radius: 10px; outline-color: transparent; transition: outline-color 0.1s; background: var(--hl-white);
			> .layer_top { 
				display: flex; align-items: center; width: 100%; padding: 16px 20px; border-radius: 10px 10px 0 0; background: var(--hl-icegray-10);
				.tit { font-size: 2.2rem; }
			}
			> .layer_con {
				display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; position: relative; overflow-y: auto; padding: 20px; 
				/* 스크롤 박스 */
				.scroll_box {
					width: 100%; height: 300px; padding: 10px; background: var(--hl-gray-5); overflow-y: scroll;
					&::-webkit-scrollbar { width: 10px; height: 10px;}
					&::-webkit-scrollbar-thumb {
						background-color: #B0B0B0;
						border-radius: 10px;
						background-clip: padding-box;
						border: 2px solid transparent;
					}
					&::-webkit-scrollbar-track {
						background-color: #E0E0E0;
						border-radius: 10px;
						box-shadow: inset 0px 0px 3px white;
					}
				}
				.input_flex { display: flex; flex-direction: column; gap: 20px; width: 100%; }
			}
			> .layer_con02 { 
				/* 연구장비소개 - 이미지가 있는 팝업 */
				display: flex; align-items: flex-start; justify-content: flex-start; padding: 20px; gap: 20px;
			}
			> .layer_bottom { display: flex; align-items: center; justify-content: flex-end; flex-direction: row; gap: 8px; width: 100%; padding: 20px;}
			> .btn_close { position: absolute; display: inline-block; top: 22px; right: 20px; width: 2.0rem; height: 2.0rem; background-size: 2rem; background: url('../img/icon_close_modal_b.svg') no-repeat center;}
			> .btn_close:focus { outline-offset: 2px; outline: 2px solid var(--hl-information); }
		}
	}
	@media all and (max-width:1024px){
		.layer_area { 
			width: 100%; 
			.layer_box { width: 90%; margin-inline: auto; }
		}
		.layer_box > .layer_con .scroll_box { height: 200px; }
	}
	@media all and (max-width:600px){
		.layer_area .layer_box { max-height: calc(100vh - 100px); }
		.layer_area .layer_box > .layer_top .tit { font-size: 2.0rem; }
		.layer_area .layer_box > .layer_con02 { flex-direction: column; overflow: hidden; }
		.layer_area .layer_box > .layer_con02 .table_area { overflow-y: scroll; }
		.layer_area .layer_box > .layer_con02 .pop_img { margin: 0 auto; }
		.layer_area .layer_box > .layer_con02 .pop_img > img { max-height: 200px; }
	}
	@media all and (max-width:420px){
		.layer_area .layer_box { max-height: calc(100vh - 40px); }
		.layer_area .layer_box > .layer_top .tit { font-size: 1.8rem; width: 90%;}
	}

	/* 검은배경 */
	> .modal_back {
		position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background-color: rgba(0, 0, 0, 0.75); transition: all 0.3s;
		&.open { opacity: 1; z-index: 99; }
	}
}


/* Top 배너
=============================================================== */
.top_banner {
	position: relative; width: 100%; height: 100px; background: var(--hl-primary);
	> .flex {
		display: flex; align-items: center; justify-content: flex-end;
		> li {  height: 100px; color: var(--hl-white); }
		> .item_01 {
			width: 60%; display: inline-flex; align-items: center; font-size: 4.0rem; font-weight: 700; padding-left: 50px;
			> span { font-weight: normal; }
		}
		> .item_02 {
			display: flex; justify-content: flex-end; gap: 20px; width: 30%; padding: 0 20px;
			> a { 
				display: flex; align-items: center;  gap: 20px; transition: all 0.3s;
				&:hover { text-decoration: underline; }
			}
		}
		> .item_03 {
			display: flex; align-items: center; gap: 10px; height: 100px; width: 10%; padding: 20px; color: var(--hl-white); background: var(--hl-primary-80); opacity: 0.7;
			&:hover { text-decoration: underline; opacity: 1; }
		}
	}
}

/* 입력
=============================================================== */
.form_group {
	display: flex; flex-direction: column; gap: 0.8rem; width: 100%;
	.sch_input {
		/* 검색창 */
		position: relative; display: flex; width: 50%; 
		> input { width: 100%; background: var(--hl-icegray-5); border: none; }
		> .sch_icon {
			position: absolute; top: 50%; right: 14px; width: 20px; height: 20px; transform: translateY(-50%); background: url('../img/ico_sch.svg') no-repeat;
			&:focus { border-radius: 8px; outline-offset: 0.4rem; outline: 2px solid rgba(36, 107, 235, 0.8); }
		}	
		@media screen and (max-width: 600px) { width: 100%; }
		
	}

	.form_tit { position: relative; width: 100%; display: flex; font-size: 1.8rem;}

	.form_con {
		display: flex; flex-direction: column; gap: 0.8rem; width: 100%;
		> .md { height: 4.8rem; padding: 0 1.6rem; border-radius: 0.8rem; font-size: 1.7rem; }
		> .form_control:placeholder-shown { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1;} 

	}
	.input_group {
		display: flex; align-items: center; gap: 10px; width: 100%;
		.form_select {
			height: 5.0rem; padding: 0 4.0rem 0 1.6rem; border-radius: 0.8rem;
			background: url('../img/icon_select_arr.svg') no-repeat center right 1.4rem;
			background-size: 16px;
		}
	}
	& .form_hint {
		font-size: 1.5rem;
		color: var(--hl-gray-60);
	}
}


.chk_area {
	display: flex; gap: 2.0rem;
	> .form_check {
		> input[type=radio], 
		> input[type=checkbox] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
		> input[type=radio] {
			~ label {
				position: relative; display: inline-flex; min-height: 2rem; padding-left: calc(2rem + 0.8rem); font-size: 1.7rem; line-height: 2.0rem;	
				&:before {
					position: absolute; content: ""; top: 0; left: 0; width: 2rem; height: 2rem;
					background-color: var(--hl-white); border: 1px solid var(--hl-gray-60); border-radius: 100%; transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
				}
				&:after {
					position: absolute; top: calc((2rem - 1rem) / 2); left: calc((2rem - 1rem) / 2); width: 1rem; height: 1rem; content: "";
					background-color: var(--hl-white); border-radius: 100%; z-index: 1; transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
				}
			}
			&:checked ~ label:before { border-color: var(--hl-point); } 
			&:checked ~ label:after { background-color: var(--hl-point); }
			&:focus ~ label { outline-offset: 0.4rem; outline: 2px solid rgba(36, 107, 235, 0.8); }
		}
	
		> input[type=checkbox] {
			~ label {
				position: relative; width: auto; display: inline-flex; margin-right: 10px; padding-left: 30px;
				&:before {
					position: absolute; top: 4px; left: 0; width: 2rem; height: 2rem; content: "";
					background-color: var(--hl-white); border: 1px solid var(--hl-gray-60); border-radius: 4px; /* 체크박스는 사각형 */ transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
				}
				&:after {
					position: absolute; content: ""; top: 4px; left: 0; width: 2.0rem; height: 2.0rem;
				}
			}
			&:checked ~ label:before { border-color: var(--hl-point); background-color: var(--hl-point); }
			&:disabled ~ label:before { border-color: var(--hl-gray-50); background-color: var(--hl-gray-50); }
			&:checked ~ label:after { 
				background-color: var(--hl-white); border-radius: 2px; /* 체크박스 내부 */
				transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1); background: url('../img/ico_checked.svg') no-repeat 0 0; background-size: contain; z-index: 4;
			}
			&:focus ~ label { outline-offset: 0.4rem; outline: 2px solid rgba(36, 107, 235, 0.8); }
		}
	}
}


/* 공통 - 메인팝업
=============================================================== */
.main_pop { 
	position: fixed; max-width: 1000px; border-radius: 10px; top: 130px; left: 30px; background: var(--hl-white); z-index: 1000; box-sizing: border-box;
    box-shadow: 0 13px 27px -5px hsl(240deg 30% 28% / 25%), 0 8px 16px -8px hsl(0deg 0% 0% / 30%), 0 -6px 16px hsl(0deg 0% 0% / 3%);
    -webkit-box-shadow: 0 13px 27px -5px hsl(240deg 30% 28% / 25%), 0 8px 16px -8px hsl(0deg 0% 0% / 30%), 0 -6px 16px hsl(0deg 0% 0% / 3%);
	.popup_top {padding: 10px; text-align: center;}
	.popup_top img {object-fit: contain; max-width: 980px; width: 100%;}
	.popup_top p {line-height: 1.5;}
	.popup_bottom > .flex_right { display: flex; align-items: center; justify-content: flex-end; padding: 10px 15px 10px; }
	.popup_bottom { border-radius: 0 0 10px 10px; min-height: 50px; background: #e0e0e0; }
	.popup_bottom .pop_close { padding: 16px 20px; font-size: 1.6rem; }
	.popup_bottom .pop_close:hover {text-decoration: underline;}
	@media screen and (max-width:500px) {
		top: 80px; width: 90%; margin: 0 5%; left: 0;
	}
}


/* paging
=============================================================== */
.paging { 
	position: relative; text-align: center; margin-top: 50px; 
	display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; justify-content: center;
	.page_navi { position: relative; display: flex; align-items: center; min-width: 34px; min-height: 34px; border-radius: 6px; background: var(--hl-white); color: var(--hl-text); transition: all 0.3s; }
	.page_navi.prev::before  { content: ''; display: block; width: 10px; height: 10px; margin: 10px; background: url('../img/prev.png') center no-repeat; } 
	.page_navi.next::after  { content: ''; display: block; width: 10px; height: 10px; margin: 10px; background: url('../img/next.png') center no-repeat; } 
	.page_navi.prev { justify-content: flex-start; padding-right: 10px; }
	.page_navi.next { justify-content: flex-end; padding-left: 10px; }
	.prev.disabled, .prev.disabled::before, .next.disabled, .next.disabled::after { opacity: 0.5; } 

	.page_links { display: flex; justify-content: center; align-items: center; gap: 10px;}
	.page_links > .selected { font-weight: 700; background: var(--hl-point);  color: var(--hl-white-fixe); }
	.page_links > a { display: flex; justify-content: center; align-items: center; min-width: 34px; min-height: 34px; border-radius: 6px; background: var(--hl-white); color: var(--hl-text); transition: all 0.3s; }
	.page_links .link_dot { display: flex; justify-content: center; align-items: center; min-width: 34px; min-height: 34px; background: url('../img/link_dot.png') center center no-repeat; }
	.page_navi:not(.selected):hover,
	.page_links > a:not(.selected):hover { background-color: var(--hl-gray-20); }
	.page_navi:focus, 
	.page_links > a:focus { outline-offset: 0.2rem; outline: 2px solid var(--hl-information); }
	@media screen and (max-width:500px) {
		gap: 0;
		.page_navi.prev { font-size: 0; }
		.page_navi.next { font-size: 0; }
	}
} 




/* 로그인 팝업 - 작업 전
=============================================================== */
.login_modal { 
	width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.75); visibility:hidden; opacity:0; 
	-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out; z-index: 110;
}
.login_modal.open { opacity:1; visibility:visible; }
.login_modal .modal { 
	position:relative; display:block; top:0; left:0; width:40%; margin:-100px 0 0 30%; background:var(--hl-white); opacity:0;
	-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.login_modal.open .modal { margin-top: 5%; opacity:1; }
.login_modal .modal .head { width: 100%; padding: 10px 20px; overflow: hidden; background:#f0f0f0; }
.login_modal .modal .btn_close { width: 26px; height: 30px; display: block; float: right; }
.login_modal .modal .btn_close::before, 
.login_modal .modal .btn_close::after { content:''; width: 26px; height: 2px; display: block; background: #333;}
.login_modal .modal .btn_close::before { margin-top: 15px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
.login_modal .modal .btn_close::after { margin-top: -2px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); }

/* 팝업 내용 */
.login_form { padding: 20px; word-break: keep-all;}
.login_form h1 { font-size: 2.4rem; font-weight:600; text-align:center; }
.login_form > p { width: 70%; margin: 0 auto 20px auto; padding: 10px; background: #f0f0f0; }
.login_form > ul { 
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px;}
.login_form > ul > li { width: 70%; }
.login_form > ul > li > input { width: 100%; height: 42px; }
.login_form > ul > li > input:focus { border: 1px solid #47a3da !important; }

@media all and (max-width:1280px){
	.login_modal .modal { width: 60%; margin-left: 20%;}
}
@media all and (max-width:900px){
	.login_modal .modal { width: 90%; margin-left: 5%; }
}
@media all and (max-width:500px){
	.login_form > p { width: 100%; }
	.login_form > ul > li { width: 100%; }
}