@charset "utf-8";

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

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

.head_s { 
	font-size: 3.2rem; font-weight: 700; letter-spacing: 1px; 
	@media screen and (max-width: 600px){
		font-size: 2.5rem;
	}
}

/* 템플릿 단위, 모듈 단위 */
.title_xxl { 
	font-size: 3.2rem; font-weight: 700; letter-spacing: 1px; 
	@media screen and (max-width: 600px){
		font-size: 2.5rem;
	}
}
.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: 700; }

/* 본문텍스트 */
.body_l { font-size: 1.9rem; }
.body_m { font-size: 1.7rem; }
.body_s { font-size: 1.5rem; }

/* 추가 정보 또는 작은 항목 */
.detail_l { font-size: 1.7rem; }
.detail_m { font-size: 1.5rem; }
.detail_s { font-size: 1.3rem; }

/* 구성 요소 내부의 텍스트로 사용(button, label, chips...) */
.label_l { font-size: 1.9rem; }
.label_m { font-size: 1.7rem; }
.label_s { font-size: 1.5rem; }
.label_xs { font-size: 1.3rem; }

/* links */
.link_l { font-size: 1.9rem; }
.link_m { font-size: 1.7rem; }
.link_s { font-size: 1.5rem; }

/* 메인 visual title */
.main_title_01 { font-size: 5.0rem; font-weight: 700; }
.main_title_02 { font-size: 2.5rem; font-weight: 700; margin-bottom: 24px;}

/* 서브 페이지 title */
.page_title_01 { 
	position: relative; width: 100%;
	font-size: 3.0rem; line-height: 1.5; text-align: center; word-break: keep-all; 
	padding: 20px 0; background: var(--hl-primary-5);
	@media screen and (max-width: 600px){
		font-size: 2.6rem;
	}
}
.title_01 { 
	position: relative; display: block;
	font-size: 3.6rem; word-break: keep-all;
	margin-bottom: 40px; 
	@media screen and (max-width: 600px){
		font-size: 3.0rem;
	}
}
.title_02 { 
	position: relative; display: inline-block; 
	font-size: 3.2rem; 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.5rem;
	}
}
.title_03 { 
	position: relative; font-size: 2.5rem; font-weight: 500; text-align: left;
	padding-left: 20px; margin-bottom: 20px; 
	&::before { 
		position: absolute; content: ''; display: inline-block; 
		top: 6px; left: 0; width: 8px; height: 100%; margin-top: -5px; background: var(--hl-primary);
	}
	@media screen and (max-width: 600px){
		font-size: 2.1rem;
	}
}
.title_04 { 
	position: relative;
	font-size: 2.1rem; font-weight: 700; 
	padding-left: 20px; margin: 30px 0 10px 0;
	&::before { 
		position: absolute; content: url('../img/title_point.png'); display: inline-block; 
		top: 0; left: 0; width: 12px; height: 12px; 
		margin-top: -14px; margin-left: 10px;
	}
	@media screen and (max-width: 600px){
		font-size: 1.9rem;
	}
}

.title_05 { font-size: 1.9rem; font-weight: 700; margin-bottom: 20px;}
.title_06 { font-size: 1.7rem; font-weight: 700; margin-bottom: 20px;}
.title_07 { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px;}
.title_08 { font-size: 1.4rem; text-align: center; background: var(--hl-icegray-40); color: #fff; padding: 1px 5px; border-radius: 3px; }

.body_01 { font-size: 1.9rem; word-break: keep-all; margin-bottom: 24px;}
.body_02 { font-size: 1.7rem; word-break: keep-all; margin-bottom: 24px;}
.body_03 { font-size: 1.5rem; word-break: keep-all; margin-bottom: 24px;}

/* 오류, 경고, 완료 */
.txt_err { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; width: 100%; text-align: left; color: var(--hl-danger); font-size: 1.5rem; } 
.txt_war { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; width: 100%; text-align: left; color: var(--hl-warning); font-size: 1.5rem; } 
.txt_suc { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; width: 100%; text-align: left; color: var(--hl-success); font-size: 1.5rem; } 
.txt_nor { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; width: 100%; text-align: left; color: var(--hl-gray-70); font-size: 1.5rem; } 

.text_underline { text-decoration: underline; }

@media screen and (max-width: 500px){
	.body_01 { font-size: 1.7rem; line-height: 1.5; }
}


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

	/* size */
	&.xsm { height: 2.6rem; padding: 0 1rem; border-radius: 0.6rem; font-size: 1.5rem; }
	&.sm { height: 4.0rem; padding: 0 1.2rem; border-radius: 0.6rem; font-size: 1.6rem; }
	&.md { height: 4.6rem; padding: 0 1.6rem; border-radius: 0.8rem; font-size: 1.7rem; }
	&.lg { height: 5.6rem; padding: 0 2rem; border-radius: 0.8rem; font-size: 1.9rem; }
	&.xlg { height: 6.4rem; padding: 0 2.4rem; border-radius: 0.8rem; font-size: 1.9rem;}

	/* color */
	&.primary {
		background-color: var(--hl-primary);
		border: 1px solid var(--hl-primary);
		color: var(--hl-white);
		&: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);
		&: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);
		&: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: inherit;border: 0;background-color: inherit;padding: 0 0.4rem;
		&: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/ico_go_20.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-point) !important;
		border: 0; border-radius: 0; border-bottom: 2px solid var(--hl-point); 
		word-break: break-all;
		padding: 4px 10px; background: var(--hl-point-5); transition: all 0.3s; 
		&::after { 
			position: absolute; content: ''; 
			top: 0px; right: 10px; 
			opacity: 0; 
			background: url('../img/btn_download.svg') no-repeat; 
		}
		
		&:focus,
		&:active,
		&:hover {
			color: #fff !important;
			background: var(--hl-point);
			padding-right: 40px !important;
			box-shadow: none;
			&::after {
				opacity: 1; transition: all 0.3s; transition-delay: 0.2s;
			}
		}

		/* size */
		&.xsm { height: auto;
			&::after { width: 18px; height: 18px;}
			&:focus::after,
			&:active::after,
			&:hover::after { transform: translateY(6px); }		
		}
		&.sm {
			&::after { width: 20px; height: 20px;}
			&:focus::after,
			&:active::after,
			&:hover::after { transform: translateY(10px); }
		}
		&.md {
			&::after { width: 24px; height: 24px;}
			&:focus::after,
			&:active::after,
			&:hover::after { transform: translateY(12px); }
		}
	
		@media screen and (max-width: 900px){
			height: auto;
			margin-bottom: 10px; 
			white-space: normal;
			line-height: 1.3;
		}
		@media screen and (max-width: 420px){
		}
	}

	&.btn_right { 
		position: relative; 
		color: var(--hl-point) !important; 
		padding: 0 10px; 
		border: 0; border-radius: 0;
		background: var(--hl-point-5); 
		transition: all 0.3s; 
		&::after { 
			position: absolute; content: ''; 
			width: 20px; height: 20px;
			top: 50%; right: 10px; 
			margin-top: -9px;
			opacity: 0; 
			background: url('../img/btn_right.svg') no-repeat; 
		}
		
		&:focus,
		&:active,
		&:hover {
			color: #fff !important;
			background: var(--hl-point);
			padding-right: 40px !important;
			box-shadow: none;
			&::after {
				opacity: 1;
				transition: all 0.3s; transition-delay: 0.2s;
			}
		}

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

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


/* 테이블
=============================================================== */
.table_area {
	/* 일반스타일 */
	.table_01 { 
		border-top: 3px solid var(--hl-point-90); 
		border-bottom: 1px solid #5d5d5d;
		> thead > tr,
		> tbody > tr {
			&:hover { 
				background-color: var(--hl-gray-5); cursor: pointer; 
			}
			> th {
				text-align: center; word-break: keep-all;
				padding: 10px; 
				background-color: var(--hl-point-5); 
				border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; 
				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 { 
				color: #555; word-break: keep-all;
				padding: 10px; 
				vertical-align: middle; 
				border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; 
				&: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;

		> tbody > tr,
		> thead > tr {
			&:hover { 
				background-color: var(--hl-gray-5); cursor: pointer; 
			}
			> th { 
				text-align: center; font-size: 1.8rem; 
				padding: 10px; 
				background-color: var(--hl-point-5); 
				border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; 
				vertical-align: middle; 
				word-break: keep-all;
				&:first-child { border-left: none; }

				@media all and (max-width:1024px){
					word-break: break-all;
				}
			} 
			> td { 
				color: #555; word-break: keep-all; 
				padding: 10px; 
				vertical-align: middle; 
				border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; 
				&:first-child { border-left: none; }

				@media all and (max-width:1024px){
					word-break: break-all;
				}
				@media all and (max-width:800px){
					display: -webkit-box; display: -ms-flexbox; display: flex; 
					align-items: center; 
					width: 100%; height: auto; 
					font-size: 1.5rem; 
					min-height: 24px; 
					position: relative; 
					padding: 1px 10px 1px 100px; 
					text-align: left; border: none;
					&:before { 
						content: attr(data-before); 
						position: absolute; left: 0px;
						display: block; width: 90px; 
						font-size: 1.5rem; font-weight: bold; text-align: right; 
					}
				}
			} 
			@media all and (max-width:800px){ 
				display: block; 
				width: 100%; 
				padding: 15px 0; 
				border-bottom: 1px dashed #ddd;
			}
		}
		@media all and (max-width:800px){ 
			> colgroup { display: none; }
			> thead, 
			> tbody > tr > th { display: none; }
		}
	}

	/* 모바일에서 column 형식으로 배치 */
	.table_03{
		border-top: 3px solid var(--hl-point-90); 
		> thead, 
		> tbody {
			> tr {
				@media all and (max-width:800px){
					display: -webkit-box; display: -ms-flexbox; display: flex;
					flex-direction: column;
				}
				> th { 
					text-align: center; font-size: 1.8rem; 
					padding: 10px; 
					background-color: var(--hl-point-5); 
					border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; 
					vertical-align: middle; 
					word-break: keep-all;
					&:first-child { border-left: none; }
	
					@media all and (max-width:800px){
						width: 100%;
						border-left: none;
						text-align: left;
						word-break: break-all;
						border-bottom: none;
					}
				} 
				> td { 
					color: #555; word-break: keep-all; 
					padding: 10px; 
					vertical-align: middle; 
					border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; 
					&:first-child { border-left: none; }
					
					@media all and (max-width:800px){
						display: -webkit-box; display: -ms-flexbox; display: flex; 
						align-items: center; 
						width: 100%; height: auto; 
						font-size: 1.5rem; 
						min-height: 24px; 
						position: relative; 
						padding: 10px; 
						text-align: left; border: none;
						word-break: break-all;
						margin-bottom: 20px;
						> input { width: 100%; }
					}
				} 
			} 
		}
	}
	/* 약품정보검색 - 상세보기 */
	.table_04 {
		border-top: 2px solid var(--hl-icegray-40);
		> tbody {
			tr {
				th { 
					width: 15%; 
					font-size: 1.5rem; 
					padding: 10px;
					border-bottom: 1px dashed #ccc;
					background: var(--hl-icegray-5);
				}
				td { 
					font-size: 1.5rem; 
					padding: 10px; 
					border-bottom: 1px dashed #ccc;
					background: #fff;
				}
				@media all and (max-width:800px){
					display: -webkit-box; display: -ms-flexbox; display: flex;
					flex-direction: column;
					> th { width: 100%; }
					> td { width: 100%; }
				}
			}

		}
	}
	/* 링크스타일 */
	& .link { 
		padding: 0 !important; 
		> a { 
			display: block; 
			width: 100%; 
			padding: 10px;
			word-break: keep-all;

			@media all and (max-width:1024px){
				word-break: break-all;
			}
		}
	}
}


/* 단계표시
=============================================================== */
/* 3단  */
.step_wrap_03 {
	width: 100%;

	> .flex {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		align-items: stretch;

		> li {
			position: relative;
			display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
			width: calc(100%/3);
            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; }
		}
		@media screen and (max-width: 800px){
			flex-direction: column;
			> li {
				width: 100%;
				&::after {
					left: 50%;
					right: 0;
					top: 130%;
					margin-left: -12px;
					transform: rotate(90deg);
				}
				&:not(:last-child) { margin-right: 0; margin-bottom: 50px; }
			}
		}
	}
}
/* 4단 */
.step_wrap_04 {
	width: 100%;

	> .flex {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		align-items: stretch;

		> li {
			position: relative;
			display: -webkit-inline-box; display: -ms-inline-flexbox; 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; }
		}
		@media screen and (max-width: 800px){
			flex-direction: column;
			> li {
				width: 100%;
				&::after {
					left: 50%;
					right: 0;
					top: 130%;
					margin-left: -12px;
					transform: rotate(90deg);
				}
				&:not(:last-child) { margin-right: 0; margin-bottom: 50px; }
			}
		}
	}
}

/* box-style 
=============================================================== */
.tBox {
	border-radius: 1.0rem;
	padding: var(--hl-spacer-6);
	margin-bottom: var(--hl-spacer-7);

	> .txt_xsm { font-size: 1.5rem; }
	> .txt_sm { font-size: 1.6rem; }
	> .txt_md { font-size: 1.7rem; }
	> .txt_lg { font-size: 1.9rem; }

	&.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;
	}
}


/* 아코디언
=============================================================== */
.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: var(--hl-spacer-6);
			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: var(--hl-spacer-6);
			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;

	&[aria-hidden='true']{ display: none; }

	.layer_area {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		flex-direction: column;
		position: relative;
		z-index: 100;
		width: 84.6rem;
		height: auto;
		min-height: auto;
		margin: 10% auto;
		border-radius: 10px;
		outline-color: transparent;
		transition: outline-color 0.1s;
		background: var(--hl-white);

		/* 위에서 아래로 내려오는 애니메이션이 안됨 */
		&.open { top: 0; opacity: 1; transition: all 0.3s; }
	
		> .layer_top { 
			display: -webkit-box; display: -ms-flexbox; 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 {
			padding: var(--hl-spacer-6);

			/* 스크롤 박스 */
			> .scroll_box {
				max-height: 400px;
				padding: 10px;
				background: var(--hl-gray-5);
				overflow-y: auto;

				&::-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;
				}
			}
		}
		> .layer_bottom {
			display: -webkit-box; display: -ms-flexbox; display: flex;
			align-items: center;
			justify-content: flex-end;
			flex-direction: row;
			gap: 0.8rem;
			width: 100%;
			padding: var(--hl-spacer-6);
		}

		> .btn_close {
			position: absolute;
			display: inline-block;
			top: 24px;
			right: 20px;
			width: 2.0rem;
			height: 2.0rem;
			background-size: 2rem;
			background: url('../img/ico_close_modal_b.svg') no-repeat center;
		}

		@media all and (max-width:1024px){
			width: 90%;
			margin-left: 5%;
		}
	}

	/* 검은배경 */
	> .modal_back {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.75);
	
		&.in {
			display: block;
			z-index: 99;
			visibility: visible;
		}
	}
}


/* 입력
=============================================================== */
.form_group {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	flex-direction: column;
	gap: var(--hl-spacer-3);
	width: 100%;

	> .form_tit {
		position: relative;
		width: 100%;
		display: -webkit-box; display: -ms-flexbox; display: flex;
		font-size: 1.8rem;
	}

	> .form_con {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		flex-direction: column;
		gap: var(--hl-spacer-3);
		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;
			line-clamp: 1;
		} 


		> .input_group {
			display: -webkit-box; display: -ms-flexbox; display: flex;
			align-items: center;
			gap: 1.0rem;
			width: 100%;

			> .form_select {
				width: 100%;
				height: 5.6rem;
				padding: 0 5.2rem 0 1.6rem;
				background-color: var(--hl-white);
				background-image: url('../img/ico_select_lg.svg');
				background-repeat: no-repeat;
				background-position: center right 1.6rem;
				border: 1px solid var(--hl-gray-60);
				border-radius: 0.8rem;
				font-family: inherit;
				font-size: 1.9rem;
				color: var(--hl-gray-90);
				opacity: 1;

				&:focus {
					border-color: var(--hl-primary);
					border-width: 2px;
					outline-offset: -0.5rem;
				}
			}
		}
	}
	& .form_hint {
		font-size: 1.5rem;
		color: var(--hl-gray-60);
	}
}

.chk_area {
	display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center;
	gap: 10px;

	> .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;
					top: 0;
					left: 0;
					width: 2rem;
					height: 2rem;
					background-color: var(--hl-white);
					border: 1px solid var(--hl-gray-60);
					border-radius: 100%;
					content: "";
					transition: 0.3s;
				}
	
				&:after {
					position: absolute;
					top: calc((2rem - 1rem) / 2);
					left: calc((2rem - 1rem) / 2);
					width: 1rem;
					height: 1rem;
					background-color: var(--hl-white);
					border-radius: 100%;
					z-index: 4;
					content: "";
					transition: 0.3s;
				}
				@media all and (max-width:500px){
					font-size: 1.5rem;
				}
			}
	
			&: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: -webkit-box; display: -ms-flexbox; display: flex;
                margin-right: 5px;

				&:before {
					position: absolute;
					top: 4px;
					left: 0;
					width: 2.0rem;
					height: 2.0rem;
					background-color: var(--hl-white);
					border: 1px solid var(--hl-gray-60);
					border-radius: 4px; /* 체크박스는 사각형 */
					content: "";
					transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
				}
	
				&:after {
					position: absolute;
					top: 4px; left: 0;
					width: 2.0rem;
					height: 2.0rem;
					background-color: var(--hl-white);
					border-radius: 2px; /* 체크박스 내부 */
					z-index: 4;
					content: "";
					transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
					background: url('../img/ico_checked.svg') no-repeat 0 0;
					background-size: contain;
				}
				> span { padding-left: 26px; }
			}
	
			&:checked ~ label:before {
				border-color: var(--hl-primary);
				background-color: var(--hl-primary);
			}
	
			&:focus ~ label {
				outline-offset: 0.4rem;
				outline: 2px solid rgba(36, 107, 235, 0.8);
			}
		}
	}
}


/* paging 
------------------------------------------------------- */
.paging { 
	position: relative; 
	display: -webkit-box; display: -ms-flexbox; display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	justify-content: center;
	margin: 30px 0; 
	text-align: center; 
	> .selected { background: var(--hl-point); border-radius: 6px; color: #fff; }
	> a {
		position: relative; 
		display: inline-flex; 
		justify-content: center;
        align-items: center;
		min-width: 30px; 
		min-height: 30px; 
		&.first::after, &.prev::after, &.last::after, &.next::after { content: ''; display: block; width: 10px; height: 10px; margin: 9px; }
		&.first::after { background: url('../img/first.png') center no-repeat; }
		&.prev::after  { background: url('../img/prev.png') center no-repeat; } 
		&.last::after  { background: url('../img/last.png') center no-repeat; } 
		&.next::after  { background: url('../img/next.png') center no-repeat; } 
		&:not(.selected):hover { background: #eeeeee; color: #000; }
	}
	@media screen and (max-width:800px) {
		> .mo_100 { width: 100%; }
	}
} 


/* sub 페이지 - snb
------------------------------------------------------- */
.snb_nav {
	position: relative;
	width: 100%;
	height: 32px;
	margin-bottom: 40px;
	background: #eeeeee;
	.flex_right {
		display: -webkit-box; display: -ms-flexbox; display: flex;
		justify-content: flex-end;
		> li { 
			display: -webkit-box; display: -ms-flexbox; display: flex;
			align-items: center;
			font-size: 1.3rem;
			color: var(--hl-gray-70);
			> img { width: 20px; opacity: 0.6; }
			> a { 
				> img { width: 20px; opacity: 0.6; }
			}
			> a:hover {
				color: var(--hl-primary);
				text-decoration: underline; 
			}
		}
		> li:nth-of-type(1) {
			> a { 
				display: inline-flex;
				align-items: center;
				height: 32px;
			}
		}
	}
}


/* 공통 - 메인팝업
=============================================================== */
.main_pop { 
	position: fixed; max-width: 1000px; border-radius: 10px; top: 130px; left: 30px; background: #fff; z-index: 1000; box-sizing: border-box;
    -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%);
    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%);
}
.main_pop .popup_top {padding: 10px; text-align: center;}
.main_pop .popup_top img {object-fit: contain; max-width: 980px; width: 100%;}
.main_pop .popup_top p {line-height: 1.5;}
.main_pop .popup_bottom > .flex_right { display: -webkit-box; display: -ms-flexbox; 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;}